/* =====================================================================
   Sections de la page d'accueil — mise en page uniquement.
   Couleurs, tailles, espacements, rayons, ombres : tokens de style.css.
   Ordre et thème : Hero (clair) · bandeau · Métier (clair) · Services + Pour qui (sombre, un même chapitre)
   · Méthode (clair) · Réalisations (sombre) · Zone (clair) · FAQ (sombre) · Contact (clair) · Pied (sombre)
   ===================================================================== */

/* ---------- Hero ---------- */
.hb-hero{position:relative;overflow:hidden;padding:calc(var(--hdr) + var(--sp-6) + env(safe-area-inset-top)) 0 var(--head-gap)}
.hb-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 100% 0%,rgba(140,212,62,.28),transparent 70%)}
.hb-grid{position:relative;display:grid;gap:var(--sp-7)}
.hb-copy{display:grid;gap:var(--sp-5);align-content:start}
.hb-kw{margin-bottom:var(--sp-5)}
.hb-copy .actions{margin-top:var(--sp-1)}
.hb-visual{position:relative;padding-bottom:var(--sp-6)}
.hb-main{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-3);box-shadow:var(--sh-lg)}
.hb-main img,.hb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-vid{opacity:0;transition:opacity 1s}
.hb-vid.is-on{opacity:1}
.hb-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(5,5,6,.35))}
.hb-inset{position:absolute;left:calc(var(--sp-2) * -1);bottom:0;width:44%;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;border:5px solid var(--paper);background:var(--ink-3);box-shadow:var(--sh-lg)}
.hb-inset img{width:100%;height:100%;object-fit:cover}
.hb-proof{position:absolute;right:var(--sp-4);bottom:calc(var(--sp-6) + var(--sp-4));display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);border-radius:var(--r-sm);background:rgba(251,251,248,.94);color:var(--ink);font-size:var(--fs-6);font-weight:var(--w-bold);line-height:1.25;box-shadow:var(--sh-sm)}
.hb-proof img{width:40px;height:auto;border-radius:6px}
@media(min-width:600px) and (max-width:959px){.hb-visual{max-width:480px}}   /* tablette : la photo ne domine pas la page */
@media(min-width:960px){
  .hb-hero{padding-top:calc(var(--hdr) + var(--sp-8))}
  .hb-grid{grid-template-columns:1.15fr .85fr;gap:var(--cols-gap);align-items:center}
  .hb-inset{left:calc(var(--sp-7) * -1);width:40%}
}
/* entrée */
.js .hb-copy>*,.js .hb-visual{transform:translateY(20px);animation:hb-in .7s var(--ease) forwards}   /* translation seule : l'image LCP reste visible */
.js .hb-copy>:nth-child(2){animation-delay:.06s}
.js .hb-copy>:nth-child(3){animation-delay:.12s}
.js .hb-visual{animation-delay:.1s}
@keyframes hb-in{to{transform:none}}
@media(prefers-reduced-motion:reduce){.js .hb-copy>*,.js .hb-visual{transform:none}}

/* ---------- Notre métier ---------- */
.mb-sec .head{margin-bottom:var(--sp-5)}   /* l'accroche tient lieu de titre : même écart qu'un sur-titre et son H2 */
.mb-lead{font:var(--w-med) var(--fs-3)/1.2 var(--f-d);font-stretch:var(--stretch);letter-spacing:var(--ls-title);max-width:24ch;text-wrap:pretty}
.mb-list{display:grid;gap:var(--sp-3)}
.mb-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--sp-4);align-items:center;padding:var(--sp-3);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md)}   /* même carte que .card */
.js .mb-row{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .mb-row.is-in{opacity:1;transform:none}
.mb-row img{width:84px;height:84px;object-fit:cover;border-radius:var(--r-sm);background:var(--paper-2)}
.mb-row h3{display:flex;align-items:baseline;gap:var(--sp-3)}
.mb-row p{color:var(--c-muted);margin-top:var(--sp-1);max-width:var(--measure)}
@media(min-width:900px){
  .mb-lead{position:sticky;top:calc(var(--hdr) + var(--sp-6))}
  .mb-row{grid-template-columns:128px minmax(0,1fr);gap:var(--sp-5)}
  .mb-row img{width:128px;height:128px}
}

/* ---------- Services : cartes empilées ---------- */
.stack{display:grid}
.sv-card{position:sticky;top:calc(var(--hdr) + var(--sp-3) + var(--i) * 14px);display:grid;grid-template-rows:auto 1fr;margin-bottom:var(--sp-6);box-shadow:0 -20px 50px rgba(0,0,0,.5)}
.sv-card:last-child{margin-bottom:0}
.sv-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.sv-card__img img{width:100%;height:100%;object-fit:cover}
.sv-card .tags{margin-top:var(--sp-1)}
@media(min-width:900px){
  .sv-card{grid-template-rows:none;grid-template-columns:1.05fr 1fr;min-height:480px;top:calc(var(--hdr) + var(--sp-5) + var(--i) * 22px);margin-bottom:var(--sp-7)}
  .sv-card:nth-child(even){grid-template-columns:1fr 1.05fr}
  .sv-card:nth-child(even) .sv-card__img{order:2}
  .sv-card__img{aspect-ratio:auto}
  .sv-card .card__body{align-content:center;gap:var(--sp-4)}
}
/* Services et Pour qui forment un même chapitre sombre : un filet les sépare */
.audience{border-top:1px solid var(--c-line)}

/* ---------- Pour qui : 3 profils visibles d'emblée, révélés au scroll ---------- */
.pq-grid{display:grid;gap:var(--sp-4)}
.tile{container-type:inline-size;position:relative;isolation:isolate;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:var(--ink-3);color:#fff}
.tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,5,6,0) 25%,rgba(5,5,6,.6) 55%,rgba(5,5,6,.95))}
.tile__txt{position:absolute;inset:auto 0 0 0;display:grid;gap:var(--sp-2);padding:var(--card-pad)}
.tile p{color:rgba(255,255,255,.85);max-width:40ch}
.js .tile img{transform:scale(1.12)}
.js .tile.is-in img{transform:none}
.tile:hover img{transform:scale(1.04)}
@media(min-width:600px) and (max-width:899px){.tile{aspect-ratio:16/9}}
@media(min-width:900px){
  .pq-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
  .tile{aspect-ratio:3/4}
  .js .tile,.js .tile img{transition-delay:calc(var(--i) * .14s)}
}

/* ---------- Méthode ---------- */
.tb-list{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(var(--gut) * -1);padding:var(--sp-1) var(--gut) var(--sp-4);scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tb-list::-webkit-scrollbar{display:none}
.tb-card{flex:0 0 84%;scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;box-shadow:var(--sh-sm)}
.tb-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-3);--c-accent:var(--g500)}
.tb-media img{width:100%;height:100%;object-fit:cover}
.tb-num{position:absolute;left:var(--sp-4);bottom:var(--sp-2);text-shadow:0 2px 12px rgba(5,5,6,.45)}
.tb-call .tb-media{background:radial-gradient(circle at 70% 30%,rgba(140,212,62,.35),transparent 60%),var(--ink)}
.tb-call .tb-media svg{position:absolute;right:var(--sp-5);top:50%;width:56px;height:56px;transform:translateY(-50%);color:var(--g500);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb-prog{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-2)}
.tb-prog__bar{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tb-prog__bar i{position:relative;height:6px;border-radius:3px;background:var(--c-line);overflow:hidden}
.tb-prog__bar i::after{content:"";position:absolute;inset:0;background:var(--g500);transform-origin:left;transform:scaleX(var(--f,0))}
.tb-end{display:grid;gap:var(--sp-3);justify-items:start;margin-top:var(--sp-7)}
@media(max-width:559px){.tb-end .btn{width:100%}}
@media(min-width:760px){
  .tb-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);overflow:visible;margin-inline:0;padding:0}
  .tb-prog{display:none}
  .tb-end{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5)}
}
@media(min-width:1100px){
  .tb-list{grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
  .tb-call .tb-media svg{width:44px;height:44px;right:var(--sp-4)}
  .tb-list::before,.tb-list::after{content:"";position:absolute;left:0;top:calc(var(--sp-5) * -1);height:2px;width:100%}
  .tb-list::before{background:var(--c-line)}
  .tb-list::after{background:var(--g500);transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--t-fast) linear}
  .tb-card{transition:transform .5s var(--ease)}
  .tb-card:hover{transform:translateY(-6px)}
}

/* ---------- Réalisations (photos de chantier, pile) ---------- */
.rx-sec{overflow:hidden;background:radial-gradient(60% 40% at 78% 38%,rgba(140,212,62,.16),transparent 70%),var(--black)}
.rx-grid{display:grid;row-gap:var(--sp-5);grid-template-areas:"head" "stage" "info"}
.rx-grid .head{grid-area:head;margin-bottom:var(--sp-4)}
.rx-stage{grid-area:stage;display:grid;place-items:center;padding-block:var(--sp-3) var(--sp-4)}
.rx-info{grid-area:info;display:grid;gap:var(--sp-5)}
@media(min-width:900px){
  .rx-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"head stage" "info stage";align-items:center;column-gap:var(--cols-gap);row-gap:0}
  .rx-grid .head{align-self:end;margin-bottom:var(--sp-7)}
  .rx-info{align-self:start}
}
.rx-deck{position:relative;width:min(66vw,300px,calc(44svh * .8));aspect-ratio:4/5;touch-action:pan-y;-webkit-user-select:none;user-select:none}
@media(min-width:900px){.rx-deck{width:min(30vw,380px,calc(52svh * .8))}}
.rx-card{position:absolute;inset:0;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--ink-3);border:1px solid var(--c-line);box-shadow:var(--sh-dark);transition:transform .55s var(--ease),opacity .4s;will-change:transform;cursor:grab;transform-origin:50% 90%}
.rx-card img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.rx-card[data-p="0"]{transform:none;z-index:7}
.rx-card[data-p="1"]{transform:translate3d(38px,-4px,0) rotate(6deg) scale(.93);z-index:6;filter:brightness(.7)}
.rx-card[data-p="2"]{transform:translate3d(-38px,-8px,0) rotate(-6deg) scale(.93);z-index:5;filter:brightness(.5)}
.rx-card[data-p="3"],.rx-card[data-p="4"],.rx-card[data-p="5"],.rx-card[data-p="6"]{transform:translate3d(0,-14px,0) scale(.86);z-index:4;opacity:0;pointer-events:none}
.rx-card.is-drag{transition:none;cursor:grabbing}
.rx-card.is-fly{transition:transform .38s cubic-bezier(.5,0,.8,.4),opacity .38s}
.rx-card.is-snap{transition:none}
.rx-card[data-p="0"]:focus-visible{outline-offset:4px}
.rx-wiggle .rx-card[data-p="0"]{animation:rx-wig 1.1s .8s var(--ease) 1}
@keyframes rx-wig{0%,100%{transform:none}30%{transform:translateX(-22px) rotate(-3deg)}65%{transform:translateX(12px) rotate(1.5deg)}}
.rx-meta{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--sp-1) var(--sp-4);min-height:84px}
.rx-meta .idx{grid-row:span 2}
.rx-meta b{align-self:end}
.rx-meta span:not(.idx){align-self:start;color:var(--c-muted)}
.rx-ctrl{display:flex;align-items:center;gap:var(--sp-3)}
.rx-btn{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--c-line-strong);background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--t-fast),border-color var(--t-fast),transform .15s}
.rx-btn:hover{border-color:var(--c-fg)}
.rx-btn:active{transform:scale(.94)}
.rx-btn--go{background:var(--g500);border-color:var(--g500);color:var(--black)}
.rx-btn--go:hover{background:var(--g400);border-color:var(--g400)}
.rx-bars{flex:1;display:flex;gap:var(--sp-1);min-width:0}
.rx-bars button{position:relative;flex:1;height:48px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rx-bars button::after{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:rgba(255,255,255,.18);transition:background .3s,height .3s}
.rx-bars button[aria-current="true"]::after{background:var(--g500);height:6px;margin-top:-3px}

/* ---------- Zone ---------- */
.zb-grid{display:grid;gap:var(--sp-5)}
.zb-card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-3) var(--sp-4)}
.zb-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 42%,rgba(140,212,62,.12),transparent 70%)}
.zb-map{position:relative;z-index:1;max-width:560px;margin-inline:auto;aspect-ratio:768/624}
.zb-map svg{width:100%;height:auto}
.zb-map img{width:100%;aspect-ratio:768/624;object-fit:cover;object-position:50% 60%}
.zb-map svg g{transition:opacity var(--t-base) var(--ease)}
.zb-map svg g:not(:first-child){cursor:pointer}
.zb-map[data-sel="44"] svg g:nth-child(n+3),
.zb-map[data-sel="49"] svg g:nth-child(2),.zb-map[data-sel="49"] svg g:nth-child(4),
.zb-map[data-sel="85"] svg g:nth-child(2),.zb-map[data-sel="85"] svg g:nth-child(3){opacity:.14}
.zb-map[data-sel="44"] svg g:first-child,.zb-map[data-sel="49"] svg g:first-child,.zb-map[data-sel="85"] svg g:first-child{opacity:.55}
.zb-tag{position:absolute;z-index:2;transform:translate(-50%,-50%);font:var(--w-bold) var(--fs-3)/1 var(--f-d);font-stretch:var(--stretch);letter-spacing:var(--ls-sub);color:#fff;background:rgba(5,5,6,.78);padding:.2em .42em;border-radius:var(--r-sm);border:1px solid var(--c-line-strong);pointer-events:none;transition:opacity .4s}
.zb-card[data-sel="44"] .zb-tag:not(.zb-tag--44),.zb-card[data-sel="49"] .zb-tag:not(.zb-tag--49),.zb-card[data-sel="85"] .zb-tag:not(.zb-tag--85){opacity:.15}
.zb-hint{position:relative;z-index:1;margin-top:var(--sp-3);text-align:center}
.zb-tabs{display:grid;gap:var(--sp-3)}
.zb-tab{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-4);min-height:72px;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);border:1.5px solid var(--c-line);background:transparent;color:var(--c-fg);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.zb-tab:hover{border-color:var(--c-line-strong)}
.zb-tab:active{transform:scale(.985)}
.zb-tab b{font:var(--w-bold) var(--fs-3)/1 var(--f-d);font-stretch:var(--stretch);letter-spacing:var(--ls-sub);font-variant-numeric:tabular-nums;min-width:2.1ch}
.zb-tab span{font-weight:var(--w-bold);line-height:1.25}
.zb-tab i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--c-line)}
.zb-tab[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.zb-tab[aria-pressed="true"] i{box-shadow:0 0 0 3px var(--ink),0 0 0 4px var(--c)}
.zb-panel{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--c-line);min-height:150px}
.zb-panel h3{margin-bottom:var(--sp-2)}
.zb-panel p{color:var(--c-muted);max-width:var(--measure)}
@media(min-width:600px){.zb-card{padding:var(--sp-6) var(--sp-6) var(--sp-4)}}
@media(min-width:900px){.zb-grid{grid-template-columns:6fr 5fr;gap:var(--cols-gap);align-items:center}}

/* ---------- FAQ ---------- */
.fq-head{margin-bottom:0}
.fq-list{display:grid;gap:var(--sp-3)}
.fq-item{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);transition:border-color var(--t-fast)}   /* même carte que .card */
.fq-item[open]{border-color:var(--c-line-strong)}
.fq-item summary{list-style:none;display:grid;grid-template-columns:var(--sp-5) 1fr auto;gap:var(--sp-4);align-items:baseline;min-height:48px;padding:var(--sp-4) var(--sp-5);cursor:pointer;border-radius:var(--r-md)}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary h3{transition:color var(--t-fast)}
.fq-item summary:hover h3{color:var(--c-accent)}
.fq-ico{position:relative;width:22px;height:22px;flex:none;align-self:center}
.fq-ico::before,.fq-ico::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:2px;border-radius:2px;background:var(--c-accent);transition:transform .3s var(--ease)}
.fq-ico::after{transform:rotate(90deg)}
.fq-item[open] .fq-ico::after{transform:rotate(0)}
.fq-a{display:grid;gap:var(--sp-2);justify-items:start;padding:0 var(--sp-5) var(--sp-5) calc(var(--sp-5) * 2 + var(--sp-4))}   /* aligné sur le texte de la question */
.fq-a p{color:var(--c-muted);max-width:62ch}
@media(max-width:520px){.fq-item summary{padding-inline:var(--sp-4)}.fq-a{padding-inline:var(--sp-4)}}
@media(min-width:900px){.fq-head{position:sticky;top:calc(var(--hdr) + var(--sp-6))}}

/* ---------- Contact ---------- */
.ct__grid{display:grid;gap:var(--sp-7);align-items:start}
.ct__form{container-type:inline-size;display:grid;gap:var(--sp-4);min-width:0;padding:var(--card-pad);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);scroll-margin-top:calc(var(--hdr) + var(--sp-3))}
.ct__fhead{display:grid;gap:var(--sp-1)}
.ct__q0{border:0;margin:0;padding:0;min-width:0}
.ct__q0 .legend{padding:0;margin-bottom:var(--sp-2)}
.ct__seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-1);padding:var(--sp-1);border-radius:var(--r-md);background:rgba(11,11,12,.07)}
.ct__opt{position:relative;display:block;min-width:0}
.ct__opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}
.ct__opt span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px 4px;border-radius:var(--r-sm);text-align:center;font-weight:var(--w-bold);font-size:var(--fs-6);line-height:1.2;transition:background var(--t-fast),color var(--t-fast)}
.ct__opt input:checked+span{background:var(--g500);color:var(--black)}
.ct__opt input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.ct__row{display:grid;gap:var(--sp-4);min-width:0}
.ct__tech{display:grid;gap:var(--sp-3);min-width:0;margin:0;padding:var(--sp-4);border:0;border-radius:var(--r-md);background:rgba(11,11,12,.04)}
.ct__tech[hidden]{display:none}
.ct__tech .legend{float:left;width:100%;padding:0;margin-bottom:var(--sp-3)}
.field .ct__zone{font-weight:var(--w-med);color:var(--c-accent)}
.field .ct__zone[data-in="0"]{color:var(--c-muted)}
.ct__trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ct__err{padding:var(--sp-3) var(--sp-4);border:2px solid var(--danger);border-radius:var(--r-sm);background:var(--white);color:var(--danger-txt);font-size:var(--fs-6);font-weight:var(--w-bold)}
.ct__err a{text-decoration:underline}
.ct__send{width:100%}
.ct__ok{padding:var(--sp-4);border-left:6px solid var(--g500);border-radius:var(--r-sm);background:var(--paper);line-height:var(--lh-normal)}
/* colonnes du formulaire selon sa propre largeur : jamais de libellé ni de liste tronqués */
@container (max-width:300px){.ct__seg{grid-template-columns:1fr}}
@container (min-width:380px){.ct__opt span{font-size:var(--fs-5)}}
@container (min-width:420px){.ct__row--2{grid-template-columns:1fr 1fr}}
@container (min-width:640px){.ct__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){
  .ct__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--cols-gap)}
  .ct__left{position:sticky;top:calc(var(--hdr) + var(--sp-6))}
}