/* ============================================================================
   Espace membre awoui.com — la plateforme, côté connecté. « 2030+ » : calme,
   spatial, command-first. Externalisé (CSP stricte : pas d'inline). Couleurs
   UNIQUEMENT en var(--x). Deux états : la porte (déconnecté), l'espace (connecté).
   ========================================================================== */
.esp-wrap{max-width:960px;margin:0 auto;padding:0 22px}
.esp-main{min-height:calc(100vh - var(--nav-h));padding:40px 0 80px}
[hidden]{display:none!important}

/* — chargement / porte, centrés — */
.esp-center{min-height:calc(100vh - var(--nav-h) - 60px);display:flex;align-items:center;justify-content:center;text-align:center}
.esp-gate{max-width:440px;padding:44px 36px;border-radius:var(--r-lg);
  background:var(--glass-solid);border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow-float);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.esp-gate .esp-mark{width:52px;height:52px;margin:0 auto 18px;border-radius:15px;display:grid;place-items:center;
  background:var(--brand-conic);box-shadow:var(--sh-ac)}
.esp-gate .esp-mark svg{width:28px;height:28px;color:var(--on-accent)}
.esp-gate h1{margin:0 0 8px;font-family:var(--fd);font-size:24px;font-weight:680;letter-spacing:-.02em}
.esp-gate p{margin:0 0 24px;color:var(--muted);font-size:14.5px;line-height:1.6}
.esp-gate .esp-foot{margin:20px 0 0;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);font-family:var(--fm)}
.esp-load-note{margin-top:14px}
.esp-spin{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand-cyan);
  animation:espSpin .8s linear infinite;margin:0 auto}
@keyframes espSpin{to{transform:rotate(360deg)}}

/* — l'accueil : un souffle d'espace — */
.esp-home{display:flex;flex-direction:column;gap:30px}
/* z-index:30 — MESURÉ, pas déduit. Le panneau de suggestions est déjà en
   position:absolute avec z-index:20, et il passait quand même SOUS les cartes
   de l'écosystème. La pile relevée avec elementsFromPoint() au point de
   recouvrement donnait, du dessus vers le dessous :
     .esp-glyph [pos:static z:auto backdrop-filter:oui]   <- la carte
     .esp-eco / .esp-block
     .esp-cmd-pop [pos:absolute z:20]                     <- le panneau
   Une carte STATIQUE passait donc au-dessus d'un absolu à z-index 20 : c'est
   le backdrop-filter des cartes, qui les compose dans une couche que le
   z-index du panneau n'atteint pas. Trois correctifs essayés et mesurés, deux
   sans effet (retirer le backdrop-filter des cartes ; les passer en
   relative/z-0) ; celui-ci règle tout : c'est le HÉROS ENTIER qui monte dans
   un contexte d'empilement au-dessus des blocs suivants, le panneau avec lui.
   Après : elementsFromPoint rend .esp-ol — le contenu du panneau. */
.esp-hero{position:relative;z-index:30}
.esp-eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--brand-cyan);margin:0 0 12px}
.esp-hello{margin:0;font-family:var(--fd);font-size:clamp(32px,5.2vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.esp-hello .grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.esp-sub{margin:14px 0 0;color:var(--muted);font-size:15.5px;line-height:1.55}
.esp-sub .esp-when{color:var(--faint)}

/* — la barre de commande : la primitive de navigation — */
.esp-cmd{position:relative;margin:16px 0 0;max-width:620px}
.esp-cmd-in{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:999px;
  background:var(--glass-solid);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);transition:border-color .2s,box-shadow .2s}
.esp-cmd-in:focus-within{border-color:var(--brand-cyan);box-shadow:var(--sh-ac)}
.esp-cmd-in svg{flex:0 0 auto;width:18px;height:18px;color:var(--faint)}
.esp-cmd-in input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font-size:15px;font-family:var(--fb)}
.esp-cmd-in input::placeholder{color:var(--faint)}
.esp-kbd{flex:0 0 auto;font-family:var(--fm);font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.esp-cmd-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;padding:6px;border-radius:16px;
  background:var(--glass-menu);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-float);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.esp-opt{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;color:var(--text);text-decoration:none;cursor:pointer}
.esp-opt:hover,.esp-opt.on{background:var(--glass-item-hover)}
.esp-opt .esp-oi{flex:0 0 auto;width:24px;height:24px;color:var(--brand-cyan);display:grid;place-items:center}
.esp-opt .esp-oi svg{width:18px;height:18px}
.esp-opt .esp-ol{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esp-opt .esp-ok{font-family:var(--fm);font-size:10.5px;color:var(--faint)}

/* — l'écosystème : glyphes calmes, une pastille de vie. Rien d'autre. — */
.esp-sect{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
.esp-sect h2{margin:0;font-family:var(--fd);font-size:15px;font-weight:600;color:var(--muted)}
.esp-sect .esp-more{font-size:12.5px;color:var(--faint);text-decoration:none}
.esp-sect .esp-more:hover{color:var(--accent)}
.esp-eco{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.esp-glyph{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 10px;border-radius:var(--r);
  background:var(--glass-solid);border:1px solid var(--glass-border);color:var(--text);text-decoration:none;
  box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:transform .18s,border-color .18s}
.esp-glyph:hover{transform:translateY(-3px);border-color:var(--glass-border-hover)}
.esp-glyph .esp-g{position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--bg-3);color:var(--brand-cyan)}
.esp-glyph .esp-g svg{width:21px;height:21px}
.esp-glyph .esp-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--faint);opacity:.4;border:2px solid var(--glass-solid);transition:background .3s,opacity .3s}
.esp-glyph.up .esp-dot{background:var(--ok);opacity:1}
.esp-glyph.down .esp-dot{background:var(--warn);opacity:1}
@media (prefers-reduced-motion:no-preference){ .esp-glyph.up .esp-dot{animation:espPulse 3.4s ease-in-out infinite} }
@keyframes espPulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 7px 0 var(--ok)}}
.esp-glyph .esp-gn{font-size:12.5px;font-weight:560;text-align:center;line-height:1.25}
.esp-status{margin:14px 0 0;font-size:13px;color:var(--faint);font-family:var(--fm);display:flex;align-items:center;gap:8px}
.esp-status .esp-sdot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px 0 var(--ok)}
.esp-status .esp-sdot.warn{background:var(--warn);box-shadow:0 0 8px 0 var(--warn)}

/* — reprendre : une seule invitation, calme — */
.esp-reprise{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 24px;border-radius:var(--r-lg);
  background:var(--glass-solid);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.esp-reprise .esp-rt{font-family:var(--fd);font-size:18px;font-weight:640;margin:0}
.esp-reprise .esp-rd{margin:4px 0 0;color:var(--muted);font-size:13.5px}

/* — bientôt : la plateforme qui grandit (modules à venir) — */
.esp-soon{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.esp-soonc{padding:18px;border-radius:var(--r);border:1px dashed var(--line-2);background:var(--inset);opacity:.86}
.esp-soonc .esp-si{width:30px;height:30px;color:var(--faint);margin:0 0 12px}
.esp-soonc .esp-si svg{width:22px;height:22px}
.esp-soonc h3{margin:0;font-size:14px;font-weight:620;display:flex;align-items:center;gap:8px}
.esp-soonc .esp-chip{font-family:var(--fm);font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line-2);border-radius:5px;padding:2px 6px}
.esp-soonc p{margin:6px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}

/* — les devoirs : dépôt, évaluation, profil, file de validation —
   Aucune couleur n'est écrite ici : tout vient des jetons d'assets/tokens.css.
   Les trois états qui portent un sens reprennent les paires déjà posées —
   --ok (publié, acquis), --gold (en attente, en cours), --warn (erreur, non
   acquis) — et rien d'autre : un statut inventerait sinon sa propre couleur.
   Le panneau est caché par [hidden] tant que le service n'a pas répondu. */
.esp-devoirs{display:flex;flex-direction:column;gap:12px}
.esp-devoirs .esp-dsect2{margin-top:18px}
.esp-dwho{font-family:var(--fm);font-size:11.5px;color:var(--faint)}
.esp-dcards{display:flex;flex-direction:column;gap:12px}
.esp-dcard{padding:20px 22px;border-radius:var(--r-lg);
  background:var(--glass-solid);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.esp-dcard .btn{font-size:14px;padding:9px 18px}
.esp-dhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.esp-dhead h3{flex:1;min-width:140px;margin:0;font-family:var(--fd);font-size:17px;font-weight:640;letter-spacing:-.01em}
.esp-dcode{font-family:var(--fm);font-size:11px;letter-spacing:.5px;color:var(--brand-cyan)}
.esp-dsur{font-family:var(--fm);font-size:11.5px;color:var(--faint)}
.esp-dnote{font-family:var(--fd);font-size:22px;font-weight:660;letter-spacing:-.02em}
.esp-dnote i{font-style:normal;font-family:var(--fm);font-size:12px;color:var(--faint)}
.esp-dmeta{margin:8px 0 0;font-family:var(--fm);font-size:11.5px;color:var(--faint)}

/* la grille du devoir : ce qui est demandé, et ce que ça vaut */
.esp-dgrille{list-style:none;margin:14px 0 0;padding:0}
.esp-dgrille li{display:flex;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted)}
.esp-dgrille li span{flex:1}
.esp-dgrille li b{font-family:var(--fm);font-size:12px;font-weight:400;color:var(--faint)}

/* le dépôt */
.esp-ddepot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.esp-ddepot input[type=file]{flex:1;min-width:180px;font-family:var(--fm);font-size:12px;color:var(--muted)}
.esp-ddepot input[type=file]::file-selector-button{font-family:var(--fb);font-size:13px;margin-right:12px;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  background:var(--ghost-bg);border:1px solid var(--line-strong);color:var(--text)}
.esp-ddepot input[type=file]::file-selector-button:hover{background:var(--ghost-bg-hover)}
.esp-dmsg{font-family:var(--fm);font-size:11.5px;color:var(--faint)}

/* les rendus d'un devoir */
.esp-drendus{display:flex;flex-direction:column;gap:10px;margin:16px 0 0}
.esp-drendu{padding:14px 16px;border-radius:var(--r);background:var(--inset);border:1px solid var(--line)}
.esp-drline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.esp-drline .esp-dnote{margin-left:auto;font-size:18px}
.esp-dfile{font-family:var(--fm);font-size:12px}
.esp-dwhen{font-family:var(--fm);font-size:11.5px;color:var(--faint)}

/* les statuts d'un rendu — une pastille, pas une phrase */
.esp-dchip{font-family:var(--fm);font-size:10px;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;white-space:nowrap;
  background:var(--inset-2);border:1px solid var(--line-2);color:var(--faint)}
.esp-dchip.s-analyse{background:var(--cyan-soft);border-color:var(--cyan-line);color:var(--cyan)}
.esp-dchip.s-proposee{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.esp-dchip.s-publiee{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.esp-dchip.s-erreur{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}

/* le verdict d'un critère ou d'une compétence */
.esp-dv{font-family:var(--fm);font-size:10px;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;white-space:nowrap;
  background:var(--inset-2);border:1px solid var(--line-2);color:var(--faint)}
.esp-dv.v-acquis{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.esp-dv.v-encours{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.esp-dv.v-non{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}

/* le verdict par critère, avec la preuve citée */
.esp-dcrits{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.esp-dcrits li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px}
.esp-dcrits .esp-dcl{font-size:13.5px;color:var(--muted)}
.esp-dcrits b{font-family:var(--fm);font-size:12px;font-weight:400}
.esp-dpreuve{grid-column:2/-1;font-family:var(--fm);font-size:11.5px;color:var(--faint);quotes:"«\00a0" "\00a0»"}
.esp-dcom{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-sm);background:var(--inset);
  font-size:13.5px;line-height:1.55;color:var(--muted);white-space:pre-line}
.esp-dalerte{margin:12px 0 0;padding:11px 14px;border-radius:var(--r-sm);
  background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--text);
  font-size:12.5px;line-height:1.5}

/* ajuster avant de valider */
.esp-dform{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 0}
.esp-dlab{display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--faint)}
.esp-dlab input,.esp-dlab textarea{font-family:var(--fb);font-size:14px;color:var(--text);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;
  text-transform:none;letter-spacing:normal;resize:vertical}
.esp-dlab input:focus,.esp-dlab textarea:focus{outline:none;border-color:var(--brand-cyan)}
.esp-dlab input{max-width:120px}
.esp-dlab:last-child{flex:3 1 260px}
.esp-dactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.esp-dvide{font-family:var(--fm);font-size:12px;color:var(--faint);padding:14px 0}

/* le profil et la classe : deux tableaux, la même mise */
.esp-dscroll{overflow-x:auto}
.esp-dtable{width:100%;border-collapse:collapse;font-size:13.5px}
.esp-dtable th,.esp-dtable td{padding:10px 12px;text-align:left;border-top:1px solid var(--line);vertical-align:middle}
.esp-dtable thead th{border-top:0;font-family:var(--fm);font-size:11px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--faint);font-weight:400}
.esp-dtable tbody th{font-family:var(--fm);font-size:12px;font-weight:400;color:var(--text);white-space:nowrap}
.esp-dtable td{color:var(--muted)}
.esp-dnum{font-family:var(--fm);font-size:11.5px;color:var(--faint);margin-left:8px;white-space:nowrap}

@media (max-width:560px){
  .esp-dcard{padding:16px}
  .esp-dcrits li{grid-template-columns:auto 1fr}
  .esp-dcrits b{grid-column:2;justify-self:start}
}

/* entrée en scène — décor pur, coupé si mouvement réduit */
@media (prefers-reduced-motion:no-preference){
  .esp-home > *{animation:espRise .55s cubic-bezier(.2,.7,.3,1) both}
  .esp-home > *:nth-child(2){animation-delay:.08s}
  .esp-home > *:nth-child(3){animation-delay:.16s}
  .esp-home > *:nth-child(n+4){animation-delay:.24s}
  @keyframes espRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* — MA PLACE : awoui.com/@me, l'endroit où l'on revient. Dans le héros, sous la
   commande : c'est la chose la plus personnelle de la page. Deux états : une
   adresse connue (« Reprendre », le repère brille) ; aucune (« Obtenir ma
   place » — le mot de l'accueil : une place est une appartenance, et il y a un
   nombre fini de sièges). Tokens seulement, comme tout le fichier. — */
.esp-place{display:flex;align-items:center;gap:14px;margin:22px 0 0;max-width:620px;padding:14px 16px 14px 14px;border-radius:var(--r-lg);
  background:var(--glass-solid);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.esp-place .esp-pmark{flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--bg-3);color:var(--brand-cyan)}
.esp-place.on .esp-pmark{background:var(--brand-conic);color:var(--on-accent);box-shadow:var(--sh-ac)}
.esp-place .esp-pmark svg{width:22px;height:22px}
.esp-place .esp-pbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.esp-place .esp-pk{font-family:var(--fm);font-size:12px;letter-spacing:.2px;text-transform:none;color:var(--faint);line-height:1.15;margin-bottom:1px}
/* dans ce label, le @ reste un caractère comme les autres : ni dégradé, ni graisse */
.esp-place .esp-pk .esp-at{background:none;-webkit-text-fill-color:currentColor;color:inherit;font-weight:inherit}
.esp-place .esp-padr{font-family:var(--fd);font-size:16px;font-weight:640;letter-spacing:-.01em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esp-place.on .esp-padr{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.esp-place .esp-pnote{font-size:12px;color:var(--muted);margin-top:2px;white-space:normal}
.esp-place .esp-pnote button{background:none;border:0;padding:0;color:var(--brand-cyan);font:inherit;cursor:pointer;text-decoration:underline}
.esp-place .esp-pautres{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.esp-place .esp-pchip{font-family:var(--fm);font-size:11px;padding:3px 9px;border-radius:999px;cursor:pointer;
  background:var(--ghost-bg);border:1px solid var(--line-2);color:var(--muted)}
.esp-place .esp-pchip:hover{background:var(--ghost-bg-hover);color:var(--text);border-color:var(--line-strong)}
.esp-place .esp-pgo{flex:0 0 auto;font-size:14px;padding:10px 18px}
@media (max-width:560px){ .esp-place{flex-wrap:wrap} .esp-place .esp-pgo{width:100%;justify-content:center} }

/* — le @ du mot-marque « esp@ce » : l'identité de la place (@me, @nom) portée
   dans le nom même de l'espace. Dégradé de marque, poids un cran au-dessus ;
   l'aria-label du parent garde « espace » pour les lecteurs d'écran. — */
.esp-at{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}

/* — LE RAIL : la marge droite, vivante. Hors de la colonne des 960 px : sur
   grand écran une vraie colonne latérale, collante sous la barre du site ; en
   dessous de 1280 px il redescend sous le contenu (jamais caché). Premier
   module : S'informer — une date, un titre, rien d'autre. Tokens seulement. — */
.esp-rail{max-width:960px;margin:26px auto 0;padding:0 22px}
@media (min-width:1280px){
  .esp-main{display:grid;grid-template-columns:minmax(0,1fr) 268px;align-items:start}
  .esp-main > .esp-wrap{grid-column:1;width:100%;max-width:960px;justify-self:center;margin:0}   /* sans width, l'élément de grille à marges auto se rétractait sur son contenu (865 px mesurés) */
  .esp-rail{grid-column:2;max-width:none;margin:0;padding:0 22px 0 0;position:sticky;top:calc(var(--nav-h) + 26px)}
}
.esp-rsec{padding:16px 18px 10px;border-radius:var(--r);background:var(--glass-solid);border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.esp-rhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 4px}
.esp-rhead .esp-eyebrow{margin:0}
.esp-rlist{list-style:none;margin:0;padding:0}
.esp-rlist li{border-top:1px solid var(--line)}
.esp-rlist li:first-child{border-top:0}
.esp-rlist a{display:block;padding:9px 0;color:var(--text);text-decoration:none}
.esp-rlist time{display:block;font-family:var(--fm);font-size:10.5px;color:var(--faint);margin-bottom:2px}
.esp-rlist span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.35}
.esp-rlist a:hover span{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){ .esp-rail{animation:espRise .6s cubic-bezier(.2,.7,.3,1) both;animation-delay:.3s} }

/* — S'INFORMER, REVU (18/09, soir) — retour d'Antoine sur un écran de 2000 px :
   « petit espace occupé, couleur du titre, police, pas moderne ». Ce bloc ne
   touche QUE le rail. Sur grand écran le conteneur est borné (1520 px) pour
   que le rail cesse d'être collé au bord, et il s'élargit ; le titre quitte
   le monospace cyan pour la police d'affichage ; les entrées prennent de la
   taille, la première est mise en avant. Tokens seulement. — */
@media (min-width:1280px){
  .esp-main{max-width:1520px;margin:0 auto;grid-template-columns:minmax(0,1fr) clamp(300px,22vw,380px);column-gap:clamp(24px,3vw,56px)}
  .esp-rail{padding:0;top:calc(var(--nav-h) + 28px)}
}
.esp-rsec{padding:22px 22px 14px;border-radius:var(--r-lg)}
.esp-rhead{align-items:center;margin:0 0 10px}
.esp-rhead .esp-eyebrow{font-family:var(--fd);font-size:19px;font-weight:650;letter-spacing:-.01em;text-transform:none;
  color:var(--text);margin:0;display:flex;align-items:center;gap:9px}
.esp-rhead .esp-eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand-conic);flex:0 0 auto}
.esp-rhead .esp-more{font-family:var(--fb);font-size:12.5px;color:var(--muted);padding:5px 11px;border-radius:999px;border:1px solid var(--line)}
.esp-rhead .esp-more:hover{color:var(--text);border-color:var(--line-strong);text-decoration:none}
.esp-rlist a{display:block;padding:12px 10px;margin:0 -10px;border-radius:12px;transition:transform .2s}
.esp-rlist a:hover{background:transparent;transform:translateX(3px)}  /* retour d'Antoine (19/09) : plus de voile ni de cyan de marque au survol — l'accent du thème et un léger glissement */
.esp-rlist time{font-family:var(--fb);font-size:12.5px;color:var(--muted);margin-bottom:4px}
.esp-rlist span{font-family:var(--fd);font-size:15px;font-weight:560;line-height:1.35;color:var(--text)}
.esp-rlist a:hover span{color:var(--accent)}
.esp-rlist li:first-child a{padding-top:4px}
.esp-rlist li:first-child span{font-size:17px;-webkit-line-clamp:3}

/* — S'informer, plus discret (retour d'Antoine) : le fond se rapproche de la
   page (surface à 72 %, bordure adoucie, plus d'ombre — c'est elle qui
   décollait la boîte), le noir des titres se calme (texte mélangé au fond,
   graisse 520). Repli sur les valeurs pleines si color-mix est inconnu. — */
.esp-rsec{background:var(--glass-solid);background:color-mix(in srgb,var(--glass-solid) 72%,transparent);
  border-color:var(--glass-border);border-color:color-mix(in srgb,var(--glass-border) 70%,transparent);box-shadow:none}
.esp-rlist li{border-top-color:var(--line);border-top-color:color-mix(in srgb,var(--line) 70%,transparent)}
.esp-rhead .esp-eyebrow{color:var(--text);color:color-mix(in srgb,var(--text) 88%,var(--bg-0))}
.esp-rlist span{font-weight:520;color:var(--text);color:color-mix(in srgb,var(--text) 84%,var(--bg-0))}
.esp-rlist a:hover span{color:var(--accent)}

/* — la progression dans « Ma place » : niveau (XP, comme sur /@me) et mission
   courante. Une ligne fine sous l'adresse : le niveau, sa barre, la mission. — */
.esp-pprog{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.esp-pprog .esp-plvl{font-weight:600;color:var(--text)}
.esp-pprog .esp-pbar{flex:0 0 96px;height:4px;border-radius:3px;background:var(--line);overflow:hidden}
.esp-pprog .esp-pbar i{display:block;height:100%;width:0;background:var(--grad-fill);border-radius:3px;transition:width .5s ease}
.esp-pprog .esp-pxp{font-family:var(--fm);font-size:11px;color:var(--faint)}
.esp-pprog .esp-pmis{flex-basis:100%;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esp-pprog.fini .esp-pmis{color:var(--ok)}
.esp-place .esp-padr{white-space:normal}

/* — LE PROFIL, haut droite du héros : avatar + cadre, prénom, slogan, niveau,
   mission. Le héros devient deux colonnes (≥ 900 px). Les cadres sont des
   anneaux (padding + fond) : marque (conique), unis, et les collector — or
   lumineux, aurore qui tourne, première page (dégradé), pionnier. Tokens only. — */
.esp-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(20px,3vw,40px);align-items:start}
.esp-hero-main{min-width:0}
.esp-profil{grid-column:2;grid-row:1;display:flex;gap:14px;align-items:flex-start;max-width:340px;margin-top:8px;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--glass-solid);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
@media (max-width:900px){ .esp-hero{grid-template-columns:1fr} .esp-profil{grid-column:1;grid-row:auto;max-width:none;margin-top:18px} }
.esp-avw{display:inline-grid;place-items:center;padding:3px;border-radius:50%;background:var(--line);flex:0 0 auto}
.esp-avw.cadre-marque{background:var(--brand-conic)}
.esp-avw.cadre-emeraude{background:var(--emerald)}
.esp-avw.cadre-cyan{background:var(--cyan)}
.esp-avw.cadre-iris{background:var(--iris)}
.esp-avw.cadre-or{background:var(--gold);box-shadow:0 0 16px 0 var(--gold)}
.esp-avw.cadre-aurore{background:var(--brand-conic)}
@media (prefers-reduced-motion:no-preference){ .esp-avw.cadre-aurore{animation:espRing 6s linear infinite} }
@keyframes espRing{to{filter:hue-rotate(360deg)}}
.esp-avw.cadre-premiere{background:var(--grad-fill)}
.esp-avw.cadre-pionnier{background:conic-gradient(from 90deg,var(--gold),var(--iris),var(--gold))}
.esp-av{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--bg-2);color:var(--text);overflow:hidden}
.esp-av .esp-av-svg{width:100%;height:100%}
.esp-av-ini{font-family:var(--fd);font-weight:700;font-size:26px;fill:var(--text)}
.esp-av-ic{color:var(--brand-cyan)}
.esp-pf{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.esp-pfn{font-family:var(--fd);font-size:17px;font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esp-pfs{font-size:12.5px;color:var(--muted);font-style:italic}
.esp-profil .esp-pprog{margin-top:6px}
.esp-profil .esp-plvl{white-space:nowrap}
.esp-profil .esp-pbar{flex:0 1 80px;min-width:40px}
.esp-pmis-c{font-family:var(--fm);font-size:11px;color:var(--faint);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.esp-pprog.fini .esp-pmis-c{color:var(--ok)}
.esp-profil .esp-pmis{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.esp-pfc{align-self:flex-start;margin-top:6px;background:none;border:1px solid var(--line);color:var(--muted);font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;cursor:pointer}
.esp-pfc:hover{color:var(--text);border-color:var(--line-strong)}
/* le panneau Personnaliser */
.esp-custom{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:var(--overlay);background:color-mix(in srgb,var(--bg-0) 62%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.esp-custom-in{width:min(640px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:24px;border-radius:var(--r-lg);
  background:var(--glass-solid);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-float)}
.esp-custom-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.esp-custom h2{margin:0;font-family:var(--fd);font-size:20px;font-weight:650}
.esp-custom h3{margin:18px 0 10px;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.esp-x{background:none;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.esp-x:hover{color:var(--text)}
.esp-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.esp-opt2{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border-radius:var(--r);background:var(--inset);border:1px solid var(--line);color:var(--text);cursor:pointer;font:inherit}
.esp-opt2:hover{border-color:var(--line-strong)}
.esp-opt2.on{border-color:var(--brand-cyan);background:var(--accent-soft)}
.esp-opt2.verrou{opacity:.5;cursor:not-allowed}
.esp-opt2 .esp-av{width:44px;height:44px}
.esp-opt2 .esp-av-ini{font-size:20px}
.esp-opt2-n{font-size:12px;text-align:center;line-height:1.3}
.esp-opt2-n small{display:block;color:var(--faint);font-size:10.5px;margin-top:2px}
#espSlogan{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:inherit;font-size:14px}
#espSlogan:focus{outline:none;border-color:var(--brand-cyan)}
.esp-custom-b{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
/* — LA PAGE PROFIL (/profil) : la carte en grand, la collection (on équipe d'un
   clic ce qui est à soi), les missions. Même moteur que la carte de l'accueil. — */
.esp-main.pr-main{grid-template-columns:minmax(0,1fr)}
.esp-pfa{display:flex;align-items:center;gap:10px;margin-top:6px}
.esp-pfa .esp-pfc{margin-top:0}
.esp-pfl{font-size:12px;color:var(--muted);text-decoration:none}
.esp-pfl:hover{color:var(--text)}
.pr-back{display:inline-flex;align-items:center;gap:6px;margin:4px 0 18px;font-size:13px;color:var(--muted);text-decoration:none}
.pr-back:hover{color:var(--text)}
.pr-hero{display:grid;gap:14px;margin-bottom:8px}
.pr-carte.esp-profil{grid-column:auto;grid-row:auto;max-width:none;margin-top:0;padding:22px 24px;gap:20px;align-items:center}
.pr-carte .esp-avw{padding:4px}
.pr-carte .esp-av{width:88px;height:88px}
.pr-carte .esp-av-ini{font-size:38px}
.pr-carte .esp-pfn{font-size:24px;white-space:normal}
.pr-carte .esp-pfs{font-size:14px}
.pr-carte .esp-pprog{flex-wrap:wrap}                     /* grand : la mission en toutes lettres, sur sa ligne */
.pr-carte .esp-pbar{flex:0 0 160px;max-width:none}
.pr-carte .esp-pmis{-webkit-line-clamp:3}
.pr-adr{font-family:var(--fm);font-size:12.5px;color:var(--brand-cyan)}
@media (max-width:560px){ .pr-carte.esp-profil{flex-direction:column;align-items:flex-start;gap:14px} }   /* téléphone : l'avatar au-dessus, le texte en pleine largeur */
.pr-stats{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0 4px;font-size:13px;color:var(--muted)}
.pr-stats b{color:var(--text);font-weight:600}
.pr-sect{margin:32px 0 12px}
.pr-sect h2{margin:0;font-family:var(--fd);font-size:20px;font-weight:650;letter-spacing:-.01em}
.pr-sect p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.pr-h3{margin:18px 0 10px;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.pr-coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.pr-item{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 10px 14px;border-radius:var(--r-lg);background:var(--glass-solid);border:1px solid var(--glass-border);color:var(--text);cursor:pointer;font:inherit;text-align:center}
.pr-item:hover{border-color:var(--line-strong)}
.pr-item.on{border-color:var(--brand-cyan);background:var(--accent-soft)}
.pr-item.verrou{cursor:not-allowed}
.pr-item.verrou .esp-avw,.pr-item.verrou .pr-nm{opacity:.45}
.pr-item .esp-av{width:52px;height:52px}
.pr-item .esp-av-ini{font-size:24px}
.pr-nm{font-size:13px;font-weight:600;line-height:1.3}
.pr-etat{font-size:11px;color:var(--faint);line-height:1.35}
.pr-item.on .pr-etat{color:var(--brand-cyan)}
.pr-hist{display:grid;gap:12px}
.pr-plan{padding:16px 18px;border-radius:var(--r-lg);background:var(--glass-solid);border:1px solid var(--glass-border)}
.pr-plan-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pr-plan-h b{font-family:var(--fd);font-size:16px;font-weight:650}
.pr-plan-h span{font-family:var(--fm);font-size:11.5px;color:var(--faint);white-space:nowrap}
.pr-plan .esp-pprog{margin-top:8px}
.pr-plan .esp-pbar{flex-basis:140px}
.pr-plan ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.pr-plan li{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:baseline}
.pr-plan li.fait{color:var(--text)}
.pr-plan li.fait::before{content:"✓";color:var(--ok);font-weight:700}
.pr-plan li.cour{color:var(--text)}
.pr-plan li.cour::before{content:"→";color:var(--brand-cyan);font-weight:700}
.pr-plan li.rest::before{content:"·";color:var(--faint)}
.pr-vide{padding:22px;border-radius:var(--r-lg);border:1px dashed var(--line);color:var(--muted);font-size:13.5px;text-align:center}
.pr-vide a{color:var(--text)}
.pr-note{margin:34px 0 0;font-size:12.5px;color:var(--faint)}
/* le sceau : quatre tons, par classes (tokens) */
.sc-0{fill:var(--brand-cyan)}.sc-1{fill:var(--iris)}.sc-2{fill:var(--emerald)}.sc-3{fill:var(--gold)}