/* ==========================================================================
   Bull & Byte — feuille unique. Direction : « desk de trading, en clair ».
   Papier froid quadrillé, encre marine, bleu électrique pour la marque,
   vert et rouge de marché pour ce qui bouge, chiffres en Geist Mono.
   Le mouvement sert l'information (un compteur qui monte, une courbe qui se
   trace, une ligne qui clignote quand elle est neuve) ; il s'efface
   entièrement si le système demande moins d'animations.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{padding:0;list-style:none}

:root{
  /* Perle (13/10/2026, choix d'Anthony) : un gris plus présent où les cartes blanches ressortent, un
     quadrillage plus visible, des traits plus nets. Le bleu des boutons reste la seule chose qui tranche. */
  --bg:#E7EBF1;
  --bg-2:#DCE2EA;
  --panel:#FFFFFF;
  --panel-2:#F2F5F9;
  --line:#CBD3DE;
  --line-2:#ABB6C6;
  --grid:rgba(16,36,72,.08);
  /* Le fond de page, voilé, pour les barres collées en haut (en-tête, filtres des stages). */
  --voile:rgba(231,235,241,.92);
  --ink:#0A1222;
  --ink-2:#38445A;
  --ink-3:#6A7489;
  --ink-4:#97A0B2;
  --accent:#1D4ED8;
  --accent-2:#1D4ED8;
  --accent-bg:#E8EEFC;
  --up:#00A36C;
  --up-2:#00C281;
  --up-bg:#E3F7EE;
  --down:#E5484D;
  --down-bg:#FDECEC;
  --amber:#C27803;
  --amber-bg:#FFF4DE;
  --tape:#0A1222;
  /* Des ombres nettes mais courtes : sur le gris, une ombre longue déborde sur les cartes voisines. */
  --shadow-1:0 1px 0 rgba(10,18,34,.06),0 1px 3px rgba(10,18,34,.09);
  --shadow-2:0 1px 0 rgba(10,18,34,.06),0 10px 24px -14px rgba(10,18,34,.30);
  --shadow-3:0 1px 0 rgba(10,18,34,.07),0 16px 34px -20px rgba(10,18,34,.36);
  --f-sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --f-serif:"Newsreader","Source Serif 4",Georgia,"Times New Roman",serif;
  --r-s:4px;--r:6px;--r-l:8px;
  /* Les dessins (courbe, globe) prennent le bleu de la page. */
  --d-accent:#1D4ED8;--d-accent-rgb:29,78,216;
  --shell:1240px;
  --gut:clamp(16px,3.6vw,36px);
  --ease:cubic-bezier(.2,.8,.2,1);
}

body{
  background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:15.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;background-position:-1px -1px;
  overflow-x:clip;
}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum","zero";letter-spacing:-.01em}
.muted{color:var(--ink-3)}
.up{color:var(--up)}.down{color:var(--down)}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.15rem;letter-spacing:-.02em;line-height:1.25}
h1,h2{font-family:var(--f-serif);font-weight:500;letter-spacing:-.02em;line-height:1.06}
p{text-wrap:pretty}
.grad{color:var(--accent)}

/* ---------- Barre d'état (horloges des places) ---------- */
.status{background:var(--tape);color:#C9D3E6;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.status .shell{display:flex;align-items:center;gap:22px;height:30px;overflow:hidden;white-space:nowrap}
.status b{color:#fff;font-weight:500}
.status .live{display:inline-flex;align-items:center;gap:7px;color:#7CF5BD}
.status .live i{width:7px;height:7px;border-radius:50%;background:#2BE39A;box-shadow:0 0 0 0 rgba(43,227,154,.6);animation:pouls 2s infinite}
.status .sep{width:1px;height:12px;background:rgba(255,255,255,.15)}
@media (max-width:760px){.status .cache-mobile{display:none}}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(43,227,154,.55)}70%{box-shadow:0 0 0 7px rgba(43,227,154,0)}100%{box-shadow:0 0 0 0 rgba(43,227,154,0)}}

/* ---------- En-tête ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.top .shell{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.12rem;letter-spacing:-.03em}
.logo svg{width:30px;height:30px}
/* Le slogan (19/10/2026, Anthony : « pas assez visible, mais pas aussi gros ni aussi gras que Bull & Byte ; en gras et en italique, l'idée des étapes ») : gras italique,
   plus petit que le nom, chaque mot dans la couleur de son étape de l'accueil. */
.logo .sub{display:inline-flex;gap:5px;font-family:var(--f-sans);font-style:italic;font-weight:700;font-size:.84rem;letter-spacing:-.01em;color:var(--ink-3);border-left:1px solid var(--line-2);padding-left:10px}
.logo .sub b{font-weight:700}
.logo .sub .s1{color:var(--up)}.logo .sub .s2{color:var(--accent)}.logo .sub .s3{color:var(--tape)}
/* L'en-tête tient sur une ligne à toutes les largeurs (12/10/2026 : de 641 à 800 px et de 901 à 1 010 px, il
   débordait et « Create account » sortait de l'écran) : le slogan du logo part sous 1 080 px, « Interviews »
   et « Cover letter » sous 860 px (l'accueil et le pied de page y mènent), le reste sous 640 px. */
/* 17/10/2026 : le slogan « Your first round starts here. » est plus long, il part sous 1 200 px (à 1 090 px le bouton du compte sortait de l'écran). */
@media (max-width:1080px){.logo .sub{display:none}}
/* Les quatre services du haut (17/10/2026) : jusqu'à 860 px ils passent dans la barre du bas (.dock), le haut ne garde que le compte. */
@media (max-width:860px){.nav .nav-lien{display:none}}
.nav{display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:8px;transition:background .2s,color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--bg-2)}
.nav a.btn,.nav a.btn:hover,.nav a.btn[aria-current="page"]{color:#fff;background:var(--accent);padding:6px 12px}
@media (max-width:640px){.nav a{padding:8px 9px}}

/* ---------- Boutons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:6px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:.94rem;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
/* Au survol, un bouton s'affirme (trait un peu plus gras, ombre), sans bouger (14/10/2026, Anthony). Le trait
   épaissi ne change pas la largeur du texte, contrairement à un font-weight plus fort. */
.btn:hover{box-shadow:var(--shadow-1);-webkit-text-stroke:.35px currentColor}
.btn:active{transform:none}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:var(--panel);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-live{background:var(--accent);border-color:var(--accent)}
.btn-live:hover{background:#1E40AF;border-color:#1E40AF;box-shadow:none}
.btn-sm{min-height:34px;padding:6px 12px;font-size:.84rem;border-radius:5px}
.arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- Étiquettes ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:4px;font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;background:var(--bg-2);color:var(--ink-2);white-space:nowrap}
.tag.live{background:var(--accent-bg);color:var(--accent)}
.tag.live i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:clign 1.6s infinite}
.tag.new{background:var(--up-bg);color:var(--up)}
.tag.soon{background:var(--amber-bg);color:var(--amber)}
.tag.limite{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line)}
/* L'entretien vidéo (14/10/2026) : un point rouge, comme une caméra qui tourne. */
.tag.video{background:var(--panel);color:var(--ink);border:1px solid var(--line-2)}
.tag.video::before{content:"";width:6px;height:6px;border-radius:50%;background:#E5484D;flex:none}
/* Les deux rounds (14/10/2026) : le choix, en titres sous le grand titre ; le formulaire garde sa hauteur. */
.vi-rounds-label{margin:30px 0 10px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.vi-rounds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;max-width:760px}
.vi-round{position:relative;display:grid;gap:5px;text-align:left;padding:16px 18px 16px 48px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--panel);
  cursor:pointer;font:inherit;color:var(--ink-3);transition:border-color .15s,box-shadow .15s}
.vi-round::before{content:"";position:absolute;left:18px;top:21px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--panel);box-sizing:border-box}
.vi-round b{font-family:var(--f-serif);font-size:1.5rem;color:var(--ink-2);font-weight:500;letter-spacing:-.015em;line-height:1.15}
.vi-round span{font-size:.88rem;line-height:1.4}
.vi-round:hover{border-color:var(--ink-3)}
.vi-round[aria-selected="true"]{border-color:var(--ink);box-shadow:var(--shadow-2);color:var(--ink-2)}
.vi-round[aria-selected="true"] b{color:var(--ink)}
.vi-round[aria-selected="true"]::before{border-color:#E5484D;background:radial-gradient(circle,#E5484D 0 42%,var(--panel) 46%)}
@media (max-width:520px){.vi-rounds{grid-template-columns:1fr}}
.appel-video{display:flex;align-items:center;gap:10px;margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-left:3px solid #E5484D;
  border-radius:var(--r-l);background:var(--panel);color:var(--ink-2);text-decoration:none;font-size:.92rem}
.appel-video b{color:var(--ink);font-weight:600}
.appel-video>span:nth-child(2){flex:1;min-width:0}
.appel-video:hover{border-color:var(--ink-4);border-left-color:#E5484D}
.appel-video:hover .arrow{transform:translateX(3px)}
.tag.ok{background:var(--up-bg);color:var(--up)}
@keyframes clign{0%,100%{opacity:1}50%{opacity:.25}}
.cadenas{width:11px;height:11px}

/* ---------- Héros ---------- */
.hero{position:relative;padding:clamp(40px,7vw,84px) 0 clamp(36px,5vw,60px);overflow:hidden}
.hero .shell{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:1020px){.hero .shell{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
/* Une ligne qui ne se coupe pas (flux, bandeau) ne doit jamais élargir la page :
   les enfants de grille peuvent rétrécir sous leur contenu. */
.hero .shell>*,.sec-head>*,.plans>*,.demo>*,.credits-grid>*,.atelier>*,.desks>*{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel);
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--up-2);box-shadow:0 0 0 3px var(--up-bg)}
.hero .shell>div:first-child{container-type:inline-size}
.hero h1{margin:20px 0 18px;font-size:clamp(2.5rem,4.1vw,3.6rem);font-size:min(clamp(2.5rem,4.1vw,3.6rem),9cqi)}
.hero h1 .ligne{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.08em}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--ink-2);max-width:560px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow-1);overflow:hidden}
.kpi{padding:14px 16px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi .v{font-family:var(--f-mono);font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.kpi .l{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,1fr)}.kpi:nth-child(2){border-right:0}.kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- Le terminal (panneau de données) ---------- */
.term{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-3);overflow:hidden}
.term-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.term-head b{color:var(--ink);font-weight:600}
/* Le voyant « Live » de l'en-tête du terminal. */
.term-head .direct{display:inline-flex;align-items:center;gap:6px;margin-left:auto;margin-right:0;color:var(--up);font-weight:600}
.term-head .direct i{width:7px;height:7px;border-radius:50%;background:var(--up-2);animation:clign 1.6s infinite}
.chart{position:relative;height:180px;margin-top:10px}
.chart canvas{width:100%;height:100%}
.chart .bulle{position:absolute;pointer-events:none;transform:translate(-50%,-115%);background:var(--ink);color:#fff;font-family:var(--f-mono);font-size:.72rem;
  padding:6px 8px;border-radius:6px;white-space:nowrap;opacity:0;transition:opacity .15s}
.term-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.term-foot div{padding:12px 16px;border-right:1px solid var(--line);font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.term-foot div:last-child{border-right:0}
.term-foot b{display:block;color:var(--ink);font-size:1.2rem;font-weight:500;letter-spacing:-.02em;text-transform:none;margin-top:2px}
.term-feed{border-top:1px solid var(--line);height:300px;overflow:hidden;position:relative}
.term-feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(transparent,var(--panel))}
.feed-ligne{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);font-size:.95rem;
  animation:entre .6s var(--ease) both}
.feed-ligne .t{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3)}
.feed-ligne:hover{background:var(--panel-2)}
/* Une couleur par desk, la même partout : le fil de l'accueil, les touches et la barre
   de la liste, les étiquettes des offres. */
[data-d]{--c:71,85,105}
[data-d="IBD"]{--c:29,78,216}
[data-d="TS"]{--c:162,28,175}
[data-d="S&T"]{--c:15,118,110}
[data-d="QNT"]{--c:109,40,217}
[data-d="TECH"]{--c:180,83,9}
[data-d="SWE"]{--c:202,138,4}
[data-d="AI"]{--c:8,145,178}
[data-d="DATA"]{--c:21,128,61}
[data-d="CYBER"]{--c:101,163,13}
[data-d="HW"]{--c:120,53,15}
[data-d="AM/PE"]{--c:190,24,93}
[data-d="PE"]{--c:190,24,93}
[data-d="AM"]{--c:88,100,125}
[data-d="OPS"]{--c:70,90,120}
[data-d="RSK"]{--c:194,65,12}
[data-d="CORP"]{--c:3,105,161}
[data-d="Other"]{--c:120,132,150}
.tag[data-d]{background:rgba(var(--c),.09);color:rgb(var(--c))}
/* Le desk de chaque offre, à droite du fil de l'accueil. */
.tag.metier{height:24px;min-width:56px;justify-content:center;font-size:.74rem;font-weight:600;letter-spacing:.04em}
/* La courbe : les sept derniers jours en vert, le texte des axes un peu plus grand. */
.term{--d-recent:rgba(0,163,108,.75);--d-taille:12}
.feed-ligne .e{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-ligne .e small{font-weight:400;color:var(--ink-3);margin-left:6px}
@keyframes entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flash{animation:flash 1.4s var(--ease)}
@keyframes flash{0%{background:var(--up-bg)}100%{background:transparent}}

/* ---------- Bandeau défilant (tableau d'affichage) ---------- */
.tape{background:var(--tape);color:#D6DEEC;overflow:hidden;white-space:nowrap;border-block:1px solid #000;position:relative}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.tape::before{left:0;background:linear-gradient(90deg,var(--tape),transparent)}
.tape::after{right:0;background:linear-gradient(-90deg,var(--tape),transparent)}
.tape-piste{display:inline-flex;gap:0;animation:defile 80s linear infinite}
.tape:hover .tape-piste{animation-play-state:paused}
.tape a{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-right:1px solid rgba(255,255,255,.08);text-decoration:none;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.02em}
.tape a b{color:#fff;font-weight:600;letter-spacing:.04em}
.tape .tri{color:#2BE39A}
.tape .lieu{color:#8E9AB3}
.tape .age{color:#2BE39A}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:clamp(56px,8vw,104px) 0}
.sec-head{display:grid;gap:14px;margin-bottom:34px}
@media (min-width:900px){.sec-head{grid-template-columns:1fr 1fr;align-items:end}}
.sec-num{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.sec-num::after{content:"";height:1px;width:60px;background:currentColor;opacity:.4;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease) .2s}
.vu .sec-num::after,.sec-num.vu::after{transform:none}
.sec-head p{color:var(--ink-2);max-width:520px}

/* Apparition au défilement */
.revele{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.revele.vu{opacity:1;transform:none}
.revele[data-delai="1"]{transition-delay:.08s}.revele[data-delai="2"]{transition-delay:.16s}.revele[data-delai="3"]{transition-delay:.24s}

/* ---------- Carte des employeurs (heatmap) ---------- */
.heat{position:relative;height:clamp(380px,48vw,520px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-2);overflow:hidden}
.heat a{position:absolute;display:flex;flex-direction:column;justify-content:space-between;padding:8px 9px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.55);
  overflow:hidden;opacity:0;transform:scale(.94);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .2s}
.heat.vu a{opacity:1;transform:none}
.heat a:hover{filter:brightness(1.08) saturate(1.1);z-index:2;outline:2px solid var(--ink)}
.heat a .n{font-family:var(--f-mono);font-weight:600;font-size:clamp(.72rem,1.4vw,1.05rem);letter-spacing:-.03em;line-height:1}
.heat a .nom{font-weight:600;font-size:clamp(.66rem,1.1vw,.86rem);line-height:1.15;letter-spacing:-.01em}
.heat a .s{font-family:var(--f-mono);font-size:.64rem;opacity:.85}
.heat a.petit .s,.heat a.mini .s{display:none}
.heat a.mini .nom{display:none}
.heat-leg{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.heat-leg .grad-bar{width:160px;height:8px;border-radius:4px;background:linear-gradient(90deg,#5E6E8C,#2E8C6F,#00B377,#00D98B)}

/* ---------- Desks (métiers) ---------- */
.desks{display:grid;gap:12px}
.desks-famille{font-family:var(--f-mono);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:22px 0 10px}
.desks-famille:first-child{margin-top:0}
@media (min-width:640px){.desks{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.desks{grid-template-columns:repeat(4,1fr)}}
.desk{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.desk:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.desk-haut{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.desk-nom{font-weight:600;letter-spacing:-.02em}
.desk-code{font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);letter-spacing:.06em}
.desk-v{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.desk-v .n{font-family:var(--f-mono);font-size:1.9rem;font-weight:500;letter-spacing:-.05em;line-height:1}
.desk-v .d{font-family:var(--f-mono);font-size:.78rem}
.spark{height:44px;margin-top:12px}
.spark path.l{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.spark path.a{opacity:.14}
.trace{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s var(--ease)}
.vu .trace,.trace.vu{stroke-dashoffset:0}

/* ---------- Différé / temps réel ---------- */
.plans{display:grid;gap:14px}
@media (min-width:900px){.plans{grid-template-columns:1fr 1.15fr}}
/* Pricing de l'accueil : le titre et « Credits » à gauche, la carte « Start » à droite. */
.accueil-prix{display:grid;gap:28px;align-items:start}
@media (min-width:900px){.accueil-prix{grid-template-columns:1.05fr .95fr;gap:48px}}
.accueil-prix-titre{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:22px;text-wrap:balance}
.accueil-prix-credits{display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.accueil-prix-packs{display:grid;gap:8px}
@media (min-width:560px){.accueil-prix-packs{grid-template-columns:1fr 1fr}}
.accueil-prix-pack{display:grid;gap:3px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.accueil-prix-pack b{font-family:var(--f-mono);font-weight:500;font-size:1.05rem;letter-spacing:-.02em}
.accueil-prix-pack span{font-size:.84rem;color:var(--ink-2)}
.accueil-prix-pack em{font-style:normal;color:var(--up);font-weight:600}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;box-shadow:var(--shadow-1)}
.plan.reel{border:1.5px solid var(--accent);box-shadow:var(--shadow-3)}
.plan-code{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.plan h3{font-size:1.5rem;margin:8px 0 2px}
.plan .prix{font-family:var(--f-mono);font-size:2.6rem;font-weight:500;letter-spacing:-.05em;margin:14px 0 4px}
.plan .prix small{font-family:var(--f-sans);font-size:.9rem;color:var(--ink-3);letter-spacing:0;font-weight:400}
.plan ul{margin:16px 0 20px;display:grid;gap:9px}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:8px;color:var(--ink-2);font-size:.95rem}
.plan li .oui{color:var(--up);font-weight:700}
.plan li .non{color:var(--down);font-weight:700}
.plan .badge{position:absolute;top:18px;right:18px}
/* Le choix du pack : deux boutons, le prix et ce qu'il permet suivent. */
.bascule{display:inline-grid;grid-auto-flow:column;gap:2px;margin-top:16px;padding:3px;background:var(--bg-2);border-radius:6px}
.bascule button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;padding:8px 14px;border-radius:4px;cursor:pointer;
  font-family:var(--f-mono);font-size:.84rem;font-weight:500;color:var(--ink-3);transition:background .2s,color .2s,box-shadow .2s}
.bascule button:hover{color:var(--ink)}
.bascule button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-1)}
.bascule small{font-size:.7rem;font-weight:600;color:var(--up)}
.equivaut{font-size:.93rem;color:var(--ink-2)}
.equivaut b{font-family:var(--f-mono);font-weight:600;color:var(--ink)}
@media (max-width:520px){.bascule{display:grid;grid-template-columns:1fr 1fr}.bascule button{flex-direction:column;gap:1px;padding:7px 8px}}

/* ---------- Panneaux (page de la lettre) ---------- */
.pane{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column}
.pane-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pane-body{padding:16px;font-size:.9rem;color:var(--ink-2);flex:1}
.surligne{background:linear-gradient(transparent 55%,rgba(29,78,216,.22) 55%) no-repeat;background-size:0 100%;transition:background-size .7s var(--ease);color:var(--ink);font-weight:500}
.surligne.on{background-size:100% 100%}
.papier{font-family:"Times New Roman",Times,serif;font-size:.92rem;line-height:1.55;color:#111;white-space:pre-wrap;min-height:260px}
.curseur{display:inline-block;width:7px;height:1em;background:var(--accent);vertical-align:-2px;animation:clign 1s steps(1) infinite}
.checks{display:grid;gap:10px}
.check{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-size:.86rem;opacity:.35;transition:opacity .4s}
.check.on{opacity:1}
.check .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:var(--ink-4);font-size:.7rem;transition:background .3s,color .3s}
.check.on .ic{background:var(--up);color:#fff}
.check .v{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3)}
.jauge{height:6px;border-radius:3px;background:var(--bg-2);position:relative;overflow:hidden;margin-top:6px}
.jauge i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--accent),var(--up-2));transition:width 1.2s var(--ease)}

/* ---------- La démonstration de la lettre : l'annonce, le PDF, l'analyse ---------- */
.demo{display:grid;gap:16px;align-items:start;grid-template-areas:"annonce" "lecteur" "analyse"}
@media (min-width:1020px){.demo{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"annonce lecteur" "analyse lecteur";grid-template-rows:auto 1fr}}
.annonce{grid-area:annonce;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);padding:22px 24px}
.annonce-tete{display:flex;align-items:center;gap:12px}
.annonce-logo{flex:none;width:40px;height:40px;border-radius:6px;display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--f-serif);font-weight:600;letter-spacing:.02em}
.annonce-tete div{display:grid;line-height:1.3;min-width:0}
.annonce-tete b{font-weight:600}
.annonce-tete small{font-size:.82rem;color:var(--ink-3)}
.annonce-tete .tag{margin-left:auto;background:var(--bg-2);color:var(--ink-3)}
.annonce h3{font-family:var(--f-serif);font-weight:500;font-size:1.6rem;letter-spacing:-.015em;margin:16px 0 10px}
.annonce-faits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.annonce-faits li{font-family:var(--f-mono);font-size:.72rem;padding:3px 8px;border:1px solid var(--line-2);border-radius:4px;color:var(--ink-2)}
.annonce p,.annonce li{font-size:.94rem;line-height:1.7;color:var(--ink-2)}
.annonce h4{margin:14px 0 4px;font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.annonce-puces li{position:relative;padding-left:16px}
.annonce-puces li::before{content:"";position:absolute;left:2px;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--ink-4)}
/* Le lecteur de PDF : la barre, la page A4, le pied. */
.lecteur{grid-area:lecteur;border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden;background:#E4E7ED;box-shadow:var(--shadow-2)}
.lecteur-barre{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#2A2E35;color:#E8EBF0;font-size:.82rem}
.lecteur-fichier{flex:1;display:inline-flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecteur-fichier svg{flex:none;width:16px;height:16px;color:#F87171}
.lecteur-etat{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#AEB6C4}
.lecteur-etat i{width:7px;height:7px;border-radius:50%;background:#F5B544;animation:clign 1s infinite}
.lecteur-etat.pret{color:#6EE7B7}
.lecteur-etat.pret i{background:#34D399;animation:none}
.lecteur-rejouer{flex:none;border:1px solid rgba(255,255,255,.25);background:transparent;color:#E8EBF0;border-radius:4px;padding:3px 9px;font-size:.76rem;cursor:pointer}
.lecteur-rejouer:hover{background:rgba(255,255,255,.1)}
.lecteur-fond{container-type:inline-size;padding:clamp(12px,3vw,28px)}
.a4{aspect-ratio:1/1.414;padding:9cqw 9.5cqw;background:#fff;color:#1A1D24;font-family:var(--f-serif);font-size:max(10px,2.4cqw);line-height:1.5;
  box-shadow:0 1px 2px rgba(10,18,34,.12),0 14px 30px -14px rgba(10,18,34,.35)}
.a4-tete{display:grid;gap:.25em;padding-bottom:1em;margin-bottom:1.5em;border-bottom:1px solid #1A1D24}
.a4-tete b{font-size:1.9em;font-weight:500;line-height:1.1;letter-spacing:-.01em}
.a4-tete span{font-family:var(--f-sans);font-size:.8em;color:#5A6272}
/* La lettre s'écrit par-dessus son « fantôme » invisible : la page garde sa taille finale. */
.a4-corps{display:grid}
.a4-corps>*{grid-area:1/1;white-space:pre-wrap}
.a4-corps .fantome{visibility:hidden}
.a4-corps b{font-weight:600}
.a4-corps mark{background:none;color:inherit;transition:background .4s}
.a4-corps mark.on{background:linear-gradient(transparent 58%,rgba(29,78,216,.2) 58%)}
.a4 .curseur-l{display:inline-block;width:.42em;height:1.05em;margin-left:1px;background:var(--accent);vertical-align:-.16em;animation:clign 1s steps(1) infinite}
.lecteur-pied{display:flex;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--line-2);background:#EDEFF3;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}
/* L'analyse : les mots-clés repris, les vérifications. */
.analyse{grid-area:analyse;display:grid;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);padding:20px 22px}
.analyse-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.analyse-tete b{font-size:1.15rem;font-weight:500;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.mots{display:flex;flex-wrap:wrap;gap:6px}
.mot{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel-2);font-size:.86rem;color:var(--ink-4);
  transition:color .35s,border-color .35s,background .35s}
.mot::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;transition:background .35s}
.mot.vu{color:var(--ink-2);border-color:var(--ink-4)}
.mot.on{color:var(--up);border-color:rgba(0,163,108,.4);background:var(--up-bg)}
.mot.on::before{background:var(--up)}
.verifs{display:grid;gap:9px;padding-top:14px;border-top:1px solid var(--line)}
.verif{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;font-size:.9rem;color:var(--ink-2);opacity:.4;transition:opacity .4s}
.verif.on{opacity:1}
.verif i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:transparent;font-style:normal;font-size:.66rem;font-weight:700;transition:background .3s,color .3s}
.verif.on i{background:var(--up);color:#fff}
.verif b{font-family:var(--f-mono);font-weight:500;font-size:.8rem;color:var(--ink-3)}
.analyse .btn{justify-self:start}

/* ---------- FAQ ---------- */
/* La FAQ dans une carte blanche (13/10/2026) : sur le quadrillage, ses traits et ceux de la grille se doublaient. */
.faq{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:0 22px;box-shadow:var(--shadow-1)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:44px 1fr 24px;gap:10px;align-items:baseline;font-weight:600;font-size:1.05rem;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .k{font-family:var(--f-mono);font-size:.74rem;color:var(--accent);font-weight:500}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--ink-3);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);margin:10px 0 0 54px;max-width:760px}

/* ---------- Le blotter (liste des offres) ---------- */
.page-head{padding-block:clamp(28px,4vw,48px) 18px}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.page-head p{color:var(--ink-2);margin-top:10px}
.preuves{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.preuves li{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:.84rem;color:var(--ink-2)}
.preuves li::before{content:"\2713";color:var(--up);font-weight:700;margin-right:6px}
.preuves b{color:var(--ink);font-weight:600}
.cmd{position:sticky;top:62px;z-index:30;padding:12px 0;border-block:1px solid transparent;transition:background-color .2s,border-color .2s}
/* La barre des filtres laisse voir le quadrillage ; collée en haut pendant le défilement, elle prend un voile
   pour rester lisible au-dessus de la liste (body.cmd-replie, posée par offres.js quand le titre sort, 13/10/2026). */
body.cmd-replie .cmd{background:var(--voile);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block-color:var(--line)}
.cmd form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cmd .prompt{position:relative;flex:1 1 260px}
.cmd .prompt::before{content:">";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);color:var(--accent);font-weight:600}
.cmd input[type="search"]{padding-left:28px;font-family:var(--f-mono);font-size:.9rem}
.compteur{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);margin-left:auto;text-transform:uppercase;letter-spacing:.04em}
.caches-lien{color:var(--accent);letter-spacing:inherit;text-transform:inherit}
.caches-fond{position:fixed;inset:0;z-index:90;background:rgba(10,18,34,.38);display:flex;align-items:center;justify-content:center;padding:16px}
.caches-pop{position:relative;width:100%;max-width:440px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-3);padding:22px 22px 18px;max-height:calc(100vh - 32px);overflow-y:auto}
.caches-pop h3{margin:0 28px 8px 0;font-size:1.1rem}
.caches-pop p{margin:0 0 12px;color:var(--ink-2);font-size:.92rem}
.caches-pop ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px}
.caches-pop li{font-size:.92rem;color:var(--ink-2);padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r)}
.caches-pop li b{font-family:var(--f-mono);color:var(--ink);margin-right:4px}
.caches-ajouts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.caches-ajout{font:inherit;font-size:.85rem;padding:4px 10px;border:1px solid var(--accent);border-radius:999px;background:var(--panel);color:var(--accent);cursor:pointer}
.caches-ajout:hover{background:var(--accent);color:#fff}
.caches-ajout span{font-family:var(--f-mono);font-size:.78rem;opacity:.8;margin-left:2px}
.caches-gagne{margin:0 28px 6px 0!important;color:var(--up)!important;font-family:var(--f-mono);font-size:.82rem!important;font-weight:600}
.caches-fermer{position:absolute;top:10px;right:12px;background:none;border:0;font-size:1.4rem;line-height:1;color:var(--ink-3);cursor:pointer}
.caches-actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:700px){.cmd{position:static}.cmd select{flex:1 1 45%}.compteur{width:100%;margin:0}}

input[type="search"],input[type="text"],input[type="email"],input[type="tel"],input[type="password"],select,textarea{
  width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:6px;padding:10px 12px;min-height:44px;font-size:16px;
  transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
textarea{min-height:150px;resize:vertical;line-height:1.5}
select{appearance:none;width:auto;min-width:160px;padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}

.blotter{border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-1);overflow:hidden}
.bl-head{display:grid;grid-template-columns:78px 1fr 230px;gap:14px;padding:9px 16px;background:var(--panel-2);border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.bl-groupe{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(90deg,var(--accent-bg),rgba(234,240,255,.3));border-bottom:1px solid var(--line)}
.bl-groupe h2{font-size:1.15rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.bl-groupe p{color:var(--ink-2);font-size:.88rem;margin-top:2px}
.row{display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);transition:background .15s;animation:entre .5s var(--ease) both}
.row:last-child{border-bottom:0}
.row:hover{background:var(--panel-2)}
.row-age{font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);line-height:1.3}
.row-age b{display:block;color:var(--ink);font-weight:500;font-size:.82rem}
.row-emp{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.row-title{font-size:1rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin:3px 0 6px}
#liste.sans-entree .row{animation:none}
.row-ligne{display:flex;align-items:baseline;gap:8px;margin:3px 0 6px;min-width:0}
.row-ligne .row-title{margin:0;min-width:0}
.row-ligne>.tag{flex:none;position:relative;top:-1px}
.tag.frais{font-weight:600}
.tag.frais.f1{background:var(--up);color:#fff}
.tag.frais.f2{background:#C6EEDB;color:#03603F}
.tag.frais.f3{background:var(--up-bg);color:#03603F}
.row-title a{text-decoration:none}
.row-title a:hover{color:var(--accent)}
.row-meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:.84rem;color:var(--ink-3)}
/* Dans la liste, une seule ligne : le lieu se raccourcit, le reste passe dans « +N ». */
.row{grid-template-columns:78px minmax(0,1fr) auto}
.row-meta.une-ligne{flex-wrap:nowrap;overflow:hidden;min-width:0}
.row-meta.une-ligne.ouvert{flex-wrap:wrap}
.row-meta.une-ligne>*{flex:none}
.row-meta.une-ligne>.row-lieu{flex:0 1 auto;min-width:0;max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag.plus{border:1px dashed var(--line-2);background:transparent;color:var(--ink-3);cursor:pointer;font:inherit;font-family:var(--f-mono);font-size:.7rem}
.tag.plus:hover{color:var(--accent);border-color:var(--accent)}
.tag.paie{background:var(--up-bg);color:var(--up)}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.row.locked .row-title{filter:blur(5.5px);user-select:none;-webkit-user-select:none;color:var(--ink-2)}
.row.locked{background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(29,78,216,.025) 10px 20px)}
.row.neuf{animation:entre .5s var(--ease) both,flash 1.6s var(--ease) .3s}
@media (max-width:760px){.bl-head{display:none}.row{grid-template-columns:minmax(0,1fr);gap:8px}.row-age{display:flex;gap:6px}.row-age b{display:inline}.row-actions{justify-content:flex-start}}
.plus-wrap{display:flex;justify-content:center;padding:18px}
.vide{padding:28px 16px;text-align:center;color:var(--ink-3)}

/* ---------- Les crédits : grille des tarifs, packs, caisse ---------- */
.credits-grid{display:grid;gap:22px;padding-block:clamp(28px,4vw,52px) 72px}
/* Au téléphone : l'accroche, la caisse, puis l'aperçu des offres. Sur grand écran, la caisse tient la colonne de droite. */
@media (min-width:1020px){.credits-grid{grid-template-columns:1.1fr .9fr;grid-template-rows:auto 1fr;grid-template-areas:"intro caisse" "apercu caisse";align-items:start}.cg-intro{grid-area:intro}.cg-caisse{grid-area:caisse}.cg-apercu{grid-area:apercu}}
.caisse{display:grid;gap:14px}

/* La grille des tarifs, comme le barème d'un courtier. */
.tarifs{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:560px}
.tarifs-tete,.tarif{display:flex;justify-content:space-between;gap:16px;padding:11px 16px}
.tarifs-tete{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--panel-2);border-bottom:1px solid var(--line)}
.tarif{border-bottom:1px dashed var(--line);font-size:.94rem;color:var(--ink-2)}
.tarif:last-child{border-bottom:0}
.tarif b{font-family:var(--f-mono);font-feature-settings:"tnum";font-weight:500;color:var(--ink);white-space:nowrap}
.tarif.plus{background:linear-gradient(90deg,var(--up-bg),transparent 70%)}
.tarif.plus b{color:var(--up)}

/* Les packs : une carte cochable par pack. */
.packs{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.pack{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.pack:hover{border-color:var(--accent)}
.pack input{position:absolute;opacity:0;width:1px;height:1px}
.pack:has(input:checked){border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.pack:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pack-n{font-size:1.02rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pack-n b{font-family:var(--f-mono);font-size:1.3rem;font-weight:500;letter-spacing:-.03em}
.pack-p{font-family:var(--f-mono);font-size:1.3rem;font-weight:500;letter-spacing:-.03em}
.pack-d{grid-column:1/-1;font-size:.82rem;color:var(--ink-3)}
.petit{font-size:.84rem}
.petit-maj{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Le lien de parrainage, à copier. */
.lien-copie{display:flex;gap:8px;margin-top:12px;min-width:0}
.lien-copie input{flex:1 1 auto;min-width:0;font-family:var(--f-mono);font-size:.82rem}
.ticket .parrain{padding-top:18px;border-top:1px dashed var(--line-2)}
button.lien{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Le bouton qui débloque une offre : armé au premier clic, il demande confirmation. */
.btn.debloquer.arme{background:var(--up);border-color:var(--up);box-shadow:0 8px 24px -10px rgba(0,163,108,.7)}

/* La fenêtre d'inscription. */

/* Les annonces en bas d'écran. */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;max-width:min(520px,calc(100vw - 32px));padding:12px 16px;border-radius:10px;background:var(--tape);color:#fff;font-size:.9rem;box-shadow:var(--shadow-2);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.toast.vu{opacity:1;transform:translate(-50%,0)}
.champ{display:grid;gap:6px}
.champ label{font-size:.84rem;font-weight:600;color:var(--ink-2)}
.case{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:.86rem;color:var(--ink-2)}
.case input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}
.message{padding:12px 14px;border-radius:10px;font-size:.9rem}
.message.erreur{background:var(--down-bg);color:var(--down)}
.message.info{background:var(--bg-2);color:var(--ink-2)}
.message.ok{background:var(--up-bg);color:var(--up)}

/* ---------- Le ticket de confirmation ---------- */
.ticket{max-width:560px;margin:clamp(32px,6vw,72px) auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-3);overflow:hidden}
.ticket-head{padding:18px 22px;background:var(--tape);color:#fff;display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.ticket-body{padding:22px}
.ticket dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;font-family:var(--f-mono);font-size:.86rem;margin:16px 0}
.ticket dt{color:var(--ink-3);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;padding-top:2px}
.ticket dd{color:var(--ink);overflow-wrap:anywhere}
.ticket .perfo{height:14px;background:radial-gradient(circle at 7px 0,var(--bg) 6px,transparent 6.5px) repeat-x;background-size:14px 14px;margin:0 -22px}

/* ---------- Atelier de la lettre ---------- */
.atelier{display:grid;gap:16px;padding-block:8px 72px}
@media (min-width:1020px){.atelier{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}#droite{position:sticky;top:80px}}
.atelier .pane + .pane{margin-top:14px}
.atelier .pane-body .aide{color:var(--ink-3);font-size:.86rem;margin-bottom:12px}
.rangee{display:grid;gap:12px}
@media (min-width:560px){.rangee.deux{grid-template-columns:1fr 1fr}}
.choix{display:flex;flex-wrap:wrap;gap:6px}
.choix label{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line-2);border-radius:9px;cursor:pointer;font-size:.88rem;background:var(--panel);transition:border-color .2s,background .2s}
.choix input{accent-color:var(--accent)}
.choix label:has(input:checked){border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.offre-choisie{display:flex;justify-content:space-between;gap:12px;align-items:start;padding:12px 14px;border-radius:10px;background:var(--accent-bg);margin-bottom:12px}
.depot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.depot input[type="file"]{display:none}
.solde{font-family:var(--f-mono);font-size:.76rem;padding:5px 10px;border-radius:999px;background:var(--up-bg);color:var(--up);font-weight:600;letter-spacing:.02em}
.journal{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-2);display:grid;gap:6px}
.journal div{animation:entre .4s var(--ease) both}
.journal .ok{color:var(--up)}
.feuille{background:#fff;color:#111;padding:clamp(20px,4.5vw,46px);font-family:"Times New Roman",Times,serif;font-size:15px;line-height:1.55;white-space:pre-wrap;min-height:440px;outline:none}
.outils{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--panel-2)}
.qa{display:grid;gap:10px;font-size:.88rem;color:var(--ink-2)}
.qa .mots{display:flex;flex-wrap:wrap;gap:6px}
.roue{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:tourne .8s linear infinite;display:inline-block;vertical-align:-3px}
@keyframes tourne{to{transform:rotate(360deg)}}
/* Choix de l'offre : recherche dans le catalogue, résultats en cartes. */
.resultats-titre{margin:12px 0 6px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.resultats-titre:empty{display:none}
.resultats{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.resultat{display:grid;gap:2px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.resultat:hover,.resultat:focus-visible{border-color:var(--accent);background:var(--accent-bg);outline:none}
.resultat:active{transform:scale(.995)}
.resultat-titre{font-size:.94rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.resultat-pied{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-3)}
.resultat-pied .tag{height:18px;padding:0 6px;font-size:.64rem}
.offre-choisie{margin-bottom:0}
.oc-actions{display:flex;flex-direction:column;gap:6px;flex:none}
.oc-etat{display:block;margin-top:6px;font-size:.82rem;color:var(--up);font-weight:500}
.oc-etat:empty{display:none}
.oc-etat.en-cours{color:var(--ink-3);font-weight:400}
.oc-etat.note{color:var(--ink-3);font-weight:400}
.oc-etat .roue{width:12px;height:12px;vertical-align:-2px;margin-right:4px}
#annonce-bloc{margin-top:12px}
#cv{margin-top:10px}
.entete-lettre{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.entete-lettre summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.entete-lettre .rangee{margin-top:12px}
.entete-lettre .aide{margin:8px 0 0}
.entete-resume{font-weight:400;color:var(--amber);margin-left:4px}
.entete-resume.ok{color:var(--up)}
.entete-pied{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
/* L'aperçu : la lettre à venir, qui se remplit à mesure des choix. */
.apercu{display:grid;gap:14px}
.apercu .lecteur{grid-area:auto}
.a4-apercu{aspect-ratio:auto;padding:7cqw 8cqw 5cqw;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.ap-corps{display:grid;gap:.9em}
.ap-corps p{margin:0}
#ap-dest,#ap-objet{transition:color .3s}
.ap-lignes{display:grid;gap:.6em;padding:.2em 0}
.ap-lignes i{display:block;height:.55em;border-radius:3px;background:#E3E7EE}
.ap-verifs{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);padding:14px 18px;border-top:1px solid var(--line)}
.liste-ok{display:grid;gap:8px}
.liste-ok li{display:grid;grid-template-columns:20px 1fr;gap:8px;color:var(--ink-2);font-size:.92rem}
.liste-ok li::before{content:"✓";color:var(--up);font-weight:700}

/* ---------- Pages de texte ---------- */
.texte{max-width:760px;padding-block:40px 72px}
.texte h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:18px}
.texte h2{font-size:1.35rem;margin:32px 0 10px;letter-spacing:-.02em}
.texte p,.texte li{color:var(--ink-2);margin:10px 0}
.texte ul li{padding-left:18px;position:relative}
.texte ul li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:1px;background:var(--accent)}

/* ---------- Pied de page ---------- */
.pied{border-top:1px solid var(--line);background:var(--panel);padding:48px 0 30px;font-size:.9rem;color:var(--ink-2)}
.pied-grille{display:grid;gap:28px}
@media (min-width:860px){.pied-grille{grid-template-columns:1.5fr 1fr 1.2fr 1fr}}
.pied h4{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;font-weight:500}
.pied li{margin:7px 0}
.pied a{text-decoration:none}
.pied a:hover{color:var(--accent)}
.pied-bas{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
  font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .revele,.heat a{opacity:1;transform:none}
  .hero h1 .ligne span{transform:none}
  .trace{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}
@media (max-width:640px){.eyebrow .cache-mobile{display:none}}

/* ==========================================================================
   Upgrade : globe, volet, projecteur, paquets, touches, profondeur.
   ========================================================================== */

@keyframes trait{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* Les paquets de données qui filent sur la grille du héros. */
.hero canvas.paquets{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero .shell{z-index:1}

/* Le globe des places financières. */
.globe-grille{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1020px){.globe-grille{grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);align-items:center}}
.globe-boite{position:relative;aspect-ratio:1.45/1;max-width:100%;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;cursor:grab;touch-action:pan-y;
  background:radial-gradient(70% 90% at 50% 50%,#FFFFFF 0%,#F1F4FA 55%,#E9EEF7 100%);box-shadow:var(--shadow-2)}
.globe-boite:active{cursor:grabbing}
@media (max-width:700px){.globe-boite{aspect-ratio:1/1}}
.globe-boite canvas{position:absolute;inset:0;width:100%;height:100%}
.globe-ping{position:absolute;z-index:3;display:grid;gap:2px;padding:9px 12px;border-radius:10px;background:rgba(10,18,34,.92);color:#fff;font-size:.82rem;
  box-shadow:0 14px 30px -14px rgba(10,18,34,.6);transform:translate(14px,-50%);pointer-events:none;min-width:160px;animation:entre .45s var(--ease) both}
.globe-ping .tag{background:rgba(124,245,189,.15);color:#7CF5BD;justify-self:start}
.globe-ping .tag i{background:#7CF5BD}
.globe-ping b{font-weight:600;letter-spacing:-.01em}
.globe-ping small{font-family:var(--f-mono);font-size:.7rem;color:#9FB0CC;text-transform:uppercase;letter-spacing:.05em}
.globe-coin{position:absolute;left:14px;bottom:12px;font-size:.68rem;color:var(--ink-3);letter-spacing:.06em}
.globe-coin b{color:var(--ink);font-weight:500}
.villes{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);overflow:hidden}
.villes .pane-head{border-bottom:1px solid var(--line)}
.villes ol{display:grid}
.villes li{display:grid;grid-template-columns:1fr 70px 36px 34px;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.9rem;
  transition:background .3s}
.villes li:last-child{border-bottom:0}
.villes li .vn{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.villes li .vb{height:5px;border-radius:3px;background:var(--bg-2);overflow:hidden}
.villes li .vb i{display:block;height:100%;background:var(--accent);border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.villes.vu li .vb i{transform:none}
.villes li .vc{text-align:right;font-size:.82rem}
.villes li .vf{text-align:right;font-size:.74rem}
.villes li.on{background:var(--accent-bg)}
.villes li.on .vn{color:var(--accent)}

/* Les touches, en relief, enfoncées quand actives. Celles de desk prennent la couleur
   du desk : teintées au repos, pleines quand le filtre est actif. */
.touches{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.touche{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:5px;border:1px solid var(--line-2);cursor:pointer;
  background:var(--panel);color:var(--ink);font-family:var(--f-mono);font-size:.74rem;font-weight:600;letter-spacing:.04em;
  box-shadow:0 2px 0 var(--line-2);transition:transform .08s,box-shadow .08s,background .15s,color .15s}
.touche small{font-weight:400;opacity:.7}
.touche:active,.touche[aria-pressed="true"]{transform:translateY(2px);box-shadow:none}
.touches-trait{width:1px;align-self:stretch;background:var(--line-2);margin:0 4px}
.touche[data-d]{border-color:rgba(var(--c),.35);background:rgba(var(--c),.08);color:rgb(var(--c));box-shadow:0 2px 0 rgba(var(--c),.3)}
.touche[data-d]:hover{background:rgba(var(--c),.14)}
.touche[data-d][aria-pressed="true"]{background:rgb(var(--c));border-color:rgb(var(--c));color:#fff;box-shadow:none}
.touche.go{background:linear-gradient(#3EE6A0,#14C47F);border-color:#0E9B63;color:#04210F;box-shadow:0 2px 0 #0B7D50,0 3px 8px -4px rgba(0,90,50,.5)}


/* Mouvement réduit (préférence du système, ou ?calme=1 pour les captures) : tout dans l'état final. */
.calme *,.calme *::before,.calme *::after{animation:none!important;transition:none!important}
.calme .revele,.calme .heat a{opacity:1!important;transform:none!important}
.calme .hero h1 .ligne span{transform:none!important}
.calme .trace{stroke-dashoffset:0!important}
.calme .villes li .vb i{transform:none!important}

/* ---------- La note de facilité, ma liste, la légende du globe ---------- */
.tag.facile{border:0;cursor:pointer;font:inherit;font-family:var(--f-mono);font-size:.7rem;font-weight:600}
.tag.facile.f-haut{background:var(--up-bg);color:var(--up)}
.tag.facile.f-moyen{background:var(--amber-bg);color:var(--amber)}
.tag.facile.f-bas{background:var(--down-bg);color:var(--down)}
.tag.facile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pourquoi{display:grid;gap:4px;margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-size:.82rem;color:var(--ink-2)}
.pourquoi>b{font-size:.72rem;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:500}
.pourquoi span b{display:inline-block;min-width:2.4em}
.pourquoi .plus b{color:var(--up)}
.pourquoi .moins b{color:var(--down)}
.pourquoi small{color:var(--ink-3);font-size:.74rem}
.btn.suivre{min-width:34px;padding-inline:8px;font-size:1rem;line-height:1}
.btn.suivre[aria-pressed="true"]{color:#C99400;border-color:#E0A600;background:#FFF8E1}
select.statut{width:auto;min-height:34px;padding:4px 28px 4px 10px;font-size:.8rem;font-weight:600;border-radius:8px}
select.statut.s-applied{color:var(--accent);border-color:var(--accent)}
select.statut.s-interview{color:var(--amber);border-color:var(--amber)}
select.statut.s-offer{color:var(--up);border-color:var(--up)}
select.statut.s-rejected{color:var(--ink-4)}
.cmd select#tri{flex:0 1 auto}
.touche.liste{background:linear-gradient(#FFFFFF,#F3F5F8);border-color:var(--line-2);color:var(--ink);box-shadow:0 2px 0 var(--line-2)}
.touche.liste[aria-pressed="true"]{background:linear-gradient(#FFF3C4,#FFE58A);border-color:#E0A600}
.suivi-resume{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);font-size:.86rem;color:var(--ink-2)}
.suivi-resume .s-applied b{color:var(--accent)}
.suivi-resume .s-interview b{color:var(--amber)}
.suivi-resume .s-offer b{color:var(--up)}
.villes li a.vn{color:inherit;text-decoration:none}
.villes li a.vn:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.globe-legende{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:.84rem;color:var(--ink-3)}
.globe-legende li{display:flex;align-items:center;gap:8px}
.globe-legende .pt{width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line-2)}
.globe-legende .pt.bleu{background:var(--accent)}
.globe-legende .pt.vert{background:var(--up)}
.globe-legende .arc{width:22px;height:10px;border:2px solid var(--up);border-bottom:0;border-radius:12px 12px 0 0;opacity:.8}

/* ---------- Les exigences et mon profil ---------- */
.tag.req{background:var(--amber-bg);color:var(--amber);cursor:pointer}
.tag.req.ok{background:var(--up-bg);color:var(--up)}
.tag.non{background:var(--down-bg);color:var(--down);cursor:pointer}
.row.inapte .row-title a,.row.inapte .row-emp{opacity:.55}
.pourquoi .titre-exig{margin-top:8px;font-size:.72rem;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:500}
.pourquoi .non-pour-moi{color:var(--down)}
.profil{display:grid;gap:12px;margin-top:12px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.bandeau-cv{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-top:12px;padding:12px 14px 12px 16px;
  background:var(--accent-bg);border:1px solid rgba(29,78,216,.18);border-radius:var(--r)}
.bandeau-cv-texte{font-size:.9rem;color:var(--ink-2);max-width:720px}
.bandeau-cv-texte b{color:var(--ink)}
.bandeau-cv-actions{display:flex;gap:8px;flex-wrap:wrap}
.bandeau-cv.actif{background:var(--up-bg);border-color:rgba(0,163,108,.25)}
.cv-etat{margin:8px 0 0}
.cv-etat.erreur{color:#B42318}
.cv-carte{display:grid;gap:12px}
.heros-cv{display:inline-flex;gap:6px;margin-top:12px;font-size:.92rem;font-weight:500;color:var(--accent);text-decoration:none}
.heros-cv:hover{text-decoration:underline}
/* Sans compte (14/10/2026, choix A d'Anthony) : plus rien n'est flouté ; ouvrir un stage demande un compte
   (offres.js, porteCompte), et la bannière le dit. */
/* « Didn't get it? » : d'abord les indésirables, puis un nouveau code. */
.code-rien{display:grid;gap:8px;justify-items:start;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);font-size:.9rem}
.code-rien p{margin:0;color:var(--ink-2)}
/* Les codes promo : le tableau de bord (créer, état, pause, suppression, contrôle). */
.code-etat{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;padding:2px 7px;border-radius:4px}
.code-etat.actif{color:var(--up);background:var(--up-bg)}
.code-etat.pause{color:var(--amber);background:var(--amber-bg)}
.code-etat.fini{color:var(--ink-3);background:var(--bg)}
.code-boutons{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.code-boutons .rouge,#p-suppr-bouton.rouge{color:var(--down);border-color:var(--down)}
.codes-controle{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border-top:1px solid var(--line)}
.controle-etapes{flex-basis:100%;list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:.9rem}
.controle-etapes .ok{color:var(--up)}
.controle-etapes .ko{color:var(--down)}
.code-promo .lien{font-size:.88rem}
.code-promo input{text-transform:uppercase}
.promo-ok{color:var(--up)}
.promo-ko{color:var(--down)}
.codes-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:0}
.codes-form label{display:grid;grid-template-rows:auto 40px;gap:6px;font-size:.8rem;color:var(--ink-3)}
.codes-form input{font:inherit;font-size:.92rem;height:40px;box-sizing:border-box;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);width:160px;max-width:100%}
.codes-form .btn{height:40px}
#p-code-message{margin:12px 0 0}
.tableau-defile{overflow-x:auto}
/* « Your match » sur la page d'un stage. */
.match-offre{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;max-width:760px;margin-top:18px;padding:16px 20px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel)}
.match-score{display:flex;flex-direction:column;align-items:center;min-width:84px}
.match-label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.match-score b{font-family:var(--f-mono);font-size:2.4rem;line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums}
.match-score small{font-size:.8rem;color:var(--ink-3)}
.match-corps{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.match-titre{margin:0;font-weight:600;color:var(--ink)}
.match-raisons{margin:0;padding-left:18px;font-size:.9rem;color:var(--ink-2)}
.match-train{font-size:.88rem;color:var(--accent);text-decoration:none}
.match-train:hover{text-decoration:underline;text-underline-offset:3px}
/* La tête d'un stage fermé : le stage ouvert le plus proche et ses deux boutons (15/10/2026). */
.jumeau{max-width:760px;margin-top:18px;padding:16px 20px 18px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel)}
.page-head .jumeau-ferme{margin:0 0 6px;font-size:.86rem;color:var(--ink-3)}
.jumeau h2{margin:0;font-size:1.2rem;line-height:1.3}
.jumeau-offre{display:flex;flex-direction:column;gap:4px;margin-top:12px;color:inherit;text-decoration:none}
.jumeau-offre b{font-size:1.05rem;font-weight:600;color:var(--ink)}
.jumeau-offre:hover b{text-decoration:underline;text-underline-offset:3px}
.jumeau-tous{display:inline-block;margin-top:12px;font-size:.88rem;color:var(--accent);text-decoration:none}
.jumeau-tous:hover .arrow{transform:translateX(3px)}
/* Sans jumeau : les 3 stages ouverts du même desk, chacun avec sa lettre (16/10/2026). */
.jumeau-liste{list-style:none;margin:0;padding:0}
.jumeau-liste li+li{margin-top:16px;padding-top:4px;border-top:1px solid var(--line)}
.jumeau-liste .btn{margin-top:12px}
/* Second rang (17/10/2026) : les stages d'autres employeurs, discrets, sans gros bouton. */
.jumeau-ailleurs{border-left-color:var(--line);background:transparent;padding:12px 16px 14px}
.jumeau-ailleurs h2{font-size:1rem;color:var(--ink-2)}
.jumeau-ailleurs .muted{margin:2px 0 0;font-size:.84rem}
.ailleurs-liste{list-style:none;margin:10px 0 0;padding:0;font-size:.92rem}
.ailleurs-liste li{padding:6px 0;border-top:1px solid var(--line)}
.ailleurs-liste a{color:var(--ink);text-underline-offset:3px}
.ailleurs-liste .ailleurs-lettre{display:block;margin-top:2px;font-size:.84rem;color:var(--accent)}
/* 320 px : la lettre tient sur une ligne, comme sur la page d'un stage ouvert. */
@media (max-width:400px){.jumeau{padding:14px 14px 16px}.jumeau .btn{padding-inline:14px}}
.fiche-bloc.fiche-match{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.fiche-match-note{display:flex;align-items:baseline;gap:6px}
.fiche-match b{font-size:1.6rem;line-height:1;color:var(--accent)}
.fiche-match small{color:var(--ink-3)}
/* La relance quand le solde ne paie plus ni lettre ni séance. */
.relance{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;width:fit-content;max-width:100%;margin-top:14px;padding:9px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);color:var(--ink-2);font-size:.92rem}
.relance a{color:inherit;text-decoration:none}
.relance a b{color:var(--ink)}
.relance a:hover b{text-decoration:underline;text-underline-offset:3px}
.relance a:hover .arrow{transform:translateX(3px)}
.relance .lien,.caisse-actions .lien{font-size:.86rem}
.caisse-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.desks-titre{margin:36px 0 14px;font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
.desks-titre span{font-weight:400;font-size:.88rem;color:var(--ink-3);margin-left:8px}
.match{display:grid;justify-items:end;line-height:1}
.match small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.match b{font-family:var(--f-serif);font-size:2rem;font-weight:600;letter-spacing:-.02em}
.match.haut b{color:var(--up)}.match.moyen b{color:#B45309}.match.bas b{color:#B42318}
.cv-demo-pied{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:18px}
.cv-demo-pied .muted{font-size:.82rem}
.cv-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cv-tete b{display:block;font-family:var(--f-serif);font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cv-label{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.cv-stages{text-align:right;font-family:var(--f-mono);color:var(--ink-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.cv-stages b{display:block;font-family:var(--f-serif);font-size:1.8rem;line-height:1;color:var(--ink);letter-spacing:0;text-transform:none}
.cv-ligne{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:baseline}
.cv-ligne>div{display:flex;flex-wrap:wrap;gap:6px}
.cv-bilan{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:4px}
.cv-bilan ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.88rem;color:var(--ink-2)}
.cv-bilan>div:first-child li::marker{color:var(--up)}
.cv-bilan>div:last-child li::marker{color:#C2410C}
@media (max-width:640px){.cv-bilan{grid-template-columns:1fr}.cv-ligne{grid-template-columns:1fr;gap:4px}}
.profil fieldset{border:0;margin:0;padding:0;min-width:0}
.profil legend{font-size:.84rem;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.puces{display:flex;flex-wrap:wrap;gap:6px}
.puce{position:relative;cursor:pointer}
.puce input{position:absolute;opacity:0;width:1px;height:1px}
.puce span{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line-2);font-size:.84rem;background:var(--panel);color:var(--ink-2)}
.puce input:checked+span{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:600}
.puce input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.profil-fin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.profil-fin p{margin:0}
.profil-ligne{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;font-size:.86rem;color:var(--ink-2)}
.profil-ligne label{display:flex;align-items:center;gap:8px}
.profil-ligne select{width:auto;min-height:34px;padding:4px 28px 4px 10px}
.profil-ligne .case{display:flex}
.cmd:has(.profil:not([hidden])){position:static}

/* ---------- Le bloc premium de l'espace (14/10/2026) : le bloc sombre de la salle de marché, comme
   l'alerte e-mail ; le titre d'Anthony en grand, trois faits, un bouton. ---------- */
.compte-premium{display:grid;gap:16px 28px;align-items:center;margin:0 0 16px;padding:22px 24px;border-radius:var(--r-l);
  background:#0A1222;color:#C7D0E0;box-shadow:var(--shadow-2,0 6px 20px -10px rgba(10,18,34,.5))}
@media (min-width:860px){.compte-premium{grid-template-columns:1fr auto}}
.cp-sur{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#C7D0E0}
.cp-sur i{width:8px;height:8px;border-radius:50%;background:#2BE39A;box-shadow:0 0 0 3px rgba(43,227,154,.18)}
.compte-premium h2{margin:10px 0 12px;font-family:var(--f-serif);font-weight:500;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.15;color:#FFFFFF;max-width:24ch}
.cp-liste{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:.92rem}
.cp-liste li{display:flex;gap:9px}
.cp-liste li::before{content:"✓";color:#2BE39A;font-weight:700}
.cp-actions{display:grid;gap:10px;justify-items:center}
.cp-actions .btn{white-space:nowrap}
.cp-lien{color:#C7D0E0;font-size:.86rem;text-underline-offset:3px}
@media (max-width:760px){.compte-premium{padding:18px 16px}.cp-actions .btn{width:100%;justify-content:center;white-space:normal}}

/* ---------- « What you're looking for » et l'alerte (14 et 15/10/2026, cible.js) ----------
   La première chose de la page des offres (avant la barre des filtres), l'alerte juste après :
   verte quand elle marche, rouge quand elle est éteinte (sans abonnement, un clic dit pourquoi).
   Dans un groupe de puces où quelque chose est choisi, le reste passe en gris ; un desk choisi
   prend sa couleur. Puis « My search » ou « See all ». */
.ma-recherche{display:grid;gap:12px;margin:2px 0 14px;padding:18px 20px;background:var(--panel);border:1px solid var(--line-2);
  border-left:4px solid var(--accent);border-radius:var(--r-l);box-shadow:var(--shadow-2)}
.recherche-tete{display:flex;gap:10px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.recherche-tete h2{margin:0;font-family:var(--f-serif);font-size:clamp(1.35rem,2.4vw,1.65rem);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
#recherche-resume{margin:4px 0 0;color:var(--ink-2);font-size:.92rem}
#recherche-resume b{color:var(--ink);font-weight:600}
.cible-alerte{display:flex;align-items:center;gap:10px 14px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--panel-2)}
.cible-alerte-texte{flex:1 1 auto;display:grid;gap:2px;min-width:0}
.cible-alerte b{color:var(--ink);font-size:.95rem}
.cible-alerte small{color:var(--ink-2);font-size:.82rem}
.cible-alerte.on{background:var(--up-bg);border-color:rgba(0,163,108,.3)}
.cible-alerte.off{background:var(--down-bg);border-color:rgba(194,40,40,.25)}
.alerte-etat{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;font-family:var(--f-mono);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.alerte-etat.on{background:var(--up);color:#fff}
.alerte-etat.off{background:var(--down);color:#fff}
.interrupteur{position:relative;display:inline-block;width:46px;height:26px;flex:none;cursor:pointer}
.interrupteur input{position:absolute;opacity:0;width:1px;height:1px}
.interrupteur span{position:absolute;inset:0;border-radius:999px;background:var(--line-2);transition:background .15s}
.interrupteur span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(10,18,34,.3);transition:transform .15s}
.interrupteur input:checked+span{background:var(--up)}
.interrupteur input:checked+span::after{transform:translateX(20px)}
.interrupteur input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.alerte-message{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--r);
  background:var(--accent-bg);border:1px solid rgba(29,78,216,.22);font-size:.9rem;color:var(--ink-2)}
.alerte-message b{color:var(--ink)}
.alerte-message-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.ma-recherche .cible{display:grid;gap:14px;padding-top:12px;border-top:1px solid var(--line)}
.cible fieldset{border:0;margin:0;padding:0;min-width:0}
.cible legend{font-size:.84rem;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.puces-groupe{flex-basis:100%;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.puces-groupe:first-child{margin-top:0}
.puces.a-choisi .puce input:not(:checked)+span{color:var(--ink-4);background:var(--panel-2);border-color:var(--line)}
.cible .puce[data-d] input:checked+span{background:rgb(var(--c));border-color:rgb(var(--c));color:#fff}
.cible-aide{margin:8px 0 0;font-size:.8rem;color:var(--ink-3)}
/* La vitrine sans compte : des puces d'exemple, chacune mène à l'inscription. */
/* (15/10) limité aux puces : « .apercu » seul écrasait l'aperçu de la lettre, devenu tout petit. */
.puces.apercu{display:flex;flex-wrap:wrap;gap:6px}
.puces.apercu .puce{text-decoration:none}
.puces.apercu .puce span{cursor:pointer}
.puces.apercu .puce[data-d] span{color:rgb(var(--c));border-color:rgba(var(--c),.35);background:rgba(var(--c),.06)}
.puces.apercu .puce:hover span{border-color:var(--accent)}
a.interrupteur{display:inline-block}
details.cible-replie{margin-top:8px}
details.cible-replie>summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--accent);list-style:none}
details.cible-replie>summary::-webkit-details-marker{display:none}
details.cible-replie>summary span{margin-left:6px;font-weight:400;color:var(--ink-3)}
details.cible-replie[open]>div{display:grid;gap:8px;margin-top:8px}
.cible legend small{margin-left:6px;font-weight:400;color:var(--ink-3)}
details.cible-maisons>summary{cursor:pointer;font-size:.84rem;font-weight:600;color:var(--ink-2);list-style:none}
details.cible-maisons>summary::-webkit-details-marker{display:none}
details.cible-maisons>summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:10px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-3px) rotate(45deg)}
details.cible-maisons[open]>summary::after{transform:translateY(0) rotate(-135deg)}
details.cible-maisons>summary span{margin-left:8px;font-weight:400;color:var(--ink-3)}
details.cible-maisons[open]>.puces{margin-top:10px}
select.cible-autre{width:auto;max-width:100%;margin-top:8px;min-height:34px;padding:4px 28px 4px 10px;font-size:.84rem}
.cible-pied{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.cible-pied p{margin:0}
.cible-fin{display:inline-flex;align-items:center;gap:16px}
#cible-total{color:var(--ink-2);font-size:.9rem}
#cible-total b{font-family:var(--f-mono);color:var(--ink)}
.vue{justify-self:start;display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel-2)}
.vue button{border:0;background:transparent;padding:7px 16px;border-radius:999px;font:inherit;font-size:.88rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.vue button small{margin-left:6px;font-family:var(--f-mono);font-size:.74rem;font-weight:500;opacity:.7}
.vue button[aria-pressed="true"]{background:var(--ink);color:#fff}
.tag.vise{background:var(--accent);color:#fff;font-weight:600}
.tag.contrat{background:var(--panel);border:1px solid var(--ink-3);color:var(--ink);font-weight:600}
/* La barre des filtres : le tri, « Filters » (desk, lieu, contrat, début, repliés), « My profile », « My list ». */
.filtres-bouton{display:inline-flex}
@media (min-width:761px){.cmd form:not(.ouverts)>select:not(#tri){display:none}}
@media (max-width:760px){
  .ma-recherche{padding:14px 14px;gap:10px}
  .cible-alerte{flex-wrap:wrap}
  .cible-alerte-texte{flex-basis:calc(100% - 140px)}
  .cible .puces{gap:5px}
  .cible .puce span{height:32px;padding:0 10px;font-size:.82rem}
  .alerte-message .btn{width:100%;justify-content:center}
  .vue{justify-self:stretch}
  .vue button{flex:1}
}

/* ---------- Date de début, « appliqué » ---------- */
.tag.debut{background:var(--accent-bg);color:var(--accent)}
.tag.fait{background:var(--up);color:#fff}
.btn.applique{min-width:34px;padding-inline:8px;font-weight:700}
.btn.applique[aria-pressed="true"]{background:var(--up);border-color:var(--up);color:#fff}
.row.postule{background:linear-gradient(90deg,var(--up-bg),transparent 40%)}
.cmd select#debut{flex:0 1 auto}

/* ---------- Pages d'offre, d'employeur, de ville, rapport ---------- */
.fil{font-size:.84rem;color:var(--ink-3)}
.fil a{color:var(--ink-3)}
.offre-grille{display:grid;gap:28px;padding-block:8px 72px}
@media (min-width:1000px){.offre-grille{grid-template-columns:minmax(0,1fr) 360px;align-items:start}}
.offre-cote{display:grid;gap:0;min-width:0}
.faits{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:10px 0 16px;font-size:.94rem}
.faits dt{color:var(--ink-3);font-family:var(--f-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;padding-top:3px}
.faits dd{margin:0;color:var(--ink)}
.liens{display:grid;gap:8px;margin-top:10px;font-size:.9rem}
.liens a{font-weight:500}
.stats-grille{display:grid;gap:16px;margin-top:22px}
@media (min-width:860px){.stats-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat-bloc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.stat-bloc h3{font-size:.84rem;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:500;margin-bottom:10px}
.barres{display:grid;gap:7px}
.barres li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:.88rem}
.b-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-barre{height:6px;border-radius:3px;background:var(--bg-2);overflow:hidden}
.b-barre i{display:block;height:100%;background:var(--accent);border-radius:3px}
.b-n{text-align:right;font-size:.8rem;color:var(--ink-2)}
.kpi-grille{display:grid;gap:12px;margin-top:22px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:4px}
.kpi b{font-size:1.8rem;font-weight:500;letter-spacing:-.03em}
.kpi span{font-size:.84rem;color:var(--ink-3)}
.index-liste{display:grid;gap:0;margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (min-width:760px){.index-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.index-liste li{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line)}
.index-liste li a{font-weight:500}
.faq-liste{margin-top:30px;max-width:820px}
.faq-liste h2{font-size:1.4rem;margin-bottom:10px}
.faq-liste details{border-top:1px solid var(--line);padding:12px 0}
.faq-liste summary{cursor:pointer;font-weight:600}
.faq-liste p{color:var(--ink-2);margin-top:8px}
.plan .liens li{display:block;color:var(--ink)}
.globe-boite.tenu{cursor:grabbing}
.globe-legende .pt.main{background:transparent;border:2px solid var(--accent);box-shadow:none}

/* ---------- Le héros : recherche, chiffres encadrés ---------- */
.recherche{display:flex;align-items:center;gap:8px;margin-top:26px;max-width:600px;padding:6px 6px 6px 14px;background:var(--panel);border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--shadow-1);transition:border-color .2s,box-shadow .2s}
.recherche:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.recherche .invite{font-family:var(--f-mono);font-weight:600;color:var(--accent)}
.recherche input{flex:1 1 auto;min-width:0;border:0;background:transparent;box-shadow:none;padding:10px 4px;font-family:var(--f-mono);font-size:.95rem}
.recherche input:focus{box-shadow:none;outline:none}
.recherche .btn{flex:none;min-height:44px;border-radius:5px}
.chiffres-ligne{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:28px;max-width:640px;padding:18px 0 16px;
  background:var(--panel);border:1px solid var(--line-2);border-top:2px solid var(--ink);border-radius:4px;box-shadow:var(--shadow-2)}
.chiffres-ligne li{display:grid;gap:2px;padding:0 16px;border-left:1px solid var(--line-2)}
.chiffres-ligne li:first-child{border-left:0}
.chiffres-ligne b{font-family:var(--f-mono);font-weight:500;font-size:clamp(1.8rem,2.8vw,2.5rem);letter-spacing:-.05em;line-height:1.05;color:var(--ink)}
.chiffres-ligne b.up{color:var(--up)}
.chiffres-ligne span{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.05em;white-space:nowrap;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:520px){.chiffres-ligne{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0}.chiffres-ligne li:nth-child(3){border-left:0}}

/* Le fil du terminal : une nouvelle offre glisse en tête, la liste descend en douceur. */
.feed-ligne.entre{animation:feedEntre .7s var(--ease) both,flash 1.6s var(--ease)}
@keyframes feedEntre{from{max-height:0;opacity:0;padding-block:0}to{max-height:64px;opacity:1}}
.hero h1 .ligne:first-child{white-space:nowrap}
@media (max-width:600px){.hero h1{font-size:clamp(2rem,9vw,2.7rem);font-size:min(clamp(2rem,9vw,2.7rem),9cqi)}}
.hero .lede{max-width:540px}

/* L'en-tête au téléphone : le nom et le bouton tiennent sur une ligne. */
.logo span,.nav a{white-space:nowrap}
@media (max-width:440px){
  .top .shell{gap:10px}
  .logo{gap:8px;font-size:1.02rem}
  .nav{gap:2px}
  .nav a{padding:8px 6px;font-size:.86rem}
  .nav a.btn{padding:6px 10px}
}

/* Le mot du titre, en italique, change en rouleau : il monte et sort, le suivant arrive
   par-dessous. Le découpage (clip-path) laisse la ligne de base en place et garde les jambages. */
.volet{position:relative;display:inline-block;vertical-align:baseline;white-space:nowrap;font-style:italic;color:var(--accent);
  clip-path:inset(-.06em -.12em -.1em -.12em);transition:width .6s cubic-bezier(.7,0,.2,1)}
.volet>span{display:inline-block;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.volet>span.suivant{position:absolute;left:0;top:0;transform:translateY(150%)}
.volet.roule>span{transform:translateY(-150%)}
.volet.roule>span.suivant{transform:none}
.volet.pose>span{transition:none}
.feed-ligne .t.neuf{color:var(--up);font-weight:600}

/* ==========================================================================
   Les comptes : le menu, les écrans de connexion, l'espace, le tableau de bord.
   ========================================================================== */

/* Le menu : « Sign in / Create account » hors connexion, le bouton du compte sinon
   (la classe .connecte est posée sur <html> dès le chargement, sans clignotement). */
.nav .si-connecte{display:none}
html.connecte .nav .si-connecte{display:inline-flex}
html.connecte .nav .si-sorti{display:none}
@media (max-width:440px){.nav .grand-ecran{display:none}}
@media (min-width:441px){.nav .petit-ecran{display:none}}
.nav a.btn.nav-compte,.nav a.btn.nav-compte:hover,.nav a.btn.nav-compte[aria-current="page"]{gap:8px;padding:4px 12px 4px 4px;background:var(--panel);color:var(--ink);border:1px solid var(--line-2);font-weight:500}
.nav a.btn.nav-compte:hover,.nav a.btn.nav-compte[aria-current="page"]{border-color:var(--ink)}
.nav-compte .avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:4px;background:var(--ink);color:#fff;font-family:var(--f-serif);font-size:.9rem;font-weight:600}
.nav-compte b{font-weight:600}
/* Une formule tout inclus (14/10/2026) : son nom au lieu du solde. */
.nav-compte .nav-formule,.tout-inclus .nav-compte .nav-solde-txt{display:none}
.tout-inclus .nav-compte .nav-formule{display:inline}

/* Les champs de mot de passe : « Show » dans le champ. */
.mdp{position:relative}
.mdp input{padding-right:68px}
.mdp .voir{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:6px 8px;border-radius:4px;cursor:pointer;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.mdp .voir:hover{color:var(--ink);background:var(--bg-2)}
.aide{font-size:.8rem;color:var(--ink-3)}

/* ---------- Connexion et création de compte : plein écran, sans menu ni bas de page.
   À gauche le formulaire, seul ; à droite la vitrine du produit (dès 1000 px). ---------- */
body[data-cadre="auth"] .status,body[data-cadre="auth"] .top,body[data-cadre="auth"] .pied{display:none}
body[data-cadre="auth"]{background-color:var(--panel)}  /* blanc, mais le quadrillage reste */
.auth{display:grid;min-height:100vh;min-height:100dvh}
@media (min-width:1000px){.auth{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}
.auth-volet{display:flex;flex-direction:column;min-width:0;min-height:100vh;min-height:100dvh;padding:22px clamp(20px,5vw,56px);background:var(--panel)}
.auth-tete{display:flex;justify-content:space-between;align-items:center;gap:16px}
.auth-site{font-size:.9rem;color:var(--ink-2);text-decoration:none}
.auth-site:hover{color:var(--ink);text-decoration:underline}
.auth-centre{flex:1;display:grid;place-items:center;padding-block:clamp(28px,6vh,64px)}
.auth-bloc{width:100%;max-width:420px}
.auth-offre{margin-bottom:18px;font-weight:600}
.auth-bloc h1{font-size:clamp(2.2rem,3.6vw,2.7rem);margin:0 0 10px}
.auth-sous{color:var(--ink-2);font-size:1rem}
.auth-bloc > .message{margin-top:18px}
.auth-form{display:grid;gap:18px;margin-top:30px}
.auth-form input[type="email"],.auth-form input[type="password"],.auth-form input[type="text"]{min-height:48px}
.champ-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.champ-tete .lien{font-size:.85rem}
.auth-bouton{width:100%;min-height:50px;font-size:1rem}
.auth-google{display:grid;gap:12px;margin-top:18px}
.google-bouton{min-height:44px;display:flex;justify-content:center}
.auth-google .aide{text-align:center;margin:0}
.auth-ou{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:.82rem;margin-bottom:2px}
.auth-ou::before,.auth-ou::after{content:"";flex:1;border-top:1px solid var(--line)}
.auth-promo{margin-top:18px;text-align:left}
.mode-oubli #google-zone{display:none}
.auth-bouton[disabled]{opacity:.75;cursor:progress}
.auth-retour{justify-self:start;font-size:.9rem}
.auth-bascule{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink-2)}
.auth-bascule a{color:var(--accent);font-weight:600}
.auth-pied{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:.8rem;color:var(--ink-3)}
.auth-pied a{color:var(--ink-3);text-decoration:none}
.auth-pied a:hover{color:var(--ink);text-decoration:underline}
.auth-securite{display:inline-flex;align-items:center;gap:6px;margin-right:auto}
.auth-securite svg{width:12px;height:12px;flex:none}
/* La force du mot de passe, en quatre crans. */
.force{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 56px;gap:4px;align-items:center;margin-top:2px}
.force i{height:4px;border-radius:2px;background:var(--bg-2);transition:background .2s}
.force[data-n="1"] i:nth-child(-n+1){background:var(--down)}
.force[data-n="2"] i:nth-child(-n+2){background:var(--amber)}
.force[data-n="3"] i:nth-child(-n+3){background:var(--up-2)}
.force[data-n="4"] i:nth-child(-n+4){background:var(--up)}
.force span{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);text-align:right}

/* La vitrine : le fil des offres comme dans le produit, et un relevé de crédits
   posé dessus, sur un fond bleuté quadrillé. */
.vitrine{display:none}
@media (min-width:1000px){
  .vitrine{display:flex;align-items:center;justify-content:center;min-width:0;padding:56px clamp(40px,5vw,80px);border-left:1px solid var(--line);
    background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/40px 40px,
      linear-gradient(165deg,#F1F4FB 0%,#E4EAF6 100%)}
}
.vitrine-contenu{width:100%;max-width:560px}
.vitrine-sur{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.vitrine-sur i{width:7px;height:7px;border-radius:50%;background:var(--up-2);animation:clign 1.6s infinite}
.vitrine h2{font-size:clamp(2.1rem,3.1vw,2.9rem);margin:14px 0 30px}
.vitrine h2 em{font-style:italic;color:var(--accent)}
.vitrine-scene{position:relative;padding-bottom:64px}
.vitrine-carte{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  box-shadow:0 2px 6px rgba(10,18,34,.05),0 34px 60px -34px rgba(10,18,34,.38)}
.vitrine-carte-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.vitrine-carte-tete b{color:var(--ink);font-weight:600}
.vitrine-carte-tete .direct{display:inline-flex;align-items:center;gap:6px;color:var(--up);font-weight:600}
.vitrine-carte-tete .direct i{width:7px;height:7px;border-radius:50%;background:var(--up-2);animation:clign 1.6s infinite}
.vitrine-carte li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.93rem}
.vitrine-carte li:last-child{border-bottom:0}
.vitrine-carte .t{font-family:var(--f-mono);font-size:.76rem;color:var(--ink-3)}
.vitrine-carte .t.neuf{color:var(--up);font-weight:600}
.vitrine-carte .e{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vitrine-carte .e small{font-weight:400;color:var(--ink-3);margin-left:6px}
.vitrine-carte .tag{min-width:52px;justify-content:center;font-weight:600}
.vitrine-releve{position:absolute;right:-24px;bottom:0;width:min(290px,70%);background:var(--panel);border:1px solid var(--line-2);border-top:2px solid var(--ink);border-radius:4px;
  box-shadow:0 26px 50px -22px rgba(10,18,34,.45);font-size:.86rem}
.vitrine-releve > div{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line)}
.vitrine-releve > div span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vitrine-releve .vitrine-releve-tete{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.vitrine-releve b{font-family:var(--f-mono);font-weight:600}
.vitrine-releve .plus{color:var(--up)}
.vitrine-releve .vr-solde{border-bottom:0;font-weight:600}
.vitrine-faits{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:30px}
.vitrine-faits li{display:grid;gap:2px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.vitrine-faits b{font-size:1.7rem;font-weight:500;letter-spacing:-.04em;text-transform:none;color:var(--ink)}
.vitrine-faits b.up{color:var(--up)}
@media (prefers-reduced-motion:reduce){.vitrine-sur i,.vitrine-carte-tete .direct i{animation:none}}

/* ---------- L'espace du compte ---------- */
.espace{padding-block:clamp(28px,5vw,56px)}
.espace-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.espace-tete h1{font-size:clamp(2.1rem,3.8vw,3rem);margin:10px 0 6px}
.espace-actions{display:flex;flex-wrap:wrap;gap:8px}
.espace > .shell > .message{margin-bottom:16px}
.espace-grille{display:grid;gap:16px;align-items:start;margin-top:16px}
@media (min-width:1000px){.espace-grille{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}.espace-grille.deux{grid-template-columns:1fr 1fr}}
.colonne{display:grid;gap:16px;min-width:0}
.carte{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);overflow:hidden}
.carte-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel-2);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.carte-corps{padding:18px}
.carte-corps h2{font-size:1.5rem;margin-bottom:6px}
.carte-pied{padding:14px 18px;border-top:1px solid var(--line)}
.carte-vide{display:block;padding:20px 18px;color:var(--ink-3);font-size:.92rem}
.carte-vide a{color:var(--accent)}
.solde-v{display:flex;align-items:baseline;gap:12px}
.solde-v b{font-family:var(--f-mono);font-weight:500;font-size:clamp(2.8rem,5.4vw,3.8rem);letter-spacing:-.05em;line-height:1}
.solde-v span{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.solde-eq{margin-top:10px;color:var(--ink-2)}
.solde-eq b{font-family:var(--f-mono);font-weight:600;color:var(--ink)}
.reinit{border-color:var(--accent);margin-bottom:16px}
.form-mdp{display:grid;gap:12px}
.form-mdp.en-ligne{grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-top:14px;max-width:560px}
@media (max-width:520px){.form-mdp.en-ligne{grid-template-columns:1fr}}
.form-mdp .btn{justify-self:start}
.liste-lignes > li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.liste-lignes > li:last-child{border-bottom:0}
.liste-lignes > li.carte-vide{display:block}
.liste-lignes .l-titre{font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.liste-lignes .l-titre a{text-decoration:none}
.liste-lignes .l-titre a:hover{text-decoration:underline}
.liste-lignes small{display:block;margin-top:2px;color:var(--ink-3);font-size:.84rem}
/* Le relevé : date, libellé, crédits, comme un relevé de compte. */
.table-defile{overflow-x:auto}
.releve{width:100%;border-collapse:collapse;font-size:.9rem}
.releve th{text-align:left;padding:10px 18px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.releve td{padding:11px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.releve tr:last-child td{border-bottom:0}
.releve td a{color:var(--ink);text-decoration:none}
.releve td a:hover{text-decoration:underline}
.releve .n{text-align:right;font-family:var(--f-mono);white-space:nowrap}
.releve .d{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);white-space:nowrap}
.releve .plus{color:var(--up);font-weight:600}
.releve tr.total td{font-weight:600;border-top:1px solid var(--ink)}
.releve td.carte-vide{display:table-cell}

/* ---------- Le tableau de bord ---------- */
.kpis-grille{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.kpis-grille{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi-carte{min-width:0;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1)}
.kpi-carte.cle{border-top:2px solid var(--ink);border-radius:4px}
.kpi-carte span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kpi-carte b{display:block;margin-top:6px;font-family:var(--f-mono);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:-.04em;line-height:1.05}
.kpi-carte small{display:block;margin-top:6px;font-size:.82rem;color:var(--ink-3)}
/* Les histogrammes : une série, une colonne par jour ; la colonne entière répond au
   survol (cible plus large que la barre), la barre est ancrée en bas. */
/* Le graphe des jours du tableau de bord (15/10/2026) : les inscrits en courbe, le revenu en barres. */
.courbe-double{position:relative;padding:16px 18px 12px}
.cd-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-bottom:10px;font-size:.84rem;color:var(--ink-3)}
.cd-tete b{font-family:var(--f-mono);font-weight:500;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink);margin-right:6px}
.cd-legende{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:.78rem}
.cd-legende span{display:inline-flex;align-items:center;gap:6px}
.cd-l-ligne{display:inline-block;width:16px;height:2px;background:var(--accent);border-radius:2px}
.cd-l-barre{display:inline-block;width:10px;height:10px;background:var(--up);border-radius:2px}
.courbe-double svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.cd-grille{stroke:var(--line);stroke-width:1}
.cd-grille.zero{stroke:var(--line-2)}
.cd-axe{font-family:var(--f-mono);font-size:10px;fill:var(--ink-3)}
.cd-barre{fill:var(--up)}
.cd-ligne{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cd-point{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.cd-curseur{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.cd-zone{fill:transparent;cursor:crosshair}
.cd-bulle{position:absolute;z-index:2;pointer-events:none;transform:translateX(10px);background:var(--ink);color:#fff;font-size:.75rem;line-height:1.4;padding:6px 9px;border-radius:6px;white-space:nowrap}
.cd-bulle.gauche{transform:translateX(calc(-100% - 10px))}
.cd-table{margin-top:10px;font-size:.84rem}
.cd-table summary{cursor:pointer;color:var(--ink-3);width:max-content}
.histo{padding:16px 18px 12px}
.histo-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.histo-tete b{font-family:var(--f-mono);font-weight:500;font-size:1.5rem;letter-spacing:-.03em}
.histo-tete span{font-size:.84rem;color:var(--ink-3)}
.histo-barres{display:flex;align-items:stretch;gap:2px;height:120px;border-bottom:1px solid var(--line-2);
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 50%}
.histo-barres span{position:relative;flex:1;min-width:0;outline:none}
.histo-barres span::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h);background:var(--accent);border-radius:4px 4px 0 0;transition:filter .15s}
.histo-barres span:hover::before,.histo-barres span:focus-visible::before{filter:brightness(1.25)}
.histo-barres span:hover::after,.histo-barres span:focus-visible::after{content:attr(data-t);position:absolute;bottom:calc(var(--h) + 8px);left:50%;transform:translateX(-50%);z-index:2;
  padding:5px 8px;border-radius:4px;background:var(--ink);color:#fff;font-family:var(--f-mono);font-size:.72rem;white-space:nowrap;pointer-events:none}
.histo-barres span:first-child:hover::after{left:0;transform:none}
.histo-barres span:last-child:hover::after{left:auto;right:0;transform:none}
.histo-axe{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}

/* ---------- Le cadre « app » (espace, tableau de bord) : le menu reste, le pied de page
   du site laisse la place à une ligne discrète. ---------- */
body[data-cadre="app"] .pied{display:none}
.app-pied{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-3)}
.app-pied a{color:var(--ink-3);text-decoration:none}
.app-pied a:hover{color:var(--ink);text-decoration:underline}

/* La synthèse du compte : le solde, trois chiffres, les actions. */
.synthese{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px;background:var(--panel);border:1px solid var(--line-2);border-top:2px solid var(--ink);
  border-radius:4px;box-shadow:var(--shadow-2);overflow:hidden}
.synthese > div{min-width:0;padding:16px}
.synthese-solde,.synthese-actions{grid-column:1/-1}
.synthese-chiffre{display:grid;align-content:start;gap:2px;border-top:1px solid var(--line)}
.synthese-chiffre + .synthese-chiffre{border-left:1px solid var(--line)}
.synthese-label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.synthese-solde .solde-v{margin-top:8px}
.synthese-chiffre b{margin-top:6px;font-family:var(--f-mono);font-weight:500;font-size:1.6rem;letter-spacing:-.04em;line-height:1.05}
.synthese-chiffre small{font-size:.8rem;color:var(--ink-3)}
.synthese-actions{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);background:var(--panel-2)}
@media (min-width:900px){
  .synthese{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr))}
  .synthese > div{padding:22px 24px}
  .synthese-solde{grid-column:auto}
  .synthese-chiffre{border-top:0;border-left:1px solid var(--line)}
  .synthese-chiffre b{font-size:clamp(1.8rem,2.6vw,2.3rem)}
}
.releve .solde-apres{color:var(--ink-3)}
.releve .courriel{overflow-wrap:anywhere}
/* Les réglages : l'adresse, le mot de passe, la déconnexion. */
.reglages{display:grid;gap:18px}
.reglage{display:flex;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:.92rem}
.reglage span{color:var(--ink-3)}
.reglage b{font-weight:600;text-align:right;overflow-wrap:anywhere;min-width:0}
.reglage-sortir{justify-self:start;font-size:.9rem}

/* Le tableau de bord : l'écart avec la semaine d'avant, le parcours des comptes. */
.ecart{display:block;margin-top:10px;font-family:var(--f-mono);font-size:.74rem}
.ecart.hausse{color:var(--up)}
.ecart.baisse{color:var(--down)}
.ecart.egal{color:var(--ink-3)}
.entonnoir-carte{margin-top:16px}
.entonnoir{display:grid;gap:14px;padding:20px 18px}
.etape-e{display:grid;grid-template-columns:190px minmax(0,1fr) 56px 48px;gap:14px;align-items:center;font-size:.92rem}
.etape-nom{color:var(--ink-2)}
.etape-barre{height:12px;border-radius:3px;background:var(--bg-2);overflow:hidden}
.etape-barre i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.etape-e b{font-family:var(--f-mono);font-weight:600;text-align:right}
.etape-pct{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);text-align:right}
@media (max-width:600px){.etape-e{grid-template-columns:minmax(0,1fr) auto auto;row-gap:6px}.etape-barre{grid-column:1/-1;grid-row:2}}

/* Le code de vérification : six chiffres, larges, en police mono. */
.code-saisie{font-family:var(--f-mono);font-size:1.6rem;letter-spacing:.5em;text-align:center;font-weight:500;padding-left:.5em}
.auth-form .code-saisie{min-height:58px}
.code-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.9rem}
.code-actions a{color:var(--ink-3)}
.carte-verif{border-color:var(--up)}
.carte-verif .code-saisie{font-size:1.3rem;min-height:46px}

/* ------------------------------ Entraînement (/training.html) ------------------------------ */
.ent-tete{padding-bottom:28px}
.ent-tete h1{max-width:820px;text-wrap:balance}
.ent-chiffres{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 0;padding:14px 0;list-style:none;border-block:1px solid var(--line);max-width:640px}
.ent-chiffres li{display:grid;gap:2px;padding:0 20px;border-left:1px solid var(--line-2)}
.ent-chiffres li:first-child{border-left:0;padding-left:0}
.ent-chiffres b{font-family:var(--f-mono);font-weight:500;font-size:1.7rem;letter-spacing:-.04em;line-height:1.1}
.ent-chiffres span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ent-groupe{margin-top:34px}
.ent-groupe-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.ent-groupe-tete h2{font-size:1.35rem;margin:0}
.ent-groupe-tete span{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.ent-grille{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ent-carte{display:grid;gap:8px;align-content:start;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}
.ent-carte:hover{border-color:var(--ink-4);transform:translateY(-1px);box-shadow:0 6px 18px rgba(10,18,34,.06)}
.ent-carte:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ent-carte-tete{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:22px}
.ent-carte h3{font-size:1.02rem;margin:0;letter-spacing:-.01em}
.ent-carte p{margin:0;font-size:.88rem;color:var(--ink-2)}
.ent-carte-pied{display:grid;gap:2px;margin-top:4px;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3)}
.ent-carte-pied small{font-size:.68rem;color:var(--ink-4)}
.ent-statut{margin-left:auto;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ent-statut.prix{color:var(--accent)}
.ent-statut.fait{color:var(--up)}
.ent-offre{margin-bottom:8px;padding:16px;border:1px solid rgba(29,78,216,.2);background:var(--accent-bg);border-radius:var(--r)}
.ent-offre-titre{margin:0 0 12px;color:var(--ink-2)}
.ent-seance{max-width:860px;margin:0 auto}
.ent-intro,.ent-resultat{display:grid;gap:12px;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.ent-intro h2,.ent-resultat h2{margin:0}
.ent-retour{font-size:.88rem;color:var(--ink-3);text-decoration:none;justify-self:start}
.ent-retour:hover{color:var(--accent)}
.ent-famille{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ent-regles{display:flex;flex-wrap:wrap;list-style:none;margin:6px 0;padding:0;gap:0}
.ent-regles li{display:grid;gap:2px;padding:0 18px;border-left:1px solid var(--line-2)}
.ent-regles li:first-child{padding-left:0;border-left:0}
.ent-regles b{font-family:var(--f-mono);font-size:1.5rem;font-weight:500;letter-spacing:-.03em}
.ent-regles span{font-size:.78rem;color:var(--ink-3)}
.ent-format{margin:0;font-family:var(--f-mono);font-size:.78rem;color:var(--ink-2)}
.ent-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.ent-barre{position:sticky;top:64px;z-index:5;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:12px 0;background:var(--bg);font-size:.82rem;color:var(--ink-2)}
.ent-progres{height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.ent-progres i{display:block;height:100%;background:var(--accent);transition:width .3s}
.ent-chrono{font-size:1.05rem;color:var(--ink)}
.ent-chrono.urgent{color:#B42318}
.ent-question{display:grid;gap:14px;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.ent-question h3{font-size:1.12rem;line-height:1.4;margin:0;font-weight:600;letter-spacing:-.01em}
.ent-texte{margin:0;padding:12px 14px;background:var(--bg);border-left:3px solid var(--line-2);border-radius:4px;font-size:.92rem;color:var(--ink-2);line-height:1.6}
.ent-texte.petit{font-size:.84rem}
.ent-code{margin:0;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:6px;font-family:var(--f-mono);font-size:.84rem;line-height:1.55;color:var(--ink);white-space:pre;overflow-x:auto;tab-size:4}
.ent-code.petit{font-size:.78rem}
.ent-table-boite{overflow-x:auto}
.ent-table{border-collapse:collapse;font-size:.88rem;min-width:100%}
.ent-table caption{text-align:left;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-bottom:6px}
.ent-table th,.ent-table td{padding:7px 12px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ent-table th:first-child,.ent-table td:first-child{text-align:left}
.ent-table th{font-weight:600;color:var(--ink-2);background:var(--bg)}
.ent-choix{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ent-choix button{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--panel);font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.ent-choix button:hover{border-color:var(--ink-4)}
.ent-choix button span{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--bg);font-size:.75rem;color:var(--ink-3)}
.ent-choix button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-bg)}
.ent-choix button[aria-pressed="true"] span{background:var(--accent);color:#fff}
.ent-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.ent-score{display:flex;align-items:baseline;gap:4px;font-family:var(--f-serif);line-height:1}
.ent-score b{font-size:4rem;font-weight:600;letter-spacing:-.03em}
.ent-score span{font-size:1.6rem;color:var(--ink-3)}
.ent-score-ligne{margin:0;font-family:var(--f-mono);font-size:.82rem;color:var(--ink-3)}
.ent-revue{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.ent-revue li{display:grid;gap:6px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--up);border-radius:var(--r)}
.ent-revue li.ko{border-left-color:#B42318}
.ent-revue-tete{display:flex;gap:10px;align-items:center;font-size:.8rem}
.ent-revue-tete span{color:var(--ink-3)}
.ent-revue li.ok .ent-revue-tete b{color:var(--up)}
.ent-revue li.ko .ent-revue-tete b{color:#B42318}
.ent-revue p{margin:0}
.ent-revue-q{font-weight:600}
.ent-revue-r{color:#B42318;font-size:.9rem}
.ent-revue-b{font-size:.9rem}
.ent-revue-p{font-size:.88rem;color:var(--ink-2)}
.ent-revue-cercles{font:600 .8rem var(--f-mono);color:#B42318;margin-top:8px}
@media (max-width:640px){.ent-barre{top:56px;grid-template-columns:auto auto;}.ent-progres{grid-column:1/-1;order:3}.ent-score b{font-size:3rem}}

/* ------------------------------ La fiche d'une offre (page des offres) ------------------------------ */
.fiche-voile{position:fixed;inset:0;z-index:60;background:rgba(10,18,34,0);transition:background .22s}
.fiche-voile.ouverte{background:rgba(10,18,34,.32)}
.fiche{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--panel);border-left:1px solid var(--line);
  box-shadow:-12px 0 40px rgba(10,18,34,.12);transform:translateX(100%);transition:transform .22s var(--ease);overflow-y:auto;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.fiche-voile.ouverte .fiche{transform:none}
.fiche-ouverte{overflow:hidden}
.fiche-corps{display:grid;gap:14px;padding:24px 22px 32px;position:relative}
.fiche-corps h2{font-family:var(--f-sans);font-size:1.25rem;line-height:1.3;letter-spacing:-.015em;margin:0;padding-right:36px}
.fiche-corps h2 .tag{vertical-align:2px;margin-right:8px}
.fiche-fermer{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--panel);
  font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink-2)}
.fiche-fermer:hover{border-color:var(--ink-4)}
.fiche-bloc{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.fiche-bloc-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fiche-bloc-tete h3{font-size:.95rem;margin:0}
.fiche-bloc-tete a{font-size:.84rem;text-decoration:none;color:var(--accent);white-space:nowrap}
.fiche-note{grid-template-columns:auto 1fr;align-items:start;gap:12px}
.fiche-note button.facile{font-size:.95rem;padding:6px 10px;cursor:default}
.fiche-raisons{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.86rem;color:var(--ink-2)}
.fiche-raisons b{margin-right:4px}
.fiche-raisons .plus b{color:var(--up)}
.fiche-raisons .moins b{color:#B42318}
.fiche-actions{display:flex;flex-wrap:wrap;gap:8px}
/* La fiche en trois étapes (12/10/2026) : une action par étape, numérotée ; Save et la page complète en liens. */
.fiche-outils{display:flex;flex-wrap:wrap;gap:6px 18px}
.fiche-outil{background:none;border:0;padding:0;font:600 .88rem var(--f-sans);color:var(--ink-2);cursor:pointer;text-decoration:none}
.fiche-outil:hover,.fiche-outil[aria-pressed="true"]{color:var(--accent)}
.fiche-etapes{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.fiche-etapes h3{font-size:.95rem;margin:0}
.fiche-etapes ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.etape{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 14px 14px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel)}
.etape-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:700 .82rem var(--f-mono)}
.etape:first-child .etape-n{background:var(--accent)}
.etape-texte{display:grid;gap:2px;min-width:0}
.etape-texte b{font-size:.98rem;color:var(--ink)}
.etape-texte small{color:var(--ink-2);font-size:.86rem;line-height:1.4}
.etape .btn{white-space:nowrap;justify-content:center;min-width:92px}
.etape-plus{grid-column:2 / -1;justify-self:start;font-size:.86rem;font-weight:600;color:var(--accent);text-decoration:none}
.etape-coche{background:none;border:0;padding:2px 0;font-family:var(--f-sans);color:var(--ink-2);cursor:pointer}
.etape-coche[aria-pressed="true"]{color:var(--up)}
@media (max-width:480px){.etape{grid-template-columns:28px minmax(0,1fr)}.etape .btn{grid-column:2;justify-self:start}}
.fiche-sessions{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fiche-sessions a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  text-decoration:none;color:var(--ink);transition:border-color .15s}
.fiche-sessions a:hover{border-color:var(--accent)}
.fiche-sessions span:first-child{display:grid;gap:2px;min-width:0}
.fiche-sessions b{font-size:.92rem;font-weight:600}
.fiche-sessions small{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}
.fiche-prix{flex:none;font-family:var(--f-mono);font-size:.72rem;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.fiche-pied{margin:0;font-size:.84rem}
.fiche-pied a{color:var(--ink-3)}
.ent-carte.en-travaux{opacity:.55}

/* ==========================================================================
   UX du 09/10/2026 (demande d'Anthony) : la ligne du blotter met la maison en
   tête, le poste dessous, les faits qui font cliquer d'abord, un seul geste ;
   sur téléphone, les offres dès le premier écran, et tout lisible au doigt.
   ========================================================================== */
.row:not(.locked){cursor:pointer}
.row:not(.locked):hover{box-shadow:inset 3px 0 0 var(--accent)}
.row{padding:15px 16px}
.row-emp{font-family:inherit;text-transform:none;letter-spacing:-.02em;font-size:1.14rem;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:10px;min-width:0}
/* Le desk : devant l'intitulé sur ordinateur, à côté de l'employeur sur téléphone (15/10/2026). */
.row-emp .desk-tel{display:none;flex:none;align-self:center;letter-spacing:.04em}
@media (max-width:760px){.row-emp .desk-tel{display:inline-flex}.row-ligne>.tag[data-d]{display:none}}
.row-ville{font-family:var(--f-mono);font-size:.74rem;font-weight:400;letter-spacing:.02em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row-ligne{margin:4px 0 8px}
.row-title{font-size:.95rem;font-weight:500;color:var(--ink-2)}
.row-title a{color:inherit}
.row.locked .row-emp{font-size:1rem}
.tag.soon.urgent{background:var(--down-bg);color:var(--down);font-weight:600}
.tag.paie{font-weight:600}
.row-actions{align-items:center;gap:10px}
.row-actions .suivre{width:38px;height:38px;padding:0;justify-content:center;border:1px solid var(--line-2);border-radius:4px;background:var(--panel);font-size:1.05rem;color:var(--ink-3)}
.row-actions .suivre[aria-pressed="true"]{color:var(--amber);border-color:#E0A600;background:#FFF8DD}
.row-ouvrir{width:9px;height:9px;border-right:1.5px solid var(--ink-4);border-top:1.5px solid var(--ink-4);transform:rotate(45deg);margin:0 4px 0 2px}
.row:hover .row-ouvrir{border-color:var(--accent)}
.fiche .row-emp{font-size:1.2rem}
@media (max-width:760px){
  .cmd form>select,.cmd #maliste,.cmd #profil-bouton,.cmd .compteur{display:none}
  .cmd form.ouverts>select,.cmd form.ouverts #maliste,.cmd form.ouverts #profil-bouton,.cmd form.ouverts .compteur{display:inline-flex}
  .cmd form.ouverts>select{display:block}
  .filtres-bouton{display:inline-flex}
  .cmd .prompt{flex:1 1 0;min-width:0}
  .touche{height:40px;padding:0 13px;font-size:.84rem}
  .touches{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gut));padding-right:var(--gut);padding-bottom:4px}
  .touches::-webkit-scrollbar{display:none}
  .touches .touche{flex:none}
  .bandeau-cv{padding:10px 12px;margin-top:10px;flex-wrap:nowrap}
  .bandeau-cv-texte{font-size:.86rem}
  .bandeau-cv-actions .btn{white-space:nowrap}
  .bandeau-long{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 4px}
  .row-age{grid-column:1 / -1;font-size:.8rem}
  .row-age b{font-size:.82rem}
  .row-actions{grid-column:2;grid-row:2;align-self:start;justify-content:flex-end}
  .row-actions .suivre{width:44px;height:44px}
  .row-ouvrir{display:none}
  .row-emp{font-size:1.1rem}
  .tag{height:26px;font-size:.76rem;padding:0 9px}
  .status{font-size:12.5px}
  .nav a{min-height:44px;display:inline-flex;align-items:center}
  .case input[type="checkbox"]{width:22px;height:22px}
  .ent-groupe>summary{min-height:48px}
}
/* entraînement : choisir son métier, puis ses sessions ; les familles se replient */
.ent-roles{margin:6px 0 28px}
.ent-roles h2{font-size:1.35rem;margin:0 0 4px}
.ent-roles p{color:var(--ink-3);font-size:.92rem;margin:0 0 12px}
.ent-roles .touches{margin-top:0}
.ent-pour{margin-top:18px}
details.ent-groupe>summary{list-style:none;cursor:pointer}
details.ent-groupe>summary::-webkit-details-marker{display:none}
details.ent-groupe>summary .ent-groupe-tete{margin-bottom:0}
details.ent-groupe[open]>summary .ent-groupe-tete{margin-bottom:12px}
details.ent-groupe>summary h2::after{content:"";display:inline-block;width:8px;height:8px;margin-left:12px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-4px) rotate(45deg);transition:transform .2s}
details.ent-groupe[open]>summary h2::after{transform:translateY(-1px) rotate(-135deg)}

/* ---------- Le tableau de bord, refait pour le gérant (10/10/2026) ----------
   « Blanc sur blanc, illisible » : un fond plus sombre sous des cartes blanches bordées,
   quatre zones numérotées et colorées (Business bleu, Growth vert, Activity ambre, Tools
   encre), des titres de carte sur bandeau sombre, des tableaux rayés. Rien hors .pilotage. */
.code-ami input{font-family:var(--f-mono);font-weight:600;letter-spacing:.06em;font-size:1rem;color:var(--ink)}
.pilotage{--fond-p:#DFE5EE;background:var(--fond-p);min-height:100vh}
.pilotage .espace-tete h1{color:var(--ink)}
/* Les objectifs du jour du tableau de bord (15/10/2026) : vert franc et confettis quand un but tombe. */
.p-buts{display:grid;gap:16px;margin:0 0 34px}
.pb-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.pb-sur{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.pb-tete h2{margin:4px 0 0;font-size:clamp(1.6rem,3vw,2.2rem)}
.pb-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;align-items:start}
.pb-carte{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow-1)}
.pb-carte.atteint{background:linear-gradient(135deg,#00A36C,#12C48B);border-color:#00A36C;color:#fff;box-shadow:0 10px 28px rgba(0,163,108,.35)}
.pb-haut{display:flex;justify-content:space-between;align-items:center}
.pb-nom{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pb-carte.atteint .pb-nom{color:rgba(255,255,255,.85)}
.pb-humeur{font-size:1.5rem;line-height:1}
.pb-carte.atteint .pb-humeur{animation:pb-saut 1.4s ease-in-out infinite}
@keyframes pb-saut{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-8deg)}}
.pb-chiffre{display:flex;align-items:baseline;gap:8px}
.pb-chiffre b{font-family:var(--f-mono);font-weight:500;font-size:clamp(2.1rem,4.5vw,2.7rem);letter-spacing:-.05em;line-height:1}
.pb-chiffre span{font-family:var(--f-mono);font-size:.95rem;color:var(--ink-3)}
.pb-carte.atteint .pb-chiffre span{color:rgba(255,255,255,.8)}
.pb-barre{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.pb-barre i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#00A36C)}
.pb-carte.atteint .pb-barre{background:rgba(255,255,255,.3)}
.pb-carte.atteint .pb-barre i{background:#fff}
.pb-dit{margin:0;font-size:.86rem;color:var(--ink-2)}
.pb-carte.atteint .pb-dit{color:#fff;font-weight:600}
.pb-robots{margin:0;font-size:.78rem;color:var(--ink-2)}
.pb-carte.atteint .pb-robots{color:rgba(255,255,255,.85)}
.pb-bas{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.85rem;color:var(--ink-2)}
.pb-carte.atteint .pb-bas{color:rgba(255,255,255,.92)}
.p-confettis,.p-billets{position:fixed;inset:0;pointer-events:none;z-index:9999}
/* La courbe des 14 derniers jours (15/10/2026) : le chiffre sur chaque point, les dates, la ligne de l'objectif. */
.pb-courbe{margin-top:4px;min-height:118px}
.pb-courbe svg{display:block;max-width:100%;overflow:visible}
.cj-but{stroke:#00A36C;stroke-width:1.5;stroke-dasharray:5 4}
.cj-but-t{font-family:var(--f-mono);font-size:10px;font-weight:500;fill:#00875A}
.cj-ligne{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cj-pt{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.cj-pt.ok{fill:#00A36C}
.cj-pt.auj{stroke-width:2.5}
.cj-val{font-family:var(--f-mono);font-size:10px;fill:var(--ink-2)}
.cj-val.auj{font-size:11.5px;font-weight:700;fill:var(--ink)}
.cj-jour{font-family:var(--f-mono);font-size:9.5px;fill:var(--ink-3)}
.cj-jour.auj{fill:var(--accent);font-weight:700}
.pb-carte.atteint .cj-but{stroke:#fff}
.pb-carte.atteint .cj-but-t,.pb-carte.atteint .cj-val,.pb-carte.atteint .cj-jour{fill:#fff}
.pb-carte.atteint .cj-ligne{stroke:#fff}
.pb-carte.atteint .cj-pt{fill:#fff;stroke:#00A36C}
.p-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:10px 0;background:var(--fond-p)}
.p-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel);
  font-size:.86rem;font-weight:600;color:var(--ink);text-decoration:none}
.p-nav a i{width:9px;height:9px;border-radius:50%;background:var(--zone)}
.p-nav a:hover{border-color:var(--zone);box-shadow:var(--shadow-1)}
.pilotage .carte{border:1px solid var(--line-2);border-top:3px solid var(--zone);border-radius:var(--r-l);box-shadow:0 1px 2px rgba(10,18,34,.08),0 6px 18px rgba(10,18,34,.06)}
.pilotage .carte-tete{background:var(--ink);border-bottom:0;padding:12px 18px;flex-wrap:wrap}
.pilotage .carte-tete span:first-child{font-family:var(--f-sans,inherit);font-size:.95rem;font-weight:700;letter-spacing:0;text-transform:none;color:#FFFFFF}
.pilotage .carte-tete span:last-child:not(:first-child){font-size:.78rem;color:#AEBBD1;letter-spacing:.02em;text-transform:none;font-family:var(--f-sans,inherit)}
.pilotage .espace-grille{margin-top:16px}
.pilotage .entonnoir-carte{margin-top:16px}
.pilotage .p-large{margin-top:16px}
.pilotage .p-departs-total td{border-top:1px solid var(--line-2);font-weight:700}
.pilotage .espace-grille > .p-outil{margin-top:0}
.pilotage .p-outil{margin-top:16px}
.pilotage .p-outil:first-of-type{margin-top:0}
.pilotage .p-danger{--zone:var(--down)}
.pilotage .p-danger .carte-tete{background:#4A1316}
.p-aide{margin:0 0 14px;color:var(--ink-2);font-size:.92rem}
.p-qui{margin:4px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink-2);overflow-wrap:anywhere}
/* Les chiffres clés : une couleur par tuile, le nombre en grand. */
.pilotage .kpi-carte{border:1px solid var(--line-2);border-top:4px solid var(--accent);border-radius:var(--r-l);box-shadow:0 1px 2px rgba(10,18,34,.08)}
.pilotage .kpi-carte:nth-child(2){border-top-color:var(--up)}
.pilotage .kpi-carte:nth-child(3){border-top-color:var(--amber)}
.pilotage .kpi-carte:nth-child(4){border-top-color:var(--ink)}
.pilotage .kpi-carte span{color:var(--ink-2);font-weight:600}
.pilotage .kpi-carte b{font-size:clamp(2rem,3vw,2.6rem);color:var(--ink)}
.pilotage .kpi-carte small{color:var(--ink-2)}
/* Le parcours : une couleur par étape. */
.pilotage .etape-nom{color:var(--ink);font-weight:600}
.pilotage .etape-barre{height:14px;background:#E9EDF3}
.pilotage .etape-e:nth-child(2) .etape-barre i{background:#5B7FE6}
.pilotage .etape-e:nth-child(3) .etape-barre i{background:#93A9EE}
.pilotage .etape-e:nth-child(4) .etape-barre i{background:var(--amber)}
.pilotage .etape-e:nth-child(5) .etape-barre i{background:var(--up)}
@media (min-width:900px){.pilotage .p-credits .flux-credits{columns:2}}
.pilotage .histo-revenu .histo-barres span::before{background:var(--up)}
.pilotage .histo-tete b{color:var(--ink)}
/* Les tableaux : en-tête marqué, lignes rayées. */
.pilotage .releve th{background:#EEF2F8;color:var(--ink-2);font-weight:700;border-bottom:1px solid var(--line-2)}
.pilotage .releve tbody tr:nth-child(even) td{background:#F7F9FC}
.pilotage .releve td{color:var(--ink)}
.pilotage .releve .d{color:var(--ink-2)}
/* Les formulaires des outils : libellés lisibles, champs bordés. */
.pilotage .codes-form label{color:var(--ink-2);font-weight:600}
.pilotage .codes-form input{border-color:var(--line-2)}
.pilotage .codes-form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.p-suivi{margin-top:14px;border:1px solid var(--line-2);border-radius:var(--r)}
@media (max-width:600px){.pilotage .carte-tete span:last-child:not(:first-child){width:100%}}

/* ---------- La barre du haut : des repères utiles (11/10/2026) ---------- */
.status-lien{color:inherit;text-decoration:none;white-space:nowrap}
.status-lien:hover{color:#FFFFFF}
.status-lien b.up{color:var(--up-2)}
.status-derniere{max-width:44ch;overflow:hidden;text-overflow:ellipsis}

/* ---------- La page du compte, refaite (11/10/2026) ----------
   « Pas assez de contraste, trop d'informations » : d'abord ce qu'on vient faire (trois grandes
   tuiles, chercher en premier), puis le solde, puis le reste, titres lisibles. Rien hors .compte. */
.compte{background:transparent}  /* le quadrillage de la page, comme partout (13/10/2026) */
.compte-actions{display:grid;gap:12px;margin:0 0 16px}
@media (min-width:860px){.compte-actions{grid-template-columns:1.3fr 1fr 1fr}}
.compte-action{display:grid;gap:6px;align-content:start;padding:20px 22px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-l);
  text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(10,18,34,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
.compte-action:hover{transform:translateY(-1px);border-color:var(--ink);box-shadow:0 6px 18px rgba(10,18,34,.10)}
.ca-titre{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.ca-texte{font-size:.92rem;color:var(--ink-2)}
.compte-action.principale{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.compte-action.principale .ca-texte{color:#C9D3E3}
.compte-action.principale .ca-titre{font-size:1.35rem}
.compte-solde{display:grid;gap:14px;align-items:center;margin:0 0 16px;padding:18px 22px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-l)}
@media (min-width:860px){.compte-solde{grid-template-columns:auto 1fr auto;gap:28px}}
.compte-solde .solde-v b{font-size:clamp(2.4rem,4vw,3rem)}
.compte-solde .solde-v span,.compte .synthese-label{color:var(--ink-2)}
.compte-solde .solde-eq{margin-top:6px}
.compte .carte{border-color:var(--line-2);box-shadow:0 1px 2px rgba(10,18,34,.06)}
.compte .carte-tete{background:var(--panel);border-bottom:1px solid var(--line-2)}
.compte .carte-tete span:first-child{font-family:var(--f-sans);font-size:1rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.compte .carte-tete span:last-child:not(:first-child){font-family:var(--f-sans);font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.compte .carte-corps p{color:var(--ink-2)}
.compte .releve th{color:var(--ink-2);font-weight:600}
.compte-ami .code-ami input{font-size:1.1rem}
.compte-reglages summary{cursor:pointer;list-style:none}
.compte-reglages summary::-webkit-details-marker{display:none}
.compte-reglages summary span:first-child::before{content:"▸ ";color:var(--ink-3)}
.compte-reglages[open] summary span:first-child::before{content:"▾ "}
.compte-solde .solde-v b{color:var(--accent)}
.compte-solde{border-left:4px solid var(--accent)}

/* ---------- Le zoom du globe (11/10/2026) ---------- */
.globe-zoom{position:absolute;z-index:4;right:12px;bottom:12px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100% - 24px)}
.globe-zoom button{font:inherit;font-size:.8rem;font-weight:600;padding:7px 11px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.94);
  color:var(--ink);cursor:pointer;box-shadow:var(--shadow-1)}
.globe-zoom button:hover{border-color:var(--ink)}
.globe-zoom .globe-pm{width:34px;padding:7px 0;font-size:1rem;line-height:1}
@media (max-width:700px){.globe-coin{display:none}.globe-zoom button{font-size:.76rem;padding:6px 9px}}

/* ---------- Lisibilité (11/10/2026 ; Anthony : « A partout », +6 %, B faisait trop gros) ----------
   Presque toutes les tailles du site sont en rem : la taille de base de la page les agrandit
   toutes. Les gris des textes secondaires et des petites étiquettes passent plus foncés. */
html{font-size:106.25%}
body{font-size:16.5px}
:root{--ink-2:#1B2538;--ink-3:#3F4B63;--ink-4:#626E86}

/* ---------- Les deux encadrés d'une même rangée finissent à la même ligne (11/10/2026) ----------
   Accueil, « The cover letter » : la colonne de gauche (l'annonce, puis l'analyse) et la lettre. Le
   bouton de l'analyse descend en bas. (La section « Your CV, scored » est sortie de l'accueil le 20/10/2026.) */
@media (min-width:1020px){
  .demo{align-items:stretch}
  .analyse{display:flex;flex-direction:column}
  .analyse .btn{align-self:flex-start;margin-top:auto}
}

/* ---------- Entraînement : cartes compactes (11/10/2026, option 1 choisie par Anthony) ----------
   « Les petits carrés font 15 lignes » : la description tient en 2 lignes au plus, la mention
   « Like SHL… » quitte la carte (elle reste sur la page de la séance). Page /training seulement. */
#ent-catalogue .ent-carte{gap:6px;padding:14px 16px}
#ent-catalogue .ent-carte p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#ent-catalogue .ent-carte-pied small{display:none}

/* ---------- Page des stages : un haut plus léger (11/10/2026, version 2 choisie par Anthony) ----------
   Le grand titre reste en arrivant ; les filtres se serrent sur une rangée et le bandeau du CV
   s'amincit : la barre qui reste en haut prend moins de place, on voit deux offres de plus.
   Une fois le grand titre sorti de l'écran, un petit « Internships » apparaît dans la barre. */
[data-page="offres"] .cmd{padding:8px 0}
[data-page="offres"] .cmd .prompt{flex:1 1 180px}
[data-page="offres"] .cmd select{min-width:0;flex:0 1 auto;max-width:170px}
[data-page="offres"] .touches{margin-top:8px}
[data-page="offres"] .bandeau-cv{margin-top:8px;padding:6px 10px 6px 14px}
[data-page="offres"] .bandeau-cv .btn{padding-block:6px}
.cmd-titre{display:none;font-family:var(--f-serif);font-size:1.4rem;line-height:1;color:var(--ink);margin-right:8px}
.cmd-replie .cmd-titre{display:inline-block}
@media (max-width:700px){.cmd-replie .cmd-titre{display:none}}

/* ---------- L'entretien vidéo (11/10/2026) ----------
   /video-interview.html : la vérification caméra-micro-voix, la scène sombre de l'entretien
   (comme un HireVue), puis le rapport. Le haut de page et le choix : « version 2 », plus bas. */

.vi-pour{margin:0 0 14px;padding:10px 14px;background:var(--accent-bg);border-radius:var(--r);color:var(--ink-2)}

.vi-action{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* La scène : la vérification et l'entretien, sur fond sombre. */
.vi-scene{background:var(--tape);color:#E8EDF6;border-radius:var(--r-l);padding:clamp(16px,2.6vw,28px);box-shadow:var(--shadow-3)}
.vi-scene h2{color:#fff;font-size:1.6rem;margin:4px 0 12px}
.vi-scene .muted{color:#9AA6BC}
.vi-scene .btn-ghost{background:transparent;color:#fff;border-color:#3A4A66}
.vi-scene .btn-ghost:hover{border-color:#fff}
.vi-scene .btn:not(.btn-live):not(.btn-ghost){background:#fff;color:var(--ink);border-color:#fff}
.vi-scene .tag{background:#1C2840;color:#C9D3E6}
.vi-scene .message.info{background:#1C2840;color:#C9D3E6}
.vi-etape{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#7FA0FF}
.vi-verif{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:center}
.vi-verif-texte{min-width:0}
.vi-video{position:relative;aspect-ratio:4/3;max-width:100%;background:#050A14;border-radius:var(--r);overflow:hidden}
.vi-video video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.vi-video video.cache{visibility:hidden}
.vi-jauge{position:absolute;left:12px;right:12px;bottom:12px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.vi-jauge i{display:block;height:100%;width:0;background:#2BE39A;transition:width .08s linear}
.vi-rec{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:4px;background:rgba(229,72,77,.92);color:#fff;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em}
.vi-rec i{width:7px;height:7px;border-radius:50%;background:#fff;animation:clign 1.2s infinite}
.vi-cacher{position:absolute;top:10px;right:10px;padding:5px 9px;border-radius:4px;border:1px solid rgba(255,255,255,.3);background:rgba(5,10,20,.6);color:#fff;font:inherit;font-size:.76rem;cursor:pointer}
.vi-checks{margin:0 0 10px;padding:0;list-style:none;display:grid;gap:8px}
.vi-checks li{position:relative;padding-left:28px;color:#C9D3E6}
.vi-checks li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:50%;border:2px solid #3A4A66;box-sizing:border-box}
.vi-checks li.fait{color:#fff}
.vi-checks li.fait::before{border-color:#2BE39A;background:#2BE39A;box-shadow:inset 0 0 0 3px var(--tape)}
.vi-checks q{color:#fff;font-style:italic}
.vi-entendu{min-height:1.5em;margin:0 0 10px;color:#9AA6BC;font-size:.9rem}
.vi-entendu q{color:#fff}
.vi-conseils{margin:0 0 16px;padding-left:18px;display:grid;gap:3px}
@media (max-width:800px){.vi-verif{grid-template-columns:1fr}}

.vi-barre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-bottom:14px;border-bottom:1px solid #1C2840;margin-bottom:18px}
.vi-barre .mono{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#9AA6BC}
.vi-points{display:flex;gap:6px}
.vi-points i{width:22px;height:4px;border-radius:2px;background:#26324A}
.vi-points i.fait{background:#2BE39A}
.vi-points i.ici{background:#fff}
.vi-demo{margin:0 0 14px;padding:8px 12px;border-radius:var(--r);background:#3A2B0A;color:#FFD38A;font-size:.85rem}
.vi-rapport .vi-demo{background:var(--amber-bg);color:var(--amber)}
.vi-plateau{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start}
.vi-question{min-width:0}
.vi-question > p{font-family:var(--f-serif);font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.25;color:#fff;margin:10px 0 22px;text-wrap:balance}
.vi-phase{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.vi-phase > div{display:grid;gap:6px;justify-items:start;min-width:0}
.vi-phase p{margin:0}
.vi-temps{position:relative;width:96px;height:96px;flex:0 0 96px}
.vi-temps svg{width:100%;height:100%;transform:rotate(-90deg)}
.vi-temps circle{fill:none;stroke-width:3}
.vi-temps .fond{stroke:#26324A}
.vi-temps .reste{stroke:#7FA0FF;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.vi-temps b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-size:1.25rem;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.vi-etat{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#7FA0FF}
.vi-etat.rouge{color:#FF7B80}
.vi-etat.vert{color:#2BE39A}
.vi-apres{display:grid;gap:10px;justify-items:start}
.vi-apres p{margin:0}
.vi-apres q{color:#fff}
.vi-revoir{width:100%;max-width:360px;border-radius:var(--r);background:#050A14}
@media (max-width:800px){.vi-plateau{grid-template-columns:1fr}.vi-plateau .vi-video{order:-1;width:100%;max-width:420px}}

.vi-progres{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;max-width:460px}
.vi-progres li{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:var(--r);background:#121C30;color:#9AA6BC;font-size:.9rem}
.vi-progres li b{font-family:var(--f-mono);font-weight:500;color:#C9D3E6}
.vi-progres li.fait b{color:#2BE39A}
.vi-progres li.echec b{color:#FF7B80}

/* ---------- Les résultats de l'entretien vidéo (21/10/2026) ----------
   « Très, très dense » (Anthony) : la matière reste, rangée. En haut, le score et le verdict, les trois priorités, puis le tableau de bord
   (réponse par réponse, critères, chiffres). Ensuite chaque réponse en blocs titrés : le verdict, puis à gauche la vidéo et les mesures,
   à droite les critères, ce qui a marché, ce qu'il faut corriger, la réponse plus forte. Une seule couleur d'accent (le bleu) ; le vert,
   l'ambre et le rouge ne disent qu'une note. Rien n'apparaît par une transition ni par une visibilité à zéro. */
.vi-rapport{display:grid;gap:16px}
.vi-titre{margin:0 0 9px;font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.vi-etiq{display:block;margin-bottom:3px;font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.vi-bloc,.vi-groupe{min-width:0}

/* Un anneau rempli (la note) : --n en pour cent, --c la couleur de la note. */
.vi-rond{--c:var(--accent);--t:52px;position:relative;display:grid;place-items:center;flex:none;width:var(--t);height:var(--t);border-radius:50%;background:conic-gradient(var(--c) calc(var(--n)*1%),var(--bg-2) 0)}
.vi-rond::before{content:"";position:absolute;inset:calc(var(--t)*.1);border-radius:50%;background:var(--panel)}
.vi-rond b{position:relative;white-space:nowrap;font-family:var(--f-mono);font-weight:500;font-size:calc(var(--t)*.36);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.vi-rond b small{font-size:.5em;letter-spacing:0;color:var(--ink-3)}
.vi-rond.nh,.vi-rond.ok{--c:var(--up)}
.vi-rond.nm,.vi-rond.moyen{--c:var(--amber)}
.vi-rond.nb,.vi-rond.bas{--c:var(--down)}
.vi-rond-vide{--n:0}
.vi-rond-grand{--t:176px}
.vi-rond-grand b{font-size:3.4rem}
.vi-gros{text-align:center}
.vi-rond-grand b small{display:block;margin-top:6px;font-size:.9rem;font-weight:400}
/* Le trait de la barre à passer (70) sur l'anneau : 70 % de 360 degrés. */
.vi-rond-grand::after{content:"";position:absolute;left:50%;top:-2px;width:3px;height:calc(var(--t)*.1 + 4px);margin-left:-1.5px;border-radius:2px;background:var(--ink);transform-origin:50% calc(var(--t)/2 + 2px);transform:rotate(252deg)}

/* Le haut : score et verdict. */
.vi-bilan{display:grid;gap:22px;padding:clamp(18px,3vw,30px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-2)}
.vi-bilan-meta{margin:0;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.vi-bilan .vi-demo{margin:0}
.vi-bilan-haut{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.vi-bilan-score{display:grid;justify-items:center;gap:12px}
.vi-bilan-statut{display:grid;justify-items:center;gap:5px}
.vi-issue{display:inline-block;padding:5px 12px;border-radius:4px;font-weight:600;font-size:.92rem}
.vi-issue.ok{background:var(--up-bg);color:var(--up)}
.vi-issue.moyen{background:var(--amber-bg);color:var(--amber)}
.vi-issue.bas{background:var(--down-bg);color:var(--down)}
.vi-seuil{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.vi-bilan-texte{display:grid;gap:14px;align-content:center;min-width:0}
.vi-resume-texte{margin:0;font-family:var(--f-serif);font-size:clamp(1.22rem,2vw,1.5rem);line-height:1.32;text-wrap:pretty}
.vi-force{margin:0;padding:11px 14px;background:var(--accent-bg);border-radius:var(--r);font-size:.95rem;line-height:1.45}
.vi-bloc-priorites,.vi-tableau{padding-top:20px;border-top:1px solid var(--line)}
.vi-priorites{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:p}
.vi-priorites li{counter-increment:p;position:relative;padding:14px 14px 14px 48px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);font-size:.94rem;line-height:1.45}
.vi-priorites li::before{content:counter(p);position:absolute;left:15px;top:11px;font-family:var(--f-mono);font-size:1.6rem;font-weight:500;line-height:1;color:var(--accent)}

/* Le tableau de bord : réponse par réponse, critères en moyenne, chiffres de toute la séance. */
.vi-tableau{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(20px,3vw,40px)}
.vi-reps{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:8px}
.vi-rep{--c:var(--ink-4);display:grid;justify-items:center;gap:2px;padding:8px 4px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none}
.vi-rep:hover{border-color:var(--ink-4)}
.vi-rep span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-3)}
.vi-rep b{font-family:var(--f-mono);font-weight:500;font-size:1.55rem;letter-spacing:-.04em;line-height:1.1;color:var(--c)}
.vi-rep i{justify-self:stretch;height:4px;margin:6px -4px -8px;background:linear-gradient(90deg,var(--c) calc(var(--n)*1%),var(--bg-2) 0)}
.vi-rep.nh{--c:var(--up)}
.vi-rep.nm{--c:var(--amber)}
.vi-rep.nb{--c:var(--down)}
.vi-moy{margin:0;display:grid;gap:10px}
.vi-moy li{display:grid;grid-template-columns:5rem minmax(0,1fr) 2rem;gap:10px;align-items:center}
.vi-moy span{font-size:.84rem;color:var(--ink-2)}
.vi-moy b{font-family:var(--f-mono);font-weight:500;font-size:.92rem;text-align:right;font-variant-numeric:tabular-nums}
.vi-moy i,.vi-stats i{display:block;height:6px;border-radius:2px;background:linear-gradient(90deg,var(--accent) calc(var(--n)*1%),var(--bg-2) 0)}
.vi-stats{margin:0;display:grid;gap:8px}
.vi-stats li{display:grid;grid-template-columns:4rem minmax(0,1fr);column-gap:10px;align-items:baseline}
.vi-stats b{font-family:var(--f-mono);font-weight:500;font-size:1.15rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right}
.vi-stats span{font-size:.82rem;line-height:1.25;color:var(--ink-3)}
.vi-stats i{grid-column:2;height:4px;margin-top:3px}

/* Une réponse. */
.vi-q{display:grid;gap:12px;min-width:0;padding:clamp(16px,2.6vw,26px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);scroll-margin-top:92px}
.vi-q-tete{display:flex;align-items:center;justify-content:space-between;gap:14px}
.vi-q-id{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.vi-q-tete .vi-rond{--t:60px}
.vi-q-n{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.vi-origine{font-size:.82rem;color:var(--ink-3)}
.vi-q h3{margin:0;font-family:var(--f-serif);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.25;text-wrap:balance}
.vi-verdict{margin:0;padding:12px 16px;background:var(--panel-2);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;font-weight:500;line-height:1.45}
.vi-alerte{padding:11px 14px;border-radius:var(--r);background:var(--down-bg);color:var(--down);font-size:.9rem}
.vi-alerte ul{margin:4px 0 0;padding-left:18px;list-style:disc}
.vi-q-corps{display:grid;gap:16px;min-width:0;padding-top:16px;border-top:1px solid var(--line)}
.vi-q-haut{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px clamp(18px,2.4vw,30px);align-items:start}
.vi-q-haut>*{min-width:0}
.vi-q-haut .vi-criteres{grid-template-columns:minmax(0,1fr);gap:8px}
.vi-q-haut .vi-crit{grid-template-columns:4.4rem minmax(0,1fr) 2rem;align-items:center;gap:8px}
.vi-q-haut .vi-crit-tete{display:contents}
.vi-q-haut .vi-crit-tete b{order:3;text-align:right}
.vi-q-haut .vi-barres{order:2}
.vi-q-video{display:grid;gap:6px;min-width:0}
.vi-q-video video{width:100%;border-radius:var(--r);background:#050A14;aspect-ratio:16/10;object-fit:cover}
.vi-notes{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.93rem;line-height:1.45;list-style:disc}
.vi-notes li::marker{color:var(--ink-3)}
.vi-criteres{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 16px}
.vi-crit{display:grid;gap:6px;min-width:0}
.vi-crit-tete{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.vi-crit-tete span{font-size:.82rem;color:var(--ink-2)}
.vi-crit-tete b{font-family:var(--f-mono);font-weight:500;font-size:.95rem;font-variant-numeric:tabular-nums}
.vi-crit-tete small{font-size:.75em;color:var(--ink-4)}
.vi-barres{display:flex;gap:3px}
.vi-barres i{flex:1;height:7px;border-radius:2px;background:var(--bg-2)}
.vi-barres i.plein{background:var(--accent)}
.vi-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.vi-col{padding:12px 14px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.vi-col .vi-titre{display:flex;align-items:center;gap:7px}
.vi-col .vi-titre::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--up)}
.vi-col.corriger .vi-titre::before{background:var(--down)}
.vi-col.camera .vi-titre::before{background:var(--ink-4)}
.vi-plus,.vi-moins{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.93rem;line-height:1.45;list-style:disc}
.vi-plus li::marker{color:var(--up)}
.vi-moins li::marker{color:var(--down)}
.vi-mieux{padding:14px 16px;background:var(--accent-bg);border-radius:var(--r)}
.vi-mieux .vi-titre{color:var(--accent)}
.vi-mieux ol{margin:0;padding-left:22px;display:grid;gap:6px;font-size:.93rem;line-height:1.45;list-style:decimal}
.vi-mieux li::marker{font-family:var(--f-mono);font-weight:600;color:var(--accent)}
.vi-trou{color:var(--accent);font-family:var(--f-mono);font-size:.86em}
.vi-transcript summary{cursor:pointer;font-size:.86rem;color:var(--ink-3)}
.vi-transcript p{margin:8px 0 0;font-size:.92rem;color:var(--ink-2)}
.vi-transcript mark{background:var(--amber-bg);color:var(--amber);padding:0 2px;border-radius:2px}
.vi-reprise .vi-verdict{padding:0;background:none;border:0}
.vi-q-pied{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.vi-score{font-family:var(--f-mono);font-weight:500;font-size:1.6rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vi-score small{font-size:.55em;color:var(--ink-3)}
.vi-score.nh{color:var(--up)}
.vi-score.nm{color:var(--amber)}
.vi-score.nb{color:var(--down)}
@media (min-width:1001px){.vi-tableau .vi-bloc+.vi-bloc{padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line)}}
@media (max-width:1000px){.vi-tableau{grid-template-columns:repeat(2,minmax(0,1fr))}.vi-tableau .vi-bloc:first-child{grid-column:1/-1}}
@media (max-width:1060px){.vi-q-haut{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .vi-bilan-haut{grid-template-columns:1fr;gap:16px}
  .vi-bilan-score{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:18px}
  .vi-bilan-statut{justify-items:start}
  .vi-rond-grand{--t:132px}
  .vi-rond-grand b{font-size:2.5rem}
  .vi-rond-grand b small{margin-top:3px;font-size:.78rem}
  .vi-priorites,.vi-tableau{grid-template-columns:minmax(0,1fr)}
  .vi-tableau .vi-bloc:first-child{grid-column:auto}
}
@media (max-width:600px){
  .vi-q-haut,.vi-q-haut .vi-criteres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vi-q-haut>*{grid-column:1/-1}
  .vi-q-haut .vi-crit{grid-template-columns:minmax(0,1fr);gap:6px}
  .vi-q-haut .vi-crit-tete{display:flex}
  .vi-q-haut .vi-crit-tete b{order:0;text-align:left}
  .vi-q-haut .vi-barres{order:0}
  .vi-g-criteres{order:-1}
  .vi-col{padding:12px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
  .vi-q-video video{aspect-ratio:16/9}
  .vi-priorites li{padding:11px 12px 11px 42px}
  .vi-priorites li::before{left:13px;top:9px;font-size:1.35rem}
  .vi-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
  .vi-stats li{grid-template-columns:minmax(0,1fr);row-gap:1px}
  .vi-stats b{text-align:left}
  .vi-stats i{grid-column:1}
  .vi-q-tete .vi-rond{--t:52px}
  .vi-q{padding:14px;gap:10px}
  .vi-q-corps,.vi-q-haut{gap:14px}
}

.vi-relance{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l)}
.vi-relance h3{margin:0 0 4px;font-size:1.15rem}
.vi-relance p{margin:0}
.vi-passes{margin-top:28px}
.vi-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vi-passe{width:100%;display:grid;grid-template-columns:150px minmax(0,1fr) auto auto;gap:12px;align-items:center;text-align:left;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);font:inherit;color:var(--ink);cursor:pointer}
.vi-passe:hover{border-color:var(--ink-4)}
.vi-passe span{color:var(--ink-3);font-size:.88rem}
@media (max-width:600px){.vi-passe{grid-template-columns:1fr auto}.vi-passe span:first-child{grid-column:1/-1}}
.vi-conseils{list-style:disc}
.vi-visage-etat{color:#9AA6BC;font-size:.88rem}
.vi-regler-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-top:10px}

/* ---------- Entretien vidéo, version 2 (11/10/2026) ----------
   « Trop verbeux, pas assez attractif » (Anthony) : le formulaire dans le haut de page (banque et
   desk en menus), les chiffres du format marqués official / reported, un écran d'exemple à droite. */
.vi-hero{padding-block:clamp(28px,5vw,64px) clamp(20px,3vw,36px)}
.vi-hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,5vw,72px);align-items:center}
.vi-hero h1{font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.02;margin:6px 0 12px}
.vi-accroche{font-size:1.02rem;color:var(--ink-2);max-width:480px;margin:0 0 20px}
.vi-carte{display:grid;gap:12px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-2);max-width:560px}
.vi-pour{margin:0;padding:8px 12px;background:var(--accent-bg);border-radius:var(--r);font-size:.9rem;color:var(--ink-2)}
.vi-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vi-champ{display:grid;gap:4px;min-width:0}
.vi-champ span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.vi-champ select,.vi-autre{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-weight:500;background:var(--panel);color:var(--ink)}
.vi-champ select:focus,.vi-autre:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-bg)}
.vi-format{list-style:none;margin:0;padding:12px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)}
.vi-format li{display:grid;gap:1px;padding:0 10px;border-left:1px solid var(--line);min-width:0}
.vi-format li:first-child{border-left:0;padding-left:0}
.vi-format b{font-family:var(--f-mono);font-weight:500;font-size:1.25rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vi-format span{font-size:.76rem;color:var(--ink-3)}
.vi-src{font-style:normal;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.vi-src.off{color:var(--up)}
.vi-src.rep{color:var(--ink-4)}
.vi-src.inv{color:var(--accent)}
.vi-source{margin:0;font-size:.88rem;color:var(--ink-2)}
.vi-source a{font-weight:600;color:var(--ink)}
.vi-coche{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:var(--up-bg);color:var(--up);font-size:.7rem;font-weight:700}
.vi-attentes{margin:0;padding:10px 12px;border-radius:var(--r);background:var(--panel-2);border:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.vi-regler summary{cursor:pointer;font-size:.86rem;color:var(--accent);width:max-content;max-width:100%}
.vi-regler-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.vi-regler label{display:grid;gap:3px;min-width:0}
.vi-regler label span{font-size:.72rem;color:var(--ink-3)}
.vi-regler select{padding:7px 6px;border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:.86rem;background:var(--panel);min-width:0}
.vi-regler .lien{margin-top:8px;font-size:.84rem}
.vi-cv{margin:0;font-size:.88rem;color:var(--ink-2)}
.vi-cv.ok{color:var(--up)}
/* « Upload my CV » : un label (il porte le champ fichier), pas un bouton ; sans ce style il passait pour du texte (test d'Anthony, 11/10). */
.vi-cv label.lien{color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:500}
.vi-cv:not(.ok) label.lien{display:inline-flex;align-items:center;margin-left:6px;padding:5px 12px;border:1px solid var(--accent);border-radius:var(--r-s);background:var(--accent-bg);text-decoration:none;font-weight:600}
.vi-cv label.lien:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.vi-cv label{cursor:pointer;margin-left:6px}
.vi-action{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.vi-action .btn-live{padding-inline:20px}
.vi-prix{font-size:.86rem;color:var(--ink-3)}
.vi-prix b{color:var(--ink);font-family:var(--f-mono);font-weight:500}
.vi-manque{margin:-4px 0 0;font-size:.82rem;color:var(--amber)}

/* L'écran d'exemple. */
.vi-ecran{position:relative;background:var(--tape);color:#E8EDF6;border-radius:12px;padding:16px;box-shadow:var(--shadow-3);margin-bottom:28px}
.vi-ecran-barre{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:#9AA6BC;padding-bottom:12px;border-bottom:1px solid #1C2840}
.vi-ecran-corps{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 16px;align-items:center;padding-top:14px}
.vi-ecran-video{grid-column:1/-1;position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#2A3550 0%,#0E1628 70%)}
.vi-ecran-tete{position:absolute;left:50%;top:22%;width:17%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#56627E}
.vi-ecran-buste{position:absolute;left:50%;bottom:-18%;width:46%;height:46%;transform:translateX(-50%);border-radius:50% 50% 0 0;background:#3E4A66}
/* La silhouette suit la largeur de l'écran, pas sa hauteur (14/10/2026) : quand l'écran s'étire à la hauteur du
   formulaire, la tête restait en haut et le buste en bas, détachés. Les deux s'accrochent au bas de l'écran. */
.vi-ecran-video{container-type:inline-size}
.vi-ecran-buste{bottom:-7cqw;width:46cqw;height:30cqw}
.vi-ecran-tete{top:auto;bottom:21cqw;width:17cqw}
/* Le cadre de détection est accroché à la tête : il reste carré autour d'elle quelles que soient les
   proportions de l'écran (12/10/2026 : sur grand écran, il s'écrasait au-dessus de la tête). */
.vi-ecran-tete{z-index:1}
.vi-ecran-tete::after{content:"";position:absolute;inset:-24% -22% -18%;border:1.5px solid #2BE39A;border-radius:8px;opacity:.8}
.vi-ecran-cadre{display:none}
.vi-ecran-note{z-index:2}
.vi-ecran-rec{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:4px;background:rgba(229,72,77,.92);color:#fff;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em}
.vi-ecran-rec i{width:6px;height:6px;border-radius:50%;background:#fff;animation:clign 1.2s infinite}
.vi-ecran-question{margin:0;font-family:var(--f-serif);font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.25;color:#fff}
.vi-ecran-temps{position:relative;width:62px;height:62px}
.vi-ecran-temps svg{width:100%;height:100%;transform:rotate(-90deg)}
.vi-ecran-temps circle{fill:none;stroke-width:3}
.vi-ecran-temps .fond{stroke:#26324A}
.vi-ecran-temps .reste{stroke:#7FA0FF;stroke-dasharray:119.4;stroke-dashoffset:34;stroke-linecap:round}
.vi-ecran-temps b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-size:.86rem;font-weight:500}
.vi-ecran-note{position:absolute;right:-18px;bottom:-30px;width:min(260px,70%);display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:12px 14px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-3)}
.vi-ecran-note > b{font-family:var(--f-mono);font-weight:500;font-size:1.9rem;letter-spacing:-.04em;color:var(--up)}
.vi-ecran-note > b small{font-size:.5em;color:var(--ink-3)}
.vi-ecran-note ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.vi-ecran-note li{display:grid;grid-template-columns:70px 1fr;gap:6px;align-items:center;font-size:.7rem;color:var(--ink-3)}
.vi-ecran-note li i{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--accent) calc(var(--n)*20%),var(--bg-2) 0)}
.vi-ecran-note p{grid-column:1/-1;margin:4px 0 0;font-size:.78rem;color:var(--ink-2);font-style:italic}

.vi-etapes-sec{padding-block:8px 8px}
.vi-trois{list-style:none;margin:0;padding:18px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-block:1px solid var(--line);counter-reset:t}
.vi-trois li{counter-increment:t;display:grid;grid-template-columns:auto 1fr;gap:0 12px;min-width:0}
.vi-trois li::before{content:"0" counter(t);grid-row:span 2;font-family:var(--f-mono);font-size:1.4rem;color:var(--accent);line-height:1.1}
.vi-trois b{font-size:.98rem}
.vi-trois span{font-size:.86rem;color:var(--ink-3)}
.vi-scene-sec{padding-top:28px}
.vi-avertissement{margin-top:22px;max-width:760px}
.vi-en-cours .vi-hero,.vi-en-cours .vi-etapes-sec,.vi-en-cours .vi-banques-sec,.vi-en-cours .vi-avertissement{display:none}

@media (max-width:980px){
  .vi-hero-grille{grid-template-columns:1fr}
  .vi-ecran{max-width:560px;margin-bottom:30px}
}
@media (max-width:600px){
  .vi-champs{grid-template-columns:1fr}
  .vi-format{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}
  .vi-format li:nth-child(3){border-left:0;padding-left:0}
  .vi-regler-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vi-trois{grid-template-columns:1fr;gap:12px}
  .vi-ecran-note{right:8px;bottom:-26px}
}
.vi-ecran-note{bottom:-24px}
.vi-ecran-video{margin-top:2px}
.vi-attentes{margin-top:8px}
.vi-source a{text-decoration:none;border-bottom:1px solid var(--line-2)}
.vi-source a:hover{border-color:var(--ink)}

/* Entretien vidéo, version 2 (suite) : l'écran d'exemple aligné sur le formulaire, plus de contraste. */
/* Plus de dégradé bleu en haut de la page Interviews (13/10/2026) : aucune autre page n'en a, le quadrillage suffit. */
.vi-hero{background:none}
.vi-hero-grille{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);grid-template-areas:"titre titre" "form ecran";gap:0 clamp(24px,5vw,64px);align-items:stretch}
.vi-hero-titre{grid-area:titre;padding-bottom:28px}
.vi-hero-form{grid-area:form;display:grid}
.vi-hero h1 em{font-style:italic;color:var(--accent)}
.vi-accroche{margin:0;color:var(--ink-2);font-size:1.05rem}
.vi-carte{max-width:none;border-top:3px solid var(--accent);box-shadow:0 1px 0 rgba(10,18,34,.04),0 22px 50px -28px rgba(29,78,216,.45)}
.vi-champ span{color:var(--ink-2);font-weight:500}
.vi-champ select,.vi-autre{border-color:#B9C3D4;background:#fff}
.vi-format b{color:var(--ink);font-size:1.4rem}
.vi-src{justify-self:start;padding:2px 6px;border-radius:3px;margin-top:5px}
.vi-src.off{background:var(--up-bg);color:var(--up)}
.vi-src.rep{background:var(--bg-2);color:var(--ink-3)}
.vi-src.inv{background:var(--accent-bg);color:var(--accent)}
.vi-action .btn-live{padding:13px 24px;font-size:1rem;box-shadow:0 10px 24px -12px rgba(29,78,216,.75)}
.vi-ecran{grid-area:ecran;margin:0;display:flex;flex-direction:column;align-self:center;box-shadow:0 30px 60px -30px rgba(10,18,34,.55),0 0 0 1px #1C2840}
/* Taille fixe, centré sur le formulaire (14/10/2026, Anthony) : l'écran ne s'étire plus avec lui. */
.vi-ecran-corps{flex:none;grid-template-rows:auto auto}
.vi-ecran-video{aspect-ratio:16/10;min-height:0;height:auto}
.vi-ecran-note{right:-16px;bottom:20px}
.vi-etapes-sec{padding-block:26px 0}
.vi-trois{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:18px 22px;box-shadow:var(--shadow-1)}
.vi-trois li::before{content:counter(t);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:.9rem}
@media (max-width:980px){
  .vi-hero-grille{grid-template-columns:1fr;grid-template-areas:"titre" "form" "ecran";gap:0}
  .vi-ecran{margin-top:26px;max-width:560px}
  .vi-ecran-video{aspect-ratio:16/9;height:auto;min-height:0}
  .vi-ecran-note{bottom:-24px;right:8px}
}
.vi-src.typ{background:#FFF6E0;color:#9A6400}
.vi-sources{margin:8px 0 0;padding-left:18px;list-style:disc;display:grid;gap:4px;font-size:.84rem;color:var(--ink-2)}
.vi-sources a{font-weight:600}

/* ---------- Lettre : les arguments en gros, la preuve sous la lettre (12/10/2026) ----------
   « Les gens ne lisent pas » (Anthony) : quatre arguments lisibles d'un coup d'œil en haut de page,
   et sous chaque lettre, la preuve chiffrée (tournures IA, mots-clés, une page). */
.lt-preuves{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.lt-preuves li{display:grid;gap:3px;align-content:start;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--up);border-radius:var(--r);box-shadow:var(--shadow-1);min-width:0}
.lt-preuves b{font-size:1rem;font-weight:650;color:var(--ink);line-height:1.25}
.lt-preuves span{font-size:.84rem;color:var(--ink-3);line-height:1.4}
@media (max-width:900px){.lt-preuves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.lt-preuves{gap:8px}.lt-preuves li{padding:10px 12px}.lt-preuves b{font-size:.92rem}.lt-preuves span{display:none}}
.lt-controle{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lt-controle li{padding:5px 10px;border-radius:999px;background:var(--up-bg);color:var(--up);font-size:.82rem;font-weight:500}
.lt-controle li::before{content:"\2713";margin-right:5px;font-weight:700}
.lt-controle li.non{background:var(--amber-bg);color:var(--amber)}
.lt-controle li.non::before{content:"!"}
.lt-controle b{font-family:var(--f-mono);font-weight:600}
/* L'aperçu à l'écran : la police et la justification du PDF. */
.feuille{font-family:var(--f-serif);text-align:justify;hyphens:auto}
/* Le test des lettres, au tableau de bord : les deux consignes côte à côte. */
.pilotage .p-lt-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:10px 0}
.pilotage .p-lt-col{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);min-width:0}
.pilotage .p-lt-col h4{margin:0 0 8px;font-size:.95rem}
.pilotage .p-lt-col ul{margin:0 0 8px;padding-left:18px;list-style:disc;display:grid;gap:3px;font-size:.88rem}
.pilotage .p-lt-lettre summary{cursor:pointer;font-size:.88rem;padding:4px 0}
.pilotage .p-lt-lettre pre{white-space:pre-wrap;font-family:var(--f-serif);font-size:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px}
@media (max-width:760px){.pilotage .p-lt-grille{grid-template-columns:1fr}}
.pilotage .p-lt-h{margin:14px 0 6px;font-size:.92rem}
.pilotage .p-lt-liste{margin:0;padding-left:18px;list-style:disc;display:grid;gap:6px;font-size:.88rem}
.pilotage td.non{color:var(--down);font-weight:600}
/* La courbe de progression et la reprise d'une question. */
.vi-courbe{padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);margin-bottom:16px}
.vi-courbe-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
.vi-courbe-tete h3{margin:0;font-size:1.1rem}
.vi-courbe-tete span{font-size:.92rem;color:var(--ink-2)}
.vi-courbe-tete b.plus{color:var(--up)}
.vi-courbe-tete b.moins{color:var(--down)}
.vi-courbe svg{max-width:100%;height:auto;display:block;margin-top:6px}
.vi-courbe .seuil-txt{fill:var(--up)}
.vi-courbe .grille{stroke:var(--line);stroke-width:1}
.vi-courbe .seuil{stroke:var(--up);stroke-width:1.2;stroke-dasharray:5 4}
.vi-courbe .ligne{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.vi-courbe .point{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.vi-courbe .point.haut{stroke:var(--up)}
.vi-courbe .axe{font-family:var(--f-mono);font-size:11px;fill:var(--ink-3)}
.vi-courbe .valeur{font-family:var(--f-mono);font-size:12px;font-weight:600;fill:var(--ink)}
.vi-reprise-action{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:4px}
.vi-reprise{padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel-2);display:grid;gap:8px}
.vi-reprise-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.vi-reprise .vi-score{font-size:1.2rem;margin:0}
.vi-passes .vi-courbe{margin-top:0}
/* Quatre tuiles sur une ligne quand l'entretien vidéo est lancé (sinon trois). */
@media (min-width:860px){.compte-actions:has(> :nth-child(4)){grid-template-columns:1.2fr 1fr 1fr 1fr}}
@media (min-width:560px) and (max-width:859px){.compte-actions:has(> :nth-child(4)){grid-template-columns:1fr 1fr}}
/* Accueil : l'entretien vidéo (12/10), le texte à gauche, l'écran d'exemple à droite. */
.accueil-vi{display:grid;gap:28px;align-items:center}
.accueil-vi>*{min-width:0}
@media (min-width:900px){.accueil-vi{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px}}
.accueil-vi .vi-ecran{grid-area:auto;margin:0;max-width:none}
.accueil-vi-points{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:18px}
.accueil-vi-points li{display:flex;gap:14px;align-items:flex-start}
.accueil-vi-points .oui{flex:none;margin-top:2px;color:var(--up);font-weight:700}
.accueil-vi-points b{display:block;font-size:1.05rem;color:var(--ink)}
.accueil-vi-points div span{display:block;color:var(--ink-2);font-size:.95rem;margin-top:3px}
/* Accueil (12/10) : le titre de section en pleine largeur, deux lignes au plus, sans texte à droite. */
.sec-head.pleine{grid-template-columns:1fr}
.sec-head.pleine h2{max-width:none;text-wrap:balance}
@media (max-width:600px){.sec-head.pleine h2{font-size:1.6rem}}
/* la deuxième phrase d'un titre à la ligne sur ordinateur ; sur téléphone elle suit, pour rester sur deux lignes */
@media (max-width:600px){.br-pc{display:none}}
/* La lettre d'exemple de l'accueil : un vrai A4 sur téléphone aussi (12/10 ; avant, le minimum de 10 px
   allongeait la page de 18 %). Mesuré : A4 exact de 375 à 430 px de large. */
@media (max-width:600px){#demo .a4{padding:5cqw 5.5cqw;font-size:max(9px,2.4cqw);line-height:1.42}}
@media (max-width:370px){#demo .a4{font-size:max(8.5px,2.4cqw);line-height:1.38}}
/* Espace V3 (12/10/2026) : quatre portes en ligne, la prochaine étape, une seule activité, trois petites cartes. */
.compte-portes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.compte-portes a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:13px 16px;background:var(--panel);border:1px solid #C9D2E0;border-radius:10px;color:var(--ink);text-decoration:none;min-width:0}
.compte-portes a:hover{border-color:var(--accent)}
.compte-portes b{font-weight:650}.compte-portes span{font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);white-space:nowrap}
.compte-portes a.principale{background:var(--accent);border-color:var(--accent)}.compte-portes a.principale b,.compte-portes a.principale span{color:#fff}
/* « Find an internship, write its cover letter » sur une ligne à l'ordinateur (13/10/2026) : la porte principale
   prend la place de son texte, les deux autres se partagent le reste ; entre tablette et petit écran, elle
   occupe toute la rangée au-dessus des deux autres. */
@media (min-width:1081px){.compte-portes{grid-template-columns:minmax(max-content,2fr) minmax(0,1fr) minmax(0,1fr)}.compte-portes a.principale b{white-space:nowrap}}
@media (min-width:761px) and (max-width:1080px){.compte-portes{grid-template-columns:1fr 1fr}.compte-portes a.principale{grid-column:1/-1}}
.compte-suite{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin:0 0 14px;padding:20px 22px;background:var(--panel);border:1px solid #C9D2E0;border-left:4px solid var(--up);border-radius:var(--r-l)}
.compte-suite>div:first-child{display:grid;gap:6px;min-width:0}
.cs-titre{font-size:1.12rem;color:var(--ink);letter-spacing:-.01em}
.cs-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink-2);font-size:.92rem}
.cs-match{font-family:var(--f-mono);color:var(--up)}
.cs-actions{display:grid;gap:8px;justify-items:end}
.compte-activite{margin:0 0 14px;border-color:var(--line);box-shadow:var(--shadow-1)}
.compte-activite .term-head{background:#EEF2F8;border-bottom-color:#C9D2E0;flex-wrap:wrap}
.compte-filtres{display:flex;gap:4px;margin-left:auto;overflow-x:auto;max-width:100%}
.compte-filtres button{font:600 .82rem var(--f-sans);padding:5px 10px;border-radius:6px;border:0;background:none;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.compte-filtres button[aria-pressed="true"]{background:var(--ink);color:#fff}
.compte-ligne{display:grid;grid-template-columns:64px 104px minmax(0,1fr) 84px 150px;gap:14px;align-items:center;padding:13px 18px;border-top:1px solid var(--line)}
#e-lignes .compte-ligne:first-child{border-top:0}
.cl-date{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3)}
.cl-quoi{display:grid;gap:2px;min-width:0}.cl-quoi b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}.cl-quoi small{color:var(--ink-3);font-size:.84rem}
.cl-score{font-family:var(--f-mono);font-size:1.05rem;color:var(--ink);text-align:right}.cl-score small{color:var(--ink-3);font-size:.75rem}
.cl-score .plus{color:var(--up)}.cl-score .moins{color:var(--ink-2)}
.cl-action{color:var(--accent);font-weight:600;font-size:.9rem;text-align:right;text-decoration:none;white-space:nowrap}
.compte-plus{border-top:1px solid var(--line);padding:11px 18px;text-align:right}
.compte-bas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;align-items:start;margin-bottom:28px}  /* 2 ou 3 cartes, la rangée reste pleine */
.compte-petite{display:grid;gap:6px;padding:16px 18px;background:var(--panel);border:1px solid #C9D2E0;border-radius:var(--r-l);min-width:0}
.compte-petite>b,.compte-petite summary b{color:var(--ink);font-weight:600}
.compte-petite-pied{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.compte-petite .lien{font-weight:600}
.compte-petite .code-ami{margin-top:2px}
.compte-reglages summary{display:grid;gap:4px;cursor:pointer;list-style:none}.compte-reglages summary::-webkit-details-marker{display:none}
.compte-reglages summary small{color:var(--accent);font-weight:600}
/* Le mot de passe derrière un petit bouton en haut de la page compte (13/10/2026). */
.compte-mdp{position:relative}
.compte-mdp summary{list-style:none}
.compte-mdp summary::-webkit-details-marker{display:none}
.compte-mdp[open] summary{border-color:var(--accent);color:var(--accent)}
.compte-mdp .reglage b{min-width:0;overflow-wrap:anywhere;text-align:right}
.compte-mdp .reglages{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(360px,calc(100vw - 32px));padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-2);text-align:left}
@media (max-width:860px){.compte-mdp .reglages{left:0;right:auto}}  /* au téléphone, le bouton est à gauche : le panneau s'ouvre vers la droite */
/* Les boutons du solde, toujours à droite (13/10/2026). */
@media (min-width:860px){.compte-solde-actions{grid-column:3;justify-self:end}}
@media (max-width:760px){
  .compte-portes{grid-template-columns:1fr 1fr}.compte-portes a{flex-direction:column;align-items:flex-start;gap:4px}
  .compte-portes a.principale{grid-column:1/-1}
  .compte-suite{grid-template-columns:1fr}.cs-actions{justify-items:start}
  .compte-ligne{grid-template-columns:auto 1fr auto;row-gap:6px}
  .cl-date{grid-column:1}.cl-type{grid-column:2}.cl-score{grid-column:3}.cl-quoi{grid-column:1/-1}.cl-action{grid-column:1/-1;text-align:left}
  .compte-bas{grid-template-columns:1fr}
}

.compte-petite label.lien{color:var(--accent);cursor:pointer}
/* Le test de raisonnement abstrait (12/10/2026) : les grilles en SVG, les choix en images. */
.vis-grille{display:block;width:100%;height:auto}
.vis-suite{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:4px 2px 8px}
.vis-cadre{flex:none;width:clamp(64px,13vw,104px)}
.vis-fleche{flex:none;color:var(--ink-4);font-size:.9rem}
.vis-inconnu{display:grid;place-items:center;aspect-ratio:1;border:1.4px dashed var(--ink-4);border-radius:4px;font:600 1.6rem var(--f-mono);color:var(--ink-3);background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 6px,#fff 6px,#fff 12px)}
.vis-exemples{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;background:var(--bg);border-radius:8px}
.vis-exemples .vis-legende{flex-basis:100%;font:600 .78rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.vis-exemples .vis-cadre{width:clamp(84px,16vw,120px)}
.ent-choix.vis-choix{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ent-choix.vis-choix-intrus{grid-template-columns:repeat(5,minmax(0,1fr))}.ent-choix.vis-choix-regle{grid-template-columns:repeat(4,minmax(0,1fr))}
.ent-choix.vis-choix button{flex-direction:column;align-items:center;gap:8px;padding:10px}
.ent-choix.vis-choix button .vis-grille{max-width:136px}
.vis-revue{display:flex;gap:14px;flex-wrap:wrap}
.vis-revue figure{margin:0;width:110px;display:grid;gap:6px}
.vis-revue figcaption{font:600 .76rem var(--f-mono);color:#B42318}
.vis-revue .vis-bonne figcaption{color:var(--up)}
.vis-revue figure.vis-deux{width:auto}.vis-revue figure.vis-deux>div{display:grid;grid-template-columns:repeat(2,110px);gap:8px}
.ent-deux{margin:-6px 0 12px;font:600 .8rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.ent-revue .vis-suite .vis-cadre{width:70px}.ent-revue .vis-exemples .vis-cadre{width:80px}
@media (max-width:600px){.vis-suite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible}.vis-suite .vis-fleche{display:none}.vis-suite .vis-cadre{width:auto}.ent-choix.vis-choix{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ent-choix.vis-choix button{padding:8px 6px}.ent-choix.vis-choix-regle{grid-template-columns:repeat(2,minmax(0,1fr))}#ent-seance .vis-exemples{gap:8px;padding:10px}#ent-seance .vis-exemples .vis-cadre{width:calc(50% - 4px);max-width:170px}.vis-revue figure.vis-deux>div{grid-template-columns:repeat(2,minmax(0,110px))}}

/* Les tests calés sur les vrais formats (12/10/2026) : consignes avant le départ, repère après le score,
   onglets et grille des tests au format Aon, rangées de formes de l'aiguillage (switchChallenge). */
.ent-consignes{margin:0;padding:12px 14px 12px 30px;background:var(--bg);border-radius:8px;display:grid;gap:4px;font-size:.88rem;color:var(--ink-2)}
.ent-repere{margin:0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-bg);border-radius:4px;font-size:.88rem;color:var(--ink-2)}
.ent-grille-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ent-grille-nav button{width:34px;height:30px;border:1px solid var(--line-2);border-radius:6px;background:var(--panel);font:500 .8rem var(--f-mono);color:var(--ink-2);cursor:pointer}
.ent-grille-nav button.repondue{background:var(--line);color:var(--ink-3)}
.ent-grille-nav button.en-cours{background:var(--ink);border-color:var(--ink);color:#fff}
.ent-onglets{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line-2)}
.ent-onglets button{padding:8px 12px;border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;background:none;font-family:inherit;font-size:.84rem;font-weight:500;color:var(--ink-3);cursor:pointer;margin-bottom:-1px}
.ent-onglets button[aria-selected="true"]{background:var(--panel);border-color:var(--line-2);color:var(--ink);font-weight:600}
.ent-fiche{min-height:150px;padding:10px 0 4px}
.ent-fiche-texte{font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.ent-fiche.petit{min-height:0;padding:8px 10px;background:var(--bg);border-radius:6px}
.ent-fiche.petit .ent-fiche-texte{font-size:.84rem}
.ent-fiche-nom{display:block;margin-bottom:4px;font:600 .72rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ent-choix.ent-choix-ligne{grid-template-columns:repeat(3,minmax(0,1fr))}
.ent-choix.ent-choix-ligne button{justify-content:center;align-items:center;font-family:var(--f-mono)}
.ag{display:grid;justify-items:center;gap:10px;padding:16px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.ag-rangee{display:grid;grid-template-columns:repeat(4,52px);gap:14px}
.ag-case{display:grid;justify-items:center;gap:3px}
.ag-case svg{width:52px;height:52px;background:#E4E6EA;border-radius:8px;box-shadow:0 1px 2px rgba(10,18,34,.14)}
.ag-chiffre{font:600 .78rem var(--f-mono);color:var(--ink-3)}
.ag-chiffre.vient{font-size:.92rem;color:var(--accent)}
.ag-code{padding:8px 18px;border-radius:8px;background:#5A5F68;color:#fff;font:500 1.12rem var(--f-mono);letter-spacing:.2em}
.ag-code.ag-manque{background:#fff;border:1.5px dashed var(--accent);color:var(--accent)}
.ag-code.ag-trouve{background:var(--up)}
.ag-legende{font:600 .7rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ag-options{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ag-options button{padding:10px 16px;border:2px solid transparent;border-radius:8px;background:#E4E6EA;font:500 1.12rem var(--f-mono);letter-spacing:.2em;color:var(--ink);cursor:pointer}
.ag-options button:hover{border-color:var(--ink-4)}
.ag-options button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-bg)}
.ent-revue .ag{justify-items:start}.ent-revue .ag-rangee{grid-template-columns:repeat(4,36px);gap:8px}.ent-revue .ag-case svg{width:36px;height:36px}.ent-revue .ag-code{font-size:.9rem;padding:5px 12px}
/* Les exemples d'avant le départ : la même question que dans le test, la réponse expliquée sous elle. */
.ent-exemples{display:grid;gap:10px;padding-top:10px;border-top:1px solid var(--line)}
.ent-exemples h3{margin:0;font-size:1.05rem}
.ent-exemple{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.ent-exemple h3{margin:0;font-size:1rem;line-height:1.4}
.ent-exemple-tete{font:600 .72rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ent-exemple-reponse{display:grid;gap:10px;padding:12px 14px;border-left:3px solid var(--up);background:#fff;border-radius:6px;font-size:.9rem;color:var(--ink-2)}
.ent-exemple-reponse.ko{border-left-color:#B42318}
.ent-exemple-reponse p{margin:0}
.ent-exemple-reponse.ok b{color:var(--up)}.ent-exemple-reponse.ko b{color:#B42318}
@media (max-width:600px){.ent-onglets button{padding:6px 8px;font-size:.78rem}.ent-grille-nav button{width:30px}.ent-choix.ent-choix-ligne button{padding:12px 4px;white-space:nowrap}.ent-choix.ent-choix-ligne button span{display:none}.ag-rangee{grid-template-columns:repeat(4,44px);gap:10px}.ag-case svg{width:44px;height:44px}.ag-options button{padding:8px 10px;font-size:1rem;letter-spacing:.12em}.ent-exemple{padding:12px}}

/* L'abonnement et les crédits à la carte (12/10/2026, choix A d'Anthony) */
/* La page des prix nette : un titre, trois colonnes, une ligne pour les nouveaux. */
.prix-page{padding-block:clamp(28px,4vw,56px) 72px;display:grid;gap:22px}
.prix-tete{display:grid;gap:10px;max-width:720px}
.prix-tete{max-width:none}
.prix-tete h1{font-size:clamp(2rem,3.7vw,3rem);text-wrap:balance}
.prix-tete .lede,.prix-tete .prix-asso{max-width:720px}
.prix-compte{font-size:.95rem;color:var(--ink-2)}
.prix-offert{justify-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:4px 0 0;padding:12px 16px;border:1px solid var(--accent);border-radius:var(--r);background:var(--accent-bg);color:var(--ink);font-size:1rem}
/* L'accueil : les cartes de la page Tarifs, sans bouton ; la ligne des crédits offerts au-dessus. */
#pricing .prix-offert{margin:0 0 22px}
html:not(.connecte) .accueil-prix-cartes .paiement{display:none}
html:not(.connecte) .accueil-prix-cartes .prix-col ul{margin-bottom:0}
#pricing #formule-message{margin-top:16px}
.prix-colonnes{display:grid;gap:16px;align-items:stretch}
@media (min-width:900px){.prix-colonnes{grid-template-columns:repeat(3,minmax(0,1fr))}}

.prix-col{display:flex;flex-direction:column;padding:24px}
.prix-col .prix{margin:12px 0 2px}
.prix-pitch{color:var(--ink-2);font-size:.98rem}
.prix-col ul{margin:16px 0 20px;flex:1;align-content:start}
.prix-remise{font-size:1rem;color:var(--ink);font-weight:500}
.prix-urgence{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.95rem;color:var(--ink-2)}
.prix-urgence b{color:var(--ink)}
.prix-asso{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.95rem;color:var(--ink-2)}
.prix-asso-champ{display:inline-flex;gap:8px}
.prix-asso input{width:180px;font:500 .95rem var(--f-mono);padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink);text-transform:uppercase}
.prix-asso-etat{flex-basis:100%;font-size:.88rem}
.prix-asso-etat:empty{display:none}
.prix-asso-etat.ko{color:var(--down)}
.prix-asso-etat.ok{color:var(--up)}
.prix-col .prix.remisee{font-size:2.1rem}
.prix-col .prix .prix-avant,.formule .prix .prix-avant{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:8px;font-size:1.3rem;font-weight:600;color:var(--ink-3);letter-spacing:-.01em}
.prix-col .prix .prix-avant s,.formule .prix .prix-avant s{color:inherit;font-weight:inherit;text-decoration:line-through;text-decoration-color:var(--down);text-decoration-thickness:3px}
.prix-pct{font:700 .82rem var(--f-mono);padding:3px 9px;border-radius:999px;background:var(--down);color:#fff;letter-spacing:.02em;text-decoration:none}
.prix-col .btn{width:100%;justify-content:center}
.prix-col .carte-rapide{margin:0 0 10px}
.prix-col .carte-n{margin:0 0 12px}
.prix-col .carte-n input{width:110px}
.prix-pied{color:var(--ink-2);text-align:center}
/* « Ça doit donner envie de payer » (12/10) : la carte vedette en bleu, des arguments, la confiance. */
@media (min-width:900px){.prix-colonnes{align-items:center}.prix-col.vedette{padding-block:34px}}
.prix-col.vedette{background:linear-gradient(155deg,#2A5CF0 0%,var(--accent) 48%,#16379E 100%);color:#fff;border:0;
  box-shadow:0 28px 60px -24px rgba(29,78,216,.65),0 1px 0 rgba(255,255,255,.2) inset}
.prix-col.vedette .plan-code,.prix-col.vedette .prix small{color:rgba(255,255,255,.78)}
.prix-col.vedette .prix-pitch,.prix-col.vedette li{color:#fff}
.prix-col.vedette .oui{color:#7DF0C4}
.prix-col.vedette .tag.badge{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35)}
.prix-col.vedette .btn{background:#fff;color:var(--accent);border-color:#fff;font-weight:700}
.prix-col.vedette .btn:hover{background:#EEF3FF}
.prix-col.vedette .prix-jour{color:#C9D8FF}
.prix-col.vedette .prix .prix-avant{color:rgba(255,255,255,.85)}
.prix-col.vedette .prix .prix-avant s{text-decoration-color:#FFB3B6}
.prix-col.vedette .prix-pct{background:#fff;color:var(--down)}
.prix-jour{margin-top:-2px;font:600 .82rem var(--f-mono);letter-spacing:.02em;color:var(--accent)}
.prix-col .prix-pitch{margin-top:12px;font-weight:600;color:var(--ink)}
.prix-annuler{margin-top:10px;text-align:center;font-size:.82rem;color:var(--ink-3)}
.prix-col.vedette .prix-annuler{color:rgba(255,255,255,.75)}
.prix-carte #carte-taux{font-size:inherit}
.carte-grille{margin:14px 0 18px;display:grid;flex:1;align-content:start}
.carte-grille>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.carte-grille>div:last-child{border-bottom:0}
.carte-grille dt{color:var(--ink-2)}
.carte-grille dd{margin:0;font:500 .95rem var(--f-mono);color:var(--ink)}
.prix-confiance{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:6px 0 0;padding:0;list-style:none;font-size:.88rem;color:var(--ink-2)}
.prix-confiance li{display:flex;align-items:center;gap:8px}
.prix-confiance li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--up) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.tarifs-3 .tarifs-tete,.tarifs-3 .tarif{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(58px,auto));gap:12px;align-items:baseline}
.tarifs-3 .tarif b,.tarifs-3 .tarifs-tete span+span{text-align:right}
.tarif b.inclus{color:var(--up)}
@media (max-width:560px){.tarifs-3 .tarifs-tete,.tarifs-3 .tarif{grid-template-columns:minmax(0,1fr) repeat(3,auto);gap:8px;font-size:.84rem;padding-inline:12px}}
.formules{display:grid;gap:12px;margin-top:14px}
@media (min-width:560px){.formules{grid-template-columns:1fr 1fr}}
.formules-note,#formule-message{grid-column:1/-1;margin:0}
.formule{display:flex;flex-direction:column;padding:20px}
.formule ul{margin:12px 0 18px;flex:1}
.formule .btn{width:100%;justify-content:center}
.formule .btn:disabled{opacity:.6;cursor:default}
.carte-rapide{display:flex;gap:8px;margin:12px 0 10px}
.carte-pastille{flex:1;display:grid;justify-items:center;gap:2px;padding:9px 6px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);font:500 1.05rem var(--f-mono);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.carte-pastille small{font:400 .78rem var(--f-sans);color:var(--ink-3)}
.carte-pastille:hover{border-color:var(--accent)}
.carte-pastille[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.carte-n{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 6px;font-size:.95rem;color:var(--ink-2)}
.carte-n input{width:130px;font:500 1.2rem var(--f-mono);padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);text-align:right;color:var(--ink);background:var(--panel)}
#payer:disabled{opacity:.55;cursor:default}
.compte-abo-ligne,.compte-abo{margin-top:8px;font-size:.9rem;color:var(--ink-2)}
.compte-abo .tag,.compte-abo-ligne .tag{margin-right:4px}
.compte-solde-actions{display:flex;flex-wrap:wrap;gap:8px}
button.lien.danger{color:var(--down)}
@media (min-width:560px){.accueil-prix-packs.accueil-prix-trois{grid-template-columns:repeat(3,1fr)}}
a.accueil-prix-pack{text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
a.accueil-prix-pack:hover{border-color:var(--accent);box-shadow:var(--shadow-1)}
.accueil-prix-pack b small{font-family:var(--f-sans);font-size:.8rem;color:var(--ink-3);font-weight:400;letter-spacing:0}
.accueil-prix-pack.vedette{border:1.5px solid var(--accent);background:var(--accent-bg)}
.tag.remise{background:var(--up-bg);color:var(--up);font-weight:700}
.formule .prix s,#payer s,.carte-pastille s{color:var(--ink-3);font-weight:400;text-decoration-thickness:1.5px}
.formule .prix.remisee{font-size:2.1rem}

.formule .prix small{white-space:nowrap}

/* Pilotage, les inscrits par école (13/10/2026). */
.p-pitch{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.p-pitch-texte{margin:0;flex:1;min-width:0;font-weight:500;color:var(--ink)}
.p-ecole-cible td:first-child{color:var(--ink)}

/* ==========================================================================
   Le mur de paiement (13/10/2026, piste 2 choisie par Anthony). Le solde ne
   couvre pas la lettre : au clic sur « Write my letter », une fenêtre par-dessus
   la page, la feuille de SA lettre à gauche, les trois offres à droite,
   Essentials cochée d'office. Sur téléphone, une feuille collée en bas. Aucune
   animation : rien de visible ne dépend d'une animation (webviews figées).
   ========================================================================== */
html.mur-ouvert{overflow:hidden}
.mur-voile{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(10,18,34,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mur-fenetre{position:relative;width:min(920px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);background:var(--panel);border-radius:12px;box-shadow:0 30px 80px -24px rgba(10,18,34,.6)}
.mur-gauche{display:grid;align-content:center;padding:24px;background:#E4E7ED;border-right:1px solid var(--line)}
.mur-gauche .lecteur{box-shadow:var(--shadow-1)}
.mur-gauche .verifs{display:none}
.mur-droite{display:grid;align-content:center;padding:34px 32px 28px;min-width:0}
.mur-pret{display:inline-flex;align-items:center;gap:6px;width:fit-content;max-width:calc(100% - 44px);padding:3px 9px;border-radius:4px;background:var(--up-bg);color:var(--up);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.mur-pret i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--up)}
.mur-droite h2{font-size:clamp(1.6rem,2.6vw,2.15rem);margin:12px 0 8px}
.mur-sous{color:var(--ink-2);font-size:.96rem}
.mur-packs{gap:8px;margin-top:16px}
.mur-packs .pack{padding:11px 14px}
.mur-packs .pack .tag{height:20px;font-size:.64rem}
.mur-packs .pack-n{font-size:.92rem;color:var(--ink-2)}
.mur-packs .pack-n b{font-family:var(--f-sans);font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.mur-packs .pack-p small{font-family:var(--f-sans);font-size:.78rem;color:var(--ink-3);letter-spacing:0}
.mur-packs .pack-p s{font-size:.8rem;color:var(--ink-3);margin-right:6px}
.mur-packs .pack-d{font-size:.8rem}
.mur-payer{width:100%;min-height:48px;margin-top:14px;font-size:1rem}
.mur-rassure{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:.8rem;color:var(--ink-3)}
.mur-rassure li::before{content:"✓";margin-right:5px;color:var(--up);font-weight:700}
.mur-droite .message{margin-top:10px}
.mur-autre{margin-top:14px;font-size:.86rem;color:var(--ink-3)}
.mur-autre a{color:var(--accent)}
.mur-fermer{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font-size:1.3rem;line-height:1;cursor:pointer}
.mur-fermer:hover{border-color:var(--ink)}
@media (max-width:759px){
  .mur-voile{place-items:end stretch;padding:0}
  .mur-fenetre{grid-template-columns:minmax(0,1fr);max-height:92vh;max-height:92dvh;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .mur-fenetre::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-2)}
  .mur-gauche{display:none}
  .mur-droite{padding:28px 20px 20px}
  .mur-droite h2{font-size:1.6rem}
}

/* ---------- Revue mobile (15/10/2026 : 53 % des visiteurs sont sur téléphone) ----------
   1. Les prix : sur une colonne, les abonnements d'abord (Essentials, All-in), les crédits ensuite.
   2. L'entraînement : les trois chiffres sur une rangée, au lieu d'un troisième qui tombe seul et décalé.
   3. La page d'un stage : l'encart de l'entretien vidéo, l'étiquette au-dessus du texte (plus de colonne vide).
   4. Les têtes d'étape (lettre) : un écart entre les deux libellés, et le retour à la ligne s'il le faut. */
.pane-head{gap:6px 14px;flex-wrap:wrap}
@media (max-width:899px){
  .prix-colonnes #formule-essentials{order:-2}
  .prix-colonnes #formule-allin{order:-1}
}
@media (max-width:760px){
  .ent-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ent-chiffres li{padding:0 10px;align-content:start}
  .ent-chiffres b{font-size:1.4rem}
  .appel-video{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  .appel-video .tag{grid-column:1 / -1;justify-self:start}
}

/* ---------- L'encart HireVue après Apply (15/10/2026, commun.js) ---------- */
.hv-encart{position:fixed;right:20px;bottom:20px;z-index:60;width:min(380px,calc(100vw - 32px));background:#fff;border:1px solid var(--line-2);border-top:3px solid var(--accent);border-radius:var(--r-l);box-shadow:0 12px 40px rgba(10,18,34,.18);padding:16px 18px 18px;display:grid;gap:10px}
.hv-encart-tete{margin:0;padding-right:26px;font-weight:700;font-size:1rem;line-height:1.35;color:var(--ink)}
.hv-encart-source{margin:0;padding:8px 10px;border-left:3px solid var(--line-2);background:var(--bg-2,#F4F6FA);font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.hv-encart-source a{color:var(--ink-3);white-space:nowrap}
.hv-encart-format{margin:0;font:600 .76rem var(--f-mono);color:var(--ink-3)}
.hv-encart-go{justify-content:center}
.hv-encart-fermer{position:absolute;top:8px;right:10px;width:30px;height:30px;border:0;background:none;font-size:1.3rem;line-height:1;color:var(--ink-3);cursor:pointer;border-radius:6px}
.hv-encart-fermer:hover{background:var(--bg-2,#F4F6FA)}
@media (max-width:600px){.hv-encart{right:16px;left:16px;bottom:16px;width:auto}}

/* ---------- Le mot qui change entre deux offres presque homonymes (16/10/2026, titres.js) ---------- */
mark.titre-ecart{background:none;color:inherit;font-weight:800;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;padding:0}

/* ---------- Tableau de bord : l'objectif d'inscrits à gauche, l'usage à droite, même hauteur (16/10/2026) ---------- */
/* L'usage (16/10/2026) : un tableau, une ligne par produit, les 30 jours en petites barres. */
.pu-table tbody th[scope="row"]{white-space:nowrap;font:600 .92rem/1.3 var(--f-sans);letter-spacing:0;text-transform:none;color:var(--ink);background:transparent}
.pu-pastille{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:0}
.pu-table td.pu-auj{font-weight:700;color:var(--ink)}
.pu-mini{min-width:220px}
.pu-barres{display:inline-flex;align-items:flex-end;gap:2px;height:30px;width:190px;vertical-align:middle}
.pu-barres i{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:var(--line)}
.pu-pic{margin-left:10px;font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);white-space:nowrap}
.pu-note{margin:10px 0 0}
.pilotage .pu-table tbody tr > *{vertical-align:middle;background:transparent;border-bottom:1px solid var(--line)}
/* Sur téléphone : aujourd'hui, 7 jours, 30 jours ; ni hier ni les petites barres, tout tient sans défiler. */
@media (max-width:600px){.pu-table tr > :nth-child(3),.pu-table tr > :nth-child(6){display:none}.pu-table tbody th[scope="row"]{white-space:normal}.pu-pastille{display:none}}
/* Un seul bloc et un menu (16/10/2026) : une vue à la fois, pleine largeur, sans vide entre les cartes. */
.p-bloc{--zone:var(--accent);background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:0 1px 2px rgba(10,18,34,.08),0 6px 18px rgba(10,18,34,.06);margin-top:22px;overflow:hidden}
.p-menu{border-bottom:1px solid var(--line);background:var(--panel-2);padding:12px 16px}
.p-menu-puces{display:flex;flex-wrap:wrap;gap:10px 22px}
.p-menu-groupe{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.p-menu-groupe span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:2px}
.p-menu button{font:600 .84rem/1 var(--f-sans);padding:8px 11px;border-radius:6px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);cursor:pointer}
.p-menu button:hover{border-color:var(--ink-3);color:var(--ink)}
.p-menu button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.p-menu-liste{display:none;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.p-menu-liste select{flex:1;min-width:0;font:600 1rem/1.2 var(--f-sans);padding:10px 12px;border-radius:6px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink)}
@media (max-width:700px){.p-menu-puces{display:none}.p-menu-liste{display:flex}}
.p-vue{min-width:0}
.pilotage .p-bloc .carte{border:0;border-radius:0;box-shadow:none;margin:0;background:transparent}
.pilotage .p-bloc .kpis-grille{padding:16px}
.pilotage .p-bloc .carte-tete{border-radius:0}
.p-cherche{padding:10px 14px 0}
.p-cherche input{width:100%;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:.9rem;background:var(--panel)}
/* L'objectif du jour, seul sur toute la largeur (16/10/2026) : le chiffre à gauche, la courbe des 14 jours à droite. */
@media (min-width:760px){
  .pb-carte[data-but="inscrits"]{grid-template-columns:minmax(0,320px) minmax(0,1fr);column-gap:32px;align-items:center}
  .pb-carte[data-but="inscrits"] > :not(.pb-courbe){grid-column:1}
  .pb-carte[data-but="inscrits"] .pb-courbe{grid-column:2;grid-row:1 / span 4;margin:0}
}

/* ------------------------------ Le premier écran : le scan du CV (16/10/2026) ------------------------------ */
/* Choisi par Anthony après 9 tours : le titre, un seul bouton (le dépôt du CV, avant le compte), le CV lu et 4
   sorties d'une ligne, toutes cliquables. Il prend toute la hauteur jusqu'au bandeau (139 px = l'en-tête et le
   bandeau, mesurés) : on ne voit plus « Worldwide » en arrivant. */
@media (min-width:1020px){
  .hero.hs{min-height:calc(100svh - 139px);display:flex;align-items:center;padding:28px 0}
  .hero.hs>.shell{width:100%}
  .hero.hs .shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.hero h1.hs-titre{margin:22px 0 10px;font-size:min(clamp(3rem,5.6vw,4.8rem),13cqi)}
.hero h1.hs-titre em{font-style:italic;color:var(--accent)}
@media (max-width:600px){.hero h1.hs-titre{font-size:min(clamp(2.4rem,11vw,3.2rem),13cqi)}}
.hs-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hs-btns .btn{min-height:52px;padding:12px 22px;font-size:1.02rem}
.hs-fichier{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hs-note{margin:14px 0 0;max-width:430px;font-size:.95rem;color:var(--ink-2)}
.hs-note b{color:var(--ink)}
.hs-note:empty{margin:0}
.hs-scene{display:grid;grid-template-columns:minmax(150px,.75fr) minmax(0,1fr);gap:clamp(20px,2.4vw,36px);align-items:center}
.hs-cv{position:relative;min-height:400px;padding:26px 24px;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 34px 60px -34px rgba(10,18,34,.5);transition:border-color .2s}
.hs-cv h4{margin:0;font-family:var(--f-serif);font-size:1.2rem;line-height:1.1;letter-spacing:.02em}
.hs-cv small{display:block;margin-top:7px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.hs-cv .sec{margin-top:20px;font-family:var(--f-mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.hs-cv .l{display:block;height:7px;border-radius:4px;background:#E3E8F0;margin-top:10px}
.hs-cv .l.m{background:#CFE0FF}
.hs-cv .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.hs-cv .tags span{padding:3px 6px;border-radius:3px;background:#E3ECFF;font-family:var(--f-mono);font-size:.64rem;color:var(--ink)}
.hs-faisceau{position:absolute;left:0;right:0;height:70px;top:-70px;background:linear-gradient(180deg,rgba(29,78,216,0),rgba(29,78,216,.16) 70%,rgba(29,78,216,.7) 98%,rgba(29,78,216,0));animation:hs-scan 3.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes hs-scan{0%{top:-70px}80%,100%{top:420px}}
.hs.hs-lit .hs-faisceau{animation-duration:1.1s}
.hs.hs-survol .hs-cv{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,78,216,.18),0 34px 60px -34px rgba(10,18,34,.5)}
.hs-sorties{display:grid;gap:24px}  /* 17/10/2026 : plus d'air entre les cartes, les pastilles Find, Write, Practice s'y posent */
.hs-sortie{position:relative;display:flex;align-items:center;gap:11px;padding:12px;color:inherit;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 30px -22px rgba(10,18,34,.5);cursor:pointer;transition:transform .15s;animation:hs-lu 3.2s infinite}
.hs-g2 .hs-sortie{animation-delay:.6s}.hs-g3 .hs-sortie:nth-of-type(1){animation-delay:1.2s}.hs-g3 .hs-sortie:nth-of-type(2){animation-delay:1.8s}
@keyframes hs-lu{0%,30%,100%{border-color:var(--line)}12%{border-color:var(--accent)}}
.hs-sortie::before{content:"";position:absolute;right:100%;top:50%;width:clamp(20px,2.4vw,36px);border-top:1.5px dashed #9FB0C8}
.hs-sortie::after{content:"→";flex:none;font-family:var(--f-mono);font-weight:700;color:var(--ink-3);transition:transform .15s}
.hs-sortie:hover{transform:translateX(3px);border-color:var(--accent)}.hs-sortie:hover::after{transform:translateX(3px);color:var(--accent)}
.hs-sortie>div{flex:1;min-width:0}
.hs-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:.82rem;font-weight:800}
.hs-ic.v{background:var(--up)}.hs-ic.a{background:var(--amber)}
.hs-sortie b{display:block;overflow:hidden;font-size:.98rem;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
.hs-sortie small{display:block;margin-top:4px;font-family:var(--f-mono);font-size:.7rem;line-height:1.25;color:var(--ink-3)}
.hs-sortie.hs-match{animation:none;transition:transform .15s,border-color .3s,box-shadow .3s}
.hs-match b{transition:transform .22s ease,opacity .22s ease}
.hs-match.hs-sort b{transform:translateY(-80%);opacity:0}
.hs-match.hs-entre b{transform:translateY(80%);opacity:0;transition:none}
.hs-match.hs-flash{border-color:var(--up);box-shadow:0 0 0 4px rgba(0,163,108,.16),0 16px 30px -22px rgba(10,18,34,.5)}
.hs-match.hs-flash .hs-ic{transform:scale(1.08)}.hs-match .hs-ic{transition:transform .3s}
.hs-sortie.rec{background:#0E1729;border-color:#0E1729;color:#fff;animation:none}
.hs-sortie.rec small{color:#8EA6D8}.hs-sortie.rec::after{color:#8EA6D8}
.hs-sortie.rec .hs-ic{background:#1C2A47;color:#FF6B78;font-size:.7rem;animation:clign 1s infinite}
.hs-cv .hs-fait{display:-webkit-box;margin:8px 0 0;overflow:hidden;font-size:.82rem;font-weight:600;line-height:1.3;color:var(--ink);-webkit-line-clamp:3;-webkit-box-orient:vertical}
.hs-badge{display:inline-block;margin-bottom:10px;padding:4px 8px;border-radius:99px;background:var(--up);color:#fff;font-family:var(--f-mono);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;animation:hs-badge .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes hs-badge{0%{transform:scale(0)}100%{transform:scale(1)}}
.hs-cv h4,.hs-cv small,.hs-cv #hs-savoirs{transition:opacity .22s ease,transform .22s ease}
.hs-cv.hs-cv-sort h4,.hs-cv.hs-cv-sort small,.hs-cv.hs-cv-sort #hs-savoirs{opacity:0;transform:translateY(-8px)}
.hs-cv.hs-cv-entre h4,.hs-cv.hs-cv-entre small,.hs-cv.hs-cv-entre #hs-savoirs{opacity:0;transform:translateY(8px);transition:none}
.hs-cv.lu{border-color:var(--up)}.hs-cv.lu .hs-faisceau{display:none}
.hs-cv.hs-eclat{animation:hs-eclat 1s cubic-bezier(.3,.7,.3,1)}
@keyframes hs-eclat{0%{transform:none}25%{transform:scale(.93) rotateY(12deg);box-shadow:0 0 0 0 rgba(0,163,108,.6),0 34px 60px -34px rgba(10,18,34,.5)}55%{transform:scale(1.04);box-shadow:0 0 0 16px rgba(0,163,108,0),0 34px 60px -34px rgba(10,18,34,.5)}100%{transform:none}}
.calme .hs-faisceau,.calme .hs-sortie,.calme .hs-sortie.rec .hs-ic,.calme .hs-cv.hs-eclat,.calme .hs-badge{animation:none}
@media (max-width:600px){
  .hs-scene{grid-template-columns:minmax(0,1fr);gap:26px}
  .hs-cv{min-height:0;padding:18px 18px 20px}
  .hs-br{display:none}
  .hs-cv .l.opt{display:none}
  .hs-cv.lu .sec.comp{display:block}
  .hs-sortie::before{display:none}
}

/* L'offre de bienvenue (17/10/2026) : le premier entretien vidéo à son prix réduit. Tout est caché sans html.offre-video (posé par
   commun.js pour un compte qui n'a terminé aucun entretien vidéo). Le vert du site : --up, et #00805A sous un texte blanc. */
.offre-bienvenue,.vi-offre,.pastille-offre,.etiq-bienvenue,.si-offre{display:none}
.offre-video .offre-bienvenue{display:flex}
.offre-video .vi-offre{display:block}
.offre-video .etiq-bienvenue{display:block}
.offre-video .si-offre{display:inline}
.offre-video .no-offre{display:none}
.offre-video .pastille-offre{display:inline-block}
.offre-bienvenue{flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 14px;padding:14px 16px;background:var(--panel);border:2px solid var(--up);border-radius:10px;box-shadow:4px 4px 0 var(--up)}
.offre-bienvenue p{flex:1 1 220px;margin:0;font-size:1.1rem;font-weight:600;color:var(--ink)}
.offre-bienvenue s,.vi-offre s,.compte-portes s{color:var(--ink-3);font-weight:500}
.offre-bienvenue .jusqua{font-family:var(--f-mono);font-size:.76rem;color:#00805A;white-space:nowrap}
.jusqua:empty{display:none}
.etiq,.etiq-bienvenue,.vi-offre .pastille,.pastille-offre{background:#00805A;color:#fff;font-family:var(--f-mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:4px}
.etiq{padding:6px 10px;font-size:.7rem}
.compte-portes .etiq-bienvenue{width:max-content;margin-top:8px;padding:3px 8px;font-size:.62rem;font-style:normal}
.pastille-offre{margin-left:7px;padding:2px 7px;font-size:.68rem;letter-spacing:.02em;border-radius:999px;vertical-align:1px}
.nav a.btn.nav-compte{position:relative}
.vi-offre{max-width:320px;margin:16px 0 4px;padding:16px 18px 18px;background:var(--panel);border:2px solid var(--up);border-radius:10px;box-shadow:5px 5px 0 var(--up)}
.etiq-point{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#00805A}
.etiq-point i{width:8px;height:8px;border-radius:50%;background:var(--up)}
.vi-offre-prix{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px;font-family:var(--f-mono)}
.vi-offre-prix s{font-size:1.15rem}
.vi-offre-prix b{font-size:3.2rem;line-height:1;font-weight:700;color:var(--ink)}
.vi-offre-prix span{font-size:.95rem;color:var(--ink-2)}
.vi-offre p{margin:0 0 14px;font-weight:600;color:var(--ink)}
.vi-offre .pastille{display:inline-block;margin-left:4px;padding:2px 8px;font-size:.72rem;letter-spacing:.02em;border-radius:999px;font-style:normal}
.vi-offre .btn{width:100%;justify-content:center}
.vi-offre .jusqua{display:block;margin:-6px 0 12px;font-family:var(--f-mono);font-size:.74rem;color:#00805A}
@media (min-width:1081px){
  .vi-hero-titre{position:relative}
  .offre-video .vi-hero-titre{padding-right:360px}
  .offre-video .vi-offre{position:absolute;right:0;top:6px;width:316px;margin:0}
}
/* Téléphone : les trois portes du compte passent à une par ligne. */
@media (max-width:760px){.compte-portes{grid-template-columns:minmax(0,1fr)}.offre-bienvenue .btn{margin-left:0;width:100%;justify-content:center}}
/* La ligne « Next step » du résultat (17/10/2026) : même style que la ligne de l'offre sur le compte, juste sous le score. */
.vi-suite{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;background:var(--panel);border:2px solid var(--up);border-radius:10px;box-shadow:4px 4px 0 var(--up)}
.vi-suite p{margin:0;font-size:1.05rem;color:var(--ink)}
.vi-suite small{display:block;font-size:.86rem}
.vi-suite>div{flex:1 1 240px;min-width:0}
@media (max-width:600px){.vi-suite .btn{width:100%;justify-content:center}}

/* Les pages « HireVue par banque » (/hirevue/<id>.html, 17/10/2026) : un haut de page court (titre, format sourcé, vignette), puis du texte de
   référence. La vignette dit « Create account » au visiteur, « Start » à un compte (avec le prix de bienvenue s'il y a droit). */
.vb-hero{display:grid;gap:28px;padding:clamp(28px,5vw,48px) 0 28px}
@media (min-width:980px){.vb-hero{grid-template-columns:minmax(0,1fr) 330px;align-items:start}}
.vb-hero h1{font-family:var(--f-serif);font-weight:500;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.06;margin:10px 0 12px;max-width:21ch;text-wrap:balance}
.vb-sous{margin:0 0 18px;font-size:1.1rem;font-weight:500;color:var(--ink-2)}
.vb-format{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;max-width:560px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vb-format div{display:grid;gap:2px;padding:12px 14px;background:var(--panel)}
.vb-format b{font-family:var(--f-mono);font-size:1.3rem;font-weight:700;color:var(--ink)}
.vb-format span{font-size:.8rem;color:var(--ink-3)}
.vb-format em{font-family:var(--f-mono);font-size:.62rem;font-weight:600;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:560px){.vb-format{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vb-ticket{padding:16px 18px 18px;background:var(--panel);border:2px solid var(--up);border-radius:10px;box-shadow:5px 5px 0 var(--up)}
.vb-prix{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px;font-family:var(--f-mono)}
.vb-prix b{font-size:3.2rem;line-height:1;font-weight:700;color:var(--ink)}
.vb-prix s{font-size:1.15rem;color:var(--ink-3)}
.vb-prix span{font-size:.95rem;color:var(--ink-2)}
.vb-ticket p{margin:0 0 14px;font-weight:600;color:var(--ink)}
.vb-ticket .btn{width:100%;justify-content:center}
.vb-prix s,.vb-prix .p30,.vb-prix .p50{display:none}
html:not(.connecte) .vb-prix .p30{display:inline}
html.connecte.offre-video .vb-prix s,html.connecte.offre-video .vb-prix .p30{display:inline}
html.connecte:not(.offre-video) .vb-prix .p50{display:inline}
.vb-c{display:none}
html.connecte .vb-v{display:none}
html.connecte .vb-c{display:inline-flex}
.ref{max-width:780px;padding:20px 0 64px;border-top:1px solid var(--line);color:var(--ink-2)}
.ref h2{margin:34px 0 8px;font-family:var(--f-serif);font-size:1.5rem;line-height:1.2;font-weight:600;color:var(--ink)}
.ref h3{margin:18px 0 6px;font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ref p{margin:0 0 10px;line-height:1.6}
.ref-src{font-size:.88rem;color:var(--ink-3)}
.ref-src a,.ref-sources a{color:var(--accent)}
.ref-faq details{margin-bottom:8px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.ref-faq summary{font-weight:600;color:var(--ink);cursor:pointer}
.ref-faq details p{margin:8px 0 0}
.ref-sources{display:grid;gap:4px;margin:0;padding-left:18px;font-size:.92rem}
.vi-banques-sec{padding:12px 0 56px}
.vi-banques-sec h2{margin:0 0 14px;font-family:var(--f-serif);font-size:1.4rem;font-weight:600}
.vi-banques{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.vi-banques a{display:grid;gap:2px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}
.vi-banques a:hover{border-color:var(--accent)}
.vi-banques span{font-size:.82rem;color:var(--ink-3)}

/* La barre du bas (17/10/2026, Anthony : sur téléphone, les services ne se voyaient pas) : quatre onglets, un clic chacun, jusqu'à 860 px.
   La pastille « −40 % » de l'offre de bienvenue suit HireVue. Cachée sur les écrans de connexion et pendant un entretien. */
.dock{display:none}
@media (max-width:860px){
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel);border-top:1px solid var(--line)}
  .dock a{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-height:58px;padding:8px 2px 7px;color:var(--ink-3);font-size:.68rem;font-weight:600;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
  .dock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .dock a[aria-current="page"]{color:var(--ink)}
  .dock a[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:24%;right:24%;height:2px;background:var(--accent)}
  .dock .pastille-offre{position:absolute;top:3px;left:calc(50% + 8px);margin:0;padding:1px 5px;font-size:.58rem}
  body:not([data-cadre="auth"]):not(.vi-en-cours){padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  body[data-cadre="auth"] .dock,body.vi-en-cours .dock{display:none}
  .toast{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .hv-encart{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:350px){.dock a{font-size:.62rem}}  /* 320 px : « Internships & letters » tient dans son onglet */

/* Les lignes d'offres sur téléphone (17/10/2026, Anthony : trop grosses, pas lisibles). Cinq lignes courtes : la date et le métier, l'employeur
   (une ligne, d'un cran plus petit), la ville en entier sur la sienne, l'intitulé, les étiquettes. L'étoile (36 px) tient à droite de l'employeur
   et de la ville. Les lignes « verrouillées » (offres de la semaine) gardent leur mise en page. */
@media (max-width:760px){
  .row:not(.locked){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"age tag" "nom star" "ville star" "ligne ligne" "meta meta";gap:0 10px;align-items:center;padding:7px 4px 8px}
  .row:not(.locked)>div:not(.row-age):not(.row-actions),.row:not(.locked) .row-emp{display:contents}
  .row:not(.locked) .row-age{grid-area:age;display:flex;gap:6px;align-items:baseline;font-size:.72rem;line-height:1.2}
  .row:not(.locked) .row-age b{font-size:.76rem}
  .row:not(.locked) .row-emp .desk-tel{grid-area:tag;justify-self:end;height:18px;font-size:.66rem;padding:0 7px}
  .row:not(.locked) .row-nom{grid-area:nom;min-width:0;font-size:.98rem;line-height:1.2;font-weight:700;letter-spacing:-.015em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row:not(.locked) .row-ville{grid-area:ville;display:block;font-size:.72rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row:not(.locked) .row-actions{grid-area:star;align-self:center;justify-self:end}
  .row:not(.locked) .row-actions .suivre{width:36px;height:36px;font-size:.95rem}
  .row:not(.locked) .row-ligne{grid-area:ligne;margin:2px 0 3px}
  .row:not(.locked) .row-title{font-size:.9rem;line-height:1.25}
  .row:not(.locked) .row-meta{grid-area:meta}
  .row:not(.locked) .tag{height:22px;font-size:.7rem;padding:0 8px}
}

/* La page des tests sur téléphone (17/10/2026, Anthony) : le quadrillage du fond passait à travers « Pick your role » et les titres des sections, et se
   confondait avec leurs filets ; une section dépliée doublait les traits. Un seul panneau uni derrière le tout, UN filet entre deux blocs
   (le haut de chacun), jamais un bas et un haut qui se superposent. */
@media (max-width:760px){
  #ent-catalogue,.ent-offre{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
  .ent-offre{padding:0 0 14px;margin-bottom:14px}
  #ent-catalogue .ent-roles{margin:0;padding:16px 14px 14px}
  #ent-catalogue details.ent-groupe,#ent-catalogue .ent-pour:not(:empty){margin:0;border-top:1px solid var(--line)}
  #ent-catalogue .ent-pour:not(:empty){margin-top:16px;padding-top:0}
  #ent-catalogue .ent-pour:empty{margin:0}
  .ent-groupe-tete{border-bottom:0;padding:14px 14px;margin-bottom:0}
  details.ent-groupe[open]>summary .ent-groupe-tete{margin-bottom:0;padding-bottom:10px}
  .ent-offre .ent-groupe-tete{padding-top:14px}
  .ent-offre-titre{margin:0 14px 10px}
  #ent-catalogue .ent-grille,.ent-offre .ent-grille{padding:0 12px 14px}
  #ent-catalogue .ent-pour .ent-grille{padding:0 0 4px}
}

/* Find, Write, Practice (17/10/2026, Anthony : discret) : trois petites pastilles posées sur le bord haut de trois cartes de la colonne de droite ;
   les cartes, elles, sont là tout de suite. Les pastilles apparaissent une à une (à 0,5 s, 1,5 s, 2,5 s, posées par accueil.js) dès que la colonne est à l'écran, puis restent.
   Sans JavaScript, ou en « réduire les animations », elles sont là d'emblée. */
.hs-tic{position:absolute;top:0;left:14px;z-index:2;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 6px;border-radius:99px;background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:.62rem;font-weight:700;line-height:1;letter-spacing:.13em;text-transform:uppercase;pointer-events:none}
.hs-tic.v{background:var(--up)}.hs-tic.n{background:var(--tape)}
.hs-sortie.rec .hs-tic{box-shadow:0 0 0 2px #fff}  /* sur la carte sombre, la pastille sombre se détache */
.hs-tic svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hs-sorties.hs-tics-attente .hs-tic{visibility:hidden}
.hs-sorties.hs-tics-attente .hs-tic.on{visibility:visible;animation:hs-tic-in .45s var(--ease) both}
@keyframes hs-tic-in{0%{transform:translateY(-30%) scale(.8)}100%{transform:translateY(-50%) scale(1)}}
.calme .hs-tic{animation:none;visibility:visible}

/* Sur téléphone, plus de bouton « Upload my CV » (17/10/2026, Anthony : personne n'a son CV sur son téléphone) : le dépôt reste sur ordinateur. */
@media (max-width:600px){.hs-btns{display:none}.hero h1.hs-titre{margin-bottom:18px}}

/* Les groupes de la colonne de droite (18/10/2026) : sur ordinateur ils ne changent rien (display:contents, les titres sont cachés) ; sur téléphone ils
   forment un fil vertical, Find, Write, Practice, directement sous le titre « See it early. Arrive prepared. », sans carte CV (Anthony : trois gros
   points, un fil conducteur, c'est clair). Les petites pastilles des cartes (ordinateur) y sont inutiles : les titres les remplacent. */
.hs-g{display:contents}
.hs-gt{display:none}
@media (max-width:600px){
  .hs-cv{display:none}
  .hs-scene{display:block;margin-top:6px}
  .hs-sorties{display:block;position:relative;padding-left:52px}
  .hs-sorties .hs-tic{display:none}
  .hs-g{display:block;position:relative;margin:0 0 30px}
  .hs-g:last-child{margin-bottom:0}
  .hs-g:not(:last-child)::before{content:"";position:absolute;left:-35px;top:38px;bottom:-30px;width:2px;background:#B9C4D6}
  .hs-gt{position:relative;display:flex;align-items:center;min-height:38px;margin:0 0 10px;font-family:var(--f-serif);font-size:1.75rem;font-weight:500;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
  .hs-gp{position:absolute;left:-52px;top:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px #E7EBF1}
  .hs-gt.v .hs-gp{background:var(--up)}.hs-gt.n .hs-gp{background:var(--tape)}
  .hs-gp svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .hs-g .hs-sortie+.hs-sortie{margin-top:10px}
}
.vb-hub{grid-template-columns:minmax(0,1fr)!important}
.ref .vb-banques{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:0 0 18px;padding:0;list-style:none}
.ref .vb-banques a{display:grid;gap:4px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}
.ref .vb-banques a:hover{border-color:var(--accent)}
.ref .vb-banques b{font-size:1.05rem}
.ref .vb-banques span{font-size:.84rem;line-height:1.4;color:var(--ink-3)}

/* Page Internships (18/10/2026, Anthony) : « d'abord le stage, ensuite la lettre », deux petites lignes d'étapes sous le titre. */
.pas-parcours{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pas-parcours li{display:flex;align-items:baseline;gap:10px;max-width:84ch;color:var(--ink-2);font-size:.98rem;line-height:1.45}
.pas-parcours b{color:var(--ink);font-weight:650;margin-right:4px}
.pas-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:700 .72rem var(--f-mono);transform:translateY(3px)}
.pas-parcours li:first-child .pas-n{background:var(--accent);color:#fff}

/* Les deux étapes ne s'affichent que sur ordinateur (18/10/2026, Anthony) : sur téléphone elles repoussent les offres, déjà sous « What are you looking for? ». */
@media (max-width:600px){.pas-parcours{display:none}}

/* Téléphone, sans compte (18/10/2026, Anthony : « on ne voit pas les offres directement, les gens vont passer ») : la carte « What are you looking for? »
   se réduit au titre, au bouton et à l'alerte ; la phrase, les pastilles d'exemple et la petite ligne de l'alerte restent sur ordinateur. Les offres
   arrivent alors dans le premier écran. Les comptes connectés gardent leur bloc tel quel. */
@media (max-width:600px){
  .ma-recherche.bloc-visiteur{padding:12px 14px;gap:10px}
  .bloc-visiteur .recherche-tete{gap:8px 12px}
  .bloc-visiteur .recherche-tete h2{font-size:1.2rem;line-height:1.2}
  .bloc-visiteur #recherche-resume{display:none}
  .bloc-visiteur .cible-alerte{padding:9px 12px;flex-wrap:nowrap;gap:12px}
  .bloc-visiteur .cible-alerte-texte{flex:1 1 auto}
  .bloc-visiteur .cible-alerte small{display:none}
  .bloc-visiteur .cible-alerte b{font-size:.9rem;line-height:1.25}
  .bloc-visiteur .alerte-etat{height:24px;padding:0 8px;font-size:.62rem}
}
@media (min-width:601px){.b-filtre{display:none}}

/* Téléphone, recherche faite (21/10/2026, Anthony : « titre et cartes en une ligne après le choix, pour voir des offres sans défiler ») : cible.js pose html.choix-fait
   quand un compte a une recherche enregistrée et ne la modifie pas. Le titre de la page tient sur une ligne (c'est le même h1, il reste dans la page), la date
   (« Blotter ») s'efface, la carte garde son résumé et « Edit », l'alerte se réduit comme celle d'un visiteur, la ligne CV reste. Dès que le compte modifie sa recherche
   (« Edit »), tout revient. Sur ordinateur, rien ne change. */
@media (max-width:600px){
  html.choix-fait .page-head{padding-block:12px 2px}
  html.choix-fait .page-head .sec-num{display:none}
  html.choix-fait .page-head h1{font-size:1.1rem;line-height:1.3;letter-spacing:-.01em}
  html.choix-fait .page-head h1 br{display:none}
  html.choix-fait .page-head h1 .grad{margin-left:.28em}
  html.choix-fait .ma-recherche{padding:12px 14px;gap:10px}
  html.choix-fait .recherche-tete h2{font-size:1.05rem;line-height:1.2}
  html.choix-fait #recherche-resume{margin-top:2px;font-size:.86rem}
  html.choix-fait .cible-alerte{padding:9px 12px;flex-wrap:nowrap;gap:12px}
  html.choix-fait .cible-alerte-texte{flex:1 1 auto}
  html.choix-fait .cible-alerte small{display:none}
  html.choix-fait .cible-alerte b{font-size:.9rem;line-height:1.25}
  html.choix-fait .alerte-etat{height:24px;padding:0 8px;font-size:.62rem}
}
.vi-src.non{background:var(--bg-2);color:var(--ink-3)}

/* Les plaques de desks (19/10/2026, Anthony : « les cartes, très stylées ») : un visiteur voit tous les univers d'un coup et en coche un ou plusieurs ; la plaque
   cochée prend la couleur du desk. Rien ne bouge au survol. Un compte connecté garde sa carte (html.connecte est posé dans le <head>). */
.plaques{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding-top:7px}
.plaque{position:relative;display:block;cursor:pointer;min-width:0}
.plaque input{position:absolute;opacity:0;width:1px;height:1px}
.plaque-corps{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;height:100%;padding:11px 10px 10px;background:#fff;border:1px solid var(--line-2);border-radius:2px;box-shadow:var(--shadow-1);color:var(--ink)}
.plaque-corps::before{content:"";position:absolute;inset:3px;border:1px solid rgba(var(--c),.5);pointer-events:none}
.plaque-nom{display:flex;align-items:center;min-height:2.35em;font-family:var(--f-serif);font-weight:600;font-size:1.02rem;line-height:1.15;letter-spacing:-.01em}
.plaque-nb{display:block;width:100%;padding-top:5px;border-top:1px solid var(--line);font-family:var(--f-mono);font-weight:600;font-size:1.5rem;line-height:1.1;color:rgb(var(--c))}
.plaque-nb small{margin-left:5px;font-size:.62rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.plaque-coche{position:absolute;top:-7px;right:-7px;z-index:1;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;display:grid;place-items:center;font-size:.7rem;line-height:1;color:transparent}
.plaque input:checked+.plaque-corps{background:rgb(var(--c));border-color:rgb(var(--c));color:#fff}
.plaque input:checked+.plaque-corps::before{border-color:rgba(255,255,255,.55)}
.plaque input:checked+.plaque-corps .plaque-nb{color:#fff;border-top-color:rgba(255,255,255,.4)}
.plaque input:checked+.plaque-corps .plaque-nb small{color:#fff;opacity:.85}
.plaque-ic{width:22px;height:22px;flex:none;fill:none;stroke:rgb(var(--c));stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.plaque input:checked+.plaque-corps .plaque-ic{stroke:#fff}
.plaque input:checked+.plaque-corps .plaque-coche{background:#fff;border-color:#fff;color:rgb(var(--c));font-weight:700}
.plaque input:focus-visible+.plaque-corps{outline:2px solid var(--accent);outline-offset:2px}
/* Les deux petits liens sous les plaques (Venture capital, ESG) : un visiteur y clique pour s'inscrire avec ce thème, un compte les coche. */
.plaques-aussi{margin:0;font-size:.9rem;color:var(--ink-3)}
.plaques-aussi:empty{display:none}
.aussi-lien{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.aussi-lien b{font-family:var(--f-mono)}
.aussi-lien.on{color:var(--accent);font-weight:600;text-decoration-thickness:2px}
.aussi-lien.on::before{content:"✓ "}
/* Un compte voit les plaques et ces liens quand il modifie sa recherche ou n'en a pas encore (.en-modif, posé par cible.js) : même place, même rangée que pour un visiteur. */
html.connecte .ma-recherche:not(.en-modif) .plaques,html.connecte .ma-recherche:not(.en-modif) .plaques-aussi{display:none}
@media (max-width:600px){
  .plaques{display:flex;overflow-x:auto;gap:7px;margin:0 -14px;padding:8px 14px 2px;scrollbar-width:none}
  .plaques::-webkit-scrollbar{display:none}
  .plaque{flex:none;width:112px}
  .plaque-corps{padding:8px 6px 7px;gap:1px}
  .plaque-corps::before{inset:2px}
  .plaque-nom{font-size:.82rem;min-height:2.35em}
  .plaque-ic{width:18px;height:18px}
  .plaque-nb{font-size:1.05rem;padding-top:3px}
  .plaque-nb small{font-size:.54rem;margin-left:3px}
  .plaques-aussi{font-size:.8rem}
}

/* La liste des offres en cartes et sa barre (19/10/2026, Anthony : « les cartes, vraiment pas mal », l'employeur devant le poste,
   le score gardé sur chaque ligne, une seule couleur d'accent). Tout est limité à la page des offres ([data-page="offres"]) : les
   pages d'employeurs, de villes et de desks gardent leurs lignes. La carte est celle de outils/construire.py (carte_offre) et de
   public/assets/js/offres.js (ligne). 20/10/2026 : à gauche, le pictogramme du métier sur la couleur de sa plaque (Anthony : « autre
   chose que les drapeaux », qui se lisaient comme l'origine de l'entreprise) ; le pays s'écrit dans la ligne grise. Le même
   pictogramme et la même couleur marquent le desk sur les plaques de la recherche et dans le filtre Desk. Aucune visibilité ne
   dépend d'une transition. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
[data-page="offres"] #recherche-vue{display:none}  /* les onglets « My search / All » de la barre en prennent la place ; ses boutons restent le moteur (cible.js) */

[data-page="offres"] .blotter{border:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
[data-page="offres"] #liste{display:grid;gap:12px}
[data-page="offres"] .carte{animation:entre .5s var(--ease) both;cursor:pointer}
[data-page="offres"] .carte.neuf{animation:entre .5s var(--ease) both,flash 1.6s var(--ease) .3s}
#liste.sans-entree .carte{animation:none}
[data-page="offres"] #semaine{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
[data-page="offres"] .suivi-resume{margin-bottom:12px}

[data-page="offres"] .carte{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:20px;align-items:center;padding:18px 22px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-1)}
[data-page="offres"] .carte:hover{background:var(--panel);border-color:var(--line-2);box-shadow:var(--shadow-3)}
.carte-tuile{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--c),.12);border:1px solid rgba(var(--c),.3)}
.carte-tuile .dk{width:28px;height:28px;fill:none;stroke:rgb(var(--c));stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.carte-main{min-width:0}
/* La hiérarchie (21/10/2026, Anthony : le titre « fait la différence », variante A) : l'employeur en repère, petit et en demi-gras, au-dessus ; le titre en grand, plus lourd, en noir. */
.carte .carte-emp{display:flex;align-items:baseline;gap:12px;min-width:0;font-size:.82rem;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.carte .carte-nom{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.carte-desk{font:500 .7rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carte .carte-ligne{margin:3px 0 0}
.carte .carte-titre{margin:0;font-size:1.2rem;font-weight:650;line-height:1.25;letter-spacing:-.015em;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.carte .carte-titre a{color:inherit;text-decoration:none}
.carte .carte-titre a:hover{color:var(--accent)}
.carte-meta{display:flex;flex-wrap:nowrap;gap:0 18px;margin-top:8px;overflow:hidden;white-space:nowrap;font-size:.84rem;color:var(--ink-3)}
.carte-meta .mi{display:inline-flex;align-items:center;gap:6px;flex:none}
.carte-meta .mi .ic{color:var(--ink-4)}
.carte-meta .mi.fl{color:var(--accent);font-weight:500}
.carte-meta .mi.fl .ic{color:var(--accent)}
.carte-meta .mi.fait{color:var(--up);font-weight:600}
.carte-meta .mi.non{font-style:italic}
.carte-score{display:grid;justify-items:center;gap:4px;min-width:50px}
.carte-score small{font:500 .6rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.carte .tag.facile.score-rond{--rc:var(--up);position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;
  background:conic-gradient(var(--rc) calc(var(--n)*1%),#E5EAF1 0);color:var(--ink);font:600 .9rem/1 var(--f-mono);letter-spacing:-.04em;cursor:pointer}
.carte .tag.facile.score-rond::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--panel)}
.carte .tag.facile.score-rond i{position:relative;font-style:normal}
.carte .tag.facile.score-rond.f-moyen{--rc:#E0A23B}
.carte .tag.facile.score-rond.f-bas{--rc:var(--ink-4)}
.carte-fin{display:grid;justify-items:end;align-content:center;gap:4px;min-width:76px}
.carte .carte-age{display:inline-flex;align-items:center;font:400 .78rem/1 var(--f-mono);color:var(--ink-3);white-space:nowrap}
.carte-age .pt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px}
.carte .carte-actions{align-items:center;gap:6px}
.carte .carte-actions .suivre{display:inline-flex;align-items:center;justify-content:center;padding:0;width:34px;height:34px;border:0;background:none;color:var(--ink-4);font-size:1.1rem}
.carte:hover .carte-actions .suivre{color:var(--accent)}
.carte .carte-actions .suivre[aria-pressed="true"]{color:var(--amber);background:none;border:0}
.carte.inapte{background:var(--panel-2)}
.carte.postule{background:linear-gradient(90deg,var(--up-bg),var(--panel) 40%)}
.carte .pourquoi{margin-top:10px}
.carte:has(.pourquoi){align-items:start}
.carte-statut{margin-top:8px}
.carte-statut select{width:auto;min-width:0;min-height:36px;font-size:.84rem}

/* La ligne CV : une rangée de la carte de recherche, sous l'alerte, du même style calme (20/10/2026). Verte quand les scores Match sont allumés,
   comme l'alerte allumée. Sur téléphone, « Best for me first » reste dans le tri : la rangée tient sur une ligne. */
[data-page="offres"] .bandeau-cv{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:6px 14px;margin:0;padding:7px 8px 7px 14px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);font-size:.9rem;color:var(--ink-2)}
[data-page="offres"] .bandeau-cv-texte{flex:1 1 auto;min-width:0}
[data-page="offres"] .bandeau-cv-texte b{color:var(--ink);font-size:.95rem}
[data-page="offres"] .bandeau-cv-actions{flex:none;flex-wrap:nowrap}
[data-page="offres"] .bandeau-cv .btn{padding-block:6px;white-space:nowrap}
[data-page="offres"] .bandeau-cv.actif{background:var(--up-bg);border-color:rgba(0,163,108,.3)}
@media (max-width:760px){
  [data-page="offres"] .bandeau-cv{padding:5px 5px 5px 12px;gap:8px}
  [data-page="offres"] .bandeau-cv-texte b{font-size:.84rem}
  [data-page="offres"] .bandeau-cv .btn{padding-inline:10px}
  [data-page="offres"] .bandeau-cv #cv-trier{display:none}
}

/* La barre : onglets et compteur, tri, recherche, Filters, étoile */
[data-page="offres"] .bl-zone{margin-top:8px}
.barre-liste{position:relative;z-index:35;padding:8px 0}
.barre-liste.fixe{position:fixed;top:var(--bl-top,62px);left:0;right:0;padding:0}
/* Un bloc blanc comme les cartes (Anthony, 20/10/2026) : sur le papier quadrillé, des onglets soulignés sans fond faisaient des lignes parallèles. */
.barre-liste form{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:0 14px 0 22px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-1)}
.barre-liste.fixe form{border-top:0;border-radius:0 0 12px 12px;box-shadow:var(--shadow-3)}  /* accrochée sous l'en-tête : aucune carte ne passe dans l'écart */
.bl-gauche{display:flex;align-items:center;gap:6px 16px;min-width:0}
.bl-onglets{display:flex;gap:22px;align-self:stretch}
.bl-onglets button{display:flex;align-items:center;gap:7px;height:56px;white-space:nowrap;padding:0 2px;border:0;border-bottom:2px solid transparent;background:none;font-weight:600;font-size:.96rem;color:var(--ink-3);cursor:pointer}
.bl-onglets button small{font:500 .78rem var(--f-mono);color:var(--ink-3)}
.bl-onglets button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.barre-liste .compteur{margin:0;font:400 .76rem/1.3 var(--f-mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;min-width:0}
.barre-liste .compteur:empty{display:none}
.bl-sp{flex:1 1 0;min-width:0}
.barre-liste #tri{flex:none;width:auto;min-width:0;max-width:none;min-height:36px;padding:0 18px 0 4px;border:0;background-color:transparent;box-shadow:none;font-size:.9rem;color:var(--ink-3);cursor:pointer;background-position:calc(100% - 8px) 50%,calc(100% - 3px) 50%}
.bl-q{position:relative;display:flex;align-items:center;gap:8px;flex:none;width:290px;height:40px;padding:0 10px;background:var(--panel);border:1px solid var(--line-2);border-radius:6px;color:var(--ink-3)}
.bl-q:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.bl-q input[type="search"]{flex:1;min-width:0;width:auto;min-height:0;height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-family:var(--f-sans);font-size:.92rem;color:var(--ink)}
.bl-q input[type="search"]:focus{box-shadow:none;border:0}
.bl-q input[type="search"]::-webkit-search-cancel-button{display:none}
.bl-x{flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:var(--panel-2);color:var(--ink-2);font-size:.9rem;line-height:1;cursor:pointer}
.bl-btn{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;background:var(--panel);border:1px solid var(--line-2);border-radius:6px;font-weight:500;font-size:.92rem;white-space:nowrap;cursor:pointer}
.bl-btn .ic{width:16px;height:16px}
.bl-btn small{font:600 .7rem/1 var(--f-mono);background:var(--accent-bg);color:var(--accent);border-radius:10px;padding:3px 7px}
.bl-btn small:empty{display:none}
.bl-fav small{background:var(--panel-2);color:var(--ink-2)}
.bl-fav[aria-pressed="true"]{background:#FFF8DD;border-color:#E0A600}
.bl-panneau{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:min(560px,100%);display:grid;gap:16px;padding:18px 20px;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow-3)}
.bl-desks{display:grid;gap:10px}
.bl-desks-groupe{display:grid;gap:6px}
.bl-desks-titre{font:500 .68rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.bl-desks-ligne{display:flex;flex-wrap:wrap;gap:6px}
.bl-desk{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 8px;background:var(--panel);border:1px solid var(--line-2);border-radius:8px;font-size:.85rem;color:var(--ink);white-space:nowrap;cursor:pointer}
.bl-desk .dk{width:18px;height:18px;flex:none;fill:none;stroke:rgb(var(--c));stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bl-desk small{font:500 .72rem var(--f-mono);color:var(--ink-3)}
.bl-desk[aria-pressed="true"]{background:rgba(var(--c),.14);border-color:rgb(var(--c));font-weight:600}
.bl-desk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bl-grille{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.bl-grille label{display:grid;gap:6px;font:500 .68rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.bl-grille select{width:100%;min-width:0;max-width:none}
.bl-moi{display:grid;gap:4px;padding-top:14px;border-top:1px solid var(--line)}
.bl-moi h3{font:500 .68rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.bl-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.92rem;color:var(--ink-2)}
.bl-ligne small{color:var(--ink-3)}
.bl-ligne .btn{white-space:nowrap}
.bl-pied{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.filtres-ouverts .barre-liste{z-index:70}

@media (max-width:760px){
  [data-page="offres"] .carte{grid-template-columns:46px minmax(0,1fr) auto;gap:6px 12px;padding:13px 13px 13px 14px;align-items:start}
  .carte-tuile{width:46px;height:46px;border-radius:10px}
  .carte-tuile .dk{width:24px;height:24px}
  .carte .carte-emp{font-size:.8rem}
  .carte .carte-desk{display:none}
  .carte .carte-titre{-webkit-line-clamp:3;font-size:1.02rem;line-height:1.28}
  .carte-meta{flex-wrap:wrap;gap:2px 12px;margin-top:6px;font-size:.78rem;white-space:normal}
  .carte-meta .mi{flex:0 1 auto;min-width:0}  /* « London, United Kingdom » passe à la ligne au lieu d'être coupé sur 320 px */
  .carte-score{grid-column:3;grid-row:1;min-width:0}
  .carte .tag.facile.score-rond{width:40px;height:40px;font-size:.82rem}
  .carte-fin{grid-column:3;grid-row:2;grid-template-columns:auto;justify-items:center;align-content:start;gap:0;min-width:0}
  .carte .carte-actions .suivre{width:36px;height:36px}
  .carte-tuile,.carte-main{grid-row:1/3}

  .barre-liste{padding:6px 0}
  /* Deux lignes dans le bloc : les onglets et le tri ; puis la recherche, Filters, l'étoile. La recherche prend tout ce qui reste. */
  .barre-liste form{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 10px 8px 14px}
  .bl-gauche{order:1;flex:1 1 0;min-width:0;display:grid;gap:0}
  .bl-onglets{gap:16px}
  .bl-onglets button{white-space:nowrap;height:40px;font-size:.9rem}
  .bl-onglets button small{font-size:.72rem}
  .barre-liste #tri{order:2;font-size:.85rem;padding-right:16px}
  .bl-sp{display:block;order:3;flex:0 0 100%;height:0}
  .barre-liste.fixe .bl-gauche,.barre-liste.fixe #tri,.barre-liste.fixe .bl-sp{display:none}
  .bl-q{order:4;flex:1 1 0;min-width:0;width:auto;height:44px}
  .bl-q input[type="search"]{font-size:16px}
  #filtres-bouton{order:5;height:44px}
  #maliste{order:6;height:44px}
  .bl-panneau{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:86vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));z-index:80}
  .bl-grille{grid-template-columns:1fr}
  body.filtres-ouverts::after{content:"";position:fixed;inset:0;background:rgba(10,18,34,.42);z-index:60}
  .bl-pied .btn{flex:1}
}
@media (max-width:380px){
  .bl-mot{display:none}
}
@media (max-width:340px){
  .barre-liste #tri{font-size:0;width:34px;padding:0;background-position:calc(50% - 4px) 50%,calc(50% + 1px) 50%}
}
@media (min-width:761px) and (max-width:1000px){
  .bl-q{width:220px}
}
@media (prefers-reduced-motion:reduce){[data-page="offres"] .carte{animation:none}}

/* Planisphère de la page Internships (19/10/2026, Anthony après l'appel avec le master 224 : « on ne voit pas assez que c'est partout dans le monde »).
   Un SVG fabriqué à la construction (outils/planisphere.py), sans requête ni script : une trame de points pour les terres et un point bleu par endroit où
   une offre est ouverte (l'Afrique et le Moyen-Orient aussi ; la taille et la lumière du point suivent le nombre d'offres). Aucune ville nommée, seulement
   la légende, centrée. Tout se voit au repos. Seule l'onde autour des plus grandes places bouge, sur grand écran, et jamais si le système demande moins
   d'animations : figée, elle reste un anneau visible.
   Ordinateur : un panneau à droite du titre. Tablette : la carte à droite du titre. Téléphone : aucune carte. */
.planisphere{margin:0;pointer-events:none}
.pl-svg{display:block;width:100%;height:auto;overflow:visible}
.pl-grille{fill:none;stroke:#B9C4D6;stroke-opacity:.55;stroke-width:1;stroke-dasharray:2 5}
.pl-terre{fill:none;stroke:#7E92B8;stroke-width:3.1;stroke-linecap:round;stroke-dasharray:0 8}
.pl-large{display:none;stroke-width:5.2;stroke-dasharray:0 14}
.pl-ondes circle{fill:none;stroke:#1D4ED8;stroke-opacity:.55;stroke-width:1.5}
.pl-zones circle{fill:none;stroke:#1D4ED8;stroke-opacity:.5;stroke-width:1.6;stroke-dasharray:3 3}
.pl-b circle{fill:#1D4ED8;stroke:#fff;stroke-width:1.8}
.pl-legende{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.01em;color:var(--ink-3)}
.pl-legende b{color:var(--ink);font-weight:600}
@media (min-width:861px){
  .page-head.avec-carte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,3.4vw,52px);align-items:center}
  .avec-carte>:not(.planisphere){grid-column:1}
  .avec-carte .planisphere{grid-column:2;grid-row:1/span 3;position:relative;padding:10px 14px 42px;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
    background:radial-gradient(75% 95% at 50% 45%,#FFFFFF 0%,#F1F4FA 58%,#E9EEF7 100%);box-shadow:var(--shadow-2)}
  .avec-carte .pl-legende{position:absolute;left:14px;right:14px;bottom:14px;text-align:center}
  .avec-carte .pl-legende span+span::before{content:"\00b7";margin:0 .6em;color:var(--ink-4)}
}
/* Tablette : les deux étapes reviennent, la carte monte à droite du titre (elle ne dépasse pas du bandeau), la légende au-dessus. */
@media (min-width:601px) and (max-width:860px){
  .page-head.avec-carte{position:relative;isolation:isolate}
  .avec-carte .planisphere{position:absolute;z-index:-1;right:var(--gut);top:30px;width:min(46%,400px)}
  .avec-carte .pl-legende{position:absolute;left:0;top:-22px;font-size:.62rem}
  .pl-fine,.pl-grille{display:none}
  .pl-large{display:inline}
}
/* Téléphone (Anthony : « retire la carte sur le téléphone, c'était très bien avant ») : pas de carte, la page est celle d'avant, offres à la même hauteur. */
@media (max-width:600px){.avec-carte .planisphere{display:none}}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .pl-ondes circle{transform-box:fill-box;transform-origin:center;animation:pl-onde 3.8s ease-out infinite;animation-delay:var(--d,0s)}
}
@keyframes pl-onde{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}