/* ============================================================
   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: 600;
  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: 600;
  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: 600; 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: 600; }
#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: 600; 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: 700; 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: 600; 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: 600; 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: 600;
}
.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: 600; }

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