/* ============================================================
   ÉCHELLE UNIQUE — espaces et texte (2026-09-30)

   ⚠️ POURQUOI CE FICHIER. Mesure du site avant : les sections portaient CINQ
   hauteurs de padding différentes (30/30, 64/72, 44/44, 34/34, 0/0) et le corps
   de texte était à 13 px dans 59 cas, 14 px dans 41, 15 px dans 34. Aucun
   rythme commun : c'est ce qui donne l'impression d'un site assemblé plutôt que
   dessiné, et 13 px est en dessous du confort de lecture (16 px).

   Ce fichier est chargé EN DERNIER : il normalise, il ne redessine pas.
   Il ne touche PAS l'application connectée (`body.app-mode`) ni les sites
   clients, qui ont leur propre monde.

   Échelle typographique (desktop) :
     h1 56 · h2 38 · h3 20 · corps 16 · petit 14 · micro 12.5
   Échelle d'espacement (multiple de 4) :
     --e1 8 · --e2 16 · --e3 24 · --e4 32 · --e5 48 · --e6 64
   ============================================================ */

:root {
  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 32px; --e5: 48px; --e6: 64px;
  --lh-corps: 1.65;
  /* Hauteur de section : UNE seule valeur, desktop et mobile. */
  --sec-pad: 64px;
}
@media (max-width: 900px) { :root { --sec-pad: 48px; } }
@media (max-width: 620px) { :root { --sec-pad: 40px; } }

/* ---------- 1. Rythme vertical des sections ---------- */
/* Hors accueil (qui a sa propre composition) et hors application.
   ⚠️ `.section` SANS préfixe d'élément : les pages n'utilisent pas toutes
   `<section>`. `/prix`, `/resultats`, `/logiciel-devis` et `/a-propos` sont en
   `<div class="section">` — un sélecteur `section.section` les ratait, ce qui
   laissait ces pages sur l'ancien rythme irrégulier. */
body:not(.app-mode) .section { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
body:not(.app-mode) .section-head { margin-bottom: var(--e4); }
body:not(.app-mode) .section-head h2 { margin-bottom: var(--e1); }
body:not(.app-mode) .cta-final { padding-top: var(--e6); padding-bottom: var(--e6); }

/* ---------- 2. Corps de texte : 16 px minimum ---------- */
/* ⚠️ On cible le CONTENU ÉDITORIAL, pas les contrôles : un champ de formulaire,
   un libellé de bouton ou une cellule de tableau garde sa taille. Monter tout à
   16 px casserait le builder et les tableaux de prix. */
body:not(.app-mode) p,
body:not(.app-mode) .section-head p,
body:not(.app-mode) .feature p,
body:not(.app-mode) .pain-item p,
body:not(.app-mode) .step p,
body:not(.app-mode) .faq-acc-body p,
body:not(.app-mode) .other-trades a {
  font-size: 16px;
  line-height: var(--lh-corps);
}
/* Les blocs secondaires (mentions, notes) restent plus petits, mais lisibles. */
body:not(.app-mode) .note,
body:not(.app-mode) .tnote,
body:not(.app-mode) .small,
body:not(.app-mode) .footer p { font-size: 14px; }

/* Mesure de lecture : jamais au-delà de 72 caractères. */
body:not(.app-mode) .section-head p,
body:not(.app-mode) .section-head h2 { max-width: 72ch; }
body:not(.app-mode) .section-head { max-width: none; }

/* ---------- 3. Filets et profondeur : une seule grammaire ---------- */
/* Le site mêlait ombres douces et filets d'un pixel. On garde les filets. */
body:not(.app-mode) .feature,
body:not(.app-mode) .plan,
body:not(.app-mode) .chip {
  border-radius: 10px;
}

/* ---------- 4. Micro-détails : ce qui trahit une page assemblée ---------- */
/* Sélection, caret, barre de défilement : hérités du navigateur, ils ne
   connaissent pas la palette. Les thème fait la différence entre « construit »
   et « assemblé ». */
body:not(.app-mode) ::selection { background: var(--gold-soft); color: var(--ink); }
body:not(.app-mode) { caret-color: var(--gold-2); }
body:not(.app-mode) { scrollbar-color: var(--line) var(--paper); }
body:not(.app-mode) a { text-underline-offset: 3px; }
body:not(.app-mode) :focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
/* ============================================================
   CHAMP ENCRE — la couleur s'engage à l'échelle de la page

   ⚠️ MESURE AVANT : la page n'avait qu'UN SEUL fond du haut en bas (ivoire).
   D'où « assez plate, manque de peps ». Le correctif n'est pas plus d'effets :
   c'est de donner à certaines régions TOUTE la couleur, et de laisser les autres
   respirer. « Commit, then clarify » : on affirme un champ, puis on calme tout
   autour pour qu'il se lise.

   ⚠️ CONTRASTES CALCULÉS sur #191713 (la craft floor exige 4,5:1 mini) :
      blanc 17,90 · paper 16,30 · paper-2 14,93 · or-éclairci #d9b878 9,44 ·
      or #b08a3e 5,58 — TOUS OK.
      --muted (3,21) et --gold-2 (3,56) sont INTERDITS sur ce champ : ne jamais
      les y employer pour du texte.
   ============================================================ */
.champ-encre {
  background: var(--ink);
  color: var(--paper);
  /* On prolonge la couleur sur toute la largeur de la fenêtre alors que le
     contenu reste dans le conteneur : sinon le champ s'arrête au bord du texte
     et la page paraît « encadrée » plutôt que possédée. */
  box-shadow: 0 0 0 100vmax var(--ink);
  clip-path: inset(0 -100vmax);
}
.champ-encre .section-head h2 { color: var(--paper); }
.champ-encre .section-head p { color: var(--paper); opacity: .82; }
/* Les filets étaient pensés pour l'ivoire : sur l'encre, ils disparaissent. */
.champ-encre .presta { border-top-color: rgba(247, 244, 238, .28); }
.champ-encre .presta-item { border-bottom-color: rgba(247, 244, 238, .14); }
.champ-encre .presta-item h3 { color: var(--paper); }
.champ-encre .presta-item p { color: var(--paper); opacity: .82; }

/* Le champ de l'action finale : même grammaire, plus compact, bouton en or
   (la seule couleur qui tienne sur l'encre). */
.cta-final.champ-encre { padding: 72px 0; margin-top: 0; }
.cta-final.champ-encre h2 { color: var(--paper); }
.cta-final.champ-encre p { color: var(--paper); opacity: .84; }
.champ-encre .btn.primary { background: var(--gold); color: #fff; border-color: var(--gold); }
.champ-encre .btn.primary:hover { background: #c19a4e; border-color: #c19a4e; }

/* ⚠️ MOBILE : le champ encre est ce qui donne du peps sur petit écran, là où
   l'effet 3D du hero n'est pas rendu. On garde toute la largeur utile et on
   resserre seulement les marges intérieures. */
@media (max-width: 620px) {
  .cta-final.champ-encre { padding: 52px 0; }
  .champ-encre .presta-item { padding: 20px 0; }
}

/* ============================================================
   /leads — le prix en clair, plus de question de budget (2026-09-30)

   ⚠️ Le formulaire demandait « Budget envisagé » de « moins de 500 € » à « plus
   de 3 000 € » alors qu'il n'y a QU'UNE offre au prix affiché. La question
   laissait croire qu'on allait négocier, et qu'on payait ce qu'on annonçait.
   Retirée ; le bloc ci-dessous dit le prix une fois, nettement.
   ============================================================ */
.lead-offre {
  padding: 22px 24px; margin: 0 0 26px;
  background: var(--card); border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0;
}
.lo-prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lo-num { font-family: var(--font-mono); font-size: 38px; font-weight: 600;
  letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.lo-per { color: var(--muted); font-size: 15px; }
.lo-detail { margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.6; }

.lead-etapes { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.le-item { display: flex; align-items: baseline; gap: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.le-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-bg); border: 1px solid var(--gold-line); color: var(--gold-2);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
}
@media (max-width: 620px) { .lo-num { font-size: 32px; } }

/* ============================================================
   POLICE D'AFFICHAGE — bascule Fraunces -> Bodoni Moda (2026-09-30)
   Decision user. Bodoni = lignee Didot, luxe francais.
   ⚠️ Chargé en DERNIER : on redéfinit la VARIABLE, donc tous les endroits qui
   utilisent var(--font-serif) basculent d'un coup, sans toucher au reste.
   On garde une petite respiration (letter-spacing) et un poids 600 : Bodoni a
   un contraste plein/degage fort, il aime l'air autour de lui.
   ============================================================ */
:root {
  --font-serif: 'Bodoni Moda', 'Didot', Georgia, serif;
}
/* Les titres : Bodoni a un dessin plus etroit, on remonte un peu l'interligne
   et on desserre le tracking (le defaut de Fraunces etait -.03em, trop serre
   pour un Didone dont les delies se touchent). */
h1, h2, .hero h1, .page-head h1, .section-head h2 {
  font-family: var(--font-serif);
  letter-spacing: -.015em;
  line-height: 1.08;
}
.hero h1, .hero-contrat .hero-copy h1 { letter-spacing: -.02em; line-height: 1.04; }

/* Le mot en or, en italique : Bodoni italique est spectaculaire ; on garde le
   degrade d'or de la charte. */
.hero h1 .accent, .hero-contrat .hero-copy h1 .accent, .page-head h1 .accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}

/* ============================================================
   RYTHME VISUEL DES SECTIONS — le fond alterné ne produisait RIEN (2026-09-30)

   ⚠️ MESURE : la page mobile faisait 8 023px de haut avec TOUTES les sections sur
   le même fond (transparent -> ivoire unique). Les sections portaient bien la
   classe `alt` dans le HTML, mais AUCUNE règle CSS ne la stylait : `.alt` était
   défini pour un tout autre usage (une ligne de mentions centrée, ligne 1361 de
   luxe.css). Résultat : 8 000px d'ivoire uniforme, seul le hero (dégradé) et le
   bloc de fin créaient du relief. C'est exactement ce qui fait « fade et sans
   consistance ».
   ⚠️ On ne touche PAS à `.alt` (utilisé ailleurs) : on cible `.section.alt`,
   spécifique aux sections.
   ============================================================ */
.section.alt {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Sur l'accueil, les sections de contenu portent un filet haut discret : ça
   donne un rythme de lecture même quand le fond ne change pas. */
body:not(.app-mode) .section + .section { border-top: 1px solid var(--line); }
body:not(.app-mode) .section.alt + .section,
body:not(.app-mode) .section + .section.alt { border-top: 0; }

/* ⚠️ Le hero mobile était très long (1222px). On resserre : le visiteur doit
   atteindre le prix et l'action sans scroller deux écrans. */
@media (max-width: 620px) {
  .hero-contrat { row-gap: 18px; }
  .hero-contrat .releve { margin-top: 16px; }
  .hero-contrat .cta-note { max-width: none; }
}

/* ============================================================
   RATTRAPAGE DE L'ÉCHELLE (2026-09-30, audit CSS)

   ⚠️ L'audit a mesuré que le barème 56/38/20/16 n'était JAMAIS respecté
   simultanément sur une page : h1 = 2 valeurs (34/56), h2 = 3 (27/36/38),
   h3 = 5 (16.5/18/20/22/23), corps = 5 (13/14/15/16/18). La cause : mon
   echelle.css normalisait par ÉNUMÉRATION de sélecteurs, donc il perdait contre
   les sélecteurs #id et les styles inline.
   ⚠️ On rattrape les cas MESURÉS, on ne réécrit pas tout : chaque ligne
   ci-dessous corrige une valeur relevée par l'audit.
   ============================================================ */

/* h1 : /artisan était à 34px. On l'aligne sur le barème. */
@media (min-width: 601px) { .artisan-hero h1 { font-size: 48px; line-height: 1.08; } }

/* h2 : trois valeurs hors barème (27/36/38). On les ramène à 38px. */
.cta-final h2 { font-size: clamp(30px, 3.4vw, 38px); }
.visi-block h2 { font-size: clamp(26px, 2.9vw, 36px); }

/* h3 : cinq valeurs (16.5/18/20/22/23). Le barème est 20px, sauf les titres de
   cartes d'accueil qui montent à 22 (choix assumé, contraste utile). */
.step h3 { font-size: 20px; }
.faq-item h3 { font-size: 20px; }
.feature h3 { font-size: 20px; }
#cout-verite .dual-plan h3 { font-size: 20px; }

/* ⚠️ Le corps : mon echelle.css ne normalisait que des <p> ÉNUMÉRÉS, jamais le
   corps global (mesuré à 15px). On pose le corps une fois pour toutes. */
body:not(.app-mode) { font-size: 16px; line-height: 1.65; }

/* ⚠️ Les 101 déclarations `font-size` INLINE des templates (26×13px, 21×14px,
   14×12px) battent toute feuille de style. On ne peut pas les neutraliser
   proprement sans toucher aux templates ; on remonte donc les zones concernées
   par une règle ciblée, là où le texte est du CONTENU et non un libellé. */
.pricing-page .section p, .results-page .section p,
.software-page .section p, .about-page .section p,
.howto-page .section p { font-size: 16px; }

/* Les deux cas d'accueil hors barème (sélecteurs #id, plus forts que tout) :
   on les remonte explicitement, au lieu de subir la cascade. */
#probleme .pain-item p { font-size: 16px; }

/* ============================================================
   CONTRASTES DE LA PALETTE OR — correction systémique (2026-09-30)

   ⚠️ L'audit a mesuré, et je l'ai vérifié par calcul :
     - bouton principal (blanc sur dégradé or) : 2,35:1  -> seuil 4,5
       le pire arrêt est #c9a457 ; il apparaît 72 fois sur le site
     - le mot en or sur ivoire : 2,14:1 -> seuil 3,0 (grand texte)
   Un bouton illisible, c'est la vente perdue. Ce n'est pas un détail esthétique.

   ⚠️ CE QU'ON FAIT : on ne change PAS la teinte (l'or de la marque reste l'or),
   on descend d'un cran dans la rampe existante pour que le texte blanc tienne.
   Vérifié : #8a6a2a donne 5,03:1 avec du blanc, #6e5320 donne 7,19:1.
   ============================================================ */

/* Le bouton principal : dégradé assombri. Le pire arrêt (#8a6a2a) est à 5,03:1. */
.btn.primary {
  background: linear-gradient(165deg, #8a6a2a 0%, #7d5f26 52%, #6e5320 100%);
  border-color: #6e5320;
  color: #fff;
}
.btn.primary:hover {
  background: linear-gradient(165deg, #97752f 0%, #8a6a2a 52%, #775a23 100%);
  border-color: #775a23;
}
/* Le bouton « big » du hero garde sa taille : seul le contraste change. */

/* ⚠️ Les boutons OR PLEIN dans les encadrés (visibilite, leads, pricing) : ils
   portaient `background: var(--gold)` = 3,21:1. Alignés sur le dégradé. */
.visi-card .btn.primary, .lead-form-wrap .btn.primary, .plan.featured .btn.primary {
  background: linear-gradient(165deg, #8a6a2a, #6e5320);
  border-color: #6e5320;
}

/* ⚠️ Le mot en or des titres : le dégradé d'origine partait de #c9a457 (2,14:1
   sur ivoire). On part d'un or plus profond, qui reste lumineux en grand texte
   tout en passant le seuil de 3:1. */
.hero h1 .accent, .page-head h1 .accent {
  background: linear-gradient(110deg, #8a6a2a 0%, #6e5320 55%, #8a6a2a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Sur les surfaces SOMBRES (hero encre), l'or clair reste lisible : on garde. */
.hero-contrat .hero-copy h1 .accent {
  background: linear-gradient(100deg, #f3dda4, #c19a4e 46%, #d9b878);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Le badge « Le moins cher du marché » : blanc sur or clair = 2,63:1. */
.plan .tag {
  background: linear-gradient(165deg, #8a6a2a, #6e5320);
  color: #fff;
}

/* ============================================================
   CONTRASTES — 2e passe : les règles qui gagnaient encore (2026-09-30)

   ⚠️ Ma 1re passe a corrigé 72 boutons sur 76, mais 4 résistaient : les
   sélecteurs plus SPÉCIFIQUES de atelier-polish.css (chargé après luxe.css)
   redéfinissaient l'or clair :
     - `#pricing-home .plan .tag:not(:empty)` (badge « Le moins cher ») : #c19a4e
     - `#pricing-home .plan .tag` : idem
     - `.plan.featured .tag` : idem
   Et un `.btn.primary` de l'accueil gardait l'ancien dégradé.
   On reprend la main avec la MÊME spécificité, en fin de cascade.
   ============================================================ */

/* Les badges d'offre : dégradé assombri (blanc dessus >= 4,5:1). */
.plan.featured .tag,
#pricing-home .plan .tag:not(:empty),
#pricing-home .plan .tag {
  background: linear-gradient(160deg, #8a6a2a, #6e5320);
  color: #fff;
  box-shadow: 0 2px 8px rgba(110, 83, 32, .3);
}

/* Le bouton principal : on reprend la main sur TOUTE la page, y compris dans les
   blocs partagés (_visibilite_block, pricing-home) qui le redéfinissaient. */
body:not(.app-mode) .btn.primary {
  background: linear-gradient(165deg, #8a6a2a 0%, #7d5f26 52%, #6e5320 100%) !important;
  border-color: #6e5320 !important;
  color: #fff !important;
}
body:not(.app-mode) .btn.primary:hover {
  background: linear-gradient(165deg, #97752f 0%, #8a6a2a 52%, #775a23 100%) !important;
  border-color: #775a23 !important;
}

/* ============================================================
   VIGNETTES D'EXEMPLE CLIQUABLES (2026-09-30)

   ⚠️ Les 3 exemples de sites étaient des IMAGES non cliquables : un artisan ne
   pouvait pas aller voir le vrai site. Or c'est ce qui vend — voir la page
   vivante, avec son calculateur et son formulaire. La vignette entière est
   maintenant un lien vers l'aperçu réel, en nouvel onglet.
   ⚠️ On n'ouvre PAS dans le même onglet : le visiteur qui part voir un exemple
   ne doit pas perdre la page de vente.
   ============================================================ */
.proof-lien, .exemple-lien {
  display: block; position: relative; text-decoration: none; color: inherit;
}
.proof-lien img, .exemple-lien img { display: block; width: 100%; height: auto; }
/* La pastille d'action : apparaît discrètement, dit ce que fait le clic. */
.proof-voir, .ex-voir {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; padding: 9px 16px; border-radius: 30px;
  white-space: nowrap; opacity: 0; transition: opacity .18s, transform .18s;
}
.proof-lien:hover .proof-voir, .exemple-lien:hover .ex-voir,
.proof-lien:focus-visible .proof-voir, .exemple-lien:focus-visible .ex-voir {
  opacity: 1; transform: translateX(-50%) translateY(-3px);
}
/* Sur tactile il n'y a pas de survol : la pastille reste visible. */
@media (hover: none) {
  .proof-voir, .ex-voir { opacity: 1; transform: translateX(-50%); }
}
.proof-lien:focus-visible, .exemple-lien:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
/* Le cadre de la carte s'applique au lien, pas plus à la figure seule. */
.proof-card:has(.proof-lien) { overflow: hidden; }

/* ============================================================
   /leads SUR MOBILE — le formulaire AVANT les arguments
   (2026-09-30, carte blanche)

   ⚠️ MESURE : sur mobile la page faisait 3 311 px (2x le PC) et le formulaire
   arrivait APRES 981 px de blocs de bénéfices. Un artisan qui arrive sur la page
   depuis un email devait donc dérouler deux écrans d'argumentaire avant de
   pouvoir demander quoi que ce soit. C'est l'inverse de l'ordre qui convertit.

   ⚠️ On inverse l'ordre À L'ÉCRAN seulement (CSS `order`), pas dans le DOM : le
   HTML garde la lecture « arguments puis formulaire » pour les moteurs, et
   l'humain sur téléphone voit d'abord ce qui l'actionne.
   ============================================================ */
@media (max-width: 760px) {
  /* Le formulaire d'abord, les arguments ensuite. */
  .lead-layout { display: flex; flex-direction: column; gap: 26px; }
  .lead-form-wrap { order: 1; }
  .lead-benefits { order: 2; }

  /* L'argumentaire est plus court : on retire l'air entre les blocs et on
     resserre chaque bloc — ce sont des rappels, pas la lecture principale. */
  .lead-benefits h3 { font-size: 17px; margin-bottom: 12px; }
  .lead-benefit { padding: 11px 0; }
  .lead-benefit strong { font-size: 15.5px; }
  .lead-benefit p { font-size: 14.5px; }
  .lead-offre { padding: 16px 18px; margin-bottom: 18px; }
  .lo-num { font-size: 30px; }
  .lead-etapes { padding-top: 16px; margin-top: 18px; }
  .le-item { font-size: 14.5px; }
  .lead-note { font-size: 13.5px; padding: 12px 14px; }

  /* Le formulaire : champs plus courts, et le titre rappelle l'action. */
  .lead-form-wrap h3 { font-size: 19px; margin-bottom: 14px; }
  .lead-form label { margin: 11px 0 5px; }
  .lead-form input, .lead-form select, .lead-form textarea { padding: 12px; font-size: 16px; }
  .lead-form textarea { min-height: 80px; }

  /* L'accroche : plus courte sur téléphone. */
  .lead-hero { padding: 26px 0 20px; }
  .lead-hero h1 { font-size: 28px; line-height: 1.08; }
  .lead-hero p { font-size: 15.5px; }
}

/* ============================================================
   MOBILE — L'ACTION DANS LE PREMIER ÉCRAN (carte blanche 2026-09-30)

   ⚠️ MESURE : sur l'accueil, le premier bouton était à 1 076 px — hors d'un
   écran de 844. Le hero faisait 1 203 px. Sur /visibilite, le bouton de
   commande était à 2 374 px, parce que la PREUVE (1 317 px) passait avant le
   calculateur et le paiement. Un visiteur ne peut rien faire sans dérouler.
   On remet l'action avant le récit.
   ============================================================ */
@media (max-width: 760px) {
  /* --- ACCUEIL : hero plus court, le relevé et les boutons remontent --- */
  .hero-contrat { padding: 26px 16px 30px; }
  /* ⚠️⚠️ TAILLE DU TITRE D'ACCUEIL — SOURCE UNIQUE, ICI.
     Ne pas la redéfinir dans accueil-contrat.css : echelle.css est chargé EN
     DERNIER, donc c'est cette valeur qui gagne, et deux valeurs concurrentes
     finissent toujours par diverger (c'est ce qui avait produit un h1 à 27 px
     face à des h2 à 25,4 px — le titre de page à la taille d'un titre de
     section, ce que le user a vu tout de suite).
     Mesuré sur un 390 px : 32 px tient sur 3 lignes (34 px en fait 4).
     clamp(30, 8.2vw, 40) => 32 px à 390, 40 px dès 488 px. Il n'y a donc plus
     de palier à 27 px sur une plage de largeurs. */
  .hero-titre h1 { font-size: clamp(30px, 8.2vw, 40px); line-height: 1.05; letter-spacing: -.022em; }
  /* Le titre respire : plus d'air AU-DESSUS que SOUS lui (craft floor). */
  .hero-contrat .hero-titre { padding-top: 6px; }
  .hero-su .hero-lede, .hero-contrat .hero-lede { font-size: 15px; margin-top: 10px; }
  .hero-contrat .releve { margin-top: 16px; }
  .hero-contrat .releve-l { padding: 9px 0; }
  .hero-contrat .releve-l dd .num { font-size: 22px; }
  .hero-contrat .cta-row { margin-top: 16px; gap: 9px; }
  .hero-contrat .cta-note { margin-top: 10px; font-size: 12.5px; }
  /* ⚠️ L'APERÇU GARDE LES 4 LIGNES DE PRIX SUR MOBILE (retour user : « inspire-toi
     de la version PC »). Les masquer faisait perdre exactement ce qui convainc —
     un vrai exemple avec ses tarifs, la preuve que le visiteur peut lire avant
     d'appeler. Seule la note de bas de panneau reste masquée (le sur-titre du
     panneau dit déjà que c'est un exemple), et les lignes sont resserrées pour
     que le bouton reste dans le premier écran. */
  .hero-apercu .ap-lignes { display: block; }
  .hero-apercu .ap-lignes li { padding: 6px 0; }
  .hero-apercu .ap-note { display: none; }
  .hero-apercu .mock-body { padding: 13px 14px 12px; }
  .hero-apercu .ap-nom { font-size: 18px; }

  /* --- /VISIBILITE : le calculateur et la commande AVANT la preuve ---
     ⚠️ Ordre inversé à l'ECRAN (CSS order), pas dans le DOM : le HTML garde
     « hero » puis la commande pour les moteurs, et l'humain sur téléphone voit
     d'abord ce qui lui permet d'agir. */
  .visi-tunnel { display: flex; flex-direction: column; }
  .visi-hero { order: 1; }
  .visi-whats-included { order: 2; }
  .visi-layout { order: 3; }
  .visi-calc { order: 4; }
  .visi-proof { order: 5; }

  /* La preuve sur mobile : elle était en 1 colonne sur 1 317 px. On passe en
     grille 2 colonnes, plus courte. */
  .visi-proof { margin: 24px 0 10px; }
  .visi-proof-head h2 { font-size: 21px; }
  .visi-proof-head p { font-size: 14.5px; }
  .visi-proof-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .visi-proof-grid .proof-card-lead { grid-column: 1 / -1; }
  .visi-proof-grid .proof-card-lead img { max-height: 200px; }
  .proof-card img { max-height: 130px; object-fit: cover; object-position: top; }
  .proof-card figcaption { padding: 10px 12px; }
  .proof-name { font-size: 14.5px; }
  .proof-desc { font-size: 12px; }
  .visi-proof-note { font-size: 12.5px; margin-top: 12px; }
  /* L'argumentaire du calculateur : plus court. */
  .visi-calc { padding: 22px 18px; gap: 20px; }
  .visi-calc h2 { font-size: 21px; }
  .visi-calc-copy p { font-size: 14.5px; }
  .visi-calc-points li { font-size: 13.5px; }
}

/* ============================================================
   /visibilite + /leads — l'ACTION vraiment dans le premier écran
   (carte blanche, suite 2026-09-30)

   ⚠️ Mesure après la 1re passe : /visibilite avait encore son bouton de commande
   à 2 140 px, parce que la FAQ « vos questions avant de commander » (909 px)
   passait AVANT la carte de paiement. Sur /leads, le bouton était à 979 px :
   6 champs remplis avant de pouvoir envoyer.
   ============================================================ */
@media (max-width: 760px) {
  /* --- /visibilite : la carte de paiement remonte AVANT la FAQ --- */
  .visi-guide { order: 2; }
  .visi-card { order: 1; }
  .visi-layout { gap: 24px; }
  /* La FAQ : repliable et compacte (c'est de la levée d'objection, pas de la
     lecture principale). */
  .visi-guide-block { margin-bottom: 22px; }
  .visi-guide-title { font-size: 18px; margin-bottom: 12px; }
  .visi-q summary { font-size: 14px; padding: 11px 0; }
  .visi-q p { font-size: 13.5px; padding-bottom: 12px; }
  .visi-reassure li { font-size: 13.5px; padding: 6px 0; }
  .visi-steps-guide li { padding: 9px 0; }
  .visi-steps-guide p { font-size: 13.5px; }
  /* La carte de paiement : champs plus courts. */
  .visi-summary { padding: 20px 18px; }
  .visi-list li { padding: 8px 0; font-size: 14px; }
  .visi-price-major { font-size: 34px; }
  .visi-pay { padding-top: 14px; }
  .visi-pay input { padding: 12px; font-size: 16px; }

  /* --- /leads : le bouton visible sans remplir les 6 champs ---
     ⚠️ On ne peut pas supprimer des champs (ils sont nécessaires à la
     qualification), mais on peut les RESSERRER : c'est la hauteur des champs et
     l'air entre eux qui repoussait le bouton à 979 px. */
  .lead-form label { margin: 8px 0 4px; font-size: 11px; }
  .lead-form input, .lead-form select, .lead-form textarea { padding: 10px 12px; }
  .lead-form textarea { min-height: 62px; }
  .consent-box { padding: 10px 12px; margin-top: 10px; }
  .consent-label { font-size: 12px; line-height: 1.45; }
  .lead-form button[type=submit] { padding: 15px; font-size: 15.5px; margin-top: 12px !important; }
  .lead-form .ftiny, .lead-privacy { font-size: 11.5px; }
  .lead-form-wrap h3 { margin-bottom: 10px; }
}

/* ⚠️ Dernier resserrement. Mesure : la carte de paiement de /visibilite fait
   961 px — sa liste de 6 avantages + le bloc email. Le bouton tombait à 1 289.
   Sur /leads le bouton est à 940 avec 6 champs + le consentement.
   On réduit l'AIR (pas la hauteur des champs, qui doit rester tapable) :
   la liste des avantages devient une grille 2 colonnes compacte, et les
   libellés passent en 2 colonnes quand c'est possible. */
@media (max-width: 760px) {
  /* /visibilite : avantages de la carte de paiement en 2 colonnes serrées. */
  .visi-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 12px 0 0; }
  .visi-list li { padding: 6px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); }
  .visi-summary { padding: 18px 16px; }
  .visi-top { margin-bottom: 8px; }
  .visi-price-major { font-size: 30px; }
  .visi-badges { margin-top: 8px; }
  .visi-badge { font-size: 11px; padding: 3px 10px; }
  .visi-separator { margin: 12px 0; }
  .visi-pay-title { font-size: 13px; }
  .visi-note { font-size: 12px; margin-bottom: 8px; }
  .visi-consent { font-size: 12px; line-height: 1.4; }
  .visi-tiny { font-size: 11px; margin-top: 8px; }
  .visi-alt { font-size: 12px; padding-top: 12px; margin-top: 12px; }
  .visi-card .btn.primary.big { padding: 15px; font-size: 15.5px; }

  /* /leads : le consentement et le code promo passent côte à côte. */
  .lead-form label { margin: 7px 0 3px; }
  .lead-form input, .lead-form select { padding: 9px 11px; }
  .lead-form textarea { min-height: 56px; padding: 9px 11px; }
  .consent-box { padding: 9px 11px; }
  .lead-form button[type=submit] { padding: 14px; margin-top: 10px !important; }
  .lead-form .ftiny { display: none; }
}

/* ⚠️ DÉDUPLICATION pour finir de remonter l'action (mesure : /visibilite 1181px,
   /leads 913px — encore juste au-dessus de l'écran de 844).
   On ne supprime AUCUNE information : on retire ce qui est déjà dit ailleurs sur
   la même page.
     - /visibilite : la carte de paiement re-liste les 6 avantages que le hero
       affiche déjà en puces (visi-points) et que le bandeau « ce qui est inclus »
       reprend. Sur téléphone, on garde le prix et le bouton.
     - /leads : le champ « code promo » est masqué sur mobile. C'est un champ
       optionnel qui ne concerne pas la demande d'aperçu, et il pousse le bouton
       sous le pli. Il reste disponible sur ordinateur.
   ⚠️ Ces deux éléments restent dans le DOM (donc lisibles et crawlables) : on les
   masque par CSS, pas par suppression. */
@media (max-width: 760px) {
  .visi-list { display: none; }
  .visi-separator { margin: 8px 0; }
  .visi-pay { padding-top: 10px; }
  /* Le champ code promo : masqué (optionnel, non lié à la demande d'aperçu). */
  .lead-form label[for="promo_code"], .lead-form #promo_code { display: none; }
}

/* ⚠️ Dernier levier : le HERO qui précède le formulaire. Sur ces trois pages,
   le hero + le bloc d'engagements mangent ~400 px avant que l'action apparaisse.
   On le resserre (il est déjà lu, c'est un rappel). C'est ce qui fait passer
   l'action sous la barre des 844 px. */
@media (max-width: 760px) {
  /* /leads : hero + avantages du panneau. */
  .lead-hero { padding: 16px 0 12px; }
  .lead-hero h1 { font-size: 25px; }
  .lead-hero p { font-size: 14.5px; margin-top: 8px; }
  .lead-form-wrap { padding: 0; }
  .lead-form-wrap h3 { font-size: 18px; margin-bottom: 8px; }
  .lead-layout { gap: 18px; }

  /* /pricing : le hero de page.
     ⚠️ `:not(.hero-contrat)` est OBLIGATOIRE. La section d'accueil porte
     « hero hero-contrat », donc sans cette exclusion ce 27px !important
     écrasait le titre d'accueil — c'est LA cause du « trop petit » signalé par
     le user : h1 = 27px face à des h2 de section à 25,4px, soit un titre de page
     à la taille d'un titre de section. L'accueil a sa propre échelle (voir le
     bloc ACCUEIL ci-dessus), il ne doit pas être rattrapé par ce resserrement
     destiné aux pages secondaires. */
  .page-head, .hero:not(.hero-contrat) { padding-top: 18px !important; padding-bottom: 20px !important; }
  .page-head h1, .hero:not(.hero-contrat) h1 { font-size: 27px !important; }
  .page-head p, .hero:not(.hero-contrat) p { font-size: 15px !important; margin-top: 8px !important; }

  /* /visibilite : le hero + le bandeau d'inclusion. */
  .visi-hero { padding: 14px 0 12px; }
  .visi-hero h1 { font-size: 25px; }
  .visi-hero p { font-size: 14.5px; margin-top: 8px; }
  .visi-whats-included { padding: 10px 0; }
  .visi-item { font-size: 13px; padding: 5px 0; }
  .visi-layout { padding-top: 14px; }
}

/* ⚠️ Les 70 derniers pixels. /visibilite 914 et /pricing 899 : le hero + le
   premier bloc suffisent à pousser le bouton juste au-dessus de 844. On coupe
   les marges résiduelles du haut de page. */
@media (max-width: 760px) {
  .container { padding-top: 0 !important; }
  .visi-tunnel > :first-child, .page-head { margin-top: 0 !important; }
  .visi-hero { padding: 10px 0 10px; }
  .visi-hero .visi-eyebrow { margin-bottom: 8px; font-size: 11px; }
  .visi-whats-included { margin-bottom: 0; }
  .visi-layout { margin-top: 0; }
  /* Les encadrés d'offre de /pricing : on réduit le padding interne. */
  .plan { padding: 18px 16px; }
  .plan .price { font-size: 30px; margin: 6px 0; }
  .plan ul { margin: 10px 0; }
  .plan ul li { padding: 5px 0; font-size: 14px; }
  .plan .btn { padding: 13px; }
}

/* ⚠️ /pricing : le bloc Visibilité (partagé, 1166 px) précède les offres du
   logiciel. C'est volontaire — l'offre à 129,90 € est la principale depuis le
   pivot — mais sur téléphone il pousse le premier bouton à 899 px.
   On resserre ce bloc : sa capture d'écran factice (.visi-shots) est décorative,
   on la masque, et on réduit l'air. Le contenu reste intégral. */
@media (max-width: 760px) {
  .visi-block { gap: 22px; padding: 18px 0 22px; }
  .visi-block .visi-copy h2 { font-size: 24px; line-height: 1.12; }
  .visi-block .visi-copy p { font-size: 15px; margin-top: 10px; }
  .visi-block .visi-points { margin: 12px 0; }
  .visi-block .visi-points li { padding: 5px 0; font-size: 14.5px; }
  /* La maquette décorative (fenêtre + classement Google simulés) : masquée sur
     téléphone. Elle n'apporte aucune information — elle illustre. */
  .visi-shots { display: none; }
  .visi-price-box { margin: 12px 0; }
  .vpb-now { font-size: 32px; }
  .visi-cta-row { margin-top: 12px; }
  .visi-block .btn.primary.big { padding: 15px; font-size: 15.5px; }
  .visi-trust { font-size: 12px; margin-top: 10px; }
}

/* ⚠️ Dernier blocage : /visibilite à 866 px (22 px de trop). L'ordre est déjà
   bon (hero -> engagements -> carte de paiement), mais le hero + le bandeau
   d'inclusion font ~400 px. On gagne les 22 px sur les marges. */
@media (max-width: 760px) {
  .visi-hero { padding: 6px 0 8px; }
  .visi-hero h1 { font-size: 23px; }
  .visi-whats-included { padding: 7px 0; }
  .visi-layout { padding-top: 10px; }
  .visi-summary { padding: 16px 14px; }
}

/* ⚠️⚠️ LE PANNEAU D'EXEMPLE SUR MOBILE — ALIGNÉ SUR LA VERSION PC.
   Retour user : « J'aime bien la version PC, inspire-toi en pour la version
   mobile. » Sur PC le panneau montre LES QUATRE PRIX ; sur mobile mes
   resserrements successifs n'en laissaient plus que deux, ce qui vidait
   l'exemple de ce qui le rend convaincant.

   ⚠️ LE COMPROMIS EST MESURÉ, PAS DEVINÉ. Remettre les 4 lignes repoussait le
   bouton d'accueil hors de l'écran de 844 px. On récupère la hauteur AILLEURS,
   là où elle ne coûte rien à la compréhension :
     - le libellé du sur-titre du panneau (9 px au lieu de 9,5),
     - la marge interne du bloc de titre du panneau (0),
     - le pas des lignes de prix (4 px au lieu de 7),
     - les marges du relevé et de la rangée d'action.
   Mesuré à 390 px : 4 prix visibles, bouton à 798 px (dans l'écran), 0 débord.
   Sans ce resserrement : bouton à 868 px, hors écran. */
@media (max-width: 760px) {
  .hero-apercu .ap-lignes { display: block; padding: 0; margin-top: 10px; }
  .hero-apercu .ap-lignes li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
  }
  .hero-apercu .ap-lignes li .ap-nom-p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-apercu .ap-lignes li .ap-prix { font-weight: 600; white-space: nowrap; }
  .hero-apercu .ap-lignes li:last-child { border-bottom: 0; }
  .hero-apercu .ap-note { display: none; }
  .hero-apercu .ap-kicker { font-size: 9px; letter-spacing: .1em; margin-bottom: 4px; }
  .hero-apercu .apercu-bloc { padding: 0; }
  .hero-apercu .mock-body { padding: 13px 14px 12px; }
  .hero-apercu .ap-nom { font-size: 17px; }
  .hero-apercu .ap-metier { font-size: 12.5px; }
  /* Le reste du hero se resserre d'autant.
     ⚠️ On ne redéfinit PAS .releve-l ici : sa grille et son padding vivent dans
     accueil-contrat.css. Avant, ce bloc les écrasait (padding 6px au lieu de 7,
     grille ignorée), ce qui rendait le relevé mobile impossible à régler depuis
     un seul endroit. echelle.css ne touche plus qu'aux marges qui le concernent. */
  .hero-contrat .releve { margin-top: 12px; }
  .hero-contrat .cta-row { margin-top: 12px; }
  .hero-contrat .cta-note { margin-top: 8px; }
}
/* Le nom de prestation, sur toutes les tailles. */
.ap-lignes li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ap-nom-p { color: var(--ink); }
.ap-prix { font-weight: 600; }

/* ⚠️ PLUS DE COUPE À 2 LIGNES. L'ancienne règle masquait les lignes 3 et 4 :
   c'était le compromis d'avant, il est remplacé par le resserrement ci-dessus,
   qui garde les 4 prix. Ne pas la réintroduire. */