:root{
  --cream:#F9F5EC;
  --cream-deep:#F0E8D8;
  --walnut:#8B5E34;
  --walnut-deep:#6E4626;
  --pine:#25334A;
  --pine-soft:#3A4A63;
  --rose:#B9C6DC;
  --sage:#8A9A7D;
  --ink:#2A2621;
  --ink-soft:#6b6357;
  --radius:20px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Karla', sans-serif; line-height:1.6; overflow-x:hidden;
}
h1,h2,h3,.display{ font-family:'Cormorant', serif; color:var(--pine); letter-spacing:-0.01em; font-weight:500;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
img,.ph{display:block; width:100%;}

/* Placeholder photo blocks — stand in for real product photography until real photos are added */
.ph{
  aspect-ratio:4/5; border-radius:14px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.5), transparent 55%),
    linear-gradient(135deg, #E7DCC5, #D9C8A6);
}
.ph.wide{ aspect-ratio:16/10; }
.ph.square{ aspect-ratio:1/1; }
.ph svg{ position:absolute; inset:0; margin:auto; width:38%; opacity:0.35; }
.ph-label{
  position:absolute; bottom:10px; left:10px; font-size:0.65rem; color:var(--walnut-deep);
  background:rgba(249,245,236,0.85); padding:3px 9px; border-radius:999px; letter-spacing:0.03em;
}

/* ---------- Header ---------- */
header{ position:sticky; top:0; z-index:50; background:rgba(249,245,236,0.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(38,51,43,0.08);}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1180px; margin:0 auto; position:relative;}
.brand{ display:flex; align-items:center; gap:12px;}
.brand-mark{ width:42px; height:42px; border-radius:50%; object-fit:cover; display:block;}
.brand-name{ font-family:'Cormorant', serif; font-size:1.08rem; color:var(--pine); font-weight:600;}
.nav-links{ display:flex; gap:24px; font-size:0.85rem; color:var(--ink-soft);}
.nav-links a{ position:relative; transition:color .2s; white-space:nowrap;}
.nav-links a:hover, .nav-links a.active{ color:var(--walnut-deep);}
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--walnut); transition:width .25s ease;}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%;}
.nav-cta{ background:var(--walnut); color:var(--cream); padding:10px 20px; border-radius:999px; font-size:0.84rem; white-space:nowrap; transition:background .2s, transform .2s;}
.nav-cta:hover{ background:var(--pine); transform:translateY(-1px);}
.burger{ display:none; background:none; border:none; font-size:1.4rem; color:var(--pine); cursor:pointer;}

/* ---------- Menu déroulant (sous-catégories) ---------- */
.nav-drop{ position:relative;}
.nav-drop > a::after{ content:" ▾"; font-size:0.7em; opacity:0.7;}
.nav-drop-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  background:#fff; border-radius:14px; box-shadow:0 20px 40px rgba(38,51,43,0.14); border:1px solid rgba(38,51,43,0.07);
  padding:10px; min-width:220px; display:grid; gap:2px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease; z-index:60;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.nav-drop-menu a{ display:block; padding:9px 14px; border-radius:8px; font-size:0.84rem; color:var(--ink); white-space:nowrap;}
.nav-drop-menu a:hover{ background:var(--cream-deep); color:var(--walnut-deep);}
.nav-drop-menu a::after{ content:none;}

/* ---------- Barre de sous-catégories (en page) ---------- */
.subnav{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:26px;}
.subnav a{ font-size:0.82rem; padding:9px 18px; border-radius:999px; background:#fff; border:1px solid rgba(38,51,43,0.12); color:var(--ink-soft); transition:background .2s, color .2s, border-color .2s;}
.subnav a:hover, .subnav a.active{ background:var(--pine); border-color:var(--pine); color:var(--cream);}

/* ---------- Photo réelle mise en avant ---------- */
.showcase{ border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 50px rgba(38,51,43,0.14);}
.showcase img{ width:100%; display:block;}
.showcase-caption{ text-align:center; font-size:0.85rem; color:var(--ink-soft); margin-top:14px; font-style:italic;}

/* ---------- Galerie premium asymétrique (page produit haut de gamme) ---------- */
.feature-gallery{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:180px; gap:18px;}
.feature-gallery .g-item{ border-radius:18px; overflow:hidden; position:relative;}
.feature-gallery .g-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.feature-gallery .g-item:hover img{ transform:scale(1.05);}
.feature-gallery .g-big{ grid-column:span 2; grid-row:span 2;}
.feature-gallery .g-caption{ position:absolute; bottom:0; left:0; right:0; padding:14px 16px; font-size:0.78rem; color:#fff; background:linear-gradient(to top, rgba(21,28,20,0.75), transparent); opacity:0; transition:opacity .3s ease;}
.feature-gallery .g-item:hover .g-caption{ opacity:1;}

/* ---------- Bloc "pourquoi cette création" (page produit premium) ---------- */
.feature-list{ display:grid; gap:22px;}
.feature-row{ display:flex; gap:16px; align-items:flex-start;}
.feature-row .icon{ width:44px; height:44px; border-radius:12px; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; color:var(--walnut-deep); flex-shrink:0;}
.feature-row h4{ font-size:1rem; margin-bottom:4px; color:var(--pine); font-family:'Karla',sans-serif; font-weight:700;}
.feature-row p{ font-size:0.88rem; color:var(--ink-soft); margin:0;}

.split-block{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}

/* ---------- Cartes thème (variantes de valises) ---------- */
.theme-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.theme-card{ text-align:center;}
.theme-card .ph{ aspect-ratio:1/1; border-radius:18px; overflow:hidden; margin-bottom:16px; box-shadow:0 14px 30px rgba(38,51,43,0.1);}
.theme-card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.theme-card:hover .ph img{ transform:scale(1.06);}
.theme-card h4{ font-family:'Cormorant', serif; font-size:1.15rem; color:var(--pine); font-weight:600;}
.theme-card span{ font-size:0.82rem; color:var(--ink-soft);}

/* ---------- Callout / citation mise en avant ---------- */
.callout{ border-left:3px solid var(--walnut); padding:8px 0 8px 32px; max-width:640px; margin:0 auto;}
.callout p{ font-size:1.15rem; font-style:italic; color:var(--pine); line-height:1.7; font-family:'Cormorant', serif;}
.callout p + p{ margin-top:16px;}
.theme-tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px;}
.theme-tags span{ font-size:0.8rem; padding:8px 16px; border-radius:999px; background:#fff; border:1px solid rgba(38,51,43,0.12); color:var(--ink-soft);}

/* ---------- Bloc tarifs ---------- */
.price-card{ background:#fff; border-radius:24px; padding:44px; border:1px solid rgba(38,51,43,0.08); max-width:560px; margin:0 auto; box-shadow:0 20px 44px rgba(38,51,43,0.09); position:relative; overflow:hidden;}
.price-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--walnut), var(--sage));}
.price-card .price-tag{ font-family:'Cormorant', serif; font-size:3.2rem; font-weight:700; color:var(--walnut-deep); text-align:center; margin-bottom:4px; line-height:1;}
.price-card .price-sub{ text-align:center; color:var(--ink-soft); font-size:0.9rem; margin-bottom:30px; font-weight:600;}
.price-card h4{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--sage); font-weight:700; margin-bottom:12px;}
.price-list{ list-style:none; margin-bottom:28px;}
.price-list li{ padding:9px 0; border-bottom:1px dashed rgba(38,51,43,0.12); color:var(--ink-soft); font-size:0.92rem; display:flex; gap:10px; align-items:baseline;}
.price-list li::before{ content:"✓"; color:var(--sage); font-weight:700; flex-shrink:0;}
.price-list li:last-child{ border-bottom:none;}
.supp-list{ list-style:none;}
.supp-list li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(38,51,43,0.12); font-size:0.9rem; color:var(--ink-soft);}
.supp-list li:last-child{ border-bottom:none;}
.supp-list li b{ color:var(--pine); font-weight:600; white-space:nowrap;}

/* ---------- Badge prix (hero) ---------- */
.price-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--pine); color:var(--cream); font-family:'Cormorant', serif; font-size:1.15rem; font-weight:700; padding:10px 22px; border-radius:999px; margin-top:6px; margin-bottom:22px;}
.price-badge svg{ flex-shrink:0;}

/* ---------- Prix sur carte (hub) ---------- */
.card-price{ display:inline-block; margin-top:8px; font-family:'Cormorant', serif; font-weight:700; color:var(--walnut-deep); font-size:1.05rem; background:var(--cream-deep); padding:4px 14px; border-radius:999px;}
.banner-hero{ position:relative; min-height:64vh; display:flex; align-items:flex-end; overflow:hidden; color:var(--cream);}
.banner-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.banner-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(21,28,20,0.82) 0%, rgba(21,28,20,0.42) 45%, rgba(21,28,20,0.12) 75%, rgba(21,28,20,0.05) 100%);
}
.banner-hero .wrap{ position:relative; z-index:2; padding-bottom:64px; padding-top:64px;}
.banner-hero .breadcrumb{ color:rgba(249,245,236,0.75);}
.banner-hero .breadcrumb a{ color:rgba(249,245,236,0.85);}
.banner-hero .eyebrow{ color:var(--rose); opacity:1; animation:none;}
.banner-hero h1{ color:var(--cream); max-width:640px; opacity:1; animation:none;}
.banner-hero h1 em{ color:#E8C9A8;}
.banner-hero p.lead{ color:rgba(249,245,236,0.88); max-width:560px; opacity:1; animation:none;}

/* ---------- Cartes de sous-catégories (premium) ---------- */
.subcat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.subcat-card{ background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(38,51,43,0.07); transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column;}
.subcat-card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(38,51,43,0.12);}
.subcat-card .ph{ border-radius:0; aspect-ratio:4/3; overflow:hidden;}
.subcat-card .ph img{ transition:transform .5s ease;}
.subcat-card:hover .ph img{ transform:scale(1.06);}
.subcat-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1;}
.subcat-body h3{ font-size:1.15rem; margin-bottom:10px;}
.subcat-body p{ color:var(--ink-soft); font-size:0.9rem; margin-bottom:20px; flex:1;}
.subcat-cta{ font-size:0.84rem; font-weight:600; color:var(--walnut-deep); display:inline-flex; align-items:center; gap:6px;}
.subcat-cta svg{ transition:transform .2s ease;}
.subcat-card:hover .subcat-cta svg{ transform:translateX(3px);}

/* ---------- Collection du moment (page collections saisonnières) ---------- */
.season-feature{
  display:grid; grid-template-columns:1.3fr 1fr; border-radius:28px; overflow:hidden;
  background:#fff; border:1px solid rgba(38,51,43,0.07); box-shadow:0 26px 54px rgba(38,51,43,0.12);
  margin-bottom:28px; transition:transform .3s ease, box-shadow .3s ease;
}
.season-feature:hover{ transform:translateY(-4px); box-shadow:0 30px 60px rgba(38,51,43,0.16);}
.season-feature-media{ position:relative; min-height:360px; overflow:hidden;}
.season-feature-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.season-feature:hover .season-feature-media img{ transform:scale(1.05);}
.season-feature-media .ph{ height:100%; border-radius:0; aspect-ratio:auto; margin:0;}
.season-feature-body{ padding:48px 48px 48px 44px; display:flex; flex-direction:column; justify-content:center;}
.season-feature-tag{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--walnut-deep); font-weight:700; margin-bottom:16px;}
.season-feature-body h3{ font-family:'Cormorant', serif; font-size:2rem; color:var(--pine); margin-bottom:14px; font-weight:600;}
.season-feature-body p{ color:var(--ink-soft); font-size:0.98rem; margin-bottom:26px;}
.season-feature-body .subcat-cta{ font-size:0.92rem;}
.season-secondary .subcat-card .ph{ background:linear-gradient(135deg,#EFE6D3,#E3D5B8);}

@media (max-width:900px){
  .season-feature{ grid-template-columns:1fr;}
  .season-feature-media{ min-height:220px;}
  .season-feature-body{ padding:32px 26px;}
}

/* ---------- Hero (accueil) ---------- */
.hero{
  position:relative; padding:76px 32px 90px; overflow:hidden;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(139,94,52,0.10), transparent 55%),
    radial-gradient(ellipse at 88% 78%, rgba(138,154,125,0.14), transparent 55%);
}
.hero-grid{ display:grid; grid-template-columns:0.95fr 1.15fr; gap:56px; align-items:center; max-width:1180px; margin:0 auto;}
.hero-text{ text-align:left;}
.hero-line{ width:52px; height:1.5px; background:var(--walnut); margin:0 0 22px; transform-origin:left; animation:draw 1.1s ease forwards;}
@keyframes draw{ from{width:0;} to{width:52px;} }
.eyebrow{ font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--walnut-deep); font-weight:700; margin-bottom:16px; opacity:0; animation:rise .8s ease forwards .15s;}
.hero h1{ font-size:clamp(2.2rem, 3.6vw, 3.4rem); max-width:560px; margin:0 0 22px; opacity:0; animation:rise .9s ease forwards .3s;}
.hero h1 em{ font-style:italic; color:var(--walnut);}
.hero p.lead{ max-width:460px; margin:0 0 34px; color:var(--ink-soft); font-size:1.04rem; opacity:0; animation:rise .9s ease forwards .45s;}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation:rise .9s ease forwards .6s;}
.btn-primary,.btn-secondary{ padding:14px 28px; border-radius:999px; font-size:0.92rem; font-weight:500; transition:transform .2s, box-shadow .2s, background .2s; display:inline-block; border:none; cursor:pointer; font-family:'Karla',sans-serif;}
.btn-primary{ background:var(--pine); color:var(--cream);}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(38,51,43,0.25);}
.btn-secondary{ background:transparent; color:var(--pine); border:1.4px solid rgba(38,51,43,0.22);}
.btn-secondary:hover{ border-color:var(--pine); transform:translateY(-2px);}
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

.reassurance{ display:flex; flex-wrap:wrap; gap:22px 28px; margin-top:36px;}
.reassurance li{ list-style:none; display:flex; align-items:center; gap:9px; font-size:0.82rem; color:var(--ink-soft); font-weight:500;}
.reassurance svg{ flex-shrink:0; color:var(--walnut);}

/* Hero sans photo (colonne unique, centrée) — règles renforcées pour primer sur .hero h1 / .hero p.lead */
.hero .hero-grid.hero-grid-solo{ grid-template-columns:1fr; max-width:720px; margin:0 auto; width:100%;}
.hero .hero-grid-solo .hero-text{ text-align:center; width:100%; margin:0 auto;}
.hero .hero-grid-solo .hero-line{ margin:0 auto 22px;}
.hero .hero-grid-solo h1{ max-width:640px; margin:0 auto 22px;}
.hero .hero-grid-solo p.lead{ max-width:600px; margin:0 auto 34px;}
.hero .hero-grid-solo .hero-actions{ justify-content:center; margin-bottom:34px;}
.hero .hero-grid-solo .reassurance{ justify-content:center;}

.hero-photo{ position:relative;}
.hero-photo::before{
  content:""; position:absolute; inset:-24px -24px auto auto; width:78%; height:88%;
  background:radial-gradient(circle, rgba(139,94,52,0.16), transparent 70%); z-index:-1; border-radius:50%;
}
.hero-photo .ph{ aspect-ratio:5/6; border-radius:28px; opacity:0; animation:rise 1s ease forwards .5s; box-shadow:0 30px 60px rgba(38,51,43,0.16);}
.hero-photo .ph-tag{
  position:absolute; bottom:-18px; left:-18px; background:#fff; border-radius:16px; padding:14px 18px;
  box-shadow:0 16px 32px rgba(38,51,43,0.14); font-size:0.82rem; opacity:0; animation:rise 1s ease forwards .9s;
}
.hero-photo .ph-tag b{ display:block; font-family:'Cormorant', serif; color:var(--pine); font-size:0.95rem; font-weight:600;}
.hero-photo .ph-tag span{ color:var(--ink-soft);}

/* ---------- Page hero (pages catégories & pages statiques) ---------- */
.page-hero{
  padding:64px 32px 56px; text-align:center;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(139,94,52,0.10), transparent 55%),
    radial-gradient(ellipse at 88% 78%, rgba(138,154,125,0.14), transparent 55%);
}
.breadcrumb{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:18px;}
.breadcrumb a:hover{ color:var(--walnut-deep); text-decoration:underline;}
.page-hero h1{ font-size:clamp(2rem, 4vw, 2.9rem); max-width:680px; margin:0 auto 18px;}
.page-hero h1 em{ font-style:italic; color:var(--walnut);}
.page-hero p.lead{ max-width:560px; margin:0 auto; color:var(--ink-soft); font-size:1.04rem;}

/* ---------- Section shell ---------- */
section{ padding:88px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:44px; gap:24px; flex-wrap:wrap;}
.section-head .eyebrow{ margin-bottom:10px;}
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem);}
.section-head p{ color:var(--ink-soft); max-width:420px; font-size:0.94rem;}
.see-all{ font-size:0.85rem; color:var(--walnut-deep); font-weight:600; white-space:nowrap; padding-bottom:6px; border-bottom:1px solid var(--walnut-deep);}

/* ---------- Contenu éditorial / SEO (pages catégories, à propos, etc.) ---------- */
.content-block{ max-width:720px; margin:0 auto;}
.content-block h2{ font-size:1.6rem; margin-bottom:18px;}
.content-block p{ color:var(--ink-soft); margin-bottom:18px; font-size:1rem;}
.content-block p:last-child{ margin-bottom:0;}
.content-block ul{ color:var(--ink-soft); padding-left:22px; margin-bottom:18px;}
.content-block li{ margin-bottom:8px;}

/* ---------- Grille de photos (placeholders) ---------- */
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}

/* ---------- Catégories ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.cat-card{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;}
.cat-card .ph{ position:absolute; inset:0; border-radius:0; aspect-ratio:auto; height:100%; transition:transform .5s ease;}
.cat-card:hover .ph{ transform:scale(1.08);}
.cat-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(38,51,43,0.78) 0%, rgba(38,51,43,0.05) 55%); display:flex; align-items:flex-end; padding:24px; transition:background .35s ease;}
.cat-card:hover .cat-overlay{ background:linear-gradient(to top, rgba(38,51,43,0.85) 0%, rgba(38,51,43,0.15) 60%);}
.cat-overlay h3{ color:var(--cream); font-size:1.25rem; font-weight:500; transition:transform .35s ease;}
.cat-card:hover .cat-overlay h3{ transform:translateY(-4px);}
.cat-overlay span{ color:rgba(249,245,236,0.75); font-size:0.8rem; display:block; margin-top:4px;}

/* ---------- Product cards ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.prod-card{ background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(38,51,43,0.07); transition:transform .3s ease, box-shadow .3s ease;}
.prod-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px rgba(38,51,43,0.1);}
.prod-card .ph{ border-radius:0; aspect-ratio:1/1;}
.prod-badge{ position:absolute; top:12px; left:12px; background:var(--pine); color:var(--cream); font-size:0.66rem; letter-spacing:0.04em; padding:5px 11px; border-radius:999px; text-transform:uppercase; font-weight:600;}
.prod-body{ padding:18px 18px 20px;}
.prod-cat{ font-size:0.7rem; color:var(--sage); text-transform:uppercase; letter-spacing:0.05em; font-weight:700; margin-bottom:6px;}
.prod-body h3{ font-size:1.02rem; font-weight:500; margin-bottom:6px;}
.prod-price{ font-family:'Cormorant', serif; color:var(--walnut-deep); font-weight:600; font-size:0.98rem;}

/* ---------- Coups de coeur (bande sombre) ---------- */
.crush{ background:var(--pine); color:var(--cream);}
.crush .section-head h2, .crush .section-head p{ color:var(--cream);}
.crush .section-head p{ opacity:0.65;}
.crush .eyebrow{ color:var(--rose);}
.crush .prod-card{ background:#2F3E34; border-color:rgba(249,245,236,0.1);}
.crush .prod-body h3{ color:var(--cream);}
.crush .prod-price{ color:var(--rose);}
.crush .prod-cat{ color:rgba(249,245,236,0.55);}
.crush .see-all{ color:var(--rose); border-color:var(--rose);}

/* ---------- Collection saisonnière / bande CTA colorée ---------- */
.season{
  margin:0 32px; border-radius:28px; overflow:hidden; position:relative;
  background:linear-gradient(120deg, var(--pine), var(--walnut-deep));
  padding:70px 48px; color:var(--cream); text-align:center;
}
.season .eyebrow{ color:rgba(249,245,236,0.85);}
.season h2{ color:var(--cream); font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:14px;}
.season p{ color:rgba(249,245,236,0.85); max-width:460px; margin:0 auto 30px;}
.season .btn-primary{ background:var(--cream); color:var(--pine);}

/* ---------- CTA bande centrée (fin de page catégorie) ---------- */
.cta-band{ text-align:center; background:var(--cream-deep); border-radius:28px; padding:64px 40px; margin:0 32px;}
.cta-band h2{ margin-bottom:14px;}
.cta-band p{ color:var(--ink-soft); max-width:480px; margin:0 auto 30px;}
.cta-band .hero-actions{ justify-content:center; opacity:1; animation:none;}

/* ---------- Bloc valeurs ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.value-card{ text-align:center; padding:36px 24px;}
.value-card .icon-circle{ width:56px; height:56px; border-radius:50%; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:1.5rem;}
.value-card h3{ font-size:1.1rem; margin-bottom:8px;}
.value-card p{ color:var(--ink-soft); font-size:0.9rem; max-width:280px; margin:0 auto;}

/* ---------- Étapes (page Personnalisation) ---------- */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.step-card{ text-align:center; padding:12px;}
.step-num{ font-family:'Cormorant', serif; color:var(--walnut); font-size:1.6rem; font-weight:600; margin-bottom:12px;}
.step-card h3{ font-size:1.02rem; margin-bottom:8px;}
.step-card p{ color:var(--ink-soft); font-size:0.9rem;}

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:0 auto;}
.faq-item{ padding:26px 0; border-bottom:1px solid rgba(38,51,43,0.1);}
.faq-item h3{ font-size:1.05rem; margin-bottom:10px; font-weight:600; font-family:'Karla',sans-serif; color:var(--ink);}
.faq-item p{ color:var(--ink-soft); font-size:0.95rem;}

/* ---------- Formulaire (page Contact) ---------- */
.form-card{ background:#fff; border-radius:28px; padding:44px; border:1px solid rgba(38,51,43,0.07); max-width:640px; margin:0 auto;}
.form-row{ margin-bottom:20px;}
.form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:20px;}
label{ display:block; font-size:0.82rem; color:var(--ink-soft); margin-bottom:7px; font-weight:600;}
input, textarea, select{
  width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid rgba(38,51,43,0.14);
  font-family:'Karla', sans-serif; font-size:0.95rem; background:var(--cream); color:var(--ink);
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--walnut);}
textarea{ resize:vertical; min-height:120px;}

/* ---------- Contact cards (accueil + page contact) ---------- */
.contact{ padding:90px 0 40px;}
.contact-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.contact-card{ background:#fff; border-radius:26px; padding:40px; border:1px solid rgba(38,51,43,0.07); transition:transform .3s ease, box-shadow .3s ease;}
.contact-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(38,51,43,0.09);}
.contact-card .icon{ width:48px; height:48px; border-radius:14px; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; color:var(--walnut-deep); margin-bottom:20px;}
.contact-card.dark{ background:var(--pine); border-color:var(--pine);}
.contact-card.dark .icon{ background:rgba(249,245,236,0.12); color:var(--rose);}
.contact-card.dark h3, .contact-card.dark p{ color:var(--cream);}
.contact-card.dark p{ opacity:0.72;}
.contact-card h3{ font-size:1.3rem; margin-bottom:10px;}
.contact-card p{ color:var(--ink-soft); font-size:0.92rem; margin-bottom:24px; min-height:44px;}
.contact-card .links{ display:flex; flex-direction:column; gap:10px;}
.contact-card .links a{ font-size:0.85rem; font-weight:600; opacity:0.9; text-decoration:underline; text-underline-offset:3px;}
.contact-card .links a:hover{ opacity:1;}
.contact-card.dark .links a{ color:#fff;}

/* ---------- Témoignages (accueil) ---------- */
.testimonial-proof-wrap{ text-align:center; margin-top:-8px; margin-bottom:44px;}
.testimonial-proof{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(38,51,43,0.1); padding:10px 22px; border-radius:999px; font-size:0.86rem; color:var(--walnut-deep); font-weight:600; box-shadow:0 8px 20px rgba(38,51,43,0.06);}
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:44px;}
.testimonial-card{ background:#fff; border-radius:26px; padding:36px 32px; border:1px solid rgba(38,51,43,0.07); box-shadow:0 14px 30px rgba(38,51,43,0.06); display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;}
.testimonial-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(38,51,43,0.1);}
.testimonial-stars{ color:var(--walnut); font-size:0.95rem; letter-spacing:3px; margin-bottom:16px;}
.testimonial-quote{ color:var(--ink-soft); font-size:0.94rem; line-height:1.7; margin-bottom:22px; flex-grow:1;}
.testimonial-author{ font-family:'Cormorant', serif; color:var(--pine); font-weight:600; font-size:1.02rem;}
.testimonials-cta{ text-align:center;}

/* ---------- Contenu légal ---------- */
.legal-content{ max-width:760px; margin:0 auto;}
.legal-content h2{ font-size:1.25rem; margin:34px 0 12px;}
.legal-content h2:first-child{ margin-top:0;}
.legal-content p{ color:var(--ink-soft); margin-bottom:14px; font-size:0.94rem;}
.legal-content ul{ color:var(--ink-soft); padding-left:20px; margin-bottom:14px; font-size:0.94rem;}
.legal-content li{ margin-bottom:6px;}
.legal-note{ background:var(--cream-deep); border-radius:14px; padding:16px 20px; font-size:0.85rem; color:var(--walnut-deep); margin-bottom:34px;}
.placeholder{ background:#fce8d8; padding:1px 6px; border-radius:4px; color:var(--walnut-deep); font-weight:600;}

/* ---------- Footer ---------- */
footer{ padding:40px 32px 30px; text-align:center; color:var(--ink-soft); font-size:0.82rem; border-top:1px solid rgba(38,51,43,0.08); margin-top:40px;}
footer img{ width:52px; height:52px; border-radius:50%; margin:0 auto 14px; object-fit:cover;}
.footer-links{ display:flex; justify-content:center; gap:18px; margin-top:14px; flex-wrap:wrap; font-size:0.78rem;}
.footer-links a:hover{ color:var(--walnut-deep); text-decoration:underline;}

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{ opacity:1; transform:translateY(0);}

/* ---------- Mobile ---------- */
/* Bascule du menu vers le bouton ☰ dès que la barre de navigation devient trop étroite (tablette incluse) */
@media (max-width: 1180px){
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:2px; background:var(--cream); padding:10px 32px 22px; box-shadow:0 20px 40px rgba(38,51,43,0.14); border-bottom:1px solid rgba(38,51,43,0.08); z-index:60;}
  .nav-links.open{ display:flex;}
  .nav-links a{ padding:11px 0; width:100%;}
  .nav-links a::after{ display:none;}
  .nav-links .nav-drop{ width:100%;}
  .burger{ display:block;}
  .nav-drop-menu{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; display:none;}
}

@media (max-width: 900px){
  .cat-grid{ grid-template-columns:1fr;}
  .prod-grid{ grid-template-columns:repeat(2,1fr);}
  .photo-grid{ grid-template-columns:1fr 1fr;}
  .hero-grid{ grid-template-columns:1fr; gap:40px;}
  .hero-text{ text-align:center;}
  .hero-line{ margin:0 auto 22px;}
  .hero h1{ max-width:100%; margin:0 auto 22px;}
  .hero p.lead{ max-width:100%; margin:0 auto 34px;}
  .hero-actions{ justify-content:center;}
  .reassurance{ justify-content:center;}
  .hero-photo{ max-width:340px; margin:0 auto;}
  .hero-photo .ph-tag{ left:12px;}
  .contact-grid2{ grid-template-columns:1fr;}
  .values-grid{ grid-template-columns:1fr;}
  .testimonial-grid{ grid-template-columns:1fr;}
  .steps-grid{ grid-template-columns:1fr 1fr;}
  .season, .cta-band{ margin:0 16px; padding:48px 24px;}
  .form-row.two{ grid-template-columns:1fr;}
  .form-card{ padding:28px;}
  .banner-hero{ min-height:52vh;}
  .subcat-grid{ grid-template-columns:1fr;}
  .feature-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px;}
  .feature-gallery .g-big{ grid-column:span 2; grid-row:span 2;}
  .split-block{ grid-template-columns:1fr; gap:32px;}
  .theme-grid{ grid-template-columns:1fr 1fr;}
  .callout{ padding-left:20px;}
  section{ padding:64px 0;}
}
@media (max-width:480px){
  .prod-grid{ grid-template-columns:1fr 1fr; gap:14px;}
  .cat-grid{ gap:16px;}
  .steps-grid{ grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important;} }