/* Hallmark · macrostructure: studied (Pletor : premier écran centré à trois plans → bande → feuille → panneau à onglets → onglets à filet → bande sombre → cases → prix → FAQ 4/8 → appel sur photo) · tone: brutaliste sobre · anchor hue: 266
 * theme: studied-DNA (source: pletor.ai) · paper oklch(91% 0 0) · accent oklch(45% 0.29 266) · studied: yes · DNA-source: url
 * source-url: https://www.pletor.ai/ · observed-fonts: Inter (remplacée par Archivo + Chivo Mono) · observed-accent: #ff4901 (remplacé par l'outremer)
 * nav: N5 capsule flottante · footer: Ft5 carte sombre + logo géant
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--color-encre);
  background: var(--color-feuille);
  font: 400 var(--t-body)/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--color-bleu); color: var(--color-blanc); }
[id] { scroll-margin-top: 110px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.sombre :focus-visible, .pied :focus-visible { outline-color: var(--color-focus-nuit); }

.evitement {
  position: absolute; left: var(--s-16); top: -100px; z-index: 300;
  padding: var(--s-8) var(--s-16); background: var(--color-encre); color: var(--color-blanc); text-decoration: none;
}
.evitement:focus-visible { top: var(--s-16); }

.conteneur { width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 var(--marge); }

/* ---------- textes ---------- */
.surtitre {
  display: flex; align-items: center; gap: var(--s-8);
  margin-bottom: var(--s-24);
  font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-texte-2);
}
.surtitre::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }
.h2 {
  font: 800 expanded var(--t-titre)/1.12 var(--font-display);
  letter-spacing: -0.03em;
  max-width: 22ch;
  text-wrap: balance; overflow-wrap: anywhere; min-width: 0;
}
.h2--md { font-size: var(--t-titre-md); }
.sous-titre { font: 400 var(--t-heading-sm)/1.45 var(--font-body); max-width: 57ch; text-wrap: pretty; }
.texte { color: var(--color-texte-2); max-width: 57ch; text-wrap: pretty; }
.source { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-court) ease; }
.source:hover { color: var(--color-bleu); }
.sombre .source:hover { color: var(--color-bleu-sur-nuit); }
.lien { color: var(--color-encre); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; transition: color var(--dur-court) ease; }
.lien:hover { color: var(--color-bleu); }

/* ---------- boutons (Pletor) ---------- */
.btn {
  --b-fond: transparent; --b-bord: var(--color-encre); --b-texte: var(--color-encre);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: var(--s-48); padding: 0 1.25rem;
  border: var(--bord) solid var(--b-bord); border-radius: var(--r-bouton);
  background: var(--b-fond); color: var(--b-texte);
  font: 500 var(--t-body)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-court) ease, border-color var(--dur-court) ease, color var(--dur-court) ease;
}
.btn--petit { height: 44px; padding: 0 1rem; font-size: var(--t-small); }
.btn--plein { --b-fond: var(--color-encre); --b-bord: var(--color-encre); --b-texte: var(--color-blanc); }
.btn--plein:hover, .btn--plein:focus-visible { --b-fond: var(--color-bleu); --b-bord: var(--color-bleu); }
.btn--creux:hover, .btn--creux:focus-visible { --b-bord: var(--color-bleu); --b-texte: var(--color-bleu); }
.btn:focus-visible { outline: 2px solid var(--color-encre); outline-offset: 3px; }
.btn:active { --b-fond: var(--color-bleu-presse); --b-bord: var(--color-bleu-presse); --b-texte: var(--color-blanc); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.sombre .btn--plein { --b-fond: var(--color-bleu); --b-bord: var(--color-bleu); }
.sombre .btn--plein:hover { --b-fond: var(--color-bleu-presse); --b-bord: var(--color-bleu-presse); }
.sombre .btn--creux { --b-bord: var(--color-filet-nuit-fort); --b-texte: var(--color-texte-nuit); }
.sombre .btn--creux:hover { --b-bord: var(--color-bleu-sur-nuit); --b-texte: var(--color-bleu-sur-nuit); }
.sombre .btn:focus-visible { outline-color: var(--color-texte-nuit); }

/* ---------- logo ---------- */
.logo {
  display: inline-flex; align-items: baseline; gap: 0.08em;
  font: 800 semi-expanded 1.5rem/1 var(--font-display); letter-spacing: -0.03em;
  color: var(--color-encre); text-decoration: none;
}
.logo__carre { width: 0.24em; height: 0.24em; background: var(--color-bleu); flex: none; }
/* sur fond sombre, le carré passe au bleu clair (direction artistique) */
.logo--nuit .logo__carre { background: var(--color-bleu-sur-nuit); }
.logo--petit { font-size: 1rem; }
.logo--nuit { color: var(--color-texte-nuit); font-size: 1.6rem; }

/* ---------- navigation : capsule flottante ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; pointer-events: none; padding-top: clamp(1rem, 0.857rem + 0.714vw, 1.5rem); }
.nav__capsule {
  pointer-events: auto; position: relative;
  width: min(calc(100% - 2 * var(--marge) - 16px), 77rem); height: 64px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  padding: 8px 8px 8px 20px;
  background: var(--color-verre-nav); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  border: 1px solid var(--color-filet); border-radius: var(--r-carte);
}
.nav__liens { display: flex; align-items: center; }
.nav__liens > a { padding: 0 var(--s-16); font-weight: 500; text-decoration: none; transition: color var(--dur-court) ease; }
.nav__liens > a:hover { color: var(--color-bleu); }
.nav__mobile-actions { display: none; }
.nav__actions { display: flex; align-items: center; }
.nav__texte { margin: 0 var(--s-16); font: 500 var(--t-small)/1 var(--font-mono); color: var(--color-texte-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-court) ease; }
.nav__texte:hover { color: var(--color-bleu); }
.nav__burger { display: none; width: 40px; height: 48px; padding: 12px 8px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 0.3rem; }
.nav__burger span { display: block; width: 24px; height: 1.5px; background: var(--color-encre); transition: transform var(--dur-court) ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(0.3rem + 1.5px)) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: scaleX(0); }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-0.3rem - 1.5px)) rotate(-45deg); }

/* ---------- 1 · premier écran ---------- */
/* le gris papier est peint par .fond-papier, fixe, derrière la page : les sections grises sont transparentes */
.fond-papier { position: fixed; inset: 0; z-index: -1; background: var(--color-papier); pointer-events: none; }
.fond-papier canvas { width: 100%; height: 100%; }
.hero { position: relative; height: 225vh; }
.hero__navette { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.hero__contenu {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-32);
  /* un peu plus de marge en haut qu’en bas : le titre descend sous les vignettes du haut */
  padding: 120px var(--marge) 80px;
  text-align: center; pointer-events: none;
}
.hero__contenu > * { pointer-events: auto; }
.pastille {
  display: inline-flex; align-items: center; gap: var(--s-8);
  height: 32px; padding: 0 12px 0 10px;
  font: 500 12px/1 var(--font-mono); letter-spacing: 0;
  background: var(--color-blanc); border-radius: var(--r-bouton);
}
.pastille__carre { width: 8px; height: 8px; background: var(--color-bleu); flex: none; }
.hero__titres { display: grid; gap: var(--s-24); justify-items: center; }
.hero__titre { font: 800 expanded var(--t-titre-hero)/1.08 var(--font-display); letter-spacing: -0.03em; max-width: 18ch; text-wrap: balance; }
.hero__titre .mot { display: inline-block; }
.hero__sous-titre { font: 400 var(--t-heading-sm)/1.3 var(--font-body); color: var(--color-texte-2); max-width: 40ch; }
.hero__intro { max-width: 44ch; margin-top: calc(-1 * var(--s-8)); font: 400 var(--t-body)/1.5 var(--font-body); color: var(--color-texte-2); text-align: center; }
.hero__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-8); }

.hero__toile { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
html:not(.js) .hero__toile { display: none; }
.carres { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.plan { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform; }
.plan--1 { z-index: 3; } .plan--2 { z-index: 2; } .plan--3 { z-index: 1; }
.piece { grid-area: 1 / 1; will-change: transform, opacity; }

.vig {
  position: relative; padding: 8px; background: var(--color-blanc);
  border: 1px solid var(--color-bord-vig); border-radius: var(--r-carte);
  box-shadow: 0 2px 6px var(--color-ombre-proche), 0 18px 40px -12px var(--color-ombre);
}
/* un cabinet fictif se dit : repère posé sur la capture */
.vig__modele { position: absolute; left: 14px; top: 14px; padding: 4px 7px; background: var(--color-encre); color: var(--color-blanc); border-radius: var(--r-bouton); font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.vig img { object-fit: cover; border-radius: var(--r-vignette); background: var(--color-papier-2); }
.vig--portrait img { height: 13.5rem; width: auto; aspect-ratio: 122 / 153; }
.vig--23 img { height: 15.5rem; width: auto; aspect-ratio: 2 / 3; }
.vig--carre img { height: 13.5rem; width: 13.5rem; }
.vig--pile img { height: 7.5rem; width: 7.5rem; }
/* l'empreinte bleue, la plus grande vignette ; les captures et les pièces en paysage */
.vig--vedette img { height: 18rem; width: auto; aspect-ratio: 4 / 5; }
.vig--paysage img { height: 9.5rem; width: auto; aspect-ratio: 4 / 3; }
.vig--capture img { aspect-ratio: 16 / 11; object-position: 0 0; }
.vig--radio img { object-position: 22% 50%; }
/* les captures du site Roussel, au format de l'écran (16:10) */
.vig--site img { height: 11rem; width: auto; aspect-ratio: 16 / 10; }
.vig--site-petit img { height: 8.5rem; width: auto; aspect-ratio: 16 / 10; }
.groupe { position: relative; }
.verre {
  position: absolute; z-index: 2;
  padding: 12px 14px;
  background: var(--color-verre); -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4);
  border: 1px solid var(--color-verre-bord); border-radius: var(--r-vignette);
  font: 500 12px/1.4 var(--font-body); text-align: left; color: var(--color-encre);
}
.verre__titre { margin-bottom: 8px; font: 500 10px/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
/* posé sur le coin bas droit de la photo : il en cache le moins possible */
.verre--rapport { right: -58%; bottom: -50%; width: 200px; }
.verre--rapport p:not(.verre__titre) { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--color-filet); }
.verre--rapport p:not(.verre__titre)::before { content: ""; width: 6px; height: 6px; background: var(--color-encre); flex: none; }
.verre--mesure { top: -42%; right: -22%; width: 156px; }
.verre__chiffre { font: 800 expanded 2.6rem/1 var(--font-display); letter-spacing: -0.03em; margin-bottom: 6px; }
.verre__source { margin-top: 6px; font: 500 10px/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texte-2); }
.dossier { position: relative; width: 11rem; height: 10rem; }
.dossier .vig { position: absolute; padding: 4px; }
.dossier .vig:nth-child(1) { left: 0; top: 6px; }
.dossier .vig:nth-child(2) { left: 1.6rem; top: 0; }
.dossier .vig:nth-child(3) { left: 3.2rem; top: 10px; }
.verre--dossier { left: -8%; right: -8%; bottom: 0; height: 58%; display: flex; align-items: flex-end; padding: 10px 14px; }
.verre--dossier::before { content: ""; position: absolute; left: -1px; top: -12px; width: 38%; height: 13px; background: inherit; border: inherit; border-bottom: 0; border-radius: var(--r-vignette) var(--r-vignette) 0 0; }
.verre--dossier span { font: 500 13px/1 var(--font-mono); }
.verre--graphe { position: relative; width: 11rem; padding: 10px; }
.verre--graphe svg { display: block; width: 100%; height: auto; }
.graphe-deco__grille path { stroke: var(--color-filet-fort); stroke-width: 1; fill: none; }
.graphe-deco__aire { fill: var(--color-bleu); opacity: 0.12; }
.graphe-deco__ligne { fill: none; stroke: var(--color-bleu); stroke-width: 3; stroke-linecap: round; }
.recherche {
  display: flex; align-items: center; gap: 8px;
  width: 22.6rem; height: 64px; padding: 16px;
  background: var(--color-verre-clair); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  border: 1px solid var(--color-verre-bord); border-radius: var(--r-carte);
}
.recherche__champ { flex: 1; height: 32px; display: flex; align-items: center; padding: 0 12px; background: var(--color-champ); border-radius: var(--r-bouton); font: 500 13px/1 var(--font-mono); color: var(--color-texte-2); text-align: left; }
.recherche__bouton { position: relative; width: 32px; height: 32px; background: var(--color-bleu); border-radius: var(--r-bouton); }
.recherche__bouton::after { content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px; border-top: 1.75px solid var(--color-blanc); border-right: 1.75px solid var(--color-blanc); transform: rotate(45deg); }

.hero__mobile { display: none; }

/* chargement du premier écran, du plan le plus lointain au plus proche */
@media (prefers-reduced-motion: no-preference) {
  .js .plan { opacity: 0; animation: apparait 1.5s var(--ease-out) forwards; }
  .js .plan--2 { animation-delay: 0.5s; }
  .js .plan--1 { animation-delay: 1s; }
  .js .hero__titre .mot { opacity: 0; transform: translateY(25px); animation: monte 0.8s var(--ease-out) forwards; }
  .js .hero__titre .mot:nth-child(2) { animation-delay: 0.05s; }
  .js .hero__titre .mot:nth-child(3) { animation-delay: 0.1s; }
  .js .hero__titre .mot:nth-child(4) { animation-delay: 0.15s; }
  .js .hero__titre .mot:nth-child(5) { animation-delay: 0.2s; }
  .js .hero__titre .mot:nth-child(6) { animation-delay: 0.25s; }
  .js .hero__titre .mot:nth-child(7) { animation-delay: 0.3s; }
  .js .hero__sous-titre { opacity: 0; transform: translateY(25px); animation: monte 0.8s var(--ease-out) 0.2s forwards; }
  .js .hero__intro { opacity: 0; transform: translateY(25px); animation: monte 0.8s var(--ease-out) 0.3s forwards; }
  .js .hero__boutons { opacity: 0; transform: translateY(15px); animation: monte 0.8s var(--ease-out) 0.3s forwards; }
}
@keyframes apparait { to { opacity: 1; } }
@keyframes monte { to { opacity: 1; transform: none; } }


/* ---------- 3 · la feuille blanche ---------- */
.feuille {
  position: relative; z-index: 2;
  margin-top: -6rem;
  padding: var(--sec-96) 0 var(--sec-144);
  background: var(--color-feuille-papier);
  border-radius: var(--r-feuille) var(--r-feuille) 0 0;
}
/* bloc 1, en trois rangées sur la grille de 12 colonnes :
   le titre et la situation ; les quatre questions côte à côte, séparées par des filets,
   chacune avec sa case qui se remplit de bleu quand le bloc entre dans l'écran ;
   l'accroche et le constat. Le bleu ne sert qu'au numéro d'index et aux cases. */
.avant { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-48) var(--gout); align-items: end; }
.avant__titre { grid-column: 1 / span 7; max-width: 14ch; }
.avant__situation { grid-column: 9 / -1; color: var(--color-texte-2); text-wrap: pretty; }
.questions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-16); border-top: 1px solid var(--color-encre); border-bottom: 1px solid var(--color-encre); }
.questions li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; align-content: start; gap: var(--s-16) var(--s-8);
  padding: var(--s-24) var(--s-24) var(--s-32);
  border-left: 1px solid var(--color-filet-fort);
}
.questions li:first-child { padding-left: 0; border-left: 0; }
.questions li:last-child { padding-right: 0; }
.questions__num { grid-column: 1; grid-row: 1; font: 500 12px/14px var(--font-mono); letter-spacing: 0.04em; color: var(--color-texte-2); }
.questions__case { grid-column: 2; grid-row: 1; width: 14px; height: 14px; border: var(--bord) solid var(--color-encre); background: var(--color-bleu); }
.questions__q { grid-column: 1 / -1; grid-row: 2; font: 500 var(--t-heading-lg)/1.15 var(--font-body); letter-spacing: -0.02em; color: var(--color-encre); text-wrap: balance; min-width: 0; }
/* la réponse que le site apporte, sous la question du patient */
.questions__r { grid-column: 1 / -1; grid-row: 3; font-size: var(--t-small); line-height: 1.5; color: var(--color-texte-2); text-wrap: pretty; }
.avant__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-24) var(--s-48); }
.avant__accroche { font: 800 expanded var(--t-heading-md)/1.15 var(--font-display); letter-spacing: -0.03em; color: var(--color-encre); max-width: 26ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .questions__case { background: transparent; transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); transition-delay: calc(var(--i) * 0.28s + 0.2s); }
  .js .questions.est-vu .questions__case { background: var(--color-bleu); border-color: var(--color-bleu); }
}
@media (prefers-reduced-motion: reduce) { .questions__case { border-color: var(--color-bleu); } }
@media (max-width: 991px) {
  .avant { gap: var(--s-24) var(--gout); }
  .avant__titre, .avant__situation { grid-column: 1 / -1; }
  .avant__situation { max-width: 40ch; }
  /* tablette : deux questions par rangée */
  .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-24); }
  .questions li:nth-child(3) { padding-left: 0; border-left: 0; }
  .questions li:nth-child(2) { padding-right: 0; }
  .questions li:nth-child(n+3) { border-top: 1px solid var(--color-filet-fort); }
}
@media (max-width: 599px) {
  /* téléphone : une question par rangée */
  .questions { grid-template-columns: minmax(0, 1fr); }
  .questions li { padding: var(--s-16) 0 var(--s-24); border-left: 0; }
  .questions li:nth-child(n+2) { border-top: 1px solid var(--color-filet-fort); }
  .avant__pied { gap: var(--s-16); }
}

/* ---------- 4 · le grand panneau ---------- */
.panneau { position: relative; height: 760vh; margin-top: var(--s-64); } /* course 660vh : voir les bornes dans bleu.js */
.panneau__collant { position: sticky; top: 12.5vh; }
.panneau__cadre { position: relative; height: 80vh; background: var(--color-teinte-papier); border-radius: var(--r-panneau); overflow: hidden; }
.panneau__visuels { position: absolute; inset: 0; }
.panneau__visuel {
  position: absolute; inset: 0 0 0 38%;
  opacity: 0; transform: translateX(64px) scale(0.92);
  transition: transform 0.7s var(--ease-in-out), opacity 0.55s ease-out;
}
.panneau__visuel.est-actif { opacity: 1; transform: none; }
/* onglet « Lu par Google » : la fiche et le site du même modèle */
.panneau__visuel .panneau__fiche { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: none; }
.panneau__visuel .panneau__fiche .fiche__site { width: min(70%, 62vh); }
/* onglet « Lu par les IA » : la vraie réponse de ChatGPT, dans un cadre de téléphone */
.panneau__ia { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-16); padding: var(--s-32); }
.panneau__ia .preuve__ecran { width: min(15rem, 40%); max-height: 78%; overflow: hidden; }
.panneau__ia img { display: block; width: 100%; height: auto; }
.panneau__ia-legende { max-width: 36ch; font-size: var(--t-small); line-height: 1.5; text-align: center; color: var(--color-texte-2); }
.panneau__film { width: 100%; height: 100%; object-fit: cover; background: var(--color-papier-2); }
.panneau__cartel { position: absolute; left: var(--s-24); right: var(--s-24); bottom: var(--s-24); display: grid; gap: var(--s-8); justify-items: start; }
.panneau__cartel span {
  padding: 8px 12px; font: 500 12px/1.3 var(--font-mono); color: var(--color-encre);
  background: var(--color-verre-clair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--r-bouton);
}
.panneau__cartel i { width: 100%; height: 2px; background: var(--color-verre-bord); position: relative; overflow: hidden; }
.panneau__cartel b { position: absolute; inset: 0; background: var(--color-blanc); transform-origin: 0 50%; transform: scaleX(0); }
/* l'information qui compte, en bleu : un seul accent par ligne */
/* onglet « Sur mesure » : trois modèles empilés en décalé, chacun avec sa palette réelle */
/* la pile tient dans son cadre quelle que soit la hauteur : --l est la largeur d'une carte,
   bornée par la largeur (pile de 1,6 carte) et par la hauteur (pile de 1,28 carte) */
.surmesure { position: absolute; inset: 5% 4% 5% 8%; container-type: size; }
.surmesure__site {
  --l: min(62cqw, 77cqh);
  position: absolute; width: var(--l);
  left: calc((100cqw - 1.6 * var(--l)) / 2 + var(--i) * 0.3 * var(--l));
  top: calc((100cqh - 1.28 * var(--l)) / 2 + var(--i) * 0.29 * var(--l));
}
.surmesure__site--orthodontie { --i: 0; }
.surmesure__site--enfants { --i: 1; }
.surmesure__site--chirurgie { --i: 2; }
.surmesure__site .vig img { display: block; width: 100%; height: auto; border-radius: calc(var(--r-carte) - 4px); }
.surmesure__plaque { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--color-blanc); border-radius: var(--r-bouton); font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.surmesure__plaque span { margin-right: 4px; }
.surmesure__plaque i { width: 12px; height: 12px; background: var(--c); border: 1px solid var(--color-filet-fort); }

.panneau__onglets { position: absolute; inset: 0 auto 0 0; z-index: 2; width: calc(25rem + 2 * var(--s-64)); max-width: 100%; padding: var(--s-64); display: flex; flex-direction: column; justify-content: center; gap: var(--s-16); }
.onglet {
  width: 100%; padding: var(--s-24) var(--s-32);
  background: var(--color-voile); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--r-carte);
}
.onglet__titre { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; font: 800 expanded var(--t-heading-sm)/1.3 var(--font-display); letter-spacing: -0.02em; transition: color var(--dur-court) ease; }
.onglet__titre:hover { color: var(--color-bleu); }
.onglet__titre .num { font: 500 11px/1 var(--font-mono); color: var(--color-texte-2); flex: none; }
.onglet__corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-moyen) var(--ease-in-out); }
.onglet__corps > div { overflow: hidden; }
.onglet.est-actif .onglet__corps { grid-template-rows: 1fr; }
.onglet__h3 { padding-top: var(--s-8); font: 600 var(--t-body)/1.35 var(--font-body); color: var(--color-encre); }
.onglet__corps p { padding-top: 8px; font-size: var(--t-body); line-height: 1.5; color: var(--color-encre); }
.onglet__source { font: 500 11px/1.4 var(--font-mono) !important; }

/* ---------- 5 · bloc 2 : la fiche et le site ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-64) var(--gout); align-items: center; margin-top: var(--sec-96); }
.fiche__visuel { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: var(--s-48); background: var(--color-teinte-papier); border-radius: var(--r-panneau); overflow: hidden; }
.fiche__site { position: absolute; top: 12%; right: 8%; width: 70%; }
.fiche__site img { width: 100%; height: auto; aspect-ratio: 1440 / 1000; object-position: 20% 0; }
.fiche__visuel .fiche-carte { position: absolute; left: 8%; bottom: 10%; }
.fiche-carte { width: min(62%, 20rem); padding: var(--s-24); background: var(--color-blanc); border-radius: var(--r-carte); box-shadow: 0 0 30px var(--color-ombre); }
.fiche-carte__type { font: 500 10px/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.fiche-carte__nom { margin-top: 10px; font: 800 expanded var(--t-heading-sm)/1.2 var(--font-display); letter-spacing: -0.02em; }
.fiche-carte dl { margin-top: var(--s-16); }
.fiche-carte dl div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; padding: 10px 0; border-top: 1px solid var(--color-filet); }
.fiche-carte dt { font: 500 11px/1 var(--font-mono); color: var(--color-texte-2); }
.barre-grise { display: block; width: var(--l); height: 9px; background: var(--color-papier-2); border-radius: 2px; }
.fiche-carte__lien { font-weight: 600; font-size: var(--t-small); color: var(--color-bleu); text-decoration: underline; text-underline-offset: 0.2em; }
.fiche__texte .h2 { max-width: 22ch; }
.fiche__texte .sous-titre { margin-top: var(--s-32); }
.fiche__texte .texte { margin-top: var(--s-16); }
.note { margin-top: var(--s-32); padding-left: var(--s-24); border-left: var(--bord) solid var(--color-encre); }
.note p { color: var(--color-encre); max-width: 52ch; }
.note .lien { display: inline-block; margin-top: var(--s-16); }

/* ---------- 5 bis · les réalisations ---------- */
.realisations { padding-top: var(--sec-96); padding-bottom: var(--sec-96); }
.realisations__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-32) var(--gout); align-items: end; }
.realisations__intro { display: grid; gap: var(--s-24); justify-items: start; }
.realisations__intro .sous-titre { color: var(--color-texte-2); }
.realisations__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-48) var(--gout); margin-top: var(--s-64); }
.site { display: block; text-decoration: none; color: var(--color-encre); }
.site__visuel { display: block; padding: var(--s-24); background: var(--color-teinte-papier); border-radius: var(--r-panneau); overflow: hidden; transition: background-color var(--dur-court) ease; }
.site__visuel img { width: 100%; height: auto; aspect-ratio: 1440 / 1000; object-fit: cover; object-position: 0 0; border-radius: var(--r-vignette); box-shadow: 0 0 30px var(--color-ombre); transition: transform var(--dur-moyen) var(--ease-out); }
.site:hover .site__visuel, .site:focus-visible .site__visuel { background: var(--color-teinte-papier-forte); }
.site:hover .site__visuel img, .site:focus-visible .site__visuel img { transform: translateY(-6px); }
.site__legende { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-16); }
.site__genre { font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.site__nom { font: 800 expanded var(--t-heading-sm)/1.3 var(--font-display); letter-spacing: -0.02em; transition: color var(--dur-court) ease; }
.site__nom::after { content: " ↗"; }
.site:hover .site__nom { color: var(--color-bleu); }

/* ---------- 6 · la bande sombre ---------- */
.sombre { background: var(--color-nuit); color: var(--color-texte-nuit); padding: var(--sec-96) 0; }
.sombre + .sombre { padding-top: 0; }
.carte-sombre {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-64); align-items: center;
  padding: var(--s-64);
  background: var(--color-nuit-2); border-radius: var(--r-panneau);
}
.carte-sombre > *:not(canvas) { position: relative; z-index: 1; }
.carte-sombre__texte { display: grid; gap: var(--s-32); justify-items: start; }
.carte-sombre .sous-titre, .preuve .sous-titre { color: var(--color-texte-nuit-2); }
.carte-sombre__video { justify-self: end; width: min(100%, 19rem); }
.carte-sombre__video video { width: 100%; height: auto; aspect-ratio: 720 / 1280; object-fit: cover; border-radius: var(--r-carte); background: var(--color-nuit); }
.carte-sombre__video figcaption { margin-top: var(--s-16); font-size: var(--t-small); color: var(--color-texte-nuit-2); }

.preuve__titre { margin: 0 auto; text-align: center; max-width: 18ch; }
.preuve__titre strong { font-weight: inherit; color: var(--color-bleu-sur-nuit); }
.preuve__intro { margin: var(--s-32) auto 0; text-align: center; }
.preuve__grille { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 56rem; margin: var(--s-64) auto 0; }
.graphe { padding: var(--s-48); background: var(--color-nuit-2); border-radius: var(--r-panneau); }
.graphe__titre { font: 800 expanded var(--t-heading-md)/1.25 var(--font-display); letter-spacing: -0.02em; }
.graphe__titre span { display: block; margin-top: 8px; font: 400 var(--t-tag)/1.4 var(--font-mono); letter-spacing: 0.02em; color: var(--color-texte-nuit-2); }
/* la note du site livré en vitrine ; la comparaison avec les autres cabinets reste dans le tableau replié */
.graphe__note { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-24) var(--s-48); margin-top: var(--s-48); }
.graphe__chiffre { display: flex; align-items: baseline; gap: 6px; color: var(--color-bleu-sur-nuit); }
.graphe__chiffre b { font: 800 expanded clamp(5rem, 2rem + 8vw, 9.5rem)/0.8 var(--font-display); letter-spacing: -0.05em; }
.graphe__chiffre span { font: 500 var(--t-tag)/1 var(--font-mono); letter-spacing: 0.05em; color: var(--color-texte-nuit-2); }
.graphe__autres { display: grid; gap: 0; min-width: 14rem; }
.graphe__autres li { display: flex; justify-content: space-between; gap: var(--s-24); padding: 8px 0; border-top: 1px solid var(--color-filet-nuit); font-size: var(--t-small); color: var(--color-texte-nuit-2); }
.graphe__autres b { font-weight: 600; color: var(--color-texte-nuit); font-variant-numeric: tabular-nums; }
.graphe__tableau { margin-top: var(--s-48); font-size: var(--t-small); color: var(--color-texte-nuit-2); }
.graphe__tableau summary { cursor: pointer; font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texte-nuit); }
.graphe__tableau summary:hover { color: var(--color-bleu-sur-nuit); }
.graphe__defile { margin-top: var(--s-16); overflow-x: auto; }
.graphe__tableau table { width: 100%; min-width: 30rem; border-collapse: collapse; }
.graphe__tableau th, .graphe__tableau td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--color-filet-nuit); font-weight: 400; }
.graphe__tableau thead th { font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.graphe__tableau tbody th { color: var(--color-texte-nuit); }
.graphe__tableau p { margin-top: var(--s-16); font: 400 12px/1.4 var(--font-mono); }
.preuve__ecran { width: min(100%, 17rem); max-height: 34rem; overflow: hidden; border-radius: var(--r-carte); background: var(--color-blanc); box-shadow: 0 0 30px var(--color-ombre); }
.preuve__ecran img { width: 100%; height: auto; }
.preuve__pied { margin-top: var(--s-48); display: grid; justify-items: center; gap: var(--s-16); text-align: center; }
.preuve__pied .texte { margin: 0 auto; }
.preuve__pied .texte { color: var(--color-texte-nuit-2); }
.preuve__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-8); }

/* ---------- 7 · les cases ---------- */
.cases { padding: var(--sec-96) 0; background: var(--color-feuille-papier); }
.cases .sous-titre { margin-top: var(--s-32); color: var(--color-texte-2); }
.cases__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); margin-top: var(--s-64); }
.case { display: block; text-decoration: none; color: var(--color-encre); }
.case__visuel { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--color-bord-vig); border-radius: var(--r-vignette); background: var(--color-teinte-papier); }
.case__visuel > *, .case__visuel img { transition: transform 0.4s var(--ease-out); }
.case:hover .case__visuel > *, .case:focus-visible .case__visuel > * { transform: scale(1.03); }
.case__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 0; }
.case__visuel--motion { background: var(--color-nuit); }
.case__visuel--fil img { object-position: 50% 0; }
.case__visuel--motion video { width: 100%; height: 100%; object-fit: cover; }
.case__chapitre { position: absolute; left: 12px; bottom: 22px; padding: 6px 8px; background: var(--color-blanc); border-radius: var(--r-bouton); font: 500 11px/1 var(--font-mono); font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; }
.case__barre { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 3px; background: var(--color-voile); }
/* la barre suit la lecture de la vidéo (--p, écrit par bleu.js) */
.case__barre::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--color-bleu); }
.case:hover .case__visuel > .case__chapitre, .case:hover .case__visuel > .case__barre { transform: none; }
.case__legende { display: flex; justify-content: space-between; gap: var(--s-16); padding-top: 10px; border-top: 1px solid var(--color-encre); margin-top: 12px; font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; transition: color var(--dur-court) ease; }
.case:hover .case__legende { color: var(--color-bleu); }

/* ---------- 8 · le prix ---------- */
.prix { padding: 0 0 var(--sec-96); background: var(--color-feuille-papier); }
.etiquette {
  position: relative; display: flex; flex-direction: column;
  padding: var(--s-48) var(--s-24) var(--s-24);
  background: var(--metal);
  border: 1px solid var(--color-filet-fort); border-radius: var(--r-carte);
}
.etiquette::before { content: ""; position: absolute; top: var(--s-16); left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--color-feuille); box-shadow: inset 0 1px 2px var(--color-ombre); }
.etiquette__montant { font: 800 expanded clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.035em; color: var(--color-bleu); }
.etiquette__periode { margin-top: 8px; font: 500 var(--t-tag)/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.etiquette small { margin-top: var(--s-16); font-size: var(--t-small); line-height: 1.5; }

/* ---------- 9 · les questions ---------- */
.faq { padding: var(--sec-96) 0; border-top: var(--bord) solid var(--color-filet); background: var(--color-feuille-papier); }
.faq__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-48) var(--gout); }
.faq__gauche { grid-column: 1 / span 5; }
.faq__gauche .h2 { max-width: 16ch; }
.faq__droite { grid-column: 7 / -1; margin-top: -24px; }
.question { border-bottom: var(--bord) solid var(--color-filet); }
.question h3 { font: inherit; }
.question button {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); width: 100%;
  padding: var(--s-24) 0 var(--s-16); background: none; border: 0; text-align: left; cursor: pointer;
  font: 600 var(--t-heading-sm)/1.3 var(--font-body); transition: color 0.35s ease;
}
.question button:hover { color: var(--color-bleu); }
.plus { position: relative; flex: none; width: 32px; height: 32px; border-radius: var(--r-carte); background: var(--color-voile); transition: background-color var(--dur-court) ease; }
.question button:hover .plus { background: var(--color-filet); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transition: transform var(--dur-moyen) cubic-bezier(1, 0, 0, 1), opacity var(--dur-moyen) ease; }
.plus::before { width: 12px; height: 1.75px; margin: -0.875px 0 0 -6px; }
.plus::after { width: 1.75px; height: 12px; margin: -6px 0 0 -0.875px; }
.question button[aria-expanded="true"] .plus::before { transform: rotate(-180deg); }
.question button[aria-expanded="true"] .plus::after { transform: rotate(-270deg); opacity: 0; }
.reponse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-in-out); }
.reponse > div { overflow: hidden; }
.reponse.est-ouverte { grid-template-rows: 1fr; }
.reponse p { max-width: 60ch; color: var(--color-texte-2); }
.reponse p + p { margin-top: var(--s-16); }
.reponse > div > p:last-child { padding-bottom: var(--s-32); }

/* ---------- 10 · le dernier appel ---------- */
.appel { position: relative; padding: var(--sec-96) 0 var(--sec-360); background: var(--color-bleu); }
.appel .conteneur { position: relative; }
.appel__carte { position: relative; overflow: hidden; padding: var(--s-64); background: var(--color-papier); border-radius: var(--r-panneau); }
.appel__contenu { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-32); text-align: center; }
.appel__contenu .sous-titre { color: var(--color-texte-2); max-width: 60ch; }
.miroir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; width: min(100%, 52rem); text-align: left; }
.miroir label { display: grid; gap: 6px; }
.miroir__boutons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-8); margin-top: var(--s-8); }
/* champ piège : hors de l’écran pour un humain, rempli par les robots */
.miroir__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.miroir label span { font: 500 var(--t-tag)/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.miroir input { width: 100%; height: var(--s-48); padding: 0 var(--s-16); font: 400 var(--t-body)/1 var(--font-body); color: var(--color-encre); background: var(--color-blanc); border: var(--bord) solid var(--color-filet-fort); border-radius: var(--r-bouton); transition: border-color var(--dur-court) ease; }
.miroir select, .miroir textarea { width: 100%; padding: 12px var(--s-16); font: 400 var(--t-body)/1.4 var(--font-body); color: var(--color-encre); background: var(--color-blanc); border: var(--bord) solid var(--color-filet-fort); border-radius: var(--r-bouton); }
.miroir select { height: var(--s-48); padding-top: 0; padding-bottom: 0; }
.miroir textarea { min-height: 8rem; resize: vertical; }
.miroir select:focus-visible, .miroir textarea:focus-visible { outline: 2px solid var(--color-bleu); outline-offset: 0; border-color: var(--color-bleu); }
.miroir input::placeholder, .miroir textarea::placeholder { color: var(--color-texte-2); }
.miroir input:hover { border-color: var(--color-encre); }
.miroir input:focus-visible { outline: 2px solid var(--color-bleu); outline-offset: 0; border-color: var(--color-bleu); }
.miroir input:user-invalid { border-color: var(--color-encre); border-style: dashed; }
.appel__note { max-width: 60ch; font-size: var(--t-small); color: var(--color-texte-2); }
.appel__note a, .miroir__suite a { color: inherit; font-weight: 600; white-space: nowrap; }
.appel__etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); width: min(100%, 52rem); text-align: left; }
.appel__etapes li { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-encre); font-size: var(--t-small); line-height: 1.45; }
.appel__etapes span { font: 500 var(--t-tag)/1 var(--font-mono); letter-spacing: 0.05em; color: var(--color-bleu); }
.miroir__suite.est-erreur { border-color: var(--color-encre); border-style: dashed; }
.miroir__suite { width: min(100%, 52rem); padding: var(--s-16); background: var(--color-blanc); border: 1px solid var(--color-bleu); border-radius: var(--r-bouton); font-size: var(--t-small); text-align: left; }
@media (max-width: 767px) { .appel__etapes { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } }

/* ---------- pied de page ---------- */
.pied { position: relative; background: var(--color-nuit); color: var(--color-texte-nuit); }
.pied > .conteneur { position: relative; z-index: 2; margin-top: -10.5rem; }
.pied__carte { padding: var(--s-64); background: var(--color-nuit-2); border-radius: var(--r-pied); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s-64) var(--gout); }
.pied__marque { display: grid; gap: var(--s-16); align-content: start; }
.pied__marque p { max-width: 30ch; font-size: var(--t-small); color: var(--color-texte-nuit-2); }
.pied__colonne { display: flex; flex-direction: column; gap: var(--s-16); align-items: flex-start; }
.pied__colonne p { font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texte-nuit-2); }
.pied__colonne a { font-size: var(--t-small); color: var(--color-texte-nuit); text-decoration: none; transition: color var(--dur-court) ease; }
.pied__colonne a:hover { color: var(--color-bleu-sur-nuit); }
.pied__bas { margin-top: var(--s-64); padding-top: var(--s-32); border-top: var(--bord) solid var(--color-filet-nuit); font: 500 12px/1.5 var(--font-mono); color: var(--color-texte-nuit-2); }
.pied__geant { overflow: hidden; padding-top: var(--s-24); }
.pied__geant span { display: block; font: 800 semi-expanded var(--t-geant)/0.78 var(--font-display); letter-spacing: -0.035em; text-align: center; color: var(--color-nuit-2); transform: translateY(25%); will-change: transform; }

/* ---------- tablette ---------- */
@media (max-width: 1100px) {
  .surmesure { left: 20%; }
  .nav__capsule { height: 56px; padding: 0 6px 0 16px; }
  .nav__burger { display: inline-flex; }
  .nav__actions { display: none; }
  .nav__liens {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    padding: var(--s-8) var(--s-16) var(--s-16);
    background: var(--color-feuille); border: 1px solid var(--color-filet); border-radius: var(--r-carte);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 0.4s var(--ease-in-out), visibility 0s linear 0.4s;
  }
  .nav__liens.est-ouvert { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.4s var(--ease-in-out), visibility 0s; }
  .nav__liens > a { display: flex; align-items: center; min-height: 48px; padding: 0; border-bottom: 1px solid var(--color-filet); }
  .nav__mobile-actions { display: grid; gap: var(--s-8); margin-top: var(--s-16); }
}

@media (max-width: 991px) {
  .feuille { margin-top: -4rem; }
  .panneau { height: auto; margin-top: var(--s-48); }
  .panneau__collant { position: static; }
  .panneau__cadre { height: auto; background: none; overflow: visible; display: flex; flex-direction: column; gap: var(--s-16); }
  .panneau__visuels, .panneau__onglets { display: contents; }
  .panneau__visuel { position: relative; inset: auto; aspect-ratio: 3 / 2; opacity: 1; transform: none; border-radius: var(--r-panneau); overflow: hidden; background: var(--color-papier); }
  /* chaque visuel, puis son texte : sur mesure, la visite, Google, les IA */
  .panneau__visuel[data-i="0"] { order: 1; aspect-ratio: 1; } .onglet[data-i="0"] { order: 2; }
  .panneau__visuel[data-i="1"] { order: 3; margin-top: var(--s-32); } .onglet[data-i="1"] { order: 4; }
  .panneau__visuel[data-i="2"] { order: 5; margin-top: var(--s-32); aspect-ratio: 4 / 3.4; } .onglet[data-i="2"] { order: 6; }
  .panneau__visuel[data-i="3"] { order: 7; margin-top: var(--s-32); aspect-ratio: auto; min-height: 30rem; } .onglet[data-i="3"] { order: 8; }
  .onglet { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .onglet .onglet__corps { grid-template-rows: 1fr; }
  .onglet__titre { cursor: default; }
  .surmesure { inset: 4%; }
  .surmesure__plaque { left: 8px; top: 8px; padding: 4px 6px; font-size: 10px; white-space: nowrap; }
  .surmesure__plaque i { width: 9px; height: 9px; }
  .fiche, .realisations__tete { grid-template-columns: minmax(0, 1fr); }
  .fiche__visuel { order: 2; }
  .preuve__grille { grid-template-columns: minmax(0, 1fr); }
  .carte-sombre { grid-template-columns: minmax(0, 1fr); }
  .carte-sombre__video { justify-self: start; }
  .cases__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__gauche, .faq__droite { grid-column: 1 / -1; }
  .faq__droite { margin-top: 0; }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__marque { grid-column: 1 / -1; }
}

/* ---------- téléphone ---------- */
@media (max-width: 767px) {
  .hero { height: auto; }
  .hero__navette { position: static; height: auto; overflow: visible; }
  .hero__contenu { position: static; justify-content: flex-start; padding: 128px var(--marge) var(--s-32); }
  .hero__toile { display: none; }
  .hero__mobile { display: flex; justify-content: center; gap: 12px; width: 125%; margin-left: -12.5%; padding-bottom: var(--s-48); }
  .hero__mobile .vig img { height: 8rem; width: auto; aspect-ratio: 4 / 5; }
  .hero__mobile .vig:nth-child(2) { transform: translateY(-12px); }
  .miroir { grid-template-columns: minmax(0, 1fr); }
  .appel__carte, .carte-sombre, .pied__carte { padding: var(--s-32) var(--s-24); }
  .realisations__grille { grid-template-columns: minmax(0, 1fr); }
  .graphe { padding: var(--s-24); }
  .pastille { font-size: 11px; height: auto; padding: 6px 10px; }
  .fiche__visuel { aspect-ratio: 4 / 3.4; }
  .fiche-carte { width: min(72%, 20rem); }
}

@media (max-width: 479px) {
  .feuille { margin-top: -2rem; }
  /* libellé long gardé entier sur une ligne : Archivo en chasse étroite */
  .miroir__boutons .btn { flex: 1 1 100%; padding: 0 var(--s-16); font-stretch: 72%; letter-spacing: -0.01em; }
  .btn { width: 100%; min-height: 44px; }
  .hero__boutons { width: 100%; flex-direction: column; }
  .preuve__boutons { width: 100%; }
  .pied__grille { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .case:hover .case__visuel > * { transform: none; }
}


/* ---------- la barre d'action du téléphone ---------- */
.barre-action { display: none; }
@media (max-width: 767px) {
  .barre-action {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-8);
    padding: 10px var(--marge) calc(10px + env(safe-area-inset-bottom));
    background: var(--color-verre-nav); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-filet);
  }
  .barre-action .btn { width: 100%; min-height: 44px; }
  body:has(.barre-action) { padding-bottom: 72px; }
}


/* ---------- l'architecture : lignes d'index, prix en trois cellules ---------- */
/* chaque section s'ouvre sur un filet encre : numéro bleu, nom, repère à droite */
.index {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-16);
  margin-bottom: var(--s-32); padding-top: 10px;
  border-top: 1px solid var(--color-encre);
  font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase;
}
.index__num { color: var(--color-bleu); }
.index__meta { color: var(--color-texte-2); text-align: right; }
.sombre .index { border-color: var(--color-filet-nuit-fort); }
.sombre .index__num { color: var(--color-bleu-sur-nuit); }
.sombre .index__meta { color: var(--color-texte-nuit-2); }
.conteneur--index { margin-top: var(--sec-144); }
.conteneur--index .index { margin-bottom: 0; }
/* dans une grille, la ligne d'index traverse toutes les colonnes */
.avant > .index, .fiche > .index, .faq__grille > .index { grid-column: 1 / -1; margin-bottom: 0; }
.case__legende b { margin-right: 6px; font-weight: 500; color: var(--color-bleu); }

.prix { padding-top: var(--sec-96); }
.prix__titre { max-width: 16ch; }
.prix__plan {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  margin-top: var(--s-64);
  border-top: 1px solid var(--color-encre); border-bottom: 1px solid var(--color-encre);
}
.cellule { display: flex; flex-direction: column; gap: var(--s-24); padding: var(--s-32) var(--s-32) var(--s-48); border-left: 1px solid var(--color-filet-fort); }
.cellule:first-child { padding-left: 0; border-left: 0; }
.cellule__quoi { display: flex; gap: var(--s-16); font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.cellule__quoi span { color: var(--color-bleu); }
.cellule__montant { font: 800 expanded clamp(3.2rem, 1.6rem + 4.6vw, 7rem)/0.86 var(--font-display); letter-spacing: -0.045em; white-space: nowrap; }
.cellule__periode { margin-top: calc(-1 * var(--s-8)); font: 500 var(--t-tag)/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.cellule .etiquette { align-self: flex-start; min-width: 11rem; }
.cellule__resume { font-size: var(--t-small); line-height: 1.5; font-weight: 500; }
.cellule__liste li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-filet); font-size: var(--t-small); line-height: 1.45; }
.cellule__liste li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.5em; background: var(--color-bleu); }
.cellule__action { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: auto; padding-top: var(--s-16); }
.engagements { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-16) var(--s-48); margin-top: var(--s-32); padding: var(--s-16) 0; border-bottom: 1px solid var(--color-filet-fort); }
.engagements__titre { font: 800 expanded var(--t-small)/1.3 var(--font-display); letter-spacing: -0.01em; }
.engagements__liste { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-32); }
.engagements__liste li { display: inline-flex; align-items: center; gap: 10px; font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.engagements__liste li::before { content: ""; width: 4px; height: 4px; background: var(--color-bleu); }
.prix__pied { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: var(--s-32); margin-top: var(--s-32); align-items: start; }
.prix__pied .texte { font-size: var(--t-small); color: var(--color-texte-2); }
.prix__pied p:last-child { justify-self: end; }

@media (max-width: 991px) {
  .prix__plan { grid-template-columns: minmax(0, 1fr); }
  .cellule { padding: var(--s-32) 0; border-left: 0; border-top: 1px solid var(--color-filet-fort); }
  .cellule:first-child { border-top: 0; }
  .prix__pied { grid-template-columns: minmax(0, 1fr); }
  .prix__pied p:last-child { justify-self: start; }
  .conteneur--index { margin-top: var(--sec-96); }
}
@media (max-width: 479px) {
  .cases__grille { grid-template-columns: minmax(0, 1fr); }
  .surmesure__plaque { gap: 4px; letter-spacing: 0.02em; }
  .surmesure__plaque span { margin-right: 2px; }
  .index { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .index__meta { display: none; }
}

/* téléphone : la fiche Google du panneau tient dans un visuel plus haut */
@media (max-width: 599px) {
  .panneau__visuel[data-i="2"] { aspect-ratio: 4 / 5; }
  .panneau__visuel .panneau__fiche .fiche__site { width: 78%; top: 8%; }
  .panneau__visuel .panneau__fiche .fiche-carte { width: min(80%, 17rem); padding: var(--s-16); bottom: 6%; }
}