/* portal/chrome.css — LE CHROME unifié (couche 5, après core/ui/*).
   Propriété de `portal` (frontière : core/ui/README.md). Sidebar + topbar + grille d'app +
   carte environnement/élève + nav + écran de login + toggle thème. Défini UNE fois pour
   l'élève (et, plus tard, le prof). Un module ne re-style JAMAIS ces classes : il ne fournit
   que le contenu de `.shell-content`. Namespacé `shell-*` pour ne pas heurter les `.edu-*`. */

/* ---- grille d'application ---- */
.shell-app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; position: relative; }

/* ---- sidebar ---- */
.shell-sidebar {
  background: var(--edu-surface); border-right: 1px solid var(--edu-border);
  display: flex; flex-direction: column; gap: 16px; padding: 18px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.shell-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }
.shell-brand-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--edu-accent); color: #fff;
  display: grid; place-items: center; font-family: var(--edu-font-display); font-weight: 700; font-size: 18px;
}
.shell-brand-name { font-family: var(--edu-font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.shell-brand-name span { color: var(--edu-accent); }

/* Repère d'instance « LOCAL / EN LIGNE » (core.instance) — la COULEUR suit la catégorie (= le host),
   jamais le texte. Les deux catégories sont NETTEMENT colorées et distinctes d'un coup d'œil :
   EN LIGNE = aplat plein saillant (c'est la prod, une fausse manip y coûte cher) ; LOCAL = teinte
   calme « sûr » (ta machine). Aucune n'emprunte le ROUGE : il est réservé au point « À l'antenne »
   (état de diffusion, sémantique distincte) — ambre ≠ rouge, vert ≠ rouge. */
.shell-instance {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 4px 11px; border-radius: var(--edu-pill);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid transparent; max-width: 100%;
}
.shell-instance-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.shell-instance-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* EN LIGNE : aplat plein ambre = LE plus saillant (complémentaire du violet ambiant → il ressort).
   --edu-warn reste sombre dans les deux thèmes → texte blanc lisible en clair ET en sombre. */
.shell-instance--online { background: var(--edu-warn); color: #fff; border-color: var(--edu-warn); box-shadow: var(--edu-shadow-sm); }
/* LOCAL : teinte verte douce = calme et « sûr » (tu es sur ta machine). Affirmée mais pas alarmante. */
.shell-instance--local { background: var(--edu-ok-bg); color: var(--edu-ok); border-color: var(--edu-ok); }
/* INCONNU : neutre discret, montre le host brut (jamais deviné local) */
.shell-instance--unknown { background: transparent; color: var(--edu-muted); border-color: var(--edu-border-strong); }

.shell-envcard {
  background: var(--edu-surface-2); border: 1px solid var(--edu-border); border-radius: var(--edu-radius);
  padding: 12px;
}
.shell-env-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--edu-muted); }
.shell-env-name { font-family: var(--edu-font-display); font-weight: 700; font-size: 16px; margin: 2px 0 10px; }
.shell-who { display: flex; align-items: center; gap: 9px; }
.shell-avatar {
  width: 32px; height: 32px; border-radius: var(--edu-pill); background: var(--edu-accent-soft);
  color: var(--edu-accent-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}
.shell-who-name { font-weight: 600; font-size: 13.5px; }
.shell-who-code { font-family: var(--edu-font-mono); font-size: 11px; color: var(--edu-muted); }

/* ---- carte MAINTENANT (persistante) : le dernier élément mis en live par le prof ---- */
.shell-now {
  display: block; margin-top: 10px; padding: 10px 12px; text-decoration: none;
  border: 1px solid var(--edu-ok); border-left: 3px solid var(--edu-ok); border-radius: var(--edu-radius);
  background: color-mix(in srgb, var(--edu-ok) 8%, var(--edu-surface-2)); transition: filter .12s;
}
.shell-now:hover { filter: brightness(1.03); }
.shell-now-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--edu-ok); }
.shell-now-v { font-weight: 700; font-size: 14px; color: var(--edu-text); margin-top: 2px; line-height: 1.25; }
.shell-now-s { font-size: 11.5px; color: var(--edu-muted); margin-top: 2px; }
.shell-now--idle {
  border-color: var(--edu-border); border-left-color: var(--edu-border-strong);
  background: var(--edu-surface-2);
}
.shell-now--idle .shell-now-k { color: var(--edu-muted); }
.shell-now--idle .shell-now-v { color: var(--edu-faint); font-weight: 600; }

/* ---- nav ---- */
.shell-nav { display: flex; flex-direction: column; gap: 2px; }
.shell-nav-title { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--edu-faint); margin: 14px 8px 4px; }
.shell-nav-link {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: var(--edu-radius-sm); font-size: 14px; color: var(--edu-muted);
  transition: background .12s, color .12s;
}
.shell-nav-link:hover { background: var(--edu-surface-2); color: var(--edu-text); }
.shell-nav-link.is-active { background: var(--edu-accent-soft); color: var(--edu-accent-ink); font-weight: 600; }
.shell-nav-link .emo { font-size: 15px; width: 20px; text-align: center; }
.shell-nav-link.is-soon { opacity: .5; cursor: default; }
.shell-nav-link.is-soon:hover { background: none; color: var(--edu-muted); }
.shell-nav-badge {
  margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: var(--edu-pill);
  background: var(--edu-border); color: var(--edu-muted);
}

/* « À l'antenne » (A3) — une surface du module est ACTIVE maintenant (simulateur en live) : l'item
   de nav pulse DOUCEMENT (halo/battement LENT ~2,4 s, jamais un clignotement sec) pour dire « c'est
   maintenant, clique ici ». Signal = pastille rouge « on air » à droite, avec un halo qui respire.
   Le libellé prend un rien de gras pour se distinguer du repos. Theme-aware (token `--edu-live`).
   Sous `prefers-reduced-motion` : la pastille RESTE (état statique discret, dit quand même « live »),
   seul le mouvement s'éteint (accessibilité — pas de flash). */
.shell-nav-link.is-live { color: var(--edu-text); font-weight: 600; }
.shell-nav-link.is-live::after {
  content: ""; margin-left: auto; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--edu-live); box-shadow: 0 0 0 0 var(--edu-live);
  animation: shell-live-pulse 2.4s ease-in-out infinite;
}
@keyframes shell-live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--edu-live) 60%, transparent); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--edu-live) 0%, transparent); opacity: .5; }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--edu-live) 0%, transparent); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shell-nav-link.is-live::after { animation: none; box-shadow: none; }
}

/* ---- pied de barre ----
   🔒 **UNE SEULE LANGUE POUR TOUTE LA BARRE** (23/08, sur le constat de Gabriel du 22/08 : le haut
   en rangées plates, le pied en pastilles blanches cernées — deux langues sur le même écran). Le
   pied ne porte QUE des `.shell-nav-link`, comme la nav du haut. ⛔ Plus une seule `edu-btn` ici.

   ⚠ **DEUX GROUPES, PAS DEUX LANGUES** — et c'est tout le sujet : le pied mélange des
   **DESTINATIONS** (Console, Atelier, L'équipe, L'instance, le retour au dashboard) et des
   **GESTES qui portent un état** (l'interrupteur d'antenne, le thème, la déconnexion). Les fondre
   sans distinction ferait lire l'interrupteur qui met une session EN LIGNE comme une page où
   cliquer. ⇒ un **filet** sépare les deux blocs.
   ⛔ **Aucune classe neuve pour ça** : la règle est **structurelle** (`+`, deux `<nav>` frères) —
   le filet n'existe donc QUE s'il y a vraiment deux groupes. Une barre qui n'a que des gestes (le
   portail stagiaire) ne montre aucun filet orphelin, sans qu'aucun code n'ait à le décider. */
.shell-sidebar-footer { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.shell-sidebar-footer .shell-nav + .shell-nav {
  border-top: 1px solid var(--edu-border); margin-top: 4px; padding-top: 6px;
}
/* Un geste qui porte un état le dit **sur sa rangée** (`.shell-nav-badge`, déjà défini plus haut) :
   l'emoji dit où l'on en est, le libellé dit ce que le clic fera, le badge écrit l'état en toutes
   lettres. ⛔ L'état ne se déguise jamais en lien. */
.shell-sidebar-footer form { display: contents; }

/* ---- zone principale ---- */
.shell-main { display: flex; flex-direction: column; min-width: 0; }
.shell-topbar {
  display: flex; align-items: center; gap: 14px; padding: 16px 28px;
  border-bottom: 1px solid var(--edu-border); position: sticky; top: 0; background: color-mix(in srgb, var(--edu-bg) 86%, transparent);
  backdrop-filter: blur(6px);
  /* ⚑ 5 -> 35 (T1, 2026-07-27, CONSTATÉ AU NAVIGATEUR, pas raisonné). Le bandeau du haut est
     STICKY et porte désormais des COMMANDES (pastille de main d'écriture, avec un panneau qui se
     déplie vers le bas) : à 5, il passait SOUS les barres sticky du CONTENU — `.fil-cmd` (20) et
     `.sec-sticky` (30) — et le panneau était illisible, moitié caché. Le palier choisi tient
     l'ordre déjà établi ailleurs : au-dessus des barres de contenu (20/30), EN DESSOUS du tiroir
     mobile (40/41), de la sidebar (50) et des toasts (50/60), qui doivent continuer de le couvrir. */
  z-index: 35;
}
.shell-hamburger { display: none; font-size: 20px; }
.shell-crumb { font-size: 12px; color: var(--edu-faint); }
.shell-crumb b { color: var(--edu-muted); }
.shell-title { font-family: var(--edu-font-display); font-size: 22px; font-weight: 700; }
.shell-topbar-actions { margin-left: auto; display: flex; gap: 8px; }
.shell-content { padding: 26px 28px 60px; max-width: 1040px; width: 100%; }

/* ---- mode immersif (D) : rail d'icônes fixe + contenu plein cadre (le contenu ne bouge JAMAIS) ----
   Scopé sous .is-immersive : aucune page normale n'est affectée. Au SURVOL (façon barre des tâches,
   souris), le rail se déplie en OVERLAY flottant AU-DESSUS du contenu -> pas de reflow, pas d'écran
   blanc. Les icônes ne bougent NI horizontalement (même abscisse) NI verticalement : on ne révèle que
   ce qui NE POUSSE PAS la nav vers le bas — le nom (même ligne que le logo), les libellés (en ligne) et
   le pied (sous la nav). Les cartes de contexte (classe / MAINTENANT) et les titres de groupe restent
   masqués dans l'overlay. Piloté par `.is-open` (JS). Réutilisable (tableau…). */
.shell-app.is-immersive { grid-template-columns: 60px 1fr; }
.shell-app.is-immersive .shell-topbar { display: none; }
.shell-app.is-immersive .shell-content { padding: 0; max-width: none; flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Colonnes épinglées : quand le rail passe en overlay (position:absolue -> hors grille), le
   simulateur DOIT garder la colonne 2 pleine largeur, sinon il se replie dans les 60px et disparaît. */
.shell-app.is-immersive .shell-main { grid-column: 2; grid-row: 1; }
/* Racine d'un module immersif : elle remplit la zone (le bandeau est retiré -> on récupère sa hauteur).
   Convention pour un futur module plein cadre : rendre sa racine `height:100%`/`flex:1` ici. */
.shell-app.is-immersive .tb-host { height: 100dvh; }

/* Rail (état replié) : 60px, icônes à gauche à la même abscisse qu'en déplié. */
.shell-app.is-immersive .shell-sidebar { grid-column: 1; grid-row: 1; padding: 12px 10px; gap: 8px; overflow: hidden; transition: width .15s ease; }
.shell-app.is-immersive .shell-envcard,
.shell-app.is-immersive .shell-now,
.shell-app.is-immersive .shell-brand-name,
.shell-app.is-immersive .shell-nav-title,
.shell-app.is-immersive .shell-nav-link .lbl,
.shell-app.is-immersive .shell-sidebar-footer { display: none; }
.shell-app.is-immersive .shell-nav-link { justify-content: flex-start; gap: 12px; padding: 9px 8px; }
.shell-app.is-immersive .shell-nav-link .emo { width: 20px; text-align: center; flex: none; }

/* Déplié = overlay flottant : flotte au-dessus du contenu. Même padding/abscisse d'icônes que le rail,
   et RIEN de nouveau au-dessus de la nav -> les icônes ne sautent pas ; seuls les textes apparaissent. */
.shell-app.is-immersive .shell-sidebar.is-open {
  position: absolute; top: 0; left: 0; bottom: 0; width: 264px; z-index: 50;
  overflow-y: auto; box-shadow: var(--edu-shadow-lg);
}
.shell-app.is-immersive .shell-sidebar.is-open .shell-brand-name,
.shell-app.is-immersive .shell-sidebar.is-open .shell-nav-link .lbl,
.shell-app.is-immersive .shell-sidebar.is-open .shell-sidebar-footer { display: revert; }
@media (prefers-reduced-motion: reduce) { .shell-app.is-immersive .shell-sidebar { transition: none; } }

/* ---- accueil / welcome ---- */
.shell-welcome { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.shell-hello { font-family: var(--edu-font-display); font-size: 26px; font-weight: 700; }
.shell-hello .wave { display: inline-block; }
.shell-welcome-badge {
  margin-left: auto; background: var(--edu-surface); border: 1px solid var(--edu-border);
  border-radius: var(--edu-pill); padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--edu-muted);
}

.shell-empty { color: var(--edu-muted); font-size: 14px; padding: 22px; text-align: center;
  border: 1px dashed var(--edu-border-strong); border-radius: var(--edu-radius); }

/* ---- stepper de démarrage (onboarding, cf. core/onboarding) ----
   NB : distinct du « parcours » pédagogique (timeline d'activités authored, côté dashboard). */
.shell-start {
  border: 1px solid var(--edu-border); background: var(--edu-surface); box-shadow: var(--edu-shadow-sm);
  border-radius: var(--edu-radius); padding: 18px 20px; margin-bottom: 24px;
}
.shell-start-h { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--edu-faint); margin-bottom: 14px; }
.shell-steps { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.shell-step { display: flex; align-items: center; gap: 9px; color: var(--edu-muted); }
.shell-step:not(:last-child)::after { content: ""; flex: 1; height: 2px; min-width: 20px;
  background: var(--edu-border-strong); margin: 0 12px; border-radius: 2px; }
.shell-step-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 12.5px; font-weight: 700; font-family: var(--edu-font-mono); flex: none;
  background: var(--edu-surface-2); border: 1.5px solid var(--edu-border-strong); color: var(--edu-muted); }
.shell-step-lab { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.shell-step.is-done { color: var(--edu-text); }
.shell-step.is-done .shell-step-dot { background: var(--edu-ok-bg); border-color: var(--edu-ok); color: var(--edu-ok); }
.shell-step.is-done:not(:last-child)::after { background: var(--edu-ok); }
.shell-step.is-current { color: var(--edu-accent-ink); }
.shell-step.is-current .shell-step-dot { background: var(--edu-accent-soft); border-color: var(--edu-accent); color: var(--edu-accent-ink); }
.shell-start-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--edu-border); }
.shell-start-msg { font-size: 14px; color: var(--edu-text); flex: 1; min-width: 200px; }
.shell-start-cta .edu-btn { margin-left: auto; }
@media (max-width: 620px) { .shell-step-lab { display: none; } .shell-step:not(:last-child)::after { min-width: 14px; } }

/* ---- écran de login ---- */
.shell-login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.shell-login {
  width: 100%; max-width: 380px; background: var(--edu-surface); border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius); box-shadow: var(--edu-shadow-lg); padding: 30px 28px;
}
.shell-login .shell-brand { justify-content: center; margin-bottom: 6px; }
.shell-login h1 { font-family: var(--edu-font-display); font-size: 21px; text-align: center; margin-bottom: 4px; }
.shell-login p.sub { text-align: center; color: var(--edu-muted); font-size: 13.5px; margin-bottom: 20px; }
.shell-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.shell-field label { font-size: 12.5px; font-weight: 600; color: var(--edu-muted); }
.shell-input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--edu-border-strong); border-radius: var(--edu-radius-sm);
  background: var(--edu-surface-2); font-size: 16px; font-family: var(--edu-font-mono); letter-spacing: .12em; text-align: center;
}
.shell-input:focus { border-color: var(--edu-accent); background: var(--edu-surface); }
.shell-input--text {   /* nom / email : texte normal, pas le style « code » (mono, espacé, centré) */
  font-family: var(--edu-font-ui); letter-spacing: normal; text-align: left; font-size: 15px;
}
.shell-error { background: color-mix(in srgb, var(--edu-danger) 12%, transparent); color: var(--edu-danger);
  border-radius: var(--edu-radius-sm); padding: 9px 12px; font-size: 13px; margin-bottom: 16px; text-align: center; }
.shell-login .shell-btn-full { width: 100%; justify-content: center; }

/* ---- accueil élève (racine publique) : saisie code + sessions + lien formateur ---- */
.shell-code-form { margin-bottom: 8px; }
.shell-landing-sep, .shell-landing-hint {
  text-align: center; color: var(--edu-faint); font-size: 12px; margin: 16px 0 10px;
}
.shell-landing-sep { text-transform: uppercase; letter-spacing: .06em; }
.shell-landing-hint { line-height: 1.5; color: var(--edu-muted); }
.shell-landing-link { justify-content: flex-start; margin-bottom: 8px; text-align: left; }
.shell-landing-link:last-of-type { margin-bottom: 0; }
.shell-landing-foot { margin-top: 20px; text-align: center; }
.shell-landing-foot a { font-size: 12px; color: var(--edu-faint); text-decoration: none; }
.shell-landing-foot a:hover { color: var(--edu-muted); text-decoration: underline; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .shell-app { grid-template-columns: 1fr; }
  .shell-sidebar { position: fixed; z-index: 41; width: 264px; transform: translateX(-100%); transition: transform .2s; }
  .shell-app.nav-open .shell-sidebar { transform: none; box-shadow: var(--edu-shadow-lg); }
  /* backdrop : assombrit le contenu quand le menu est ouvert ; un tap dessus le referme (JS) */
  .shell-app.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 40;
    background: color-mix(in srgb, #000 42%, transparent);
  }
  .shell-hamburger { display: block; }
  .shell-content { padding: 20px 16px 48px; }
  .shell-topbar { padding: 14px 16px; }
}