/* ============================================================================
   TERRAIN — SYSTÈME DE DESIGN
   Une seule source de vérité : couleurs, typographie, espacement, rayons,
   ombres, durées. Aucun écran ne redéfinit sa propre valeur.
   ============================================================================ */
:root{
  /* Surfaces et texte */
  --paper:#FFFFFF;
  --surface:#F7F8FA;
  --surface-2:#EEF1F6;
  --line:#E4E7EE;
  --line-2:#CFD5E0;
  --ink:#0B0D12;
  --ink-2:#39404E;
  --muted:#6B7385;
  --muted-2:#8A91A1;

  /* Action */
  --blue:#1A6DFF;
  --blue-700:#0B4FCC;
  --blue-50:#EDF3FF;
  --violet:#6E56F8;
  --violet-50:#F1EEFE;

  /* Signaux — employés uniquement pour dire quelque chose */
  --pos:#137A3C;   --pos-50:#E9F6EE;
  --warn:#9A5B00;  --warn-50:#FDF3E4;
  --neg:#C5221F;   --neg-50:#FDECEB;

  /* Rayons — resserrés : un rayon de 18 px sur une carte de 90 px de haut
     donne un aspect « gros bouton ». */
  --r-xs:5px; --r-sm:7px; --r:10px; --r-lg:13px; --r-xl:20px; --r-pill:999px;

  /* Espacement — échelle fluide, resserrée d'environ un cinquième par rapport
     à la 4.x. Aucun composant ne fixe sa propre marge : toute la densité de
     l'application se règle ici. */
  --s1:3px;
  --s2:clamp(5px, 1.2vw, 7px);
  --s3:clamp(7px, 1.8vw, 10px);
  --s4:clamp(10px, 2.4vw, 14px);
  --s5:clamp(12px, 3vw, 17px);
  --s6:clamp(14px, 3.4vw, 20px);
  --s8:clamp(18px, 4.2vw, 28px);
  --s10:clamp(22px, 5vw, 38px);

  --gutter:clamp(13px, 3.6vw, 26px);

  /* Typographie — échelle unique. Les titres sont volontairement bornés bas :
     sur un téléphone, un titre de 28 px mange un quart de l'écran utile. */
  --fs-tab:10px;
  --fs-micro:10.5px;
  --fs-label:clamp(10.5px, 2.5vw, 11.5px);
  --fs-small:clamp(12px, 2.9vw, 13px);
  --fs-body:clamp(13.5px, 3.2vw, 14.5px);
  --fs-lead:clamp(13.5px, 3.3vw, 15.5px);
  --fs-h3:clamp(14px, 3.5vw, 16px);
  --fs-h2:clamp(15.5px, 3.9vw, 19.5px);
  --fs-h1:clamp(18px, 4.4vw, 26px);
  --fs-display:clamp(22px, 5.2vw, 40px);
  --fs-num:clamp(17.5px, 4.4vw, 23px);
  --fs-num-lg:clamp(22px, 5.6vw, 29px);

  /* Hauteurs de contrôle : 44 px reste le plancher tactile, mais les boutons
     secondaires descendent à 34 px — ils ne sont pas la cible principale. */
  --h-btn:clamp(44px, 10.5vw, 46px);
  --h-btn-sm:34px;
  --h-field:44px;

  /* Ombres — deux niveaux, plus discrets. */
  --sh-1:0 1px 1px rgba(11,13,18,.04);
  --sh-2:0 1px 2px rgba(11,13,18,.04), 0 8px 20px -12px rgba(11,13,18,.18);
  --sh-3:0 20px 48px -20px rgba(11,13,18,.30);

  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:120ms; --t:200ms; --t-slow:360ms;

  --nav-h:clamp(46px, 11vw, 54px);
  --tab-h:50px;
}

/* Écrans étroits, ou iPhone en « zoom d'affichage » : le viewport tombe à
   320 pt et tout est ensuite agrandi physiquement. On descend d'un cran, sans
   jamais passer sous la cible tactile de 44 px ni sous 13 px de texte. */
@media(max-width:370px){
  :root{
    --fs-h1:17px; --fs-display:21px; --fs-h2:15px; --fs-h3:13.5px;
    --fs-body:13px; --fs-lead:13px; --fs-small:11.5px; --fs-label:10px;
    --gutter:12px; --nav-h:44px; --tab-h:48px;
    --s4:9px; --s5:11px; --s6:13px; --s8:16px; --s10:20px;
  }
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{
  font-family:var(--f);
  font-size:var(--fs-body);line-height:1.45;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0;font-weight:620;letter-spacing:-.026em;line-height:1.12}
h1{font-weight:640;letter-spacing:-.034em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--blue);color:#fff}

/* ============================================================================
   PRIMITIVES
   ============================================================================ */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:760px}
.row{display:flex;align-items:center}
.grow{flex:1}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.muted{color:var(--muted)}
.eyebrow{font-size:var(--fs-micro);font-weight:600;letter-spacing:.085em;
  text-transform:uppercase;color:var(--muted);display:inline-block;line-height:1.4}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--h-btn);padding:0 var(--s5);border-radius:var(--r);
  background:var(--blue);color:#fff;border:1px solid var(--blue);
  font-size:var(--fs-body);font-weight:580;letter-spacing:-.012em;
  transition:background var(--t-fast) var(--ease),transform 90ms var(--ease),box-shadow var(--t-fast);
  box-shadow:0 1px 2px rgba(11,13,18,.10);
}
.btn:hover{background:var(--blue-700);border-color:var(--blue-700)}
.btn:active{transform:scale(.975)}
.btn[disabled]{opacity:.38;pointer-events:none;box-shadow:none}
.btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{background:var(--surface);border-color:var(--muted-2)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--blue);box-shadow:none}
.btn.quiet:hover{background:var(--blue-50)}
.btn.sm{min-height:var(--h-btn-sm);padding:0 var(--s3);font-size:var(--fs-small);border-radius:var(--r-sm)}
.btn.lg{min-height:calc(var(--h-btn) + 4px);font-size:var(--fs-lead)}
.btn.block{width:100%}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}
.pad{padding:var(--s4)}

.tag{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;
  border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-label);font-weight:600;color:var(--ink-2);white-space:nowrap;
}
.tag.brand{background:var(--blue-50);border-color:#D3E2FF;color:var(--blue-700)}
.tag.violet{background:var(--violet-50);border-color:#DDD6FD;color:#4B35C4}
.tag.pos{background:var(--pos-50);border-color:#CFE9D9;color:var(--pos)}
.tag.warn{background:var(--warn-50);border-color:#F0DFC0;color:var(--warn)}
.tag.neg{background:var(--neg-50);border-color:#F6D5D3;color:var(--neg)}

.hr{height:1px;background:var(--line);border:0;margin:0}

.lift{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t-fast)}
.lift:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.tilt{transform-style:preserve-3d;will-change:transform}
@media(hover:none){.tilt{transform:none !important}}
.parallax{will-change:transform;transition:transform 60ms linear}
@media(prefers-reduced-motion:reduce){.parallax{transform:none !important}}

/* Objets de décor : trois formes en perspective derrière l'accroche. Pur CSS,
   aucune bibliothèque, aucun rendu 3D matériel — le coût est nul. */
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.decor i{
  position:absolute;display:block;border-radius:var(--r-lg);
  border:1px solid var(--line);background:linear-gradient(150deg,#fff,var(--surface));
  box-shadow:var(--sh-2);opacity:.9;
}
.decor i:nth-child(1){width:112px;height:74px;right:-14px;top:6%;transform:perspective(700px) rotateX(16deg) rotateY(-20deg) rotate(4deg)}
.decor i:nth-child(2){width:78px;height:78px;right:76px;top:44%;border-radius:var(--r-pill);
  background:linear-gradient(150deg,var(--blue-50),#fff)}
.decor i:nth-child(3){width:96px;height:60px;right:8px;bottom:8%;transform:perspective(700px) rotateX(-14deg) rotateY(18deg) rotate(-5deg);
  background:linear-gradient(150deg,#fff,var(--violet-50))}
@media(max-width:900px){.decor{opacity:.5}.decor i:nth-child(2){display:none}}
@media(max-width:560px){.decor{display:none}}
.hero{position:relative}
.hero>*{position:relative;z-index:1}

/* ============================================================================
   COQUILLE
   ============================================================================ */
#app{min-height:100dvh;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top);
}
.topbar-in{display:flex;align-items:center;gap:var(--s3);height:var(--nav-h)}
.brandmark{display:inline-flex;align-items:center;gap:9px;font-weight:680;font-size:var(--fs-h2);letter-spacing:-.045em}
.brandmark .logo{width:26px;height:26px;flex:none;display:block}
.brandmark .dot{color:var(--blue)}

.navlinks{display:none;gap:2px;margin-left:var(--s4)}
.navlinks button{
  height:34px;padding:0 12px;border-radius:var(--r-sm);
  font-size:var(--fs-body);font-weight:520;color:var(--muted);
  transition:background var(--t-fast),color var(--t-fast);
}
.navlinks button:hover{background:var(--surface);color:var(--ink)}
.navlinks button[aria-current="true"]{background:var(--surface-2);color:var(--ink);font-weight:620}

.topbar-actions{display:flex;align-items:center;gap:6px}
/* Sur un téléphone, deux boutons pleins dans l'en-tête mangent la largeur et
   se coupent en deux lignes. On n'en garde qu'un, l'autre reste accessible
   depuis la page elle-même. */
@media(max-width:520px){
  .topbar-actions .btn{min-height:32px;padding:0 11px;font-size:var(--fs-small);font-weight:580}
  .topbar-actions .btn.ghost{display:none}
}
.iconbtn{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  transition:background var(--t-fast),border-color var(--t-fast),transform 90ms var(--ease);
}
.iconbtn:hover{background:var(--surface);border-color:var(--line-2)}
.iconbtn:active{transform:scale(.93)}
.iconbtn svg{width:16px;height:16px}
.iconbtn.avatarbtn{border:0;padding:0;width:34px;height:34px}

.xpchip{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper)}
/* Sur les écrans étroits, le niveau suffit : l'XP total reste dans le profil. */
@media(max-width:400px){ .xpchip .sep,.xpchip .eyebrow:last-of-type{display:none} }
.xpchip .n{font-variant-numeric:tabular-nums;font-size:var(--fs-small);font-weight:660;letter-spacing:-.02em}
.xpchip .sep{width:1px;height:14px;background:var(--line)}

main{flex:1;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--s6))}
@media(min-width:880px){
  .navlinks{display:flex}
  main{padding-bottom:56px}
}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.90);backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--tab-h);padding:5px 2px 6px;
  font-size:var(--fs-tab);font-weight:580;letter-spacing:-.01em;color:var(--muted);
  transition:color var(--t-fast);
}
.tabbar button .ico{display:grid;place-items:center;width:42px;height:24px;border-radius:var(--r-pill);transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.tabbar button svg{width:19px;height:19px;transition:transform var(--t) var(--ease)}
.tabbar button[aria-current="true"]{color:var(--blue)}
.tabbar button[aria-current="true"] .ico{background:var(--blue-50)}
.tabbar button[aria-current="true"] svg{transform:translateY(-1px) scale(1.05)}
.tabbar button:active .ico{transform:scale(.9)}
@media(min-width:880px){.tabbar{display:none}}

.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px);
  transform:translateX(-50%) translateY(14px);z-index:95;
  background:var(--ink);color:#fff;padding:11px 16px;border-radius:var(--r);
  font-size:var(--fs-body);font-weight:560;box-shadow:var(--sh-3);
  opacity:0;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);pointer-events:none;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:880px){.toast{bottom:28px}}

#splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--paper);transition:opacity var(--t-slow) var(--ease)}
#splash.off{opacity:0;pointer-events:none}
#splash .mark{width:56px;height:56px;animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}

/* ============================================================================
   MOUVEMENT
   ============================================================================ */
.fade{animation:fade var(--t) var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
[data-reveal].seen{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
}

/* ============================================================================
   EN-TÊTES
   ============================================================================ */
.page-head{padding:var(--s4) 0 var(--s3)}
.page-head h1{font-size:var(--fs-h1);margin:var(--s1) 0 5px}
.page-head p{color:var(--ink-2);max-width:60ch;font-size:var(--fs-small)}
.section{padding:var(--s6) 0}
.section-head{margin-bottom:var(--s4);max-width:62ch}
.section-head h2{font-size:var(--fs-h2);margin:6px 0 5px}
.section-head p{color:var(--ink-2);font-size:var(--fs-small)}

/* ============================================================================
   ACCUEIL PUBLIC
   ============================================================================ */
.hero{padding:var(--s6) 0 var(--s2)}

/* Accroche publique compacte : le premier écran doit contenir le message,
   les deux actions et le début de l'aperçu. */
.lp-hero-c{position:relative;padding:var(--s4) var(--gutter) var(--s4)}
.lp-hero-c>*{position:relative;z-index:1}
.lp-hero-c h1{
  font-size:var(--fs-display);font-weight:660;letter-spacing:-.042em;
  line-height:1.06;max-width:17ch;margin:var(--s2) 0 var(--s3);
}
.lp-hero-c h1 em{font-style:normal;color:var(--blue)}
.lp-hero-c .lede{font-size:var(--fs-lead);color:var(--ink-2);max-width:42ch;margin-bottom:var(--s3)}
.lp-hero-c .hero-cta{display:grid;gap:7px;margin:0}
@media(min-width:560px){.lp-hero-c .hero-cta{grid-template-columns:auto auto;justify-content:start}
  .lp-hero-c .hero-cta .btn{width:auto;padding:0 var(--s6)}}

/* Aperçu de campagne : six chiffres, une barre, aucune phrase superflue. */
.preview{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);box-shadow:var(--sh-1)}
.preview-top{display:flex;align-items:center;gap:8px;padding:9px var(--s4);border-bottom:1px solid var(--line);background:var(--surface)}
.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.preview-metrics>div{background:var(--paper);padding:9px var(--s3)}
.preview-metrics .k{display:block;font-size:var(--fs-micro);color:var(--muted);margin-bottom:1px}
.preview-metrics .v{display:block;font-variant-numeric:tabular-nums;font-size:var(--fs-h3);font-weight:680;letter-spacing:-.035em}
.preview-metrics .v.hi{color:var(--blue-700)}
.preview-bar{display:flex;align-items:center;gap:9px;padding:9px var(--s4);border-top:1px solid var(--line)}
.preview-bar .track{flex:none;width:52px;height:4px}
.preview-bar span:last-child{font-size:var(--fs-label);color:var(--muted)}

.mission.compact{padding:var(--s3) var(--s4)}
.mission.compact h3{margin-bottom:var(--s3)}
.mission.compact .mission-foot{padding-top:var(--s2)}
.hero h1{font-size:var(--fs-display);font-weight:660;letter-spacing:-.045em;max-width:15ch;margin-bottom:var(--s4)}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lede{font-size:var(--fs-lead);color:var(--ink-2);max-width:56ch;margin-bottom:var(--s6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s3)}
.hero-note{font-size:var(--fs-small);color:var(--muted)}
.grid-3{display:grid;gap:var(--s3)}
@media(min-width:780px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.feat{padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.feat h3{font-size:var(--fs-h3);margin:var(--s2) 0 5px}
.feat p{font-size:var(--fs-small);color:var(--ink-2)}
.feat .idx{font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;color:var(--blue)}

/* ============================================================================
   CASCADE
   ============================================================================ */
.cascade{margin-top:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.cascade-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--s4);border-bottom:1px solid var(--line);background:var(--surface)}
.cascade-body{padding:var(--s3) var(--s4)}
.stage{display:block;padding:9px 0;border-bottom:1px solid var(--line)}
.stage:last-child{border-bottom:0}
.stage-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.stage-label{font-size:var(--fs-small);font-weight:620}
.stage-val{font-variant-numeric:tabular-nums;font-size:var(--fs-body);font-weight:680;letter-spacing:-.03em}
.stage-track{height:6px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.stage-fill{height:100%;border-radius:var(--r-pill);background:var(--blue);transform-origin:left;animation:grow .8s var(--ease) both}
.stage:nth-child(2) .stage-fill{background:#3F82FF;animation-delay:.08s}
.stage:nth-child(3) .stage-fill{background:#6E56F8;animation-delay:.16s}
.stage:nth-child(4) .stage-fill{background:#9C8BFB;animation-delay:.24s}
.stage-rate{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--muted);margin-top:6px;display:block}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================================================================
   TABLEAU DE BORD
   ============================================================================ */
.hello{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 0 var(--s3)}
.avatar{
  width:clamp(42px,11vw,50px);height:clamp(42px,11vw,50px);flex:none;border-radius:var(--r-pill);
  display:grid;place-items:center;color:#fff;font-weight:680;
  font-size:clamp(15px,4vw,18px);letter-spacing:-.02em;
  background:linear-gradient(140deg,var(--blue) 0%,var(--violet) 100%);
  box-shadow:0 6px 18px -8px rgba(26,109,255,.7);
}
.avatar.lg{width:clamp(62px,16vw,76px);height:clamp(62px,16vw,76px);font-size:var(--fs-num)}
.avatar.sm{width:34px;height:34px;font-size:var(--fs-small);box-shadow:none}
.hello h1{font-size:var(--fs-h1);margin-bottom:1px}
.hello p{font-size:var(--fs-small);color:var(--muted)}

.levelbar{margin-top:var(--s2)}
.levelbar .meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.levelbar .meta b{font-size:var(--fs-small);font-weight:660}
.levelbar .meta span{font-variant-numeric:tabular-nums;font-size:var(--fs-label);color:var(--muted)}
.track{height:6px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.track i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--blue),var(--violet));transition:width .9s var(--ease)}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(min-width:560px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.stat .k{font-size:var(--fs-label);font-weight:560;color:var(--muted);display:block;margin-bottom:3px}
.stat .v{font-variant-numeric:tabular-nums;font-size:var(--fs-num);font-weight:680;letter-spacing:-.045em;display:block;line-height:1.04}
.stat .s{font-size:var(--fs-label);color:var(--muted);margin-top:2px;display:block}

.next{position:relative;overflow:hidden;padding:var(--s4);border-radius:var(--r-lg);background:linear-gradient(150deg,#0B0D12 0%,#131A2C 55%,#1B2340 100%);color:#fff;box-shadow:var(--sh-2)}
.next .eyebrow{color:#93A4C4}
.next h2{font-size:var(--fs-h2);margin:7px 0 5px;color:#fff}
.next p{font-size:var(--fs-small);color:#AEBBD4;margin-bottom:var(--s4)}
.next .btn{background:#fff;color:var(--ink);border-color:#fff}
.next .btn:hover{background:#E9EDF6;border-color:#E9EDF6}
.next::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(26,109,255,.42),transparent 68%);pointer-events:none}

/* ============================================================================
   MISSIONS
   ============================================================================ */
.mission-list{display:grid;gap:var(--s3)}
@media(min-width:720px){.mission-list{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.mission-list{grid-template-columns:repeat(3,1fr)}}
.mission{
  display:block;width:100%;text-align:left;padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t-fast);
}
.mission:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.mission:active{transform:scale(.987)}
.mission-top{display:flex;align-items:center;gap:6px;margin-bottom:var(--s3);flex-wrap:wrap}
.mission-ico{
  width:26px;height:26px;flex:none;display:grid;place-items:center;margin-right:2px;
  border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-2);
}
.mission-ico svg{width:15px;height:15px}
.mission-foot .btn{pointer-events:none}
.mission h3{font-size:var(--fs-h3);margin-bottom:4px;letter-spacing:-.025em;line-height:1.25}
.mission p{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:var(--s3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mission-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:var(--s3);border-top:1px solid var(--line)}
.kv{display:flex;flex-direction:column;gap:1px}
.kv .k{font-size:var(--fs-micro);font-weight:560;color:var(--muted)}
.kv .v{font-variant-numeric:tabular-nums;font-size:var(--fs-small);font-weight:680;letter-spacing:-.03em}
.mprog{display:flex;align-items:center;gap:9px;margin-bottom:var(--s3)}
.mprog .track{flex:1;height:5px}
.mprog .lab{font-variant-numeric:tabular-nums;font-size:var(--fs-label);font-weight:600;color:var(--muted);white-space:nowrap}

/* ============================================================================
   BRIEF ET DÉCISIONS
   ============================================================================ */
.brief{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s5)}
.brief-head{padding:var(--s4);background:var(--surface);border-bottom:1px solid var(--line)}
.brief-head h2{font-size:var(--fs-h2);margin:7px 0 6px}
.brief-head p{font-size:var(--fs-small);color:var(--ink-2);line-height:1.5}
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(min-width:660px){.brief-grid{grid-template-columns:repeat(4,1fr)}}
.brief-cell{background:var(--paper);padding:var(--s3) var(--s4)}

.progress-rail{
  position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top));z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:10px 0;
}
.progress-rail-in{display:flex;align-items:center;gap:var(--s3)}
.pbar{flex:1;height:5px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.pbar span{display:block;height:100%;border-radius:var(--r-pill);background:var(--blue);transition:width var(--t-slow) var(--ease)}

.decision{margin-bottom:var(--s6)}
.decision-head{margin-bottom:var(--s3)}
.decision-head h3{font-size:var(--fs-h3);margin:5px 0 4px}
.decision-head p{font-size:var(--fs-small);color:var(--muted)}
.options{display:grid;gap:9px}
.opt{
  display:block;width:100%;text-align:left;padding:var(--s3) var(--s4);min-height:52px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  transition:border-color var(--t-fast),background var(--t-fast),transform 90ms var(--ease),box-shadow var(--t-fast);
}
.opt:hover{border-color:var(--line-2);background:var(--surface)}
.opt:active{transform:scale(.99)}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-50);box-shadow:inset 0 0 0 1px var(--blue),0 2px 10px -6px rgba(26,109,255,.7)}
.opt-title{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body);font-weight:620;letter-spacing:-.012em;line-height:1.35}
.opt-title .mark{flex:none;width:17px;height:17px;border-radius:50%;border:1.6px solid var(--line-2);margin-top:2px;position:relative;transition:border-color var(--t-fast),background var(--t-fast)}
.opt[aria-pressed="true"] .mark{border-color:var(--blue);background:var(--blue)}
.opt[aria-pressed="true"] .mark::after{content:"";position:absolute;inset:4px;background:#fff;border-radius:50%}
.opt-note{font-size:var(--fs-small);color:var(--muted);margin:4px 0 0 28px;line-height:1.42}

.launchbar{position:sticky;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:var(--s3) 0;margin-top:var(--s2)}
@media(max-width:879px){.launchbar{bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}}

/* ============================================================================
   RÉSULTAT
   ============================================================================ */
.verdict{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s3)}
.verdict-head{padding:var--s4);display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.score-ring{position:relative;width:clamp(84px,22vw,104px);height:clamp(84px,22vw,104px);flex:none}
.score-ring svg{transform:rotate(-90deg)}
.score-ring circle.arc{transition:stroke-dashoffset 1.1s var(--ease)}
.score-ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-size:var(--fs-num-lg);font-weight:700;letter-spacing:-.05em}
.score-ring .val small{font-size:var(--fs-micro);font-weight:600;color:var(--muted);letter-spacing:.08em;margin-top:1px}
.verdict-text{flex:1;min-width:220px}
.verdict-text h2{font-size:var(--fs-h2);margin:7px 0 5px}
.verdict-text p{font-size:var(--fs-small);color:var(--ink-2)}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:660px){.metrics{grid-template-columns:repeat(4,1fr)}}
.metric{background:var(--paper);padding:var(--s3) var(--s4)}
.metric .k{font-size:var(--fs-micro);font-weight:560;color:var(--muted);display:block;margin-bottom:3px}
.metric .v{font-variant-numeric:tabular-nums;font-size:var(--fs-num);font-weight:680;letter-spacing:-.04em;display:block;line-height:1.1}
.metric .d{font-size:var(--fs-micro);margin-top:2px;display:block;color:var(--muted)}

.ledger{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ledger-head{padding:var(--s3) var(--s4);background:var(--surface);border-bottom:1px solid var(--line)}
.ledger-head h3{font-size:var(--fs-h3);margin-top:5px}
.ledger-head p{font-size:var(--fs-small);color:var(--muted);margin-top:4px}
.entry{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.entry-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.entry-label{font-size:var(--fs-micro);font-weight:620;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.entry-choice{font-size:var(--fs-body);font-weight:640;letter-spacing:-.015em;margin-top:2px}
.entry-delta{font-variant-numeric:tabular-nums;font-size:var(--fs-small);font-weight:680;white-space:nowrap;flex:none;letter-spacing:-.02em}
.entry-why{font-size:var(--fs-small);color:var(--ink-2)}
.entry-fix{margin-top:9px;padding:10px 12px;background:var(--surface);border-left:2px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--fs-small);color:var(--ink-2)}
.entry-fix b{color:var(--ink);font-weight:640}

/* « Et si vous aviez décidé autrement ? » */
.whatif{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);box-shadow:var(--sh-2)}
.whatif-head{padding:var(--s5);background:linear-gradient(150deg,#0B0D12,#141C31);color:#fff}
.whatif-head .eyebrow{color:#8FA3C7}
.whatif-head h3{font-size:var(--fs-h2);margin:9px 0 6px;color:#fff;letter-spacing:-.03em}
.whatif-head p{font-size:var(--fs-small);color:#A9B7D2}
.whatif-body{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);padding:var(--s5)}
@media(max-width:540px){.whatif-body{grid-template-columns:1fr;gap:var(--s2)}}
.wi-col{padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-align:center}
.wi-col.best{background:var(--blue-50);border-color:#D3E2FF}
.wi-col .k{font-size:var(--fs-micro);font-weight:620;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:7px}
.wi-col .v{font-variant-numeric:tabular-nums;font-size:var(--fs-h1);font-weight:700;letter-spacing:-.05em;display:block;line-height:1}
.wi-col.best .v{color:var(--blue-700)}
.wi-col .lab{font-size:var(--fs-label);color:var(--ink-2);margin-top:7px;display:block}
.wi-col .sub{font-variant-numeric:tabular-nums;font-size:var(--fs-label);color:var(--muted);margin-top:2px;display:block}
.wi-vs{display:grid;place-items:center;font-size:var(--fs-label);font-weight:660;color:var(--muted-2);letter-spacing:.06em}
.wi-delta{display:flex;align-items:center;justify-content:center;gap:var(--s6);flex-wrap:wrap;padding:var(--s4) var(--s5);border-top:1px solid var(--line);background:var(--paper)}
.wi-delta .item{text-align:center}
.wi-delta .k{font-size:var(--fs-micro);font-weight:620;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block}
.wi-delta .v{font-variant-numeric:tabular-nums;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.04em;display:block;margin-top:3px}
.wi-note{padding:0 var(--s5) var(--s5);font-size:var(--fs-small);color:var(--ink-2)}
.wi-reveal{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.wi-reveal.on{opacity:1;transform:none}

.cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:var(--s4)}
.cmp .side{text-align:center}
.cmp .side .k{font-size:var(--fs-micro);font-weight:620;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp .side .v{font-variant-numeric:tabular-nums;font-size:var(--fs-h1);font-weight:700;letter-spacing:-.045em}
.cmp .arrow{color:var(--muted-2);font-size:var(--fs-h2)}

/* ============================================================================
   COACH
   ============================================================================ */
.coach-scrim{position:fixed;inset:0;z-index:88;background:rgba(11,13,18,.46);opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease)}
.coach-scrim.on{opacity:1;pointer-events:auto}
.spotlight{position:fixed;z-index:89;border-radius:var(--r);pointer-events:none;box-shadow:0 0 0 9999px rgba(11,13,18,.52);border:2px solid var(--blue);transition:top .32s var(--ease),left .32s var(--ease),width .32s var(--ease),height .32s var(--ease),opacity var(--t)}
.coach-panel{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 18px);transform:translateX(-50%) translateY(24px);
  width:min(560px,calc(100% - 28px));z-index:92;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:var(--s5);
  opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.coach-panel.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.coach-top{display:flex;align-items:center;gap:11px;margin-bottom:var(--s3)}
.coach-av{width:40px;height:40px;flex:none;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.coach-av svg{display:block;width:100%;height:100%}
.coach-name{font-size:var(--fs-body);font-weight:660;letter-spacing:-.02em}
.coach-role{font-size:var(--fs-label);color:var(--muted)}
.coach-say{font-size:var(--fs-body);line-height:1.55}
.coach-say b{font-weight:660}
.coach-foot{display:flex;align-items:center;gap:8px;margin-top:var(--s5)}
.coach-dots{display:flex;gap:5px}
.coach-dots i{width:5px;height:5px;border-radius:50%;background:var(--line-2);transition:background var(--t)}
.coach-dots i.on{background:var(--blue)}
.coach-hint{display:flex;align-items:flex-start;gap:12px;padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.coach-hint .coach-av{width:34px;height:34px}
.coach-hint p{font-size:var(--fs-small);color:var(--ink-2)}
.coach-hint b{color:var(--ink);font-weight:640}

/* ============================================================================
   VIDÉOS
   ============================================================================ */
.vid-grid{display:grid;gap:var(--s3)}
@media(min-width:720px){.vid-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.vid-grid{grid-template-columns:repeat(3,1fr)}}
.vid-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t-fast)}
.vid-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.vid-card[hidden]{display:none}
.vid-card[data-done="1"]{border-color:#CFE9D9}
.vid-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--surface-2);border:0;border-bottom:1px solid var(--line);padding:0;cursor:pointer;overflow:hidden}
.vid-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.vid-card:hover .vid-thumb img{transform:scale(1.04)}
.vid-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,0) 42%,rgba(11,13,18,.38));pointer-events:none}
.vid-play{position:absolute;left:12px;bottom:14px;z-index:2;display:flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(11,13,18,.2);font-size:var(--fs-small);font-weight:640;color:var(--ink);letter-spacing:-.015em}
.vid-play svg{width:14px;height:14px;fill:var(--blue);stroke:none}
.vid-state{position:absolute;right:10px;top:10px;z-index:2;height:26px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.95);font-size:var(--fs-label);font-weight:640;color:var(--pos);box-shadow:0 2px 8px rgba(11,13,18,.16)}
.vid-dur{
  position:absolute;right:10px;bottom:12px;z-index:2;
  font-variant-numeric:tabular-nums;font-size:var(--fs-micro);font-weight:600;color:#fff;
  background:rgba(11,13,18,.72);padding:2px 7px;border-radius:var(--r-xs);
}
.vid-seen{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.35);z-index:3}
.vid-seen i{display:block;height:100%;background:var(--blue)}
.vid-body{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;flex:1}
.vid-meta{display:flex;align-items:center;gap:6px;margin-bottom:9px;flex-wrap:wrap}
.vid-title{font-size:var(--fs-h3);font-weight:640;letter-spacing:-.02em;line-height:1.3;margin-bottom:6px}
.vid-goal{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:var(--s3)}
.vid-keep{margin-top:auto;padding:11px 12px;background:var(--surface);border-left:2px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0}
.vid-keep .k{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-700);display:block;margin-bottom:4px}
.vid-keep p{font-size:var(--fs-small);color:var(--ink-2)}
.vid-actions{display:flex;gap:8px;margin-top:var(--s3)}

.lightbox{position:fixed;inset:0;z-index:96;display:none;align-items:center;justify-content:center;padding:var(--s4);background:rgba(11,13,18,.7);backdrop-filter:blur(6px)}
.lightbox.on{display:flex;animation:fade var(--t) var(--ease)}
.lightbox-in{width:100%;max-width:920px;background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.lightbox-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0B0D12}
.lightbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox-bar{display:flex;align-items:center;gap:var(--s3);padding:13px var(--s4);border-top:1px solid var(--line);flex-wrap:wrap}
.lightbox-bar .t{font-size:var(--fs-body);font-weight:640;flex:1;min-width:160px;letter-spacing:-.015em}
.lightbox-bar .t span{display:block;font-weight:400;font-size:var(--fs-label);color:var(--muted);margin-top:2px}

/* ============================================================================
   EXERCICES
   ============================================================================ */
.q-shell{max-width:700px;margin:0 auto}
.q-rail{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.q-num{font-variant-numeric:tabular-nums;font-size:var(--fs-label);font-weight:620;color:var(--muted);white-space:nowrap}
.q-meta{display:flex;align-items:center;gap:6px;margin-bottom:var(--s3);flex-wrap:wrap}
.q-stem{font-size:var(--fs-h2);font-weight:640;letter-spacing:-.025em;line-height:1.32;margin-bottom:var(--s4)}
.q-ctx{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:var(--s4);background:var(--surface)}
.q-ctx table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.q-ctx th{text-align:left;font-weight:620;font-size:var(--fs-label);color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
.q-ctx td{padding:10px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.q-ctx tr:last-child td{border-bottom:0}
.datarow{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.datarow:last-child{border-bottom:0}
.datarow b{font-variant-numeric:tabular-nums;font-weight:660}
.q-opt{display:block;width:100%;text-align:left;padding:var(--s3) var(--s4);margin-bottom:8px;min-height:50px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-size:var(--fs-body);transition:border-color var(--t-fast),background var(--t-fast),transform 90ms var(--ease)}
.q-opt:hover:not([disabled]){border-color:var(--line-2);background:var(--surface)}
.q-opt:active:not([disabled]){transform:scale(.99)}
.q-opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-50);box-shadow:inset 0 0 0 1px var(--blue)}
.q-opt[data-state="ok"]{border-color:var(--pos);background:var(--pos-50);box-shadow:inset 0 0 0 1px var(--pos)}
.q-opt[data-state="ko"]{border-color:var(--neg);background:var(--neg-50);box-shadow:inset 0 0 0 1px var(--neg)}
.q-opt .txt{display:block}
.q-opt .why{display:block;margin-top:7px;font-size:var(--fs-small);color:var(--ink-2)}
.q-principle{margin-top:var(--s4);padding:13px var(--s4);background:var(--surface);border-left:2px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--fs-small);color:var(--ink-2)}
.q-principle span{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-700);margin-bottom:4px}
.rank-item{display:flex;align-items:center;gap:11px;padding:12px var(--s4);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--paper);font-size:var(--fs-body)}
.rank-item .n{width:22px;height:22px;flex:none;border-radius:var(--r-xs);background:var(--surface-2);display:grid;place-items:center;font-size:var(--fs-label);font-weight:660;font-variant-numeric:tabular-nums}
.rank-item .mv{display:flex;gap:4px;margin-left:auto}
.rank-item .mv button{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-2)}
.rank-item .mv button:hover{background:var(--surface)}
.match-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin-bottom:9px}
.match-left{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:var(--fs-body);font-weight:600}
.match-row select{width:100%;min-height:var(--h-field);padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-size:var(--fs-body)}
input#calcin{width:100%;min-height:var(--h-field);padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--r);font-family:var(--f);font-variant-numeric:tabular-nums;font-size:var(--fs-h2);font-weight:640;letter-spacing:-.03em}
input#calcin:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-50)}
.unit{font-size:var(--fs-body);color:var(--muted);margin-left:10px}

/* Centre d'entraînement */
.train{position:relative;overflow:hidden;padding:var(--s5);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);box-shadow:var(--sh-1)}
.train h2{font-size:var(--fs-h2);margin:7px 0 5px}
.train p{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:var(--s4)}
.streak{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:var(--r-pill);background:var(--warn-50);border:1px solid #F0DFC0;color:var(--warn);font-size:var(--fs-label);font-weight:640}

/* ============================================================================
   PROGRESSION
   ============================================================================ */
.skill-row{display:flex;align-items:center;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line)}
.skill-row:last-child{border-bottom:0}
.skill-row .name{width:clamp(96px,26vw,130px);flex:none;font-size:var(--fs-small);font-weight:580}
.skill-row .bar{flex:1;height:6px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.skill-row .bar span{display:block;height:100%;border-radius:var(--r-pill);transition:width .9s var(--ease)}
.skill-row .pct{font-variant-numeric:tabular-nums;font-size:var(--fs-small);font-weight:660;width:44px;text-align:right;flex:none}

.empty{padding:var(--s10) var(--s5);text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface)}
.empty h3{font-size:var(--fs-h3);margin:10px 0 6px}
.empty p{font-size:var(--fs-body);color:var(--muted);max-width:42ch;margin:0 auto var(--s4)}

/* ============================================================================
   AUTHENTIFICATION ET PROFIL
   ============================================================================ */
.auth-wrap{max-width:400px;margin:0 auto;padding:var(--s6) var(--gutter) var(--s8)}
.auth-wrap .brandmark{margin-bottom:var(--s4);font-size:var(--fs-h3)}
.auth-wrap h1{font-size:var(--fs-h1);margin-bottom:6px}
.auth-wrap .sub{font-size:var(--fs-small);color:var(--muted);margin-bottom:var(--s4)}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-size:var(--fs-small);font-weight:560;color:var(--ink-2);margin-bottom:5px}
.field input{
  width:100%;min-height:var(--h-field);padding:0 var(--s4);
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  /* 16 px exactement : en dessous, Safari iOS zoome à la mise au point. */
  font-size:16px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-50)}
.field input[aria-invalid="true"]{border-color:var(--neg)}
.field .err{display:block;margin-top:6px;font-size:var(--fs-label);color:var(--neg);font-weight:560}
.auth-alt{margin-top:var(--s5);font-size:var(--fs-body);color:var(--muted);text-align:center}
.auth-alt button{color:var(--blue);font-weight:620}
.auth-note{margin-top:var(--s6);padding:13px var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:var(--fs-label);color:var(--muted)}
.banner{padding:11px var(--s4);border-radius:var(--r);font-size:var(--fs-small);margin-bottom:var(--s3);line-height:1.5;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.banner.ok{background:var(--pos-50);border-color:#CFE9D9;color:var(--pos)}
.banner.bad{background:var(--neg-50);border-color:#F6D5D3;color:var(--neg)}

.profile-head{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) 0 var(--s4)}
.profile-head h1{font-size:var(--fs-h1);margin-bottom:2px}
.profile-head p{font-size:var(--fs-small);color:var(--muted)}
.list-row{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;min-height:50px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-size:var(--fs-body)}
.list-row:last-child{border-bottom:0}
.list-row .lab{flex:1;font-weight:560}
.list-row .val{color:var(--muted);font-variant-numeric:tabular-nums}
button.list-row{transition:background var(--t-fast)}
button.list-row:hover{background:var(--surface)}
button.list-row.danger{color:var(--neg);font-weight:600}

/* ============================================================================
   PANNEAU D'AIDE
   ============================================================================ */
.sheet{position:fixed;inset:0;z-index:97;display:none;align-items:flex-end;justify-content:center}
.sheet.on{display:flex}
.sheet-scrim{position:absolute;inset:0;background:rgba(11,13,18,.5);backdrop-filter:blur(3px);animation:fade var(--t) var(--ease)}
.sheet-in{position:relative;width:min(620px,100%);max-height:88dvh;overflow-y:auto;background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--s5) var(--s5) calc(var(--s8) + env(safe-area-inset-bottom));box-shadow:var(--sh-3);animation:sheetUp var(--t-slow) var(--ease);-webkit-overflow-scrolling:touch}
@keyframes sheetUp{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:880px){.sheet{align-items:center}.sheet-in{border-radius:var(--r-xl);max-height:84dvh}}
.sheet-grab{width:38px;height:4px;border-radius:var(--r-pill);background:var(--line-2);margin:0 auto var(--s4)}
.sheet-in h2{font-size:var(--fs-h2);margin-bottom:var(--s2)}
.sheet-in .lead{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:var(--s4)}
.help-item{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.help-item:last-of-type{border-bottom:0}
.help-item h3{font-size:var(--fs-h3);margin-bottom:4px}
.help-item p{font-size:var(--fs-small);color:var(--ink-2)}

/* ============================================================================
   LABORATOIRE
   ============================================================================ */
.badge-grid{display:grid;gap:var(--s3);padding:var(--s4)}
@media(min-width:620px){.badge-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.badge-grid{grid-template-columns:repeat(3,1fr)}}
.badge{
  display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  transition:border-color var(--t-fast),transform var(--t) var(--ease);
}
.badge:hover{border-color:var(--line-2);transform:translateY(-1px)}
.badge.locked{background:var(--surface);opacity:.66}
.badge-t{font-size:var(--fs-small);font-weight:660;letter-spacing:-.015em;margin-bottom:2px}
.badge-d{font-size:var(--fs-label);color:var(--muted);line-height:1.4}
.medal{width:34px;height:34px;flex:none;display:block;color:var(--blue)}
.medal svg{width:100%;height:100%;filter:drop-shadow(0 3px 6px rgba(26,109,255,.24))}
.medal.off{color:var(--line-2)}
.medal.off svg{filter:none;opacity:.8}

/* Étiquettes de construction */
.lp-tools{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;min-height:36px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);
  font-size:var(--fs-small);font-weight:560;color:var(--ink-2);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform 90ms var(--ease);
}
.chip:hover{background:var(--surface);border-color:var(--line-2)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--blue-50);border-color:#C6DBFF;color:var(--blue-700);font-weight:640}

.lp-split{display:grid;gap:var(--s5)}
@media(min-width:900px){.lp-split{grid-template-columns:1fr 340px;align-items:start}}
.lp-order{margin-top:var(--s4)}

/* Aperçu de la page construite : un vrai écran, en réduction */
.lp-frame{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--s3);position:sticky;top:calc(var(--nav-h) + var(--s8));
  box-shadow:var(--sh-2);
}
.lp-screen{
  background:var(--paper);border-radius:var(--r);overflow:hidden;
  max-height:460px;overflow-y:auto;border:1px solid var(--line);
}
.lp-block{padding:10px 13px;border-bottom:1px solid var(--surface-2)}
.lp-block:last-child{border-bottom:0}
.lp-kicker{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:4px}
.lp-hero{padding:6px 0}
.lp-h1{font-size:14px;font-weight:680;letter-spacing:-.025em;line-height:1.25}
.lp-sub{font-size:11px;color:var(--muted)}
.lp-media{height:64px;border-radius:var(--r-sm);background:linear-gradient(140deg,var(--surface-2),var(--blue-50))}
.lp-list{margin:0;padding-left:15px;font-size:11px;color:var(--ink-2);line-height:1.7}
.lp-proof{font-size:11px;color:var(--ink-2);background:var(--surface);padding:7px 9px;border-radius:var(--r-sm)}
.lp-quote{font-size:11px;color:var(--ink-2);font-style:italic;border-left:2px solid var(--blue);padding-left:9px}
.lp-quote span{display:block;font-style:normal;color:var(--muted);margin-top:3px}
.lp-obj{font-size:10.5px;color:var(--ink-2);line-height:1.6}
.lp-offer{font-size:11.5px;font-weight:640;background:var(--blue-50);padding:8px 10px;border-radius:var(--r-sm);color:var(--blue-700)}
.lp-offer span{display:block;font-weight:400;color:var(--ink-2);margin-top:2px;font-size:10.5px}
.lp-cta{
  text-align:center;background:var(--blue);color:#fff;font-size:11.5px;font-weight:640;
  padding:9px;border-radius:var(--r-sm);
}
.lp-form{display:flex;flex-wrap:wrap;gap:5px}
.lp-field{
  flex:1 1 46%;font-size:10px;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:6px 7px;
}
.lp-submit{
  flex:1 1 100%;text-align:center;background:var(--ink);color:#fff;
  font-size:10.5px;font-weight:640;padding:7px;border-radius:4px;
}


/* ============================================================================
   AUTHENTIFICATION — DÉTAIL ET DIAGNOSTIC
   ============================================================================ */
.field-wrap{position:relative;display:flex;align-items:center}
.field-wrap input{padding-right:84px}
.field-toggle{
  position:absolute;right:6px;height:34px;padding:0 11px;border-radius:var(--r-sm);
  font-size:var(--fs-label);font-weight:620;color:var(--blue);background:var(--blue-50);
  transition:background var(--t-fast);
}
.field-toggle:hover{background:#DCE8FF}

.banner-diag{
  margin-top:9px;padding:9px 11px;border-radius:var(--r-sm);
  background:rgba(11,13,18,.05);font-size:var(--fs-label);line-height:1.5;
}
.banner-diag div+div{margin-top:5px}
.banner-diag b{font-weight:660}
.banner-detail{margin-top:8px}
.banner-detail summary{
  cursor:pointer;font-size:var(--fs-label);font-weight:600;opacity:.8;
  list-style:none;user-select:none;
}
.banner-detail summary::-webkit-details-marker{display:none}
.banner-detail summary::before{content:"▸ ";font-size:.85em}
.banner-detail[open] summary::before{content:"▾ "}
.banner-detail code{
  display:block;margin-top:6px;padding:8px 10px;border-radius:var(--r-sm);
  background:rgba(11,13,18,.06);font-family:var(--f-mono);font-size:11px;
  line-height:1.5;word-break:break-word;color:var(--ink-2);
}

.diag-row{display:flex;align-items:flex-start;gap:10px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.diag-row:last-child{border-bottom:0}
.diag-row b{display:block;font-size:var(--fs-small);font-weight:640}
.diag-row span{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:2px;line-height:1.45}
.diag-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px;background:var(--muted-2)}
.diag-dot.ok{background:var(--pos)}
.diag-dot.ko{background:var(--neg)}
.diag-dot.info{background:var(--blue)}


/* ============================================================================
   TROPHÉES, CLASSEMENT, ADMINISTRATION
   ============================================================================ */
.trophy-grid{display:grid;gap:var(--s3);padding:var(--s4)}
@media(min-width:620px){.trophy-grid{grid-template-columns:1fr 1fr}}
.trophy-item{
  display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  transition:border-color var(--t-fast),transform var(--t) var(--ease);
}
.trophy-item:hover{border-color:var(--line-2);transform:translateY(-1px)}
.trophy-item.locked{background:var(--surface)}
.trophy{width:38px;height:38px;flex:none;display:block;color:var(--muted-2)}
.trophy svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(11,13,18,.16))}
.trophy.off{opacity:.55}
.trophy.off svg{filter:none}
.trophy-done{font-size:var(--fs-label);font-weight:660;color:var(--pos);margin-top:5px}
.trophy-prog{display:flex;align-items:center;gap:8px;margin-top:6px}
.trophy-prog .track{flex:1;height:5px}
.trophy-prog b{font-size:var(--fs-label);font-variant-numeric:tabular-nums;color:var(--muted)}

.rank-row{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);
}
.rank-row:last-child{border-bottom:0}
.rank-row.me{background:var(--blue-50)}
.rank-row b{display:block;font-size:var(--fs-small);font-weight:640}
.rank-row span span{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:1px}
.rank-n{
  width:34px;flex:none;text-align:center;font-variant-numeric:tabular-nums;
  font-size:var(--fs-small);font-weight:680;color:var(--muted);
}
.rank-n.podium{width:34px;height:34px}
.rank-n .trophy{width:30px;height:30px}
.rank-xp{font-variant-numeric:tabular-nums;font-size:var(--fs-small);font-weight:660;white-space:nowrap}

.skel{display:block;background:linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2));
  background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--r-xs)}
.skel-line{height:12px;width:60%}
.rank-n.skel{height:14px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}

.admin-row{
  display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);
}
.admin-row:last-child{border-bottom:0}
.admin-row b{display:block;font-size:var(--fs-small);font-weight:640}
.admin-row span span{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:2px;line-height:1.45}
.admin-badges{
  flex:none;text-align:right;font-size:var(--fs-label);color:var(--muted);
  font-variant-numeric:tabular-nums;line-height:1.5;
}
#adminq{width:100%;min-height:var(--h-field);padding:0 var(--s4);
  border:1px solid var(--line);border-radius:var(--r);font-size:16px}
#adminq:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-50)}


/* Bloc de code destiné à être recopié : lisible et sélectionnable d'un geste. */
.codeblock{
  margin:0;padding:var(--s3);border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;line-height:1.6;
  color:var(--ink-2);white-space:pre-wrap;word-break:break-all;
  max-height:180px;overflow:auto;user-select:all;
}