/* ══════════════════════════════════════════════════════════════════════════════════════════
   SITE COMMERCIAL AUTOMEKIO
   ──────────────────────────────────────────────────────────────────────────────────────────
   LE SITE ET L'APPLICATION SONT CLAIRS TOUS LES DEUX, et c'est maintenant une obligation.

   La version précédente de ce fichier disait l'inverse : « le site est clair, l'application
   est sombre », et s'en servait pour faire ressortir de grandes captures sombres. L'argument
   est mort le jour où l'application a basculé — `src/services/theme.js` pose aujourd'hui
   `THEME_DEFAUT = 'clair'`, parce qu'un logiciel d'atelier se regarde sous les néons et pas
   le soir au bureau. Un prospect qui voyait un site clair, des captures sombres puis une
   application claire voyait trois produits.

   Les valeurs ci-dessous ne sont donc plus « inspirées de » l'application : elles en SONT
   copiées, à l'identique, depuis `src/theme-clair.css`. Quand l'application change de
   palette, ces huit lignes changent — et rien d'autre.

   LE TURQUOISE PORTE UNE ENCRE SOMBRE, jamais du blanc. Blanc sur #1FC7AE donne 2,13 de
   contraste, c'est-à-dire illisible ; avec l'encre, 6,72. En petit texte et en lien, c'est
   encore une autre nuance (--accent-texte) qui prend le relais. Le rouge et l'ambre ne
   servent qu'aux niveaux de gravité, jamais à décorer.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Encres et papiers — rampe de l'application (theme-clair.css). */
  --encre:        #1F2937;   /* texte principal       */
  --encre-douce:  #5C6471;   /* texte secondaire, AA  */
  --encre-faible: #5C6471;   /* légendes              */
  --papier:       #ffffff;   /* les cartes            */
  --papier-2:     #F6F8FA;   /* le fond de page       */
  --papier-3:     #F1F4F7;   /* champs, surfaces levées */
  --trait:        #E5EAF0;   /* bordures              */

  /* Le turquoise d'AutoMekio, valeurs exactes de l'application. */
  --accent:       #1FC7AE;   /* aplats, boutons, filets                */
  --accent-vif:   #22D3B6;   /* survol : on éclaircit                  */
  --accent-fonce: #19BFA5;   /* appui                                  */
  --accent-texte: #0B7E6D;   /* texte et liens sur fond clair (AA)     */
  --accent-voile: #E6F9F5;   /* fond d'état actif, très pâle           */
  --encre-accent: #06302A;   /* l'encre portée PAR le turquoise        */

  --nuit:         #0b1017;   /* conservé pour les rares encadrés de contraste */
  --nuit-2:       #121a24;

  --urgent:       #b42318;
  --surveiller:   #8a6100;

  --rayon:        16px;
  --largeur:      1160px;
  /* L'ombre de carte de l'application : très douce. Marquée, elle fait « vieux logiciel » ;
     absente, elle fait « page web ». */
  --ombre-carte:  0 1px 2px rgba(31,41,55,.04), 0 1px 3px rgba(31,41,55,.06);
  --ombre:        0 1px 2px rgba(31,41,55,.06), 0 12px 32px rgba(31,41,55,.08);
  --ombre-forte:  0 2px 4px rgba(31,41,55,.08), 0 24px 64px rgba(31,41,55,.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* ceinture : aucune section ne doit déborder */
}

img { max-width: 100%; height: auto; display: block; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.025em; }
h1 { font-size: clamp(34px, 5.6vw, 60px); font-weight: 800; }
h2 { font-size: clamp(27px, 3.8vw, 42px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0; }
a  { color: var(--accent-texte); }

/* ── Barre de navigation ───────────────────────────────────────────────────────────────── */
header.barre {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--trait);
}
.nav { display: flex; align-items: center; gap: 26px; height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--encre); text-decoration: none; }
.marque .jeton {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-fonce));
  display: grid; place-items: center; color: var(--encre-accent); font-size: 15px; font-weight: 900;
}
.nav nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; }
.nav nav a { color: var(--encre-douce); text-decoration: none; font-weight: 500; }
.nav nav a:hover { color: var(--encre); }

/* ── Boutons ───────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border-radius: 12px; border: 1px solid var(--trait);
  font-size: 16px; font-weight: 700; text-decoration: none;
  color: var(--encre); background: var(--papier);
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--papier-2); }
.btn-principal {
  color: var(--encre-accent); background: var(--accent); border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(11,126,109,.18), 0 10px 24px rgba(31,199,174,.26);
}
/* Au survol l'application ÉCLAIRCIT le turquoise au lieu de l'assombrir : le turquoise gagne
   en présence, et l'encre sombre reste lisible. On fait pareil, pour la même raison. */
.btn-principal:hover { background: var(--accent-vif); border-color: var(--accent-vif); transform: translateY(-1px); }
.btn-petit { min-height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: 10px; }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Sections ──────────────────────────────────────────────────────────────────────────── */
section { padding: 96px 0; }
.fond-gris { background: var(--papier-2); }
.fond-nuit { background: var(--nuit); color: #e8eef4; }
.fond-nuit h2, .fond-nuit h3 { color: #fff; }
.fond-nuit .sous { color: #93a4b4; }
.fond-nuit .etiquette { color: #3FDCC3; }

/* ── Les textes turquoise ───────────────────────────────────────────────────────────────
   ILS ÉTAIENT TROP PETITS. À 12,5 px en capitales très espacées, l'étiquette se lisait comme
   une mention légale : elle disparaissait sur un téléphone, et c'est pourtant elle qui porte
   la seule chose que personne d'autre ne peut écrire — « créé par un garagiste ».

   Elle grandit, mais reste une étiquette : l'interlignage et l'espacement des lettres sont
   resserrés en proportion, et la taille plafonne bien en dessous du titre qu'elle introduit.
   Une étiquette qui concurrence son titre crée deux titres, donc aucun. */
.etiquette {
  display: inline-block; margin-bottom: 14px;
  font-size: clamp(14px, 1.15vw, 15.5px);
  font-weight: 800; letter-spacing: .085em; text-transform: uppercase; line-height: 1.35;
  color: var(--accent-texte);
}
.sous { margin-top: 18px; max-width: 64ch; font-size: 18.5px; color: var(--encre-douce); }
.centre { text-align: center; }
.centre .sous { margin-left: auto; margin-right: auto; }

/* ── Hero ──────────────────────────────────────────────────────────────────────────────── */
.hero { padding: 72px 0 0; }
.hero h1 { max-width: 19ch; }
.hero .accroche { margin-top: 22px; font-size: clamp(18px, 2.2vw, 21px); color: var(--encre-douce); max-width: 60ch; }
.hero .boutons { margin-top: 34px; }
.hero .rassurance { margin-top: 18px; font-size: 14.5px; color: var(--encre-faible); }

/* Le cadre « navigateur » autour d'une capture : discret, juste assez pour qu'on comprenne
   qu'on regarde un vrai logiciel et non une illustration. */
.cadre {
  margin-top: 56px;
  border-radius: 14px; overflow: hidden;
  background: var(--nuit-2); border: 1px solid #27323f;
  box-shadow: var(--ombre-forte);
}
.cadre .chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: #1a232e; border-bottom: 1px solid #27323f;
}
.cadre .pastille { width: 11px; height: 11px; border-radius: 50%; background: #39465a; }
.cadre .adresse {
  margin-left: 10px; padding: 3px 12px; border-radius: 6px;
  background: #0f1620; color: #7f8ea1; font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cadre img { width: 100%; }

.legende { margin-top: 14px; font-size: 13.5px; color: var(--encre-faible); text-align: center; }
.fond-nuit .legende { color: #64758a; }

/* ── Parcours en étapes ────────────────────────────────────────────────────────────────── */
.parcours { display: grid; gap: 18px; margin-top: 48px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.etape {
  padding: 24px; border-radius: 14px;
  background: var(--papier); border: 1px solid var(--trait);
  border-top: 3px solid var(--accent);
}
.fond-gris .etape { background: var(--papier); }
.etape .num { font-size: 12.5px; font-weight: 800; letter-spacing: .09em; color: var(--accent-texte); }
.etape h3 { margin: 8px 0 6px; }
.etape p { font-size: 15.5px; color: var(--encre-douce); }

/* ── Grille de blocs ───────────────────────────────────────────────────────────────────── */
.grille { display: grid; gap: 22px; margin-top: 48px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.bloc { padding: 28px; border-radius: 14px; background: var(--papier); border: 1px solid var(--trait); }
.fond-gris .bloc { background: var(--papier); }
.bloc h3 { margin-bottom: 10px; }
.bloc p { font-size: 15.5px; color: var(--encre-douce); }
.bloc ul { margin: 12px 0 0; padding-left: 20px; font-size: 15px; color: var(--encre-douce); }
.bloc li { margin-bottom: 5px; }

/* ── Alternance texte / capture ────────────────────────────────────────────────────────── */
.duo { display: grid; gap: 52px; align-items: center; grid-template-columns: 1fr 1.25fr; margin-top: 56px; }
.duo.inverse { grid-template-columns: 1.25fr 1fr; }
.duo.inverse .duo-texte { order: 2; }
.duo .cadre { margin-top: 0; }
.duo h3 { font-size: 26px; letter-spacing: -0.02em; }
.duo p { margin-top: 14px; color: var(--encre-douce); font-size: 16.5px; }

/* ── Micro-démonstrations ──────────────────────────────────────────────────────────────── */
.demos { display: grid; gap: 26px; margin-top: 48px; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.demo { border-radius: 14px; overflow: hidden; background: var(--nuit-2); border: 1px solid #27323f; box-shadow: var(--ombre); }
.demo-entete { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #27323f; }
.demo-entete .titre { font-size: 15px; font-weight: 700; color: #fff; }
.demo-entete .duree { margin-left: auto; font-size: 12px; color: #7f8ea1; }
.demo-scene { position: relative; aspect-ratio: 16 / 10; background: var(--nuit); }
.demo-scene img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* « contain », pas « cover » : les captures vont du bandeau de 1724 × 72 px à la page client
     verticale. Rogner pour remplir la vignette agrandissait les captures larges au point qu'on
     ne lisait plus qu'une lettre sur une tablette. On les affiche entières, sur le fond de
     l'application — ce qui laisse des bandes, et c'est le bon compromis : on vient ici pour
     LIRE l'écran, pas pour admirer un cadrage. */
  object-fit: contain; object-position: center;
  opacity: 0; transition: opacity .5s ease;
}
.demo-scene img.actif { opacity: 1; }
/* Trois lignes de légende à 375 px : le pied est dimensionné pour la pire étape, sinon la
   carte grandit et rétrécit à chaque changement d'image. */
.demo-pied { padding: 14px 18px; min-height: 76px; display: flex; align-items: flex-start; }
@media (max-width: 760px) { .demo-pied { min-height: 100px; } }
.demo-pied .pas { font-size: 14.5px; color: #cdd7e1; }
.demo-pied .pas b { color: #fff; }
.demo-barre { display: flex; gap: 5px; padding: 0 18px 16px; }
.demo-barre span { flex: 1; height: 3px; border-radius: 2px; background: #27323f; }
.demo-barre span.fait { background: var(--accent); }

/* ── Encadré d'honnêteté ───────────────────────────────────────────────────────────────── */
/* Carte sombre dans une section claire : elle REDÉFINIT sa couleur de texte, sinon son titre
   hériterait de l'encre de la section et deviendrait illisible. Vérifié en recette. */
.encadre {
  margin-top: 48px; padding: 32px; border-radius: 14px;
  background: var(--nuit-2); color: #e8eef4; border: 1px solid #27323f;
}
.encadre h3 { color: #fff; margin-bottom: 14px; }
.encadre ul { margin: 0; padding-left: 20px; color: #a9b7c6; font-size: 16px; }
.encadre li { margin-bottom: 11px; }
.encadre strong { color: #fff; }
.pilote {
  display: inline-block; margin-top: 8px; padding: 3px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  color: #6b4a00; background: #ffeec2; border: 1px solid #e8c877;
}

/* ── Formulaire ────────────────────────────────────────────────────────────────────────── */
.formulaire { margin-top: 44px; display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: 14.5px; font-weight: 600; color: var(--encre); }
.champ .aide { font-size: 13px; color: var(--encre-faible); font-weight: 400; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 16px; color: var(--encre);
  padding: 13px 14px; border-radius: 10px;
  border: 1px solid var(--trait); background: var(--papier);
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 96px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(25,184,156,.18);
}
.champ .erreur { font-size: 13.5px; color: var(--urgent); font-weight: 600; }
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"] { border-color: var(--urgent); }
.radio { display: flex; gap: 22px; align-items: center; padding-top: 6px; }
.radio label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.radio input { width: 20px; height: 20px; accent-color: var(--accent-fonce); }
.formulaire .envoi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.formulaire .note { font-size: 13.5px; color: var(--encre-faible); max-width: 52ch; }
#form-etat { grid-column: 1 / -1; padding: 16px 18px; border-radius: 12px; font-size: 15.5px; display: none; }
#form-etat.visible { display: block; }
#form-etat.ok { background: #e7f8f4; color: #06554a; border: 1px solid #a8e5d8; }
#form-etat.ko { background: #fdecea; color: #8a1c13; border: 1px solid #f4bdb7; }

/* ── Pied de page ──────────────────────────────────────────────────────────────────────── */
footer { padding: 56px 0; border-top: 1px solid var(--trait); color: var(--encre-faible); font-size: 14.5px; background: var(--papier-2); }
footer .liens { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── Petits écrans ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .duo, .duo.inverse { grid-template-columns: 1fr; gap: 32px; }
  .duo.inverse .duo-texte { order: 0; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  section { padding: 64px 0; }
  .hero { padding: 48px 0 0; }
  .conteneur { padding: 0 18px; }
  .nav nav { display: none; }
  .nav { gap: 12px; }
  .cadre { margin-top: 36px; }
  .cadre .adresse { display: none; }
  .formulaire { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .boutons { flex-direction: column; align-items: stretch; }
  .nav .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-scene img { transition: none; }
  .btn:hover { transform: none; }
}

/* Séquence mise en pause par le visiteur : on le lui dit, sinon il croit que c'est cassé. */
.demo.en-pause .demo-entete .duree::after { content: ' · en pause'; color: var(--accent); }
.demo-scene { cursor: pointer; }

/* La commande de pause. Visible en permanence : sur un écran tactile il n'y a pas de survol
   pour la faire apparaître, et une séquence qu'on ne sait pas arrêter ne se lit pas. */
.demo-pause {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(8, 14, 22, .72); color: #fff;
  font: 600 13px/1 inherit; cursor: pointer;
  backdrop-filter: blur(6px);
}
.demo-pause svg { width: 14px; height: 14px; fill: currentColor; }
.demo-pause .i-lire { display: none; }
.demo.en-pause .demo-pause .i-pause { display: none; }
.demo.en-pause .demo-pause .i-lire { display: block; }
.demo.en-pause .demo-pause { background: var(--accent); color: #06302A; border-color: transparent; }
.demo-pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* « Agrandir » — à gauche de « Pause », même gabarit. Les vignettes des séquences sont des
   recadrages : ce bouton rend la capture entière, c'est la contrepartie du recadrage. */
.demo-agrandir {
  position: absolute; right: 112px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(8, 14, 22, .72); color: #fff;
  font: 600 13px/1 inherit; cursor: pointer;
  backdrop-filter: blur(6px);
}
.demo-agrandir svg { width: 14px; height: 14px; }
.demo-agrandir:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* La loupe : la capture entière, par-dessus la page. */
/* Dimensionnée en unités de FENÊTRE, pas en pourcentages : mesuré sur téléphone, le bloc
   centré par flexbox se calait sur une largeur plus grande que l'écran et la capture sortait
   par la gauche. `100vw` est la seule référence qui ne mente pas ici. */
.loupe {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 90; display: none;
  width: var(--loupe-l, 100vw);
  padding: 56px 16px 24px;
  background: rgba(5, 9, 14, .92);
  overflow: auto; overscroll-behavior: contain;
}
.loupe.ouverte { display: block; }
body.loupe-ouverte { overflow: hidden; }
/* min-width: 0 — sans ça, l image de 2880 px impose sa largeur naturelle à l élément
   flex et la loupe déborde de l écran sur un téléphone. */
.loupe figure { margin: 0 auto; width: 100%; max-width: min(1100px, calc(var(--loupe-l, 100vw) - 32px)); }
.loupe img {
  display: block; width: 100%; max-width: 100%; height: auto; border-radius: 10px;
  background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.loupe figcaption { margin-top: 12px; color: #cdd7e1; font-size: 14px; line-height: 1.5; }
.loupe figcaption b { color: #fff; }
.loupe-note { color: #8fa1b3; }
.loupe-fermer {
  position: fixed; top: 12px; right: 12px;
  min-height: 44px; padding: 0 18px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(8, 14, 22, .9); color: #fff;
  font: 600 14px/1 inherit; cursor: pointer;
}
.loupe-fermer:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Mesuré : « Agrandir » (104 px) et « Pause » (89 px) tiennent côte à côte sur les 337 px
   d une image de téléphone. Empilées, elles masquaient deux fois plus de capture. */
.demo-scene:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Capture de téléphone : 390 × 844 px étirés sur une colonne de 700 px seraient grotesques.
   On la pose à sa largeur naturelle, centrée dans sa colonne. */
.cadre-tel { max-width: 340px; margin-left: auto; margin-right: auto; }

@media (max-width: 520px) {
  /* Sur un téléphone, le bouton de la barre passe sur deux lignes et écrase la marque, alors
     que le même appel à l'action est à trois centimètres en dessous dans le hero. On le retire. */
  .nav .btn { display: none; }
}

/* La barre est collante : sans cette marge, un lien d'ancre dépose le titre visé DERRIÈRE elle. */
section[id], [id] { scroll-margin-top: 84px; }

/* ── La chaîne AutoMekio → EBP ─────────────────────────────────────────────────────────────
   Montrée comme une liaison EN ATTENTE : le maillon EBP est en pointillés, pas en plein. Un
   schéma au trait plein laisserait croire que le connecteur fonctionne. */
.chaine { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; }
.maillon {
  padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 15.5px;
}
.maillon.actif   { background: var(--accent); color: var(--encre-accent); }
.maillon.attente { background: transparent; color: #8c9aa9; border: 2px dashed #3a4857; }
.chaine .fleche  { color: #5d6b7b; font-size: 22px; line-height: 1; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   SECTIONS AJOUTÉES PAR LA REFONTE COMMERCIALE
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Avant / après : huit étapes contre quatre ──────────────────────────────────────────
   Deux colonnes de hauteur ÉGALE, et c'est tout l'argument : la colonne de droite est visi-
   blement plus courte. Si les deux listes se recentraient verticalement, la démonstration
   visuelle disparaîtrait — d'où `align-items: start`. */
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; margin-top: 32px; }
@media (max-width: 760px) { .duel { grid-template-columns: 1fr; } }

.duel-col {
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 26px; box-shadow: var(--ombre-carte);
}
.duel-col h3 { font-size: 18px; margin-bottom: 16px; color: var(--encre-douce); }
.duel-apres { border-color: var(--accent); box-shadow: var(--ombre); }
.duel-apres h3 { color: var(--accent-texte); }

.duel-liste { margin: 0; padding-left: 0; list-style: none; counter-reset: etape; }
.duel-liste li {
  counter-increment: etape;
  position: relative; padding: 10px 0 10px 42px;
  border-bottom: 1px solid var(--papier-3); font-size: 15.5px;
}
.duel-liste li:last-child { border-bottom: none; }
.duel-liste li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 9px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
  background: var(--papier-3); color: var(--encre-faible);
}
.duel-apres .duel-liste li::before { background: var(--accent); color: var(--encre-accent); }
.duel-note { margin-top: 18px; font-size: 14.5px; color: var(--encre-douce); }

/* ── « Et tout le reste de l'atelier reste connecté » ────────────────────────────────────
   Volontairement une LISTE et non des cartes : ces modules ne doivent pas peser autant que
   les six bénéfices au-dessus. Une carte attire l'œil ; une ligne se parcourt. */
.ecosysteme {
  margin-top: 40px; padding: 30px;
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
}
@media (max-width: 640px) { .ecosysteme { padding: 22px 18px; } }
.ecosysteme h3 { font-size: 21px; }
.ecosysteme .sous { margin: 10px 0 20px; font-size: 15.5px; }

.eco-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.eco-liste li {
  padding: 11px 0 11px 20px; position: relative;
  font-size: 15px; color: var(--encre-douce); line-height: 1.55;
}
.eco-liste li::before {
  content: ''; position: absolute; left: 0; top: 19px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.eco-liste b { color: var(--encre); }

/* ── Les cases « tâche la plus chronophage » ────────────────────────────────────────────── */
.cases { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.cases label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--papier); border: 1px solid var(--trait);
  font-size: 14.5px; transition: border-color .12s ease, background .12s ease;
}
.cases label:hover { border-color: var(--accent); }
/* `:has()` colore la pastille entière quand elle est cochée. Là où il manque, la case radio
   reste visible et le formulaire fonctionne exactement pareil — rien n'en dépend. */
.cases label:has(input:checked) { background: var(--accent-voile); border-color: var(--accent); font-weight: 700; }
.cases input { accent-color: var(--accent-fonce); }

/* ── Le pot de miel ─────────────────────────────────────────────────────────────────────
   Invisible pour l'œil ET pour le lecteur d'écran, mais présent dans le document et
   remplissable par un robot. On évite `display:none` seul : les robots un peu sérieux le
   repèrent et sautent le champ. Déplacer hors écran avec une taille nulle marche mieux. */
.pot-de-miel {
  /* CACHÉ PAR DÉCOUPE, pas en le repoussant hors de l'écran.
     « left: -9999px » semblait inoffensif : body porte bien « overflow-x: hidden », mais
     c'est html qui défile, et lui ne le porte pas. Le champ, large de 177 px, ajoutait donc
     186 px de défilement horizontal à toute la page — invisible à l'œil, repéré par la
     recette. La découpe ne prend aucune place et ne décale rien.
     On évite toujours « display: none », que les robots un peu sérieux savent ignorer. */
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  /* `contain: strict` isole complètement la boîte : le navigateur cesse de compter son
     contenu dans la largeur du document. Sans lui, le libellé rogné gonflait
     `documentElement.scrollWidth` de 186 px — alors qu'aucun élément ne dépassait et que la
     page ne défilait pas d'un pixel. Un faux positif, mais qui faisait échouer la recette à
     chaque passage : autant supprimer la cause plutôt que d'assouplir le contrôle. */
  contain: strict;
}
/* Le CHAMP aussi, pas seulement son enveloppe : un input de 177 px dans une enveloppe de
   1 px continuait d'allonger la page de 186 px vers la droite. Un robot lit le DOM — un nom
   de champ, un libellé, un type texte — pas sa taille à l'écran : le piège reste entier. */
.pot-de-miel label, .pot-de-miel input { width: 1px; height: 1px; padding: 0; border: 0; font-size: 1px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   APERÇU, ORIGINE ET « POURQUOI MAINTENANT »
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Les rectangles de tête ─────────────────────────────────────────────────────────────
   Ils se balaient, ils ne se lisent pas : une étiquette forte, une ligne d'explication, et
   on passe au suivant. C'est ce qui doit faire comprendre le produit en dix secondes, avant
   que l'histoire ne commence. */
.tuiles {
  display: grid; gap: 12px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
}
.tuile {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px; border-radius: 13px; text-decoration: none;
  background: var(--papier); border: 1px solid var(--trait);
  border-left: 3px solid var(--accent);
  box-shadow: var(--ombre-carte);
  transition: transform .12s ease, border-color .12s ease;
}
.tuile:hover { transform: translateY(-2px); border-color: var(--accent); }
.tuile b { color: var(--encre); font-size: 16.5px; }
.tuile span { color: var(--encre-douce); font-size: 14.5px; line-height: 1.5; }
/* Le bénéfice : la seule ligne que le visiteur retiendra. Elle est détachée du reste par la
   couleur d'accent et un filet, pour qu'on la lise même en balayant la grille en diagonale. */
.tuile i {
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--trait);
  color: var(--accent-texte); font-style: normal; font-weight: 700; font-size: 14px;
}
.apercu-lien { margin-top: 22px; font-size: 16px; font-weight: 700; }

/* ── L'origine ──────────────────────────────────────────────────────────────────────────
   Deux colonnes : le récit à gauche, les problèmes concrets à droite. Le récit seul ferait
   « page à propos » ; les problèmes seuls feraient une liste de griefs. Ensemble, ils disent
   « on a eu votre problème, et voilà ce qu'on en a fait ». */
#origine .duo { gap: 48px; align-items: start; }
#origine h2 { font-size: clamp(27px, 3.6vw, 40px); }
.origine-fort {
  font-size: 18px; color: var(--encre-douce); margin: 14px 0 20px;
  padding-left: 15px; border-left: 3px solid var(--accent);
}
#origine .duo-texte p { margin-bottom: 15px; font-size: 16.5px; color: var(--encre-douce); line-height: 1.7; }
#origine .duo-texte b { color: var(--encre); }

/* La signature : c'est la phrase qu'on retient, elle doit se voir sans crier. */
.origine-signature {
  background: var(--accent-voile); border: 1px solid var(--accent);
  border-radius: 12px; padding: 16px 18px; margin: 22px 0 !important;
  font-size: 17px !important; font-style: italic;
  color: var(--accent-texte) !important;
}

.problemes {
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 26px; box-shadow: var(--ombre-carte);
}
@media (max-width: 640px) { .problemes { padding: 20px 17px; } }
.problemes h3 { font-size: 19px; margin-bottom: 18px; }
.problemes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 17px; }
.problemes li {
  font-size: 15px; color: var(--encre-douce); line-height: 1.6;
  padding-left: 22px; position: relative;
}
/* Une croix discrète : ce sont des problèmes, pas des arguments de vente. */
.problemes li::before {
  content: '✕'; position: absolute; left: 0; top: 1px;
  color: var(--urgent); font-size: 13px; font-weight: 800;
}
.problemes li b { display: block; color: var(--encre); font-size: 15.5px; margin-bottom: 3px; }

/* ── Pourquoi maintenant ────────────────────────────────────────────────────────────────── */
.maintenant-texte {
  color: #93a4b4; font-size: 16.5px; line-height: 1.7;
  max-width: 68ch; margin: 20px auto 0;
}
.maintenant-texte b { color: #fff; }

/* ── FAQ ───────────────────────────────────────────────────────────────────────────────
   `<details>` natif : aucun JavaScript, ouvrable au clavier, et le contenu reste dans la
   page pour qui l'imprime ou la parcourt avec un lecteur d'écran. Un accordéon maison aurait
   coûté du code et de l'accessibilité pour exactement le même rendu. */
.faq { margin-top: 30px; display: grid; gap: 10px; max-width: 860px; }
.faq details {
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: 12px; box-shadow: var(--ombre-carte); overflow: hidden;
}
.faq details[open] { border-color: var(--accent); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 17px 48px 17px 20px; position: relative;
  font-size: 16.5px; font-weight: 700; color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 21px; font-weight: 400; color: var(--accent-texte); line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--accent-texte); }
.faq summary:focus-visible { outline: 3px solid var(--accent-voile); outline-offset: -3px; }
.faq p {
  padding: 0 20px 19px; margin: 0;
  font-size: 15.5px; line-height: 1.7; color: var(--encre-douce); max-width: 72ch;
}
.faq p b { color: var(--encre); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   REFONTE COMMERCIALE — hero en deux colonnes, sept cartes, sections illustrées
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Hero : texte à gauche, produit à droite ───────────────────────────────────────────── */
/* 1,18 et non 1,05 : à 1,05 la colonne de texte tombait à 540 px et les deux boutons du hero
   (544 px à eux deux) passaient à la ligne pour quatre pixels. Côte à côte, la hiérarchie
   principal/secondaire se lit d'un coup ; empilés, les deux se valent. */
.hero-grille { display: grid; grid-template-columns: 1.18fr 1fr; gap: 46px; align-items: center; }
@media (max-width: 980px) { .hero-grille { grid-template-columns: 1fr; gap: 34px; } }
.hero-duo { padding-bottom: 76px; }
.hero-texte h1 { font-size: clamp(31px, 4.2vw, 50px); }
.hero-visuel { margin: 0; }

/* ── Les sept cartes, visibles ensemble ────────────────────────────────────────────────
   Une GRILLE, jamais un carrousel ni des onglets : sur un téléphone elles passent en une
   colonne et restent toutes atteignables au défilement. Un carrousel aurait caché cinq des
   sept arguments derrière un geste que personne ne fait. */
.cartes7 {
  display: grid; gap: 13px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.carte7 {
  display: flex; flex-direction: column; gap: 7px;
  padding: 20px; border-radius: 14px; text-decoration: none;
  background: var(--papier); border: 1px solid var(--trait);
  border-top: 3px solid var(--accent);
  box-shadow: var(--ombre-carte);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.carte7:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--ombre); }
.carte7 b { color: var(--encre); font-size: 17px; line-height: 1.3; }
.carte7 span { color: var(--encre-douce); font-size: 14.5px; line-height: 1.55; }
/* La flèche n'apparaît qu'au survol : elle dit « ça mène quelque part » sans encombrer. */
.carte7::after {
  content: '→'; color: var(--accent-texte); font-weight: 700; font-size: 15px;
  margin-top: auto; padding-top: 8px; opacity: 0; transition: opacity .12s ease;
}
.carte7:hover::after { opacity: 1; }
@media (hover: none) { .carte7::after { opacity: 1; } }

/* ── Sections illustrées ───────────────────────────────────────────────────────────────── */
section .duo-texte h2 { font-size: clamp(25px, 3.2vw, 36px); line-height: 1.18; margin: 12px 0 16px; }
section .duo-texte > p { font-size: 16.5px; color: var(--encre-douce); line-height: 1.7; margin-bottom: 14px; }

/* Le bénéfice : une ligne, détachée, qui répond à « et pour moi, ça change quoi ? ». */
/* La phrase de bénéfice : c'est la ligne que le visiteur retient d'une section. À 16,5 px
   elle se confondait avec le paragraphe qui la précède. Elle passe au-dessus du corps de
   texte — assez pour accrocher l'œil en diagonale, pas assez pour disputer le titre. */
.benefice {
  font-size: clamp(18px, 1.6vw, 21px) !important; font-weight: 700; line-height: 1.45;
  color: var(--accent-texte) !important;
  padding: 2px 0 2px 18px; border-left: 4px solid var(--accent);
  margin: 22px 0 !important;
}

.points { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 11px; }
.points li {
  position: relative; padding-left: 23px;
  font-size: 15.5px; color: var(--encre-douce); line-height: 1.6;
}
.points li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.points b { color: var(--encre); }

/* L'encadré de précision : il porte les limites réelles. Teinte neutre et non alarmante —
   ce n'est pas un avertissement, c'est une mise au point qui construit la confiance. */
.precision {
  background: var(--papier-3); border: 1px solid var(--trait);
  border-left: 3px solid var(--encre-faible);
  border-radius: 0 12px 12px 0; padding: 15px 17px; margin: 20px 0;
}
.precision p { font-size: 14.5px !important; line-height: 1.65; color: var(--encre-douce) !important; margin: 0 0 10px !important; }
.precision p:last-child { margin-bottom: 0 !important; }
.precision b { color: var(--encre); }

.sous-bloc { font-size: 19px; margin: 24px 0 12px; color: var(--encre); }
.renvoi { margin-top: 26px; font-size: 16px; font-weight: 700; }

/* ── Le parcours du devis, en flèches ──────────────────────────────────────────────────── */
.parcours-fleche {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--trait);
}
.parcours-fleche span {
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--papier-3); color: var(--encre-douce); border: 1px solid var(--trait);
}
/* Les deux étapes humaines sont les seules en couleur : on voit d'un coup d'œil que la
   machine prépare et que l'humain tranche, sans avoir à lire la légende. */
.parcours-fleche span.humain {
  background: var(--accent-voile); color: var(--accent-texte); border-color: var(--accent); font-weight: 700;
}
.parcours-fleche span:not(:last-child)::after { content: ' →'; color: var(--trait); margin-left: 7px; }
.parcours-note { margin-top: 14px; font-size: 14.5px; color: var(--encre-faible); max-width: 70ch; }

/* ── Les cinq étapes du parcours client ────────────────────────────────────────────────── */
.parcours-etapes {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: etape;
}
.parcours-etapes li {
  counter-increment: etape; position: relative;
  padding: 20px 20px 20px 22px; border-radius: 13px;
  background: var(--papier); border: 1px solid var(--trait); box-shadow: var(--ombre-carte);
  display: flex; flex-direction: column; gap: 7px;
}
.parcours-etapes li::before {
  content: counter(etape);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--encre-accent);
  font-size: 13px; font-weight: 800;
}
.parcours-etapes b { font-size: 16.5px; }
.parcours-etapes span { font-size: 15px; color: var(--encre-douce); line-height: 1.6; }

/* ── Légende sous les captures de la page d'accueil ────────────────────────────────────── */
.cadre figcaption {
  padding: 11px 14px; font-size: 13px; line-height: 1.55; color: var(--encre-faible);
  background: var(--papier-3); border-top: 1px solid var(--trait);
}
.cadre figcaption b { color: var(--encre-douce); font-weight: 700; }
.cadre-tel figcaption { border-radius: 0; }

/* Bouton clair sur fond nuit. */
.btn-clair { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.btn-clair:hover { background: rgba(255,255,255,.2); }

/* ── Harmonisation des textes turquoise ────────────────────────────────────────────────
   Trois rôles, trois tailles, et une seule logique : plus le texte engage, plus il est gros.
   Avant cette passe, l'étiquette (12,5 px), le bénéfice (16,5 px) et la signature (17 px)
   se ressemblaient tous — donc aucun ne ressortait. */

/* La signature du fondateur : c'est une citation, elle a droit à la plus grande taille des
   trois, et au seul italique de la page. */
.origine-signature {
  font-size: clamp(18px, 1.7vw, 21px) !important;
  line-height: 1.55;
}

/* Les liens de renvoi en fin de section. */
.renvoi a { font-size: 17px; font-weight: 700; }
.renvoi a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Les mentions de statut « en cours de développement » gardent leur petite taille : elles
   informent, elles ne vendent pas. Les grossir reviendrait à mettre en avant ce qui manque. */
.pilote { font-size: 13px; }

/* Sur fond nuit, le turquoise lisible est plus clair. */
.fond-nuit .benefice { color: #3FDCC3 !important; border-left-color: #3FDCC3; }

/* ── L'icône des sept cartes ────────────────────────────────────────────────────────────
   Assez grande pour se lire d'un coup d'œil (28 px), posée dans une pastille turquoise très
   pâle qui l'ancre sans la cerner. Elle prend la couleur d'accent et pas le gris du texte :
   c'est elle qui donne son rythme à la grille quand on la parcourt en diagonale. */
.carte7-icone {
  width: 30px; height: 30px; flex-shrink: 0;
  color: var(--accent-texte);
  padding: 9px; box-sizing: content-box;
  background: var(--accent-voile); border-radius: 11px;
  margin-bottom: 4px;
}
.carte7:hover .carte7-icone { background: var(--accent); color: var(--encre-accent); }
/* Le survol change la pastille, pas la taille : une icône qui grossit fait sauter la carte. */

/* ── Visuels appariés et empilés ───────────────────────────────────────────────────────
   Deux écrans côte à côte quand le sujet en demande deux — « l'atelier ET le téléphone du
   client » ne se montre pas avec une seule image. Sur téléphone, ils passent l'un sous
   l'autre : les mettre côte à côte sur 375 px les rendrait illisibles tous les deux. */
.duo-visuels { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
.duo-visuels .cadre-tel { max-width: 268px; margin-inline: auto; }
.pile-visuels { display: grid; gap: 20px; }
.visuel-centre { margin-top: 34px; display: flex; justify-content: center; }
.visuel-centre .cadre-tel { max-width: 320px; }
@media (min-width: 1100px) {
  /* Côte à côte seulement quand il y a vraiment la place. */
  .duo-visuels { grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: center; }
}

/* ── Travaux reportés : le sous-bloc de la section Relances ────────────────────────────── */
.sous-bloc { font-weight: 700; }
/* min(68ch, 100%) et non 68ch : sous émulation mobile, Chromium dézoome la page entière
   pour faire tenir la largeur MAX-CONTENT, et un simple max-width de 544 px suffisait à faire
   passer la mise en page de 375 à 561 px. Mesuré, pas supposé. */
.sous-bloc-texte { max-width: min(68ch, 100%); margin: 0 0 10px; font-size: 17px; line-height: 1.6; }
.precision-ligne {
  max-width: min(68ch, 100%); margin: 0 0 22px;
  font-size: 14.5px; line-height: 1.65; color: var(--encre-douce);
}
/* Deux captures d'écran larges : à l'horizontale sur un écran, l'une sous l'autre sur un
   téléphone — côte à côte à 375 px, chacune ferait 160 px et ne se lirait pas. */
.duo-reprise { gap: 20px; }
@media (min-width: 860px) { .duo-reprise { grid-template-columns: 1fr 1fr; align-items: start; } }
/* Collée à la légende de la capture, pas posée ailleurs dans la grille : la réserve ne vaut
   que si elle est lue avec l image qu elle concerne. */
.mention-fictive { display: block; margin-top: 4px; color: var(--encre-faible); }


/* ══ SCÈNES : une photo d'ambiance, des cartes du produit posées dessus ═══════════════════
   Le motif est celui des pages de nos concurrents nord-américains : une photo humaine, et
   par-dessus deux ou trois éléments de l'interface. Deux règles qu'on s'impose ici :

   1. LES CARTES SONT EN HTML, pas découpées dans une image. Un bout de capture réduit à
      260 px devient illisible sur un téléphone ; un texte en HTML reste net à toutes les
      tailles. Leur contenu reprend MOT POUR MOT des écrans réels du garage de démonstration
      — numéros de devis, libellés, montants, dates. Rien n'est inventé pour faire joli.
   2. LA PHOTO N'EST PAS ROGNÉE EN BANDEAU. Elle garde son rapport 3/2 : une illustration
      dont on coupe la tête ne sert personne. Les cartes débordent légèrement du cadre, ce
      qui donne la profondeur sans manger le sujet.
   ═════════════════════════════════════════════════════════════════════════════════════ */

.scene { margin: 0; }
/* Le plan ne contient que la photo et les cartes : les cartes se placent contre LUI, pas
   contre la scène entière — sinon une carte posée en bas recouvre la note qui suit. */
.scene-plan { position: relative; }
.scene-photo { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px rgba(14, 26, 35, .18); }
.scene-photo img { display: block; width: 100%; height: auto; }
.scene-note { margin: 14px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--encre-faible); }

.carte-ui {
  position: absolute; z-index: 2;
  width: 56%; max-width: 320px;
  padding: 11px 13px;
  background: var(--papier); border: 1px solid var(--trait); border-radius: 14px;
  box-shadow: 0 16px 34px rgba(14, 26, 35, .22);
  font-size: 12.5px; line-height: 1.45; color: var(--encre);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
/* Les cartes ne sont masquées QUE si le script a pris la main : sans lui, `.anime` n'est
   jamais posée et elles restent visibles. Une animation ne doit pas pouvoir faire
   disparaître du contenu. */
.scene.anime .carte-ui { opacity: 0; transform: translateY(14px) scale(.985); }
.scene.anime.vue .carte-ui { opacity: 1; transform: none; }
.scene.anime.vue .carte-ui:nth-of-type(2) { transition-delay: .10s; }
.scene.anime.vue .carte-ui:nth-of-type(3) { transition-delay: .20s; }
.scene.anime.vue .carte-ui:nth-of-type(4) { transition-delay: .30s; }

.cu-tete {
  display: flex; align-items: center; gap: 7px; margin-bottom: 5px;
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; color: var(--encre-douce);
}
.cu-titre { font-weight: 700; }
.cu-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 5px; }
.cu-prix { font-weight: 700; white-space: nowrap; }
.cu-pied {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--trait);
  font-size: 12px; color: var(--encre-douce);
}
.cu-pied b { color: var(--encre); }
.cu-note { margin-top: 5px; font-size: 11.5px; color: var(--encre-douce); }
.cu-liste { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.cu-liste li { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: start; font-size: 11.5px; line-height: 1.4; color: var(--encre-douce); }
.cu-liste b { color: var(--encre); font-weight: 600; }
.cu-photo { margin-top: 8px; display: block; width: 92px; border-radius: 7px; border: 1px solid var(--trait); }

/* Les pastilles reprennent les couleurs de gravité du produit. */
.cu-pastille { padding: 1.5px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.cu-urgent   { background: #FDECEC; color: #B42318; }
.cu-surveil  { background: #FEF5E1; color: #92610A; }
.cu-attente  { background: #F1ECFD; color: #6936D3; }
.cu-ok       { background: #E3F6F1; color: var(--accent-texte); }
.cu-info     { background: #E9F0FB; color: #1D4ED8; }

/* ── Placements, scène par scène ─────────────────────────────────────────────────────────
   Chaque position est choisie pour ne pas couvrir ce qui fait la photo : le visage et
   l'ordinateur du garagiste, le frein que le technicien photographie, le téléphone de la
   cliente. */
/* Garagiste à l'ordinateur — le visage occupe x 47-62 % / y 8-35 %, l'ordinateur
   x 48-92 % / y 52-92 %. Les trois cartes passent au large des deux. */
.scene-hero .cu-1      { top: -3%;  right: -9%; width: 47%; }
.scene-hero .cu-3      { top: 22%;   left: -9%; width: 44%; }
.scene-hero .cu-2      { bottom: 1%; left: -8%; width: 48%; }
.scene-hero .cu-2, .scene-hero .cu-3 { padding: 9px 12px; font-size: 12px; }

/* Technicien au frein — le technicien tient x 18-62 %, le disque x 68-95 % / y 25-65 %. */
.scene-constat .cu-1   { bottom: 1%; left: -7%; width: 48%; }
.scene-constat .cu-2   { top: 2%;    right: -7%; width: 46%; }

/* Cliente au téléphone — elle occupe x 33-80 %, le téléphone x 43-52 % / y 42-58 %. */
.scene-rdv .cu-1       { top: 20%;   left: -8%; width: 46%; }
.scene-rdv .cu-2       { bottom: 4%; right: -7%; width: 44%; }

/* ── Téléphone : une seule carte, posée en bas, et lisible ───────────────────────────────
   À 375 px la photo ne fait que 225 px de haut : trois cartes superposées deviendraient
   trois vignettes illisibles. On n'en garde qu'une, à 92 % de la largeur, et les autres
   disparaissent — l'argument de la section est dans le texte, pas dans le nombre de cartes. */
@media (max-width: 760px) {
  /* La carte unique ne se SUPERPOSE pas vraiment : elle mord le bas de la photo de
     26 px et se déroule dessous. Posée par-dessus, elle couvrait la moitié du sujet —
     c'est tout l'inverse de ce qu'on cherche. */
  .carte-ui { display: none; }
  .carte-ui.principale {
    display: block; position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 92%; max-width: none; margin: -26px auto 0;
    font-size: 13px;
  }
  .scene-note { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-ui { opacity: 1; transform: none; transition: none; }
}

/* ── LES BÉNÉFICES DU HERO ─────────────────────────────────────────────────────────────────
   Quatre lignes, deux colonnes sur large écran, une seule dès qu'on se resserre. Elles
   remplacent la lecture en diagonale d'un paragraphe de fonctionnalités : l'œil accroche le
   mot en gras, et la fin de ligne explique. Discret par construction — un filet turquoise,
   aucun cadre, aucune ombre : le hero ne doit pas devenir une seconde section. */
.hero-benefices {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px;
  max-width: 62ch;
}
.hero-benefices li {
  position: relative; padding-left: 15px;
  font-size: 15.5px; line-height: 1.55; color: var(--encre-douce);
}
/* Un filet vertical plutôt qu'une puce ronde : sur deux colonnes, quatre pastilles font
   « liste de courses ». Le filet aligne et n'attire pas l'œil pour lui-même. */
.hero-benefices li::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px; border-radius: 2px; background: var(--accent);
}
.hero-benefices b { color: var(--encre); font-weight: 700; }

@media (max-width: 900px) {
  .hero-benefices { grid-template-columns: minmax(0, 1fr); gap: 11px; margin-top: 22px; }
}

/* ── L'EMPLACEMENT DE LA DÉMONSTRATION DU DEVIS INTELLIGENT ────────────────────────────────
   Un bloc identifiable, posé DANS la section du devis IA. Il doit se lire comme une
   démonstration — pas comme une capture d'un produit livré : d'où le fond levé, le cadre, et
   l'état « en cours de finalisation » en haut à droite, visible avant les cartes. */
.demo-devis {
  margin-top: 34px; padding: 26px;
  background: var(--papier-3); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.demo-devis-tete {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: flex-start; justify-content: space-between;
}
.demo-devis-tete h3 { margin: 8px 0 0; font-size: clamp(19px, 2.2vw, 23px); }
.demo-devis-intro { margin: 14px 0 0; max-width: 78ch; color: var(--encre-douce); }

.demo-devis-cartes {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.dd-carte {
  background: var(--papier); border: 1px solid var(--trait); border-radius: 13px;
  padding: 15px 16px; box-shadow: var(--ombre-carte);
}
/* La référence retenue se distingue par un filet, pas par une couleur de fond : sur trois
   cartes côte à côte, un aplat ferait croire à une recommandation du logiciel. */
.dd-retenue { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--ombre-carte); }
.dd-indispo { opacity: .72; }

.dd-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dd-marque { font-weight: 800; font-size: 16px; color: var(--encre); }
.dd-choix, .dd-neutre, .dd-alerte {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.dd-choix  { background: var(--accent-voile); color: var(--accent-texte); }
.dd-neutre { background: var(--papier-3); color: var(--encre-douce); }
.dd-alerte { background: #fdecea; color: var(--urgent); }

.dd-ref { margin: 9px 0 0; font-size: 11.5px; letter-spacing: .03em; color: var(--encre-faible); }

.dd-prix { margin: 13px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dd-prix dt { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-faible); }
.dd-prix dd { margin: 2px 0 0; font-size: 17px; font-weight: 800; color: var(--encre); }
/* Une donnée absente s'écrit, en ambre. Un tiret discret se lit « zéro ». */
.dd-absent { font-size: 13px !important; font-weight: 600 !important; color: var(--surveiller) !important; }

.dd-dispo { margin: 13px 0 0; font-size: 13.5px; font-weight: 700; }
.dd-ok { color: var(--accent-texte); }
.dd-ko { color: var(--urgent); }
.dd-preuve { margin: 7px 0 0; font-size: 12.5px; color: var(--encre-douce); line-height: 1.45; }

.demo-devis-note {
  margin: 18px 0 0; font-size: 13.5px; color: var(--encre-faible); line-height: 1.6;
  max-width: 80ch;
}

@media (max-width: 860px) {
  .demo-devis { padding: 20px 16px; }
  .demo-devis-cartes { grid-template-columns: minmax(0, 1fr); }
}