/* ==========================================================================
   MARLON GRECO — menuisier à Montpellier
   Direction C « Le relevé » (DESIGN.md §12). Tokens : DESIGN.md §2 et §3.
   Motif signature : le CADRE chêne 3 px — ouvert, décalé, débordant (§6).
   ========================================================================== */

:root{
  /* --- palette : blanc + chêne, seule instruction couleur du client --- */
  --blanc:#FFFFFF;
  --gris-page:#F3F3F1;          /* gris NEUTRE — ⛔ jamais un crème/lin/bone */
  --chene:#B87B3D;              /* accent : filets, cadres, survols (3,54:1 → ≥24px ou filets) */
  --chene-fonce:#8F5E28;        /* CTA, liens, eyebrows (5,53:1 sur blanc ✅ AA) */
  --chene-voile:#EFE0CB;
  --encre:#1C1A17;              /* 16,8:1 ✅ */
  --encre-douce:#5C564E;        /* 7,1:1 ✅ — ⛔ fond CLAIR uniquement */
  --bois-nuit:#2A231C;          /* sections d'impact seulement */
  /* Le chêne plein ne tient pas sur le bois-nuit : 3,98:1 mesuré, sous l'AA texte
     normal. Version éclaircie réservée aux intitulés du pied de page (6,2:1). */
  --chene-sur-nuit:#D79A52;
  --trait:#DFDCD5;

  --titre:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --texte:'Work Sans',system-ui,-apple-system,sans-serif;
  /* Plancher abaissé à 30 px : à 390 px de large, un H1 de 38 px prenait 6 à 7 lignes
     et le bloc de texte occupait 78 % de la hauteur du hero — le voile devant rester
     à .58 sous le texte, la photo n'existait plus (luminance 120 sur le fichier,
     39 à 52 dans le rendu). Reste sous le plafond doctrine clamp(40px,6vw,96px)
     à toutes les largeurs : 30 < 40 à 390 px, 41,5 < 46 à 768 px, 76 < 96 au-delà. */
  --fs-display:clamp(30px,5.4vw,76px);

  --page:clamp(20px,5vw,72px);
  --max:1320px;
  --ease:cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:var(--texte);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--titre);margin:0;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--chene-fonce);outline-offset:3px}

.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:12px 18px;z-index:200}
.saut:focus{left:8px;top:8px}

.zone{max-width:var(--max);margin-inline:auto;padding-inline:var(--page)}
.section{padding-block:clamp(48px,6.5vw,96px)}
.section--gris{background:var(--gris-page)}

/* --- MOTIF : le filet chêne sous les titres de section --- */
.rule{width:72px;height:3px;background:var(--chene);margin-bottom:16px}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--chene-fonce);text-transform:uppercase;margin:0 0 12px}
.tete{max-width:64ch;margin-bottom:clamp(26px,3.4vw,40px)}
.tete h2{font-size:clamp(26px,3.2vw,42px)}
.tete p{margin-top:12px;color:var(--encre-douce);font-size:clamp(16px,1.4vw,18.5px)}
.lead{font-size:clamp(16.5px,1.5vw,19px);color:var(--encre-douce);max-width:58ch}

/* ==========================================================================
   HEADER — composition propre au projet (DESIGN.md §7)
   wordmark gauche · nav à DROITE · téléphone dans un cadre chêne
   ⛔ aucun bouton plein : le CTA vit dans le hero et la bande d'impact
   ========================================================================== */
.hd{
  display:flex;align-items:center;gap:clamp(16px,4vw,54px);
  max-width:var(--max);margin-inline:auto;padding:18px var(--page);
}
/* Sans logo, le wordmark EST l'identité : à 20 px il pesait moins que le cadre du
   téléphone dans la hiérarchie du header. Bloc de marque à 37 px de haut en desktop
   (26 px + filet chêne), 32 px en mobile. La doctrine `logo-client` vise 48–64 px
   pour un logo dessiné ; à réévaluer quand le logo sera généré (LOGO.md). */
.hd .mark{font-family:var(--titre);font-weight:700;font-size:26px;letter-spacing:-.03em;line-height:1.05;flex:none;text-decoration:none}
.hd .mark i{display:block;height:3px;width:52px;background:var(--chene);margin-top:6px;font-style:normal}
.hd nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.hd nav a{
  text-decoration:none;font-size:15.5px;font-weight:500;white-space:nowrap;padding:6px 0;
  border-bottom:2px solid transparent;transition:border-color .18s var(--ease),color .18s var(--ease);
}
.hd nav a:hover{border-bottom-color:var(--chene);color:var(--chene-fonce)}
.hd nav a[aria-current="page"]{border-bottom-color:var(--chene)}
.hd .tel{
  border:3px solid var(--chene);padding:9px 16px;
  font-family:var(--titre);font-weight:600;font-size:15.5px;
  transition:background-color .18s var(--ease);
}
.hd .tel:hover{background:var(--chene-voile);border-bottom-color:var(--chene)}

/* header posé sur la photo du hero d'accueil */
.hd--photo{position:absolute;inset:0 0 auto 0;z-index:6;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hd--photo nav a:hover{color:#fff}
.hd--photo .tel:hover{background:rgba(184,123,61,.28)}

.burger{display:none;width:44px;height:44px;place-items:center;background:none;border:0;cursor:pointer;color:inherit;padding:0}
.burger i{display:block;width:22px;height:2px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}

/* --- header mobile : tiroir en FLUX NORMAL sous le header ---
   ⛔ jamais un overlay `position:fixed` : au-dessus d'un header sticky il s'enferme
   et devient impossible à refermer, et le harnais DOM ne le voit pas (il ne teste
   que l'ouverture). Replié, wordmark + téléphone encadré + burger ne tiennent pas
   sur une ligne à 320 px : le téléphone passe dans le tiroir. */
@media(max-width:900px){
  .hd{gap:14px;flex-wrap:wrap;padding-inline:16px}
  .hd .mark{font-size:21px}
  .hd .mark i{width:44px}
  .hd .burger{display:grid;margin-left:auto}
  .hd nav{
    display:none;order:3;width:100%;margin:14px 0 0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:4px 0 12px;border-top:3px solid var(--chene);
  }
  .hd[data-ouvert="1"] nav{display:flex}
  .hd nav a{padding:14px 4px;border-bottom:1px solid var(--trait);font-size:17px}
  .hd nav .tel{border:3px solid var(--chene);text-align:center;margin:16px 0 0;padding:13px 16px}
  /* Tiroir OPAQUE : à .94 le H1 du hero (blanc, 38 px, avec ombre portée) transparaissait
     entre les liens du menu — « Accueil » et « À propos » se lisaient par-dessus
     « Marlon Greco, menuisier ». Vérifié au navigateur, ce n'était pas un état d'animation :
     le fond du header ne porte aucune transition. */
  .hd--photo[data-ouvert="1"]{background:#14110D;text-shadow:none}
  .hd--photo nav a{border-bottom-color:rgba(255,255,255,.2)}
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn{
  display:inline-block;text-decoration:none;font-family:var(--titre);font-weight:600;
  font-size:16px;padding:14px 26px;border:0;cursor:pointer;
  transition:background-color .18s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:scale(.96)}
.btn--plein{background:var(--chene-fonce);color:#fff}
.btn--plein:hover{background:#7A4E1D}
.btn--fil{border:3px solid var(--chene);color:var(--encre);background:transparent}
.btn--fil:hover{background:var(--chene-voile)}
.btn--clair{border:3px solid #fff;color:#fff;background:transparent}
.btn--clair:hover{background:rgba(255,255,255,.16)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}

/* ==========================================================================
   HERO D'ACCUEIL — direction C « Le relevé »
   photo plein cadre · texte bas-gauche sur voile · cadre chêne débordant
   ========================================================================== */
.hero{position:relative;min-height:clamp(600px,92vh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--bois-nuit)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* Voile ≥ .55 PARTOUT où il y a du texte (DESIGN.md §12).
   Corrigé après l'audit de Phase 1bis : le dégradé retombait à .12 à mi-hauteur
   alors que le bloc de texte occupe TOUTE la scène (863 px mesurés à 390 px de
   large) — l'eyebrow et le lead se retrouvaient sur de la pierre en plein soleil,
   autour de 2:1 de contraste. Il ne descend plus sous .58 sur la zone de texte,
   et ne s'éclaircit qu'en haut, sur la bande du header. */
.hero .voile{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(20,17,13,.90) 0%, rgba(20,17,13,.80) 40%,
    rgba(20,17,13,.66) 78%, rgba(20,17,13,.58) 93%, rgba(20,17,13,.40) 100%);
}
.hero .cadre{
  position:absolute;right:-46px;top:clamp(70px,12vh,140px);
  width:min(46vw,520px);height:min(42vh,360px);
  border:3px solid var(--chene);border-right:0;pointer-events:none;
}
/* Réserve haute obligatoire : le bloc de texte est plus haut que la scène, il
   remonte donc SOUS le header en position absolue. Sans elle, le wordmark et la
   nav s'impriment par-dessus l'eyebrow et la 1re ligne du H1 — recouvrement de
   76 à 86 px mesuré à 1440, 1280 et 390 px lors de l'audit de Phase 1bis. */
.hero .txt{
  position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;
  padding:clamp(104px,13vh,140px) var(--page) clamp(42px,6vw,78px);
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);
}
/* ⛔ sur photo, l'eyebrow ne peut pas être en chêne plein : 2,1:1 mesuré sur la
   pierre ensoleillée. Chêne CLAIR, l'accent restant porté par le filet du socle. */
.hero .eyebrow{color:var(--chene-voile)}
.hero h1{font-size:var(--fs-display);max-width:17ch;color:#fff}
.hero .lead{color:#F1EBE2;max-width:54ch;margin-top:18px}
.hero .socle{
  margin-top:28px;padding-top:18px;border-top:3px solid var(--chene);
  display:flex;gap:clamp(20px,4vw,52px);flex-wrap:wrap;
}
.hero .socle b{display:block;font-family:var(--titre);font-weight:600;font-size:16.5px}
.hero .socle span{font-size:14.5px;color:#E4DCD0}
@media(max-width:820px){.hero .cadre{display:none}.hero{min-height:auto;padding-top:132px}}

/* --- H7 : rendre la photo au mobile -------------------------------------
   Constat des deux audits : à 390 px le bloc de texte occupait 78 % de la hauteur
   du hero, et comme le voile doit rester à .58 partout où il y a du texte, il ne
   restait de la photo qu'une réserve haute assombrie (mas et volets bleus illisibles).
   La perf mesurait le même défaut par l'autre bout : sur une scène de 1107 px de haut,
   `cover` sur un fichier 16:9 n'affichait plus qu'une bande de 19,8 % de la largeur.

   On ne touche ni au voile (contraste) ni à la composition (direction validée) :
   on réduit ce qui prend la place, c'est-à-dire le TEXTE.
   1. le H1 descend à 30 px (variable --fs-display), soit 3 lignes au lieu de 7 ;
   2. la 2e phrase du lead, qui reprend l'angle déjà porté par le H1, est masquée ;
   3. le socle passe en deux colonnes serrées au lieu de trois blocs empilés ;
   4. le hero VISE 86 vh, donc la photo garde structurellement sa part.

   ⛔ Point 4 : c'est un PLANCHER (`min-height`), jamais un plafond. Avec
   `max-height` le bloc de texte, plus haut que le hero plafonné, débordait par le
   HAUT (`align-items:flex-end`) et se faisait trancher par `overflow:hidden` :
   42 px rognés à 375/390 px (invisible), mais 126 px à 320 px, où l'eyebrow était
   coupé en deux et chevauchait le wordmark. Le sweep DOM ne le voit pas : rien ne
   déborde en largeur, le texte est simplement rogné en hauteur. Avec `min-height`,
   le hero s'allonge quand le texte l'exige et ne rogne plus rien. */
@media(max-width:700px){
  /* La réserve haute est portée par UNE seule règle : le padding de `.txt`.
     Le `padding-top:132px` posé sur `.hero` à 820 px s'y ajoutait (248 px de vide
     cumulé) sans que ça se voie tant que `max-height` faisait déborder le bloc :
     une fois le hero libre de grandir, ces 132 px repoussaient le socle hors de
     l'écran. On les retire ici et on règle la réserve en un seul endroit. */
  .hero{min-height:86vh;max-height:none;padding-top:0}
  .hero .txt{padding-top:clamp(118px,17vh,148px);padding-bottom:30px}
  .hero h1{max-width:none;line-height:1.1}
  .hero .lead{margin-top:12px;font-size:16px}
  .hero .lead .suite{display:none}
  .hero .cta-row{margin-top:20px;gap:10px}
  .hero .cta-row .btn{padding:12px 18px;font-size:15px}
  .hero .socle{
    margin-top:20px;padding-top:14px;
    display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;
  }
  .hero .socle div:last-child{grid-column:1 / -1}
  .hero .socle b{font-size:15px}
  .hero .socle span{font-size:13px}
}

/* ==========================================================================
   HERO DE PAGE SERVICE — split asymétrique 58/42
   ⚠️ Ce n'est pas l'interdit §5 (split 50/50 + photo en carte arrondie +
   pastille flottante) : bords vifs, aucun badge, cadre chêne ouvert en décalage.
   ========================================================================== */
.hs{display:grid;grid-template-columns:58fr 42fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(36px,5vw,72px)}
.hs h1{font-size:clamp(32px,4.2vw,58px)}
.hs .lead{margin-top:18px}
.hs figure{position:relative;margin:0}
.hs figure img{width:100%;height:auto;outline:1px solid rgba(28,26,23,.08)}
/* le cadre décalé : le motif du site, décliné en tête de page service.
   ⚠️ Seuls les côtés qui SORTENT de la photo se voient : les autres passent derrière
   (z-index:-1). Avec un filet fermé en bas et à gauche, on ne lisait qu'un trait
   au-dessus de l'image plus un moignon de 16 px flottant en bas à droite — pas un
   cadre. On ne dessine donc que le haut et la droite, les deux côtés en débord. */
.hs figure::before{
  content:"";position:absolute;inset:-16px -16px 30px 30px;
  border:3px solid var(--chene);border-left:0;border-bottom:0;z-index:-1;
}
@media(max-width:880px){
  .hs{grid-template-columns:1fr;gap:26px}
  .hs figure::before{inset:-12px -12px 24px 24px}
}

/* --- hero compact (à propos, contact, mentions) --- */
.hc{padding-block:clamp(36px,5vw,64px) clamp(24px,3vw,36px)}
.hc h1{font-size:clamp(32px,4.4vw,60px);max-width:20ch}
.hc .lead{margin-top:16px}

/* ==========================================================================
   INDEX DE PRESTATIONS — rangées pleine largeur (section cassée de l'accueil)
   Remplace la grille de 4 cartes services : elle tient 6 prestations sans
   mur de cartes, et aucun site menuiserie du corpus ne l'a employée.
   ========================================================================== */
/* Vignette à ~18 % de la largeur : à 11 % (168 px fixes) elle se perdait dans le
   blanc laissé par le paragraphe et les rangées paraissaient trouées.
   Elle reste CARRÉE : les meilleures photos de portes du corpus sont en portrait,
   et un conteneur 4:3 sur un fichier 1:1 recadrerait une seconde fois le battant. */
.row{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(168px,17vw,240px);gap:clamp(18px,3vw,44px);
  align-items:center;padding:22px 0;border-top:1px solid var(--trait);
  text-decoration:none;transition:background-color .18s var(--ease);
}
.row:first-of-type{border-top:3px solid var(--chene)}
.row:last-of-type{border-bottom:1px solid var(--trait)}
.row:hover{background:var(--chene-voile)}
.row h3{font-size:clamp(20px,2.2vw,28px)}
.row p{font-size:15.5px;color:var(--encre-douce);margin-top:6px;max-width:62ch}
.row .go{display:inline-block;margin-top:10px;font-weight:600;font-size:15px;color:var(--chene-fonce);border-bottom:2px solid var(--chene)}
.row figure{margin:0;overflow:hidden;aspect-ratio:1;background:var(--gris-page);outline:1px solid rgba(28,26,23,.08)}
.row figure img{width:100%;height:100%;object-fit:cover;transition:transform .22s var(--ease)}
.row:hover figure img{transform:translateX(4px) scale(1.03)}
/* En colonne, la vignette garde son carré et prend TOUTE la largeur : le
   `max-height:210px` d'origine la ramenait à 280 px dans une colonne de 350, six
   photos s'arrêtaient donc 70 px avant le texte et les filets séparateurs (bord droit
   en dents de scie), et le conteneur 4:3 recadrait une deuxième fois des fichiers 1:1
   — le battant des portes se retrouvait rogné en haut et en bas. */
@media(max-width:720px){
  .row{grid-template-columns:1fr}
  .row figure{aspect-ratio:1;order:-1}
}

/* ==========================================================================
   TRIPTYQUE DÉCALÉ — 3 photos à trois hauteurs + argument sous chaque
   Le décalage vertical supprime l'effet catalogue.
   ========================================================================== */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,34px);align-items:start}
.tri figure{margin:0}
.tri figure:nth-child(2){margin-top:clamp(28px,4vw,64px)}
.tri figure:nth-child(3){margin-top:clamp(12px,1.8vw,26px)}
.tri img{width:100%;height:auto;outline:1px solid rgba(28,26,23,.08)}
.tri figcaption{margin-top:14px;font-size:15.5px;color:var(--encre-douce)}
.tri figcaption b{display:block;font-family:var(--titre);font-weight:600;font-size:17.5px;color:var(--encre);margin-bottom:4px}
@media(max-width:820px){
  .tri{grid-template-columns:1fr;gap:28px}
  .tri figure:nth-child(2),.tri figure:nth-child(3){margin-top:0}
}

/* ==========================================================================
   RUPTURE PLEINE LARGEUR — une seule par page
   ========================================================================== */
.rupture{background:var(--gris-page)}
.rupture .grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;align-items:stretch}
.rupture .txt{padding:clamp(34px,5vw,72px) clamp(24px,4vw,64px)}
.rupture h2{font-size:clamp(26px,3.2vw,42px)}
.rupture figure{margin:0;min-height:320px}
.rupture figure img{width:100%;height:100%;object-fit:cover}
.rupture .points{margin-top:26px;display:grid;gap:16px}
.rupture .points div{padding-left:18px;border-left:3px solid var(--chene)}
.rupture .points b{display:block;font-family:var(--titre);font-weight:600;font-size:17.5px}
.rupture .points span{font-size:15.5px;color:var(--encre-douce)}
@media(max-width:880px){
  .rupture .grille{grid-template-columns:1fr}
  .rupture figure{min-height:240px;order:-1}
}

/* ==========================================================================
   TABLEAU DE FAITS — section cassée des pages service
   Remplace le trio « 3 avantages + icônes ». Registre « expert technique »
   demandé par le client ; aucun site menuiserie du corpus n'a fait de tableau.
   ========================================================================== */
.faits{width:100%;border-collapse:collapse;text-align:left;font-size:16px}
.faits caption{text-align:left;font-family:var(--titre);font-weight:600;font-size:clamp(20px,2.2vw,26px);padding-bottom:14px}
.faits th,.faits td{padding:15px 16px 15px 0;border-bottom:1px solid var(--trait);vertical-align:top}
.faits thead th{border-bottom:3px solid var(--chene);font-family:var(--titre);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.03em;color:var(--chene-fonce)}
.faits tbody th{font-family:var(--titre);font-weight:600;width:32%;color:var(--encre)}
.faits td{color:var(--encre-douce)}
.tableau-wrap{overflow-x:auto}
@media(max-width:640px){.faits tbody th{width:34%}.faits th,.faits td{font-size:15px;padding:13px 10px 13px 0}}

/* --- déroulé rédigé (pages service) : liste verticale, ⛔ pas une rangée de colonnes ---
   C'est un <ol> : sans remise à zéro, le navigateur ajoute ses puces « 1. 2. 3. »
   ET une indentation de 40 px. Les filets chêne du déroulé se décalaient alors de
   43 px par rapport au titre de section et au filet de tête, et les numéros
   pendaient dans la gouttière (⛔ numérotations apparentes, DESIGN.md §5). */
.etapes{display:grid;gap:0;max-width:76ch;list-style:none;padding-left:0;margin:0}
.etapes li{padding:20px 0 20px 22px;border-top:1px solid var(--trait);border-left:3px solid transparent}
.etapes li:first-child{border-top:3px solid var(--chene)}
.etapes li:last-child{border-bottom:1px solid var(--trait)}
.etapes b{display:block;font-family:var(--titre);font-weight:600;font-size:18.5px;margin-bottom:5px}
.etapes span{color:var(--encre-douce);font-size:16px}

/* ==========================================================================
   BANDE D'IMPACT + PIED DE PAGE (les seules zones sombres du site)
   ========================================================================== */
.impact{background:var(--bois-nuit);color:#fff}
.impact .grille{display:flex;gap:clamp(22px,4vw,60px);align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:clamp(38px,5vw,64px)}
.impact h2{font-size:clamp(24px,2.9vw,38px);max-width:22ch}
.impact p{color:#D8D0C4;margin-top:12px;max-width:52ch}
.impact .cta-row{margin-top:0}

.pied{background:var(--bois-nuit);color:#D8D0C4;border-top:1px solid rgba(255,255,255,.12)}
.pied .grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding-block:clamp(38px,5vw,60px)}
.pied .mark{font-family:var(--titre);font-weight:700;font-size:22px;color:#fff;letter-spacing:-.03em}
.pied .mark i{display:block;height:3px;width:56px;background:var(--chene);margin-top:8px;font-style:normal}
.pied h3{font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--chene-sur-nuit);margin-bottom:14px}
.pied a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s var(--ease),color .18s var(--ease)}
.pied a:hover{color:#fff;border-bottom-color:var(--chene)}
.pied li{margin-bottom:9px;font-size:15.5px}
.pied .bas{border-top:1px solid rgba(255,255,255,.12);padding-block:18px;font-size:14px;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
@media(max-width:820px){.pied .grille{grid-template-columns:1fr;gap:30px}}

/* ==========================================================================
   CONTACT — formulaire + carte de zone (section cassée de la page contact)
   ========================================================================== */
.ct{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:900px){.ct{grid-template-columns:1fr}}

.form{display:grid;gap:16px}
.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form .duo{grid-template-columns:1fr}}
.form label{display:block;font-family:var(--titre);font-weight:600;font-size:15px;margin-bottom:6px}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--texte);font-size:16.5px;color:var(--encre);
  padding:13px 14px;border:1px solid #C9C5BD;background:var(--blanc);border-radius:0;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--chene-fonce);box-shadow:0 0 0 3px rgba(184,123,61,.22);outline:none}
.form textarea{min-height:150px;resize:vertical}
.form .note{font-size:14px;color:var(--encre-douce)}
.form .btn{justify-self:start}

.infos{display:grid;gap:0}
.infos div{padding:16px 0;border-top:1px solid var(--trait)}
.infos div:first-child{border-top:3px solid var(--chene)}
.infos div:last-child{border-bottom:1px solid var(--trait)}
.infos b{display:block;font-family:var(--titre);font-weight:600;font-size:16.5px;margin-bottom:3px}
.infos a{color:var(--chene-fonce);font-weight:600;text-decoration:none;border-bottom:2px solid var(--chene)}
.infos span{color:var(--encre-douce);font-size:15.5px}

/* carte de zone : géographie, pas un schéma technique (design-artisan-btp §7)
   `margin:28px 0 0` et pas seulement `margin-top` : <figure> porte une marge
   navigateur de 40 px à gauche ET à droite. La carte se retrouvait rentrée de 40 px
   par rapport à la colonne d'infos au-dessus, et rétrécie d'autant — à 390 px de
   large, les noms de communes tombaient à 7 px, illisibles. */
.carte{position:relative;margin:28px 0 0;border:3px solid var(--chene);padding:22px;background:var(--blanc)}
.carte svg{width:100%;height:auto;display:block}
/* halo blanc sous les étiquettes : sans lui, le cercle des 50 km traverse
   « Clermont-l'Hérault » et « Agde », et celui des 25 km « Castelnau-le-Lez ». */
.carte svg text{paint-order:stroke;stroke:#fff;stroke-width:3.4px;stroke-linejoin:round}
@media(max-width:560px){.carte{padding:14px}}
.carte figcaption{margin-top:14px;font-size:15px;color:var(--encre-douce)}
.villes{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:18px;font-size:15px;color:var(--encre-douce)}
.villes b{color:var(--encre);font-weight:600}

/* ==========================================================================
   MENTIONS LÉGALES
   ========================================================================== */
/* La mesure s'applique aux BLOCS, pas au conteneur : `.legal` est posé sur la même
   div que `.zone`, et un `max-width:78ch` sur `.zone` (qui centre par margin auto)
   recentrait tout le texte légal 247 px à droite du H1. */
.legal>*{max-width:78ch}
.legal h2{font-size:clamp(21px,2.3vw,27px);margin-top:38px}
.legal h2:first-of-type{margin-top:0}
.legal p{margin-top:12px;color:var(--encre-douce)}
.legal dl{margin:14px 0 0}
.legal dt{font-family:var(--titre);font-weight:600;margin-top:14px}
.legal dd{margin:2px 0 0;color:var(--encre-douce)}

/* ==========================================================================
   CROISEMENTS DE PAGES
   ========================================================================== */
.croise{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}
.croise a{
  display:block;text-decoration:none;padding:22px;border:1px solid var(--trait);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.croise a:hover{border-color:var(--chene);background:var(--chene-voile)}
.croise b{display:block;font-family:var(--titre);font-weight:600;font-size:19px}
.croise span{font-size:15px;color:var(--encre-douce)}
@media(max-width:640px){.croise{grid-template-columns:1fr}}

/* ==========================================================================
   ANIMATIONS — liste fermée (DESIGN.md §10)
   ⛔ aucun fade-in/slide-up au scroll (réflexe IA n°1)
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}