/* Formation Privée — coque commune (refonte de l'interface, 15 octobre 2026).
   Complète style.css (chargée avant) : en-tête, navigation à cinq entrées (barre du haut pour l'élève au bureau, barre
   latérale pour le formateur et l'administration, barre du bas au téléphone), menu du compte, onglets. Construite par
   js/coque.js à partir d'une table par espace ; chaque page ne garde dans son HTML que le squelette (logo, nom, pastille).
   Valeurs : docs/DESIGN.md §2 à §5 ; formes reprises des maquettes docs/maquettes/maquette-cliquable-*-20261015.html. */

/* ---------- En-tête commun ---------- */
.header { position: relative; gap: var(--space-3); flex-wrap: nowrap; padding: var(--space-2) var(--space-4); }
.header__brand { min-width: 0; flex: none; }
.header__brand img { width: 44px; height: 44px; border-radius: 50%; }
.header__name strong { font-size: var(--fs-corps); line-height: 1.15; }
.header__name span { line-height: 1.2; }
/* Téléphone : sous le nom, l'espace ; au bureau : le slogan (formateur, administration) ou l'espace (élève). */
.header__slogan { display: none; }
.header__espace { display: block; }
.header__user { flex: none; margin-left: auto; gap: var(--space-3); flex-wrap: nowrap; }
.header__user .pastille-espace, .header__user .header__nom { display: none; }

/* Avatar : initiales dans un cercle, ouvre le menu du compte. */
.avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: var(--color-accent-contrast);
  font-size: var(--fs-petit); font-weight: 700; cursor: pointer;
}
.avatar:empty::before { content: "?"; }
.header--formateur .avatar { background: var(--color-surface); color: var(--color-accent); }
.header--admin .avatar { background: var(--color-surface); color: var(--color-admin); }

/* Menu du compte (liste de liens et « Se déconnecter »). */
.menu-compte {
  position: absolute; right: var(--space-4); top: calc(100% + 6px); z-index: 20; width: min(16.25rem, calc(100vw - 2 * var(--space-4)));
  background: var(--color-surface); color: var(--color-ink);
  border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(27, 36, 48, .16);
  padding: var(--space-2); display: grid;
}
.menu-compte__qui { padding: var(--space-3); border-bottom: 1px solid var(--color-separator); color: var(--color-ink-muted); font-size: var(--fs-petit); overflow-wrap: anywhere; }
.menu-compte a, .menu-compte button {
  display: flex; align-items: center; min-height: var(--cible); padding: 0 var(--space-3); border: 0; border-radius: 8px;
  background: none; color: var(--color-ink); font-size: var(--fs-petit); text-align: left; text-decoration: none; cursor: pointer; width: 100%;
}
.menu-compte a:hover, .menu-compte button:hover { background: var(--color-bg); color: var(--color-ink); }
.menu-compte a[aria-current="page"] { color: var(--color-accent); font-weight: 600; }

/* ---------- Navigation ---------- */
.pastille-nombre { margin-left: 0; }
.coque-nav { display: none; }
.coque-nav a, .barre-laterale a, .barre-bas a {
  position: relative; text-decoration: none; font-weight: 600; color: var(--color-ink-muted);
}
.coque-nav a:hover, .barre-bas a:hover { color: var(--color-accent); }

/* Barre du bas (téléphone et tablette, les trois espaces) : cinq entrées au pouce. */
.barre-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--color-surface);
  border-top: 1px solid var(--color-border); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}
.barre-bas[data-colonnes="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.barre-bas a {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; border-radius: 10px;
  font-size: var(--fs-legende); font-weight: 600; color: var(--color-ink-muted);
}
.barre-bas a .icone { width: 24px; height: 24px; }
.barre-bas a[aria-current="page"] { color: var(--color-accent); font-weight: 700; background: var(--color-accent-pale); }
.barre-bas .pastille-nombre { position: absolute; top: 2px; left: 50%; margin-left: 8px; min-width: 20px; height: 20px; font-size: 12px; padding: 0 5px; }
body[data-coque-barre-bas] .page { padding-bottom: 76px; }
/* Un champ ou un bouton amené à l'écran (clavier, défilement automatique) ne reste jamais caché derrière la barre fixe du bas. */
html:has(body[data-coque-barre-bas]) { scroll-padding-bottom: 5rem; }

/* La barre latérale des anciennes pages est remplacée au téléphone par la barre du bas. */
.barre-laterale { display: none; }

/* ---------- Onglets : liens vers les pages d'une même rubrique ---------- */
.onglets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.onglets a {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--cible); padding: 0 var(--space-4);
  border: 1px solid var(--color-border-field); border-radius: var(--radius-gelule); background: var(--color-surface);
  color: var(--color-ink); font-size: var(--fs-petit); font-weight: 600; text-decoration: none;
}
.onglets a:hover { background: var(--color-surface-alt); color: var(--color-ink); }
.onglets a[aria-current="page"] { background: var(--color-accent-pale); border-color: var(--color-accent); color: var(--color-accent); }
.onglets .pastille-nombre { min-width: 20px; height: 20px; font-size: 12px; padding: 0 5px; }
@media (max-width: 639.98px) {   /* téléphone : une seule rangée qui défile ; js/coque.js amène l'onglet courant dans la vue */
  .onglets { position: relative; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px; margin: -4px -2px calc(var(--space-4) - 4px); }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets a { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- Mode examen : en-tête réduit, sans navigation ---------- */
body[data-mode="examen"] .header__user #pseudo { display: inline-block; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 600px) { body[data-mode="examen"] .header__user .pastille-espace { display: inline-flex; } body[data-mode="examen"] .header__user #pseudo { max-width: 14rem; } }

/* ---------- Bureau : à partir de 960 px ---------- */
@media (min-width: 960px) {
  .header { padding: var(--space-3) clamp(1rem, 4vw, 4rem); gap: var(--space-5); }
  .header__brand img { width: 48px; height: 48px; }
  .header__espace { display: none; }
  .header__slogan { display: block; }
  .header__user .pastille-espace, .header__user .header__nom { display: inline-flex; }
  .header__user .header__nom { font-weight: 600; color: inherit; font-size: var(--fs-petit); }
  .menu-compte { right: clamp(1rem, 4vw, 4rem); }
  .barre-bas { display: none; }
  body[data-coque-barre-bas] .page { padding-bottom: 0; }

  /* Élève : navigation dans l'en-tête ; sous le nom, l'espace (la pastille n'est montrée que pour les deux autres espaces). */
  body[data-espace="eleve"] .header__slogan { display: none; }
  body[data-espace="eleve"] .header__espace { display: block; }
  body[data-espace="eleve"] .header__user .pastille-espace { display: none; }
  body[data-espace="eleve"] .header__user .header__nom { color: var(--color-ink); }
  .coque-nav { display: flex; flex: 1; gap: var(--space-1); }
  .coque-nav a {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--cible); padding: 0 var(--space-4);
    border-radius: var(--radius-bouton); font-size: var(--fs-corps);
  }
  .coque-nav a[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-pale); }
  .coque-nav .icone { display: none; }

  /* Formateur et administration : barre latérale de 232 px. */
  .barre-laterale { display: flex; }
  .barre-laterale a { color: var(--color-ink-muted); font-size: var(--fs-corps); gap: var(--space-3); }
  .barre-laterale a .icone { width: 22px; height: 22px; }
  .barre-laterale a:hover { color: var(--color-accent); }
  .barre-laterale a[aria-current] { background: var(--color-accent-pale); color: var(--color-accent); }
  .barre-laterale .pastille-nombre { margin-left: auto; }
  .disposition-laterale > .main { max-width: var(--max-width-lateral); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); }   /* centré dans la zone à droite de la barre : pas de grand vide à droite sur grand écran */
}

/* Bandeau « hors connexion » (js/coque.js) : collé en haut de la page tant que le navigateur signale l'absence de réseau. */
.bandeau-hors-ligne { position: sticky; top: 0; z-index: 60; padding: var(--space-2) var(--space-4); background: var(--color-gold-bg); color: var(--color-offline-text); border-bottom: 1px solid var(--color-gold-border); text-align: center; font-size: var(--fs-petit); font-weight: 600; }
.bandeau-hors-ligne[hidden] { display: none; }