/* ══════════════════════════════════════════════════════════════════════
   RAPOSO — « Le cadre et la lumière »

   Version CLAIRE 3 (17/09/2026). Le prune sortait du logo, mais en
   aplats il tirait franchement vers le violet — une couleur qui ne dit
   rien du métier. Il ne subsiste donc qu'à un seul endroit, le pied de
   page, où il signe la marque sans envahir la lecture. Tout le reste du
   site tient sur le crème ; le doré est l'accent, l'anthracite porte les
   boutons et le texte fort.

   Le concept ne bouge pas :
     · les titres se découvrent par le bas comme un volet qui se lève ;
     · l'information flotte dans des cartes de verre — pour un vitrier,
       ce n'est pas un effet, c'est le produit ;
     · une typographie démesurée détourée sort du cadre ;
     · les gammes défilent à l'horizontale sur fond crème : les vignettes
       portent elles-mêmes leur contraste, le fond n'a plus à être sombre.

   Doré #D5B94D échantillonné dans le logo. L'anthracite #241F1C le
   remplace partout où le prune servait de structure.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --creme:#F6F3ED;
  --creme-2:#EDE8DE;
  --blanc:#FFFFFF;
  --nuit:#241F1C;         /* anthracite chaud — pied de page, boutons, texte fort */
  --nuit-2:#1C1815;
  --nuit-3:#332C27;
  --encre:#1F1B18;
  --texte:#57514B;
  --doux:#837C74;
  --prune:#2D1F44;       /* prune du logo — pied de page, Devis et boutons d'action */
  --prune-2:#241736;
  --or:#D5B94D;          /* doré du logo — aplats et petits repères */
  --or-txt:#8F7722;      /* doré assombri : lisible en texte sur clair */
  --filet:#E3DDD2;
  --filet-fort:#CFC6B6;
  --filet-nuit:rgba(255,255,255,.16);
  --max:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--creme)}
body{margin:0;background:var(--creme);color:var(--texte);font-family:var(--sans);
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--encre);text-decoration-color:var(--filet-fort);text-underline-offset:4px}
a:hover{text-decoration-color:var(--or-txt)}
h1,h2,h3{color:var(--encre);line-height:1.02;margin:0 0 .5em;font-weight:600;letter-spacing:-.035em}
h1{font-size:clamp(2.6rem,7.5vw,6rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.4rem)}
h3{font-size:1.06rem;letter-spacing:-.01em}
p{margin:0 0 1.2em}
strong{color:var(--encre);font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding:0 30px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--nuit);color:#fff;padding:10px 16px;z-index:100}
.sur{display:block;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--or-txt);font-weight:700;margin-bottom:22px}

/* ── Le volet ─────────────────────────────────────────────────────── */
.js .volet{clip-path:inset(105% 0 0 0);transform:translateY(14px);
  transition:clip-path 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .volet.vu{clip-path:inset(0 0 0 0);transform:none}

/* ── Carte de verre, version claire ───────────────────────────────── */
.verre{position:relative;background:rgba(255,255,255,.72);border:1px solid var(--filet);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:34px 32px;overflow:hidden}
.verre::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(36,31,28,.22),transparent)}
.verre h3{color:var(--nuit)}

/* ── Typographie démesurée ────────────────────────────────────────── */
.geant{position:absolute;font-weight:800;letter-spacing:-.06em;line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(36,31,28,.10);
  font-size:clamp(9rem,26vw,26rem);pointer-events:none;user-select:none;white-space:nowrap;z-index:0}

/* ── Ouverture ────────────────────────────────────────────────────── */
.ouverture{position:relative;min-height:min(100vh,880px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--creme)}
.ouverture__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Un voile clair depuis la gauche : la photo reste lisible à droite, le
   texte reste lisible à gauche. */
.ouverture::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(760px 520px at var(--x,72%) var(--y,34%),
    rgba(255,255,255,.35),transparent 60%),
    linear-gradient(100deg,var(--creme) 4%,rgba(246,243,237,.95) 34%,rgba(246,243,237,.55) 58%,rgba(246,243,237,.12) 82%)}
.ouverture .geant{left:-3vw;bottom:20vh;z-index:1}
.ouverture__in{position:relative;z-index:2;width:100%;padding:0 0 74px}
.ouverture h1{max-width:14ch}
.ouverture__sous{max-width:44ch;font-size:1.1rem;color:var(--texte)}
.ouverture__bas{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:end;margin-top:44px}
.ouverture__act{display:flex;flex-wrap:wrap;gap:12px}
/* 34ch écrasait la colonne de droite : le texte tombait en colonne de trois
   mots. 46ch laisse trois lignes pleines à côté du millésime. */
.millesime{display:flex;align-items:baseline;gap:22px;max-width:46ch;
  background:rgba(255,255,255,.78);border:1px solid var(--filet);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:24px 28px;position:relative}
.millesime::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(36,31,28,.22),transparent)}
.millesime b{font-size:clamp(2.6rem,5vw,3.8rem);color:var(--or-txt);font-weight:800;
  letter-spacing:-.04em;line-height:.9;flex:none}
.millesime span{font-size:.86rem;color:var(--texte);line-height:1.55;min-width:0}

/* ── Boutons ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;
  background:transparent;border:1px solid transparent;cursor:pointer;font:inherit;font-weight:600;
  font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  position:relative;overflow:hidden;transition:color .3s var(--ease),border-color .3s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;transform:translateY(101%);
  transition:transform .45s var(--ease);z-index:0}
.btn > *{position:relative;z-index:1}
/* Principal : aplat anthracite. Le doré est trop clair pour porter du texte. */
.btn--or{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.btn--or::after{background:var(--nuit-3)}
.btn--or:hover::after{transform:none}
.btn--clair{color:var(--encre);border-color:var(--filet-fort)}
.btn--clair::after{background:var(--nuit)}
.btn--clair:hover{color:#fff;border-color:var(--nuit)}
.btn--clair:hover::after{transform:none}
.btn--nuit{color:var(--encre);border-color:var(--filet-fort)}
.btn--nuit::after{background:var(--nuit)}
.btn--nuit:hover{color:#fff;border-color:var(--nuit)}
.btn--nuit:hover::after{transform:none}
/* Le pied est désormais la seule surface sombre du site. */
.pied .btn--clair{color:#fff;border-color:var(--filet-nuit)}
.pied .btn--clair::after{background:#fff}
.pied .btn--clair:hover{color:var(--prune);border-color:#fff}
.appel .btn--or:hover{color:var(--nuit)}

/* ── En-tête ──────────────────────────────────────────────────────── */
.entete{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .4s,backdrop-filter .4s,border-color .4s}
.entete.pose{background:rgba(246,243,237,.9);backdrop-filter:blur(18px);border-bottom-color:var(--filet)}
.entete__in{display:flex;align-items:center;gap:30px;min-height:88px;transition:min-height .35s var(--ease)}
.entete.pose .entete__in{min-height:68px}
.marque{flex:none}
.marque img{height:58px;width:auto;transition:height .35s var(--ease)}
.entete.pose .marque img{height:46px}
.menu{display:flex;gap:30px;list-style:none;margin:0 0 0 auto;padding:0}
.menu a{text-decoration:none;font-size:.74rem;letter-spacing:.18em;color:var(--texte);
  text-transform:uppercase;font-weight:600;padding:8px 0;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--or-txt);transition:right .4s var(--ease)}
.menu a:hover,.menu a[aria-current]{color:var(--encre)}
.menu a:hover::after,.menu a[aria-current]::after{right:0}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;padding:10px;
  margin-left:auto;cursor:pointer}
.burger span{width:24px;height:1px;background:var(--encre);display:block}

/* ── Sections ─────────────────────────────────────────────────────── */
.sect{padding:120px 0;position:relative;overflow:hidden;background:var(--creme)}
.sect--jour{background:var(--blanc)}
.sect--nuit{background:var(--nuit);color:rgba(255,255,255,.78)}
.sect--nuit h1,.sect--nuit h2,.sect--nuit h3{color:#fff}
.sect--nuit .sur{color:var(--or)}
.sect--nuit a{color:#fff}
.tete{max-width:56ch;margin-bottom:64px;position:relative;z-index:1}
.mesure-txt{max-width:62ch}

/* ── Bande horizontale : les vignettes portent leur propre contraste ─ */
.strip{background:var(--creme);position:relative}
.strip h2,.strip h3{color:var(--encre)}
.strip p{color:var(--texte)}
.strip .sur{color:var(--or-txt)}
.js .strip__colle{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.strip__piste{display:flex;gap:2px;padding:0 30px;will-change:transform}
.strip__rail{height:0}
/* Sept gammes au lieu de cinq : la course horizontale s'allonge d'autant.
   Sans rallonger le rail, le défilement devient nerveux et on dépasse une
   vignette sans l'avoir lue. */
.js .strip__rail{height:460vh}
.gamme{position:relative;flex:none;width:min(76vw,540px);aspect-ratio:3/4;overflow:hidden;
  text-decoration:none;background:var(--creme-2);display:block}
.gamme img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .5s}
.gamme:hover img{transform:scale(1.06)}
.gamme::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(22,19,16,.92) 6%,rgba(22,19,16,.25) 52%,transparent)}
.gamme__txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 30px}
.gamme__n{font-size:.66rem;letter-spacing:.3em;color:var(--or);font-weight:700;display:block;margin-bottom:12px}
.gamme__txt h3{font-size:clamp(1.5rem,2.6vw,2rem);color:#fff;margin-bottom:.35em;letter-spacing:-.03em}
.gamme__txt p{font-size:.92rem;color:rgba(255,255,255,.74);margin:0;max-width:34ch}
.gamme__voir{display:inline-block;margin-top:18px;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--or);font-weight:700}
/* Hors de la bande sombre, les vignettes vivent sur fond clair. */
.sect .strip__piste .gamme__txt h3,.sect .strip__piste .gamme__txt p{color:#fff}

/* ── Le coefficient U ─────────────────────────────────────────────── */
.mesureur{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.jauge{position:relative;height:230px;border:1px solid var(--filet-fort);overflow:hidden;
  background:linear-gradient(to right,rgba(213,185,77,.06),rgba(213,185,77,.26))}
.jauge__flux{position:absolute;inset:0;opacity:var(--perte,.6);
  background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(143,119,34,.55) 26px 27px);
  transition:opacity .4s var(--ease)}
.jauge__val{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;display:flex;
  align-items:baseline;justify-content:space-between;
  background:linear-gradient(to top,rgba(255,255,255,.94),transparent)}
.jauge__u{font-size:2.6rem;font-weight:800;color:var(--encre);letter-spacing:-.04em;line-height:1}
.jauge__u small{font-size:.8rem;color:var(--or-txt);font-weight:600;letter-spacing:.12em;margin-left:8px}
.jauge__eti{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-txt)}
.curseur{width:100%;margin-top:26px;accent-color:var(--nuit)}
.curseur-legende{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--doux);margin-top:10px}

/* ── Bande photo ──────────────────────────────────────────────────── */
.bande-photo{position:relative;min-height:min(72vh,620px);display:flex;align-items:center;overflow:hidden}
.bande-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bande-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--creme) 6%,rgba(246,243,237,.92) 36%,rgba(246,243,237,.2) 72%,transparent)}
.bande-photo .wrap{position:relative;z-index:2}

/* ── Comparatif en deux colonnes, grille de quatre ────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--filet)}
.duo > div{background:var(--blanc);padding:42px 36px}
.duo h3{font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.03em;margin-bottom:.55em}
.duo .sur{margin-bottom:14px}
.quatuor{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--filet)}
.quatuor > div{background:var(--blanc);padding:34px 28px}
.quatuor p{margin:0;font-size:.92rem}
.zones{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}

/* ── Étapes, listes ───────────────────────────────────────────────── */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filet)}
.etape{padding:44px 34px;background:var(--blanc);position:relative}
.sect--jour .etape{background:var(--creme)}
.sect--nuit .etapes{background:var(--filet-nuit)}
.sect--nuit .etape{background:var(--nuit)}
.etape b{display:block;font-size:2.6rem;font-weight:800;color:var(--or-txt);letter-spacing:-.05em;
  line-height:1;margin-bottom:20px}
.sect--nuit .etape b{color:var(--or)}
.etape h3{margin-bottom:.5em}
.etape p{margin:0;font-size:.94rem}
.liste-fine{list-style:none;padding:0;margin:0}
.liste-fine li{padding:16px 0 16px 30px;position:relative;border-bottom:1px solid var(--filet);font-size:.96rem}
.liste-fine li::before{content:"";position:absolute;left:0;top:1.55em;width:14px;height:1px;background:var(--or-txt)}
.deux-cols{columns:2;column-gap:56px}
.deux-cols li{break-inside:avoid}
.autres{display:flex;flex-wrap:wrap;gap:1px}
.autres a{padding:14px 24px;background:var(--blanc);border:1px solid var(--filet);font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--texte);transition:.3s}
.autres a:hover{background:var(--nuit);border-color:var(--nuit);color:#fff}

/* ── Avis ─────────────────────────────────────────────────────────── */
.avis-bande{background:var(--blanc);border-top:1px solid var(--filet);padding:88px 0}
.avis-tete{display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center;margin-bottom:48px}
.avis-note{text-align:center;padding-right:60px;border-right:1px solid var(--filet)}
.avis-note b{display:block;font-size:clamp(4rem,9vw,6.4rem);font-weight:800;color:var(--nuit);
  letter-spacing:-.05em;line-height:.9}
.avis__nb{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--doux);margin-top:14px}
.avis__nb b{color:var(--or-txt);font-size:1.15rem;font-weight:800;letter-spacing:0;display:inline}
.etoiles{display:inline-flex;gap:3px;margin-top:12px}
.et{position:relative;color:var(--filet-fort);font-size:1.2rem;line-height:1}
.et__plein{position:absolute;left:0;top:0;overflow:hidden;color:var(--or);white-space:nowrap}
.avis-txt{max-width:52ch}
.avis-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.temoins{display:flex;gap:2px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.temoins::-webkit-scrollbar{display:none}
.temoin{flex:none;width:min(84vw,380px);margin:0;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:space-between;background:var(--creme)}
.temoin blockquote{margin:0}
.temoin p{font-size:.95rem;line-height:1.65;margin:0 0 22px}
.temoin figcaption{display:flex;align-items:center;gap:12px;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--doux)}
.temoin .etoiles{margin:0}
.temoin .et{font-size:.9rem}
.preuve{display:flex;align-items:center;gap:14px;margin:22px 0 0;font-size:.88rem;
  color:var(--texte);flex-wrap:wrap}
.preuve b{color:var(--or-txt);font-weight:700}
.preuve .etoiles{margin:0}
.preuve .et{font-size:1rem}

/* ── Formulaire ───────────────────────────────────────────────────── */
.form{display:grid;gap:1px;max-width:660px;background:var(--filet)}
.champ{display:flex;flex-direction:column;gap:9px;background:var(--blanc);padding:20px 22px}
.champ label{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--or-txt)}
.champ input,.champ textarea,.champ select{padding:0 0 8px;border:0;border-bottom:1px solid var(--filet);
  background:transparent;font:inherit;font-size:1rem;color:var(--encre)}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--nuit)}
.champ textarea{min-height:120px;resize:vertical}
.champ select{appearance:none}
.rgpd{font-size:.78rem;margin-top:18px}
.pot{position:absolute;left:-9999px}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--filet);padding:26px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--encre);font-size:1.08rem;list-style:none;
  display:flex;justify-content:space-between;gap:20px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:13px;height:13px;flex:none;margin-top:8px;
  background:linear-gradient(var(--or-txt),var(--or-txt)) center/100% 1px no-repeat,
             linear-gradient(var(--or-txt),var(--or-txt)) center/1px 100% no-repeat;
  transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(90deg);
  background:linear-gradient(var(--or-txt),var(--or-txt)) center/100% 1px no-repeat}
.faq p{margin:16px 0 0;max-width:74ch}
.faq details[open] p{animation:deplie .4s var(--ease)}
@keyframes deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Fil, appel, pied ─────────────────────────────────────────────── */
.fil{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--doux);padding-top:120px}
.fil a{color:inherit;text-decoration:none}
.fil a:hover{color:var(--or-txt)}
.ouverture .fil{padding-top:0;margin-bottom:18px}
.appel{position:relative;background:var(--blanc);color:var(--texte);padding:110px 0;overflow:hidden;
  border-top:2px solid var(--or);border-bottom:1px solid var(--filet)}
.appel h2{color:var(--encre)}
.appel .geant{right:-4vw;top:-4vh;-webkit-text-stroke-color:rgba(36,31,28,.10)}
.appel__in{position:relative;z-index:1;max-width:52ch}
.appel__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.legal{max-width:74ch}
.legal h2{margin-top:2.4em;font-size:1.3rem}

.pied{background:var(--prune);color:rgba(255,255,255,.68);padding:80px 0 0}
/* Le prune du logo ne survit qu'ici : une seule surface colorée en bas de
   page, tout le reste du site tient sur le crème. */
.pied::before{content:"";display:block;height:2px;margin:-80px 0 78px;
  background:linear-gradient(90deg,var(--or),rgba(213,185,77,0))}
.pied a{color:rgba(255,255,255,.66);text-decoration:none}
.pied a:hover{color:var(--or)}
.pied img{height:30px;margin-bottom:22px}
.pied__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:56px}
.pied__txt{font-size:.9rem;margin-bottom:16px}
.pied__t{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--or);
  font-weight:700;margin:0 0 18px}
.pied__liste{list-style:none;margin:0;padding:0;font-size:.9rem}
.pied__liste li{margin-bottom:10px}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  border-top:1px solid var(--filet-nuit);padding:26px 0;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.pied__bas p{margin:0}

.appel-flottant{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:70;
  background:var(--nuit);color:#fff;text-decoration:none;padding:17px;align-items:center;
  justify-content:center;gap:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:.8rem;box-shadow:0 10px 30px rgba(36,31,28,.28)}
.appel-flottant svg{width:18px;height:18px}
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;background:var(--blanc);
  border:1px solid var(--filet-fort);padding:22px 24px;box-shadow:0 16px 46px rgba(36,31,28,.16);
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;max-width:800px;margin:0 auto}
/* Sans cette règle, le display:flex écrase le display:none appliqué à
   [hidden] : le bandeau ne se fermerait jamais. */
.cookies[hidden]{display:none}
.cookies p{margin:0;font-size:.85rem;flex:1 1 320px}
.cookies__btns{display:flex;gap:10px}
.cookies .btn{padding:12px 22px;font-size:.72rem}
.progres{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none}
.progres span{display:block;height:100%;width:0;background:var(--or-txt)}
@supports (animation-timeline: scroll()){
  .js .progres span{width:100%;transform-origin:0 50%;transform:scaleX(0);
    animation:avance linear both;animation-timeline:scroll(root)}
  @keyframes avance{to{transform:scaleX(1)}}
}

/* Révélation générique */
.js :where(.etape,.verre,.liste-fine li,.faq details,.gamme,.mesureur > *,.autres a,.duo > *,.quatuor > *){
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .vu{opacity:1;transform:none}
/* Les témoignages vivent dans un défilement horizontal : ceux hors écran
   n'entreraient jamais dans le champ de l'observateur. */
.js .temoin{opacity:1;transform:none;transition:none}

@media (max-width:1040px){
  .mesureur{grid-template-columns:1fr;gap:36px}
  .quatuor{grid-template-columns:1fr 1fr}
  .etapes{grid-template-columns:1fr}
  .pied__grid{grid-template-columns:1fr 1fr}
  .ouverture__bas{grid-template-columns:1fr;gap:26px}
  .avis-tete{grid-template-columns:1fr;gap:28px}
  .avis-note{text-align:left;padding:0 0 26px;border-right:0;border-bottom:1px solid var(--filet)}
  .menu{gap:20px}
  .marque img{height:48px}
}
@media (max-width:860px){
  body{font-size:16px}
  .sect{padding:78px 0}
  .fil{padding-top:104px}
  .burger{display:flex}
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;
    background:var(--blanc);border-bottom:1px solid var(--filet);padding:8px 30px 22px;display:none}
  .menu.ouvert{display:flex}
  .menu a{display:block;padding:16px 0;border-bottom:1px solid var(--filet)}
  .deux-cols{columns:1}
  .duo,.quatuor,.zones{grid-template-columns:1fr}
  .pied__grid{grid-template-columns:1fr}
  .appel-flottant{display:flex}
  body{padding-bottom:82px}
  .cookies{bottom:90px}
  .ouverture::after{background:linear-gradient(to top,var(--creme) 22%,rgba(246,243,237,.9) 52%,rgba(246,243,237,.5) 100%)}
  .js .strip__colle{position:static;height:auto;display:block}
  .js .strip__rail{height:0}
  .strip__piste{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 30px 30px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-left:30px}
  .strip__piste::-webkit-scrollbar{display:none}
  .gamme{scroll-snap-align:center;width:82vw}
  /* La dernière vignette ne doit pas coller au bord : le décalage montre
     qu'il y a autre chose à droite. */
  .strip__piste > :last-child{margin-right:30px}
}
@media (prefers-reduced-motion: reduce){
  .js .volet{clip-path:none!important;transform:none!important;transition:none!important}
  .js :where(.etape,.verre,.liste-fine li,.faq details,.gamme,.mesureur > *,.autres a,.duo > *,.quatuor > *){
    opacity:1!important;transform:none!important;transition:none!important}
  .js .strip__colle{position:static;height:auto}
  .js .strip__rail{height:0}
  .strip__piste{overflow-x:auto}
  .gamme:hover img,.btn::after{transform:none!important}
  html{scroll-behavior:auto}
}


/* ══════════════════════════════════════════════════════════════════════
   Ajouts du 17/09/2026 — pages intérieures
   Les pages produit tenaient en trois cartes : il manquait la matière
   qui répond aux questions avant l'appel. Ces quelques blocs suffisent
   à porter le texte long sans sortir du système existant.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Galerie d'archives : les photos jaunes de l'ancienne enseigne ─── */
.archives{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filet)}
.archives figure{margin:0;background:var(--blanc);display:flex;flex-direction:column}
.archives img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.88)}
.archives figcaption{padding:20px 22px;font-size:.86rem;line-height:1.6;flex:1}
.archives figcaption b{display:block;color:var(--encre);font-weight:600;margin-bottom:5px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or-txt)}
.archives--large{grid-template-columns:repeat(2,1fr)}
.archives--large img{aspect-ratio:16/10}

/* ── Fiche technique : libellé à gauche, valeur à droite ──────────── */
.fiche{list-style:none;padding:0;margin:0;border-top:1px solid var(--filet)}
.fiche li{display:grid;grid-template-columns:minmax(150px,.85fr) 1.6fr;gap:22px;
  padding:18px 0;border-bottom:1px solid var(--filet);font-size:.95rem;align-items:baseline}
.fiche b{color:var(--encre);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.5}
.fiche span{display:block}

/* ── Encadré « à savoir » : la nuance qu'on dirait de vive voix ───── */
.note{border-left:2px solid var(--or);background:rgba(213,185,77,.07);
  padding:26px 30px;margin:44px 0 0;font-size:.96rem}
.note p{margin:0}
.note p + p{margin-top:.9em}
.note b{color:var(--encre)}

/* ── Colonne de texte longue, confortable à lire ──────────────────── */
.texte-long{max-width:68ch}
.texte-long h3{font-size:1.28rem;letter-spacing:-.02em;margin:2.2em 0 .6em}
.texte-long h3:first-child{margin-top:0}

@media(max-width:900px){
  .archives,.archives--large{grid-template-columns:1fr 1fr}
  .fiche li{grid-template-columns:1fr;gap:6px}
}
@media(max-width:560px){
  .archives,.archives--large{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   Ajouts du 28/10/2026 — retours de Jean (HOME PAGE.pdf)
   Pages produit allégées : de petits blocs plutôt qu'un gros bloc de
   texte, des galeries de réalisations, des flèches sur la bande des
   gammes pour ceux qui ne pensent pas à faire défiler.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Petits blocs de texte ────────────────────────────────────────── */
.blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--filet)}
.blocs > div{background:var(--blanc);padding:34px 30px}
.sect--jour .blocs > div{background:var(--creme)}
.blocs h3{font-size:1.12rem;letter-spacing:-.02em;margin-bottom:.6em}
.blocs p{margin:0 0 .8em;font-size:.94rem}
.blocs p:last-child{margin-bottom:0}
.blocs .liste-fine li{padding:10px 0 10px 26px;font-size:.92rem}
.blocs .liste-fine li::before{top:1.3em}
.blocs--2{grid-template-columns:1fr 1fr}
.blocs--4{grid-template-columns:repeat(4,1fr)}
.quatuor--trois{grid-template-columns:repeat(3,1fr)}
.quatuor--trois h3{font-size:1.2rem;letter-spacing:-.02em}
.etapes--4{grid-template-columns:repeat(4,1fr)}
.archives--quatre{grid-template-columns:repeat(4,1fr)}
.archives--quatre img{aspect-ratio:3/4}

/* ── Galerie de réalisations ──────────────────────────────────────── */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.galerie--2{grid-template-columns:1fr 1fr}
.galerie figure{margin:0;overflow:hidden;background:var(--creme-2)}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)}
.galerie figure:hover img{transform:scale(1.04)}

/* ── Logos partenaires (Kiwa, Deceuninck) ─────────────────────────── */
.logos-partenaires{display:flex;align-items:center;gap:18px;margin-top:34px}
.logos-partenaires img{height:118px;width:auto}

/* ── Flèches de la bande des gammes ───────────────────────────────── */
.strip__nav{position:absolute;right:30px;bottom:34px;display:flex;gap:2px;z-index:3}
.strip__fleche{width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  background:var(--blanc);border:1px solid var(--filet-fort);color:var(--encre);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s}
.strip__fleche:hover{background:var(--nuit);border-color:var(--nuit);color:#fff}
.strip__fleche:disabled{opacity:.35;cursor:default;background:var(--blanc);color:var(--encre);border-color:var(--filet-fort)}
.strip__fleche svg{width:22px;height:22px}
.strip__colle{position:relative}

/* ── Villes desservies, en tout petit dans le pied de page ────────── */
.pied__villes{font-size:.72rem;line-height:1.6;color:rgba(255,255,255,.42);margin:0 0 22px;max-width:120ch}

@media (max-width:1040px){
  .blocs--4,.etapes--4,.archives--quatre,.quatuor--trois{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .blocs--2,.blocs--4,.quatuor--trois{grid-template-columns:1fr}
  .galerie{grid-template-columns:1fr 1fr}
  .strip__nav{position:static;justify-content:flex-end;padding:0 30px 14px}
  .strip__fleche{width:46px;height:46px}
  .logos-partenaires img{height:96px}
}
@media (max-width:560px){
  .etapes--4,.archives--quatre,.galerie,.galerie--2{grid-template-columns:1fr}
}

/* ── 29/10/2026 : derniers ajustements de Jean ───────────────────────
   Les avis ne défilent plus en bande : sur ordinateur, la souris ne
   permettait pas d'atteindre le dernier. Grille sur grand écran, bande
   tactile seulement sur téléphone. Les portes en portrait, entières. */
@media (min-width:700px){
  .temoins{display:grid;grid-template-columns:1fr 1fr;overflow:visible;padding-bottom:0}
  .temoin{width:auto}
}
@media (min-width:1041px){
  .temoins{grid-template-columns:repeat(3,1fr)}
}
.galerie--portes{grid-template-columns:repeat(4,1fr)}
.galerie--portes img{aspect-ratio:3/4;object-position:center bottom}
.reseaux{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}
.reseaux a{display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;
  border:1px solid var(--filet-fort);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:inherit;transition:background .3s,color .3s,border-color .3s}
.reseaux a:hover{background:var(--nuit);border-color:transparent;color:#fff}
.reseaux svg{width:22px;height:22px;flex:none}
@media (max-width:1040px){ .galerie--portes{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){ .galerie--portes{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .galerie,.galerie--portes{grid-template-columns:1fr 1fr} }
.form-devis{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.form-devis .form{max-width:none}
.form-devis__droite{display:flex;flex-direction:column;align-items:flex-start}
.form-devis__droite .form{width:100%}
.champ--grand textarea{min-height:300px}
.form-devis__tel{margin:26px 0 0;font-size:.92rem}
@media (max-width:860px){ .form-devis{grid-template-columns:1fr;gap:1px} .champ--grand textarea{min-height:160px} }

/* ── 09/11/2026 : galeries châssis, accueil, Devis en mauve ─────────── */
.galerie--4{grid-template-columns:repeat(4,1fr)}
.galerie--repli figure:nth-child(n+13){display:none}
.galerie__plus{margin:28px 0 0;text-align:center}
@media (max-width:1040px){ .galerie--4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){ .galerie--4{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .galerie--4{grid-template-columns:1fr 1fr} }
/* Le bandeau dit ce qu'on fait, à la taille du texte qui suit. */
.sur--metiers{font-size:clamp(.82rem,1.6vw,1.05rem);letter-spacing:.2em;line-height:1.5}
/* Les prix Deceuninck : la preuve, juste sous la promesse. */
.prix{display:flex;align-items:center;gap:26px;background:#fff;padding:14px 22px;margin:26px 0 30px;
  width:max-content;max-width:100%;box-shadow:0 6px 24px rgba(36,31,28,.08)}
.prix img{height:62px;width:auto}
/* Le titre ne passe plus jamais sous l'en-tête fixe. */
.ouverture__in{padding-top:136px;padding-left:30px;padding-right:30px}
/* Devis : la seule entrée du menu sur fond prune. */
.menu .menu__devis{background:var(--prune);color:#fff;padding:10px 18px;font-weight:700}
.menu .menu__devis::after{display:none}
.menu .menu__devis:hover,.menu .menu__devis[aria-current]{background:var(--prune-2);color:#fff}
/* Boutons d'action en prune, survols compris. */
.btn--or{background:var(--prune);border-color:var(--prune)}
.btn--or::after{background:var(--prune-2)}
.appel .btn--or:hover{color:#fff}
.btn--clair::after,.btn--nuit::after{background:var(--prune)}
.btn--clair:hover,.btn--nuit:hover{border-color:var(--prune)}
.reseaux a:hover{background:var(--prune)}
.appel-flottant{background:var(--prune)}
@media (max-width:860px){
  .ouverture__in{padding-top:118px}
  .menu .menu__devis{display:block;text-align:center;margin-top:14px;border-bottom:0}
  .prix{gap:16px;padding:10px 14px}
  .prix img{height:40px}
}