/* ==========================================================================
   Béton ciré salon — Nuancier
   Même moteur que beton-cire-salle-de-bain.css (teinte pilotee par le JS,
   fonds derives, encres adaptatives) mais la mise en page suit la maquette
   salon : bande photo pleine hauteur a droite du hero, titre blanc pose sur
   le moodboard, collage de trois photos, accords en carres, et une derniere
   section « dans la maison » dont la photo de gauche part au bord.
   Charte : Aeonik (site) + Mistrully (manuscrite) — aucune couleur
   decorative, la seule couleur de la page est la teinte affichee.
   ========================================================================== */

@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 de section 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 --teinte-collage{syntax:'<color>';inherits:true;initial-value:#FAF9F7}
@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,--teinte-collage .55s ease,
  --sur-fond .55s ease,--sur-fond-doux .55s ease,--fondu .55s ease}

:root{
  /* couleurs d'interface */
  --papier:#FFFFFF;
  --encre:#1D1D1B;
  --encre-douce:#3A3835;
  --gris-texte:#55524E;
  --gris-leger:#8A8681;

  /* teinte courante — ecrite 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.
       --teinte-fond  : le hero (et le header, qui s'y fond)
       --teinte-collage : le collage, teinte bien visible mais plus douce que le hero
       --teinte-clair : la section « dans la maison »
       --teinte-bloc  : le bloc d'intro des accords, voile de teinte */
  --teinte-fond:#F0ECE7;
  --teinte-collage:#FAF9F7;
  --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 sont pleine page) */
  --marge:56px;      /* marge mini a gauche/droite */
  --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);

  /* bande photo collee au bord droit du hero */
  --bande:clamp(180px,19vw,300px);
  /* colonne de la frise : largeur de la pastille SELECTIONNEE, qui est la
     plus large — sinon le hero se decalerait a chaque changement de teinte */
  --frise-l:80px;
}

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

/* le titre du hero deborde volontairement sa colonne : on clippe au niveau
   de la page pour qu'il ne cree jamais de scroll horizontal */
.page{overflow-x:clip}

/* ---------- utilitaires typo ---------- */
.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 (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 · titre · moodboard · bande photo
   Pas de padding lateral sur la section : la bande photo doit toucher le bord
   droit de la page. C'est la grille interieure qui porte ses marges.
   ========================================================================== */
.hero{position:relative;background:var(--teinte-fond);padding:64px 0 52px}

/* 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(58% 70% at 44% 48%,
    rgba(255,255,255,var(--fondu)) 0%,
    rgba(255,255,255,calc(var(--fondu) * .48)) 42%,
    rgba(255,255,255,0) 76%);
}

/* bande photo pleine hauteur, collee au bord droit */
.hero__bande{position:absolute;right:0;top:0;bottom:0;width:var(--bande);overflow:hidden;z-index:1}
.hero__bande img{width:100%;height:100%;object-fit:cover}

/* 3 colonnes : la frise, le bloc titre (colonne etroite, le titre deborde
   volontairement a droite) et le moodboard.
   La marge droite reserve la place de la bande photo. */
.hero__grille{
  position:relative;z-index:2;
  margin:0 calc(var(--bande) + 56px) 0 var(--gout);
  display:grid;
  grid-template-columns:var(--frise-l) minmax(220px,.72fr) minmax(320px,1.28fr);
  grid-template-rows:auto auto;
  column-gap:44px;
}

/* ---------- frise verticale ----------
   Pas de marqueur rapporte ici : c'est la pastille selectionnee elle-meme qui
   s'agrandit et prend une ombre, comme sur la maquette. Elle pousse donc ses
   voisines — d'ou la hauteur libre de la piste. */
/* hauteur fixe = 5 carres + le carre selectionne + ses marges : le hero ne
   bouge plus, qu'une pastille soit selectionnee ou non */
.frise{grid-column:1;grid-row:1;width:var(--frise-l);align-self:start;margin-top:6px;height:calc(5 * 46px + 66px + 5 * 6px + 20px)}
.frise__piste{display:flex;flex-direction:column;align-items:center;gap:6px}
.frise__teinte{
  display:block;width:56px;height:46px;border:0;padding:0;cursor:pointer;flex:none;
  background-size:cover;background-position:center;
  box-shadow:none;
  transition:width .45s var(--ease),height .45s var(--ease),box-shadow .45s var(--ease),margin .45s var(--ease);
}
.frise__teinte:focus{outline:none}
.frise__teinte:focus-visible{outline:2px solid var(--sur-fond);outline-offset:3px}
/* le filet suit l'encre : sans lui, une pastille sombre disparaitrait sur un
   hero sombre, et une pastille creme sur un hero creme */
.frise__teinte[aria-current="true"]{
  width:78px;height:66px;margin:4px 0 16px;
  /* pas de contour : seulement l'ombre portee decollee sous le carre */
  box-shadow:0 24px 12px -14px rgba(29,29,27,.55);
}

/* ---------- entete : kicker + titre ----------
   Le titre deborde sur la colonne du moodboard (nowrap + z-index) : c'est ce
   recouvrement qui fait la mise en page de la maquette. Le retrait a gauche
   decale le bloc titre par rapport a la frise, comme sur la maquette — le
   bloc texte du bas, lui, repart au bord. */
.hero__entete{grid-column:2;grid-row:1;position:relative;z-index:3;align-self:start;margin-left:clamp(36px,6.5vw,116px)}
.hero__kicker{margin:0 0 26px;font-size:15px;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-size:clamp(58px,6.4vw,104px);line-height:1;font-weight:400;
  white-space:nowrap;color:#fff;text-shadow:0 2px 26px rgba(29,29,27,.22);
}

/* ---------- bloc accroche · description · boutons ----------
   Il repart au bord gauche, sous la frise (colonnes 1 a 2), comme sur la
   maquette : le titre est en retrait, le texte non. */
.hero__bloc{grid-column:1 / 3;grid-row:2;margin-top:28px;max-width:520px}
.hero__accroche{margin:0 0 14px;font-size:clamp(20px,1.9vw,28px);font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--sur-fond)}
/* hauteur reservee pour 4 lignes : les descriptions n'ont pas toutes la meme
   longueur, sans ca le hero change de taille a chaque teinte */
.hero__desc{margin:0;max-width:46ch;min-height:calc(1.9em * 4);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:26px}
/* 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 ----------
   Nature morte de la maquette : le grand panneau est l'echantillon reel du
   nuancier (pas un aplat), la lame est une photo en bande verticale posee
   derriere, et l'objet mord sur les deux par-devant. L'ombre au sol reunit
   le groupe. */
/* Une seule image : la nature morte detouree, qui porte deja l'echantillon et
   les matieres. Elle remplace les trois emplacements superposes d'avant — le
   panneau de nuancier faisait doublon avec l'echantillon qu'elle contient.
   Detouree, elle n'a ni cadre ni fond : elle se pose sur la teinte et c'est
   l'ombre portee qui la decolle. `contain` et non `cover` : on ne recadre pas
   une nature morte. */
.mood{
  grid-column:3;grid-row:1 / span 2;margin:0;
  align-self:center;height:clamp(330px,38vw,452px);
  display:flex;align-items:center;justify-content:center;
}
.mood img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 26px 44px rgba(29,29,27,.22));
}
/* l'ombre au sol d'avant n'a plus lieu d'etre : le PNG etant detoure, c'est
   son propre drop-shadow qui epouse sa silhouette */

/* ==========================================================================
   02 · Collage — trois photos qui se chevauchent, texte a droite
   Fond teinte, plus doux que le hero (--teinte-clair) : il suit la teinte
   choisie, comme la section ambiance de la page salle de bain, donc les
   encres sont adaptatives (claires sur les teintes quasi noires).
   ========================================================================== */
.collage{background:var(--teinte-collage);padding:118px var(--gout) 126px}
.collage__grille{display:grid;grid-template-columns:1.05fr .88fr;gap:72px;align-items:center}

.collage__cluster{position:relative;height:clamp(400px,42vw,560px)}
.collage__cluster figure{position:absolute;margin:0;overflow:hidden}
.collage__cluster img{width:100%;height:100%;object-fit:cover}
/* a : la large, en haut ; b : la haute, au bord gauche ; c : la troisieme,
   par-devant, qui recoud les deux autres */
.collage__a{left:27%;top:0;  width:73%;height:33%;z-index:1}
.collage__b{left:0;  top:24%;width:37%;height:65%;z-index:2}
.collage__c{left:38%;top:41%;width:33%;height:59%;z-index:3}

.collage__texte{max-width:46ch}
.collage__surtitre{margin:0 0 14px;font-size:44px;line-height:1;color:var(--gris-leger)}
.collage .h2{color:var(--sur-fond)}
.collage__texte p:not(.collage__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
   ========================================================================== */
.accords{background:var(--papier);padding:0 var(--gout) 112px}
.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:-92px;
}
.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 remonte sous la ligne capitale : ses hampes viennent
   chevaucher le surtitre, comme sur la maquette. Elle doit tenir sur UNE
   ligne — d'ou la colonne large et la taille plafonnee. */
.accords__titre{margin:0;font-size:clamp(40px,3.9vw,66px);line-height:1;color:var(--encre-douce)}
.accords__liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));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 (voir echantillon()),
   la couleur moyenne servant de fond tant qu'elle n'est pas chargee ; la
   couleur du libelle est calculee par le JS 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
   Fond teinte a nouveau, en pale. La photo de gauche touche le bord de la
   page : la section n'a donc PAS de gouttiere, ce sont ses enfants qui la
   portent un par un — une marge negative serait resolue sur la largeur de la
   cellule de grille, pas sur celle de la page.
   ========================================================================== */
.maison{background:var(--teinte-clair);padding:104px 0 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)}
/* 3e colonne laissee vide : la paire de photos s'arrete avant le bord droit,
   comme sur la maquette */
/* Bande horizontale : TOUTES les photos de la teinte hors piece de vie —
   cuisines, escaliers, salles de bain. Le nombre varie d'une teinte a l'autre
   (9 pour Lin, 31 pour Ivoire), d'ou le defilement plutot qu'une grille.
   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. Identique a la page cuisine. */
.maison__bande{
  display:flex;gap:18px;align-items:flex-start;
  margin-top: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,
     sous 760 px. */
}
.maison__bande::-webkit-scrollbar{height:3px}
.maison__bande::-webkit-scrollbar-track{background:transparent}
.maison__bande::-webkit-scrollbar-thumb{background:var(--sur-fond-doux);opacity:.4}
.maison__bande:focus-visible{outline:2px solid var(--sur-fond);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). */
.maison__bande.glisse{cursor:grabbing;-webkit-user-select:none;user-select:none}
.maison__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 */
.maison__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 */
.maison__bande figure:nth-child(3n+2){margin-top:34px}
.maison__bande img{width:100%;height:100%;object-fit:cover}
/* 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}
.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);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  :root{--marge:32px;--bande:clamp(130px,15vw,200px)}
  /* Tactile (tablette et telephone) : une seule colonne, dans l'ordre titre,
     nature morte, pastilles, texte. Les pastilles passent a l'horizontale
     JUSTE SOUS l'image : on voit la teinte changer au-dessus du doigt.
     640 px au plus : au-dela, la nature morte s'etirerait. */
  .hero__grille{grid-template-columns:minmax(0,640px);margin-right:calc(var(--bande) + 32px)}
  .hero__entete{grid-column:1;grid-row:1;margin-left:0}
  .mood{grid-column:1;grid-row:2;margin-top:clamp(28px,5vw,48px);height:clamp(300px,40vw,400px)}
  /* Pastilles a la taille d'un doigt, sur toute la largeur. La selectionnee
     ne grandit plus (elle pousserait ses voisines) : elle se souleve, avec un
     filet a l'encre du hero pour se lire meme sur une teinte tres pale. */
  .frise{grid-column:1;grid-row:3;width:auto;height:auto;margin-top:clamp(20px,3vw,28px)}
  .frise__piste{flex-direction:row;align-items:stretch;gap:8px}
  .frise__teinte{
    flex:1 1 0;width:auto;height:58px;
    box-shadow:inset 0 0 0 1px rgba(29,29,27,.16);
    -webkit-tap-highlight-color:transparent;
    transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  }
  .frise__teinte[aria-current="true"]{
    width:auto;height:58px;margin:0;transform:translateY(-6px);
    box-shadow:0 0 0 2px var(--sur-fond),0 18px 12px -10px rgba(29,29,27,.42);
  }
  .hero__bloc{grid-column:1;grid-row:4;margin-top:clamp(36px,5vw,52px)}
  .collage__grille{grid-template-columns:1fr;gap:52px}
  .collage__texte{max-width:none}
  .accords__grille{grid-template-columns:1fr;gap:40px}
  .accords__liste{padding-top:0}
  .maison__bande{margin-top:56px}
}
@media (max-width:760px){
  :root{--marge:22px}
  .hero{padding:88px 0 76px}
  /* la bande photo n'a plus de place a cette largeur */
  .hero__bande{display:none}
  .hero__grille{margin-right:var(--gout)}
  .frise__piste{gap:6px}
  .frise__teinte,.frise__teinte[aria-current="true"]{height:56px}
  /* plus de hauteur reservee : les pastilles sont AU-DESSUS du texte, un
     texte plus long ne les fait donc plus bouger */
  .hero__desc{min-height:0}
  .hero__titre{font-size:clamp(44px,12vw,64px);white-space:normal}
  .hero__bloc{margin-top:36px}
  .mood{margin-top:24px;height:300px}
  .collage{padding:76px var(--gout) 84px}
  .collage__cluster{height:auto;display:grid;grid-template-columns:1fr;gap:12px}
  .collage__cluster figure{position:static;width:100%;height:250px}
  .collage__surtitre{font-size:36px}
  .accords{padding:0 var(--gout) 84px}
  .accords__intro{padding:38px 26px 32px;margin-top:-64px}
  .accords__liste{gap:28px 22px}
  .maison{padding:76px 0 88px}
  /* sur telephone la bande devient l'element principal de la section : plus de
     decalage une photo sur trois, et un aimant ferme pour qu'on parcoure les
     photos une par une au pouce */
  .maison__bande{margin-top:44px;gap:12px;scroll-snap-type:x mandatory}
  .maison__bande figure{height:clamp(300px,74vw,400px)}
  .maison__bande figure:nth-child(3n+2){margin-top:0}
  .maison__legendes{flex-direction:column;gap:6px}
}