/* ==========================================================================
   Au 21m. — Maison d'inspirations
   Feuille de style unique, partagée par toutes les pages.
   ========================================================================== */

:root{
  --bone:#faf8f3;
  --bone-2:#f1eee7;        /* aplats, placeholders */
  --ink:#12100e;
  --ink-soft:#6d6862;
  --ink-faint:#a9a49b;
  --line:rgba(18,16,14,0.14);
  --white:#fff;

  --header-h:78px;
  --pad-x:clamp(20px, 4vw, 64px);
  --ease:cubic-bezier(.16,.7,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost', Futura, 'Century Gothic', Helvetica, Arial, sans-serif;
  background:var(--bone);
  color:var(--ink);
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}

/* --- Primitives typographiques ------------------------------------------ */

/* Petites capitales espacées — la voix « étiquette » du site */
.label{
  font-size:0.68rem; font-weight:400; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--ink-soft);
}
/* Serif italique — la voix « éditoriale », en écho au « Au 21 » du logo */
.serif{
  font-family:'Playfair Display', Baskerville, 'Times New Roman', serif;
  font-style:italic; font-weight:400;
}

.rule{height:1px; background:var(--line); margin:0 var(--pad-x);}

/* --- En-tête ------------------------------------------------------------- */

.header{
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:var(--header-h);
  background:var(--bone);
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--pad-x);
}
.header__menu{
  justify-self:start; display:flex; align-items:center; gap:12px;
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
}
.header__menu .bars{display:flex; flex-direction:column; gap:5px; width:22px;}
.header__menu .bars span{display:block; height:1.5px; background:currentColor; transition:transform .3s var(--ease), opacity .2s;}
.header__logo{justify-self:center;}
.header__logo img{
  height:44px; width:auto;
  mix-blend-mode:multiply;   /* efface le fond blanc du JPEG sur le fond os */
}
.header__aside{
  justify-self:end;
  display:flex; align-items:center; gap:clamp(14px, 2vw, 26px);
}
.header__aside a{
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
  transition:opacity .2s;
}
.header__aside a:hover{opacity:0.5;}

/* --- Menu plein écran ---------------------------------------------------- */

.nav-overlay{
  position:fixed; inset:0; z-index:290;
  background:var(--bone);
  padding:calc(var(--header-h) + clamp(30px, 6vh, 70px)) var(--pad-x) 40px;
  display:grid; grid-template-columns:1.4fr 1fr; gap:60px;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
  overflow-y:auto;
}
.nav-overlay.open{opacity:1; visibility:visible; transform:none;}
.nav-overlay .label{margin-bottom:26px; display:block;}
.nav-cats li{margin-bottom:2px;}
.nav-cats a{
  display:inline-block;
  font-size:clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight:400; letter-spacing:0.01em; text-transform:uppercase;
  line-height:1.24;
  transition:opacity .2s;
}
.nav-cats a:hover{opacity:0.4;}
.nav-cats a.active{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px;
}
/* Catégorie dépliable : le nom reste cliquable, le « + » ouvre les sous-familles */
/* `center` et non `baseline` : le bouton n'a aucun contenu dans le flux (son
   signe est en position absolue), donc sa ligne de base est synthétisée sur son
   bord inférieur et il se posait sur celle du texte. Centrer la boîte tombe au
   milieu des capitales à toutes les tailles — le nom est en clamp(), un décalage
   fixe ne pourrait pas suivre. */
.nav-cats__row{display:flex; align-items:center; gap:14px;}
.nav-cats__more{
  flex:none; width:26px; height:26px; position:relative;
  color:var(--ink-soft); transition:color .2s;
}
/* Le signe est dessiné plutôt qu'écrit. L'encre d'un « + » n'est pas centrée
   dans sa boîte — le glyphe se pose sur l'axe mathématique, au-dessus de la
   ligne de base — si bien qu'un `place-items:center` centrait la ligne de texte
   et non le dessin, et laissait le signe visiblement bas. Deux traits centrés
   par transformation ne dépendent d'aucune métrique de police. */
.nav-cats__more::before,
.nav-cats__more::after{
  content:''; position:absolute; left:50%; top:50%;
  background:currentColor;
}
.nav-cats__more::before{width:11px; height:1px; transform:translate(-50%, -50%);}
.nav-cats__more::after{
  width:1px; height:11px; transform:translate(-50%, -50%);
  transition:opacity .2s, transform .25s var(--ease);
}
/* Déplié : le trait vertical s'efface, il ne reste que le « – ». */
.nav-cats__more[aria-expanded="true"]::after{
  opacity:0; transform:translate(-50%, -50%) rotate(90deg);
}
.nav-cats__more:hover{color:var(--ink);}

/* Repli animé. Déplié par défaut : sans JavaScript, les sous-familles restent
   accessibles. C'est le script qui les referme au chargement, puis pilote
   max-height (mesuré sur le contenu) pour animer. */
.nav-subs-wrap{overflow:hidden; transition:max-height .35s var(--ease);}

.nav-subs{margin-left:2px;}
.nav-subs li{margin-bottom:7px;}
.nav-subs li:first-child{padding-top:12px;}
.nav-subs li:last-child{margin-bottom:0; padding-bottom:16px;}
.nav-subs a{
  font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .2s;
}
.nav-subs a:hover{color:var(--ink);}
.nav-subs a.active{
  color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
}

.nav-side li{margin-bottom:14px;}
.nav-side a{
  font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
  transition:opacity .2s;
}
.nav-side a:hover{opacity:0.5;}
.nav-side .serif{
  font-size:1.05rem; letter-spacing:0; text-transform:none;
  color:var(--ink-soft); line-height:1.6; margin-top:30px; display:block;
}

/* --- Corps de page ------------------------------------------------------- */

.main{padding-top:var(--header-h);}
section[id]{scroll-margin-top:var(--header-h);}

/* --- Hero (carrousel) ---------------------------------------------------- */

.hero{position:relative; height:calc(100vh - var(--header-h)); min-height:520px; overflow:hidden;}
.hero__slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.1s var(--ease);
}
.hero__slide.is-active{opacity:1;}
.hero__slide img{width:100%; height:100%; object-fit:cover;}
/* Assombrissement de lecture. Il s'arrête avant le bas du bandeau : le tout
   dernier tiers est réservé au fondu vers le fond de page, et un noir posé
   dessous le salirait. */
.hero__slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,
    transparent 3%, rgba(0,0,0,.55) 24%, rgba(0,0,0,.16) 56%, transparent 78%);
}
/* Fondu du bas du bandeau vers le fond de la page : l'image ne s'arrête pas sur
   une ligne franche, elle se dissout dans le reste du site. Hors du .hero__slide
   pour ne pas clignoter d'une vue à l'autre du carrousel. */
/* Le fondu n'existe pas à l'arrivée : l'image est franche, plein cadre. Il
   n'apparaît qu'au défilement, piloté par --veil (0 → 1) depuis site.js. */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(70px, 14%, 170px); z-index:2; pointer-events:none;
  opacity:var(--veil, 0);
  background:linear-gradient(to bottom, rgba(250,248,243,0) 0%, var(--bone) 94%);
}
/* Le texte est blanc : il doit rester au-dessus du fondu clair, sinon il s'y
   dissout. D'où un `bottom` toujours supérieur à la hauteur du .hero::after
   ci-dessus — les deux valeurs se suivent, ne bouger l'une sans l'autre. */
.hero__caption{
  position:absolute; left:var(--pad-x); right:var(--pad-x); bottom:clamp(112px, 19vh, 215px);
  z-index:3; color:var(--white); max-width:620px;
}
.hero__caption h1{
  font-size:clamp(1.9rem, 4.6vw, 3.5rem);
  font-weight:400; letter-spacing:0.03em; text-transform:uppercase; line-height:1.1;
  margin-bottom:16px;
}
.hero__caption p{
  font-family:'Playfair Display', Baskerville, serif; font-style:italic;
  font-size:clamp(1rem, 1.5vw, 1.35rem); line-height:1.5;
}
.hero__arrows{
  position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  left:var(--pad-x); right:var(--pad-x);
  display:flex; justify-content:space-between; pointer-events:none;
}
.hero__arrows button{
  pointer-events:auto;
  width:46px; height:46px; border-radius:50%;
  background:rgba(250,248,243,.82); color:var(--ink);
  display:grid; place-items:center; font-size:1.1rem;
  transition:background .2s;
}
.hero__arrows button:hover{background:var(--bone);}

/* --- Accueil : bandeau plein écran --------------------------------------- */
/* Sur l'accueil seulement (`<body class="home">`), le bandeau occupe la
   totalité de l'écran et la barre du haut reste invisible tant qu'on n'a pas
   commencé à descendre. Ailleurs, rien ne change. */
.home .main{padding-top:0;}
.home .hero{
  height:100vh;
  height:100svh;   /* évite le saut dû à la barre d'URL sur mobile */
}
/* Par-dessus la bannière, la barre perd son fond et son filet : il ne reste
   que ses éléments, en blanc. Le fond os revient au défilement.
   Le brûleur et les deux liens suivent `color` — les trois traits du menu sont
   peints en `currentColor` et les liens héritent — une seule déclaration suffit. */
.home .header{
  background:transparent;
  border-bottom-color:transparent;
  color:var(--white);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
/* `is-scrolled` est posée par site.js dès le premier pixel de défilement.
   `no-scroll` est posée à l'ouverture du menu plein écran : sans cette
   seconde condition, ouvrir le menu depuis le haut de l'accueil laisserait la
   barre en blanc sur le fond os du menu, donc invisible. */
.home.is-scrolled .header,
.home.no-scroll .header{
  background:var(--bone);
  border-bottom-color:var(--line);
  color:var(--ink);
}
/* Le logo est un JPEG noir sur blanc : `multiply` efface son blanc sur fond
   clair, mais pas sur une photo. Et l'astuce inverse (`invert` + `screen`) est
   sans effet ici — la barre porte `z-index:300`, donc elle crée un contexte
   d'empilement et le fondu se calcule contre son propre fond, jamais contre la
   photo. D'où une vraie image à canal alpha, fabriquée par
   `tools/logo_blanc.py`, qui ne dépend d'aucun mode de fusion. */
/* Le logo change de couleur en même temps que la barre reprend son fond.
   Il était substitué par `content:url()`, une propriété qui ne s'anime pas :
   le changement était donc instantané alors que le fond, le filet et la couleur
   du texte glissent sur .4s — on voyait le logo basculer seul, avant le reste.
   On superpose donc les deux versions détourées et on croise leurs opacités sur
   la même durée et la même courbe que la barre.
   Deux PNG à canal alpha plutôt que le JPEG au `multiply` : à mi-parcours le
   fond de la barre n'est qu'à moitié posé, et le multiply y laisserait passer
   le rectangle blanc du JPEG. Les deux partagent le même canal alpha
   (`tools/logo_blanc.py` les produit ensemble), sinon un bord se déplacerait
   pendant le fondu. */
.home .header__logo{position:relative;}
/* L'image reste en place : elle tient la largeur de la colonne et son `alt`
   reste lisible aux lecteurs d'écran. Seuls les deux calques se voient. */
.home .header__logo img{opacity:0; mix-blend-mode:normal;}
.home .header__logo::before,
.home .header__logo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-position:center; background-size:contain; background-repeat:no-repeat;
  transition:opacity .4s var(--ease);
}
.home .header__logo::before{background-image:url(../images/logo-mark-noir.png); opacity:0;}
.home .header__logo::after {background-image:url(../images/logo-mark-blanc.png); opacity:1;}
.home.is-scrolled .header__logo::before,
.home.no-scroll .header__logo::before{opacity:1;}
.home.is-scrolled .header__logo::after,
.home.no-scroll .header__logo::after{opacity:0;}
/* Voile sombre en haut de la bannière. Sans lui, une barre blanche posée sur
   une photo claire — le papier peint fleuri, typiquement — devient illisible.
   Il disparaît de lui-même avec la bannière au défilement. */
.home .hero::before{
  content:''; position:absolute; left:0; right:0; top:0;
  height:clamp(120px, 18%, 220px); z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 100%);
}

/* --- Bandeau de section -------------------------------------------------- */

.band{padding:clamp(52px, 8vh, 88px) var(--pad-x);}
.band__title{
  text-align:center;
  font-size:clamp(0.85rem, 1.2vw, 1rem); font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase;
  margin-bottom:clamp(30px, 5vh, 54px);
}
.band__intro{
  text-align:center; max-width:600px; margin:-26px auto clamp(34px, 5vh, 54px);
  font-family:'Playfair Display', Baskerville, serif; font-style:italic;
  font-size:1.1rem; line-height:1.6; color:var(--ink-soft);
}

/* --- Grille de catégories ------------------------------------------------ */

.cat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 3vw, 44px) clamp(16px, 2vw, 30px);}
.cat-grid a{display:block;}
.cat-grid .frame{overflow:hidden; aspect-ratio:4/5; margin-bottom:14px;}
.cat-grid img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease);}
.cat-grid a:hover img{transform:scale(1.04);}
.cat-grid .name{
  text-align:center;
  font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
}
.cat-grid .name em{
  display:block; margin-top:6px;
  font-family:'Playfair Display', Baskerville, serif; font-style:italic;
  font-size:0.85rem; letter-spacing:0; text-transform:none; color:var(--ink-soft);
}

/* --- Tuiles à libellé incrusté ------------------------------------------- */

.tiles{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2vw, 30px);}
.tile{position:relative; overflow:hidden; aspect-ratio:3/4; display:block;}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease);}
.tile:hover img{transform:scale(1.04);}
.tile::after{content:''; position:absolute; inset:0; background:rgba(0,0,0,.22);}
.tile span{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center; text-align:center; padding:24px;
  color:var(--white);
  font-size:clamp(1.05rem, 2.2vw, 1.8rem); letter-spacing:0.06em; text-transform:uppercase;
  line-height:1.2;
}

/* --- Liste de maisons / marques ------------------------------------------ */

.houses{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(18px, 3vw, 48px);
  text-align:center;
}
.houses li{
  font-size:clamp(1.1rem, 2.4vw, 1.9rem); letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink);
}
.houses li .serif{
  display:block; font-size:0.8rem; letter-spacing:0; text-transform:none;
  color:var(--ink-faint); margin-top:2px;
}

/* --- Listes repliées (« voir plus ») ------------------------------------- */
/* Les pages à beaucoup de marques n'en montrent que les premières. Comme pour
   les sous-familles du menu, le repli est posé par le script et non par la
   feuille de style : sans JavaScript la liste reste entière, et le bouton —
   qui ne servirait alors à rien — ne s'affiche pas. Aucun nom de marque ne
   devient inatteignable, ce qui compte autant pour un visiteur que pour
   l'indexation. */
.plus__btn{display:none;}
.plus.js .plus__btn{
  /* Marge basse autant que haute : sur les pages à bandes le groupe est suivi
     d'un filet de séparation, contre lequel le bouton venait se coller. */
  display:block; margin:36px auto;
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:12px 26px; border:1px solid var(--line);
  transition:color .2s, border-color .2s;
}
.plus.js .plus__btn:hover{color:var(--ink); border-color:var(--ink);}
/* On ne pose `display:none` qu'à l'état replié : jamais de `display` à l'état
   ouvert, sinon on écraserait celui que l'élément tient de sa propre règle
   (élément de liste, carte de grille…). */
.plus.js.is-closed [data-plus]{display:none;}

/* --- Renvois vers les pages maison --------------------------------------- */

/* Sans visuel, volontairement : toutes les photos servent déjà dans les fiches
   produits de la même page. */
.house-links{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 44px);}
.house-links a{
  display:block; border-top:1px solid var(--ink); padding-top:20px;
  transition:opacity .2s;
}
.house-links a:hover{opacity:0.55;}
.house-links .hname{
  font-size:clamp(1.1rem, 2vw, 1.6rem); letter-spacing:0.05em;
  text-transform:uppercase; line-height:1.2;
}
.house-links .hmeta{
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:9px;
}
.house-links .hline{
  font-family:'Playfair Display', Baskerville, serif; font-style:italic;
  font-size:1rem; line-height:1.5; color:var(--ink-soft); margin-top:14px;
}
.house-links .hgo{
  display:inline-block; margin-top:18px;
  font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase;
}

/* --- Bandeau Instagram --------------------------------------------------- */

/* Volontairement typographique, sans vignettes : une grille de photos figées
   vieillirait mal en face d'un compte mis à jour chaque semaine. */
.social-band{text-align:center;}
.social-band .label{display:block; margin-bottom:18px;}
.social-band .handle{
  display:inline-block;
  font-size:clamp(2rem, 7vw, 4.4rem); font-weight:400;
  letter-spacing:0.01em; line-height:1;
  margin-bottom:24px; transition:opacity .2s;
}
.social-band .handle:hover{opacity:0.5;}
.social-band .serif{
  display:block; max-width:520px; margin:0 auto 32px;
  font-size:clamp(1.05rem, 1.5vw, 1.3rem); line-height:1.6; color:var(--ink-soft);
}

/* Vitrine Instagram : tuiles carrées, volontairement modestes. Les visuels
   viennent d'un fil mobile — les afficher petits garde du piqué et dit
   « aperçu », pas « galerie ».
   Trois colonnes à toutes les tailles, y compris sur téléphone : c'est la
   trame d'Instagram, et la grille n'est reconnaissable qu'à ce compte-là.
   Elle rétrécit avec la fenêtre au lieu de se replier — d'où le gap en vw
   et la largeur en %. */
.insta-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(4px, 1vw, 14px);
  width:100%; max-width:760px; margin:0 auto clamp(30px, 4vh, 40px);
}
.insta-grid a{display:block;}
.insta-grid .frame{aspect-ratio:1/1; overflow:hidden;}
.insta-grid img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.insta-grid a:hover img{transform:scale(1.05);}

/* --- Bouton bloc --------------------------------------------------------- */

.btn{
  display:inline-block; background:var(--ink); color:var(--bone);
  padding:17px 46px;
  font-size:0.7rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  transition:opacity .2s;
}
.btn:hover{opacity:0.82;}
.center{text-align:center;}

/* --- En-tête de page catégorie ------------------------------------------- */

.page-head{padding:clamp(40px, 7vh, 76px) var(--pad-x) clamp(28px, 4vh, 44px); text-align:center;}
.breadcrumb{
  font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:22px;
}
.breadcrumb a{transition:opacity .2s;}
.breadcrumb a:hover{opacity:0.55;}
.page-head h1{
  font-size:clamp(1.7rem, 4vw, 3rem); font-weight:400;
  letter-spacing:0.05em; text-transform:uppercase; line-height:1.1;
}
.page-head .lead{
  max-width:620px; margin:24px auto 0;
  font-family:'Playfair Display', Baskerville, serif; font-style:italic;
  font-size:clamp(1rem, 1.5vw, 1.25rem); line-height:1.6; color:var(--ink-soft);
}
.page-hero{margin:0 var(--pad-x) clamp(40px, 6vh, 70px); aspect-ratio:16/7; overflow:hidden;}
.page-hero img{width:100%; height:100%; object-fit:cover;}

/* --- Chapeau de maison (au-dessus d'une grille produits) ----------------- */

.brand-head{
  max-width:660px; margin:0 auto clamp(34px, 5vh, 56px); text-align:center;
}
.brand-head .label{display:block; margin-bottom:16px;}
.brand-head h2{
  font-size:clamp(1.2rem, 2vw, 1.7rem); font-weight:400;
  letter-spacing:0.04em; text-transform:uppercase; line-height:1.2; margin-bottom:20px;
}
.brand-head .serif{
  display:block; font-size:clamp(1.05rem, 1.4vw, 1.2rem); line-height:1.6; margin-bottom:18px;
}
.brand-head p{font-size:0.95rem; line-height:1.8; color:var(--ink-soft);}
/* Sur `p + p` seulement : un bloc à un seul paragraphe garde sa marge basse
   d'origine. Sans cette règle les paragraphes se touchaient — la remise à zéro
   globale des marges les avait tous mis à plat, et l'interligne de 1.8 ne
   suffit pas à faire lire une rupture de paragraphe. */
.brand-head p + p{margin-top:1.15em;}

/* --- Page Peinture / Argile ---------------------------------------------- */

/* Les collections : image d'inspiration + nom + décompte */
.col-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(26px, 3vw, 48px);}
.col-card .frame{aspect-ratio:3/2; overflow:hidden; margin-bottom:18px;}
.col-card .frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease);}
.col-card:hover .frame img{transform:scale(1.04);}
.col-card h3{
  font-size:clamp(1.1rem, 1.9vw, 1.5rem); font-weight:400;
  letter-spacing:0.05em; text-transform:uppercase; line-height:1.2;
}
.col-card .count{
  font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:8px;
}
.col-card .serif{
  display:block; margin-top:12px; font-size:1.02rem; line-height:1.5; color:var(--ink-soft);
}

/* Le nuancier : cartes de teintes photographiées */
.teinte-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(16px, 2vw, 34px);}
.teinte img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 1.1s var(--ease);}
.teinte{overflow:hidden;}
.teinte:hover img{transform:scale(1.04);}
.teinte figcaption{
  margin-top:13px; text-align:center;
  font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase;
}
.teinte figcaption span{
  display:block; margin-top:5px;
  font-size:0.62rem; letter-spacing:0.18em; color:var(--ink-faint);
}

/* Les finitions : deux colonnes typographiques */
.fin-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(30px, 4vw, 64px); max-width:760px; margin:0 auto;
}
.fin-group .label{display:block; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--ink);}
.fin-group li{
  font-size:0.95rem; line-height:1.6; padding:9px 0;
  border-bottom:1px solid var(--line);
}

@media (max-width:900px){
  .teinte-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:560px){
  .col-grid{grid-template-columns:1fr;}
  .teinte-grid{grid-template-columns:1fr 1fr;}
  .fin-grid{grid-template-columns:1fr;}
}

/* --- Barre de sous-familles (sur une sous-page) -------------------------- */

.subnav{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:clamp(34px, 5vh, 56px);
}
.subnav ul{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(14px, 3vw, 38px);
  padding:18px var(--pad-x);
}
.subnav a{
  font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .2s;
}
.subnav a:hover{color:var(--ink);}
.subnav a.active{
  color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px;
}

/* Renvoi « voir tout » sous une grille de la page d'ensemble */
.more{
  font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:5px;
  transition:opacity .2s;
}
.more:hover{opacity:0.55;}
.band__title a{transition:opacity .2s;}
.band__title a:hover{opacity:0.55;}

/* --- Grille produits ----------------------------------------------------- */

.product-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(30px, 4vw, 56px) clamp(16px, 2vw, 32px);}
.product .frame{position:relative; overflow:hidden; aspect-ratio:4/5; margin-bottom:16px;}
.product .frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease);}
.product:hover .frame img{transform:scale(1.04);}
.badge{
  position:absolute; top:14px; right:14px; z-index:2;
  background:rgba(250,248,243,.92); color:var(--ink);
  padding:6px 12px;
  font-size:0.58rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
}
.product .pname{font-size:0.85rem; letter-spacing:0.09em; text-transform:uppercase; line-height:1.35;}
.product .pmaker{
  font-size:0.64rem; font-weight:300; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:6px;
}
.product .pnote{
  font-family:'Playfair Display', Baskerville, serif; font-style:italic;
  font-size:0.98rem; color:var(--ink); margin-top:9px;
}

/* --- Grille des maisons (papiers peints) --------------------------------- */

/* Même trame que la grille produits, mais l'unité de choix est la maison :
   le nom porte plus fort et la ligne de signature remplace la matière. */
/* --cols : chaque famille remplit sa rangée (quatre Françaises, trois Anglaises,
   deux venues d'ailleurs) plutôt que de laisser une fiche orpheline. */
.maison-grid{display:grid; grid-template-columns:repeat(var(--cols, 3), 1fr); gap:clamp(34px, 4vw, 60px) clamp(16px, 2vw, 32px);}
.maison .frame{overflow:hidden; aspect-ratio:4/5; margin-bottom:18px;}
.maison .frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease);}
.maison:hover .frame img{transform:scale(1.04);}
.maison h3{
  font-size:clamp(1rem, 1.7vw, 1.35rem); font-weight:400;
  letter-spacing:0.05em; text-transform:uppercase; line-height:1.25;
}
.maison .origin{
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:9px;
}
.maison .sign{
  font-family:'Playfair Display', Baskerville, serif; font-style:italic;
  font-size:1rem; line-height:1.55; color:var(--ink-soft); margin-top:13px;
}
/* Parfums : les seuls packshots sur fond blanc du site. Plutôt que d'assumer
   des rectangles blancs sur le fond os, on efface ce blanc au blend multiply —
   le même procédé que le logo. Les flacons se posent alors directement sur le
   fond de page, ton sur ton, sans cadre visible.
   Le fond du cadre doit rester la couleur de la page : multiply calcule à
   partir de ce qu'il y a dessous. */
.parfum .frame{background:var(--bone);}
.parfum .frame img{mix-blend-mode:multiply;}
/* Même principe pour les fiches produit dont la maison ne diffuse qu'un
   packshot sur fond blanc (plateaux et nappes du Monde Sauvage) : le blanc
   s'efface sur le fond os au lieu de trouer la grille. Le cadre doit rester
   en --bone, multiply calcule à partir de ce qu'il y a dessous.
   `object-fit:contain` parce qu'un packshot ne se recadre pas : on le pose
   entier dans le cadre 4/5. */
.product .frame.cut{background:var(--bone);}
.product .frame.cut img{mix-blend-mode:multiply; object-fit:contain;}
.parfum h3{font-size:clamp(0.9rem, 1.3vw, 1.05rem);}
.parfum .sign{font-size:0.95rem; margin-top:10px;}
.parfum .notes{font-size:0.72rem; line-height:1.7; color:var(--ink-faint); margin-top:10px;}

/* --- État « à venir » ---------------------------------------------------- */

/* Réservé aux visuels non encore fournis : garde la mise en page juste
   tant que la photo définitive n'est pas déposée. */
.ph{background:var(--bone-2); position:relative;}
.ph::after{
  content:attr(data-ph); position:absolute; inset:0;
  display:grid; place-items:center; text-align:center; padding:16px;
  font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint);
}
.empty{
  border:1px solid var(--line); padding:clamp(40px, 7vh, 76px) 30px; text-align:center;
}
.empty p{
  font-family:'Playfair Display', Baskerville, serif; font-style:italic;
  font-size:1.1rem; line-height:1.6; color:var(--ink-soft); max-width:460px; margin:0 auto;
}
.empty .label{display:block; margin-bottom:16px;}

/* --- Sections éditoriales (texte + photos) ------------------------------- */

.editorial{
  padding:clamp(52px, 8vh, 92px) var(--pad-x);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0, 1.15fr) 1fr; gap:clamp(34px, 5vw, 80px);
}
.editorial--flip .photos{order:2;}
.editorial .photos{display:flex; flex-direction:column; gap:clamp(16px, 2vw, 28px);}
.editorial .photos img, .editorial .photos .ph, .editorial .photos video{width:100%; aspect-ratio:4/3;}
.editorial .photos img, .editorial .photos video{object-fit:cover; display:block;}
/* Une seule vidéo sur le site : la lampe Lop, en boucle muette. Elle se
   comporte comme une photo du bloc éditorial, poster compris. */
.editorial .photos video{background:var(--bone-2);}
.editorial .info{align-self:start; position:sticky; top:calc(var(--header-h) + 40px); max-width:440px;}
.editorial .info .label{display:block; margin-bottom:16px;}
.editorial .info h2{
  font-size:clamp(1.2rem, 2vw, 1.7rem); font-weight:400;
  letter-spacing:0.04em; text-transform:uppercase; line-height:1.2; margin-bottom:22px;
}
.editorial .info p{
  font-size:0.95rem; line-height:1.8; color:var(--ink-soft); margin-bottom:16px;
}
.editorial .info p:last-child{margin-bottom:0;}
.editorial .info p.serif{
  font-size:1.15rem; line-height:1.6; color:var(--ink);
}

/* --- Bloc boutique / contact --------------------------------------------- */

.shop-band{
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr;
}
.shop-band__img{overflow:hidden;}
.shop-band__img img{width:100%; height:100%; object-fit:cover; min-height:360px;}
.shop-band__info{padding:clamp(40px, 7vh, 84px) var(--pad-x); align-self:center; max-width:520px;}
.shop-band__info .label{display:block; margin-bottom:16px;}
.shop-band__info h2{
  font-size:clamp(1.3rem, 2.2vw, 1.9rem); font-weight:400;
  letter-spacing:0.04em; text-transform:uppercase; margin-bottom:20px;
}
.shop-band__info .serif{font-size:1.1rem; line-height:1.6; color:var(--ink-soft); margin-bottom:30px; display:block;}
.info-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:15px 0; border-top:1px solid var(--line);
}
.info-row:last-of-type{border-bottom:1px solid var(--line); margin-bottom:32px;}
.info-row dt{font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft); flex:none;}
.info-row dd{text-align:right; font-size:0.92rem; line-height:1.55;}

/* --- Pied de page -------------------------------------------------------- */

.footer{border-top:1px solid var(--line); padding:clamp(48px, 7vh, 80px) var(--pad-x) 30px; text-align:center;}
.footer__logo img{
  height:96px; width:auto; margin:0 auto clamp(28px, 4vh, 44px);
  mix-blend-mode:multiply;
}
.footer__cta .serif{font-size:1.15rem; color:var(--ink-soft); display:block; margin-bottom:22px;}
.footer__social{display:flex; justify-content:center; margin:clamp(34px, 5vh, 52px) 0 30px;}
.footer__social .handle{
  font-size:clamp(1.1rem, 2vw, 1.5rem); letter-spacing:0.04em; color:var(--ink);
  border-bottom:1px solid var(--line); padding-bottom:6px;
  transition:border-color .2s;
}
.footer__social .handle:hover{border-color:var(--ink);}
.footer__legal{
  border-top:1px solid var(--line); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width:900px){
  :root{--header-h:62px;}
  .header__logo img{height:34px;}
  .header__menu > span:not(.bars){display:none;}
  /* Place comptée : on ne garde qu'Instagram, « Nous trouver » est dans le menu. */
  .header__aside a:last-child{display:none;}
  .nav-overlay{grid-template-columns:1fr; gap:40px;}
  .cat-grid{grid-template-columns:1fr 1fr; gap:26px 16px;}
  .product-grid{grid-template-columns:1fr 1fr; gap:34px 16px;}
  .maison-grid{grid-template-columns:1fr 1fr !important; gap:36px 16px;}
  .editorial{grid-template-columns:1fr; gap:28px;}
  .editorial--flip .photos{order:0;}
  .editorial .info{position:static; max-width:100%;}
  .shop-band{grid-template-columns:1fr;}
  .shop-band__img img{min-height:260px;}
  .page-hero{aspect-ratio:4/3;}
  .footer__logo img{height:74px;}
}

@media (max-width:560px){
  /* Les univers gardent deux colonnes sur téléphone : à une seule, les neuf
     catégories font un rouleau interminable et on ne voit plus l'étendue de la
     boutique. Les libellés rétrécissent en conséquence. */
  .cat-grid{grid-template-columns:1fr 1fr; gap:22px 12px;}
  .cat-grid .name{font-size:0.62rem; letter-spacing:0.16em;}
  .cat-grid .name em{font-size:0.72rem;}
  .product-grid{grid-template-columns:1fr;}
  .maison-grid{grid-template-columns:1fr !important;}
  /* la grille Instagram, elle, garde ses trois colonnes */
  .tiles{grid-template-columns:1fr;}
  .house-links{grid-template-columns:1fr;}
  .hero__arrows{display:none;}
  .info-row{flex-direction:column; gap:4px;}
  .info-row dd{text-align:left;}
  .footer__legal{justify-content:center; text-align:center;}
}

/* --- Comparateur à barre coulissante ------------------------------------- */
/* Deux vues du même cadrage superposées ; la barre découpe la vue du dessus.
   Le curseur est un <input type=range> réel, invisible mais bien là : on hérite
   gratuitement du clavier (flèches, Origine/Fin), du tactile et du lecteur
   d'écran, sans réécrire une glissière à la main. */
.compare{
  position:relative; overflow:hidden; user-select:none;
  aspect-ratio:3/4; background:var(--bone-2);
  --x:50%;
}
.compare img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
}
/* La vue « après » n'est peinte qu'à gauche de la barre. */
.compare__after{clip-path:inset(0 calc(100% - var(--x)) 0 0);}
.compare__bar{
  position:absolute; top:0; bottom:0; left:var(--x);
  width:2px; margin-left:-1px; background:var(--white);
  box-shadow:0 0 0 1px rgba(18,16,14,.22); pointer-events:none;
}
.compare__bar::after{
  content:'';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--white); box-shadow:0 2px 10px rgba(18,16,14,.28);
}
/* Les deux chevrons de la poignée, en CSS pur pour éviter une image. */
.compare__bar::before{
  content:'‹ ›';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; font-size:1rem; letter-spacing:.12em; color:var(--ink);
  /* La poignée fait 44 px : sans ça les deux chevrons se replient l'un
     sous l'autre au lieu de rester côte à côte. */
  white-space:nowrap; line-height:1;
}
.compare__range{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;
  background:transparent;
}
.compare__range::-webkit-slider-thumb{-webkit-appearance:none; width:48px; height:100%;}
.compare__range::-moz-range-thumb{width:48px; height:100%; border:0; opacity:0;}
/* Le focus clavier doit rester visible : le curseur est transparent, c'est donc
   le cadre qui le signale. */
.compare__range:focus-visible{outline:none;}
.compare:has(.compare__range:focus-visible){outline:2px solid var(--ink); outline-offset:3px;}
.compare__labels{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; justify-content:space-between; pointer-events:none;
  padding:12px 14px;
}
.compare__labels span{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(250,248,243,.9); color:var(--ink); padding:.35em .7em;
}
/* Mention permanente : cette image est une projection, pas un chantier
   photographié. Elle ne doit jamais être retirée du composant. */
.compare__note{
  margin-top:10px; font-size:.7rem; letter-spacing:.06em;
  color:var(--ink-faint);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}