/* ==========================================================================
   Béton ciré cuisine — Nuancier
   Meme moteur que beton-cire-salon.css / beton-cire-salle-de-bain.css (teinte
   pilotee par le JS, fonds derives, encres adaptatives), mais la selection de
   teinte ne passe plus par une frise de pastilles : c'est un CARROUSEL de
   photos. La grande image est la teinte affichee, les vignettes qui mordent
   sur ses bords sont les teintes voisines ; un clic fait defiler et change la
   couleur de toute la page.
   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 --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 */
  --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 bandeau et le hero (et le header, qui s'y fond)
       --teinte-clair : le collage et la section « dans la maison »
       --teinte-bloc  : le bloc d'intro des accords, 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 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);

  /* Hauteur du carrousel. Les quatre photos de la bande — les deux vignettes
     qui mordent sur la grande image et les deux de la suite, en haut a droite
     — doivent tomber sur la MEME ligne et faire la MEME taille, et sont
     desormais VERTICALES (portrait) sauf la derniere (suiteB), volontairement
     plus large. Tout se derive donc d'ici : les vignettes via POSTES
     (top 23 %, height 46 %) et la suite via les calculs de .hero__paire.
     Changer .23 / .46 a un seul endroit ne suffit pas : POSTES est dans le
     HTML. */
  --carrousel-h:clamp(420px,46vw,600px);
  /* Hauteur de la ligne titre + nature morte : c'est la nature morte qui la
     fixe (le titre est toujours plus bas). Elle se DERIVE du carrousel plutot
     que d'etre reglee a la main : la rangee de photos du hero se pose a
     23 % du carrousel (voir POSTES) et part de sous l'entete, donc en calant
     la nature morte sur cette meme valeur il reste toujours exactement 6 px
     entre les deux, a n'importe quelle largeur d'ecran. C'est aussi la plus
     grande taille que la nature morte puisse prendre sans pousser la rangee
     de photos hors de la ligne des vignettes. */
  --nature-h:calc(var(--carrousel-h) * .23 - 14px);
  --entete-h:calc(var(--nature-h) + 8px);
}

*,*::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 carrousel fait volontairement deborder ses vignettes hors de la
   gouttiere : on clippe au niveau de la page, 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
   ========================================================================== */
.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 — carrousel a gauche, colonne titre/photos/texte a droite
   Le padding haut degage le header, qui est fixe.
   ========================================================================== */
.hero{position:relative;background:var(--teinte-fond);padding:104px var(--gout)}

/* 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(60% 68% at 46% 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:1fr 1.06fr;column-gap:64px;align-items:start}

/* ---------- carrousel ----------
   Une seule piste : chaque diapo est positionnee en absolu par le JS (voir
   POSTES). Les positions sont en POURCENTAGE de la boite, donc rien a
   recalculer au redimensionnement.
   La marge negative fait mordre la vignette de gauche sur la gouttiere,
   comme sur la maquette. */
.carrousel{position:relative;height:var(--carrousel-h);margin-left:-28px}
.carrousel__slide{
  position:absolute;display:block;margin:0;padding:0;border:0;overflow:hidden;
  background:none;cursor:pointer;
  box-shadow:0 14px 34px rgba(29,29,27,.10);
  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);
}
.carrousel__slide img{width:100%;height:100%;object-fit:cover}
/* la grande n'est plus un bouton a cliquer : c'est la teinte affichee */
.carrousel__slide.actif{cursor:default;box-shadow:0 30px 64px rgba(29,29,27,.18)}
.carrousel__slide:focus-visible{outline:2px solid var(--sur-fond);outline-offset:3px}
.carrousel__slide:not(.actif):hover{box-shadow:0 18px 38px rgba(29,29,27,.22)}
@media (prefers-reduced-motion:reduce){.carrousel__slide{transition:opacity .2s ease}}

/* ---------- colonne de droite ---------- */
.hero__col{display:flex;flex-direction:column}

/* titre + petite nature morte, sur une meme ligne. La hauteur est fixee :
   c'est elle qui cale la rangee de photos juste en dessous sur la ligne des
   vignettes du carrousel. */
.hero__entete{display:flex;align-items:flex-start;gap:clamp(20px,2.6vw,38px);min-height:var(--entete-h)}
/* Le H1 est pose au-dessus de .hero__grille : position:relative + z-index
   comme la grille, sinon le fondu clair de .hero::before repeindrait dessus.
   Selecteur a deux classes pour passer devant beton-cire-piece.css, chargee
   apres. */
.hero .hero__h1{position:relative;z-index:1;margin:0 0 clamp(22px,2.4vw,34px)}
/* 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-size:clamp(38px,4.2vw,68px);line-height:1.05;
  letter-spacing:-.01em;color:#fff;text-shadow:0 2px 24px rgba(29,29,27,.24);
}

/* Nature morte : la photo d'atelier de la teinte — l'echantillon reel pose
   avec les matieres qui lui repondent (« <teinte> ensemble.png », detoure).
   C'est un BOUTON : un clic passe a la teinte suivante, comme les vignettes du
   carrousel. Le PNG est detoure, donc pas de cadre ni de fond : il se pose sur
   la teinte et c'est l'ombre portee qui le decolle.
   Hauteur imposee, largeur libre : chaque nature morte garde ses proportions
   (Zinc est presque carree, les autres sont larges). */
/* Elle est calee sur le BAS de l'entete, a 10 px au-dessus de la rangee de
   photos, et deborde vers le HAUT : a droite du H1 la place est libre, alors
   qu'en bas la moindre hauteur de plus decalerait la rangee de photos hors de
   la ligne des vignettes. La marge haute negative annule ce debord pour la
   mise en page — l'entete garde donc exactement sa hauteur. */
.nature{
  display:block;flex:none;align-self:flex-end;
  padding:0;border:0;background:none;cursor:pointer;
  --debord:clamp(0px, 3.4vw, 48px);
  height:calc(var(--nature-h) + var(--debord) - 10px);
  margin:calc(-1 * var(--debord)) 0 10px;
}
.nature img{
  height:100%;width:auto;max-width:none;object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(29,29,27,.20));
  transition:transform .5s var(--ease);
}
.nature:hover img{transform:translateY(-4px)}
.nature:focus-visible{outline:2px solid var(--sur-fond);outline-offset:6px}
@media (prefers-reduced-motion:reduce){.nature img{transition:none}}

/* Suite du carrousel : deux diapos de plus, sur la MEME ligne horizontale que
   les vignettes qui mordent sur la grande image, et a la meme taille (voir
   POSTES dans le HTML — changer cette hauteur oblige a y retoucher `top` et
   `height`). Ce sont des boutons : la bande de photos reste cliquable d'un
   bout a l'autre du hero. La colonne .28fr rend suiteA verticale (portrait),
   comme les vignettes ; .72fr laisse suiteB nettement plus large, seule
   photo de la bande a rester horizontale. */
.hero__paire{
  display:grid;grid-template-columns:.28fr .72fr;gap:18px;
  /* meme ligne et meme hauteur que les vignettes : 23 % et 46 % du carrousel,
     exactement les valeurs de POSTES, moins la hauteur de l'entete */
  margin-top:calc(var(--carrousel-h) * .23 - var(--entete-h));
  height:calc(var(--carrousel-h) * .46);
}
.suite{
  display:block;margin:0;padding:0;border:0;background:none;overflow:hidden;
  height:100%;cursor:pointer;
  box-shadow:0 10px 26px rgba(29,29,27,.08);
  transition:box-shadow .45s var(--ease);
}
.suite:hover{box-shadow:0 18px 38px rgba(29,29,27,.22)}
.suite:focus-visible{outline:2px solid var(--sur-fond);outline-offset:3px}
.suite img{width:100%;height:100%;object-fit:cover}

.hero__bloc{margin-top:clamp(34px,4vw,60px);max-width:48ch}
.hero__accroche{margin:0 0 22px;font-size:clamp(20px,1.9vw,28px);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:38px}
/* 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)}

/* ==========================================================================
   02 · Collage — une large photo, deux portraits dessous, texte a droite
   ========================================================================== */
.collage{background:var(--teinte-clair);padding:110px var(--gout) 120px}
.collage__grille{display:grid;grid-template-columns:1fr .88fr;gap:72px;align-items:center}
.collage__cluster{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.collage__cluster figure{margin:0;overflow:hidden}
.collage__cluster img{width:100%;height:100%;object-fit:cover}
.collage__a{grid-column:1 / -1;aspect-ratio:2.45}
.collage__b,.collage__c{aspect-ratio:.78}

.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 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)}
/* 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 — les deux trios se retrouveraient separes par un grand vide. A
   210 px ils restent cote a cote, et une troisieme viendrait simplement s'y
   ajouter. */
.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 (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
   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.
   ========================================================================== */
.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)}
/* Bande horizontale : TOUTES les photos de la teinte hors cuisine — pieces de
   vie, escaliers, salles de bain. Le nombre varie beaucoup d'une teinte a
   l'autre (10 pour Zinc, 38 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 (voir B4_RATIOS) pour que la bande ait sa largeur definitive
   avant meme que les images ne soient chargees. */
.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, pas
     un carrousel. Avec scroll-snap, un petit geste a la souris (moins d'une
     demi-photo) etait ramene a son point de depart — la bande avait l'air de
     refuser de bouger. L'aimant 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}
/* Les deux etats du glisser a la souris, poses par le JS le temps que le
   bouton reste enfonce (meme principe que .ls-rail.is-dragging sur la page
   LucemStone) :
     .glisse      — le curseur, et plus rien qui se selectionne dessous.
     .sans-aimant — coupe l'aimant et le defilement doux. Sans effet au-dessus
                    de 760 px, ou il n'y a deja pas d'aimant ; il sert sur une
                    fenetre etroite utilisee a la souris, ou l'aimant
                    mandatory se battrait avec le geste. */
.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}
.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}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  :root{--marge:32px}
  /* en une colonne, on garde l'ordre du DOM : le carrousel d'abord, puis le
     titre et la suite des diapos — sinon la suite s'afficherait avant le
     carrousel qu'elle prolonge */
  :root{--carrousel-h:clamp(380px,52vw,520px)}
  .hero__grille{grid-template-columns:1fr;row-gap:48px}
  .carrousel{margin-left:0}
  /* la suite n'est plus a cote du carrousel : rien a aligner, elle reprend
     une hauteur confortable */
  .hero__entete{min-height:0}
  .hero__paire{margin-top:clamp(28px,3.4vw,44px);height:clamp(190px,26vw,280px)}
  .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}
  /* en une colonne, l'entete n'a plus rien a caler sur le carrousel (voir
     .hero__entete ci-dessus) : la nature morte reprend une taille lisible et
     n'a plus besoin de deborder */
  .nature{--debord:0px;height:clamp(96px,13vw,150px);margin:0}
}
@media (max-width:760px){
  :root{--marge:22px}
  .hero{padding:88px var(--gout) 76px}
  .hero__entete{gap:18px}
  .carrousel{height:clamp(300px,72vw,420px)}
  .hero__paire{height:clamp(170px,40vw,250px);gap:12px}
  .collage{padding:76px var(--gout) 84px}
  .collage__cluster{gap:14px 12px}
  .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}
}