:root{
  --tarmac:#191C21; --hangar:#22262D; --nuit:#12151A;
  --chene:#B3763A; --chene-clair:#D4A06A;
  --craie:#E9E5DD; --craie-sourde:#A9A49B; --ligne:#343A43;
  --max:1180px;
  --pas:clamp(3.5rem,7vw,7rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:transparent;color:var(--craie);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);line-height:1.65;
  font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:700;line-height:1.05;margin:0;font-variation-settings:"wdth" 112}
h1{font-size:clamp(2.4rem,1.3rem + 4.6vw,4.7rem);letter-spacing:-.025em}
h2{font-size:clamp(1.75rem,1.15rem + 2.3vw,2.85rem);letter-spacing:-.02em}
h3{font-size:clamp(1.12rem,1rem + .5vw,1.4rem);letter-spacing:-.01em;font-variation-settings:"wdth" 104}
p{margin:0 0 1.1em}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.mesure{max-width:62ch}
:focus-visible{outline:3px solid var(--chene-clair);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--craie);color:var(--nuit);padding:.6rem 1rem}

/* barre */
.barre{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.barre .wrap{display:flex;align-items:center;gap:1.5rem;min-height:66px}
.logo{font-weight:800;font-size:1.06rem;letter-spacing:-.02em;text-decoration:none;
  font-variation-settings:"wdth" 108;display:flex;align-items:center;gap:.5rem}
.logo span{color:var(--chene-clair)}
.nav{margin-left:auto;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:.94rem;color:var(--craie-sourde);
  padding-block:.2rem;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:var(--craie);border-bottom-color:var(--chene)}
@media(max-width:860px){.nav{display:none}.barre .wrap{min-height:58px}
  .nav.mob{display:flex;margin:0;gap:1.1rem;overflow-x:auto;padding-block:.55rem;
    border-top:1px solid var(--ligne)}
  .nav.mob a{white-space:nowrap;font-size:.86rem}}
@media(min-width:861px){.nav.mob{display:none}}

/* boutons */
.btn{display:inline-block;text-decoration:none;font-weight:650;font-size:.97rem;
  padding:.85rem 1.6rem;border:1px solid var(--chene);background:var(--chene);color:#14161A;
  transition:background .15s,color .15s}
.btn:hover{background:var(--chene-clair);border-color:var(--chene-clair)}
.btn.creux{background:transparent;color:var(--craie);border-color:var(--ligne)}
.btn.creux:hover{background:transparent;border-color:var(--chene-clair);color:var(--chene-clair)}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}

/* fond fixe : l'image reste derriere tout le site */
.fond{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--nuit)}
.fond img{position:absolute;top:-14%;left:0;width:100%;height:128%;object-fit:cover;
  object-position:center 45%;will-change:transform}
.fond::after{content:"";position:absolute;inset:0;
  background:rgba(18,21,26,.52)}

/* mega hero : plein ecran, transparent, le fond se voit au travers */
.mega::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(18,21,26,.38) 0%,rgba(18,21,26,.12) 26%,rgba(18,21,26,.62) 68%,rgba(18,21,26,.86) 100%)}
.mega{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:7rem 4.2rem;position:relative;overflow:hidden}
.mega .wrap{width:100%}
.titre-geant{font-size:clamp(2.7rem,7.9vw,7.4rem);line-height:.88;letter-spacing:-.04em;
  font-weight:800;font-variation-settings:"wdth" 125;margin:0;
  text-wrap:balance;will-change:transform,opacity}
.titre-geant span{display:block}
.titre-geant span:last-child{color:var(--chene-clair)}
.mega .chapo{font-size:clamp(1.02rem,.95rem + .5vw,1.28rem);color:#DCD7CE;max-width:44ch;
  margin:1.9rem 0 0;will-change:transform,opacity}
.mega .actions{margin-top:2rem}
.mega .socle{margin-top:2.4rem;display:flex;gap:2.4rem;flex-wrap:wrap;padding-top:1.5rem;
  border-top:1px solid rgba(233,229,221,.22);font-size:.9rem;color:var(--craie-sourde)}
.mega .socle b{display:block;color:var(--craie);font-size:1.08rem;font-weight:650;
  font-variation-settings:"wdth" 112}
.fleche{position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;width:1px;height:42px;
  background:linear-gradient(var(--chene-clair),transparent)}
@media (prefers-reduced-motion:no-preference){
  .fleche{animation:glisse 2.6s ease-in-out infinite}
  @keyframes glisse{0%,100%{opacity:.25;transform:translateY(-8px)}50%{opacity:1;transform:translateY(0)}}}

/* fenetre : section transparente, le fond fixe reapparait */
.fenetre{background:transparent!important;position:relative;
  border-block:1px solid rgba(233,229,221,.14)}
.fenetre::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(18,21,26,.86) 0%,rgba(18,21,26,.62) 52%,rgba(18,21,26,.3) 100%)}
.fenetre .wrap{position:relative}
.fenetre h2{font-size:clamp(2rem,1.2rem + 3.4vw,4rem);max-width:15ch;
  font-variation-settings:"wdth" 118;letter-spacing:-.03em}

/* barre qui se densifie apres le hero */
.barre{background:transparent;border-bottom-color:transparent;transition:background .25s,border-color .25s}
.barre.dur{background:#191C21;border-bottom-color:var(--ligne)}
body:not(.accueil) .barre{background:#191C21;border-bottom-color:var(--ligne)}

/* banniere des pages interieures */
.hero-page{position:relative;padding-block:clamp(4.5rem,11vw,8rem) clamp(3rem,6vw,4.5rem);
  overflow:hidden;border-bottom:1px solid var(--ligne)}
.hero-page .fond-page{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-page .fond-page img{width:100%;height:118%;object-fit:cover;object-position:center 45%;
  will-change:transform}
.hero-page .fond-page::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,21,26,.78),rgba(18,21,26,.93))}
.hero-page h1{max-width:15ch}

/* sections */
section{padding-block:var(--pas);position:relative;background:var(--tarmac);z-index:1}
.tete{max-width:60ch;margin-bottom:3rem}
.tete p{color:var(--craie-sourde);margin-top:1.1rem;font-size:1.06rem}
.sombre{background:var(--nuit)}
.claire{background:var(--craie);color:#1A1D22}
.claire h2,.claire h3{color:#14161A}
.claire .tete p{color:#4D5259}

/* tableau des décors */
.board{border-top:1px solid var(--ligne)}
.board a{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) auto;
  gap:1.5rem;align-items:baseline;text-decoration:none;
  padding-block:1.55rem;border-bottom:1px solid var(--ligne);transition:background .15s,padding .15s}
.board a:hover,.board a:focus-visible{background:rgba(179,118,58,.09);padding-inline:.85rem}
.board .nom{font-weight:700;font-size:clamp(1.22rem,1.05rem + .8vw,1.75rem);
  letter-spacing:-.018em;font-variation-settings:"wdth" 108}
.board .nom em{display:block;font-style:normal;font-size:.8rem;font-weight:450;
  color:var(--craie-sourde);letter-spacing:.02em;margin-top:.3rem;font-variation-settings:"wdth" 100}
.board .quoi{color:var(--craie-sourde);font-size:.99rem}
.board .prix{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.2rem,1rem + .8vw,1.6rem);
  color:var(--chene-clair);white-space:nowrap;text-align:right}
.board .prix i{display:block;font-style:normal;font-family:"Archivo",sans-serif;
  font-size:.76rem;color:var(--craie-sourde);margin-top:.15rem}
@media(max-width:760px){.board a{grid-template-columns:1fr auto;gap:.5rem 1rem}
  .board .quoi{grid-column:1/-1;order:3}}

/* argument */
.argument{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.6rem 3rem}
.argument h3{margin-bottom:.7rem}
.argument p{color:var(--craie-sourde);margin:0}
.claire .argument p{color:#4D5259}

/* étapes : vraie séquence, donc numérotées */
.etapes{counter-reset:e;display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.etape{counter-increment:e;padding-top:1.3rem;border-top:2px solid var(--chene)}
.etape::before{content:counter(e,decimal-leading-zero);font-family:"Instrument Serif",Georgia,serif;
  font-size:1.9rem;color:var(--chene);display:block;line-height:1;margin-bottom:.7rem}
.etape h3{margin-bottom:.55rem}
.etape p{color:var(--craie-sourde);margin:0;font-size:.98rem}
.claire .etape p{color:#4D5259}

/* galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.6rem}
.visuel img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 45%;background:var(--hangar)}
.galerie img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--hangar)}

/* fiche décor */
.fiche{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.85fr);
  gap:3.5rem;align-items:start}
@media(max-width:900px){.fiche{grid-template-columns:1fr;gap:2.5rem}}
.bloc{margin-bottom:2.4rem}
.bloc h3{margin-bottom:.6rem}
.bloc p{color:var(--craie-sourde);margin:0}
.encart{border:1px solid var(--ligne);padding:1.8rem;position:sticky;top:90px;background:var(--nuit)}
@media(max-width:900px){.encart{position:static}}
.encart h2{font-size:1.25rem;margin-bottom:1.2rem}
.grille-tarif{list-style:none;padding:0;margin:0 0 1.6rem}
.grille-tarif li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding-block:.7rem;border-bottom:1px solid var(--ligne)}
.grille-tarif li:last-child{border-bottom:0}
.grille-tarif span{color:var(--craie-sourde);font-size:.94rem}
.grille-tarif b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:1.28rem;color:var(--chene-clair);white-space:nowrap}

/* réalisations */
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.5rem}
.ref{border-top:1px solid var(--ligne);padding-top:1.2rem}
.ref b{display:block;font-size:1.12rem;font-weight:700;margin-bottom:.45rem;
  font-variation-settings:"wdth" 106}
.ref p{margin:0;font-size:.94rem;color:var(--craie-sourde)}
.ref .canaux{margin-top:.5rem;font-size:.84rem;color:var(--chene-clair)}
.claire .ref{border-color:#CFC9BE}.claire .ref p{color:#4D5259}
.claire .ref .canaux{color:#8A5F2C}

/* faq */
.faq{border-top:1px solid var(--ligne);max-width:78ch}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{cursor:pointer;padding-block:1.25rem;font-weight:650;font-size:1.06rem;
  list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--chene-clair);font-weight:400;font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--craie-sourde);padding-bottom:1.3rem;margin:0;max-width:64ch}
.claire .faq,.claire .faq details{border-color:#CFC9BE}
.claire .faq details p{color:#4D5259}

/* bande contact */
.bande{background:var(--chene);color:#14161A;position:relative;z-index:1}
.bande h2{max-width:20ch}
.bande p{max-width:52ch;color:#38291A}
.bande .btn{background:#14161A;border-color:#14161A;color:var(--craie)}
.bande .btn:hover{background:#000;border-color:#000}
.bande .btn.creux{background:transparent;color:#14161A;border-color:rgba(20,22,26,.4)}
.bande .btn.creux:hover{border-color:#14161A;color:#14161A}

/* croisement star prog */
.croise{border:1px solid var(--ligne);padding:clamp(1.6rem,4vw,2.6rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
@media(max-width:760px){.croise{grid-template-columns:1fr}}
.croise h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);margin-bottom:.8rem}
.croise p{color:var(--craie-sourde);margin:0;max-width:58ch}

/* pied */
footer{position:relative;z-index:1;background:var(--nuit);border-top:1px solid var(--ligne);padding-block:3.5rem 2.5rem;font-size:.92rem}
.pied{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2.2rem}
.pied h4{font-size:.85rem;font-weight:650;margin:0 0 .9rem;color:var(--craie)}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:.5rem}
.pied a{color:var(--craie-sourde);text-decoration:none}
.pied a:hover{color:var(--chene-clair)}
.legal{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--ligne);
  color:#79746C;font-size:.85rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.fil{font-size:.86rem;color:var(--craie-sourde);padding-top:1.7rem}
.fil a{text-decoration:none}.fil a:hover{color:var(--chene-clair)}