/* JPG · feuille de style unique, partagée par toutes les pages.
   Identité propre au produit : typographie technique, aplats, aucun décor.
   Rien à voir avec la charte MAT-IA, qui n'est ici que l'éditeur en pied de page. */

:root{
  --bg:#FFFFFF;
  --surface:#F4F5F7;
  --surface-2:#ECEFF3;
  --ink:#0E1116;
  --ink-soft:#4C535C;
  --ink-mute:#89909A;
  --line:#E1E5EA;
  --lime:#C8F135;
  --lime-deep:#A8CE1F;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --safe:clamp(18px,4vw,44px);
  --maxw:1080px;
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--lime);color:var(--ink)}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--safe)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- en-tete : barre pleine largeur, filet bas ---------- */
header.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:60px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo .mark{width:26px;height:26px;flex:none}
.logo .name{font-weight:700;font-size:19px;letter-spacing:-.06em}
.top nav{margin-left:auto;display:flex;gap:2px;font-family:var(--mono);font-size:12px}
.top nav a{text-decoration:none;color:var(--ink-soft);padding:7px 11px;border-radius:7px}
.top nav a:hover{background:var(--surface);color:var(--ink)}
.top nav a[aria-current]{color:var(--ink);background:var(--surface)}
@media(max-width:760px){.top nav{display:none}}

/* ---------- titres ---------- */
h1{font-size:clamp(31px,5.4vw,54px);line-height:1.04;letter-spacing:-.045em;font-weight:700;max-width:20ch}
h2{font-size:clamp(22px,3vw,32px);line-height:1.12;letter-spacing:-.035em;font-weight:700;max-width:24ch}
h3{font-size:17px;letter-spacing:-.02em;font-weight:700}
.lede{margin-top:16px;max-width:56ch;font-size:clamp(15.5px,1.5vw,17.5px);color:var(--ink-soft)}

/* ---------- accroche ---------- */
.hero{padding:clamp(40px,6vw,72px) 0 clamp(22px,3vw,32px)}
.tags{margin-top:22px;display:flex;gap:7px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px}
.tags span{border:1px solid var(--line);border-radius:6px;padding:5px 10px;color:var(--ink-soft)}
.tags span::before{content:"›";color:var(--lime-deep);margin-right:6px;font-weight:700}

/* ---------- atelier ---------- */
/* Le conteneur porte la respiration sous l'outil : sans elle, la section
   suivante démarre au ras du bloc et le fait paraître coupé. La marge est
   ici plutôt que sur .studio pour valoir aussi quand les résultats sont là. */
/* La hauteur est réservée avant que le script n'injecte l'atelier. Sans cela,
   sur une connexion lente, la page se peint sans lui puis se décale de plus de
   300 px à son arrivée : le CLS mesuré passait à 0,251. Les paliers suivent les
   hauteurs réellement mesurées, l'écart résiduel étant de quelques dizaines de
   pixels au pire. */
#studio{display:block;min-height:300px;margin-bottom:clamp(44px,6vw,76px)}
@media(max-width:389px){#studio{min-height:376px}}
@media(min-width:390px) and (max-width:429px){#studio{min-height:335px}}
.studio{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.drop{padding:clamp(30px,5vw,50px) 24px;text-align:center;cursor:pointer;transition:background .15s,box-shadow .15s;
  border-bottom:1px solid var(--line);background:var(--bg);margin:10px;border-radius:9px;
  border:2px dashed var(--line)}
.drop:hover,.drop.over{background:#fff;border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--lime)}
.drop svg{margin:0 auto 14px}
.drop b{display:block;font-size:17px;letter-spacing:-.02em}
.drop small{display:block;margin-top:6px;color:var(--ink-mute);font-size:13.5px}
.drop .types{margin-top:13px;font-family:var(--mono);font-size:10.5px;color:var(--ink-mute);letter-spacing:.06em}

.knobs{display:flex;gap:8px;flex-wrap:wrap;padding:4px 10px 12px}
.knob{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;font-family:var(--mono);font-size:11.5px;color:var(--ink-mute)}
.knob select{font-family:var(--mono);font-size:11.5px;border:0;background:transparent;color:var(--ink);
  font-weight:700;cursor:pointer;padding:0}
.knob input[type=range]{width:88px;accent-color:var(--ink)}
.knob output{font-weight:700;color:var(--ink);min-width:20px;text-align:right}

/* ---------- resultats ---------- */
.out{margin-top:16px;display:none}
.out.on{display:block}
.score{background:var(--lime);border-radius:var(--r);padding:18px 22px;display:flex;align-items:baseline;
  gap:16px;flex-wrap:wrap;margin-bottom:14px}
.score .big{font-family:var(--mono);font-weight:700;font-size:clamp(26px,4.6vw,40px);letter-spacing:-.04em;line-height:1}
.score .det{font-family:var(--mono);font-size:12.5px;color:#3B4410}

.cmp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;
  margin:0 auto 14px;display:none;background:var(--surface-2)}
.cmp.on{display:block}
.cmp .pane{position:relative;width:100%;aspect-ratio:16/10}
.cmp .pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cmp .aft{clip-path:inset(0 0 0 50%)}
.cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.cmp .rail{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--ink);z-index:2;pointer-events:none}
.cmp .rail::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;
  border-radius:50%;background:var(--lime);border:2px solid var(--ink)}
.cmp .lbl{position:absolute;bottom:10px;font-family:var(--mono);font-size:10.5px;background:var(--ink);color:#fff;
  padding:4px 9px;border-radius:5px;z-index:2;pointer-events:none}
.cmp .lbl.a{left:10px}.cmp .lbl.b{right:10px}

.row{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:10px;
  display:flex;gap:13px;align-items:center;margin-bottom:8px}
.row img{width:56px;height:56px;object-fit:cover;border-radius:6px;background:var(--surface-2);flex:none}
.row .m{flex:1;min-width:0}
.row .nm{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .sz{font-family:var(--mono);font-size:11.5px;color:var(--ink-mute);margin-top:3px}
.row .sz b{color:var(--ink);font-weight:700;background:var(--lime);padding:1px 5px;border-radius:4px}
.row .get{flex:none;font-family:var(--mono);font-size:11px;text-decoration:none;background:var(--ink);color:#fff;
  padding:9px 13px;border-radius:7px;white-space:nowrap}
.row .get:hover{background:#000}
.row.wait .sz{opacity:.5}

/* ---------- sections ---------- */
section{padding:clamp(46px,6.5vw,78px) 0}
section.alt{background:var(--surface);border-block:1px solid var(--line)}
.body p{margin-top:14px;max-width:64ch;color:var(--ink-soft);font-size:16px}
.cols{margin-top:30px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* section en deux colonnes : le texte, et le schéma qui le démontre */
.split{display:grid;gap:clamp(26px,4vw,54px);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split .body p{max-width:52ch}
figure.schema{margin:0}
figure.schema svg{width:100%;height:auto;display:block}
figure.schema figcaption{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--ink-mute);
  line-height:1.5}
.box{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--lime);
  border-radius:var(--r);padding:22px 22px 22px 20px}
.box .num{font-family:var(--mono);font-size:11px;color:var(--lime-deep);letter-spacing:.1em;font-weight:700}
.box h3{margin:10px 0 7px}
.box p{font-size:14.5px;color:var(--ink-soft)}

.jump{margin-top:26px;display:flex;gap:8px;flex-wrap:wrap}
.jump a{font-family:var(--mono);font-size:12px;text-decoration:none;border:1px solid var(--line);
  border-radius:8px;padding:9px 13px;color:var(--ink-soft);background:var(--bg)}
.jump a:hover{border-color:var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--lime)}

details.q{border-bottom:1px solid var(--line);padding:16px 0}
details.q summary{cursor:pointer;font-weight:700;font-size:15.5px;letter-spacing:-.015em;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:center}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--lime-deep);font-weight:700}
details.q[open] summary::after{content:"–"}
details.q p{margin-top:10px;color:var(--ink-soft);font-size:15px;max-width:66ch}

footer{border-top:1px solid var(--line);padding:30px 0 46px;font-family:var(--mono);font-size:11.5px;color:var(--ink-mute)}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
footer a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);
  padding-bottom:1px;transition:border-color .15s,background .15s}
footer a:hover{border-bottom-color:var(--ink);background:var(--lime)}