/* ==========================================================================
   Béton ciré escalier — Nuancier
   Quatrieme page de la famille (cuisine, salon, salle de bain, escalier) :
   meme moteur de teinte — le hex de la teinte affichee pilote tous les fonds,
   les encres basculent en clair sur les teintes quasi noires — mais une
   maquette a elle :
     · le hero : le nom de la teinte et son texte a gauche, un EVENTAIL de
       photos a droite qui part en perspective, et sous lui le bandeau des
       teintes, qui sert de selecteur ;
     · la section 02 : trois photos d'escalier alignees.
   Cinq teintes depuis que le dossier B2 de Zinc a ete complete.
   Charte : Aeonik (site) + Mistrully (manuscrite).
   ========================================================================== */

@font-face{font-family:Aeonik;src:url('typo/aeonik-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Aeonik;src:url('typo/aeonik-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Mistrully;src:url('typo/mistrully.ttf') format('truetype');font-weight:400;font-display:swap}

/* Proprietes enregistrees : sans @property, un custom property change d'un
   coup. Declarees ici, elles s'interpolent — les fonds se fondent d'une teinte
   a l'autre au lieu de sauter. */
@property --teinte       {syntax:'<color>'; inherits:true;initial-value:#EFEBE5}
@property --teinte-fond  {syntax:'<color>'; inherits:true;initial-value:#F0ECE7}
@property --teinte-clair {syntax:'<color>'; inherits:true;initial-value:#F0ECE7}
@property --teinte-bloc  {syntax:'<color>'; inherits:true;initial-value:#EFEDE9}
@property --sur-fond     {syntax:'<color>'; inherits:true;initial-value:#3A3835}
@property --sur-fond-doux{syntax:'<color>'; inherits:true;initial-value:#55524E}
@property --fondu        {syntax:'<number>';inherits:true;initial-value:.62}

html{transition:
  --teinte .55s ease,--teinte-fond .55s ease,--teinte-clair .55s ease,
  --teinte-bloc .55s ease,
  --sur-fond .55s ease,--sur-fond-doux .55s ease,--fondu .55s ease}

:root{
  --papier:#FFFFFF;
  --encre:#1D1D1B;
  --encre-douce:#3A3835;
  --gris-texte:#55524E;
  --gris-leger:#8A8681;

  /* teinte courante et fonds derives — ecrits par le JS */
  --teinte:#EFEBE5;
  --teinte-fond:#F0ECE7;
  --teinte-clair:#F0ECE7;
  --teinte-bloc:#EFEDE9;   /* bloc d'intro des accords */
  --sur-fond:#3A3835;
  --sur-fond-doux:#55524E;
  --fondu:.62;

  --max:1440px;
  --marge:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gout:max(var(--marge), (100% - var(--max)) / 2);

  /* hauteur de l'eventail : tout s'en deduit, les photos etant placees en
     pourcentage de cette boite (voir POSTES dans le HTML) */
  --eventail-h:clamp(380px,42vw,560px);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:Aeonik,sans-serif;-webkit-font-smoothing:antialiased;
}
a{color:var(--encre);text-decoration:none}
a:hover{color:var(--gris-texte)}
img{display:block;max-width:100%}
::selection{background:var(--teinte)}
/* l'eventail fait volontairement deborder sa derniere photo : on clippe au
   niveau de la page, jamais de barre de defilement horizontale */
.page{overflow-x:clip}

.manuscrite{font-family:Mistrully,cursive;font-weight:400}
.h2{margin:0;font-size:clamp(34px,4.2vw,52px);line-height:1.04;font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:var(--encre-douce)}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--encre);transition:background .25s,color .25s,opacity .25s;
}
.btn--plein{background:var(--encre);color:#fff}
.btn--filet{background:transparent}

/* ==========================================================================
   Header du site — fondu dans la teinte
   ========================================================================== */
.header,.header.scrolled{
  background:var(--teinte-fond);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:0;box-shadow:none;
}
.header .nav-menu a,.header .nav-brand .logo{color:var(--sur-fond)}
.header .configurateur-btn{background:var(--sur-fond);color:var(--teinte-fond)}
.header .configurateur-btn:hover{background:var(--sur-fond);opacity:.85}
/* !important : header.html embarque une regle !important sur le burger */
.header .burger-menu span{background:var(--sur-fond)!important}
:root[data-mode="sombre"] .header .logo-img{filter:invert(1) brightness(1.7)}

/* ==========================================================================
   01 · Hero — texte a gauche, eventail de photos a droite
   ========================================================================== */
.hero{position:relative;background:var(--teinte-fond);padding:104px var(--gout) 84px}
/* Fondu clair : la teinte reste un aplat, seule cette nappe de blanc creuse
   la profondeur. Elle passe sous le contenu (z-index). */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 70% at 40% 46%,
    rgba(255,255,255,var(--fondu)) 0%,
    rgba(255,255,255,calc(var(--fondu) * .48)) 42%,
    rgba(255,255,255,0) 76%);
}
.hero__grille{position:relative;z-index:1;display:grid;grid-template-columns:.82fr 1.18fr;column-gap:clamp(36px,4.6vw,76px);align-items:start}

/* Le H1 porte le mot-cle de la page, il reste discret : c'est le nom de la
   teinte, juste en dessous, qui fait le titre visuel. */
.hero__h1{margin:0 0 6px;font-size:15px;font-weight:400;letter-spacing:.06em;color:var(--sur-fond-doux)}
/* blanc pose sur la teinte, comme sur la maquette. L'ombre tres diffuse le
   decolle des fonds les plus pales sans se voir comme une ombre. */
.hero__titre{
  margin:0;font-weight:700;font-style:italic;
  font-size:clamp(44px,5.4vw,84px);line-height:1.02;letter-spacing:-.015em;
  color:#fff;text-shadow:0 2px 26px rgba(29,29,27,.26);
}

/* la nature morte detouree, sous le titre */
.ensemble{margin:clamp(20px,2.4vw,34px) 0 0;height:clamp(120px,13vw,190px)}
.ensemble img{
  height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(29,29,27,.20));
}

/* le plafond de largeur vaut pour le TEXTE seul : pose sur le bloc entier, il
   repliait les deux boutons l'un sous l'autre */
.hero__bloc{margin-top:clamp(26px,3vw,44px)}
.hero__accroche{margin:0 0 18px;font-size:clamp(18px,1.7vw,25px);font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--sur-fond)}
.hero__desc{margin:0;max-width:46ch;font-size:15px;line-height:1.9;color:var(--sur-fond-doux);text-wrap:pretty}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero .btn{border-color:var(--sur-fond);color:var(--sur-fond)}
.hero .btn--plein{background:var(--sur-fond);color:var(--teinte-fond)}
.hero .btn--plein:hover{opacity:.85}
.hero .btn--filet:hover{background:var(--sur-fond);color:var(--teinte-fond)}

/* ---------- l'eventail ----------
   Une photo par teinte. Elles sont placees en absolu par le JS selon leur
   distance a la teinte affichee (voir POSTES) : la teinte choisie occupe la
   grande vignette de gauche, les autres filent vers la droite en retrecissant
   et en s'enfoncant, ce qui donne la perspective de la maquette.
   Tout est en POURCENTAGE de la boite : rien a recalculer au redimensionnement. */
.eventail{position:relative;height:var(--eventail-h)}
.eventail__vue{
  position:absolute;display:block;margin:0;padding:0;border:0;overflow:hidden;
  background:none;cursor:pointer;
  box-shadow:0 16px 40px rgba(29,29,27,.14);
  transition:left .6s var(--ease),width .6s var(--ease),
             top .6s var(--ease),height .6s var(--ease),
             opacity .45s ease,box-shadow .6s var(--ease);
}
.eventail__vue img{width:100%;height:100%;object-fit:cover}
/* la grande, c'est la teinte affichee : un nouvel appui l'agrandit (voir la
   loupe plus bas) */
.eventail__vue.actif{cursor:zoom-in;box-shadow:0 32px 66px rgba(29,29,27,.20)}
.eventail__vue{-webkit-tap-highlight-color:transparent}
.eventail__vue:not(.actif):hover{box-shadow:0 22px 46px rgba(29,29,27,.26)}
.eventail__vue:focus-visible{outline:2px solid var(--sur-fond);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.eventail__vue{transition:opacity .2s ease}}

/* ---------- le bandeau de teintes, sous l'eventail ----------
   Le selecteur : un echantillon reel du nuancier par teinte. La teinte
   choisie s'etire, les autres se resserrent — pas de marqueur rapporte. */
.bandeau{display:flex;gap:2px;margin-top:clamp(22px,2.6vw,38px);height:clamp(40px,4vw,54px)}
.bandeau__teinte{
  position:relative;flex:1;display:block;min-width:0;padding:0;border:0;cursor:pointer;
  background-size:cover;background-position:center;
  transition:flex-grow .5s var(--ease),opacity .3s ease;opacity:.78;
  /* Les cinq teintes de la page sont toutes tres pales : sans ce filet, les
     pastilles se fondent les unes dans les autres et dans le fond du hero.
     En ombre INTERNE plutot qu'en bordure : aucun effet sur la largeur, donc
     rien ne saute quand la pastille active s'etire. */
  box-shadow:inset 0 0 0 1px rgba(29,29,27,.22);
}
.bandeau__teinte:hover{opacity:.95}
.bandeau__teinte{-webkit-tap-highlight-color:transparent}
.bandeau__teinte[aria-current="true"]{flex-grow:2.4;opacity:1}
.bandeau__teinte:focus-visible{outline:2px solid var(--sur-fond);outline-offset:3px;z-index:2}
/* Le rond de selection. Il est dessine DANS la pastille active plutot que
   pose par-dessus le bandeau : il suit donc l'etirement tout seul, sans une
   ligne de JS ni aucun calcul de position. Double cercle — un filet sombre
   double d'un liseré blanc — pour rester lisible sur les teintes pales comme
   sur les plus soutenues. */
.bandeau__teinte[aria-current="true"]::after{
  content:"";position:absolute;left:50%;top:50%;
  width:clamp(16px,1.6vw,20px);height:clamp(16px,1.6vw,20px);
  margin:calc(clamp(16px,1.6vw,20px) / -2) 0 0 calc(clamp(16px,1.6vw,20px) / -2);
  border-radius:50%;border:1.5px solid rgba(29,29,27,.62);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75);
}

/* ---------- la loupe ----------
   Un nouvel appui sur la grande photo de l'eventail l'ouvre en plein ecran.
   <dialog> natif : Echap, le focus et le fond sont geres par le navigateur.
   Un appui n'importe ou la referme — c'est le geste attendu au doigt. */
.loupe{
  position:fixed;inset:0;margin:0;padding:0;border:0;background:transparent;
  width:100%;height:100%;max-width:none;max-height:none;
  overflow:hidden;cursor:zoom-out;
}
.loupe[open]{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:loupe-entree .28s ease;
}
.loupe::backdrop{background:rgba(22,21,20,.9)}
.loupe__img{
  display:block;width:auto;height:auto;
  max-width:calc(100vw - 32px);max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);
  object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.loupe__legende{
  margin:16px 16px 0;text-align:center;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,239,234,.82);
}
.loupe__fermer{
  position:absolute;top:max(12px, env(safe-area-inset-top));right:12px;
  width:48px;height:48px;border:0;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(242,239,234,.94);color:#1D1D1B;font:300 30px/48px Aeonik,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.loupe__fermer:focus-visible{outline:2px solid #F2EFEA;outline-offset:3px}
/* tant que la loupe est ouverte, la page ne defile pas dessous */
html.loupe-ouverte{overflow:hidden}
@keyframes loupe-entree{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.loupe[open]{animation:none}}

/* ==========================================================================
   02 · Collage — trois photos d'escalier qui se chevauchent
   ========================================================================== */
.collage{background:var(--teinte-clair);padding:clamp(76px,8vw,116px) var(--gout)}
/* Trois cadres ALIGNES, de meme taille, sur une seule ligne. La premiere
   version les faisait descendre en diagonale en se chevauchant : le bloc
   partait de travers. Les photos d'escalier sont presque toutes en portrait,
   d'ou le format 3/4 — elles y tiennent sans etre recoupees en paysage. */
.collage__cluster{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.7vw,28px);max-width:1180px;margin:0 auto;
}
.collage__cluster figure{
  margin:0;overflow:hidden;aspect-ratio:3 / 4;
  box-shadow:0 18px 44px rgba(29,29,27,.10);
}
.collage__cluster img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   03 · Accords de teintes
   ========================================================================== */
.accords{background:var(--papier);padding:0 var(--gout) clamp(76px,8vw,104px)}
.accords__grille{display:grid;grid-template-columns:minmax(300px,1fr) 1.9fr;gap:56px;align-items:start}
/* Bloc d'intro, comme sur la page salle de bain : un voile de la teinte
   choisie (--teinte-bloc, plus pale que le collage, plus teinte que le blanc)
   qui remonte sur le collage et fait la couture entre la teinte et le blanc.
   Le padding haut de la section vit donc sur le bloc et sur la liste, sinon
   le retrait negatif n'aurait rien a mordre. */
.accords__intro{
  position:relative;z-index:2;
  background:var(--teinte-bloc);
  padding:52px 46px 44px;margin-top:clamp(-92px,-7vw,-56px);
}
.accords__note{margin:28px 0 0;max-width:44ch;font-size:15px;line-height:1.85;color:var(--gris-texte);text-wrap:pretty}
.accords__note + .accords__note{margin-top:14px}
.accords__surtitre{margin:0;font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-douce)}
/* la manuscrite doit tenir sur UNE ligne — d'ou la colonne large */
.accords__titre{margin:0;font-size:clamp(40px,3.9vw,66px);line-height:1;color:var(--encre-douce)}
/* Colonnes a largeur FIXE, pas en 1fr : le dossier B3 donne DEUX accords par
   teinte, et deux pistes elastiques s'etireraient chacune sur la moitie de la
   section, avec un grand vide au milieu. */
.accords__liste{display:grid;grid-template-columns:repeat(auto-fit,210px);gap:34px 28px;padding-top:72px}

/* Un accord = trois carres qui se recouvrent, chacun portant son nom.
   L'image de l'echantillon est posee en ligne par le JS, la couleur moyenne
   servant de fond tant qu'elle n'est pas chargee ; la couleur du libelle est
   calculee selon la clarte du carre. */
.trio{position:relative;height:176px;min-width:196px}
.trio__carre{
  position:absolute;display:block;padding:8px 10px;
  font-size:11px;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;
  background-size:cover;background-position:center;
  box-shadow:0 6px 18px rgba(29,29,27,.10);
}
.trio__carre:nth-child(1){left:54px;top:0; width:106px;height:88px; z-index:1}
.trio__carre:nth-child(2){left:0;  top:48px;width:114px;height:102px;z-index:2}
.trio__carre:nth-child(3){left:88px;top:76px;width:108px;height:94px; z-index:3}

/* ==========================================================================
   04 · Dans la maison — la bande defilante
   Meme composant que les trois autres pages de la famille.
   ========================================================================== */
.maison{background:var(--teinte-clair);padding:clamp(76px,8vw,104px) 0 clamp(84px,9vw,124px)}
.maison__surtitre{margin:0 0 20px;padding:0 var(--gout);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--sur-fond-doux)}
.maison .h2{padding:0 var(--gout);color:var(--sur-fond)}

/* Hauteur commune, largeur libre : chaque photo garde ses proportions et la
   bande prend un rythme de planche-contact. Le JS pose l'aspect-ratio sur
   chaque figure pour que la bande ait sa largeur definitive avant meme que les
   images ne soient chargees. */
.bande{
  display:flex;gap:18px;align-items:flex-start;
  margin-top:clamp(48px,5vw,72px);padding:0 var(--gout) 22px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--sur-fond-doux) transparent;
  cursor:grab;   /* elle s'attrape a la souris — voir le glisser dans le JS */
  /* Pas d'aimant ici : c'est une planche-contact qu'on parcourt librement. Avec
     scroll-snap, un petit geste a la souris etait ramene a son point de depart
     et la bande avait l'air de refuser de bouger. Il ne revient qu'au doigt. */
}
.bande::-webkit-scrollbar{height:3px}
.bande::-webkit-scrollbar-track{background:transparent}
.bande::-webkit-scrollbar-thumb{background:var(--sur-fond-doux);opacity:.4}
.bande:focus-visible{outline:2px solid var(--sur-fond);outline-offset:-2px}
/* Deux etats du glisser a la souris, poses par le JS tant que le bouton reste
   enfonce : .glisse pour le curseur et la selection, .sans-aimant pour couper
   l'aimant et le defilement doux (utile sous 760 px). */
.bande.glisse{cursor:grabbing;-webkit-user-select:none;user-select:none}
.bande.sans-aimant{scroll-snap-type:none;scroll-behavior:auto}
/* scroll-snap-align ne joue que sous 760 px, la ou l'aimant est actif */
.bande figure{
  flex:none;margin:0;overflow:hidden;scroll-snap-align:center;
  height:clamp(300px,33vw,460px);aspect-ratio:3 / 4;
}
/* une photo sur trois se decale : la bande respire au lieu de faire un ruban */
.bande figure:nth-child(3n+2){margin-top:34px}
.bande img{width:100%;height:100%;object-fit:cover}
.maison__legendes{
  display:flex;justify-content:space-between;gap:24px;margin-top:6px;padding:0 var(--gout);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-fond-doux);
}
/* l'invite de defilement s'efface des que la bande a servi */
.maison__glisser{transition:opacity .4s ease}
.maison.a-defile .maison__glisser{opacity:0}

/* ==========================================================================
   Liens vers les autres pieces — .lien-carte vient de beton-cire-piece.css
   ========================================================================== */
.liens{background:var(--papier);padding:0 var(--gout) clamp(76px,8vw,104px)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  :root{--marge:32px;--eventail-h:clamp(340px,52vw,480px)}
  /* Tactile (tablette et telephone) : une seule colonne, et l'eventail
     REMONTE juste sous le titre, avec le bandeau de teintes : on choisit la
     teinte d'emblee, sans descendre sous le texte. .hero__texte s'efface
     (display:contents) pour que le titre, la nature morte et le texte se
     rangent dans la grille autour de l'eventail. */
  .hero__grille{grid-template-columns:minmax(0,1fr);row-gap:0}
  .hero__texte{display:contents}
  .hero .hero__h1{order:1}
  .hero__titre{order:2}
  .hero__col{order:3;margin-top:clamp(22px,3.4vw,36px)}
  .ensemble{order:4}
  .hero__bloc{order:5}
  /* le bandeau a la hauteur d'un doigt */
  .bandeau{height:clamp(52px,6vw,60px)}
  .accords__grille{grid-template-columns:1fr;gap:40px}
  .accords__liste{padding-top:0}
}
@media (max-width:760px){
  :root{--marge:22px}
  .hero{padding:88px var(--gout) 68px}
  .ensemble{height:clamp(104px,26vw,150px)}
  /* le collage s'empile : trois photos l'une sous l'autre, toujours alignees */
  .collage__cluster{grid-template-columns:1fr;gap:14px}
  .accords__liste{gap:28px 22px}
  .accords__intro{padding:38px 26px 32px}
  /* sur telephone la bande devient l'element principal de sa section : plus de
     decalage une photo sur trois, et un aimant ferme pour qu'on parcoure les
     photos une par une au pouce */
  .bande{gap:12px;scroll-snap-type:x mandatory}
  .bande figure{height:clamp(300px,74vw,400px)}
  .bande figure:nth-child(3n+2){margin-top:0}
  .maison__legendes{flex-direction:column;gap:6px}
}