/* =========================================================================
   HMG Extérieur — feuille de style unique
   Palette : 4 valeurs. Typo : Poppins 300 / 500. 
   Interdits tenus dans tout ce fichier : border-radius, box-shadow,
   dégradé de fond, couleur hors palette, icône.
   ========================================================================= */

/* --- Poppins, embarquée localement -------------------------------------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/poppins-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/poppins-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Jetons -------------------------------------------------------------- */
:root{
  --anthracite:#1D1F22;
  --craie:#F7F6F4;
  --laiton:#B08D57;
  --gris:#8A8D91;

  --fond:var(--craie);
  --encre:var(--anthracite);
  /* Le laiton ne passe pas le contraste sur fond craie (2,9:1). Sur fond clair,
     c'est donc le FILET qui est en laiton et le chiffre qui reste anthracite ;
     sur fond anthracite, le laiton passe (5,3:1) et colore le chiffre. */
  --chiffre:var(--anthracite);
  --second:#5F6266;          /* anthracite désaturé : gris de travail assombri
                                pour tenir le contraste AA sur fond craie */
  --filet:rgba(29,31,34,.16);

  --serre:clamp(3rem,4.5vw,4.25rem);
  --normal:clamp(4.5rem,7vw,7rem);
  --ample:clamp(6rem,10vw,10rem);

  --bord:clamp(1.25rem,5vw,5.5rem);   /* marge latérale de la page */
  --lisible:66ch;
  --entete:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  font-size:1rem;
  line-height:1.68;
  color:var(--encre);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
button,input,select,textarea{font:inherit;color:inherit}

/* Focus clavier : un cadre laiton franc, visible sur les deux fonds */
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}
.sombre :focus-visible{outline-color:var(--laiton)}

.saut{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--anthracite);color:var(--craie);padding:.9rem 1.4rem}
.saut:focus{left:0}

/* --- Rôles typographiques : display, lead, body, label, figure ----------- */
.display{
  font-weight:300;
  font-size:clamp(1.95rem,3.1vw,3.15rem);
  line-height:1.06;
  letter-spacing:-.018em;
  max-width:20ch;
  text-wrap:balance;
}
.display--court{max-width:16ch}
.display--large{max-width:26ch}
/* un seul niveau intermédiaire, pour que la hiérarchie se lise sans crier */
.sous-titre{
  font-weight:500;
  font-size:1.0625rem;
  line-height:1.35;
  letter-spacing:-.005em;
}
.lead{
  font-weight:300;
  font-size:clamp(1.0625rem,1.1vw,1.1875rem);
  line-height:1.55;
  max-width:52ch;
  color:var(--second);
}
.texte{max-width:var(--lisible)}
.texte + .texte{margin-top:1.15rem}
.label{
  font-weight:500;
  font-size:.8125rem;
  letter-spacing:.045em;
  line-height:1.25;
}
.legende{font-size:.8125rem;line-height:1.4;color:var(--second);max-width:78ch}
.chiffre{
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--chiffre);
  white-space:nowrap;
}
/* le filet laiton ne se pose que sous un chiffre */
.chiffre-bloc{display:inline-block;align-self:flex-start}
.chiffre-bloc .chiffre{
  font-size:clamp(1.6rem,2.2vw,2.1rem);
  line-height:1;
  display:block;
  border-bottom:1px solid var(--laiton);
  padding-bottom:.45rem;
}
.chiffre-bloc .label{display:block;margin-top:.7rem;color:var(--second)}

/* --- Surfaces ------------------------------------------------------------ */
.sombre{--fond:var(--anthracite);--encre:var(--craie);--second:#A9ACB0;
        --filet:rgba(247,246,244,.18);--chiffre:var(--laiton);
        background:var(--anthracite);color:var(--craie)}
.claire{--fond:var(--craie);--encre:var(--anthracite);--second:#5F6266;
        --filet:rgba(29,31,34,.16);--chiffre:var(--anthracite);
        background:var(--craie);color:var(--anthracite)}

.bloc{padding:var(--normal) var(--bord)}
.bloc--serre{padding-top:var(--serre);padding-bottom:var(--serre)}
.bloc--ample{padding-top:var(--ample);padding-bottom:var(--ample)}
.bloc--plat{padding-left:0;padding-right:0}
.dedans{max-width:1520px;margin:0 auto;width:100%}
.bloc > .dedans{max-width:1520px}

/* --- Liens d'action : filet, jamais de flèche, jamais de laiton ---------- */
.action{
  display:inline-block;position:relative;overflow:hidden;isolation:isolate;
  font-weight:500;font-size:.8125rem;letter-spacing:.045em;
  padding:1.05rem 1.9rem;
  text-decoration:none;
  border:1px solid var(--encre);
  background:var(--encre);color:var(--fond);
  transition:color .3s cubic-bezier(.22,1,.36,1);
}
/* le fond glisse au lieu de clignoter : c'est le seul « effet » des boutons */
.action::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fond);
  transform:translateY(101%);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.action:hover::before{transform:translateY(0)}
.action:hover{color:var(--encre)}
.action--filet{background:transparent;color:var(--encre)}
.action--filet::before{background:var(--encre)}
.action--filet:hover{color:var(--fond)}

.lien{
  display:inline-block;position:relative;
  font-weight:500;font-size:.8125rem;letter-spacing:.045em;
  text-decoration:none;
  padding-bottom:.4rem;
}
.lien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--encre);transform-origin:right;
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.lien::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--laiton);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1) .06s}
.lien:hover::after{transform:scaleX(0)}
.lien:hover::before{transform:scaleX(1)}
/* un lien posé au milieu d'une phrase garde la taille de la phrase */
.lead .lien,.texte .lien,.depliant__corps .lien,.legende .lien{
  font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  padding-bottom:.05rem;border-bottom-color:var(--laiton)}
.lead .lien:hover,.texte .lien:hover,.depliant__corps .lien:hover{
  border-bottom-color:currentColor}

.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

/* --- En-tête -------------------------------------------------------------- */
.entete{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--entete);
  display:flex;align-items:center;gap:2rem;
  padding:0 var(--bord);
  background:transparent;
  transition:background .2s linear,border-color .2s linear;
  border-bottom:1px solid transparent;
}
.entete--pose{background:var(--craie);border-bottom-color:var(--filet)}
.entete--sombre{color:var(--craie)}
.entete--sombre.entete--pose{background:var(--anthracite);color:var(--craie);
  border-bottom-color:rgba(247,246,244,.18)}
.entete__logo{display:flex;align-items:center;line-height:0}
.entete__logo img{height:30px;width:auto}
.entete__logo .clair{display:none}
.entete--sombre .entete__logo .clair,
.entete--survol .entete__logo .clair{display:block}
.entete--sombre .entete__logo .fonce,
.entete--survol .entete__logo .fonce{display:none}

.nav{margin-left:auto;display:flex;align-items:center;gap:1.55rem}
.nav a{
  font-weight:500;font-size:.8125rem;letter-spacing:.03em;
  text-decoration:none;padding:.4rem 0;border-bottom:1px solid transparent;
}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--laiton);transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.22,1,.36,1)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current=page]{border-bottom-color:currentColor}
.nav__etude{
  border:1px solid currentColor;padding:.72rem 1.15rem!important;
}
.nav__etude:hover{background:currentColor;border-bottom-color:currentColor}
.entete:not(.entete--sombre) .nav__etude:hover{color:var(--craie)}
.entete--sombre .nav__etude:hover{color:var(--anthracite)}

.burger{display:none;margin-left:auto;background:none;border:0;padding:.6rem;
  cursor:pointer;font-weight:500;font-size:.8125rem;letter-spacing:.045em}
.tiroir{display:none}

@media(max-width:860px){
  .nav{
    position:fixed;inset:var(--entete) 0 0 0;
    background:var(--anthracite);color:var(--craie);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:0;padding:0 var(--bord);
    transform:translateY(-100%);visibility:hidden;
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility .28s;
  }
  .nav[data-ouvert=oui]{transform:translateY(0);visibility:visible}
  .nav a{font-size:1.6rem;font-weight:300;letter-spacing:-.01em;
    padding:.85rem 0;width:100%;border-bottom:1px solid rgba(247,246,244,.14)}
  .nav__etude{border:0;padding:.85rem 0!important;color:var(--laiton)}
  .nav__etude:hover{background:none;color:var(--laiton)}
  .burger{display:block}
  .entete--ouvert{background:var(--anthracite)!important;color:var(--craie)!important}
  .entete--ouvert .entete__logo .clair{display:block}
  .entete--ouvert .entete__logo .fonce{display:none}
}

/* --- Le principe : les montants ------------------------------------------ */
/* Une rangée de colonnes à fond perdu, séparées par un filet de 1 px.
   Remplace toute grille de cartes sur ce site. */
.montants{
  display:grid;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet);
}
.montant{
  padding:2.6rem var(--bord) 2.9rem;
  border-left:1px solid var(--filet);
  min-width:0;
}
.montant:first-child{border-left:0}
.montants--plein .montant{padding-left:2rem;padding-right:2rem}
@media(max-width:900px){
  .montants{grid-template-columns:1fr}
  .montant{border-left:0;border-top:1px solid var(--filet);
    padding-left:var(--bord);padding-right:var(--bord)}
  .montant:first-child{border-top:0}
}

/* montants photo : la photo occupe la colonne, le texte se pose dessous */
.montant-photo{display:flex;flex-direction:column;text-decoration:none;
  border-left:1px solid var(--filet);min-width:0}
.montant-photo:first-child{border-left:0}
/* height:auto — sinon la photo se fait rogner par la hauteur de sa légende
   et les colonnes d'une même rangée ne s'alignent plus */
.montant-photo img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5}
/* en rangée de deux, la colonne photo ne doit pas écraser la page */
.montants[style*="--cols:2"] .montant-photo img{aspect-ratio:4/5;max-height:760px}
.montant-photo__texte{padding:1.5rem 1.6rem 2.2rem}
.montant-photo__texte h3{margin-bottom:.55rem}
.montant-photo p{color:var(--second);font-size:.95rem;max-width:34ch}

/* --- Deux panneaux : texte / image, alternés ----------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.duo--tiers{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.duo__media img,.duo__media video{width:100%;height:100%;object-fit:cover;min-height:340px}
.duo__texte{
  padding:clamp(2.5rem,6vw,6rem) var(--bord);
  display:flex;flex-direction:column;justify-content:center;
}
.duo--inverse .duo__media{order:2}
@media(max-width:900px){
  .duo,.duo--tiers{grid-template-columns:1fr}
  .duo--inverse .duo__media{order:0}
  .duo__media img,.duo__media video{min-height:0;aspect-ratio:3/2}
}

/* --- Média à fond perdu --------------------------------------------------- */
.pleine img,.pleine video{width:100%;height:auto}
.pleine--21 img{aspect-ratio:21/9;object-fit:cover}
.pleine--169 img{aspect-ratio:16/9;object-fit:cover}
.mention{margin-top:.8rem;padding:0 var(--bord)}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;min-height:calc(100svh - var(--entete));margin-top:var(--entete);
  display:flex;align-items:flex-end;
  background:var(--anthracite);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__lames{position:absolute;inset:0;perspective:1400px;pointer-events:none}
.hero__lames i{
  position:absolute;left:-2%;width:104%;
  height:calc(100% / 9 + 1px);
  background:var(--anthracite);
  transform-origin:50% 50%;
  backface-visibility:hidden;
  display:block;
}
.hero__lames i::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(247,246,244,.10)}
.hero[data-lames=ouvre] i{animation:lame-ouvre 1.15s cubic-bezier(.33,.9,.2,1) forwards}
@keyframes lame-ouvre{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
.hero[data-lames=fixe] i{transform:rotateX(-90deg)}

.hero__panneau{
  --chiffre:var(--laiton);
  position:relative;z-index:2;
  background:var(--anthracite);color:var(--craie);
  padding:clamp(2.2rem,4vw,3.6rem) clamp(1.6rem,3.4vw,3.4rem)
          clamp(2.4rem,4vw,3.6rem) var(--bord);
  max-width:min(46rem,94vw);
  margin-top:auto;
}
.hero__panneau .display{
  font-size:clamp(2.05rem,3.5vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.02em;
  max-width:17ch;margin-bottom:1.15rem}
.hero__panneau .lead{color:#A9ACB0;max-width:38ch}
.hero__panneau .actions{margin-top:2.1rem}
.hero__panneau .action{border-color:var(--craie);background:var(--craie);color:var(--anthracite)}
.hero__panneau .action:hover{background:transparent;color:var(--craie)}
.hero__panneau .action--filet{background:transparent;color:var(--craie)}
.hero__panneau .action--filet:hover{background:var(--craie);color:var(--anthracite)}

/* bandeau de faits : quatre montants, pas de points médians */
.faits{--cols:4}
.faits .montant{padding-top:2.2rem;padding-bottom:2.4rem}
.faits .montant p{color:var(--second);font-size:.9375rem;margin-top:.5rem;max-width:26ch}
@media(max-width:900px){
  .faits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faits .montant{border-left:1px solid var(--filet);border-top:1px solid var(--filet);
    padding-left:1.5rem;padding-right:1.5rem}
  .faits .montant:nth-child(-n+2){border-top:0}
  .faits .montant:nth-child(odd){border-left:0}}
@media(max-width:560px){
  .faits{grid-template-columns:1fr}
  .faits .montant{border-left:0;padding-left:var(--bord);padding-right:var(--bord)}
  .faits .montant:nth-child(2){border-top:1px solid var(--filet)}}

/* --- En-tête de page (pages intérieures) --------------------------------- */
.chapeau{padding:calc(var(--entete) + clamp(4.5rem,9vw,8.5rem)) var(--bord) var(--normal)}
.chapeau .lead{margin-top:1.8rem}
.chapeau--serre{padding-bottom:var(--serre)}

/* --- Tableau comparateur -------------------------------------------------- */
.compare{margin-top:3rem;border-top:1px solid var(--filet)}
.compare th,.compare td{
  padding:1.15rem 1.2rem;text-align:left;
  border-bottom:1px solid var(--filet);vertical-align:top;
}
.compare thead th{
  font-weight:500;font-size:.8125rem;letter-spacing:.045em;
  padding-bottom:.9rem;
}
.compare tbody th{font-weight:300;color:var(--second);width:34%}
.compare td{width:33%;font-weight:500;font-size:.95rem}
.compare .chiffre{font-size:1.05rem}
.compare tr:hover td,.compare tr:hover th{background:rgba(176,141,87,.055)}
@media(max-width:760px){
  .compare thead{display:none}
  .compare tr{display:block;border-bottom:1px solid var(--filet);padding:1rem 0}
  .compare th,.compare td{display:block;border:0;padding:.25rem 0;width:auto}
  .compare tbody th{font-size:.8125rem;letter-spacing:.045em;font-weight:500}
  .compare td::before{content:attr(data-modele) " — ";color:var(--second);font-weight:300}
}

/* --- Dépliants (identique / FAQ) ------------------------------------------ */
.depliant{border-bottom:1px solid var(--filet)}
.depliant > summary{
  list-style:none;cursor:pointer;
  padding:1.55rem 3rem 1.55rem 0;position:relative;
  font-weight:300;font-size:1.0625rem;
}
.depliant > summary::-webkit-details-marker{display:none}
/* pas d'icône : deux traits qui forment un plus, et un seul qui reste ouvert */
.depliant > summary::before,
.depliant > summary::after{
  content:"";position:absolute;right:.4rem;top:50%;
  background:var(--second);transition:transform .2s linear,opacity .2s linear;
}
.depliant > summary::before{width:14px;height:1px;transform:translateY(-50%)}
.depliant > summary::after{width:1px;height:14px;right:calc(.4rem + 6.5px);
  transform:translateY(-50%)}
.depliant[open] > summary::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.depliant__corps{padding:0 3rem 1.9rem 0;color:var(--second);max-width:66ch}
.depliant__corps p + p{margin-top:.9rem}

/* --- Curseur jour / nuit -------------------------------------------------- */
.jn{--pos:50%;--s:0px;
  position:relative;overflow:hidden;background:var(--anthracite);
  touch-action:pan-y;user-select:none}
.jn img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.jn__dessus{position:absolute;inset:0;
  /* la coupe suit l'inclinaison des lames, pas une verticale */
  clip-path:polygon(0 0, calc(var(--pos) + var(--s)) 0,
                    calc(var(--pos) - var(--s)) 100%, 0 100%)}
.jn__dessus img{height:100%}
.jn__poignee{position:absolute;top:0;bottom:0;width:1px;background:var(--craie);
  transform-origin:50% 50%;pointer-events:none}
.jn__prise{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:54px;height:54px;border:1px solid var(--craie);background:rgba(29,31,34,.55);
  display:grid;place-items:center;color:var(--craie);
  font-weight:500;font-size:.6875rem;letter-spacing:.045em;
}
.jn__champ{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.jn__etiquette{position:absolute;bottom:1.1rem;color:var(--craie);
  font-weight:500;font-size:.75rem;letter-spacing:.05em;z-index:3;
  text-shadow:0 0 12px rgba(29,31,34,.9)}
.jn__etiquette--g{left:1.2rem}
.jn__etiquette--d{right:1.2rem}

/* --- Séquence de l'eau (déclenchée au clic) ------------------------------ */
.eau{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;
  border-top:1px solid var(--filet)}
.eau__pas{border-right:1px solid var(--filet)}
.eau__pas li{border-bottom:1px solid var(--filet)}
.eau__pas li:last-child{border-bottom:0}
.eau__pas button{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:1.35rem var(--bord) 1.35rem 0;display:flex;gap:1.1rem;align-items:baseline;
  border-left:1px solid transparent;padding-left:1.4rem;
  transition:border-color .18s linear,color .18s linear;color:var(--second);
}
.eau__pas button[aria-selected=true]{border-left-color:var(--laiton);color:var(--encre)}
.eau__pas .chiffre{font-size:.8125rem}
.eau__vue{position:relative;background:var(--anthracite);display:grid}
.eau__vue > [role=tabpanel]{position:relative;display:grid}
.eau__vue img{width:100%;height:100%;object-fit:cover;min-height:360px}
.eau__vue figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:1.2rem 1.5rem;background:var(--anthracite);color:var(--craie);
  font-size:.9375rem;max-width:52ch}
@media(max-width:900px){.eau{grid-template-columns:1fr}
  .eau__pas{border-right:0;border-bottom:1px solid var(--filet)}
  .eau__vue img{min-height:0;aspect-ratio:4/3}}

/* --- Déroulé du projet, 8 étapes (séquence : numérotation légitime) ------ */
.etapes{counter-reset:etape;border-top:1px solid var(--filet)}
.etapes li{
  counter-increment:etape;
  display:grid;grid-template-columns:5rem minmax(0,1fr);
  gap:0 1.5rem;align-items:baseline;
  padding:1.5rem 0;border-bottom:1px solid var(--filet);
}
.etapes li::before{
  content:counter(etape,decimal-leading-zero);
  font-weight:500;font-variant-numeric:tabular-nums;color:var(--second);
  font-size:.9375rem;
}
.etapes h3{font-weight:500;font-size:1.0625rem;margin-bottom:.25rem}
.etapes p{color:var(--second);max-width:56ch}
@media(max-width:640px){.etapes li{grid-template-columns:3.2rem minmax(0,1fr)}}

/* --- Listes de faits (garanties, inclus) --------------------------------- */
.faits-liste li{
  display:flex;justify-content:space-between;gap:2rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--filet);
}
.faits-liste li:first-child{border-top:1px solid var(--filet)}
.faits-liste span:first-child{max-width:42ch}
.puces li{padding:.5rem 0 .5rem 1.4rem;position:relative;color:var(--second);
  max-width:var(--lisible)}
.puces li::before{content:"";position:absolute;left:0;top:1.15rem;
  width:8px;height:1px;background:var(--laiton)}

/* --- Réalisations --------------------------------------------------------- */
.chantiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--filet)}
.chantier{border-left:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.chantier:nth-child(odd){border-left:0}
.chantier img{width:100%;aspect-ratio:3/2;object-fit:cover}
.chantier__texte{padding:1.6rem var(--bord) 2.2rem 1.8rem}
.chantier dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;
  margin-top:1rem;font-size:.9375rem}
.chantier dt{color:var(--second);font-size:.8125rem;letter-spacing:.045em;font-weight:500}
@media(max-width:820px){.chantiers{grid-template-columns:1fr}
  .chantier{border-left:0}}

/* --- Formulaire ----------------------------------------------------------- */
.form{display:grid;gap:0;border-top:1px solid var(--filet);max-width:44rem}
.champ{border-bottom:1px solid var(--filet);padding:1.15rem 0 1.05rem;
  display:grid;gap:.45rem}
.champ > label,.groupe > legend{font-weight:500;font-size:.8125rem;letter-spacing:.045em;
  color:var(--second)}
.champ input,.champ select,.champ textarea{
  background:transparent;border:0;padding:.25rem 0;width:100%;
  font-weight:300;font-size:1.0625rem;color:var(--encre);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none}
.champ:focus-within{border-bottom-color:var(--encre)}
.champ:focus-within > label{color:var(--encre)}
.champ textarea{resize:vertical;min-height:6.5rem}
.champ input[type=file]{font-size:.9375rem;color:var(--second);padding-top:.45rem}
.champ input[type=file]::file-selector-button{
  font-weight:500;font-size:.75rem;letter-spacing:.045em;
  background:transparent;color:var(--encre);
  border:1px solid var(--encre);padding:.55rem 1rem;margin-right:1rem;cursor:pointer}
.champ input[type=file]::file-selector-button:hover{background:var(--encre);color:var(--fond)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--gris);opacity:.75}
.groupe{border:0;padding:1.4rem 0 1.2rem;margin:0;
  border-bottom:1px solid var(--filet)}
.groupe legend{padding:0;margin-bottom:1rem}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.15rem 1.5rem}
.case{display:flex;gap:.8rem;align-items:center;padding:.5rem 0;cursor:pointer;
  font-size:.9375rem}
.case input{appearance:none;width:18px;height:18px;border:1px solid var(--gris);
  flex:0 0 auto;position:relative;cursor:pointer;background:transparent}
.case input:checked{border-color:var(--laiton)}
.case input:checked::after{content:"";position:absolute;inset:4px;background:var(--laiton)}
.form__pied{padding-top:2rem;display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center}
.mentions-form{font-size:.8125rem;color:var(--second);max-width:52ch;margin-top:1.4rem}

/* --- Pied de page --------------------------------------------------------- */
.pied{background:var(--anthracite);color:var(--craie);
  --filet:rgba(247,246,244,.18);--second:#A9ACB0;--chiffre:var(--laiton)}
.pied__haut{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--filet)}
.pied__col{padding:3.2rem 2rem;border-left:1px solid var(--filet)}
.pied__col:first-child{border-left:0;padding-left:var(--bord)}
.pied__col:last-child{padding-right:var(--bord)}
.pied h2{font-weight:500;font-size:.8125rem;letter-spacing:.045em;
  color:var(--second);margin-bottom:1.4rem}
.pied li{padding:.32rem 0;font-size:.9375rem}
.pied a{text-decoration:none;border-bottom:1px solid transparent}
.pied a:hover{border-bottom-color:var(--laiton)}
.pied__bas{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:center;
  padding:1.8rem var(--bord);font-size:.8125rem;color:var(--second)}
.pied__bas a{text-decoration:none}
.pied__bas a:hover{color:var(--craie)}
.signature{color:var(--laiton);font-weight:500;letter-spacing:.055em;font-size:.75rem}
.pied__logo{height:34px;width:auto;margin-bottom:1.5rem}
@media(max-width:900px){
  .pied__haut{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied__col{border-top:1px solid var(--filet);padding:2.4rem 1.5rem}
  .pied__col:nth-child(odd){border-left:0;padding-left:var(--bord)}
  .pied__col:nth-child(-n+2){border-top:0}
}
@media(max-width:560px){
  .pied__haut{grid-template-columns:1fr}
  .pied__col{border-left:0;padding-left:var(--bord);padding-right:var(--bord)}
  .pied__col:nth-child(2){border-top:1px solid var(--filet)}
}

/* --- Utilitaires ---------------------------------------------------------- */
.mt-s{margin-top:1.4rem}.mt-m{margin-top:2.6rem}.mt-l{margin-top:4.2rem}
.rangee{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,5rem)}
.rangee > *{flex:1 1 16rem}
.filet-haut{border-top:1px solid var(--filet);padding-top:2.4rem}
.pastille-todo{background:rgba(176,141,87,.18);
  border-bottom:1px dotted var(--laiton);padding:0 .15em}
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* --- Mouvement réduit ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .hero[data-lames] i{transform:rotateX(-90deg);animation:none}
}

/* --- Impression ----------------------------------------------------------- */
@media print{
  .entete,.pied__haut,.hero__lames{display:none}
  body{background:#fff;color:#000}
}

/* --- Le peigne : une rangée de montants que l'on fait défiler au doigt --- */
.peigne{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(15rem,23vw,23rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  scrollbar-width:thin;scrollbar-color:var(--gris) transparent;
}
.peigne > *{scroll-snap-align:start}
/* toutes les photos du peigne à la même hauteur, quel que soit le texte */
.peigne .montant-photo img{height:auto}
/* échantillons : photos posées sur une table, cadrage paysage */
.peigne--paysage .montant-photo img{aspect-ratio:3/2}
.peigne::-webkit-scrollbar{height:2px}
.peigne::-webkit-scrollbar-thumb{background:var(--gris)}
.peigne::-webkit-scrollbar-track{background:var(--filet)}
.peigne:focus-visible{outline-offset:-2px}
.peigne__note{padding:1.1rem var(--bord);display:flex;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap}
@media(max-width:640px){.peigne{grid-auto-columns:78vw}}

/* --- Bloc « compris, pas en option » ------------------------------------- */
.compris{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--filet)}
.compris > div{padding:2.4rem var(--bord) 2.6rem;border-left:1px solid var(--filet)}
.compris > div:first-child{border-left:0}
@media(max-width:760px){.compris{grid-template-columns:1fr}
  .compris > div{border-left:0;border-top:1px solid var(--filet)}
  .compris > div:first-child{border-top:0}}

/* --- Blocs société / assurances ------------------------------------------ */
.fiche{border-top:1px solid var(--filet);max-width:52rem}
.fiche div{display:grid;grid-template-columns:minmax(11rem,auto) 1fr;gap:1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--filet);align-items:baseline}
.fiche dt{font-weight:500;font-size:.8125rem;letter-spacing:.045em;color:var(--second)}
.fiche dd{margin:0}
@media(max-width:640px){.fiche div{grid-template-columns:1fr;gap:.25rem}}

/* --- Vidéo -------------------------------------------------------------- */
.video{position:relative;background:var(--anthracite)}
.video video{width:100%;aspect-ratio:16/9;object-fit:cover}
.video button{position:absolute;left:1.2rem;bottom:1.2rem;
  background:rgba(29,31,34,.62);color:var(--craie);border:1px solid var(--craie);
  padding:.7rem 1.2rem;font-weight:500;font-size:.75rem;letter-spacing:.05em;cursor:pointer}
.video button:hover{background:var(--craie);color:var(--anthracite)}


/* =========================================================================
   Passage d'une page à l'autre
   Transition de document, native au navigateur : la page sortante se retire
   sous la nouvelle. Aucune bibliothèque, aucun routeur, et les navigateurs
   qui ne la connaissent pas naviguent normalement.
   ========================================================================= */
@view-transition{navigation:auto}

::view-transition-old(root){
  animation:sortie .32s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root){
  animation:entree .46s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sortie{to{opacity:0;transform:translateY(-1.2rem)}}
@keyframes entree{from{opacity:0;transform:translateY(1.6rem)}}

/* l'en-tête ne bouge pas d'une page à l'autre : elle est le point fixe */
.entete{view-transition-name:entete}
::view-transition-group(entete){animation-duration:.36s}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* --- Hero : la photo se pose, elle n'apparaît pas ------------------------ */
.hero__img{animation:pose 1.5s cubic-bezier(.22,1,.36,1) both}
@keyframes pose{from{transform:scale(1.055)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hero__img{animation:none}}

/* =========================================================================
   Les trois portes — par où le visiteur entre dans le site
   ========================================================================= */
.portes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--filet);
}
.porte{
  display:flex;flex-direction:column;justify-content:space-between;gap:2.6rem;
  padding:2.6rem 2rem 2.4rem;
  border-left:1px solid var(--filet);
  text-decoration:none;min-width:0;position:relative;
  transition:background .4s cubic-bezier(.22,1,.36,1);
}
.porte:first-child{border-left:0;padding-left:var(--bord)}
.porte:last-child{padding-right:var(--bord)}
.porte:hover{background:rgba(29,31,34,.035)}
.sombre .porte:hover{background:rgba(247,246,244,.045)}
.porte__num{font-weight:500;font-size:.75rem;letter-spacing:.06em;color:var(--laiton);
  font-variant-numeric:tabular-nums}
.porte h2{font-weight:300;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.15;
  letter-spacing:-.01em;margin-top:.9rem;max-width:16ch;text-wrap:balance}
.porte p{color:var(--second);font-size:.9375rem;margin-top:.7rem;max-width:30ch}
.porte__aller{
  font-weight:500;font-size:.8125rem;letter-spacing:.045em;
  padding-bottom:.4rem;position:relative;display:inline-block;align-self:flex-start;
}
.porte__aller::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--laiton);transform:scaleX(.28);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.porte:hover .porte__aller::after{transform:scaleX(1)}
@media(max-width:820px){
  .portes{grid-template-columns:1fr}
  .porte{border-left:0;border-top:1px solid var(--filet);gap:1.6rem;
    padding-left:var(--bord);padding-right:var(--bord)}
  .porte:first-child{border-top:0}
}

/* =========================================================================
   La suite — on ne laisse jamais le visiteur en bout de page
   ========================================================================= */
.suite{border-top:1px solid var(--filet)}
.suite a{
  display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;
  padding:2.4rem var(--bord) 2.6rem;text-decoration:none;
  transition:background .4s cubic-bezier(.22,1,.36,1);
}
.suite a:hover{background:rgba(29,31,34,.04)}
.sombre .suite a:hover{background:rgba(247,246,244,.05)}
.suite__label{font-weight:500;font-size:.75rem;letter-spacing:.06em;color:var(--second)}
.suite__titre{font-weight:300;font-size:clamp(1.45rem,2.2vw,2.05rem);line-height:1.12;
  letter-spacing:-.015em;flex:1 1 20rem;text-wrap:balance}
.suite__trait{flex:0 0 6rem;height:1px;background:var(--laiton);align-self:center;
  transform-origin:left;transform:scaleX(.4);
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.suite a:hover .suite__trait{transform:scaleX(1)}
@media(max-width:640px){.suite__trait{display:none}}


/* --- Bandeau de faits : une seule ligne, lue en deux secondes ------------ */
.bandeau{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--filet);
}
.bandeau div{
  padding:1.5rem 1.6rem 1.6rem;border-left:1px solid var(--filet);min-width:0;
}
.bandeau div:first-child{border-left:0;padding-left:var(--bord)}
.bandeau div:last-child{padding-right:var(--bord)}
.bandeau dt{font-weight:500;font-size:.75rem;letter-spacing:.055em;color:var(--second)}
.bandeau dd{margin:.55rem 0 0;font-size:.9375rem;line-height:1.35}
@media(max-width:820px){
  .bandeau{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bandeau div{border-top:1px solid var(--filet)}
  .bandeau div:nth-child(-n+2){border-top:0}
  .bandeau div:nth-child(odd){border-left:0;padding-left:var(--bord)}
}
@media(max-width:460px){
  .bandeau{grid-template-columns:1fr}
  .bandeau div{border-left:0;padding-left:var(--bord);padding-right:var(--bord)}
  .bandeau div:nth-child(2){border-top:1px solid var(--filet)}
}


/* --- Vidéo dans un montant ou dans la séquence de l'eau ------------------ */
.montant-photo .video video{aspect-ratio:4/5;object-fit:cover}
/* rangée paysage : pour les plans d'éclairage, un 16:9 ne se rogne pas en portrait.
   Le sélecteur doit battre `.montants[style*="--cols:2"] .montant-photo img` (0-3-1),
   qui impose 4:5 et 760 px maximum à toutes les rangées de deux colonnes. */
.montants.montants--paysage[style] .montant-photo img,
.montants.montants--paysage[style] .montant-photo .video video{aspect-ratio:16/9;height:auto;max-height:none}
.eau__vue .video{height:100%}
.eau__vue video{width:100%;height:100%;object-fit:cover;min-height:360px;display:block}
.eau__vue .video button{top:1.2rem;bottom:auto}
@media(max-width:900px){.eau__vue video{min-height:0;aspect-ratio:4/3}}

/* --- Fiche technique sous une carte d'équipement ------------------------- */
.specs{margin:1.15rem 0 0;border-top:1px solid var(--filet);max-width:36ch}
.specs div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid var(--filet)}
.specs dt{font-size:.8125rem;line-height:1.35;color:var(--second)}
.specs dd{margin:0;font-size:.8125rem;line-height:1.35;font-weight:500;text-align:right}

/* --- Vidéo d'équipement : 16:9 en tête de carte, texte et fiche en dessous --
   Validé par Hugo le 13/09/2026. Plus spécifique que `.montant-photo .video video`
   (4:5), qui reste la règle des autres cartes. */
.montant-photo .video.video--paysage video{aspect-ratio:16/9;height:auto}

/* une carte d'option ciblée par une ancre (options.html#option-chauffage)
   ne passe pas sous l'en-tête fixe */
.peigne > [id]{scroll-margin-top:calc(var(--entete) + 1rem)}

/* --- Carte à deux teintes : sélecteur sous le texte, plus rien sur l'image ------
   13/09, 22 h : posés sur la vidéo, les boutons en cachaient trop (Hugo). */
.variantes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem}
.variantes button{display:inline-flex;align-items:center;gap:.55rem;
  background:transparent;color:var(--second);border:1px solid var(--filet);
  padding:.5rem .85rem;font:inherit;font-weight:500;font-size:.75rem;letter-spacing:.05em;cursor:pointer;
  transition:color .25s,border-color .25s}
.variantes button::before{content:"";width:.7rem;height:.7rem;background:var(--pastille);
  border:1px solid var(--gris)}
.variantes button[data-pastille="blanc"]{--pastille:var(--craie)}
.variantes button[data-pastille="anthracite"]{--pastille:var(--anthracite)}
.variantes button[data-pastille="rgb"]{--pastille:linear-gradient(90deg,#A04BD0,#3B9EDB,#4FBF6A,#D8453F)}
.variantes button:hover{color:var(--encre)}
.variantes button[aria-pressed="true"]{color:var(--encre);border-color:var(--encre)}

/* « En savoir plus » d'une carte : vers la vidéo commentée plus bas dans la page */
.carte__plus{margin-top:1.4rem;display:inline-flex;align-items:center;gap:.6rem}
.carte__lecture{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;
  border:1px solid currentColor;transition:color .3s,border-color .3s}
.carte__lecture::after{content:"";margin-left:.12rem;
  border-left:.36rem solid currentColor;border-top:.22rem solid transparent;border-bottom:.22rem solid transparent}
.carte__duree{font-weight:300;color:var(--second);font-variant-numeric:tabular-nums}
.carte__plus:hover .carte__lecture{color:var(--laiton)}
#store-zip-demo{scroll-margin-top:var(--entete)}

/* --- Bloc « compris » avec vidéos : la boucle à fond perdu dans sa colonne,
   le texte en dessous, avec les marges d'origine. Filets et fond inchangés. */
.compris--media > div{padding:0}
.compris--media .video video{display:block}
.compris__texte{padding:1.8rem 1.6rem 2.6rem}   /* mêmes marges que le texte des cartes du peigne */

/* --- Démonstration commentée (avec le son) : lecteur natif, rien avant le clic --- */
.demo{margin-left:0;margin-right:0}
.demo video{display:block;width:100%;aspect-ratio:16/9;background:var(--anthracite)}
/* 13/09, 23 h : un peu plus petite (Hugo), alignée à gauche comme le texte */
.demo{max-width:min(100%,66rem)}

/* --- Schémas de principe (outils/schemas.py) : jamais recadrés ------------
   La légende « Schéma de principe » est dans l'image, en bas : on la garde entière. */
img.schema{object-fit:contain!important;background:var(--craie)}
.eau__vue .eau__schema{display:flex;flex-direction:column}
.eau__vue .eau__schema img{height:auto;min-height:0;aspect-ratio:4/3}
.eau__vue .eau__schema figcaption{position:static;max-width:none}

/* --- 14/09 : fond d'accueil portrait (1086 × 1448) — cadré sur la poutre et la terrasse */
.hero__img{object-position:50% 46%}
/* photo portrait mise en avant (store ZIP) : jamais recadrée en paysage, même sur mobile */
.duo--photo .duo__media img{aspect-ratio:4/5;height:auto;min-height:0}
.duo__texte .carte__plus{align-self:flex-start}

/* =========================================================================
   14/09 — Accueil : image plein cadre, texte posé sur la photo
   Plus de panneau sombre par-dessus l'image. Un voile en dégradé assure la
   lecture du texte (bas et gauche) et de l'en-tête (haut), sans masquer la photo.
   ========================================================================= */
.hero{min-height:100svh;margin-top:0;color:var(--craie)}
.hero__img{object-position:50% 58%;animation:none}
.hero__voile{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg,rgba(29,31,34,.58) 0%,rgba(29,31,34,0) 24%),
    linear-gradient(0deg,rgba(29,31,34,.82) 0%,rgba(29,31,34,.42) 34%,rgba(29,31,34,0) 60%),
    linear-gradient(90deg,rgba(29,31,34,.5) 0%,rgba(29,31,34,0) 58%)}
.hero__contenu{position:relative;z-index:2;width:100%;
  padding:0 var(--bord) clamp(3.2rem,9vh,7rem)}
.hero__titre{font-size:clamp(2.5rem,5.4vw,5.6rem);line-height:1.02;letter-spacing:-.028em;
  font-weight:300;max-width:13.5ch;margin:0 0 1.5rem}
.hero__ligne{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero__ligne > span{display:inline-block}
.hero__lead{color:rgba(247,246,244,.84);max-width:40ch}
.hero__actions{margin-top:2.3rem}
.hero .action{border-color:var(--craie);background:var(--craie);color:var(--anthracite)}
.hero .action:hover{background:transparent;color:var(--craie)}
.hero .action--filet{background:rgba(29,31,34,.2);color:var(--craie);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero .action--filet:hover{background:var(--craie);color:var(--anthracite)}
@media(max-width:700px){
  .hero__img{object-position:34% 50%}
  .hero__titre{font-size:clamp(2.3rem,11vw,3.2rem)}
  .hero__voile{background:
    linear-gradient(180deg,rgba(29,31,34,.6) 0%,rgba(29,31,34,0) 22%),
    linear-gradient(0deg,rgba(29,31,34,.9) 0%,rgba(29,31,34,.55) 45%,rgba(29,31,34,0) 75%)}
}
/* L'entrée : un seul mouvement, une fois. L'image se pose en se révélant, le titre
   monte ligne par ligne derrière son masque, le reste suit. Rien ne bouge ensuite. */
@media(prefers-reduced-motion:no-preference){
  .hero__img{animation:hero-image 2.8s cubic-bezier(.16,1,.3,1) both}
  .hero__voile{animation:hero-fondu-simple 1.6s ease-out both}
  .hero__ligne > span{animation:hero-ligne 1.3s cubic-bezier(.16,1,.3,1) both}
  .hero__ligne:nth-child(1) > span{animation-delay:.45s}
  .hero__ligne:nth-child(2) > span{animation-delay:.57s}
  .hero__ligne:nth-child(3) > span{animation-delay:.69s}
  .hero__lead{animation:hero-monte 1.2s cubic-bezier(.16,1,.3,1) 1s both}
  .hero__actions{animation:hero-monte 1.2s cubic-bezier(.16,1,.3,1) 1.15s both}
}
@keyframes hero-image{from{transform:scale(1.12);filter:brightness(.45) saturate(.85)}to{transform:scale(1);filter:none}}
@keyframes hero-fondu-simple{from{opacity:0}to{opacity:1}}
@keyframes hero-ligne{from{transform:translateY(110%)}to{transform:none}}
@keyframes hero-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* --- Store ZIP : la photo en petit, en complément du texte ---------------- */
.zip-tete{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,6rem);align-items:end}
.zip-tete__photo{margin:0;width:clamp(8.5rem,12vw,11.5rem)}
.zip-tete__photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.zip-tete__photo figcaption{margin-top:.55rem}
@media(max-width:700px){.zip-tete{grid-template-columns:1fr;gap:1.6rem}.zip-tete__photo{width:9rem}}

/* --- En-tête de l'accueil : transparente sur la photo, posée au défilement ---- */
.entete--sur-image{background:transparent;border-bottom-color:transparent}
.entete--sur-image.entete--pose{background:rgba(29,31,34,.88);border-bottom-color:rgba(247,246,244,.12);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media(prefers-reduced-motion:no-preference){
  .entete--sur-image{animation:hero-fondu-simple 1.2s ease-out .25s both}
}
.hero__lead{max-width:46ch}

/* =========================================================================
   14/09 — Store ZIP : démonstration et photo côte à côte, photo zoomable
   Colonnes calculées pour que la vidéo 16:9 et la photo 3:4 aient exactement
   la même hauteur : 32 × 9/16 = 13,5 × 4/3.
   ========================================================================= */
.zip-duo{display:grid;grid-template-columns:minmax(0,32fr) minmax(0,13.5fr);
  gap:clamp(.9rem,1.6vw,1.4rem);align-items:start}
.zip-duo .demo{max-width:none;margin:0}
.zip-photo{margin:0}
.zip-photo__cadre{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;
  background:var(--anthracite);overflow:hidden;cursor:zoom-in}
.zip-photo__cadre img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.zip-photo__cadre:hover img,.zip-photo__cadre:focus-visible img{transform:scale(1.045)}
.zip-photo__cadre:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}
.zip-photo__agrandir{position:absolute;right:.75rem;bottom:.75rem;
  padding:.55rem .85rem .55rem 1.95rem;font-weight:500;font-size:.72rem;letter-spacing:.06em;
  color:var(--craie);background:rgba(29,31,34,.42);border:1px solid rgba(247,246,244,.38);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .3s,color .3s,border-color .3s}
.zip-photo__agrandir::before{content:"";position:absolute;left:.8rem;top:50%;width:.62rem;height:.62rem;margin-top:-.31rem;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/1px 100% no-repeat}
.zip-photo__cadre:hover .zip-photo__agrandir{background:var(--craie);color:var(--anthracite);border-color:var(--craie)}
@media(max-width:800px){.zip-duo{grid-template-columns:1fr}.zip-photo{max-width:28rem}}

/* --- La loupe : photo en plein écran, zoom et déplacement ---------------- */
.loupe{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:transparent;color:var(--craie);overflow:hidden}
.loupe::backdrop{background:rgba(20,22,24,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.loupe[open]::backdrop{animation:hero-fondu-simple .45s ease-out}
.loupe__scene{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
  touch-action:none;cursor:zoom-in}
.loupe[data-zoome] .loupe__scene{cursor:grab}
.loupe[data-glisse] .loupe__scene{cursor:grabbing}
.loupe__img{display:block;max-width:min(92vw,1500px);max-height:84vh;width:auto;height:auto;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transform-origin:50% 50%;will-change:transform}
.loupe__img.loupe__img--anime{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.loupe__fermer{position:absolute;top:1.1rem;right:1.1rem;z-index:2;cursor:pointer;
  padding:.65rem 1.05rem;font:inherit;font-weight:500;font-size:.78rem;letter-spacing:.05em;
  color:var(--craie);background:rgba(29,31,34,.35);border:1px solid rgba(247,246,244,.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.loupe__fermer:hover{background:var(--craie);color:var(--anthracite)}
.loupe__aide{position:absolute;left:0;right:0;bottom:1.15rem;margin:0;text-align:center;pointer-events:none;
  font-size:.76rem;letter-spacing:.03em;color:rgba(247,246,244,.62);transition:opacity .4s}
.loupe[data-zoome] .loupe__aide{opacity:0}

/* =========================================================================
   14/09 — Accueil : boucle des lames, fin de page sur la photo de nuit
   ========================================================================= */
.video--large{position:relative}
.video--large video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--anthracite)}

.fin-nuit{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:min(94svh,58rem);background:var(--anthracite);color:var(--craie)}
.fin-nuit__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.fin-nuit__voile{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,22,24,.55) 0%,rgba(20,22,24,0) 30%),
    linear-gradient(0deg,rgba(20,22,24,.85) 0%,rgba(20,22,24,.35) 42%,rgba(20,22,24,0) 70%),
    linear-gradient(90deg,rgba(20,22,24,.55) 0%,rgba(20,22,24,0) 60%)}
.fin-nuit__contenu{position:relative;z-index:2;width:100%;padding:clamp(4rem,10vh,7rem) var(--bord) clamp(3.2rem,9vh,6.5rem)}
.fin-nuit__titre{font-size:clamp(2.2rem,4.4vw,4.4rem);line-height:1.04;letter-spacing:-.025em;font-weight:300;max-width:15ch;margin:0}
.fin-nuit__lead{color:rgba(247,246,244,.84);max-width:44ch;margin-top:1.3rem}
.fin-nuit .actions{margin-top:2.1rem}
.fin-nuit .action{border-color:var(--craie);background:var(--craie);color:var(--anthracite)}
.fin-nuit .action:hover{background:transparent;color:var(--craie)}
@media(max-width:700px){.fin-nuit{min-height:82svh}.fin-nuit__img{object-position:40% 60%}}

/* --- Pergolas : bandeau du P8 à lames blanches, éclairage allumé ---------- */
.pleine--lumiere{margin:0}
.pleine--lumiere img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 30%}
@media(max-width:700px){.pleine--lumiere img{aspect-ratio:4/3}}
.fin-nuit__tel{color:rgba(247,246,244,.72)}
.fin-nuit__tel a{color:var(--craie)}

/* --- Accueil, « Des lames qui tournent » : texte et vidéo côte à côte (14/09) --- */
.lames-une__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
.lames-une__texte .display{max-width:14ch}
.lames-une__texte .texte{max-width:42ch}
.lames-une__video{margin:0}
.lames-une__video .video{box-shadow:none}
@media(max-width:900px){.lames-une__grille{grid-template-columns:1fr;gap:2.4rem}}

/* =========================================================================
   14/09 — Détails : repères incrustés, cartes des modèles, progression de lecture
   ========================================================================= */

/* « Aucune de nos pergolas… » : texte et étapes, photo repérée */
.atelier__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
.atelier__texte .display{max-width:13ch}
.atelier__etapes{list-style:none;margin:2.6rem 0 0;padding:0;border-top:1px solid var(--filet)}
.atelier__etapes li{display:grid;grid-template-columns:3.2rem 1fr;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--filet)}
.atelier__etapes .chiffre{font-size:.8125rem;color:var(--laiton)}
.atelier__etapes h3{margin:0 0 .2rem}
.atelier__etapes p{margin:0;color:var(--second);font-size:.95rem}
.atelier__photo{position:relative;margin:0;overflow:hidden;background:var(--anthracite)}
.atelier__photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.atelier__photo:hover img{transform:scale(1.025)}
.repere{position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;align-items:center;gap:.75rem;
  transform:translate(-7px,-50%);pointer-events:none}
.repere i{position:relative;flex:none;width:14px;height:14px;background:var(--laiton);
  box-shadow:0 0 0 3px rgba(247,246,244,.9),0 0 0 7px rgba(176,141,87,.28)}
.repere i::after{content:"";position:absolute;top:50%;left:calc(100% + 3px);width:.75rem;height:1px;background:rgba(247,246,244,.9)}
.repere > span{white-space:nowrap;font-weight:500;font-size:.72rem;letter-spacing:.04em;color:var(--craie);
  padding:.5rem .75rem;background:rgba(29,31,34,.58);border:1px solid rgba(247,246,244,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.repere--gauche{flex-direction:row-reverse;transform:translate(calc(-100% + 7px),-50%)}
.repere--gauche i::after{left:auto;right:calc(100% + 3px)}
@media(max-width:900px){.atelier__grille{grid-template-columns:1fr;gap:2.6rem}}
@media(max-width:600px){.repere > span{font-size:.62rem;padding:.35rem .5rem}.repere{gap:.5rem}
  .repere i{width:10px;height:10px}}

/* Cartes des deux modèles : cadre, étiquette sur la photo, zoom lent au survol */
.carte-modele__cadre{position:relative;display:block;overflow:hidden;background:var(--anthracite)}
.carte-modele__cadre img{display:block;transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.carte-modele:hover .carte-modele__cadre img{transform:scale(1.04)}
.puce-photo{position:absolute;left:1rem;top:1rem;display:flex;align-items:baseline;gap:.6rem;
  padding:.55rem .8rem;color:var(--craie);font-weight:500;font-size:.8rem;letter-spacing:.04em;
  background:rgba(29,31,34,.5);border:1px solid rgba(247,246,244,.25);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.puce-photo em{font-style:normal;font-weight:300;font-size:.72rem;color:rgba(247,246,244,.78)}
.carte-modele__lien{position:relative;display:inline-block;margin-top:1.1rem;padding-bottom:.35rem;
  font-weight:500;font-size:.8125rem;letter-spacing:.045em;color:var(--encre)}
.carte-modele__lien::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:2.2rem;background:var(--laiton);
  transition:width .5s cubic-bezier(.16,1,.3,1)}
.carte-modele:hover .carte-modele__lien::after{width:100%}

/* Progression de lecture : un fil laiton sous l'en-tête */
.entete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--laiton);
  transform:scaleX(var(--lu,0));transform-origin:left center;pointer-events:none}
@media(prefers-reduced-motion:reduce){.carte-modele__cadre img,.atelier__photo img{transition:none}}

/* =========================================================================
   14/09 — Réalisations : études de cas alternées, photo agrandissable
   ========================================================================= */
.realisation{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2.5rem,6vw,6.5rem);align-items:center;
  padding:clamp(3rem,7vw,6.5rem) var(--bord);border-top:1px solid var(--filet)}
.realisation:nth-child(even) .realisation__photo{order:2}
.realisation__photo{margin:0}
.realisation__cadre{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;
  background:var(--anthracite);cursor:zoom-in}
.realisation__cadre img{display:block;width:100%;height:auto;object-fit:cover;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.realisation--paysage .realisation__cadre img{aspect-ratio:3/2}
.realisation--portrait .realisation__cadre img{aspect-ratio:4/5;max-height:84svh}
.realisation--portrait .realisation__photo{max-width:36rem;justify-self:center;width:100%}
.realisation__cadre:hover img,.realisation__cadre:focus-visible img{transform:scale(1.035)}
.realisation__cadre:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}
.realisation__cadre:hover .zip-photo__agrandir{background:var(--craie);color:var(--anthracite);border-color:var(--craie)}
.realisation__texte .display{max-width:15ch}
.realisation__texte .texte{max-width:46ch}
.realisation__faits{margin:2.2rem 0 0;border-top:1px solid var(--filet)}
.realisation__faits div{display:grid;grid-template-columns:8.5rem 1fr;gap:1.2rem;padding:.8rem 0;border-bottom:1px solid var(--filet)}
.realisation__faits dt{font-weight:500;font-size:.78rem;letter-spacing:.045em;color:var(--second)}
.realisation__faits dd{margin:0;font-size:.95rem}
@media(max-width:900px){
  .realisation{grid-template-columns:1fr;gap:2rem}
  .realisation:nth-child(even) .realisation__photo{order:0}
  .realisation__faits div{grid-template-columns:7rem 1fr}
}

/* Réalisations : sur les rangées paires, la photo passe à droite ET garde la grande colonne */
.realisation:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media(max-width:900px){.realisation:nth-child(even){grid-template-columns:1fr}}
/* Petit écran : le repère qui déborderait à gauche est masqué */
@media(max-width:600px){.repere--large{display:none}}

/* =========================================================================
   14/09 (soir) — sans zoom, avis clients, lecteur des vidéos de présentation
   ========================================================================= */
/* Plus de zoom sur la photo du store ni sur les réalisations */
.zip-photo__cadre,.realisation__cadre{cursor:default}
.zip-photo__cadre:hover img,.realisation__cadre:hover img{transform:none}

/* « En savoir plus » des cartes d'options : un bouton qui a l'allure du lien */
button.carte__plus{background:none;border:0;padding:0 0 .4rem;font:inherit;font-weight:500;
  font-size:.8125rem;letter-spacing:.045em;color:inherit;cursor:pointer;text-align:left}

/* Avis clients */
.avis .display{max-width:16ch}
.avis__une{margin:clamp(2.5rem,5vw,4rem) 0 0;padding-top:1.6rem;border-top:1px solid var(--laiton);max-width:62rem}
.avis__une blockquote{margin:0}
.avis__une p{font-weight:300;font-size:clamp(1.45rem,2.5vw,2.25rem);line-height:1.3;letter-spacing:-.012em;color:var(--encre)}
.avis__une p::before{content:"« "}.avis__une p::after{content:" »"}
.avis figcaption{display:flex;flex-direction:column;gap:.2rem;margin-top:1.3rem}
.avis__nom{font-weight:500;font-size:.875rem;letter-spacing:.03em}
.avis__lieu{font-size:.8125rem;color:var(--second)}
.avis__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--filet)}
.avis__carte{margin:0;padding:1.8rem clamp(1.2rem,2.4vw,2.4rem) 0;border-left:1px solid var(--filet)}
.avis__carte:first-child{border-left:0;padding-left:0}
.avis__carte blockquote{margin:0}
.avis__carte p{font-size:1rem;line-height:1.6;color:var(--encre)}
.avis__carte p::before{content:"« "}.avis__carte p::after{content:" »"}
@media(max-width:900px){.avis__grille{grid-template-columns:1fr}
  .avis__carte{border-left:0;padding-left:0;padding-right:0;padding-bottom:1.8rem;border-bottom:1px solid var(--filet)}}

/* Le lecteur : la vidéo de présentation, en fenêtre */
.lecteur{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;
  border:0;background:transparent;color:var(--craie);display:none;place-items:center}
.lecteur[open]{display:grid}
.lecteur::backdrop{background:rgba(20,22,24,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lecteur[open]::backdrop{animation:hero-fondu-simple .4s ease-out}
.lecteur__boite{width:min(92vw,1120px)}
.lecteur[open] .lecteur__boite{animation:hero-monte .6s cubic-bezier(.16,1,.3,1)}
.lecteur__tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.lecteur__titre{color:var(--craie)}
.lecteur__fermer{cursor:pointer;padding:.6rem 1rem;font:inherit;font-weight:500;font-size:.78rem;letter-spacing:.05em;
  color:var(--craie);background:transparent;border:1px solid rgba(247,246,244,.45)}
.lecteur__fermer:hover{background:var(--craie);color:var(--anthracite)}
.lecteur__ecran{position:relative;background:#0F1012}
.lecteur__ecran video{display:block;width:100%;max-height:78vh;background:#0F1012}
.lecteur__attente{display:grid;place-items:center;text-align:center;aspect-ratio:16/9;padding:2rem;
  border:1px solid rgba(247,246,244,.14)}
.lecteur__attente p{margin:0;color:rgba(247,246,244,.7);max-width:34ch}
.lecteur__attente .lecteur__attente-titre{font-weight:300;font-size:clamp(1.3rem,2.4vw,2rem);color:var(--craie);margin-bottom:.7rem}

/* --- Options : « En savoir plus » alignés en bas des cinq cartes (14/09) --- */
.peigne > .montant-photo{height:100%}
.peigne .montant-photo__texte{display:flex;flex-direction:column;flex:1 1 auto}
.peigne .specs{margin-bottom:1.8rem}
.peigne .carte__plus{margin-top:auto;align-self:flex-start}

/* --- Repères sur photo : version fine, la vue reste dégagée (14/09) --- */
.repere{gap:2.2rem;transform:translate(-4px,-50%)}
.repere i{width:8px;height:8px;background:var(--craie);
  box-shadow:0 0 0 1px rgba(29,31,34,.35),0 0 0 5px rgba(247,246,244,.2)}
.repere i::after{width:1.6rem;left:calc(100% + 5px);background:rgba(247,246,244,.8)}
.repere > span{background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  font-weight:500;font-size:.7rem;letter-spacing:.06em;color:var(--craie);
  text-shadow:0 1px 10px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.55)}
.repere--gauche{transform:translate(calc(-100% + 4px),-50%)}
.repere--gauche i::after{left:auto;right:calc(100% + 5px)}
@media(max-width:600px){.repere{gap:1.6rem}.repere i::after{width:1.1rem}.repere > span{font-size:.62rem;padding:0}}

/* --- Avis : étoiles, initiale, date, note d'ensemble (14/09) --- */
.avis__tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem}
.avis__note{display:flex;align-items:center;gap:.9rem;margin:0}
.avis__moyenne{font-weight:300;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;letter-spacing:-.02em}
.avis__nombre{font-size:.8125rem;color:var(--second)}
.etoiles{display:inline-flex;gap:.18rem;color:var(--laiton)}
.etoiles svg{width:.95rem;height:.95rem;fill:currentColor}
.avis__une .etoiles svg{width:1.1rem;height:1.1rem}
.avis__une .etoiles,.avis__carte .etoiles{margin-bottom:1.1rem}
.avis figcaption{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 .9rem}
.avis__initiale{display:grid;place-items:center;width:2.6rem;height:2.6rem;background:var(--anthracite);
  color:var(--craie);font-weight:500;font-size:.95rem}
.avis__qui{display:flex;flex-direction:column;gap:.15rem}
.avis__date{font-size:.75rem;color:var(--second);letter-spacing:.03em;white-space:nowrap}

/* --- En-tête : le cadre de « demander une étude » fermé sur ses quatre côtés (14/09).
   `.nav a` (plus spécifique) rendait le trait du bas transparent. Bureau uniquement :
   le menu mobile garde sa présentation en liste. */
@media(min-width:861px){
  .nav a.nav__etude{border:1px solid currentColor}
  .nav a.nav__etude::after{display:none}
}

/* --- Nos standards, « Le thermolaquage » : teintes RAL et coupe repérée (14/09) --- */
.thermo__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
.thermo__texte .texte{max-width:40ch}
.thermo__teintes{list-style:none;margin:2.4rem 0 0;padding:0;border-top:1px solid var(--filet)}
.thermo__teintes li{display:grid;grid-template-columns:2.6rem 7.5rem 1fr;align-items:center;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--filet)}
.thermo__pastille{width:2.6rem;height:2.6rem;border:1px solid rgba(247,246,244,.28)}
.thermo__pastille--7016{background:#383E42}
.thermo__pastille--9005{background:#0A0A0A}
.thermo__pastille--autre{background:conic-gradient(from 45deg,#B08D57,#8A8D91,#F7F6F4,#5B6B61,#B08D57)}
.thermo__ral{font-weight:500;font-size:.875rem;letter-spacing:.04em}
.thermo__nom{font-size:.875rem;color:var(--second)}
.thermo__visuel{position:relative;margin:0;background:#ECECEA}
.thermo__visuel img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:900px){.thermo__grille{grid-template-columns:1fr;gap:2.6rem}
  .thermo__teintes li{grid-template-columns:2.2rem 6.5rem 1fr}.thermo__pastille{width:2.2rem;height:2.2rem}}
/* Mobile : le repère « Faces thermolaquées » passe à gauche de son point, sinon il sort de l'écran */
@media(max-width:600px){
  .thermo__visuel .repere:not(.repere--gauche){flex-direction:row-reverse;transform:translate(calc(-100% + 4px),-50%)}
  .thermo__visuel .repere:not(.repere--gauche) i::after{left:auto;right:calc(100% + 5px)}
}

/* =========================================================================
   14/09 — Sur mesure et projection 3D offerte
   ========================================================================= */
.projection__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
.projection__texte .display{max-width:13ch}
.projection__texte .texte{max-width:42ch}
.projection__faits{margin:2.2rem 0 0;border-top:1px solid var(--filet)}
.projection__faits div{display:grid;grid-template-columns:9rem 1fr;gap:1.2rem;padding:.85rem 0;border-bottom:1px solid var(--filet)}
.projection__faits dt{font-weight:500;font-size:.78rem;letter-spacing:.045em;color:var(--laiton)}
.projection__faits dd{margin:0;font-size:.95rem}
.projection .actions{margin-top:2.2rem}
.projection__visuel{margin:0}
.projection__visuel .legende{color:var(--second)}
@media(max-width:900px){.projection__grille{grid-template-columns:1fr;gap:2.4rem}}

/* Étude : le dossier de projection au-dessus du déroulé */
.etude__projection{margin:0 0 2.4rem}
.etude__projection img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}

/* FAQ : bandeau sous le titre */
.faq__bandeau img{object-position:50% 55%}

/* =========================================================================
   14/09 (soir) — Présentations des options, défilement depuis « En savoir plus »
   ========================================================================= */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.pres{scroll-margin-top:var(--entete)}
.pres__duo{display:grid;grid-template-columns:minmax(0,32fr) minmax(0,13.5fr);gap:clamp(.9rem,1.6vw,1.4rem);align-items:start}
.pres__duo .demo{margin:0;max-width:none}
.pres__photo{margin:0}
.pres__photo img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.pres__fiche{padding:.2rem 0 0 clamp(.5rem,2vw,1.8rem)}
.pres__fiche .specs{max-width:none;margin-top:.9rem}
@media(max-width:800px){.pres__duo{grid-template-columns:1fr}.pres__photo{max-width:28rem}.pres__fiche{padding:0}}
/* Configurateur, mobile : la surface passe sous la scène, elle ne recouvre plus les cotes */
@media(max-width:760px){.config__surface{position:static;padding:.2rem 1.1rem 1rem}}

/* --- 14/09 : aucun cadre autour des vidéos (le contour de focus doré apparaissait après un clic) --- */
video:focus,video:focus-visible{outline:none}

/* --- Présentations d'options : case vidéo en attente --- */
.pres__attente{margin:0}
.pres__attente-ecran{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:2rem;text-align:center;background:var(--anthracite);color:var(--craie)}
.sombre .pres__attente-ecran{background:#2A2D31}
.pres__attente-ecran .carte__lecture{width:3.4rem;height:3.4rem;color:var(--laiton);margin-bottom:.6rem}
.pres__attente-ecran .carte__lecture::after{border-left-width:.8rem;border-top-width:.5rem;border-bottom-width:.5rem;margin-left:.25rem}
.pres__attente-titre{margin:0;font-weight:300;font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.01em}
.pres__attente-texte{margin:0;font-size:.875rem;color:rgba(247,246,244,.66);max-width:34ch}

/* =========================================================================
   14/09 (soir) — Projection 3D : un vrai cas client, en trois images
   ========================================================================= */
.projection__tete{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.projection__tete .display{max-width:14ch}
.projection__tete .texte{max-width:48ch}
.projection__etapes{list-style:none;margin-left:0;margin-right:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.4vw,1.2rem)}
.projection__etapes figure{margin:0}
.projection__etapes img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.projection__etapes figcaption{display:grid;grid-template-columns:2.4rem 1fr;gap:.6rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--filet)}
.projection__etapes figcaption .chiffre{font-size:.8125rem}
.projection__etapes strong{display:block;font-weight:500;margin-bottom:.2rem;color:var(--encre)}
.projection__etapes figcaption span:last-child{font-size:.9rem;color:var(--second)}
@media(max-width:900px){.projection__tete{grid-template-columns:1fr}.projection__etapes{grid-template-columns:1fr;max-width:30rem}}
/* Mobile : les trois images de la projection en rangée à faire glisser, pas empilées */
@media(max-width:900px){
  .projection__etapes{max-width:none;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:.6rem;scrollbar-width:none}
  .projection__etapes::-webkit-scrollbar{display:none}
  .projection__etapes li{scroll-snap-align:start}
}

/* =========================================================================
   14/09 (nuit) — Configurateur 3D de l'accueil, rétabli ; la configuration
   part pré-remplie dans le formulaire d'étude
   ========================================================================= */
.projection__grille{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.config{margin:0}
.config__barre,.config__corps{border:1px solid var(--filet)}
.config__barre{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.1rem;border-bottom:0;background:#17191C}
.config__projet{font-size:.75rem;color:var(--second)}
.config__corps{display:grid;grid-template-columns:minmax(0,1fr) 15rem;background:#17191C}
.config__scene{position:relative;background:linear-gradient(180deg,#F4F3F0 0%,#E7E5E0 100%);transition:background .5s ease}
.config[data-nuit] .config__scene{background:linear-gradient(180deg,#0E1012 0%,#1B1E22 100%)}
.config__scene svg{display:block;width:100%;height:auto}
.config__surface{position:absolute;left:1.1rem;bottom:1rem;margin:0;display:flex;flex-direction:column;gap:.2rem;color:var(--anthracite)}
.config[data-nuit] .config__surface{color:var(--craie)}
.config__surface .label{color:inherit;opacity:.65}
.config__surface .chiffre{color:inherit;font-size:1.15rem}
.config__panneau{padding:1.15rem 1.1rem 1.3rem;border-left:1px solid var(--filet);display:flex;flex-direction:column;gap:1.1rem}
.config__champ{display:grid;grid-template-columns:1fr auto;gap:.5rem .6rem;align-items:baseline}
.config__champ output{font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--craie)}
.config__champ input{grid-column:1/-1;width:100%;margin:0;accent-color:var(--laiton);cursor:pointer}
.config__groupe .variantes{margin-top:.55rem;gap:.35rem}
.config__note{margin:0;font-size:.8125rem;line-height:1.5;color:var(--second);
  border-left:2px solid var(--laiton);padding-left:.7rem}
@media(max-width:900px){.config__note{grid-column:1/-1}}
.config .variantes button{padding:.42rem .6rem;font-size:.7rem;color:var(--second);border-color:rgba(247,246,244,.18)}
.config .variantes button[aria-pressed="true"]{color:var(--craie);border-color:var(--craie)}
.variantes button[data-pastille="noir"]{--pastille:#141415}
.config .variantes button[data-pastille="anthracite"]{--pastille:#3A3F44}
.config__envoyer{display:block;margin-top:auto;padding:.8rem .9rem;text-align:center;text-decoration:none;
  font-weight:500;font-size:.75rem;letter-spacing:.04em;color:var(--anthracite);background:var(--craie);border:1px solid var(--craie);
  transition:background .25s,color .25s}
.config__envoyer:hover{background:transparent;color:var(--craie)}
.config__recue{margin:0 0 1.4rem;padding:.8rem 1rem;border-left:2px solid var(--laiton);background:rgba(176,141,87,.08);color:var(--encre)}
@media(max-width:1150px){.projection__grille{grid-template-columns:1fr}}
@media(max-width:760px){.config__corps{grid-template-columns:1fr}
  .config__panneau{border-left:0;border-top:1px solid var(--filet);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.2rem}
  .config__envoyer{grid-column:1/-1}
  .config__surface{position:static;padding:.2rem 1.1rem 1rem}}
@media(max-width:480px){.config__panneau{grid-template-columns:1fr}}

/* =========================================================================
   15/09 — Page Garantie SAV
   ========================================================================= */
.couvre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--filet)}
.couvre > div{padding:1.6rem clamp(1rem,2vw,2rem) 0 0}
.couvre > div + div{padding-left:clamp(1rem,2vw,2rem);border-left:1px solid var(--filet)}
.couvre h3{margin:0 0 .6rem;color:var(--laiton)}
.couvre p{margin:0;color:var(--second);font-size:.95rem;max-width:30ch}
.etapes-sav{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.etapes-sav li{display:grid;grid-template-columns:3rem 1fr;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--filet)}
.etapes-sav .chiffre{font-size:.8125rem;color:var(--laiton)}
.etapes-sav h3{margin:0 0 .25rem}
.etapes-sav p{margin:0;color:var(--second);font-size:.95rem}
@media(max-width:900px){.couvre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .couvre > div:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:560px){.couvre{grid-template-columns:1fr}.couvre > div,.couvre > div + div{padding-left:0;border-left:0;padding-bottom:1rem}}

/* =========================================================================
   16/09 — Page Options : ouverture photo, fond dessiné, entrée des cartes
   ========================================================================= */
.opt-hero{position:relative;min-height:min(78svh,48rem);display:flex;align-items:flex-end;overflow:hidden;
  background:var(--anthracite);color:var(--craie)}
.opt-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.opt-hero__voile{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,22,24,.62) 0%,rgba(20,22,24,0) 26%),
    linear-gradient(0deg,rgba(20,22,24,.88) 0%,rgba(20,22,24,.45) 38%,rgba(20,22,24,0) 66%),
    linear-gradient(90deg,rgba(20,22,24,.55) 0%,rgba(20,22,24,0) 60%)}
.opt-hero__contenu{position:relative;z-index:2;width:100%;padding:0 var(--bord) calc(clamp(3rem,7vh,5rem) + 7rem)}
.opt-hero__titre{font-size:clamp(2.4rem,5vw,5rem);line-height:1.02;letter-spacing:-.026em;font-weight:300;max-width:12ch;margin:0}
.opt-hero__lead{color:rgba(247,246,244,.84);max-width:44ch;margin-top:1.3rem}
@media(prefers-reduced-motion:no-preference){
  .opt-hero__img{animation:hero-image 2.6s cubic-bezier(.16,1,.3,1) both}
  .opt-hero__titre{animation:hero-monte 1.2s cubic-bezier(.16,1,.3,1) .35s both}
  .opt-hero__lead{animation:hero-monte 1.2s cubic-bezier(.16,1,.3,1) .55s both}
}

/* Fond dessiné : filets verticaux (les montants d'une pergola) et halo laiton */
.opt-peigne{position:relative;
  background:
    radial-gradient(60rem 22rem at 88% 100%,rgba(176,141,87,.12),rgba(176,141,87,0) 70%),
    radial-gradient(40rem 18rem at 0% 0%,rgba(29,31,34,.05),rgba(29,31,34,0) 70%),
    repeating-linear-gradient(90deg,rgba(29,31,34,.045) 0 1px,rgba(29,31,34,0) 1px 8.333%),
    var(--craie)}
.opt-peigne .peigne{position:relative;z-index:3;margin-top:-7rem;border-top:0;
  padding:0 var(--bord);gap:1px;scroll-padding-inline:var(--bord)}
.opt-peigne .peigne > .montant-photo{background:var(--craie);border-left:0;
  box-shadow:0 0 0 1px var(--filet)}
.opt-peigne .peigne__note{padding-top:1.4rem;padding-bottom:1.8rem}
@media(max-width:640px){.opt-peigne .peigne{margin-top:-4rem}.opt-hero__contenu{padding-bottom:6rem}}

/* Entrée des cartes : état de départ posé par le script (sans script, tout reste visible) */
.anim-options .opt-peigne .peigne > .montant-photo{opacity:0;transform:translateY(90px)}
.anim-options .opt-peigne .peigne > .montant-photo .video{clip-path:inset(100% 0 0 0)}
.anim-options .opt-peigne .peigne > .montant-photo.est-entree{opacity:1;transform:none;
  transition:opacity 2s cubic-bezier(.16,1,.3,1) var(--delai,0s),transform 2.6s cubic-bezier(.16,1,.3,1) var(--delai,0s)}
.anim-options .opt-peigne .peigne > .montant-photo.est-entree .video{clip-path:inset(0 0 0 0);
  transition:clip-path 2.6s cubic-bezier(.77,0,.18,1) calc(var(--delai,0s) + .3s)}
.anim-options .opt-peigne .peigne > .montant-photo.est-entree .video video{animation:opt-zoom 3.6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--delai,0s) + .3s)}
@keyframes opt-zoom{from{transform:scale(1.14)}to{transform:none}}
/* Apparition douce des sections suivantes */
.anim-options .apparait{opacity:0;transform:translateY(34px)}
.anim-options .apparait.est-visible{opacity:1;transform:none;transition:opacity 1.8s cubic-bezier(.16,1,.3,1),transform 2s cubic-bezier(.16,1,.3,1)}

/* =========================================================================
   16/09 — Réalisations : fonds clair et sombre en alternance
   ========================================================================= */
.realisations{padding:0}
.realisation.sombre,.realisation.claire{border-top:0;margin:0}
.realisation.sombre{background:var(--anthracite);color:var(--craie)}
.realisation.claire{background:var(--craie)}
.realisation.sombre .realisation__faits dd{color:var(--craie)}

/* 16/09 : menu toujours écrit en entier au-dessus de 860 px ; resserré entre 861 et 1200 px */
@media(min-width:861px) and (max-width:1200px){
  .entete{gap:1.2rem}
  .nav{gap:1rem}
  .nav a{font-size:.75rem;letter-spacing:.02em}
  .nav a.nav__etude{padding:.6rem .85rem!important}
  .entete__logo img{height:26px}
}
@media(min-width:861px) and (max-width:980px){
  .nav{gap:.75rem}
  .nav a{font-size:.7rem;letter-spacing:.01em}
}

/* 16/09 : projection 3D condensée dans le configurateur (largeur du configurateur inchangée) */
.projection__seul{display:flex;justify-content:flex-end}
.projection__seul .config{width:min(100%,50.4rem)}
.config__barre{flex-wrap:wrap;padding:1rem 1.1rem;gap:.5rem 1.4rem}
.config__titre{margin:0;font-weight:300;font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.01em;color:var(--craie)}
.config__atouts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}
.config__atouts li{position:relative;padding-left:.85rem;font-size:.75rem;letter-spacing:.03em;color:var(--second)}
.config__atouts li::before{content:"";position:absolute;left:0;top:50%;width:.4rem;height:1px;background:var(--laiton)}
@media(max-width:1150px){.projection__seul{justify-content:center}}

/* 16/09 (soir) — entrée des cartes Options : de loin, lentement, puis fondu du fond */
.anim-options .opt-peigne .peigne > .montant-photo{opacity:0;transform:translateY(var(--depart,-75vh))}
.anim-options .opt-peigne .peigne > .montant-photo.est-entree{opacity:1;transform:none;
  transition:transform 3.4s cubic-bezier(.16,1,.3,1) var(--delai,0s),opacity 1.8s ease-out var(--delai,0s)}
.opt-peigne .peigne.en-entree{overflow:visible}
.anim-options .opt-hero__img{opacity:0;animation:none;transform:scale(1.04)}
.anim-options.fond-visible .opt-hero__img{opacity:1;transform:none;
  transition:opacity 2.8s ease,transform 4s cubic-bezier(.16,1,.3,1)}
/* configurateur centré, largeur inchangée */
.projection__seul{justify-content:center}

/* =========================================================================
   17/09 — Options : la vitrine (carrousel plein écran)
   ========================================================================= */
.vitrine{position:relative;height:100svh;min-height:40rem;overflow:hidden;background:#111214;color:var(--craie);isolation:isolate}
.vitrine__entete{position:absolute;z-index:4;top:calc(var(--entete) + clamp(1.2rem,3vh,2.4rem));left:var(--bord);right:var(--bord);
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;pointer-events:none}
.vitrine__h1{margin:0;font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,246,244,.78)}
.vitrine__chapeau{margin:0;font-size:.8125rem;color:rgba(247,246,244,.62);max-width:34ch;text-align:right}
.vitrine__scenes{position:absolute;inset:0}
.vitrine__scene{position:absolute;inset:0;visibility:hidden;z-index:1}
.vitrine__scene.est-active{visibility:visible;z-index:2}
.vitrine__scene.est-sortante{visibility:visible;z-index:1}
.vitrine__medias{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 0)}
.galerie{position:absolute;inset:0;transition:opacity 1.2s ease}
.galerie.est-cachee{opacity:0;pointer-events:none}
.galerie__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.1);transition:opacity 1.8s ease,transform 9s cubic-bezier(.2,.6,.2,1)}
.galerie__img.est-active{opacity:1;transform:scale(1)}
.vitrine__voile{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(12,13,15,.86) 0%,rgba(12,13,15,.62) 30%,rgba(12,13,15,.1) 58%,rgba(12,13,15,0) 70%),
    linear-gradient(0deg,rgba(12,13,15,.82) 0%,rgba(12,13,15,0) 30%),
    linear-gradient(180deg,rgba(12,13,15,.55) 0%,rgba(12,13,15,0) 22%)}
.vitrine__texte{position:absolute;z-index:3;left:var(--bord);top:50%;transform:translateY(-54%);width:min(30rem,40vw)}
.vitrine__rang{margin:0 0 1.2rem;display:flex;align-items:baseline;gap:.5rem}
.vitrine__rang .chiffre{font-size:.95rem;color:var(--laiton)}
.vitrine__sur{font-size:.75rem;color:rgba(247,246,244,.5);letter-spacing:.06em}
.vitrine__titre{margin:0;font-weight:300;font-size:clamp(2.2rem,4.2vw,4.1rem);line-height:1.02;letter-spacing:-.028em;overflow:hidden;padding-bottom:.08em}
.vitrine__titre span{display:inline-block}
.vitrine__desc{margin:1.2rem 0 0;color:rgba(247,246,244,.8);font-size:1rem;line-height:1.6;max-width:40ch}
.vitrine__texte .specs{margin-top:1.5rem;max-width:26rem;border-top-color:rgba(247,246,244,.18)}
.vitrine__texte .specs div{border-bottom-color:rgba(247,246,244,.14)}
.vitrine__texte .specs dt{color:rgba(247,246,244,.55)}
.vitrine__texte .specs dd{color:var(--craie)}
.vitrine__texte .carte__plus{margin-top:1.4rem;color:var(--craie)}
.vitrine__jeux{margin-top:1.3rem}
.vitrine .variantes button{color:rgba(247,246,244,.62);border-color:rgba(247,246,244,.22)}
.vitrine .variantes button[aria-pressed="true"]{color:var(--craie);border-color:var(--craie)}
/* entrée d'une scène : rideau sur l'image, texte qui monte */
.vitrine__scene.est-active .vitrine__medias{animation:vitrine-rideau 1.5s cubic-bezier(.77,0,.18,1) both}
.vitrine__scene.est-active .galerie__img.est-active{animation:vitrine-descend 1.8s cubic-bezier(.16,1,.3,1) both}
@keyframes vitrine-descend{from{transform:translateY(-4%) scale(1.06)}to{transform:none}}
@keyframes vitrine-rideau{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.vitrine__scene.est-active .vitrine__rang,.vitrine__scene.est-active .vitrine__desc,
.vitrine__scene.est-active .vitrine__jeux,.vitrine__scene.est-active .specs,.vitrine__scene.est-active .carte__plus{
  animation:vitrine-monte 1.3s cubic-bezier(.16,1,.3,1) both}
.vitrine__scene.est-active .vitrine__titre span{animation:vitrine-ligne 1.4s cubic-bezier(.16,1,.3,1) .55s both}
.vitrine__scene.est-active .vitrine__rang{animation-delay:.45s}
.vitrine__scene.est-active .vitrine__desc{animation-delay:.8s}
.vitrine__scene.est-active .vitrine__jeux{animation-delay:.9s}
.vitrine__scene.est-active .specs{animation-delay:1s}
.vitrine__scene.est-active .carte__plus{animation-delay:1.15s}
.vitrine__scene.est-sortante .vitrine__texte{opacity:0;transition:opacity .5s ease}
@keyframes vitrine-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vitrine-ligne{from{transform:translateY(105%)}to{transform:none}}
/* commandes */
.vitrine__commandes{position:absolute;z-index:4;left:var(--bord);right:var(--bord);bottom:clamp(1.4rem,4vh,2.6rem);
  display:flex;align-items:flex-end;gap:2rem}
.vitrine__nav{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem}
.vitrine__onglet{background:none;border:0;padding:0 0 .2rem;color:rgba(247,246,244,.5);text-align:left;cursor:pointer;
  font:inherit;display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:baseline;transition:color .4s}
.vitrine__onglet:hover,.vitrine__onglet.est-active{color:var(--craie)}
.vitrine__num{font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--laiton)}
.vitrine__nom{font-weight:500;font-size:.78rem;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vitrine__jauge{grid-column:1/-1;position:relative;height:1px;margin-top:.8rem;background:rgba(247,246,244,.22);overflow:hidden}
.vitrine__jauge i{position:absolute;inset:0;background:var(--craie);transform:scaleX(0);transform-origin:left}
.vitrine__onglet.est-vue .vitrine__jauge i{transform:scaleX(1)}
.vitrine__onglet.est-active .vitrine__jauge i{animation:vitrine-jauge var(--duree,8s) linear both}
.vitrine[data-pause] .vitrine__onglet.est-active .vitrine__jauge i{animation-play-state:paused}
@keyframes vitrine-jauge{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vitrine__fleches{display:flex;gap:.5rem}
.vitrine__fleche{width:3rem;height:3rem;display:grid;place-items:center;cursor:pointer;
  background:rgba(12,13,15,.3);border:1px solid rgba(247,246,244,.3);color:var(--craie);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s,color .3s,border-color .3s}
.vitrine__fleche:hover{background:var(--craie);color:var(--anthracite);border-color:var(--craie)}
.vitrine__fleche span{width:.6rem;height:.6rem;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateX(2px) rotate(45deg)}
.vitrine__fleche--suiv span{transform:translateX(-2px) rotate(-135deg)}
/* entrée de la page */
@media(prefers-reduced-motion:no-preference){
  .vitrine__entete{animation:vitrine-monte 1.4s cubic-bezier(.16,1,.3,1) .2s both}
  .vitrine__onglet{animation:vitrine-monte 1.2s cubic-bezier(.16,1,.3,1) both}
  .vitrine__onglet:nth-child(1){animation-delay:1.1s}.vitrine__onglet:nth-child(2){animation-delay:1.2s}
  .vitrine__onglet:nth-child(3){animation-delay:1.3s}.vitrine__onglet:nth-child(4){animation-delay:1.4s}
  .vitrine__onglet:nth-child(5){animation-delay:1.5s}
  .vitrine__fleches{animation:vitrine-monte 1.2s cubic-bezier(.16,1,.3,1) 1.6s both}
}
@media(prefers-reduced-motion:reduce){
  .vitrine *{animation:none!important}
  .galerie__img{transition:opacity .3s}
}
.vitrine__note{margin:0;padding:1.1rem var(--bord);background:var(--craie)}
/* mobile : image en haut, texte en dessous */
@media(max-width:900px){
  .vitrine{height:auto;min-height:0;padding-top:var(--entete)}
  .vitrine__entete{position:static;display:block;padding:1.4rem var(--bord) 1rem}
  .vitrine__chapeau{text-align:left;margin-top:.5rem}
  .vitrine__scenes{position:relative;height:auto}
  .vitrine__scene{position:relative;display:none}
  .vitrine__scene.est-active{display:block}
  .vitrine__scene.est-sortante{display:none}
  .vitrine__medias{position:relative;height:58svh}
  .vitrine__voile{display:none}
  .vitrine__texte{position:static;transform:none;width:auto;padding:1.6rem var(--bord) 1rem}
  .vitrine__commandes{position:static;padding:1rem var(--bord) 1.8rem;flex-direction:column;align-items:stretch;gap:1.2rem}
  .vitrine__nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
  .vitrine__nom{display:none}
  .vitrine__fleches{justify-content:flex-end}
}
/* bloc « de série » : images au lieu des vidéos */
.compris__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111214}
.vitrine{--encre:var(--craie);--second:#A9ACB0;--filet:rgba(247,246,244,.18);--chiffre:var(--laiton)}

/* 17/09 — Réalisations : ouverture sur photo */
.real-hero .opt-hero__contenu{padding-bottom:clamp(3rem,8vh,5.5rem)}
.real-hero .opt-hero__titre{max-width:14ch}

/* =========================================================================
   17/09 — Le film de présentation (accueil) : carton de générique
   ========================================================================= */
.film{background:var(--anthracite);color:var(--craie);
  --encre:var(--craie);--second:#A9ACB0;--filet:rgba(247,246,244,.16);--chiffre:var(--laiton);
  padding:clamp(3.6rem,7vw,6rem) var(--bord) clamp(3.2rem,6vw,5rem)}
.film__dedans{display:block;max-width:880px}
/* commandes natives seulement une fois le film lancé */
.film__lecteur video::-webkit-media-controls{opacity:0;transition:opacity .3s}
.film__lecteur.est-lance video::-webkit-media-controls{opacity:1}
.film__entete{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem 4rem;
  flex-wrap:wrap;padding-bottom:1.5rem;border-bottom:1px solid var(--filet)}
.film__titre{margin:0;color:var(--craie);max-width:18ch;font-size:clamp(1.55rem,2.5vw,2.3rem)}
.film__meta{margin:0;display:flex;align-items:baseline;gap:1rem;color:var(--second);font-size:.8125rem;letter-spacing:.02em}
.film__meta .chiffre{font-size:1.05rem;color:var(--laiton)}
.film__cadre{margin:clamp(2.2rem,4vw,3.4rem) 0 0}
.film__lecteur{position:relative;background:#0E0F11;border:1px solid var(--filet);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.film__lecteur video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:filter .7s ease}
.film__lecteur:hover video{filter:brightness(1.06)}
.film__lecteur.est-lance:hover video{filter:none}
.film__lecteur::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,13,15,.38) 0%,rgba(12,13,15,0) 34%,rgba(12,13,15,.5) 100%);
  transition:opacity .6s ease}
.film__lecteur.est-lance::after{opacity:0}
.film__lire{position:absolute;left:1.2rem;bottom:1.2rem;cursor:pointer;
  padding:.7rem 1.2rem;background:rgba(29,31,34,.62);color:var(--craie);
  border:1px solid var(--craie);font:inherit;font-weight:500;font-size:.75rem;letter-spacing:.05em;
  transition:background .4s ease,color .4s ease}
.film__lire:hover,.film__lire:focus-visible{background:var(--craie);color:var(--anthracite)}
.film__lecteur.est-lance .film__lire{opacity:0;pointer-events:none;transition:opacity .35s ease}
.film__legende{margin-top:1.1rem;max-width:62ch;color:var(--second)}
@media(max-width:700px){
  .film__entete{align-items:flex-start;flex-direction:column;gap:1rem}
  .film__lire{padding:.85rem 1.2rem;gap:.7rem}
  .film__lire-mot{font-size:.72rem;letter-spacing:.1em}
}

/* =========================================================================
   17/09 (soir) — Panneaux à lames : deux vantaux à l'échelle, que l'on glisse
   ========================================================================= */
.montage{--encre:var(--craie);--second:#A9ACB0;--filet:rgba(247,246,244,.16);--chiffre:var(--laiton)}
.montage__grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.montage__scene{margin:0}
.montage__scene svg{width:100%;height:auto;display:block;background:#141618;border:1px solid var(--filet);touch-action:pan-y}
.montage__poteau{fill:#23262A;stroke:rgba(247,246,244,.22);stroke-width:1}
.montage__rail{fill:rgba(176,141,87,.5)}
.montage__sol{stroke:rgba(247,246,244,.2);stroke-width:1}
.montage__fil{stroke:rgba(247,246,244,.3);stroke-width:1;fill:none}
.montage__etiquette{fill:rgba(247,246,244,.5);font-family:Poppins,system-ui,sans-serif;font-size:13px;
  font-weight:500;letter-spacing:1.4px;text-transform:uppercase}
.montage__etiquette--fin{text-anchor:end}
.montage__cadre{fill:none;stroke:rgba(247,246,244,.42);stroke-width:1.5}
.montage__chariot{fill:#2C3034;stroke:rgba(247,246,244,.3);stroke-width:1}
.montage__vantail{cursor:grab}
.montage__vantail:active{cursor:grabbing}
.montage__vantail--arriere .montage__cadre{stroke:rgba(247,246,244,.3)}
.montage__vantail--arriere .montage__lame-p{opacity:.78;filter:saturate(.9) brightness(.82)}
.montage__vantail--arriere .montage__chariot{opacity:.8}
.montage__vantail:focus{outline:none}
.montage__vantail:focus-visible .montage__cadre{stroke:var(--laiton);stroke-width:2}
.montage__lame-p{fill:url(#lame-alu);stroke:rgba(247,246,244,.18);stroke-width:1;
  transform-box:fill-box;transform-origin:center;transition:transform 1.05s cubic-bezier(.16,1,.3,1),filter 1.05s ease}
/* entrée : le cadre se trace, les lames se posent une à une */
.montage__lame{opacity:0;transform:translateY(-110px)}
.montage .montage__cadre{stroke-dasharray:1170;stroke-dashoffset:1170}
.montage.est-vu .montage__cadre{animation:montage-trait 1.3s cubic-bezier(.16,1,.3,1) both}
.montage.est-vu .montage__lame{animation:montage-pose .95s cubic-bezier(.22,1.06,.36,1) both;
  animation-delay:calc(.5s + var(--i) * .1s)}
.montage.est-vu .montage__chariot{animation:montage-fondu .8s ease both 1.9s}
.montage.est-vu .montage__cote{animation:montage-fondu 1s ease both 2.2s}
@keyframes montage-trait{from{stroke-dashoffset:1170}to{stroke-dashoffset:0}}
@keyframes montage-pose{0%{opacity:0;transform:translateY(-110px)}
  62%{opacity:1;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes montage-fondu{from{opacity:0}to{opacity:1}}
@keyframes montage-note{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.montage__cote{opacity:0}
.montage__notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.montage__notes li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--filet);opacity:0;transform:translateY(16px)}
.montage__notes .chiffre{font-size:.8125rem;color:var(--laiton)}
.montage__notes p{margin:0;color:var(--second);font-size:.95rem;line-height:1.55}
.montage.est-vu .montage__notes li{animation:montage-note 1.1s cubic-bezier(.16,1,.3,1) both}
.montage.est-vu .montage__notes li:nth-child(1){animation-delay:.8s}
.montage.est-vu .montage__notes li:nth-child(2){animation-delay:1.3s}
.montage.est-vu .montage__notes li:nth-child(3){animation-delay:1.8s}
.montage.est-vu .montage__notes li:nth-child(4){animation-delay:2.3s}
.montage__commandes{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.8rem}
.montage__bouton{background:none;color:var(--craie);border:1px solid rgba(247,246,244,.4);
  font:inherit;font-weight:500;font-size:.75rem;letter-spacing:.05em;padding:.8rem 1.3rem;cursor:pointer;
  transition:background .4s,color .4s,border-color .4s}
.montage__bouton:hover,.montage__bouton[aria-pressed="true"]{background:var(--craie);color:var(--anthracite);border-color:var(--craie)}
/* 20/09 — six vantaux, une clé, des lames qui pivotent */
.montage{--ouv:0}
.montage__vantail-corps{transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.montage.est-pris .montage__vantail-corps{transition:none}
.montage__vantail{cursor:not-allowed}
.montage.est-deverrouille .montage__vantail{cursor:grab}
.montage.est-deverrouille .montage__vantail:active{cursor:grabbing}
.montage__lame-p{transform:scaleY(calc(1 - .82 * var(--ouv)));
  filter:brightness(calc(1 + .35 * var(--ouv)))}
.montage__serrure{transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.montage__boitier{fill:#2C3034;stroke:var(--laiton);stroke-width:1.4}
.montage__anse{fill:none;stroke:var(--laiton);stroke-width:3;stroke-linecap:round;
  transform-box:fill-box;transform-origin:100% 100%;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.montage__barillet{fill:var(--laiton)}
.montage.est-deverrouille .montage__anse{transform:rotate(38deg) translateY(-3px)}
.montage.est-ouvert .montage__serrure{opacity:0;transform:translate(450px,262px) scale(.7)}
.montage.est-refuse .montage__serrure{animation:montage-refus .45s ease}
@keyframes montage-refus{0%,100%{transform:translate(450px,262px)}
  25%{transform:translate(443px,262px)}75%{transform:translate(457px,262px)}}
.montage__bouton[disabled]{opacity:.4;cursor:not-allowed}
.montage__bouton[disabled]:hover{background:none;color:var(--craie);border-color:rgba(247,246,244,.4)}
.montage__reglage{display:grid;grid-template-columns:1fr auto;gap:.5rem .6rem;align-items:baseline;margin-top:1.6rem}
.montage__reglage output{font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--craie)}
.montage__reglage input{grid-column:1/-1;width:100%;margin:0;accent-color:var(--laiton);cursor:pointer}
.montage__fixe{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--filet)}
.montage__fixe p{margin:.7rem 0 0;color:var(--second);font-size:.95rem;line-height:1.6}
@media(max-width:900px){.montage__grille{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .montage .montage__lame{opacity:1;transform:none;animation:none}
  .montage .montage__cadre{stroke-dashoffset:0;animation:none}
  .montage .montage__cote,.montage .montage__chariot{opacity:1;animation:none}
  .montage .montage__notes li{opacity:1;transform:none;animation:none}
  .montage .montage__lame-p{transition:none}
}

/* =========================================================================
   17/09 (soir) — Nos standards : la planche (vue éclatée à repères)
   ========================================================================= */
.planche{padding:var(--normal) var(--bord);background:var(--craie)}
.planche__entete{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;
  flex-wrap:wrap;padding-bottom:1.2rem;border-bottom:1px solid var(--filet)}
.planche__meta{margin:0;display:flex;gap:1.6rem;align-items:baseline;font-size:.75rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--second)}
.planche__meta .chiffre{font-size:.9rem;letter-spacing:.04em;text-transform:none}
.planche__corps{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:start;margin-top:clamp(1.5rem,3vw,2.5rem)}
.planche__dessin{position:relative;margin:0;border:1px solid var(--filet);background:#FBFAF8}
.planche__dessin svg{width:100%;height:auto;display:block}
.planche__cartouche{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:space-between;
  border-top:1px solid var(--filet);padding:.7rem 1rem;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--second)}
.pl__dessus{fill:#E9E6E1;stroke:var(--anthracite);stroke-width:1.2}
.pl__devant{fill:#D7D3CC;stroke:var(--anthracite);stroke-width:1.2}
.pl__cote{fill:#BDB8B0;stroke:var(--anthracite);stroke-width:1.2}
.pl__piece{transition:opacity .45s ease}
.pl__piece--fantome path{fill:none;stroke-dasharray:5 5;stroke-width:1.1}
.pl__axe{stroke:var(--anthracite);stroke-opacity:.35;stroke-width:1;stroke-dasharray:3 6;fill:none}
.pl__sol{stroke:var(--anthracite);stroke-opacity:.25;stroke-width:1.5;fill:none}
.pl__fil{stroke:var(--anthracite);stroke-opacity:.5;stroke-width:1;fill:none}
.pl__point{fill:var(--anthracite)}
.pl__num{font-family:Poppins,system-ui,sans-serif;font-size:19px;font-weight:500;fill:var(--anthracite);
  dominant-baseline:middle}
.pl__repere{transition:opacity .45s ease}
/* mise en avant d'une pièce */
.planche.est-vise .pl__piece,.planche.est-vise .pl__repere{opacity:.22}
.planche.est-vise .pl__piece.est-actif,.planche.est-vise .pl__repere.est-actif{opacity:1}
.planche.est-vise .pl__piece.est-actif .pl__dessus{fill:#F2EDE4}
.planche.est-vise .pl__piece.est-actif path{stroke:var(--laiton);stroke-width:1.6}
.planche__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.pl__item{border-bottom:1px solid var(--filet)}
.pl__bouton{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:baseline;width:100%;
  background:none;border:0;padding:1.05rem 0;font:inherit;text-align:left;cursor:pointer;color:var(--encre)}
.pl__bouton .chiffre{font-size:.8125rem;color:var(--laiton)}
.pl__nom{font-weight:500;font-size:1rem}
.pl__texte{margin:0;padding:0 0 1.1rem 3.6rem;max-width:46ch;color:var(--second);font-size:.95rem;
  line-height:1.55;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease,padding .4s ease}
.pl__item.est-ouvert .pl__texte{max-height:12rem;opacity:1}
.pl__item.est-ouvert .pl__nom{color:var(--encre)}
.pl__item:not(.est-ouvert) .pl__texte{padding-bottom:0}
@media(max-width:900px){.planche__corps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pl__piece,.pl__repere,.pl__texte{transition:none}}

/* 17/09 (soir) — bandes photo pleine largeur (Nos standards) */
.bande{position:relative;isolation:isolate}
.bande img{display:block;width:100%;height:clamp(16rem,38vw,30rem);object-fit:cover;object-position:50% 46%}
.bande__voile{position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,13,15,.7) 0%,rgba(12,13,15,0) 46%)}
.bande__mot{position:absolute;left:var(--bord);right:var(--bord);bottom:clamp(1.4rem,3vw,2.4rem);margin:0;
  color:var(--craie);font-weight:300;font-size:clamp(1.05rem,1.8vw,1.5rem);max-width:34ch;letter-spacing:-.01em}
.bandeau-photo{position:relative;isolation:isolate;color:var(--craie);
  --encre:var(--craie);--second:#B6B9BD;--filet:rgba(247,246,244,.18)}
.bandeau-photo img{display:block;width:100%;height:clamp(24rem,46vw,38rem);object-fit:cover;object-position:62% 50%}
.bandeau-photo__voile{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,13,15,.92) 0%,rgba(12,13,15,.75) 34%,rgba(12,13,15,.12) 62%,rgba(12,13,15,0) 78%)}
.bandeau-photo__texte{position:absolute;left:var(--bord);top:50%;transform:translateY(-50%);width:min(34rem,44vw)}
.bandeau-photo__texte .texte{color:var(--second)}
@media(max-width:780px){
  .bandeau-photo img{height:clamp(22rem,70vw,30rem);object-position:60% 50%}
  /* le voile couvrait le texte (élément positionné au-dessus) : il ne sert plus ici */
  .bandeau-photo__voile{display:none}
  .bandeau-photo__texte{position:relative;left:auto;top:auto;z-index:2;transform:none;width:auto;
    padding:1.7rem var(--bord) 2.1rem;background:var(--anthracite)}
}
.papiers__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.papiers__liste li{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--filet)}

/* =========================================================================
   18/09 — Nos standards : couverture dessinée (planche d'atelier)
   ========================================================================= */
.couverture{position:relative;isolation:isolate;overflow:hidden;background:var(--craie);
  min-height:min(74svh,44rem);display:flex;align-items:flex-end;
  padding:calc(var(--entete) + clamp(3rem,7vh,6rem)) 0 clamp(2.6rem,6vh,4.5rem);
  border-bottom:1px solid var(--filet)}
.couverture__trame{position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(29,31,34,.055) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(29,31,34,.055) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(29,31,34,.03) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(90deg,rgba(29,31,34,.03) 0 1px,transparent 1px 16px);
  -webkit-mask-image:radial-gradient(120% 90% at 78% 40%,#000 25%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 78% 40%,#000 25%,transparent 78%)}
.couverture__dessin{position:absolute;right:1.5%;top:47%;transform:translateY(-50%);
  width:min(60%,54rem);height:auto;overflow:visible;
  /* 20/09 : le hero est désormais le schéma coté. Le fond blanc du dessin
     se fond dans la craie grâce au mélange multiplicatif. */
  mix-blend-mode:multiply}
@media(prefers-reduced-motion:no-preference){
  img.couverture__dessin{animation:cv-parait 1.2s ease both .35s}
}
/* 20/09 — Nos standards : le schéma coté prend la place du fil de fer.
   Deux colonnes, le dessin ne passe plus derrière le texte. */
.couverture--schema{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);
  align-items:center;gap:clamp(1.5rem,4vw,3.5rem);min-height:min(66svh,40rem);
  padding:calc(var(--entete) + clamp(2rem,5vh,4rem)) var(--bord) clamp(2rem,5vh,3.5rem)}
.couverture--schema .couverture__texte{position:relative;max-width:34rem;padding:0}
.couverture--schema .couverture__dessin{position:relative;right:auto;top:auto;transform:none;
  width:100%;max-width:none;justify-self:end}
.couverture--schema .couverture__voile{display:none}
.couverture--schema .couverture__trame{
  -webkit-mask-image:radial-gradient(120% 90% at 30% 50%,#000 20%,transparent 80%);
  mask-image:radial-gradient(120% 90% at 30% 50%,#000 20%,transparent 80%)}
@media(max-width:860px){
  .couverture--schema{display:block;padding:calc(var(--entete) + 2.2rem) var(--bord) 1.6rem}
  .couverture--schema .couverture__dessin{margin-top:1.4rem}
}
.couverture__voile{position:absolute;inset:0;
  background:linear-gradient(90deg,var(--craie) 0%,rgba(247,246,244,.94) 26%,rgba(247,246,244,.55) 44%,rgba(247,246,244,0) 62%)}
.couverture__texte{position:relative;z-index:2;max-width:46rem;padding:0 var(--bord)}
.couverture__sur{margin:0 0 1.1rem;font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--second)}
.couverture__texte .lead{margin-top:1.4rem;max-width:46ch}
.couverture__cartouche{position:absolute;right:0;bottom:0;z-index:2;display:flex;gap:1.6rem;
  padding:.65rem var(--bord);border-top:1px solid var(--filet);border-left:1px solid var(--filet);
  background:rgba(247,246,244,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--second)}
.cv__trait{fill:none;stroke:rgba(29,31,34,.38);stroke-width:1.1}
.cv__trait--fort{stroke:rgba(29,31,34,.62);stroke-width:1.5}
.cv__lame{stroke:rgba(29,31,34,.3)}
.cv__cote{fill:none;stroke:rgba(29,31,34,.3);stroke-width:1;stroke-dasharray:none}
.cv__fil{fill:none;stroke:rgba(176,141,87,.75);stroke-width:1.1}
.cv__etiquette{font-family:Poppins,system-ui,sans-serif;font-size:15px;font-weight:500;
  letter-spacing:1.3px;text-transform:uppercase;fill:rgba(29,31,34,.45)}
.cv__etiquette--laiton{fill:var(--laiton)}
@media(prefers-reduced-motion:no-preference){
  .couverture__dessin path{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
    animation:cv-trace 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.25s + var(--o) * .055s)}
  .couverture__dessin text{opacity:0;animation:cv-parait .9s ease both 2.2s}
  .cv__scene{animation:cv-derive 26s ease-in-out infinite alternate}
  .couverture__texte > *{animation:cv-monte 1.1s cubic-bezier(.16,1,.3,1) both}
  .couverture__sur{animation-delay:.1s}
  .couverture__texte h1{animation-delay:.28s}
  .couverture__texte .lead{animation-delay:.46s}
}
@keyframes cv-trace{to{stroke-dashoffset:0}}
@keyframes cv-parait{to{opacity:1}}
@keyframes cv-monte{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes cv-derive{from{transform:translate(0,0)}to{transform:translate(-14px,-8px)}}
@media(max-width:860px){
  /* le dessin passe sous le texte, en pleine largeur : il doit se voir sur téléphone */
  .couverture{display:block;min-height:0;padding:calc(var(--entete) + 2.2rem) 0 0}
  .couverture__texte{position:relative;padding-bottom:1.8rem}
  .couverture__dessin{position:relative;right:auto;top:auto;transform:none;
    width:100%;margin:0 0 1.6rem;opacity:1}
  .couverture__voile{display:none}
  .couverture__trame{-webkit-mask-image:radial-gradient(150% 70% at 50% 78%,#000 20%,transparent 82%);
    mask-image:radial-gradient(150% 70% at 50% 78%,#000 20%,transparent 82%)}
  .couverture__cartouche{position:relative;display:flex;justify-content:space-between;gap:.8rem;
    border-left:0;background:none;font-size:.62rem;padding:.6rem var(--bord)}
}

/* 18/09 — noms des modèles dans les tableaux */
.th-code{display:block;font-weight:300;font-size:.7rem;letter-spacing:.08em;color:var(--second);margin-top:.15rem}
/* 18/09 — le film de l'accueil : deux colonnes, vidéo plus petite */
.film__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.8rem,4vw,3.6rem);align-items:center}
.film__dedans{max-width:1180px}
.film__entete{display:block;border-bottom:0;padding-bottom:0}
.film__sur{margin:0 0 1rem;font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--second)}
.film__titre{font-size:clamp(1.5rem,2.3vw,2.1rem);max-width:20ch}
.film__meta{margin-top:1.4rem;justify-content:flex-start}
.film__cadre{margin:0}
.film__legende{margin-top:.9rem;font-size:.8rem}
@media(max-width:820px){.film__grille{grid-template-columns:1fr;gap:1.6rem}}
/* 18/09 — l'accueil : respiration sur la photo d'ouverture */
@media(prefers-reduced-motion:no-preference){
  .hero__img{animation:hero-image 2.6s cubic-bezier(.16,1,.3,1) both,hero-respire 34s ease-in-out 2.6s infinite alternate}
}
@keyframes hero-respire{from{transform:scale(1)}to{transform:scale(1.045)}}

/* 18/09 — noms des modèles dans les tableaux */
.th-code{display:block;font-weight:300;font-size:.7rem;letter-spacing:.08em;color:var(--second);margin-top:.15rem}
/* 18/09 — le film de l'accueil : deux colonnes, vidéo plus petite */
.film__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.8rem,4vw,3.6rem);align-items:center}
.film__dedans{max-width:1180px}
.film__entete{display:block;border-bottom:0;padding-bottom:0}
.film__sur{margin:0 0 1rem;font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--second)}
.film__titre{font-size:clamp(1.5rem,2.3vw,2.1rem);max-width:20ch}
.film__meta{margin-top:1.4rem;justify-content:flex-start}
.film__cadre{margin:0}
.film__legende{margin-top:.9rem;font-size:.8rem}
@media(max-width:820px){.film__grille{grid-template-columns:1fr;gap:1.6rem}}
/* 18/09 — l'accueil : respiration sur la photo d'ouverture */
@media(prefers-reduced-motion:no-preference){
  .hero__img{animation:hero-image 2.6s cubic-bezier(.16,1,.3,1) both,hero-respire 34s ease-in-out 2.6s infinite alternate}
}
@keyframes hero-respire{from{transform:scale(1)}to{transform:scale(1.045)}}

/* =========================================================================
   18/09 — L'entreprise : la page équipe
   ========================================================================= */
.equipe-couv{position:relative;isolation:isolate;min-height:min(78svh,46rem);display:flex;align-items:flex-end;
  color:var(--craie);background:var(--anthracite)}
.equipe-couv__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.equipe-couv__voile{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,13,15,.92) 0%,rgba(12,13,15,.5) 46%,rgba(12,13,15,.14) 70%,rgba(12,13,15,.6) 100%)}
.equipe-couv__texte{position:relative;z-index:2;padding:0 var(--bord) clamp(2.6rem,6vh,4.6rem);max-width:56rem}
.equipe-couv__sur{margin:0 0 1.1rem;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,246,244,.7)}
.equipe-couv h1{color:var(--craie);max-width:20ch}
.equipe-couv .lead{color:rgba(247,246,244,.82);margin-top:1.4rem;max-width:52ch}
@media(prefers-reduced-motion:no-preference){
  .equipe-couv__img{animation:hero-image 2.4s cubic-bezier(.16,1,.3,1) both}
  .equipe-couv__texte > *{animation:cv-monte 1.1s cubic-bezier(.16,1,.3,1) both}
  .equipe-couv__sur{animation-delay:.15s}.equipe-couv h1{animation-delay:.32s}.equipe-couv .lead{animation-delay:.5s}
}
.equipe{padding-top:clamp(3.4rem,7vw,6rem)}
.equipier{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.8rem,4vw,4.5rem);
  align-items:center;padding:clamp(2.6rem,5vw,4.5rem) 0;border-top:1px solid var(--filet)}
.equipier:first-child{border-top:0;padding-top:0}
.equipier:nth-child(even) .equipier__photo{order:2}
.equipier__photo{margin:0;overflow:hidden;background:var(--anthracite)}
.equipier__photo img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:4/5;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.equipier--paysage .equipier__photo img{aspect-ratio:4/5;object-position:46% 30%}
.equipier:hover .equipier__photo img{transform:scale(1.02)}
.equipier__rang{display:flex;align-items:baseline;gap:.9rem;margin:0 0 .8rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--second)}
.equipier__rang .chiffre{color:var(--laiton);letter-spacing:.04em}
.equipier__nom{margin:0}
.equipier__texte{margin:1.1rem 0 0;color:var(--second);font-size:1rem;line-height:1.65;max-width:52ch}
.equipe-bande img{height:clamp(18rem,42vw,32rem);object-position:50% 58%}
@media(max-width:820px){
  .equipier{grid-template-columns:1fr;gap:1.4rem;padding:2.2rem 0}
  .equipier:nth-child(even) .equipier__photo{order:0}
  .equipier__photo img{aspect-ratio:4/5}
}
/* apparition douce des portraits */
.js-equipe .equipier{opacity:0;transform:translateY(28px)}
.js-equipe .equipier.est-vu{opacity:1;transform:none;
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.js-equipe .equipier{opacity:1;transform:none}}

/* =========================================================================
   19/09 (soir) — L'entreprise : couverture, puis l'équipe en cercles
   ========================================================================= */
.equipe-couv{position:relative;isolation:isolate;min-height:min(78svh,46rem);display:flex;align-items:flex-end;
  color:var(--craie);background:var(--anthracite)}
.equipe-couv__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.equipe-couv__voile{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,13,15,.92) 0%,rgba(12,13,15,.5) 46%,rgba(12,13,15,.14) 70%,rgba(12,13,15,.6) 100%)}
.equipe-couv__texte{position:relative;z-index:2;padding:0 var(--bord) clamp(2.6rem,6vh,4.6rem);max-width:56rem}
.equipe-couv__sur{margin:0 0 1.1rem;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,246,244,.7)}
.equipe-couv h1{color:var(--craie);max-width:20ch}
.equipe-couv .lead{color:rgba(247,246,244,.82);margin-top:1.4rem;max-width:52ch}
@media(prefers-reduced-motion:no-preference){
  .equipe-couv__img{animation:hero-image 2.4s cubic-bezier(.16,1,.3,1) both}
  .equipe-couv__texte > *{animation:cv-monte 1.1s cubic-bezier(.16,1,.3,1) both}
  .equipe-couv__sur{animation-delay:.15s}.equipe-couv h1{animation-delay:.32s}.equipe-couv .lead{animation-delay:.5s}
}

/* --- l'équipe : fond sombre, lumière chaude qui dérive, cercles en couleur --- */
.equipe{position:relative;isolation:isolate;overflow:hidden;background:#141618;color:var(--craie);
  --encre:var(--craie);--second:#A9ACB0;--filet:rgba(247,246,244,.14);
  padding:clamp(4rem,9vw,7.5rem) var(--bord)}
.equipe__lueur{position:absolute;inset:-28%;pointer-events:none;
  background:radial-gradient(38% 42% at 24% 24%,rgba(176,141,87,.30),transparent 62%),
             radial-gradient(34% 40% at 76% 70%,rgba(110,145,180,.16),transparent 66%),
             radial-gradient(28% 34% at 58% 108%,rgba(176,141,87,.14),transparent 70%)}
@media(prefers-reduced-motion:no-preference){.equipe__lueur{animation:lueur 24s ease-in-out infinite alternate}}
@keyframes lueur{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.14)}}
.equipe__entete{position:relative;z-index:1;max-width:44rem}
.equipe__sur{margin:0 0 1rem;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,246,244,.6)}
.equipe__entete h2{color:var(--craie);margin:0}
.equipe__chapeau{margin:1.1rem 0 0;color:var(--second);font-size:1rem;max-width:46ch}
.equipe__liste{position:relative;z-index:1;list-style:none;margin:clamp(2.6rem,6vw,4.5rem) 0 0;padding:0}
/* le fil qui relie les visages */
.equipe__liste::before{content:"";position:absolute;left:calc(clamp(7rem,12vw,11rem) / 2);top:1.5rem;bottom:3rem;
  width:1px;background:linear-gradient(180deg,rgba(176,141,87,.5),rgba(247,246,244,.12) 60%,transparent)}
.equipier{position:relative;display:grid;grid-template-columns:clamp(7rem,12vw,11rem) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:start;padding:clamp(1.8rem,3.4vw,3rem) 0}
.equipier + .equipier{border-top:1px solid var(--filet)}
.equipier__rond{position:relative;margin:0;width:clamp(7rem,12vw,11rem);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:var(--anthracite);box-shadow:0 0 0 1px rgba(247,246,244,.18),0 18px 40px -22px rgba(0,0,0,.9)}
.equipier__rond::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(176,141,87,.35);opacity:0;transition:opacity .6s ease}
.equipier:hover .equipier__rond::after,.equipier:focus-within .equipier__rond::after{opacity:1}
.equipier__rond img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.equipier:hover .equipier__rond img{transform:scale(1.06)}
.equipier__mots{padding-top:.2rem}
.equipier__rang{display:flex;align-items:baseline;gap:.9rem;margin:0 0 .5rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--second)}
.equipier__rang .chiffre{color:var(--laiton);letter-spacing:.04em}
.equipier__nom{margin:0;font-weight:300;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.025em;color:var(--craie)}
.equipier__texte{margin:1rem 0 0;color:var(--second);font-size:1rem;line-height:1.68;max-width:60ch}
.equipier__citation{margin:1.4rem 0 0;padding-left:1.2rem;border-left:1px solid var(--laiton);
  font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:300;line-height:1.4;letter-spacing:-.01em;color:var(--craie);max-width:38ch}
@media(max-width:680px){
  .equipe__liste::before{display:none}
  .equipier{grid-template-columns:1fr;gap:1.1rem}
  .equipier__rond{width:5.5rem}
}
/* apparition */
.js-equipe .equipier{opacity:0;transform:translateY(26px)}
.js-equipe .equipier.est-vu{opacity:1;transform:none;
  transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--retard,0s),transform 1.1s cubic-bezier(.16,1,.3,1) var(--retard,0s)}
@media(prefers-reduced-motion:reduce){.js-equipe .equipier{opacity:1;transform:none}}


/* 19/09 — le grain interactif, en fond de la section équipe */
.equipe__grain{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.equipe{cursor:crosshair}
.equipe__entete,.equipe__liste{position:relative;z-index:1}
.equipe__lueur{z-index:0;mix-blend-mode:screen;opacity:.85}

/* =========================================================================
   19/09 — Le diptyque des deux modèles, et l'entrée lettre par lettre
   ========================================================================= */
.dipt{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--filet)}
.dipt__volet{position:relative;display:block;overflow:hidden;background:var(--anthracite);
  min-height:clamp(22rem,42vw,34rem);text-decoration:none;color:var(--craie);isolation:isolate}
.dipt--couverture .dipt__volet{min-height:clamp(20rem,36vw,30rem)}
.dipt__image{position:absolute;inset:0;display:block;overflow:hidden}
.dipt__image img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.8s cubic-bezier(.16,1,.3,1),filter 1.2s ease;filter:saturate(.92)}
.dipt__volet:hover .dipt__image img,.dipt__volet:focus-visible .dipt__image img{transform:scale(1);filter:saturate(1.02)}
.dipt__voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(12,13,15,.9) 0%,rgba(12,13,15,.45) 40%,rgba(12,13,15,.06) 74%);
  transition:opacity .8s ease}
.dipt__volet:hover .dipt__voile{opacity:.82}
.dipt__mots{position:absolute;left:0;right:0;bottom:0;z-index:1;display:block;
  padding:clamp(1.4rem,3vw,2.6rem) clamp(1.4rem,3vw,2.6rem) clamp(1.5rem,3vw,2.4rem)}
.dipt__code{display:block;font-size:.78rem;font-weight:500;letter-spacing:.22em;color:#D9B981;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
.dipt__titre{display:block;margin-top:.55rem;font-weight:300;font-size:clamp(1.5rem,2.6vw,2.3rem);
  letter-spacing:-.025em;line-height:1.05}
.dipt__ligne{display:block;margin-top:.5rem;font-size:.85rem;color:rgba(247,246,244,.72)}
.dipt__lien{position:relative;display:inline-block;margin-top:1.1rem;padding-bottom:.35rem;
  font-size:.8125rem;font-weight:500;letter-spacing:.04em}
.dipt__lien::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:2.2rem;background:var(--laiton);
  transition:width .7s cubic-bezier(.16,1,.3,1)}
.dipt__volet:hover .dipt__lien::after,.dipt__volet:focus-visible .dipt__lien::after{width:100%}
@media(max-width:760px){.dipt{grid-template-columns:1fr}.dipt__volet{min-height:18rem}}

/* la couverture de la page Pergolas */
.perg-hero{min-height:min(70svh,40rem)}
.perg-hero .opt-hero__img{object-position:50% 58%}
.couv-duo__texte{position:relative;z-index:2;max-width:58rem;
  padding:0 var(--bord) clamp(2.4rem,5vh,4rem);color:var(--craie)}
.couv-duo__sur{margin:0 0 1.1rem;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,246,244,.72)}
.couv-duo__texte h1{color:var(--craie)}
.couv-duo__texte .lead{margin-top:1.4rem;max-width:52ch;color:rgba(247,246,244,.84)}
.dipt--bande{border-top:1px solid var(--filet)}

/* entrée du titre, lettre par lettre */
[data-lettres] .mot{display:inline-block;white-space:nowrap}
[data-lettres] .lettre{display:inline-block;will-change:transform,opacity}
.js-lettres [data-lettres]{animation:none!important;opacity:1!important;transform:none!important;position:relative}
.js-lettres [data-lettres] .lettre{opacity:0;transform:translateY(0.5em);filter:blur(5px)}
.js-lettres [data-lettres].est-lu .lettre{opacity:1;transform:none;filter:blur(0);
  transition:opacity .42s cubic-bezier(.16,1,.3,1) var(--d,0s),transform .5s cubic-bezier(.16,1,.3,1) var(--d,0s),filter .42s ease var(--d,0s)}
/* un filet de laiton balaie sous le titre, une fois les lettres posées */
.js-lettres [data-lettres]::after{content:"";position:absolute;left:0;bottom:-.35em;height:1px;width:0;
  background:linear-gradient(90deg,var(--laiton),rgba(176,141,87,0));opacity:0}
.js-lettres [data-lettres].est-lu::after{width:min(100%,22rem);opacity:1;
  transition:width 1.4s cubic-bezier(.16,1,.3,1) var(--fin,1.2s),opacity .6s ease var(--fin,1.2s)}
@media(prefers-reduced-motion:reduce){.js-lettres [data-lettres] .lettre{opacity:1;transform:none;filter:none}}

/* =========================================================================
   19/09 — Les fiches modèles (page Pergolas)
   ========================================================================= */
.modele{padding:clamp(3.6rem,8vw,7rem) var(--bord)}
.modele.sombre{background:var(--anthracite)}
.modele__entete{max-width:46rem;padding-bottom:clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--filet)}
.modele__rang{display:flex;align-items:baseline;gap:.9rem;margin:0 0 .9rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--second)}
.modele__rang .chiffre{color:var(--laiton);letter-spacing:.04em}
.modele__titre{margin:0;font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-.03em}
.modele__lead{margin:1.2rem 0 0;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:300;line-height:1.45;
  color:var(--second);max-width:44ch}
.modele__grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(2rem,4vw,3.4rem)}
.modele__photo{margin:0;overflow:hidden;background:var(--anthracite)}
.modele__photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transform:scale(1.02);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.modele__photo:hover img{transform:scale(1)}
.modele__chiffre{margin:0;display:flex;flex-direction:column;gap:.25rem}
.modele__chiffre .chiffre{font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.01em}
.modele__chiffre .label{color:var(--second)}
.modele__texte{margin:1.3rem 0 0;color:var(--second);font-size:1rem;line-height:1.68;max-width:52ch}
.modele__faits{margin:1.8rem 0 0;border-top:1px solid var(--filet)}
.modele__faits div{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:1.2rem;
  padding:.85rem 0;border-bottom:1px solid var(--filet)}
.modele__faits dt{margin:0;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--second)}
.modele__faits dd{margin:0;font-weight:500;font-size:.95rem}
.modele .actions{margin-top:1.8rem}
@media(max-width:900px){.modele__grille{grid-template-columns:1fr;gap:1.6rem}}

/* 19/09 — la couverture Pergolas entre comme celle de L'entreprise */
@media(prefers-reduced-motion:no-preference){
  .perg-hero .opt-hero__img{animation:hero-image 2.4s cubic-bezier(.16,1,.3,1) both}
  .perg-hero .couv-duo__texte > *{animation:cv-monte 1.1s cubic-bezier(.16,1,.3,1) both}
  .perg-hero .couv-duo__sur{animation-delay:.15s}
  .perg-hero .couv-duo__texte h1{animation-delay:.32s}
  .perg-hero .couv-duo__texte .lead{animation-delay:.5s}
}


/* =========================================================================
   20/09 — L'équipe : la ligne « Son rôle », et le chapitre « Nos valeurs »
   ========================================================================= */
.equipier__mission{margin:1.3rem 0 0;padding-left:1rem;border-left:2px solid var(--laiton);
  color:var(--craie);font-size:1rem;line-height:1.6;max-width:56ch}
.equipier__mission span{display:block;margin-bottom:.3rem;font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--laiton)}
.valeurs__liste{list-style:none;margin:clamp(2.2rem,4vw,3.4rem) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:clamp(1.6rem,3vw,3rem)}
.valeurs__liste li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding-top:1.1rem;border-top:1px solid var(--filet)}
.valeurs__liste .chiffre{font-size:.8125rem;color:var(--laiton)}
.valeurs__liste h3{margin:0}
.valeurs__liste p{margin:.7rem 0 0;color:var(--second);font-size:.95rem;line-height:1.6}


/* =========================================================================
   20/09 — Les lames en coupe : quatre positions dessinées
   ========================================================================= */
.cl__suite{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:clamp(1.2rem,2.4vw,2.2rem)}
.cl__case{margin:0}
.cl__case h3{margin:1rem 0 0}
.cl__case p{margin:.5rem 0 0;color:var(--second);font-size:.9rem;line-height:1.55}
.cl__cadre{margin:0;border:1px solid var(--filet);background:rgba(29,31,34,.025)}
.cl__dessin{display:block;width:100%;height:auto}
.cl__poutre{fill:rgba(29,31,34,.14);stroke:rgba(29,31,34,.4);stroke-width:1}
.cl__sol{stroke:rgba(29,31,34,.22);stroke-width:1;fill:none}
.cl__lame{fill:rgba(29,31,34,.82);stroke:rgba(29,31,34,.9);stroke-width:.6}
.cl__lumiere{fill:rgba(176,141,87,.55)}
.sombre .cl__cadre{background:rgba(247,246,244,.04)}
.sombre .cl__poutre{fill:rgba(247,246,244,.12);stroke:rgba(247,246,244,.38)}
.sombre .cl__sol{stroke:rgba(247,246,244,.22)}
.sombre .cl__lame{fill:#3C4147;stroke:rgba(247,246,244,.35)}
@media(prefers-reduced-motion:no-preference){
  .cl__case{opacity:0;animation:montage-note 1s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i) * .12s)}
  .cl__lumiere{opacity:0;animation:cv-parait .8s ease both calc(.5s + var(--i) * .12s)}
}


/* =========================================================================
   20/09 — L'aluminium en coupe, et les teintes montrées sur le poteau
   ========================================================================= */
.alu__coupe{margin:0}
.alu__coupe img{display:block;width:100%;max-width:34rem;height:auto;margin:0 auto}
.tq__suite{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:clamp(1.2rem,3vw,3rem);max-width:62rem}
.tq__case{margin:0;text-align:center}
.tq__poteau{display:block;width:100%;max-width:9rem;height:auto;margin:0 auto}
.tq__ombre{fill:rgba(0,0,0,.16)}
.sombre .tq__ombre{fill:rgba(0,0,0,.35)}
.tq__ral{margin:1rem 0 0;font-size:.8125rem;font-weight:500;letter-spacing:.06em;color:var(--encre)}
.tq__nom{margin:.25rem 0 0;font-size:.85rem;color:var(--second)}
@media(prefers-reduced-motion:no-preference){
  .tq__case{opacity:0;animation:montage-note 1s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i) * .14s)}
}