/* ============================================================
   DEVISALY — FEUILLE UNIQUE.

   ⚠️⚠️ POURQUOI UN SEUL FICHIER. Avant cette consolidation, chaque page
   chargeait 15 feuilles, empilées au fil des demandes : theme-binaire,
   menu, carrousel-mobile, respiration, langage-visuel, echelle-unique…
   Chaque ajout corrigeait le précédent, et 147 `!important` servaient à
   trancher entre des règles de même poids. C'est ce qui a produit les
   corrections en cascade (boutons, titres, prix, cadrage).

   ⚠️ CE FICHIER EST GÉNÉRÉ — ne pas l'éditer directement.
      Source : `scripts/consolider_css.py`, qui recopie les feuilles dans
      leur ordre de chargement. Modifier une section ici serait perdu à la
      prochaine consolidation.
      Pour une nouvelle règle : l'ajouter dans la section qui la concerne,
      en respectant l'ordre (une règle de fin gagne sur une règle de début).

   ⚠️ CE QUI RESTE SÉPARÉ, ET POURQUOI :
      • fonts.css / fonts_refonte.css : les @font-face, partagés avec les
        emails — un fichier de polices n'a pas vocation à être dans le CSS
        de mise en page ;
      • site_client*.css : ils habillent les SITES DES ARTISANS (le produit
        vendu), pas Devisaly. Une marque distincte, une feuille distincte.

   ⚠️ ORDRE DES SECTIONS = ORDRE DE CASCADE (le dernier gagne à poids égal) :
      1. polices et base        (luxe)
      2. finitions historiques  (atelier-polish, artisan, accueil-contrat)
      3. normalisations         (echelle)
      4. refonte                (refonte_blanche, vitrine)
      5. menu                   (menu)
      6. thème                  (theme-binaire)
      7. corrections mesurées   (carrousel-mobile, respiration,
                                 langage-visuel, echelle-unique)
   ============================================================ */


/* ============================================================
   EX-fonts.css   (2374 octets, 0 !important)
   ============================================================ */

/* Polices auto-hébergées (aucune dépendance externe) — Fraunces + Inter */

/* ⚠️ MONO DE LA CHARTE — IBM Plex Mono, auto-hébergée (fichiers déjà servis
   pour les sites clients). Sans cette déclaration, `--font-mono` pointait sur
   'SFMono-Regular', une police ABSENTE du serveur : les prix s'affichaient dans
   la police système, donc différemment selon la machine du visiteur. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/client-ibm-plex-mono-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/client-ibm-plex-mono-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/client-ibm-plex-mono-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   POLICE D'AFFICHAGE — Bodoni Moda (2026-09-30)
   ⚠️ Remplace Fraunces, jugee « tres bas de gamme » par le user. Fraunces est
   la serif la plus surexposee qui existe (defaut d'entrainement des modeles) et
   son faible contraste la fait paraitre molle en grand titre.
   Bodoni Moda appartient a la lignee DIDOT : la typographie du luxe francais,
   contraste plein/degage tres fort, autorite editoriale immediate.
   Auto-hebergee, aucune requete externe (la CSP l'exige).
   ============================================================ */

/* ⚠️ Vrai fichier italique (17060 o). Avant, cette declaration pointait sur le
   MEME fichier que la normale : le navigateur fabriquait un faux italique
   (penche mecanique), tres visible sur un Didone, et c'est l'element le plus
   en vue de l'accueil (les mots en or du titre). */



/* ============================================================
   EX-fonts_refonte.css   (1187 octets, 0 !important)
   ============================================================ */

/* ============================================================
   Polices de la refonte — AUTO-HÉBERGÉES, aucune dépendance CDN.
   ⚠️ Règle dure du projet : le site ne charge RIEN d'un domaine tiers.
   Vérifier avec un routeur Playwright qui `abort` toute requête non locale.
   Anton et Archivo sont des polices VARIABLES instanciées à la conversion
   (voir scripts/installer_refonte_blanche.py) : les navigateurs qui ignorent
   les axes variables reçoivent malgré tout la bonne graisse.
   ============================================================ */

@font-face {
  font-family: 'Anton';
  src: url('fonts/anton-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'PlexMono';
  src: url('fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}


/* ============================================================
   EX-luxe.css   (93600 octets, 3 !important)
   ============================================================ */

/* ============================================================
   DEVISALY — Design System "L'Atelier"
   Identité : le plan de travail de l'artisan.
   Papier ivoire, traits de mesure fins, or comme l'outil précieux,
   encre comme le trait du crayon. Signature : lignes de cotation
   et repères de mesure, comme un plan technique.
   ============================================================ */

:root {
  /* ---- Palette "L'Atelier" ---- */
  --paper: #f7f4ee;        /* fond ivoire profond (papier) */
  --paper-2: #efeae0;      /* zones secondaires (papier usé) */
  --card: #fffdf9;         /* panels / cartes (papier neuf) */
  --card-2: #faf7f0;       /* surfaces hover */
  --ink: #191713;          /* encre (trait du crayon) */
  --ink-2: #3d3830;        /* texte secondaire */
  --muted: #6f675a;        /* texte tertiaire */
  --faint: #7d7463;        /* texte discret (contraste AA 4.5:1) */

  --gold: #b08a3e;         /* or principal (outil précieux) */
  --gold-2: #8a6a2a;       /* or profond */
  --gold-3: #6e5320;       /* or le plus profond */
  --gold-line: rgba(176,138,62,.30);
  --gold-bg: rgba(176,138,62,.07);
  --gold-soft: #e9dcc0;    /* or clair (liserés) */

  --danger: #b23a2e;
  --ok: #3d7a4a;

  --line: #e6dfd0;         /* bordures (traits fins) */
  --line-soft: #efe9dc;

  --shadow-sm: 0 1px 2px rgba(25,23,19,.04), 0 2px 8px rgba(25,23,19,.04);
  --shadow-md: 0 4px 12px rgba(25,23,19,.06), 0 12px 32px rgba(25,23,19,.08);
  --shadow-lg: 0 8px 24px rgba(25,23,19,.08), 0 24px 60px rgba(25,23,19,.12);

  --radius: 6px;           /* rayons sobres, presque droits (plan technique) */
  --radius-lg: 10px;

  /* ---- Typo ---- */
  /* ⚠️ Aligné sur echelle.css : UNE SEULE déclaration fait foi (voir echelle).
     Le site a une identité, pas trois. */
  --font-serif: 'Anton', 'Archivo', system-ui, sans-serif;
  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ---- Tokens sémantiques (refonte 2026-09) ----
     Règle de contraste WCAG mesurée sur fond cartes/ivoire :
       --gold  #b08a3e = 3,16:1  -> AA gros éléments seulement (icônes, filets, aplat or)
       --gold-2#8a6a2a = 4,58:1  -> AA texte (>= 4.5) : TOUT texte or doit l'utiliser
       --gold-3#6e5320 = 6,55:1  -> AAA, réservé aux libellés fins sur or très clair
     Ne jamais écrire `color: var(--gold)` sur du texte < 18px : utiliser --accent. */
  --accent: var(--gold-2);        /* or lisible (texte, liens, petites icônes) */
  --accent-strong: var(--gold-3); /* or profond (libellés fins, hover) */
  --deco: var(--gold);            /* or décoratif (filets, aplats, gros éléments) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  font-size: 15px;
  transition: color .3s ease;
}

::selection { background: var(--gold); color: #fff; }

/* ---- Signature : quadrillage de plan technique en fond (léger, discret) ---- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 640px at 84% -14%, rgba(176,138,62,.07), transparent 60%),
    radial-gradient(820px 560px at -8% 30%, rgba(176,138,62,.05), transparent 55%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(25,23,19,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,23,19,.02) 1px, transparent 1px);
  background-size: 48px 48px;
}
.container, .topbar-inner, .auth-card, .footer { position: relative; z-index: 1; }

/* ---- Repères de mesure (signature) ---- */
.measure {
  display: flex; align-items: center; gap: 12px;
  color: var(--accent); font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
}
.measure::before, .measure::after {
  content: ""; height: 1px; background: var(--gold-line); flex: 1;
}
.measure::before { background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 6px); }

/* Repères de cotation verticaux (marges d'atelier) */
.measure-rail {
  display: flex; align-items: center; gap: 14px;
}
.measure-rail .rail-line {
  flex: 1; height: 1px; align-self: center;
  background: repeating-linear-gradient(90deg, var(--gold-2) 0 3px, transparent 3px 7px);
  opacity: .55;
}
.measure-rail .rail-ticks {
  display: flex; gap: 0; flex-direction: column; align-items: center;
  color: var(--accent); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1.5px;
}

/* Repères de coin (mire d'atelier) — appliqués aux cartes/panels clés */
.atelier-corner {
  position: relative;
}
.atelier-corner::before,
.atelier-corner::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  pointer-events: none; z-index: 2;
}
.atelier-corner::before {
  top: 10px; left: 10px;
  border-top: 1px solid var(--gold); border-left: 1px solid var(--gold);
}
.atelier-corner::after {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold);
}

/* ============ BOUTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: all .2s ease; letter-spacing: .01em; line-height: 1;
  white-space: nowrap; position: relative;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.primary {
  color: #fff;
  background: linear-gradient(165deg, #c9a457 0%, #b08a3e 48%, #8a6a2a 100%);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 2px 6px rgba(176,138,62,.3), 0 8px 20px rgba(176,138,62,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(176,138,62,.35), 0 14px 32px rgba(176,138,62,.3), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(110,83,32,.3); }

.btn.ghost {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}
.btn.ghost:hover { border-color: var(--gold); color: var(--gold-2); background: var(--card-2); }

.btn.big { padding: 16px 34px; font-size: 15px; border-radius: var(--radius-lg); line-height: 1.3; }

/* ============ TOPBAR ============ */
.topbar {
  background: rgba(255,253,249,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: 8px 28px; display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark {
  /* ⚠️⚠️ BOÎTE DIMENSIONNÉE AU CONTENU — ne pas remettre une taille fixe.
     Le logo est un MOT-SYMBOLE de 137 px de large (il contient « devisaly »),
     pas un carré de 32 px. Une taille fixe le faisait déborder de 105 px
     AU-DESSUS du texte adjacent : les deux logos se chevauchaient à l'écran. */
  width: auto; height: 30px; min-width: 0;
  border-radius: 0;
  display: flex; align-items: center;
  background: transparent;
  box-shadow: none;
}
.brand-mark svg, .brand-mark img { display: block; width: auto; height: 100%; }
/* ⚠️ Le logo contient déjà le mot « devisaly » : le texte écrit à côté est un
   DOUBLON visuel. Il est masqué sur tout le site. */
.brand-name { display: none; }
.brand-name-off { font-family: var(--font-serif); font-weight: 500; font-size: 16px; letter-spacing: .01em; color: var(--ink); line-height: 1; }
.brand-name span { color: var(--gold-2); }
.brand-sub { font-size: 12px; color: var(--faint); letter-spacing: 2.5px; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav > a:not(.btn) { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .15s; position: relative; }
.nav > a:not(.btn):hover { color: var(--gold-2); }
.nav > a.active { color: var(--gold-2); }
.nav > a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--gold); }
.nav .logout { color: var(--danger); }
.nav .btn { padding: 7px 15px; font-size: 12px; border-radius: var(--radius); }

/* ============ SÉLECTEUR DE LANGUE ============ */
.lang-switch { display: flex; align-items: center; gap: 2px; margin-left: 2px; }
.lang-link {
  font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--faint);
  text-decoration: none; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--radius);
  transition: color .15s, border-color .15s;
}
.lang-link:hover { color: var(--gold-2); border-color: var(--line); }

/* ============ BANDEAU VÉRIFICATION EMAIL ============ */
.verify-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 20px;
  border: 1px solid var(--gold-line); border-radius: var(--radius);
  background: var(--gold-bg); color: var(--ink); font-size: 14px;
}
.verify-banner svg { color: var(--gold-2); flex-shrink: 0; }
.verify-banner a { color: var(--gold-2); font-weight: 500; text-decoration: none; }
.verify-banner a:hover { text-decoration: underline; }

/* ============ MENU UTILISATEUR ============ */
.user-menu { position: relative; display: flex; align-items: center; }
.user-menu-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); cursor: pointer; transition: border-color .15s; height: 30px;
}
.user-menu-btn:hover { border-color: var(--gold); }
.user-menu-btn svg { color: var(--faint); }
.user-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 500; font-size: 11px; color: #fff;
  background: linear-gradient(160deg, #d8b97c, #a9863f);
}
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 8px; display: none; z-index: 70;
}
.user-menu.open .user-dropdown { display: block; }
.user-dropdown .ud-head { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.user-dropdown .ud-name { font-weight: 500; font-size: 14px; }
.user-dropdown .ud-plan { font-size: 12px; color: var(--gold-2); }
.user-dropdown a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius);
  font-size: 14px; color: var(--ink); text-decoration: none; transition: background .12s;
}
.user-dropdown a:hover { background: var(--card-2); color: var(--gold-2); }
.user-dropdown a.logout { color: var(--danger); }
.user-dropdown a.logout:hover { background: rgba(178,58,46,.08); color: var(--danger); }

/* ============ MENU LATÉRAL (drawer) ============ */
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 10px;
}
.burger span { display: block; height: 1.5px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer-scrim {
  position: fixed; inset: 0; background: rgba(25,23,19,.42);
  backdrop-filter: blur(2px); z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: 380px; max-width: 90vw;
  background: var(--card); border-left: 1px solid var(--line);
  z-index: 201; transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(25,23,19,.12);
}
.drawer.open { transform: translateX(0); }
body.drawer-open { overflow: hidden; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.drawer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.drawer-mark { display: inline-flex; width: 30px; height: 30px; }
.drawer-mark img { width: 100%; height: 100%; }
.drawer-wordmark { font-family: var(--font-serif); font-weight: 500; font-size: 19px; color: var(--ink); }
.drawer-wordmark span { color: var(--gold-2); }
.drawer-close { background: transparent; border: none; cursor: pointer; color: var(--muted); padding: 6px; display: inline-flex; border-radius: var(--radius); transition: background .15s, color .15s; }
.drawer-close:hover { background: var(--paper); color: var(--ink); }

.drawer-user { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
.drawer-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-2); display: grid; place-items: center; font-family: var(--font-serif); font-size: 19px; font-weight: 500; flex-shrink: 0; }
.drawer-user-name { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.drawer-user-plan { font-size: 12px; color: var(--muted); }

.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 20px 0; padding: 14px 18px; background: var(--gold-grad, linear-gradient(165deg, var(--gold), var(--gold-2)));
  color: #fff; border-radius: var(--radius); text-decoration: none; font-weight: 500; font-size: 14.5px;
  min-height: 48px;
}
.drawer-cta.ghost { background: transparent; color: var(--gold-2); border: 1px solid var(--gold-line); margin-top: 10px; }

.drawer-nav { flex: 1; overflow-y: auto; padding: 18px 20px 8px; }
.drawer-group-label { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); font-weight: 500; margin: 6px 0 10px; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.drawer-grid a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 13px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 500;
  min-height: 74px; transition: border-color .15s, background .15s;
}
.drawer-grid a:hover { border-color: var(--gold-line); background: var(--gold-bg); }
.drawer-grid a svg { color: var(--gold-2); }

.drawer-list { display: flex; flex-direction: column; margin-bottom: 18px; }
.drawer-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 2px; text-decoration: none; color: var(--ink); font-size: 14px;
  border-bottom: 1px solid var(--line-soft); transition: color .15s;
}
.drawer-list a:last-child { border-bottom: none; }
.drawer-list a:hover { color: var(--gold-2); }
.drawer-tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--gold-2); background: var(--gold-soft); padding: 3px 9px; border-radius: 999px; }

.drawer-more { border-top: 1px solid var(--line-soft); padding-top: 6px; margin-bottom: 16px; }
.drawer-more summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 12px 2px; font-size: 13.5px; font-weight: 500; color: var(--muted); list-style: none;
}
.drawer-more summary::-webkit-details-marker { display: none; }
.drawer-more[open] summary { color: var(--gold-2); }
.drawer-more[open] summary svg { transform: rotate(180deg); }
.drawer-more summary svg { transition: transform .2s; }
.drawer-more .drawer-list { margin: 4px 0 12px; }

.drawer-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.drawer-logout { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 12px; text-decoration: none; color: var(--danger); font-size: 13.5px; font-weight: 500; border-radius: var(--radius); }
.drawer-logout:hover { background: rgba(154,59,46,.06); }
.drawer-foot .drawer-cta { margin: 0; }
.hm-section a.logout:hover { background: rgba(178,58,46,.08); }
.hm-section a svg { opacity: .65; }

/* ============ CONTENEURS / SECTIONS ============ */
/* ⚠️⚠️ LE CONTENEUR DE RÉFÉRENCE — SOURCE UNIQUE DU CADRE.
   Toute page qui cadre son contenu passe par cette largeur. La refonte de
   l'accueil utilisait 1320 px de son côté : 200 px d'écart, soit 94 px de
   décalage à l'écran entre l'accueil et les autres pages — le défaut que le
   user a signalé (« tout est mal aligné »).
   Ne PAS créer un second conteneur à une autre largeur : modifier ICI. */
.container { max-width: 1120px; margin: 0 auto; padding: 0 28px 20px; }
.container.narrow { max-width: 840px; }

.page-head { margin-bottom: 34px; padding-top: 24px; }
.page-head h1 { font-family: var(--font-serif); font-size: 42px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.page-head p { color: var(--muted); font-size: 15px; margin-top: 8px; max-width: 560px; }

/* En-tête de page centré (pages marketing : pricing, contact, logiciel…) */
.page-head.centered { text-align: center; margin-bottom: 44px; padding-top: 24px; }

/* En-tête de page posé sur le plan d'atelier 3D (builder, tarifs).
   Le canvas est un fond absolu ; l'intensité est réglée par data-intensity. */
.page-head-3d {
  position: relative; overflow: hidden; border-radius: 16px; z-index: 0;
  padding-bottom: 54px;   /* laisse de la place au sol en perspective */
}
.page-head-3d.centered { padding-bottom: 34px; }
.page-head-3d > *:not(.bg3d) { position: relative; z-index: 1; }
.bg3d {
  position: absolute; inset: -6px -16px 0 -16px; z-index: 0;
  width: auto; height: auto; pointer-events: none;
  /* fondu haut/bas : la scène se dissout au lieu de finir net */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 80%, transparent 100%);
}
.page-head.centered .eyebrow { justify-content: center; margin-bottom: 12px; }
.page-head.centered h1 { font-size: 56px; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.page-head.centered p { margin: 12px auto 0; }
.page-head.centered .measure { max-width: 420px; margin: 16px auto 0; }
.page-head.centered .cta-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
.page-head.centered .trust { display: flex; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.page-head.centered .trust span { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.page-head.centered .trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(176,138,62,.4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold); }

/* ============ CARTES ============ */
.card, .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-title, .panel-title {
  font-family: var(--font-serif); font-weight: 500; font-size: 17px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px; color: var(--ink);
}
.card-title .num {
  width: 28px; height: 28px; border-radius: var(--radius); flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-family: var(--font-mono);
  background: var(--gold-bg); color: var(--gold-2); border: 1px solid var(--gold-line);
}
.card-sub { color: var(--faint); font-size: 13px; margin-bottom: 20px; }
.panel-sub { color: var(--faint); font-size: 13px; margin-bottom: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }

/* ============ FORMULAIRES ============ */
label { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin: 16px 0 7px; }
select, input[type=number], input[type=tel], input[type=text], input[type=email], input[type=password], textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radius); font-size: 14px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); outline: none;
  font-family: var(--font-sans); transition: border-color .15s, box-shadow .15s;
}
select:focus, input:focus, textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.12); background: var(--card);
}
select option { background: var(--card); color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
input::placeholder { color: var(--faint); }

.region-hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 15px;
  border-radius: var(--radius); background: var(--gold-bg); border: 1px solid var(--gold-line);
  font-size: 13px; color: var(--gold-2);
}

/* ============ PRESTATIONS ============ */
.services-list { display: flex; flex-direction: column; gap: 10px; }
.service-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; transition: border-color .15s, box-shadow .15s;
}
.service-item:hover { border-color: var(--gold-line); box-shadow: var(--shadow-sm); }
.service-item .info { flex: 1; min-width: 0; }
.service-item .info select, .service-item .info input[type=text] { background: var(--card); }
.service-item .s-label { font-size: 13px; font-weight: 500; }
.service-item .s-price { font-size: 12px; color: var(--gold-2); margin-top: 3px; font-family: var(--font-mono); }
/* Prix conseillé CLIQUABLE : reprend la valeur dans le champ en un clic.
   Rendu comme un petit bouton discret (l'artisan peut aussi taper son prix). */
.service-item button.s-price {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--gold-bg); border: 1px dashed var(--gold-line);
  border-radius: 6px; padding: 3px 8px; text-align: left;
  transition: background .15s, border-color .15s;
}
.service-item button.s-price::after { content: "+"; font-weight: 500; opacity: .7; }
.service-item button.s-price:hover { background: rgba(176,138,62,.16); border-color: var(--gold); }
.service-item button.s-price.used { border-style: solid; background: rgba(176,138,62,.18); }
.service-item button.s-price.used::after { content: "✓"; }
.service-item .price-wrap { display: flex; align-items: center; gap: 12px; }
.service-item .field { display: flex; align-items: center; gap: 6px; }
.service-item .field-label { font-size: 11px; color: var(--faint); font-weight: 500; white-space: nowrap; }
.service-item .field-input { display: flex; align-items: center; gap: 4px; }
.service-item .price { width: 80px; padding: 9px 11px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); font-size: 13px; text-align: right; outline: none; color: var(--ink); font-family: var(--font-mono); }
.service-item .price:focus { border-color: var(--gold); }
.service-item .price-unit { font-size: 12px; color: var(--faint); }
.service-item .qty { width: 60px; padding: 9px 11px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); font-size: 13px; text-align: center; outline: none; color: var(--ink); font-family: var(--font-mono); }
.service-item .qty:focus { border-color: var(--gold); }
.service-item .remove {
  width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
  color: var(--faint); cursor: pointer; flex-shrink: 0; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.service-item .remove:hover { border-color: var(--danger); color: var(--danger); }

.add-service {
  margin-top: 14px; padding: 12px 18px; border-radius: var(--radius);
  border: 1px dashed var(--gold-line); background: transparent;
  color: var(--gold-2); cursor: pointer; font-size: 13px; font-weight: 500; width: 100%;
  transition: all .15s;
}
.add-service:hover { background: var(--gold-bg); border-style: solid; }
/* CTA add-service + bouton réinitialiser dans la même rangée */
.svc-actions { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.svc-actions .add-service { margin-top: 0; flex: 1; }
.clear-draft {
  padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
  color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all .15s; white-space: nowrap;
}
.clear-draft:hover { border-color: var(--danger); color: var(--danger); background: rgba(185,67,38,.05); }
@media (max-width:600px) {
  .svc-actions { flex-direction: column; }
  .svc-actions .add-service, .clear-draft { width: 100%; }
}

/* ============ CLIENT ============ */
.client-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.client-fields .full { grid-column: 1 / -1; }

/* ============ BUILDER ============ */
.builder { display: grid; grid-template-columns: 1fr 372px; gap: 30px; align-items: start; }
@media (max-width: 820px) { .builder { grid-template-columns: 1fr; } }
.main-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; max-width: 100%; }

/* Recherche de métier */
.trade-search-wrap { display: flex; flex-direction: column; gap: 8px; }
.trade-search-wrap input {
  padding: 10px 15px; border-radius: var(--radius); font-size: 14px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); outline: none;
}
.trade-search-wrap input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.12); }

.summary-col { position: sticky; top: 88px; }
.summary {
  background: var(--card);
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.summary::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.summary-title { font-family: var(--font-serif); font-weight: 500; font-size: 18px; margin-bottom: 18px; color: var(--gold-2); }
.summary-lines { max-height: 280px; overflow-y: auto; margin-bottom: 16px; }
.summary-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.summary-line .sl-label { color: var(--muted); }
.summary-line .sl-price { font-weight: 500; color: var(--ink); font-family: var(--font-mono); }
.summary-empty { color: var(--faint); font-size: 13px; text-align: center; padding: 24px 0; }
.summary-totals { border-top: 1px solid var(--line); padding-top: 16px; }
.summary-totals > div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: var(--muted); }
.tva-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: var(--muted); }
.tva-input-wrap { display: flex; align-items: center; gap: 5px; }
.tva-input { width: 62px; padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); font-size: 13px; text-align: center; color: var(--ink); outline: none; font-family: var(--font-mono); }
.tva-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.12); }
.summary-totals .grand {
  font-family: var(--font-serif); font-size: 26px; font-weight: 500; color: var(--gold-2);
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px;
}
.summary-totals .grand span:last-child { font-weight: 500; }
.summary-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.summary-actions .btn { width: 100%; }
.summary-actions .dl-row { display: flex; gap: 8px; }
.summary-actions .dl-row .btn { flex: 1; font-size: 12.5px; padding: 11px 10px; }
.summary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.summary-head .summary-title { margin-bottom: 0; }
.draft-flag { font-size: 11px; color: var(--faint); font-family: var(--font-mono); transition: color .2s; }
.draft-flag.on { color: var(--gold-2); }
.card.step { position: relative; }
.card.step .card-title .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--gold-soft);
  color: var(--gold-2); font-size: 13px; font-weight: 500; margin-right: 8px;
  font-family: var(--font-mono);
}
.client-pick { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.client-pick select { flex: 1; }
.btn.btn-sm { padding: 8px 14px; font-size: 12.5px; }
.custom-unit-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mini-label { font-size: 11.5px; color: var(--muted); margin: 0; }
.custom-unit { width: auto; max-width: 130px; padding: 6px 10px; font-size: 12.5px; }
.client-stats { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--gold-line); border-radius: var(--radius); font-size: 12.5px; color: var(--muted); }
.client-stats .cs-total { font-family: var(--font-mono); font-weight: 500; color: var(--gold-2); }
.client-stats.muted { justify-content: center; color: var(--faint); }
.btn.btn-block { display: block; width: 100%; text-align: center; margin-top: 10px; }
.back-link { display: inline-block; font-size: 13px; color: var(--gold-2); margin-bottom: 10px; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.client-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.client-info-grid > div { display: flex; flex-direction: column; gap: 3px; }
.ci-label { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.ci-val { font-size: 14px; color: var(--ink); }
/* Code promo */
.promo-box { margin: 12px 0; padding: 14px; border: 1px dashed var(--gold-line); border-radius: var(--radius); background: var(--paper); }
.promo-box label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; text-transform: uppercase; }
.promo-msg { font-size: 12.5px; margin-top: 8px; min-height: 16px; }
.promo-msg.ok { color: var(--success, #2e7d32); }
.promo-msg.err { color: var(--danger); }
.promo-temp { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 12px; background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--radius); font-size: 12px; color: var(--gold-2); line-height: 1.35; }
.promo-temp svg { flex: 0 0 auto; }
/* Billing / rétention */
.billing-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bs-plan { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 500; font-size: 13px; color: var(--muted); }
.bs-plan.pro { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-2); }
.bs-note { font-size: 13px; color: var(--muted); }
.bs-note.warn { color: var(--danger); }
.billing-features { list-style: none; padding: 0; margin: 14px 0 18px; }
.billing-features li { position: relative; padding: 6px 0 6px 22px; font-size: 14px; color: var(--ink); }
.billing-features li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 7px; border-left: 2px solid var(--gold-2); border-bottom: 2px solid var(--gold-2); transform: rotate(-45deg); }
.billing-actions { margin: 10px 0; }
.billing-actions .btn, .billing-cancel-zone .btn { width: 100%; }
.billing-cancel-zone { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.retention-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.retention-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.retention-card.keep { border-color: var(--gold-line); background: var(--paper); }
.retention-card h3 { font-family: var(--font-serif); font-size: 16px; color: var(--gold-2); margin-bottom: 12px; }
.retention-card ul { list-style: none; padding: 0; }
.retention-card li { padding: 5px 0 5px 20px; position: relative; font-size: 13.5px; }
.retention-card li.muted::before { content: ""; position: absolute; left: 0; top: 11px; width: 11px; height: 2px; background: var(--faint); }
.retention-card.keep li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 7px; border-left: 2px solid var(--gold-2); border-bottom: 2px solid var(--gold-2); transform: rotate(-45deg); }
.retention-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.retention-actions .btn { width: 100%; }
.danger-zone { border-color: var(--danger); border-width: 1.5px; }
/* ==== Bibliothèque de prix (builder + page) ==== */
.svc-actions { flex-wrap: wrap; }
.add-service.lib-btn { border-style: solid; border-color: var(--gold-line); background: var(--gold-bg); }
.field-cost .field-input input { width: 80px; }
.margin-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 0; font-size: 13px; color: var(--gold-2); font-weight: 500; }
.margin-row span:last-child { font-family: var(--font-mono); }
.lib-overlay { z-index: 60; }
.lib-modal { max-width: 560px; }
#lib-search { width: 100%; margin: 10px 0 14px; }
.lib-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.lib-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, background .15s; }
.lib-item:hover { border-color: var(--gold); background: var(--gold-bg); }
.li-label { flex: 1; font-size: 13.5px; font-weight: 500; }
.li-meta { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.li-add { font-size: 11.5px; color: var(--gold-2); font-weight: 500; white-space: nowrap; }
.lib-empty { padding: 22px; text-align: center; color: var(--faint); font-size: 13px; }
.lib-import { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
/* ==== Chantiers ==== */
.chantier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.chantier-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cc-num { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.cc-client { font-family: var(--font-serif); font-size: 17px; font-weight: 500; }
.cc-status { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.cc-status.cc-en_cours { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-2); }
.cc-status.cc-paid { background: #eaf5ea; border-color: #bfe0bf; color: #2e7d32; }
.cc-meta { font-size: 12.5px; color: var(--muted); margin: 8px 0 14px; }
.cc-progress-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.cc-progress-wrap label { font-size: 11.5px; color: var(--faint); text-transform: uppercase; }
.cc-bar { height: 10px; background: var(--paper); border: 1px solid var(--gold-line); border-radius: 999px; overflow: hidden; cursor: pointer; }
.cc-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.cc-pct { font-family: var(--font-mono); font-size: 12px; color: var(--gold-2); }
.cc-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cc-dates label { display: block; font-size: 11px; color: var(--faint); margin-bottom: 4px; }
.cc-paid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: var(--paper); border-radius: var(--radius); margin-bottom: 14px; }
.cc-paid label { display: block; font-size: 11px; color: var(--faint); }
.cc-paid-amt, .cc-balance { font-family: var(--font-mono); font-weight: 500; font-size: 14px; }
.cc-balance { color: var(--danger); }
.cc-pnl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: var(--card-2); border-radius: var(--radius); margin-bottom: 14px; }
.cc-pnl label { display: block; font-size: 11px; color: var(--faint); }
.cc-cost, .cc-margin { font-family: var(--font-mono); font-weight: 500; font-size: 14px; }
.cc-cost { color: var(--muted); }
.cc-margin.pos { color: #2e7d32; }
.cc-margin.neg { color: var(--danger); }
.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ==== Collaborateurs ==== */
.collab-status { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); }
.collab-status.invited { color: var(--muted); }
.collab-status.active { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-2); }
@media (max-width: 600px) {
  .chantier-grid { grid-template-columns: 1fr; }
  .cc-dates, .cc-paid { grid-template-columns: 1fr; }
  .cc-progress-wrap { grid-template-columns: 1fr; }
  .cc-actions .btn { flex: 1 1 100%; min-height: 44px; }
}

/* ⚠️ Débordement horizontal de TABLETTE (601-1100px), corrigé 2026-09.
   `.mock-glow` (halo décoratif du hero) est en `position:absolute` avec des
   `inset` négatifs assumés sur desktop. Le correctif n'existait QUE sous 600px
   (`inset: 0` dans la media query mobile) : entre 601 et 1100px, le halo
   sortait de la page et créait un défilement horizontal (mesuré : 59-76px à
   768px et 900px). `overflow-x: clip` ne coûte rien ici et ne casse pas les
   éléments `position:sticky`. */
@media (min-width: 601px) and (max-width: 1100px) {
  html, body { overflow-x: clip; max-width: 100%; }
  .mock-glow { inset: -6% -4%; }
}

.error { color: var(--danger); font-size: 13px; margin-top: 10px; }

/* Bandeau upsell Pro dans le récapitulatif */
.upsell-banner {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--gold-bg), rgba(176,138,62,.03));
}
/* Bandeau d'upsell repliable : replié tant que le visiteur n'a rien chiffré,
   il ne doit pas occuper 40 % du récapitulatif ni distraire de l'action. */
.upsell-banner > summary { display: block; cursor: pointer; list-style: none; }
.upsell-banner > summary::-webkit-details-marker { display: none; }
.ub-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-serif); font-size: 15px; font-weight: 500; color: var(--gold-2);
  margin-bottom: 0;
}
.upsell-banner .ub-body { margin-top: 12px; }
.ub-list { list-style: none; margin: 0 0 14px; }
.ub-list li { font-size: 13px; color: var(--muted); padding: 5px 0; display: flex; align-items: center; gap: 8px; }
/* Coche dessinée en CSS (aucun caractère emoji/dingbat dans l'UI) */
.ub-list li::before {
  content: ""; width: 12px; height: 7px; flex-shrink: 0;
  border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg); margin: 0 2px 3px 1px;
}
.upsell-banner .btn { width: 100%; }
.ub-note { text-align: center; color: var(--faint); font-size: 12px; margin-top: 12px; }

/* ---- Verrouillage des prix pour les visiteurs non connectés ----
   On floute les DONNÉES DE MARCHÉ (prix conseillés, étude de concurrence) :
   c'est la valeur du produit, elle se mérite par un compte.
   MAIS on laisse VISIBLE le total que le visiteur a lui-même composé : il a
   saisi ses prestations, lui cacher sa propre somme est de la frustration pure
   (le compte est gratuit, il n'y a rien à protéger). C'est ce total visible qui
   crée l'investissement -> il s'inscrit pour l'enregistrer et l'exporter. */
/* ---- ⚠️⚠️ PLUS AUCUN VERROU VISUEL (2026-10-06).
   Le paywall du logiciel de devis est LEVÉ : le logiciel est gratuit. Les trois
   règles ci-dessous floutaient les DONNÉES DE MARCHÉ et masquaient l'étude de
   concurrence derrière « Connectez-vous » / « réservé aux comptes Pro ».
   Elles affichaient un verrou qui n'existe plus côté serveur (`_est_pro()`
   renvoie True) : le visiteur voyait une promesse de blocage démentie par
   l'application. On les neutralise en gardant la trace de ce qui existait.
   ⚠️ Si le paywall devait revenir (`DEVISALY_DEVIS_GRATUIT=0`), ces règles
   sont à restaurer — elles sont conservées en commentaire ci-dessous. */

/* .guest .region-hint,
   .guest .service-item .s-price,
   .guest .service-item .price-unit,
   .guest .competition .comp-table { filter: blur(5px); ... } */
.guest .region-hint,
.guest .service-item .s-price,
.guest .service-item .price-unit,
.guest .competition .comp-table {
  filter: none;
  user-select: auto;
  pointer-events: auto;
}
/* .guest .competition::before { content: "Étude de marché réservée aux comptes Pro"; } */
.guest .competition::before { content: none; }
/* ⚠️ NEUTRALISÉ 2026-10-06 : le message « Connectez-vous pour voir les prix
   conseillés » n'a plus lieu d'être — le logiciel est gratuit et l'étude de
   marché n'est plus réservée. Restaurer seulement si le paywall revient. */
.guest .region-hint::after {
  content: none;
}
.guest .service-item .s-price::after { font-size: 11px; }
/* Le bouton « prix conseillé » reste CLIQUABLE pour un visiteur : c'est le
   geste le plus répété du builder, et le rendre inerte pénalisait 100 % du
   trafic Google (il était `pointer-events:none` + flou). On garde l'indication
   que c'est une donnée de marché, sans bloquer l'action. */
/* Le prix conseillé est lisible ET cliquable pour un visiteur : il vient de
   composer un devis, lui cacher la valeur qu'il est invité à reprendre n'a
   aucun sens (et le flou sur un bouton actionnable est trompeur). Ce qui reste
   réservé, c'est l'ÉTUDE DE MARCHÉ détaillée (concurrence) — voir .competition. */
.guest .service-item button.s-price { pointer-events: auto; cursor: pointer; filter: none; }
.guest .service-item button.s-price::after { content: "+"; font-size: 12px; }
.guest .service-item .price-unit { filter: none; pointer-events: auto; }
.guest .competition::before {
  content: "Étude de marché réservée aux comptes Pro";
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; color: var(--gold-2); font-weight: 500; font-size: 13px; z-index: 3;
  filter: none;
}
.guest .competition { position: relative; }

/* Les totaux du devis restent visibles pour les visiteurs (voir commentaire
   ci-dessus) : plus de message "Total réservé aux comptes". */

/* ============ RÉSULTAT / DOCUMENT ============ */
.result { display: none; margin-top: 28px; min-width: 0; }
.result.show { display: block; }
#quote-body { min-width: 0; overflow-x: auto; }

.quote-doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.quote-doc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 28px;
  background: linear-gradient(135deg, #8a6a2a, #b08a3e 55%, #6e5320);
  color: #fff; position: relative;
}
.quote-doc-head::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 8px);
}
.quote-doc-head .q-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; }
.quote-doc-head .q-sub { font-size: 12px; opacity: .85; margin-top: 3px; }
.quote-doc .q-note { font-size: 11px; color: var(--muted); margin: 8px 0 4px; font-style: italic; }
.quote-doc-head .q-num { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 2px; opacity: .9; }

.quote-table { width: 100%; border-collapse: collapse; }
.quote-table thead th {
  text-align: left; padding: 14px 28px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.quote-table thead th.num, .quote-table tbody td.num { text-align: right; }
.quote-table tbody td { padding: 16px 28px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
.quote-table tbody tr:last-child td { border-bottom: none; }
.quote-table .q-label { font-weight: 500; color: var(--ink); }
.quote-table .q-detail { color: var(--faint); font-size: 12px; margin-top: 2px; }
.quote-table .q-price { font-family: var(--font-mono); font-weight: 500; color: var(--gold-2); }

.quote-totals { background: var(--paper-2); border-top: 1px solid var(--line); padding: 22px 28px; }
.quote-totals-row { display: flex; justify-content: flex-end; gap: 20px; align-items: center; padding: 6px 0; font-size: 14px; color: var(--muted); }
.quote-totals-row .label { width: 150px; text-align: right; }
.quote-totals-row .value { width: 120px; text-align: right; font-weight: 500; color: var(--ink); font-family: var(--font-mono); }
.quote-totals-row.grand { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.quote-totals-row.grand .label { font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--gold-2); }
.quote-totals-row.grand .value { font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--gold-2); }

/* Étude de marché */
.competition { margin-top: 22px; background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.competition h3 { font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--gold-2); padding: 18px 28px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table th { text-align: left; padding: 12px 28px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-soft); }
.comp-table th.num, .comp-table td.num { text-align: right; }
.comp-table td { padding: 12px 28px; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.comp-table tr:last-child td { border-bottom: none; }
.comp-table .c-label { color: var(--ink); font-weight: 500; }
.comp-table td.num { font-family: var(--font-mono); }
.comp-note { padding: 13px 28px; font-size: 12px; color: var(--faint); border-top: 1px solid var(--line-soft); }

/* ============ LANDING ============ */
.hero {
  display: grid; grid-template-columns: 1fr 0.92fr; gap: 48px; align-items: center;
  padding: 38px 0 54px; position: relative;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 44px; padding: 24px 0 48px; } }
.hero-copy { text-align: left; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-2); font-weight: 500;
  background: var(--gold-bg); border: 1px solid var(--gold-line); padding: 9px 20px; border-radius: 40px;
}
.hero .eyebrow::before, .hero .eyebrow::after { content: ""; width: 18px; height: 1px; background: var(--gold); }
.hero h1 {
  font-family: var(--font-serif); font-size: 56px; font-weight: 500; line-height: 1.06;
  letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
@media (max-width: 600px) { .hero h1 { font-size: 34px; letter-spacing: -.025em; } }
@media (min-width: 601px) and (max-width: 900px) { .hero h1 { font-size: 44px; } }
.hero h1 .accent, .page-head h1 .accent {
  background: linear-gradient(120deg, #c9a457, #8a6a2a, #b08a3e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-weight: 500;
}
.hero p { color: var(--ink-2); margin: 26px 0 0; font-size: 20px; max-width: 560px; line-height: 1.65; }
.cta-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
.cta-row .btn { max-width: 100%; }
.hero .cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; align-items: center; }
.hero .cta-row .btn.big { padding: 15px 32px; font-size: 15.5px; }  /* legerement reduit (demande utilisateur) */
.hero .trust { display: flex; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.hero .trust span { font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.hero .trust .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(176,138,62,.5); }

/* ============ COUCHE 3D : PLAN D'ATELIER + PROFONDEUR ============
   Le hero pose une perspective d'atelier : plan technique au sol (canvas
   #atelier3d) + mockup du builder incliné qui réagit au pointeur.
   Tout est décoratif (aria-hidden) et coupé si prefers-reduced-motion. */
.hero-3d {
  position: absolute; inset: -10px -20px; z-index: 0;
  pointer-events: none; overflow: hidden; border-radius: 16px;
}
.hero-3d canvas { display: block; width: 100%; height: 100%; }
.hero-copy { position: relative; z-index: 2; }
.hero-mock {
  position: relative; z-index: 1;
  transform-style: preserve-3d; will-change: transform;
}
.mock-glow {
  position: absolute; inset: -16% -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(176,138,62,.20), transparent 72%);
  filter: blur(20px); animation: mockGlow 7s ease-in-out infinite;
}
@keyframes mockGlow {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .9; transform: scale(1.06); }
}
.mock-window { transform-style: preserve-3d; backface-visibility: hidden; }
/* Reflet qui balaie l'écran du mockup */
.mock-window::after {
  content: ""; position: absolute; top: -60%; left: -30%; width: 45%; height: 220%;
  z-index: 3; pointer-events: none; rotate: 18deg;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  animation: mockSheen 8s ease-in-out infinite;
}
@keyframes mockSheen {
  0%, 60% { transform: translateX(-160%); }
  88%, 100% { transform: translateX(360%); }
}
/* Repos incliné (JS absent / reduced-motion) — desktop uniquement */
@media (min-width: 901px) {
  .hero-mock.mock-static .mock-window {
    transform: perspective(1500px) rotateY(-13deg) rotateX(7deg);
  }
}
/* Halo 3D sous le hero : la scène flotte au-dessus du papier */
.hero h1 { text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 18px 44px rgba(25,23,19,.10); }

/* Badges différenciateurs : alignés, même hauteur, même style */
.hero-badges { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; width: fit-content;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink);
}
.hero-badge svg { flex-shrink: 0; color: var(--gold-2); }
.hero-badge span { line-height: 1.4; }

/* Mockup du builder (aperçu produit) */
.hero-mock { position: relative; }
.hero-mock::before {
  content: ""; position: absolute; inset: -40px -30px; z-index: 0; pointer-events: none;
  background: radial-gradient(520px 360px at 50% 38%, rgba(176,138,62,.18), transparent 70%);
}
.mock-window {
  position: relative; z-index: 1;
  background: var(--card); border: 1px solid var(--gold-line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(25,23,19,.18), 0 8px 24px rgba(176,138,62,.18);
  overflow: hidden;
}
.mock-window::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.mock-bar {
  display: flex; align-items: center; gap: 6px; padding: 13px 16px;
  background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mock-dot:first-child { background: var(--gold-soft); }
.mock-title { margin-left: 10px; font-size: 12px; color: var(--faint); letter-spacing: 1px; }
.mock-body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; }
.mock-col { padding: 24px; }
.mock-field { margin-bottom: 18px; }
.mock-label { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 6px; }
.mock-select { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; color: var(--ink); background: var(--card); }
.mock-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); }
.mock-line .mock-price { font-family: var(--font-mono); color: var(--gold-2); font-weight: 500; }
.mock-summary { padding: 24px; background: var(--paper-2); border-left: 1px solid var(--line); }
.mock-sum-title { font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--gold-2); margin-bottom: 16px; }
.mock-total { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--muted); }
.mock-total span:last-child { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }
.mock-total.mock-grand { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }
.mock-total.mock-grand span { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--gold-2); }
.mock-btn { margin-top: 20px; padding: 13px; text-align: center; border-radius: var(--radius); color: #fff; font-size: 14px; font-weight: 500; background: linear-gradient(165deg, #c19a4e, #b08a3e 50%, #8a6a2a); box-shadow: 0 3px 8px rgba(176,138,62,.3), inset 0 1px 0 rgba(255,255,255,.28); }

/* Sections */
.section { padding: 8px 0 20px; }
.section-head { text-align: center; margin-bottom: 22px; }
.section-head .eyebrow { justify-content: center; margin-bottom: 12px; }
.section-head .eyebrow::after { content: ""; width: 30px; height: 1px; background: var(--gold); }
.section-head h2 { font-family: var(--font-serif); font-size: 38px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.section-head p { color: var(--muted); margin-top: 14px; max-width: 560px; margin-inline: auto; font-size: 15px; }
.section-head .measure { max-width: 420px; margin: 18px auto 0; }

/* Étapes */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-sm); position: relative; text-align: left; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px 160px at var(--mx,50%) -20%, rgba(176,138,62,.14), transparent 60%); opacity: 0; transition: opacity .3s ease;
}
.step:hover { transform: translateY(-4px); border-color: var(--gold-line); box-shadow: 0 8px 24px rgba(25,23,19,.07), 0 20px 50px rgba(176,138,62,.12), inset 0 1px 0 rgba(255,255,255,.5); }
.step:hover::after { opacity: 1; }
.step .step-num {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--accent); letter-spacing: 1px;
}
.step .step-icon {
  width: 48px; height: 48px; border-radius: var(--radius); margin-bottom: 18px;
  display: grid; place-items: center; color: var(--gold-2);
  background: linear-gradient(160deg, var(--gold-soft), var(--gold-bg));
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.step h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin-bottom: 8px; color: var(--ink); }
.step p { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* Ligne discrète vers l'offre Visibilité Pro (site web + SEO, 199 €/mois) */
.hero-alt { color: var(--muted); font-size: 14px; margin-top: 16px; }
.hero-alt a { color: var(--accent); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.hero-alt a:hover { border-color: var(--accent); }

/* CTA alternatif discret (2e action hero sans bouton plein) */
.cta-alt {
  color: var(--accent); font-weight: 500; font-size: 15px; text-decoration: none;
  border-bottom: 1px solid var(--gold-line); padding-bottom: 2px; transition: border-color .15s, color .15s;
}
.cta-alt:hover { border-color: var(--accent); color: var(--accent-strong); }

/* FAQ accordéon (landing) — replié par défaut, allège fortement la page.
   Distinct de .faq-item (utilisé tel quel par les pages SEO métiers). */
.faq-acc-wrap { max-width: 780px; margin: 0 auto; }
.faq-acc {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color .2s ease;
}
.faq-acc:hover { border-color: var(--gold-line); }
.faq-acc summary {
  cursor: pointer; list-style: none; padding: 19px 24px;
  font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary:hover { color: var(--accent); }
.faq-plus { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .22s ease;
}
.faq-plus::before { top: 6.2px; left: 0; width: 14px; height: 1.6px; }
.faq-plus::after { left: 6.2px; top: 0; width: 1.6px; height: 14px; }
.faq-acc[open] .faq-plus::after { transform: scaleY(0); }
.faq-acc[open] summary { color: var(--accent); }
.faq-acc-body { padding: 0 24px 20px; }
.faq-acc-body p { color: var(--muted); font-size: 14px; line-height: 1.75; }

/* CTA final */
.cta-final {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #f6f1e6, #efe8d6);
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  padding: 64px 36px; text-align: center; box-shadow: var(--shadow-md); margin-bottom: 70px;
}
.cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 300px at 50% -20%, rgba(176,138,62,.18), transparent 70%);
}
.cta-final::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.cta-final .eyebrow { justify-content: center; margin-bottom: 14px; }
.cta-final h2 { font-family: var(--font-serif); font-size: 38px; font-weight: 500; color: var(--ink); position: relative; letter-spacing: -.02em; }
.cta-final p { color: var(--muted); margin: 16px auto 30px; max-width: 480px; position: relative; font-size: 15px; }
.cta-final .btn { position: relative; margin-inline: auto; display: inline-flex; }
.cta-final .free { font-size: 13px; color: var(--faint); margin-top: 18px; position: relative; }

/* Témoignage */
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.testimonial {
  max-width: 680px; margin: 0 auto; text-align: center;
  padding: 30px 28px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.testimonials .testimonial { max-width: none; }
.t-stars { display: flex; justify-content: center; gap: 2px; margin-bottom: 14px; }
.t-quote { margin-bottom: 18px; }
.t-text {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.6;
  color: var(--ink); font-weight: 500; margin-bottom: 20px;
}
.t-author { display: flex; align-items: center; justify-content: center; gap: 12px; }
.t-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 500; font-size: 16px; color: #fff;
  background: linear-gradient(160deg, #d8b97c, #a9863f);
}
.t-name { font-weight: 500; font-size: 14px; color: var(--ink); }
.t-role { font-size: 12px; color: var(--faint); }

/* Bandeau de rassurance */
.trust-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  margin: 0 0 8px; padding: 18px 0;
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.trust-item svg { color: var(--gold-2); flex-shrink: 0; }

/* Bandeau de confiance pricing */
.pricing-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--line-soft);
}
.pt-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pt-item svg { color: var(--gold-2); flex-shrink: 0; }

/* Barre de partage du devis */
.share-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.share-label { font-size: 12px; color: var(--faint); margin-right: 4px; }
.share-btn {
  width: 34px; height: 34px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all .15s;
}
.share-btn:hover { border-color: var(--gold); color: var(--gold-2); }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; }
.blog-card {
  display: block; padding: 24px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink); transition: all .15s;
}
.blog-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
.blog-card h2, .blog-card h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin: 8px 0; color: var(--ink); }
.blog-card p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.blog-cat { display: inline-block; font-size: 12.5px; font-weight: 500; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.blog-meta { font-size: 12px; color: var(--faint); margin-top: 12px; }
.blog-article { max-width: 720px; margin: 0 auto; }
.blog-article h1 { font-family: var(--font-serif); font-size: 34px; font-weight: 500; margin: 12px 0; line-height: 1.2; }
.blog-article h2 { font-family: var(--font-serif); font-size: 24px; font-weight: 500; margin: 28px 0 12px; }
.blog-article p { color: var(--muted); font-size: 15px; line-height: 1.8; }
.blog-intro { font-size: 17px !important; color: var(--ink) !important; }
.blog-cta { background: linear-gradient(160deg, #f6f1e6, #efe8d6); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 28px; text-align: center; margin: 32px 0; }
.blog-cta h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin-bottom: 8px; }
.blog-cta p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.blog-faq { margin-top: 32px; }
.blog-related { margin-top: 40px; }

/* Footer — 4 colonnes équilibrées (refonte 2026-09).
   Avant : 5 colonnes auto-fit -> mur vertical de ~1280px sur mobile.
   Désormais : grille explicite desktop, 2 colonnes sur mobile. */
.footer { border-top: 1px solid var(--line); padding: 40px 0 26px; }
.footer-grid {
  display: grid; gap: 34px;
  grid-template-columns: 1.5fr 1fr 1.15fr 0.85fr;
}
.footer h4 { font-family: var(--font-serif); font-size: 14px; font-weight: 500; margin-bottom: 14px; color: var(--accent); }
.footer a { display: block; color: var(--muted); text-decoration: none; font-size: 13px; padding: 4px 0; transition: color .15s; }
.footer a:hover { color: var(--accent); }
.footer-tagline { color: var(--faint); font-size: 13px; line-height: 1.7; max-width: 260px; }
.footer-mail { margin-top: 10px; color: var(--accent); font-weight: 500; }
.footer .bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft); text-align: center; color: var(--faint); font-size: 13px; }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: 420px; }
}
@media (max-width: 420px) {
  .footer a { padding: 5px 0; }
}

/* ============ DASHBOARD ============ */
.plan-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 9px 18px; border-radius: 40px; font-size: 13px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line);
}
.plan-badge b { color: var(--gold-2); font-weight: 500; }
.plan-badge a { color: var(--gold-2); font-weight: 500; text-decoration: none; }
.plan-badge.pro { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-2); }
.plan-badge.free { color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 28px; }
.stat-card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.stat-card .label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.stat-card .value { font-family: var(--font-serif); font-size: 32px; font-weight: 500; color: var(--gold-2); margin-top: 8px; }
.stat-card .value.plain { color: var(--ink); }

.empty { text-align: center; padding: 48px 20px; color: var(--faint); }
.empty .big { font-size: 36px; margin-bottom: 16px; color: var(--accent); }
.empty p { margin-bottom: 20px; }

/* Table devis */
.quote-table { width: 100%; border-collapse: collapse; }
.quote-table th {
  text-align: left; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.quote-table td { padding: 14px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
.quote-table tbody tr { transition: background .12s; }
.quote-table tbody tr:hover td { background: var(--card-2); }
.quote-table .client { font-weight: 500; color: var(--ink); }
.quote-table .muted { color: var(--muted); }
.quote-table .amount { font-family: var(--font-mono); font-weight: 500; color: var(--gold-2); }
.quote-table .actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Table leads admin */
.lead-table-wrap { overflow-x: auto; }
.lead-table th:first-child, .lead-table td:first-child { white-space: nowrap; }
.lead-row-new td { background: var(--gold-bg); }
.lead-phone { font-size: 12px; color: var(--faint); }
.lead-msg { max-width: 240px; }
.lead-status-form { margin: 0; }
.lead-status-select { width: auto; padding: 7px 11px; font-size: 13px; border-radius: var(--radius); }

.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card); color: var(--muted); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold-2); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* Bouton danger (suppression) */
.btn.danger {
  background: transparent; color: var(--danger);
  border: 1px solid var(--danger);
}
.btn.danger:hover { background: var(--danger); color: #fff; }

/* Filtres du dashboard */
.dash-filters { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.dash-search {
  flex: 1; min-width: 200px; max-width: 340px;
  padding: 10px 15px; border-radius: var(--radius); font-size: 13px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); outline: none;
}
.dash-search:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.12); }
.dash-status {
  width: auto; padding: 10px 15px; border-radius: var(--radius); font-size: 13px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
}
.q-status { width: auto; padding: 6px 9px; font-size: 12px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.q-status:focus { border-color: var(--gold); }

/* ============ PRICING ============ */
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 16px; box-shadow: var(--shadow-sm); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.faq-item:hover { border-color: var(--gold-line); box-shadow: 0 8px 24px rgba(25,23,19,.06), 0 16px 40px rgba(176,138,62,.1), inset 0 1px 0 rgba(255,255,255,.5); }
.faq-item h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.faq-item p { color: var(--muted); font-size: 14px; line-height: 1.75; }
.why-block { background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 32px 36px; max-width: 780px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.why-block p { color: var(--muted); font-size: 15px; line-height: 1.85; }
.other-trades { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 920px; margin: 0 auto; }

/* ── « Voir plus » : les 150-268 liens de maillage étaient rendus en puces
   plates → mur de liens illisible (mesuré : 268 liens sur /prix/<metier>,
   12 361 px de haut). Repliés dans un dépliant discret.
   ⚠️ Les liens RESTENT dans le DOM (donc crawlables) : on ne referme que
   VISUELLEMENT. Le SEO de maillage est préservé intégralement. */
.more-links { max-width: 920px; margin: 18px auto 0; text-align: center; }
.more-links > summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 9px 18px; border: 1px solid var(--gold-line); border-radius: 999px;
  color: var(--accent); font-size: 13.5px; letter-spacing: .01em;
  transition: background .15s, border-color .15s;
}
.more-links > summary::-webkit-details-marker { display: none; }
.more-links > summary::after { content: " +"; color: var(--faint); }
.more-links[open] > summary::after { content: " –"; }
.more-links > summary:hover { background: rgba(176,138,62,.07); border-color: var(--accent); }
.more-links[open] > summary { margin-bottom: 16px; }
.more-links .other-trades { margin-top: 0; }

/* Index des départements (/prix-par-departement) : 101 entrées alignées en
   colonnes. Ce n'est PAS un nuage de puces — c'est une table de matières. */
.dept-index { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; max-width: 920px; margin: 0 auto; }
.dept-index li { background: var(--card); }
.dept-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 11px 16px; color: var(--muted); font-size: 14px; text-decoration: none; transition: background .15s, color .15s; }
.dept-index a:hover { background: rgba(176,138,62,.07); color: var(--ink); }
.dept-index .dept-code { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Tableau long (160 lignes) rendu défilant : la page cesse d'être un mur, mais
   chaque ligne reste présente dans le DOM. Barre de défilement thémée depuis la
   palette (un défaut du navigateur n'appartient à aucun système). */
.table-scroll { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.table-scroll .quote-table { margin: 0; }
.table-scroll::-webkit-scrollbar { width: 10px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 999px; border: 3px solid var(--card); }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Grille de métiers vedettes (landing) */
.trade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 920px; margin: 0 auto; }
@media (max-width: 900px) { .trade-grid { grid-template-columns: repeat(2, 1fr); } }
.trade-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.trade-card:hover { border-color: var(--gold-line); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.trade-card .trade-icon {
  width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0;
  display: grid; place-items: center; color: var(--gold-2);
  background: var(--gold-bg); border: 1px solid var(--gold-line);
}
.trade-card .trade-name { font-size: 14px; font-weight: 500; flex: 1; }
.trade-card .trade-arrow { color: var(--faint); transition: color .15s, transform .15s; }
.trade-card:hover .trade-arrow { color: var(--gold-2); transform: translateX(2px); }
.trade-all { text-align: center; margin-top: 22px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch; }
.plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 36px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.plan::before, .plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.plan::before { padding: 1px; background: linear-gradient(135deg, rgba(176,138,62,.35), rgba(230,223,208,.1) 40%, rgba(176,138,62,.18)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.plan:hover { transform: translateY(-5px); box-shadow: 0 12px 34px rgba(25,23,19,.08), 0 24px 60px rgba(176,138,62,.14), 0 1px 0 rgba(255,255,255,.6) inset; border-color: rgba(176,138,62,.4); }
.plan.featured {
  border-color: rgba(176,138,62,.45);
  box-shadow: 0 8px 26px rgba(176,138,62,.14), 0 26px 64px rgba(176,138,62,.16), 0 1px 0 rgba(255,255,255,.6) inset;
}
.plan.featured::before { background: linear-gradient(135deg, rgba(193,154,78,.55), rgba(230,223,208,.15) 45%, rgba(176,138,62,.3)); }
.plan.featured::after {
  content: ""; position: absolute; top: -40%; left: -20%; width: 60%; height: 120%; rotate: 25deg;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation: planSheen 4.5s ease-in-out infinite;
}
@keyframes planSheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(320%); } }
.plan.featured .tag {
  display: inline-block; align-self: flex-start;
  background: linear-gradient(160deg, #c19a4e, #b08a3e); color: #fff;
  font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 40px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(176,138,62,.3);
}
.plan .name { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--ink); }
.plan .price { font-family: var(--font-serif); font-size: 50px; font-weight: 500; color: var(--gold-2); margin: 14px 0 4px; }
.plan .price small { font-size: 14px; color: var(--faint); font-weight: 500; }
.plan .desc { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.plan ul { list-style: none; margin-bottom: 24px; flex: 1; }
.plan li { padding: 9px 0; font-size: 14px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.plan li .check, .plan li .x {
  position: relative; width: 16px; height: 16px; flex-shrink: 0;
  display: inline-block;
}
/* Coche dessinée en CSS (aucun emoji/caractère dans le HTML) */
.plan li .check::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 9px; height: 5px; border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg);
}
/* Croix dessinée en CSS */
.plan li .x::before, .plan li .x::after {
  content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 1.6px;
  background: var(--faint); border-radius: 2px;
}
.plan li .x::before { transform: rotate(45deg); }
.plan li .x::after { transform: rotate(-45deg); }
.plan li.muted { color: var(--faint); }

/* Cellules du comparatif : Oui / Non sans caractère texte */
.quote-table td.yes, .quote-table td.no { position: relative; }
.quote-table td.yes::before {
  content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 6px 2px 0;
  border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}
.quote-table td.no::before {
  content: ""; display: inline-block; width: 11px; height: 1.6px; margin-bottom: 3px;
  background: var(--faint); border-radius: 2px; transform: rotate(45deg);
}

/* Carte d'offre seule : largeur maîtrisée (évite le grand vide à droite) */
.plans.one { grid-template-columns: minmax(0, 560px); justify-content: center; }
/* Grille à deux offres (Gratuit + Pro) : deux colonnes centrées */
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) { .plans.two { grid-template-columns: 1fr; } }

.note { text-align: center; color: var(--faint); font-size: 13px; margin-top: 32px; }

/* ============ AUTH ============ */
.auth-body {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; min-height: 100vh; padding: 0;
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(176,138,62,.08), transparent 60%),
    radial-gradient(600px 400px at 90% 100%, rgba(176,138,62,.05), transparent 55%),
    var(--paper);
}
.auth-body .topbar { width: 100%; }
.auth-body .auth-card { margin: auto; }
.auth-card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 40px; width: 100%; max-width: 440px;
  position: relative; overflow: hidden;
}
/* Variante élargie : page de création de compte (plus de champs) */
.auth-card.wide { max-width: 520px; padding: 40px; }
.auth-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.auth-card::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.auth-card .card-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-card .brand { margin-bottom: 0; }
.auth-card h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 500; margin-bottom: 6px; color: var(--ink); letter-spacing: -.01em; }
.auth-card .sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.auth-card .btn { width: 100%; margin-top: 24px; }
.auth-card .btn.big { padding: 15px 20px; font-size: 15px; }
.alt { text-align: center; margin-top: 22px; font-size: 13px; color: var(--muted); }
.alt a { color: var(--gold-2); font-weight: 500; text-decoration: none; }
.alt a:hover { text-decoration: underline; }
.back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--faint); text-decoration: none; }
.back:hover { color: var(--gold-2); }

/* Sections de formulaire (auth) : diviseur or + label — signature "atelier" */
.form-section {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 4px; padding-top: 4px;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.form-section:first-of-type { margin-top: 0; }
.form-section::before, .form-section::after {
  content: ""; height: 1px; flex: 0 0 22px; background: var(--gold);
}
.form-section::after { flex: 1; background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 6px); opacity: .5; }

.form-row { display: flex; gap: 12px; }
.form-row > * { flex: 1; }
.form-row .f2 { flex: 2; }

/* Champ mot de passe avec œil */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--faint); border-radius: var(--radius);
  transition: color .15s, background .15s;
}
.pw-toggle:hover { color: var(--gold-2); background: var(--card-2); }
.pw-toggle svg { display: block; }

/* ============ ACCOUNT / PROFILE ============ */
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--muted); font-size: 14px; }
.info-row .value { font-weight: 500; font-size: 14px; color: var(--ink); }
.hint { font-size: 12px; color: var(--faint); margin-top: 8px; }
.hint code { background: var(--paper-2); padding: 2px 6px; border-radius: 4px; color: var(--gold-2); }

/* ============ FLASH ============ */
.flash { padding: 14px 18px; border-radius: var(--radius); font-size: 13px; margin-bottom: 20px; border: 1px solid; }
.flash.error { background: rgba(178,58,46,.06); border-color: rgba(178,58,46,.25); color: var(--danger); }
.flash.success { background: rgba(61,122,74,.06); border-color: rgba(61,122,74,.25); color: var(--ok); }

/* ============ FOOTER inline (app pages) ============ */
.footer-inline { text-align: center; color: var(--faint); font-size: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-soft); }

/* ============ LEADS / SITE WEB ============ */
.lead-hero { text-align: center; padding: 44px 0 44px; }
.lead-hero h1 { font-family: var(--font-serif); font-size: 46px; font-weight: 500; line-height: 1.06; color: var(--ink); letter-spacing: -.02em; }
.lead-hero h1 .accent {
  background: linear-gradient(120deg, #c19a4e, #8a6a2a, #b08a3e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-weight: 500;
}
.lead-hero p { color: var(--muted); margin: 20px auto 0; font-size: 16px; max-width: 560px; }

.lead-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; max-width: 980px; margin: 0 auto; }
@media (max-width: 820px) { .lead-layout { grid-template-columns: 1fr; } }

.lead-benefits h3, .lead-form-wrap h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 500; margin-bottom: 24px; color: var(--ink); }
.lead-benefit { display: flex; gap: 15px; margin-bottom: 22px; }
.lead-benefit .lb-icon {
  width: 42px; height: 42px; border-radius: var(--radius); flex-shrink: 0;
  display: grid; place-items: center; color: var(--gold-2);
  background: var(--gold-bg); border: 1px solid var(--gold-line);
}
.lead-benefit strong { font-size: 14px; color: var(--ink); display: block; margin-bottom: 3px; }
.lead-benefit p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.lead-note {
  display: flex; align-items: center; gap: 8px; margin-top: 26px;
  padding: 13px 17px; border-radius: var(--radius); color: var(--gold-2);
  background: var(--gold-bg); border: 1px solid var(--gold-line); font-size: 13px;
}

.lead-form-wrap { background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); }
.lead-form-wrap h3 { margin-bottom: 10px; }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .lead-row { grid-template-columns: 1fr; } }
.lead-privacy { text-align: center; color: var(--faint); font-size: 12px; margin-top: 14px; }
/* Case de consentement RGPD (opt-in explicite) */
.consent-box { margin-top: 16px; display: flex; align-items: flex-start; gap: 10px; }
.consent-box input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold-2); flex-shrink: 0; }
.consent-box label.consent-label { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; font-weight: 400; }
.consent-box label.consent-label a { color: var(--gold-2); text-decoration: underline; }

.lead-success { text-align: center; max-width: 540px; margin: 30px auto; padding: 54px 32px; background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.lead-success-icon { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #c19a4e, #8a6a2a); }
.lead-success h2 { font-family: var(--font-serif); font-size: 28px; font-weight: 500; margin-bottom: 12px; color: var(--ink); }
.lead-success p { color: var(--muted); margin-bottom: 26px; }

/* ============ LEGAL / CGV ============ */
.legal-card h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.legal-card .updated { color: var(--faint); font-size: 13px; margin-bottom: 24px; }
.legal-card h2 { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin: 26px 0 10px; color: var(--gold-2); }
.legal-card p, .legal-card li { color: var(--muted); font-size: 14px; line-height: 1.8; }
.legal-card ul { padding-left: 20px; margin: 8px 0; }
.legal-card strong { color: var(--ink); }

/* ============ RÉVÉLATION AU SCROLL ============ */
/* Toujours visible. L'animation est un simple léger translateY qui ne masque
   JAMAIS le contenu (pas d'opacity:0) — robuste même si JS échoue. */
.reveal { opacity: 1; }
/* Révélation en profondeur : on n'anime QUE le transform (jamais l'opacité),
   donc le contenu reste lisible même si le JS ou l'observer échoue. */
.js-anim .reveal {
  transform: perspective(1200px) translateY(26px) rotateX(7deg);
  transform-origin: 50% 100%;
  transition: transform .85s cubic-bezier(.22,.61,.36,1);
}
.js-anim .reveal.visible { transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
  /* Jamais de débordement horizontal de la page, quel que soit le contenu */
  html, body { overflow-x: clip; width: 100%; max-width: 100%; }
  .topbar-inner { padding: 13px 18px; }
  .container { padding: 0 18px 20px; }

  /* ===== CLAVIER ANDROID : ne doit pas déranger la saisie =====
     Le problème : quand le clavier s'ouvre, le champ actif peut se retrouver
     masqué par le clavier, et la colonne récap « sticky » se colle au-dessus.
     Solutions appliquées :
     - scroll-margin-bottom : laisse la place au clavier sous le champ focus.
     - scroll-padding-bottom sur html : idem pour scrollIntoView.
     - la colonne récap passe en STATIQUE (déjà fait) et les champs gardent
       une hauteur tactile confortable. */
  html { scroll-padding-bottom: 46vh; }
  /* ⚠️ Spécificité : `.service-item .price` (2 classes) bat `.service-item input`
     (1 classe) → il faut cibler les classes RÉELLES pour porter la police à 16px
     (en dessous de 16px, Android/iOS zooment automatiquement au focus). */
  .builder input, .builder select, .builder textarea,
  .client-fields input, .custom-label, .custom-unit,
  .service-item .price, .service-item .qty, .service-item .s-select {
    scroll-margin-bottom: 44vh;
    font-size: 16px;
  }
  /* Barre d'action fixe : laisse de la place au-dessus du clavier */
  body.app-mode .app-action-bar { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  /* Champs de saisie : hauteur tactile confortable et cibles larges */
  .service-item .field-input input { min-height: 44px; }
  .service-item .remove { min-width: 44px; min-height: 44px; }
  /* L'aperçu résultat ne doit pas sauter sous le clavier */
  #result { scroll-margin-bottom: 40vh; }
  /* Quand le clavier Android est ouvert (classe posée en JS) : on masque la
     barre d'action FIXE pour qu'elle ne chevauche pas le clavier.
     (La colonne récap est en flux sur mobile → on ne la masque pas, cela
     provoquerait un saut de mise en page.) */
  body.kb-open .app-action-bar { display: none; }

  /* Hero mobile : audacieux mais sans débordement */
  .hero { padding: 14px 0 22px; gap: 18px; }
  .hero .eyebrow { margin-bottom: 12px; padding: 7px 14px; font-size: 11.5px; letter-spacing: 2px; }
  .hero h1 { font-size: clamp(32px, 9.8vw, 42px); line-height: 1.06; margin-bottom: 0; letter-spacing: -.025em; }
  /* H1 des autres gabarits (page-head, trade, price, price_dept, services) :
     ils étaient hérités de tailles desktop (34-42px) et paraissaient
     disproportionnés sur un écran de 360-390px. Le hero est EXCLU de cette
     règle : il a sa propre taille, plus grande (voir .hero h1 ci-dessus),
     sinon cette règle l'écrase (même spécificité, déclarée après). */
  .page-head h1, .visi-hero h1, .section-head h2 {
    font-size: clamp(24px, 7.5vw, 30px); line-height: 1.15;
  }
  .section-head h2 { font-size: clamp(21px, 6.5vw, 26px); }
  .hero p { font-size: 16.5px; margin-top: 12px; line-height: 1.55; }
  .hero-badges { gap: 8px; margin-top: 16px; }
  .hero-badge { margin-top: 0; padding: 7px 12px; font-size: 12px; gap: 6px; }
  /* Boutons : le nowrap global débordait avec les libellés longs sur 360px.
     Sur mobile, on autorise le retour à la ligne et on borne la largeur. */
  .btn { white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; }
  .btn.big { line-height: 1.35; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .cta-row .btn { flex: 1 1 100%; }
  .hero .cta-row { margin-top: 16px; gap: 10px; }
  .hero .cta-row .btn {
    width: 100%; padding: 13px 16px; font-size: 14.5px;
    white-space: normal; text-align: center; line-height: 1.35;
  }
  /* Liste d'arguments : 2 colonnes nettes. minmax(0,1fr) est OBLIGATOIRE :
     avec "1fr 1fr", la piste ne peut pas descendre sous la largeur de son
     contenu (min-width:auto) et débordait du conteneur (392px pour 354px). */
  .hero .trust {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px 16px; margin-top: 14px;
  }
  .hero .trust span { font-size: 13px; min-width: 0; }
  .hero .trust span:last-child { grid-column: 1 / -1; }
  .hero-note { margin-top: 10px; font-size: 12px; }
  .hero-alt { font-size: 13px; margin-top: 12px; line-height: 1.5; }
  /* Form rows : sur mobile, empiler pour éviter un label sur 2 lignes qui décale un champ */
  .form-row { flex-direction: column; gap: 0; }
  .form-row .f2 { flex: 1; }
  /* MOBILE : le hero est empilé (texte puis maquette). Si la scène 3D couvrait
     tout le hero, son sol (sous l'horizon, à 60%) tomberait DERRIÈRE la
     maquette et serait invisible -> fond animé perçu comme buggé.
     On limite donc la scène à la zone de texte, avec un fondu en bas. */
  /* FOND ANIMÉ RETIRÉ SUR MOBILE (demande utilisateur : « c'est laid »).
     La scène 3D n'est plus affichée sous 700px : on masque le conteneur
     (display:none, donc plus rien à peindre ni à calculer) ET le JS ne
     démarrera même pas l'animation (voir atelier3d.js). */
  .hero-3d { display: none !important; }
  /* Les décors du hero utilisaient des `inset` négatifs (débord volontaire sur
     desktop) : sur mobile ils décalaient tout le bloc. On les contient. */
  .hero { overflow: hidden; }
  .hero-mock::before { inset: -12px -4px; }
  .mock-glow { inset: 0; }
  /* Mini-builder : passer en 1 colonne. En 2 colonnes sur 354px, la colonne
     « récapitulatif » tombait à ~150px et le contenu débordait. */
  .mock-body { grid-template-columns: 1fr; }
  .mock-summary { border-left: none; border-top: 1px solid var(--line); }
  .mock-col { padding: 14px; }
  .mock-summary { padding: 14px; }
  .mock-field { margin-bottom: 12px; }
  .mock-bar { padding: 8px 12px; }
  .mock-label { font-size: 10px; margin-bottom: 2px; }
  .mock-select, .mock-control { padding: 9px 11px; font-size: 13px; }
  .mock-line { padding: 7px 0; font-size: 12px; }
  .mock-sum-title { font-size: 13px; margin-bottom: 6px; }
  .mock-total { padding: 4px 0; font-size: 12px; }
  .mock-total.mock-grand { margin-top: 4px; padding-top: 7px; }
  .mock-total.mock-grand span { font-size: 15px; }
  .mock-btn { margin-top: 10px; padding: 11px; font-size: 13px; }

  /* Sections : rythme vertical lisible sur mobile.
     ⚠️ Une passe de « compactage » antérieure avait mis 4px/12px : les
     sections se touchaient (0px d'écart mesuré entre deux sections) et la
     page paraissait « collée ». On rétablit une respiration correcte. */
  .section { padding: 34px 0; }
  .section-head { margin-bottom: 22px; }
}


/* ============================================================
   ⚠️⚠️ LIGNE DE PRESTATION — DÉBORDEMENT MESURÉ (2026-10-06).

   DÉFAUT. `.service-item` était une ligne `flex` NON REPLIABLE (5 blocs fixes :
   info + champ Prix (117px) + Qté (84px) + Coût (109px) + bouton supprimer
   (36px) = ~390px incompressibles). À partir du moment où le champ « Coût »
   s'affiche POUR TOUT LE MONDE (le paywall a été levé : `IS_PRO` vaut vrai
   pour tout compte connecté, alors qu'il ne concernait avant que 3 comptes
   Pro), la ligne débordait et le bouton supprimer sortait de l'écran :

     viewport   conteneur   débordement   bouton supprimer
       900px       396px        +15px        hors ligne
       860px       356px        +55px        hors ligne
       430px       348px        +71px        hors ligne
       390px       308px       +111px        hors ligne
       320px       238px       +181px        hors ligne

   CORRECTIF. On abandonne le flex non repliable pour une GRILLE qui se
   réorganise : la rangée des champs (Prix / Qté / Coût) passe SOUS le libellé
   quand la place manque. `overflow-wrap` + `min-width: 0` pour qu'aucun bloc
   ne pousse les autres dehors.

   ⚠️ Ne PAS revenir à un `flex` sur `.service-item` sans refaire la mesure
   (`scripts/audit_builder_seuil.py`).
   ============================================================ */
.service-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "info champs suppr";
  align-items: center;
  column-gap: 12px; row-gap: 10px;
}
.service-item .info { grid-area: info; min-width: 0; }
.service-item .price-wrap { grid-area: champs; flex-wrap: wrap; justify-content: flex-end; }
.service-item .remove { grid-area: suppr; }
/* sous 600 px : le libellé prend toute la largeur, les champs passent dessous */
@media (max-width: 600px) {
  .service-item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "info info" "champs suppr";
  }
  .service-item .price-wrap { justify-content: flex-start; }
}
/* entre 601 et 940 px, la colonne du builder est étroite : même repli */
@media (min-width: 601px) and (max-width: 940px) {
  .builder .service-item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "info info" "champs suppr";
  }
  .builder .service-item .price-wrap { justify-content: flex-start; }
}
/* les champs gardent une largeur utile mais compressible */
.service-item .price { width: 80px; max-width: 100%; }
.service-item .qty { width: 60px; max-width: 100%; }
.service-item .field { min-width: 0; }
.service-item .field-input { min-width: 0; }


/* ============================================================
   EX-atelier-polish.css   (30077 octets, 7 !important)
   ============================================================ */

/* ============================================================
   DEVISALY — Raffinement « Atelier » (couche additive 2026-09)
   Rehausse le design Atelier existant SANS changer son identité :
   ivoire, or, Fraunces. Ajoute profondeur, ombres affirmées,
   micro-interactions, hiérarchie. Se charge APRÈS luxe.css.
   Aucune règle destructive : uniquement des améliorations.
   ============================================================ */

:root {
  /* Ombres plus présentes (teintées or, pas de gris neutre) */
  --el-1: 0 1px 2px rgba(90,70,35,.05), 0 2px 6px rgba(90,70,35,.05);
  --el-2: 0 2px 6px rgba(90,70,35,.07), 0 10px 26px rgba(90,70,35,.09);
  --el-3: 0 6px 16px rgba(90,70,35,.10), 0 24px 56px rgba(90,70,35,.13);
  --el-gold: 0 4px 14px rgba(176,138,62,.22), 0 16px 40px rgba(176,138,62,.16);
  --el-gold-lg: 0 8px 24px rgba(176,138,62,.28), 0 28px 64px rgba(176,138,62,.20);
  /* Liseré lumineux haut de carte (donne du relief) */
  --bevel: inset 0 1px 0 rgba(255,255,255,.7);
  --ease-soft: cubic-bezier(.22,.68,.32,1);
}

/* ---- 1. Relief général : cartes et panels ---- */
.card, .panel {
  box-shadow: var(--el-1);
  transition: box-shadow .35s var(--ease-soft), border-color .3s var(--ease-soft),
              transform .35s var(--ease-soft);
}
.card:hover, .panel:hover {
  box-shadow: var(--el-2);
  border-color: var(--gold-line);
}

/* Cartes de contenu interactives : léger soulèvement */
.step, .plan, .qcard, .trade-card, .lead-benefit, .blog-card,
.stat-card, .kpi, .faq-item, .client-card, .retention-card {
  box-shadow: var(--el-1), var(--bevel);
  transition: box-shadow .4s var(--ease-soft), transform .4s var(--ease-soft),
              border-color .3s var(--ease-soft);
}

/* ---- 2. Bouton or : plus de présence ---- */
.btn.primary {
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset,
              0 2px 6px rgba(176,138,62,.28),
              0 8px 22px rgba(176,138,62,.22);
  transition: transform .2s var(--ease-soft), box-shadow .3s var(--ease-soft),
              filter .2s;
}
.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
              0 6px 16px rgba(176,138,62,.36),
              0 18px 42px rgba(176,138,62,.26);
  filter: saturate(1.06) brightness(1.02);
}

/* ---- 3. Barre de navigation : plus nette au scroll ---- */
.topbar {
  box-shadow: 0 1px 0 var(--line-soft), 0 2px 14px rgba(90,70,35,.05);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}

/* Liens nav : soulignement or animé */
.nav > a:not(.btn) { position: relative; }
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-soft);
}
.nav > a:not(.btn):hover::after,
.nav > a:not(.btn).active::after { transform: scaleX(1); }

/* ---- 4. Hero : profondeur et respiration ---- */
.hero h1 { text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.hero .trust .dot {
  box-shadow: 0 0 0 3px rgba(176,138,62,.12), 0 0 12px rgba(176,138,62,.45);
}
.hero-mock .mock-window { box-shadow: var(--el-3), var(--bevel); }
.hero-mock::before { filter: blur(26px); }

/* Eyebrow : trait or plus fin et élégant */
.hero .eyebrow::before, .hero .eyebrow::after,
.page-head .eyebrow::before, .page-head .eyebrow::after {
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* ---- 5. Récapitulatif (builder) : colonne de droite mise en valeur ---- */
.summary {
  box-shadow: var(--el-2), var(--bevel);
  border-color: var(--gold-line);
}
.summary::before { height: 3px; }
.summary-totals .grand {
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* ---- 6. Champs de saisie : focus plus franc ---- */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(176,138,62,.14), 0 1px 2px rgba(90,70,35,.06);
}

/* ---- 7. KPI : chiffres mis en avant ---- */
.kpi-value {
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  letter-spacing: -.02em;
}
.kpi-gold {
  background: linear-gradient(140deg, var(--card) 0%, rgba(233,220,192,.35) 100%);
  box-shadow: var(--el-2), var(--bevel);
}

/* ---- 8. Tableau devis : plus lisible ---- */
.quote-table th {
  background: linear-gradient(180deg, var(--paper), var(--card-2));
}
.quote-table tbody tr:hover { background: var(--gold-bg); }
.quote-totals-row.grand .value { text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* ---- 9. Badges et pastilles : relief ---- */
.qbadge, .plan-badge, .bs-plan {
  box-shadow: 0 1px 2px rgba(90,70,35,.06);
}
.qbadge.status-accepted, .plan-badge.pro, .bs-plan.pro {
  box-shadow: 0 1px 3px rgba(176,138,62,.18);
}

/* ---- 10. Apparition au scroll : plus douce ---- */
.js-anim .reveal {
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}

/* ---- 11. CTA final et blocs or : halo maîtrisé ---- */
.cta-final {
  box-shadow: var(--el-gold);
  border-color: var(--gold-line);
}
.upsell-banner {
  box-shadow: var(--bevel), 0 2px 10px rgba(176,138,62,.10);
}

/* ---- 12. Boutons ghost : état hover avec profondeur ---- */
.btn.ghost {
  box-shadow: 0 1px 2px rgba(90,70,35,.04);
  transition: all .25s var(--ease-soft);
}
.btn.ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(90,70,35,.08);
}

/* ---- 13. Scrollbar et sélection : cohérence or ---- */
::selection { background: var(--gold); color: #fff; }

/* ---- 14. Cartes métiers / étapes : icônes plus vivantes ---- */
.step-icon, .trade-card .trade-icon, .icon-wrap, .lb-icon, .offline-icon {
  box-shadow: 0 2px 8px rgba(176,138,62,.14), var(--bevel);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.step:hover .step-icon, .trade-card:hover .trade-icon,
.lead-benefit:hover .lb-icon, .feature:hover .icon-wrap {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(176,138,62,.22), var(--bevel);
}

/* ---- 15. Plans (pricing) : plan featured plus premium ---- */
.plan.featured {
  box-shadow: var(--el-gold-lg), var(--bevel);
  transform: translateY(-4px);
}
.plan.featured:hover { transform: translateY(-7px); }

/* ---- 16. Formulaires auth : carte plus présente ---- */
.auth-card {
  box-shadow: var(--el-3), var(--bevel);
}

/* ---- 17. Focus visible : anneau or ---- */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ---- 18. Mobile : désactiver les transformations coûteuses ---- */
@media (max-width: 820px) {
  .step, .plan, .qcard, .trade-card, .lead-benefit, .blog-card,
  .stat-card, .kpi, .faq-item, .client-card, .retention-card,
  .card, .panel {
    transform: none !important;
  }
  .step:hover .step-icon, .trade-card:hover .trade-icon {
    transform: none;
  }
  .plan.featured { transform: none; }
}

/* ---- 19. Motion réduite ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .step:hover .step-icon, .trade-card:hover .trade-icon { transform: none; }
}


/* ---- 20. ACCUEIL ALLÉGÉ : rythme vertical, moins de blocs ---- */
/* Une section = un rythme. Plus d'espace avant qu'après un titre. */
.container > .section { padding: 30px 0; }
.section-head { margin-bottom: 34px; }
.section-head h2 { margin-bottom: 10px; }

/* Étape : plus d'air, moins de bordure */
.steps { gap: 22px; }
.step { padding: 30px 26px; }

/* Témoignage intégré : discret, pas un bloc à part */
.testimonial {
  margin-top: 40px;
  padding: 28px 30px;
  background: linear-gradient(150deg, var(--card), var(--card-2));
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold-line);
  border-radius: var(--radius-lg);
  max-width: 720px;
}
.t-stars { margin-bottom: 12px; }
.t-text { font-size: 15.5px; line-height: 1.7; }

/* FAQ : plus compacte, lignes nettes */
.faq-acc { border-bottom: 1px solid var(--line); }
.faq-acc summary { padding: 18px 4px; font-size: 15.5px; }
.faq-acc-body { padding: 0 4px 16px; }

/* CTA final : bandeau haut, pas un gros bloc */
.cta-final {
  padding: 44px 32px;
  margin: 40px 0 44px;
  background: linear-gradient(150deg, var(--paper), var(--gold-bg));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-xl);
}
.cta-final h2 { font-size: 27px; margin-bottom: 8px; }
.cta-final p { font-size: 14.5px; margin: 0 auto 20px; }

/* Trust-bar : plus fine, intégrée */
.trust-bar { gap: 34px; padding: 20px 0; margin-top: 8px; }

/* Footer : 3 colonnes, plus haut compact */
.footer { padding: 34px 0 16px; margin-top: 40px; }
.footer-grid { grid-template-columns: 1.7fr 1fr 1fr; gap: 28px; }
.footer h4 { margin-bottom: 10px; }
.footer a { padding: 3px 0; font-size: 13px; }
.footer .bottom { padding-top: 18px; margin-top: 20px; }

@media (max-width: 820px) {
  /* Rythme vertical mobile : les sections se touchaient (0px d'écart mesuré).
     34px haut/bas = ~68px entre deux sections, respiration correcte. */
  .container > .section { padding: 34px 0; }
  .step { padding: 24px 20px; }
  .testimonial { margin-top: 28px; padding: 22px; }
  .cta-final { padding: 32px 20px; margin: 40px 0 44px; }
  .cta-final h2 { font-size: 23px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  /* Bandeaux qui étaient collés au hero (8-10px) */
  .trust-bar { margin-top: 18px; }
  .stats-real { margin-top: 22px; }
}


/* ---- 21. Compactage supplémentaire ---- */
/* Étape : cartes plus basses */
.steps { gap: 18px; }
.step { padding: 24px 22px; }
.step p { font-size: 13.5px; }
.step h3 { font-size: 16.5px; }
.step-icon { width: 40px; height: 40px; margin-bottom: 14px; }
.step-num { margin-bottom: 10px; }

/* Footer : liens sur 2 colonnes compactes, moins de hauteur */
.footer { padding: 28px 0 14px; margin-top: 32px; }
.footer-grid { gap: 24px; }
.footer h4 { font-size: 12px; margin-bottom: 8px; }
.footer a { padding: 2px 0; font-size: 12.5px; }
.footer-tagline { font-size: 12.5px; }
.footer .bottom { padding-top: 14px; margin-top: 16px; font-size: 12px; }

/* Trust-bar : discrète */
.trust-bar { padding: 16px 0; }
.trust-item { font-size: 12.5px; }

/* FAQ : plus resserrée */
.faq-acc summary { padding: 15px 4px; font-size: 15px; }
.faq-acc-body { padding: 0 4px 14px; font-size: 14px; }


/* ---- 22. FAQ en 2 colonnes : -50% de hauteur, plus lisible ---- */
.faq-acc-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  align-items: start;
}
@media (max-width: 820px) {
  .faq-acc-wrap { grid-template-columns: 1fr; gap: 0; }
}

/* Témoignage : plus compact, aligné à côté des étapes sur grand écran */
.testimonial { padding: 22px 24px; margin-top: 28px; }
.t-text { font-size: 15px; }
.t-stars { margin-bottom: 8px; }
.t-avatar { width: 36px; height: 36px; font-size: 15px; }

/* ---- 12. Accueil — hero & témoignage : respiration resserrée ---- */
/* Desktop : réduire la taille/padding (le mock 499px domine la hauteur) */
@media (min-width: 901px) {
  .hero { padding: 26px 0 40px; }
  /* Titre et sous-titre agrandis (retour utilisateur : « doit être plus gros ») */
  /* ⚠️ La taille du h1 est désormais définie UNE SEULE FOIS (`.hero h1` dans
     luxe.css, 56 px). Cette surcharge à 78 px avait été écrite pour l'ancienne
     accueil, qui n'utilise plus `.hero h1` : elle ne touchait donc plus QUE les
     pages métiers (/devis, /prix, /services), qu'elle déformait — même balise
     `h1` à 78 px sur une page et 56 px sur une autre, aucun rythme d'ensemble. */
  .hero p { font-size: 20px; margin-top: 22px; line-height: 1.6; max-width: 560px; }
  .hero .cta-row { margin-top: 24px; }
  .hero .trust { margin-top: 20px; gap: 18px; }
  .hero-mock .mock-col { padding: 18px; }
  .hero-mock .mock-summary { padding: 18px; }
  .hero-mock .mock-field { margin-bottom: 12px; }
  .hero-mock .mock-line { padding: 8px 0; }
  .hero-mock .mock-btn { margin-top: 14px; padding: 11px; }
}

/* Témoignage intégré : plus proche du bloc étapes */
.testimonial { padding: 18px 22px; margin-top: 22px; }
.t-text { font-size: 14.5px; line-height: 1.6; }

/* ---- 13. Devis + site web (landing) : deux volets clairs ---- */
#dual .dual-grid,
#cout-verite .dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
#dual .dual-plan,
#cout-verite .dual-plan {
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}
#dual .dual-quote,
#cout-verite .dual-quote { background: var(--card); box-shadow: var(--shadow-sm); }
#dual .dual-site,
#cout-verite .dual-site {
  background: linear-gradient(150deg, rgba(190,160,90,.16), var(--paper));
  border-color: rgba(176,138,62,.55);
  box-shadow: 0 10px 28px rgba(176,138,62,.16);
}
#dual .dual-site .dual-tag,
#cout-verite .dual-site .dual-tag {
  align-self: flex-start;
  background: linear-gradient(160deg, #c19a4e, #b08a3e);
  color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 40px; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(176,138,62,.35);
}
#dual .dual-plan h3,
#cout-verite .dual-plan h3 { font-family: var(--font-serif); font-size: 23px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
#dual .dual-plan p,
#cout-verite .dual-plan p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 16px; }
#dual .dual-plan ul,
#cout-verite .dual-plan ul { list-style: none; margin-bottom: 18px; flex: 1; }
#dual .dual-plan li,
#cout-verite .dual-plan li { padding: 6px 0; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
#dual .dual-plan .dot,
#cout-verite .dual-plan .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
#dual .dual-quote .btn,
#cout-verite .dual-quote .btn { align-self: flex-start; }
#dual .dual-site .btn,
#cout-verite .dual-site .btn { align-self: flex-start; border-color: rgba(176,138,62,.55); }
#dual .dual-price,
#cout-verite .dual-price { margin-top: 12px; color: var(--gold-2); font-weight: 500; font-size: 13.5px; }
#dual .section-head p { margin-top: 10px; }
@media (max-width: 800px) {
  #dual .dual-grid,
  #cout-verite .dual-grid { grid-template-columns: 1fr; }
  #dual .dual-plan,
  #cout-verite .dual-plan { padding: 24px 20px; }
}

/* ---- Outil PDF (modifier/fusionner un PDF en ligne) ---- */
.pdf-tools {
  max-width: 640px; margin: 34px auto 0; background: var(--card);
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 28px 30px;
  box-shadow: var(--shadow-sm);
}
.pt-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.pt-tab {
  background: var(--card-2); border: 1px solid var(--line); color: var(--muted);
  font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: var(--radius);
  cursor: pointer; transition: all .2s;
}
.pt-tab.active { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-2); }
.pt-panel { display: flex; flex-direction: column; gap: 14px; }
.pt-hint { color: var(--muted); font-size: 14px; line-height: 1.6; }
.pt-input, .pt-text {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; color: var(--ink); background: var(--card); box-sizing: border-box;
}
.pt-panel .btn { align-self: flex-start; }
.pt-check { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.pt-status { margin-top: 16px; font-size: 14px; color: var(--muted); min-height: 18px; }
.pt-status.ok { color: var(--ok); font-weight: 500; }
.pt-status.err { color: var(--danger); }
#pt-download { margin-top: 10px; }

/* ---- Chips de maillage interne : style de base manquant (price/dept/trade) ---- */
.chip {
  display: inline-block; padding: 9px 15px; font-size: 13px; font-weight: 500;
  background: var(--card-2); color: var(--ink-2) !important; border: 1px solid var(--line);
  border-radius: 40px; text-decoration: none; transition: all .18s ease; line-height: 1.3;
}
.chip:hover { border-color: var(--gold-line); color: var(--gold-2) !important; background: var(--card); box-shadow: 0 2px 8px rgba(176,138,62,.15); }

/* ---- 14. Problème / empathie (landing) ---- */
#probleme .pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
#probleme .pain-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  text-align: left;
}
#probleme .pain-item svg { color: var(--gold-2); margin-bottom: 14px; }
#probleme .pain-item h3 { font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
#probleme .pain-item p { color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 800px) {
  #probleme .pain-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- 15. Tarifs accueil : pic du tunnel ---- */
#pricing-home .plans { max-width: 1100px; }
#pricing-home .note { text-align: center; margin-top: 18px; color: var(--muted); font-size: 14px; }
#pricing-home .note a { color: var(--gold-2); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--gold-line); }
#pricing-home .price-crossed {
  color: var(--faint); text-decoration: line-through; font-size: 22px; font-weight: 500; margin-right: 2px;
}
#pricing-home .price-promo { font-size: 13px; color: var(--gold-2); font-weight: 500; }
#pricing-home .plan .tag { margin-bottom: 14px; }
/* Badge "Vos nouveaux clients" de la carte Visibilité (carte non-featured) */
#pricing-home .plan .tag:not(:empty) {
  display: inline-block; align-self: flex-start;
  background: linear-gradient(160deg, #c19a4e, #b08a3e); color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 40px; margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(176,138,62,.3);
}


/* ---- 16. Tunnel Visibilité Pro (199 €) : page de vente dédiée ---- */
.visi-tunnel { max-width: 860px; margin: 0 auto; padding: 10px 0 40px; }
.visi-hero { text-align: center; margin-bottom: 30px; }
.visi-hero h1 { font-family: var(--font-serif); font-size: 42px; font-weight: 500; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); max-width: 720px; margin-inline: auto; }
.visi-hero p { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 620px; margin: 14px auto 0; }
.visi-card { max-width: 680px; margin: 0 auto; }
.visi-summary {
  background: var(--card);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  padding: 30px 34px 28px;
  box-shadow: var(--shadow-sm);
}
.visi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.visi-plan-name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--ink); }
.visi-price { font-family: var(--font-serif); font-size: 42px; font-weight: 500; color: var(--gold-2); margin: 6px 0 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.visi-price small { font-size: 14px; color: var(--faint); font-weight: 500; }
.visi-promo { font-size: 13.5px; color: var(--gold-2); font-weight: 500; display: block; margin-top: 2px; }
.visi-price-now { color: var(--gold-2); display: inline-block; }
.visi-price-major { color: var(--gold-2); font-family: var(--font-serif); font-size: 42px; font-weight: 500; display: inline-block; }
.visi-price-old {
  color: var(--faint); text-decoration: line-through; font-size: 22px; font-weight: 500;
  margin-left: 10px; display: inline-block;
}
.visi-badges { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.visi-badge {
  background: var(--gold-bg); color: var(--gold-2); font-size: 11.5px; font-weight: 500;
  letter-spacing: .5px; text-transform: uppercase; padding: 5px 12px; border-radius: 40px;
  white-space: nowrap; max-width: 100%;
}
/* Nouvelles classes : page de paiement guidée */
.visi-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 12px;
  color: var(--gold-2); font-weight: 500; background: var(--gold-bg); border: 1px solid var(--gold-line);
  padding: 7px 16px; border-radius: 40px; margin-bottom: 18px;
}
.visi-whats-included {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 auto 30px; max-width: 760px;
}
.visi-item {
  display: inline-flex; align-items: center; gap: 8px; background: var(--card);
  border: 1px solid var(--line); border-radius: 40px; padding: 9px 16px; font-size: 14px; color: var(--ink);
}
.visi-item svg { color: var(--gold-2); }
.visi-layout {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; max-width: 980px; margin: 0 auto; align-items: start;
}
.visi-guide { display: flex; flex-direction: column; gap: 22px; }
.visi-guide-block {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.visi-guide-block h3, .visi-guide-title { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 14px; }
.visi-steps-guide { list-style: none; }
.visi-steps-guide li { display: flex; gap: 14px; margin-bottom: 14px; }
.visi-steps-guide li:last-child { margin-bottom: 0; }
.vsg-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-bg);
  color: var(--gold-2); font-weight: 500; font-size: 14px; display: grid; place-items: center;
}
.visi-steps-guide strong { font-size: 14.5px; color: var(--ink); display: block; line-height: 1.3; }
.visi-steps-guide p { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.visi-guide-reassure h3 { margin-bottom: 10px; }
.visi-reassure { list-style: none; }
.visi-reassure li { font-size: 13.5px; color: var(--muted); padding: 6px 0; display: flex; align-items: center; gap: 8px; }
.visi-reassure li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.visi-card { max-width: 100%; }
@media (max-width: 850px) {
  .visi-layout { grid-template-columns: 1fr; }
}

/* ---- 18. Avis clients (SEO) ---- */
#avis .testimonials { max-width: 1100px; margin: 0 auto; }
#avis .testimonial { box-shadow: var(--shadow-sm); }
/* Carrousel d'avis scroll-snap (desktop : flèches, mobile : swipe) */
.rev-carousel { position: relative; max-width: 1100px; margin: 0 auto; }
#avis #rev-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 20px) / 3);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 4px;
  scrollbar-width: thin;
  margin: 0 auto;
}
#avis #rev-track::-webkit-scrollbar { height: 6px; }
#avis #rev-track::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 6px; }
#avis #rev-track .testimonial {
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box;
}
.rev-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--gold-line); color: var(--gold-2);
  display: grid; place-items: center; cursor: pointer; z-index: 2;
  box-shadow: 0 2px 8px rgba(25,23,19,.08); transition: all .18s ease;
}
.rev-btn:hover { background: var(--gold-bg); border-color: var(--gold-2); }
.rev-prev { left: -14px; }
.rev-next { right: -14px; }
@media (max-width: 800px) {
  #avis #rev-track { grid-auto-columns: calc((100% - 20px) / 1.2); }
  .rev-prev { left: 4px; }
  .rev-next { right: 4px; }
}
/* Note agrégée */
.reviews-summary {
  text-align: center; margin: 0 auto 28px; max-width: 520px;
  background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  padding: 18px 24px; box-shadow: var(--shadow-sm);
}
.rs-score { font-family: var(--font-serif); font-size: 34px; font-weight: 500; color: var(--gold-2); }
.rs-stars { display: flex; justify-content: center; gap: 3px; margin: 8px 0 6px; }
.rs-stars svg { color: var(--deco); }
.rs-sub { color: var(--muted); font-size: 13px; }
.visi-list { list-style: none; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.visi-list li { font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.visi-list li .check { width: 16px; height: 16px; flex-shrink: 0; position: relative; }
.visi-list li .check::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 9px; height: 5px; border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg);
}
.visi-separator { border-top: 1px solid var(--line-soft); margin: 24px 0; }
.visi-pay-title { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.visi-note { font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.visi-pay form { margin-top: 14px; }
.visi-pay form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.visi-pay form input[type="email"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; color: var(--ink); background: var(--card); box-sizing: border-box; margin-bottom: 14px;
}
.visi-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.visi-consent input { margin-top: 3px; }
.visi-consent a { color: var(--accent); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.visi-pay form .btn { width: 100%; margin-top: 14px; }
.visi-tiny { text-align: center; color: var(--faint); font-size: 12px; margin-top: 10px; }

/* Page de confirmation */
.visi-thanks { text-align: center; max-width: 620px; margin: 40px auto 60px; }
.visi-thanks-check { width: 64px; height: 64px; border-radius: 50%; background: var(--gold-bg); color: var(--gold-2); display: grid; place-items: center; margin: 0 auto 22px; }
.visi-thanks h1 { font-family: var(--font-serif); font-size: 34px; font-weight: 500; color: var(--ink); }
.visi-thanks p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin-top: 14px; }
.visi-thanks-reminder { color: var(--faint) !important; font-size: 13.5px !important; }
.visi-thanks .btn { margin-top: 22px; }
.visi-thanks .btn.ghost { margin-left: 10px; }
.visi-thanks-recap {
  background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  padding: 18px 22px; max-width: 460px; margin: 22px auto 0; text-align: left;
}
.visi-tr-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold-2); font-weight: 500; margin-bottom: 10px; }
.visi-tr-line { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--ink); }
.visi-tr-line span:last-child { font-weight: 500; color: var(--gold-2); }
.visi-thanks-unknown { padding: 10px 0; }

@media (max-width: 800px) {
  .visi-card { max-width: 100%; }
  .visi-summary { padding: 24px 20px; }
  .visi-hero h1 { font-size: 30px; }
  .visi-top { flex-direction: column; }
  .visi-badges { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; }
  .visi-list { grid-template-columns: 1fr; }
}

/* ---- 18. Carrousel mobile : pain-grid, steps, plans deviennent défilants ----- */
/* Desktop intact. Sur mobile, chaque groupe passe en défilement horizontal
   tactile (scroll-snap) pour éviter l'empilement vertical très long. */
@media (max-width: 800px) {
  #probleme .pain-grid,
  #etapes .steps {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-line) transparent;
  }
  #probleme .pain-grid > *, 
  #etapes .steps > * {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
  }
  #probleme .pain-grid > *.reveal,
  #etapes .steps > *.reveal { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  #pricing-home .plans {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-line) transparent;
  }
  #pricing-home .plans > * {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
  }
  #pricing-home .plans > *.reveal { opacity: 1; transform: none; }
  #pricing-home .plans .plan { min-width: 0; }
}

/* ---- 17. Comparatifs & devis généré : scroll horizontal propre sur mobile (additif) ---- */
@media (max-width: 600px) {
  #comparatif .quote-doc { overflow-x: auto; }
  #comparatif .quote-table { min-width: 520px; }
  /* Le devis généré dans le builder : sa table est plus large que la carte sur petit
     écran. Permettre le scroll horizontal interne au lieu de rogner la colonne Total HT. */
  #result .quote-doc { overflow-x: auto; }
  #result .quote-table { min-width: 460px; }
  /* ⚠️⚠️ MÊME TABLEAU, MÊME BUG, MAIS SANS LE CORRECTIF (ajouté 2026-10-05).
     Le devis des pages SEO `/devis/<métier>` et `/prix/<métier>/<département>`
     utilise le MÊME `.quote-table` que le builder, dans un `.quote-doc` qui est
     en `overflow: hidden` par défaut. Mesuré à 390 px : la table fait 420 px dans
     un conteneur de 352 px → **68 px de contenu coupés**, la colonne Total/TTC
     était purement INVISIBLE et impossible à atteindre (pas de défilement).
     Les règles ci-dessus ne ciblaient que `#comparatif` et `#result` : ces pages
     avaient été oubliées. On couvre donc TOUT `.quote-doc` sur mobile. */
  .quote-doc { overflow-x: auto; }
}


/* ============================================================
   EX-artisan.css   (7463 octets, 0 !important)
   ============================================================ */

/* ============================================================
   DEVISALY — Tunnel artisan (/artisan)
   Page d'accueil pour l'artisan venu d'un email, avec chatbot
   guide. Meme charte que le reste : papier ivoire, or, encre.
   Aucun emoji (regle du user) : uniquement des SVG au trait.
   ============================================================ */

.artisan-body {
  background: var(--paper);
  min-height: 100vh;
}

.artisan-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

/* ---- En-tete ---- */
.artisan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.artisan-brand { text-decoration: none; }
.artisan-brand .brand-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.artisan-brand .brand-name span { color: var(--gold-2); }
.artisan-tagline {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Hero ---- */
.artisan-hero { text-align: center; margin-bottom: 30px; }
.artisan-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-2);
  border: 1px solid var(--gold-line);
  background: var(--gold-bg);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.artisan-hero h1 {
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
}
.artisan-hero h1 em {
  font-style: normal;
  color: var(--gold-2);
  border-bottom: 2px solid var(--gold-line);
}
.artisan-hero p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 auto;
  max-width: 560px;
}

/* ---- Chat ---- */
.chat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.chat-log {
  padding: 24px 22px 8px;
  max-height: 46vh;
  min-height: 190px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.62;
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.bot {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 4px;
}
.msg.moi {
  background: var(--ink);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.msg.typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 15px;
}
.msg.typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: ty 1.2s infinite ease-in-out;
}
.msg.typing span:nth-child(2) { animation-delay: .18s; }
.msg.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes ty {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---- Reponses rapides ---- */
.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 22px 14px;
}
.chat-chip {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.chat-chip:hover {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-3);
}

/* ---- Saisie ---- */
.chat-form {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--card-2);
}
.chat-form input {
  flex: 1;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  outline: none;
}
.chat-form input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-bg);
}
.chat-send {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(165deg, #c6a25c, #b99652, #9a7a35);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.chat-send:hover { filter: brightness(1.05); }
.chat-progress {
  margin: 0;
  padding: 0 22px 16px;
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--faint);
  text-align: right;
}

/* ---- Reassurance ---- */
.artisan-trust {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}
.artisan-trust-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.artisan-trust-item svg { flex: 0 0 auto; color: var(--gold-2); }

/* ---- Ecran de confirmation ---- */
.artisan-done { text-align: center; }
.artisan-done-icon {
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  color: var(--gold-2);
  background: var(--gold-bg);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
}
.artisan-done h1 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}
.artisan-done-lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 28px;
}
.artisan-done-lead strong { color: var(--gold-3); }

.artisan-recap {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px 20px;
  margin-bottom: 30px;
}
.artisan-recap-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.artisan-recap-row:last-child { border-bottom: 0; }
.artisan-recap-row span { color: var(--muted); }
.artisan-recap-row b { color: var(--ink); text-align: right; }

.artisan-next {
  text-align: left;
  margin-bottom: 28px;
}
.artisan-next h2 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
}
.artisan-next ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: n;
}
.artisan-next li {
  position: relative;
  counter-increment: n;
  padding: 0 0 16px 44px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.artisan-next li::before {
  content: counter(n);
  position: absolute;
  left: 0; top: 1px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold-2);
  background: var(--gold-bg);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
}
.artisan-next li b { color: var(--ink); }
.artisan-fine {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 24px;
}

/* ---- Pied ---- */
.artisan-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.artisan-foot p {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--faint);
  margin: 0;
}
.artisan-foot a { color: var(--gold-2); text-decoration: none; }
.artisan-foot a:hover { text-decoration: underline; }

/* ---- Mobile ---- */
@media (max-width: 560px) {
  .artisan-head { flex-direction: column; gap: 4px; }
  .artisan-hero h1 { font-size: 27px; }
  .msg { max-width: 90%; }
  .chat-quick { padding: 4px 16px 12px; }
  .chat-log { padding: 20px 16px 6px; max-height: 42vh; }
  .chat-chip { font-size: 13.5px; padding: 8px 13px; }
}


/* ============================================================
   EX-accueil-contrat.css   (29271 octets, 1 !important)
   ============================================================ */

/* ============================================================
   ACCUEIL — structure « le contrat d'abord » (2026-09-30)

   ⚠️ PIVOT : l'accueil vend le SITE (129 €/mois), plus le devis. Le relevé de
   conditions ouvre la page : prix, engagement, garantie. C'est ce qu'un artisan
   cherche d'abord, et ce que la catégorie cache sous trois écrans de promesses.

   ⚠️ Aucun sur-titre (eyebrow) : interdit par la craft floor. La page en
   comptait 5, il n'en reste aucun.
   ============================================================ */

/* ---------- HERO : le relevé de conditions ---------- */
.hero-contrat {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
  padding: 64px 0 72px;
}
.hero-contrat .hero-copy h1 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}
.hero-contrat .hero-lede {
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.65;
  max-width: 54ch;
  margin: 22px 0 0;
}

/* Le relevé : la grammaire d'un devis, pas d'une offre. Filets d'un pixel,
   libellés en petites capitales espacées, valeurs en mono. */
.releve {
  margin: 30px 0 0;
  border-top: 1px solid var(--line);
}
.releve-l {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.releve-l dt {
  font-family: var(--font-mono, var(--font-sans));
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
.releve-l dd {
  margin: 0;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.5;
}
.releve-l dd .num {
  font-family: var(--font-mono, var(--font-sans));
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.03em;
}
.releve-l dd .per { color: var(--muted); font-size: 14px; }

.hero-contrat .cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.hero-contrat .cta-note { color: var(--faint); font-size: 13px; line-height: 1.6; max-width: 52ch; margin: 16px 0 0; }

/* ---------- Le panneau d'aperçu (colonne droite) ---------- */
.apercu-bloc { padding: 22px 22px 4px; }
.ap-kicker {
  display: block;
  font-family: var(--font-mono, var(--font-sans));
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 10px;
}
.ap-nom {
  display: block;
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.ap-metier { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; }
.ap-lignes { list-style: none; margin: 20px 0 0; padding: 0 22px 0; }
.ap-lignes li {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2);
}
.ap-lignes li:last-child { border-bottom: 0; }
.ap-coche {
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 1.4px solid var(--gold); border-radius: 3px;
  position: relative;
}
.ap-coche::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px;
  border-right: 1.8px solid var(--gold-2); border-bottom: 1.8px solid var(--gold-2);
  transform: rotate(40deg);
}
.ap-note {
  margin: 0; padding: 16px 22px 22px;
  font-size: 13px; color: var(--faint); line-height: 1.55;
}

/* ---------- La douleur ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.pain-item { padding: 26px 24px 30px; border-right: 1px solid var(--line); }
.pain-item:last-child { border-right: 0; }
.pain-item h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0 0 10px; line-height: 1.25; }
.pain-item p { color: var(--muted); font-size: 15px; line-height: 1.62; margin: 0; }

/* ⚠️ `atelier-polish.css` (chargé APRÈS cette feuille) fixe `#probleme .pain-item h3`
   à 17 px, soit MOINS que le corps de texte (18 px) : le titre passait sous le
   texte qu'il introduit. On reprend la main avec la même spécificité. */
#probleme .pain-item h3 { font-size: 22px; font-weight: 500; }
#probleme .pain-item p { font-size: 15px; }

/* ---------- La prestation : 6 engagements, en filets ---------- */
.presta { border-top: 1px solid var(--ink); }
.presta-item {
  display: grid; grid-template-columns: 300px 1fr; gap: 32px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.presta-item h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin: 0; }
.presta-item p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; max-width: 62ch; }

/* ---------- Les exemples ---------- */
.exemples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.exemple-card { margin: 0; }
.exemple-card img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.exemple-card figcaption { padding: 14px 2px 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ex-nom { font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--ink); }
.ex-desc { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 110px; }
.ex-tag {
  font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-2); background: var(--gold-bg); border: 1px solid var(--gold-line);
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}

/* ---------- Les 3 étapes ---------- */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: e; border-top: 1px solid var(--ink); }
.etapes li {
  display: grid; grid-template-columns: 300px 1fr; gap: 32px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
  counter-increment: e;
}
.etapes li h3 {
  font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin: 0;
  display: flex; align-items: baseline; gap: 12px;
}
.etapes li h3::before {
  content: counter(e, decimal-leading-zero);
  font-family: var(--font-mono, var(--font-sans));
  font-size: 12px; font-weight: 500; color: var(--gold-2); letter-spacing: .08em;
}
.etapes li p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; max-width: 62ch; }

/* ---------- Le prix ---------- */
.prix-bloc {
  max-width: 620px; margin: 0 auto; padding: 34px 34px 30px;
  background: var(--card); border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md, 0 20px 44px -28px rgba(25,23,19,.4));
  text-align: center;
}
.prix-tete { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.px-num { font-family: var(--font-mono, var(--font-sans)); font-size: 52px; font-weight: 500; letter-spacing: -.04em; color: var(--ink); }
.px-per { color: var(--muted); font-size: 15px; }
.px-liste { list-style: none; margin: 26px 0 24px; padding: 0; text-align: left; }
.px-liste li {
  padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--ink-2); position: relative;
}
.px-liste li::before {
  content: ""; position: absolute; left: 2px; top: 18px;
  width: 9px; height: 5px;
  border-left: 1.8px solid var(--gold-2); border-bottom: 1.8px solid var(--gold-2);
  transform: rotate(-45deg);
}
.px-liste li:last-child { border-bottom: 0; }
.prix-bloc .btn { width: 100%; }
.px-note { color: var(--faint); font-size: 12.5px; margin: 14px 0 0; line-height: 1.6; }
.px-note a { color: var(--gold-2); }

/* ---------- La ligne devis, en bas (marginale, décision user) ---------- */
.ligne-devis {
  text-align: center; color: var(--faint); font-size: 13.5px;
  padding: 34px 0 8px; border-top: 1px solid var(--line); margin-top: 20px;
}
.ligne-devis a { color: var(--muted); border-bottom: 1px solid var(--gold-line); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-contrat { grid-template-columns: 1fr; gap: 26px; padding: 28px 0 40px; }
  .releve { margin-top: 22px; }
  .releve-l { padding: 11px 0; }
  .releve-l dd .num { font-size: 23px; }
  .hero-contrat .cta-row { margin-top: 22px; }
  .hero-contrat .cta-note { margin-top: 12px; }
  .hero-contrat .hero-lede { font-size: 16.5px; margin-top: 18px; }
  /* ⚠️ L'APERÇU DOIT RESTER DANS LE PREMIER ÉCRAN (comme sur desktop, où il est
     en colonne à droite). Sans ce resserrement, il tombait sous la ligne de
     flottaison sur un téléphone de 390×844 : le titre, le paragraphe et le
     relevé mangeaient les 844 px. Mesuré : il démarrait à 912 px. */
  .hero-mock .mock-body { padding: 16px 16px 18px; }
  .ap-lignes { padding: 0 16px; }
  .ap-note { padding: 12px 16px 16px; }
  .ap-lignes li { padding: 8px 0; }
  .pain-grid { grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
  .pain-item { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0 22px; }
  .presta-item, .etapes li { grid-template-columns: 1fr; gap: 8px; }
  .exemples-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .hero-contrat { padding: 20px 0 32px; }
  /* ⚠️⚠️ LE RELEVÉ RESTE À DEUX COLONNES, COMME SUR PC (retour user :
     « inspire-toi de la version PC »). On l'avait empilé (libellé au-dessus de la
     valeur) : outre que ça ne ressemble plus au relevé de conditions du PC, ça
     coûtait 55 px de hauteur — exactement ce qui poussait l'action hors de
     l'écran. Libellé à gauche, valeur à droite : la grammaire du devis tient,
     même sur un petit écran.
     ⚠️ `max-content` pour la colonne des libellés, PAS une largeur en dur. Le
     plus long (« SI ÇA NE MARCHE PAS » en capitales espacées) mesure 159 px
     naturellement : avec 104 px fixes il se coupait sur deux lignes à TOUTES les
     largeurs (constaté jusqu'à 620 px). max-content le laisse sur une ligne tout
     en ne prenant que la place nécessaire, et la hauteur du relevé ne bouge pas
     (160 px, mesuré).
     ⚠️ La taille du h1 n'est PAS redéfinie ici (voir echelle.css). */
  .releve-l { grid-template-columns: max-content 1fr; gap: 12px; align-items: baseline; padding: 7px 0; }
  /* ⚠️ Interlettrage resserré à .07em SUR MOBILE UNIQUEMENT. À .13em (valeur
     desktop), le libellé « SI ÇA NE MARCHE PAS » occupe 159 px : combiné à
     max-content, il ne laisse plus assez de place à la valeur, qui passe de 2 à
     4 lignes. À .07em il reste une seule ligne de libellé ET la valeur tient en
     2-3 lignes : relevé 22 px plus court à 390 (mesuré), toujours sans coupure. */
  .releve-l dt { font-size: 10.5px; letter-spacing: .07em; }
  .releve-l dd { font-size: 14.5px; }
  .exemples-grid { grid-template-columns: 1fr; }
  .etapes li h3, .presta-item h3 { font-size: 18px; }
  .px-num { font-size: 42px; }
  .prix-bloc { padding: 26px 20px 22px; }
  /* ⚠️ L'ACTION RESTE SUR UNE LIGNE : bouton + lien côte à côte, comme sur PC.
     Un bouton pleine largeur suivi d'un lien en dessous fait deux lignes (90 px
     au lieu de 51) et éloigne le lien du bouton qu'il complète. Mesuré : on
     gagne 39 px, le bouton passe de 796 à 741 px sur un écran de 844. */
  .hero-contrat .cta-row { flex-direction: row; flex-wrap: nowrap; gap: 14px; }
  .hero-contrat .cta-row .btn { width: auto; padding: 14px 20px; }
  .hero-contrat .cta-alt { white-space: nowrap; font-size: 13.5px; }
  /* Sous 340 px (petits téléphones), deux colonnes dans le relevé deviennent
     trop serrées pour la valeur : on empile. Mesuré : 199 px de haut au lieu de
     160, donc on ne le fait que là où c'est nécessaire — pas à 360 px. */
}
@media (max-width: 340px) {
  .releve-l { grid-template-columns: 1fr; gap: 3px; padding: 6px 0; }
}

/* ============================================================
   PREMIER ÉCRAN — c'est ce qu'on voit en arrivant. Tout le peps est ici.

   Retour user : « je n'aime pas ce grand carré noir, l'important est ce qu'on
   voit dès qu'on arrive sur le site ».
   → le champ encre pleine page est supprimé ; l'intensité est concentrée sur le
   hero, et le fond du hero est un DÉGRADÉ (jamais un aplat : un aplat se lit
   comme un rectangle, un dégradé se lit comme une lumière).

   ⚠️ CONTRASTES CALCULÉS sur le bas du dégradé #241d14 (le plus clair, donc le
   pire cas) : paper #f7f4ee 13,7:1 · or #b08a3e 4,7:1 · or clair #d9b878 8,0:1.
   --muted et --gold-2 restent INTERDITS sur ce fond.
   ============================================================ */
.hero-contrat {
  position: relative;
  isolation: isolate;
  color: var(--paper);
  background:
    radial-gradient(1100px 520px at 82% 6%, rgba(176,138,62,.30), transparent 62%),
    radial-gradient(760px 420px at 4% 98%, rgba(176,138,62,.13), transparent 66%),
    linear-gradient(168deg, #191713 0%, #221b12 52%, #241d14 100%);
}
/* Le filet d'or : la signature de l'atelier, en haut du premier écran. */
.hero-contrat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold), #e9dcc0, var(--gold), var(--gold-2));
  z-index: 3;
}
.hero-contrat .hero-copy h1 { color: var(--paper); }
/* Les mots en OR italique : c'est la signature de la marque, elle doit être
   dans le premier écran. Sur encre, on éclaircit l'or (le dégradé d'origine
   #c9a457/#8a6a2a tombait à 3,5:1). */
.hero-contrat .hero-copy h1 .accent {
  background: linear-gradient(100deg, #f3dda4, #c19a4e 46%, #d9b878);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-weight: 500;
}
.hero-contrat .hero-lede { color: var(--paper); opacity: .86; }
.hero-contrat .releve { border-top-color: rgba(247,244,238,.22); }
.hero-contrat .releve-l { border-bottom-color: rgba(247,244,238,.14); }
.hero-contrat .releve-l dt { color: var(--paper); opacity: .70; }
.hero-contrat .releve-l dd { color: var(--paper); }
.hero-contrat .releve-l dd .per { color: var(--paper); opacity: .70; }
.hero-contrat .cta-note { color: var(--paper); opacity: .70; }
.hero-contrat .cta-alt { color: var(--paper); border-bottom-color: rgba(247,244,238,.34); }
.hero-contrat .cta-alt:hover { color: #fff; border-bottom-color: var(--gold); }
.hero-contrat .btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.hero-contrat .btn.primary:hover { background: #c19a4e; border-color: #c19a4e; }

/* Le panneau d'aperçu : la seule surface claire du premier écran, donc le
   point où l'œil se pose. On le pose sur une ombre portée franche. */
.hero-contrat .hero-mock .mock-window {
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(233,220,192,.16);
}
.hero-contrat .hero-mock .mock-bar { background: #241d14; border-bottom-color: rgba(247,244,238,.12); }
.hero-contrat .hero-mock .mock-title { color: rgba(247,244,238,.74); }

/* ⚠️ SUR MOBILE AUSSI. Le hero est le seul endroit où le fond coloré paie : le
   canvas 3D y est désactivé (`.hero-3d{display:none}` sous 700px), donc sans ce
   bloc le téléphone n'aurait QUE du texte sur ivoire — exactement la platitude
   signalée. On garde le dégradé et on resserre les marges. */
@media (max-width: 900px) {
  .hero-contrat { padding: 30px 0 40px; }
}
@media (max-width: 620px) {
  .hero-contrat { padding: 24px 0 34px; }
  .hero-contrat::before { height: 2px; }
}

/* ============================================================
   PREMIER ÉCRAN — version claire (retour user : « moins sombre » et
   « sur les côtés il y a des espèces de barre noire très disgracieuses »).

   ⚠️ CE QUI CAUSAIT LES BARRES. Le fond débordait par
   `box-shadow: 0 0 0 100vmax <encre>` + `clip-path: inset(0 -100vmax)`. Or le
   `box-shadow` propage une COULEUR UNIE, jamais un dégradé : mesuré sur la
   capture, les 188 px de chaque côté du conteneur (1120 dans 1440) étaient de
   l'encre brute (25,23,19), sans les halos d'or. D'où deux bandes plates et
   sombres collées au contenu. Ces deux déclarations sont supprimées.

   Ici, le fond est plus CLAIR et n'a plus besoin de déborder : sur une page
   ivoire, un bloc de couleur à l'intérieur du conteneur est une pièce posée,
   pas une barre. Le débordement n'était nécessaire que parce que le hero était
   sombre.

   ⚠️ CONTRASTES (calculés, craft floor 4,5:1 mini) : encre #191713 sur les
   valeurs les plus sombres du dégradé ci-dessous —
      #f3ece0 15,3:1 · #ece1cf 14,1:1 · #e6d9c4 13,0:1 — tout est très au-dessus.
   ============================================================ */
.hero-contrat {
  background:
    radial-gradient(1020px 460px at 86% 4%, rgba(176,138,62,.26), transparent 60%),
    radial-gradient(700px 380px at 2% 100%, rgba(176,138,62,.12), transparent 64%),
    linear-gradient(158deg, #f3ece0 0%, #ece1cf 54%, #e6d9c4 100%);
  color: var(--ink);
  border-radius: 18px;
  border: 1px solid var(--gold-line);
  padding: 48px 44px 52px;
}
/* Le filet d'or reste : c'est la signature, et il se voit mieux sur clair. */
.hero-contrat::before {
  height: 3px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold), #e9dcc0, var(--gold), var(--gold-2));
}
.hero-contrat .hero-copy h1 { color: var(--ink); }
/* Les mots en or reviennent au dégradé d'origine : sur clair il est nettement
   plus contrasté que sur encre (où il tombait à 3,5:1). */
.hero-contrat .hero-copy h1 .accent {
  background: linear-gradient(100deg, #c9a457, #8a6a2a, #b08a3e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-contrat .hero-lede { color: var(--ink-2); opacity: 1; }
.hero-contrat .releve { border-top-color: var(--line); }
.hero-contrat .releve-l { border-bottom-color: var(--line); }
.hero-contrat .releve-l dt { color: var(--faint); opacity: 1; }
.hero-contrat .releve-l dd { color: var(--ink); }
.hero-contrat .releve-l dd .per { color: var(--muted); opacity: 1; }
.hero-contrat .cta-note { color: var(--faint); opacity: 1; }
.hero-contrat .cta-alt { color: var(--gold-2); border-bottom-color: var(--gold-line); }
.hero-contrat .cta-alt:hover { color: var(--gold-3); border-bottom-color: var(--gold); }

/* Le panneau d'aperçu : sur fond clair, il lui faut une ombre pour se détacher. */
.hero-contrat .hero-mock .mock-window {
  box-shadow: 0 30px 60px -30px rgba(25,23,19,.34), 0 0 0 1px rgba(25,23,19,.06);
}

@media (max-width: 900px) {
  .hero-contrat { padding: 34px 26px 38px; border-radius: 14px; }
}
@media (max-width: 620px) {
  .hero-contrat { padding: 26px 18px 30px; }
  .hero-contrat::before { height: 2px; }
}

/* ⚠️ CORRECTION DE CONTRASTE sur le fond clair. Mesure du pire cas (le point le
   plus sombre du dégradé, 226,211,183) : --faint tombait à 3,13:1 et --gold-2 à
   3,41:1, soit SOUS le seuil de 4,5:1 pour du texte courant. Sur l'ancien hero
   sombre c'était l'inverse (ces gris tenaient, les ors échouaient) : changer le
   fond a inversé le problème. On remonte les couleurs, on ne touche PAS au fond.
     --faint -> --muted      (3,78:1 mesure... encore juste)
     --muted -> #5c5443      (calculé >= 4,5:1 sur ce fond)
     --gold-2 -> --gold-3    #6e5320 (calculé >= 4,5:1)
*/
.hero-contrat .releve-l dt { color: #5c5443; }
.hero-contrat .releve-l dd .per { color: #5c5443; }
.hero-contrat .cta-note { color: #5c5443; }
.hero-contrat .cta-alt { color: #6e5320; border-bottom-color: var(--gold-line); }
.hero-contrat .cta-alt:hover { color: #4f3c17; border-bottom-color: var(--gold); }

/* ⚠️ CONTRASTE DU BOUTON. L'or de la marque (#b08a3e) donne 3,21:1 avec du texte
   blanc : insuffisant pour du texte de bouton (seuil 4,5:1). On descend d'un cran
   dans la rampe d'or existante (#8a6a2a = 5,03:1) : le bouton reste de la même
   famille, il est simplement lisible. Vérifié par calcul, pas à l'œil. */
.hero-contrat .btn.primary {
  background: linear-gradient(165deg, #9c7a33 0%, #8a6a2a 52%, #6e5320 100%);
  border-color: #6e5320;
  color: #fff;
}
.hero-contrat .btn.primary:hover {
  background: linear-gradient(165deg, #a8853a 0%, #93712e 52%, #775a23 100%);
  border-color: #775a23;
}

/* ============================================================
   MENU LATÉRAL — tenue « haut de gamme » (2026-09-30)

   ⚠️ Le tiroir listait 18 liens à plat : aucune hiérarchie, aspect catalogue.
   Le markup est maintenant en 5 destinations + 3 groupes repliés. Ici on donne
   la tenue qui manquait : largeur confortable, respiration, et une séparation
   nette entre l'action principale et le reste.
   ============================================================ */
.drawer { width: 380px; }
.drawer-nav { padding: 4px 18px 18px; }
.drawer-list { display: grid; gap: 2px; }
.drawer-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 15.5px; color: var(--ink);
  text-decoration: none; transition: background .15s, color .15s;
}
.drawer-list a:hover { background: var(--paper); color: var(--gold-2); }
.drawer-list a.current { background: var(--gold-bg); color: var(--gold-2); font-weight: 500; }

/* L'action principale : plus haute, plus franche, séparée du reste. */
.drawer-cta { margin: 14px 18px 6px; padding: 15px 18px; font-size: 15.5px; }

/* Les groupes repliés : discrets, mais lisibles. */
.drawer-more { margin-top: 10px; border-top: 1px solid var(--line-soft); }
.drawer-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; padding: 13px 14px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border-radius: 10px;
  transition: background .15s, color .15s;
}
.drawer-more > summary::-webkit-details-marker { display: none; }
.drawer-more > summary:hover { background: var(--paper); color: var(--ink); }
.drawer-more > summary svg { transition: transform .2s; }
.drawer-more[open] > summary svg { transform: rotate(180deg); }
.drawer-more .drawer-list { padding: 2px 0 8px; }

@media (max-width: 480px) { .drawer { width: 100%; max-width: 92vw; } }

/* ============================================================
   HERO — le double colonnage tient À TOUTES LES TAILLES (2026-09-30)

   Retour user : « la version PC est mieux ; sur la version mobile ajoute une
   image exemple dès le début sur la droite comme la version PC ».

   ⚠️ AVANT, sous 900px, `.hero-in` passait en UNE colonne : le titre, le
   paragraphe, le relevé ET les boutons s'empilaient avant que l'aperçu
   n'apparaisse. Le visiteur voyait donc du texte sur toute la hauteur utile
   avant la moindre démonstration.
   ⚠️ MAINTENANT : titre + aperçu restent côte à côte (le titre à gauche,
   l'aperçu à droite), même sur un téléphone. Le relevé et les boutons passent
   SOUS, sur toute la largeur. C'est le double colonnage du PC, conservé.
   ============================================================ */
.hero-haut {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 40px;
  align-items: center;
}
.hero-titre { min-width: 0; }

/* L'aperçu de droite : sa propre ombre, il doit se détacher du dégradé. */
.hero-apercu-carte .mock-window {
  box-shadow: 0 30px 60px -30px rgba(25,23,19,.42), 0 0 0 1px rgba(25,23,19,.06);
}

/* Sous 1180px : les colonnes se resserrent mais ne disparaissent pas. */
@media (max-width: 1180px) {
  .hero-haut { grid-template-columns: 1fr 1fr; gap: 30px; }
}
/* Sous 900px (tablette) : on garde DEUX colonnes, plus compactes. */
@media (max-width: 900px) {
  .hero-haut { grid-template-columns: 1.05fr .95fr; gap: 22px; }
}
/* ⚠️ Sous 620px (téléphone) : on garde aussi les DEUX colonnes — c'est le point
   de la demande. Le titre se réduit, l'aperçu aussi, mais il reste À DROITE. */
@media (max-width: 620px) {
  .hero-haut { grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; }
  .hero-contrat .hero-copy h1 { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.1; }
  .hero-contrat .hero-lede { font-size: 14.5px; margin-top: 12px; }
  /* L'aperçu compact : on masque les lignes de détail, on garde le titre du
     site et la pastille « en construction ». L'essentiel se lit en un regard. */
  .hero-apercu-carte .ap-lignes { display: none; }
  .hero-apercu-carte .ap-note { display: none; }
  .hero-apercu-carte .mock-body { padding: 12px 12px 14px; }
  .hero-apercu-carte .apercu-bloc { padding: 0; }
  .hero-apercu-carte .ap-nom { font-size: 17px; }
  .hero-apercu-carte .ap-metier { font-size: 11.5px; }
  .hero-apercu-carte .ap-kicker { font-size: 9.5px; margin-bottom: 6px; }
  .hero-apercu-carte .mock-bar em { font-size: 9.5px; }
  .hero-apercu-carte .mock-bar span { width: 6px; height: 6px; }
  .hero-apercu-carte .mock-glow { display: none; }
}

/* ⚠️ Ajustement après check visuel : deux colonnes sur téléphone, c'est serré.
   On donne de l'air (gap) et on allège le panneau (il n'a plus besoin de son
   cadre de navigateur complet). */
@media (max-width: 620px) {
  .hero-haut { gap: 20px; }
  .hero-apercu-carte .mock-bar { display: none; }
  .hero-apercu-carte .mock-window { border-radius: 12px; }
  .hero-apercu-carte .mock-body { padding: 14px 13px 15px; }
  .hero-contrat .hero-copy h1 { font-size: clamp(21px, 6vw, 26px); }
  .hero-contrat .hero-lede { font-size: 14px; line-height: 1.55; margin-top: 10px; }
  .hero-contrat .releve { margin-top: 20px; }
  .hero-contrat .cta-row { margin-top: 18px; gap: 10px; }
  .hero-contrat .cta-row .btn { width: 100%; padding: 14px 18px; font-size: 15px; }
  .hero-contrat .cta-note { margin-top: 10px; font-size: 12.5px; }
}

/* ============================================================
   HERO — placement en GRILLE (2026-09-30, 2e correction)

   ⚠️ Ce que j'avais fait de travers : en forçant DEUX COLONNES à 390px, le titre
   n'avait plus que 163px de large et se cassait en 5 lignes, avec un aperçu de
   133px illisible. Mesure : titre 163px / 5 lignes, aperçu 133px. C'était laid, à
   juste titre.
   ⚠️ La demande était « un visuel tôt », pas « deux colonnes partout ». On passe
   donc à une GRILLE À ZONES :
     - desktop : [titre+suite] à gauche | [aperçu] à droite ;
     - mobile  : titre pleine largeur -> APERÇU PLEINE LARGEUR -> le reste.
   L'aperçu reste haut dans la page (c'est le but), mais il respire.
   ============================================================ */
.hero-contrat {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  grid-template-areas:
    "titre  apercu"
    "suite  apercu";
  column-gap: 46px;
  row-gap: 0;
  align-content: center;
  align-items: start;
}
.hero-contrat > .hero-titre { grid-area: titre; }
.hero-contrat > .hero-apercu { grid-area: apercu; align-self: center; }
.hero-contrat > .hero-suite { grid-area: suite; }
.hero-contrat > .hero-3d { grid-area: 1 / 1 / -1 / -1; }
/* Le titre n'est plus dans un conteneur étroit : il respire. */
.hero-titre h1 { max-width: 15ch; }
.hero-suite .hero-lede { margin-top: 20px; }

/* ⚠️ Sous 900px : UNE colonne, titre puis aperçu PLEINE LARGEUR, puis le reste.
   L'aperçu remonte donc juste sous le titre, au lieu de tomber en bas de page. */
@media (max-width: 900px) {
  .hero-contrat {
    grid-template-columns: 1fr;
    grid-template-areas:
      "titre"
      "apercu"
      "suite";
    row-gap: 26px;
  }
  .hero-titre h1 { max-width: none; }
  .hero-apercu { max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 620px) {
  .hero-contrat { row-gap: 22px; padding: 26px 18px 32px; }
  /* ⚠️⚠️ NE PAS REDÉFINIR LA TAILLE DU h1 ICI.
     Elle vivait aux deux endroits (ici : clamp(29, 8.4vw, 38) ; dans
     echelle.css : 30px puis écrasé par un 27px !important). Comme echelle.css
     est chargé EN DERNIER, c'est lui qui gagne : cette règle ne servait à rien
     et faisait croire à une échelle qu'on n'avait pas. La taille du titre
     d'accueil est définie UNE fois, dans echelle.css (bloc ACCUEIL).
     Idem pour .hero-lede : même fichier gagnant. */
  .hero-su .hero-lede, .hero-contrat .hero-lede { font-size: 16px; margin-top: 0; }
  .hero-apercu { max-width: none; }
  /* L'aperçu pleine largeur : on peut remettre les détails, il y a la place. */
  .hero-apercu .ap-lignes { display: block; padding: 0 16px; }
  .hero-apercu .ap-note { display: block; padding: 12px 16px 16px; }
  .hero-apercu .mock-bar { display: flex; }
  .hero-apercu .ap-nom { font-size: 19px; }
  .hero-apercu .ap-metier { font-size: 13px; }
}

/* ============================================================
   PAGES LOCALES ARTISAN — /services/<metier>/<departement> (2026-10-01)

   Les villes réelles du département. C'est la matière locale qui distingue
   une page d'une autre : un artisan se reconnaît dans « Villeurbanne »,
   pas dans un texte générique. Liste sobre, sans carte ni icône (craft floor).
   ============================================================ */
.zone-villes {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.zone-ville {
  font-family: var(--font-mono, var(--font-sans));
  font-size: 12.5px; letter-spacing: .02em;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 12px;
  background: var(--card);
}
.zone-ville.zone-plus {
  color: var(--faint);
  border-style: dashed;
  background: transparent;
}
@media (max-width: 620px) {
  .zone-villes { gap: 6px; }
  .zone-ville { font-size: 12px; padding: 5px 10px; }
}


/* ============================================================
   EX-echelle.css   (37334 octets, 15 !important)
   ============================================================ */

/* ============================================================
   É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: 500;
  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: 500;
  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.
   ============================================================ */
/* ============================================================
   ⚠️⚠️ IDENTITÉ TYPOGRAPHIQUE — SOURCE UNIQUE.
   Ce bloc écrasait `--font-serif` (déclaré en Fraunces dans luxe.css) par
   'Bodoni Moda'. Deux feuilles, deux polices : la moitié du site s'affichait
   en Fraunces, l'autre en Bodoni — et les pages de vente en Anton. Trois
   identités pour un seul site.

   Ligne directrice retenue (VALIDÉE par le user sur la maquette blanche) :
     --font-serif : Anton    -> TOUS les titres
     --font-sans  : Archivo  -> TOUT le texte
     --font-mono  : IBM Plex Mono -> étiquettes, prix, chiffres
   Ne JAMAIS redéclarer ces trois variables ailleurs : modifier ICI.
   ============================================================ */
:root {
  --font-serif: 'Anton', 'Archivo', system-ui, sans-serif;
  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
/* ⚠️ Réglages conservés (ils valent aussi pour Anton), mais la FAMILLE vient
   de la variable unique : plus aucune police écrite ici. */
h1, h2, .hero h1, .page-head h1, .section-head h2 {
  font-family: var(--font-serif);
  letter-spacing: -.012em;
  line-height: 1.02;
}
.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: 500;
}

/* ============================================================
   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: 500;
  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: 500; 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: 500; }

/* ⚠️ 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. */


/* ============================================================
   EX-refonte_blanche.css   (6438 octets, 23 !important)
   ============================================================ */

/* ============================================================
   REFONTE BLANCHE — feuille dédiée, chargée EN DERNIER.
   ⚠️ NE PAS la déplacer avant echelle.css : plusieurs règles de ce fichier
   ont une spécificité ÉGALE à celle d'echelle.css/accueil-contrat.css et ne
   gagnent que par l'ordre d'arrivée.
   ============================================================ */

/* ================= REFONTE BLANCHE 2026-10 =================
   Inspirée d'absurdventures.com : fond plein, une idée par écran, display
   condensé en capitales très grande, étiquettes monospace espacées, angles
   droits, aplats sans dégradé, zéro emoji.

   ⚠️ CONTRASTES MESURÉS sur fond blanc (#ffffff), pas estimés :
     --ink       #0a0a0a  19,8:1  texte courant
     --ink-2     #3d3d3d  10,9:1  texte secondaire
     --gris      #6f6f6f   5,0:1  texte discret
     --or-texte  #8a6a2a   5,0:1  texte or fin  (l'or vif est INSUFFISANT)
     --or-vif    #c8a24a   2,3:1  APLATS ET GROS ÉLÉMENTS UNIQUEMENT
   Ne jamais mettre --or-vif sur du texte de moins de 24 px.
   ============================================================ */
:root {
  --blanc: #ffffff;
  --blanc-2: #f7f6f3;
  --blanc-3: #f1efea;
  --blanc-ligne: #e4e2dd;

  --encre: #0a0a0a;
  --encre-2: #3d3d3d;
  --encre-3: #6f6f6f;

  --or-vif: #c8a24a;
  --or-texte: #8a6a2a;

  --display: var(--font-serif);
  --texte: var(--font-sans);
  --etiquette: var(--font-mono);
}

/* ---------- typographie display sur les pages de VENTE uniquement ----------
   On cible un attribut posé par le gabarit : ainsi le builder, le dashboard
   et les espaces clients ne bougent pas. */
body.vitrine {
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
}

body.vitrine h1,
body.vitrine h2,
body.vitrine h3,
body.vitrine .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.012em;
  line-height: .94;
  color: var(--encre);
}

body.vitrine h1 { font-size: clamp(40px, 7.4vw, 112px); }
body.vitrine h2 { font-size: clamp(28px, 4vw, 58px); }
body.vitrine h3 { font-size: clamp(20px, 2.2vw, 27px); letter-spacing: .005em; }

/* étiquettes : petites capitales monospace très espacées */
body.vitrine .etiquette,
body.vitrine .sec-num,
body.vitrine .kicker {
  font-family: var(--etiquette);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or-texte);
}

/* boutons : angles droits, contraste maximal.
   ⚠️⚠️ POURQUOI `!important` ICI. Quatre feuilles legacy posent un fond sur
   `.btn.primary` à la MÊME spécificité (0,3,1) que nos règles — dont
   `echelle.css : body:not(.app-mode) .btn.primary`. En pareil cas c'est
   l'ordre d'arrivée qui tranche, et malgré une feuille dédiée chargée en
   DERNIER la nôtre perdait. On tranche donc explicitement. Ne pas retirer
   sans avoir vérifié le style CALCULÉ du bouton, pas seulement la règle.
   Portée volontairement limitée à `body.vitrine` : le builder, le dashboard
   et les espaces clients ne sont pas touchés. */
body.vitrine .btn,
body.vitrine .btn.primary,
body.vitrine .btn.big {
  border-radius: 0 !important;
  font-family: var(--etiquette) !important;
  font-size: 12.5px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  padding: 17px 30px !important;
  background-image: none !important;
  background-color: var(--encre) !important;
  color: var(--blanc) !important;
  border: 1px solid var(--encre) !important;
  box-shadow: none !important;
}
body.vitrine .btn:hover,
body.vitrine .btn.primary:hover,
body.vitrine .btn.big:hover {
  background-image: none !important;
  background-color: var(--or-texte) !important;
  border-color: var(--or-texte) !important;
  color: var(--blanc) !important;
}
body.vitrine .btn.vide,
body.vitrine .btn.ghost {
  background-image: none !important;
  background-color: transparent !important;
  color: var(--encre) !important;
  border-color: #c9c6bf !important;
}
body.vitrine .btn.vide:hover,
body.vitrine .btn.ghost:hover {
  background-color: transparent !important;
  color: var(--encre) !important;
  border-color: var(--encre) !important;
}


/* cartes : angles droits, filet fin, aucune ombre lourde */
body.vitrine .card,
body.vitrine .dual-plan,
body.vitrine .panel {
  border-radius: 0;
  border: 1px solid var(--blanc-ligne);
  box-shadow: none;
  background: var(--blanc);
}

/* le bandeau d'offre : aplat clair, filet or */
body.vitrine .visi-block {
  border: 1px solid var(--or-vif);
  background: var(--blanc-2);
  border-radius: 0;
}

/* ---------- offre « votre site, à vous » (sans prix affiché) ----------
   Deux colonnes : l'argument à gauche, l'appel à l'action à droite. Angles
   droits, filet fin, aplat or très clair pour marquer la rupture avec
   l'abonnement juste au-dessus. */
body.vitrine .votre-site {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 1px;
  background: var(--blanc-ligne);
  border: 1px solid var(--or-vif);
  border-radius: 0;
}
body.vitrine .votre-site > div {
  background: var(--blanc);
  padding: 40px 38px;
}
body.vitrine .vs-cta { background: var(--blanc-2); }
body.vitrine .votre-site p { font-size: 16px; color: var(--encre-2); }
body.vitrine .vs-liste { list-style: none; margin-top: 24px; }
body.vitrine .vs-liste li {
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--blanc-ligne);
  font-size: 15px; color: var(--encre);
  position: relative;
}
body.vitrine .vs-liste li::before {
  content: ''; position: absolute; left: 0; top: 19px;
  width: 9px; height: 9px; background: var(--or-vif);
}
body.vitrine .vs-accroche {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.15;
  color: var(--encre);
  margin-bottom: 26px;
}
body.vitrine .vs-cta .btn { width: 100%; text-align: center; }
body.vitrine .vs-note {
  font-family: var(--etiquette);
  font-size: 11px; letter-spacing: .1em;
  color: var(--encre-3);
  margin-top: 16px; text-align: center;
}

@media (max-width: 900px) {
  body.vitrine .votre-site { grid-template-columns: 1fr; }
  body.vitrine .votre-site > div { padding: 28px 22px; }
}

/* le logo en en-tête : hauteur maîtrisée, le SVG contient le mot */
/* le nom écrit à côté du logo ferait doublon : le logo contient déjà le mot */

@media (max-width: 900px) {
    body.vitrine .btn, body.vitrine .btn.primary, body.vitrine .btn.big { padding: 15px 22px; }
}


/* ============================================================
   EX-vitrine.css   (17971 octets, 1 !important)
   ============================================================ */

/* ============================================================
   VITRINE — feuille dédiée à la page d'accueil (portage de la maquette
   validée par le user : previews/accueil-blanc.html + previews/blanc.css).

   ⚠️⚠️ TOUS LES SÉLECTEURS SONT PRÉFIXÉS `body.v-page`.
   `echelle.css` normalise les balises avec `body:not(.app-mode) p` — soit une
   spécificité (0,1,2) qui BAT un simple sélecteur de classe (0,1,0). Sans ce
   préfixe, les tailles de texte retombaient à 16 px et le titre prenait six
   lignes au lieu de trois (mesuré). Préfixer porte à (0,2,1) et gagne
   proprement, sans recourir à `!important`.

   ⚠️ Aucune règle ici ne cible une classe de luxe.css/echelle.css : c'est ce
   qui garantit qu'aucun style de l'ancien site ne se mélange.

   ⚠️ CONTRASTES MESURÉS sur fond blanc (#ffffff), pas estimés :
     --v-encre    #0a0a0a  19,8:1   texte courant
     --v-encre-2  #3d3d3d  10,9:1   texte secondaire
     --v-gris     #6f6f6f   5,0:1   texte discret
     --v-or-texte #8a6a2a   5,0:1   texte or fin
     --v-or       #c8a24a   2,3:1   APLATS ET GROS ÉLÉMENTS UNIQUEMENT
   Ne jamais écrire `color: var(--v-or)` sur du texte de moins de 24 px.
   ============================================================ */

:root {
  --v-blanc: #ffffff;
  --v-blanc-2: #f7f6f3;
  --v-blanc-3: #f1efea;
  --v-ligne: #e4e2dd;
  --v-encre: #0a0a0a;
  --v-encre-2: #3d3d3d;
  --v-gris: #6f6f6f;
  --v-or: #c8a24a;
  --v-or-texte: #8a6a2a;
  --v-display: var(--font-serif);
  --v-texte: var(--font-sans);
  --v-mono: var(--font-mono);
  --v-gouttiere: 28px;
  --v-large: 1120px;
}

body.v-page {
  background: var(--v-blanc);
  color: var(--v-encre);
  font-family: var(--v-texte);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.v-page * { box-sizing: border-box; }
body.v-page .v-wrap { max-width: var(--v-large); margin: 0 auto; padding: 0 var(--v-gouttiere); }
body.v-page .v-mono { font-family: var(--v-mono); }

/* ---------------- 1. OUVERTURE ---------------- */
body.v-page .v-hero {
  /* ⚠️⚠️ PAS D'`overflow: hidden` ICI. Bug mesuré : il ROGNAIT le titre.
     La hauteur de glyphe d'Anton (~1,15 em) dépasse l'interligne serré de la
     maquette (.92), donc le contenu du H1 fait 23 px de plus que sa boîte ;
     avec `overflow: hidden` sur ce parent, la dernière ligne et le trait du mot
     en contour étaient coupés. Les couches de fond sont en `inset: 0` et
     masquées par un `mask-image` : elles ne débordent pas, ce `overflow`
     n'était donc utile à rien.

     ⚠️⚠️ `min-height: 100svh` + contenu poussé en bas = TROU BÉANT SUR GRAND
     ÉCRAN. Mesuré : 293 px de vide en haut en 1920x1080, et 1 373 px en 4K —
     le contenu était collé en bas (`justify-content: flex-end`) avec un vide
     au-dessus. C'est le « PC KO » signalé par le user.
     Correction : on ne force PLUS le plein écran. Le hero respire selon son
     contenu, avec un plafond. Vérifié de 900 à 2160 px de haut. */
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 128px var(--v-gouttiere) 64px;
}
body.v-page .v-hero-cadre {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(200, 162, 74, .16), transparent 62%),
    linear-gradient(to bottom, #ffffff 0%, var(--v-blanc-2) 78%);
}
/* le quadrillage de plan technique, en fondu vers le bas */
body.v-page .v-hero-grille-vide {
  position: absolute; inset: 0; z-index: 0; opacity: .8;
  background-image:
    linear-gradient(rgba(10, 10, 10, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, .055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 108%, #000 6%, transparent 72%);
  mask-image: radial-gradient(120% 80% at 50% 108%, #000 6%, transparent 72%);
}
/* ⚠️⚠️ LE HERO DOIT PORTER LA MÊME GOUTTIÈRE QUE LE RESTE DU SITE.
   Bug mesuré : `.v-hero` porte `padding: 128px 28px 64px` sur la SECTION, et
   `.v-hero-inner` est centré à 1120 px SANS padding interne. Résultat : le
   titre de l'accueil tombait à x=160, tandis que `/pricing` (même largeur de
   conteneur) tombe à x=188 — 28 px de décalage entre deux pages de même
   largeur, sans justification. C'est le « mal aligné » signalé par le user.
   Le padding appartient au CONTENEUR interne, pas à la section : ainsi
   l'accueil cadre exactement comme les autres pages. */
body.v-page .v-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--v-large); width: 100%;
  margin: 0 auto;
  padding: 0 var(--v-gouttiere);
}

body.v-page .v-kicker {
  font-family: var(--v-mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--v-or-texte);
  margin: 0 0 26px; display: flex; align-items: center; gap: 14px;
}
body.v-page .v-kicker::before { content: ''; width: 34px; height: 1px; background: var(--v-or-texte); display: block; }

body.v-page .v-h1 {
  font-family: var(--v-display); font-weight: 400; text-transform: uppercase;
  /* ⚠️ LINE-HEIGHT .92 -> .99 ET PADDING VERTICAL.
     Bug mesuré : à .92 le contenu du titre faisait 333 px dans une boîte de
     302 px — Anton a une hauteur de glyphe supérieure à l'interligne, donc les
     lignes se chevauchent et le mot en CONTOUR (`-webkit-text-stroke`) voyait
     son trait rogné en haut et en bas. Le padding réserve la place du trait,
     qui se dessine À L'EXTÉRIEUR des glyphes. */
  /* Interligne serré de la maquette (.92). Il est SANS RISQUE dès lors qu'aucun
     ancêtre ne rogne : voir la note sur `overflow` dans `.v-hero`. */
  font-size: clamp(40px, 7.6vw, 118px); line-height: .92; letter-spacing: -.012em;
  margin: 0; max-width: 17ch; color: var(--v-encre);
}
body.v-page .v-barre {
  -webkit-text-stroke: 1.6px var(--v-encre);
  color: transparent;
  /* le trait se peint hors des glyphes : on lui laisse de l'air à gauche/droite */
  padding: 0 .02em;
}
body.v-page .v-or { color: var(--v-or-texte); }

body.v-page .v-hero-sub { margin: 30px 0 0; max-width: 62ch; font-size: clamp(15px, 1.25vw, 18px); color: var(--v-encre-2); line-height: 1.65; }
body.v-page .v-hero-cta { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
body.v-page .v-hero-note { font-family: var(--v-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--v-gris); margin-left: 6px; }

body.v-page .v-hero-facts {
  position: relative; z-index: 2; max-width: var(--v-large); width: 100%;
  margin: 62px auto 0; border-top: 1px solid var(--v-ligne);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
body.v-page .v-hero-facts > div { padding: 20px 0 0; }
body.v-page .v-hero-facts dt {
  font-family: var(--v-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--v-gris); margin: 0;
}
body.v-page .v-hero-facts dd { font-family: var(--v-display); font-size: 26px; margin: 7px 0 0; color: var(--v-encre); }

/* ---------------- boutons ---------------- */
body.v-page .v-btn {
  display: inline-block; font-family: var(--v-mono); font-size: 12.5px;
  letter-spacing: .15em; text-transform: uppercase; padding: 17px 30px;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
  text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
body.v-page .v-btn-plein { background: var(--v-encre); color: var(--v-blanc); border-color: var(--v-encre); }
body.v-page .v-btn-plein:hover { background: var(--v-or-texte); border-color: var(--v-or-texte); }
body.v-page .v-btn-vide { background: transparent; color: var(--v-encre); border-color: #c9c6bf; }
body.v-page .v-btn-vide:hover { border-color: var(--v-encre); }

/* ---------------- sections ---------------- */
body.v-page .v-sec { padding: 118px var(--v-gouttiere); border-top: 1px solid var(--v-ligne); /* pas d'overflow cache : ne jamais rogner un titre */ }
body.v-page .v-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 62px; }
body.v-page .v-h2 {
  font-family: var(--v-display); font-weight: 400; text-transform: uppercase;
  /* ⚠️ même piège que .v-h1 : à .96 le contenu dépassait la boîte (190 px pour
     174) et les descendantes d'Anton étaient rognées. .99 + padding vertical. */
  font-size: clamp(30px, 4.2vw, 62px); line-height: .96; letter-spacing: -.01em;
  margin: 0; max-width: 20ch; color: var(--v-encre);
}
body.v-page .v-h3 {
  font-family: var(--v-display); font-weight: 400; text-transform: uppercase;
  font-size: 25px; letter-spacing: .01em; margin: 0 0 12px; color: var(--v-encre);
}
body.v-page .v-sec-num {
  font-family: var(--v-mono); font-size: 11.5px; letter-spacing: .2em;
  color: var(--v-or-texte); text-transform: uppercase;
}

/* grille des 4 prestations */
body.v-page .v-grille { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--v-ligne); }
body.v-page .v-grille article { padding: 40px 34px 40px 0; border-bottom: 1px solid var(--v-ligne); }
body.v-page .v-grille article:nth-child(odd) { border-right: 1px solid var(--v-ligne); padding-right: 40px; }
body.v-page .v-grille article:nth-child(even) { padding-left: 40px; }
body.v-page .v-grille article p { color: var(--v-encre-2); font-size: 15px; max-width: 46ch; margin: 0; }
body.v-page .v-n { font-family: var(--v-mono); font-size: 11.5px; color: var(--v-or-texte); letter-spacing: .18em; display: block; margin-bottom: 20px; }

/* ---------------- 3. avant / après ---------------- */
body.v-page .v-apercu { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--v-ligne); border: 1px solid var(--v-ligne); }
body.v-page .v-apercu > div { background: var(--v-blanc); padding: 34px; }
body.v-page .v-etat { font-family: var(--v-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 22px; }
body.v-page .v-avant .v-etat { color: var(--v-gris); }
body.v-page .v-apres .v-etat { color: var(--v-or-texte); }
body.v-page .v-apercu ul { list-style: none; margin: 0; padding: 0; }
body.v-page .v-apercu li { padding: 13px 0; border-bottom: 1px solid var(--v-ligne); font-size: 15px; display: flex; gap: 12px; }
body.v-page .v-avant li { color: #96948f; }
body.v-page .v-apres li { color: var(--v-encre); }
body.v-page .v-apercu li span { font-family: var(--v-mono); font-size: 11px; color: var(--v-or-texte); padding-top: 4px; }

body.v-page .v-cta-ligne { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------------- 4. les offres ---------------- */
/* ⚠️ LA PISTE EST UN DÉFILEMENT NATIF (`overflow-x: auto` + `scroll-snap`),
   pas une grille. C'est ce qui donne le glisser-déposer au doigt sans JS, et
   ce qui dégrade proprement si le script ne charge pas.
   `scrollbar-width: none` masque la barre native : les pastilles et les
   flèches la remplacent, et une barre visible sous les cartes jurerait. */
body.v-page .v-piste {
  display: flex; gap: 1px;
  background: var(--v-ligne);
  border: 1px solid var(--v-ligne);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
body.v-page .v-piste::-webkit-scrollbar { display: none; }
body.v-page .v-piste > [data-diapo] {
  scroll-snap-align: start;
  flex: 0 0 100%;                /* une diapo = une largeur */
  min-width: 0;
}
/* ⚠️ À partir de 1000 px les trois offres tiennent côte à côte : le carrousel
   n'a plus de sens. On repasse en grille et on MASQUE les commandes, sinon
   l'utilisateur voit des flèches qui ne déplacent rien. */
@media (min-width: 1000px) {
  body.v-page .v-piste { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  body.v-page .v-piste > [data-diapo] { flex: none; }
}

body.v-page .v-commandes {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 26px;
}
body.v-page .v-fleche {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--v-encre);
  border: 1px solid var(--v-ligne); border-radius: 0;
  font-family: var(--v-mono); font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
body.v-page .v-fleche:hover { background: var(--v-encre); color: var(--v-blanc); border-color: var(--v-encre); }
body.v-page .v-fleche:disabled { opacity: .3; cursor: default; }
body.v-page .v-fleche:disabled:hover { background: transparent; color: var(--v-encre); border-color: var(--v-ligne); }
body.v-page .v-pastilles { display: flex; align-items: center; gap: 11px; }
body.v-page .v-pastille {
  width: 11px; height: 11px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--v-encre); border-radius: 0;
  cursor: pointer; transition: background-color .15s;
}
body.v-page .v-pastille[aria-current="true"] { background: var(--v-encre); }
body.v-page .v-pastille:hover { background: var(--v-encre); opacity: .6; }
body.v-page .v-offre { background: var(--v-blanc); padding: 40px 32px 44px; display: flex; flex-direction: column; min-width: 0; }
body.v-page .v-offre.v-mise { background: var(--v-blanc-2); }
body.v-page .v-offre-nom { font-family: var(--v-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--v-or-texte); margin: 0; }
body.v-page .v-offre-prix { font-family: var(--v-display); font-size: 54px; margin: 20px 0 4px; letter-spacing: -.01em; color: var(--v-encre); }
body.v-page .v-offre-prix small { font-family: var(--v-mono); font-size: 12px; letter-spacing: .12em; color: var(--v-gris); margin-left: 6px; }
body.v-page .v-chiffre { font-size: 54px; }
body.v-page .v-offre-sans-prix {
  font-family: var(--v-display); text-transform: uppercase; font-size: 25px;
  /* ⚠️ .99 + padding : le contenu dépassait la boîte (110 px pour 105) et la
     dernière ligne était rognée. Même piège que les titres. */
  line-height: 1.05; margin: 22px 0 16px; color: var(--v-encre); max-width: 16ch;
}
body.v-page .v-offre-cond { font-size: 14.5px; color: var(--v-encre-2); min-height: 60px; margin: 6px 0 0; }
body.v-page .v-liste { list-style: none; margin: 26px 0 34px; padding: 0; flex: 1; }
body.v-page .v-liste li { padding: 11px 0; border-bottom: 1px solid var(--v-ligne); font-size: 14.5px; color: var(--v-encre-2); }
body.v-page .v-offre .v-btn { width: 100%; text-align: center; }
body.v-page .v-tag {
  font-family: var(--v-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--v-or-texte);
  border: 1px solid var(--v-or); padding: 4px 9px; display: inline-block;
  margin-bottom: 20px; text-transform: uppercase; align-self: flex-start;
}

/* ---------------- 6. décision ---------------- */
body.v-page .v-final { text-align: center; padding: 150px var(--v-gouttiere); background: var(--v-blanc-3); }
body.v-page .v-final .v-h2 { margin: 0 auto 26px; max-width: 24ch; }
body.v-page .v-final-p { color: var(--v-encre-2); max-width: 60ch; margin: 0 auto 40px; }
body.v-page .v-final .v-btn { min-width: 280px; }

/* ---------------- adaptation ---------------- */
@media (max-width: 1000px) {
  body.v-page .v-offres { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* 20 -> 18 px : ALIGNE SUR `.container` (padding 0 18px en mobile).
     Bug mesure : l'accueil cadrait a 40 px contre 18 px sur les autres pages.
     Deux causes cumulees : la gouttiere valait 20 au lieu de 18, ET la section
     `.v-hero` portait EN PLUS son propre padding horizontal de 20 px — la
     marge etait donc comptee DEUX FOIS. Regle : le padding horizontal d'une
     section pleine largeur appartient au CONTENEUR interne, pas a la section. */
  :root { --v-gouttiere: 18px; }
  body.v-page .v-hero { padding: 96px 0 40px; }
  body.v-page .v-hero-cta { margin-top: 30px; }
  body.v-page .v-hero-facts { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  body.v-page .v-hero-facts > div { padding: 16px 0 0; }
  body.v-page .v-sec { padding: 76px 20px; }
  body.v-page .v-sec-head { margin-bottom: 40px; }
  body.v-page .v-grille, body.v-page .v-apercu { grid-template-columns: 1fr; }
  body.v-page .v-grille article:nth-child(odd) { border-right: 0; padding-right: 0; }
  body.v-page .v-grille article:nth-child(even) { padding-left: 0; }
  body.v-page .v-final { padding: 80px 20px; }
  body.v-page .v-btn { width: 100%; text-align: center; }
  body.v-page .v-offre .v-btn, body.v-page .v-final .v-btn { min-width: 0; }
}

/* ---------------- LOGO DE L'EN-TÊTE ----------------
   ⚠️⚠️ LES DEUX LOGOS SE CHEVAUCHAIENT (signalé par le user).
   Deux causes mesurées :
     1. `.brand-mark` garde une boîte FIXE de 32 px (règle legacy de luxe.css)
        alors que le nouveau logo est un mot-symbole de 137 px de large -> il
        débordait de 105 px au-dessus du texte.
     2. Le texte « Devisaly » à côté du logo n'était pas masqué : ma règle
        visait `body.vitrine`, mais la page d'accueil porte `body.v-page`.
   Le logo contient DÉJÀ le mot : le texte adjacent est un doublon. On le
   supprime et on laisse la boîte se dimensionner au contenu. */
body.v-page .drawer-wordmark { display: none; }
body.v-page .drawer-mark img { width: auto; height: 26px; }

@media (max-width: 900px) {
}

/* ⚠️⚠️ À PLACER APRÈS la définition de `.v-commandes`.
   Ma première version mettait `display: none` dans un media query situé AVANT
   la définition : à spécificité égale, c'est l'ordre qui tranche, et
   `display: flex` gagnait. Résultat mesuré : des flèches affichées sur grand
   écran alors que les trois offres sont déjà côte à côte — des commandes qui
   ne servent à rien.
   Règle : un `display: none` conditionnel doit venir APRÈS la règle qu'il
   annule, ou porter une spécificité supérieure. */
@media (min-width: 1000px) {
  body.v-page .v-commandes { display: none; }
}


/* ============================================================
   EX-menu.css   (8353 octets, 0 !important)
   ============================================================ */

/* ============================================================
   MENU LATERAL - feuille DEDIEE, chargee EN DERNIER.

   POURQUOI ELLE EXISTE. `accueil-contrat.css` (charge apres luxe.css) pose
   `.drawer { width: 380px }`, `.drawer-list a { padding: 12px 14px }`,
   `.drawer-cta {...}` - MEME specificite que les regles du menu. A specificite
   egale, l'ordre d'arrivee tranche : la refonte du menu etait donc ecrasee et
   le menu restait petit (mesure : 380 px de large au lieu de 460, entrees a
   15,5 px au lieu de 20).

   NE PAS la deplacer avant accueil-contrat.css.
   ============================================================ */

/* ============================================================
   BARRE DU HAUT — MOBILE (corrigé 2026-10-05)
   ⚠️⚠️ BUG MESURÉ : à 390 px, `.nav` faisait 268 px et `.lang-switch` sortait
   à 433 px — 43 px DEHORS de l'écran, sans aucun media query pour l'arrêter.
   Un élément hors écran crée un débordement horizontal : « tout est décalé ».
   Correctifs : la barre ne se comprime plus, la langue passe dans le tiroir,
   les libellés longs s'effacent derrière le menu.
   ============================================================ */
@media (max-width: 900px) {
  .topbar-inner { gap: 10px; }
  .brand-mark { height: 24px; }
  .brand-mark img, .brand-mark svg { height: 24px; width: auto; }
  .nav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 10px; }
  /* ⚠️ Le sélecteur de langue et les liens secondaires disparaissent de la
     barre : ils restent accessibles dans le tiroir (langue) et le pied de
     page. Un élément hors écran est PIRE qu'un élément caché. */
  .nav .lang-switch { display: none; }
  .nav > a:not(.btn):not(.active) { display: none; }
  .nav .user-menu { display: none; }
  /* ⚠️⚠️ LE BOUTON S'APPELLE `.burger`, PAS `.hamburger`.
     Ma regle ciblait `.hamburger` : la classe n'existe nulle part, donc le
     bouton gardait son `display: none` de base — MEME SUR MOBILE. Le menu
     hamburger etait invisible, et donc le menu INACCESSIBLE sur telephone.
     Verifie : `getComputedStyle('.burger').display` valait `none` a 390 px. */
  .burger { display: inline-flex; }
  /* l'action principale reste, en plus compact */
  .nav .btn.primary {
    padding: 10px 13px; font-size: 10.5px; letter-spacing: .06em;
    white-space: nowrap;
  }
}
@media (max-width: 420px) {
  /* sur très petit écran, seule l'action principale reste dans la barre */
  .nav .btn.primary { font-size: 10px; padding: 9px 11px; }
  .brand-mark { height: 22px; }
  .brand-mark img, .brand-mark svg { height: 22px; }
}

/* ============================================================
   MENU LATÉRAL (tiroir) — refonte 2026-10.
   ⚠️ Ne PAS remettre de petites entrées de 14 px : le panneau se tient avec
   de grands caractères et une hiérarchie lisible.
   ⚠️ Le tiroir sert DEUX publics (visiteur / client connecté) : le style doit
   tenir pour 4 entrées comme pour une liste de déconnexion de 10.
   ============================================================ */
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh;
  width: 460px; max-width: 92vw;
  background: var(--card); border-left: 1px solid var(--line);
  z-index: 201; transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; overflow: hidden;
}
body.drawer-open .drawer { transform: translateX(0); }

.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.drawer-mark { display: inline-flex; width: auto; height: 28px; align-items: center; }
.drawer-mark img, .drawer-mark svg { width: auto; height: 100%; display: block; }
.drawer-close { background: transparent; border: 1px solid var(--line); cursor: pointer; color: var(--muted); padding: 8px; display: inline-flex; border-radius: 0; transition: background .15s, color .15s, border-color .15s; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.drawer-close:hover { background: var(--ink); color: var(--card); border-color: var(--ink); }

.drawer-nav { flex: 1; overflow-y: auto; padding: 24px 26px 12px; }
.drawer-nav::-webkit-scrollbar { width: 6px; }
.drawer-nav::-webkit-scrollbar-thumb { background: var(--line); }

/* action principale : pleine largeur, contraste maximal */
.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 18px 26px 0; padding: 17px 20px;
  background: var(--ink); color: var(--card);
  border: 1px solid var(--ink); border-radius: 0;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  transition: background .18s, border-color .18s;
}
.drawer-cta:hover { background: var(--gold-2); border-color: var(--gold-2); }
.drawer-cta.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.drawer-cta.ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* libellés de groupe : monospace espacé, comme les étiquettes du site */
.drawer-groupe {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  margin: 26px 0 4px; padding: 0;
}
.drawer-groupe:first-child { margin-top: 0; }

/* entrées : SOBRES. Demande du user : « juste un menu classique ».
   ⚠️ NE PAS remettre de numérotation (01/02…) ni de flèche animée : c'était le
   traitement « panneau éditorial » de la référence, rejeté ici. Un menu
   classique se lit d'un coup d'œil. */
.drawer-list { display: flex; flex-direction: column; margin: 0 0 4px; padding: 0; }
.drawer-nav > .drawer-list > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px; min-height: 48px;
  text-decoration: none; color: var(--ink);
  font-size: 16px; line-height: 1.25; letter-spacing: 0;
  border-bottom: 1px solid var(--line-soft);
  transition: color .15s;
}
.drawer-nav > .drawer-list > a:hover { color: var(--gold-2); }
.drawer-list a { font-size: 16px; }
.drawer-list a:hover { color: var(--gold-2); }

.drawer-more { border-top: 1px solid var(--line-soft); padding-top: 8px; margin: 26px 0 16px; }
.drawer-more summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 13px 2px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  list-style: none; min-height: 48px;
}
.drawer-more summary::-webkit-details-marker { display: none; }
.drawer-more[open] summary { color: var(--gold-2); }
.drawer-more[open] summary svg { transform: rotate(180deg); }
.drawer-more summary svg { transition: transform .2s; }
.drawer-more .drawer-list { margin: 4px 0 12px; }

.drawer-foot { padding: 16px 26px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.drawer-foot .drawer-cta { margin: 0; }
.drawer-logout { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 13px; text-decoration: none; color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); transition: color .15s, border-color .15s; min-height: 46px; }
.drawer-logout:hover { color: var(--ink); border-color: var(--ink); }

.drawer-user { display: flex; align-items: center; gap: 14px; margin: 18px 26px 0; padding: 14px 16px; border: 1px solid var(--line); }
.drawer-avatar { width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink); color: var(--card); font-family: var(--font-serif); font-weight: 500; font-size: 16px; }
.drawer-user-name { font-family: var(--font-serif); font-weight: 500; font-size: 15px; color: var(--ink); }
.drawer-user-plan { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

@media (max-width: 600px) {
  .drawer { width: 100%; max-width: 100%; }
  .drawer-nav { padding: 20px 20px 10px; }
  .drawer-cta { margin: 16px 20px 0; }
  .drawer-head, .drawer-foot { padding-left: 20px; padding-right: 20px; }
  .drawer-nav > .drawer-list > a { font-size: 16px; min-height: 50px; }
}


/* ============================================================
   EX-theme-binaire.css   (8720 octets, 22 !important)
   ============================================================ */

/* ============================================================
   THÈME BINAIRE — BLANC & NOIR. Fond BLANC, écriture NOIRE.
   Feuille de surcharge, chargée EN DERNIER.

   ⚠️⚠️ ERREUR CORRIGÉE LE 2026-10-05. Le user a demandé « le même thème noir
   et blanc que la maquette ». J'ai lu « fond noir » et livré un site à fond
   NOIR. C'est le contraire : le « thème noir et blanc » désigne la maquette
   `previews/accueil-blanc.html`, qui a un FOND BLANC et une ÉCRITURE NOIRE.
   Le user l'avait pourtant écrit noir sur blanc plus tôt : « je veux une
   prédominance blanche, donc fond blanc avec écriture noir ».
   → Ne jamais déduire une couleur d'un nom de thème. Vérifier la maquette.

   Principe : aucun or, aucune couleur. Deux valeurs seulement, plus des gris.
   Angles droits, aplats, zéro dégradé.

   ⚠️ CONTRASTES MESURÉS sur fond #ffffff :
     noir #0a0a0a         19,8:1   texte courant
     gris foncé #3d3d3d   10,9:1   texte secondaire
     gris #6f6f6f          5,0:1   texte discret
     ligne #e4e2dd         1,2:1   séparateurs (décoratif)
   ============================================================ */

:root {
  /* ---- jetons de base (luxe.css) ---- */
  --paper: #ffffff;        /* fond de page : BLANC */
  --paper-2: #f7f6f3;      /* zones secondaires */
  --card: #ffffff;         /* panneaux / cartes */
  --card-2: #faf9f7;       /* survol */
  --ink: #0a0a0a;          /* texte principal : NOIR */
  --ink-2: #3d3d3d;        /* texte secondaire */
  --muted: #6f6f6f;        /* texte tertiaire */
  --faint: #767672;        /* texte discret — 4,6:1 */

  /* ---- l'or devient du NOIR : plus aucune couleur ---- */
  --gold: #0a0a0a;
  --gold-2: #0a0a0a;
  --gold-3: #0a0a0a;
  --gold-line: rgba(10, 10, 10, .18);
  --gold-bg: rgba(10, 10, 10, .04);
  --gold-soft: #e8e6e2;

  --danger: #b3261e;
  --ok: #1f6b34;

  --line: #e4e2dd;         /* bordures */
  --line-soft: #efedea;

  /* sur fond clair, une ombre se voit : on la garde très légère */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, .05);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, .07);
  --shadow-lg: 0 10px 30px rgba(10, 10, 10, .10);

  /* ---- jetons de la refonte (refonte_blanche.css) ---- */
  --blanc: #ffffff;
  --blanc-2: #f7f6f3;
  --blanc-3: #f1efea;
  --blanc-ligne: #e4e2dd;
  --encre: #0a0a0a;
  --encre-2: #3d3d3d;
  --encre-3: #6f6f6f;
  --or-vif: #0a0a0a;
  --or-texte: #0a0a0a;

  /* ---- jetons de la vitrine (vitrine.css) ---- */
  --v-blanc: #ffffff;
  --v-blanc-2: #f7f6f3;
  --v-blanc-3: #f1efea;
  --v-ligne: #e4e2dd;
  --v-encre: #0a0a0a;
  --v-encre-2: #3d3d3d;
  --v-gris: #6f6f6f;
  --v-or: #0a0a0a;
  --v-or-texte: #0a0a0a;
}

/* ============================================================
   CORRECTIONS PONCTUELLES — ce qui ne passe pas par les jetons.
   ============================================================ */

/* 1. le dégradé or des boutons legacy : supprimé, aplat noir */
body:not(.app-mode) .btn.primary,
.visi-card .btn.primary,
.lead-form-wrap .btn.primary,
.plan.featured .btn.primary,
.hero-contrat .btn.primary,
.champ-encre .btn.primary {
  background-image: none !important;
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  border-color: #0a0a0a !important;
}
body:not(.app-mode) .btn.primary:hover,
.hero-contrat .btn.primary:hover,
.plan.featured .btn.primary:hover {
  background-color: #333333 !important;
  border-color: #333333 !important;
}

/* 2. barre du haut : fond blanc translucide */
.nav,
.topbar {
  background: rgba(255, 255, 255, .92);
  border-color: var(--line);
}
.drawer-scrim { background: rgba(10, 10, 10, .45); }

/* 3. ⚠️ LE LOGO N'EST PAS INVERSÉ. Il est déjà noir : sur fond blanc il se lit
      tel quel. L'inverser (règle du thème sombre) le ferait disparaître. */
.brand-mark img,
.drawer-mark img,
.logo-clair { filter: none; }

/* 4. les maquettes de sites clients restent sur fond blanc : c'est le produit
      vendu, un site d'artisan est clair. Rien à changer ici, mais on le
      documente pour que personne ne les « adapte » au thème par erreur. */

/* 5. champs de formulaire */
input, textarea, select {
  background-color: #ffffff;
  color: #0a0a0a;
  border-color: var(--line);
}
input::placeholder, textarea::placeholder { color: #8a8a8a; }

/* 6. survol de lignes de tableau : très léger sur fond clair */
table tr:hover, .quote-table tr:hover { background-color: rgba(10, 10, 10, .03); }

@media (max-width: 900px) {
  .nav, .topbar { background: rgba(255, 255, 255, .96); }
}

/* ⚠️⚠️ UNE SEULE TAILLE DE TITRE h1 (corrigé 2026-10-05).
   Mesuré : 109,44 px sur l'accueil, 106,56 sur les pages refaites, 56 px sur
   certaines pages d'outil. Trois règles concurrentes posaient chacune sa
   valeur. Un même niveau de titre doit avoir UNE valeur sur tout le site.
   On la fixe ici, en dernier, pour tout le monde. */
h1, body.v-page .v-h1, .page-head h1, .visi-hero h1 {
  font-size: clamp(38px, 6.6vw, 100px) !important;
}
@media (max-width: 900px) {
  h1, body.v-page .v-h1, .page-head h1, .visi-hero h1 { font-size: 38px !important; }
}
/* ⚠️⚠️ EXEMPTIONS. `!important` ne bat pas seulement les autres feuilles : il
   bat AUSSI les styles inline, donc les endroits ou un developpeur a dit
   « ce titre-la est different ». Mesure : le h1 de la page 404 portait
   `style="font-size:22px"` et passait a 95 px dans une carte de 358 px —
   scrollWidth 424 pour clientWidth 358, le dernier mot coupe.
   Toute page qui a un titre volontairement petit doit etre listee ici. */
/* ⚠️⚠️ CIBLAGE PRÉCIS. La première version listait `.card h1` : le titre
   PRINCIPAL des pages légales (CGV, mentions, confidentialité) vit dans une
   `.card legal-card` — il tombait donc à 22 px, illisible comme titre de page.
   On vise le TITRE DE LA PAGE D'ERREUR, pas « tout h1 dans une carte ». */
.titre-erreur,
.auth-card > h1 {
  font-size: 22px !important;
}
/* le titre principal des pages légales garde une taille de titre de page */
.legal-card > h1 {
  font-size: clamp(30px, 3.4vw, 44px) !important;
}
@media (max-width: 900px) {
  .legal-card > h1 { font-size: 28px !important; }
}
/* ⚠️⚠️ NE JAMAIS cibler une balise large avec `!important` sans vérifier ce
   qu'elle contient. Ce bloc `h1 { font-size: … !important }` a aussi touché
   `.v-chiffre` — un `<span>` DANS un paragraphe — parce qu'un premier jet
   écrivait `h1, .v-chiffre`. Le prix est passé à 95 px de police : 184 px de
   haut, soit tout l'écran d'un téléphone.
   Un titre et un prix n'ont pas la même échelle : on ne les met JAMAIS dans
   la même règle. */
.v-chiffre, .v-offre-prix, .price, .q-price, .amount, .sl-price {
  font-size: inherit;
}

/* 7. ⚠️⚠️ COULEURS RÉSIDUELLES TROUVÉES PAR MESURE (pas à l'œil).
   Le contrôle du DOM a relevé deux choses qui juraient avec un thème
   noir et blanc :

   a) des LIENS en BLEU PAR DÉFAUT DU NAVIGATEUR — `rgb(0, 0, 238)`.
      Un lien sans `color` explicite hérite du bleu du navigateur. C'est
      visible sur la marque du tiroir et sur des liens du tunnel. Un thème
      binaire doit poser la couleur des liens explicitement, sinon le bleu
      par défaut réapparaît à chaque nouvel élément.
   b) des BORDURES OR ÉCRITES EN DUR — `rgba(176, 138, 62, …)` sur les cartes
      « plan featured » et « dual-plan ». Elles ne passent pas par les jetons,
      donc elles ont survécu à la bascule. Règle : une couleur en dur est un
      défaut à corriger, pas à contourner.
*/
a, a:visited, a:active, a:hover { color: inherit; }
.drawer-brand, .drawer-brand span, .drawer-brand img,
.brand, .brand a, .brand span { color: var(--ink); }

.plan.featured,
.dual-plan,
.visi-card,
.ub-bloc,
.prix-bloc,
.hero-mock .mock-window { border-color: var(--line) !important; }

/* les traits décoratifs qui étaient or deviennent gris.
   ⚠️⚠️ `.measure` EST EXCLU : c'est une ligne de COTATION (un trait fin), pas
   un aplat. Ma première version lui imposait un fond noir — et comme il porte
   aussi du texte, celui-ci devenait NOIR SUR NOIR, invisible. Mesuré sur
   /comment-ca-marche (« MOINS D'UNE MINUTE ») et /logiciel-devis.
   Règle : ne jamais donner un fond plein à un élément qui porte du texte. */
.releve::before,
.hero-3d,
.kicker::before,
.v-kicker::before { background-color: var(--ink) !important; }
.measure {
  background: none !important;              /* un trait, pas un aplat */
  border-color: var(--ink) !important;
  color: var(--faint) !important;           /* le libellé reste lisible */
}

/* le badge et les pastilles : plus d'aplat or */
.hero-badge, .visi-badge, .tag, .v-tag, .promo-temp, .trust-bar,
.ub-badge, .dual-tag, .lo-badge {
  background-color: transparent !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}


/* ============================================================
   EX-carrousel-mobile.css   (3268 octets, 7 !important)
   ============================================================ */

/* ============================================================
   CARROUSEL MOBILE — corrections mesurées le 2026-10-05.

   Trois défauts réels relevés en mesurant, pas en regardant :

   1. ⚠️⚠️ LE PRIX FAISAIT 184 px DE HAUT. Mon unification des titres
      (`h1 { font-size: clamp(38px, 6.6vw, 100px) !important }`) a touché
      `.v-chiffre`, qui est un `<span>` DANS un paragraphe — il a hérité du
      `!important` destiné aux titres. Un prix de 95 px de police, c'est un
      prix qui prend tout l'écran. Un `!important` sur une balise large
      déborde toujours sur ce qu'on n'avait pas prévu : on cible donc
      désormais `h1` SEUL, jamais `*.v-chiffre`.
      Le prix retrouve sa taille de carte : 46 px.

   2. ⚠️ LA CARTE FAISAIT 823 px POUR UN ÉCRAN DE 844. Le bouton « Souscrire »
      tombait tout en bas, hors de vue à l'arrivée, et les commandes du
      carrousel (pastilles, flèches) étaient 4 600 px plus bas : rien ne
      signalait qu'il y avait trois offres. Corrigé : liste plus dense, prix
      ramené à sa taille, et les commandes remontées SOUS la carte visible.

   3. ⚠️ AUCUN INDICE QU'IL Y A D'AUTRES OFFRES. Sur mobile, une diapo
      pleine largeur ne laisse rien deviner. On laisse désormais DÉPASSER un
      bord de la diapo suivante (88 % de largeur) : le visiteur voit qu'il y a
      une suite, et le geste devient évident. C'est le motif que le user a
      lui-même évoqué.
   ============================================================ */

/* 1. le prix : taille de carte, jamais taille de titre.
   ⚠️ On corrige AUSSI la règle h1 de theme-binaire.css pour qu'elle ne
   touche plus `.v-chiffre` : un `!important` mal ciblé se paie ailleurs. */
body.v-page .v-offre-prix,
body.v-page .v-chiffre {
  font-size: 42px !important;
  line-height: 1.05 !important;
  /* ⚠️ le prix et son "/mois" doivent tenir sur UNE ligne : à 46 px sur un
     ecran de 390, "129,90 EUR" passait a la ligne et le bloc faisait 96 px
     de haut. `white-space: nowrap` + une taille qui tient dans la largeur. */
  white-space: nowrap;
}
body.v-page .v-offre-prix small { font-size: 11px !important; margin-left: 5px; }

/* 2. la carte mobile : plus dense, le bouton reste visible */
@media (max-width: 999px) {
  body.v-page .v-piste > [data-diapo] {
    /* 3. la diapo suivante dépasse : un indice visuel, pas un ornement */
    flex: 0 0 88%;
  }
  body.v-page .v-offre { padding: 28px 22px 30px; }
  body.v-page .v-offre-cond { min-height: 0; margin: 10px 0 0; font-size: 14px; }
  body.v-page .v-liste { margin: 18px 0 24px; }
  body.v-page .v-liste li { padding: 9px 0; font-size: 14px; }
  body.v-page .v-offre-prix { margin: 14px 0 2px; }
  body.v-page .v-tag { margin-bottom: 14px; }
  /* les commandes remontent : elles doivent être vues en même temps que la
     carte, sinon le carrousel est invisible */
  body.v-page .v-commandes { margin-top: 18px; }
}

/* la piste prend la gouttière du site, pour que la première carte soit
   alignée comme le reste du contenu */
body.v-page .v-carrousel { margin: 0 calc(var(--v-gouttiere) * -1); }
body.v-page .v-carrousel .v-commandes { margin-left: var(--v-gouttiere); margin-right: var(--v-gouttiere); }
@media (min-width: 1000px) {
  body.v-page .v-carrousel { margin: 0; }
}


/* ============================================================
   EX-respiration.css   (3652 octets, 22 !important)
   ============================================================ */

/* ============================================================
   RESPIRATION — corrections mesurées (2026-10-05).

   Le seul grief de l'audit visuel qui N'ÉTAIT PAS une hallucination portait
   sur /pricing (4/10, la plus mauvaise note) et sur la densité du pied de page.
   Vérifié en pixels avant d'agir :

     /pricing
       • titre h1 : 95 px de police pour 201 px de haut sur une page DENSE
         (4 172 px, 5 sections) — c'est un effet de bord de l'unification des
         titres : la taille convenait à l'accueil (6 sections aérées) mais
         écrase une page de tarifs.
       • sections : padding vertical de 64 px seulement, alors que les autres
         pages sont à 118 px (accueil) — les blocs se touchent.
       • cartes d'offres : 950 px de haut, padding 36 px — très serré.

     pied de page
       • 22 liens, padding de 2 px par lien, police 12,5 px, écart de grille
         24 px : les colonnes sont collées.
       • padding du footer 28 px en haut — étroit pour 4 colonnes de contenu.

   ⚠️ On N'AUGMENTE PAS les valeurs au hasard : on aligne /pricing sur la
   respiration mesurée des autres pages, et on aère le pied de page d'un cran.
   ============================================================ */

/* ---------- /pricing : respiration alignée sur le reste du site ---------- */
/* le h1 des pages denses : la taille de l'accueil écrase une page de tarifs.
   ⚠️ On ne touche PAS au h1 de l'accueil (il est validé) : on cible la classe
   de la page de tarifs via son conteneur. */
.page-head h1 {
  font-size: clamp(34px, 4.8vw, 62px) !important;
}
@media (max-width: 900px) {
  .page-head h1 { font-size: 32px !important; }
}

/* les sections de /pricing passent de 64 a 96 px de respiration verticale */
.section {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
@media (max-width: 900px) {
  .section { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* les cartes d'offres : plus d'air a l'interieur, et un ecart entre elles */
.plan, .plan.featured {
  padding: 44px 38px !important;
}
.plans { gap: 20px !important; }
@media (max-width: 900px) {
  .plan, .plan.featured { padding: 32px 24px !important; }
  .plans { gap: 14px !important; }
}

/* ---------- pied de page : moins dense ---------- */
.footer { padding: 48px 0 26px !important; }
.footer-grid { gap: 48px 40px !important; }
.footer a { padding: 7px 0 !important; }
.footer h4 { margin-bottom: 18px !important; }
.footer .bottom { margin-top: 40px !important; padding-top: 24px !important; }
@media (max-width: 900px) {
  .footer { padding: 36px 0 22px !important; }
  .footer-grid { gap: 32px 24px !important; }
  .footer a { padding: 8px 0 !important; }
}

/* ---------- blocs à padding NUL (mesuré) ----------
   ⚠️⚠️ DÉFAUT RÉEL trouvé par l'audit visuel, VÉRIFIÉ en pixels avant
   correction : `.visi-block` et `.votre-site` avaient `padding: 0px` avec une
   bordure de 1 px. Leur contenu TOUCHAIT donc la bordure — c'est le grief
   « le texte frôle les bords » du modèle, et cette fois il avait raison.
   ⚠️ Le padding appartient au bloc, pas à une div interne : sinon il ne reste
   aucune respiration entre le contenu et la bordure. */
.visi-block,
.votre-site,
.dual-plan,
.cond-bloc,
.ub-bloc {
  padding: 40px 38px !important;
}
/* si le bloc contient deja des colonnes, on garde le padding mais on reduit
   l'ecart interne pour ne pas doubler la respiration */
.visi-block .visi-copy,
.votre-site > div,
.dual-plan > div { padding: 0 !important; }

@media (max-width: 900px) {
  .visi-block, .votre-site, .dual-plan, .cond-bloc, .ub-bloc {
    padding: 26px 20px !important;
  }
}


/* ============================================================
   EX-langage-visuel.css   (3131 octets, 10 !important)
   ============================================================ */

/* ============================================================
   UN SEUL LANGAGE VISUEL — corrections mesurées (2026-10-05).

   Le user a dit « je déteste le site ». Mes contrôles ne l'avaient pas vu
   parce qu'ils validaient chaque page ISOLÉMENT. La mesure d'ensemble dit
   autre chose :

     page            design        rayons              ombres
     /               v- (neuf)     aucun                  0
     /pricing        luxe (anc.)   10px(3), 16px(1)       4
     /services/...   luxe (anc.)   10px(15), 40px(1)     16
     /comment...     luxe (anc.)   10px(7)                8
     /logiciel...    luxe (anc.)   10px(12)               9
     /prix/plombier  luxe (anc.)   10px(324), 6px(3)      4
     /app            luxe (anc.)   6px(15), 10px(6)       5

   ⚠️ UNE SEULE page sur douze suivait le nouveau langage. Le site change
   d'identité à chaque clic — c'est ce qu'un humain ressent comme « mal fait »
   sans pouvoir le nommer.

   ⚠️⚠️ CORRECTION À LA SOURCE, PAS PAGE PAR PAGE. Le langage visuel du site
   refait tient en trois règles :
       • angles DROITS (rayon 0) ;
       • AUCUNE ombre (les aplats et les filets séparent) ;
       • AUCUN dégradé (aplats).
   On les applique globalement. C'est le seul moyen qu'une page ajoutée plus
   tard hérite du bon langage au lieu de ramener les arrondis.

   ⚠️ EXCEPTIONS VOLONTAIRES (ne pas « corriger ») :
       • le LOGO : le carré or a ses propres angles ;
       • `.mock-window` : la maquette d'un site client montre le PRODUIT vendu,
         qui a son propre style ;
       • les pastilles rondes et les avatars, où le rond est sémantique.
   ============================================================ */

/* ---------- 1. ANGLES DROITS PARTOUT ---------- */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* les exceptions : ce qui doit rester rond */
.brand-mark,
.brand-mark img,
.brand-mark svg,
.drawer-mark img,
.mock-window,
.mock-window *,
.avatar,
.user-avatar,
.drawer-avatar,
.t-step,
.v-point,
.mock-dot,
.dot,
.check {
  border-radius: initial !important;
}
/* le logo garde ses angles propres */
.brand-mark img, .brand-mark svg, .drawer-mark img { border-radius: 0 !important; }
/* la pastille du carrousel : carree dans le design, on l'assume */
.v-pastille { border-radius: 0 !important; }

/* ---------- 2. AUCUNE OMBRE ---------- */
*,
*::before,
*::after {
  box-shadow: none !important;
}
/* la seule ombre tolérée : détacher la fenêtre de maquette du fond */
.mock-window {
  box-shadow: 0 24px 60px rgba(10, 10, 10, .10) !important;
}
/* la barre collée a besoin d'un fond opaque, pas d'une ombre */
.topbar, .nav { box-shadow: none !important; }

/* ---------- 3. AUCUN DÉGRADÉ (aplats seulement) ---------- */
.btn.primary,
.btn.big,
button.primary,
.drawer-cta,
[class*="gradient"] {
  background-image: none !important;
}

/* ---------- 4. LES BORDURES : un filet fin, jamais épais ---------- */
.card, .plan, .panel, .legal-card, .auth-card, .visi-card,
.dual-plan, .votre-site, .v-offre, .visi-block, .prix-bloc, .cond-bloc {
  border-width: 1px !important;
  border-style: solid !important;
}


/* ============================================================
   EX-echelle-unique.css   (4701 octets, 36 !important)
   ============================================================ */

/* ============================================================
   ÉCHELLE UNIQUE — le site n'a plus qu'UNE hiérarchie de titres.

   ⚠️⚠️ LE VRAI DÉFAUT, MESURÉ (2026-10-05). Le user a dit « je déteste le
   site ». Mes contrôles validaient chaque page ISOLÉMENT : ils ne pouvaient
   pas voir ceci. Mesure d'ensemble :

     page         h2 principal   h3 de contenu   mots/écran
     accueil      60 px          25 px           109
     pricing      58 px          —               111
     visibilite   58 px          —               122
     metier       58 px          20-27 px        119
     comment      58 px          27 px           110
     logiciel     58 px          27 px           103
     apropos      58 px          27 px           108
     cgv          58 px          —               204   <<< 2x plus dense
     contact      — (1 seul titre)                95

   Trois échelles de titres, deux rythmes de page. En naviguant, la hiérarchie
   change : c'est ce qu'un humain ressent comme « pas fini ».

   ⚠️ ON POSE UNE ÉCHELLE, PAS DES TAILLES AU CAS PAR CAS. Une échelle est un
   rapport constant : si on ajuste une valeur pour une page, toutes les autres
   doivent suivre. On la fixe ici, une fois.

   Échelle retenue (rapport ~1,6 entre les niveaux) :
     h1  page      56 px   (titre de page)
     h2  section   40 px
     h3  bloc      25 px    (plafond, jamais au-dessus)
   ⚠️ L'ACCUEIL GARDE SON h1 GÉANT (95 px) : c'est une page de vente dont le
   titre EST le message. On exempte explicitement `.v-h1`.
   ============================================================ */

/* ---------- l'échelle ---------- */
h1, .page-head h1, .visi-hero h1, .legal-card > h1 {
  font-size: 56px !important;
  line-height: 1.02 !important;
  letter-spacing: -.01em !important;
}
h2, .section-head h2, .visi-guide-title, .v-h2 {
  font-size: 40px !important;
  line-height: 1.05 !important;
}
h3, .v-h3, .card h3, .presta-item h3, .pain-item h3 {
  font-size: 25px !important;
  line-height: 1.12 !important;
}

/* ---------- les exemptions, volontaires et nommées ---------- */
/* l'accueil : son titre géant EST le message de vente */
.v-h1,
.v-sec-head .v-h2,
.v-final .v-h2,
.v-vaste {
  font-size: unset !important;
}
.v-h1 { font-size: clamp(40px, 6.6vw, 100px) !important; }
.v-sec-head .v-h2, .v-final .v-h2 { font-size: clamp(30px, 4.2vw, 58px) !important; }
.v-h1 .v-barre, .v-h1 .v-or { font-size: inherit !important; }
/* la 404 : titre secondaire, volontairement petit */
.titre-erreur, .auth-card > h1 { font-size: 22px !important; }

@media (max-width: 900px) {
  h1, .page-head h1, .visi-hero h1, .legal-card > h1 { font-size: 32px !important; }
  h2, .section-head h2, .v-h2 { font-size: 26px !important; }
  h3, .v-h3 { font-size: 20px !important; }
  .v-h1 { font-size: 38px !important; }
  .v-sec-head .v-h2, .v-final .v-h2 { font-size: 26px !important; }
  .titre-erreur, .auth-card > h1 { font-size: 20px !important; }
}

/* ---------- RYTHME DE SECTION UNIQUE ---------- */
/* mesuré : /cgv et /contact n'ont pas le même rythme que les autres.
   On impose un seul pas vertical a toutes les sections de contenu. */
.section,
.section.alt,
.v-sec,
.page-head {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}
/* le pied de page et les blocs serrés gardent leur rythme propre */
.footer, .cta-final, .v-final { padding-top: unset !important; padding-bottom: unset !important; }
.v-final { padding-top: 120px !important; padding-bottom: 120px !important; }
@media (max-width: 900px) {
  .section, .section.alt, .v-sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .v-final { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* ---------- LA PAGE CGV : trop dense ---------- */
/* mesure : 204 mots par ecran, contre ~110 partout ailleurs. Une page legale
   se lit, elle ne se survole pas : on aere le texte.
   ⚠️⚠️ PADDING HORIZONTAL RETIRE (corrige 2026-10-05). Le `52px` de gauche
   décalait TOUT le texte de la page CGV de 52 px par rapport à l'axe du site
   (texte à 241 px au lieu de 188) — c'est le « décalage dans les ecritures »
   signalé par l'utilisateur. On garde l'aeration VERTICALE (le but d'origine),
   on remet l'horizontale à zero : le texte tombe sur l'axe, comme partout. */
.legal-card { padding: 56px 0 !important; }
.legal-card p { margin-bottom: 18px !important; line-height: 1.75 !important; max-width: 78ch; }
.legal-card h2 { margin-top: 44px !important; margin-bottom: 14px !important; }
@media (max-width: 900px) {
  .legal-card { padding: 28px 0 !important; }
  .legal-card p { margin-bottom: 14px !important; }
  .legal-card h2 { margin-top: 32px !important; }
}