/* HABITAT CONFORT — charte « Ardoise & Galet » v1.0
   Ordre de chargement : main.css → components.css → responsive.css (cascade d'origine conservée). */
/* Scènes et composants (chacun avec ses media queries) : hero, promesse, méthode, expertises, réalisations, avant/après, savoir-faire, preuves, territoire, contact, pied de page, pages intérieures */
/* =========================================================
   SCÈNE 01 — HERO 3D
   ========================================================= */
.hero{ position:relative; height:260vh; background:var(--ardoise); color:var(--chaux); }
.hero__stick{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__fallback{ position:absolute; inset:0; display:none; }
.hero__fallback img{ width:100%; height:100%; object-fit:cover; }
.hero__fallback::after{ content:""; position:absolute; inset:0; background:rgba(38,52,60,.7); }
.no-webgl .hero__fallback{ display:block; }
.no-webgl .hero__canvas,.no-webgl .hero__hud{ display:none; }
.hero__copy{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 104px); }
.hero__copy .label{ color:var(--pierre); margin-bottom:var(--s-24); }
.hero__h1{ max-width:12.5em; }
.hero__chapo{ margin-top:var(--s-24); max-width:30em; color:var(--galet); }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:var(--s-12); margin-top:var(--s-32); }
.hero__proof{ list-style:none; padding:0; margin:var(--s-32) 0 0; display:flex; flex-wrap:wrap; gap:var(--s-8) var(--s-24); font-size:var(--fs-small); color:var(--pierre); }
.hero__proof li{ display:flex; align-items:center; gap:8px; }
.hero__proof svg{ width:16px; flex:0 0 auto; }
.hero__hud{ position:absolute; z-index:2; right:var(--pad); bottom:calc(env(safe-area-inset-bottom,0px) + 32px); text-align:right; font-size:13px; color:var(--pierre); pointer-events:none; display:none; }
.hero__hud b{ display:block; font-family:var(--f-titre); font-weight:500; font-size:44px; line-height:1; color:var(--chaux); font-variant-numeric:tabular-nums; margin-bottom:6px; }
.hero__hud b i{ font-style:normal; color:var(--gris-galet); font-size:20px; }
.hero__hud .phase{ display:block; margin-top:4px; max-width:18em; margin-left:auto; }
.hero__hud.is-done b{ color:var(--ocre-clair); }
.hero__scroll{ position:absolute; z-index:2; left:var(--pad); bottom:calc(env(safe-area-inset-bottom,0px) + 32px); display:flex; align-items:center; gap:12px; font-size:13px; color:var(--pierre); }
.hero__scroll i{ width:1px; height:36px; background:rgba(217,209,195,.3); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--chaux); animation:drop 2.2s var(--ease) infinite; }
@keyframes drop{ to{ top:100%; } }
@media (max-width:767px){
  .hero{ height:230vh; }
  .hero__copy{ padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px); }
  .hero__ctas .btn{ width:100%; }
  .hero__proof{ display:none; }
  .hero__scroll{ display:none; }
}
@media (min-width:1024px){
  .hero__copy{ justify-content:center; padding-bottom:0; padding-top:var(--header-h); }
  .hero__hud{ display:block; }
}

/* =========================================================
   SCÈNE 02 — LA PROMESSE
   ========================================================= */
.promesse__display{ grid-column:1 / -1; }
@media (min-width:1024px){ .promesse__display{ grid-column:1 / span 11; } }
.promesse__fig{ margin:var(--s-72) 0 0; position:relative; }
.clip{ overflow:hidden; clip-path:inset(calc((1 - var(--p, 1)) * 14%) calc((1 - var(--p, 1)) * 22%)); will-change:clip-path; }
.clip img{ width:100%; aspect-ratio:3/2; object-fit:cover; transform:scale(calc(1.14 - var(--p, 1) * .14)); }
.caption{ display:flex; gap:var(--s-16); margin-top:var(--s-12); font-size:var(--fs-small); color:var(--encre-douce); }
.caption .label{ flex:0 0 auto; }
.on-dark .caption{ color:var(--pierre); }
.promesse__body{ margin-top:var(--s-72); row-gap:var(--s-48); }
.promesse__chapo{ grid-column:1 / -1; }
.valeurs{ grid-column:1 / -1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0; }
.valeurs li{ padding:var(--s-24) 0; border-top:var(--b-fin); display:grid; grid-template-columns:44px 1fr; gap:4px 12px; }
.valeurs .n{ font-family:var(--f-titre); color:var(--ocre); font-size:15px; grid-row:span 2; padding-top:3px; }
.valeurs p{ margin:0; color:var(--encre-douce); }
@media (min-width:768px){ .valeurs{ grid-template-columns:1fr 1fr; column-gap:var(--gutter); } }
@media (min-width:1024px){
  .promesse__chapo{ grid-column:1 / span 5; }
  .valeurs{ grid-column:7 / span 6; }
}

/* =========================================================
   SCÈNE 03 — LA MÉTHODE (5 rangs)
   ========================================================= */
.methode__head{ grid-column:1 / -1; margin-bottom:var(--s-48); }
@media (min-width:1024px){ .methode__head{ grid-column:1 / span 7; } }
.methode__aside{ grid-column:1 / -1; position:sticky; top:64px; z-index:2; background:var(--galet); padding:12px 0; display:flex; align-items:center; gap:16px; border-bottom:var(--b-fin); }
.pignon{ width:64px; height:auto; flex:0 0 auto; }
.pignon polygon{ fill:var(--pierre); transition:fill 500ms var(--ease); }
.pignon .on{ fill:var(--ardoise); }
.pignon .r1.on{ fill:var(--ocre); }
.methode__state{ font-size:var(--fs-small); color:var(--encre-douce); }
.methode__state b{ display:block; font-family:var(--f-titre); font-weight:500; color:var(--encre); font-size:18px; }
.etapes{ grid-column:1 / -1; list-style:none; margin:0; padding:0; }
.etape{ padding:var(--s-48) 0; border-bottom:var(--b-fin); transition:opacity 400ms var(--ease); }
.etape__n{ font-family:var(--f-titre); font-size:15px; color:var(--ocre); margin-bottom:var(--s-12); display:block; }
.etape .h3{ margin-bottom:var(--s-16); }
.etape p{ color:var(--encre-douce); max-width:34em; }
.etape__remis{ display:flex; gap:12px; align-items:baseline; margin-top:var(--s-16); padding-top:var(--s-16); border-top:1px dashed var(--pierre); font-size:var(--fs-small); max-width:34em; }
.etape__remis .label{ flex:0 0 auto; }
.methode__cta{ grid-column:1 / -1; margin-top:var(--s-48); display:flex; flex-wrap:wrap; gap:var(--s-16); align-items:center; }
@media (min-width:1024px){
  .methode__aside{ grid-column:1 / span 5; grid-row:2 / span 2; align-self:start; top:calc(50vh - 220px); height:auto; flex-direction:column; align-items:flex-start; background:none; border:0; padding:0; gap:var(--s-32); }
  .pignon{ width:min(360px, 100%); }
  .methode__state b{ font-size:var(--fs-h3); }
  .etapes{ grid-column:7 / span 6; }
  .etape{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; opacity:.28; border-bottom:0; border-top:var(--b-fin); }
  .etape.is-active{ opacity:1; }
  .methode__cta{ grid-column:7 / span 6; }
}
html:not(.js) .etape{ opacity:1; }

/* =========================================================
   SCÈNE 04 — EXPERTISES
   ========================================================= */
.exp__head{ grid-column:1 / -1; margin-bottom:var(--s-48); display:flex; flex-direction:column; gap:var(--s-16); }
@media (min-width:1024px){ .exp__head{ grid-column:1 / span 12; flex-direction:row; justify-content:space-between; align-items:flex-end; } .exp__head p{ max-width:26em; margin:0; } }
.exp__list{ list-style:none; margin:0; padding:0; border-bottom:var(--b-fin); position:relative; }
.exp__item a{ display:grid; grid-template-columns:1fr auto; gap:6px var(--gutter); align-items:baseline; padding:var(--s-24) 0; border-top:var(--b-fin); text-decoration:none; position:relative; }
.exp__name{ font-family:var(--f-titre); font-weight:500; font-size:var(--fs-h2); line-height:1.1; letter-spacing:var(--track-titre); transition:transform 400ms var(--ease), color var(--t-fast); }
.exp__desc{ grid-column:1 / -1; color:var(--encre-douce); font-size:var(--fs-body); max-width:30em; }
.exp__go{ grid-row:1; grid-column:2; font-weight:600; color:var(--ocre); font-size:15px; white-space:nowrap; }
.exp__go span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.exp__go{ width:44px; height:44px; border:1px solid var(--pierre); border-radius:50%; display:grid; place-items:center; transition:background-color var(--t-fast) var(--ease), color var(--t-fast), border-color var(--t-fast); }
.exp__item a:hover .exp__go{ background:var(--ocre); border-color:var(--ocre); color:var(--blanc); }
.exp__item a:hover .exp__name,.exp__item a:focus-visible .exp__name{ transform:translateX(14px); }
.exp__item a::before{ content:""; position:absolute; left:0; top:-1px; height:2px; width:100%; background:var(--ocre); transform:scaleX(0); transform-origin:0 50%; transition:transform 500ms var(--ease); }
.exp__item a:hover::before,.exp__item a:focus-visible::before{ transform:scaleX(1); }
@media (min-width:1024px){
  .exp__item a{ grid-template-columns:7fr 4fr 44px; padding:var(--s-32) 0; align-items:center; }
  .exp__desc{ grid-column:2; margin:0; }
  .exp__go{ grid-column:3; grid-row:1; text-align:right; }
}
.exp__float{ position:fixed; left:0; top:0; width:300px; aspect-ratio:4/5; z-index:30; pointer-events:none; overflow:hidden; clip-path:inset(50% 50% 50% 50%); transition:clip-path 500ms var(--ease); box-shadow:var(--sh-lg); }
.exp__float.is-on{ clip-path:inset(0 0 0 0); }
.exp__float img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity 300ms var(--ease); }
.exp__float img.is-on{ opacity:1; }
@media (hover:none), (max-width:1023px){ .exp__float{ display:none; } }

/* =========================================================
   SCÈNE 05 — RÉALISATIONS (défilement horizontal)
   ========================================================= */
.real{ padding:0; }
.real__stick{ padding-block:var(--section); }
.real__track{ display:flex; gap:var(--gutter); overflow-x:auto; scroll-snap-type:x mandatory; padding-inline:var(--pad); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.real__track::-webkit-scrollbar{ display:none; }
.real__intro{ flex:0 0 min(84vw, 420px); scroll-snap-align:start; display:flex; flex-direction:column; justify-content:flex-end; padding-right:var(--s-24); }
.real__intro p{ color:var(--pierre); margin-top:var(--s-16); }
.real__intro .btn{ margin-top:var(--s-24); align-self:flex-start; }
.projet{ flex:0 0 auto; margin:0; scroll-snap-align:start; width:min(80vw, 420px); }
.projet__img{ overflow:hidden; background:var(--ardoise-claire); }
.projet__img img{ width:100%; aspect-ratio:var(--ar, 4/3); object-fit:cover; transform:translateX(var(--shift, 0px)) scale(1.08); transition:filter 400ms var(--ease); }
.projet figcaption{ padding-top:var(--s-16); display:grid; grid-template-columns:auto 1fr; gap:2px 14px; }
.projet__n{ font-family:var(--f-titre); color:var(--ocre-clair); font-size:15px; grid-row:span 2; font-variant-numeric:tabular-nums; }
.projet__t{ font-family:var(--f-titre); font-size:20px; line-height:1.25; }
.projet__m{ font-size:13px; color:var(--pierre); }
.real__bar{ margin:var(--s-32) var(--pad) 0; height:1px; background:var(--ardoise-claire); position:relative; }
.real__bar span{ position:absolute; left:0; top:-0.5px; height:2px; width:100%; background:var(--chaux); transform-origin:0 50%; transform:scaleX(var(--p, .1)); }
@media (min-width:1024px){
  .real.is-pinned .real__stick{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; padding-block:0; overflow:hidden; }
  .real.is-pinned .real__track{ overflow:visible; scroll-snap-type:none; will-change:transform; padding-right:20vw; }
  .real__intro{ flex-basis:31vw; padding-right:4vw; }
  .projet{ width:auto; }
  .projet__img img{ height:min(60vh, 560px); width:auto; aspect-ratio:var(--ar, 4/3); }
  .projet:nth-of-type(even){ padding-top:9vh; }
}

/* =========================================================
   SCÈNE 06 — AVANT / APRÈS
   ========================================================= */
.ba__text{ grid-column:1 / -1; }
.ba__wrap{ grid-column:1 / -1; margin-top:var(--s-48); }
@media (min-width:1024px){ .ba__text{ grid-column:1 / span 4; } .ba__wrap{ grid-column:6 / span 7; margin-top:0; } }
.ba{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--galet); user-select:none; touch-action:pan-y; --x:50%; }
.ba__pane{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:var(--s-24); }
.ba__pane img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__pane--avant{ background:var(--pierre); }
.ba__pane--apres{ background:var(--galet); clip-path:inset(0 0 0 var(--x)); }
.ba__pane--avant{ justify-items:start; } .ba__pane--apres{ justify-items:end; }
.ba__ph{ max-width:min(16em, 40%); color:var(--encre-douce); font-size:var(--fs-small); position:relative; }
.ba__ph .label{ display:block; margin-bottom:8px; }
.ba__pane--avant .ba__ph{ text-align:left; } .ba__pane--apres .ba__ph{ text-align:right; }
.ba__tag{ position:absolute; top:16px; padding:6px 10px; background:var(--ardoise); color:var(--chaux); font-size:12px; font-weight:600; letter-spacing:var(--track-label); text-transform:uppercase; border-radius:var(--r-ctrl); z-index:2; }
.ba__tag--avant{ left:16px; } .ba__tag--apres{ right:16px; }
.ba__line{ position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:var(--chaux); z-index:3; pointer-events:none; box-shadow:0 0 0 1px rgba(38,52,60,.15); }
.ba__knob{ position:absolute; top:50%; left:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:var(--chaux); border:1.5px solid var(--ardoise); display:grid; place-items:center; box-shadow:var(--sh-md); }
.ba__knob svg{ width:22px; }
.ba input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:4; margin:0; }
.ba:has(input:focus-visible) .ba__knob{ outline:2px solid var(--ocre); outline-offset:2px; }
.protocole{ list-style:none; padding:0; margin:var(--s-24) 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--gutter); }
.protocole li{ padding:12px 0; border-top:var(--b-fin); font-size:var(--fs-small); color:var(--encre-douce); }
.protocole b{ display:block; color:var(--encre); font-weight:600; }

/* =========================================================
   SCÈNE 07 — SAVOIR-FAIRE
   ========================================================= */
.sf__fig{ grid-column:1 / -1; margin:0; }
.sf__fig .px{ overflow:hidden; }
.sf__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; transform:translateY(var(--py, 0px)) scale(1.12); }
.sf__body{ grid-column:1 / -1; margin-top:var(--s-48); }
.sf__list{ list-style:none; margin:var(--s-32) 0 0; padding:0; }
.sf__list li{ padding:var(--s-24) 0; border-top:var(--b-fin); }
.sf__list .h4{ margin-bottom:6px; }
.sf__list p{ margin:0; color:var(--encre-douce); }
.sf__details{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gutter); margin-top:var(--s-72); }
.sf__details figure{ margin:0; }
.sf__details img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.sf__details figcaption{ font-size:13px; color:var(--encre-douce); margin-top:8px; line-height:1.45; }
@media (max-width:767px){ .sf__details{ grid-template-columns:1fr 1fr; } .sf__details figure:last-child{ display:none; } }
@media (min-width:1024px){
  .sf__fig{ grid-column:1 / span 5; }
  .sf__body{ grid-column:7 / span 6; margin-top:0; align-self:center; }
  .sf__details{ grid-column:2 / span 10; }
}

/* =========================================================
   SCÈNE 08 — PREUVES
   ========================================================= */
.chiffres{ grid-column:1 / -1; list-style:none; margin:0 0 var(--s-72); padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s-32) var(--gutter); }
.chiffres li{ border-top:var(--b-fort); padding-top:var(--s-16); }
.chiffres b{ display:block; font-family:var(--f-titre); font-weight:500; font-size:clamp(44px, 4vw + 20px, 76px); line-height:1; color:var(--ocre); letter-spacing:-.02em; margin-bottom:var(--s-12); font-variant-numeric:lining-nums; }
.chiffres span{ font-size:var(--fs-small); color:var(--encre-douce); display:block; max-width:16em; }
@media (min-width:1024px){ .chiffres{ grid-template-columns:repeat(4, 1fr); } }
.avis__head{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--s-16); margin-bottom:var(--s-32); }
.avis{ grid-column:1 / -1; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:var(--gutter); }
@media (min-width:1024px){ .avis{ grid-template-columns:repeat(3, 1fr); } }
.avis-card{ background:var(--blanc); border:var(--b-fin); border-radius:var(--r-card); padding:var(--s-32); display:flex; flex-direction:column; gap:var(--s-16); min-height:240px; }
.avis-card--slot{ background:transparent; border-style:dashed; }
.avis-card__q{ font-family:var(--f-titre); font-size:44px; line-height:.6; color:var(--pierre); height:20px; }
.avis-card p{ margin:0; color:var(--encre-douce); }
.avis-card__meta{ margin-top:auto; font-size:13px; color:var(--encre-douce); border-top:var(--b-fin); padding-top:var(--s-12); }
.garanties{ grid-column:1 / -1; margin-top:var(--s-72); display:grid; grid-template-columns:1fr; border-top:var(--b-fort); }
.garanties div{ padding:var(--s-24) 0; border-bottom:var(--b-fin); display:grid; grid-template-columns:1fr; gap:4px; }
.garanties dt{ margin:0; } .garanties dd{ margin:0; font-weight:500; }
.garanties .todo{ color:var(--encre-douce); font-weight:400; font-style:italic; }
@media (min-width:768px){ .garanties{ grid-template-columns:repeat(3, 1fr); column-gap:var(--gutter); } }

/* =========================================================
   SCÈNE 09 — PAU / BÉARN
   ========================================================= */
.terr__text{ grid-column:1 / -1; }
.terr__text .chapo{ margin:var(--s-24) 0 var(--s-24); }
.terr__fig{ margin:var(--s-48) 0 0; }
.terr__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.terr__map{ grid-column:1 / -1; margin-top:var(--s-48); }
.carte{ width:100%; height:auto; display:block; }
.carte .ring{ fill:var(--chaux); stroke:var(--ardoise); stroke-width:1; stroke-dasharray:3 5; }
.carte .ring2{ fill:none; stroke:var(--pierre); stroke-width:1; }
.carte .gave{ fill:none; stroke:var(--gris-galet); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1200; stroke-dashoffset:1200; transition:stroke-dashoffset 2.4s var(--ease); }
.terr__map.in .gave{ stroke-dashoffset:0; }
.carte .pt{ fill:var(--ardoise); }
.carte .pt-pau{ fill:var(--ocre); }
.carte text{ font-family:var(--f-texte); font-size:15px; fill:var(--encre); }
.carte .t-pau{ font-family:var(--f-titre); font-size:24px; }
.carte .t-sm{ font-size:13px; fill:var(--encre-douce); }
.carte .t-gave{ font-size:13px; fill:var(--encre-douce); font-style:italic; }
.carte .pt-g{ opacity:0; transform:translateY(6px); transition:opacity 400ms var(--ease), transform 400ms var(--ease); transform-box:fill-box; }
.terr__map.in .pt-g{ opacity:1; transform:none; }
.communes{ list-style:none; padding:0; margin:var(--s-24) 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.communes li{ border:var(--b-fin); border-radius:var(--r-ctrl); padding:6px 12px; font-size:var(--fs-small); background:var(--blanc); }
@media (min-width:1024px){
  .terr__text{ grid-column:1 / span 5; }
  .terr__map{ grid-column:7 / span 6; grid-row:1 / span 2; margin-top:0; align-self:start; position:sticky; top:96px; }
}

/* =========================================================
   SCÈNE 10 — CONTACT
   ========================================================= */
.contact__side{ grid-column:1 / -1; }
.contact__side .chapo{ color:var(--galet); margin-top:var(--s-24); }
.contact__ways{ list-style:none; padding:0; margin:var(--s-48) 0 0; }
.contact__ways li{ border-top:1px solid var(--ardoise-claire); padding:var(--s-16) 0; display:flex; justify-content:space-between; gap:var(--s-16); align-items:baseline; flex-wrap:wrap; }
.contact__ways a{ text-decoration:none; font-weight:600; }
.contact__ways .big{ font-family:var(--f-titre); font-weight:500; font-size:clamp(26px, 1.5vw + 18px, 36px); letter-spacing:-.01em; }
.contact__ways a:hover{ color:var(--ocre-clair); }
.form-card{ grid-column:1 / -1; margin-top:var(--s-48); background:var(--chaux); color:var(--encre); border-radius:var(--r-card); padding:clamp(24px, 3vw, 48px); box-shadow:var(--sh-lg); }
@media (min-width:1024px){ .contact__side{ grid-column:1 / span 5; } .form-card{ grid-column:7 / span 6; margin-top:0; } }
.steps-ind{ display:flex; gap:var(--s-8); margin-bottom:var(--s-32); align-items:center; font-size:13px; color:var(--encre-douce); }
.steps-ind i{ flex:1; height:2px; background:var(--pierre); position:relative; }
.steps-ind i::after{ content:""; position:absolute; inset:0; background:var(--ocre); transform:scaleX(var(--f, .5)); transform-origin:0 50%; transition:transform 400ms var(--ease); }
.fstep[hidden]{ display:none; }
.fstep legend{ padding:0; margin-bottom:var(--s-16); }
fieldset{ border:0; padding:0; margin:0 0 var(--s-24); min-width:0; }
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (min-width:768px){ .tiles{ grid-template-columns:repeat(3, 1fr); } }
.tile{ position:relative; }
.tile input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.tile span{ display:flex; align-items:center; min-height:56px; padding:10px 14px; border:var(--b-fin); border-radius:var(--r-ctrl); background:var(--blanc); font-size:15px; font-weight:500; line-height:1.25; transition:border-color var(--t-fast), box-shadow var(--t-fast); cursor:pointer; }
.tile input:hover + span{ border-color:var(--ardoise); }
.tile input:checked + span{ border-color:var(--ocre); box-shadow:inset 0 0 0 1px var(--ocre); }
.tile input:focus-visible + span{ outline:2px solid var(--ocre); outline-offset:2px; }
.field{ margin-bottom:var(--s-24); }
.field label,.field .lab{ display:block; font-weight:600; font-size:15px; margin-bottom:8px; }
.field .opt{ font-weight:400; color:var(--encre-douce); }
.input{ width:100%; height:52px; padding:0 16px; background:var(--galet); border:var(--b-fin); border-radius:var(--r-ctrl); font-size:16px; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
textarea.input{ height:auto; min-height:120px; padding:14px 16px; resize:vertical; line-height:1.5; }
select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326343C' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='square'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px; }
.input:focus{ outline:none; border-color:var(--ardoise); box-shadow:0 0 0 1px var(--ardoise); }
.input:focus-visible{ outline:none; }
.field.has-error .input{ border-color:var(--erreur); box-shadow:0 0 0 1px var(--erreur); }
.err{ display:none; color:var(--erreur); font-size:14px; margin-top:6px; }
.has-error .err{ display:block; }
.row2{ display:grid; grid-template-columns:1fr; gap:0 var(--s-16); }
@media (min-width:768px){ .row2{ grid-template-columns:1fr 1fr; } }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--encre-douce); }
.check input{ width:20px; height:20px; margin:2px 0 0; accent-color:var(--ocre); flex:0 0 auto; }
.form-actions{ display:flex; flex-wrap:wrap; gap:var(--s-12); align-items:center; margin-top:var(--s-8); }
.form-reassure{ font-size:14px; color:var(--encre-douce); margin-top:var(--s-16); }
.rgpd{ font-size:12.5px; color:var(--encre-douce); margin-top:var(--s-16); line-height:1.5; }
.form-done{ text-align:left; }
.form-done .h3{ margin:var(--s-16) 0; }
.btn-back{ background:none; border:0; padding:0 4px; height:52px; font-weight:600; color:var(--ardoise); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ardoise); color:var(--chaux); border-top:1px solid var(--ardoise-claire); padding:var(--s-72) 0 calc(env(safe-area-inset-bottom,0px) + 32px); }
.footer__cols{ row-gap:var(--s-48); }
.footer__brand{ grid-column:1 / -1; }
.footer__brand p{ color:var(--pierre); margin-top:var(--s-24); max-width:22em; }
.footer__col{ grid-column:span 2; }
.footer__col h2{ margin-bottom:var(--s-16); }
.footer__col ul{ list-style:none; padding:0; margin:0; }
.footer__col li{ padding:5px 0; font-size:15px; }
.footer__col a{ text-decoration:none; color:var(--galet); }
.footer__col a:hover{ color:var(--ocre-clair); }
.footer__col address{ font-style:normal; color:var(--galet); font-size:15px; line-height:1.7; }
.footer__legal{ margin-top:var(--s-72); padding-top:var(--s-24); border-top:1px solid var(--ardoise-claire); display:flex; flex-wrap:wrap; gap:8px 24px; font-size:13px; color:var(--pierre); }
.footer__legal a{ color:var(--pierre); }
@media (min-width:768px){ .footer__brand{ grid-column:1 / span 8; } .footer__col{ grid-column:span 4; } }
@media (min-width:1024px){ .footer__brand{ grid-column:1 / span 4; } .footer__col{ grid-column:span 2; } .footer__col--wide{ grid-column:span 4; } .footer__col:first-of-type{ grid-column:6 / span 2; } }

/* Barre d'action mobile */
.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 12px calc(env(safe-area-inset-bottom,0px) + 8px); background:var(--chaux); border-top:var(--b-fin); transform:translateY(110%); transition:transform 350ms var(--ease); }
.mbar.is-on{ transform:none; }
.mbar .btn{ height:48px; padding:0 12px; }
@media (min-width:1024px){ .mbar{ display:none; } }
@media (max-width:1023px){ .footer{ padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px); } }

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .hero{ height:100vh; height:100svh; }
  .rv{ opacity:1; transform:none; }
  .lines .ln > span{ transform:none; }
  .clip{ clip-path:none; } .clip img{ transform:none; }
  .etape{ opacity:1!important; }
  .hero__scroll{ display:none; }
}

/* =========================================================
   MULTIPAGE — composants des pages intérieures
   ========================================================= */
@view-transition{ navigation:auto; }

/* Header : laptop 1024–1279, la place manque pour le numéro */
@media (min-width:1024px) and (max-width:1279px){
  .nav{ gap:22px; }
  .header__tel{ display:none; }
  .header__in{ gap:18px; }
  .logo__name{ font-size:19px; }
}
/* En-tête compact : téléphone + menu toujours visibles, jusqu'à 320 px */
@media (max-width:479px){
  .header__in{ gap:0; }
  .logo{ gap:10px; min-width:0; }
  .logo svg{ width:30px; }
  .logo__name{ font-size:17px; letter-spacing:.03em; white-space:nowrap; }
  .logo__sig{ font-size:7.6px; }
  .tel-icon,.burger{ width:44px; height:44px; flex:0 0 44px; }
  .tel-icon{ margin-right:2px; }
}
@media (max-width:359px){
  .logo svg{ width:26px; } .logo{ gap:8px; }
  .logo__name{ font-size:15px; letter-spacing:.02em; }
  .logo__sig{ font-size:6.8px; letter-spacing:.16em; }
}
/* Boutons : passage à la ligne autorisé sur petit écran plutôt que texte coupé */
@media (max-width:767px){
  .btn{ white-space:normal; height:auto; min-height:52px; padding-block:12px; line-height:1.25; text-align:center; }
  .mbar .btn{ min-height:48px; padding-block:8px; }
}
.hp{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nav > a[aria-current="page"]::after,.nav__sub > button.is-current::after{ transform:scaleX(1); }
.mega .mega__all{ grid-column:1 / -1; border-bottom:0; padding-top:16px; color:var(--ocre); font-weight:600; }
.mega .mega__sep{ grid-column:1 / -1; height:0; border-top:var(--b-fin); margin:4px 0; }
.mega a[aria-current="page"]{ color:var(--ocre); }
.menu nav a[aria-current="page"]{ color:var(--ocre-clair); }

/* Rideau de transition entre pages */
.curtain{ position:fixed; inset:0; z-index:150; background:var(--ardoise); display:grid; place-items:center; pointer-events:none; clip-path:inset(100% 0 0 0); transition:clip-path 440ms var(--ease); }
.curtain.is-in{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.curtain.is-in.is-out{ clip-path:inset(0 0 100% 0); }
.curtain svg{ width:56px; opacity:0; transform:translateY(8px); transition:opacity 250ms var(--ease) 120ms, transform 250ms var(--ease) 120ms; }
.curtain.is-in svg{ opacity:1; transform:none; }
.curtain.is-out svg{ opacity:0; transition-delay:0s; }

/* ---------- Hero de page ---------- */
.phero{ position:relative; background:var(--ardoise); color:var(--chaux); padding:calc(env(safe-area-inset-top,0px) + var(--header-h) + 32px) 0 var(--s-72); overflow:hidden; }
.phero__grid{ row-gap:var(--s-48); align-items:end; }
.phero__text{ grid-column:1 / -1; min-width:0; }
.phero__fig{ grid-column:1 / -1; margin:0; }
.phero__fig .clip img{ aspect-ratio:4/3; }
.phero .h1{ max-width:14em; overflow-wrap:break-word; hyphens:manual; }
.phero .chapo{ color:var(--galet); margin-top:var(--s-24); max-width:34em; }
.phero__ctas{ display:flex; flex-wrap:wrap; gap:var(--s-12); margin-top:var(--s-32); }
.phero__benef{ list-style:none; padding:0; margin:var(--s-32) 0 0; display:grid; gap:10px; font-size:15px; color:var(--pierre); }
.phero__benef li{ display:flex; gap:10px; align-items:flex-start; }
.phero__benef svg{ width:18px; flex:0 0 auto; margin-top:3px; color:var(--ocre-clair); }
.phero .caption{ color:var(--pierre); }
@media (max-width:767px){ .phero__ctas .btn{ width:100%; } }
@media (max-width:379px){ .btn{ padding:0 18px; } }
@media (min-width:1024px){
  .phero{ padding-top:calc(var(--header-h) + 64px); padding-bottom:var(--s-120); }
  .phero__text{ grid-column:1 / span 7; }
  .phero__fig{ grid-column:8 / span 5; }
  .phero__fig .clip img{ aspect-ratio:4/5; }
  .phero--wide .phero__text{ grid-column:1 / span 10; }
  .phero--compact{ padding-bottom:var(--s-72); }
}

/* Fil d'Ariane */
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 8px; padding:0; margin:0 0 var(--s-32); font-size:14px; line-height:1.5; color:var(--pierre); }
.crumbs li{ display:flex; gap:8px; }
.crumbs li + li::before{ content:"/"; color:var(--gris-galet); }
.crumbs a{ color:var(--galet); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* En-tête de section */
.shead{ grid-column:1 / -1; margin-bottom:var(--s-48); }
.shead p{ margin-top:var(--s-16); color:var(--encre-douce); max-width:36em; }
.on-dark .shead p{ color:var(--pierre); }
@media (min-width:1024px){ .shead{ grid-column:1 / span 8; } }

/* Prestations */
.presta{ grid-column:1 / -1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; column-gap:var(--gutter); }
.presta li{ border-top:var(--b-fin); padding:var(--s-24) 0; display:grid; grid-template-columns:28px 1fr; gap:6px 16px; align-content:start; }
.presta svg{ width:24px; height:24px; color:var(--ardoise); grid-row:span 2; margin-top:2px; }
.presta p{ margin:0; color:var(--encre-douce); font-size:15.5px; }
@media (min-width:600px){ .presta{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .presta{ grid-template-columns:repeat(3, 1fr); } }

/* Étapes compactes (déroulé de service) */
.deroule{ grid-column:1 / -1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0 var(--gutter); counter-reset:d; }
.deroule li{ position:relative; padding:var(--s-24) 0 var(--s-24) 56px; border-top:var(--b-fin); }
.deroule li::before{ counter-increment:d; content:counter(d, decimal-leading-zero); position:absolute; left:0; top:24px; font-family:var(--f-titre); color:var(--ocre); font-size:15px; }
.deroule li::after{ content:""; position:absolute; left:2px; top:56px; width:30px; height:6px; background:var(--pierre); clip-path:polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.deroule li:last-child::after{ background:var(--ocre); }
.deroule p{ margin:6px 0 0; color:var(--encre-douce); font-size:15.5px; }
@media (min-width:1024px){
  .deroule{ grid-template-columns:repeat(5, 1fr); }
  .deroule li{ padding:var(--s-64) 0 0; border-top:var(--b-fort); }
  .deroule li::before{ top:20px; }
  .deroule li::after{ left:auto; right:0; top:22px; }
}

/* Facteurs de budget */
.budget{ grid-column:1 / -1; display:grid; grid-template-columns:1fr; gap:var(--s-32) var(--gutter); }
.facteurs{ list-style:none; margin:0; padding:0; }
.facteurs li{ display:flex; gap:14px; padding:16px 0; border-top:var(--b-fin); }
.facteurs li::before{ content:""; flex:0 0 8px; height:8px; margin-top:9px; background:var(--ardoise); }
.note-box{ background:var(--blanc); border:var(--b-fin); border-radius:var(--r-card); padding:var(--s-32); align-self:start; }
.note-box p{ color:var(--encre-douce); }
@media (min-width:1024px){ .budget{ grid-template-columns:7fr 5fr; } }

/* Pourquoi nous */
.pourquoi{ grid-column:1 / -1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0 var(--gutter); }
.pourquoi li{ border-top:1px solid var(--ardoise-claire); padding:var(--s-24) 0; }
.pourquoi p{ margin:6px 0 0; color:var(--pierre); }
@media (min-width:768px){ .pourquoi{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .pourquoi{ grid-template-columns:repeat(4, 1fr); } }

/* Galerie de réalisations */
.filters{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s-32); }
.chip{ height:44px; padding:0 18px; border:var(--b-fin); border-radius:var(--r-ctrl); background:var(--blanc); font-weight:500; font-size:15px; cursor:pointer; transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.chip:hover{ border-color:var(--ardoise); }
.chip[aria-pressed="true"]{ border-color:var(--ocre); box-shadow:inset 0 0 0 1px var(--ocre); }
.chip span{ color:var(--encre-douce); font-weight:400; margin-left:4px; }
.gal{ grid-column:1 / -1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--s-48) var(--gutter); }
.gal__item.is-hidden{ display:none; }
.gal__btn{ display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:zoom-in; }
.gal__img{ overflow:hidden; background:var(--galet); }
.gal__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 700ms var(--ease); }
.gal__btn:hover .gal__img img,.gal__btn:focus-visible .gal__img img{ transform:scale(1.04); }
.gal__cap{ display:block; padding-top:14px; }
.gal__t{ display:block; font-family:var(--f-titre); font-size:20px; line-height:1.25; }
.gal__m{ display:block; font-size:13px; color:var(--encre-douce); margin-top:4px; }
.gal__item.rv{ transition-delay:calc(var(--i, 0) * 40ms); }
@media (min-width:600px){ .gal{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .gal{ grid-template-columns:repeat(3, 1fr); } .gal--feature .gal__item:first-child:not(.is-hidden){ grid-column:span 2; grid-row:span 2; } .gal--feature .gal__item:first-child .gal__img img{ aspect-ratio:auto; height:100%; min-height:100%; } .gal--feature .gal__item:first-child .gal__btn{ height:100%; display:flex; flex-direction:column; } .gal--feature .gal__item:first-child .gal__img{ flex:1; } }
.gal-count{ grid-column:1 / -1; font-size:14px; color:var(--encre-douce); margin:0 0 var(--s-24); }

/* Visionneuse */
.lb{ border:0; padding:0; margin:0; width:100%; height:100%; max-width:none; max-height:none; background:transparent; color:var(--chaux); }
.lb::backdrop{ background:rgba(30,39,45,.94); }
.lb[open]{ display:grid; grid-template-rows:auto 1fr auto; }
.lb__top{ display:flex; justify-content:space-between; align-items:center; padding:calc(env(safe-area-inset-top,0px) + 12px) var(--pad) 12px; font-size:14px; color:var(--pierre); }
.lb__fig{ margin:0; display:grid; grid-template-rows:1fr auto; min-height:0; padding:0 var(--pad); }
.lb__fig img{ width:100%; height:100%; min-height:0; object-fit:contain; }
.lb__fig figcaption{ padding:14px 0 0; text-align:center; }
.lb__fig figcaption b{ display:block; font-family:var(--f-titre); font-weight:500; font-size:20px; }
.lb__fig figcaption span{ font-size:14px; color:var(--pierre); }
.lb__nav{ display:flex; justify-content:center; gap:12px; padding:16px var(--pad) calc(env(safe-area-inset-bottom,0px) + 16px); }
.lb__btn{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--chaux); background:transparent; color:var(--chaux); display:grid; place-items:center; cursor:pointer; transition:background var(--t-fast), color var(--t-fast); }
.lb__btn:hover{ background:var(--chaux); color:var(--ardoise); }
.lb__btn svg{ width:20px; }
.lb :focus-visible{ outline-color:var(--ocre-clair); }

/* FAQ */
.faq{ grid-column:1 / -1; margin:0; padding:0; list-style:none; border-bottom:var(--b-fin); }
@media (min-width:1024px){ .faq{ grid-column:1 / span 9; } .faq--full{ grid-column:1 / -1; } }
.faq details{ border-top:var(--b-fin); }
.faq summary{ list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-24); padding:22px 0; cursor:pointer; font-family:var(--f-titre); font-weight:500; font-size:clamp(19px, .4vw + 17px, 22px); line-height:1.3; letter-spacing:var(--track-titre); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--ocre); }
.faq__ico{ flex:0 0 28px; height:28px; border:1px solid var(--pierre); border-radius:50%; position:relative; margin-top:1px; transition:transform 300ms var(--ease), border-color var(--t-fast); }
.faq__ico::before,.faq__ico::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px; background:currentColor; transform:translate(-50%,-50%); }
.faq__ico::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform 300ms var(--ease); }
.faq details[open] .faq__ico{ border-color:var(--ocre); }
.faq details[open] .faq__ico::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq__a{ padding:0 0 var(--s-24); color:var(--encre-douce); max-width:44em; }
.faq__a p:last-child{ margin-bottom:0; }
.faq-theme{ grid-column:1 / -1; margin:var(--s-64) 0 var(--s-16); }
.faq-theme:first-of-type{ margin-top:0; }
.faq-nav{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s-48); }
.faq-nav a{ text-decoration:none; }

/* Bloc CTA de fin de page */
.ctab{ background:var(--ardoise); color:var(--chaux); }
.ctab__in{ padding-block:var(--section); row-gap:var(--s-32); align-items:end; }
.ctab__t{ grid-column:1 / -1; font-family:var(--f-titre); font-weight:500; font-size:clamp(36px, 3.6vw + 18px, 76px); line-height:1.02; letter-spacing:-.015em; margin:0; overflow-wrap:break-word; }
.ctab__side{ grid-column:1 / -1; }
.ctab__side p{ color:var(--galet); }
.ctab__btns{ display:flex; flex-wrap:wrap; gap:var(--s-12); margin-top:var(--s-24); }
.ctab__small{ font-size:14px; color:var(--pierre); margin-top:var(--s-16); }
@media (max-width:767px){ .ctab__btns .btn{ width:100%; } }
@media (min-width:1024px){ .ctab__t{ grid-column:1 / span 7; } .ctab__side{ grid-column:8 / span 5; } }

/* Lignes de services (hub + services liés) */
.srow{ display:grid; grid-template-columns:1fr; gap:var(--s-24) var(--gutter); padding:var(--s-48) 0; border-top:var(--b-fin); text-decoration:none; color:inherit; }
.srow:last-child{ border-bottom:var(--b-fin); }
.srow__img{ overflow:hidden; background:var(--galet); }
.srow__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 800ms var(--ease); }
.srow:hover .srow__img img{ transform:scale(1.035); }
.srow__img--none{ aspect-ratio:4/3; display:grid; place-items:center; }
.srow__img--none svg{ width:64px; opacity:.5; }
.srow__body{ align-self:center; min-width:0; }
.srow__body .h2{ transition:color var(--t-fast); }
.srow:hover .srow__body .h2{ color:var(--ocre); }
.srow__body p{ color:var(--encre-douce); margin:var(--s-16) 0 var(--s-24); max-width:30em; }
.srow__go{ font-weight:600; color:var(--ocre); display:inline-flex; gap:8px; }
@media (min-width:768px){ .srow{ grid-template-columns:5fr 6fr; } .srow:nth-child(even) .srow__img{ order:2; } }
@media (min-width:1024px){ .srow{ grid-template-columns:5fr 1fr 6fr; padding:var(--s-64) 0; } .srow__body{ grid-column:3; } .srow:nth-child(even){ grid-template-columns:6fr 1fr 5fr; } .srow:nth-child(even) .srow__img{ grid-column:3; grid-row:1; } .srow:nth-child(even) .srow__body{ grid-column:1; grid-row:1; } }

.liens{ grid-column:1 / -1; }

/* Engagements / valeurs étendues */
.engag{ grid-column:1 / -1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0 var(--gutter); }
.engag li{ border-top:var(--b-fort); padding:var(--s-24) 0 var(--s-32); }
.engag .h3{ margin-bottom:var(--s-12); }
.engag p{ margin:0; color:var(--encre-douce); }
@media (min-width:768px){ .engag{ grid-template-columns:repeat(3, 1fr); } }
.engag--4{ }
@media (min-width:1024px){ .engag--4{ grid-template-columns:repeat(4, 1fr); } }
@media (min-width:768px) and (max-width:1023px){ .engag--4{ grid-template-columns:1fr 1fr; } }

/* Colonne texte + image */
.duo{ row-gap:var(--s-48); align-items:center; }
.duo__text{ grid-column:1 / -1; min-width:0; }
.duo__fig{ grid-column:1 / -1; margin:0; }
.duo__fig .px{ overflow:hidden; }
.duo__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; transform:translateY(var(--py, 0px)) scale(1.1); }
.duo__text p{ color:var(--encre-douce); }
@media (min-width:1024px){ .duo__text{ grid-column:1 / span 6; } .duo__fig{ grid-column:8 / span 5; } .duo--rev .duo__text{ grid-column:7 / span 6; grid-row:1; } .duo--rev .duo__fig{ grid-column:1 / span 5; grid-row:1; } }

/* Emplacement à fournir */
.slot{ border:1px dashed var(--chene); border-radius:var(--r-card); padding:var(--s-24); color:var(--encre-douce); font-size:15px; background:transparent; }
.slot .label{ display:block; margin-bottom:6px; }

/* Communes */
.ctable{ list-style:none; margin:0; padding:0; grid-column:1 / -1; }
.ctable li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-top:var(--b-fin); }
.ctable li:last-child{ border-bottom:var(--b-fin); }
.ctable b{ font-family:var(--f-titre); font-weight:500; font-size:21px; }
.ctable span{ font-size:14px; color:var(--encre-douce); white-space:nowrap; font-variant-numeric:tabular-nums; }
.zone__grid{ row-gap:var(--s-48); }
.zone__map{ grid-column:1 / -1; }
.zone__list{ grid-column:1 / -1; }
@media (min-width:1024px){ .zone__map{ grid-column:1 / span 7; position:sticky; top:96px; align-self:start; } .zone__list{ grid-column:9 / span 4; } }

/* Contact */
.contact-page{ row-gap:var(--s-48); }
.contact-page .form-card{ grid-column:1 / -1; margin-top:0; background:var(--blanc); border:var(--b-fin); box-shadow:var(--sh-md); }
.contact-page__aside{ grid-column:1 / -1; }
.contact-page__aside .contact__ways{ margin-top:0; }
.contact-page__aside .contact__ways li{ border-top:var(--b-fin); }
.contact-page__aside .contact__ways a:hover{ color:var(--ocre); }
@media (min-width:1024px){ .contact-page .form-card{ grid-column:1 / span 7; } .contact-page__aside{ grid-column:9 / span 4; position:sticky; top:96px; align-self:start; } }

/* Pages texte (légal) */
.prose{ max-width:var(--texte-long); }
.prose h2{ font-family:var(--f-titre); font-weight:500; font-size:var(--fs-h3); line-height:1.2; margin:var(--s-48) 0 var(--s-16); }
.prose h2:first-child{ margin-top:0; }
.prose p,.prose li{ color:var(--encre-douce); }
.prose a{ color:var(--ocre); }
.prose dl{ margin:0; display:grid; grid-template-columns:1fr; border-top:var(--b-fin); }
.prose dl div{ display:grid; grid-template-columns:1fr; gap:2px 24px; padding:12px 0; border-bottom:var(--b-fin); }
.prose dt{ font-weight:600; font-size:15px; }
.prose dd{ margin:0; color:var(--encre-douce); }
.prose .todo{ font-style:italic; color:var(--chene); }
@media (min-width:768px){ .prose dl div{ grid-template-columns:220px 1fr; } }

/* Merci / 404 */
.simple{ min-height:calc(100vh - 120px); min-height:calc(100svh - 120px); display:flex; align-items:center; padding-top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 48px); padding-bottom:var(--s-72); }
.simple .h1{ margin:var(--s-24) 0; }
.simple .chapo{ color:var(--encre-douce); max-width:32em; }
.next{ list-style:none; padding:0; margin:var(--s-32) 0; counter-reset:n; max-width:36em; }
.next li{ counter-increment:n; display:grid; grid-template-columns:40px 1fr; padding:14px 0; border-top:var(--b-fin); color:var(--encre-douce); }
.next li::before{ content:counter(n, decimal-leading-zero); font-family:var(--f-titre); color:var(--ocre); }

/* Liens « continuer » en fin de section */
.more{ grid-column:1 / -1; margin-top:var(--s-48); display:flex; flex-wrap:wrap; gap:var(--s-16) var(--s-32); align-items:center; }