/* Charpente des Collines — feuille de style du site public.
   Concept « trait de scie » (prototype Alpixi) porté sur la palette du logo :
   pétrole sur crème pour le texte, abricot sur sombre pour l'accent.
   Contrastes calculés sur --creme (#f3eee6) :
     encre 12,8:1 · pétrole 6,2:1 · gris 7:1 · erreur 6,4:1 · pétrole-clair 3,5:1 (≥ 24 px seulement)
   et sur --sombre (#1b3440) : crème 11,3:1 · abricot 7:1 · crème à 78 % 7,5:1.
   L'abricot n'est jamais utilisé en texte sur fond clair. Mono-thème clair. */

:root{
  color-scheme:light;
  --encre:#1c2a31;
  --petrole:#2c5e70;
  --petrole-clair:#49879d;
  --abricot:#ffac68;
  --creme:#f3eee6;
  --papier:#f9f6f1;
  --sombre:#1b3440;
  --gris:#44525a;
  --erreur:#a3261b;
  --ligne:rgba(28,42,49,.16);
  --ligne-forte:rgba(28,42,49,.55);
  --ligne-claire:rgba(243,238,230,.22);
  --ligne-claire-forte:rgba(243,238,230,.6);
  --creme-78:rgba(243,238,230,.78);
  --creme-86:rgba(243,238,230,.86);
  --ff-titre:"Instrument Serif",Georgia,serif;
  --ff-texte:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --max:1240px;
  --gouttiere:clamp(16px,4vw,48px);
  --h-entete:72px;
  --dent:8px;
  /* Hauteur de la barre d'administration (SPEC-evolutions-4 §B) : 0 pour les visiteurs, posée par html.avec-barre-admin */
  --barre-admin-h:0px;
}
html.avec-barre-admin{--barre-admin-h:36px}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--h-entete) + var(--barre-admin-h) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--ff-texte);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.sur-sombre :focus-visible,.sur-sombre:focus-visible{outline-color:var(--abricot)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hors-ecran{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.conteneur{width:100%;max-width:calc(var(--max) + var(--gouttiere) * 2);margin-inline:auto;padding-inline:var(--gouttiere)}

.lien-evitement{position:fixed;top:calc(env(safe-area-inset-top,0px) - 100px);left:16px;z-index:200;background:var(--encre);color:var(--creme);padding:.8em 1.2em;font-weight:600;text-decoration:none;transition:top .2s}
.lien-evitement:focus{top:calc(env(safe-area-inset-top,0px) + 12px);outline-color:var(--abricot)}

/* ===== Barre d'administration (SPEC-evolutions-4 §B) : rendue seulement pour une session d'administration =====
   Fixée au-dessus de l'en-tête (qui descend de --barre-admin-h), une seule ligne compacte, défilable horizontalement
   plutôt que tronquée si la place manque ; masquée à l'impression. Crème sur sombre 11,3:1, abricot au survol 7:1. */
.barre-admin{position:fixed;top:0;left:0;right:0;z-index:110;height:var(--barre-admin-h);background:var(--sombre);color:var(--creme);font-size:13px;line-height:1.2}
.barre-admin__inner{display:flex;align-items:center;gap:16px;height:100%;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.barre-admin__inner::-webkit-scrollbar{display:none}
.barre-admin__etat{margin-right:auto;color:var(--creme-86)}
.barre-admin__etat strong{font-weight:600;color:var(--creme)}
.barre-admin__lien,.barre-admin__bouton{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1px solid var(--ligne-claire-forte);border-radius:2px;color:var(--creme);font:inherit;font-weight:600;text-decoration:none;background:none;cursor:pointer}
.barre-admin__lien:hover,.barre-admin__bouton:hover,.barre-admin__lien:focus-visible,.barre-admin__bouton:focus-visible{color:var(--abricot);border-color:var(--abricot)}
.barre-admin__lien:focus-visible,.barre-admin__bouton:focus-visible{outline:2px solid var(--abricot);outline-offset:2px}
.barre-admin__form{display:contents}
@media (max-width:560px){
  .barre-admin__inner{gap:10px}
  .barre-admin__libelle{display:none}
  .barre-admin__lien,.barre-admin__bouton{padding:0 8px}
}

/* ===== Fil à plomb de progression (SPEC-evolutions-4 §C, SPEC-evolutions-5 §1-2) : décoratif, grand écran seulement =====
   Visible quand la marge latérale (100vw − --max) / 2 atteint 72 px (≥ 1384 px), centré dans cette marge. Un seul élément
   est déplacé (.fil-plomb__curseur, translateY par site.js : GSAP quickTo ou transition) ; il contient le fil, le halo et le
   plomb, qui restent donc solidaires pendant l'amorti. Le fil est un enfant très haut (200vh) dont le bas est accroché à
   l'anneau du plomb : il ne descend jamais sous le plomb, et le conteneur fixe (overflow:hidden) le rogne en haut. */
.fil-plomb{display:none}
@media (min-width:1384px){
  .fil-plomb{display:block;position:fixed;top:0;bottom:0;left:calc((100vw - var(--max)) / 4 - 24px);width:48px;overflow:hidden;z-index:60;pointer-events:none;color:var(--encre)}
  .fil-plomb__curseur{position:absolute;top:0;left:50%;display:block;width:0;height:52px;transition:transform .25s cubic-bezier(.2,.7,.3,1);will-change:transform}
  /* Fil 1 px encre à 55 % doublé d'un filet crème à 45 % (invisible sur crème et papier, lisible sur --sombre),
     du haut de la fenêtre au centre de l'anneau (2,6 px sous le haut du plomb) */
  .fil-plomb__ligne{position:absolute;left:-.5px;bottom:calc(100% - 2.6px);width:1px;height:200vh;background:var(--ligne-forte);box-shadow:1px 0 0 rgba(243,238,230,.45)}
  /* Halo : disque crème à 85 % de 32 px derrière le corps du plomb (lisible devant .appel et .pied) */
  .fil-plomb__halo{position:absolute;top:4px;left:-16px;width:32px;height:32px;border-radius:50%;background:rgba(243,238,230,.85)}
  .fil-plomb__plomb{position:absolute;top:0;left:-12px;display:block;width:24px;height:52px}
  .fil-plomb__plomb svg{display:block;width:24px;height:52px;max-width:none}
  /* Plomb de charpentier : anneau et chapeau abricot, corps encre bombé avec un reflet papier à 30 % et deux lignes de
     tour crème (facettes), pointe conique abricot. Le corps porte un liseré crème (paint-order:stroke : seule la moitié
     extérieure du trait est visible) pour la partie du cône qui déborde du halo devant les sections sombres. */
  .fil-plomb__anneau{fill:none;stroke:var(--abricot);stroke-width:1.4}
  .fil-plomb__chapeau,.fil-plomb__pointe{fill:var(--abricot)}
  .fil-plomb__corps{fill:currentColor;stroke:var(--creme);stroke-width:1.2;paint-order:stroke;stroke-linejoin:round}
  .fil-plomb__reflet{fill:var(--papier);opacity:.3}
  .fil-plomb__facettes{fill:none;stroke:var(--creme);stroke-width:.8;opacity:.4}
}

/* Icônes tracées au trait ; .ic-accent = aplat abricot */
.icone{width:24px;height:24px;flex-shrink:0;vertical-align:middle}
.icone .ic-accent{fill:var(--abricot)}

/* Emblème (ferme + montagnes) : dessiné une fois dans un <symbol>, réutilisé par <use> ;
   les couleurs passent par des variables héritées jusque dans l'arbre du <use> */
.embleme{display:block;--emb-ferme:var(--abricot);--emb-montagne:var(--petrole-clair);--emb-autre:var(--encre)}
.embleme--sombre{--emb-ferme:var(--encre);--emb-montagne:var(--encre);--emb-autre:var(--encre)}
.embleme--clair{--emb-ferme:var(--creme);--emb-montagne:var(--creme);--emb-autre:var(--creme)}
.emb-ferme{fill:var(--emb-ferme)}
.emb-montagne{fill:var(--emb-montagne)}
.emb-autre{fill:var(--emb-autre)}

/* Sur-titre avec graduations de mètre pliant */
.surtitre{display:flex;align-items:center;gap:.9em;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--petrole)}
.surtitre::before{content:"";flex:0 0 44px;height:9px;transform-origin:left center;
  background:
    linear-gradient(currentColor,currentColor) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 11px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 5.5px) left bottom / 100% 5px no-repeat}
.sur-sombre .surtitre{color:var(--creme-78)}

.titre-section{font-family:var(--ff-titre);font-size:clamp(2.3rem,4.8vw,4rem);line-height:1;letter-spacing:-.01em;max-width:22ch}
/* Accent de couleur des titres (ct() : *segment* → span.accent), en romain : pétrole clair sur fond clair
   (3,5:1, réservé aux titres ≥ 24 px), abricot sur fond sombre (7:1). Jamais d'italique. */
.accent{font-style:normal;color:var(--petrole-clair)}
.sur-sombre .accent{color:var(--abricot)}
.chapeau{max-width:56ch;color:var(--gris);font-size:1.0625rem}
.entete-section{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.section{padding-block:clamp(72px,10vw,140px)}

/* Texte riche (sortie de md()) */
.texte-riche{display:grid;gap:1em}
.texte-riche h2,.texte-riche h3{font-family:var(--ff-titre);line-height:1.1;margin-top:.6em}
.texte-riche h2{font-size:clamp(1.7rem,2.6vw,2.2rem)}
.texte-riche h3{font-size:clamp(1.35rem,2vw,1.6rem)}
.texte-riche ul{padding-left:1.2em;display:grid;gap:.4em}
.texte-riche li::marker{color:var(--petrole)}
.texte-riche a{color:var(--petrole);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;font-weight:500;overflow-wrap:anywhere}
.texte-riche a:hover{text-decoration-thickness:2px}
.texte-riche strong{font-weight:600}
.sur-sombre .texte-riche a{color:var(--creme)}
.sur-sombre .texte-riche a:hover,.sur-sombre .texte-riche a:focus-visible{color:var(--abricot)}
.sur-sombre .texte-riche li::marker{color:var(--abricot)}

/* Lien texte avec flèche */
.lien-fleche{display:inline-flex;align-items:center;gap:.6em;min-height:44px;font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;color:var(--petrole)}
.lien-fleche .icone{width:1.05em;height:1.05em;transition:transform .3s}
.lien-fleche:hover .icone{transform:translateX(4px)}
.lien-fleche .icone--retour{transform:rotate(180deg)}
.lien-fleche:hover .icone--retour{transform:rotate(180deg) translateX(4px)}
.lien-fleche--clair,.sur-sombre .lien-fleche{color:var(--creme)}

/* ===== Bouton « trait de scie » ===== */
.alpx-trait{
  --alpx-encre:var(--encre);
  --alpx-survol:var(--abricot);
  --alpx-fond:var(--creme);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.9em;
  min-height:48px;padding:1.1em 1.55em;
  font-family:inherit;font-size:.9rem;font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--alpx-encre);background:transparent;border:1.5px solid var(--alpx-encre);border-radius:2px;
  overflow:hidden;isolation:isolate;cursor:pointer;touch-action:pan-y;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
}
.alpx-trait--clair{--alpx-encre:var(--creme);--alpx-survol:var(--sombre);--alpx-fond:var(--sombre)}
.alpx-trait--petit{font-size:.76rem;padding:.95em 1.2em;min-height:44px}
.alpx-trait--plein{width:100%}
/* Sans JS (ou sans GSAP) : survol en aplat simple, lisible */
.alpx-trait:not([data-pret]):hover,.alpx-trait:not([data-pret]):focus-visible{background:var(--alpx-encre);color:var(--alpx-fond)}
.alpx-trait__aplat{
  position:absolute;top:0;bottom:0;left:calc(var(--dent) * -1);width:calc(100% + var(--dent) * 2);z-index:-1;
  background:var(--alpx-encre);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) center / calc(100% - var(--dent) * 2 + 2px) 100% no-repeat,conic-gradient(from 45deg at left,#000 90deg,#0000 0) left / var(--dent) calc(var(--dent) * 2) repeat-y,conic-gradient(from 225deg at right,#000 90deg,#0000 0) right / var(--dent) calc(var(--dent) * 2) repeat-y;
          mask:linear-gradient(#000 0 0) center / calc(100% - var(--dent) * 2 + 2px) 100% no-repeat,conic-gradient(from 45deg at left,#000 90deg,#0000 0) left / var(--dent) calc(var(--dent) * 2) repeat-y,conic-gradient(from 225deg at right,#000 90deg,#0000 0) right / var(--dent) calc(var(--dent) * 2) repeat-y;
}
.alpx-trait__aplat::after{content:"";position:absolute;left:var(--dent);right:var(--dent);bottom:0;height:6px;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--alpx-survol) 0 1px,transparent 1px 40px) bottom left / 100% 6px no-repeat,repeating-linear-gradient(90deg,var(--alpx-survol) 0 1px,transparent 1px 8px) bottom left / 100% 3px no-repeat}
.alpx-trait:not([data-pret]) .alpx-trait__aplat{display:none}
.alpx-trait__texte{position:relative;display:inline-flex;white-space:nowrap}
.alpx-trait__l{display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:top}
.alpx-trait__li{display:block}
.alpx-trait__li > span{display:block;height:1.2em}
.alpx-trait__li > span + span{color:var(--alpx-survol)}
.alpx-trait__esp{display:inline-block;width:.32em}
.alpx-trait__fleche{position:relative;flex-shrink:0;width:1.15em;height:1.15em;overflow:hidden}
.alpx-trait__fleche svg{position:absolute;inset:0;width:100%;height:100%}
.alpx-trait__fleche svg + svg{color:var(--alpx-survol)}

/* ===== En-tête ===== */
.entete{position:fixed;top:var(--barre-admin-h);left:0;right:0;z-index:100;padding-top:env(safe-area-inset-top,0px);background:rgba(243,238,230,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.entete.est-defile{border-bottom-color:var(--ligne)}
.entete__barre{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--h-entete)}
/* Logo (SPEC-evolutions-4 §D) : la taille de police est portée par .logo ; l'emblème mesure 1,5 fois cette taille en hauteur
   (ratio 1,8:1 de l'illustration : 36 × 65 px pour 1,5 rem) et le nom est centré verticalement sur lui. */
.logo{display:inline-flex;align-items:center;gap:.5em;font-size:1.5rem;text-decoration:none;min-height:44px;margin:0}
.logo__embleme{width:2.7em;height:1.5em;flex-shrink:0}
.logo__nom{font-family:var(--ff-titre);font-size:1em;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.nav__liste{display:flex;gap:clamp(14px,2vw,28px);list-style:none}
.nav__liste a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.92rem;font-weight:500;text-decoration:none}
.nav__liste a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:var(--petrole);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.nav__liste a:hover::after,.nav__liste a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.menu-bouton{display:none;align-items:center;gap:.6em;min-height:44px;min-width:44px;padding:0 .2em;font-weight:600;font-size:.9rem;color:var(--encre);background:none;border:0;cursor:pointer}
.menu-bouton__trait{position:relative;width:22px;height:10px}
.menu-bouton__trait::before,.menu-bouton__trait::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor}
.menu-bouton__trait::before{top:0}
.menu-bouton__trait::after{top:8.5px}
.progression{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progression__barre{display:block;height:100%;background:var(--petrole);transform:scaleX(0);transform-origin:left}

/* Menu mobile plein écran (dialogue) */
.menu-mobile{position:fixed;top:var(--barre-admin-h);right:0;bottom:0;left:0;z-index:150;display:flex;flex-direction:column;background:var(--sombre);color:var(--creme);padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gouttiere) calc(env(safe-area-inset-bottom,0px) + 24px);overflow-y:auto}
.menu-mobile__haut{display:flex;align-items:center;justify-content:space-between;min-height:var(--h-entete);margin-top:-16px}
.menu-mobile__haut .logo__nom{color:var(--creme)}
.menu-mobile__fermer{display:inline-flex;align-items:center;gap:.6em;min-height:44px;font-weight:600;font-size:.9rem;color:var(--creme);background:none;border:0;cursor:pointer}
.menu-mobile__fermer .icone{width:20px;height:20px}
.menu-mobile__liste{list-style:none;display:grid;margin-top:24px;border-top:1px solid var(--ligne-claire)}
.menu-mobile__liste a{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--ligne-claire);font-family:var(--ff-titre);font-size:2.1rem;line-height:1.1;text-decoration:none}
.menu-mobile__liste span{font-family:var(--ff-texte);font-size:.75rem;letter-spacing:.14em;color:var(--creme-78)}
.menu-mobile__bas{display:grid;gap:20px;margin-top:auto;padding-top:32px}
.menu-mobile__tel{font-size:.95rem;color:var(--creme-86)}
.menu-mobile__tel a{color:var(--creme);font-weight:600}

/* ===== Hero ===== */
.hero{padding-top:calc(var(--h-entete) + var(--barre-admin-h) + env(safe-area-inset-top,0px) + clamp(32px,6vw,72px));padding-bottom:clamp(56px,7vw,96px)}
.hero__grille{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,80px);align-items:end}
.hero__texte{display:grid;gap:28px;min-width:0}
.hero__titre{font-family:var(--ff-titre);font-size:clamp(2.75rem,5.4vw,4.9rem);line-height:.95;letter-spacing:-.02em}
.hero__intro{display:grid;gap:.8em;max-width:46ch;font-size:1.125rem;color:var(--gris)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.reassurance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;border-top:1.5px solid var(--encre);list-style:none}
.reassurance li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:18px 16px 0 0;font-size:.88rem;font-weight:600;line-height:1.3}
.reassurance li + li{padding-left:16px;border-left:1px solid var(--ligne)}
.reassurance .icone{width:32px;height:32px}
.hero__visuel{position:relative;margin:0;min-width:0}
.cadre-photo{position:relative;overflow:hidden;aspect-ratio:4/5;max-height:calc(100vh - var(--h-entete) - 120px);min-height:420px;width:100%;background:var(--sombre)}
.cadre-photo img{width:100%;height:100%;object-fit:cover}
.cadre-photo--vide{display:grid;place-items:center;background:var(--sombre)}
.cadre-photo__embleme{width:46%;max-width:260px;opacity:.9}
.cote{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;color:var(--creme);pointer-events:none}
.cote__trait{flex:1;height:11px;position:relative;transform-origin:center}
.cote__trait::before{content:"";position:absolute;left:0;right:0;top:5px;height:1.5px;background:currentColor}
.cote__trait::after{content:"";position:absolute;inset:0;border-left:1.5px solid currentColor;border-right:1.5px solid currentColor}
.cote__valeur{background:var(--sombre);color:var(--abricot);font-size:.78rem;font-weight:600;letter-spacing:.06em;padding:.35em .7em;white-space:nowrap}
.hero__legende{margin-top:12px;font-size:.82rem;color:var(--gris)}

/* Aplat dents de scie pour les photos (révélé par JS : masqué par défaut) */
.decoupe{position:relative;overflow:hidden}
.decoupe img{width:100%;height:100%;object-fit:cover}
.decoupe__aplat{position:absolute;top:0;bottom:0;left:calc(var(--dent) * -1.5);width:calc(100% + var(--dent) * 3);z-index:2;background:var(--petrole);pointer-events:none;visibility:hidden;--d:12px;
  -webkit-mask:linear-gradient(#000 0 0) center / calc(100% - var(--d) * 2 + 2px) 100% no-repeat,conic-gradient(from 45deg at left,#000 90deg,#0000 0) left / var(--d) calc(var(--d) * 2) repeat-y,conic-gradient(from 225deg at right,#000 90deg,#0000 0) right / var(--d) calc(var(--d) * 2) repeat-y;
          mask:linear-gradient(#000 0 0) center / calc(100% - var(--d) * 2 + 2px) 100% no-repeat,conic-gradient(from 45deg at left,#000 90deg,#0000 0) left / var(--d) calc(var(--d) * 2) repeat-y,conic-gradient(from 225deg at right,#000 90deg,#0000 0) right / var(--d) calc(var(--d) * 2) repeat-y}

/* Intro animée : masquée seulement quand GSAP est prêt (classe « anim » posée par head.js,
   retirée par site.js au lancement, par head.js après 4 s quoi qu'il arrive, et jamais posée
   sans JavaScript ni sous prefers-reduced-motion). « sans-anim » = repli statique décidé par
   site.js (GSAP absent ou ticker suspendu) : tout est visible, aucun aplat. */
.anim [data-intro]{visibility:hidden}
.sans-anim [data-intro]{visibility:visible}
.sans-anim .decoupe__aplat{display:none}
.sans-anim .etapes__progres{transform:none}
.sans-anim .etape__num{background:var(--encre);color:var(--abricot)}

/* ===== Prestations ===== */
.prestations{background:var(--papier);border-block:1.5px solid var(--encre)}
/* Cartes alignées en haut (SPEC-evolutions-4 §G) : un détail déplié n'étire pas ses voisines. Chaque carte porte ses quatre
   bordures ; les bordures voisines se superposent (marges négatives de 1,5 px compensées par le padding de la liste). */
.triptyque{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;list-style:none;padding:1.5px 0 0 1.5px}
.triptyque__carte{display:grid;grid-template-rows:auto auto;min-width:0;margin:-1.5px 0 0 -1.5px;border:1.5px solid var(--encre);background:var(--creme)}
.triptyque__photo{aspect-ratio:4/3;background:var(--sombre);border-bottom:1.5px solid var(--encre)}
.triptyque__corps{display:grid;gap:12px;padding:28px clamp(20px,2.4vw,32px) 28px;align-content:start}
.triptyque__icone{width:56px;height:56px;margin-bottom:8px}
.triptyque__corps h3{font-family:var(--ff-titre);font-size:clamp(1.8rem,2.4vw,2.2rem);line-height:1.05}
.triptyque__corps p{color:var(--gris);font-size:1rem}
.prestations__sous-titre{margin-top:clamp(40px,5vw,64px);margin-bottom:20px;font-family:var(--ff-titre);font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.1}
/* « Et aussi » (SPEC-evolutions-4 §H) : cartes horizontales (icône 48 px à gauche, texte à droite) sur deux colonnes à partir
   de 861 px, une seule en dessous ; alignées en haut, le cinquième élément occupe seul sa ligne à la largeur d'une colonne. */
.grille-prestations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;list-style:none}
.prestation{display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;padding:22px clamp(18px,2vw,26px);border:1.5px solid var(--encre);background:var(--creme);min-width:0;align-items:start}
.prestation__icone{width:48px;height:48px;margin-top:2px}
.prestation__corps{display:grid;gap:10px;min-width:0}
.prestation h4{font-family:var(--ff-texte);font-size:1.1rem;font-weight:600;line-height:1.3}
.prestation p{color:var(--gris);font-size:.95rem}
.prestation__bois{margin-top:8px;padding-top:12px;border-top:1px dashed var(--ligne-forte);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--encre)!important}
.prestation__plus{font-size:.95rem}
.prestation__plus summary{display:inline-flex;align-items:center;gap:.4em;min-height:32px;cursor:pointer;font-weight:600;color:var(--petrole);list-style:none}
.prestation__plus summary::-webkit-details-marker{display:none}
.prestation__plus summary .icone{width:16px;height:16px;transition:transform .3s}
.prestation__plus[open] summary .icone{transform:rotate(45deg)}
.prestation__detail{display:grid;gap:.6em;margin-top:8px;color:var(--gris)}
.prestation__detail a{color:var(--petrole)}

/* ===== Parcours ===== */
.parcours__grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.parcours__colle{position:sticky;top:calc(var(--h-entete) + var(--barre-admin-h) + 32px);display:grid;gap:28px}
.parcours__photo,.methode__photo{margin:0}
.parcours__photo .decoupe{aspect-ratio:4/5;background:var(--sombre)}
.methode__photo .decoupe{aspect-ratio:5/4;background:var(--sombre)}
.parcours__photo figcaption,.methode__photo figcaption{margin-top:12px;font-size:.82rem;color:var(--gris)}
.citation{margin:0;padding-left:20px;border-left:3px solid var(--abricot)}
.citation p{font-family:var(--ff-titre);font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.2;color:var(--petrole)}
.citation__auteur{margin-top:10px;font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.parcours__texte{display:grid;gap:28px;min-width:0}
.parcours__texte .entete-section{margin-bottom:0}
.parcours__intro{max-width:60ch}
.frise{position:relative;list-style:none;display:grid;gap:0;padding-left:0;margin-top:8px}
.frise::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:1.5px;background:var(--ligne-forte)}
.frise__etape{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:20px;padding-bottom:28px}
.frise__etape:last-child{padding-bottom:0}
.frise__point{position:relative;z-index:1;width:20px;height:20px;margin-top:4px;border:1.5px solid var(--encre);background:var(--abricot);border-radius:50%}
.frise__corps{display:grid;gap:6px;min-width:0}
.frise__corps h3{font-family:var(--ff-texte);font-size:1.1rem;font-weight:600;line-height:1.3}
.frise__corps p{color:var(--gris);max-width:58ch}

/* ===== Réalisations (fond papier, SPEC-evolutions-3 §3) ===== */
.realisations{overflow:hidden;background:var(--papier);border-top:1.5px solid var(--encre)}
/* Carrousel (SPEC-evolutions-4 §E) : piste en défilement horizontal natif avec accroche (scroll-snap), 3 cartes visibles
   au-delà de 1024 px, 2 entre 700 et 1024, 1 en dessous ; fonctionne sans JavaScript (barre de défilement fine, molette,
   tactile). Les commandes (Précédent / Suivant, compteur) sont activées par site.js et masquées sans lui. */
.carrousel{--carrousel-gap:clamp(20px,2.4vw,32px);--carrousel-n:3}
/* Remplissage de 10 px (haut et côtés) compensé par des marges négatives : la piste rogne son contenu (overflow), ce remplissage
   laisse passer le contour de focus des cartes (2 px + 6 px) ; scroll-padding-inline garde l'accroche des cartes alignée sur le titre. */
.liste-real{display:flex;gap:var(--carrousel-gap);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 10px 14px;margin:-10px -10px 0;scroll-padding-inline:10px;scrollbar-width:thin;scrollbar-color:var(--ligne-forte) transparent;-webkit-overflow-scrolling:touch}
.liste-real::-webkit-scrollbar{height:6px}
.liste-real::-webkit-scrollbar-thumb{background:var(--ligne-forte);border-radius:3px}
.liste-real::-webkit-scrollbar-track{background:transparent}
.liste-real:focus-visible{outline:2px solid var(--encre);outline-offset:4px}
.carrousel__carte{flex:0 0 calc((100% - var(--carrousel-gap) * (var(--carrousel-n) - 1)) / var(--carrousel-n));min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.carrousel__carte:focus-visible{outline:2px solid var(--encre);outline-offset:6px}
.carrousel__commandes{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
html:not(.js) .carrousel__commandes{display:none}
/* Boutons « trait de scie » simplifiés : bord encre, 44 px, flèche ; inactifs aux extrémités (aria-disabled) */
.carrousel__bouton{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:44px;min-width:44px;padding:0 16px;border:1.5px solid var(--encre);border-radius:2px;background:transparent;color:var(--encre);font:inherit;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.carrousel__bouton .icone{width:18px;height:18px;transition:transform .3s}
/* Le pictogramme « fleche » pointe à droite : celui de Précédent est retourné au repos (la règle .lien-fleche .icone--retour
   ne s'applique pas ici), le survol ne fait que le décaler de 3 px */
.carrousel__bouton--precedent .icone{transform:rotate(180deg)}
.carrousel__bouton:hover,.carrousel__bouton:focus-visible{background:var(--encre);color:var(--abricot)}
.carrousel__bouton--suivant:hover .icone{transform:translateX(3px)}
.carrousel__bouton--precedent:hover .icone{transform:rotate(180deg) translateX(3px)}
.carrousel__bouton[aria-disabled="true"]{opacity:.35;cursor:default}
.carrousel__bouton[aria-disabled="true"]:hover{background:transparent;color:var(--encre)}
.carrousel__bouton[aria-disabled="true"]:hover .icone{transform:none}
.carrousel__bouton--precedent[aria-disabled="true"]:hover .icone{transform:rotate(180deg)}
.carrousel__compteur{font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--gris)}
.real{margin:0;display:grid;gap:14px;min-width:0}
.real .decoupe{aspect-ratio:4/3;background:var(--sombre)}
.real figcaption{display:grid;gap:4px;padding-top:12px;border-top:1.5px solid var(--encre)}
.real h3{font-family:var(--ff-titre);font-size:1.6rem;line-height:1.1}
.real__lieu{font-size:.88rem;font-weight:600;color:var(--petrole)}
.real__detail{font-size:.9rem;color:var(--gris)}
/* Avant / après : sans JS, deux images côte à côte ; avec JS, superposées + curseur (SPEC-evolutions-4 §I : le curseur
   recouvre l'image sur pointeur fin à partir de 768 px ; sinon il est affiché sous l'image, entre deux boutons). */
.avant-apres{position:relative}
.avant-apres__cadre{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--sombre);--pos:50%;touch-action:pan-y}
.avant-apres__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sombre)}
.avant-apres__img img{width:100%;height:100%;object-fit:cover}
.avant-apres__etiquette{position:absolute;top:10px;left:10px;padding:.3em .6em;background:var(--sombre);color:var(--creme);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.avant-apres.est-actif .avant-apres__cadre{display:block;aspect-ratio:4/3}
.avant-apres.est-actif .avant-apres__img{position:absolute;inset:0;aspect-ratio:auto}
.avant-apres.est-actif .avant-apres__img--apres{clip-path:inset(0 0 0 var(--pos))}
.avant-apres.est-actif .avant-apres__img--apres .avant-apres__etiquette{left:auto;right:10px}
.avant-apres.est-actif .avant-apres__cadre::before{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--creme);z-index:2;pointer-events:none}
/* Commandes sous l'image (pointeur grossier ou largeur < 768 px) : bouton « Avant », curseur natif stylé (piste pleine
   largeur, pouce 44 px), bouton « Après ». touch-action:pan-y sur le curseur : le glissement horizontal pilote la coupe
   sans faire défiler la piste du carrousel, le glissement vertical fait défiler la page. */
.avant-apres__commandes{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:10px}
.avant-apres__bouton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;border:1.5px solid var(--encre);border-radius:2px;background:transparent;color:var(--encre);font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.avant-apres__bouton:hover,.avant-apres__bouton:focus-visible{background:var(--encre);color:var(--abricot)}
.avant-apres__curseur{display:block;margin:0;min-width:0}
.avant-apres__curseur input{display:block;width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:ew-resize;touch-action:pan-y}
.avant-apres__curseur input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--ligne-forte)}
.avant-apres__curseur input::-moz-range-track{height:4px;border-radius:2px;background:var(--ligne-forte)}
.avant-apres__curseur input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px;margin-top:-20px;border:1.5px solid var(--encre);border-radius:50%;background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2a31' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat;box-shadow:0 2px 8px rgba(28,42,49,.25)}
.avant-apres__curseur input::-moz-range-thumb{width:44px;height:44px;border:1.5px solid var(--encre);border-radius:50%;background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2a31' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat;box-shadow:0 2px 8px rgba(28,42,49,.25)}
.avant-apres__curseur input:focus-visible{outline:none}
.avant-apres__curseur input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--encre);outline-offset:3px;background-color:var(--abricot)}
.avant-apres__curseur input:focus-visible::-moz-range-thumb{outline:2px solid var(--encre);outline-offset:3px;background-color:var(--abricot)}
/* Poignée visible du mode superposé : centrée sur la ligne de séparation, reflète le focus du curseur (classe est-focus, site.js) */
.avant-apres__poignee{display:none;position:absolute;top:50%;left:var(--pos);z-index:4;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--creme);border:1.5px solid var(--encre);box-shadow:0 2px 8px rgba(28,42,49,.35);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2a31' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");background-size:22px;background-repeat:no-repeat;background-position:center}
.avant-apres.est-focus .avant-apres__poignee{outline:2px solid var(--encre);outline-offset:3px;background-color:var(--abricot)}
/* Pointeur fin à partir de 768 px : le curseur recouvre toute l'image (pouce invisible, poignée visible), boutons masqués */
@media (pointer:fine) and (min-width:768px){
  .avant-apres.est-actif .avant-apres__commandes{position:absolute;inset:0;z-index:3;display:block;margin:0}
  .avant-apres.est-actif .avant-apres__bouton{display:none}
  .avant-apres.est-actif .avant-apres__curseur{position:absolute;inset:0}
  .avant-apres.est-actif .avant-apres__curseur input{position:absolute;inset:0;height:100%}
  .avant-apres.est-actif .avant-apres__curseur input::-webkit-slider-runnable-track{height:100%;background:transparent}
  .avant-apres.est-actif .avant-apres__curseur input::-moz-range-track{height:100%;background:transparent}
  .avant-apres.est-actif .avant-apres__curseur input::-webkit-slider-thumb{width:40px;height:40px;margin-top:0;border:0;background:transparent;box-shadow:none;opacity:0}
  .avant-apres.est-actif .avant-apres__curseur input::-moz-range-thumb{width:40px;height:40px;border:0;background:transparent;box-shadow:none;opacity:0}
  .avant-apres.est-actif .avant-apres__poignee{display:block}
}

/* ===== Méthode (fond crème) ===== */
.methode{border-top:1.5px solid var(--encre)}
.methode__grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.methode__colle{position:sticky;top:calc(var(--h-entete) + var(--barre-admin-h) + 40px);display:grid;gap:24px}
.etapes{position:relative}
.etapes__liste{list-style:none;display:grid}
.etapes__rail{position:absolute;left:23px;top:24px;bottom:24px;width:1.5px;background:var(--ligne)}
.etapes__progres{position:absolute;inset:0;background:var(--encre);transform:scaleY(0);transform-origin:top}
.etape{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:24px;padding-bottom:clamp(40px,5vw,64px)}
.etape:last-child{padding-bottom:0}
.etape__num{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--encre);background:var(--creme);font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums;transition:background .4s,color .4s}
.etape.est-actif .etape__num{background:var(--encre);color:var(--abricot)}
.etape__corps{display:grid;gap:10px;padding-top:8px;min-width:0}
.etape h3{font-family:var(--ff-titre);font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.05}
.etape p{color:var(--gris);max-width:52ch}
.etape__delai{justify-self:start;margin-top:4px;padding:.35em .75em;border:1px solid var(--ligne-forte);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--encre)!important}
/* Pictogramme « cheminée » de la dernière étape (84 px) : poutre et chapeau de cheminée en accent */
.cheminee{width:84px;height:84px;margin-top:8px}
.cheminee .ic-accent{fill:var(--abricot)}

/* ===== Bandeau d'appel ===== */
/* overflow-x:clip : le titre glisse de ±30 px au défilement (site.js) ; sans ce clip, il déborde du viewport sous 400 px.
   Le fond sombre denté est porté par ::before (masque) ; derrière lui, la section est crème en haut (méthode) et papier
   en bas (zone) : les creux des dents laissent voir la couleur de la section voisine. */
.appel{position:relative;isolation:isolate;overflow-x:clip;color:var(--creme);padding-block:clamp(80px,10vw,128px);background:linear-gradient(var(--creme) 0 50%,var(--papier) 50% 100%)}
.appel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sombre);
  -webkit-mask:linear-gradient(#000 0 0) center / 100% calc(100% - 22px) no-repeat,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top / 24px 12px repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom / 24px 12px repeat-x;
          mask:linear-gradient(#000 0 0) center / 100% calc(100% - 22px) no-repeat,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top / 24px 12px repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom / 24px 12px repeat-x}
.appel__grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:end}
.appel__titre{font-family:var(--ff-titre);font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.01em}
.appel__droite{display:grid;gap:20px;justify-items:start}
.appel__droite p{color:var(--creme-86)}
.appel__tel{font-size:.95rem}
.appel__tel a,.menu-mobile__tel a{display:inline-block;min-height:24px;color:var(--creme);font-weight:600;text-underline-offset:.18em}
.appel__tel a:hover,.appel__tel a:focus-visible,.pied address a:hover,.pied address a:focus-visible,.menu-mobile__tel a:hover,.menu-mobile__tel a:focus-visible,.coord--clair a:hover,.coord--clair a:focus-visible{color:var(--abricot)}

/* ===== Zone (fond papier) : en-tête, carte (image statique puis carte interactive après clic), secteurs =====
   Empilement (en-tête, carte, secteurs) jusqu'à 1024 px ; deux colonnes à partir de 1025 px (voir plus bas). */
.zone{background:var(--papier)}
.zone__conteneur{display:grid;gap:clamp(28px,4vw,44px)}
.zone__entete{display:grid;gap:18px}
.zone__entete .texte-riche{max-width:62ch;color:var(--gris)}
.carte-zone{margin:0}
.carte-zone > * + *{margin-top:14px}
.carte-zone__scene{position:relative}
/* Le cadre a le ratio de l'image affichée (5:4 = media/carte-zone-apercu.webp 1200×960 ; 800/620 sous 861 px) ;
   carte.js recadre l'isochrone dans ce ratio (fitBounds, marges laissant la place à l'encart). */
.carte-zone__cadre{position:relative;aspect-ratio:5/4;overflow:hidden;border:1.5px solid var(--encre);background:var(--papier)}
.carte-zone__cadre:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
/* Sélecteur limité à l'image statique : la règle ne doit pas atteindre l'emblème du pin, lui aussi dans le cadre */
.carte-zone__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* La classe maplibregl-map posée par MapLibre impose position:relative : la double classe garde le conteneur en absolu */
.carte-zone__map,.carte-zone__map.maplibregl-map{position:absolute;inset:0;font-family:var(--ff-texte)}
.carte-zone__encart{position:absolute;left:16px;bottom:16px;z-index:2;max-width:calc(100% - 32px);display:grid;gap:2px;padding:14px 18px;background:var(--papier);border:1.5px solid var(--encre);box-shadow:0 8px 28px rgba(28,42,49,.12)}
.carte-zone__kicker{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--petrole)}
.carte-zone__nom{font-family:var(--ff-titre);font-size:1.5rem;line-height:1.1;color:var(--encre)}
.carte-zone__ligne{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.9rem;color:var(--gris)}
.carte-zone__sw{flex:none;width:22px;height:14px;border-radius:2px;background:rgba(255,172,104,.35);border:2px solid #e9864a}
.carte-zone__bouton{position:absolute;right:16px;bottom:16px;z-index:2;background:var(--papier)}
.carte-zone__bouton[aria-busy="true"]{cursor:progress;opacity:.75}
html:not(.js) .carte-zone__bouton,html:not(.js) .carte-zone__info,.carte-zone.est-interactive .carte-zone__bouton{display:none}
.carte-zone__etat{font-size:.88rem;font-weight:500;color:var(--petrole)}
.carte-zone__etat:empty{margin:0}
.carte-zone__legende{display:grid;gap:6px}
.carte-zone__info{font-size:.88rem;color:var(--gris);max-width:80ch}
.carte-zone__info a{color:var(--petrole)}
.carte-zone__attribution{font-size:.76rem;color:var(--gris)}
/* Pin : MapLibre pose position:absolute et sa transformation sur .carte-zone__pin ; le disque blanc est un élément interne
   en position relative et l'emblème y est centré par position absolue + inset:0 + margin:auto, avec des dimensions
   explicites (54×30, 44×24 sur mobile) : indépendant de display:grid, de la feuille MapLibre et des règles d'image du cadre. */
.carte-zone__pin{width:72px;height:72px;padding:0;margin:0;border:0;background:none}
.carte-zone__disque{position:relative;display:block;width:100%;height:100%;border-radius:50%;background:#fff;box-shadow:0 8px 24px rgba(60,95,107,.22),0 0 0 5px rgba(255,172,104,.35)}
.carte-zone__pin .carte-zone__disque img{position:absolute;inset:0;width:54px;height:30px;max-width:none;margin:auto;padding:0;object-fit:contain;display:block;transform:translateY(1px)}
.carte-zone .maplibregl-ctrl-group{border-radius:0;border:1.5px solid var(--encre);box-shadow:none;background:var(--papier)}
.carte-zone .maplibregl-ctrl-group button{width:44px;height:44px}
.carte-zone .maplibregl-ctrl-group button + button{border-top:1px solid var(--ligne-forte)}
/* La feuille MapLibre est injectée après site.css : spécificité relevée pour l'emporter sur ses règles de focus et d'attribution */
.carte-zone .maplibregl-ctrl button:focus-visible,.carte-zone .maplibregl-ctrl-group button:focus:focus-visible{outline:2px solid var(--encre);outline-offset:-4px;box-shadow:none}
.carte-zone .maplibregl-ctrl-attrib,.carte-zone .maplibregl-ctrl-attrib.maplibregl-compact{background:rgba(249,246,241,.92);font-size:11px;color:var(--encre)}
.carte-zone .maplibregl-ctrl-attrib.maplibregl-compact{min-height:24px}
.carte-zone .maplibregl-cooperative-gesture-screen{background:rgba(27,52,64,.8);color:var(--creme);font-family:inherit;font-size:1rem}
/* Secteurs puis hors-zone, empilés à toutes les largeurs (sous la carte jusqu'à 1024 px, dans la colonne de texte au-delà) ;
   la liste est sur deux colonnes (une seule sous 561 px) : trois colonnes dans 418 à 561 px hachaient les libellés. */
.zone__bas{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
/* Deux colonnes à partir de 1025 px (SPEC-evolutions-3 §1) : texte + secteurs (5/12) | carte (7/12), gouttière 48 px, alignées
   en haut ; le bouton quitte l'image (la colonne est trop étroite pour l'encart et le bouton côte à côte) et se place sous le cadre. */
@media (min-width:1025px){
  .zone__conteneur{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:48px;row-gap:clamp(28px,3vw,40px);align-items:start}
  .zone__entete{grid-column:1;grid-row:1}
  .carte-zone{grid-column:2;grid-row:1 / span 2}
  .zone__bas{grid-column:1;grid-row:2}
  /* Scène en grille : le cadre et l'encart partagent la première cellule (l'encart, calé en bas à gauche, reste posé sur
     l'image sans positionnement absolu, donc sans dépendre de la hauteur du bouton) ; le bouton occupe la seconde ligne. */
  .carte-zone__scene{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  .carte-zone__cadre,.carte-zone__encart{grid-column:1;grid-row:1}
  .carte-zone__encart{position:relative;left:auto;bottom:auto;z-index:2;align-self:end;justify-self:start;margin:0 0 16px 16px;max-width:calc(100% - 32px)}
  .carte-zone__bouton{position:relative;right:auto;bottom:auto;grid-row:2;justify-self:start;margin-top:14px}
}
.communes{columns:2;column-gap:24px;list-style:none;border-top:1.5px solid var(--encre);padding-top:16px}
.communes li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--ligne);font-size:.95rem}
.communes li:first-child{font-weight:600}
.rayon{display:flex;align-items:center;gap:14px;font-size:.92rem;color:var(--gris)}
.rayon .icone{width:40px;height:40px;color:var(--encre)}

/* ===== FAQ (fond crème) ===== */
.faq{border-top:1.5px solid var(--encre)}
.faq__grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq__liste{border-top:1.5px solid var(--encre)}
.faq__item{border-bottom:1px solid var(--ligne-forte)}
.faq__item h3{font-family:var(--ff-texte);font-size:1.0625rem;font-weight:600}
.faq__question{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:64px;padding:18px 0;font-weight:600;text-align:left;color:var(--encre);background:none;border:0;cursor:pointer}
.faq__question:hover{color:var(--petrole)}
.faq__signe{position:relative;flex-shrink:0;width:16px;height:16px}
.faq__signe::before,.faq__signe::after{content:"";position:absolute;left:0;right:0;top:7.25px;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.faq__signe::after{transform:rotate(90deg)}
.faq__question[aria-expanded="true"] .faq__signe::after{transform:rotate(0)}
.faq__reponse{overflow:hidden}
.faq__texte{padding:0 40px 22px 0;color:var(--gris);max-width:62ch}

/* ===== Contact (fond papier, formulaire crème) ===== */
.contact{background:var(--papier);border-top:1.5px solid var(--encre)}
.contact__grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact__infos{display:grid;gap:24px;align-content:start}
.coord{display:grid;gap:18px;border-top:1.5px solid var(--encre);padding-top:20px;margin:0}
.coord div{display:grid;gap:4px}
.coord dt{display:flex;align-items:center;gap:.6em;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.coord dt .icone{width:20px;height:20px;color:var(--encre)}
.coord dd{margin:0;font-size:1.05rem}
.coord a{display:inline-block;min-height:24px;font-weight:600;color:var(--petrole)}
.coord--clair{border-top-color:var(--ligne-claire)}
.coord--clair dt{color:var(--creme-78)}
.coord--clair dt .icone{color:var(--abricot)}
.coord--clair a{color:var(--creme)}
.formulaire{display:grid;gap:22px;padding:clamp(24px,3.4vw,44px);background:var(--creme);border:1.5px solid var(--encre)}
.formulaire__note{font-size:.88rem;color:var(--gris)}
.ligne-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.champ{display:grid;gap:8px;min-width:0}
.champ label,.champ legend{font-size:.92rem;font-weight:600}
.champ .indice{font-weight:400;color:var(--gris)}
.champ input:not([type="radio"]):not([type="checkbox"]),.champ textarea{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:1rem;color:var(--encre);background:var(--papier);border:1.5px solid var(--encre);border-radius:2px}
.champ textarea{min-height:140px;resize:vertical}
.champ input:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
.champ [aria-invalid="true"]{border-color:var(--erreur);border-width:2px}
.champ__erreur{display:flex;gap:.4em;font-size:.88rem;font-weight:600;color:var(--erreur)}
.champ__erreur::before{content:"";flex:0 0 16px;height:16px;margin-top:.2em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16v1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16v1'/%3E%3C/svg%3E") center / contain no-repeat}
fieldset.champ{border:0;padding:0;margin:0;min-width:0}
.choix{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.choix label{position:relative;display:inline-flex}
.choix input{position:absolute;opacity:0;width:1px;height:1px}
.choix span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--encre);border-radius:2px;font-size:.92rem;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
.choix input:checked + span{background:var(--encre);color:var(--abricot)}
.choix input:checked + span::before{content:"";width:10px;height:6px;margin-right:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.choix input:focus-visible + span{outline:2px solid var(--encre);outline-offset:3px}
.case{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.case input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--petrole);flex-shrink:0}
.case label{font-weight:400;font-size:.95rem;line-height:1.5}
.case a{color:var(--petrole);font-weight:500}
.champ--case [aria-invalid="true"]{outline:2px solid var(--erreur);outline-offset:2px}
.resume-erreurs{padding:16px 18px;border:2px solid var(--erreur);background:var(--papier)}
.resume-erreurs h3{font-family:var(--ff-texte);font-size:1rem;font-weight:700;color:var(--erreur)}
.resume-erreurs ul{margin-top:8px;padding-left:1.2em;display:grid;gap:4px}
.resume-erreurs a{color:var(--erreur);font-weight:600}
.merci{display:grid;gap:14px;padding:clamp(24px,3.4vw,44px);background:var(--sombre);color:var(--creme)}
.merci__icone{width:40px;height:40px;color:var(--abricot)}
.merci h2,.merci h3{font-family:var(--ff-titre);font-size:2.2rem;line-height:1.05}
.merci p{color:var(--creme-86)}
.merci a{color:var(--creme)}
.rgpd{font-size:.82rem;color:var(--gris);display:grid;gap:.5em}
.rgpd a{color:var(--petrole)}

/* ===== Pied de page ===== */
.pied{background:var(--sombre);color:var(--creme);padding-top:clamp(56px,7vw,96px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 32px)}
.pied__grille{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.pied .logo__nom{color:var(--creme)}
/* Emblème du pied (SPEC-evolutions-4 §D) : 80 px de haut (144 px de large), au-dessus du nom */
.logo--pied{flex-direction:column;align-items:flex-start;gap:14px;font-size:1.7rem}
.logo--pied .logo__embleme{width:144px;height:80px}
.pied__accroche{margin-top:14px;max-width:32ch;color:var(--creme-86)}
.pied h2{font-family:var(--ff-texte);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-78);margin-bottom:14px}
.pied ul{list-style:none;display:grid;gap:4px}
.pied a{text-decoration:none;display:inline-flex;min-height:36px;align-items:center}
.pied a:hover{text-decoration:underline}
.pied address{font-style:normal;line-height:1.8;color:var(--creme-86)}
.pied address a{color:var(--creme);font-weight:600;min-height:24px;display:inline-block}
.pied__engagements li{display:flex;gap:10px;align-items:start;padding:4px 0;color:var(--creme-86)}
.pied__engagements .icone{width:20px;height:20px;margin-top:.25em;color:var(--abricot)}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--ligne-claire);font-size:.85rem;color:var(--creme-78)}
.pied__legal{display:flex;flex-wrap:wrap;gap:4px 24px}
.pied__legal a,.pied__signature a{color:var(--creme)}
.pied__signature{display:flex;flex-wrap:wrap;gap:4px .5em;align-items:center}

/* ===== Barre d'action mobile ===== */
.barre-mobile{display:none}

/* ===== Pages secondaires (mentions, confidentialité, 404) ===== */
.entete--simple .nav__liste{display:flex}
.page{padding-top:calc(var(--h-entete) + var(--barre-admin-h) + env(safe-area-inset-top,0px) + clamp(32px,6vw,72px));padding-bottom:clamp(72px,10vw,140px)}
.page__conteneur{max-width:calc(820px + var(--gouttiere) * 2);display:grid;gap:clamp(28px,4vw,44px)}
.page__entete{display:grid;gap:18px}
.fiche-legale{display:grid;gap:0;margin:0;border-top:1.5px solid var(--encre)}
.fiche-legale div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 24px;padding:12px 0;border-bottom:1px solid var(--ligne)}
.fiche-legale dt{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);padding-top:.2em}
.fiche-legale dd{margin:0}
.fiche-legale a{display:inline-block;min-height:24px;color:var(--petrole);font-weight:600}
.page__corps{max-width:68ch}
.page--erreur .page__conteneur{gap:24px;min-height:40vh;align-content:start}
.page__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px}

/* ===== Maintenance (rendue dans le gabarit, fond sombre sur toute la page) ===== */
.page-maintenance{background:var(--sombre);color:var(--creme)}
.maintenance{width:100%;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--gouttiere)}
.maintenance__carte{display:grid;gap:20px;justify-items:start;width:100%;max-width:640px;padding:clamp(28px,5vw,56px);border:1.5px solid var(--ligne-claire-forte)}
.maintenance__texte a,.maintenance .coord a{color:var(--creme);text-decoration:underline;text-underline-offset:.18em;overflow-wrap:anywhere}
.maintenance__texte a:hover,.maintenance .coord a:hover,.maintenance__texte a:focus-visible,.maintenance .coord a:focus-visible{color:var(--abricot)}
.maintenance__embleme{width:72px;height:72px}
.maintenance__nom{font-family:var(--ff-titre);font-size:1.6rem;line-height:1}
.maintenance__titre{font-family:var(--ff-titre);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1}
.maintenance__texte{color:var(--creme-86);max-width:52ch}
.maintenance .coord{width:100%}
.maintenance .surtitre{color:var(--creme-78)}

/* ===== Responsive ===== */
@media (max-width:1080px){
  .nav__liste,.entete .alpx-trait{display:none}
  .entete--simple .nav__liste{display:flex}
  .menu-bouton{display:inline-flex}
  .pied__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .carrousel{--carrousel-n:2}
}
@media (max-width:860px){
  :root{--h-entete:64px}
  .hero__grille,.parcours__grille,.methode__grille,.faq__grille,.contact__grille,.appel__grille{grid-template-columns:minmax(0,1fr)}
  .cadre-photo{aspect-ratio:4/3;min-height:0;max-height:none}
  .parcours__colle,.methode__colle{position:static}
  .parcours__colle{order:2}
  .parcours__photo .decoupe{aspect-ratio:4/3}
  .methode__photo{display:none}
  .triptyque{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille-prestations{grid-template-columns:minmax(0,1fr)}
  /* Zone : image mobile 800×620, encart et bouton sous la carte (plus de superposition) */
  .carte-zone__cadre{aspect-ratio:800/620}
  .carte-zone__encart{position:static;max-width:none;margin-top:14px;box-shadow:none}
  /* Le bouton reste positionné (relative) : son aplat denté interne (site.js) est absolu par rapport à lui */
  .carte-zone__bouton{position:relative;right:auto;bottom:auto;margin-top:14px}
  .carte-zone__pin{width:60px;height:60px}
  .carte-zone__pin .carte-zone__disque img{width:44px;height:24px}
  .fiche-legale div{grid-template-columns:minmax(0,1fr)}
  .page-accueil{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  /* Deux boutons de même hauteur (48 px) et de même largeur (SPEC-evolutions-4 §J) */
  .barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;align-items:stretch;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 10px);background:var(--sombre);border-top:1px solid var(--ligne-claire);transition:transform .45s cubic-bezier(.7,0,.2,1),visibility .45s}
  .barre-mobile.est-cache{transform:translateY(110%);visibility:hidden}
  .barre-mobile__tel{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 12px;border:1.5px solid var(--ligne-claire-forte);border-radius:2px;color:var(--creme);font-weight:600;font-size:.9rem;text-align:center;text-decoration:none}
  .barre-mobile__tel .icone{width:18px;height:18px}
  .barre-mobile .alpx-trait{width:100%;min-height:48px;padding-top:0;padding-bottom:0}
}
@media (max-width:560px){
  .logo{font-size:1.2rem}
  .logo--pied{font-size:1.5rem}
  .logo--pied .logo__embleme{width:130px;height:72px}
  .surtitre{font-size:.7rem;letter-spacing:.12em}
  .surtitre::before{flex-basis:36px}
  .entete--simple .nav__liste li:not(:first-child){display:none}
  .reassurance{grid-template-columns:minmax(0,1fr)}
  .reassurance li,.reassurance li + li{padding:14px 0;border-left:0;border-bottom:1px solid var(--ligne)}
  .triptyque{grid-template-columns:minmax(0,1fr)}
  .ligne-champs{grid-template-columns:minmax(0,1fr)}
  .communes{columns:1}
  .pied__grille{grid-template-columns:minmax(0,1fr)}
  .hero__actions .alpx-trait,.page__actions .alpx-trait,.carte-zone__bouton{width:100%}
  .carte-zone__bouton{font-size:.76rem;letter-spacing:.05em;padding:1em .8em}
  .carte-zone.est-interactive .carte-zone__cadre{aspect-ratio:auto;height:min(72vh,440px)}
  .avant-apres__cadre{grid-template-columns:minmax(0,1fr)}
  .faq__texte{padding-right:0}
}
@media (max-width:699px){
  .carrousel{--carrousel-n:1}
}
@media (max-width:400px){
  /* Barre d'action mobile : « Appeler » + « Demander un devis » tiennent dans 320 px (aucun débordement horizontal) */
  .barre-mobile{gap:8px;padding-left:12px;padding-right:12px}
  .barre-mobile__tel{padding:0 10px;font-size:.85rem}
  .barre-mobile .alpx-trait{font-size:.68rem;letter-spacing:.04em;padding-left:.6em;padding-right:.6em}
}
@media (max-width:360px){
  .logo:not(.logo--pied){font-size:1.05rem}
  .menu-mobile__liste a{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .anim [data-intro]{visibility:visible}
  .decoupe__aplat{display:none}
  .etapes__progres{transform:none}
  .etape__num{background:var(--encre);color:var(--abricot)}
  .liste-real{scroll-behavior:auto}
  .fil-plomb__curseur{transition:none}
}
@media print{
  .entete,.menu-mobile,.barre-mobile,.barre-admin,.fil-plomb,.carrousel__commandes,.progression,.lien-evitement,.formulaire,.decoupe__aplat{display:none!important}
  .liste-real{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0}
  body{background:#fff;color:#000;padding:0}
  .hero{padding-top:0}
}

/* ===== Consentement aux cookies (SPEC-mesure-audience §4) — présent seulement avec un identifiant GA4 =====
   Bandeau non modal en bas de page (région), panneau « Personnaliser » modal (dialogue + inert),
   bouton flottant rond en bas à gauche. Palette : papier/encre, accent abricot sur encre (8:1). */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:140;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--papier);color:var(--encre);border-top:1.5px solid var(--encre);box-shadow:0 -8px 32px rgba(28,42,49,.14);padding-bottom:env(safe-area-inset-bottom,0px);animation:consent-entree .5s cubic-bezier(.2,.8,.2,1)}
@keyframes consent-entree{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.consent__inner{width:100%;max-width:calc(var(--max) + var(--gouttiere) * 2);margin-inline:auto;padding:18px var(--gouttiere) 20px;display:grid;gap:14px}
.consent__haut{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px}
.consent__titre{font-family:var(--ff-titre);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.1;outline-offset:4px}
.consent__continuer{display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:0 .2em;margin-right:-.2em;font:inherit;font-size:.9rem;font-weight:600;color:var(--petrole);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:.18em}
.consent__continuer:hover{text-decoration-thickness:2px}
.consent__texte{font-size:.95rem;max-width:80ch;color:var(--encre)}
.consent__texte p{margin:0}
.consent__actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px}
.consent__bouton.alpx-trait{width:100%;min-height:48px;padding:1em 1.1em;font-size:.82rem;text-align:center}
.consent__bouton .alpx-trait__fleche{display:none}
/* Rien de focalisable sous le bandeau (RGAA 10.8 / 12.8) : consentement.js pose la classe consent-visible sur <html>
   et la hauteur du bandeau dans --consent-h ; la barre d'action mobile (liens déjà présents dans la page) est retirée */
html.consent-visible{scroll-padding-bottom:calc(var(--consent-h,0px) + 16px)}
html.consent-visible body{padding-bottom:var(--consent-h,0px)}
.consent-visible .barre-mobile{display:none}
@media (min-width:1024px){
  .consent__inner{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"haut haut" "texte actions";align-items:end;column-gap:40px}
  .consent__haut{grid-area:haut}
  .consent__texte{grid-area:texte}
  .consent__actions{grid-area:actions;grid-template-columns:repeat(3,max-content);max-width:none}
  .consent__bouton.alpx-trait{width:auto;min-width:168px}
}
@media (max-width:560px){
  .consent__actions{grid-template-columns:minmax(0,1fr);gap:8px}
  .consent__inner{gap:8px;padding-top:10px;padding-bottom:12px}
  .consent__titre{font-size:1.2rem}
  .consent__texte{font-size:.9rem}
  .consent__haut{flex-direction:column;align-items:flex-start;gap:0}
  .consent__continuer{align-self:flex-end;order:-1;margin-top:-6px}
  .consent__bouton.alpx-trait{min-height:44px;padding:.9em 1em;font-size:.78rem}
}

/* Bouton flottant « Gérer mes cookies » : rond, ≥ 44 px, masqué tant qu'aucun choix n'est fait */
.consent-flottant{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:95;transition:background .2s,transform .2s,bottom .45s cubic-bezier(.7,0,.2,1);width:52px;height:52px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--encre);color:var(--abricot);box-shadow:0 4px 14px rgba(28,42,49,.3);cursor:pointer}
.consent-flottant:hover{background:var(--petrole);color:var(--creme);transform:translateY(-2px)}
.consent-flottant:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.consent-flottant svg{width:26px;height:26px}
.consent-flottant__point{fill:currentColor;stroke:none}
/* SPEC-evolutions-4 §K : 16 px du bas par défaut ; au-dessus de la barre d'action mobile seulement quand elle est affichée
   (.barre-mobile sans est-cache, même parent <body>), avec la même courbe que son glissement ; --barre-mobile-h mesurée par site.js */
@media (max-width:860px){
  .barre-mobile:not(.est-cache) ~ .consent-flottant{bottom:calc(var(--barre-mobile-h,68px) + 12px + env(safe-area-inset-bottom,0px))}
}

/* Pied de page : bouton « Gérer mes cookies » présenté comme les liens voisins */
.pied__bouton-lien{display:inline-flex;align-items:center;min-height:36px;padding:0;font:inherit;color:var(--creme);background:none;border:0;cursor:pointer;text-decoration:none}
.pied__bouton-lien:hover{text-decoration:underline}

/* Panneau « Personnaliser » (dialogue modal) */
.consent-panneau{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:var(--gouttiere);background:rgba(27,52,64,.62);overflow-y:auto;animation:consent-voile .3s ease-out}
@keyframes consent-voile{from{opacity:0}to{opacity:1}}
.consent-panneau-ouvert{overflow:hidden}
.consent-panneau__boite{width:100%;max-width:660px;max-height:calc(100vh - var(--gouttiere) * 2);max-height:calc(100dvh - var(--gouttiere) * 2);overflow-y:auto;display:grid;gap:16px;padding:clamp(20px,4vw,36px);background:var(--papier);color:var(--encre);border:1.5px solid var(--encre);box-shadow:0 24px 60px rgba(28,42,49,.35)}
.consent-panneau__haut{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.consent-panneau__titre{font-family:var(--ff-titre);font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.05;outline-offset:4px}
.consent-panneau__fermer{display:inline-flex;align-items:center;gap:.5em;flex-shrink:0;min-height:44px;padding:0 .4em;margin:-6px -.4em 0 0;font:inherit;font-size:.9rem;font-weight:600;color:var(--encre);background:none;border:0;cursor:pointer}
.consent-panneau__fermer .icone{width:18px;height:18px}
.consent-panneau__fermer:hover{color:var(--petrole)}
.consent-panneau__intro{font-size:.95rem;color:var(--gris)}
.consent-categories{border:0;padding:0;margin:0;min-width:0}
.consent-categories__liste{list-style:none;display:grid;border-top:1.5px solid var(--encre)}
.consent-categorie{display:grid;gap:8px;padding:14px 0;border-bottom:1px solid var(--ligne)}
.consent-categorie__tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px}
.consent-categorie__titre{font-family:var(--ff-titre);font-size:1.4rem;line-height:1.1}
.consent-categorie__desc{font-size:.92rem;color:var(--gris)}
.consent-cookies{font-size:.88rem}
.consent-cookies summary{display:inline-flex;align-items:center;min-height:32px;cursor:pointer;font-weight:600;color:var(--petrole);text-decoration:underline;text-underline-offset:.18em}
.consent-cookies ul{list-style:none;display:grid;gap:6px;margin-top:8px;padding-left:12px;border-left:2px solid var(--ligne)}
.consent-cookies code,.consent-panneau__pied code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.92em;background:var(--creme);padding:.1em .35em;border:1px solid var(--ligne)}

/* Interrupteur accessible : <input type="checkbox" role="switch"> stylé ; état porté par la position du curseur et le texte */
.consent-switch{display:inline-flex;align-items:center;gap:12px;min-height:44px}
.consent-switch input{-webkit-appearance:none;appearance:none;flex-shrink:0;width:50px;height:28px;margin:0;border:1.5px solid var(--encre);border-radius:14px;background:var(--creme);position:relative;cursor:pointer;transition:background .2s}
.consent-switch input::before{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--encre);transition:transform .2s,background .2s}
.consent-switch input:checked{background:var(--encre)}
.consent-switch input:checked::before{transform:translateX(22px);background:var(--abricot)}
.consent-switch input:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.consent-switch input:disabled{cursor:not-allowed;border-style:dashed}
.consent-switch label{font-size:.92rem;font-weight:600;cursor:pointer}
.consent-switch input:disabled + label{cursor:default;color:var(--gris)}
.consent-panneau__actions{display:flex;flex-wrap:wrap;gap:12px}
.consent-panneau__actions .consent__bouton.alpx-trait{flex:1 1 auto;width:auto}
.consent-panneau__pied{display:grid;gap:4px;font-size:.85rem;color:var(--gris)}
.consent-panneau__pied a{color:var(--petrole);font-weight:500;min-height:24px;display:inline-block}
@media (max-width:560px){
  .consent-panneau{padding:12px}
  .consent-panneau__boite{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:18px 16px}
  .consent-panneau__actions .consent__bouton.alpx-trait{flex-basis:100%}
  .consent-categorie__tete{flex-direction:column;align-items:flex-start}
}

/* Politique de confidentialité : section générée et tableau des cookies */
.cookies-section{scroll-margin-top:calc(var(--h-entete) + var(--barre-admin-h) + 16px)}
.tableau-cookies__cadre{overflow-x:auto;margin-top:.5em;border-top:1.5px solid var(--encre)}
.tableau-cookies__cadre:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.tableau-cookies{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem}
.tableau-cookies th,.tableau-cookies td{padding:10px 12px 10px 0;border-bottom:1px solid var(--ligne);text-align:left;vertical-align:top}
.tableau-cookies thead th{font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.tableau-cookies tbody th{font-weight:600}
.tableau-cookies code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.95em}
@media (prefers-reduced-motion:reduce){
  .consent,.consent-panneau{animation:none}
  .consent-flottant{transition:none}
  .consent-flottant:hover{transform:none}
}
@media print{
  .consent,.consent-flottant,.consent-panneau{display:none!important}
}