/* Willow & Co — charte graphique
   blanc cassé #F6F7F2 · beige #E5E2D6 · brun #714634 · bleu clair #D7DFEE · noir prune #221A21
   Nom et mots mis en valeur : Pinyon Script · Texte et titres : Didact Gothic
   Angles nets, beaucoup d'air, photos en grand. */
:root{
  --ivoire: #F6F7F2;   /* blanc cassé : fond de page */
  --blanc:  #FFFFFF;
  --lin:    #E5E2D6;   /* beige : blocs, fonds de photos */
  --brun:   #714634;   /* brun : accents, liens, mots manuscrits */
  --bleu:   #D7DFEE;   /* bleu clair : sections qui respirent */
  --noir:   #221A21;   /* noir prune : texte fort, boutons, pied de page */
  --encre:  #3A2F35;   /* texte courant */
  --pierre: #8C7F7A;   /* texte secondaire */
  --line:   rgba(34,26,33,.12);
  --line-clair: rgba(255,255,255,.22);

  --serif:  'Didact Gothic', 'Century Gothic', 'Avenir Next', Arial, sans-serif;
  --sans:   'Didact Gothic', 'Century Gothic', 'Avenir Next', Arial, sans-serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --ease:  cubic-bezier(.22,.8,.2,1);
  --gutter: clamp(16px, 4vw, 56px);
  --header-h: 72px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; }
body{
  background:var(--ivoire); color:var(--encre);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body.lock{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button, input, select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }

.px{ padding-inline:var(--gutter); }
.wrap{ max-width:1440px; margin-inline:auto; padding-inline:var(--gutter); }

/* Typographie */
.label{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
}
.display, h1, h2{
  font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.02em; color:var(--noir);
}
h1{ font-size:clamp(2.6rem, 7vw, 6.4rem); }
h2{ font-size:clamp(2.1rem, 4.6vw, 4rem); }
h3{ font-family:var(--sans); font-weight:400; font-size:15px; letter-spacing:.02em; }
em{ font-style:normal; font-family:var(--script); color:var(--brun); font-size:1.18em; letter-spacing:0; line-height:.9; }
.hero em, .bandeau em, .edito-texte em, .lettre em, .carte-edito em{ color:inherit; }
.muted{ color:var(--pierre); }

/* Boutons rectangulaires, texte espacé */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:52px; padding:0 34px; border:1px solid var(--noir);
  background:var(--noir); color:var(--blanc);
  font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.btn:hover{ background:transparent; color:var(--noir); }
.btn-clair{ background:var(--blanc); color:var(--noir); border-color:var(--blanc); }
.btn-clair:hover{ background:transparent; color:var(--blanc); }
.btn-ligne{ background:transparent; color:var(--noir); }
.btn-ligne:hover{ background:var(--noir); color:var(--blanc); }
.btn-ligne-clair{ background:transparent; color:var(--blanc); border-color:var(--blanc); }
.btn-ligne-clair:hover{ background:var(--blanc); color:var(--noir); }
.btn-plein{ width:100%; }
.lien{
  font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  padding-bottom:4px; background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;
  transition:background-size .4s var(--ease);
}
.lien:hover{ background-size:0 1px; background-position:right bottom; }

/* ---------- En-tête ---------- */
.annonce{
  background:var(--noir); color:var(--blanc); height:34px; overflow:hidden;
  font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  display:flex; align-items:center;
}
.annonce-piste{ display:flex; gap:56px; white-space:nowrap; animation:defile 38s linear infinite; padding-left:56px; }
.annonce-piste span::after{ content:'✦'; margin-left:56px; opacity:.5; }
@keyframes defile{ to{ transform:translateX(-50%); } }

.header{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  background:var(--ivoire); border-bottom:1px solid var(--line);
  transition:background .4s var(--ease), color .4s, border-color .4s;
}
.header-in{ height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.wordmark{
  font-family:var(--script); font-size:34px; letter-spacing:0; text-transform:none;
  white-space:nowrap; padding-left:.32em; line-height:1;
}
.wordmark small{ font-size:1em; letter-spacing:0; }
.nav-g, .nav-d{ display:flex; gap:30px; align-items:center; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
.nav-d{ justify-content:flex-end; }
.nav-g a, .nav-d a, .nav-d button{ position:relative; padding:6px 0; letter-spacing:inherit; font-size:inherit; font-weight:inherit; text-transform:inherit; }
.nav-g a::after, .nav-d a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.nav-g a:hover::after, .nav-d a:hover::after, .nav-g a[aria-current]::after{ transform:scaleX(1); transform-origin:left; }
.burger{ display:none; width:40px; height:40px; margin-left:-8px; }
.burger svg, .icone svg{ width:22px; height:22px; }
.icone{ display:none; }

/* En-tête posé sur la grande photo de l'accueil */
.header-sur-photo .header{ position:fixed; left:0; right:0; top:34px; background:transparent; color:var(--blanc); border-color:transparent; }
.header-sur-photo.defile .header{ top:0; background:var(--ivoire); color:var(--encre); border-color:var(--line); }
.header-sur-photo .annonce{ position:relative; z-index:61; }

/* Menu mobile */
.menu{
  position:fixed; inset:0; z-index:80; background:var(--ivoire); color:var(--encre);
  padding:96px var(--gutter) 40px; display:flex; flex-direction:column; justify-content:space-between;
  transform:translateX(-100%); transition:transform .6s var(--ease);
}
.menu.ouvert{ transform:none; }
.menu-fermer{ position:absolute; top:22px; left:calc(var(--gutter) - 8px); width:40px; height:40px; }
.menu-fermer svg{ width:22px; height:22px; }
.menu nav a{ display:block; font-family:var(--serif); font-size:40px; line-height:1.25; }
.menu-bas{ display:grid; gap:14px; }

/* ---------- Panier latéral ---------- */
.voile{ position:fixed; inset:0; background:rgba(22,20,18,.4); z-index:85; opacity:0; pointer-events:none; transition:opacity .5s; }
.voile.on{ opacity:1; pointer-events:auto; }
.tiroir{
  position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(460px, 100%);
  background:var(--ivoire); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .6s var(--ease);
}
.tiroir.ouvert{ transform:none; }
.tiroir-tete{ display:flex; justify-content:space-between; align-items:center; padding:24px 28px; border-bottom:1px solid var(--line); }
.tiroir-tete button svg{ width:20px; height:20px; }
.livraison-barre{ padding:18px 28px; border-bottom:1px solid var(--line); font-size:13px; }
.livraison-barre .jauge{ height:2px; background:var(--lin); margin-top:10px; }
.livraison-barre .jauge i{ display:block; height:100%; background:var(--noir); transition:width .6s var(--ease); }
.tiroir-corps{ flex:1; overflow:auto; padding:8px 28px; }
.ligne-panier{ display:grid; grid-template-columns:84px 1fr auto; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); font-size:14px; }
.ligne-panier img{ width:84px; height:104px; object-fit:cover; background:var(--lin); }
.ligne-panier .qte{ display:inline-flex; border:1px solid var(--line); margin-top:10px; }
.ligne-panier .qte button{ width:30px; height:30px; }
.ligne-panier .qte span{ width:28px; display:grid; place-items:center; }
.ligne-panier .retirer{ font-size:12px; text-decoration:underline; color:var(--pierre); margin-top:8px; display:block; }
.panier-vide{ padding:56px 0; text-align:center; }
.panier-vide p{ font-family:var(--serif); font-size:28px; margin-bottom:24px; }
.tiroir-pied{ padding:24px 28px 28px; border-top:1px solid var(--line); display:grid; gap:14px; }
.tiroir-pied .total{ display:flex; justify-content:space-between; font-size:15px; }
.tiroir-pied small{ color:var(--pierre); font-size:12px; text-align:center; }

/* ---------- Accueil : grande photo ---------- */
.hero{ position:relative; height:100svh; min-height:620px; color:var(--blanc); overflow:hidden; background:var(--noir); }
.hero-images{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
.hero-images img{ width:100%; height:100%; object-fit:cover; animation:respire 14s var(--ease) both; }
.hero-images img + img{ animation-delay:.15s; }
@keyframes respire{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 48%, rgba(0,0,0,.58) 100%);
}
.hero-texte{
  position:absolute; z-index:2; left:0; right:0; bottom:clamp(40px, 9vh, 96px);
  text-align:center; padding-inline:var(--gutter);
}
.hero-texte .label{ display:block; margin-bottom:22px; opacity:0; animation:monte 1s .5s var(--ease) forwards; }
.hero h1{ color:var(--blanc); font-size:clamp(3rem, 8.6vw, 8.4rem); line-height:.95; opacity:0; animation:monte 1.2s .7s var(--ease) forwards; }
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:38px; opacity:0; animation:monte 1s 1s var(--ease) forwards; }
@keyframes monte{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
.hero-defiler{
  position:absolute; z-index:2; right:var(--gutter); bottom:96px; writing-mode:vertical-rl;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; display:flex; align-items:center; gap:14px;
}
.hero-defiler::after{ content:''; width:1px; height:56px; background:currentColor; animation:trait 2.2s var(--ease) infinite; transform-origin:top; }
@keyframes trait{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* Déclaration */
.manifeste{ padding:clamp(96px, 14vw, 200px) var(--gutter); text-align:center; }
.manifeste .label{ display:block; margin-bottom:34px; color:var(--brun); }
.manifeste p.display{ font-size:clamp(1.9rem, 4.2vw, 3.6rem); line-height:1.18; max-width:22em; margin:0 auto; }
.manifeste p.display em{ color:var(--brun); }

/* Tuiles d'univers (façon Meomari) */
.tuiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.tuile{ position:relative; aspect-ratio:3/4.2; overflow:hidden; color:var(--blanc); background:var(--lin); }
.tuile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.tuile:hover img{ transform:scale(1.06); }
.tuile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.5)); }
.tuile-texte{ position:absolute; z-index:2; left:28px; right:28px; bottom:30px; display:flex; justify-content:space-between; align-items:end; gap:16px; }
.tuile-texte strong{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem, 2.6vw, 2.5rem); line-height:1; margin-top:10px; }
.tuile-texte .fleche{ width:48px; height:48px; border:1px solid var(--line-clair); display:grid; place-items:center; transition:background .4s, color .4s; flex:none; }
.tuile:hover .fleche{ background:var(--blanc); color:var(--noir); }
.fleche svg{ width:16px; height:16px; }

/* Rangée de produits */
.section{ padding:clamp(80px, 10vw, 140px) 0; }
.tete-section{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
.tete-section .label{ display:block; color:var(--brun); margin-bottom:16px; }

.grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:44px 20px; }
.carte{ display:block; }
.carte-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--lin); }
.carte-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .7s var(--ease), transform 1.4s var(--ease); }
.carte-media .deux{ opacity:0; }
.carte:hover .carte-media .deux{ opacity:1; }
.carte:hover .carte-media img{ transform:scale(1.035); }
.carte-tag{ position:absolute; z-index:2; top:14px; left:14px; background:var(--ivoire); padding:6px 10px; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
.carte-ajout{
  position:absolute; z-index:2; left:12px; right:12px; bottom:12px; height:46px;
  background:rgba(244,241,236,.96); font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.carte:hover .carte-ajout{ opacity:1; transform:none; }
.carte-ajout:hover{ background:var(--noir); color:var(--blanc); }
.carte-info{ padding-top:16px; display:grid; gap:4px; font-size:14px; }
.carte-info .ligne{ display:flex; justify-content:space-between; gap:12px; }
.carte-info .type{ font-size:12px; color:var(--pierre); }
.pastilles{ display:flex; gap:7px; margin-top:8px; }
.pastilles i{ width:12px; height:12px; border-radius:50%; outline:1px solid var(--line); outline-offset:2px; }

/* Bloc éditorial partagé (photo + panneau noir) */
.edito{ display:grid; grid-template-columns:1.15fr 1fr; min-height:min(92vh, 900px); }
.edito-photo{ position:relative; overflow:hidden; }
.edito-photo img{ width:100%; height:100%; object-fit:cover; }
.edito-texte{ background:var(--noir); color:rgba(255,255,255,.76); padding:clamp(48px,7vw,120px); display:flex; flex-direction:column; justify-content:center; }
.edito-texte .label{ color:var(--blanc); margin-bottom:28px; }
.edito-texte h2{ color:var(--blanc); margin-bottom:30px; }
.edito-texte p{ max-width:30em; margin-bottom:18px; }
.edito-texte .btn{ margin-top:22px; align-self:flex-start; }

/* Bandeau plein écran avec citation */
.bandeau{ position:relative; height:min(88vh, 860px); overflow:hidden; color:var(--blanc); display:grid; place-items:center; text-align:center; }
.bandeau img{ position:absolute; inset:-10% 0; width:100%; height:120%; object-fit:cover; will-change:transform; }
.bandeau::after{ content:''; position:absolute; inset:0; background:rgba(20,18,16,.38); }
.bandeau-texte{ position:relative; z-index:2; padding:0 var(--gutter); }
.bandeau-texte .label{ display:block; margin-bottom:26px; }
.bandeau h2{ color:var(--blanc); font-size:clamp(2.6rem, 7vw, 6.6rem); }

/* Engagements */
.engagements{ background:var(--bleu); display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.engagements div{ padding:44px 28px; }
.engagements div + div{ border-left:1px solid var(--line); }
.engagements .label{ display:block; margin-bottom:12px; }
.engagements p{ font-size:14px; color:var(--pierre); }

/* Instagram */
.insta-tete{ text-align:center; padding:clamp(80px,9vw,120px) var(--gutter) 40px; }
.insta-tete .label{ display:block; color:var(--brun); margin-bottom:14px; }
.insta{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; }
.insta a{ aspect-ratio:1; overflow:hidden; display:block; position:relative; }
.insta img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s; }
.insta a:hover img{ transform:scale(1.06); filter:brightness(.85); }

/* Lettre d'info */
.lettre{ background:var(--noir); color:var(--blanc); text-align:center; padding:clamp(80px,10vw,140px) var(--gutter); }
.lettre .label{ display:block; margin-bottom:22px; color:rgba(255,255,255,.6); }
.lettre h2{ color:var(--blanc); margin-bottom:18px; }
.lettre p{ color:rgba(255,255,255,.66); max-width:30em; margin:0 auto 40px; }
.lettre form{ display:flex; max-width:520px; margin:0 auto; border-bottom:1px solid rgba(255,255,255,.4); }
.lettre input{ flex:1; min-width:0; background:none; border:0; height:56px; color:var(--blanc); font-size:15px; outline:none; }
.lettre input::placeholder{ color:rgba(255,255,255,.5); }
.lettre button{ font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; padding:0 4px 0 18px; }

/* ---------- Pied de page ---------- */
.pied{ background:var(--noir); color:rgba(255,255,255,.62); border-top:1px solid rgba(255,255,255,.1); padding:72px 0 32px; font-size:14px; }
.pied-grille{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.pied .wordmark{ color:var(--blanc); font-size:38px; padding-left:0; }
.pied-marque p{ margin-top:22px; max-width:24em; }
.pied h4{ color:var(--blanc); font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; margin-bottom:20px; }
.pied ul{ list-style:none; display:grid; gap:11px; }
.pied a:hover{ color:var(--blanc); }
.reseaux{ display:flex; gap:20px; margin-top:26px; }
.reseaux a{ font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--blanc); }
.pied-bas{ margin-top:64px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12px; }
.paiements{ display:flex; gap:18px; flex-wrap:wrap; letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; color:rgba(255,255,255,.8); }

/* ---------- Page boutique ---------- */
.page-tete{ padding-block:clamp(56px,8vw,110px) 40px; }
.fil{ font-size:12px; color:var(--pierre); margin-bottom:28px; }
.fil a:hover{ color:var(--noir); }
.page-tete h1{ font-size:clamp(2.8rem, 7vw, 6rem); }
.page-tete p{ max-width:36em; margin-top:22px; color:var(--pierre); }
.filtres{
  position:sticky; top:var(--header-h); z-index:20; background:var(--ivoire);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:44px;
}
.filtres-in{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:16px; flex-wrap:wrap; }
.puces{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.puces::-webkit-scrollbar{ display:none; }
.puces button{ font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; padding:12px 18px; white-space:nowrap; color:var(--noir); border:1px solid var(--line); background:var(--blanc); transition:background .3s, color .3s, border-color .3s; }
.puces button:hover{ border-color:var(--noir); }
.puces button[aria-pressed="true"]{ background:var(--noir); color:var(--ivoire); border-color:var(--noir); }
.coloris-filtre{ display:flex; gap:12px; align-items:center; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--noir); }
.coloris-filtre [data-coloris]{ display:flex; gap:8px; }
.coloris-filtre button{ display:flex; align-items:center; gap:9px; padding:9px 14px 9px 10px; border:1px solid var(--line); background:var(--blanc); font-size:13px; letter-spacing:.04em; text-transform:none; color:var(--noir); transition:border-color .3s, background .3s; }
.coloris-filtre button i{ width:18px; height:18px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.coloris-filtre button:hover{ border-color:var(--noir); }
.coloris-filtre button[aria-pressed="true"]{ border-color:var(--brun); background:var(--lin); box-shadow:inset 0 0 0 1px var(--brun); }
.compte{ font-size:13px; color:var(--noir); white-space:nowrap; }
.carte-edito{ grid-column:span 2; position:relative; overflow:hidden; color:var(--blanc); min-height:100%; }
.carte-edito img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.carte-edito::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); }
.carte-edito div{ position:absolute; z-index:2; left:32px; right:32px; bottom:32px; }
.carte-edito strong{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.4vw,3.2rem); line-height:1.05; margin:12px 0 22px; }

/* ---------- Fiche produit ---------- */
.produit{ display:grid; grid-template-columns:1.35fr 1fr; gap:0; border-bottom:1px solid var(--line); }
.galerie{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.galerie img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--lin); cursor:zoom-in; }
.galerie img:first-child{ grid-column:span 2; aspect-ratio:1/1; }
.galerie-points{ display:none; }
.fiche{ position:sticky; top:var(--header-h); align-self:start; padding:48px clamp(24px,4.5vw,80px) 64px; }
.fiche .fil{ margin-bottom:34px; }
.fiche h1{ font-size:clamp(2.4rem, 3.8vw, 3.6rem); }
.fiche .prix{ font-size:18px; margin:16px 0 6px; }
.fiche .sous-prix{ font-size:13px; color:var(--pierre); }
.fiche-bloc{ padding:26px 0; border-bottom:1px solid var(--line); }
.fiche-bloc:first-of-type{ border-top:1px solid var(--line); margin-top:30px; }
.fiche-bloc .tete{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.fiche-bloc .tete span{ font-size:13px; color:var(--pierre); }
.fiche-bloc .tete button{ font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.variantes{ display:flex; gap:10px; }
.variantes a{ width:64px; height:80px; outline:1px solid transparent; outline-offset:3px; transition:outline-color .3s; background:var(--lin); }
.variantes a img{ width:100%; height:100%; object-fit:cover; }
.variantes a[aria-current]{ outline-color:var(--noir); }
.tailles-choix{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tailles-choix button{ height:50px; border:1px solid var(--line); font-size:13px; letter-spacing:.1em; transition:border-color .3s, background .3s, color .3s; }
.tailles-choix button:hover{ border-color:var(--noir); }
.tailles-choix button[aria-pressed="true"]{ background:var(--noir); color:var(--blanc); border-color:var(--noir); }
.aide-taille{ font-size:12.5px; color:var(--pierre); margin-top:12px; min-height:1.4em; }
.achat{ display:grid; grid-template-columns:auto 1fr; gap:10px; margin-top:28px; }
.qte-choix{ display:flex; border:1px solid var(--line); height:52px; }
.qte-choix button{ width:42px; }
.qte-choix span{ width:30px; display:grid; place-items:center; }
.rassure{ list-style:none; display:grid; gap:10px; margin-top:24px; font-size:13px; color:var(--pierre); }
.rassure li{ display:flex; gap:12px; align-items:center; }
.rassure svg{ width:18px; height:18px; flex:none; color:var(--noir); }
.volets details{ border-bottom:1px solid var(--line); }
.volets summary{ list-style:none; cursor:pointer; padding:20px 0; display:flex; justify-content:space-between; font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; }
.volets summary::-webkit-details-marker{ display:none; }
.volets summary::after{ content:'+'; font-size:18px; font-weight:300; letter-spacing:0; line-height:1; transition:transform .4s var(--ease); }
.volets details[open] summary::after{ transform:rotate(45deg); }
.volets details > div{ padding-bottom:22px; font-size:14.5px; color:var(--encre); }
.volets ul{ padding-left:18px; display:grid; gap:4px; }

/* Visionneuse */
.visionneuse{ position:fixed; inset:0; z-index:95; background:var(--ivoire); display:none; place-items:center; cursor:zoom-out; }
.visionneuse.on{ display:grid; }
.visionneuse img{ max-width:100%; max-height:100vh; object-fit:contain; }

/* ---------- Guide des tailles ---------- */
.trouveur{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); }
.trouveur > div{ background:var(--ivoire);
}
.trouveur > .resultat{ background:var(--bleu);
}
.trouveur > div{ padding:clamp(32px,4vw,64px); }
.trouveur label{ display:block; margin-bottom:18px; }
.trouveur select{
  width:100%; height:60px; border:0; border-bottom:1px solid var(--noir); background:transparent; font-size:20px; font-family:var(--serif);
  appearance:none; cursor:pointer; outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23161412' stroke-width='1.2'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center;
}
.resultat{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.resultat .grande{ font-family:var(--serif); font-size:clamp(5rem, 12vw, 10rem); line-height:.9; color:var(--noir); transition:opacity .3s; }
.resultat p{ margin-top:18px; color:var(--pierre); max-width:26em; }
.resultat p strong{ color:var(--noir); font-weight:400; }
.tableau{ width:100%; border-collapse:collapse; font-size:14px; }
.tableau th{ text-align:left; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; padding:16px 12px 16px 0; border-bottom:1px solid var(--noir); }
.tableau td{ padding:20px 12px 20px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.tableau td:last-child, .tableau th:last-child{ text-align:right; padding-right:0; }
.tableau td:last-child{ font-family:var(--serif); font-size:22px; }
.etapes{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.etapes .num{ font-family:var(--script); font-size:64px; line-height:1; color:var(--brun); }
.etapes h3{ margin:18px 0 10px; font-weight:500; }
.etapes p{ color:var(--pierre); font-size:14.5px; }

/* ---------- Histoire ---------- */
.histoire-hero{ display:grid; grid-template-columns:1fr 1fr; min-height:calc(100svh - var(--header-h) - 34px); }
.histoire-hero img{ width:100%; height:100%; object-fit:cover; }
.histoire-hero > div{ display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,6vw,110px); }
.histoire-hero h1{ font-size:clamp(2.8rem, 5.2vw, 5.4rem); }
.histoire-hero p{ margin-top:30px; max-width:28em; color:var(--pierre); font-size:17px; }
.histoire-hero .signature{ margin-top:44px; display:flex; gap:18px; align-items:center; }
.histoire-hero .signature img{ width:64px; height:64px; border-radius:50%; object-fit:cover; }
.histoire-hero .label{ color:var(--pierre); margin-bottom:28px; }
.texte-long{ max-width:680px; margin:0 auto; font-size:18px; line-height:1.8; }
.texte-long p + p{ margin-top:1.3em; }
.texte-long p:first-child::first-letter{ font-family:var(--script); font-size:5.2em; float:left; line-height:.8; padding:8px 14px 0 0; color:var(--brun); }
.citation{ font-family:var(--serif); font-size:clamp(1.8rem,3.8vw,3.4rem); line-height:1.2; text-align:center; max-width:20em; margin:0 auto; color:var(--noir); }
.citation + .label{ display:block; text-align:center; margin-top:30px; color:var(--pierre); }
.trio{ display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:2px; height:min(82vh, 780px); }
.trio img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Aide ---------- */
.aide-grille{ display:grid; grid-template-columns:1fr 2fr; gap:clamp(40px,6vw,100px); }
.aide-nav{ position:sticky; top:calc(var(--header-h) + 40px); align-self:start; display:grid; gap:12px; }
.aide-nav a{ font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--pierre); }
.aide-nav a:hover{ color:var(--noir); }
.aide-groupe + .aide-groupe{ margin-top:72px; }
.aide-groupe h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:18px; }
.contact-form{ display:grid; gap:18px; margin-top:30px; }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--noir); padding:14px 0; font-size:15px; outline:none; font-family:var(--sans); font-weight:300;
}
.contact-form textarea{ min-height:130px; resize:vertical; }
.contact-form .deux{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* Pays */
.pays-btn{ display:inline-flex; gap:8px; align-items:center; }

/* ---------- Lavable en machine ---------- */
.lavage{ background:var(--bleu); padding:clamp(80px,10vw,140px) 0; overflow:hidden; }
.lavage-in{ display:grid; grid-template-columns:auto 1fr; gap:clamp(40px,7vw,120px); align-items:center; }
.lavage .label{ display:block; color:var(--brun); margin-bottom:18px; }
.lavage h2{ margin-bottom:24px; }
.lavage p{ max-width:32em; margin-bottom:28px; color:var(--encre); }
.lavage-badge{ position:relative; width:clamp(200px,26vw,320px); aspect-ratio:1; color:var(--noir); }
.lavage-cercle{ position:absolute; inset:0; width:100%; height:100%; animation:tourne 18s linear infinite; }
.lavage-cercle text{ font-family:var(--sans); font-size:12.5px; text-transform:uppercase; fill:var(--noir); }
.lavage-machine{ position:absolute; inset:30%; width:40%; height:40%; color:var(--brun); }
.lavage-eau{ animation:vague 2.4s ease-in-out infinite; transform-origin:center; }
@keyframes tourne{ to{ transform:rotate(360deg); } }
@keyframes vague{ 50%{ transform:translateX(3px) scaleY(1.25); } }
@media (max-width:640px){
  .lavage-in{ grid-template-columns:1fr; justify-items:start; }
}

/* Rebond du compteur du panier */
[data-panier-nb]{ display:inline-block; }
.rebond{ animation:rebond .6s var(--ease); }
@keyframes rebond{ 30%{ transform:scale(1.7); color:var(--brun); } 60%{ transform:scale(.9); } }

/* Transitions douces entre les pages (Chrome, Edge, Safari ; ignoré ailleurs) */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:.25s ease-out both page-sort; }
::view-transition-new(root){ animation:.45s var(--ease) both page-entre; }
@keyframes page-sort{ to{ opacity:0; } }
@keyframes page-entre{ from{ opacity:0; transform:translateY(12px); } }

/* Les photos à effet de profondeur sont légèrement agrandies pour ne jamais laisser de bord vide */
.edito-photo img, .histoire-hero > img{ will-change:transform; }
.histoire-hero{ overflow:hidden; }
.js .histoire-hero > img.revele{ transform:none; transition:opacity 1.3s var(--ease); }

/* ---------- Histoire : récit chapitre par chapitre ---------- */
.recit{ padding:clamp(80px,10vw,140px) 0; }
.recit-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,120px); }
.recit-photos{ position:sticky; top:calc(var(--header-h) + 40px); height:calc(100vh - var(--header-h) - 80px); max-height:760px; overflow:hidden; background:var(--lin); }
.recit-photos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity 1s var(--ease), transform 1.6s var(--ease); }
.recit-photos img.actif{ opacity:1; transform:none; }
.recit-compteur{ position:absolute; left:20px; bottom:18px; z-index:2; background:var(--ivoire); padding:8px 14px; font-size:12px; letter-spacing:.2em; }
.recit-compteur b{ font-weight:400; color:var(--brun); }
.chapitre{ min-height:78vh; display:flex; flex-direction:column; justify-content:center; opacity:.28; transition:opacity .7s var(--ease); }
.chapitre.actif{ opacity:1; }
.chapitre-num{ font-family:var(--script); font-size:clamp(4rem,7vw,6.5rem); line-height:1; color:var(--brun); }
.chapitre h2{ margin:10px 0 22px; font-size:clamp(2rem,3.6vw,3.2rem); }
.chapitre p{ font-size:clamp(17px,1.4vw,20px); line-height:1.75; max-width:30em; }
.chapitre-photo-mobile{ display:none; }

/* Valeurs */
.valeurs-section{ background:var(--bleu); }
.valeurs{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(34,26,33,.08); }
.valeur{ background:var(--bleu); padding:clamp(28px,3.5vw,52px); transition:background .5s var(--ease), color .5s; }
.valeur:hover{ background:var(--noir); color:var(--ivoire); }
.valeur:hover h3, .valeur:hover .valeur-num{ color:var(--ivoire); }
.valeur-num{ font-size:12px; letter-spacing:.24em; color:var(--brun); }
.valeur h3{ font-family:var(--script); font-weight:400; font-size:clamp(2.8rem,4.4vw,4rem); color:var(--noir); margin:18px 0 14px; letter-spacing:0; transition:color .5s; }
.valeur p{ font-size:15px; line-height:1.7; }

/* Citation qui se révèle mot à mot */
.citation-section{ text-align:center; }
.citation-section .label{ display:block; margin-top:30px; color:var(--pierre); }
.citation-progressive span{ color:rgba(34,26,33,.16); transition:color .4s; }
.citation-progressive span.lu{ color:var(--noir); }

@media (max-width:1024px){
  .recit-in{ grid-template-columns:1fr; }
  .recit-photos{ display:none; }
  .chapitre{ min-height:0; opacity:1; padding:28px 0; }
  .chapitre-photo-mobile{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; margin-bottom:24px; }
  .valeurs{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .chapitre{ opacity:1; }
  .citation-progressive span{ color:var(--noir); }
}

/* Marqueurs de maquette */

/* Toast */
.toast{
  position:fixed; z-index:96; left:50%; bottom:28px; transform:translate(-50%, 24px); opacity:0; pointer-events:none;
  background:var(--noir); color:var(--blanc); padding:14px 22px; font-size:13px;
  transition:transform .5s var(--ease), opacity .4s; white-space:nowrap;
}
.toast.on{ transform:translate(-50%, 0); opacity:1; }

/* Apparitions */
/* Les effets ne s'activent que si le script du site tourne (classe « js » posée dans <head>) */
.js .apparait{ opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .apparait.vu{ opacity:1; transform:none; }
.apparait-d1{ transition-delay:.1s; } .apparait-d2{ transition-delay:.2s; } .apparait-d3{ transition-delay:.3s; }
.js .revele{ opacity:0; transform:scale(1.03); transition:opacity 1.3s var(--ease), transform 1.8s var(--ease); }
.js .revele.vu{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .apparait, .hero-texte .label, .hero h1, .hero-ctas{ opacity:1; transform:none; }
  .js .revele, .js .apparait{ opacity:1; transform:none; }
}

/* ---------- Tablette ---------- */
@media (max-width:1024px){
  .nav-g, .nav-d .txt{ display:none; }
  .burger, .icone{ display:grid; place-items:center; }
  .header-in{ grid-template-columns:auto 1fr auto; }
  .header-in .wordmark{ justify-self:center; }
  .grille{ grid-template-columns:repeat(2,1fr); gap:36px 12px; }
  .edito, .produit, .histoire-hero, .aide-grille, .trouveur{ grid-template-columns:1fr; }
  .edito-photo{ aspect-ratio:4/5; }
  .engagements{ grid-template-columns:1fr 1fr; }
  .engagements div:nth-child(3){ border-left:0; }
  .engagements div:nth-child(n+3){ border-top:1px solid var(--line); }
  .pied-grille{ grid-template-columns:1fr 1fr; }
  .pied-marque{ grid-column:span 2; }
  .insta{ grid-template-columns:repeat(3,1fr); }
  .fiche{ position:static; }
  .aide-nav{ position:static; display:flex; flex-wrap:wrap; gap:20px; }
  .histoire-hero img{ aspect-ratio:4/5; height:auto; }
  .histoire-hero{ min-height:0; }
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  :root{ --header-h:60px; }
  .wordmark{ font-size:28px; }
  .hero-images{ grid-template-columns:1fr; }
  .hero-images img + img{ display:none; }
  .hero-ctas .btn{ flex:1 1 100%; }
  .hero-defiler{ display:none; }
  .tuiles{ grid-template-columns:1fr; }
  .tuile{ aspect-ratio:4/4.6; }
  .carte-ajout{ display:none; }
  .carte-info{ font-size:13px; }
  .carte-info .ligne{ flex-direction:column; gap:2px; }
  .carte-edito{ grid-column:span 2; min-height:420px; }
  .engagements{ grid-template-columns:1fr; }
  .engagements div + div{ border-left:0; border-top:1px solid var(--line); }
  .engagements div{ padding:30px 4px; }
  .pied-grille{ grid-template-columns:1fr; }
  .pied-marque{ grid-column:auto; }
  .galerie{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:0; }
  .galerie::-webkit-scrollbar{ display:none; }
  .galerie img, .galerie img:first-child{ flex:0 0 100%; scroll-snap-align:start; aspect-ratio:4/5; }
  .galerie-points{ display:flex; justify-content:center; gap:8px; padding:14px 0 0; }
  .galerie-points i{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .3s; }
  .galerie-points i.on{ background:var(--noir); }
  .fiche{ padding:28px var(--gutter) 48px; }
  .coloris-filtre > span, .compte{ display:none; }
  .filtres-in{ gap:12px; }
  .coloris-filtre{ width:100%; }
  .coloris-filtre [data-coloris]{ overflow-x:auto; }
  .etapes{ grid-template-columns:1fr; }
  .trio{ grid-template-columns:1fr 1fr; height:auto; }
  .trio img{ aspect-ratio:3/4; height:auto; }
  .trio img:nth-child(3){ display:none; }
  .contact-form .deux{ grid-template-columns:1fr; }
  .texte-long{ font-size:16.5px; }
}

/* ---------- Pages légales ---------- */
.legal{ max-width:760px; margin:0 auto; font-size:16px; line-height:1.75; padding-bottom:clamp(80px,10vw,140px); }
.legal h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin:56px 0 16px; }
.legal p + p, .legal ul + p, .legal p + ul{ margin-top:1em; }
.legal ul{ padding-left:20px; display:grid; gap:6px; }
.legal a{ text-decoration:underline; }
.legal .avertissement{ border:1px solid var(--line); background:var(--blanc); padding:18px 22px; font-size:14px; color:var(--pierre); }