/*
Theme Name: Magellan BTP · Rénovation de chalets
Theme URI: https://magellan-batiment.fr
Author: The DivisionCorp
Description: Thème sur mesure pour la page de rénovation de chalets de Magellan BTP. Page unique, sans extension, textes et couleurs modifiables depuis le Personnalisateur avec aperçu direct.
Version: 1.1.2
Requires at least: 6.5
Requires PHP: 8.1
License: Propriétaire
Text Domain: magellan-chalets
*/

/* ═══════════════════════════════════════════════════════════════
   MAGELLAN BTP · RÉNOVATION DE CHALETS

   Matière : mélèze vieilli, mur chaulé, laine loden, laiton patiné.
   Le luxe par la densité de la matière, pas par le contraste.

   Motif signature : la découpe de rive, ce lambrequin sculpté qui
   court sous les toits de Savoie. Il est tracé une fois, en tuile
   SVG de 72 px répétée à l'horizontale, et jamais étiré : il garde
   sa taille réelle quelle que soit la largeur de l'écran, comme une
   vraie planche. Il coiffe le formulaire, ferme les sections
   sombres et borde le pied de page.

   Second registre : le madrier. Bande de bois empilée, rendue en
   dégradés répétés et en grain fractal, qui porte les fonds foncés.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Bois */
  --wood:#231B14;   --wood-2:#2F251C;  --wood-3:#403226;  --wood-4:#6B553F;
  --wood-5:#9D8468;
  /* Chaux */
  --paper:#F7F1E7;  --paper-2:#EFE6D6; --paper-3:#DFD2BD; --paper-4:#FFFAF2;
  --ink:#1A1815;    --muted:#6F665B;   --line:#D4C8B6;
  /* Couleurs */
  --green:#3A4A38;  --green-2:#566750; --green-nu:#EEF0EB;
  --brass:#A57F3F;  --brass-2:#C6A164; --brass-nu:#F3E7D7;
  --rust:#8E4030;
  /* Typographie */
  --display:'Petrona', Georgia, 'Times New Roman', serif;
  --ui:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  /* Trame */
  --max:min(1280px, calc(100% - clamp(28px, 6vw, 120px)));
  --header:76px;

  /* Grain de bois : bruit fractal très étiré sur l'axe horizontal,
     les veines courent dans le sens du madrier. Posé en fond et
     jamais en filtre sur le contenu, pour ne pas abîmer le texte. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .72' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .17 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23g)'/%3E%3C/svg%3E");
  --madrier:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.026) 0 1px, rgba(0,0,0,.20) 1px 3px, transparent 3px 60px);

  /* Logo de la marque, en masque : la silhouette vient du fichier
     assets/logo-magellan-source.png, la couleur vient du theme. */
  --logo:url("data:image/png;base64,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");

  /* Découpe de rive, en trois teintes */
  --rive-brass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='18' fill='%23A57F3F' fill-rule='evenodd'%3E%3Cpath d='M0 0h72v3H0z'/%3E%3Cpath d='M8 3h24L20 17zM44 3h20L54 12z'/%3E%3C/svg%3E");
  --rive-wood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='30' fill='%23231B14' fill-rule='evenodd'%3E%3Cpath d='M0 0h72v7H0z'/%3E%3Cpath d='M6 7h28L20 29zM42 7h24L54 21z'/%3E%3C/svg%3E");
  --rive-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='30' fill='%23F7F1E7' fill-rule='evenodd'%3E%3Cpath d='M0 0h72v7H0z'/%3E%3Cpath d='M6 7h28L20 29zM42 7h24L54 21z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Le bandeau de traceurs est fixé en bas : sa hauteur est réservée
     ici, et non par le script, pour que le pied de page reste
     cliquable même si le JavaScript ne s'exécute pas. Le script
     remplace ensuite la valeur par la hauteur réelle, puis par zéro
     dès qu'un choix est fait. */
  padding-bottom:var(--cookie-h, 150px);
}
/* Grain de papier très léger sur toute la page */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}
img,svg{display:block; max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}

/* L'en-tête est collant : sans marge de calage, une ancre dépose la
   section sous la barre. */
section[id]{scroll-margin-top:calc(var(--header) + 14px)}

.skip{
  position:fixed; left:16px; top:-60px; z-index:100;
  background:var(--ink); color:var(--paper); padding:10px 14px;
  text-decoration:none; font-weight:600;
}
.skip:focus{top:12px}
.container{width:var(--max); margin-inline:auto}

.display{font-family:var(--display); font-weight:500; line-height:1.03; letter-spacing:-.025em}
.display em{font-style:italic; font-weight:500}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brass)}
.lead{font-size:clamp(17px,1.5vw,21px); line-height:1.62; max-width:56ch}
.section{padding-block:clamp(66px,8vw,116px)}
.section-head{margin-bottom:clamp(30px,4vw,54px); max-width:850px}
.section-head .display{font-size:clamp(33px,4.4vw,56px); margin-top:10px; text-wrap:balance}
.section-head .display em{color:var(--green)}
.section-head p{margin:15px 0 0; color:var(--muted); max-width:68ch}
.light-band{background:var(--paper-2); border-block:1px solid var(--line)}

/* ── Fonds en madrier ──────────────────────────────────────── */
.dark{
  position:relative; overflow:hidden;
  background-color:var(--wood); color:var(--paper);
}
.dark::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.85;
  background-image:var(--madrier), var(--grain);
  background-size:auto, 420px 420px;
}
.dark > *{position:relative; z-index:1}
.dark .eyebrow{color:var(--brass-2)}
.dark .section-head .display em{color:var(--brass-2)}
.dark .section-head p{color:#D4C9BB}

/* La découpe de rive ferme les sections sombres */
.rive-bas{
  position:absolute; left:0; right:0; bottom:0; height:30px; z-index:2;
  background-image:var(--rive-paper); background-repeat:repeat-x; background-size:72px 30px;
  transform:scaleY(-1);
}
.rive-bas--band{background-image:var(--rive-paper)}

/* ═══════════ EN-TÊTE ═══════════ */
.site-header{
  position:sticky; top:0; z-index:40; color:var(--paper);
  background:rgba(35,27,20,.93); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.header-inner{min-height:var(--header); display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none; white-space:nowrap}
.brand-mark{
  display:none; flex:none; width:44px; height:30px;
  background-color:var(--paper);
  -webkit-mask-image:var(--logo);    mask-image:var(--logo);
  -webkit-mask-size:contain;         mask-size:contain;
  -webkit-mask-repeat:no-repeat;     mask-repeat:no-repeat;
  -webkit-mask-position:center;      mask-position:center;
}
/* Sans gestion des masques, un bloc creme plein serait pire que rien :
   on efface la marque et le nom ecrit suffit. */
@supports ((mask-image:url(#l)) or (-webkit-mask-image:url(#l))){
  .brand-mark{display:block}
}
.brand strong{font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.02em}
.brand span{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-2);
  border-left:1px solid rgba(255,255,255,.18); padding-left:12px;
}
.nav{display:flex; align-items:center; gap:22px}
.nav a{
  font-size:12px; font-weight:600; letter-spacing:.04em; text-decoration:none; color:#DDD4C8;
  padding:6px 0; border-bottom:1px solid transparent;
}
.nav a:hover{color:#FFF; border-bottom-color:var(--brass)}
.header-call{display:flex; align-items:center; gap:10px; flex:none; font-size:14px; text-decoration:none; white-space:nowrap}
.header-call small{font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-2)}
.header-call b{font-variant-numeric:tabular-nums; letter-spacing:.015em}
@media(max-width:980px){
  .nav{display:none}
  .header-inner{padding-block:10px; min-height:60px}
  .brand span{display:none}
}

/* ═══════════ BOUTONS ═══════════
   Le bouton est une pièce de bois taillée : arête claire en haut,
   arête sombre en bas. Au clic il s'enfonce et les arêtes
   s'inversent. Le bouton d'appel principal porte en plus la frappe
   laiton, décalée, qui se resserre à l'appui.                      */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:50px; padding:13px 22px; border:0; border-radius:2px;
  background:var(--green); color:var(--paper);
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.28);
  transition:background .14s, transform .1s, box-shadow .14s;
}
.btn:hover{background:var(--green-2); box-shadow:inset 0 2px 4px rgba(0,0,0,.26)}
.btn:active{transform:translateY(1px); box-shadow:inset 0 3px 6px rgba(0,0,0,.34)}
.btn--dark{background:var(--ink); box-shadow:5px 5px 0 var(--brass)}
.btn--dark:hover{background:#2B2824; box-shadow:3px 3px 0 var(--brass)}
.btn--dark:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--brass)}
.btn--full{width:100%}
.btn .arrow{width:18px; height:10px; flex:none}
.btn .arrow path{fill:none; stroke:currentColor; stroke-width:1.6}
.text-link{
  border:0; background:none; padding:10px 4px; font-size:12px; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);
}
.text-link:hover{color:var(--ink); text-decoration-color:var(--brass)}

/* ═══════════ ACCROCHE ═══════════ */
.hero{
  position:relative; overflow:hidden; color:var(--paper);
  padding-bottom:clamp(44px,6vw,80px);
  background:radial-gradient(90% 110% at 85% 0%, rgba(165,127,63,.16), transparent 55%), var(--wood);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:var(--madrier), var(--grain);
  background-size:auto, 420px 420px;
}
.hero > *{position:relative; z-index:1}
.hero-top{padding-top:clamp(26px,4vw,52px); padding-bottom:20px}

/* Trois zones distinctes : le formulaire doit pouvoir remonter
   directement sous le titre en petite largeur. */
.hero-grid{
  display:grid; gap:clamp(30px,5vw,80px);
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  grid-template-areas:"head card" "body card";
  align-items:start; align-content:start;
}
.hero-head{grid-area:head}
.hero-body{grid-area:body}
.lead-card{grid-area:card}

.hero-title{font-size:clamp(46px,7vw,90px); max-width:12ch; margin:13px 0 20px}
.hero-title em{color:var(--brass-2)}
.hero-copy{color:#D9D0C2; margin-bottom:26px}
.hero-proof{display:flex; flex-wrap:wrap; gap:10px}
.proof-chip{
  padding:8px 11px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.14);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#DDD4C8;
}
/* ── Cadre photographique ─────────────────────────────────────
   Un emplacement tenu par son rapport de forme : la mise en page ne
   bouge pas entre le cadre d'attente et la photographie definitive,
   et rien ne saute au chargement.                                   */
.cadre{
  position:relative; margin:30px 0 0; overflow:hidden;
  border:1px solid rgba(242,235,222,.17); background:rgba(255,255,255,.02);
}
.cadre__i{
  display:block; width:100%; height:auto;
  aspect-ratio:var(--ratio, 16/10); object-fit:cover;
}
.cadre__v{
  display:grid; place-content:center; justify-items:center; gap:11px;
  aspect-ratio:var(--ratio, 16/10);
  color:var(--wood-5); background-color:var(--wood-2);
  background-image:var(--grain); background-size:420px 420px;
}
.cadre__v svg{width:30px; height:30px}
.cadre__v span{font-size:10px; letter-spacing:.15em; text-transform:uppercase}
.cadre figcaption{
  display:flex; justify-content:space-between; gap:10px; padding:8px 11px;
  border-top:1px dashed rgba(242,235,222,.16);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-2);
}

/* Carte de captation : seul bloc de la page à porter la découpe
   complète. C'est le point d'entrée, il est signalé comme tel. */
.lead-card{
  position:relative; background:var(--paper); color:var(--ink);
  padding:clamp(24px,2.7vw,38px); box-shadow:0 24px 50px -25px rgba(0,0,0,.8);
}
.lead-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:18px;
  background-image:var(--rive-brass); background-repeat:repeat-x; background-size:72px 18px;
}
.lead-card .eyebrow{margin-top:12px; display:block}
.lead-card h2{
  font-family:var(--display); font-weight:600; font-size:clamp(24px,2.4vw,31px);
  letter-spacing:-.02em; margin:10px 0 5px;
}
.lead-card > p{color:var(--muted); font-size:14px}
.form-stack{display:grid; gap:14px; margin-top:22px}
.form-note{margin-top:10px; font-size:12px; text-align:center; color:var(--muted)}
.form-note b{color:var(--ink)}
.scope-note{
  margin-top:13px; padding:12px 14px; border-left:3px solid var(--brass);
  background:var(--paper-2); font-size:13.5px; line-height:1.55; color:#4A433B;
}

.trust-line{display:grid; grid-template-columns:repeat(4,1fr); margin-top:38px; border-top:1px solid rgba(255,255,255,.1)}
.trust-item{display:flex; gap:10px; padding:22px 18px 0 0; font-size:13px; line-height:1.45; color:#E4DDD4}
.trust-item + .trust-item{border-left:1px solid rgba(255,255,255,.12); padding-left:18px}
.trust-num{font-size:11px; font-weight:700; color:var(--brass-2); font-variant-numeric:tabular-nums}

/* ═══════════ CHAMPS ═══════════ */
.field label, .field > span{
  display:block; margin-bottom:7px;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--wood-4);
}
.field input, .field select, .field textarea{
  width:100%; padding:12px 13px; font-size:15px;
  background:var(--paper-4); border:1px solid var(--paper-3); border-bottom-width:2px; border-radius:2px;
  transition:border-color .15s, background .15s;
}
.field textarea{resize:vertical; line-height:1.55}
.field input::placeholder, .field textarea::placeholder{color:#B7A991}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; background:#FFF; border-color:var(--green);
}
.field [aria-invalid="true"]{border-color:var(--rust)}
.field select{
  appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236B553F' stroke-width='1.5'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}

/* ═══════════ SITUATIONS ═══════════ */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.situation-card{position:relative; background:var(--paper-4); border:1px solid var(--line); padding:28px 26px}
.situation-card:nth-child(1){border-top:3px solid var(--wood-3)}
.situation-card:nth-child(2){border-top:3px solid var(--green)}
.situation-card:nth-child(3){border-top:3px solid var(--brass)}
/* Plaque de bois chanfreinée, le numéro gravé dessus */
.number{
  display:inline-grid; place-items:center; width:38px; height:38px;
  clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background:var(--wood-3); color:var(--brass-2);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
}
.situation-card h3{font-family:var(--display); font-weight:500; font-size:24px; letter-spacing:-.018em; margin:16px 0 10px}
.situation-card p{color:#544C43; font-size:15px}

/* ═══════════ PRESTATIONS ═══════════ */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--line); background:var(--line)}
.service{background:var(--paper); padding:25px 24px; min-height:180px}
.service .num{
  display:block; font-family:var(--display); font-size:26px; line-height:1;
  color:var(--brass); margin-bottom:12px; font-variant-numeric:tabular-nums;
}
.service strong{display:block; font-size:16px; line-height:1.35; margin-bottom:8px}
.service p{color:var(--muted); font-size:14px; line-height:1.58}

/* ═══════════ CONTRAINTE MONTAGNE ═══════════ */
.mountain-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px 42px}
.constraint{padding:22px 0; border-top:1px solid rgba(242,235,222,.16)}
.constraint h3{font-family:var(--display); font-weight:500; font-size:25px; letter-spacing:-.018em; margin-bottom:9px}
.constraint p{color:#D4C9BB; font-size:15px; max-width:62ch}

/* ═══════════ MÉTHODE ═══════════ */
.method{display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--ink); background:var(--paper-4)}
.step{position:relative; padding:24px 20px; min-height:220px}
.step + .step{border-left:1px solid var(--line)}
.step::after{
  content:""; position:absolute; right:-6px; top:34px; width:10px; height:10px;
  border-top:1px solid var(--ink); border-right:1px solid var(--ink);
  transform:rotate(45deg); background:var(--paper-4);
}
.step:last-child::after{display:none}
.step-badge{
  display:grid; place-items:center; width:42px; height:42px;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background:var(--green); color:var(--green-nu); font-family:var(--display); font-size:20px; font-weight:600;
}
.step h3{font-family:var(--display); font-weight:500; font-size:22px; letter-spacing:-.018em; margin:16px 0 9px}
.step p{color:var(--muted); font-size:14px}

/* ═══════════ RÉFÉRENCES ═══════════ */
.refs-top{max-width:820px}
.logo-row{display:flex; flex-wrap:wrap; gap:9px; margin-top:25px}
.logo-row span{
  padding:9px 13px; border:1px solid rgba(242,235,222,.2);
  color:#DFD7CD; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
}
.credit{margin-top:12px; font-size:12px; color:var(--wood-5)}
.reference-card{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:start;
  margin-top:44px; padding-top:34px; border-top:1px solid rgba(242,235,222,.14);
}
.reference-card .cadre{margin-top:0}
.case-content h3{font-family:var(--display); font-weight:500; font-size:31px; letter-spacing:-.02em; margin:10px 0 16px; color:var(--paper)}
.data-table{display:grid; margin:0}
.data-row{display:grid; grid-template-columns:130px 1fr; gap:15px; padding:10px 0; border-top:1px solid rgba(242,235,222,.12)}
.data-row dt{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--brass-2); padding-top:3px}
.data-row dd{margin:0; font-size:14px; color:#DDD3C5}

/* ═══════════ ZONES ═══════════ */
.zones{display:flex; flex-wrap:wrap; gap:9px}
.zone{
  padding:12px 16px; background:var(--paper-4);
  border:1px solid var(--line); border-left:3px solid var(--green);
  font-size:14px; font-weight:600;
}
.zone-note{margin-top:15px; font-size:13.5px; color:var(--muted)}

/* ═══════════ QUESTIONS ═══════════ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); transition:background .18s}
.faq details[open]{background:var(--paper-2)}
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:21px 54px 21px 0;
  font-family:var(--display); font-size:21px; font-weight:500; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before, .faq summary::after{
  content:""; position:absolute; right:10px; top:50%; background:var(--brass);
  transition:transform .2s, opacity .2s;
}
.faq summary::before{width:16px; height:2px; margin-top:-1px}
.faq summary::after{width:2px; height:16px; margin:-8px -7px 0 0}
.faq details[open] summary::after{opacity:0; transform:rotate(90deg)}
.faq details p{margin:0; padding:0 48px 21px 0; max-width:78ch; color:var(--muted); font-size:15px}
.faq details[open] summary, .faq details[open] p{padding-left:18px}

/* ═══════════ FORMULAIRE COMPLET ═══════════ */
.project{background:var(--paper-2); border-top:1px solid var(--line)}
.project-grid{display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(30px,5vw,72px); align-items:start}
.project-intro .display{font-size:clamp(34px,4.5vw,56px); margin-top:10px}
.project-intro .display em{color:var(--green)}
.project-intro > p{color:var(--muted); max-width:55ch; margin-top:15px}
.project-list{margin-top:26px; border-top:1px solid var(--line)}
.project-list div{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; color:#4F473E}
.project-list b{min-width:24px; color:var(--green); font-size:11px; letter-spacing:.1em; font-variant-numeric:tabular-nums}

.form-shell{background:var(--paper-4); border:1px solid var(--ink); padding:clamp(20px,3vw,34px)}
.form-progress{display:flex; align-items:center; gap:14px; margin-bottom:25px}
.form-progress .label{font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.form-progress .bar{flex:1; height:3px; background:var(--line); overflow:hidden}
.form-progress .bar i{
  display:block; height:100%; background:var(--brass);
  transform:scaleX(.3333); transform-origin:left; transition:transform .25s ease;
}
.form-step{display:grid; gap:14px}
.step-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.step-grid .field--wide{grid-column:1 / -1}
.checkbox-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.checkbox{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:10px 11px; background:var(--paper-2); border:1px solid var(--paper-3);
  font-size:14px; transition:border-color .15s, background .15s;
}
.checkbox:hover{border-color:var(--wood-5)}
.checkbox input{width:15px; height:15px; flex:none; accent-color:var(--green)}
.checkbox:has(input:checked){border-color:var(--brass); background:var(--brass-nu)}
.form-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:7px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:1.5; color:var(--muted)}
.consent input{margin-top:3px; accent-color:var(--green)}
/* Piège à robots : masqué par découpe plutôt que repoussé hors écran,
   pour ne créer aucune zone de défilement parasite. */
.honeypot{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.success{padding:34px; text-align:center; border:1px solid var(--green); background:var(--green-nu); color:#263126}
.success strong{display:block; font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px}
.success p{color:#4F5A50}

/* ═══════════ PIED ═══════════ */
.footer{
  position:relative; padding:34px 0 28px; border-top:1px solid var(--ink);
  background:var(--paper); color:var(--muted); font-size:13px;
}
.footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:18px; opacity:.5;
  background-image:var(--rive-brass); background-repeat:repeat-x; background-size:72px 18px;
}
.footer-inner{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 22px}
.footer-actions{display:flex; gap:18px; flex-wrap:wrap}
.footer-actions button{
  border:0; background:none; padding:0; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);
}
.footer-actions button:hover{text-decoration-color:var(--brass)}

/* ═══════════ MODALES ═══════════ */
.modal{position:fixed; inset:0; z-index:80; display:none; place-items:center; padding:18px; background:rgba(26,24,21,.58)}
.modal[open]{display:grid}
.modal-box{
  position:relative; width:100%; max-width:700px; max-height:84vh; overflow:auto;
  background:var(--paper); border:1px solid var(--ink); padding:clamp(24px,4vw,42px);
  box-shadow:10px 10px 0 rgba(26,24,21,.16);
}
.modal-box h2{font-family:var(--display); font-weight:600; font-size:32px; letter-spacing:-.02em; margin-bottom:18px}
.modal-box h3{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin:22px 0 7px}
.modal-box p{font-size:14px; line-height:1.62; color:#514940}
.modal-close{position:absolute; top:10px; right:10px; width:34px; height:34px; border:1px solid var(--ink); background:var(--paper); font-size:18px; line-height:1}
.todo{background:var(--brass-nu); color:var(--rust); padding:1px 6px; border-radius:2px; font-size:12.5px}

/* ═══════════ TRACEURS ═══════════ */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; justify-content:space-between; align-items:center; gap:15px; flex-wrap:wrap;
  padding:13px max(18px,5vw); background:var(--ink); color:var(--paper);
  box-shadow:0 -10px 28px rgba(0,0,0,.18);
}
.cookie[hidden]{display:none}
.cookie p{max-width:75ch; color:#D9D1C6; font-size:12.5px}
.cookie-actions{display:flex; gap:8px; flex:none}
.cookie button{padding:9px 15px; border:1px solid #514B44; background:transparent; color:var(--paper); font-size:12px; font-weight:700}
.cookie button:hover{border-color:var(--paper)}
.cookie .accept{
  background:var(--brass); border-color:var(--brass); color:var(--wood);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.2);
}
.cookie .accept:hover{background:var(--brass-2); border-color:var(--brass-2)}

/* ═══════════ ADAPTATIONS ═══════════ */
@media(max-width:1000px){
  .method{grid-template-columns:1fr}
  .step{min-height:0}
  .step + .step{border-left:0; border-top:1px solid var(--line)}
  .step::after{right:auto; left:19px; top:auto; bottom:-6px; transform:rotate(135deg)}
}
@media(max-width:920px){
  /* Le formulaire court doit rester atteignable sans défiler : on
     passe en colonne et on le remonte juste sous le titre. */
  .hero-grid{display:flex; flex-direction:column; gap:26px}
  .hero-head{order:1}
  .lead-card{order:2; max-width:720px}
  .hero-body{order:3}
  .trust-line{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(3){border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.12); margin-top:18px; padding-top:18px}
  .trust-item:nth-child(4){border-top:1px solid rgba(255,255,255,.12); margin-top:18px; padding-top:18px}
  .mountain-grid, .reference-card{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .services{grid-template-columns:1fr 1fr}
}
@media(max-width:850px){
  .cards-3{grid-template-columns:1fr}
}
@media(max-width:620px){
  .services, .step-grid, .checkbox-grid{grid-template-columns:1fr}
  .service{min-height:0}
  .hero-title{font-size:clamp(34px,9.6vw,46px); max-width:17ch; margin:10px 0 0}
  .hero-body{margin-top:0}
  .cadre{margin-top:24px}
  .trust-line{grid-template-columns:1fr}
  .trust-item, .trust-item + .trust-item{
    border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.12);
    padding-top:16px; margin-top:16px;
  }
  .trust-item:first-child{border-top:0; padding-top:0; margin-top:0}
  .data-row{grid-template-columns:1fr; gap:3px}
  .faq summary{font-size:19px; padding-right:46px}
  /* En petite largeur, la marque et le numéro se disputent la barre :
     le libellé du numéro saute, la marque se réduit. */
  .header-inner{gap:12px}
  .brand strong{font-size:19px}
  .header-call small{display:none}
  .header-call b{font-size:15px}
  .cookie{flex-direction:column; align-items:stretch}
  .cookie-actions button{flex:1}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}
@media print{
  .site-header, .cookie, .lead-card, .form-shell, .skip{display:none}
  body{background:#FFF; padding-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════
   AJOUTS WORDPRESS
   Ce qui n'existait pas dans la maquette : la barre d'administration
   qui décale l'en-tête collant, le logo téléversé par le client, et
   les messages de retour du formulaire côté serveur.
   ══════════════════════════════════════════════════════════════ */

/* La barre d'administration est fixe en haut : sans ce décalage,
   l'en-tête collant passe dessous et le menu devient incliquable. */
body.admin-bar .site-header{top:32px}
body.admin-bar section[id]{scroll-margin-top:calc(var(--header) + 46px)}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
}

/* Logo téléversé depuis « Personnaliser ». Hauteur bornée pour que
   la barre garde sa hauteur quelle que soit l'image fournie. */
.brand .custom-logo-link{display:block; line-height:0}
.brand .custom-logo{width:auto; max-height:40px; object-fit:contain}

/* Retour du serveur quand une information manque. */
.alerte{
  margin:0 0 20px; padding:13px 15px;
  background:var(--brass-nu); border-left:3px solid var(--rust);
  color:#5A2A1E; font-size:14px; line-height:1.55;
}

/* Sans JavaScript, les trois étapes s'affichent à la suite : elles
   sont alors séparées pour rester lisibles. */
.form-step + .form-step{margin-top:26px; padding-top:26px; border-top:1px solid var(--line)}
.form-step[hidden] + .form-step,
.form-step:first-child{margin-top:0; padding-top:0; border-top:0}