/* ==========================================================================
   Béton ciré salle de bain — Nuancier (structure type Fermob)
   Charte : Aeonik (site) + Mistrully (manuscrite) — aucune couleur décorative,
   la seule couleur de la page est la teinte affichée.
   ========================================================================== */

@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 — le fond du hero et l'aplat de la carte
   moodboard 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{
  /* couleurs d'interface */
  /* blanc pur : la seule couleur de la page reste la teinte, et la section
     ambiance — desormais tres pale — s'en detache encore */
  --papier:#FFFFFF;
  --encre:#1D1D1B;
  --encre-douce:#3A3835;
  --gris-texte:#55524E;
  --gris-leger:#8A8681;

  /* teinte courante — écrite par le JS */
  --teinte:#EFEBE5;
  /* Fonds derives de la teinte, calcules par le JS (voir eclaircir()) pour
     garder une clarte constante quelle que soit la teinte — sinon le texte
     gris deviendrait illisible sur Nuit 264 ou Basalte 117.
       --teinte-fond  : le hero (et le header, qui s'y fond)
       --teinte-clair : la section ambiance juste en dessous, plus claire
       --teinte-bloc  : le bloc des accords, juste voile de teinte */
  --teinte-fond:#F0ECE7;
  --teinte-clair:#F0ECE7;
  --teinte-bloc:#EFEDE9;

  /* Encres posees sur ces fonds. Elles basculent en clair sur les teintes
     quasi noires — voir ENCRES dans le JS. */
  --sur-fond:#3A3835;
  --sur-fond-doux:#55524E;
  --fondu:.62;       /* opacite du fondu clair au centre du hero */

  /* grille */
  --max:1440px;      /* largeur max du CONTENU (les fonds, eux, sont pleine page) */
  --marge:56px;      /* marge mini a gauche/droite sur petit ecran */
  --ease:cubic-bezier(.16,1,.3,1);

  /* Gouttiere pleine largeur : les sections occupent toute la page, mais leur
     contenu reste centre et plafonne a --max. Remplace le padding lateral. */
  --gout:max(var(--marge), (100% - var(--max)) / 2);
}

*,*::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)}

.page{overflow-x:clip}

/* ---------- utilitaires typo ---------- */
.surtitre{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-leger)}
.manuscrite{font-family:Mistrully,cursive;font-weight:400}
.h2{margin:0;font-size:52px;line-height:1.02;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;
}
.btn--plein{background:var(--encre);color:#fff}
.btn--plein:hover{background:var(--encre-douce);color:#fff}
.btn--filet{background:transparent}
.btn--filet:hover{background:rgba(29,29,27,.06)}

/* ==========================================================================
   Header du site (header.html + styles.css) — fondu dans la teinte
   Le header est fixe et pose sur le hero : on lui donne le meme fond, sans
   filet ni ombre, pour qu'il n'y ait aucune couture. Tout ce qui est ecrit
   dessus suit --sur-fond, donc bascule en clair sur les teintes sombres.
   ========================================================================== */
.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
   en dessous de 1280px, sinon il resterait noir sur une teinte noire. */
.header .burger-menu span{background:var(--sur-fond)!important}
/* le logo est un PNG sombre : sur une teinte quasi noire on l'inverse */
:root[data-mode="sombre"] .header .logo-img{filter:invert(1) brightness(1.7)}

/* ==========================================================================
   01 · Hero teinte — frise verticale · texte · moodboard
   ========================================================================== */
.hero{position:relative;background:var(--teinte-fond);padding:92px var(--gout) 104px}

/* Fondu clair au centre : 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% 66% at 50% 46%,
    rgba(255,255,255,var(--fondu)) 0%,
    rgba(255,255,255,calc(var(--fondu) * .48)) 42%,
    rgba(255,255,255,0) 74%);
}

/* 3 colonnes : la frise (largeur fixe), le texte (colonne etroite, mesure
   courte volontairement) et le moodboard qui prend tout le reste. */
.hero__grille{
  position:relative;z-index:1;
  display:grid;grid-template-columns:20px minmax(340px,500px) 1fr;
  column-gap:52px;align-items:center;
}

/* ---------- frise verticale ----------
   Elle ne fait PAS toute la hauteur du hero : hauteur propre, centree sur la
   colonne. Le marqueur est un simple cercle ouvert qui glisse d'une pastille
   a l'autre — l'interieur laisse voir la teinte. */
.frise{position:relative;width:20px;height:clamp(340px,50vh,440px);align-self:center}
/* filet exterieur : le fond du hero etant tres proche de la teinte affichee,
   la pastille selectionnee s'y fondrait sans ce contour. */
.frise__piste{
  display:flex;flex-direction:column;width:100%;height:100%;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--sur-fond) 16%, transparent);
}
.frise__teinte{flex:1;display:block;width:100%;border:0;padding:0;cursor:pointer;background-size:cover;background-position:center}
.frise__teinte:focus-visible{outline:2px solid var(--sur-fond);outline-offset:3px;z-index:2}
/* Position du rond : le JS ne donne que le rang de la teinte (--rang) et le
   nombre de pastilles (--n). Les pastilles se partagent la longueur a parts
   egales, le centre de la n-ieme est donc a (rang + 1/2) / n ; on retire la
   moitie des 44 px du rond. Le calcul vit ici pour servir aux deux sens de la
   barre : verticale sur grand ecran, horizontale en tactile (voir Responsive). */
.frise__marqueur{
  position:absolute;left:50%;margin-left:-22px;width:44px;height:44px;
  top:calc((var(--rang,0) + .5) / var(--n,5) * 100% - 22px);
  border-radius:50%;border:2px solid #fff;background:transparent;
  box-shadow:0 0 0 1px rgba(29,29,27,.05);
  pointer-events:none;transition:top .45s var(--ease);
}

/* ---------- bloc texte ----------
   Tout suit --sur-fond / --sur-fond-doux : sur Carbone 118 le fond devient
   noir et ces deux encres passent en clair, sans autre regle a ecrire. */
.hero__kicker{margin:0 0 30px;font-size:16px;letter-spacing:.05em;color:var(--sur-fond-doux)}
/* la manuscrite deborde largement de son cadran em : la marge du kicker
   ci-dessus lui laisse la place de monter sans mordre sur la ligne. */
.hero__titre{margin:0;font-size:clamp(60px,6.6vw,104px);line-height:1;font-weight:400;color:var(--sur-fond)}
/* leger retrait sous le titre, comme sur la maquette */
.hero__bloc{padding-left:22px;margin-top:44px}
.hero__accroche{margin:0 0 24px;font-size:clamp(22px,2vw,30px);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:42px}

/* boutons du hero : le plein s'ecrit dans la couleur du fond, le filet
   s'inverse au survol — les deux suivent donc la teinte automatiquement. */
.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)}

/* ---------- moodboard (provisoire) ----------
   La carte mord volontairement sur la photo (photo 78 % + carte 236 px dans
   la meme colonne : ~80 px de recouvrement) et depasse en haut : c'est ce
   decalage qui donne l'effet moodboard plutot que deux blocs cote a cote.
   L'ombre portee de la carte fait le reste. */
.hero__moodboard{position:relative;height:clamp(400px,54vh,530px)}
.mood__photo{position:absolute;margin:0;left:0;bottom:0;width:78%;height:80%;overflow:hidden}
.mood__photo img{width:100%;height:100%;object-fit:cover}
.mood__carte{
  position:absolute;margin:0;right:0;top:0;width:236px;z-index:2;
  background:#fff;padding:10px 10px 0;box-shadow:0 18px 44px rgba(29,29,27,.14);
}
.mood__aplat{display:block;width:100%;height:196px;object-fit:cover}
.mood__carte figcaption{padding:14px 6px 18px}

/* La matiere de la teinte — poudre de craie, creme, soie, lin plie, pierre
   d'opale. Elle vient EN PLUS de la carte : posee sous elle, calee a droite,
   elle mord sur la grande photo. Detouree sur fond transparent, elle n'a ni
   cadre ni fond : c'est son ombre portee qui la decolle.
   Boite CARREE et `contain` : les matieres n'ont pas toutes les memes
   proportions (le lin est en portrait, l'opale en paysage) et la composition
   du hero ne doit pas bouger d'une teinte a l'autre. Calee en bas de sa boite,
   pour que chaque objet ait l'air de poser. */
/* La matiere n'est PAS dans le moodboard : elle est posee sur le hero lui-meme
   (position:relative), calee a droite sur la gouttiere du contenu et a cheval
   sur le bord bas de la section. Le decalage de -40 % de sa hauteur la laisse
   aux trois cinquiemes dans le hero et aux deux cinquiemes dans la section 02,
   dont elle vient coudre les deux fonds. Elle ne recouvre donc plus la photo.
   Boite CARREE et `contain` : les matieres n'ont pas toutes les memes
   proportions (le lin est en portrait, l'opale en paysage) et le hero ne doit
   pas bouger d'une teinte a l'autre. */
.mood__matiere{
  --m:clamp(140px,17vw,206px);
  position:absolute;margin:0;z-index:4;
  right:var(--gout);bottom:calc(var(--m) * -.45);
  width:var(--m);height:var(--m);
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
}
.mood__matiere img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 20px 34px rgba(29,29,27,.28));
}
.mood__nom{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre)}
.mood__note{display:block;margin-top:7px;font-size:12px;color:var(--gris-leger)}

/* ==========================================================================
   02 · Ambiance — images a gauche, texte a droite
   ========================================================================== */
/* fond de section : la teinte, nettement plus clair que le hero.
   Pas de padding haut : c'est le collage qui porte son propre retrait, sinon
   il ne pourrait pas deborder sur le hero. */
.ambiance{background:var(--teinte-clair);padding:0 var(--gout) 130px}
.ambiance__grille{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:start}

/* Deux photos qui se chevauchent, comme le collage editorial. Le groupe
   remonte de 72 px sur le hero — align-items:start pour que ce decalage ne
   depende pas de la hauteur du texte, qui change avec la teinte.
   z-index : le hero est positionne, il repeindrait par-dessus. */
.ambiance__images{position:relative;z-index:2;margin-top:-72px;height:520px}
.ambiance__images figure{position:absolute;margin:0;overflow:hidden}
.ambiance__images img{width:100%;height:100%;object-fit:cover}
.ambiance__a{left:0;top:0;width:62%;height:100%}
.ambiance__b{right:0;bottom:54px;width:44%;height:56%}

/* texte a droite — encres adaptatives, il est pose sur la teinte */
.ambiance__texte{max-width:46ch;padding-top:118px}
.ambiance__surtitre{margin:0 0 12px;font-size:44px;line-height:1;color:var(--gris-leger)}
.ambiance .h2{color:var(--sur-fond)}
.ambiance__texte p:not(.ambiance__surtitre){margin:26px 0 0;font-size:15px;line-height:1.9;color:var(--sur-fond-doux);text-wrap:pretty}

/* ==========================================================================
   03 · Accords de teintes
   ========================================================================== */
/* Section blanche, quelle que soit la teinte. Le padding haut vit sur le bloc
   d'intro et sur la liste, sinon le retrait negatif n'aurait rien a mordre. */
.accords{background:var(--papier);padding:0 var(--gout) 96px}
.accords__grille{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start}

/* Bloc d'intro : legerement teinte de la couleur choisie en haut — plus
   soutenu que la section ambiance, il se detache donc aussi bien sur elle
   que sur le blanc. Il remonte sur l'ambiance et fait la couture entre la
   teinte et le blanc.
   position + z-index : .ambiance n'est pas positionne, mais autant etre
   explicite — le bloc doit rester au-dessus de tout fond de section. */
.accords__intro{
  position:relative;z-index:2;
  background:var(--teinte-bloc);
  padding:52px 46px 44px;margin-top:-92px;
}
.accords__surtitre{margin:0 0 10px;font-size:44px;line-height:1;color:var(--gris-leger)}
/* le 2e paragraphe editorial, qui vivait dans l'ancienne section teinte */
.accords__note{margin:32px 0 0;max-width:44ch;font-size:15px;line-height:1.85;color:var(--gris-texte);text-wrap:pretty}
/* 2e note (le laboratoire) : meme bloc, simple retour de paragraphe */
.accords__note + .accords__note{margin-top:14px}
/* 170px = largeur reelle d'un trio reduit (pastille 2 : 82 + 88).
   Le padding haut decolle les trios du bord de la section ambiance, sinon
   ils s'y collent : le bloc d'intro, lui, remonte dessus volontairement. */
/* Colonnes a largeur FIXE, pas en 1fr : le dossier B3 donne DEUX accords par
   teinte, et deux pistes elastiques s'etiraient chacune sur la moitie de la
   section — les trios se retrouvaient a plus de 400 px l'un de l'autre, avec
   un grand vide au milieu. A 186 px ils restent cote a cote, et un troisieme
   accord viendrait simplement s'y ajouter. */
.accords__liste{display:grid;grid-template-columns:repeat(auto-fit,186px);gap:36px 32px;padding-top:72px}

/* Plus de libelle sous le trio : chaque nom est ecrit SUR sa pastille, la
   hauteur se limite donc a celle des pastilles (103 + 88). */
.trio{position:relative;height:191px;min-width:170px}
/* l'image de l'echantillon est posee en ligne par le JS (voir echantillon()),
   la couleur moyenne servant de fond tant qu'elle n'est pas chargee ; l'encre
   du nom aussi, calculee selon la clarte de la pastille. */
.trio__pastille{
  position:absolute;display:block;border-radius:3px;
  background-size:cover;background-position:center;
  padding:7px 9px;
  font-size:11px;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;
}
.trio__pastille:nth-child(1){left:0;top:0;width:102px;height:102px}
.trio__pastille:nth-child(2){left:82px;top:34px;width:88px;height:88px}
.trio__pastille:nth-child(3){left:41px;top:103px;width:88px;height:88px}

/* ==========================================================================
   04 · En situation
   ========================================================================== */
/* ==========================================================================
   04 · En situation  et  05 · Dans la maison
   Deux sections baties sur le MEME composant .bande : une planche-contact qui
   defile horizontalement. La premiere montre toutes les salles de bain de la
   teinte (B2), la seconde la teinte ailleurs (B4). Leur nombre varie beaucoup
   d'une teinte a l'autre — de 1 a 25 — d'ou le defilement plutot qu'une
   grille ; en dessous de 3 photos le JS masque la section.
   ========================================================================== */
.situation{padding:0 0 96px}
.maison{background:var(--teinte-clair);padding:96px 0 104px}
.bande__surtitre{
  margin:0 0 16px;padding:0 var(--gout);
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-leger);
}
.situation .h2,.maison .h2{padding:0 var(--gout);color:var(--encre-douce)}
.maison .h2{color:var(--sur-fond)}
.maison .bande__surtitre{color:var(--sur-fond-doux)}

/* 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:56px;padding:0 var(--gout) 22px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--gris-leger) 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,
     sous 760 px. */
}
.bande::-webkit-scrollbar{height:3px}
.bande::-webkit-scrollbar-track{background:transparent}
.bande::-webkit-scrollbar-thumb{background:var(--gris-leger);opacity:.4}
.bande:focus-visible{outline:2px solid var(--encre-douce);outline-offset:-2px}
/* Deux etats du glisser a la souris, poses par le JS le temps que le bouton
   reste enfonce :
     .glisse      — le curseur, et plus rien qui se selectionne dessous.
     .sans-aimant — coupe 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}
.bande__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(--gris-leger);
}
/* l'invite de defilement s'efface des que la bande a servi */
.bande__glisser{transition:opacity .4s ease}
.a-defile .bande__glisser{opacity:0}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  :root{--marge:32px}
  /* Tactile (tablette et telephone) : une seule colonne, dans l'ordre titre,
     moodboard, barre de teintes, texte. .hero__texte s'efface (display:contents)
     pour que ses enfants se rangent dans la grille autour du moodboard. La
     barre passe a l'horizontale, JUSTE SOUS les images, a la hauteur d'un
     doigt : on voit la teinte changer au-dessus du pouce. */
  .hero__grille{grid-template-columns:minmax(0,1fr);row-gap:0;align-items:start}
  .hero__texte{display:contents}
  .hero__kicker{order:1}
  .hero .hero__h1{order:2}
  .hero__titre{order:3}
  .hero__moodboard{order:4;margin-top:clamp(28px,5vw,48px)}
  .frise{order:5;width:100%;height:58px;margin-top:clamp(20px,3vw,28px);align-self:auto}
  .frise__piste{flex-direction:row}
  .frise__teinte{-webkit-tap-highlight-color:transparent}
  /* meme rond, qui glisse cette fois de gauche a droite ; un filet sombre en
     plus du blanc, pour rester visible sur les pastilles les plus pales */
  .frise__marqueur{
    top:50%;margin:-22px 0 0;
    left:calc((var(--rang,0) + .5) / var(--n,5) * 100% - 22px);
    box-shadow:0 0 0 1px rgba(29,29,27,.28),0 4px 12px rgba(29,29,27,.16);
    transition:left .45s var(--ease);
  }
  .hero__bloc{order:6;padding-left:0;margin-top:clamp(32px,5vw,44px)}
  .ambiance__grille{grid-template-columns:1fr;gap:52px}
  .ambiance__images{height:440px}
  .ambiance__texte{padding-top:0}
  .accords__grille{grid-template-columns:1fr;gap:48px}
  .accords__liste{padding-top:0}
  .h2{font-size:40px}
}
@media (max-width:720px){
  :root{--marge:24px}
  .hero{padding:60px var(--gout) 76px}
  .frise{height:56px}
  .hero__titre{font-size:52px}
  .hero__bloc{margin-top:32px}
  .hero__moodboard{height:380px}
  .mood__carte{width:170px;padding:8px 8px 0}
  .mood__aplat{height:132px}
  /* meme couture, en plus petit : la section 02 remonte deja de 40 px ici */
  .mood__matiere{--m:118px}
  .ambiance{padding:0 var(--gout) 110px}
  .ambiance__images{margin-top:-40px;height:auto;display:grid;grid-template-columns:1fr;gap:14px}
  .ambiance__images figure{position:static;width:100%;height:260px}
  .ambiance__surtitre{font-size:36px}
  .accords__intro{padding:38px 26px 32px;margin-top:-64px}
  /* 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{margin-top:36px;gap:12px;scroll-snap-type:x mandatory}
  .bande figure{height:clamp(300px,74vw,400px)}
  .bande figure:nth-child(3n+2){margin-top:0}
  .bande__legendes{flex-direction:column;gap:6px}
}