/*
 * Mise en page de la coquille (docs/04 § 6) et primitives de disposition.
 *
 * Structure (templates/base/base.html) :
 *   .u-horizon-line
 *   .l-shell [.l-shell--bare sans utilisateur] [.is-sidebar-collapsed]
 *     .l-sidebar (indigo, repliable)  .l-main > .l-topbar + main.l-content
 * Largeur utile max 1 280 px ; 1 366 × 768 sans défilement horizontal.
 * Valeurs issues de tokens.css ; propriétés logiques uniquement (RTL).
 */

/* ===== Coquille ===== */

.l-shell {
  display: grid;
  grid-template-columns: var(--size-sidebar) minmax(0, 1fr);
  min-block-size: calc(100dvh - var(--size-horizon));
}

.l-shell.is-sidebar-collapsed {
  grid-template-columns: var(--size-sidebar-collapsed) minmax(0, 1fr);
}

.l-shell--bare {
  grid-template-columns: minmax(0, 1fr);
}

.l-main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.l-content {
  flex: 1;
  inline-size: 100%;
  max-inline-size: calc(var(--size-content-max) + 2 * var(--space-6));
  padding: var(--space-6);
}

/* Espacement vertical régulier entre les blocs d'une page */
.l-content > * + * {
  margin-block-start: var(--space-6);
}

/* Page sans coquille (connexion) : contenu centré */
.l-shell--bare .l-content {
  display: grid;
  place-items: center;
  max-inline-size: none;
}

/* ===== Barre latérale indigo ===== */

.l-sidebar {
  /* Anneau de focus lisible sur indigo (dune-500 : 4,98:1) */
  --color-focus-ring: var(--color-dune-500);

  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  block-size: calc(100dvh - var(--size-horizon));
  padding-block: var(--space-3);
  overflow-y: auto;
  background-color: var(--color-sidebar);
  color: var(--color-sidebar-text);
}

.l-sidebar a {
  color: inherit;
}

.l-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-control);
  padding-inline: var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-width) solid var(--color-sidebar-separator);
  /* Corps (16 px) : « CNOU Nouadhibou » tient sur une ligne dans les 15 rem de la barre */
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.l-sidebar__logo,
.c-logo {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  inline-size: var(--size-control);
  block-size: var(--size-control);
  border-radius: var(--radius-field);
  background-color: var(--color-accent);
  color: var(--color-ink-900);
}

.l-sidebar__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
}

/* Groupes titrés (CR-130) : accueil en haut (--start), groupes, aide en bas (--end) */
.l-sidebar__group--end {
  margin-block-start: auto;
}

.l-sidebar__group + .l-sidebar__group {
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width) solid var(--color-sidebar-separator);
}

.l-sidebar__group-title {
  padding-block-end: var(--space-1);
  /* Aligné sur le libellé des liens : marge de liste + trait actif + marge du lien */
  padding-inline: calc(var(--space-2) + var(--size-nav-marker) + var(--space-3));
  color: var(--color-dune-100);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.l-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline: var(--space-2);
}

.l-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-control);
  padding-inline: var(--space-3);
  border-inline-start: var(--size-nav-marker) solid transparent;
  border-radius: var(--radius-field);
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing);
}

.l-sidebar__link:hover {
  background-color: var(--color-sidebar-hover);
  color: inherit;
}

.l-sidebar__link.is-active,
.l-sidebar__link[aria-current="page"] {
  border-inline-start-color: var(--color-accent);
  background-color: var(--color-sidebar-active);
  font-weight: var(--font-weight-semibold);
}

.l-sidebar__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-control);
  margin-inline: var(--space-2);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-field);
  background: transparent;
  color: inherit;
  font-size: var(--font-size-sm);
}

.l-sidebar__toggle:hover {
  background-color: var(--color-sidebar-hover);
}

.l-sidebar__toggle-icon {
  transition: transform var(--motion-duration-base) var(--motion-easing);
}

/* Barre repliée : icônes seules, libellés et titres de groupe toujours lus par les lecteurs
   d'écran (le filet entre les groupes, lui, reste visible) */
.is-sidebar-collapsed :is(.l-sidebar__label, .l-sidebar__group-title) {
  position: absolute;
  inline-size: var(--size-hairline);
  block-size: var(--size-hairline);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.is-sidebar-collapsed :is(.l-sidebar__brand, .l-sidebar__link, .l-sidebar__toggle) {
  justify-content: center;
  padding-inline: var(--space-0);
}

.is-sidebar-collapsed .l-sidebar__toggle-icon {
  transform: scaleX(-1);
}

[dir="rtl"] .is-sidebar-collapsed .l-sidebar__toggle-icon {
  transform: none;
}

/* ===== Barre supérieure ===== */

.l-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  min-block-size: var(--size-topbar);
  padding-block: var(--space-2);
  padding-inline: var(--space-6);
  border-block-end: var(--border-width) solid var(--color-line);
  background-color: var(--color-surface);
}

.l-topbar__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
}

/* Nom et rôle du compte, sur deux lignes : le nom n'est plus tronqué (CR-130). Sélecteur à
   deux classes pour passer devant .c-user-menu__name (components.css, chargé après). */
.l-topbar__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-inline-size: 0;
  line-height: var(--line-height-heading);
  text-align: start;
}

.l-topbar__identity .c-user-menu__name {
  max-inline-size: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.l-topbar__role {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ===== Primitives de disposition ===== */

/* Pile verticale */
.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Grappe horizontale qui passe à la ligne */
.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* Grille de cartes */
.l-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min), 1fr));
  gap: var(--space-4);
}

/* Deux colonnes égales (ex. FR et AR côte à côte dans /styleguide/) */
.l-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--size-split-min), 1fr));
  gap: var(--space-6);
}