/* Labo · Face à l'actualité. Styles limités à la section #fa (charbon), pour ne pas toucher au reste du site.
   Choix du 27 oct. 2026 : écran charbon (E1), réponses en onde (B3), flèches (C2), frise par facteur (F3), échelle sans note (S1), fondu flou (M1), forme géante ton sur ton. */
#fa{
  --charcoal:#2b2b2b; --cream:#f0ede7; --stone:#dfdbd2; --off:#fafaf8; --lime:#f4feaf;
  --soft:rgba(240,237,231,.16); --soft2:rgba(240,237,231,.28); --muted:#c9c4ba; --rule:rgba(240,237,231,.18);
  --serif:"Playfair Display","Bodoni 72",Georgia,serif; --sans:Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
#fa *{box-sizing:border-box}
#fa{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--charcoal);color:var(--cream);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
#fa .fa-wrap{max-width:620px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));padding-block:28px 40px;display:flex;flex-direction:column;gap:24px}
#fa .mo{font:400 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
#fa h1{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.022em;line-height:1.04;text-wrap:balance;color:var(--off);font-size:clamp(42px,9vw,64px)}
#fa h1 i{font-style:italic}
#fa p{margin:0}
#fa .l{color:var(--lime)}
#fa .btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:8px;font:400 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;background:var(--cream);color:var(--charcoal);transition:background .3s ease-in-out}
#fa .btn::after{content:">"}
#fa .btn:hover{background:var(--lime)}
#fa .btn.ghost{background:transparent;color:var(--muted);padding:0 4px;text-decoration:underline;text-underline-offset:5px;min-height:44px}
#fa .btn.ghost::after{content:""}
#fa .btn.ghost:hover{color:var(--cream)}
#fa button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
#fa .in{animation:flou .9s ease-in-out both}
@keyframes flou{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
#fa .out{animation:flou-out .35s ease-in forwards}
@keyframes flou-out{to{opacity:0;filter:blur(10px)}}
#fa .segs{display:grid;grid-template-columns:5fr 5fr 4fr 3fr;gap:8px}
#fa .segs div{display:flex;flex-direction:column;gap:6px;min-width:0}
#fa .segs i{font-style:normal;font:400 10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fa .segs i.cur{color:var(--cream)}
#fa .segs b{display:flex;gap:3px;height:5px}
#fa .segs b span{flex:1;border-radius:3px;background:var(--soft)}
#fa .segs b span.on{background:var(--cream)}
#fa .segs b span.now{background:var(--lime)}
#fa .q{flex:1;display:flex;flex-direction:column;gap:22px}
#fa .q .mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px}
#fa .phr{font:600 clamp(26px,6vw,34px)/1.28 var(--sans);letter-spacing:-.012em;text-wrap:pretty;color:var(--off)}
#fa .low{display:flex;flex-direction:column;gap:14px}
#fa .wave{display:flex;align-items:flex-end;gap:8px;height:120px}
#fa .wave button{flex:1;border:0;padding:0;border-radius:12px;background:var(--soft);cursor:pointer;position:relative;transition:background .25s}
#fa .wave button:hover{background:var(--soft2)}
#fa .wave button.on{background:var(--lime)}
#fa .wave button span{position:absolute;left:0;right:0;bottom:-24px;font:400 12px/1 var(--mono);color:var(--muted)}
#fa .ends{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);margin-top:22px}
#fa .arrows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#fa .arrows button{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--cream)}
#fa .arrows .o{width:min(100%,104px);aspect-ratio:1;border-radius:50%;background:var(--soft);display:grid;place-items:center;font:400 34px/1 var(--sans);transition:background .25s}
#fa .arrows button:hover .o{background:var(--soft2)}
#fa .arrows button.on .o{background:var(--cream);color:var(--charcoal);box-shadow:0 0 0 3px var(--lime)}
#fa .arrows small{font:400 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
#fa .cmpl{font:400 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
#fa .nav{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
#fa .res{display:flex;flex-direction:column;gap:30px}
#fa .scale{display:flex;flex-direction:column;gap:10px}
#fa .bars{display:flex;align-items:flex-end;gap:8px;height:96px}
#fa .bars span{flex:1;border-radius:12px;background:var(--soft)}
#fa .bars span.on{background:var(--lime)}
#fa .bars span.me{background:var(--lime);box-shadow:0 0 0 3px var(--charcoal),0 0 0 5px var(--lime)}
#fa .gl{display:flex;justify-content:space-between;font:400 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
#fa .lecture{font:600 clamp(22px,5vw,27px)/1.35 var(--sans);letter-spacing:-.01em;color:var(--off);text-wrap:pretty}
#fa .lecture + p{font:500 18px/1.55 var(--sans);color:var(--stone)}
#fa .pistes{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
#fa .piste{display:flex;flex-direction:column;gap:8px;padding-block:22px;border-bottom:1px solid var(--rule)}
#fa .piste .mo{color:var(--lime)}
#fa .piste p{font:500 18px/1.6 var(--sans)}
#fa .piste ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
#fa .piste li{position:relative;padding-left:22px;font:500 16px/1.5 var(--sans);color:var(--stone)}
#fa .piste li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--lime)}
#fa .fin{display:flex;flex-direction:column;gap:10px}
#fa .fin p{font:400 clamp(24px,5.5vw,30px)/1.3 var(--serif);letter-spacing:-.01em;color:var(--off);text-wrap:pretty}
#fa .fin p i{font-style:italic}
#fa .fond{position:absolute;right:-190px;bottom:-170px;z-index:0;pointer-events:none;line-height:0;animation:tourne 120s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
#fa .fa-wrap{position:relative;z-index:1}
#fa .fin p.sig{font:italic 400 26px/1 var(--serif);color:var(--lime)}
#fa .fin p.sig::before{content:"— "}
#fa .help{background:var(--cream);color:var(--charcoal);border-radius:14px;padding:16px 18px;font:500 16px/1.5 var(--sans)}
#fa .ok{color:var(--muted);font-size:14px}
#fa .test{align-self:flex-start;font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:none;border:1px dashed var(--soft2);border-radius:8px;padding:10px 12px;cursor:pointer}
#fa .ov{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px max(16px,env(safe-area-inset-left,0px));background:rgba(43,43,43,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#fa .ov img{max-width:min(100%,420px);max-height:72vh;border-radius:14px;border:1px solid rgba(250,250,248,.38)}
#fa .ov p{font-size:14px;color:var(--stone);text-align:center;max-width:36ch}
@media (prefers-reduced-motion:reduce){#fa *{animation:none!important;transition:none!important}}
#fa .logo{color:var(--cream)}
#fa .fa-wrap{flex:1;width:100%}
#fa.en-cours .topbar{display:none}
#fa .tete{display:flex;align-items:center;gap:14px}
#fa .tete .segs{flex:1}
#fa .quit{flex:none;width:44px;height:44px;border:0;border-radius:999px;background:var(--soft);color:var(--cream);font:400 24px/1 var(--sans);cursor:pointer}
#fa .quit:hover{background:var(--soft2)}
#fa.en-cours .fa-wrap{min-height:100vh;min-height:100dvh;padding-block:max(18px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-bottom,0px))}
#fa.en-cours .fa-wrap>.in{min-height:calc(100dvh - 36px)}
#fa .phr{user-select:none;-webkit-user-select:none}
@media (max-width:520px){#fa .wave{height:150px}#fa .phr{font-size:28px}}