html { font-size: clamp(0.611rem, 0.3125rem + 0.29vw, 0.72rem); }
@media (max-width: 991px) { html { font-size: clamp(0.611rem, 0.3125rem + 0.42vw, 0.72rem); } }
@media (max-width: 767px) { html { font-size: clamp(0.6rem, 0.47rem + 0.6vw, 0.72rem); } }

:root {
  
  --neige: #13191b;    
  --glace: #191f21;    
  --glace-2: #1e2528;  
  --glace-3: #232b2e;  
  --nuit: #0d1113;     
  --encre: #eceae6;    
  --note: #c3bdb4;     
  --bord: rgba(236, 234, 230, 0.14);      
  --bord-fort: rgba(236, 234, 230, 0.36); 

  --sable: #ec8b4a;       
  --sable-clair: #f5ad72; 
  --terre: #8f765e;       
  --rouge: #743733;       
  --rouge-clair: #c96a5f; 
  --phare: #f0dcc2;       

  --rose: var(--sable);        
  --rose-f: var(--sable-clair);
  --vert-f: var(--sable);      
  --vert-n: var(--sable-clair);
  --vert: var(--rouge-clair);  
  --jaune: var(--sable);       
  --jaune-2: var(--terre);
  --rouge-f: #5c2b28;
  --brique: var(--rouge);

  --police-titre: 'Archivo Black', Impact, 'Haettenschweiler', sans-serif;
  --police-corps: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --police-mono: 'Geist Mono', 'SF Mono', Consolas, monospace;
  --h1-min: 4.4rem;
  --h1-max: 8rem;
  --h1-graisse: 400;
  --h1-interlettre: -0.025em;
  --fs-corps: 2.63rem;  
  --fs-note: 2.85rem;
  --fs-ui: 2.58rem;
  --fs-badge: 2rem;

  --pad-container: 1.93rem;
  --col-gap: 3.6rem;
  --radius: 1.97rem;
  --bord-1: max(1px, 0.1rem);
}

body.hiver {
  --neige: #0d1319;
  --glace: #141c24;
  --glace-2: #1a232c;
  --nuit: #080d12;
}

body.accueil {
  --sable: #ff6600;
  --sable-clair: #ff9c59;
  --terre: #9e480e;
  --rouge: #732e00;
  --rouge-clair: #d15400;
  --rouge-f: #522100;
  --phare: #ffd4b8;
  
  --rose: var(--sable); --rose-f: var(--sable-clair);
  --vert-f: var(--sable); --vert-n: var(--sable-clair); --vert: var(--rouge-clair);
  --jaune: var(--sable); --jaune-2: var(--terre);
}

body.accueil .identite h1 { color: #f9df04; }  
body.accueil .identite-sous { color: #1eb300; }

body.terrassement {
  --sable: #1eb300;
  --sable-clair: #6dce59;
  --terre: #1c750e;
  --rouge: #0e5100;
  --rouge-clair: #199300;
  --rouge-f: #0a3900;
  --phare: #c0eab8;
  
  --rose: var(--sable); --rose-f: var(--sable-clair);
  --vert-f: var(--sable); --vert-n: var(--sable-clair); --vert: var(--rouge-clair);
  --jaune: var(--sable); --jaune-2: var(--terre);
}

body.transport {
  --sable: #f2aa02;
  --sable-clair: #f7c85b;
  --terre: #97700f;
  --rouge: #6d4c01;
  --rouge-clair: #c68b02;
  --rouge-f: #4d3601;
  --phare: #fbe7b8;
  --rose: var(--sable); --rose-f: var(--sable-clair);
  --vert-f: var(--sable); --vert-n: var(--sable-clair); --vert: var(--rouge-clair);
  --jaune: var(--sable); --jaune-2: var(--terre);
}

body.hiver {
  --sable: #798ce6;
  --sable-clair: #a8b4ef;
  --terre: #515e93;
  --rouge: #1f3fd6;
  --rouge-clair: #6373bd;
  --rouge-f: #1633b0;
  --phare: #d9dff8;
  --rose: #1f3fd6;
  --rose-f: #1633b0;
  --vert-f: var(--sable); --vert-n: var(--sable-clair); --vert: var(--rouge-clair);
  --jaune: var(--sable); --jaune-2: var(--terre);
}
body.hiver .btn-plein, body.hiver .btn-plein:hover,
body.hiver #reassurance.marquee,
body.hiver .promo, body.hiver .promo p, body.hiver .promo .promo-fin,
body.hiver .offre-pastilles input:checked + span { color: #ffffff; }
body.hiver .promo { background: #1f3fd6; }

@media (max-width: 767px) {
  :root { --pad-container: 1.93rem; } 
}

@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; }

html { overflow-x: clip; }
body {
  font-family: var(--police-corps);
  font-size: var(--fs-corps);
  line-height: 1.62;
  color: var(--encre);
  background: var(--neige);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.h0, .h1, .h2, .h3, .h4, h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: var(--h1-graisse);
  text-transform: uppercase;
  
  line-height: 1.14;
  letter-spacing: var(--h1-interlettre);
}
.kicker + h1, .kicker + h2, .kicker + h3, .kicker + .h4 { margin-top: 1.4rem; }

.h0 { font-size: 13rem; }
h1, .h1 { font-size: clamp(var(--h1-min), 8vw, var(--h1-max)); }
h2, .h2 { font-size: 5.6rem; }
h3, .h3 { font-size: 3.9rem; }
.h4 { font-size: 3.1rem; }
@media (max-width: 991px) {
  .h0 { font-size: 8.6rem; }
  h2, .h2 { font-size: 4.2rem; }
  h3, .h3 { font-size: 3.1rem; }
}

.kicker {
  font-family: var(--police-mono);
  font-size: var(--fs-badge);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--note);
}

.kicker::before {
  content: ''; display: inline-block; width: 2.4rem; height: 1px;
  margin-right: 1.2rem; vertical-align: 0.35em; background: var(--vert-f);
}
.note { font-size: var(--fs-note); color: var(--note); }

.grille {
  display: grid;
  grid-template-columns:
    [pleine-deb] minmax(var(--pad-container), 1fr)
    [contenu-deb] repeat(16, minmax(0, 8.4rem))
    [contenu-fin] minmax(var(--pad-container), 1fr)
    [pleine-fin];
  column-gap: var(--col-gap);
}
.grille > * { grid-column: contenu-deb / contenu-fin; }
.pleine { grid-column: pleine-deb / pleine-fin; }

section { position: relative; }

header.nav, main > [id], .piste-hiver [id] { color: var(--encre); }

.section-pad { padding-block: 12rem; }
@media (max-width: 767px) { .section-pad { padding-block: 7rem; } }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 3rem;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: var(--bord-1) solid transparent;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  min-height: 4.4rem;
}
.btn:active { transform: translateY(1px); }

.btn-plein { background: var(--rose); color: #13191b; }

.btn-plein:hover { background: var(--rose-f); color: #13191b; }
.btn-contour { border-color: var(--bord-fort); color: var(--encre); }
.btn-contour:hover { border-color: var(--encre); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.sep-congere { width: 100%; height: auto; color: var(--glace); }

#chargement {
  position: fixed; inset: 0; z-index: 90;
  background: var(--nuit);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--pad-container);
}
#chargement .chargement-compteur {
  font-family: var(--police-mono); color: var(--vert-f); line-height: 1;
}
.chargement-secteurs {
  display: flex; flex-direction: column; gap: 0.6rem; overflow: hidden;
  height: 3em; text-align: right; font-family: var(--police-mono); font-size: var(--fs-ui);
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--note);
}

#chargement::after {
  content: ''; position: absolute; left: var(--pad-container); right: var(--pad-container);
  bottom: calc(var(--pad-container) - 1rem); height: 1px; background: var(--bord);
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  
  gap: 1.4rem;
  padding: 1.8rem var(--pad-container);
  background: transparent;
  border-bottom: var(--bord-1) solid transparent;
  transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}

.nav::before {
  content: ''; position: absolute; inset: 0 0 -4rem 0; z-index: -1;
  pointer-events: none; transition: opacity 0.4s;
  background: linear-gradient(to bottom,
    rgba(8, 11, 13, 0.85) 0%, rgba(8, 11, 13, 0.72) 55%, rgba(8, 11, 13, 0) 100%);
}
.nav.nav-fond::before { opacity: 0; }
.nav.nav-fond {
  background: color-mix(in srgb, var(--nuit) 94%, transparent);
  
  border-bottom-color: var(--bord);
}

.nav-logo {
  font-family: var(--police-titre); font-size: 1.7rem; letter-spacing: 0.02em;
  text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.nav-logo span { color: var(--vert-f); }

.nav-logo img { display: block; height: 5.4rem; width: auto; }

.nav nav { display: flex; align-items: center; gap: 1.4rem; }
.nav-liens { display: flex; align-items: center; gap: 1.4rem; }
.nav nav a:not(.btn) {
  font-family: var(--police-mono);
  font-size: var(--fs-ui); font-weight: 500; text-decoration: none;
  letter-spacing: 0.05em; text-transform: uppercase;
}

.nav-burger { display: none; }
.nav nav a:not(.btn):hover { color: var(--vert-f); }
.nav-cta { padding: 1rem 2rem; min-height: 0; }

@media (max-width: 1279px) {
  
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 0.5rem; width: 4.4rem; height: 4.4rem; padding: 1rem;
    border: var(--bord-1) solid var(--bord); border-radius: var(--radius);
  }
  .nav-burger span {
    display: block; height: max(2px, 0.2rem); width: 100%;
    background: var(--encre); border-radius: 1px;
    transition: transform 0.28s, opacity 0.2s;
  }
  
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.7rem) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.7rem) rotate(-45deg); }

  .nav nav { gap: 1.2rem; }
  .nav-liens {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--nuit) 96%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: var(--bord-1) solid var(--bord);
    
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.32s ease, visibility 0.32s;
  }
  .nav.menu-ouvert .nav-liens { max-height: 60vh; visibility: visible; }
  .nav-liens a {
    padding: 2rem var(--pad-container);
    border-top: var(--bord-1) solid var(--bord);
  }
}

@media (max-width: 991px) {
  .nav-logo { font-size: 1.5rem; }
  .nav-logo .nav-long { display: none; }
  .nav-logo img { height: 4.4rem; }
}

.hero {
  min-height: 100svh; align-items: center; padding-top: 12rem; padding-bottom: 6rem;
  overflow: clip; background: var(--nuit);
}

.hero-fond {
  position: absolute; grid-column: pleine-deb / pleine-fin;
  inset: 0 0 auto 0; height: 100svh; z-index: 0; overflow: clip;
}
.hero-fond img {
  
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}

.hero-fond::after {
  content: ''; position: absolute; inset: 0;
  background:
    
    linear-gradient(100deg,
      rgba(13, 17, 19, 0.90) 0%, rgba(13, 17, 19, 0.74) 34%,
      rgba(13, 17, 19, 0) 62%),
    linear-gradient(to bottom, rgba(13, 17, 19, 0.65) 0%, rgba(13, 17, 19, 0) 15%),
    linear-gradient(to top, rgba(13, 17, 19, 0.88) 0%, rgba(13, 17, 19, 0) 15%);
}

.hero-texte { grid-column: contenu-deb / span 11; position: relative; z-index: 3; }
.hero-h1 .ligne { display: block; overflow: hidden; white-space: nowrap; }
.hero-h1 { font-size: clamp(var(--h1-min), 5.2vw, var(--h1-max)); }

.hero-texte .kicker, .hero-h1, .hero-sous {
  text-shadow: 0 0.1rem 0.5rem rgba(13, 17, 19, 0.92), 0 0.3rem 2rem rgba(13, 17, 19, 0.7);
}
.hero-sous {
  margin-top: 2.4rem; font-family: var(--police-mono); font-size: var(--fs-note);
  color: rgba(236, 234, 230, 0.88); letter-spacing: 0.02em;
  
  max-width: 62rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 3.6rem; }

body.hiver .hero-fond img { object-position: 55% 55%; }
@media (max-width: 767px) {
  
  body.hiver .hero-fond::after {
    background:
      linear-gradient(to bottom, rgba(8, 13, 18, 0.72) 0%, rgba(8, 13, 18, 0.28) 18%,
                      rgba(8, 13, 18, 0.18) 34%, rgba(8, 13, 18, 0.65) 48%,
                      rgba(8, 13, 18, 0.9) 66%, rgba(8, 13, 18, 0.96) 100%);
  }
}

.hero-releve {
  display: flex; flex-wrap: wrap; gap: 0 5rem; margin-top: 5rem;
  padding-top: 2.4rem; border-top: var(--bord-1) solid var(--bord);
  font-family: var(--police-mono);
}
.hero-releve dt {
  font-size: var(--fs-badge); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--note);
}
.hero-releve dd { margin-top: 0.5rem; font-size: 3.2rem; color: var(--vert-f); }
@media (max-width: 767px) {
  .hero-releve { gap: 0 3rem; margin-top: 3.4rem; }
  .hero-releve dd { font-size: 2.6rem; }
}

@media (max-width: 991px) {
  .hero { padding-top: 12rem; }
  .hero-texte { grid-column: contenu-deb / contenu-fin; }
  
  .hero-fond { height: 78svh; }
}
@media (max-width: 767px) {

  .hero-h1 { font-size: clamp(2.9rem, 8.4vw, 4.6rem); }
  .hero-fond img { object-position: 62% 62%; }
  
  .hero-fond::after {
    background:
      linear-gradient(to bottom, rgba(13, 17, 19, 0.72) 0%, rgba(13, 17, 19, 0.12) 16%,
                      rgba(13, 17, 19, 0) 30%, rgba(13, 17, 19, 0.6) 46%,
                      rgba(13, 17, 19, 0.88) 66%, rgba(13, 17, 19, 0.96) 100%);
  }
}

.intro-bloc { grid-column: contenu-deb / span 13; }
.intro-l1 { color: var(--note); }
.intro-l2 { color: var(--encre); }

.intro-l2.h2 { font-size: 2.9rem; line-height: 1.2; max-width: 30ch; margin-top: 0.9rem;
  
  width: fit-content; }
@media (max-width: 767px) { .intro-l2.h2 { font-size: 2.1rem; } }

@media (min-width: 992px) {
  html:not(.anim-statique) .intro-bloc { justify-self: center; text-align: center; }
  html:not(.anim-statique) .intro-l2.h2 { margin-inline: auto; }
}
.intro-p { max-width: 62rem; margin-top: 3.2rem; }

.chiffres-grille {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap);
  border-top: var(--bord-1) solid var(--bord);
}
.chiffre { padding-top: 3rem; border-right: var(--bord-1) solid var(--bord); padding-right: 2rem; }
.chiffre:last-child { border-right: 0; }
.chiffre-val { color: var(--vert-f); }
.chiffre-lib { font-size: var(--fs-note); color: var(--note); max-width: 24rem; }
@media (max-width: 767px) {
  .chiffres-grille { grid-template-columns: 1fr; }
  .chiffre { border-right: 0; border-bottom: var(--bord-1) solid var(--bord); padding-bottom: 2rem; }
  .chiffre:last-child { border-bottom: 0; }
}

body.hiver #services { background: var(--glace); }
.blizzard {
  position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none;
}
.blizzard canvas { position: sticky; top: 0; width: 100%; height: 100vh; }
.neige-arriere { filter: blur(2.5px); }
.neige-avant { margin-top: -100vh; }
.ecran {
  min-height: 100vh;
  display: flex; align-items: center;
  
}

.ecran-contenu { grid-column: contenu-deb / contenu-fin; padding-block: 10rem; width: 100%; }
.cartes-prix {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap);
  margin-top: 4rem;
}
.carte-prix {
  background: var(--neige); border: var(--bord-1) solid var(--bord);
  border-radius: var(--radius); padding: 3.2rem;
  transition: border-color 0.3s, transform 0.3s;
}
.carte-prix:hover { border-color: var(--bord-fort); transform: translateY(-0.4rem); }
.carte-desc { margin-top: 1.2rem; font-size: var(--fs-note); color: var(--note); }
.carte-montant { margin-top: 2.4rem; font-size: var(--fs-note); color: var(--note); }

.carte-montant .prix {
  font-family: var(--police-titre); font-size: 4.2rem; color: var(--vert-f);
  margin-right: 0.6rem; letter-spacing: 0.01em;
}

@media (max-width: 640px) { .carte-montant .prix { font-size: 3.2rem; } }
.inclus-liste { margin-top: 4rem; max-width: 72rem; }
.inclus-liste li {
  padding: 2.2rem 0 2.2rem 4.4rem; position: relative;
  
  border-bottom: var(--bord-1) solid var(--bord); font-size: var(--fs-note);
}
.inclus-liste li::before {
  content: ''; position: absolute; left: 0; top: 2.9rem;
  width: 2.4rem; height: 1.2rem;
  border-left: 0.35rem solid var(--vert-f); border-bottom: 0.35rem solid var(--vert-f);
  transform: rotate(-45deg);
}
@media (max-width: 991px) {
  
  .cartes-prix { grid-template-columns: minmax(0, 1fr); }
}

#pourquoi { background: var(--nuit); color: var(--encre); overflow: clip; }
#pourquoi .inverse { color: var(--encre); }
#pourquoi .kicker.inverse { color: var(--note); }
.pourquoi-lueur {
  
  display: none;
}
@keyframes lueur-respire {
  from { opacity: 0.5; transform: translate(-2rem, 0); }
  to   { opacity: 1; transform: translate(2rem, -3rem); }
}
.pourquoi-tete { grid-column: contenu-deb / span 10; margin-bottom: 5rem; }
.pourquoi-liste { grid-column: contenu-deb / span 12; }
.pourquoi-liste li {
  display: flex; gap: 2.8rem; align-items: baseline;
  
  padding: 2.6rem 0; font-size: var(--fs-note); line-height: 1.45;
  border-bottom: var(--bord-1) solid rgba(236, 234, 230, 0.14);
}

.pourquoi-num {
  font-family: var(--police-mono); font-size: var(--fs-badge); font-weight: 500;
  letter-spacing: 0.18em; color: var(--vert-f); flex-shrink: 0;
}

.marquee {
  background: var(--rose); overflow: clip;
  padding: 1.4rem 0; border-block: var(--bord-1) solid var(--bord);
}

#reassurance.marquee { color: #13191b; }
.marquee-piste {
  display: flex; white-space: nowrap; width: max-content;
  animation: defile 30s linear infinite;
  font-size: var(--fs-ui); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
}
@keyframes defile { to { transform: translateX(-50%); } }

#temoignages { overflow: clip; }
.temoignages-grille {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--col-gap);
  margin-top: 4rem;
}
.temoignage {
  border: var(--bord-1) solid var(--bord); border-radius: var(--radius);
  padding: 3.2rem; background: var(--neige);
}
.temoignage blockquote { margin-top: 1.6rem; font-size: 1.9rem; line-height: 1.55; }
.temoignage figcaption { margin-top: 2rem; font-size: var(--fs-note); color: var(--note); font-weight: 600; }

.temoignages-grille.une { grid-template-columns: minmax(0, 1fr); max-width: 96rem; }
.une .temoignage blockquote { font-size: 3.2rem; line-height: 1.4; }
@media (max-width: 767px) { .une .temoignage blockquote { font-size: 2.4rem; } }

.zone-p { grid-column: contenu-deb / span 10; margin-top: 3rem; }

.passage {
  position: absolute; bottom: 2rem; left: 0; right: 0; height: 18rem;
  pointer-events: none; overflow: visible;
}
.tracteur-passe {
  position: absolute; bottom: 0; left: 0; width: 26rem; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 58%, transparent 92%);
          mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 58%, transparent 92%);
  will-change: transform;
}
.congere {
  position: absolute; bottom: 0; left: 0; width: 12rem; height: 5rem;
  background: radial-gradient(ellipse at 30% 100%, var(--neige) 55%, rgba(255, 255, 255, 0) 75%);
  transform-origin: left bottom; opacity: 0;
}
.panache { position: absolute; inset: 0; }
@media (max-width: 767px) {
  .temoignages-grille { grid-template-columns: 1fr; }
  .tracteur-passe { width: 17rem; }
}

#equipement { background: var(--glace); }
.equipement-cartes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap);
  padding: 5rem var(--pad-container) 0;
}
.equipement-carte {
  background: var(--neige); border: var(--bord-1) solid var(--bord);
  border-radius: var(--radius); overflow: clip;
}
.equipement-media { overflow: clip; aspect-ratio: 3 / 2; }
.equipement-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.equipement-info { padding: 3.2rem; }
.equipement-specs { margin-top: 1.8rem; }
.equipement-specs li {
  padding: 1.1rem 0 1.1rem 2.6rem; position: relative;
  font-size: var(--fs-note); border-bottom: var(--bord-1) solid var(--bord);
}
.equipement-specs li:last-child { border-bottom: 0; }
.equipement-specs li::before {
  content: ''; position: absolute; left: 0.2rem; top: 1.9rem;
  width: 1.1rem; height: 0.55rem;
  border-left: 0.25rem solid var(--vert-f); border-bottom: 0.25rem solid var(--vert-f);
  transform: rotate(-45deg);
}
@media (max-width: 991px) { .equipement-cartes { grid-template-columns: minmax(0, 1fr); } }

.equipement-cartes.galerie-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerie-3 .equipement-media { aspect-ratio: 4 / 3; }
.galerie-3 figcaption {
  padding: 2rem 2.4rem 2.4rem; font-size: var(--fs-note); color: var(--note);
}
@media (max-width: 991px) {
  .equipement-cartes.galerie-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .equipement-cartes.galerie-3 { grid-template-columns: minmax(0, 1fr); }
}

#equipe { background: var(--glace); }
.equipe-flex {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: var(--col-gap); align-items: center;
}
.equipe-media {
  overflow: clip; border-radius: var(--radius);
  border: var(--bord-1) solid var(--bord); aspect-ratio: 6 / 5;
}
.equipe-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.equipe-texte p { margin-top: 2.4rem; }
.equipe-texte .btn { margin-top: 3.4rem; }
@media (max-width: 991px) { .equipe-flex { grid-template-columns: minmax(0, 1fr); } }

.logo-pastille {
  display: inline-grid; place-items: center; width: fit-content;
  background: #ffffff; border-radius: var(--radius); padding: 1.4rem 1.8rem;
}
.logo-pastille img { width: 20rem; height: auto; }

.secteurs-flex {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--col-gap);
  align-items: center; margin-top: 5rem;
}
.secteurs-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2rem; }
.secteurs-liste li {
  font-family: var(--police-titre); font-size: 2.8rem; text-transform: uppercase;
  padding: 1rem 0; border-bottom: var(--bord-1) solid var(--bord);
}

.secteurs-note { grid-column: contenu-deb / contenu-fin; margin-top: 3rem; font-size: var(--fs-note); }
.secteurs-note a { color: var(--vert-f); font-weight: 600; }
@media (max-width: 767px) {
  .secteurs-flex { grid-template-columns: 1fr; }
  .secteurs-liste li { font-size: 2.2rem; }
}

.faq-liste { grid-column: contenu-deb / span 12; margin-top: 4rem; }
.faq-item { border-bottom: var(--bord-1) solid var(--bord); }
.faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 2.4rem 5rem 2.4rem 0; font-size: 2rem; font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 1rem; top: 50%;
  width: 1.2rem; height: 1.2rem;
  border-right: 0.28rem solid var(--vert-f); border-bottom: 0.28rem solid var(--vert-f);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item p { padding: 0 0 2.6rem; max-width: 68rem; color: var(--note); }

#cta { text-align: center; background: var(--glace); }
.cta-titre { grid-column: contenu-deb / contenu-fin; }
.cta-texte { grid-column: contenu-deb / contenu-fin; margin-top: 2.4rem; font-size: 2rem; }
.cta-btn { justify-self: center; grid-column: contenu-deb / contenu-fin; margin-top: 3.6rem; }

.offre { grid-column: contenu-deb / span 11; }
.offre-sous { margin-top: 1.6rem; color: var(--note); }
.offre-form { margin-top: 4rem; position: relative; }
.offre-progression {
  height: 0.4rem; background: var(--glace); border-radius: 0.2rem;
  margin-bottom: 3.2rem; overflow: hidden;
}
.offre-barre {
  display: block; height: 100%; width: 20%;
  background: var(--vert-f); transition: width 0.4s;
}
.offre-etape { border: 0; }
.offre-etape legend { margin-bottom: 2.4rem; }
.offre-pastilles { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.offre-pastilles label { cursor: pointer; position: relative; }
.offre-pastilles input { position: absolute; opacity: 0; }
.offre-pastilles span {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding: 1.4rem 2.2rem; border: var(--bord-1) solid var(--bord-fort);
  border-radius: var(--radius); font-size: var(--fs-ui); font-weight: 600;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.offre-pastilles span b { font-family: var(--police-titre); font-size: 2.2rem; font-weight: 400; }
.offre-pastilles input:checked + span { background: var(--rose); border-color: var(--rose); color: #13191b; }
.offre-pastilles input:focus-visible + span { outline: 0.3rem solid var(--jaune); outline-offset: 0.2rem; }
.offre-types span { min-width: 16rem; }
.offre-champ {
  width: min(38rem, 100%); padding: 1.6rem 2rem; font: inherit;
  border: var(--bord-1) solid var(--bord-fort); border-radius: var(--radius);
}
.offre-champ:focus-visible { outline: 0.3rem solid var(--jaune); outline-offset: 0.2rem; }
.offre-suivant { margin-top: 3.2rem; }
.offre-suivant:disabled { opacity: 0.35; cursor: not-allowed; }
.offre-recap { padding-top: 2rem; }
.offre-recap-detail { font-size: 2rem; margin: 1.2rem 0 0.6rem; }
.offre-recap-prix { color: var(--vert-f); margin-bottom: 2.8rem; }
.offre-recap .note { margin-top: 2rem; }

.soumission-form { margin-top: 4rem; }
.soumission-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.soumission-grille label {
  display: grid; gap: 0.9rem;
  font-size: var(--fs-note); color: var(--note);
}
.soumission-grille .offre-champ { width: 100%; }
.soumission-large { grid-column: 1 / -1; }
.soumission-fac { color: var(--note); opacity: 0.7; }
.soumission-form > .btn { margin-top: 3.2rem; }
.soumission-form > .note { margin-top: 2rem; max-width: 52rem; }
@media (max-width: 767px) {
  .soumission-grille { grid-template-columns: 1fr; }
}

.contact-colonnes {
  grid-column: contenu-deb / contenu-fin;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem;
  flex-wrap: wrap;
}
.contact-liste { margin-top: 2.8rem; }
.contact-liste li { padding: 0.9rem 0; font-size: 2rem; }
.contact-liste a { text-decoration-color: var(--vert-f); text-underline-offset: 0.4rem; }
.contact-sociaux { display: flex; gap: 1.6rem; }
.contact-sociaux a {
  display: grid; place-items: center; width: 4.8rem; height: 4.8rem;
  border: var(--bord-1) solid var(--bord-fort); border-radius: 50%;
  transition: border-color 0.3s, color 0.3s;
}
.contact-sociaux a:hover { border-color: var(--vert-f); color: var(--vert-f); }

.pied { background: var(--nuit); color: var(--encre); position: relative; overflow: clip; }
.pied .sep-congere { color: var(--nuit); position: absolute; top: 0; transform: translateY(-98%); }
.pied-interieur { padding-block: 10rem 4rem; }
.pied-rappel {
  grid-column: contenu-deb / contenu-fin;
  color: rgba(236, 234, 230, 0.1); line-height: 0.95;
}
.pied-nav {
  grid-column: contenu-deb / contenu-fin;
  display: flex; flex-wrap: wrap; gap: 2.8rem; margin-top: 5rem;
  font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: 0.08em;
}
.pied-nav a { text-decoration: none; }
.pied-nav a:hover { color: var(--vert-f); }
.pied-demo {
  grid-column: contenu-deb / contenu-fin;
  margin-top: 4rem; font-size: var(--fs-badge); color: var(--note);
}
.pied-demo a { color: var(--encre); }

.legal { display: none; background: var(--neige); color: var(--encre); }
.legal:target { display: block; }
.legal-interieur { max-width: 78rem; margin-inline: auto; padding: 8rem var(--pad-container); }
.legal-interieur h2 { margin-top: 3rem; }
.legal-interieur p { margin-top: 1.4rem; font-size: var(--fs-note); }
.legal-interieur a { color: var(--vert-f); }

@media (pointer: fine) {
  .curseur {
    position: fixed; z-index: 99; width: 3rem; height: 3rem;
    pointer-events: none; top: -1.5rem; left: -1.5rem;
    color: var(--vert-f); opacity: 0;
    transition: transform 0.25s, color 0.25s, opacity 0.25s;
  }
  .curseur svg { width: 100%; height: 100%; animation: flocon-tourne 14s linear infinite; }
  .curseur.actif { opacity: 0.85; }
  .curseur.survole { transform: scale(1.55); color: var(--jaune); opacity: 1; }
  @keyframes flocon-tourne { to { transform: rotate(360deg); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (min-width: 768px) {
  html:not(.anim-statique) .piste-hiver { height: calc(100vh + 400vw); }
  html:not(.anim-statique) .piste-colle {
    position: sticky; top: 0; height: 100vh; overflow: clip;
  }
  html:not(.anim-statique) .piste {
    display: flex; width: max-content; position: relative; z-index: 1;
    height: 100%; will-change: transform;
  }
  html:not(.anim-statique) .piste > .panneau {
    width: 100vw; flex: 0 0 auto; min-height: 100vh; align-content: center;
  }
  html:not(.anim-statique) body.hiver #services { display: flex; background: transparent; }
  html:not(.anim-statique) body.hiver #services .ecran { width: 100vw; flex: 0 0 auto; }
  
  html:not(.anim-statique) .blizzard canvas { position: absolute; inset: 0; height: 100%; }
  html:not(.anim-statique) .neige-avant { margin-top: 0; }
  
}

@media (max-width: 767px) {
  .grille {
    grid-template-columns:
      [pleine-deb] var(--pad-container)
      [contenu-deb] minmax(0, 1fr)
      [contenu-fin] var(--pad-container) [pleine-fin];
    column-gap: 0;
  }
  .grille > * { grid-column: contenu-deb / contenu-fin; }
  .grille > .pleine, .grille > .hero-fond { grid-column: pleine-deb / pleine-fin; }

  :root {
    --fs-corps: 1.72rem;  
    --fs-note: 1.68rem;   
    --fs-ui: 1.5rem;      
    --fs-badge: 1.32rem;  
  }
  
  .nav { padding: 1.2rem var(--pad-container); gap: 1.2rem; }
  .nav-logo { font-size: 1.5rem; line-height: 1.15; }
  .nav-cta { padding: 0.9rem 1.6rem; white-space: nowrap; }
  .hero { padding-top: 9rem; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }

  h2, .h2 { font-size: 3.3rem; }
  h3, .h3 { font-size: 2.6rem; }
  
  .h4 { font-size: 2.4rem; }

  .hero-releve { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.4rem; }

  .secteurs-liste { grid-template-columns: 1fr; }
  .secteurs-liste li { font-size: 2rem; }

  .pied-rappel { font-size: min(4.6rem, 9.4vw); } 
  .pied-interieur { padding-block: 6rem 3rem; }
}

#accueil {
  --glace: #191f21;
}
body.hiver #services {  
  --glace: #1c2326;
}

#equipement {
  --glace: #171d1f;
}

#cta {               
  --glace: #1f2629;
}
#reserver {
  --glace: #191f21;
}

.bandeau-maquette {
  
  position: fixed; left: 0; right: 0; bottom: 0.8rem;
  margin-inline: auto; width: fit-content;
  z-index: 80; max-width: min(92vw, 60rem);
  background: rgba(13, 17, 19, 0.92); color: var(--note);
  border: var(--bord-1) solid var(--bord); border-radius: 999px;
  padding: 0.45rem 1.2rem; font-size: var(--fs-badge);
  text-align: center; line-height: 1.4; pointer-events: none;
}

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100svh; position: relative;
}
.split-panneau {
  position: relative; overflow: clip; text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  
  padding: 16rem var(--pad-container) 9rem;
  min-height: 100svh;
}
.split-panneau img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-ete img { object-position: 50% 40%; }
.split-hiver img { object-position: 52% 45%; }

.split-panneau::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,
      rgba(13, 17, 19, 0.92) 0%, rgba(13, 17, 19, 0.66) 40%, rgba(13, 17, 19, 0) 66%),
    linear-gradient(to bottom, rgba(13, 17, 19, 0.5) 0%, rgba(13, 17, 19, 0) 12%);
  transition: background 0.6s;
}
.split-hiver::after {
  background:
    linear-gradient(to top,
      rgba(8, 13, 18, 0.92) 0%, rgba(8, 13, 18, 0.66) 40%, rgba(8, 13, 18, 0) 66%),
    linear-gradient(to bottom, rgba(8, 13, 18, 0.5) 0%, rgba(8, 13, 18, 0) 12%);
}
@media (hover: hover) {
  .split-panneau:hover img { transform: scale(1.045); }
  .split-panneau:hover::after {
    background:
      linear-gradient(to top,
        rgba(13, 17, 19, 0.88) 0%, rgba(13, 17, 19, 0.4) 30%, rgba(13, 17, 19, 0) 58%),
      linear-gradient(to bottom, rgba(13, 17, 19, 0.5) 0%, rgba(13, 17, 19, 0) 12%);
  }
}
.split-contenu {
  position: relative; z-index: 2;
  text-shadow: 0 0.1rem 0.5rem rgba(13, 17, 19, 0.92), 0 0.3rem 2rem rgba(13, 17, 19, 0.7);
}
.split-contenu h2 { font-size: 4.4rem; }
.split-saison {
  font-family: var(--police-mono); font-size: var(--fs-badge);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--sable);
  
}
.split-p { margin-top: 1.8rem; max-width: 40rem; color: var(--note); font-size: var(--fs-note); }
.split-lien {
  display: inline-flex; align-items: center; gap: 1rem; margin-top: 3rem;
  font-family: var(--police-mono); font-size: var(--fs-ui); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre);
  border-bottom: 0.2rem solid var(--sable); padding-bottom: 0.8rem;
}
.split-panneau:hover .split-lien { color: var(--sable-clair); }

.split::before {
  content: ''; position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%;
  width: max(1px, 0.1rem); background: var(--bord-fort);
}

.identite {
  
  position: absolute; z-index: 4; left: 50%; top: 11.7rem;
  transform: translateX(-50%);
  width: min(92vw, 62rem); text-align: center;
  
  background: rgba(13, 17, 19, 0.9);
  border: var(--bord-1) solid var(--bord-fort);
  border-radius: var(--radius);
  
  padding: 3rem 3.4rem;
  
  backdrop-filter: blur(10px);
}

.identite h1, .identite-sous, .identite-slogan {
  
  text-shadow:
    0 0 0.6rem rgba(6, 9, 10, 0.95),
    0 0.1rem 0.5rem rgba(6, 9, 10, 0.9),
    0 0.3rem 1.8rem rgba(6, 9, 10, 0.7);
}

.identite h1 { font-size: clamp(2.6rem, 3.6vw, 5rem); }

.identite-sous {
  margin-top: 1.4rem; font-family: var(--police-mono); font-size: var(--fs-ui);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--sable-clair);
}

.identite-slogan {
  margin-top: 2rem; font-size: 2.5rem; line-height: 1.4; color: var(--encre);
  max-width: 52rem; margin-inline: auto;
}
.identite-tel { margin-top: 2.4rem; }

@media (min-width: 901px) {
  .identite { width: min(92vw, 66rem); padding: 2.2rem 3rem; }
  .identite h1 { font-size: clamp(2.6rem, 3.4vw, 4.6rem); }
  .identite-sous { font-size: calc(var(--fs-ui) * 0.8); letter-spacing: 0.12em; margin-top: 1rem; white-space: nowrap; }
  .identite-slogan { margin-top: 1rem; }
  .identite-tel { margin-top: 1.6rem; }
  
  .split, .split-panneau { min-height: max(100svh, 880px); }
  .split-panneau { padding-bottom: 5rem; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .split .split-panneau img {
    
    transition: transform 0.45s ease, filter 0.45s ease;
  }
  .split .split-panneau:hover img { transform: scale(1.05); filter: brightness(1.15); }
  .identite { transition: opacity 0.4s ease; }
  .split-panneau:hover ~ .identite { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  
  .split .split-panneau:hover img { transform: none; }
}

@media (max-width: 900px) {
  
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split::before { display: none; }
  .split-panneau { min-height: 56svh; padding: 10rem var(--pad-container) 5rem; }
  .identite {
    
    order: -1;
    position: static; top: auto; transform: none; width: auto; border: 0;
    border-radius: 0; backdrop-filter: none; background: var(--nuit);
    padding: 12rem var(--pad-container) 6rem;
  }
  .split-contenu h2 { font-size: 3.6rem; }
}

.split-bande {
  
  min-height: 0; height: 56vh;
  padding: 6rem var(--pad-container) 4.5rem;
}

.split-bande img { object-position: 50% 50%; }

.split-bande::after {
  background:
    linear-gradient(to top,
      rgba(13, 17, 19, 0.9) 0, rgba(13, 17, 19, 0.6) 16rem, rgba(13, 17, 19, 0) 30rem),
    linear-gradient(to bottom, rgba(13, 17, 19, 0.5) 0, rgba(13, 17, 19, 0) 6rem);
}

.split-bande h2 { font-size: 3.4rem; }

.split-bande .split-p { max-width: none; margin-top: 1.2rem; }
.split-bande .split-lien { margin-top: 2rem; }
@media (max-width: 900px) {
  .split-bande { height: 52svh; padding: 5rem var(--pad-container) 4rem; }
  .split-bande h2 { font-size: 3rem; }
}

#maison { background: var(--glace); padding-top: 0; }
.maison-flex {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap);
}
.maison-flex p { margin-top: 2.4rem; }
.maison-releve {
  margin-top: 4rem; padding-top: 2.6rem;
  border-top: var(--bord-1) solid var(--bord);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  font-family: var(--police-mono);
}
.maison-releve dt {
  font-size: var(--fs-badge); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--note);
}
.maison-releve dd { margin-top: 0.6rem; font-size: 2.6rem; color: var(--sable); }
@media (max-width: 900px) { .maison-flex { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 560px) { .maison-releve { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } }

.srv { border-top: var(--bord-1) solid var(--bord); }
.srv:first-of-type { border-top: 0; }
.srv-bloc {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--col-gap); align-items: center;
}
.srv-media {
  overflow: clip; border-radius: var(--radius);
  border: var(--bord-1) solid var(--bord); aspect-ratio: 4 / 5;
}
.srv-media img { width: 100%; height: 100%; object-fit: cover; }
.srv-num {
  font-family: var(--police-titre); font-size: clamp(7rem, 9vw, 13rem);
  line-height: 0.82; color: var(--terre); letter-spacing: -0.03em;
  display: block; margin-bottom: 1.6rem;
}
.srv-texte h2 { font-size: 4.6rem; }
.srv-texte p { margin-top: 2.4rem; max-width: 46rem; }
.srv-points { margin-top: 2.8rem; max-width: 46rem; }
.srv-points li {
  position: relative; padding: 1.4rem 0 1.4rem 3.4rem;
  border-bottom: var(--bord-1) solid var(--bord); font-size: 2rem;
}
.srv-points li:last-child { border-bottom: 0; }
.srv-points li::before {
  content: ''; position: absolute; left: 0.2rem; top: 2.1rem;
  width: 1.8rem; height: 0.9rem;
  border-left: 0.3rem solid var(--sable); border-bottom: 0.3rem solid var(--sable);
  transform: rotate(-45deg);
}

.srv-bloc.a-droite .srv-media { order: 2; }

@media (min-width: 901px) {
  .srv-bloc.a-droite .srv-texte { max-width: 46rem; justify-self: end; }
}
@media (max-width: 900px) {
  .srv-bloc { grid-template-columns: minmax(0, 1fr); }
  .srv-bloc.a-droite .srv-media { order: 0; }
  .srv-texte h2 { font-size: 3.3rem; }
}

.equipement-cartes.galerie-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.equipement-cartes.galerie-1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.galerie-1 .equipement-media { aspect-ratio: 4 / 3; }
.galerie-4 .equipement-media { aspect-ratio: 4 / 3; }
.galerie-4 figcaption {
  padding: 2rem 2.4rem 2.4rem; font-size: var(--fs-note); color: var(--note);
}
@media (max-width: 1100px) { .equipement-cartes.galerie-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .equipement-cartes.galerie-4 { grid-template-columns: minmax(0, 1fr); } }

#pont { background: #0d1319; color: var(--encre); overflow: clip; }
#pont .kicker { color: var(--note); }
.pont-lueur {
  
  display: none;
}
.pont-texte { grid-column: contenu-deb / span 10; position: relative; }
.pont-texte p { margin-top: 2.6rem; max-width: 52rem; color: var(--note); }
.pont-texte .btn { margin-top: 3.6rem; }

html.js-reveals .reveal { opacity: 0; transform: translateY(2.4rem); }

:root { --degagement-piste-bas: 7rem; }

@media (min-width: 768px) {
  html:not(.anim-statique) .piste .ecran { align-items: safe center; }
  html:not(.anim-statique) .piste > .panneau { align-content: safe center; }
}
@media (min-width: 768px) and (max-height: 1050px) {
  html:not(.anim-statique) .piste .ecran-contenu {
    padding-top: var(--degagement-nav, 10rem);
    padding-bottom: max(var(--degagement-piste-bas, 4rem), clamp(2.4rem, 5vh, 10rem));
  }
  html:not(.anim-statique) .piste .cartes-prix,
  html:not(.anim-statique) .piste .inclus-liste { margin-top: clamp(1.4rem, 2.6vh, 4rem); }
  html:not(.anim-statique) .piste .carte-prix { padding: clamp(1.6rem, 2.9vh, 3.2rem); }
  html:not(.anim-statique) .piste .carte-montant { margin-top: clamp(0.9rem, 1.8vh, 2.4rem); }
  html:not(.anim-statique) .piste .carte-montant .prix { font-size: clamp(2.4rem, 4.2vh, 4.2rem); }
  html:not(.anim-statique) .piste .carte-desc { font-size: clamp(1.85rem, 2.9vh, var(--fs-note)); }
  html:not(.anim-statique) .piste .inclus-liste li {
    padding-block: clamp(0.9rem, 1.8vh, 2.2rem);
    font-size: clamp(1.85rem, 3.05vh, var(--fs-note));
    line-height: 1.35;
  }
  
  html:not(.anim-statique) .piste .inclus-liste li::before { top: calc(clamp(0.9rem, 1.8vh, 2.2rem) + 0.7rem); }
}

.temoignages-grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.trois .temoignage { padding: 2.8rem; }

.trois .temoignage blockquote { font-size: 3rem; line-height: 1.4; }
.trois .temoignage figcaption { font-size: 2.3rem; line-height: 1.45; }
@media (max-width: 1100px) { .temoignages-grille.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .temoignages-grille.trois { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 767px) {
  .trois .temoignage blockquote { font-size: 2.4rem; }
  .trois .temoignage figcaption { font-size: var(--fs-note); }
}

.avis-source { grid-column: contenu-deb / span 10; margin-top: 2.4rem; }

.hero-note { margin-top: 1.8rem; max-width: 34ch; }

.avis-fb { grid-column: contenu-deb / span 12; justify-self: start; margin-top: 2.4rem; gap: 0.7rem; }
.fb-f { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--sable); color: #13191b; font: 800 1.05em/1 Georgia, "Times New Roman", serif; }

.temoignage-vide { border-style: dashed; background: transparent; }
.temoignage-vide blockquote { color: var(--note); font-style: italic; }
.a-remplir {
  display: block; margin-top: 1.2rem;
  font-family: var(--police-mono); font-size: var(--fs-badge);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sable);
}
.nom-vide {
  display: inline-block; min-width: 16rem;
  border-bottom: var(--bord-1) dashed var(--bord-fort);
}

.media-vide {
  display: grid; place-items: center; text-align: center; padding: 2rem;
  background: var(--glace-2);
  border: var(--bord-1) dashed var(--bord-fort);
  font-family: var(--police-mono); font-size: var(--fs-note); color: var(--note);
}

#apropos .srv-media { max-width: 42rem; }

#donations { background: var(--glace); }
.don-titre {
  display: block; margin-bottom: 0.8rem;
  font-family: var(--police-titre); text-transform: uppercase;
  font-size: 2.4rem; line-height: 1.2; color: var(--encre);
}

.hero--bandeau { min-height: 0; padding-top: 14rem; padding-bottom: 8rem; align-items: center; }
.hero--bandeau .hero-fond {
  position: static; height: auto; z-index: 1;
  grid-column: span 6 / contenu-fin; justify-self: center; width: 100%;
  
  grid-row: 1;
}

.hero--bandeau .hero-fond::after { content: none; }
.hero--bandeau .hero-fond img {
  height: auto; border-radius: var(--radius);
  border: var(--bord-1) solid var(--bord-fort);
}
.hero--bandeau .hero-texte { grid-column: contenu-deb / span 9; grid-row: 1; align-self: center; }

.hero--bandeau .hero-texte .kicker,
.hero--bandeau .hero-h1,
.hero--bandeau .hero-sous { text-shadow: none; }

@media (min-width: 992px) {
  .hero--bandeau .hero-h1 { font-size: clamp(var(--h1-min), 4.2vw, 6.4rem); }
}
@media (max-width: 991px) {
  .hero--bandeau { padding-top: 12rem; padding-bottom: 5rem; }
  .hero--bandeau .hero-texte,
  .hero--bandeau .hero-fond { grid-column: contenu-deb / contenu-fin; }
  
  .hero--bandeau .hero-fond { margin-top: 3.6rem; max-width: 46rem; justify-self: start;
                              grid-row: 2; }
}

.promo {
  background: var(--sable); color: #13191b;
  padding: 2.4rem var(--pad-container);
  text-align: center;
  border-block: var(--bord-1) solid rgba(19, 25, 27, 0.28);
}
.promo p {
  margin: 0 auto; max-width: 96rem;
  font-size: var(--fs-note); line-height: 1.5; color: #13191b;
}
.promo strong { font-weight: 700; }

#maison .promo { grid-column: pleine-deb / pleine-fin; margin-bottom: 7rem; }
@media (max-width: 767px) { #maison .promo { margin-bottom: 4.5rem; } }
.promo .promo-fin {
  display: block; margin-top: 0.6rem;
  font-family: var(--police-mono); font-size: var(--fs-badge);
  letter-spacing: 0.1em; text-transform: uppercase; color: #3d2a17;
}

.aa-grille {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap); margin-top: 5rem;
}
.aa-paire { margin: 0; }
.aa-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.aa-vue {
  position: relative; overflow: clip; aspect-ratio: 3 / 4;
  border-radius: var(--radius); border: var(--bord-1) solid var(--bord);
}
.aa-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aa-badge {
  position: absolute; top: 1.2rem; left: 1.2rem;
  padding: 0.5rem 1.1rem; border-radius: 0.6rem;
  background: rgba(13, 17, 19, 0.86); color: var(--encre);
  font-family: var(--police-mono); font-size: var(--fs-badge);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.aa-badge-apres { background: var(--sable); color: #13191b; }
.aa-paire figcaption {
  margin-top: 1.8rem; font-size: var(--fs-note); color: var(--note);
}
@media (max-width: 991px) { .aa-grille { grid-template-columns: minmax(0, 1fr); } }