/* =====================================================================
   espace-apprenant.css — l'habillage des CINQ ÉCRANS de l'espace apprenant.

   CE FICHIER N'INVENTE AUCUNE COULEUR. Deux sources, et seulement deux :

   1. LA STRUCTURE vient de la maquette du 14/08/2026, retrouvée dans les
      objets du commit 30b7f0c (prototype/espace-apprenant-premium/) et
      copiée hors de Git dans
      storage/reference/espace-apprenant-premium/. C'est elle que Cédric a
      gardée le 27/08 : « on garde, par contre on doit rapidement mettre en
      place cela ».

   2. L'HABILLAGE vient de public/socle.css, la charte SERVIE. C'est
      exactement ce que Cédric demandait le 18/08 en regardant la même
      maquette : « joli, franchement déjà bien premium — MAIS PAS
      FORCÉMENT DANS LE THÈME DU RESTE DE LA PLATEFORME ». On garde
      l'architecture, on reprend l'habillage. C'est aussi la voie la moins
      coûteuse.

   ─────────────────────────────────────────────────────────────────────
   POURQUOI LE PRÉFIXE EST « --ea- » ET « .ea- », ET PAS « --mr- »
   ─────────────────────────────────────────────────────────────────────
   La maquette d'origine posait ses jetons en « --mr-* » et ses classes en
   « .mr-* ». LES DEUX SONT DÉJÀ PRIS dans le dépôt servi :
   public/interactions.css définit --mr-or, --mr-creme, --mr-violet… ET
   .mr-bouton, .mr-cartouche, .mr-bulle… avec d'autres valeurs.
   Reprendre ce préfixe ferait s'affronter deux définitions sur toute page
   chargeant les deux feuilles. socle.css avait déjà tranché ce point pour
   lui-même (préfixe « --mrs- ») ; on tient la même règle ici.
   LES NOMS CHANGENT, PAS LE DESSIN : c'est un renommage, pas une reprise
   graphique.

   CE FICHIER NE TOUCHE AUCUN ÉLÉMENT NU en dehors de body/h1/h2/h3/p, et
   il n'est chargé que par les cinq pages de /espace/. Aucune autre page
   servie ne le voit.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,600&family=Caveat:wght@500;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ── Couleurs : RELEVÉES DE socle.css, valeur pour valeur ─────────── */
  --ea-fond:        #18141d;   /* --mrs-fond      */
  --ea-fond-haut:   #241f2c;   /* --mrs-fond-haut */
  --ea-surface:     #212121;   /* --mrs-surface   */
  --ea-surface-haute:#282828;  /* --mrs-surface-haute */
  --ea-bord:        #383838;   /* --mrs-bord      */
  --ea-creme:       #F4F1E0;   /* --mrs-creme     */
  --ea-encre:       #1A1A1A;   /* --mrs-encre     */
  --ea-or:          #EAB939;   /* --mrs-or — l'or est #EAB939, pas #d9ad5c */
  --ea-or-clair:    #F3CE6E;   /* --mrs-or-clair  */
  --ea-carmin:      #C8203D;   /* --mrs-carmin    */
  --ea-violet:      #5F2F8A;   /* --mrs-violet    */

  /* Le crème atténué des pages servies (mes-formations, ma-carte) :
     --encre-soft:#a89bb0. Repris tel quel, c'est la seule valeur de texte
     secondaire de la plateforme. */
  --ea-doux:        #a89bb0;

  /* Le vert de réussite des pages de validation
     (public/relecture-charlotte-matiere-25082026/page.html). */
  --ea-vert:        #8fd39a;

  /* ── Géométrie, relevée de socle.css ─────────────────────────────── */
  --ea-rayon:       14px;      /* --mrs-rayon */
  --ea-rayon-petit: 8px;
  --ea-rayon-plein: 999px;     /* --mrs-rayon-plein */
  --ea-ombre:       0 4px 14px rgba(0,0,0,.34);       /* --mrs-ombre */
  --ea-ombre-haute: 0 7px 20px rgba(0,0,0,.42);       /* --mrs-ombre-haute */
  --ea-duree:       300ms;                            /* --mrs-duree */

  /* ── Espacement, repris de la maquette (échelle inchangée) ───────── */
  --ea-e1: 4px; --ea-e2: 8px; --ea-e3: 12px;
  --ea-e4: 16px; --ea-e5: 24px; --ea-e6: 32px; --ea-e7: 48px;

  /* ── Typographie, relevée des pages servies ──────────────────────── */
  --ea-police:       'Inter', system-ui, sans-serif;
  --ea-police-titre: 'Playfair Display', Georgia, serif;
  --ea-police-main:  'Caveat', cursive;

  /* ── Gabarit, repris de la maquette ──────────────────────────────── */
  --ea-nav-largeur:        248px;
  --ea-nav-hauteur-mobile: 64px;
  --ea-ligne-max:          62ch;   /* longueur de ligne maîtrisée */
}

*{ box-sizing:border-box; }

html, body{
  margin:0; padding:0;
  min-width:360px;  /* le plancher mobile tenu par le reste de la plateforme */
}

body{
  /* Le fond de planche déjà commun à douze pages, repris à l'identique. */
  background: radial-gradient(ellipse at top, var(--ea-fond-haut) 0%, var(--ea-fond) 60%);
  background-attachment: fixed;
  color: var(--ea-creme);
  font-family: var(--ea-police);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

h1,h2,h3{ font-family:var(--ea-police-titre); font-weight:700; margin:0 0 var(--ea-e2); color:var(--ea-creme); }
h1{ font-size:2.1rem; font-weight:900; }
h2{ font-size:1.3rem; }
h3{ font-size:1.05rem; }
p{ margin:0 0 var(--ea-e3); max-width:var(--ea-ligne-max); }
a{ color:var(--ea-or); }

::selection{ background:var(--ea-or); color:var(--ea-encre); }
:focus-visible{ outline:3px solid var(--ea-or); outline-offset:3px; border-radius:var(--ea-rayon-petit); }

/* Garde-fou repris de la maquette : [hidden] masque TOUJOURS, même si
   l'élément porte un display par ailleurs (.ea-vide, .ea-erreur). */
[hidden]{ display:none !important; }

.ea-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.ea-sr-only:focus{
  position:static; width:auto; height:auto; margin:0; clip:auto;
  padding:10px 16px; background:var(--ea-or); color:var(--ea-encre);
  display:inline-block; border-radius:var(--ea-rayon-petit);
}

/* =====================================================================
   LE GABARIT — barre latérale à gauche en bureau, barre basse en mobile.
   C'est le squelette de la maquette, inchangé.
   ===================================================================== */

.ea-shell{ display:flex; min-height:100vh; }

.ea-nav{
  width:var(--ea-nav-largeur); flex-shrink:0;
  border-right:1px solid var(--ea-bord);
  padding:var(--ea-e5) var(--ea-e4);
  position:sticky; top:0; align-self:flex-start; height:100vh;
  display:flex; flex-direction:column; gap:var(--ea-e5);
  overflow-y:auto;
}

/* LE LOGO N'EST PAS ICI, ET C'EST DÉLIBÉRÉ. Arbitrage de Cédric du
   21/08/2026 : le logo va sur l'ACCUEIL DE L'APPRENANT et nulle part
   ailleurs. La barre latérale porte donc le nom en toutes lettres, comme
   la maquette le faisait. */
.ea-marque{
  display:flex; align-items:center; gap:var(--ea-e2);
  font-family:var(--ea-police-titre); font-weight:900;
  letter-spacing:.5px; color:var(--ea-or); font-size:1rem;
  text-decoration:none;
}
.ea-marque-point{
  width:9px; height:9px; border-radius:50%;
  background:var(--ea-or); flex-shrink:0;
}

.ea-nav-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--ea-e1); }

.ea-nav-lien{
  display:flex; align-items:center; gap:var(--ea-e3);
  min-height:44px; padding:10px 14px;
  border-radius:var(--ea-rayon-petit);
  color:var(--ea-doux); text-decoration:none; font-weight:600; font-size:.95rem;
  border-left:3px solid transparent;
  transition:color var(--ea-duree) ease, background var(--ea-duree) ease;
}
.ea-nav-lien:hover{ color:var(--ea-creme); background:var(--ea-surface); }
.ea-nav-lien[aria-current="page"]{
  color:var(--ea-creme); background:var(--ea-surface-haute);
  border-left-color:var(--ea-or);
}

.ea-icone{ display:inline-flex; flex-shrink:0; }
.ea-icone svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.ea-nav-lien[aria-current="page"] .ea-icone{ color:var(--ea-or); }

.ea-nav-pied{ margin-top:auto; display:flex; flex-direction:column; gap:var(--ea-e2); }

.ea-main{ flex:1; min-width:0; }
.ea-main-inner{ max-width:900px; margin:0 auto; padding:var(--ea-e7) var(--ea-e5) var(--ea-e7); }

/* La barre basse mobile — cachée en bureau, seule navigation en étroit. */
.ea-nav-mobile{ display:none; }

@media (max-width:860px){
  .ea-nav{ display:none; }
  .ea-main-inner{ padding:var(--ea-e5) var(--ea-e4) calc(var(--ea-nav-hauteur-mobile) + var(--ea-e6)); }
  h1{ font-size:1.7rem; }

  .ea-nav-mobile{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20;
    height:var(--ea-nav-hauteur-mobile);
    background:var(--ea-surface); border-top:1px solid var(--ea-bord);
  }
  .ea-nav-mobile a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; font-size:.68rem; font-weight:600;
    color:var(--ea-doux); text-decoration:none; min-width:0;
  }
  .ea-nav-mobile a[aria-current="page"]{ color:var(--ea-or); }
  .ea-nav-mobile .ea-icone svg{ width:22px; height:22px; }
  /* L'aide reste au-dessus des cinq choix, y compris avec la zone sûre iOS. */
  body #mr-chat-launcher{
    bottom:calc(var(--ea-nav-hauteur-mobile) + env(safe-area-inset-bottom, 0px) + 12px);
  }
  body #mr-chat-panel{
    bottom:calc(var(--ea-nav-hauteur-mobile) + env(safe-area-inset-bottom, 0px) + 80px);
    max-height:calc(100vh - var(--ea-nav-hauteur-mobile) - env(safe-area-inset-bottom, 0px) - 96px);
    max-height:calc(100dvh - var(--ea-nav-hauteur-mobile) - env(safe-area-inset-bottom, 0px) - 96px);
  }

  /* Le nom de marque revient en tête de page quand la barre latérale s'en va. */
  .ea-marque-mobile{ display:flex; margin-bottom:var(--ea-e4); }
}
.ea-marque-mobile{ display:none; }

/* =====================================================================
   LES PIÈCES — carte, bouton, pastille, barre de progression.
   Formes reprises de socle.css ; seules les compositions sont nouvelles.
   ===================================================================== */

.ea-carte{
  background:var(--ea-surface);
  border:1px solid var(--ea-bord);
  border-radius:var(--ea-rayon);
  box-shadow:var(--ea-ombre);
  padding:var(--ea-e5);
}
.ea-carte-haute{ background:var(--ea-surface-haute); }

/* Le liseré de gauche à la couleur de la formation — repris de
   mes-formations.html, qui pose déjà « border-left:4px solid » teinté par
   accent_hex. C'est le seul endroit où une couleur vient de la BASE et non
   de la charte, et c'est voulu : c'est la couleur de la formation. */
.ea-carte-formation{ border-left:4px solid var(--ea-carmin); }

.ea-pile{ display:flex; flex-direction:column; gap:var(--ea-e4); }
.ea-rangee{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--ea-e3); flex-wrap:wrap; }
.ea-grille-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--ea-e4); }

.ea-bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ea-e2);
  min-height:44px; min-width:44px; padding:11px 18px;
  font:inherit; font-family:var(--ea-police); font-weight:700; font-size:.95rem;
  border-radius:var(--ea-rayon-plein); border:2px solid transparent;
  cursor:pointer; text-decoration:none; box-shadow:var(--ea-ombre);
  transition:transform var(--ea-duree) ease, box-shadow var(--ea-duree) ease, background var(--ea-duree) ease;
}
.ea-bouton:hover{ transform:translateY(-2px); box-shadow:var(--ea-ombre-haute); }
.ea-bouton-or{ background:var(--ea-or); color:var(--ea-encre); }
.ea-bouton-or:hover{ background:var(--ea-or-clair); }
.ea-bouton-fantome{ background:transparent; color:var(--ea-or); border-color:var(--ea-or); }
.ea-bouton-nu{ background:none; border:none; box-shadow:none; color:var(--ea-or); padding-left:0; }
.ea-bouton-nu:hover{ transform:none; box-shadow:none; text-decoration:underline; }
.ea-bouton[aria-disabled="true"]{
  background:none; border-color:var(--ea-bord); color:var(--ea-doux);
  cursor:not-allowed; box-shadow:none;
}
.ea-bouton[aria-disabled="true"]:hover{ transform:none; box-shadow:none; }
.ea-bouton .ea-icone svg{ width:18px; height:18px; }
.ea-bouton-or .ea-icone svg{ fill:currentColor; stroke:none; }

.ea-actions{ display:flex; gap:var(--ea-e3); flex-wrap:wrap; align-items:center; margin-top:var(--ea-e4); }

.ea-pastille{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:var(--ea-rayon-plein);
  border:1px solid var(--ea-bord); background:var(--ea-surface-haute);
  color:var(--ea-doux); font-size:.78rem; font-weight:700;
  white-space:nowrap;
}
.ea-pastille-or{ border-color:var(--ea-or); color:var(--ea-or); }
.ea-pastille-succes{ border-color:var(--ea-vert); color:var(--ea-vert); }
.ea-pastille-alerte{ border-color:var(--ea-or); color:var(--ea-or); background:rgba(234,185,57,.16); }
.ea-pastille-expire{ border-color:var(--ea-carmin); color:#f0919f; background:rgba(200,32,61,.16); }
.ea-pastille-couleur{ /* la couleur vient de la formation, posée en style inline */ }

.ea-doux{ color:var(--ea-doux); }
.ea-main-titre{ font-family:var(--ea-police-main); font-size:1.5rem; color:var(--ea-or); margin:0 0 2px; }

/* ── La barre de progression ─────────────────────────────────────────
   Le remplissage va du carmin à l'or, dans cet ordre : c'est la seule
   dégradation de la maquette qui parle des deux couleurs de la marque, et
   les deux valeurs sont celles de la charte. */
.ea-progres{ margin:var(--ea-e3) 0; }
.ea-progres-piste{
  height:8px; border-radius:var(--ea-rayon-plein);
  background:var(--ea-surface-haute); border:1px solid var(--ea-bord);
  overflow:hidden;
}
.ea-progres-remplissage{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--ea-carmin), var(--ea-or));
  border-radius:var(--ea-rayon-plein);
  transition:width var(--ea-duree) ease;
}
.ea-progres-etiquette{ display:block; margin-top:6px; font-size:.8rem; color:var(--ea-doux); }

/* ── Le détail des étapes ────────────────────────────────────────── */
.ea-details summary{
  cursor:pointer; color:var(--ea-or); font-weight:600; font-size:.9rem;
  min-height:44px; display:flex; align-items:center;
}
.ea-etapes{ list-style:none; padding:0; margin:var(--ea-e2) 0 0; display:flex; flex-direction:column; gap:var(--ea-e2); }
.ea-etape{
  display:flex; align-items:center; gap:var(--ea-e3); flex-wrap:wrap;
  padding:8px 0; border-top:1px solid var(--ea-bord); font-size:.88rem;
}
.ea-etape-nom{ flex:1; min-width:140px; }
.ea-etape-score{ font-weight:700; }
.ea-etape-score.est-validee{ color:var(--ea-vert); }
.ea-etape-score.est-a-repasser{ color:var(--ea-or); }
.ea-etape-score.est-non-commencee{ color:var(--ea-doux); font-weight:400; }
.ea-etape-score.est-en-cours{ color:var(--ea-or-clair); font-weight:400; }
.ea-etape-refaire{ color:var(--ea-or); text-decoration:none; font-size:.82rem; border-bottom:1px solid transparent; }
.ea-etape-refaire:hover{ border-bottom-color:var(--ea-or); }

/* ── Les quatre états d'écran de la maquette ─────────────────────── */
.ea-vide, .ea-erreur{
  background:var(--ea-surface); border:1px dashed var(--ea-bord);
  border-radius:var(--ea-rayon); padding:var(--ea-e6) var(--ea-e5);
  text-align:center; color:var(--ea-doux);
}
.ea-erreur{ border-style:solid; border-color:rgba(200,32,61,.5); }
.ea-vide p, .ea-erreur p{ margin-left:auto; margin-right:auto; }
.ea-etat-icone{ display:inline-flex; margin-bottom:var(--ea-e3); color:var(--ea-or); }
.ea-etat-icone svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

.ea-squelette{
  background:linear-gradient(90deg, var(--ea-surface-haute) 25%, #333 37%, var(--ea-surface-haute) 63%);
  background-size:400% 100%;
  border-radius:var(--ea-rayon-petit);
  animation:ea-miroitement 1.4s ease infinite;
}
@keyframes ea-miroitement{ from{ background-position:100% 50%; } to{ background-position:0 50%; } }

/* ── Le bandeau hors ligne, repris de la maquette ────────────────── */
.ea-hors-ligne{
  display:none; align-items:center; gap:var(--ea-e3);
  background:rgba(234,185,57,.12); border:1px solid var(--ea-or);
  color:var(--ea-creme); border-radius:var(--ea-rayon);
  padding:var(--ea-e3) var(--ea-e4); margin-bottom:var(--ea-e5); font-size:.9rem;
}
.ea-hors-ligne[data-visible="true"]{ display:flex; }
.ea-hors-ligne .ea-icone svg{ width:22px; height:22px; color:var(--ea-or); }

/* ── L'entrée en scène de « Aujourd'hui » ────────────────────────── */
.ea-scene{
  display:block; text-decoration:none; color:inherit;
  background:var(--ea-surface-haute);
  border:1px solid var(--ea-or); border-radius:var(--ea-rayon);
  box-shadow:var(--ea-ombre-haute);
  padding:var(--ea-e6) var(--ea-e5);
  position:relative; overflow:hidden;
}
.ea-scene::before{
  /* Le halo doré de la maquette, en une seule couche translucide. */
  content:''; position:absolute; inset:-40% 40% 40% -20%;
  background:radial-gradient(circle, rgba(234,185,57,.14) 0%, transparent 70%);
  pointer-events:none;
}
.ea-scene > *{ position:relative; }
.ea-scene-etape{
  display:inline-block; font-family:var(--ea-police-main);
  font-size:1.3rem; color:var(--ea-or);
}

/* ── L'entrée, empruntée à socle.css (mêmes durée et courbe) ─────── */
@keyframes ea-entree{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ea-entree{ animation:ea-entree var(--ea-duree) ease both; animation-delay:var(--ea-delai, 0ms); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  .ea-bouton:hover{ transform:none; }
}

/* ── Le pied de page, aligné sur celui de mes-formations.html ────── */
.ea-pied{
  margin-top:var(--ea-e7); padding-top:var(--ea-e4);
  border-top:1px solid var(--ea-bord);
  font-size:.8rem; color:var(--ea-doux);
  display:flex; gap:var(--ea-e4); flex-wrap:wrap; align-items:center;
}
.ea-pied a{ color:var(--ea-or); text-decoration:none; }
.ea-pied a:hover{ text-decoration:underline; }