/* Système visuel "v8" partagé entre les pages immersives du site (accueil, parcours…). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

.v8{--bg:#0B0F14;--grid:rgba(255,255,255,.03);--panel:#131A23;--txt:#E8EDF2;--muted:#97A3B0;--line:rgba(255,255,255,.1);--faint:rgba(255,255,255,.07);--axis:rgba(255,255,255,.24);--blue:#5B8FE8;--third:#E3B341;--coral:#E08767;--onblue:#0B0F14}
body.quarto-light .v8{--bg:#FFFFFF;--grid:rgba(0,0,0,.035);--panel:#F7F8FA;--txt:#14171A;--muted:#5B646E;--line:rgba(0,0,0,.12);--faint:rgba(0,0,0,.07);--axis:rgba(0,0,0,.28);--blue:#2F63C7;--third:#9A6700;--coral:#C4643F;--onblue:#FFFFFF}
.v8{position:relative;background:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:34px 34px;font-family:Inter,sans-serif;color:var(--txt);transition:background .25s,color .25s}
.v8 .hero{padding:40px 20px 4px;text-align:center}
.v8 .h1{max-width:none;font-size:44px;font-weight:600;letter-spacing:-.04em;margin:0 0 12px;line-height:1.05;text-align:center;color:var(--txt)}
.v8 .kw{max-width:none;font-size:17px;font-weight:500;color:var(--coral);margin:0 0 18px;text-align:center}
.v8 .ld{font-size:15.5px;line-height:1.75;color:var(--muted);margin:0 auto;max-width:85ch;text-align:justify;text-align-last:center}
.v8 .ld b{color:var(--txt);font-weight:600}
.v8 .segwrap{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.v8 .seg{display:inline-flex;gap:4px;border:1px solid var(--line);border-radius:12px;padding:5px}
.v8 .sgb{font-size:14.5px;font-family:inherit;color:var(--muted);background:transparent;border:0;border-radius:8px;padding:8px 16px;cursor:pointer;transition:color .18s,background .18s;white-space:nowrap}
.v8 .sgb:hover{color:var(--txt)}
.v8 .sgb[aria-pressed="true"]{color:var(--onblue);font-weight:600}
.v8 .hint{max-width:none;text-align:center;font-size:12.5px;color:var(--muted);margin:9px 0 0}
.v8 .halo{animation:v8pulse 2.6s ease-in-out infinite}
@keyframes v8pulse{0%,100%{opacity:.3}50%{opacity:.05}}
.v8 .det{text-align:center;min-height:32px;margin:2px auto 0;max-width:46ch}
.v8 .det strong{display:block;font-size:14px;font-weight:600}
.v8 .det span{font-size:12.5px;color:var(--muted);line-height:1.5}
.v8 .bub{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:14px 24px 4px;min-height:18px}
.v8 .bb{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:190px;border-radius:12px;padding:9px 13px;box-sizing:border-box;font-size:11.5px;line-height:1.3;border:1px solid;opacity:0;transform:scale(.85);animation:v8bpop .3s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes v8bpop{to{opacity:1;transform:scale(1)}}
.v8 .sec{padding:20px 20px 24px;text-align:center}
.v8 .h2{display:inline-block;font-size:25px;font-weight:600;letter-spacing:-.015em;margin:0 0 20px;color:var(--txt);border:1px solid var(--line);border-radius:14px;padding:10px 24px}
.v8 .togglewrap{display:flex;justify-content:center;gap:8px;margin:12px 0 0}
.v8 .tgb{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:138px;box-sizing:border-box;font-size:13.5px;font-family:inherit;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:20px;padding:7px 15px;cursor:pointer;transition:all .18s}
.v8 .tgb i{font-size:13px}
.v8 .tgb:hover{color:var(--txt);border-color:var(--axis)}
.v8 .tgb[aria-pressed="true"]{color:var(--onblue);background:var(--txt);border-color:var(--txt);font-weight:600}
.v8 .view{display:none}
.v8 .view.on{display:block}
.v8 .cds{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:11px;padding:0 20px 24px}
.v8 .cd{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column}
.v8 .cd svg{width:100%;height:auto;display:block;margin-top:12px}
.v8 .cd p{font-size:14.5px;font-weight:600;margin:0 0 4px}
.v8 .cd q{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;quotes:none;flex:1}
.v8 .btn{display:inline-flex;align-items:center;gap:7px;margin-top:12px;align-self:flex-end;font-size:12.5px;font-weight:500;color:var(--txt);background:transparent;border:1px solid var(--line);border-radius:20px;padding:6px 14px;cursor:pointer;font-family:inherit;transition:all .18s;text-decoration:none}
.v8 .btn:hover{background:var(--blue);border-color:var(--blue);color:var(--onblue)}
.v8 .btn i{font-style:normal;color:var(--third);transition:transform .18s}
.v8 .btn:hover i{transform:translateX(3px)}
.v8 .b{fill:var(--blue)} .v8 .c{fill:var(--coral)} .v8 .g{fill:var(--third)}
.v8 .gl{stroke:var(--faint)} .v8 .ax{stroke:var(--axis)} .v8 .tx{fill:var(--muted)} .v8 .tx2{fill:var(--txt)} .v8 .ln{stroke:var(--txt)}
@media (prefers-reduced-motion:reduce){.v8 .halo,.v8 .bb{animation:none;opacity:1;transform:none}}

.v8 .en-note{display:none;font-size:12px;color:var(--muted);text-align:center;margin:10px auto 0;padding:0 20px;max-width:60ch}
body[data-lang-ui="en"] .v8 .en-note{display:block}