/* Direction « Atelier » : la peau de l'application portée au web.
   Valeurs reprises telles quelles de lib/ui/theme.dart. */
:root{--bg:#0A0C10;--card:#14181F;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.14);
--accent:#22D3EE;--on-accent:#04202A;--amber:#F5A524;--red:#FF5A52;--green:#34D399;
--text:#EDF1F5;--body:#DCE3EA;--subtle:#B9C2CE;--muted:#8B95A3;
--sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
font-size:16px;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{color:#67E3F5}
.mono{font-family:var(--mono);font-weight:600;letter-spacing:1.5px;font-size:11px;
text-transform:uppercase;color:var(--muted)}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* barre */
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
gap:16px;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;
font-size:19px;letter-spacing:-.02em}
.brand img{width:26px;height:26px}
.top nav{display:flex;align-items:center;gap:22px}
.top nav a{font-size:14px;color:var(--body)}
.top .get{padding:9px 18px;border:1px solid var(--line2);border-radius:12px;
color:var(--text);font-weight:500}

/* héros */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
padding:72px 0 60px}
.hero h1{margin:0;font-size:clamp(34px,4.6vw,60px);line-height:1.04;
letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lead{margin:22px 0 0;font-size:19px;line-height:1.6;color:var(--subtle);max-width:34ch}
.hero .note{margin:18px 0 0;font-size:13px;color:var(--muted)}
.cta{display:flex;gap:12px;margin:32px 0 0;flex-wrap:wrap}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:700;
font-size:16px;padding:16px 28px;border-radius:18px}
.btn:hover{background:#67E3F5;color:var(--on-accent)}
.btn.ghost{background:none;border:1px solid var(--line2);color:var(--text);font-weight:500}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* radar — mêmes valeurs que _RadarState : trois anneaux de 0,55 à 1,7 en
   2800 ms, décalés d'un tiers de cycle, dont l'opacité décroît avec le rayon */
.radar{position:relative;height:400px;display:flex;align-items:center;justify-content:center}
.radar i{position:absolute;width:190px;height:190px;border-radius:50%;
border:1px solid var(--accent);opacity:0;animation:ping 2800ms linear infinite}
.radar i:nth-child(2){animation-delay:-933ms}
.radar i:nth-child(3){animation-delay:-1866ms}
@keyframes ping{
  from{transform:scale(.55);opacity:.5}
  to{transform:scale(1.7);opacity:0}
}
.badge{position:relative;width:144px;height:144px;border-radius:50%;background:var(--card);
border:1px solid rgba(34,211,238,.35);display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:8px;box-shadow:0 0 70px rgba(34,211,238,.13)}
.badge img,.badge svg{width:64px;height:64px}
/* l'éclair respire, comme AppLogo : 900 ms aller-retour */
.bolt{animation:bolt 900ms ease-in-out infinite alternate;transform-origin:center}
@keyframes bolt{
  from{opacity:.55;filter:drop-shadow(0 0 3px rgba(34,211,238,.25))}
  to{opacity:1;filter:drop-shadow(0 0 14px rgba(34,211,238,.55))}
}
/* Mouvement réduit demandé : on laisse le radar au repos plutôt que de
   l'imposer — c'est un décor, pas une information. */
@media(prefers-reduced-motion:reduce){
  .radar i,.bolt{animation:none}
  .radar i:nth-child(1){opacity:.10;transform:scale(1.7)}
  .radar i:nth-child(2){opacity:.18;transform:scale(1.25)}
  .radar i:nth-child(3){opacity:.28;transform:scale(.85)}
  .bolt{opacity:1}
}

/* cartes */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:16px;
padding-bottom:68px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.card h3{margin:14px 0 6px;font-size:16px;font-weight:700}
.card p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* section codes */
.band{border-top:1px solid var(--line);padding:62px 0 74px}
.band h2{margin:0 0 10px;font-size:clamp(24px,3vw,34px);letter-spacing:-.025em;font-weight:700}
.band p{margin:0 0 24px;font-size:17px;color:var(--subtle);max-width:58ch}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:13px 17px;display:flex;gap:12px;align-items:baseline}
.chip:hover{border-color:rgba(34,211,238,.4)}
.chip b{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--accent);
letter-spacing:.5px}
.chip span{font-size:14px;color:var(--body)}
.chip.all{border-color:rgba(34,211,238,.35);color:var(--accent);font-weight:600;font-size:14px}

/* page de code */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;
align-items:start;padding:34px 0 68px}
.crumb{margin:0 0 20px;font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.codehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.codehead h1{margin:0;font-family:var(--mono);font-weight:600;font-size:clamp(32px,5vw,46px);
letter-spacing:2px}
.pill{font-family:var(--mono);font-size:10px;border-radius:999px;padding:5px 12px}
.pill.hi{color:var(--red);border:1px solid rgba(255,90,82,.4)}
.pill.mid{color:var(--amber);border:1px solid rgba(245,165,36,.4)}
.title2{margin:12px 0 0;font-size:clamp(19px,2.6vw,24px);line-height:1.35;color:var(--body);
letter-spacing:-.015em}
article h2{margin:38px 0 10px;font-size:19px;font-weight:700}
article p{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--subtle)}
.decode{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap;padding:0;list-style:none}
.decode li{background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:11px 17px;text-align:center;min-width:74px}
.decode b{display:block;font-family:var(--mono);font-size:22px;letter-spacing:1px;
font-weight:600;color:var(--text)}
.decode span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:1.2px;
text-transform:uppercase;color:var(--muted);margin-top:4px}
.decode li.a{border-color:rgba(34,211,238,.35)} .decode li.a b{color:var(--accent)}
.decode li.b{border-color:rgba(245,165,36,.35)} .decode li.b b{color:var(--amber)}
.warn{border-left:2px solid var(--amber);padding:2px 0 2px 16px;margin:0 0 14px}
.warn p{margin:0;font-size:15px;line-height:1.65;color:var(--muted)}
ul.near{list-style:none;padding:0;margin:0}
ul.near li{border-bottom:1px solid var(--line)}
ul.near a{display:flex;gap:16px;padding:11px 0;font-size:15px;color:var(--subtle)}
ul.near a b{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--accent);
min-width:58px}

/* colonne latérale */
.aside{position:sticky;top:22px;display:flex;flex-direction:column;gap:16px}
.facts{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;margin:14px 0 0;
font-size:14px}
.facts dt{color:var(--muted)} .facts dd{margin:0;color:var(--body)}
.facts dd.hi{color:var(--red);font-weight:600} .facts dd.mid{color:var(--amber);font-weight:600}
.getapp{background:var(--card);border:1px solid rgba(34,211,238,.4);border-radius:18px;padding:20px}
.getapp .row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.getapp img{width:30px;height:30px}
.getapp strong{font-size:16px}
.getapp p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--subtle)}
.getapp .btn{display:block;text-align:center;padding:14px;font-size:15px}

/* index des codes */
.fam{border-top:1px solid var(--line);padding:34px 0 8px}
.fam h2{margin:0 0 6px;font-size:21px;font-weight:700;letter-spacing:-.015em}
.fam p{margin:0 0 18px;font-size:15px;color:var(--muted);max-width:66ch}
ul.codes{list-style:none;padding:0;margin:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:2px 20px}
ul.codes li{border-bottom:1px solid var(--line)}
ul.codes a{display:flex;gap:12px;padding:9px 0;font-size:14px;color:var(--subtle)}
ul.codes a b{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--accent);
min-width:54px}

footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding-top:24px;padding-bottom:36px}
footer a{color:var(--muted)} footer a:hover{color:var(--accent)}
.langs{display:flex;gap:14px}

@media(max-width:900px){.hero{grid-template-columns:1fr;gap:28px;padding:48px 0 44px}
.radar{height:300px;order:-1}.radar i:nth-child(1){width:280px;height:280px}
.radar i:nth-child(2){width:216px;height:216px}.radar i:nth-child(3){width:152px;height:152px}
.badge{width:120px;height:120px}.badge img{width:54px;height:54px}
.sheet{grid-template-columns:1fr;gap:28px}.aside{position:static}
.top nav a:not(.get){display:none}}