/* =====================================================================
   Zone Détente Urbaine — système de design porté depuis la maquette Lovable
   Palette greige + charbon chaud · Newsreader (serif) + Hanken Grotesk (sans)
   ===================================================================== */

:root{
  --radius:0.5rem;
  --cream:#FBFBFA;      /* fond blanc cassé */
  --sand:#F1F1EF;       /* gris très clair, sections alternées */
  --sand-warm:#EFEAE3;  /* greige chaud, panneaux éditoriaux */
  --espresso:#262523;   /* charbon chaud, texte principal */
  --espresso-2:#1E1D1B; /* charbon plus profond (dégradé sections sombres) */
  /* Accent terracotta chaud. Anciennement un gris (#8A8A85) qui échouait le
     contraste AA en label/eyebrow (3.1:1 sur sand). Ce clay passe AA sur crème
     (5.5:1), sand (5.0:1) et blanc (5.7:1), et donne à la marque sa chaleur
     sensorielle. Réservé aux fonds CLAIRS ; les sections charbon utilisent
     --sage / --cream, déjà conformes. */
  --terracotta:#93583F;
  --terracotta-soft:#B98A70; /* clay clair, accents sur fond charbon si besoin */
  --sage:#D4C7B4;       /* accent greige, usage parcimonieux */
  --card:#FFFFFF;
  --muted-foreground:#6B6B66;
  --border:#E2E2DF;
  --border-strong:#D3D2CE; /* filet plus marqué (bordures actives, hovers) */
  --shadow-soft:0 1px 1px rgba(38,37,35,.02),0 8px 24px -18px rgba(38,37,35,.08);
  --shadow-lift:0 2px 4px rgba(38,37,35,.03),0 22px 40px -24px rgba(38,37,35,.20);
  --font-serif:"Newsreader",Georgia,serif;
  --font-sans:"Hanken Grotesk",system-ui,sans-serif;
}

*{box-sizing:border-box;border-color:var(--border);margin:0;padding:0;}
html{font-family:var(--font-sans);color:var(--espresso);background:var(--cream);-webkit-text-size-adjust:100%;}
body{line-height:1.6;-webkit-font-smoothing:antialiased;font-weight:400;overflow-x:hidden;background:var(--cream);color:var(--espresso);}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,h5{font-family:var(--font-serif);font-weight:350;letter-spacing:-0.015em;line-height:1.14;color:var(--espresso);text-wrap:balance;}
p{text-wrap:pretty;}
::selection{background:rgba(147,88,63,0.16);}

/* ---------- layout ---------- */
.container-soft{max-width:1180px;margin-inline:auto;padding-inline:1.5rem;}
.section{padding-block:5rem;}
@media(min-width:768px){.section{padding-block:7rem;}}
.section-sand{background:var(--sand);}
.section-dark{background:linear-gradient(160deg,#2B2A27 0%,var(--espresso) 46%,var(--espresso-2) 100%);color:var(--cream);}
.section-dark h1,.section-dark h2,.section-dark h3{color:var(--cream);}

.grid{display:grid;gap:1.5rem;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
@media(min-width:768px){
  .md\:grid-2{grid-template-columns:repeat(2,1fr);}
  .md\:cols-12{grid-template-columns:repeat(12,1fr);gap:3rem;}
  .col-5{grid-column:span 5;} .col-6{grid-column:span 6;} .col-7{grid-column:span 7;} .col-8{grid-column:span 8;} .col-4{grid-column:span 4;}
}
.sm\:grid-2{grid-template-columns:1fr;}
.sm\:grid-3{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
@media(min-width:640px){
  .sm\:grid-2{grid-template-columns:repeat(2,1fr);}
  .sm\:grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1024px){
  .lg\:grid-3{grid-template-columns:repeat(3,1fr);}
  .lg\:grid-5{grid-template-columns:repeat(5,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
}

/* ---------- typographie ---------- */
.eyebrow{font-size:0.72rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--terracotta);font-weight:500;font-family:var(--font-sans);display:inline-block;}
.eyebrow-sage{color:var(--sage);}
.serif{font-family:var(--font-serif);}
.italic{font-style:italic;}
.h1{font-family:var(--font-serif);font-size:2.25rem;line-height:1.05;font-weight:350;}
.h2{font-family:var(--font-serif);font-size:1.85rem;font-weight:350;}
.h3{font-family:var(--font-serif);font-size:1.35rem;font-weight:350;}
.lead{color:var(--muted-foreground);font-size:1.02rem;}
.muted{color:var(--muted-foreground);}
.accent{color:var(--terracotta);}
.max-xl{max-width:36rem;} .max-2xl{max-width:42rem;} .max-3xl{max-width:48rem;}
.mt-1{margin-top:.25rem;}.mt-2{margin-top:.5rem;}.mt-3{margin-top:.75rem;}.mt-4{margin-top:1rem;}.mt-5{margin-top:1.25rem;}.mt-6{margin-top:1.5rem;}.mt-7{margin-top:1.75rem;}.mt-8{margin-top:2rem;}
.text-center{text-align:center;}
@media(min-width:768px){
  .h1{font-size:3rem;} .h2{font-size:2.25rem;} .h3{font-size:1.5rem;}
}
@media(min-width:1024px){ .h1{font-size:3.75rem;} }

/* ---------- boutons (pill) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.6rem;border-radius:9999px;font-weight:500;font-size:.9rem;letter-spacing:.01em;transition:background-color .2s ease,color .2s ease;border:1px solid transparent;line-height:1;}
.btn-primary{background:var(--espresso);color:#fff;}
.btn-primary:hover{background:#000;}
.btn-outline{background:transparent;color:var(--espresso);border-color:var(--espresso);}
.btn-outline:hover{background:var(--espresso);color:#fff;}
.btn-light{background:var(--cream);color:var(--espresso);}
.btn-light:hover{background:#fff;}
.btn-ghost-sage{background:transparent;color:var(--cream);border-color:var(--sage);}
.btn-ghost-sage:hover{background:#3D3C39;}
.btn-sm{padding:.55rem 1rem;font-size:.8rem;}
.btn-block{width:100%;}
.link-arrow{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;}
.link-arrow svg{width:.9rem;height:.9rem;}

/* ---------- cartes ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);box-shadow:0 1px 1px rgba(38,37,35,.02),0 8px 24px -18px rgba(38,37,35,.08);}
.card-pad{padding:1.75rem;}
.card-flush{overflow:hidden;display:flex;flex-direction:column;}
.card-media{position:relative;overflow:hidden;background:var(--sand);}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card-flush:hover .card-media img{transform:scale(1.03);}
.card-body{padding:1.4rem;display:flex;flex-direction:column;flex:1;}

/* ratios d'image */
.ratio{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--sand);}
.ratio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.r-4-5{aspect-ratio:4/5;} .r-5-4{aspect-ratio:5/4;} .r-4-3{aspect-ratio:4/3;} .r-5-3{aspect-ratio:5/3;} .r-1-1{aspect-ratio:1/1;} .r-5-6{aspect-ratio:5/6;} .r-square{aspect-ratio:1/1;}
.placeholder{display:flex;align-items:center;justify-content:center;background:var(--sand);border:1px dashed var(--border);}
.placeholder span{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--terracotta);text-align:center;padding:1rem;}

/* stats (approche) */
.stat{border:1px solid #3D3C39;border-radius:var(--radius);padding:1rem;text-align:center;}
.stat .n{font-family:var(--font-serif);font-size:1.5rem;color:var(--cream);}
.stat .l{font-size:11px;color:#A9A9A4;margin-top:.25rem;text-transform:uppercase;letter-spacing:.05em;}

/* badge */
.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:#fff;border-radius:9999px;padding:.5rem 1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;}
.badge .dot{width:6px;height:6px;border-radius:9999px;background:var(--terracotta);display:inline-block;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px) saturate(1.1);background:rgba(251,251,250,.94);border-bottom:1px solid var(--border);}
.topbar{display:none;}
@media(min-width:768px){.topbar{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;padding:.5rem 0;color:var(--muted-foreground);}}
.topbar a:hover{color:var(--espresso);}
.topbar .social{display:flex;align-items:center;gap:1rem;}
.header-main{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem;}
.brand-logo{display:inline-flex;align-items:center;}
.brand-logo img{height:56px;width:auto;display:block;}
@media(max-width:640px){.brand-logo img{height:48px;}}
.brand-text{font-family:var(--font-serif);font-size:1.25rem;line-height:1;}
.brand-text .accent{color:var(--terracotta);}
.main-nav{display:none;}
@media(min-width:768px){.main-nav{display:flex;align-items:center;gap:2rem;}}
.main-nav a{font-size:.9rem;transition:color .2s;}
.main-nav a:hover,.main-nav a.active{color:var(--terracotta);}
.header-actions{display:flex;align-items:center;gap:.75rem;}
.icon-btn{position:relative;padding:.5rem;border-radius:9999px;display:inline-flex;}
.icon-btn:hover{background:var(--sand);}
.cart-count{position:absolute;top:-2px;right:-2px;background:var(--terracotta);color:var(--cream);font-size:10px;border-radius:9999px;height:16px;min-width:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.rdv-desktop{display:none;}
@media(min-width:768px){.rdv-desktop{display:inline-flex;}}
.burger{display:inline-flex;padding:.5rem;border-radius:9999px;background:transparent;border:none;}
@media(min-width:768px){.burger{display:none;}}
.svg-i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;}
.svg-s{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.75;}

/* menu mobile plein écran */
.mobile-overlay{position:fixed;inset:0;z-index:60;background:var(--cream);display:none;flex-direction:column;}
.mobile-overlay.open{display:flex;}
body.menu-open{overflow:hidden;}
.mobile-overlay .m-top{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;}
.mobile-overlay nav{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;flex:1;margin-top:-3rem;}
.mobile-overlay nav a{font-family:var(--font-serif);font-size:1.9rem;}

/* ---------- hero ---------- */
.hero-title{font-family:var(--font-serif);font-weight:300;font-size:2.25rem;line-height:1.05;margin-top:1.25rem;}
@media(min-width:768px){.hero-title{font-size:3rem;}}
@media(min-width:1024px){.hero-title{font-size:3.75rem;}}
.hero-title .soft{font-style:italic;color:var(--terracotta);}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem;}

/* ---------- footer ---------- */
.site-footer{margin-top:5rem;border-top:1px solid var(--border);background:rgba(241,241,239,.6);}
.footer-grid{display:grid;gap:3rem;padding-block:4rem;grid-template-columns:1fr;}
@media(min-width:768px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1.2fr;}}
.footer-grid h4{margin-bottom:.75rem;}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;}
.footer-grid a:hover{color:var(--terracotta);}
.footer-social{display:flex;gap:.75rem;margin-top:1.25rem;}
.footer-social a{padding:.5rem;border:1px solid var(--border);border-radius:9999px;display:inline-flex;}
.footer-social a:hover{background:var(--cream);}
.footer-hours{font-size:.78rem;color:var(--muted-foreground);margin-top:1rem;display:flex;flex-direction:column;gap:.15rem;}
.footer-bottom{border-top:1px solid var(--border);}
.footer-bottom .inner{padding-block:1.25rem;font-size:.75rem;color:var(--muted-foreground);display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;text-align:center;}
.norvika-watermark a{color:var(--espresso);text-decoration:underline;text-underline-offset:2px;}
.norvika-watermark a:hover{color:var(--terracotta);}

/* ---------- accordéons (soins & FAQ) ---------- */
.accordion{border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);background:#fff;overflow:hidden;box-shadow:0 8px 24px -18px rgba(38,37,35,.08);}
.acc-item{border-top:1px solid var(--border);}
.acc-item:first-child{border-top:none;}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 1.5rem;text-align:left;background:transparent;border:none;transition:background .2s;}
.acc-head:hover{background:var(--cream);}
.acc-title{font-family:var(--font-serif);font-size:1.1rem;}
.acc-meta{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--terracotta);margin-top:.25rem;}
.acc-chevron{width:20px;height:20px;color:var(--terracotta);flex-shrink:0;transition:transform .25s;}
.acc-item.open .acc-chevron{transform:rotate(180deg);}
.acc-panel{display:none;padding:0 1.5rem 1.5rem;}
.acc-item.open .acc-panel{display:block;animation:fadeInUp .4s ease both;}
.acc-panel p{font-size:.92rem;color:var(--muted-foreground);max-width:44rem;}

/* liste checks */
.check-list{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;}
.check-list li{display:flex;gap:.75rem;font-size:.9rem;}
.check-list svg{width:20px;height:20px;color:var(--terracotta);flex-shrink:0;margin-top:2px;}

/* feeling / bon à savoir */
.note-card{background:var(--cream);}
.note-card p{font-family:var(--font-serif);font-size:1.25rem;line-height:1.35;margin-top:1rem;}

/* ---------- boutique / woocommerce ---------- */
.brand-chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{padding:.5rem 1rem;border-radius:9999px;font-size:.85rem;border:1px solid var(--border);background:#fff;transition:all .2s;}
a.chip{display:inline-block;text-decoration:none;color:var(--espresso);}
.chip:hover{background:var(--sand);}
.chip.active{background:var(--espresso);color:#fff;border-color:var(--espresso);}
.price-instore{font-size:.85rem;color:var(--muted-foreground);font-style:italic;}
/* Navigation boutique par axes (marques, type de peau, besoin, produit) */
.shop-filters{display:flex;flex-direction:column;gap:1rem;margin-bottom:.5rem;}
.filter-row{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;align-items:start;}
.filter-label{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);padding-top:.6rem;}
.filter-row .chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.filter-row + .filter-row{border-top:1px solid var(--border);padding-top:1rem;}
@media (max-width:767px){
  .shop-filters{gap:1.25rem;}
  .filter-row{grid-template-columns:1fr;gap:.5rem;}
  .filter-label{padding-top:0;}
  /* les puces defilent lateralement au lieu d'empiler 13 marques sur mobile */
  .filter-row .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .filter-row .chips::-webkit-scrollbar{display:none;}
  .filter-row .chip{flex:0 0 auto;}
}
.shop-search{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--border);border-radius:9999px;padding:.3rem .3rem .3rem 1rem;max-width:520px;margin:0 0 1.25rem;transition:border-color .2s ease,box-shadow .2s ease;}
.shop-search:focus-within{border-color:var(--border-strong);box-shadow:0 6px 16px -12px rgba(38,37,35,.4);}
.shop-search-icon{display:inline-flex;color:var(--muted-foreground);flex:0 0 auto;}
.shop-search input[type="search"]{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:.95rem;color:var(--espresso);}
.shop-search input[type="search"]::placeholder{color:var(--muted-foreground);}
.shop-search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
.shop-search button{flex:0 0 auto;white-space:nowrap;}
.brand-card{padding:1.25rem;}
.brand-card .name{font-family:var(--font-serif);font-size:1.1rem;}
.brand-card .tag{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--terracotta);margin-top:.25rem;}
.brand-card p{font-size:.78rem;color:var(--muted-foreground);margin-top:.75rem;}

.products-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);}
@media(min-width:768px){.products-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1200px){.products-grid{grid-template-columns:repeat(4,1fr);}}
.product-card{overflow:hidden;display:flex;flex-direction:column;}
.product-card .card-media{aspect-ratio:1/1;}
.product-card .brand{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--terracotta);}
.product-card .title{font-family:var(--font-serif);font-size:1.05rem;margin-top:.25rem;}
.product-card .price{font-weight:500;}
.product-card .price del{color:var(--muted-foreground);margin-right:.5rem;font-weight:400;}
.product-foot{display:flex;flex-direction:column;align-items:stretch;margin-top:1rem;gap:.75rem;}
.product-foot .btn{text-align:center;justify-content:center;}
@media(min-width:768px){.product-foot{flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;}.product-foot .btn{text-align:left;}}

/* single product */
.single-product-grid{display:grid;gap:3rem;grid-template-columns:1fr;}
@media(min-width:768px){.single-product-grid{grid-template-columns:1fr 1fr;}}
.qty-box{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:9999px;}
.qty-box button{padding:.6rem;background:transparent;border:none;display:inline-flex;}
.qty-box input{width:2.5rem;text-align:center;border:none;background:transparent;font-size:.9rem;}

/* prix (masqués sur soins/forfaits via absence ; visibles en boutique Woo) */
.price-note{font-size:.8rem;color:var(--muted-foreground);}

/* forfait hero image */
.forfait-hero{position:relative;overflow:hidden;}
.forfait-hero .bg{position:absolute;inset:0;}
.forfait-hero .bg img{width:100%;height:100%;object-fit:cover;}
.forfait-hero .scrim{position:absolute;inset:0;background:rgba(38,37,35,.45);}
.forfait-hero .inner{position:relative;padding-block:6rem;color:#fff;}
.forfait-hero .eyebrow{color:rgba(255,255,255,.7);}
.incl-item{display:flex;gap:1rem;align-items:flex-start;}
.incl-ic{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:9999px;background:var(--sand);color:var(--espresso);display:inline-flex;align-items:center;justify-content:center;}

/* formulaire */
.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--terracotta);}
.field input,.field textarea{width:100%;margin-top:.5rem;border:1px solid var(--border);background:var(--cream);padding:.85rem 1.15rem;font-size:.9rem;outline:none;font-family:inherit;}
.field input{border-radius:9999px;}
.field textarea{border-radius:1rem;}
.field input:focus,.field textarea:focus{border-color:var(--espresso);}
.form-stack{display:flex;flex-direction:column;gap:1rem;}

/* map */
.map-frame{overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);aspect-ratio:4/3;}
.map-frame iframe{width:100%;height:100%;border:0;}

/* utils */
.flex{display:flex;} .wrap{flex-wrap:wrap;} .gap-3{gap:.75rem;} .gap-4{gap:1rem;} .between{justify-content:space-between;}
.space-y>*+*{margin-top:1.5rem;}
.stars{display:flex;gap:.2rem;color:var(--terracotta);}
.stars svg{width:16px;height:16px;fill:currentColor;}
.testimonial p{font-size:.9rem;color:var(--muted-foreground);font-style:italic;margin-top:1.25rem;}
.testimonial .who{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--terracotta);margin-top:1.25rem;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.fade-in-up{animation:fadeInUp .8s ease both;}

/* 404 */
.err-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;}
.err-wrap .code{font-family:var(--font-serif);font-size:4rem;}

/* WooCommerce natif : héritage typographique + boutons pill */
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,.woocommerce #respond input#submit{
  background:var(--espresso)!important;color:#fff!important;border-radius:9999px!important;padding:.7rem 1.4rem!important;font-weight:500!important;border:none!important;}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:#000!important;}
.woocommerce .price,.woocommerce span.amount{color:var(--espresso);}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--terracotta)!important;}
.woocommerce ul.products li.product .price{color:var(--espresso);font-weight:500;}

/* WooCommerce Blocks (panier + checkout) : résumé de commande.
   Le nom du produit doit occuper l'espace libre, sinon il se réduit à sa
   largeur minimale et le texte wrappe caractère par caractère. */
.wc-block-components-order-summary-item__description{flex:1 1 auto!important;min-width:0!important;}
.wc-block-components-order-summary-item__total-price{flex:0 0 auto!important;white-space:nowrap;text-align:right;padding-left:.75rem;}
.wc-block-components-order-summary-item{gap:.75rem;}
.wc-block-components-product-name{overflow-wrap:break-word;word-break:normal!important;}
/* Le résumé de commande ne montre que le nom + le prix : on masque la description
   complète du produit (elle se cassait mot par mot dans la colonne étroite). */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description{display:none!important;}

/* Accessibilité : focus visible au clavier (WCAG 2.4.7).
   Non visible à la souris (:focus-visible), ne change pas le rendu normal. */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--espresso);outline-offset:2px;border-radius:4px;}
.section-dark a:focus-visible,.section-dark button:focus-visible,.section-dark .btn:focus-visible{outline-color:var(--cream);}

/* Résultats avant/après (photos réelles de clientes) */
.ba-figure{max-width:540px;margin:2.5rem auto 0;}
.ba-img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.12);}

/* =====================================================================
   Méga-menu « Soins »
   ===================================================================== */
/* Décalage d'ancre pour ne pas passer sous l'en-tête collant. */
[id^="soin-"]{scroll-margin-top:140px;}

/* ---- Desktop (>=768px) : panneau déroulant ---- */
.has-mega{position:static;}
.mega-trigger{display:inline-flex;align-items:center;gap:.3rem;position:relative;}
/* Pont invisible : comble le trou entre « Soins » et le panneau pour que la
   souris qui descend ne perde jamais le survol. Largeur = celle du trigger
   seulement (ne bloque pas les autres liens de la nav). Actif uniquement quand
   le menu est ouvert, pour ne pas déclencher d'ouverture parasite. */
.has-mega.mega-open .mega-trigger::after{content:"";position:absolute;left:-.5rem;right:-.5rem;top:100%;height:34px;}
.mega-caret{color:var(--terracotta);transition:transform .2s ease;}
.has-mega:hover .mega-caret,.has-mega:focus-within .mega-caret,.has-mega.mega-open .mega-caret{transform:rotate(180deg);}

.mega-panel{
  position:absolute;top:100%;left:0;right:0;z-index:39;
  background:var(--cream);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  box-shadow:0 26px 44px -26px rgba(38,37,35,.28);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  /* Filet de sécurité : jamais coupé par le contenu de la page. S'il dépasse,
     il scrolle DANS le panneau, jamais par-dessus le hero. */
  max-height:calc(100vh - 132px);overflow-y:auto;
}
.has-mega:hover>.mega-panel,
.has-mega:focus-within>.mega-panel,
.has-mega.mega-open>.mega-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}
/* ===== Cascade façon Best Buy : rail catégories (gauche) -> contenu (droite) ===== */
.mega-cascade{display:grid;grid-template-columns:238px minmax(0,1fr);align-items:stretch;}

/* -- Rail gauche : liste des catégories -- */
.mega-rail{border-right:1px solid var(--border);padding:1.35rem 0;background:rgba(241,241,239,.35);}
.mega-rail-intro{padding:0 1.4rem 1rem;margin-bottom:.6rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:.35rem;}
.mega-rail-intro-label{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta);font-weight:500;margin-bottom:.25rem;}
.mega-rail-intro a{font-size:.86rem;color:var(--muted-foreground);transition:color .15s;}
.mega-rail-intro a:hover{color:var(--espresso);}

.mega-cat{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.72rem 1.4rem;font-size:.92rem;color:var(--espresso);transition:background .15s,color .15s,box-shadow .15s;}
.mega-cat .mega-cat-caret{width:15px;height:15px;color:var(--terracotta);opacity:0;transform:translateX(-3px);transition:opacity .15s,transform .15s;flex-shrink:0;}
.mega-cat:hover,.mega-cat.active{background:var(--sand);font-weight:500;box-shadow:inset 3px 0 0 var(--espresso);}
.mega-cat:hover .mega-cat-caret,.mega-cat.active .mega-cat-caret{opacity:1;transform:translateX(0);}

/* -- Scène droite : contenu de la catégorie active + carte promo -- */
.mega-stage{padding:1.4rem 1.75rem;min-height:320px;}
.mega-content{display:none;}
.mega-content.active{display:grid;grid-template-columns:minmax(0,1fr) 222px;gap:2rem;align-items:start;animation:fadeInUp .25s ease both;}
.mega-content-cols{min-width:0;}

/* Multi-colonnes CSS : le navigateur ÉQUILIBRE la hauteur des colonnes. */
.mega-clusters{columns:162px;column-gap:1.4rem;column-fill:balance;}
.mega-clusters .mega-cluster{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:1.1rem;}
.mega-clusters .mega-cluster:last-child{margin-bottom:0;}
.mega-items{columns:172px;column-gap:1.4rem;column-fill:balance;}

.mega-cluster-label{display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);font-weight:500;margin-bottom:.5rem;}
.mega-panel ul{list-style:none;display:flex;flex-direction:column;gap:.42rem;}
.mega-items li{break-inside:avoid;-webkit-column-break-inside:avoid;}
.mega-panel li a{font-size:.85rem;color:var(--muted-foreground);line-height:1.28;transition:color .15s;display:inline-block;}
.mega-panel li a:hover{color:var(--espresso);}

.mega-more{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-size:.82rem;font-weight:500;letter-spacing:.02em;color:var(--espresso);}
.mega-more svg{color:var(--terracotta);}
.mega-more:hover{color:var(--terracotta);}

/* -- Carte promo (photo + Prendre rendez-vous) -- */
.mega-promo{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);background:#fff;box-shadow:0 1px 1px rgba(38,37,35,.02),0 8px 24px -18px rgba(38,37,35,.08);align-self:start;}
.mega-promo-media{margin:0;}
.mega-promo-media img{transition:transform .5s ease;}
.mega-promo:hover .mega-promo-media img{transform:scale(1.03);}
.mega-promo-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.65rem;}
.mega-promo-tag{font-family:var(--font-serif);font-size:.98rem;line-height:1.3;color:var(--espresso);}
.mega-promo-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:500;letter-spacing:.02em;color:var(--espresso);}
.mega-promo-btn svg{color:var(--terracotta);transition:transform .2s;}
.mega-promo:hover .mega-promo-btn{color:var(--terracotta);}
.mega-promo:hover .mega-promo-btn svg{transform:translateX(3px);}

/* Sous 1080px : on masque la promo pour garder le contenu lisible. */
@media(max-width:1080px){
  .mega-cascade{grid-template-columns:210px minmax(0,1fr);}
  .mega-content.active{grid-template-columns:minmax(0,1fr);}
  .mega-promo{display:none;}
}

/* ---- Mobile : accordéon déroulant dans l'overlay plein écran ---- */
.mega-panel{display:block;} /* neutralisé par le display:none de .main-nav sur mobile */

.mobile-overlay .m-nav{
  display:block;align-items:stretch;justify-content:flex-start;
  flex:1;margin-top:0;gap:0;overflow-y:auto;
  padding:.5rem 1.5rem 2.5rem;
}
.mobile-overlay .m-nav .m-link,
.mobile-overlay .m-nav .m-head{
  font-family:var(--font-serif);font-size:1.35rem;font-weight:350;color:var(--espresso);
  display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--border);background:transparent;border-left:none;border-right:none;border-top:none;text-align:left;
}
.mobile-overlay .m-nav .m-caret{color:var(--terracotta);flex-shrink:0;transition:transform .25s;}
.m-node.open>.m-head>.m-caret{transform:rotate(180deg);}
.m-sub{display:none;padding:.25rem 0 .75rem .25rem;}
.m-node.open>.m-sub{display:block;animation:fadeInUp .3s ease both;}

/* niveau 2 : catégories */
.mobile-overlay .m-nav .m-head-2{font-size:1.08rem;padding:.75rem 0;}
.mobile-overlay .m-nav .m-all,
.mobile-overlay .m-nav .m-catlink{
  display:block;font-family:var(--font-sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracotta);font-weight:500;padding:.55rem 0;
}
.m-cluster-label{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);font-weight:500;margin:.85rem 0 .35rem;opacity:.85;}
.mobile-overlay .m-nav .m-soinlink{
  display:block;font-family:var(--font-sans);font-size:.92rem;font-weight:400;color:var(--muted-foreground);
  padding:.5rem 0;line-height:1.35;letter-spacing:0;
}
.mobile-overlay .m-nav .m-soinlink:hover{color:var(--espresso);}
.m-rdv{margin-top:1.5rem;width:100%;}

/* =====================================================================
   RAFFINEMENT ÉDITORIAL (Florence, 2026-07-27)
   Passe de finition : chaleur de marque, hiérarchie affirmée, micro-
   interactions calmes, moments éditoriaux. On élève l'exécution sans
   toucher au contenu, à la structure ni aux fonctionnalités.
   ===================================================================== */

/* ---- Eyebrows : label greige plus fin, mieux calibré (contraste AA via clay) ---- */
.eyebrow{font-size:0.7rem;letter-spacing:0.26em;font-weight:600;}

/* ---- Hiérarchie typographique : titres serif plus affirmés ---- */
.h1,.hero-title{letter-spacing:-0.028em;}
.h2{letter-spacing:-0.02em;}
.lead{line-height:1.65;font-size:1.06rem;}
@media(min-width:1024px){ .h1{font-size:3.9rem;} }
/* Filet clay court : signature éditoriale au-dessus d'un titre de section. */
.rule-accent{display:block;width:2.5rem;height:2px;background:var(--terracotta);border-radius:2px;margin-bottom:1.1rem;}

/* ---- Hero : composition intentionnelle (panneau greige chaud décalé) ---- */
.hero-figure{position:relative;}
.hero-figure .ratio{position:relative;z-index:1;border-radius:14px;box-shadow:var(--shadow-lift);}
@media(min-width:768px){
  .hero-figure::before{content:"";position:absolute;z-index:0;left:-1.15rem;bottom:-1.2rem;width:46%;height:60%;background:var(--sand-warm);border-radius:14px;}
}
/* Espace un peu plus généreux entre le hero et la 1re section. */
.btn-row{margin-top:2.5rem;}

/* ---- Boutons : lift calme + ombre chaude, flèche animée ---- */
.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.btn-primary{box-shadow:0 1px 2px rgba(38,37,35,.12);}
.btn-primary:hover{background:var(--espresso-2);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(38,37,35,.45);}
.btn-outline:hover{transform:translateY(-1px);}
.btn-light:hover,.btn-ghost-sage:hover{transform:translateY(-1px);}
.btn svg{transition:transform .2s ease;}
.btn:hover svg{transform:translateX(3px);}
.link-arrow{color:var(--espresso);font-weight:500;transition:color .2s ease;}
.link-arrow svg{transition:transform .2s ease;color:var(--terracotta);}
.link-arrow:hover{color:var(--terracotta);}
.link-arrow:hover svg{transform:translateX(4px);}

/* ---- Cartes : ombre douce de base, lift subtil au survol des cartes cliquables ---- */
.card{box-shadow:var(--shadow-soft);transition:box-shadow .35s ease,border-color .35s ease,transform .35s ease;}
.card-flush,.product-card,a.card{will-change:transform;}
.card-flush:hover,.product-card:hover,a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--border-strong);}
.card-media img{transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.card-flush:hover .card-media img,.product-card:hover .card-media img{transform:scale(1.045);}

/* ---- Badge & chips : un peu plus tactiles ---- */
.badge{box-shadow:var(--shadow-soft);}
.chip{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;}
.chip:hover{border-color:var(--border-strong);}
.chip.active{box-shadow:0 6px 16px -10px rgba(38,37,35,.5);}

/* ---- Accordéons : chevron clay, panneau plus aéré ---- */
.acc-head{transition:background .2s ease;}
.acc-title{transition:color .2s ease;}
.acc-head:hover .acc-title{color:var(--terracotta);}

/* ---- Stats (section charbon) : filet plus fin, chiffres respirés ---- */
.stat{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.02);border-radius:calc(var(--radius) + 2px);}
.stat .n{letter-spacing:-0.02em;}

/* ---- Moment éditorial : pull-quote (citation) avec filet clay ---- */
.pull-quote{position:relative;padding-top:1.6rem;}
.pull-quote::before{content:"";position:absolute;top:0;left:0;width:2.5rem;height:2px;background:var(--terracotta);border-radius:2px;}
.about-quote{position:relative;padding-left:1.4rem;border-left:2px solid var(--terracotta);}

/* ---- Marques boutique : cartes un peu plus vivantes ---- */
.brand-card .name{transition:color .2s ease;}
.brand-card:hover .name{color:var(--terracotta);}

/* ---- Footer : logo à la place du wordmark ---- */
.footer-brand{display:inline-flex;}
.footer-brand img{height:74px;width:auto;display:block;}

/* ---- Formulaire : focus plus doux et chaud ---- */
.field input:focus,.field textarea:focus{border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(147,88,63,.10);}

/* ---- Respect de prefers-reduced-motion : on coupe transforms/anim décoratives ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .btn:hover,.card-flush:hover,.product-card:hover,a.card:hover,.btn-primary:hover,.btn-outline:hover{transform:none!important;}
}
/* <picture> (WebP + repli JPEG) : transparent pour la mise en page, l'img garde ses regles */
.ratio picture,.bg picture{display:contents;}

/* Promotion (section d'accueil + fenetre surgissante), pilotee par la cliente */
.promo-card{padding:0;overflow:hidden;border:1px solid var(--border);}
.promo-inner{display:grid;grid-template-columns:1fr;}
.promo-inner.has-image{grid-template-columns:5fr 7fr;}
.promo-media{position:relative;min-height:220px;}
.promo-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.promo-body{padding:2.5rem;}
.promo-body .badge{margin-bottom:1rem;}
.promo-popup{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem;}
.promo-popup[hidden]{display:none;}
.promo-popup-backdrop{position:absolute;inset:0;background:rgba(38,37,35,.55);}
.promo-popup-box{position:relative;background:var(--card);border-radius:var(--radius);max-width:720px;width:100%;box-shadow:var(--shadow-lift);overflow:hidden;animation:promo-in .35s ease;}
.promo-popup-close{position:absolute;top:.6rem;right:.8rem;z-index:2;border:0;background:#fff;border-radius:9999px;width:2.2rem;height:2.2rem;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--espresso);box-shadow:var(--shadow-soft);}
.promo-popup .promo-title{font-family:var(--font-serif);font-size:1.75rem;line-height:1.15;margin:0;}
body.promo-open{overflow:hidden;}
@keyframes promo-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:767px){.promo-inner.has-image{grid-template-columns:1fr;}.promo-media{min-height:180px;}.promo-body{padding:1.5rem;}}

/* Fiche produit : WooCommerce cache la galerie (opacity:0) jusqu'a ce que son
   JavaScript l'initialise. Mesure du 2026-09-12 : l'image est chargee a 2 s
   et n'apparait qu'a 7 s (Render Delay 4,8 s). On l'affiche des qu'elle est
   la ; le zoom et le carrousel s'ajoutent ensuite sans clignotement. */
.woocommerce-product-gallery{opacity:1 !important;}