/* =============================================================================
   FUEGO STUDIO — Tom François
   Feuille unique du site. Vanilla CSS, aucune dépendance.
   Autorité graphique : 4 - Atelier/DA.md. Toute valeur absente de DA.md
   et écrite en dur ici est un bug, pas une variante.

   1. Polices              6. Réalisations et cadre navigateur
   2. Jetons               7. Blocs de contenu
   3. Base et utilitaires  8. Offres et prix
   4. Navigation           9. Formulaire et pied de page
   5. Premiers écrans     10. Visionneuse, révélations, mouvement réduit
   ============================================================================= */

/* ============================ 1. POLICES ============================ */
/* Auto-hébergées, sous-ensemble latin. Le visiteur ne contacte jamais Google :
   c'est ce qui rend l'usage compatible avec la position de la CNIL. */
@font-face{font-family:"Anton";src:url("fonts/anton-n-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/iserif-n-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/iserif-i-400.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/grotesk-n-400.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("fonts/spacemono-n-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("fonts/spacemono-n-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* ============================ 2. JETONS ============================ */
/* Sémantiques, jamais nommés par la couleur. Une bande .clair bascule les
   jetons eux-mêmes, et tous les enfants suivent sans règle de rattrapage. */
:root{
  --fond:#08070a;  --fond-2:#0d0c11;  --fond-3:#131118;
  --texte:#f4f1ea;  --texte-doux:#c2bfba;  --texte-faible:#8c8985;
  --accent:#ff4d17;  --accent-2:#ff8a1f;  --accent-3:#ffc247;
  --sur-accent:#08070a;
  --ligne:rgba(244,241,234,.12);  --ligne-2:rgba(244,241,234,.22);
  /* Bordure d'un élément avec lequel on interagit : bouton, champ, contrôle.
     Mesuré : --ligne-2 ne fait que 1,78:1 sur le fond nuit, sous le seuil de
     3:1 exigé pour un élément d'interface. Un bouton dont le seul contour est
     invisible n'est pas un bouton. Celle-ci fait 3,45:1. */
  --ligne-action:rgba(244,241,234,.40);
  --accent-grad:linear-gradient(115deg,var(--accent),var(--accent-2) 45%,var(--accent-3));

  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Space Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --t-geant:clamp(3.2rem,12vw,9rem);
  --t-titre:clamp(2.4rem,7vw,5.4rem);
  --t-sous-titre:clamp(1.5rem,3vw,2.2rem);
  --t-h4:clamp(1.12rem,1.6vw,1.35rem);
  --t-chapeau:clamp(1.02rem,1.35vw,1.22rem);
  --t-corps:clamp(15px,1.02vw,17px);
  --t-petit:.92rem;
  --t-etiquette:.72rem;

  --max:1320px;
  --gutter:clamp(20px,5vw,72px);
  --pad-section:clamp(80px,10vw,150px);

  --r-petit:10px; --r-moyen:18px; --r-grand:28px;

  --ombre-1:0 2px 10px rgba(8,7,10,.5);
  --ombre-2:0 18px 50px -20px rgba(8,7,10,.9);
  --ombre-feu:0 0 0 1px rgba(255,77,23,.28),0 20px 60px -24px rgba(255,77,23,.35);

  --dur-court:.24s; --dur-moyen:.45s; --dur-long:.8s;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* La bande claire. Un événement par page, jamais une alternance :
   le site est nocturne, un fond clair qui revient perd tout son effet. */
.clair{
  --fond:#f4f1ea;  --fond-2:#EFEAE0;  --fond-3:#ffffff;
  --texte:#08070a;  --texte-doux:#4a4741;  --texte-faible:#6b6862;
  --accent:#B72F08;         /* braise sombre : la vive ne fait que 2,94:1 ici */
  --accent-2:#B72F08;  --accent-3:#8a2406;
  --sur-accent:#ffffff;
  --ligne:rgba(8,7,10,.14);  --ligne-2:rgba(8,7,10,.26);
  --ligne-action:rgba(8,7,10,.48);
  background:var(--fond); color:var(--texte);
}

/* ============================ 3. BASE ============================ */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  background:var(--fond);color:var(--texte);font-family:var(--sans);
  font-size:var(--t-corps);line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--sur-accent)}

/* Focus visible partout, sans jamais l'être à la souris. */
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto}
.section{padding:var(--pad-section) 0;position:relative}
.section--court{padding:clamp(56px,7vw,96px) 0}

/* Lien d'évitement : premier élément focusable de chaque page. */
.skip{
  position:absolute;left:-9999px;top:8px;z-index:1000;
  background:var(--accent);color:var(--sur-accent);
  padding:12px 20px;border-radius:var(--r-petit);font-weight:700;
}
.skip:focus{left:16px}

/* Grain : texture imprimée plutôt qu'aplat numérique. STATIQUE.
   Animé en boucle sur un calque plein écran, il coûtait une composition
   permanente sur mobile pour un effet que personne ne voit bouger. */
.grain{
  position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- utilitaires typographiques ---- */
.label{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:var(--t-etiquette);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:1.5rem;
}
.label::before{content:"";width:36px;height:1px;background:currentColor;opacity:.8}

.big{
  font-family:var(--display);font-size:var(--t-titre);
  line-height:1.14;letter-spacing:-.015em;text-transform:uppercase;
  margin-bottom:1.5rem;max-width:18ch;
}
.big--large{max-width:none}
.fire{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* Sur bande claire, le dégradé braise n'a plus assez de contraste :
   le mot en feu redevient une couleur pleine et mesurée. */
.clair .fire{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)}

.serif{font-family:var(--serif);font-style:italic}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.lead{max-width:66ch;color:var(--texte-doux);font-size:var(--t-chapeau)}
h3,h4{line-height:1.25;letter-spacing:-.01em}
h3{font-size:var(--t-h4);font-weight:700}

/* Utilitaires d'espacement et d'alignement.
   Ils existent pour une raison précise : aucun attribut style= ne subsiste
   dans le HTML, ce qui permet une Content-Security-Policy stricte sans
   'unsafe-inline'. Un style en ligne casserait la politique en silence. */
.mt-0{margin-top:0}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-28{margin-top:28px}
.mt-32{margin-top:32px}
.mt-36{margin-top:36px}
.mt-40{margin-top:40px}
.w-100{width:100%}
.mi-auto{margin-inline:auto}
.centre{text-align:center}
.jc-centre{justify-content:center}
.pt-large{padding-top:clamp(80px,12vw,160px)}
.accroche{font-size:var(--t-chapeau);color:var(--texte)}
.punch{font-size:var(--t-sous-titre);max-width:24ch;color:var(--texte)}

/* ---- boutons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:14px 26px;border-radius:100px;font-weight:700;
  font-size:.94rem;letter-spacing:.01em;text-align:center;
  transition:transform var(--dur-court) var(--ease),
             box-shadow var(--dur-court) var(--ease),
             background-color var(--dur-court) var(--ease),
             border-color var(--dur-court) var(--ease);
}
.btn--fire{background:var(--accent-grad);color:var(--sur-accent);box-shadow:var(--ombre-feu)}
.btn--ghost{border:1px solid var(--ligne-action);color:var(--texte)}
.btn--lg{padding:17px 34px;font-size:1rem}
.btn--sm{padding:10px 18px;font-size:.86rem}
@media (hover:hover) and (pointer:fine){
  .btn--fire:hover{transform:translateY(-2px)}
  .btn--ghost:hover{border-color:var(--accent-2);color:var(--accent-2)}
}
.btn:active{transform:translateY(0) scale(.985)}

/* ============================ 4. NAVIGATION ============================ */
.nav{
  position:sticky;top:0;z-index:800;
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  border-bottom:1px solid var(--ligne);
}
/* Le flou est un bonus, jamais un prérequis : sans @supports, un moteur qui
   ne le gère pas affiche un fond translucide illisible. */
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
  .nav{-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}
}
.nav__inner{display:flex;align-items:center;gap:24px;min-height:70px}
.nav__brand{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.02em;flex:none}
.nav__brand b{font-family:var(--display);letter-spacing:.04em;font-weight:400;font-size:1.12rem}
.nav__brand span:last-child{color:var(--texte-faible);font-size:.8rem;letter-spacing:.18em;font-family:var(--mono)}

.flame{
  width:11px;height:14px;display:inline-block;flex:none;
  background:var(--accent-grad);
  border-radius:60% 60% 50% 50%/70% 70% 40% 40%;
  box-shadow:0 0 14px rgba(255,110,30,.55);
  animation:flick 2.6s ease-in-out infinite;
}
@keyframes flick{
  0%,100%{transform:scaleY(1) rotate(0)}
  35%{transform:scaleY(1.16) rotate(-4deg)}
  70%{transform:scaleY(.92) rotate(3deg)}
}

.nav__links{display:flex;gap:26px;margin-left:auto;font-size:.9rem}
.nav__links a{color:var(--texte-doux);position:relative;padding:6px 0;transition:color var(--dur-court)}
.nav__links a[aria-current="page"]{color:var(--texte)}
.nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
}
@media (hover:hover) and (pointer:fine){.nav__links a:hover{color:var(--accent-2)}}

.nav__right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__links + .nav__right{margin-left:0}
.nav__tel{padding:6px 2px;font-family:var(--mono);font-size:.88rem;color:var(--texte-doux);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.nav__tel:hover{color:var(--accent-2)}}

.nav__burger{display:none;width:44px;height:44px;place-items:center;flex:none}
.nav__burger span{display:block;width:22px;height:2px;background:var(--texte);margin:3px 0;
  transition:transform var(--dur-court) var(--ease),opacity var(--dur-court)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:960px){
  .nav__burger{display:grid}
  .nav__tel{display:none}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--fond);
    border-bottom:1px solid var(--ligne);
    padding:8px var(--gutter) 20px;margin:0;
    display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:14px 0;border-bottom:1px solid var(--ligne);font-size:1.05rem}
  .nav__links a[aria-current="page"]::after{display:none}
}

/* ============================ 5. PREMIERS ÉCRANS ============================ */
/* dvh et jamais 100vh : sous la barre d'adresse de Safari iOS, un 100vh nu
   coupe le bas du premier écran. */
.hero{
  position:relative;min-height:min(92dvh,900px);
  display:flex;align-items:center;padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,80px);
  overflow:hidden;
}
.hero__embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}
.hero__glow{
  position:absolute;left:50%;top:38%;width:min(120vw,1100px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,77,23,.16),transparent 62%);
}
.hero__inner{position:relative;z-index:2}

.hero__kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:var(--t-etiquette);letter-spacing:.16em;
  text-transform:uppercase;color:var(--texte-doux);
  border:1px solid var(--ligne-2);border-radius:100px;padding:8px 16px;margin-bottom:clamp(20px,3vw,32px);
}
.hero__kicker .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent-3);flex:none;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.hero__title{
  font-family:var(--display);font-size:var(--t-geant);line-height:.86;
  text-transform:uppercase;letter-spacing:-.02em;font-weight:400;
  /* La place de la cédille. Sans elle, le Ç de FRANÇOIS descend dans le
     paragraphe suivant. Exprimée en em pour suivre le clamp de la taille. */
  padding-bottom:.14em;
}
/* PAS d'overflow:hidden ici. Avec une interlignage de 0.86, il coupait la
   cédille de FRANÇOIS au pixel près : le nom de Tom s'affichait « FRANCOIS ».
   Le masquage servait un effet de révélation ligne à ligne qui n'existe pas. */
.hero__title .line{display:block}
.hero__title .line__in{display:block}
.hero__lead{max-width:56ch;color:var(--texte-doux);font-size:clamp(1.05rem,1.5vw,1.3rem);margin-top:clamp(20px,3vw,30px)}
.hero__lead b{color:var(--texte);font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4vw,40px)}

/* La ligne d'état remplace les quatre compteurs animés du 27 juillet.
   Un chiffre qui défile est un chiffre qu'on n'a pas cru bon d'expliquer. */
.hero__etat{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(28px,4vw,44px);
  font-family:var(--mono);font-size:.82rem;color:var(--texte-faible);
  border-top:1px solid var(--ligne);padding-top:18px;
}
.hero__etat b{color:var(--texte);font-weight:400}
.hero__etat span{display:inline-flex;align-items:center;gap:.5rem}
.hero__etat span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* En-tête des pages intérieures. */
.phead{padding:clamp(56px,8vw,110px) 0 clamp(30px,4vw,54px);position:relative;border-bottom:1px solid var(--ligne)}
.phead__title{font-family:var(--display);font-size:var(--t-titre);line-height:1.14;text-transform:uppercase;letter-spacing:-.015em;font-weight:400;max-width:20ch}
.phead .lead{margin-top:22px}
.fil{font-family:var(--mono);font-size:var(--t-etiquette);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-faible);margin-bottom:18px}
/* Cible tactile : le fil d'Ariane tombait à 17 px de haut, sous le minimum
   de 24 px du WCAG 2.2. Relevé par le bot le 7 septembre 2026. */
.fil a{color:var(--texte-faible);display:inline-block;padding:5px 2px}
@media (hover:hover) and (pointer:fine){.fil a:hover{color:var(--accent-2)}}
.fil span{opacity:.5;margin:0 .5rem}

/* ---- ruban défilant ---- */
.marquee{
  border-block:1px solid var(--ligne);padding:14px 0;overflow:hidden;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(.95rem,1.7vw,1.3rem);
}
.marquee__track{display:flex;width:max-content;animation:slide 40s linear infinite}
.marquee__group{display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;white-space:nowrap}
.marquee__group i{color:var(--accent);font-style:normal;font-size:.7em}
.marquee__group b{font-weight:400;color:var(--texte-doux)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================ 6. RÉALISATIONS ============================ */
.cases{display:grid;gap:clamp(56px,8vw,110px);margin-top:clamp(40px,6vw,72px)}
.case__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,64px);align-items:center}
.case__num{font-family:var(--mono);font-size:.8rem;color:var(--accent);letter-spacing:.2em}
.case__tag{display:block;font-family:var(--mono);font-size:var(--t-etiquette);letter-spacing:.14em;
  text-transform:uppercase;color:var(--texte-faible);margin:10px 0 16px}
.case__title{font-family:var(--display);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.14;
  text-transform:uppercase;font-weight:400;letter-spacing:-.01em;margin-bottom:16px}
.case__desc{color:var(--texte-doux);max-width:52ch}

/* La ligne d'état. Question 18 du registre : un mot par projet, et le
   prospect qui va vérifier ne découvre rien qu'on ne lui ait dit. */
.etat{
  display:inline-flex;align-items:center;gap:.55rem;margin:16px 0 0;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--texte-faible);border:1px solid var(--ligne);
  border-radius:100px;padding:6px 14px;
}
.etat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--texte-faible);flex:none}
.etat--ligne{color:var(--accent-3);border-color:rgba(255,194,71,.34)}
.etat--ligne::before{background:var(--accent-3)}
.clair .etat--ligne{color:var(--accent);border-color:var(--ligne-2)}
.clair .etat--ligne::before{background:var(--accent)}

.case__meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.case__meta li{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;
  border:1px solid var(--ligne);border-radius:var(--r-petit);padding:6px 11px;color:var(--texte-doux)}
.case__cta{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:24px;
  font-weight:700;color:var(--accent-2);border-bottom:1px solid transparent;padding-bottom:3px;
  transition:border-color var(--dur-court),gap var(--dur-court) var(--ease);
}
@media (hover:hover) and (pointer:fine){.case__cta:hover{border-color:currentColor;gap:.9rem}}

/* ---- cadre navigateur ---- */
.browser{border:1px solid var(--ligne-2);border-radius:var(--r-grand);overflow:hidden;
  background:var(--fond-3);box-shadow:var(--ombre-2);position:relative}
.browser__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--ligne);background:var(--fond-2)}
.browser__bar span{width:9px;height:9px;border-radius:50%;background:var(--ligne-2);flex:none}
.browser__bar i{margin-left:12px;font-family:var(--mono);font-size:.74rem;color:var(--texte-faible);font-style:normal}
.browser__view{height:clamp(300px,44vw,540px);overflow:hidden;position:relative}
.browser__page{width:100%;transition:transform 14s linear}
/* 14 s, et pas 7. C'est la durée de la première version du site, redemandée
   par Tom le 4 septembre 2026 : à 7 s, une page de 6 000 px passe à une
   vitesse où l'on ne lit plus rien, et l'aperçu ne prouve plus rien. */

/* Au tactile, le survol n'existe pas : le cadre devient déroulable au doigt.
   L'information n'est jamais réservée à la souris. */
@media (hover:none),(pointer:coarse){
  .browser__view{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
/* ⚠️ LE DÉPLACEMENT EST MESURÉ, PAS DEVINÉ.
   L'ancienne écriture soustrayait `clamp(300px,44vw,540px)`, la hauteur du
   cadre GÉNÉRIQUE. Deux défauts, trouvés le 8 septembre 2026 :
     — les cadres en duo font `clamp(220px,26vw,320px)` : ils s'arrêtaient
       220 px trop tôt, d'où 184 px/s au lieu de 200 ;
     — les écrans de logiciel, plus courts que 540 px, obtenaient une valeur
       POSITIVE : ils glissaient vers le BAS et découvraient du vide.
   `--depl` est posé par site.js à partir de la géométrie réelle de chaque
   cadre. L'ancienne expression reste en repli si le script ne tourne pas. */
@media (hover:hover) and (pointer:fine){
  .browser:hover .browser__page{
    transform:translateY(var(--depl, calc(-100% + clamp(300px,44vw,540px))));
  }
}
/* ---- la vidéo d'accueil de Fages, au survol ----
   Demandé par Tom le 6 septembre 2026 : on montre d'abord la vidéo du hero
   pendant deux secondes, PUIS la page se met à défiler. Un aperçu qui part
   tout de suite en défilement ne laisse jamais voir ce qui accroche l'œil.

   Au repos l'opacité est à 0 : c'est le haut de l'image de la page qui est
   visible, et la vidéo ne coûte rien tant qu'on ne survole pas. Au survol,
   l'animation la montre immédiatement, la tient 1,7 s, puis l'efface ;
   le défilement de l'image, lui, attend 2 s. */
.browser__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;opacity:0;pointer-events:none;
}
@keyframes fugace{0%{opacity:1}77%{opacity:1}100%{opacity:0}}
@media (hover:hover) and (pointer:fine){
  .browser--video:hover .browser__video{animation:fugace 2.2s var(--ease) forwards}
  .browser--video:hover .browser__page{transition-delay:2s}
}
/* Au doigt il n'y a pas de survol, et le cadre se fait défiler à la main :
   une vidéo posée par-dessus empêcherait de lire la page. Elle disparaît. */
@media (hover:none),(pointer:coarse){
  .browser__video{display:none}
}

.browser__hint{
  position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(8,7,10,.88);color:#f4f1ea;border:1px solid rgba(244,241,234,.4);
  border-radius:100px;padding:7px 13px;
}
.browser__hint svg{width:13px;height:13px}
.hint--hover{display:none}
@media (hover:hover) and (pointer:fine){.hint--hover{display:inline}.hint--touch{display:none}}

@media (max-width:900px){
  .case__grid{grid-template-columns:1fr}
}

/* ============================ 7. BLOCS DE CONTENU ============================ */
.grille{display:grid;gap:clamp(16px,2vw,26px);margin-top:clamp(32px,5vw,56px)}
.grille--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grille--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grille--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

.carte{
  background:var(--fond-2);border:1px solid var(--ligne);border-radius:var(--r-moyen);
  padding:clamp(22px,2.6vw,34px);transition:border-color var(--dur-court),transform var(--dur-court) var(--ease);
}
.clair .carte{background:var(--fond-3)}
@media (hover:hover) and (pointer:fine){.carte:hover{border-color:var(--ligne-2);transform:translateY(-3px)}}
.carte h3{margin-bottom:10px}
.carte p{color:var(--texte-doux);font-size:.97rem}
.carte__num{font-family:var(--mono);font-size:.78rem;color:var(--accent);letter-spacing:.16em;display:block;margin-bottom:14px}
.carte__gain{
  display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--ligne);
  font-family:var(--mono);font-size:.78rem;color:var(--accent-2);line-height:1.5;
}

/* ---- étapes numérotées ---- */
.steps{list-style:none;display:grid;gap:clamp(14px,2vw,20px);margin-top:clamp(32px,5vw,56px);counter-reset:s}
.step{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,32px);align-items:start;
  background:var(--fond-2);border:1px solid var(--ligne);border-radius:var(--r-moyen);
  padding:clamp(22px,2.6vw,32px);
}
.clair .step{background:var(--fond-3)}
.step__num{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;color:var(--accent);opacity:.85;font-weight:400}
.step h2{margin-bottom:8px;font-size:var(--t-h4);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.step p{color:var(--texte-doux);font-size:.97rem;max-width:62ch}
.step__time{font-family:var(--mono);font-size:.76rem;color:var(--texte-faible);white-space:nowrap;letter-spacing:.04em}
@media (max-width:700px){
  .step{grid-template-columns:auto 1fr}
  .step__time{grid-column:2;margin-top:10px}
}

/* ---- promesse / encart fort ---- */
.promise{
  margin-top:clamp(32px,5vw,56px);border:1px solid var(--ligne-2);border-radius:var(--r-moyen);
  padding:clamp(24px,3.2vw,44px);background:var(--fond-2);
}
.clair .promise{background:var(--fond-3)}
.promise h3{font-family:var(--display);font-size:var(--t-sous-titre);text-transform:uppercase;font-weight:400;margin-bottom:18px;letter-spacing:-.01em}
.promise ul{list-style:none;display:grid;gap:14px}
.promise li{padding-left:26px;position:relative;color:var(--texte-doux);max-width:74ch}
.promise li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--accent)}
.promise li b{color:var(--texte)}

/* ---- zone géographique ---- */
.zone__grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.zone__names{display:flex;align-items:center;gap:16px;color:var(--accent);flex-wrap:wrap}
.zone__dep{font-family:var(--display);font-size:clamp(1.4rem,3.2vw,2.6rem);text-transform:uppercase;color:var(--texte);font-weight:400}
.zone__road{width:clamp(120px,18vw,240px);height:auto;flex:none}
.communes{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;
  font-family:var(--mono);font-size:.78rem;
}
.communes li{list-style:none;border:1px solid var(--ligne);border-radius:100px;padding:5px 12px;color:var(--texte-doux)}
@media (max-width:800px){.zone__grid{grid-template-columns:1fr}}

/* ---- FAQ ---- */
.faq__list{display:grid;gap:10px;margin-top:clamp(32px,5vw,56px);max-width:900px}
.qa{border:1px solid var(--ligne);border-radius:var(--r-moyen);background:var(--fond-2);overflow:hidden}
.clair .qa{background:var(--fond-3)}
.qa summary{
  cursor:pointer;padding:20px clamp(18px,2.4vw,28px);font-weight:700;
  display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--accent);flex:none;line-height:1}
.qa[open] summary::after{content:"−"}
.qa p{padding:0 clamp(18px,2.4vw,28px) 22px;color:var(--texte-doux);max-width:70ch}
@media (hover:hover) and (pointer:fine){.qa summary:hover{color:var(--accent-2)}}

/* ---- texte long : mentions légales, confidentialité ---- */
.prose{max-width:76ch}
.prose h2{
  font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);text-transform:uppercase;
  font-weight:400;letter-spacing:-.005em;margin:clamp(40px,5vw,64px) 0 14px;padding-top:22px;
  border-top:1px solid var(--ligne);
}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{margin:26px 0 8px}
.prose td a{display:inline-block;padding:4px 0}

/* ---- titre lu, non vu ----
   Pour une section qui a un sens évident à l'œil mais aucun titre écrit :
   sans lui, la structure saute de h1 à h3 et un lecteur d'écran perd le fil.
   `clip-path` plutôt que `display:none`, qui retirerait le texte de
   l'arbre d'accessibilité au lieu de simplement le cacher à l'œil. */
.titre-lu{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.prose p,.prose li{color:var(--texte-doux)}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{margin:14px 0 14px 22px;display:grid;gap:8px}
.prose a{color:var(--accent-2);border-bottom:1px solid rgba(255,138,31,.4)}
.clair .prose a{color:var(--accent);border-bottom-color:var(--ligne-2)}
@media (hover:hover) and (pointer:fine){.prose a:hover{border-bottom-color:currentColor}}
.prose b,.prose strong{color:var(--texte)}
.prose__maj{
  font-family:var(--mono);font-size:.8rem;color:var(--texte-faible);
  border:1px solid var(--ligne);border-radius:var(--r-petit);padding:12px 16px;margin-bottom:34px;display:block;
}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--ligne);vertical-align:top}
.prose th{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-faible);font-weight:400}
.prose td{color:var(--texte-doux)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Une information légale encore à compléter est signalée, jamais inventée. */
.acompleter{
  font-family:var(--mono);font-size:.76rem;color:var(--accent-2);
  border:1px dashed rgba(255,138,31,.5);border-radius:6px;padding:2px 8px;white-space:nowrap;
}
.clair .acompleter{color:var(--accent);border-color:var(--ligne-2)}

/* ============================ 8. OFFRES ET PRIX ============================ */
.pay{
  margin-top:clamp(40px,5vw,72px);border:1px solid var(--ligne-2);border-radius:var(--r-grand);
  padding:clamp(26px,3.4vw,48px);background:var(--fond-2);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3.4vw,48px);
}
.clair .pay{background:var(--fond-3)}
.pay h3{font-family:var(--display);font-size:var(--t-sous-titre);text-transform:uppercase;font-weight:400;margin-bottom:14px}
.pay p{color:var(--texte-doux);max-width:52ch}
.pay__floor{font-size:1.1rem;color:var(--texte)!important;margin-bottom:12px}
.pay__floor b{font-family:var(--mono);font-size:1.5rem;color:var(--accent-3)}
.clair .pay__floor b{color:var(--accent)}
.pay__models{display:grid;gap:16px}
.model{border:1px solid var(--ligne);border-radius:var(--r-moyen);padding:22px;background:var(--fond-3)}
.clair .model{background:var(--fond-2)}
.model__tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2)}
.model h4{margin:8px 0 8px;font-size:1.05rem}
.model p{font-size:.94rem}
@media (max-width:860px){.pay{grid-template-columns:1fr}}

.upkeep{
  margin-top:clamp(16px,2vw,26px);border:1px solid var(--ligne);border-radius:var(--r-grand);
  padding:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,3.4vw,48px);align-items:center;
}
.upkeep h3{font-family:var(--display);font-size:var(--t-sous-titre);text-transform:uppercase;font-weight:400;margin-bottom:12px}
.upkeep p{color:var(--texte-doux);max-width:56ch}
.upkeep p b{color:var(--texte)}
.upkeep__tiers{list-style:none;display:grid;gap:12px;min-width:min(100%,260px)}
.upkeep__tiers li{
  display:flex;align-items:baseline;gap:.5rem;border:1px solid var(--ligne);
  border-radius:var(--r-petit);padding:12px 16px;background:var(--fond-2);
}
.clair .upkeep__tiers li{background:var(--fond-3)}
.upkeep__tiers b{font-family:var(--mono);font-size:1.3rem;color:var(--accent-3);font-weight:700}
.clair .upkeep__tiers b{color:var(--accent)}
.upkeep__tiers span{font-family:var(--mono);font-size:.8rem;color:var(--texte-faible)}
.upkeep__tiers i{margin-left:auto;font-style:normal;font-size:.86rem;color:var(--texte-doux)}
@media (max-width:860px){.upkeep{grid-template-columns:1fr}}

/* ---- bandeau d'appel ---- */
.cta{text-align:center;padding:clamp(56px,7vw,110px) 0}
.cta h2{font-family:var(--display);font-size:var(--t-titre);text-transform:uppercase;font-weight:400;line-height:1.14;margin-bottom:18px}
.cta p{color:var(--texte-doux);max-width:56ch;margin:0 auto 28px}
.cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============================ 9. FORMULAIRE ET PIED ============================ */
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);margin-top:clamp(32px,5vw,56px)}
.bigline{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:clamp(1.02rem,2vw,1.35rem);
  border-bottom:1px solid var(--ligne);padding:18px 0;transition:color var(--dur-court)
}
.bigline i{font-style:normal;color:var(--accent);font-size:1.1em}
@media (hover:hover) and (pointer:fine){.bigline:hover{color:var(--accent-2)}}
.contact__note{margin-top:22px;color:var(--texte-doux);font-size:.95rem;max-width:44ch}

.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px;grid-column:1/-1}
.field--half{grid-column:auto}
.field label{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-faible)}
.field input,.field select,.field textarea{
  background:var(--fond-2);border:1px solid var(--ligne-action);border-radius:var(--r-petit);
  padding:13px 15px;color:var(--texte);width:100%;
  transition:border-color var(--dur-court),background-color var(--dur-court);
}
.clair .field input,.clair .field select,.clair .field textarea{background:var(--fond-3)}
.field input::placeholder,.field textarea::placeholder{color:var(--texte-faible);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field textarea{resize:vertical;min-height:110px}
.field[data-erreur] input,.field[data-erreur] textarea{border-color:var(--accent)}
.field__err{font-family:var(--mono);font-size:.74rem;color:var(--accent-2);min-height:0}
.clair .field__err{color:var(--accent)}

/* Le piège à robots : invisible pour l'humain, rempli par les automates.
   Aucun script tiers, aucun cookie, aucune donnée envoyée à qui que ce soit. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__send{grid-column:1/-1;margin-top:6px}
.form__status{grid-column:1/-1;font-family:var(--mono);font-size:.86rem;color:var(--accent-2)}
.clair .form__status{color:var(--accent)}
.form__legal{grid-column:1/-1;font-size:.84rem;color:var(--texte-faible);max-width:60ch}
.form__legal a{color:var(--texte-doux);border-bottom:1px solid var(--ligne-2)}
@media (max-width:820px){
  .contact__grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .field--half{grid-column:1/-1}
}

.foot{border-top:1px solid var(--ligne);padding:clamp(44px,6vw,80px) 0 clamp(28px,3vw,40px);background:var(--fond-2)}
.foot__top{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start;justify-content:space-between;padding-bottom:32px;border-bottom:1px solid var(--ligne)}
.foot__brand{display:flex;align-items:center;gap:.5rem;font-weight:700}
.foot__brand b{font-family:var(--display);font-weight:400;letter-spacing:.04em;font-size:1.12rem}
.foot__brand span:last-child{color:var(--texte-faible);font-family:var(--mono);font-size:.78rem;letter-spacing:.18em}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,auto));gap:24px 48px}
.foot__col h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-faible);font-weight:400;margin-bottom:12px}
.foot__col a{display:block;padding:5px 0;color:var(--texte-doux);font-size:.92rem}
@media (hover:hover) and (pointer:fine){.foot__col a:hover{color:var(--accent-2)}}

.foot__legal{margin-top:32px;color:var(--texte-faible);font-size:.88rem;line-height:1.8}
.foot__legal b{color:var(--texte-doux)}
.foot__legal a{color:var(--texte-doux);display:inline-block;padding:8px 0}
@media (hover:hover) and (pointer:fine){.foot__legal a:hover{color:var(--accent-2)}}
.foot__id{font-family:var(--mono);font-size:.8rem}

/* La ligne obligatoire : mentions légales et confidentialité, toujours
   accessibles depuis n'importe quelle page du site. */
.foot__obl{
  margin-top:22px;padding-top:22px;border-top:1px solid var(--ligne);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-family:var(--mono);font-size:.8rem;color:var(--texte-faible);
}
.foot__obl a{color:var(--texte-doux);border-bottom:1px solid var(--ligne-2);display:inline-block;padding:6px 0 4px}
@media (hover:hover) and (pointer:fine){.foot__obl a:hover{color:var(--accent-2);border-bottom-color:currentColor}}
.foot__copy{margin-left:auto;color:var(--texte-faible)}
@media (max-width:640px){.foot__copy{margin-left:0}}

/* ============================ 10. VISIONNEUSE ============================ */
.lb{position:fixed;inset:0;z-index:990;background:rgba(4,3,6,.95);display:grid;place-items:center;padding:clamp(12px,3vw,36px)}
@supports (backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px)){
  .lb{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
.lb[hidden]{display:none}
.lb__panel{width:min(100%,1180px);max-height:92dvh;display:flex;flex-direction:column;
  background:#0d0c11;border:1px solid rgba(244,241,234,.22);border-radius:var(--r-grand);overflow:hidden}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid rgba(244,241,234,.12)}
.lb__title{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;font-weight:400;color:#f4f1ea}
.lb__sub{font-family:var(--mono);font-size:.76rem;color:#8c8985;margin-top:3px}
.lb__close{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(244,241,234,.40);color:#f4f1ea;flex:none;font-size:1rem}
.lb__stage{display:flex;align-items:stretch;gap:8px;padding:14px;min-height:0;flex:1}
.lb__figure{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.lb__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  border-radius:var(--r-moyen);background:#08070a;border:1px solid rgba(244,241,234,.12)}
.lb__scroll img{width:100%}
.lb__hint{position:absolute;right:12px;bottom:44px;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(8,7,10,.85);color:#f4f1ea;border:1px solid rgba(244,241,234,.2);border-radius:100px;padding:6px 12px}
.lb__hint svg{width:12px;height:12px}
/* `hidden` seul ne suffit pas : display:inline-flex l'emporte sur la règle
   par défaut du navigateur. Sans cette ligne, l'indice reste affiché. */
.lb__hint[hidden]{display:none}
.lb__figure figcaption{padding-top:10px;font-family:var(--mono);font-size:.78rem;color:#8c8985;text-align:center}
.lb__nav{width:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-moyen);
  border:1px solid rgba(244,241,234,.40);color:#f4f1ea;font-size:1.5rem;background:#08070a}
.lb__nav[disabled]{opacity:.3;cursor:not-allowed}
.lb__thumbs{display:flex;gap:8px;padding:0 14px 14px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.lb__thumbs button{width:74px;flex:none;border-radius:8px;overflow:hidden;border:2px solid transparent;opacity:.55;transition:opacity var(--dur-court)}
.lb__thumbs button[aria-current="true"]{border-color:var(--accent);opacity:1}

/* ---- ce que la visionneuse dit de chaque écran ----
   La visionneuse n'est plus une galerie : c'est une démonstration guidée, une
   phrase par écran, comme celle qu'on déroule devant un patron. Sans le texte,
   une capture de logiciel de caisse ne se lit pas — on voit des chiffres, on ne
   voit pas ce qu'ils remplacent. */
.lb__dit{
  flex:none;margin:0 14px 12px;padding:14px 16px;border-radius:var(--r-moyen);
  background:#131118;border:1px solid rgba(244,241,234,.14);
  color:#d8d4cc;font-size:.94rem;line-height:1.55;
}
.lb__dit b{color:#f4f1ea}
.lb__pied{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:0 14px 14px;
}
.lb__jauge{flex:1;min-width:120px;height:3px;border-radius:3px;background:rgba(244,241,234,.16);overflow:hidden}
.lb__jauge i{display:block;height:100%;background:var(--accent);transition:width .3s var(--ease)}
.lb__etape{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:#8c8985;flex:none}
.lb__pas{
  flex:none;padding:9px 16px;border-radius:100px;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(244,241,234,.40);color:#f4f1ea;background:#08070a;
}
.lb__pas--suite{background:var(--accent);border-color:var(--accent);color:#0d0c11;font-weight:700}
.lb__pas[disabled]{opacity:.3;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .lb__pas:hover{border-color:var(--accent);color:var(--accent-2)}
  .lb__pas--suite:hover{color:#0d0c11;filter:brightness(1.08)}
}

/* ---- la pastille « démonstration au clic » sur un cadre navigateur ----
   Elle est en haut à gauche, à l'opposé de l'indice de défilement : les deux
   doivent pouvoir cohabiter sans se recouvrir. */
.browser__demo{
  position:absolute;left:14px;top:58px;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  /* ⚠️ `--sur-accent` et pas une couleur en dur. L'accent change avec la
     teinte ET avec `.clair` : une encre figée passe à 3,18:1 sur les pages
     artisans, commerces et restaurants, où l'accent devient sombre.
     Trouvé par le contrôle de contraste du 7 septembre 2026. */
  background:var(--accent);color:var(--sur-accent);font-weight:700;
  border-radius:100px;padding:7px 13px;box-shadow:0 10px 24px -12px rgba(0,0,0,.7);
}
.browser__demo svg{width:12px;height:12px}
.browser[data-gallery]{cursor:pointer}

@media (max-width:700px){
  .lb__nav{display:none}
  .lb__panel{max-height:94dvh}
}

/* ============================ RÉVÉLATIONS ============================ */
/* Masquées uniquement si le JS tourne (classe .js posée par le script du head).
   Sans ce garde-fou, un JS mort donnerait une page vide, sans aucune erreur. */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.is-in{opacity:1;transform:none;transition:opacity var(--dur-long) var(--ease),transform var(--dur-long) var(--ease)}

/* ============================ MOUVEMENT RÉDUIT ============================ */
/* Rendu statique digne : rien ne disparaît, rien ne bouge. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .rv{opacity:1!important;transform:none!important}
  .marquee__track{animation:none;transform:none}
  .browser:hover .browser__page{transform:none;transition-delay:0s}
  .browser__video{animation:none!important;opacity:0}
  .browser__view{overflow-y:auto}
  .flame,.hero__kicker .dot{animation:none}
  .hero__embers{display:none}
}

/* ============================ IMPRESSION ============================ */
@media print{
  .nav,.marquee,.grain,.hero__embers,.lb,.cta,.skip{display:none!important}
  body{background:#fff;color:#000}
  .prose a::after{content:" (" attr(href) ")";font-size:.8em}
}

/* =============================================================================
   11. TEINTES DE SECTION, SCHÉMAS, GRAPHIQUES ET MICRO-INTERACTIONS
   Ajouté le 20 août 2026, sur demande explicite de Tom : plus de couleur,
   des schémas, des graphiques, et une réaction visible à chaque survol.

   LE PRINCIPE, ET IL N'EST PAS NÉGOCIABLE : la braise reste la couleur de la
   marque. Les trois teintes ajoutées ne s'y superposent pas, elles se
   RELAIENT — une section porte une seule teinte, et la porte entièrement.
   La rareté de la couleur exigée par la DA est préservée : ce n'est pas
   « de l'orange partout », c'est un accent par sujet.

   Le mécanisme est celui de .clair : on bascule les JETONS, pas les règles.
   Aucune règle de rattrapage n'existe, et aucune ne doit être écrite.
   ============================================================================= */

/* ---- Teinte « données » : sécurité, confidentialité, conformité ----
   Contrastes mesurés sur la nuit #08070a le 20 août 2026 :
   #2ED9C4 → 11,33:1 · #7DEBDD → 14,16:1 · #B9F5EE → 16,61:1 */
[data-teinte="donnees"]{
  --accent:#2ED9C4; --accent-2:#7DEBDD; --accent-3:#B9F5EE; --sur-accent:#04120f;
  --accent-grad:linear-gradient(115deg,#2ED9C4,#7DEBDD 45%,#B9F5EE);
  --halo:rgba(46,217,196,.16);
}
/* Sur papier, la version claire ne fait que 2,3:1 : il faut la teinte sombre.
   #0A6A5E sur #f4f1ea → 5,75:1 */
.clair[data-teinte="donnees"],[data-teinte="donnees"] .clair{
  --accent:#0A6A5E; --accent-2:#0A6A5E; --accent-3:#074E45; --sur-accent:#ffffff;
}

/* ---- Teinte « métier » : applications, logiciels, tableaux de bord ----
   #9B8CFF → 7,26:1 · #C0B6FF → 10,89:1 · #E2DCFF → 15,23:1 */
[data-teinte="metier"]{
  --accent:#9B8CFF; --accent-2:#C0B6FF; --accent-3:#E2DCFF; --sur-accent:#0a0616;
  --accent-grad:linear-gradient(115deg,#9B8CFF,#C0B6FF 45%,#E2DCFF);
  --halo:rgba(155,140,255,.18);
}
/* #5A3FD6 sur #f4f1ea → 5,97:1 */
.clair[data-teinte="metier"],[data-teinte="metier"] .clair{
  --accent:#5A3FD6; --accent-2:#5A3FD6; --accent-3:#4530A8; --sur-accent:#ffffff;
}

/* ---- Teinte « terrain » : ce qui est en service, en ligne, validé ----
   #5FD98A → 11,27:1 · #93E8B0 → 13,79:1 · #C6F5D6 → 16,68:1 */
[data-teinte="terrain"]{
  --accent:#5FD98A; --accent-2:#93E8B0; --accent-3:#C6F5D6; --sur-accent:#03130a;
  --accent-grad:linear-gradient(115deg,#5FD98A,#93E8B0 45%,#C6F5D6);
  --halo:rgba(95,217,138,.16);
}
/* #136B39 sur #f4f1ea → 5,84:1 */
.clair[data-teinte="terrain"],[data-teinte="terrain"] .clair{
  --accent:#136B39; --accent-2:#136B39; --accent-3:#0D5029; --sur-accent:#ffffff;
}

/* Le halo par défaut, quand aucune teinte n'est posée : la braise. */
:root{--halo:rgba(255,77,23,.15)}

/* Un liseré de teinte en tête de section colorée : c'est lui qui fait
   comprendre, sans une ligne de texte, qu'on a changé de sujet. */
.section[data-teinte]{position:relative}
.section[data-teinte]::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.7;
}

/* ============================ 11.1 RÉVÉLATIONS EN CASCADE ============================ */
/* Décalage de 70 ms par enfant, huit au maximum : au-delà, le dernier arrive
   après que l'œil est déjà reparti. */
.js .cascade > *{opacity:0;transform:translateY(18px)}
.js .cascade.is-in > *{
  opacity:1;transform:none;
  transition:opacity .52s var(--ease),transform .52s var(--ease);
}
.js .cascade.is-in > *:nth-child(1){transition-delay:0ms}
.js .cascade.is-in > *:nth-child(2){transition-delay:70ms}
.js .cascade.is-in > *:nth-child(3){transition-delay:140ms}
.js .cascade.is-in > *:nth-child(4){transition-delay:210ms}
.js .cascade.is-in > *:nth-child(5){transition-delay:280ms}
.js .cascade.is-in > *:nth-child(6){transition-delay:350ms}
.js .cascade.is-in > *:nth-child(7){transition-delay:420ms}
.js .cascade.is-in > *:nth-child(n+8){transition-delay:490ms}

/* ============================ 11.2 MICRO-INTERACTIONS ============================ */
/* La grammaire, en un endroit. Toute réaction au survol ou au clic ajoutée
   ailleurs dans ce fichier est une divergence à corriger, pas une variante. */

/* --- Boutons : un reflet qui traverse, et un enfoncement franc --- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover::after{transform:translateX(120%);transition:transform .62s var(--ease)}
  .btn--fire:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--accent),0 22px 46px -18px var(--halo)}
  .btn--ghost:hover{background:var(--halo)}
}
.btn:active{transform:translateY(0) scale(.97)}

/* L'onde au clic. Le point de départ est posé en JS par le CSSOM
   (element.style.setProperty), pas par un attribut style= : la
   Content-Security-Policy interdit le second, jamais le premier. */
.onde{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%);
  width:18px;height:18px;margin:-9px 0 0 -9px;
  transform:scale(0);opacity:.9;
  animation:onde .58s var(--ease) forwards;
}
@keyframes onde{to{transform:scale(9);opacity:0}}

/* --- Liens de texte : un soulignement qui se dessine, jamais qui apparaît --- */
.lien-anime{position:relative;color:var(--accent-2)}
.lien-anime::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
@media (hover:hover) and (pointer:fine){.lien-anime:hover::after{transform:scaleX(1)}}
.lien-anime:focus-visible::after{transform:scaleX(1)}

/* --- Navigation : même soulignement, sur tous les liens --- */
.nav__links a::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
@media (hover:hover) and (pointer:fine){.nav__links a:hover::before{transform:scaleX(1)}}
.nav__links a:focus-visible::before{transform:scaleX(1)}

/* --- Cartes : élévation, liseré de teinte, et une lueur qui suit le curseur ---
   La lueur est purement décorative et n'existe qu'à la souris fine. Elle ne
   porte aucune information : au doigt, il ne manque rien. */
.carte{position:relative;overflow:hidden;isolation:isolate}
.carte::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent-grad);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.carte::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--halo),transparent 70%);
  transition:opacity .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .carte:hover::before{transform:scaleX(1)}
  .carte:hover::after{opacity:1}
  .carte:hover{border-color:var(--ligne-2);transform:translateY(-4px);box-shadow:var(--ombre-2)}
  .carte:hover .carte__num{color:var(--accent-2)}
}
.carte:focus-within::before{transform:scaleX(1)}
.carte__num{transition:color var(--dur-court)}

/* --- Flèche des liens d'action : elle avance, elle ne grandit pas --- */
/* ---- « Vérifiez vous-même » ----
   Le bloc qui rend les affirmations techniques de securite.html démontrables.
   Il doit avoir l'air d'une note de bas de page sérieuse, pas d'un encart
   promotionnel : c'est ce qui le rend crédible. */
.verif{
  margin-top:clamp(32px,5vw,52px);padding:clamp(22px,3vw,34px);
  border:1px solid var(--ligne);border-left:2px solid var(--accent);
  border-radius:0 var(--r-grand) var(--r-grand) 0;background:var(--fond-2);
}
.clair .verif{background:var(--fond-3)}
.verif__titre{
  font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.5rem);
  text-transform:uppercase;font-weight:400;margin:0 0 14px;color:var(--texte);
}
.verif p{color:var(--texte-doux);max-width:68ch}
.verif__cmd{
  margin:16px 0;padding:14px 16px;border-radius:var(--r-moyen);
  background:var(--fond);border:1px solid var(--ligne-2);
  font-size:.86rem;color:var(--accent-2);overflow-x:auto;white-space:nowrap;
}
.verif__var{color:var(--texte-faible)}
.verif__date{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--ligne);
  font-size:.72rem;color:var(--texte-faible)
}

/* ---- « Ce que la gérante gagne concrètement » ----
   Le passage fonctionnalité -> bénéfice, demandé par Tom le 5 septembre 2026.
   Volontairement plus sobre que le reste du cas : c'est une liste qu'on lit,
   pas une liste qu'on admire. Le filet à gauche la rattache au texte. */
.gains{
  margin:26px 0 22px;padding:18px 20px;
  border-left:2px solid var(--accent);
  border-radius:0 var(--r-moyen) var(--r-moyen) 0;
  background:var(--fond-2);
}
.clair .gains{background:var(--fond-3)}
.gains__titre{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;color:var(--accent-2);margin:0 0 12px;
}
.gains__liste{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gains__liste li{
  position:relative;padding-left:20px;color:var(--texte);
  font-size:1rem;line-height:1.5;
}
/* Le repère est un vrai caractère posé en CSS, pas une puce de liste : il
   garde sa couleur d'accent et il ne se lit pas deux fois au lecteur d'écran. */
.gains__liste li::before{
  content:"›";position:absolute;left:2px;top:-1px;
  color:var(--accent);font-weight:700;
}

/* Le lien vers le vrai site du client. Action SECONDAIRE, en retrait de la
   démonstration : celle-ci raconte les 6 pages sans faire quitter le site.
   La flèche monte vers la droite, convention du lien sortant. */
.case__cta--ext{margin-top:10px;color:var(--texte-doux);font-weight:400}
@media (hover:hover) and (pointer:fine){
  .case__cta--ext:hover{color:var(--accent-2);border-color:currentColor}
  .case__cta--ext:hover i{transform:translate(3px,-3px)}
}
.case__cta--ext i{transition:transform .24s var(--ease)}

.case__cta i{display:inline-block;transition:transform .24s var(--ease)}
@media (hover:hover) and (pointer:fine){.case__cta:hover i{transform:translateX(5px)}}
.case__cta:focus-visible i{transform:translateX(5px)}

/* --- Étapes : le numéro prend la teinte et se décale au survol --- */
.step{position:relative;overflow:hidden;transition:border-color var(--dur-court),transform var(--dur-court) var(--ease)}
.step__num{transition:transform .28s var(--ease),opacity .28s}
@media (hover:hover) and (pointer:fine){
  .step:hover{border-color:var(--ligne-2);transform:translateX(4px)}
  .step:hover .step__num{transform:scale(1.14);opacity:1}
}

/* --- FAQ : le signe tourne au lieu de changer de caractère --- */
.qa summary::after{transition:transform .26s var(--ease)}
.qa[open] summary::after{content:"+";transform:rotate(45deg)}

/* --- Étiquettes de commune et de brique : elles s'allument une par une --- */
.communes li,.case__meta li{transition:border-color var(--dur-court),color var(--dur-court),transform var(--dur-court) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .communes li:hover,.case__meta li:hover{border-color:var(--accent);color:var(--accent-2);transform:translateY(-2px)}
}

/* --- Cadre navigateur : il s'incline très légèrement et prend la teinte --- */
.browser{transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
@media (hover:hover) and (pointer:fine){
  .case__visual:hover .browser{transform:translateY(-4px);border-color:var(--accent);
    box-shadow:0 34px 70px -30px var(--halo),var(--ombre-2)}
}

/* ============================ 11.3 SCHÉMAS ============================ */
/* SVG en ligne, jamais une image : il hérite des jetons de couleur, reste net
   à tous les zooms, et se lit au lecteur d'écran par son <title>. */
.schema{
  margin-top:clamp(32px,5vw,56px);border:1px solid var(--ligne);border-radius:var(--r-grand);
  background:var(--fond-2);padding:clamp(20px,3vw,40px);
}
.clair .schema{background:var(--fond-3)}
.schema svg{width:100%;height:auto;display:block;overflow:visible}
.schema__legende{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--ligne);
  font-family:var(--mono);font-size:.76rem;color:var(--texte-faible);
}
.schema__legende span{display:inline-flex;align-items:center;gap:.5rem}
.schema__legende i{width:10px;height:10px;border-radius:3px;background:var(--accent);flex:none}

/* Les traits du schéma se dessinent à la révélation, une seule fois.
   stroke-dashoffset est l'une des deux exceptions admises à la règle
   transform/opacity : elle ne recalcule aucune mise en page. */
/* Sans JS, --l n'est jamais posé : dasharray vaut none et le trait est plein.
   C'est volontaire — un schéma qui disparaît quand un script échoue est un
   schéma cassé, pas un schéma sobre. */
.trait{stroke:var(--ligne-2);stroke-width:1.5;fill:none;
  stroke-dasharray:var(--l,none);stroke-dashoffset:var(--l,0)}
.js .schema.is-in .trait{animation:tracer .9s var(--ease) forwards}
.js .schema.is-in .trait--2{animation-delay:.18s}
.js .schema.is-in .trait--3{animation-delay:.36s}
.js .schema.is-in .trait--4{animation-delay:.54s}
@keyframes tracer{to{stroke-dashoffset:0}}
.trait--vif{stroke:var(--accent);stroke-width:2}

.noeud rect,.noeud circle{fill:var(--fond-3);stroke:var(--ligne-2);stroke-width:1.5;
  transition:fill .24s var(--ease),stroke .24s var(--ease)}
.clair .noeud rect,.clair .noeud circle{fill:var(--fond)}
.noeud text{fill:var(--texte);font-family:var(--sans);font-size:14px;font-weight:700}
.noeud .sous{fill:var(--texte-faible);font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.06em}
.noeud{cursor:pointer}
.noeud:hover rect,.noeud:hover circle,.noeud:focus-visible rect,.noeud[aria-pressed="true"] rect{
  fill:var(--halo);stroke:var(--accent);
}
/* L'état ne se lit jamais par la seule couleur : le nœud actif porte aussi
   une pastille. Huit pour cent des hommes ne distinguent pas le rouge du vert. */
/* Le bloc « hors catalogue ». En pointillés, parce qu'il ne décrit pas une
   pièce déjà construite : il décrit une porte ouverte. La différence se lit
   au trait, pas seulement à la couleur. */
.noeud--ouvert rect{stroke:var(--accent);stroke-dasharray:7 5;fill:none}
.clair .noeud--ouvert rect{fill:none}
.noeud--ouvert text{fill:var(--accent-2)}
.noeud--ouvert .sous{fill:var(--accent)}

.noeud .marque{opacity:0;transition:opacity .24s}
.noeud[aria-pressed="true"] .marque{opacity:1}

.schema__dit{
  margin-top:20px;min-height:3.4em;color:var(--texte-doux);font-size:.97rem;max-width:70ch;
}
.schema__dit b{color:var(--accent-2)}

/* ============================ 11.4 GRAPHIQUE EN BARRES ============================ */
/* Il ne porte QUE des valeurs mesurées sur ce site, à une date écrite.
   La DA interdit les chiffres de performance inventés : elle n'interdit pas
   de montrer ce qu'on a réellement mesuré chez soi. */
.jauges{list-style:none;display:grid;gap:14px;margin-top:clamp(28px,4vw,44px)}
.jauge{display:grid;grid-template-columns:minmax(0,10.5rem) 1fr auto;gap:14px;align-items:center}
.jauge__nom{font-size:.92rem;color:var(--texte-doux)}
.jauge__piste{height:12px;border-radius:100px;background:var(--fond-3);border:1px solid var(--ligne);overflow:hidden}
.clair .jauge__piste{background:var(--fond-2)}
.jauge__barre{
  height:100%;border-radius:100px;background:var(--accent-grad);
  transform:scaleX(var(--part,0));transform-origin:left;
}
.js .jauges .jauge__barre{transform:scaleX(0)}
.js .jauges.is-in .jauge__barre{
  transform:scaleX(var(--part,0));
  transition:transform .82s var(--ease);
}
.js .jauges.is-in .jauge:nth-child(2) .jauge__barre{transition-delay:70ms}
.js .jauges.is-in .jauge:nth-child(3) .jauge__barre{transition-delay:140ms}
.js .jauges.is-in .jauge:nth-child(4) .jauge__barre{transition-delay:210ms}
.js .jauges.is-in .jauge:nth-child(5) .jauge__barre{transition-delay:280ms}
.js .jauges.is-in .jauge:nth-child(6) .jauge__barre{transition-delay:350ms}
.jauge__val{font-family:var(--mono);font-size:.86rem;color:var(--texte);white-space:nowrap}
.jauge__ref{
  margin-top:18px;font-family:var(--mono);font-size:.76rem;color:var(--texte-faible);
  border-top:1px solid var(--ligne);padding-top:14px;
}
@media (max-width:620px){
  .jauge{grid-template-columns:1fr auto;grid-template-areas:"nom val" "piste piste"}
  .jauge__nom{grid-area:nom}.jauge__val{grid-area:val}.jauge__piste{grid-area:piste}
}

/* ============================ 11.5 CHIFFRES-CLÉS ============================ */
/* Statiques. La DA refuse les compteurs qui défilent : un chiffre qui monte
   est un chiffre qu'on n'a pas cru bon d'expliquer. Ceux-ci sont écrits dans
   le HTML, et seule la carte qui les porte se révèle. */
.faits{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:clamp(14px,2vw,22px);margin-top:clamp(28px,4vw,48px)}
.fait{
  border:1px solid var(--ligne);border-radius:var(--r-moyen);padding:clamp(20px,2.4vw,28px);
  background:var(--fond-2);position:relative;overflow:hidden;
  transition:border-color var(--dur-court),transform var(--dur-court) var(--ease);
}
.clair .fait{background:var(--fond-3)}
.fait b{display:block;font-family:var(--display);font-size:clamp(2rem,4.6vw,3.2rem);
  line-height:1;font-weight:400;color:var(--accent-3);letter-spacing:-.01em}
.clair .fait b{color:var(--accent)}
.fait span{display:block;margin-top:12px;font-size:.9rem;color:var(--texte-doux)}
.fait i{display:block;margin-top:8px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texte-faible);font-style:normal}
@media (hover:hover) and (pointer:fine){
  .fait:hover{border-color:var(--accent);transform:translateY(-4px)}
}

/* ============================ 11.6 ASSEMBLAGE DE BRIQUES ============================ */
/* Interactif et sans prix : c'est la démonstration de « des briques, pas des
   formules ». Le visiteur compose, il ne choisit pas dans un menu figé. */
.briques{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(22px,3vw,40px);margin-top:clamp(32px,5vw,56px);align-items:start}
.briques__choix{display:flex;flex-wrap:wrap;gap:10px}
.brique{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid var(--ligne-action);border-radius:100px;padding:11px 18px;
  font-size:.92rem;color:var(--texte-doux);background:var(--fond-2);
  transition:border-color var(--dur-court),color var(--dur-court),
             background-color var(--dur-court),transform var(--dur-court) var(--ease);
}
.clair .brique{background:var(--fond-3)}
.brique::before{
  content:"+";font-family:var(--mono);color:var(--accent);font-size:1.05rem;line-height:1;
  transition:transform .26s var(--ease);
}
.brique[aria-pressed="true"]{background:var(--accent);color:var(--sur-accent);border-color:var(--accent)}
.brique[aria-pressed="true"]::before{content:"+";color:var(--sur-accent);transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){
  .brique:hover{border-color:var(--accent);color:var(--texte);transform:translateY(-2px)}
  .brique[aria-pressed="true"]:hover{color:var(--sur-accent)}
}
.briques__pile{
  border:1px solid var(--ligne-2);border-radius:var(--r-grand);background:var(--fond-2);
  padding:clamp(20px,2.6vw,30px);min-height:230px;
}
.clair .briques__pile{background:var(--fond-3)}
.briques__pile h3{font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:var(--t-sous-titre);margin-bottom:6px}
.briques__vide{color:var(--texte-faible);font-size:.94rem}
.briques__liste{list-style:none;display:grid;gap:8px;margin-top:16px}
.briques__liste li{
  display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.84rem;
  color:var(--texte-doux);border-bottom:1px solid var(--ligne);padding-bottom:8px;
  animation:monte .34s var(--ease) backwards;
}
.briques__liste li::before{content:"▸";color:var(--accent);flex:none}
@keyframes monte{from{opacity:0;transform:translateY(8px)}}
.briques__note{margin-top:18px;font-size:.9rem;color:var(--texte-faible);max-width:38ch}
@media (max-width:860px){.briques{grid-template-columns:1fr}}

/* ============================ 11.7 BLOC « CE QUI VOUS PROTÈGE » ============================ */
.garde{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(14px,2vw,20px);margin-top:clamp(32px,5vw,56px);
}
.garde__item{
  border:1px solid var(--ligne);border-radius:var(--r-moyen);padding:clamp(20px,2.4vw,28px);
  background:var(--fond-2);position:relative;
  transition:border-color var(--dur-court),transform var(--dur-court) var(--ease);
}
.clair .garde__item{background:var(--fond-3)}
.garde__item h3{margin:14px 0 8px}
.garde__item p{color:var(--texte-doux);font-size:.95rem}
.garde__ico{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--ligne-2);color:var(--accent-2);
  transition:transform .3s var(--ease),border-color var(--dur-court),background-color var(--dur-court);
}
.garde__ico svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){
  .garde__item:hover{border-color:var(--accent);transform:translateY(-4px)}
  .garde__item:hover .garde__ico{transform:rotate(-8deg) scale(1.08);border-color:var(--accent);background:var(--halo)}
}
.garde__code{
  font-family:var(--mono);font-size:.76rem;color:var(--texte-faible);
  margin-top:14px;padding-top:12px;border-top:1px solid var(--ligne);
  word-break:break-word;line-height:1.7;
}
.garde__code b{color:var(--accent-2);font-weight:400}

/* ============================ 11.8 MOUVEMENT RÉDUIT, SUITE ============================ */
/* Cette liste est le complément obligatoire du bloc de la section 10.
   La règle qu'on oublie n'est pas « couper le mouvement », c'est « ne rien
   faire disparaître » : sans elle, une transition neutralisée laisse le
   contenu à opacity:0 et la page est vide pour qui a demandé moins de
   mouvement. Toute cascade ajoutée plus tard se remet ici, sans exception. */
@media (prefers-reduced-motion:reduce){
  .js .cascade > *{opacity:1!important;transform:none!important}
  .js .jauges .jauge__barre{transform:scaleX(var(--part,0))!important}
  .js .schema .trait{stroke-dashoffset:0!important;animation:none!important}
  .briques__liste li{animation:none!important}
  .btn::after{display:none}
  .onde{display:none}
  .carte::after{display:none}
}

/* ---- deux cadres pour un même client : le site, puis le logiciel ---- */
.duo{display:grid;gap:clamp(14px,2vw,20px)}
.duo .browser__view{height:clamp(220px,26vw,320px)}
.duo__titre{
  font-family:var(--mono);font-size:var(--t-etiquette);letter-spacing:.16em;
  text-transform:uppercase;color:var(--texte-faible);margin-bottom:8px;display:block;
}

/* ---- Largeurs de barre du graphique de poids ----
   En classes plutôt qu'en variable posée en JS : le graphique doit être juste
   même si le script ne tourne pas. La CSP interdit l'attribut style=, et une
   barre à zéro sans JS mentirait dans l'autre sens. */
.jauge__barre--p64{--part:.64}
.jauge__barre--p69{--part:.69}
.jauge__barre--p78{--part:.78}
.jauge__barre--p83{--part:.83}
/* Remesuré le 4 septembre 2026 : les pages ont pris 6 Ko avec la
   démonstration guidée. Les anciennes classes p64/p69/p78 restent, elles
   ne servent plus. */
.jauge__barre--p68{--part:.68}
.jauge__barre--p74{--part:.74}
.jauge__barre--p82{--part:.82}
.jauge__barre--p90{--part:.90}
/* Remesuré le 6 septembre 2026, après le passage des visuels en pleine
   qualité. Les anciennes classes restent, elles ne servent plus. */
.jauge__barre--p70{--part:.70}
.jauge__barre--p77{--part:.77}
.jauge__barre--p84{--part:.84}
.jauge__barre--p85{--part:.85}
.jauge__barre--p93{--part:.93}
.jauge__barre--p71{--part:.71}

/* ---- Le schéma sur un téléphone ----
   Mesuré le 20 août 2026 : à 375 px de large, un nœud du schéma tombait à
   24 px de haut, soit sous la taille minimale d'une cible tactile. Plutôt que
   de réduire le schéma jusqu'à l'illisible, on le laisse à sa taille et on
   fait défiler le cadre. Le doigt retrouve 45 px de haut. */
.schema__cadre{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media (max-width:760px){
  .schema__cadre{margin-inline:calc(var(--gutter) * -.4);padding-inline:calc(var(--gutter) * .4)}
  .schema__cadre svg{min-width:560px}
  .schema__cadre::after{content:""}
}

/* L'indice de défilement du schéma. Il n'existe que là où le schéma déborde
   vraiment, c'est-à-dire sur écran étroit : afficher « faites glisser » sur un
   schéma qui tient en entier est un mensonge d'interface. */
.schema__glisse{display:none}
@media (max-width:760px){
  .schema__glisse{
    display:block;margin-top:10px;
    font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--texte-faible);
  }
  .schema__glisse::before{content:"↔ ";color:var(--accent)}
}