@font-face{font-family:"Martian Mono";src:url(polices/martian-normal-300-700.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(polices/publicsans-normal-300-800.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(polices/publicsans-italic-300-800.woff2) format("woff2");font-weight:300 800;font-style:italic;font-display:swap}

:root{
  --fond:#dfe3e6;--chassis:#2a333b;--chassis-2:#3a454f;--touche:#f7f8f6;--touche-ombre:#b9c0c6;
  --menthe:#a9dccb;--menthe-fonce:#2f7a64;--signal:#f2643a;--encre:#1b232a;--gris:#5d6873;--trait:#c7cdd2;
  --ecran:#c9d8c2;--ecran-txt:#26352a;
  --mono:"Martian Mono",ui-monospace,monospace;--texte:"Public Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:400 17px/1.65 var(--texte)}
img{max-width:100%;height:auto;display:block}
a{color:var(--menthe-fonce);text-underline-offset:3px}
.enveloppe{max-width:1120px;margin:0 auto;padding:0 20px}
.saut{position:absolute;left:-999px;top:0;background:var(--encre);color:#fff;padding:8px 12px;z-index:9}
.saut:focus{left:8px}

/* bandeau haut */
.haut{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.marque{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--encre);text-decoration:none;font-size:15px}
.marque i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--signal);color:#fff;font-style:normal;font-size:13px;box-shadow:0 3px 0 #b5431f}
.haut nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.haut nav a{color:var(--gris);text-decoration:none}
.haut nav a:hover,.haut nav a[aria-current]{color:var(--encre)}
.langue{border:1px solid var(--trait);border-radius:20px;padding:2px 10px}
.langue a{color:var(--gris)}

/* la machine */
.machine{background:linear-gradient(180deg,var(--chassis-2),var(--chassis));border-radius:28px;padding:28px;box-shadow:0 30px 60px -30px rgba(20,28,34,.55),inset 0 1px 0 rgba(255,255,255,.08);margin:10px 0 40px}
.ecran{background:var(--ecran);border-radius:12px;padding:22px 26px;box-shadow:inset 0 3px 8px rgba(0,0,0,.25);color:var(--ecran-txt);font-family:var(--mono);display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:end}
.ecran h1{margin:0;font-size:clamp(26px,4.4vw,48px);line-height:1.08;font-weight:600;letter-spacing:-.01em}
.ecran p{margin:8px 0 0;font-size:14px;line-height:1.6;max-width:62ch}
.ecran .compteur{font-size:clamp(34px,6vw,64px);font-weight:300;text-align:right;line-height:1}
.ecran .compteur small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.clavier{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.touche{position:relative;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:16px 16px 18px;background:var(--touche);border-radius:14px;color:var(--encre);text-decoration:none;box-shadow:0 6px 0 var(--touche-ombre),0 8px 14px rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s}
a.touche:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--touche-ombre),0 4px 8px rgba(0,0,0,.25)}
.touche b{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1}
.touche span{font-family:var(--mono);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.touche em{font-style:normal;font-size:14px;line-height:1.45;color:var(--gris)}
.touche.menthe{background:var(--menthe);box-shadow:0 6px 0 #6fae99,0 8px 14px rgba(0,0,0,.25)}
.touche.menthe em{color:#24453b}
.touche.signal{background:var(--signal);color:#fff;box-shadow:0 6px 0 #b5431f,0 8px 14px rgba(0,0,0,.25)}
.touche.signal em{color:#fff3ee}
.touche.large{grid-column:span 2}
.legende-clavier{margin:18px 4px 0;color:#c9d2d9;font-family:var(--mono);font-size:12px;line-height:1.6}

/* sections */
section{margin:56px 0}
h2{font-family:var(--mono);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:-.01em;margin:0 0 16px}
h3{font-family:var(--mono);font-weight:600;font-size:17px;margin:0 0 8px}
.deux{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.retour{background:#fff;border-left:6px solid var(--signal);border-radius:4px 14px 14px 4px;padding:26px 30px}
.retour h2{font-size:22px}
.retour p{margin:0 0 12px}
.retour p:last-child{margin:0}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chiffre{background:var(--chassis);color:#eef3f1;border-radius:16px;padding:22px}
.chiffre b{display:block;font-family:var(--mono);font-size:44px;font-weight:300;color:var(--menthe);line-height:1}
.chiffre p{margin:10px 0 0;font-size:15px;line-height:1.5}
.source{font-size:13px;color:var(--gris);margin-top:12px}
.photo-bande{border-radius:18px;overflow:hidden;aspect-ratio:16/7;margin:0}
.photo-bande img{width:100%;height:100%;object-fit:cover}
.photo-haute{border-radius:18px;overflow:hidden;aspect-ratio:4/5;margin:0}
.photo-haute img{width:100%;height:100%;object-fit:cover}
.mode-emploi ol{counter-reset:k;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.mode-emploi li{counter-increment:k;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.mode-emploi li::before{content:counter(k);display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--touche);box-shadow:0 4px 0 var(--touche-ombre);font-family:var(--mono);font-weight:600}
.avis{background:var(--ecran);color:var(--ecran-txt);border-radius:14px;padding:20px 24px;font-size:15px}
.avis strong{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:4px}
.rubans{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rubans a{display:block;background:#fff;border:1px solid var(--trait);border-radius:12px;padding:14px 18px;text-decoration:none;color:var(--encre)}
.rubans a:hover{border-color:var(--menthe-fonce)}
.rubans b{display:block;font-family:var(--mono);font-size:15px;margin-bottom:4px}
.rubans span{font-size:14px;color:var(--gris)}

/* article */
.article{max-width:720px;margin:0 auto}
.fil{font-family:var(--mono);font-size:12px;color:var(--gris);margin:8px 0 18px}
.fil a{color:var(--gris)}
.titre-article{display:flex;gap:18px;align-items:center;margin:0 0 18px}
.titre-article .touche{min-height:auto;width:84px;height:84px;flex:none;align-items:center;justify-content:center;padding:0}
.titre-article h1{font-family:var(--mono);font-weight:600;font-size:clamp(26px,3.6vw,38px);line-height:1.15;margin:0;letter-spacing:-.01em}
.chapo{font-size:19px;line-height:1.6;color:#2d3842}
.article h2{margin-top:40px;font-size:22px}
.article h3{margin-top:26px}
.article figure{margin:30px 0}
.article figure.portrait{max-width:480px}
.article figure img{border-radius:14px}
.article figure.gravure img{background:#f4f1e8;padding:14px;border:1px solid var(--trait)}
.article figcaption{font-size:13px;color:var(--gris);margin-top:8px;font-family:var(--mono)}
.article blockquote{background:#fff;border-radius:14px;padding:18px 22px;margin:24px 0;border:1px solid var(--trait);border-left:6px solid var(--menthe-fonce)}
.article blockquote p{margin:0 0 8px}
.article blockquote p:last-child{margin:0}
.encart{background:#fff;border-radius:14px;padding:18px 22px;margin:24px 0;border:1px solid var(--trait)}
.tableau{overflow-x:auto;margin:24px 0}
.tableau table{border-collapse:collapse;width:100%;font-size:15px;background:#fff;border-radius:12px;overflow:hidden}
.tableau th{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;text-align:left;background:var(--chassis);color:#eef3f1;padding:10px 12px}
.tableau td{padding:10px 12px;border-top:1px solid var(--trait);vertical-align:top}
.sources{border-top:2px dashed var(--trait);margin-top:40px;padding-top:16px;font-size:14px}
.sources p{font-family:var(--mono);font-weight:600;font-size:15px;margin:0 0 8px}
.sources ul{padding-left:18px;margin:0}
.voir{font-family:var(--mono);font-size:14px;margin-top:30px}
.suite{max-width:720px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.suite a{display:block;background:var(--touche);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--encre);box-shadow:0 4px 0 var(--touche-ombre);font-weight:600}
.suite a small{display:block;font-family:var(--mono);font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.suite a.d{text-align:right;grid-column:2}
.liste-404{display:grid;gap:8px;padding-left:20px}

/* pied */
.pied{background:var(--chassis);color:#cfd8de;margin-top:70px;padding:34px 0 40px;font-size:14px}
.pied .enveloppe{display:grid;grid-template-columns:1.4fr 1fr;gap:30px}
.pied a{color:var(--menthe)}
.pied ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px}
.pied b{font-family:var(--mono);font-size:13px;color:#fff}
.pied .ind{font-family:var(--mono);font-size:12px;line-height:1.7;color:#fff}

@media (max-width:860px){
  .clavier{grid-template-columns:repeat(2,1fr)}
  .deux,.pied .enveloppe{grid-template-columns:1fr}
  .chiffres{grid-template-columns:1fr}
  .ecran{grid-template-columns:1fr}
  .ecran .compteur{text-align:left}
  .rubans{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:16px}
  .enveloppe{padding:0 16px}
  .machine{padding:16px;border-radius:20px}
  .ecran{padding:18px}
  .clavier{gap:10px}
  .touche{min-height:128px;padding:12px}
  .touche.large{grid-column:span 2}
  .haut{flex-wrap:wrap}
  .haut nav{gap:12px}
  .titre-article{flex-direction:column;align-items:flex-start;gap:12px}
  .titre-article .touche{width:52px;height:52px}
  .titre-article .touche b{font-size:22px}
  .titre-article h1{font-size:25px}
  .suite{grid-template-columns:1fr}
  .suite a.d{grid-column:1}
  .retour{padding:20px}
}