/* Tahitifaifai Atelier — composants, sections, animations (porté depuis la maquette) */
/* ============================================================
   TAHITIFAIFAI — Charte graphique
   Palette issue du brand board :
   --teal    : bleu-vert profond  #20505A
   --coral   : corail hibiscus    #E4694A
   --cream   : crème papier       #FAF3E4
   --sage    : vert feuillage     #6F9B7C
   --gold    : or pandanus        #D9A441
   Typo : Allura (script logo) / Playfair Display (titres) / Inter (texte)
   ============================================================ */


*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Fond papier légèrement texturé */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(32,80,90,.035) 1px,transparent 1px);
  background-size:22px 22px;
}
main,header,footer{position:relative;z-index:2}

/* ---------- Couture (signature) : pointillé de fil ---------- */
.stitch-divider{
  height:0;border:none;
  border-top:2px dashed rgba(32,80,90,.35);
  width:min(340px,60%);margin:0 auto;position:relative;
}
.stitch-divider::after{
  content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 4px var(--cream);
}
.stitch-divider.on-teal{border-top-color:rgba(250,243,228,.4)}
.stitch-divider.on-teal::after{box-shadow:0 0 0 4px var(--teal)}

/* ============ BARRE ANNONCE ============ */
.topbar{
  background:var(--teal);color:var(--cream);
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;padding:9px 16px;font-weight:500;
}
.topbar b{color:var(--gold);font-weight:600}

/* ============ HEADER ============ */
.site-header{
  background:var(--cream);
  border-bottom:2px dashed rgba(32,80,90,.25);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(6px);
  background:rgba(250,243,228,.94);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:var(--maxw);margin:0 auto;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:46px;height:46px;flex:none}
.brand-name{
  font-family:var(--font-script);
  font-size:2.2rem;color:var(--teal);line-height:1;
  transform:translateY(2px);
}
.main-nav{display:flex;gap:28px;align-items:center}
.main-nav a{
  font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);padding:6px 2px;position:relative;
}
.main-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;
  border-bottom:2px dashed var(--coral);transition:right .28s ease;
}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{right:0}
.main-nav a[aria-current="page"]{color:var(--coral)}
.header-actions{display:flex;align-items:center;gap:14px}
.cart-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--teal);color:var(--cream);
  border:none;border-radius:999px;padding:9px 18px;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  transition:background .2s ease,transform .2s ease;
}
.cart-btn:hover{background:var(--coral);transform:translateY(-1px)}
.cart-count{
  background:var(--coral);color:#fff;border-radius:50%;
  width:20px;height:20px;display:grid;place-items:center;
  font-size:.72rem;transition:background .2s ease;
}
.cart-btn:hover .cart-count{background:var(--teal)}
.burger{display:none;background:none;border:none;color:var(--teal)}

/* ============ HERO ============ */
.hero{
  background:var(--teal);color:var(--cream);
  position:relative;overflow:hidden;
}
.hero-inner{
  max-width:var(--maxw);margin:0 auto;padding:44px 24px 76px;
  display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
  position:relative;z-index:2;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:18px;
}
.hero-eyebrow::before{content:"";width:34px;border-top:2px dashed var(--gold)}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.6vw,3rem);
  line-height:1.12;font-weight:600;margin-bottom:10px;
}
.hero h1 .script{
  font-family:var(--font-script);font-weight:400;
  color:var(--coral-soft);font-size:1.25em;display:block;
}
.hero p.lead{
  font-size:1.05rem;color:rgba(250,243,228,.85);
  max-width:46ch;margin-bottom:24px;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:999px;padding:14px 30px;
  font-weight:600;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;
  border:2px solid transparent;transition:all .22s ease;
}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:var(--coral-soft);transform:translateY(-2px);box-shadow:0 10px 24px rgba(228,105,74,.35)}
.btn-ghost{border-color:rgba(250,243,228,.55);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream);background:rgba(250,243,228,.1)}
.btn-teal{background:var(--teal);color:var(--cream)}
.btn-teal:hover{background:var(--teal-soft);transform:translateY(-2px)}

/* Médaillon tifaifai animé */
.hero-medallion{
  position:relative;display:grid;place-items:center;
}
.hero-medallion svg{width:min(290px,100%);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.28))}
@keyframes slow-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.medallion-spin{transform-origin:center;animation:slow-rotate 120s linear infinite}
/* motif de fond du hero : quart de médaillons en filigrane */
.hero-bg{position:absolute;inset:0;opacity:.07;z-index:1}
.hero-bg svg{width:100%;height:100%}

/* bord "vague crème" bas du hero */
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:3}
.hero-wave svg{width:100%;height:60px}

/* ============ SECTIONS GÉNÉRIQUES ============ */
.section{padding:84px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 52px}
.section-eyebrow{
  font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--coral);font-weight:700;margin-bottom:10px;display:block;
}
.section-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--teal);margin-bottom:14px;
}
.section-sub{color:rgba(34,51,58,.72);font-size:1rem}

/* ============ CATÉGORIES ============ */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,270px));justify-content:center;gap:22px}
.cat-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:3/3.6;display:flex;align-items:flex-end;
  box-shadow:var(--shadow);transition:transform .28s ease,box-shadow .28s ease;
  outline:2px dashed transparent;outline-offset:-10px;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);outline-color:rgba(250,243,228,.7)}
.cat-visual{position:absolute;inset:0}
.cat-visual svg{width:100%;height:100%}
.cat-label{
  position:relative;z-index:2;width:100%;
  padding:18px 18px 20px;
  background:linear-gradient(to top,rgba(23,60,68,.88),rgba(23,60,68,0));
  color:var(--cream);
}
.cat-label h3{font-family:var(--font-display);font-size:1.3rem;font-weight:600;margin-bottom:2px}
.cat-label span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.cat-label .arrow{transition:transform .25s ease;display:inline-block}
.cat-card:hover .arrow{transform:translateX(5px)}

/* ============ PRODUITS ============ */
.products-section{background:var(--cream-deep);position:relative}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .26s ease,box-shadow .26s ease;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.product-visual{position:relative;aspect-ratio:1/1;overflow:hidden}
.product-visual svg{width:100%;height:100%;transition:transform .5s ease}
.product-card:hover .product-visual svg{transform:scale(1.06)}
.badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--coral);color:#fff;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;
}
.badge.gold{background:var(--gold);color:var(--teal-deep)}
.badge.sage{background:var(--sage)}
.product-info{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-cat{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);font-weight:700}
.product-name{font-family:var(--font-display);font-size:1.12rem;font-weight:600;color:var(--teal)}
.product-price{font-weight:700;color:var(--coral);font-size:1.02rem;margin-top:auto}
.product-price s{color:rgba(34,51,58,.4);font-weight:500;font-size:.88rem;margin-left:8px}
.add-cart{
  margin-top:12px;width:100%;
  background:var(--teal);color:var(--cream);border:none;border-radius:999px;
  padding:11px 0;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s ease;
}
.add-cart:hover{background:var(--coral)}
.products-cta{text-align:center;margin-top:48px}

/* ============ HISTOIRE ============ */
.story{background:var(--teal);color:var(--cream);position:relative;overflow:hidden}
.story-inner{
  max-width:var(--maxw);margin:0 auto;padding:96px 24px;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;
  position:relative;z-index:2;
}
.story-visual{position:relative;display:grid;place-items:center}
.story-visual svg{width:min(380px,100%)}
.story h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,3vw,2.5rem);margin-bottom:8px;
}
.story h2 .script{font-family:var(--font-script);color:var(--coral-soft);font-weight:400;font-size:1.3em}
.story p{color:rgba(250,243,228,.82);margin-bottom:18px;max-width:56ch}
.story .section-eyebrow{color:var(--gold)}
.story-points{display:grid;gap:14px;margin:26px 0 34px}
.story-point{display:flex;gap:14px;align-items:flex-start}
.story-point .dot{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:2px dashed var(--gold);display:grid;place-items:center;
  color:var(--gold);font-size:.9rem;
}
.story-point p{margin:0;font-size:.95rem}
.story-point b{color:var(--cream)}

/* ============ RÉASSURANCE ============ */
.trust{padding:64px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.trust-item .ico{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow);
  display:grid;place-items:center;color:var(--coral);
}
.trust-item h4{font-family:var(--font-display);color:var(--teal);font-size:1.05rem;margin-bottom:4px}
.trust-item p{font-size:.86rem;color:rgba(34,51,58,.65)}

/* ============ NEWSLETTER ============ */
.newsletter{background:var(--cream-deep)}
.newsletter-box{
  max-width:760px;margin:0 auto;text-align:center;
  background:#fff;border-radius:20px;box-shadow:var(--shadow);
  padding:56px 40px;position:relative;
  border:2px dashed rgba(32,80,90,.2);
}
.newsletter-box .flower{position:absolute;top:-26px;left:50%;transform:translateX(-50%)}
.newsletter h2{font-family:var(--font-display);color:var(--teal);font-size:1.9rem;margin-bottom:10px}
.newsletter p{color:rgba(34,51,58,.7);margin-bottom:28px}
.nl-form{display:flex;gap:12px;max-width:480px;margin:0 auto}
.nl-form input{
  flex:1;border:2px solid rgba(32,80,90,.2);border-radius:999px;
  padding:13px 22px;font-family:inherit;font-size:.95rem;
  background:var(--cream);outline:none;transition:border-color .2s ease;
}
.nl-form input:focus{border-color:var(--coral)}
.nl-msg{margin-top:14px;font-size:.88rem;color:var(--sage);font-weight:600;min-height:1.4em}

/* ============ FOOTER ============ */
.site-footer{background:var(--teal-deep);color:rgba(250,243,228,.75);padding:72px 0 0}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;
  padding-bottom:56px;
}
.footer-brand .brand-name{color:var(--cream);font-size:2.4rem}
.footer-brand p{font-size:.9rem;margin-top:14px;max-width:32ch}
.site-footer h5{
  color:var(--gold);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:18px;font-weight:700;
}
.site-footer ul{list-style:none;display:grid;gap:10px;font-size:.92rem}
.site-footer ul a{transition:color .2s ease}
.site-footer ul a:hover{color:var(--coral-soft)}
.footer-bottom{
  border-top:2px dashed rgba(250,243,228,.18);
  padding:22px 0;display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;flex-wrap:wrap;gap:10px;
}
.payments{display:flex;gap:10px;align-items:center}
.payments span{
  border:1px solid rgba(250,243,228,.25);border-radius:6px;
  padding:4px 10px;font-size:.72rem;letter-spacing:.06em;
}

/* ============ RÉVÉLATION AU SCROLL ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ============ FIL DE COUTURE ANIMÉ (scroll) ============ */
#stitchWorld{
  position:absolute;top:0;left:0;right:0;
  z-index:3;pointer-events:none;overflow:hidden;
}
#stitchWorld svg{width:100%;height:100%}
.stitch-main{
  fill:none;stroke:var(--coral);stroke-width:3;
  stroke-linecap:round;stroke-dasharray:11 14;opacity:.5;
}
.stitch-alt{
  fill:none;stroke:var(--gold);stroke-width:3;
  stroke-linecap:round;stroke-dasharray:11 14;stroke-dashoffset:-12.5;opacity:.35;
}
/* Nœuds de couture qui "épinglent" les sections */
.knot-inner{
  transform:scale(0);transform-box:fill-box;transform-origin:center;
  transition:transform .55s cubic-bezier(.34,1.65,.5,1);
}
.knot.visible .knot-inner{transform:scale(1)}
.knot.visible .knot-ring{animation:knot-pulse 2.6s ease-out 1}
@keyframes knot-pulse{
  0%{stroke-opacity:.9;r:14}
  100%{stroke-opacity:0;r:30}
}
/* Aiguille qui suit le fil */
#needleLayer{
  position:absolute;top:0;left:0;z-index:4;
  pointer-events:none;will-change:transform;
}
#needleLayer svg{overflow:visible;margin:-60px 0 0 -60px}
/* Motifs flottants en parallax (marges) */
#parallaxLayer{
  position:fixed;inset:0;z-index:3;
  pointer-events:none;overflow:hidden;
}
#parallaxLayer .px{
  position:absolute;top:0;opacity:.13;will-change:transform;
}
@media(max-width:900px){
  .stitch-main,.stitch-alt{stroke-width:2;opacity:.32}
  #parallaxLayer{display:none}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .medallion-spin{animation:none}
  .knot-inner{transform:scale(1);transition:none}
  .knot-ring{animation:none!important}
  #needleLayer,#parallaxLayer{display:none}
  *{scroll-behavior:auto}
}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .products{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr;text-align:center;padding:36px 24px 70px}
  .hero-eyebrow{justify-content:center}
  .hero p.lead{margin:0 auto 32px}
  .hero-ctas{justify-content:center}
  .story-inner{grid-template-columns:1fr;gap:44px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .main-nav{display:none}
  .burger{display:block}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .nl-form{flex-direction:column}
  .btn{width:100%;justify-content:center}
  .hero-ctas{flex-direction:column}
}
@media(max-width:520px){
  .cats,.products{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}

/* ---- Adaptations WordPress (menus wp_nav_menu en ul/li) ---- */
.main-nav ul{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0}
.main-nav li{margin:0}
.site-footer ul{list-style:none;margin:0;padding:0}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}

/* ---- Carrousel du hero (photos mise en situation) ---- */
.hero-gallery{
  position:relative;width:min(420px,100%);margin:0 auto;
  aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.34);
  background:var(--teal-deep);
}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.1s ease;
}
.hero-slide.is-active{opacity:1}
@media(max-width:980px){.hero-gallery{aspect-ratio:4/3;max-width:520px}}

/* ---- Accueil : produits visibles tout de suite (v1.2.0) ---- */
/* Section produits placée juste sous le bandeau : marge haute réduite. */
.hero + .products-section{padding-top:48px}
.products-section .section-head{margin-bottom:32px}
/* Cartes centrées quand il y a moins de produits qu'une ligne complète. */
.products-section ul.products{grid-template-columns:repeat(auto-fit,minmax(220px,270px));justify-content:center}
/* Téléphone : le médaillon décoratif est masqué pour que les produits
   apparaissent dès le premier écran ; boutons côte à côte, plus compacts. */
@media(max-width:720px){
  .hero-medallion{display:none}
  .hero-inner{padding:28px 20px 64px;gap:0}
  .hero h1{font-size:2rem}
  .hero p.lead{font-size:.98rem;margin-bottom:18px}
  .hero-ctas{flex-direction:row;justify-content:center;gap:10px}
  .hero-ctas .btn{width:auto;padding:12px 20px;font-size:.78rem}
  .hero-gallery{max-width:320px}
}
@media(max-width:520px){
  .products-section ul.products{grid-template-columns:1fr}
}

/* ============ v1.3.0 — BANDEAU : PRODUITS MIS EN AVANT ============ */
/* Remplace le médaillon animé : trois photos produit, sans prix ni bouton
   (l'achat se fait dans la section « New arrivals » juste en dessous). */
.hero-products{
  display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;
  gap:12px;width:min(400px,100%);aspect-ratio:4/3;margin:0 auto;
}
.hero-products .hero-product:first-child{grid-row:span 2}
/* Moins de trois produits : on remplit la grille proprement. */
.hero-products .hero-product:only-child{grid-column:span 2;grid-row:span 2}
.hero-products .hero-product:first-child:nth-last-child(2),
.hero-products .hero-product:first-child:nth-last-child(2) ~ .hero-product{grid-row:span 2}
.hero-product{
  position:relative;display:block;overflow:hidden;
  border-radius:16px;background:var(--teal-deep);
  box-shadow:0 18px 44px rgba(0,0,0,.32);
  transition:transform .3s ease,box-shadow .3s ease;
}
.hero-product img{width:100%;height:100%;object-fit:cover;display:block}
.hero-product:hover,.hero-product:focus-visible{transform:translateY(-4px);box-shadow:0 26px 56px rgba(0,0,0,.42)}
.hero-product-name{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 12px 10px;
  background:linear-gradient(to top,rgba(23,60,68,.92),rgba(23,60,68,0));
  color:var(--cream);font-size:.74rem;font-weight:600;line-height:1.25;
}
.hero-products .hero-product:not(:first-child) .hero-product-name{font-size:.66rem;padding:18px 10px 8px}

/* ============ v1.3.0 — COLLECTIONS ILLUSTRÉES ============ */
/* Photo de la catégorie, sinon photo du premier produit (tf_term_visual_id). */
.cat-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.cat-card:hover .cat-visual img{transform:scale(1.05)}
/* Repli sans aucune photo : médaillons en filigrane plutôt qu'un aplat. */
.cat-fallback{display:block}

@media(max-width:720px){
  /* Bandeau : bande de trois vignettes carrées, pour garder les produits
     visibles dès le premier écran. */
  .hero-products{
    grid-template-columns:repeat(3,1fr);grid-template-rows:auto;
    aspect-ratio:auto;max-width:330px;gap:8px;margin-top:18px;
  }
  .hero-products .hero-product,
  .hero-products .hero-product:first-child,
  .hero-products .hero-product:only-child,
  .hero-products .hero-product:first-child:nth-last-child(2),
  .hero-products .hero-product:first-child:nth-last-child(2) ~ .hero-product{
    grid-row:auto;grid-column:auto;aspect-ratio:1/1;border-radius:12px;
  }
  .hero-product{box-shadow:0 10px 24px rgba(0,0,0,.28)}
  .hero-product-name{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-product,.cat-visual img{transition:none}
  .hero-product:hover{transform:none}
  .cat-card:hover .cat-visual img{transform:none}
}
/* Photos produit claires : voile plus haut et plus dense pour que le nom
   de la collection reste lisible (sur un duvet blanc notamment). */
.cat-card .cat-label{
  padding:38px 18px 20px;
  background:linear-gradient(to top,
    rgba(23,60,68,.96) 0%,
    rgba(23,60,68,.84) 42%,
    rgba(23,60,68,.30) 78%,
    rgba(23,60,68,0) 100%);
}
.cat-label h3{text-shadow:0 1px 10px rgba(23,60,68,.6)}

/* ============ v1.4.0 — MENU DÉROULANT ET MENU MOBILE ============ */
/* Sous-menu « Shop » par type de produit, et ouverture du burger, qui
   jusqu'ici n'était relié à aucun script. */
.site-header{position:relative}
.main-nav li{position:relative}

.main-nav .sub-menu{
  display:none;position:absolute;top:100%;left:-16px;
  min-width:210px;margin:0;padding:8px 0;list-style:none;
  background:var(--cream);border:1px solid rgba(32,80,90,.14);
  border-radius:12px;box-shadow:0 18px 40px rgba(23,60,68,.18);
  z-index:60;
}
/* :focus-within ouvre le menu au clavier, pas seulement à la souris. */
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu{display:block}
.main-nav .sub-menu li{margin:0}
.main-nav .sub-menu a{
  display:block;padding:9px 18px;
  font-size:.82rem;letter-spacing:.02em;text-transform:none;
  color:var(--ink);
}
.main-nav .sub-menu a:hover{color:var(--coral);background:rgba(32,80,90,.05)}
.main-nav .sub-menu a::after{display:none} /* pas de soulignement animé ici */

@media(max-width:720px){
  /* Panneau déplié par le burger : on réutilise le menu, sans le dupliquer. */
  .site-header.nav-open .main-nav{
    display:block;position:absolute;left:0;right:0;top:100%;
    padding:10px 20px 18px;
    background:var(--cream);
    border-bottom:1px solid rgba(32,80,90,.14);
    box-shadow:0 18px 40px rgba(23,60,68,.16);
    z-index:70;
  }
  .site-header.nav-open .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-header.nav-open .main-nav > ul > li > a{
    display:block;padding:13px 0;
    border-bottom:1px dashed rgba(32,80,90,.18);
  }
  .site-header.nav-open .main-nav a::after{display:none}
  /* Sur téléphone le sous-menu est toujours déplié : pas de survol possible. */
  .site-header.nav-open .main-nav .sub-menu{
    display:block;position:static;min-width:0;
    margin:0 0 4px;padding:2px 0 6px;
    background:none;border:0;border-radius:0;box-shadow:none;
  }
  .site-header.nav-open .main-nav .sub-menu a{
    padding:9px 0 9px 16px;font-size:.8rem;color:var(--teal);
  }
}

/* ---- v1.4.0 : entête sur téléphone ----
   Le burger était écrasé à 0 px de large : à 375 px, le nom de marque en
   2,2 rem et le bouton panier consommaient toute la ligne, et le bouton
   sans largeur propre était le seul élément que le flex pouvait réduire.
   Il était donc présent, invisible et intouchable. */
@media(max-width:720px){
  .header-inner{padding:12px 16px;gap:12px}
  .brand{min-width:0;gap:9px}
  .brand-mark{width:38px;height:38px}
  .brand-name{font-size:1.7rem;white-space:nowrap}
  .header-actions{flex:none;gap:10px}
  .cart-btn{padding:8px 14px;font-size:.72rem;gap:6px}
  .burger{
    flex:none;display:grid;place-items:center;
    width:44px;height:44px;padding:0;  /* cible tactile confortable */
  }
  .burger svg{display:block;width:24px;height:24px;flex:none}
}

/* ============ v1.5.0 — BULLE D'AIDE ============ */
/* Réponses automatiques tirées de la page FAQ. Aucun service tiers. */
.tf-help{position:fixed;right:20px;bottom:20px;z-index:9000;font-size:.88rem}

.tf-help-toggle{
  display:grid;place-items:center;
  width:56px;height:56px;margin-left:auto;padding:0;
  border:none;border-radius:50%;cursor:pointer;
  background:var(--coral);color:#fff;
  box-shadow:0 10px 30px rgba(228,105,74,.42);
  transition:background .2s ease,transform .2s ease;
}
.tf-help-toggle:hover{background:var(--teal);transform:translateY(-2px)}
.tf-help-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tf-help-icon-close{display:none}
.tf-help-toggle.is-open{background:var(--teal)}
.tf-help-toggle.is-open .tf-help-icon-open{display:none}
.tf-help-toggle.is-open .tf-help-icon-close{display:block}

.tf-help-panel{
  display:flex;flex-direction:column;
  width:min(360px,calc(100vw - 40px));max-height:min(560px,calc(100vh - 130px));
  margin-bottom:14px;overflow:hidden;
  background:var(--cream);border:1px solid rgba(32,80,90,.16);
  border-radius:18px;box-shadow:0 24px 60px rgba(23,60,68,.26);
}
.tf-help-panel[hidden]{display:none}

.tf-help-head{
  flex:none;padding:16px 18px 13px;
  background:var(--teal);color:var(--cream);
}
.tf-help-head strong{display:block;font-family:var(--font-display);font-size:1.12rem;font-weight:600}
.tf-help-note{display:block;margin-top:3px;font-size:.72rem;color:rgba(250,243,228,.72)}

.tf-help-thread{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:16px;display:flex;flex-direction:column;gap:10px;
}
.tf-help-msg{
  max-width:88%;padding:11px 14px;border-radius:14px;line-height:1.45;
}
.tf-help-msg.is-shop{align-self:flex-start;background:#fff;border-bottom-left-radius:5px;color:var(--ink)}
.tf-help-msg.is-visitor{align-self:flex-end;background:var(--teal);color:var(--cream);border-bottom-right-radius:5px}
.tf-help-link{
  align-self:flex-start;padding:9px 16px;border-radius:999px;
  background:var(--coral);color:#fff;text-decoration:none;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;
}
.tf-help-link:hover{background:var(--teal)}

.tf-help-suggest{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.tf-help-suggest-title{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);font-weight:700;margin-bottom:1px;
}
.tf-help-chip{
  text-align:left;padding:9px 13px;cursor:pointer;
  background:#fff;color:var(--teal);
  border:1px solid rgba(32,80,90,.22);border-radius:12px;
  font:inherit;font-size:.82rem;line-height:1.35;
  transition:border-color .2s ease,color .2s ease;
}
.tf-help-chip:hover{border-color:var(--coral);color:var(--coral)}

.tf-help-actions{
  flex:none;display:flex;gap:14px;
  padding:10px 16px;border-top:1px solid rgba(32,80,90,.12);
}
.tf-help-secondary{
  font-size:.76rem;font-weight:600;color:var(--teal);text-decoration:underline;
  text-underline-offset:3px;
}
.tf-help-secondary:hover{color:var(--coral)}

.tf-help-form{
  flex:none;display:flex;gap:8px;padding:12px 16px 16px;
  border-top:1px solid rgba(32,80,90,.12);
}
.tf-help-input{
  flex:1 1 auto;min-width:0;padding:10px 14px;
  border:1px solid rgba(32,80,90,.25);border-radius:999px;
  background:#fff;color:var(--ink);font:inherit;font-size:.84rem;
}
.tf-help-input:focus{outline:2px solid var(--teal);outline-offset:1px}
.tf-help-send{
  flex:none;padding:10px 17px;border:none;border-radius:999px;cursor:pointer;
  background:var(--teal);color:var(--cream);
  font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.tf-help-send:hover{background:var(--coral)}

@media(max-width:520px){
  .tf-help{right:14px;bottom:14px}
  .tf-help-toggle{width:52px;height:52px}
  .tf-help-panel{width:calc(100vw - 28px);max-height:calc(100vh - 110px)}
}
@media(prefers-reduced-motion:reduce){
  .tf-help-toggle{transition:none}
  .tf-help-toggle:hover{transform:none}
}