/* ==========================================================================
   Monclar Studio : refonte, direction retenue
   Typographie (choix de Clara sur la planche typos/, cartes T12 et T01, 17 octobre 2026) :
   titres = Boska italique (ITF, Fontshare, licence ITF FFL : fonts/LICENSE-boska.txt),
   textes, labels, boutons, menus, données = Hanken Grotesk (OFL : fonts/LICENSE-hanken-grotesk.txt).
   Deux familles, auto-hébergées, aucune police mono. Aucune numérotation décorative.
   ========================================================================== */
@font-face { font-family: "Boska"; src: url(../fonts/boska-500-italic.woff2) format("woff2");
  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Boska"; src: url(../fonts/boska-400-italic.woff2) format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Boska"; src: url(../fonts/boska-700-italic.woff2) format("woff2");
  font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Super Chips"; src: url(../fonts/super-chips-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(../fonts/hanken-grotesk-var-latin.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; src: url(../fonts/hanken-grotesk-var-latin-ext.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; src: url(../fonts/hanken-grotesk-400-italic-latin.woff2) format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* palette (27 octobre 2026) : papier #F9F6F2, vert #184840, encre #0C0B09, et l'étincelle orange brûlé #D9753B (remplace l’ancien fond jaune pâle).
     Le vert reste dominant ; l'orange est réservé aux fonds de boutons, pastilles, filets, survols sur fond sombre, curseur et focus.
     Orange en texte : --accent-dk sur clair (AA 4,5:1 vérifié), --accent-lt sur vert ou encre ; jamais --accent en texte fin sur clair. */
  --paper: #F9F6F2;
  --paper-2: #F6EEE4;   /* beige très légèrement chaud : rupture entre deux fonds clairs */
  --ink: #0C0B09;
  --ink-2: #5E574D;
  --green: #184840;     /* vert du logo : sections, trames, tampons */
  --green-2: #184840;   /* ancien vert clair : ramené au vert du logo (labels, liens, filets) */
  --accent: #D9753B;     /* orange brûlé : fonds de boutons, pastilles, filets forts, tampons, curseur, survols sur fond sombre */
  --accent-hv: #B85F2A;  /* survol d'un fond orange (texte encre dessus : 4,7:1) et contour de focus sur clair (4,1:1) */
  --accent-dk: #9E4C1B;  /* seul orange autorisé en texte sur fond clair : 5,6:1 sur papier, 5,2:1 sur beige */
  --accent-lt: #F0A070;  /* orange clair pour le texte sur vert (4,9:1) et sur encre (9,3:1) */
  /* plus aucune teinte orange pâle : les anciens fonds « paille » sont soit le beige neutre --paper-2, soit l'orange net --accent (classe .orange) */
  --green-3: var(--paper-2); /* alias conservé : fond clair neutre */
  --spark: var(--accent); /* orange des fonds, filets, puces et soulignements (jamais du texte fin) */
  --gold: var(--green-2);   /* texte d'accent sur fond clair : vert ; sur fond sombre il devient orange clair (voir plus bas) */
  --gold-2: var(--green);
  --rule: rgba(12, 11, 9, .18);
  --rule-dk: rgba(249, 246, 242, .18);
  --ease-inout: cubic-bezier(0.7, 0, 0.3, 1); /* ce qui bascule : menu, rideau */
  --t-mid: .5s;

  --f-text: "Hanken Grotesk", sans-serif;   /* texte, labels, boutons, menus, données */
  --f-head: "Super Chips", "Boska", Georgia, serif;   /* titres et barre de menu (essai du 28 octobre 2026) : Super Chips, droite, 400 ; avant : Boska italique 500 */

  /* échelle : 5 tailles par point de rupture (label · texte · donnée · titre de section · titre de page) */
  --t-label: 13px;
  --t-body: 17px;
  --t-lead: 30px;
  --t-h2: clamp(40px, 4.2vw, 64px);
  --t-display: clamp(64px, 7.6vw, 124px);

  --m: clamp(20px, 2.8vw, 40px);
  --g: 16px;
  /* --hd : hauteur réservée sous l'îlot flottant (16 px de bord + 64 px d'îlot + 16 px d'air) */
  --hd: 96px;

  /* langage de forme (choix de Clara, 17 octobre 2026) : le rayon est un élément de marque, lié à l'arrondi du logo.
     --r : cadres, cartes, images, tableaux, champs multi-lignes, panneaux ; --r-pill : boutons, champs d'une ligne,
     étiquettes, bandeau cookies, barre mobile, îlot ; --r-s : vignettes de moins de 120 px (le 16 px y ferait pilule).
     Aucune arche. Aucune ombre dure : la seule ombre tolérée est celle de l'îlot (très diffuse, alpha 0,06). */
  --r: 16px;
  --r-pill: 999px;
  --r-s: 8px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .28s;
  --t-slow: 1.1s;
}
@media (max-width: 767px) {
  :root { --t-body: 16px; --t-lead: 24px; --t-h2: 36px; --t-display: 46px; --hd: 80px; --t-label: 13.5px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; scroll-padding-top: var(--hd); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-text); font-size: var(--t-body);
  line-height: 1.5; font-weight: 400; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
address { font-style: normal; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent-hv); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 18px; z-index: 100; border-radius: var(--r-pill); }
.skip:focus { left: 8px; }

/* ---------- typographie ----------
   .lbl = petit texte Hanken 13 px (légendes, données, adresses) ; les vrais labels passent en capitales
   500 à +0,08 em (liste ci-dessous). Titres : Boska italique 500, casse normale, ligatures et crénage actifs. */
.lbl { font-family: var(--f-text); font-size: var(--t-label); line-height: 1.5; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.lbl-c, .folio, .ep__meta > span:first-child, .pg__meta > span:first-child, .sec__aside > span:first-child,
.data dt, .ft__col > .lbl, .sm__head, .num li > .lbl:first-child, .cap__n, .step__n, .sm__foot > div > span, .ct__side .lbl:first-child, .prix thead th {
  font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }
.display, .lead, .display-s { font-family: var(--f-head); font-style: normal; font-weight: 400; text-transform: none;
  font-feature-settings: "liga", "kern"; font-kerning: normal; }
.display { font-size: var(--t-display); line-height: .98; letter-spacing: -.01em; }
.display-s { font-size: var(--t-lead); line-height: 1.04; letter-spacing: -.005em; }
.lead { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.01em; }
h1, h2, .display, .lead { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
/* chiffres de donnée (téléphone, prix, horaires) : Hanken 500, tabulaires */
.num-d { font-family: var(--f-text); font-weight: 500; font-size: var(--t-lead); line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
.ln { display: block; overflow: hidden; padding: .16em .1em .14em; margin: -.16em -.1em -.14em; } /* marge pour les jambages et le débord de l’italique */
.ln > span { display: block; }

/* ---------- grille ---------- */
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); }
.folio { grid-column: 1 / 4; color: var(--ink-2); padding-top: .5em; }
.folio span { color: var(--green-2); margin-right: .6em; }
.folio { font-variant-numeric: tabular-nums; }
/* Les quatre fonds. Alternance sur une page : papier → vert → papier-2 → vert pâle → papier,
   jamais deux fonds identiques à la suite, jamais trois fonds sombres sur une page (pied compris). */
.dark { background: var(--green); color: var(--paper); }
.dark .folio { color: rgba(249, 246, 242, .66); }
.dark .folio span { color: var(--paper); } /* l'or sur vert ne tient pas 3:1 en petit corps : les labels sur vert sont papier */
.alt { background: var(--paper-2); }
.pale { background: var(--paper-2); }
.pale .folio span, .pale .ix__n, .pale .num .lbl, .pale .cap__n, .pale .data--big dd { color: var(--green-2); }
.ink { background: var(--ink); color: var(--paper); }

/* ---------- boutons : deux styles (.sx-btn n° 6 pour l'action principale, .btn pilule pour le reste), définis une seule fois dans css/commun.css ---------- */
/* Icône-bouton rond de 44 px (fermer, flèche) : filet 1 px, pictogramme en trait de 1,5 px ; fond vert au survol. */
.ib { display: inline-grid; place-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; padding: 0; text-decoration: none;
  transition: background-color .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease); }
.ib svg { display: block; transition: transform .32s var(--ease); }
.ib:hover, .ib:focus-visible { background: var(--green); border-color: var(--green); color: var(--paper); }
.ib--arr:hover svg, .ib--arr:focus-visible svg { transform: translateX(3px); }
.dark .ib, .ink .ib { border-color: var(--paper); color: var(--paper); }
.dark .ib:hover, .dark .ib:focus-visible, .ink .ib:hover, .ink .ib:focus-visible { background: var(--paper); border-color: var(--paper); color: var(--ink); }
/* Ligne de confirmation (remplace l’ancien tampon, refusé par Clara) : label sous un filet orange. */
.okline { display: inline-block; padding-top: 10px; border-top: 2px solid var(--spark); color: var(--ink); letter-spacing: .04em; }
.dark .okline, .ink .okline { color: var(--paper); }
/* Étiquette d'état : pilule à filet, avec un point (vert clair, orange ou encre). */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--rule); font-family: var(--f-text); font-size: var(--t-label); letter-spacing: .01em; color: var(--ink-2); line-height: 1.5; }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); }
.tag--gold::before { background: var(--spark); }
.tag--ink::before { background: var(--ink); }
.tag--on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.tag--full { background: var(--green); border-color: var(--green); color: var(--paper); }
.tag--full::before { background: var(--spark); }
.dark .tag { border-color: var(--rule-dk); color: rgba(249, 246, 242, .82); }
/* Lien : vert clair sur papier, papier souligné d'orange sur vert ; le soulignement se trace, la flèche glisse de 4 px. */
.lnk { position: relative; text-decoration: none; color: var(--green-2); padding-bottom: 2px; }
.lnk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .32s var(--ease); }
.lnk:hover::after, .lnk:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.arr { display: inline-block; transition: transform .32s var(--ease); }
a:hover > .arr, a:focus-visible > .arr, .lnk:hover .arr, .ix li:hover .arr, .pager a:hover .arr { transform: translateX(4px); }
.dark .lnk, .ink .lnk { color: var(--paper); }
.dark .lnk::after, .ink .lnk::after { background: var(--spark); }


/* ---------- en-tête = M1, l'îlot flottant (choix de Clara sur /composants) ----------
   Une pilule détachée des bords de 16 px : papier à 92 % + flou 10 px (le seul flou du site avec le menu), filet,
   ombre très diffuse (alpha 0,06, la seule ombre tolérée : sans elle l'îlot se fond dans les panneaux verts et les photos).
   Logo à gauche, nav centrée, « Devis » en B2, « Menu » en rond. Après 80 px de défilement (js/site.js pose .is-compact),
   l'îlot se resserre en pilule de 600 px et la nav s'efface ; le rond « Menu » porte alors la navigation. */
/* Fluidité (20 octobre 2026) : la boîte de l'en-tête ne change JAMAIS de taille ni de place (CLS 0). Deux pilules en pseudo-éléments
   (pleine largeur ::before, compacte ::after) se relaient en opacité ; logo et actions glissent en transform (--dx posé par js/site.js). */
.hd { position: fixed; top: 16px; left: 16px; right: 16px; z-index: 50; display: flex; align-items: center; gap: 24px; min-height: 64px; padding: 8px 10px 8px 22px;
  pointer-events: none; isolation: isolate; --dx: 0px; }
.hd > * { pointer-events: auto; }
.hd::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-pill);
  inset: calc(4px * var(--c)) calc(var(--dx) * var(--c)); }
/* Douceur (26 octobre 2026) : plus de bascule à 80 px. js/site.js lisse --c (0 pleine largeur, 1 pilule compacte) sur ~260 px de défilement, avec inertie :
   la pilule se resserre en continu, le logo et les actions glissent avec elle, la nav s'efface en chemin. */
.hd { --c: 0; }
.hd__brand, .hd__cta { transition: none; transform: translateX(calc((var(--dx) - 6px) * var(--c))); }
.hd .hd__cta, .hd .hd__menu { transform: translateX(calc((4px - var(--dx)) * var(--c))); }
.hd .hd__brand { transform: translateX(calc((var(--dx) - 6px) * var(--c))); }
.hd__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.hd__brand img { height: 44px; width: auto; } /* hauteur fixée (le logo est plus haut que large : en largeur fixe il dépassait de la barre) */
.hd__brand span { font-family: var(--f-head); font-style: normal; font-weight: 400; font-size: 22px; letter-spacing: -.005em; line-height: 1; white-space: nowrap; padding-right: .08em; font-feature-settings: "liga", "kern"; }
.hd__nav { display: flex; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); opacity: calc(1 - var(--c) * 2.4); }
.hd__nav a { text-decoration: none; font-family: var(--f-head); font-size: 17px; font-weight: 400; letter-spacing: .01em; padding: 10px 16px; border-radius: var(--r-pill); color: var(--ink); display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap;
  border: 1px solid transparent; transition: background-color .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease); }
.hd__nav a:hover, .hd__nav a:focus-visible { background: var(--accent); }
.hd__nav a[aria-current] { background: var(--green); color: var(--paper); } /* rubrique active (page ou sous-page) : un seul état, pilule verte pleine */
/* Bouton « Menu » : rond de 48 px, deux traits qui se croisent à l'ouverture. Il ouvre le panneau M1 (js/rb/staggered-menu.js). */
.hd__menu { display: inline-grid; place-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; cursor: pointer; color: var(--ink); padding: 0;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.hd__menu i { position: relative; display: block; width: 16px; height: 10px; }
.hd__menu i::before, .hd__menu i::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-inout), top .4s var(--ease-inout), bottom .4s var(--ease-inout); }
.hd__menu i::before { top: 0; } .hd__menu i::after { bottom: 0; }
.hd__menu:hover, .hd__menu:focus-visible { background: var(--green); color: var(--paper); border-color: var(--green); }
.sm-open .hd__menu i::before { top: 4.25px; transform: rotate(45deg); }
.sm-open .hd__menu i::after { bottom: 4.25px; transform: rotate(-45deg); }
.hd.is-compact .hd__nav { pointer-events: none; visibility: hidden; }

/* ---------- 01 épreuve d'ouverture ---------- */
.ep { min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
  grid-template-rows: auto 1fr auto auto; padding: calc(var(--hd) + 48px) calc(var(--m) + 24px) 56px; }
.ep__meta { grid-column: 1 / 4; grid-row: 1; display: flex; flex-direction: column; color: var(--ink-2); padding-top: .4em; }
.ep__meta span:first-child { color: var(--green-2); }
.ep__title { grid-column: 4 / 13; grid-row: 1 / 3; }
.ep__act { grid-column: 9 / 13; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 40px; }
.ep__act p { max-width: 30em; }
.ep__tel { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.ep__tel:hover { border-bottom-color: var(--ink); }
.ep__bar { grid-column: 1 / 13; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 48px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--ink-2); }
.sw { display: inline-flex; align-items: center; gap: 8px; }
.sw::before { content: ""; width: 28px; height: 12px; border: 1px solid var(--rule); border-radius: var(--r-pill); }
.sw--ink::before { background: var(--ink); }
.sw--gold::before { background: var(--spark); }
.sw--green2::before { background: var(--green-2); }
.sw--green3::before { background: var(--paper-2); }
.sw--paper::before { background: var(--paper); }
.ep__bat { margin-left: auto; }

/* ---------- images et légendes partagées (index des études de cas, pages intérieures) ---------- */
.pic { display: block; overflow: hidden; background: var(--paper-2); border-radius: var(--r); isolation: isolate; } /* le canvas de la trame (Halftone) suit le rayon */
.pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
a:hover > .pic img { transform: scale(1.02); }
.r-16-10 { aspect-ratio: 16 / 10; } .r-16-9 { aspect-ratio: 16 / 9; } .r-4-3 { aspect-ratio: 4 / 3; } .r-3-4 { aspect-ratio: 3 / 4; }
.cap { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.cap strong { font-weight: 600; font-size: var(--t-body); }
.cap .lbl { color: var(--ink-2); }
.cap__n { color: var(--green-2) !important; }
.idx { grid-column: 4 / 13; }
.idx li { border-top: 1px solid var(--rule); }
.idx li:last-child { border-bottom: 1px solid var(--rule); }
.idx a { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr) 24px; gap: var(--g); align-items: center; padding: 12px 0; }
.idx .pic { aspect-ratio: 16 / 10; border-radius: var(--r-s); }
.idx strong { font-weight: 600; }
.idx .lbl { color: var(--ink-2); }
.idx__go { text-align: right; color: var(--green-2) !important; transition: transform var(--t-fast) var(--ease); }
.idx a:hover .idx__go { transform: translate(3px, -3px); }



.bar { display: none; }

/* ---------- mouvement (états initiaux seulement si JS + mouvement autorisé) ---------- */
/* les titres s'affichent d'emblée ; seules les images sous le pli se dévoilent (rideau 0,45 s, posé par js/site.js) */
.motion [data-reveal]:not(.is-in) { clip-path: inset(0 0 100% 0); }
.motion [data-reveal].is-in { clip-path: inset(0 0 0 0); transition: clip-path .45s var(--ease); }

/* ---------- tablette ---------- */
@media (max-width: 1240px) {
  .hd__nav a { padding: 10px 12px; }
}
@media (max-width: 959px) {
  .hd__nav { display: none; } /* le rond « Menu » porte la navigation (la nav tient jusqu'à 960 px, iPad paysage compris) */
}

/* ---------- mobile : composition à part entière ---------- */
@media (max-width: 860px) {
  :root { --hd: 80px; }
  /* îlot compact : logo + « Devis » + rond « Menu », à 12 px des bords */
  .hd { top: 12px; left: 12px; right: 12px; min-height: 56px; padding: 6px 6px 6px 16px; gap: 10px; }
  .hd__brand span { font-size: 16px; }
  .hd__brand img { height: 38px; } /* barre de 56 px, marges de 6 px : le logo reste à l'intérieur */
  .hd__menu { width: 44px; height: 44px; }
  .hd { --dx: 0px !important; }
  .hd.is-compact .hd__brand span { opacity: 0; }
  .hd__brand span { transition: opacity .25s var(--ease); }
  .row, .ep { display: block; }
  .folio { margin-bottom: 16px; }
  .ep { padding: calc(var(--hd) + 40px) calc(var(--m) + 10px) 32px; display: flex; flex-direction: column; min-height: calc(100svh - 56px); }
  .ep__meta { margin-bottom: 32px; }
  .ep__act { padding-top: 32px; margin-top: auto; }
  .ep__bar { margin-top: 32px; gap: 8px 16px; }
  .ep__bat { margin-left: 0; width: 100%; }
  .idx a { grid-template-columns: 88px minmax(0, 1fr) 20px; }
  .idx a .lbl:not(.idx__go) { display: none; }
  /* barre mobile : pilule verte flottante à 16 px du bord ; « Appeler » en texte, « Demander un devis » en pilule orange */
  .bar { display: flex; align-items: center; gap: 8px; position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    padding: 6px 6px 6px 22px; min-height: 60px; background: var(--green); border-radius: var(--r-pill); }
  .bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; color: var(--paper);
    font-family: var(--f-text); font-size: 16px; font-weight: 600; letter-spacing: 0; }
  .bar a:first-child { flex: 1 1 auto; justify-content: flex-start; }
  .bar a:last-child { flex: 0 0 auto; background: var(--accent); color: var(--paper); border: 1.5px solid var(--accent);
    transition: background-color .32s var(--ease), color .32s var(--ease); }
  .bar a:last-child:hover, .bar a:last-child:focus-visible { background: var(--accent-hv); border-color: var(--accent-hv); color: var(--paper); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.sw--green::before { background: var(--green); }

/* ==========================================================================
   Pages intérieures : gabarit commun (cartouche d'épreuve, blocs réutilisables,
   formulaire, bandeau cookies, 404). Mode d'emploi : GUIDE-PAGES.md.
   ========================================================================== */
html, body { overflow-x: clip; }

/* ---------- cartouche d'épreuve (en-tête des pages intérieures) ---------- */
.pg { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
  padding: calc(var(--hd) + 56px) calc(var(--m) + 24px) clamp(56px, 7vw, 104px); }
.pg .folio { grid-column: 1 / 4; grid-row: 1; padding-top: .3em; }
.crumb { grid-column: 4 / 13; grid-row: 1; color: var(--ink-2); }
.crumb ol { display: flex; flex-wrap: wrap; gap: 0 .7em; }
.crumb li + li::before { content: "/"; margin-right: .7em; color: var(--green-2); }
.crumb a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: border-color var(--t-fast) var(--ease); }
.crumb a:hover { border-bottom-color: currentColor; }
.crumb [aria-current] { color: var(--ink); }
.dark .crumb { color: rgba(249, 246, 242, .62); }
.dark .crumb a { border-bottom-color: var(--rule-dk); }
.dark .crumb li + li::before { color: rgba(249, 246, 242, .66); }
.dark .crumb [aria-current] { color: var(--paper); }
.pg__title { grid-column: 1 / 13; grid-row: 2; margin-top: clamp(40px, 5vw, 72px); font-size: clamp(60px, 7vw, 112px); }
.pg__meta { grid-column: 1 / 4; grid-row: 3; margin-top: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 2px; color: var(--ink-2); }
.pg__meta span:first-child { color: var(--green-2); }
.dark .pg__meta { color: rgba(249, 246, 242, .62); }
.dark .pg__meta span:first-child { color: var(--paper); }
.pg__intro { grid-column: 8 / 13; grid-row: 3; margin-top: clamp(32px, 4vw, 56px); padding-top: 14px; border-top: 1px solid var(--ink); max-width: 30em; }
.dark .pg__intro { border-top-color: var(--paper); }
.pg__act { grid-column: 4 / 13; grid-row: 4; margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.pg--dark { background: var(--green); color: var(--paper); } /* cartouche sombre = vert ; .ink (404) le repasse en encre */
.pg--dark.ink { background: var(--ink); }

/* ---------- sections de texte : label à gauche, contenu sur l'axe intérieur ---------- */
.sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; padding-inline: var(--m); }
.sec--a { padding-block: clamp(72px, 8vw, 112px); }
.sec--b { padding-block: clamp(96px, 11vw, 160px) clamp(80px, 9vw, 128px); }
.sec--c { padding-block: clamp(56px, 6vw, 88px) clamp(96px, 10vw, 144px); }
.sec .folio { grid-column: 1 / 4; }
.sec__h { grid-column: 4 / 11; }
.sec__body { grid-column: 4 / 9; display: grid; gap: 1em; }
.sec__body--wide { grid-column: 4 / 11; }
.sec__aside { grid-column: 10 / 13; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); align-self: start; }
.sec__aside span:first-child { color: var(--green-2); }
.sec__full { grid-column: 1 / 13; }
.sec__in { grid-column: 4 / 13; }
.dark .sec__aside { color: rgba(249, 246, 242, .62); }
.dark .sec__aside span:first-child { color: var(--paper); }
.dark .sec__body p { color: rgba(249, 246, 242, .82); }
.lead--s { font-family: var(--f-text); font-style: normal; font-size: var(--t-body); font-weight: 600; line-height: 1.4; letter-spacing: 0; }

/* ---------- liste-index à filets ---------- */
.ix { padding-inline: var(--m); }
.sec .ix { padding-inline: 0; }
.ix li { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline;
  padding: 20px 0 24px; border-top: 1px solid var(--rule); }
.ix li:last-child { border-bottom: 1px solid var(--rule); }
.ix__n { grid-column: 1 / 4; color: var(--green-2); }
.ix__t { grid-column: 4 / 7; font-weight: 600; margin: 0; font-size: var(--t-body); }
.ix__d { grid-column: 7 / 12; color: var(--ink-2); max-width: 36em; }
.ix__d .lbl { display: block; margin-top: 6px; }
.ix__go { grid-column: 12 / 13; justify-self: end; text-decoration: none; color: var(--green-2); font-size: var(--t-lead); line-height: 1; transition: transform var(--t-fast) var(--ease); }
.ix__go::after { content: ""; position: absolute; inset: 0; }
.ix li:hover .ix__go { transform: translateX(6px); }
.ix li:hover .ix__t { color: var(--green-2); }
.ix li, .ix__n, .ix__t { transition: color .32s var(--ease), border-color .32s var(--ease); }
/* au survol, la ligne devient une carte vert papier à coins 16 px (pseudo-élément sous le texte) et ses filets s'effacent */
.ix li { isolation: isolate; }
.ix li::after { content: ""; position: absolute; inset: -1px -16px; z-index: -1; border-radius: var(--r); background: var(--accent); opacity: 0; transition: opacity .32s var(--ease); pointer-events: none; }
.ix li:hover::after { opacity: 1; }
.ix li:hover, .ix li:hover + li { border-top-color: transparent; }
.ix li:last-child:hover { border-bottom-color: transparent; }
.ix li:hover .ix__n { color: var(--gold-2); }
.dark .ix li:hover .ix__n { color: var(--gold); }
.dark .ix li::after { background: rgba(249, 246, 242, .08); }
.pale .ix li::after { background: var(--paper); }
.ix a.ix__t { text-decoration: none; }
.dark .ix li { border-color: var(--rule-dk); }
.dark .ix__n { color: var(--paper); }
.dark .ix__go { color: var(--gold); }
.dark .ix__d { color: rgba(249, 246, 242, .78); }

/* ---------- entrées numérotées 01-0X ---------- */
.num { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; padding-inline: var(--m); }
.sec .num { padding-inline: 0; }
.num li { border-top: 1px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.num .lbl { color: var(--green-2); }
.num h3 { font-size: var(--t-body); font-weight: 600; }
.num p { color: var(--ink-2); max-width: 26em; }
.num--col { grid-template-columns: 1fr; row-gap: 0; }
.num--col li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 20px 0 26px; border-top-color: var(--rule); }
.num--col li:last-child { border-bottom: 1px solid var(--rule); }
.num--col .lbl { grid-column: 1 / 4; }
.num--col h3 { grid-column: 4 / 7; }
.num--col p { grid-column: 7 / 12; max-width: 36em; }
.dark .num li { border-color: var(--paper); }
.dark .num--col li { border-color: var(--rule-dk); }
.dark .num .lbl { color: var(--paper); }
.dark .num p { color: rgba(249, 246, 242, .78); }

/* ---------- tableau de prix ---------- */
/* le tableau est un cadre à coins 16 px (border-collapse: separate pour que le rayon tienne) ; en-tête sur papier ombré */
.prix { width: calc(100% - 2 * var(--m)); margin-inline: var(--m); border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: var(--r); font-variant-numeric: tabular-nums lining-nums; }
.sec .prix { width: 100%; margin-inline: 0; }
.prix caption { text-align: left; padding-bottom: 14px; color: var(--ink-2); }
.prix th, .prix td { text-align: left; vertical-align: baseline; padding: 18px 20px; border-top: 1px solid var(--rule); font-weight: 400; }
.prix thead th { padding: 12px 20px; border-top: 0; color: var(--ink-2); background: var(--paper-2); }
.prix thead th:first-child { border-start-start-radius: calc(var(--r) - 1px); }
.prix thead th:last-child { border-start-end-radius: calc(var(--r) - 1px); }
.prix > :last-child > tr:last-child > :first-child { border-end-start-radius: calc(var(--r) - 1px); }
.prix > :last-child > tr:last-child > :last-child { border-end-end-radius: calc(var(--r) - 1px); }
.prix .prix__n { width: calc(25% + 4px); color: var(--green-2); }
.prix tbody th { font-weight: 600; width: 25%; }
.prix td.prix__d { color: var(--ink-2); }
.prix .prix__p { text-align: right; white-space: nowrap; }
.prix tbody .prix__p { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: var(--t-lead); line-height: 1; }
.prix .prix__p small { display: block; font-size: var(--t-label); font-family: var(--f-text); font-weight: 400; color: var(--ink-2); margin-top: 6px; letter-spacing: .01em; }
.prix tfoot td { color: var(--ink-2); padding: 14px 20px 16px; }
.alt .prix thead th { background: var(--paper); }
.pale .prix thead th { background: var(--paper); }
.dark .prix { border-color: var(--rule-dk); }
.dark .prix thead th { background: rgba(249, 246, 242, .06); }

/* ---------- bloc données (surface, lieu, année) ---------- */
.data { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px var(--g); }
.data > div { border-top: 1px solid var(--rule); padding-top: 10px; }
.data dt { color: var(--ink-2); }
.data dd { margin: 4px 0 0; font-weight: 600; }
.data--big dd { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: var(--t-lead); line-height: 1.08; letter-spacing: -.01em; }
.dark .data > div { border-color: var(--rule-dk); }
.dark .data dt { color: rgba(249, 246, 242, .62); }

/* ---------- citation en grand corps ---------- */
.quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); }
.sec .quote { padding-inline: 0; grid-column: 1 / 13; }
.quote blockquote, .quote figcaption { grid-column: 4 / 12; }
.quote--r blockquote, .quote--r figcaption { grid-column: 6 / 13; }
.quote p { font-family: var(--f-head); font-style: normal; font-weight: 400; font-size: var(--t-lead); line-height: 1.16; letter-spacing: -.005em; hanging-punctuation: first; font-feature-settings: "liga", "kern"; }
.quote figcaption { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-2); }
.quote figcaption strong { color: var(--ink); font-weight: 500; }
.dark .quote figcaption { border-color: var(--rule-dk); color: rgba(249, 246, 242, .62); }
.dark .quote figcaption strong { color: var(--paper); }

/* ---------- diptyque image / texte asymétrique ---------- */
.dip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); align-items: start; }
.sec .dip { padding-inline: 0; grid-column: 1 / 13; }
.dip__img { grid-column: 1 / 8; }
.dip__img a { text-decoration: none; display: block; }
.dip__txt { grid-column: 9 / 13; padding-top: clamp(40px, 6vw, 96px); display: grid; gap: 1em; align-content: start; }
.dip__txt .lead { margin-bottom: 8px; }
.dip__txt .data { margin-top: 16px; }
.dip--rev .dip__img { grid-column: 7 / 13; grid-row: 1; }
.dip--rev .dip__txt { grid-column: 1 / 6; grid-row: 1; padding-top: 0; margin-top: clamp(64px, 8vw, 120px); }

/* ---------- questions en <details> à filets ---------- */
.faq { padding-inline: var(--m); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.sec .faq { padding-inline: 0; grid-column: 1 / 13; }
.faq { row-gap: 10px; }
.faq details { grid-column: 4 / 12; }
.faq--full details { grid-column: 1 / 13; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-text); color: var(--green-2); flex: 0 0 auto; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-2); max-width: 40em; padding-bottom: 22px; }
.faq details p + p { margin-top: -10px; }
.dark .faq summary::after { color: var(--paper); }
.dark .faq details p { color: rgba(249, 246, 242, .78); }

/* ---------- CTA de fin de section (une phrase, un bouton, le téléphone) ---------- */
.cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; padding: clamp(64px, 8vw, 112px) var(--m); }
.cta--rule { border-top: 1px solid var(--rule); }
.cta .folio { grid-column: 1 / 4; }
.cta .lead { grid-column: 4 / 11; }
.cta__act { grid-column: 4 / 13; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.cta__tel { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: var(--t-lead); line-height: 1.1; text-decoration: none; border-bottom: 1px solid var(--rule); }
.cta__tel:hover { border-bottom-color: var(--green-2); }
.dark .cta__tel { border-bottom-color: var(--rule-dk); }

/* ---------- pagination entre pages sœurs ---------- */
.pager { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m) clamp(64px, 8vw, 112px); }
.pager__in { grid-column: 4 / 13; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--rule); padding-top: 18px; }
.pager a { text-decoration: none; display: grid; gap: 6px; }
.pager a .lbl { color: var(--ink-2); }
.pager a strong { font-family: var(--f-head); font-style: normal; font-weight: 400; font-size: var(--t-lead); line-height: 1.08; letter-spacing: -.005em; color: var(--green-2); transition: color .32s var(--ease); }
.pager a:hover strong { color: var(--ink); }
.pager a .arr { color: var(--green-2); }
.pager__next { text-align: right; margin-left: auto; }

/* ---------- formulaire de contact ---------- */
.form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; }
.form__f { grid-column: span 12; display: grid; gap: 8px; position: relative; }
.form__f--h { grid-column: span 6; }
.form label, .form legend { font-family: var(--f-text); font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.form .req { color: var(--green-2); text-decoration: none; }
/* champs : pilule à filet encre pour une ligne, cadre 16 px pour la zone de texte ; focus = filet orange brûlé + fond tint */
.form label, .form legend { padding-left: 22px; }
.form input:not([type="checkbox"]), .form select, .form textarea { width: 100%; border: 1px solid var(--ink); border-radius: var(--r-pill); background: var(--paper);
  padding: 13px 22px; font: inherit; color: var(--ink); -webkit-appearance: none; appearance: none; }
.form select { cursor: pointer; padding-right: 44px; }
.form__f--sel::after { content: "↓"; position: absolute; right: 22px; bottom: 16px; font-family: var(--f-text); font-size: var(--t-label); color: var(--green-2); pointer-events: none; }
.form textarea { min-height: 7.5em; resize: vertical; border-radius: var(--r); }
.form input::placeholder, .form textarea::placeholder { color: rgba(12, 11, 9, .38); }
.form :is(input, select, textarea):focus { outline: 0; border-color: var(--accent-hv); box-shadow: 0 0 0 1px var(--accent-hv); background: var(--paper); }
.form :is(input, select, textarea):user-invalid { border-color: var(--ink); }
.form__more { grid-column: span 12; }
.form__more summary { list-style: none; cursor: pointer; display: inline-flex; gap: 10px; align-items: baseline; font-family: var(--f-text); font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding: 4px 0; border-bottom: 1px solid var(--rule); }
.form__more summary::-webkit-details-marker { display: none; }
.form__more summary::after { content: "+"; color: var(--green-2); }
.form__more[open] summary::after { content: "−"; }
.form__more[open] summary { margin-bottom: 28px; }
.form__more .form { row-gap: 28px; }
.form__consent { grid-column: span 12; display: flex; gap: 14px; align-items: flex-start; font-family: var(--f-text); font-size: var(--t-body); color: var(--ink-2); letter-spacing: 0; cursor: pointer; }
.form__consent input, .cc__opt input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 16px; height: 16px; margin: 5px 0 0; border: 1px solid currentColor; display: inline-grid; place-content: center; cursor: pointer; background: transparent; }
.form__consent input::before, .cc__opt input::before { content: ""; width: 8px; height: 8px; background: currentColor; transform: scale(0); transition: transform var(--t-fast) var(--ease); }
.form__consent input:checked::before, .cc__opt input:checked::before { transform: scale(1); }
.form__consent input:focus-visible { outline: 2px solid var(--accent-hv); outline-offset: 3px; }
.form__consent a { color: var(--ink); }
.form__send { grid-column: span 12; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-top: 8px; }
.form__alt { color: var(--ink-2); }
.form__alt a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.form__status { border-top: 1px solid var(--ink); padding-top: 16px; max-width: 36em; }
.form__status[hidden] { display: none; }
.form__status a { color: var(--ink); }
.form__status.is-error { border-top-color: var(--green-2); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .okline { margin-bottom: 20px; }

/* ---------- bandeau cookies ---------- */
/* bandeau cookies : pilule verte flottante à 16 px des bords, filet orange ; « Tout refuser » = B2 sur vert, « Tout accepter » = B10 ;
   quand « Personnaliser » déplie les options, la pilule passe à 28 px de rayon pour accueillir les deux rangées */
.cc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; margin-inline: auto; max-width: 1180px; background: var(--green); color: var(--paper); border: 1px solid var(--rule-dk); border-radius: var(--r-pill);
  padding: 12px 12px 12px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-height: 40vh; overflow: auto; }
.cc:has(.cc__panel:not([hidden])) { border-radius: 28px; }
.cc[hidden] { display: none; }
.cc__txt { flex: 1 1 24em; max-width: 46em; color: rgba(249, 246, 242, .82); }
.cc__txt strong { color: var(--paper); font-weight: 600; }
.cc__txt a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--rule-dk); }
.cc__act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.cc__btn { position: relative; isolation: isolate; overflow: hidden; min-height: 44px; padding: 0 20px; background: transparent; color: var(--paper); border: 1.5px solid var(--paper); border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--f-text); font-size: var(--t-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease); }
.cc__btn::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--paper); transform: scaleX(0); transform-origin: left center; transition: transform .32s var(--ease); }
.cc__btn:hover::before, .cc__btn:focus-visible::before { transform: scaleX(1); }
.cc__btn:hover, .cc__btn:focus-visible { color: var(--green); }
.cc__btn:focus-visible { outline-color: var(--accent); }
.cc__panel { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 16px var(--g); border-top: 1px solid var(--rule-dk); padding: 14px 16px 4px 0; align-items: start; }
.cc__panel[hidden] { display: none; }
.cc__opt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.cc__opt input:disabled { opacity: .5; cursor: default; }
.cc__opt > span { display: grid; gap: 2px; }
.cc__opt strong { font-weight: 500; }
.cc__opt .lbl { color: rgba(249, 246, 242, .62); }
.cc__open { position: fixed; left: 16px; bottom: 16px; z-index: 45; background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer;
  font-family: var(--f-text); font-size: var(--t-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.cc__open[hidden] { display: none; }
.cc__open:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- page contact ---------- */
.ct__big { grid-column: 4 / 13; grid-row: 4; margin-top: clamp(48px, 6vw, 80px); display: flex; flex-wrap: wrap; gap: 12px 48px; }
.ct__big a { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: var(--t-lead); line-height: 1.1; text-decoration: none; border-bottom: 1px solid var(--rule-dk); transition: border-color var(--t-fast) var(--ease); }
.ct__big a:hover { border-bottom-color: var(--spark); }
.ct { padding-block: clamp(80px, 9vw, 128px) clamp(96px, 10vw, 144px); row-gap: 40px; }
.ct__form { grid-column: 4 / 9; }
.ct__side { grid-column: 10 / 13; display: grid; gap: 28px; align-content: start; }
.ct__side p { color: var(--ink-2); }
.ct__side .lbl:first-child { color: var(--green-2); display: block; margin-bottom: 6px; }
.ct__side a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.ct__side a:hover { border-bottom-color: var(--ink); }

/* ---------- page 404 ---------- */
.nf .pg__title { font-size: clamp(72px, 12vw, 200px); }
.nf__list { padding-block: clamp(40px, 5vw, 72px) clamp(96px, 11vw, 160px); }

/* ---------- mouvement (pages intérieures) : les filets se tracent, une seule fois ---------- */
.motion .ix li::before, .motion .num--col li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--paper); transform-origin: right; transition: transform .4s var(--ease); }
.motion .dark .ix li::before, .motion .dark .num--col li::before { background: var(--ink); }
.motion .ix li.is-in::before, .motion .num--col li.is-in::before { transform: scaleX(0); }

/* ---------- tablette ---------- */
@media (max-width: 1100px) {
  .ix__t { grid-column: 4 / 8; }
  .ix__d { grid-column: 8 / 12; }
  .sec__body { grid-column: 4 / 10; }
  .ct__form { grid-column: 4 / 10; }
  .ct__side { grid-column: 10 / 13; }
}

/* ---------- mobile : composition à part ---------- */
@media (max-width: 860px) {
  .pg { display: block; padding: calc(var(--hd) + 40px) calc(var(--m) + 10px) 48px; }
  .pg .folio { margin-bottom: 12px; }
  .crumb ol { gap: 0 .5em; }
  .pg__title { margin-top: 28px; font-size: var(--t-display); }
  .pg__meta { margin-top: 28px; }
  .pg__intro { margin-top: 24px; max-width: none; }
  .pg__act { margin-top: 32px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec { display: block; }
  .sec .folio { margin-bottom: 14px; }
  .sec__h { margin-bottom: 20px; }
  .sec__body + .sec__aside { margin-top: 28px; }
  .sec__aside { display: flex; }
  .sec--a { padding-block: 64px; }
  .sec--b { padding-block: 80px 64px; }
  .sec--c { padding-block: 48px 80px; }
  .ix li { display: block; padding: 18px 0 20px; padding-right: 36px; }
  .ix li::after { inset: -1px -10px; }
  .ix__n { display: block; margin-bottom: 8px; }
  .ix__t { display: block; margin-bottom: 8px; }
  .ix__go { position: absolute; right: 0; top: 16px; }
  .num { grid-template-columns: 1fr; row-gap: 28px; }
  .num--col li { display: block; }
  .num--col .lbl { display: block; margin-bottom: 8px; }
  .num--col h3 { margin-bottom: 8px; }
  .prix, .prix tbody, .prix tr, .prix th, .prix td { display: block; }
  .prix thead, .prix caption { display: none; }
  .prix tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 16px; border-top: 1px solid var(--rule); }
  .prix tbody tr:first-child { border-top: 0; }
  .prix th, .prix td, .prix tbody th { border: 0; padding: 0; width: auto; border-radius: 0; }
  .prix .prix__n { grid-column: 1 / 3; margin-bottom: 6px; }
  .prix tbody th { grid-column: 1; }
  .prix td.prix__d { grid-column: 1 / 3; margin-top: 10px; }
  .prix tbody .prix__p { grid-column: 2; grid-row: 2; align-self: start; }
  .prix .prix__p small, .prix .prix__p .lbl { white-space: normal; }
  .prix tfoot, .prix tfoot tr, .prix tfoot td { display: block; }
  .prix tfoot td { padding: 14px 16px 16px; border-top: 1px solid var(--rule); }
  .data { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .quote, .dip, .faq, .cta, .pager, .ct__big { display: block; }
  .quote blockquote { margin-bottom: 0; }
  .dip__txt { padding-top: 24px; }
  .dip--rev .dip__txt { margin-top: 24px; }
  .cta .folio { margin-bottom: 14px; }
  .cta .lead { margin-bottom: 24px; }
  .cta__act { flex-direction: column; align-items: flex-start; }
  .pager__in { flex-direction: column; gap: 18px; }
  .pager__next { text-align: left; margin-left: 0; }
  .form__f--h { grid-column: span 12; }
  .ct { padding-block: 64px 80px; }
  .ct__form { margin-bottom: 48px; }
  .ct__big { display: flex; margin-top: 36px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .ct__big a { font-size: var(--t-lead); }
  .nf .pg__title { font-size: 56px; } /* « introuvable » en Boska italique : 4,6 em, il tient à 390 px */
  .cc { display: block; left: 12px; right: 12px; bottom: 12px; border-radius: 24px; padding: 16px 18px 14px; max-height: 44vh; }
  .has-bar .cc { bottom: calc(16px + 60px + 12px + env(safe-area-inset-bottom, 0px)); }
  .cc__txt { font-size: var(--t-body); margin-bottom: 12px; max-width: none; }
  .cc__act { justify-content: flex-start; }
  .cc__btn { min-height: 44px; padding: 0 16px; }
  .cc__panel { grid-template-columns: 1fr; margin-top: 14px; padding-right: 0; }
  .cc__open { display: none; }
}

/* ==========================================================================
   Passe design « peps + interface » (17 octobre 2026) : sommaire, bandeau des métiers,
   bouton magnétique, champs, FAQ, tableaux, cookies. Langage de forme (choix de Clara,
   17 octobre au soir) : rayon 16 px et pilule, voir les tokens --r / --r-pill en tête.
   ========================================================================== */

/* ---------- sommaire = panneau M1 (moteur : js/rb/staggered-menu.js, port vanilla de React Bits Staggered Menu) ----------
   Panneau vert à coins 24 px, détaché des bords de 16 px, qui glisse depuis la droite ; neuf entrées en bas de casse
   Hanken Grotesk 34-56 px graisse 500, sans filets ni numéros ; colonne de données en bas (adresse, téléphone, e-mail, heure à Gap). */
.sm { position: fixed; inset: 0; z-index: 70; visibility: hidden; pointer-events: none; }
.sm.is-open, .sm.is-closing { visibility: visible; pointer-events: auto; }
.sm__veil { position: absolute; inset: 0; background: rgba(12, 11, 9, .28); opacity: 0; transition: opacity .5s var(--ease-inout); }
.sm.is-open .sm__veil { opacity: 1; }
.sm__panel { position: absolute; top: 16px; right: 16px; bottom: 16px; width: 46vw; min-width: 580px; background: var(--green); color: var(--paper); border-radius: 24px;
  display: flex; flex-direction: column; padding: 20px clamp(36px, 4.5vw, 80px) 40px; overflow-y: auto; transform: translateX(calc(100% + 24px)); }
.sm:not(.is-open):not(.is-closing) .sm__panel { transform: translateX(calc(100% + 24px)); }
.sm__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; color: rgba(249, 246, 242, .62); }
.sm__close { display: inline-grid; place-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--paper); background: none; padding: 0; cursor: pointer; color: var(--paper);
  transition: background-color .32s var(--ease), color .32s var(--ease); }
.sm__close i { position: relative; display: block; width: 14px; height: 14px; }
.sm__close i::before, .sm__close i::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: currentColor; }
.sm__close i::before { transform: rotate(45deg); } .sm__close i::after { transform: rotate(-45deg); }
.sm__close:hover, .sm__close:focus-visible { background: var(--paper); color: var(--ink); }
.sm__list { display: grid; gap: 8px; margin-top: clamp(16px, 3vh, 40px); margin-bottom: clamp(24px, 4vh, 56px); }
.sm__item { display: flex; align-items: baseline; padding: 2px 0; text-decoration: none; color: var(--paper);
  font-family: var(--f-text); font-weight: 500; letter-spacing: -.01em; font-size: clamp(26px, 4.3vh, 52px); line-height: 1.12; transition: color .32s var(--ease); }
.sm__label { display: block; }
.sm__label > span { display: block; }
.sm__item:hover, .sm__item:focus-visible, .sm__item[aria-current] { color: var(--gold); } /* feuille ouverte : grand corps, l'orange clair tient */
.sm__item:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.sm__foot { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(249, 246, 242, .18); flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; color: rgba(249, 246, 242, .82); font-size: 14px; }
.sm__foot > div { display: grid; gap: 4px; }
.sm__foot > div > span { color: rgba(249, 246, 242, .55); }
.sm__foot a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--rule-dk); transition: border-color .32s var(--ease); }
.sm__foot a:hover { border-bottom-color: var(--spark); }
.sm__clock { color: var(--paper); font-weight: 500; font-variant-numeric: tabular-nums; }
.sm-open { overflow: hidden; }
@media (max-width: 1100px) { .sm__panel { width: 58vw; min-width: 0; } }
@media (max-width: 860px) {
  .sm__panel { width: auto; min-width: 0; left: 12px; right: 12px; top: 12px; bottom: 12px; padding: 12px 22px 28px; border-radius: 24px; }
  .sm__item { font-size: 34px; }
  .sm__list { gap: 8px; margin-top: 24px; }
  .sm__foot { grid-template-columns: 1fr; gap: 14px; padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm.is-open .sm__panel { transform: none; }
}

/* ---------- bouton magnétique (React Bits Magnet, souris fine seulement) : l'enveloppe est posée par le script ---------- */


/* ---------- bandeau des métiers (React Bits Flowing Menu, accueil seulement) ---------- */
  background: var(--paper); color: var(--green); display: flex; align-items: center; }

/* ---------- champs de formulaire : pilule à filet encre, label vert clair, focus orange sur fond tint, erreur encre, succès sur vert ---------- */
.form label, .form legend { color: var(--green-2); }
.form .req { color: var(--green-2); }
.form input:not([type="checkbox"]), .form select, .form textarea { transition: border-color .32s var(--ease), background-color .32s var(--ease); }
.form__f.is-error :is(input, select, textarea):not(:focus) { border-color: var(--ink); }
.form[hidden] { display: none; } /* après l'envoi, le formulaire s'efface au profit de la confirmation */
.form__f.is-error label, .form__err { color: var(--ink); }
.form__consent { flex-wrap: wrap; }
.form__consent .form__err { flex-basis: 100%; margin-left: 30px; }
.form__err { font-family: var(--f-text); font-size: var(--t-label); font-weight: 500; letter-spacing: .01em; padding-left: 22px; }
.form__err[hidden] { display: none; }
.form__f--sel::after { color: var(--green-2); }
.form__more summary::after { color: var(--green-2); }
.form__consent input, .cc__opt input { border-color: var(--ink); }
.form__consent input::before, .cc__opt input::before { background: var(--spark); }
.form__consent input:checked { border-color: var(--accent-hv); }
.form__status { border-top: 0; padding: 0; max-width: none; }
.form__status.is-ok { background: var(--green); color: var(--paper); padding: clamp(24px, 3vw, 40px); border-radius: var(--r); }
.form__status.is-ok .okline { display: block; color: var(--paper); margin-bottom: 20px; }
.form__status.is-ok p { max-width: 36em; }
.form__status.is-ok a { color: var(--paper); border-bottom: 1px solid var(--spark); text-decoration: none; }
.form__status.is-error { border-top: 1px solid var(--ink); padding-top: 16px; max-width: 36em; }
.form__status.is-error a { color: var(--ink); }

/* ---------- questions en <details> : cadres 16 px (papier ombré au repos, vert papier ouvert), « + » dans un rond de 36 px, dépliage sans saut ---------- */
.faq summary::after, .form__more summary::after { content: none; }
.faq details { border: 0; border-radius: var(--r); background: var(--paper-2); padding: 0 24px; transition: background-color .32s var(--ease); }
.alt .faq details, .pale .faq details { background: var(--paper); }
.faq details:hover, .faq details[open] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pale .faq details:hover, .pale .faq details[open] { background: var(--paper); }
.dark .faq details { background: rgba(249, 246, 242, .06); }
.dark .faq details:hover, .dark .faq details[open] { background: rgba(249, 246, 242, .1); }
.faq summary { position: relative; padding: 20px 56px 20px 0; min-height: 76px; display: flex; align-items: center; transition: color .32s var(--ease); }
.faq summary i { position: absolute; right: 0; top: 50%; width: 36px; height: 36px; margin-top: -18px; border: 1px solid var(--green-2); border-radius: 50%;
  transition: background-color .32s var(--ease), border-color .32s var(--ease); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 11px; top: 17px; width: 12px; height: 1px; background: var(--green-2);
  transition: transform .32s var(--ease), background-color .32s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { background: var(--green-2); border-color: var(--green-2); }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: var(--paper); transform: rotate(0deg); }
.faq details[open] summary { color: var(--green); }
.faq details p { padding-bottom: 24px; }
.dark .faq summary i { border-color: var(--paper); }
.dark .faq summary i::before, .dark .faq summary i::after { background: var(--paper); }
.dark .faq details[open] summary i { background: var(--paper); }
.dark .faq details[open] summary i::before, .dark .faq details[open] summary i::after { background: var(--green); }
.dark .faq details[open] summary { color: var(--paper); }
.faq__c { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-inout); }
.faq__c > div { overflow: hidden; }
details[open] > .faq__c { grid-template-rows: 1fr; }
details.is-closing > .faq__c { grid-template-rows: 0fr; }

/* ---------- tableau de prix : survol de ligne en vert pâle, prix tabulaires ferrés à droite ---------- */
.prix tbody tr { transition: background-color .32s var(--ease); }
.prix tbody tr:hover { background: var(--accent); }
.prix tbody tr:hover :is(td, th, a, span, small) { color: var(--ink); }
.prix thead th { border-bottom: 2px solid var(--accent); }
.prix tbody tr:hover th, .prix tbody tr:hover td { border-top-color: var(--green-2); }
.prix tbody tr:hover + tr th, .prix tbody tr:hover + tr td { border-top-color: var(--green-2); }
.prix tbody .prix__p { color: var(--green); }
.dark .prix tbody tr:hover { background: rgba(249, 246, 242, .08); }
.dark .prix tbody .prix__p { color: var(--paper); }

/* ---------- bandeau cookies : « Tout refuser » (B2 sur vert) et « Tout accepter » (B10) au même gabarit, « Personnaliser » en lien ---------- */
.cc__txt a { border-bottom-color: var(--spark); }
.cc__btn { min-width: 150px; justify-content: center; display: inline-flex; align-items: center; }
.cc__btn--gold, .cc__btn[data-cc="accept"], .cc__btn[data-cc="save"] { background: var(--paper); border-color: var(--paper); color: var(--green); }
.cc__btn[data-cc="accept"]::before, .cc__btn[data-cc="save"]::before { background: var(--green-2); }
.cc__btn[data-cc="accept"]:hover, .cc__btn[data-cc="save"]:hover, .cc__btn[data-cc="accept"]:focus-visible, .cc__btn[data-cc="save"]:focus-visible { color: var(--paper); border-color: var(--green-2); }
.cc__btn[data-cc="custom"] { min-width: 0; border: 0; border-radius: 0; overflow: visible; padding: 0 4px; color: rgba(249, 246, 242, .82); border-bottom: 1px solid var(--rule-dk); min-height: 0; margin-right: 12px; text-transform: none; letter-spacing: .02em; font-weight: 400; }
.cc__btn[data-cc="custom"]::before { content: none; }
.cc__btn[data-cc="custom"]:hover { background: none; color: var(--paper); border-bottom-color: var(--spark); }
.cc__panel { border-top-color: var(--rule-dk); }
.cc__opt input { border-color: var(--paper); }
.cc__opt input::before { background: var(--spark); }
.cc__open { background: var(--paper); color: var(--green-2); border-color: var(--green-2); }
.cc__open:hover { color: var(--paper); background: var(--green-2); }
@media (max-width: 860px) {
  .cc__btn { min-width: 0; flex: 1 1 40%; }
  .cc__btn[data-cc="custom"] { flex: 1 1 100%; justify-content: flex-start; margin: 0 0 4px; }
}

/* ==========================================================================
   Corrections de l'audit design (19 octobre 2026) : plus d'or ni de jaune, bandeau cookies compact, cibles tactiles.
   ========================================================================== */
/* sur les fonds verts et encre, le texte d'accent devient orange clair (--accent-lt) ; les filets, puces et soulignements passent à l'orange --accent */
.dark, .ink, .cc, .sm__panel, .bar, .fx { --gold: var(--accent-lt); --gold-2: var(--paper); }
:focus-visible { outline-color: var(--green-2); }
.dark :focus-visible, .ink :focus-visible, .cc :focus-visible, .sm__panel :focus-visible, .bar :focus-visible { outline-color: var(--accent); }

/* bandeau cookies : sur ordinateur, bloc compact en bas à droite (la colonne gauche du héros reste libre) */
.cc { left: auto; right: 16px; margin-inline: 0; max-width: 640px; border-radius: 24px; padding: 14px 16px 14px 22px; gap: 10px 18px; max-height: none; }
.cc:has(.cc__panel:not([hidden])) { border-radius: 24px; }
.cc__txt { flex: 1 1 18em; font-size: 14px; line-height: 1.45; }
.cc__btn { min-width: 0; padding: 0 16px; }
.cc__btn[data-cc="custom"] { min-height: 44px; display: inline-flex; align-items: center; }
.cc__panel { grid-template-columns: 1fr 1fr; }
/* le bouton fixe « Cookies » double le lien du pied de page : il n'existe plus là où ce lien est présent */
body:has([data-cc-open]:not(.cc__open)) .cc__open { display: none; }

@media (max-width: 767px) {
  .cc, .has-bar .cc { left: 12px; right: 12px; max-width: none; padding: 12px 14px; border-radius: 20px; }
  .has-bar .cc { bottom: calc(12px + 60px + 8px + env(safe-area-inset-bottom, 0px)); }
  .cc__txt { font-size: 13.5px; line-height: 1.4; margin-bottom: 8px; }
  .cc__act { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; justify-content: space-between; }
  .cc__btn { flex: 1 1 0; min-height: 44px; padding: 0 6px; font-size: 12.5px; letter-spacing: .01em; }
  .cc__btn[data-cc="custom"] { flex: 0 0 auto; margin: 0; padding: 0 4px; }
  .cc__panel { margin-top: 8px; padding: 10px 0 0; grid-template-columns: 1fr; gap: 10px; }
  .cc__panel .cc__btn { flex: none; width: 100%; }
}

/* cibles tactiles de 44 px minimum */
.fx__nav ul a, .qx__more .lnk, .tx__act .lnk { display: inline-flex; align-items: center; min-height: 44px; }
.fx__nav ul { gap: 0; }
.fx__legal p:has(a) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .4em; }
.fx__legal p a { display: inline-flex; align-items: center; min-height: 44px; }
.sm__item { min-height: 48px; }

@media (max-width: 860px) {
  .has-bar .hd__cta { display: none; } /* la barre fixe en bas porte déjà « Demander un devis » */
  .has-bar .hd { padding-right: 6px; }
}
/* la barre fixe s'efface quand le pied de page est à l'écran (elle se confondait avec son fond vert) */
body.at-end .bar { display: none; }
.fx__tm a { display: inline-flex; align-items: center; min-height: 44px; }
.hd__brand { min-height: 44px; }