/* ═══════════════════════════════════════════════════════════════════
   TAPEDECK — le vocabulaire visuel des applications, porté sur le web.
   Barre alu · cartouches noirs à grands chiffres · diodes · touches
   biseautées · grande touche nacrée à pastille rouge · VU-mètre.
   Aucune image, aucune animation gratuite.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Aluminium (barres de titre et de pied) */
  --alu-hi:#f2f3f4; --alu-lo:#d4d6d8; --alu-ink:#141618; --alu-line:#b6b9bc;
  /* Boîtier */
  --case:#232425; --case-2:#2b2c2d; --case-line:#3a3b3c;
  /* Panneaux noirs */
  --pan:#0d0d0d; --pan-2:#151515; --pan-line:#2a2b2c;
  /* Encre */
  --ink:#e9eaeb; --ink-2:#a8adb1; --ink-3:#8a9095;
  /* Signaux */
  --amber:#f0b849; --green:#4ade80; --blue:#3b9eff; --red:#e63b2e; --orange:#e8623a;
  --led-off:#2e3133;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  /* Échelle typographique — sept marches, aucune valeur hors système */
  --t-micro:.58rem; --t-label:.66rem; --t-small:.80rem; --t-body:.94rem;
  --t-lede:1.06rem; --t-title:1.30rem; --t-hero:1.75rem;
  /* Espacements — grille de 4 px */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:40px; --e7:64px;
  --page:#111213; --maxw:1160px;
}
html[data-scheme="light"]{
  --pan:#e8e9ea; --pan-2:#f1f2f3; --pan-line:#cfd2d4;
  --case:#dcdedf; --case-2:#e6e7e8; --case-line:#c6c9cb;
  --ink:#16181a; --ink-2:#42474a; --ink-3:#5f6468;
  --led-off:#c8cbcd; --page:#e2e3e4;
  /* Les couleurs de signal reprises pour fond clair. Mêmes familles,
     mais assombries : les valeurs du mode sombre tombaient à 1,4:1 ici,
     c'est-à-dire invisibles. */
  --amber:#7d5805; --green:#1f7a3d; --blue:#0f56a4; --red:#b52415; --orange:#b4491f;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--page);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:56px 0}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;line-height:1.2}
h2{font-size:var(--t-title)}
p{color:var(--ink-2);max-width:70ch}
a{color:var(--ink)}
.mono,code{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:#f0b849;color:#0d0d0d;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ─── Étiquette gravée ───────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}

/* ═══ BARRE ALUMINIUM (titre / pied) ═══════════════════════════════ */
.alubar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 20px;color:var(--alu-ink);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.03) 1px 2px),
    linear-gradient(180deg,var(--alu-hi),var(--alu-lo));
  border-bottom:1px solid var(--alu-line);
}
.alubar--foot{border-bottom:none;border-top:1px solid var(--alu-line)}
.alubar .title{display:flex;align-items:center;gap:12px}
.alubar .name{font-family:var(--mono);font-size:var(--t-lede);font-weight:600;letter-spacing:.26em;text-transform:uppercase}
.alubar .fine{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:#4a4e51}

/* ─── Icône d'application (carré arrondi, verre, diodes) ─────────── */
.appicon{
  position:relative;width:38px;height:38px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(160deg,#4a4d50 0%,#2a2c2e 42%,#1a1c1e 100%);
  border:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -6px 12px rgba(255,255,255,.05),0 1px 3px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.appicon::after{ /* le croissant de lumière qui ressort en bas */
  content:"";position:absolute;left:14%;right:14%;bottom:5%;height:26%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%);
}
.appicon .glyph{position:relative;z-index:1;font-family:var(--mono);font-size:var(--t-lede);color:var(--orange);line-height:1}
.appicon .rec{
  width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6a5e,#c9291d);
  box-shadow:0 0 6px rgba(230,59,46,.5),inset 0 1px 1px rgba(255,255,255,.35);position:relative;z-index:1;
}
.appicon .rec::before,.appicon .rec::after{content:"";position:absolute;background:rgba(0,0,0,.45)}
.appicon .rec::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.appicon .rec::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.appicon .d{position:absolute;top:4px;width:3px;height:6px;border-radius:2px;z-index:2}
.appicon .d.l{left:6px}.appicon .d.r{right:6px}
.appicon--big{width:62px;height:62px;border-radius:14px}
.appicon--big .glyph{font-size:var(--t-hero)}
.appicon--big .rec{width:24px;height:24px}

/* ─── Écran (arborescence) ───────────────────────────────────────── */
.screen{
  border-radius:2px;padding:16px 16px;
  background:linear-gradient(180deg,#0b0b0b,#101010);
  border:1px solid var(--pan-line);border-top:2px solid rgba(220,224,226,.5);
  box-shadow:inset 0 0 40px rgba(0,0,0,.65);
}
html[data-scheme="light"] .screen{background:linear-gradient(180deg,#eceded,#f4f5f5)}

/* La grande touche nacrée à pastille rouge */
.bigkey{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 32px;border-radius:14px;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,#fdfdfd 0%,#eceded 46%,#dcdedf 54%,#cfd1d3 100%);
  border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.4);
}
.bigkey .dot{width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff5c4e,#c9291d);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 0 5px rgba(230,59,46,.4);flex:0 0 auto}
.bigkey .w{font-family:var(--mono);font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#b8291c}
.bigkey:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.22)}

/* Touche au repos : l'appareil est là, il n'est pas encore sous tension */
.bigkey--off{
  cursor:default;pointer-events:none;
  background:linear-gradient(180deg,#54575a 0%,#3d4043 46%,#333639 54%,#2c2f31 100%);
  border-color:rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 3px rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.35);
}
html[data-scheme="light"] .bigkey--off{background:linear-gradient(180deg,#e6e7e8,#c9cbcd);border-color:#b4b7b9;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.14)}
.bigkey--off .w{color:#8d9296}
html[data-scheme="light"] .bigkey--off .w{color:#7d8286}
.bigkey--off .dot{background:radial-gradient(circle at 35% 30%,#6a4a47,#4a2622);box-shadow:inset 0 1px 1px rgba(255,255,255,.14)}

.bigkey--sm{padding:12px 24px;border-radius:14px;gap:12px}
.bigkey--sm .dot{width:15px;height:15px}
.bigkey--sm .w{font-size:var(--t-label)}

/* Le prix, gravé */
.price{font-family:var(--mono);font-size:var(--t-lede);font-weight:600;letter-spacing:.06em;color:var(--ink);text-align:right}
.price--lg{font-size:var(--t-hero)}
.price small{display:block;font-size:var(--t-micro);font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* ─── L'offre : la suite, puis les deux à l'unité ────────────────── */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
@media(max-width:820px){.offer{grid-template-columns:1fr}}
.tier{
  padding:20px 20px;border-radius:4px;
  background:linear-gradient(180deg,var(--pan-2),var(--pan));
  border:1px solid var(--pan-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 30px rgba(0,0,0,.5);
}
.tier--main{grid-row:span 2;border-color:rgba(240,184,73,.35)}
@media(max-width:820px){.tier--main{grid-row:auto}}
.tier-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--pan-line)}
.tier-n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:600;padding-top:4px}
.tier--main .tier-n{color:var(--amber)}
.tier-d{font-size:var(--t-small);color:var(--ink-2)}
.tier .leds li em{font-style:normal;color:var(--ink-3)}
.tier-note{font-family:var(--mono);font-size:var(--t-micro);line-height:1.7;color:var(--ink-3);margin-top:16px}

/* ─── Les conditions de licence ──────────────────────────────────── */
.terms{padding:20px 24px;border-radius:4px;background:linear-gradient(180deg,var(--pan-2),var(--pan));border:1px solid var(--pan-line);box-shadow:inset 0 0 30px rgba(0,0,0,.45);margin-bottom:24px}
.terms-lead{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.06em;color:var(--ink);margin-bottom:4px}
.terms-note{font-size:var(--t-small);line-height:1.7;color:var(--ink-3);margin-top:16px;padding-top:16px;border-top:1px solid var(--pan-line)}
@media(max-width:760px){.terms{padding:16px 16px}}

/* ─── Hero ───────────────────────────────────────────────────────── */
h1{
  font-size:clamp(1.9rem,4.6vw,3.15rem);line-height:1.08;letter-spacing:-.025em;
  font-weight:600;max-width:17ch;margin-bottom:20px;
}
h1 em{font-style:normal;color:var(--amber)}
.kicker{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);margin-bottom:20px;display:flex;align-items:center;gap:8px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--amber);flex:0 0 auto}

.chain{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--t-small);color:var(--ink-3);margin-top:28px;letter-spacing:.04em}
.chain .sep{color:var(--ink-3);opacity:.5}
.chain b{font-weight:600;color:var(--ink-2)}

/* ─── Le problème, en trois coups ────────────────────────────────── */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 24px}
@media(max-width:820px){.pains{grid-template-columns:1fr}}
.pain{padding:20px 20px;border-radius:4px;background:linear-gradient(180deg,var(--pan-2),var(--pan));border:1px solid var(--pan-line);border-left:2px solid var(--red)}
.pain .n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.pain p{font-size:var(--t-body);color:var(--ink-2);max-width:none}
.punch{font-size:var(--t-lede);line-height:1.5;color:var(--ink);max-width:46ch;font-weight:500}

/* ─── Légende pointant les zones d'une capture ───────────────────── */
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media(max-width:820px){.legend{grid-template-columns:1fr;gap:12px}}
.legend div{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-small);color:var(--ink-2)}
.legend .pip{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:4px}
.legend .pip.amber{background:var(--amber);box-shadow:0 0 7px rgba(240,184,73,.55)}
.legend .pip.green{background:var(--green);box-shadow:0 0 7px rgba(74,222,128,.5)}
.legend .pip.blue{background:var(--blue);box-shadow:0 0 7px rgba(59,158,255,.5)}

/* ─── Relevé d'adresse ───────────────────────────────────────────── */
.notify{margin-top:20px;max-width:520px}
.notify-k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.notify-row{display:flex;gap:8px;flex-wrap:wrap}
.notify input[type=email]{
  flex:1 1 240px;min-width:0;padding:12px 16px;border-radius:4px;min-height:48px;
  font-family:var(--mono);font-size:var(--t-small);color:var(--ink);
  background:rgba(0,0,0,.42);border:1px solid var(--pan-line);
}
html[data-scheme="light"] .notify input[type=email]{background:#fff;border-color:#c6c9cb}
.notify input[type=email]::placeholder{color:var(--ink-3)}
.notify input[type=email]:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.notify button{
  flex:0 0 auto;padding:12px 24px;border-radius:4px;cursor:pointer;min-height:48px;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:#1e2123;background:linear-gradient(180deg,#fbfbfb,#d6d8da);
  border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(0,0,0,.3);
}
.notify button:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.24)}
.notify button[disabled]{opacity:.5;cursor:default}
.notify .fine{display:block;font-size:var(--t-label);color:var(--ink-3);margin-top:12px;line-height:1.6}
.notify .msg{font-family:var(--mono);font-size:var(--t-small);margin-top:12px;display:none}
.notify .msg.ok{display:block;color:var(--green)}
.notify .msg.err{display:block;color:var(--orange)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ─── Le récit, mis en avant ─────────────────────────────────────── */
.story{font-size:var(--t-lede);line-height:1.75;color:var(--ink);max-width:62ch}
.story + .story{margin-top:16px}
.story-sig{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:20px}

/* ─── Spécifications repliables ──────────────────────────────────── */
.fold{border:1px solid var(--pan-line);border-radius:4px;background:linear-gradient(180deg,var(--pan-2),var(--pan))}
.fold > summary{padding:16px 20px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.fold[open] > summary{border-bottom:1px solid var(--pan-line);color:var(--amber)}
.fold-body{padding:20px}
.lede{font-size:var(--t-lede);color:var(--ink);max-width:60ch;margin-bottom:24px}
.actions{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap}
.version{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--ink-3);flex:0 0 auto}

/* ─── Trio d'icônes ──────────────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media(max-width:700px){.trio{grid-template-columns:1fr}}
.trio .cell{display:flex;align-items:center;gap:16px}
.trio .n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:600}
.trio .d{font-family:var(--mono);font-size:var(--t-label);color:var(--ink-3);margin-top:4px}

/* ─── Capture d'écran ────────────────────────────────────────────── */
.shot{margin:0}
.shot img{
  display:block;width:100%;height:auto;border-radius:8px;cursor:zoom-in;
  border:1px solid rgba(0,0,0,.55);box-shadow:0 4px 22px rgba(0,0,0,.45);
}
html[data-scheme="light"] .shot img{border-color:rgba(0,0,0,.18);box-shadow:0 2px 16px rgba(0,0,0,.14)}
.caption{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3);margin-top:8px;letter-spacing:.02em}

/* ─── Agrandissement ─────────────────────────────────────────────── */
#zoom{position:fixed;inset:0;z-index:99;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(8,9,10,.94);cursor:zoom-out}
#zoom.on{display:flex}
#zoom img{max-width:100%;max-height:88vh;height:auto;border-radius:4px;border:1px solid rgba(255,255,255,.12)}
#zoom .cap{position:absolute;left:0;right:0;bottom:20px;text-align:center;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.04em;color:#9ba0a4;padding:0 24px}
#zoomClose{position:absolute;top:18px;right:20px;width:44px;height:44px;border:none;border-radius:2px;background:rgba(255,255,255,.08);color:#e9eaeb;font-family:var(--mono);font-size:var(--t-lede);cursor:pointer}

/* ─── Applications ───────────────────────────────────────────────── */
.apps{display:grid;gap:56px}
.app-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.app-head .n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;color:var(--ink-3)}
.app-head .job{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.leds{list-style:none;font-family:var(--mono);font-size:var(--t-small);margin-top:12px}
.leds li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dotted rgba(255,255,255,.08);color:var(--ink-2)}
html[data-scheme="light"] .leds li{border-bottom-color:rgba(0,0,0,.1)}
.leds li:last-child{border-bottom:none}
.leds .led{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(74,222,128,.5);flex:0 0 auto}
.leds .led.wait{background:var(--amber);box-shadow:0 0 6px rgba(240,184,73,.45)}

/* ─── Tableaux ───────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--pan-line);vertical-align:top}
th{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;white-space:nowrap;width:32%}
td{color:var(--ink-2)}
td .mono{color:var(--ink)}
.tree{font-family:var(--mono);font-size:var(--t-small);line-height:1.95;color:var(--ink-2);white-space:pre;overflow-x:auto}

/* ─── FAQ ────────────────────────────────────────────────────────── */
details{border-bottom:1px solid var(--pan-line)}
summary{cursor:pointer;padding:16px 0;font-weight:500;list-style:none;display:flex;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-family:var(--mono);color:var(--amber);width:12px}
details[open] summary::before{content:"−"}
details .a{padding:0 0 16px 24px;color:var(--ink-2);font-size:var(--t-body);max-width:72ch}

/* ─── Téléchargement ─────────────────────────────────────────────── */
.dl-row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;font-family:var(--mono);font-size:var(--t-label);padding:8px 0}
.dl-row .k{color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;flex:0 0 136px}
.dl-row .v{color:var(--ink-2);word-break:break-all}

/* ─── Bascules ───────────────────────────────────────────────────── */
.switch{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:#1e2123;cursor:pointer;padding:8px 12px;border-radius:2px;min-height:36px;
  background:linear-gradient(180deg,#fbfbfb,#d6d8da);
  border:1px solid rgba(0,0,0,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.22);
}
.switch:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.24)}

/* ═══════════════════════════════════════════════════════════════════
   TÉLÉPHONES ET TABLETTES
   Une seule colonne, des cibles tactiles d'au moins 44 px, et surtout
   aucun débordement horizontal : les tableaux se déplient en fiches.
   ═══════════════════════════════════════════════════════════════════ */
html,body{overflow-x:hidden}
img,picture,table{max-width:100%}

@media(max-width:900px){
  .wrap{padding:0 16px}
  section{padding:40px 0}
  .lede{font-size:var(--t-body)}
  .chain{font-size:var(--t-small);gap:8px}
}

@media(max-width:760px){
  /* En-tête : le nom sur une ligne, les bascules sur la suivante */
  .alubar{padding:12px 16px;gap:12px}
  .alubar .name{font-size:var(--t-body);letter-spacing:.2em}
  .alubar .title .fine{display:none}          /* la baseline encombre */
  .alubar--foot{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 16px}
  .alubar--foot .fine{line-height:1.6}

  /* Le bouton prend toute la largeur, le prix se range dessous à gauche */
  .bigkey{width:100%;justify-content:center;padding:16px 24px}
  .actions{gap:12px}
  .price{text-align:left;width:100%}
  .price--lg{font-size:var(--t-title)}
  .version{width:100%}

  /* Le trio d'icônes : une ligne chacun, aligné à gauche */
  .trio{gap:16px;margin-top:28px!important}
  .appicon--big{width:52px;height:52px;border-radius:14px}
  .appicon--big .glyph{font-size:var(--t-title)}
  .appicon--big .rec{width:20px;height:20px}

  /* Les tableaux deviennent des fiches : plus de colonne fixe qui déborde */
  table,tbody,tr,th,td{display:block;width:100%}
  tr{padding:12px 0;border-bottom:1px solid var(--pan-line)}
  tr:last-child{border-bottom:none}
  th{
    width:auto!important;white-space:normal;padding:0 0 8px;border:none;
    font-size:var(--t-micro);letter-spacing:.16em;
  }
  td{padding:0;border:none;font-size:var(--t-body)}

  .tier{padding:16px 16px}
  .tier-head{gap:12px}
  .tier-n{font-size:var(--t-label)}
  .app-head{gap:12px}
  .app-head h2{font-size:var(--t-lede)}
  h2{font-size:var(--t-lede)}

  .dl-row{gap:4px 12px}
  .dl-row .k{flex:0 0 100%}

  details summary{padding:16px 0;min-height:44px}
  .caption{font-size:var(--t-micro)}
  #zoom{padding:12px}
  #zoomClose{top:10px;right:12px}
}

@media(max-width:430px){
  .wrap{padding:0 16px}
  .alubar .name{font-size:var(--t-small);letter-spacing:.16em}
  .chain{font-size:var(--t-small);gap:4px}
  .lede{font-size:var(--t-body)}
  .price--lg{font-size:var(--t-title)}
  .tree{font-size:var(--t-label)}
  .trio .cell{gap:12px}
}

/* Les gens qui préfèrent moins de mouvement */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION ENTRE LES QUATRE PAGES
   ═══════════════════════════════════════════════════════════════════ */
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:#3d4144;text-decoration:none;padding:8px 12px;border-radius:2px;min-height:36px;
  display:inline-flex;align-items:center;border:1px solid transparent;
}
.nav a:hover{background:rgba(0,0,0,.07)}
.nav a[aria-current="page"]{
  background:rgba(0,0,0,.09);border-color:rgba(0,0,0,.18);color:#141618;font-weight:600;
}
@media(max-width:760px){
  .nav{gap:2px;width:100%;order:3;border-top:1px solid var(--alu-line);padding-top:8px;margin-top:2px}
  .nav a{padding:8px 8px;font-size:var(--t-micro)}
}

/* ─── Bandeau de renvoi vers les autres outils ────────────────────── */
.crosslink{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
@media(max-width:820px){.crosslink{grid-template-columns:1fr}}
.crosslink a{
  display:flex;gap:12px;align-items:flex-start;text-decoration:none;
  padding:16px 20px;border-radius:4px;
  background:linear-gradient(180deg,var(--pan-2),var(--pan));
  border:1px solid var(--pan-line);
}
.crosslink a:hover{border-color:var(--amber)}
.crosslink .n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:600;display:block;margin-bottom:4px}
.crosslink .d{font-size:var(--t-small);color:var(--ink-3);display:block;line-height:1.55}

/* ─── Bandeau « fait partie de la suite » ─────────────────────────── */
.partof{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 20px;border-radius:4px;margin-top:12px;
  background:linear-gradient(180deg,var(--pan-2),var(--pan));
  border:1px solid var(--pan-line);border-left:2px solid var(--amber);
}
.partof p{font-size:var(--t-small);color:var(--ink-2);max-width:60ch;margin:0}
.partof a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}

/* ═══════════════════════════════════════════════════════════════════
   LE FONDS SE SOUVIENT — la section qui porte l'argument principal
   ═══════════════════════════════════════════════════════════════════ */
.memo{
  padding:24px 28px;border-radius:4px;margin-top:20px;
  background:linear-gradient(180deg,var(--pan-2),var(--pan));
  border:1px solid var(--pan-line);border-left:3px solid var(--amber);
  box-shadow:inset 0 0 40px rgba(0,0,0,.5);
}
@media(max-width:760px){.memo{padding:20px 16px}}
.memo-q{font-size:var(--t-title);line-height:1.45;color:var(--ink);max-width:44ch;font-weight:500;margin-bottom:16px}
.memo p{font-size:var(--t-body);line-height:1.7}
.memo p + p{margin-top:12px}

/* La ligne de registre, telle qu'elle apparaît hors ligne */
.offline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0;
  padding:12px 16px;border-radius:2px;font-family:var(--mono);font-size:var(--t-small);
  background:rgba(0,0,0,.42);border:1px solid var(--pan-line);
}
html[data-scheme="light"] .offline{background:rgba(0,0,0,.05)}
.offline .led-off{width:9px;height:18px;border-radius:2px;background:var(--led-off);flex:0 0 auto}
.offline .t{color:var(--ink);font-weight:600}
.offline .s{color:var(--ink-3)}
.offline .w{color:var(--amber)}

/* Trois gestes : reclasser, vérifier, importer */
.gestes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
@media(max-width:820px){.gestes{grid-template-columns:1fr}}
.geste{padding:16px 20px;border-radius:4px;background:linear-gradient(180deg,var(--pan-2),var(--pan));border:1px solid var(--pan-line)}
.geste .k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.geste p{font-size:var(--t-small);color:var(--ink-2);max-width:none}

/* ═══════════════════════════════════════════════════════════════════
   LE REGISTRE — la page montre ce qu'elle vend
   ═══════════════════════════════════════════════════════════════════ */
.reg{border:1px solid var(--pan-line);border-radius:4px;overflow:hidden;background:var(--pan);margin-top:var(--e4)}
.reg-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  padding:var(--e3) var(--e4);background:linear-gradient(180deg,#1b1c1d,#141516);
  border-bottom:1px solid var(--pan-line);
}
html[data-scheme="light"] .reg-h{background:linear-gradient(180deg,#f4f5f5,#e9eaea)}
.reg-h .t{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:600}
.reg-h .s{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3)}
.reg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.reg table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:var(--t-small);min-width:560px}
.reg th{
  text-align:left;padding:var(--e2) var(--e3);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;white-space:nowrap;
  border-bottom:1px solid var(--pan-line);width:auto;
}
.reg td{padding:var(--e3);border-bottom:1px solid rgba(255,255,255,.05);color:var(--ink-2);white-space:nowrap}
html[data-scheme="light"] .reg td{border-bottom-color:rgba(0,0,0,.07)}
.reg tr:last-child td{border-bottom:none}
.reg td.d{color:var(--amber)}
.reg td.t{color:var(--ink);font-weight:600}
.reg .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--e2);vertical-align:baseline}
.reg .on{background:var(--green);box-shadow:0 0 6px rgba(74,222,128,.5)}
.reg .wait{background:var(--amber);box-shadow:0 0 6px rgba(240,184,73,.45)}
.reg .off{background:var(--led-off)}
.reg tr.is-off td{color:var(--ink-3)}
.reg tr.is-off td.t{color:var(--ink-2)}
.reg-f{padding:var(--e3) var(--e4);background:rgba(0,0,0,.28);border-top:1px solid var(--pan-line);font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3);line-height:1.7}
html[data-scheme="light"] .reg-f{background:rgba(0,0,0,.04)}
.reg-f b{color:var(--amber);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   LA FRISE — vingt ans de bande, en une image
   ═══════════════════════════════════════════════════════════════════ */
.frise{margin:var(--e6) 0 var(--e5)}
.frise-r{
  position:relative;height:76px;margin-top:var(--e5);
  border-top:1px solid var(--pan-line);border-bottom:1px solid var(--pan-line);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 9px);
}
html[data-scheme="light"] .frise-r{background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 9px)}
.frise-r .yr{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.14)}
html[data-scheme="light"] .frise-r .yr{background:rgba(0,0,0,.14)}
.frise-r .yr span{position:absolute;top:-20px;left:-14px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;color:var(--ink-3)}
.frise-r .blk{position:absolute;top:28px;height:22px;border-radius:2px;background:linear-gradient(180deg,#f0b849,#c9931f);box-shadow:0 0 10px rgba(240,184,73,.26)}
.frise-r .blk.done{background:linear-gradient(180deg,#4ade80,#2c9a53);box-shadow:0 0 10px rgba(74,222,128,.22)}
.frise-r .blk.todo{background:var(--led-off);box-shadow:none}
.frise-k{display:flex;gap:var(--e5);flex-wrap:wrap;margin-top:var(--e4);font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3)}
.frise-k span{display:flex;align-items:center;gap:var(--e2)}
.frise-k i{width:16px;height:8px;border-radius:2px;display:inline-block}
.frise-k .a{background:var(--amber)} .frise-k .g{background:var(--green)} .frise-k .o{background:var(--led-off)}
@media(max-width:760px){.frise-r{height:64px}.frise-r .blk{top:22px;height:18px}}

/* Glose sous les noms de la navigation */
.nav a i{display:block;font-size:var(--t-micro);font-style:normal;letter-spacing:.1em;color:#6a6e71;text-transform:none;margin-top:1px}
.nav a[aria-current="page"] i{color:#3d4144}
.nav a{flex-direction:column;align-items:flex-start;line-height:1.25}
@media(max-width:760px){.nav a i{display:none}}

/* Retour en haut */
.totop{
  display:inline-flex;align-items:center;gap:var(--e2);margin-top:var(--e5);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;padding:var(--e3) 0;min-height:44px;
}
.totop:hover{color:var(--amber)}

/* Navigation dans la visionneuse */
#zoomPrev,#zoomNext{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border:none;border-radius:4px;background:rgba(255,255,255,.08);color:#e9eaeb;
  font-family:var(--mono);font-size:1.1rem;cursor:pointer;z-index:2;
}
#zoomPrev{left:16px} #zoomNext{right:16px}
#zoomPrev:hover,#zoomNext:hover{background:rgba(255,255,255,.16)}

/* ═══════════════════════════════════════════════════════════════════
   L'ESSAI — sept jours, complet
   ═══════════════════════════════════════════════════════════════════ */
.trial{
  display:flex;align-items:flex-start;gap:var(--e4);flex-wrap:wrap;
  padding:var(--e4) var(--e5);border-radius:4px;margin-bottom:var(--e4);
  background:linear-gradient(180deg,rgba(74,222,128,.07),rgba(74,222,128,.02));
  border:1px solid rgba(74,222,128,.28);
}
html[data-scheme="light"] .trial{background:linear-gradient(180deg,rgba(31,122,61,.08),rgba(31,122,61,.03));border-color:rgba(31,122,61,.3)}
.trial .d{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(74,222,128,.55);flex:0 0 auto;margin-top:6px}
.trial .b{flex:1 1 300px;min-width:0}
.trial .t{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:var(--e2)}
.trial p{font-size:var(--t-small);color:var(--ink-2);max-width:64ch;margin:0}

/* Le détail de l'essai, en liste */
.trial ul{list-style:none;margin:var(--e3) 0 0;padding:0}
.trial li{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e2) 0;font-size:var(--t-small);color:var(--ink-2)}
.trial li b{color:var(--ink);font-weight:600}
.trial li i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto;margin-top:8px;box-shadow:0 0 5px rgba(74,222,128,.45)}
.trial .last{margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid rgba(74,222,128,.22);font-size:var(--t-small);color:var(--ink-2)}
.trial .last b{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════
   LA CHARTE LUCIDA — par-dessus la façade, sans l'effacer.
   Tapedeck est l'outil de LUCIDA pour la captation et l'archive : le site
   prend les codes exacts de la plateforme (src/styles/tokens.css), à plat,
   une seule couleur qui désigne. La façade du HVR-M15E ci-dessus reste
   écrite ; retirer ce bloc la rétablit telle qu'elle était.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --page:#1c1c1a; --case:#232321; --case-2:#2b2b28; --case-line:#33332f;
  --pan:#161615; --pan-2:#232321; --pan-line:#33332f;
  --ink:#ececea; --ink-2:#b4b4b0; --ink-3:#8a8a86;
  --amber:#4a9be3; --orange:#4a9be3; --blue:#4a9be3; --green:#4ade80; --red:#f87171;
  --led-off:#33332f;
  --alu-hi:#232321; --alu-lo:#232321; --alu-ink:#ececea; --alu-line:#33332f;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}
html[data-scheme="light"]{
  --page:#fbfbf9; --case:#f4f3ee; --case-2:#efeee9; --case-line:#e2e0d8;
  --pan:#f4f3ee; --pan-2:#fbfbf9; --pan-line:#e2e0d8;
  --ink:#1a1a1a; --ink-2:#6f6d64; --ink-3:#6f6d64;
  --amber:#185FA5; --orange:#185FA5; --blue:#185FA5; --green:#16a34a; --red:#b91c1c;
  --led-off:#e2e0d8;
  --alu-hi:#f4f3ee; --alu-lo:#f4f3ee; --alu-ink:#1a1a1a; --alu-line:#e2e0d8;
}
.alubar{background:var(--alu-hi)}
.alubar .fine{color:var(--ink-3)}
.alubar .fine a{color:inherit !important}
.frise-r .blk{background:var(--amber);box-shadow:none}
.frise-r .blk.done{background:var(--green);box-shadow:none}
.bigkey .dot{background:var(--amber);box-shadow:none}
.nav a{color:var(--ink-2)}
.nav a i{color:var(--ink-3)}
.nav a:hover{background:var(--case-2)}
.nav a[aria-current="page"]{background:var(--case-2);border-color:var(--case-line);color:var(--ink)}
.nav a[aria-current="page"] i{color:var(--ink-2)}
.switch{background:var(--case-2);color:var(--ink);border:1px solid var(--case-line);box-shadow:none}
@media(max-width:760px){.nav{border-top-color:var(--case-line)}}