/* Tuner4Strings — landing officielle v2
   Direction « Scène et papier » (ADR-0002). Les tokens de la scène viennent tels quels de
   modifaccordeur/lib/src/ui/palette.dart ; ceux du papier du site validé précédent. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("polices/atkinson-400.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("polices/atkinson-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Scène — palette.dart */
  --noir: #000000;
  --surface: #171717;
  --surface-haute: #262626;
  --blanc: #FFFFFF;
  --texte-faible: #B8B8B8;
  --bordure: #5F5F5F;
  --juste: #4ADE80;          /* l'état juste, et rien d'autre */
  --ecart: #FFB020;
  --muet: #FF6B5A;
  --marque: #6EA8FF;         /* ne porte jamais un état */
  --zone-juste: #12301F;
  --corde-active: #12233D;
  --corde-logo: #EBEBEB;

  /* Papier */
  --papier: #F5F2EC;
  --papier-fonce: #EBE7DF;
  --papier-clair: #FBFAF7;
  --encre: #14120E;
  --encre-douce: #4A4741;
  --filet: #C9C2B4;
  --filet-fort: #8F836A;
  --marque-papier: #0040A8;

  /* Typographie */
  --police: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-hero: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem);
  --t-h2: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  --t-h3: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  --t-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.4rem);
  --t-corps: clamp(1.0625rem, 1rem + 0.2vw, 1.15rem);
  --t-petit: 0.9375rem;

  /* Espacements (base 4 px) */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gouttiere: clamp(1rem, 0.5rem + 3vw, 2.5rem);

  /* Formes — palette et widgets de l'app */
  --contour: 3px;
  --r-corde: 7px;
  --r-tuile: 12px;
  --r-pastille: 999px;
  --r-telephone: 2.1rem;

  --mouvement: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }

.lecteur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saut {
  position: absolute; left: var(--e-4); top: -4rem; z-index: 100;
  background: var(--blanc); color: var(--noir); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-corde); font-weight: 700;
}
.saut:focus { top: var(--e-4); }

:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; border-radius: 4px; }
.papier :focus-visible { outline-color: var(--marque-papier); }

.cadre { width: min(100% - 2 * var(--gouttiere), 76rem); margin-inline: auto; }

/* ── Sections ─────────────────────────────────────────────── */
.scene { background: var(--noir); color: var(--blanc); position: relative; }
.papier { background: var(--papier); color: var(--encre); position: relative; }
.papier + .papier { border-top: 2px solid var(--papier-fonce); }

.surtitre {
  font-size: var(--t-petit); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--marque); margin-bottom: var(--e-3);
}
.papier .surtitre { color: var(--marque-papier); }
.titre-section {
  font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; max-width: 18ch;
}
.titre-bloc { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; margin-bottom: var(--e-3); }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 38ch; margin-top: var(--e-4); color: var(--texte-faible); }
.papier .lead { color: var(--encre-douce); }
.entete-section { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.scene p { color: var(--texte-faible); }
.scene h1, .scene h2, .scene h3 { color: var(--blanc); }

/* ── En-tête ──────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--noir); border-bottom: 1px solid var(--surface-haute);
}
.entete__in {
  width: min(100% - 2 * var(--gouttiere), 76rem); margin-inline: auto;
  display: flex; align-items: center; gap: var(--e-5); min-height: 3.75rem;
}
.marque { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 700; font-size: 1.125rem; text-decoration: none; color: var(--blanc); }
.marque img { width: 32px; height: 32px; }
.entete__nav { display: none; margin-left: auto; gap: var(--e-5); }
.entete__nav a { text-decoration: none; color: var(--texte-faible); font-weight: 700; font-size: var(--t-petit); padding: var(--e-2) 0; }
.entete__nav a:hover { color: var(--blanc); }
.langue {
  margin-left: auto; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center;
  border: var(--contour) solid var(--bordure); border-radius: var(--r-pastille);
  color: var(--marque); font-weight: 700; text-decoration: none; font-size: var(--t-petit);
}
.langue:hover { border-color: var(--marque); }
@media (min-width: 760px) {
  .entete__nav { display: flex; }
  .langue { margin-left: 0; }
}

/* ── Composants de l'app ──────────────────────────────────── */
.pastille {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 52px; padding: 0 var(--e-5);
  border: var(--contour) solid var(--bordure); border-radius: var(--r-pastille);
  background: transparent; color: var(--marque); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.pastille:hover { border-color: var(--marque); background: var(--corde-active); }
.pastille--petite { min-height: 40px; padding: 0 var(--e-4); font-size: var(--t-petit); }

.statut { display: inline-flex; align-items: center; gap: var(--e-3); font-weight: 700; color: var(--blanc); }
.scene .statut { color: var(--blanc); }
.statut__point { width: 10px; height: 10px; border-radius: 50%; background: var(--marque); flex: none; }

.tuile {
  background: var(--noir); color: var(--blanc);
  border: var(--contour) solid var(--bordure); border-radius: var(--r-tuile);
}

.telephone {
  background: var(--noir); border: var(--contour) solid var(--surface-haute);
  border-radius: var(--r-telephone); padding: 0.5rem; overflow: hidden;
}
.telephone img { border-radius: calc(var(--r-telephone) - 0.5rem); width: 100%; aspect-ratio: 1080 / 1920; }
.papier .telephone { border-color: var(--encre); }

/* Cordes du logo (signature) */
.cordes line, .cordes path { stroke: var(--corde-logo); fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cordes .corde-onde path { stroke: var(--marque); }
.corde-onde { transform-box: fill-box; transform-origin: center; }

/* ── 01 Hero ──────────────────────────────────────────────── */
.hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(3.5rem, 2rem + 5vw, 7rem); overflow: hidden; }
.cordes--hero {
  position: absolute; top: 0; bottom: 0; right: 4%; width: min(62%, 30rem); height: 100%;
}
.cordes--hero line { stroke-opacity: 0.13; }
.cordes--hero path { stroke-opacity: 0.6; }
.hero__grille { position: relative; display: grid; gap: clamp(3rem, 2rem + 4vw, 4rem); align-items: center; }
.hero__marque { display: flex; align-items: center; gap: var(--e-3); font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 700; color: var(--blanc); margin-bottom: var(--e-5); }
.scene .hero__marque { color: var(--blanc); }
.hero__marque img { width: 56px; height: 56px; }
.hero h1 { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.03em; max-width: 12ch; }
.hero__lead { font-size: var(--t-lead); line-height: 1.45; max-width: 34ch; margin-top: var(--e-5); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-6); margin-top: var(--e-6); }
.hero__gratuit { margin-top: var(--e-5); font-weight: 700; }
.scene .hero__gratuit { color: var(--blanc); }
.langue-app { margin-top: var(--e-2); font-size: var(--t-petit); }

.hero__ecrans { position: relative; height: clamp(26rem, 18rem + 40vw, 36rem); }
.hero__ecran { position: absolute; left: 50%; top: 0; }
.hero__ecran--c { width: clamp(13rem, 9rem + 20vw, 18.75rem); transform: translateX(-50%); z-index: 2; }
.hero__ecran--g, .hero__ecran--d { width: clamp(10rem, 7rem + 14vw, 15.5rem); top: 9%; filter: brightness(0.62); }
.hero__ecran--g { transform: translateX(-112%) rotate(-7deg); }
.hero__ecran--d { transform: translateX(12%) rotate(7deg); }

@media (min-width: 960px) {
  .hero { min-height: min(52rem, calc(100vh - 3.75rem)); display: grid; align-items: center; }
  .hero__grille { grid-template-columns: 1.05fr 0.95fr; }
  .cordes--hero { right: 2%; width: 44%; }
  .hero__ecrans { height: 40rem; }
}

/* ── 02 En action ─────────────────────────────────────────── */
.action { padding-top: var(--section); }
/* vidéo de présentation (ADR-0008) : boîtier sobre, comme les captures */
.video { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--noir); border: var(--contour) solid var(--surface-haute); border-radius: var(--r-tuile); }
.action__grille { display: grid; gap: var(--e-8); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
.gestes { display: grid; gap: var(--e-6); counter-reset: geste; }
.geste { display: grid; grid-template-columns: auto 1fr; gap: var(--e-5); align-items: start; }
.geste__n {
  width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 50%;
  border: var(--contour) solid var(--bordure); color: var(--marque); font-weight: 700; font-size: 1.5rem;
}
.geste h3 { font-size: var(--t-h3); line-height: 1.2; margin-bottom: var(--e-2); }

.demo { display: grid; gap: var(--e-3); }
.demo__legende { font-size: var(--t-petit); color: var(--texte-faible); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.ecran-demo { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 2vw, 2rem); text-align: center; --etat: var(--ecart); }
.ecran-demo[data-etat="juste"] { --etat: var(--juste); }
.ecran-demo__note { font-size: 1.75rem; font-weight: 700; color: var(--texte-faible); }
.ecran-demo__note span { font-size: 0.6em; vertical-align: -0.1em; }
.ecran-demo__icone { width: clamp(4.5rem, 3.5rem + 3vw, 6rem); height: clamp(4.5rem, 3.5rem + 3vw, 6rem); margin: var(--e-3) auto; fill: var(--etat); stroke: var(--etat); }
.ecran-demo .i-juste { display: none; }
.ecran-demo[data-etat="juste"] .i-juste { display: inline; }
.ecran-demo[data-etat="juste"] .i-haut { display: none; }
.ecran-demo__mot { font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem); font-weight: 700; line-height: 1; color: var(--etat); letter-spacing: -0.01em; }
.scene .ecran-demo__mot { color: var(--etat); }
.ecran-demo__phrase { color: var(--blanc); margin-top: var(--e-3); min-height: 3.2em; }
.scene .ecran-demo__phrase { color: var(--blanc); }
.ecran-demo__chiffres { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--e-4); }
.ecran-demo__chiffres p { display: grid; }
.ecran-demo__chiffres p + p { border-left: 1px solid var(--bordure); }
.ecran-demo__chiffres b { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); color: var(--blanc); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ecran-demo__chiffres span { font-size: var(--t-petit); }
.jauge { margin-top: var(--e-5); }
.jauge__libelles { display: flex; justify-content: space-between; font-size: var(--t-petit); margin-bottom: var(--e-2); }
.jauge__piste { position: relative; height: 28px; background: var(--surface); border-radius: 5px; }
.jauge__zone { position: absolute; left: 46.5%; width: 7%; top: 0; bottom: 0; background: var(--zone-juste); }
.jauge__centre { position: absolute; left: calc(50% - 1.5px); width: 3px; top: 0; bottom: 0; background: var(--texte-faible); }
.jauge__curseur {
  --c: -18;
  position: absolute; top: 15%; bottom: 15%; width: 9px; margin-left: -4.5px; border-radius: 5px;
  left: calc(50% + var(--c) * 1%); background: var(--etat);
}

.vibrations, .silence { display: grid; gap: var(--e-6); margin-top: var(--section); align-items: center; }
.vibrations__motifs { display: grid; gap: var(--e-4); }
.vibrations__motifs figcaption { font-size: var(--t-petit); }
.motif { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: var(--e-1) var(--e-4); align-items: center; padding-block: var(--e-3); border-top: 1px solid var(--surface-haute); }
.motif__mot { font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; }
.scene .motif--ecart .motif__mot { color: var(--ecart); }
.scene .motif--juste .motif__mot { color: var(--juste); }
.motif__svg { width: 100%; max-width: 28rem; height: 3rem; }
.motif--ecart rect { fill: var(--ecart); }
.motif--juste rect { fill: var(--juste); }
.motif__axe { stroke: var(--bordure); stroke-width: 1; }
.motif__desc { grid-column: 2; font-size: var(--t-petit); }

.silence__ecran { width: min(17.5rem, 72%); margin-inline: auto; }
.silence__texte p + p { margin-top: var(--e-4); }
.vibrations .titre-bloc, .silence .titre-bloc { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.02em; }
.silence__chute { font-size: var(--t-h3); font-weight: 700; line-height: 1.25; }
.scene .silence__chute { color: var(--blanc); }

/* passage noir → papier : les cordes traversent la frontière */
.cordes--passage, .cordes--fin {
  width: clamp(7rem, 5rem + 8vw, 11rem); height: clamp(8rem, 6rem + 8vw, 12rem);
  margin: var(--section) auto 0; position: relative; z-index: 1; margin-bottom: calc(-1 * clamp(4rem, 3rem + 4vw, 6rem));
}
.cordes--passage line, .cordes--fin line { stroke: var(--filet-fort); }

@media (min-width: 900px) {
  .action__grille { grid-template-columns: 1fr 1.05fr; gap: var(--e-9); }
  .vibrations { grid-template-columns: 0.9fr 1.1fr; gap: var(--e-9); }
  .silence { grid-template-columns: 0.8fr 1.2fr; gap: var(--e-9); }
  .silence__ecran { width: min(18rem, 100%); }
}

/* ── 03 Instruments ───────────────────────────────────────── */
.instruments { padding-block: calc(var(--section) + 3rem) var(--section); }
.instruments__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--e-3); }
.instrument {
  display: grid; gap: var(--e-1); align-content: start; padding: var(--e-4);
  background: var(--papier-clair); border: 2px solid var(--filet); border-radius: var(--r-tuile);
  min-height: 9.5rem;
}
.glyphe { width: 2.75rem; height: 2.75rem; margin-bottom: var(--e-3); }
.glyphe line { stroke: var(--encre); stroke-linecap: round; }
.instrument__nom { font-weight: 700; font-size: 1.125rem; line-height: 1.2; }
.instrument__detail { color: var(--encre-douce); font-size: var(--t-petit); }
.instrument--autre { background: transparent; border-style: dashed; border-color: var(--filet-fort); justify-content: start; align-content: end; }
@media (min-width: 1100px) {
  .instruments__grille { grid-template-columns: repeat(5, 1fr); }
}

/* ── 04 Accordages ────────────────────────────────────────── */
.accordages { padding-block: var(--section); }
.accordages__grille { display: grid; gap: var(--e-7); align-items: start; }
.faits { margin-top: var(--e-6); display: grid; gap: var(--e-3); }
.faits li { padding-left: var(--e-5); position: relative; color: var(--encre-douce); }
.faits li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.65rem; height: 3px; background: var(--marque-papier); }

.selecteur { padding: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); display: grid; gap: var(--e-5); }
.selecteur__repli { font-weight: 700; color: var(--blanc); }
.selecteur__instrument { position: relative; display: block; }
.selecteur__instrument select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 64px; cursor: pointer;
  background: var(--noir); color: var(--blanc); font-weight: 700; font-size: 1.25rem;
  border: var(--contour) solid var(--bordure); border-radius: var(--r-tuile);
  padding: 0 7.5rem 0 var(--e-4);
}
.selecteur__instrument select:hover { border-color: var(--marque); }
.selecteur__changer { position: absolute; right: var(--e-4); top: 50%; transform: translateY(-50%); color: var(--marque); font-weight: 700; pointer-events: none; }
.puces { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.puce {
  min-height: 44px; padding: 0 var(--e-4); border-radius: var(--r-pastille); cursor: pointer;
  background: transparent; border: var(--contour) solid var(--bordure); color: var(--blanc); font-weight: 700; font-size: var(--t-petit);
}
.puce:hover { border-color: var(--marque); }
.puce[aria-pressed="true"] { background: var(--corde-active); border-color: var(--marque); }
.panneau { display: grid; gap: var(--e-4); }
.panneau + .panneau { border-top: 1px solid var(--surface-haute); padding-top: var(--e-5); }
.panneau__titre { font-size: 1.125rem; }
.accordage { display: grid; gap: var(--e-2); }
.accordage__nom { color: var(--texte-faible); font-size: var(--t-petit); }
.cordes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(0.25rem, 0.1rem + 0.6vw, 0.5rem); }
.corde {
  display: grid; place-items: center; align-content: center; min-height: 4.25rem; padding: var(--e-1) 0;
  border: var(--contour) solid var(--bordure); border-radius: var(--r-corde); background: var(--noir);
}
.corde--active { background: var(--corde-active); border-color: var(--marque); }
.corde__note { font-weight: 700; font-size: clamp(0.95rem, 0.75rem + 0.8vw, 1.35rem); line-height: 1.1; white-space: nowrap; }
.corde__oct { color: var(--texte-faible); font-size: 0.8125rem; }

/* Mode interactif (JS) : un instrument, un accordage à la fois — comme le sélecteur de l'app */
.selecteur.actif .selecteur__repli,
.selecteur.actif .panneau__titre { display: none; }
.selecteur.actif .panneau { display: none; }
.selecteur.actif .panneau.choisi { display: grid; border-top: 0; padding-top: 0; }
.selecteur.actif .accordage { display: none; }
.selecteur.actif .accordage.choisi { display: grid; }
.selecteur.actif .accordage.choisi .corde { animation: corde-entree 0.35s var(--mouvement) both; }
.selecteur.actif .accordage.choisi .corde:nth-child(2) { animation-delay: 0.03s; }
.selecteur.actif .accordage.choisi .corde:nth-child(3) { animation-delay: 0.06s; }
.selecteur.actif .accordage.choisi .corde:nth-child(4) { animation-delay: 0.09s; }
.selecteur.actif .accordage.choisi .corde:nth-child(5) { animation-delay: 0.12s; }
.selecteur.actif .accordage.choisi .corde:nth-child(6) { animation-delay: 0.15s; }
.selecteur.actif .accordage.choisi .corde:nth-child(7) { animation-delay: 0.18s; }
@keyframes corde-entree { from { opacity: 0; transform: translateY(6px); } }

@media (min-width: 960px) {
  .accordages__grille { grid-template-columns: 0.85fr 1.15fr; gap: var(--e-9); }
  .selecteur { position: sticky; top: 5.5rem; }
}

/* ── 05 Simplicité ────────────────────────────────────────── */
.simple { padding-block: var(--section); }
.simple > .cadre > div + div { margin-top: var(--section); }
.zero { display: grid; gap: var(--e-4); }
.zero__titre { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; }
.zero__titre em { font-style: normal; color: var(--marque-papier); }
.zero p { color: var(--encre-douce); max-width: 34ch; font-size: var(--t-lead); }

.cinq { display: grid; gap: var(--e-6); align-items: center; }
.cinq__texte p, .lisible__texte p { color: var(--encre-douce); max-width: 40ch; }
.cinq__echelle { padding: var(--e-3) clamp(1rem, 0.6rem + 1.6vw, 1.75rem); }
.cinq__echelle li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-4); align-items: center; padding-block: var(--e-4); }
.cinq__echelle li + li { border-top: 1px solid var(--surface-haute); }
.cinq__etiquette { color: var(--texte-faible); font-size: var(--t-petit); }
.cinq__valeur svg { width: 2.75rem; height: 2.75rem; fill: var(--ecart); }
.cinq__mot { color: var(--ecart); font-weight: 700; font-size: 1.75rem; line-height: 1; }
.cinq__phrase { color: var(--blanc); }
.cinq__chiffre { color: var(--blanc); font-weight: 700; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.cinq__chiffre small { font-size: 0.55em; color: var(--texte-faible); font-weight: 400; }
.cinq__couleur { display: block; height: 12px; width: 100%; max-width: 12rem; border-radius: 6px; background: var(--ecart); }

.lisible { display: grid; gap: var(--e-7); align-items: center; }
.lisible__ecran { width: min(17.5rem, 72%); margin-inline: auto; }
.lisible__texte .titre-bloc + p + .titre-bloc { margin-top: var(--e-7); }

.chiffres__liste { display: grid; gap: var(--e-5); margin-top: var(--e-5); }
.chiffres__liste div { border-top: 3px solid var(--encre); padding-top: var(--e-4); }
.chiffres__liste dt { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.chiffres__liste dd { color: var(--encre-douce); margin-top: var(--e-2); max-width: 26ch; }

@media (min-width: 800px) {
  .cinq { grid-template-columns: 0.9fr 1.1fr; gap: var(--e-9); }
  .lisible { grid-template-columns: 0.8fr 1.2fr; gap: var(--e-9); }
  .lisible__ecran { width: min(18rem, 100%); }
  .chiffres__liste { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
}

/* ── 06 Atelier ───────────────────────────────────────────── */
.atelier { padding-block: var(--section); background: var(--papier-fonce); }
.outils { display: grid; gap: var(--e-8); }
.outil .telephone { width: min(16rem, 70%); margin: 0 auto var(--e-5); }
.outil h3 { font-size: var(--t-h3); line-height: 1.2; margin-bottom: var(--e-2); }
.outil p { color: var(--encre-douce); max-width: 32ch; }
.atelier__autres { margin-top: var(--e-8); color: var(--encre-douce); max-width: 60ch; }
.atelier__autres strong { color: var(--encre); }
.atelier__gratuit { margin-top: var(--e-4); font-weight: 700; font-size: var(--t-lead); }
@media (min-width: 800px) {
  .outils { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
  .outil .telephone { width: 100%; max-width: 16rem; margin-inline: 0; }
}

/* ── 07 Fin ───────────────────────────────────────────────── */
.fin { padding-block: 0 var(--section); text-align: center; }
.cordes--fin { margin: calc(-1 * clamp(4rem, 3rem + 4vw, 6rem)) auto var(--e-8); }
.atelier { padding-bottom: calc(var(--section) + 3rem); }
.fin__in { position: relative; display: grid; justify-items: center; }
.fin__titre { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.03em; }
.fin__texte { font-size: var(--t-lead); max-width: 36ch; margin-top: var(--e-5); }
.fin__appel { display: grid; justify-items: center; gap: var(--e-3); margin-top: var(--e-9); }
.fin__logo { width: 112px; height: 112px; }
.fin__nom { font-size: var(--t-h3); font-weight: 700; }
.scene .fin__nom { color: var(--blanc); }
.fin__phrase { margin-bottom: var(--e-3); }
.fin__gratuit { margin-top: var(--e-2); }

/* ── Pied de page ─────────────────────────────────────────── */
.pied { background: var(--noir); color: var(--texte-faible); border-top: 1px solid var(--surface-haute); padding-block: var(--e-7) var(--e-8); font-size: var(--t-petit); }
.pied__in { display: grid; gap: var(--e-4); }
.pied__marque { display: flex; align-items: center; gap: var(--e-2); color: var(--blanc); font-weight: 700; font-size: 1.0625rem; }
.pied__marque img { width: 28px; height: 28px; }
.pied__liens { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pied__liens a { color: var(--marque); font-weight: 700; display: inline-block; padding-block: var(--e-2); }
.pied__legal { max-width: 70ch; }
/* logo ICTLAB tel quel (ardoise sur transparent) : posé sur une plaquette papier pour rester lisible sur noir */
.pied__editeur img { height: 64px; width: auto; background: var(--papier); border-radius: var(--r-tuile); padding: 10px 16px; box-sizing: content-box; }

/* ── Mouvement (amélioration progressive, coupé sous reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .js [data-apparition] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--mouvement), transform 0.6s var(--mouvement); }
  .js [data-apparition].vu { opacity: 1; transform: none; }
  .hero__ecran--c { animation: entree-c 0.9s var(--mouvement) 0.1s both; }
  .hero__ecran--g { animation: entree-g 0.9s var(--mouvement) 0.3s both; }
  .hero__ecran--d { animation: entree-d 0.9s var(--mouvement) 0.4s both; }
  .cordes--hero .corde-onde { animation: pincement 2.2s var(--mouvement) 0.5s both; }
  .jauge__curseur { transition: left 0.12s linear, background-color 0.3s; }
  .ecran-demo__mot, .ecran-demo__icone { transition: color 0.3s, fill 0.3s, stroke 0.3s; }
}
@keyframes entree-c { from { opacity: 0; transform: translateX(-50%) translateY(40px); } }
@keyframes entree-g { from { opacity: 0; transform: translateX(-100%) rotate(-2deg) translateY(30px); } }
@keyframes entree-d { from { opacity: 0; transform: translateX(0) rotate(2deg) translateY(30px); } }
@keyframes pincement {
  0% { transform: scaleX(0); }
  14% { transform: scaleX(2.4); }
  28% { transform: scaleX(-1.2); }
  44% { transform: scaleX(1.7); }
  60% { transform: scaleX(0.6); }
  78% { transform: scaleX(1.2); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}