/* ═══════════════════════════════════════════════════════════════════════════
   Page Neuve — feuille unique, v2.

   Tout le style est ici et nulle part ailleurs. La maquette portait ses valeurs
   en attributs `style=` : une valeur posée en ligne bat n'importe quelle media
   query, ce qui rend les règles mobiles muettes et oblige à répondre par des
   `!important` en cascade. C'est aussi ce qui permet de garder la politique de
   sécurité en `style-src 'self'` au lieu de `'unsafe-inline'`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Polices ───────────────────────────────────────────────────────────────
   Auto-hébergées. La maquette appelait fonts.googleapis.com, que la CSP du
   site interdit (`font-src 'self'`) : les trois familles seraient tombées en
   fonte système sans un mot dans la console.

   Les `unicode-range` sont extraits de la table cmap de chaque fichier, pas
   supposés : un caractère hors de la liste retombe sur la déclaration suivante
   plutôt que d'afficher un carré vide.

   IBM Plex Mono a été retiré : la maquette ne s'en servait que pour les
   cartouches « déposez ici les images », remplacés par de vraies captures. Une
   pile monospace système coûte zéro octet et zéro requête. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/polices/archivo-fr.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0, U+00B2-00B3, U+00B7, U+00BB-00BE, U+00C0, U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6-00D7, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F6-00F7, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/polices/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+019D, U+01A0-01A1, U+01AF-01B0, U+01C4-01DC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+0272, U+02B9-02BA, U+02C7, U+02C9, U+02DD, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E80-1E85, U+1E9E, U+1EF2-1EF9;
}
/* Fonte d'accent : quelques mots en italique et les numéros d'étapes. Sortie à
   147 Ko du sous-ensemble « latin » de Google, ramenée à 29 Ko en épinglant
   l'axe optique — la page ne l'anime pas — et en coupant au charset français.
   Volontairement pas préchargée : elle n'est pas sur le chemin critique. */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/polices/newsreader-italique-fr.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0, U+00B2-00B3, U+00B7, U+00BB-00BE, U+00C0, U+00C2, U+00C4, U+00C6-00CB, U+00CE-00CF, U+00D4, U+00D6-00D7, U+00D9, U+00DB-00DC, U+00E0, U+00E2, U+00E4, U+00E6-00EB, U+00EE-00EF, U+00F4, U+00F6-00F7, U+00F9, U+00FB-00FC, U+00FF, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}

/* ── Jetons ───────────────────────────────────────────────────────────────── */
:root {
  --fond:        #0A0908;   /* fond de page */
  --fond-2:      #0D0C0A;   /* bandes alternées */
  --surface:     #14120F;   /* cartes, champs */
  --texte:       #F5F1EA;
  --texte-2:     #A8A29A;   /* 7,86:1 sur le fond */
  --texte-3:     #CFC9C0;   /* listes sur carte */

  /* La maquette posait #6E675E pour les mentions légères : 3,57:1 sur le fond,
     sous le seuil AA de 4,5:1 pour du texte de 12 à 13 px. On vend des
     correctifs de contraste — et l'un des trois exemples de la page annonce
     « son contraste passe de 2,8:1 à 4,6:1 ». Remonté à 5,04:1, mesuré, en
     gardant la même température pour ne rien changer à la hiérarchie. */
  --texte-4:     #877F74;

  --accent:      #E6B55D;                /* repli pour les moteurs sans oklch */
  --accent:      oklch(0.8 0.12 80);     /* 10,55:1 sur le fond */
  --accent-fort: #F7C775;
  --accent-fort: oklch(0.86 0.12 80);
  --sur-accent:  #0A0908;

  --bord:        rgba(245, 241, 234, .10);
  --bord-fort:   rgba(245, 241, 234, .16);

  --r-sm: 7px;  --r-md: 9px;  --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 18px; --r-full: 999px;

  --gouttiere: clamp(18px, 4vw, 28px);
  --large: 1140px;

  --focus: 0 0 0 2px var(--fond), 0 0 0 4px var(--accent);
}

/* Sans cette ligne, `width:100%` + `padding` déborde du conteneur. C'est le
   contrôle « débordement horizontal » qu'on fait passer aux sites des
   prospects : il serait malvenu de ne pas se l'appliquer. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Le comparateur se déplace au doigt : sans ça, un glissement horizontal
     un peu appuyé fait rebondir toute la page sur iOS. */
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
img { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--texte); }
::selection { background: var(--accent); color: var(--sur-accent); }

/* Un anneau de focus visible partout. La maquette n'en avait aucun : au
   clavier, on traversait la page sans jamais savoir où l'on se trouvait. */
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

/* Lien d'évitement : sans lui, un lecteur d'écran retraverse l'en-tête à
   chaque page. */
.evitement {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -160%);
  z-index: 100; background: var(--accent); color: var(--sur-accent);
  font-weight: 700; font-size: 14px; padding: 0 18px; border-radius: var(--r-md);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: transform .15s ease;
}
.evitement:focus { transform: translate(-50%, 0); color: var(--sur-accent); }

.env { max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.mesure { max-width: 68ch; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 9, 8, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(245, 241, 234, .08);
}
.barre {
  height: 64px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}
.marque { display: flex; align-items: center; gap: 11px; color: var(--texte); flex: none;
          min-height: 44px; }
.marque:hover { color: var(--texte); }
.sceau {
  width: 30px; height: 30px; border-radius: 8px; background: var(--accent);
  color: var(--sur-accent); display: grid; place-items: center;
  font-weight: 800; font-size: 13px; letter-spacing: .02em; flex: none;
}
.marque-nom { font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 4px; }
/* 44 px de haut : c'est la cible tactile qu'on impose aux sites qu'on refait,
   et que la maquette ne s'appliquait pas (ses liens tombaient à 22 px). */
.nav a {
  color: var(--texte-2); font-size: 14.5px; font-weight: 500;
  min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center;
  border-radius: var(--r-md);
}
.nav a:hover { color: var(--texte); background: rgba(245, 241, 234, .06); }
.nav .cta {
  background: var(--accent); color: var(--sur-accent); font-size: 14px;
  font-weight: 700; padding: 0 18px; margin-left: 8px;
}
.nav .cta:hover { background: var(--accent-fort); color: var(--sur-accent); }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700;
  background: var(--accent); color: var(--sur-accent);
  min-height: 46px; padding: 0 22px; border-radius: var(--r-md);
  white-space: nowrap; flex: none; text-align: center;
}
.bouton:hover { background: var(--accent-fort); color: var(--sur-accent); }
.bouton:disabled { opacity: .55; cursor: progress; }
.bouton-fantome {
  background: transparent; color: var(--texte);
  border: 1px solid var(--bord-fort);
}
.bouton-fantome:hover { background: rgba(245, 241, 234, .06); color: var(--texte); }

/* ── Typographie de section ───────────────────────────────────────────────── */
.chapeau {
  display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.badge-haut {
  display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(230, 181, 93, .35); border-radius: var(--r-full);
  padding: 7px 16px;
}
@supports (color: oklch(0.8 0.12 80)) {
  .badge-haut { border-color: oklch(0.8 0.12 80 / .35); }
}
h1, .h1 {
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1.04;
  letter-spacing: -.03em; font-weight: 800;
}
h2, .h2 {
  font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.02em;
  font-weight: 800; line-height: 1.12;
}
h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.serif {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 500; color: var(--accent);
}
.intro { font-size: 18.5px; line-height: 1.55; color: var(--texte-2); }
.sous { font-size: 15.5px; line-height: 1.65; color: var(--texte-2); }
.mention { font-size: 12.5px; line-height: 1.6; color: var(--texte-4); }

.bande { border-top: 1px solid rgba(245, 241, 234, .08); background: var(--fond-2); }
.bande-nue { border-top: 1px solid rgba(245, 241, 234, .08); }
.pad { padding: clamp(56px, 7vw, 92px) 0; }
.centre { text-align: center; }

/* ── Rythme vertical de l'accueil ─────────────────────────────────────────
   La maquette réglait chaque écart en `style=` sur l'élément. Regroupé ici,
   l'espacement devient une décision qu'on peut relire d'un bloc — et modifier
   sans repasser sur douze balises. */
.hero { padding: clamp(52px, 6.5vw, 84px) var(--gouttiere) clamp(28px, 3.5vw, 36px); }
.hero h1 { margin: 22px auto 0; max-width: 16ch; }
.hero .intro { margin: 24px auto 0; }
.hero .mention { margin: 12px auto 0; }
.hero .sous { margin: 18px auto 0; }

/* Sur une page de contenu, l'accroche partage le bord gauche de l'article qui
   la suit. Sans cette règle, les marges `auto` centrent le titre et le chapeau
   pendant que le texte démarre à la gouttière : deux bords gauches empilés
   verticalement, que l'œil repère immédiatement. Seule la page d'accueil est
   volontairement centrée, et elle porte `.centre` pour le dire. */
.hero:not(.centre) h1 { margin-left: 0; margin-right: auto; max-width: 20ch; }
.hero:not(.centre) .intro,
.hero:not(.centre) .sous,
.hero:not(.centre) .mention { margin-left: 0; margin-right: auto; }

.sect-exemples { padding-top: clamp(28px, 4vw, 40px); padding-bottom: clamp(60px, 8vw, 96px); }
.sect-exemples > .mention { margin: 26px auto 0; }

.chapeau + h2, p:has(> .chapeau) + h2 { margin-top: 10px; }
h2 + .sous, h2 + .grille-3, h2 + .grille-2, h2 + .questions { margin-top: 24px; }
.sous + .bloc-prix, .sous + .grille-3 { margin-top: 34px; }
h2 + .bloc-prix, h2 + .bloc-faq { margin-top: 34px; }
/* `.mesure` borne la largeur à 68 caractères ; c'est `.centre` qui doit centrer
   le bloc ainsi rétréci. Quand les deux classes sont posées sur le MÊME
   élément, un sélecteur descendant ne l'attrape pas : le texte se centrait à
   l'intérieur d'un bloc, lui, calé à gauche. Constaté sur le chapeau de la
   section Tarifs, qui paraissait décalé sans qu'on voie pourquoi. */
.centre.mesure, .centre > .mesure, .centre .mesure { margin-left: auto; margin-right: auto; }
.cta-bas { margin-top: 26px; }

.bloc-prix { max-width: 580px; margin: 0 auto; }
.bloc-prix .mention { margin-top: 18px; }
.bloc-faq { max-width: 760px; margin: 0 auto; }

/* Le pied porte le maillage vers les pages métier : c'est le seul bloc présent
   sur toutes les pages, donc le chemin d'exploration le plus fiable pour un
   robot comme pour un visiteur qui atterrit sur une page profonde. */
.pied-metiers {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 22px 0 4px; border-bottom: 1px solid rgba(245, 241, 234, .06);
}
.pied-metiers a {
  color: var(--texte-2); font-size: 13.5px; min-height: 44px;
  display: inline-flex; align-items: center; padding: 0 12px 0 0; margin-right: 10px;
}
.pied-metiers a:hover { color: var(--accent); }

/* ── Formulaire de demande ────────────────────────────────────────────────── */
.demande { width: 100%; max-width: 680px; margin: 34px auto 0; scroll-margin-top: 88px; }
.pilule {
  display: flex; align-items: center; gap: 0;
  background: var(--surface); border: 1px solid rgba(245, 241, 234, .12);
  border-radius: var(--r-lg); padding: 8px;
}
.pilule input {
  flex: 1 1 0; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--texte); font: inherit; font-size: 16px; padding: 12px 14px;
}
.pilule input::placeholder { color: var(--texte-4); }
/* Le halo de focus du champ e-mail semblait passer SOUS le bouton d'envoi.
   Relevé au pixel : il était bien dessiné, mais son anneau extérieur est doré
   et le bouton qu'il touche (écart mesuré : 0 px) l'est aussi — les deux se
   fondaient l'un dans l'autre.

   D'où deux corrections, et non une :
     · l'ordre des anneaux est inversé pour ce formulaire — doré au contact du
       champ, sombre à l'extérieur. Contre le fond sombre de la pilule le
       changement ne se voit pas ; contre le bouton doré, la ligne sombre
       sépare enfin les deux ;
     · le champ focalisé passe d'un cran devant, sans quoi le bouton, opaque et
       plus loin dans le DOM, recouvrirait cet anneau sombre. */
.pilule input:focus-visible {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--fond);
  border-radius: var(--r-md);
  position: relative; z-index: 1;
}
.pilule .site { flex-grow: 1.1; }
.separateur { width: 1px; align-self: stretch; background: rgba(245, 241, 234, .14); margin: 6px 10px 6px 0; flex: none; }
/* Le bouton était collé au champ e-mail : à l'œil les deux ne formaient qu'un
   seul bloc, et le halo de focus du champ venait mourir contre lui. 10 px
   reprennent l'écart déjà posé après le séparateur, et laissent respirer
   l'anneau, qui déborde de 4 px. */
.pilule .bouton { margin-left: 10px; }

/* Champ piège : hors écran et hors parcours clavier, mais pas `display:none`,
   que les robots à moitié sérieux savent ignorer. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.confiance {
  margin-top: 18px; display: flex; justify-content: center; flex-wrap: wrap;
  gap: 22px; font-size: 14px; color: var(--texte-2);
}
.coche { color: var(--accent); font-weight: 700; }
.erreur {
  color: #F3907E; font-size: 14.5px; margin-top: 14px; text-align: center;
}
.succes {
  max-width: 680px; margin: 34px auto 0; background: var(--surface);
  border: 1px solid rgba(230, 181, 93, .4); border-radius: var(--r-lg);
  padding: 24px; text-align: left;
}
.succes:focus-visible { box-shadow: var(--focus); }
.succes .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── Onglets d'exemples ───────────────────────────────────────────────────
   Trois boutons `aria-pressed` et non un motif `role="tab"` : il n'y a qu'une
   scène, pas trois panneaux. Un balisage d'onglets annoncerait « onglet 1 sur
   3 » à un lecteur d'écran qui chercherait ensuite un `tabpanel` inexistant. */
.onglets {
  display: flex; justify-content: center; gap: 6px;
  border-bottom: 1px solid rgba(245, 241, 234, .1); margin-bottom: 36px;
}
.onglet {
  position: relative; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 15.5px; font-weight: 600; padding: 14px 22px; color: var(--texte-2);
  min-height: 48px; border-radius: var(--r-md) var(--r-md) 0 0;
}
.onglet:hover { color: var(--texte); }
.onglet::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; border-radius: 2px; background: transparent;
}
.onglet[aria-pressed="true"] { color: var(--texte); }
.onglet[aria-pressed="true"]::after { background: var(--accent); }

/* ── Comparateur avant / après ────────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.duo-col { display: flex; flex-direction: column; min-width: 0; }

.scene {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid rgba(245, 241, 234, .12); background: var(--surface);
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
  /* `touch-action:none` — la valeur de la maquette — bloque tout le défilement
     vertical au doigt sur le plus grand élément de la page : un balayage vers
     le haut démarré sur l'image ne faisait rien. `pan-y` rend la verticale au
     navigateur et ne nous garde que l'horizontale. */
  touch-action: pan-y;
}
/* Le ratio des captures, pas un ratio choisi : elles font 1440 × 800. La
   maquette annonçait 16/10, ce qui rognait 100 px en haut et en bas de chaque
   image via `object-fit:cover` — donc précisément l'en-tête du site montré,
   qui est le sujet de la démonstration. */
.scene-bureau { aspect-ratio: 1440 / 800; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scene picture { display: contents; }
.apres { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 var(--x, 50%)); z-index: 1; }
.trait {
  position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px;
  background: var(--accent); transform: translateX(-1px); z-index: 2;
}
.poignee {
  position: absolute; top: 50%; left: var(--x, 50%); z-index: 3;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--sur-accent); border: 0;
  display: grid; place-items: center; cursor: ew-resize; padding: 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}
.poignee:focus-visible { box-shadow: var(--focus), 0 4px 18px rgba(0, 0, 0, .5); }
.poignee svg { width: 20px; height: 20px; }
.poignee-petite { width: 34px; height: 34px; }
.poignee-petite svg { width: 15px; height: 15px; }
/* Le rond reste petit pour ne pas manger la maquette, mais la cible tactile ne
   descend jamais sous 44 px : on l'étend par un pseudo-élément transparent
   plutôt qu'en grossissant le bouton.
   48 et non 44 : à 44 exactement, la zone mesurée au point tombait à 42 px —
   la bordure d'un cercle n'est pas son diamètre. On prend la marge. */
.poignee::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(48px, 100%); height: max(48px, 100%); border-radius: 999px;
}
.etiq {
  position: absolute; bottom: 14px; z-index: 2; border-radius: var(--r-sm);
  padding: 5px 11px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
}
.etiq-a { left: 14px; background: rgba(10, 9, 8, .78); border: 1px solid rgba(245, 241, 234, .15); color: var(--texte); }
.etiq-b { right: 14px; background: var(--accent); color: var(--sur-accent); }
.legende-duo { margin: 14px 4px 0; font-size: 14px; color: var(--texte-2); text-align: center; }

.duo-cote { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.paire-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vignette {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(245, 241, 234, .12); background: var(--surface);
  aspect-ratio: 665 / 1000;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vignette figcaption {
  position: absolute; left: 8px; bottom: 8px; border-radius: 6px;
  padding: 3px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
}
.vignette .a { background: rgba(10, 9, 8, .78); border: 1px solid rgba(245, 241, 234, .15); color: var(--texte); }
.vignette .b { background: var(--accent); color: var(--sur-accent); }

.fiche {
  background: var(--surface); border: 1px solid rgba(245, 241, 234, .12);
  border-radius: var(--r-lg); padding: 16px 18px;
}
.fiche p { font-size: 13.5px; line-height: 1.55; color: var(--texte-2); }
.fiche strong { color: var(--texte); }
.fiche .gain { color: var(--accent); }
.mesures {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(245, 241, 234, .1);
  display: flex; flex-direction: column; gap: 9px; font-size: 13px;
}
.mesures div { display: flex; justify-content: space-between; gap: 12px; }
.mesures dt, .mesures .cle { color: var(--texte-4); }
.mesures dd, .mesures .val { margin: 0; font-weight: 700; }
.mesures .avant { color: var(--texte-2); }
.mesures .apres-val { color: var(--accent); }

/* ── Cartes ───────────────────────────────────────────────────────────────── */
.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.carte {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-xl); padding: 28px;
}
.carte h3 { margin: 0 0 10px; }
.carte p { font-size: 15px; line-height: 1.6; color: var(--texte-2); }
.num {
  display: block; margin-bottom: 16px;
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: 38px; color: var(--accent); line-height: 1;
}

/* ── Tarifs ───────────────────────────────────────────────────────────────── */
.bascule {
  display: flex; justify-content: center; gap: 4px; background: var(--surface);
  border: 1px solid rgba(245, 241, 234, .12); border-radius: var(--r-lg);
  padding: 5px; width: fit-content; margin: 0 auto 24px; max-width: 100%;
}
.bascule button {
  border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600;
  padding: 0 20px; min-height: 44px; border-radius: 8px;
  background: transparent; color: var(--texte-2);
}
.bascule button:hover { color: var(--texte); }
.bascule button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }

.carte-prix {
  background: var(--surface); border: 1px solid rgba(230, 181, 93, .55);
  border-radius: var(--r-2xl); padding: 34px 36px;
  box-shadow: 0 0 0 4px rgba(230, 181, 93, .07);
}
@supports (color: oklch(0.8 0.12 80)) {
  .carte-prix { border-color: oklch(0.8 0.12 80 / .55); box-shadow: 0 0 0 4px oklch(0.8 0.12 80 / .07); }
}
.prix-tete { text-align: center; padding-bottom: 22px; border-bottom: 1px solid rgba(245, 241, 234, .1); }
.montant { font-size: clamp(38px, 6vw, 46px); font-weight: 800; letter-spacing: -.02em; }
/* Le montant est à 46 px et l'unité à 16 px, alignés sur la même ligne de
   base : l'espace du HTML est optiquement mangé et on lit « 79 €HT / mois ». */
.unite { font-size: 16px; color: var(--texte-2); margin-left: 6px; }
.note-prix { margin-top: 10px; font-size: 14px; color: var(--accent); font-weight: 600; }
.puces {
  margin: 22px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 11px;
  font-size: 15px; line-height: 1.5; color: var(--texte-3);
}
.puces li { display: flex; gap: 10px; }
.puces li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }

/* ── Questions ────────────────────────────────────────────────────────────
   `<details>` et non un pliage en JavaScript : le contenu est dans le DOM au
   premier octet, donc lisible par un robot d'indexation et utilisable sans JS.
   La maquette le rendait en `display:none` piloté par un état de composant. */
.questions { border-top: 1px solid rgba(245, 241, 234, .1); }
.questions details { border-bottom: 1px solid rgba(245, 241, 234, .1); }
.questions summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; padding: 19px 4px;
  font-size: 16.5px; font-weight: 600; color: var(--texte); min-height: 44px;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary:hover { color: var(--accent-fort); }
.questions summary:focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }
.questions summary::after {
  content: "+"; flex: none; font-size: 22px; font-weight: 400; color: var(--accent);
  line-height: 1; transition: transform .18s ease;
}
.questions details[open] summary::after { content: "−"; }
.questions details > div { padding: 0 4px 20px; }
.questions details p { font-size: 15px; line-height: 1.65; color: var(--texte-2); max-width: 68ch; }
.questions details p + p { margin-top: 10px; }

/* ── Contenu rédactionnel (pages SEO) ─────────────────────────────────────── */
.article { max-width: 760px; }
.article h2 { margin: 48px 0 16px; font-size: clamp(24px, 3vw, 32px); }
.article h2:first-child { margin-top: 0; }
.article h3 { margin: 32px 0 10px; font-size: 18px; }
.article p { color: var(--texte-2); font-size: 16.5px; line-height: 1.7; }
.article p + p { margin-top: 14px; }
.article ul, .article ol { color: var(--texte-2); font-size: 16.5px; line-height: 1.7; padding-left: 22px; margin: 14px 0; }
.article li + li { margin-top: 8px; }
.article strong { color: var(--texte); font-weight: 600; }
.article a { text-decoration: underline; text-underline-offset: 3px; }
.encadre {
  margin: 28px 0; padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--bord); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.encadre p { font-size: 15.5px; }

/* Tableaux : mentions légales, grille tarifaire. Le conteneur défile
   horizontalement plutôt que de faire déborder toute la page — un tableau à
   trois colonnes ne rentre pas dans 358 px, et c'est le tableau qui doit
   céder, pas le document. */
.tableau { overflow-x: auto; margin: 22px 0; -webkit-overflow-scrolling: touch; }
.tableau table {
  width: 100%; border-collapse: collapse; font-size: 15px;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-lg); overflow: hidden;
}
.tableau caption {
  caption-side: top; text-align: left; font-size: 13.5px;
  color: var(--texte-4); padding-bottom: 10px;
}
.tableau th, .tableau td {
  padding: 12px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(245, 241, 234, .07);
}
.tableau tbody tr:last-child th, .tableau tbody tr:last-child td { border-bottom: 0; }
.tableau thead th {
  color: var(--texte); font-weight: 700; font-size: 13.5px;
  letter-spacing: .04em; text-transform: uppercase;
  background: rgba(245, 241, 234, .04);
}
.tableau th[scope="row"] { color: var(--texte); font-weight: 600; white-space: nowrap; }
.tableau td { color: var(--texte-2); }
.tableau .unite-tab { color: var(--texte-4); font-weight: 400; font-size: 13px; }

/* Fil d'Ariane : doublé d'un JSON-LD BreadcrumbList sur chaque page. */
.ariane { font-size: 13.5px; color: var(--texte-4); padding: 20px 0 0; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ariane li::after { content: "›"; margin-left: 8px; color: var(--texte-4); }
.ariane li:last-child::after { content: ""; }
.ariane a { color: var(--texte-2); }
.ariane a:hover { color: var(--texte); }

/* Maillage interne : la raison d'être des pages métier est de se renvoyer
   les unes aux autres et de ramener vers l'accueil. */
.liens-freres { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; }
.lien-carte {
  display: block; background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-lg); padding: 18px 20px; color: var(--texte);
}
.lien-carte:hover { border-color: var(--bord-fort); background: #191713; color: var(--texte); }
.lien-carte strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.lien-carte span { font-size: 13.5px; color: var(--texte-2); }

/* ── Pied ─────────────────────────────────────────────────────────────────── */
.pied { border-top: 1px solid rgba(245, 241, 234, .08); }
.pied-in {
  padding: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 14px; font-size: 13px; color: var(--texte-4);
}
.pied nav { display: flex; flex-wrap: wrap; gap: 4px; }
.pied nav a {
  color: var(--texte-2); min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 10px; border-radius: var(--r-sm);
}
.pied nav a:hover { color: var(--texte); background: rgba(245, 241, 234, .06); }

/* ── Petites largeurs ─────────────────────────────────────────────────────
   La maquette n'avait aucune règle sous 1140 px : la grille `1fr 300px` du
   comparateur écrasait la fenêtre bureau à 180 px de large, la pilule du
   formulaire faisait déborder son bouton hors du viewport, et les quatre liens
   de navigation se chevauchaient. */
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .duo-cote { flex-direction: row; align-items: stretch; }
  .paire-mobile { flex: 1 1 auto; min-width: 0; }
  .fiche { flex: 1 1 300px; min-width: 0; }
}

@media (max-width: 760px) {
  .nav a:not(.cta) { display: none; }
  .nav .cta { margin-left: 0; padding: 0 14px; font-size: 13.5px; }

  /* Trois rangées empilées. En ligne, la pilule se repliait en bulle avec le
     bouton qui sortait de 8 px du viewport en 390 px. */
  .pilule { flex-direction: column; align-items: stretch; padding: 8px; }
  .pilule input { flex: none; width: 100%; border-bottom: 1px solid rgba(245, 241, 234, .12); }
  .pilule input:last-of-type { border-bottom: 0; }
  .separateur { display: none; }
  /* En colonne, l'écart horizontal n'a plus de sens et ferait déborder un
     bouton en pleine largeur de 10 px hors de la pilule. */
  .pilule .bouton { width: 100%; margin: 8px 0 0; }
  .confiance { gap: 14px; font-size: 13.5px; }

  /* Les onglets défilent au doigt plutôt que de se replier sur deux rangées. */
  .onglets {
    justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .onglets::-webkit-scrollbar { display: none; }
  .onglet { flex: none; padding: 14px 16px; font-size: 15px; }

  .duo-cote { flex-direction: column; }
  .carte-prix { padding: 26px 22px; }
  .carte { padding: 22px; }
  .pied-in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .poignee { width: 38px; height: 38px; }
  .etiq { font-size: 10.5px; padding: 4px 8px; bottom: 10px; }
  .etiq-a { left: 10px; } .etiq-b { right: 10px; }
}

/* `scroll-behavior` n'est ni une transition ni une animation : les règles
   `reduce` habituelles ne l'attrapent pas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Impression : un devis se relit parfois sur papier. */
@media print {
  .entete, .nav, .onglets, .bascule, .demande, .evitement { display: none !important; }
  body { background: #fff; color: #000; }
  .carte, .fiche, .carte-prix { border-color: #ccc; background: #fff; }
  a { color: #000; text-decoration: underline; }
}