/* Citizen AI · habillage « esprit Apple » des labos : typographie système, fond blanc, tuiles #f5f5f7,
   titres centrés, boutons en pilule et un seul bleu d'action. Les scènes 3D et les simulateurs restent intacts. */
:root{
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ca-ink:#1d1d1f; --ca-ink3:#6e6e73; --ca-tile:#f5f5f7; --ca-blue:#0071e3; --ca-green:#1f9d55;
}
html,body{background:#fff!important}
body{color:var(--ca-ink)!important;letter-spacing:-.018em;line-height:1.47}
h1,h2,h3{letter-spacing:-.035em}

/* barre du site */
.ca-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(251,251,253,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);font-family:var(--body)}
.ca-bar .ca-in{max-width:1080px;margin:0 auto;min-height:48px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ca-brand{font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--ca-ink)!important;text-decoration:none;margin-right:auto}
.ca-brand span{color:#8e44d8}
.ca-nav{display:flex;flex-wrap:wrap;gap:2px}
.ca-nav a{font-size:13px;color:var(--ca-ink)!important;opacity:.8;text-decoration:none;padding:6px 10px}
.ca-nav a:hover{opacity:1}
.ca-nav a[aria-current="page"]{opacity:1;font-weight:600}
@media (max-width:640px){.ca-nav{width:100%;overflow-x:auto;flex-wrap:nowrap}.ca-nav a{white-space:nowrap}}

/* en-tête du labo */
.hero{--hc:var(--ca-tile)!important;--hon:var(--ca-ink)!important;--hbtn:var(--ca-blue)!important;--hbtn-on:#fff!important;padding-top:20px}
.hero[data-dark]{--hc:#000!important;--hon:#f5f5f7!important}
.hero .hero-grid{border-radius:30px!important;max-width:1080px!important}
.hero h1{font-weight:700!important;letter-spacing:-.045em!important}
.hero-meta{font-weight:500!important;opacity:.7}
.hero-go a{border-radius:980px!important;font-weight:400!important;font-size:17px!important;padding:11px 22px!important}
.home-link{display:none!important}
.hero .hero-grid .live,.hero .hero-grid .hero-code,.live{border-radius:20px!important;border:0!important;box-shadow:none!important}

/* barre d'étapes */
.chapnav{top:calc(56px + env(safe-area-inset-top,0px))!important;border:0!important;border-radius:99px!important;background:rgba(255,255,255,.85)!important;box-shadow:0 2px 14px rgba(0,0,0,.07)!important}
.chapnav a,.chapnav.fg-planche a{border:0!important;background:transparent!important;border-radius:99px!important;font-weight:500!important;color:var(--ca-ink)!important}
.chapnav a:hover{background:var(--ca-tile)!important}
.chapnav b,.chapnav.fg-planche a b{border-radius:50%!important;background:var(--ca-tile)!important;color:var(--ca-ink3)!important;font-weight:600!important}
.chapnav.fg-planche a.got b{background:var(--ca-green)!important;color:#fff!important}
.chapnav.fg-planche.full{background:rgba(255,255,255,.9)!important}

/* têtes d'étape : centrées, sans bandeau coloré */
.chap{padding-top:clamp(70px,9vw,110px)!important}
.chap-head{justify-items:center;text-align:center}
.chap-band{flex-direction:column!important;align-items:center!important;text-align:center;background:transparent!important;padding:0!important;gap:8px!important}
.chap-band .chap-num,.chap-num{width:auto!important;aspect-ratio:auto!important;background:transparent!important;color:var(--ct,var(--c))!important;-webkit-text-stroke:0!important;border-radius:0!important;font:600 17px var(--display)!important;letter-spacing:-.01em}
.chap-band .chap-num::before,.chap-num::before{content:"Étape "}
.chap-band h2,.chap-head h2{font-size:clamp(32px,4.6vw,52px)!important;font-weight:700!important;letter-spacing:-.04em!important;line-height:1.06!important}
.chap-band .sub{color:var(--ca-ink3)!important;font-size:clamp(18px,1.8vw,21px)!important}
.chap-head .intro{color:var(--ca-ink3)!important;max-width:38em!important;margin-inline:auto!important;font-size:clamp(17px,1.7vw,20px)!important;padding-inline:0!important}
.band-stk{margin:10px auto 0!important;width:auto!important;display:inline-flex!important;flex-direction:row;gap:8px!important;padding:5px 12px 5px 5px!important;border:0!important;border-radius:99px!important;background:var(--ca-tile)!important;color:var(--ca-ink3)!important;font-weight:500!important}
.band-stk .bs-ico{width:24px!important;height:24px!important;border-radius:50%!important;font-size:12px!important}
.band-stk.got{background:var(--ca-green)!important;color:#fff!important}

/* panneaux d'activité */
.lab{background:var(--ca-tile)!important;border:0!important;box-shadow:none!important;border-radius:30px!important;padding:clamp(18px,3vw,36px)!important}
.lab::before{display:none!important}
.lab-label{font-family:var(--body)!important;font-weight:600!important;font-size:14px!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ca-ink3)!important}
.notes{border-top:0!important;padding-top:6px!important;gap:22px 28px!important}
.note{border-left:0!important;padding-left:0!important;color:var(--ca-ink3)!important;font-size:16px!important}
.note::before{display:none!important}
.note b{color:var(--ca-ink)!important}

/* boutons */
.btn{border-radius:980px!important;border:0!important;background:#e8e8ed!important;color:var(--ca-ink)!important;font-family:var(--body)!important;font-weight:400!important;box-shadow:none!important}
.btn:hover{background:#dcdce1!important}
.btn.primary,.btn[aria-pressed="true"]{background:var(--ca-blue)!important;color:#fff!important;filter:none!important}
.btn.primary:hover{background:#0077ed!important}

/* planche finale et toast */
.fg-card{border:0!important;background:var(--ca-tile)!important;border-radius:20px!important}
.fg-card.got{background:#e7f6ec!important}
.fg-card .fg-tile{border-radius:50%!important;background:#fff!important}
.fg-card.got .fg-tile{background:var(--ca-green)!important;color:#fff!important}
.fg-recap,.fg-recap-head{text-align:center;justify-content:center!important}
.fg-recap h2{font-weight:700!important;letter-spacing:-.04em!important}
.fg-toast{border-radius:99px!important}

/* pied de page */
footer{background:var(--ca-tile)!important;color:var(--ca-ink3)!important;box-shadow:0 0 0 100vmax var(--ca-tile)!important;font-size:12px!important;border-top:1px solid rgba(0,0,0,.06)!important}
footer strong{color:var(--ca-ink)!important;font-size:13px!important;font-weight:600!important}
footer a{color:#0066cc!important}

/* ===== Intérieur des labos : même grammaire que le reste du site ===== */
/* filets à peine visibles, panneaux blancs posés sur les tuiles grises */
:root{--soft:#f5f5f7;--line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.12);--rule:rgba(0,0,0,.08);--rule-2:rgba(0,0,0,.12);--shadow:none;--lift:none;--lift-2:0 4px 20px rgba(0,0,0,.08)}
.lab{--soft:#fff;--pink-s:#fff;--amber-s:#fff;--mint-s:#fff;--blue-s:#fff;--violet-s:#fff;--lime-s:#fff;--bg2:#fff;--panel2:#fff;--paper-2:#fff;
  --k1s:#fff;--k2s:#fff;--k3s:#fff;--k4s:#fff;--k5s:#fff;--k6s:#fff;--k7s:#fff}

/* petits libellés : police système, sans capitales espacées */
.eyebrow,.stage-tag,.live-meta,.gen-meta,.temp-scale,.lab-sub,.fine{font-family:var(--body)!important;letter-spacing:-.005em!important;text-transform:none!important}
.temp-scale{font-size:13px!important;color:var(--ca-ink3)!important}
.stage-hint{font-family:var(--body)!important;font-size:12px!important;border-radius:99px!important}

/* curseurs, cases et interrupteurs : le bleu d'action */
input[type=range],input[type=checkbox],input[type=radio],.switch input,#temp{accent-color:var(--ca-blue)!important}
input[type=range]{height:22px}
.temp-top b{font-weight:600!important;color:var(--ca-ink)!important}

/* champs de saisie */
input[type=text],input:not([type]),textarea,select,#tokInput{border:0!important;background:#fff!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)!important;font-family:var(--body)!important}
input[type=text]:focus,input:not([type]):focus,textarea:focus,#tokInput:focus{box-shadow:0 0 0 4px rgba(0,113,227,.25),inset 0 0 0 1px var(--ca-blue)!important;outline:none!important}

/* puces de suggestion */
.chip-preset{border:0!important;background:#fff!important;border-radius:99px!important;color:var(--ca-ink)!important;padding:7px 14px!important}
.chip-preset:hover{background:#e8e8ed!important}

/* tokens : pastilles sobres, une sur deux légèrement grisée pour voir les coupures */
.tok-out{background:#fff!important;border:0!important;border-radius:18px!important;gap:6px!important}
.tk{background:#f5f5f7!important;border:0!important;box-shadow:none!important;border-radius:10px!important;color:var(--ca-ink)!important}
.tk:nth-child(even){background:#e8e8ed!important}
.tk .t{color:var(--ca-ink)!important}
.tk .id{font-family:var(--body)!important;font-size:11px!important;color:var(--ca-ink3)!important;opacity:1!important;font-variant-numeric:tabular-nums}
.tk .sp{color:#aeaeb2!important}

/* chiffres clés */
.stat{background:#fff!important;border:0!important;border-radius:18px!important;padding:14px 18px!important}
.stat b{font-weight:600!important;letter-spacing:-.03em}
.stat span{color:var(--ca-ink3)!important}

/* blocs de contenu teintés -> cartes neutres */
.keep div,.legend-l div,.analogy div,.rcard,.clue,.reveal,.gen-text,.vec,.callout,.info,.answer,.verdict{border:0!important;box-shadow:none!important;border-radius:20px!important}
.keep div,.legend-l div{background:var(--ca-tile)!important;padding:24px!important}
.keep h3,.legend-l h3{color:var(--ca-ink)!important;font-weight:600!important}
.keep h3::before,.legend-l h3::before{display:none!important}
.keep p,.legend-l p{color:var(--ca-ink3)!important}
.lab .keep div,.lab .legend-l div,.reveal,.gen-text,.vec{background:#fff!important}
.gen-text{border-left:0!important}
.reveal{color:var(--ca-ink)!important}

/* barres de probabilité et mots de l'attention */
.brow{border-radius:12px!important;box-shadow:none!important}
.brow.hot,.brow.win{background:#fff!important;box-shadow:inset 0 0 0 2px var(--ca-blue)!important}
.brow .fill{background:var(--ca-blue)!important}
.brow .lbl,.brow .pct{font-family:var(--body)!important}
.aw{border:0!important;border-radius:12px!important}
.legend button{border-radius:99px!important}

/* pointillés : on passe en traits fins pleins */
.chapnav.fg-planche a,.fg-card,.band-stk,.mosaic .empty,.crow.out,.ctx-sep,.flow .hintline,.hits .none,.log li.empty,.slot,.palette button{border-style:solid!important;border-color:rgba(0,0,0,.1)!important}
.chapnav.fg-planche a,.band-stk,.fg-card{border-color:transparent!important}

/* scènes 3D : fond noir façon keynote */
.stage,.emb-stage{border-radius:24px!important;box-shadow:none!important}

/* boutons-tuiles (choix, onglets internes) */
.ask,.g-opt,.tool,.vchip,.tgrid button,.palette button{border-radius:14px!important;box-shadow:none!important}
.ask[aria-pressed="true"],.g-opt[aria-pressed="true"]{background:var(--ca-blue)!important;border-color:var(--ca-blue)!important;color:#fff!important}

/* « Étape 01 » sur une seule ligne */
.chap-band .chap-num,.chap-num{display:block!important}

/* encadrés et gros boutons */
.callout{border:0!important;background:#fff!important;border-radius:20px!important}
.callout h3{color:var(--ca-ink)!important}
.bigbtn{border:0!important;background:#fff!important;border-radius:980px!important;font-weight:500!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)!important}
.bigbtn:hover{background:#e8e8ed!important}
.vchip{border:0!important;background:#fff!important;font-family:var(--body)!important}
.legend button[aria-pressed="true"]{background:#fff!important;border-color:transparent!important;box-shadow:inset 0 0 0 1.5px var(--ca-ink)!important}
.caret{background:var(--ca-blue)!important}
a{color:#0066cc}

/* infographies : traits fins au lieu des gros contours noirs */
.ig{border:0!important;background:var(--ca-tile)!important;border-radius:28px!important}
.ig rect[stroke="#424245"],.ig circle[stroke="#424245"],.ig ellipse[stroke="#424245"]{stroke:rgba(0,0,0,.14)!important;stroke-width:1px!important}
.ig rect[fill="#ffffff"]{fill:#fff}
.ig-replay{border:0!important;font-family:var(--body)!important;font-weight:500!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* planche finale : titre centré au-dessus */
.fg-recap-head{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:8px!important}
.fg-recap-sub{text-align:center!important;max-width:36em;margin-inline:auto!important;color:var(--ca-ink3)!important}

/* sous-navigation de la boîte noire */
.bn-sub{background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.bn-in{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px max(16px,env(safe-area-inset-left,0px))}
.bn-home{font-size:14px;color:#0066cc!important;text-decoration:none;white-space:nowrap}
.bn-seg{display:flex;gap:4px;background:#f5f5f7;border-radius:99px;padding:4px;margin:0 auto}
.bn-seg a{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:7px 16px;font-size:14px;font-weight:500;color:#1d1d1f!important;text-decoration:none;white-space:nowrap}
.bn-seg a>i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:12px;font-weight:600;color:#6e6e73}
.bn-seg a:hover{background:#ebebef}
.bn-seg a[aria-current="page"]{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.bn-seg a[aria-current="page"]>i{background:#0071e3;color:#fff}
.bn-pg{font-size:12px;color:#1f9d55}
.bn-next{max-width:1080px;margin:70px auto 40px;padding:0 16px}
.bn-next a{display:grid;gap:4px;background:#000;color:#f5f5f7!important;border-radius:28px;padding:34px 36px;text-decoration:none;transition:transform .25s}
.bn-next a:hover{transform:translateY(-3px)}
.bn-next span{font-size:14px;color:#ffd23f;font-weight:600}
.bn-next b{font:700 clamp(28px,3.4vw,40px)/1.1 var(--display);letter-spacing:-.035em}
.bn-next small{font-size:17px;color:#a1a1a6}
@media (max-width:700px){.bn-seg{width:100%;overflow-x:auto}.bn-seg a{padding:7px 10px}}

/* niveau de difficulté : barres façon réseau */
.lvl{display:inline-flex;align-items:center;gap:8px;margin-left:12px;font:600 13px var(--body);color:#1d1d1f;background:#fff;border-radius:99px;padding:5px 12px 5px 10px;opacity:1!important;letter-spacing:0;text-transform:none}
.lvl .bars,.lv-mini{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.lvl .bars i,.lv-mini i{width:4px;border-radius:2px;background:#d2d2d7}
.lvl .bars i:nth-child(1),.lv-mini i:nth-child(1){height:5px}.lvl .bars i:nth-child(2),.lv-mini i:nth-child(2){height:9px}.lvl .bars i:nth-child(3),.lv-mini i:nth-child(3){height:13px}
.lvl[data-l="1"] .bars i:nth-child(-n+1),.lv-mini[data-l="1"] i:nth-child(-n+1){background:#1f9d55}
.lvl[data-l="2"] .bars i:nth-child(-n+2),.lv-mini[data-l="2"] i:nth-child(-n+2){background:#ff9500}
.lvl[data-l="3"] .bars i:nth-child(-n+3),.lv-mini[data-l="3"] i:nth-child(-n+3){background:#e0464f}
.bn-seg .lv-mini{margin-left:2px}

/* QG des Agents : infographies en bandeau (animation à gauche, légende à droite) */
@media (min-width:761px){
  .ig{display:grid!important;grid-template-columns:minmax(0,520px) minmax(0,1fr);align-items:center;gap:8px 32px;width:100%;max-width:1080px;margin:18px auto 0!important;padding:14px 32px 14px 18px!important;border-radius:28px!important;text-align:left}
  .ig>svg{max-height:220px!important;width:100%}
  .ig figcaption{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;font-size:18px!important;line-height:1.4;color:#424245!important;padding:0!important}
}

.bn-sec{margin:0 auto;font:600 14px var(--body);color:#0071e3}

.qg-vid{border-radius:24px;overflow:hidden;aspect-ratio:1/1;background:#ff3d57;align-self:center;width:100%;max-width:560px;justify-self:center}
.qg-vid video{width:100%;height:100%;object-fit:cover;display:block}

.strip{margin:22px auto 16px;max-width:1080px;aspect-ratio:4/1;max-height:200px;border-radius:22px;overflow:hidden;background:#e8e8ed}
.strip img{width:100%;height:100%;object-fit:cover;display:block}

.qg-ico{display:block;width:120px;height:120px;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 10px 30px -12px rgba(0,0,0,.25);margin:0 auto 6px}
.qg-ico img{width:100%;height:100%;object-fit:cover;display:block}