/* BANANA LOVER · main.css : styles par section (repris de la maquette V12) */
/* tokens.css est chargé séparément (enqueue.php, dépendance bl-tokens) : pas
   d'@import ici, pour éviter un double téléchargement + une chaîne render-blocking. */

/* ---------- Révélations au scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-img{clip-path:inset(8% 8% 8% 8% round 8px);transition:clip-path .9s var(--ease-out)}
.rv-img.in{clip-path:inset(0 0 0 0 round 8px)}

/* ---------- Vues (mini-router maquette) ---------- */
.view{display:none}
.view.active{display:block;animation:viewin .45s var(--ease-out)}
@keyframes viewin{from{opacity:0;transform:translateY(16px)}}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base),backdrop-filter var(--dur-base)}
.hdr.scrolled{background:rgba(5,16,15,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}
.hdr .in{max-width:var(--container);margin:0 auto;padding:0 var(--pad);height:76px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:17px}
.logo .mark{height:44px;width:auto;display:block;transition:transform var(--dur-base) var(--ease-out)}
.logo:hover .mark{transform:rotate(-8deg) scale(1.08)}
/* Nav du header : scopé à #primary-nav pour ne pas déteindre sur le sommaire
   des pages légales (.legal-toc est aussi un <nav>). */
#primary-nav{display:flex;gap:34px}
#primary-nav a{position:relative;font-family:var(--font-display);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);transition:color var(--dur-fast) var(--ease-out);padding:6px 0}
#primary-nav a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--bl-pink);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-base) var(--ease-out)}
#primary-nav a:hover{color:var(--text-primary)}
#primary-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.cart{position:relative;width:44px;height:44px;border-radius:var(--radius-m);border:1.5px solid var(--border-subtle);background:transparent;color:var(--bl-blanc);display:grid;place-items:center;transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.cart:hover{border-color:var(--border-strong);transform:scale(1.06)}
.cart .n{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:var(--radius-pill);background:var(--bl-pink);color:var(--bl-blanc);font:700 11px/20px var(--font-display);text-align:center;padding:0 5px}
.cart.bump .n{animation:bump .5s var(--ease-out)}
@keyframes bump{30%{transform:scale(1.45)}}

/* Bouton burger : masqué en desktop, révélé sous 1000px (voir media query).
   Reste au-dessus du panneau (header z-index 50 > nav 40) pour fermer le menu. */
.nav-toggle{display:none;position:relative;z-index:2;width:44px;height:44px;margin-left:14px;border:1.5px solid var(--border-subtle);border-radius:var(--radius-m);background:transparent;cursor:pointer;place-items:center;transition:border-color var(--dur-fast),background var(--dur-fast)}
.nav-toggle:hover{border-color:var(--border-strong)}
.nav-toggle[aria-expanded="true"]{border-color:var(--bl-pink);background:rgba(215,22,91,.16)}
.nav-toggle__bar{position:absolute;left:12px;width:20px;height:2px;background:var(--bl-blanc);border-radius:2px;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.nav-toggle__bar:nth-child(1){transform:translateY(-6px)}
.nav-toggle__bar:nth-child(3){transform:translateY(6px)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:rotate(-45deg)}
/* Verrou de scroll quand le menu mobile plein écran est ouvert */
html.nav-open{overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding-top:96px}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;animation:kenburns 14s linear both}
@keyframes kenburns{from{transform:scale(1.14) translateY(-1.5%)}to{transform:scale(1.02) translateY(0)}}
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,16,15,.5),rgba(5,16,15,.12) 42%,rgba(5,16,15,.94) 82%),
  linear-gradient(90deg,rgba(5,16,15,.55),rgba(5,16,15,.18) 42%,transparent 65%)}
/* Contenu en flux (flex-end sur .hero) et non plus absolute bottom:0 : le
   padding-top de .hero réserve la hauteur du header fixe (76px), donc l'eyebrow
   ne passe plus sous le header sur les petits/courts écrans (mobile). */
.hero .content{position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--pad) 110px}
/* Eyebrow : libellé de section, révélation cinétique lettre par lettre.
   main.js découpe le texte en lettres (spans .ch>span, index --i) puis pose .in à
   l'entrée dans le viewport : chaque lettre surgit de sa ligne de base avec un léger
   rebond, en cascade. Sans JS, fallback statique propre. La couleur suit currentColor
   (rose manifeste/404, jaune ailleurs). Tempo et taille regroupés en variables pour
   ajuster d'un coup : --eb-stag (écart cascade), --eb-rise (durée montée), --eb-size. */
.eyebrow{--eb-stag:78ms;--eb-rise:1.05s;--eb-size:16px;position:relative;display:inline-flex;flex-wrap:wrap;padding:3px 0;
  font-family:var(--font-display);font-weight:600;font-size:var(--eb-size);text-transform:uppercase;letter-spacing:.3em;
  color:var(--bl-yellow);line-height:1.14}
.eyebrow .ch{display:inline-block;overflow:hidden;padding-top:4px;margin-top:-4px}
.eyebrow .sp{width:.3em}
.eyebrow .ch>span{display:inline-block;transform:translateY(130%);opacity:0;will-change:transform,opacity;
  transition:transform var(--eb-rise) cubic-bezier(.19,.9,.28,1.28),opacity .5s ease;transition-delay:calc(var(--i) * var(--eb-stag))}
.eyebrow.in .ch>span{transform:none;opacity:1}
.hero h1{margin:18px 0 14px;font-family:var(--font-display);font-weight:600;font-size:clamp(44px,7vw,92px);line-height:1.02;letter-spacing:-.025em}
.hero h1 .accent{position:relative;display:inline-block;color:var(--bl-pink-2)}
.hero h1 .accent::after{content:'';position:absolute;left:0;bottom:.06em;height:.14em;width:100%;background:var(--bl-pink);z-index:-1;transform:scaleX(0);transform-origin:left;animation:sweep .7s var(--ease-out) 1.15s both}
@keyframes sweep{to{transform:scaleX(1)}}
.hero p{max-width:46ch;font:400 18px/1.65 var(--font-body);color:var(--text-secondary);margin-bottom:30px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.h-rv{opacity:0;transform:translateY(26px);animation:hrv var(--dur-slow) var(--ease-out) both}
@keyframes hrv{to{opacity:1;transform:none}}
/* Tampon rotatif : écho des logos circulaires de la charte */
.stamp{position:absolute;right:48px;bottom:44px;width:112px;height:112px;z-index:3;background:none;border:0;padding:0;color:var(--bl-blanc)}
.stamp svg{width:100%;height:100%;display:block;animation:spin 16s linear infinite}
.stamp:hover svg{animation-play-state:paused}
.stamp .arrow{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;line-height:1;transition:transform var(--dur-base) var(--ease-out)}
.stamp:hover .arrow{transform:translateY(5px)}
.stamp:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:640px){.stamp{right:16px;bottom:18px;width:72px;height:72px}.stamp .arrow{font-size:16px}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;border:0;border-radius:var(--radius-m);font-family:var(--font-display);font-weight:600;letter-spacing:.02em;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.btn .arr{display:inline-block;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .arr{transform:translateX(5px)}
.btn-l{height:58px;padding:0 34px;font-size:16px}
.btn-m{height:48px;padding:0 26px;font-size:14.5px}
.btn-contrast{background:var(--bl-blanc);color:var(--bl-noir)}
.btn-contrast:hover{background:#fff}
.btn-primary{background:var(--accent);color:var(--bl-blanc)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text-primary);border:1.5px solid var(--border-strong)}
.btn-ghost:hover{border-color:var(--bl-blanc)}
.btn-ig .ig-badge{position:relative;display:inline-flex;flex:none}
.btn-ig .ig-logo{display:block;width:22px;height:22px;border-radius:7px;box-shadow:0 0 0 1px rgba(251,248,249,.18),0 2px 8px rgba(0,0,0,.4);transform-origin:center;will-change:transform;transition:transform var(--dur-base) var(--ease-out)}
.btn-ig:hover .ig-logo{transform:rotate(-8deg) scale(1.12)}
/* Anneau qui jaillit derrière le logo (transform + opacity uniquement). */
.btn-ig .ig-badge::after{content:'';position:absolute;inset:-7px;border-radius:11px;border:2px solid var(--accent);opacity:0;transform:scale(.6);pointer-events:none}
/* Rafale d'attention déclenchée au scroll : le JS pose .is-attn à l'entrée en vue. */
.btn-ig.is-attn .ig-logo{animation:ig-attn .62s var(--ease-out) 3}
.btn-ig.is-attn .ig-badge::after{animation:ig-ring .62s var(--ease-out) 3}
@keyframes ig-attn{
  0%{transform:scale(1) rotate(0)}
  18%{transform:scale(1.5) rotate(-16deg)}
  36%{transform:scale(1.38) rotate(15deg)}
  54%{transform:scale(1.32) rotate(-11deg)}
  72%{transform:scale(1.22) rotate(8deg)}
  86%{transform:scale(1.12) rotate(-4deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes ig-ring{
  0%{opacity:0;transform:scale(.6)}
  14%{opacity:.85}
  100%{opacity:0;transform:scale(1.85)}
}
.btn-dark{background:var(--bl-noir);color:var(--bl-blanc)}
.btn-dark:hover{background:#12211f}

/* ---------- Marquee (signature) ---------- */
.marquee{position:relative;padding:26px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);overflow:hidden;background:var(--surface-page)}
.marquee .track{display:flex;gap:56px;width:max-content;animation:mq 26s linear infinite;will-change:transform}
.marquee:hover .track{animation-play-state:paused}
.mq-item{display:flex;align-items:center;gap:56px;font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mq-item .solid{color:var(--bl-blanc)}
.mq-item .ghost{color:transparent;-webkit-text-stroke:1.3px rgba(251,248,249,.5)}
.mq-item .dot{width:10px;height:10px;border-radius:50%;background:var(--bl-pink);flex:none}
.mq-item .dot.y{background:var(--bl-yellow)}
.mq-item .dot.t{background:var(--bl-teal-2)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{max-width:var(--container);margin:0 auto;padding:110px var(--pad) 0}
.section .head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.section h2{margin-top:10px;font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em}

.edition-note{max-width:62ch;font:400 15.5px/1.7 var(--font-body);color:var(--text-secondary);margin:-20px 0 40px}

/* ---------- Cartes produit ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{display:block;border-radius:var(--radius-l);overflow:hidden;background:var(--surface-raised);border:1px solid var(--border-subtle);transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base),box-shadow var(--dur-base);cursor:pointer}
.card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 18px 48px rgba(0,0,0,.45)}
.card .visual{position:relative;aspect-ratio:4/4.4;overflow:hidden;background:#0e1b1a}
.card .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease-out),transform .8s var(--ease-out)}
.card .visual .worn{opacity:0}
.card:hover .visual .worn{opacity:1}
.card:hover .visual img{transform:scale(1.05)}
.badge{font:600 11px var(--font-display);letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:var(--radius-pill);display:inline-block}
.badge[hidden]{display:none}
.badge.pos{position:absolute;top:14px;left:14px;z-index:2}
.badge.collector{background:var(--bl-yellow);color:var(--bl-noir)}
.badge.new{background:var(--bl-teal-2);color:var(--bl-noir)}
.badge.sale{background:var(--bl-pink);color:var(--bl-blanc)}
.badge.num{background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary)}
.card .body{padding:20px 22px 24px;position:relative}
.card .body::before{content:'';position:absolute;top:0;left:22px;right:22px;height:2px;background:var(--bl-pink);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
.card:hover .body::before{transform:scaleX(1)}
.card .name{font-family:var(--font-display);font-weight:600;font-size:17px}
.card .sub{font:400 13px var(--font-body);color:var(--text-secondary);margin-top:5px}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.card .price{font-family:var(--font-display);font-weight:600;font-size:17px}
.card .see{font:600 12.5px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--bl-pink-2);opacity:0;transform:translateX(-8px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.card:hover .see{opacity:1;transform:none}

/* ---------- Section VIDEO ---------- */
.video-sec{position:relative;margin-top:110px;padding:110px 0;background:linear-gradient(180deg,var(--surface-page),#081513 50%,var(--surface-page))}
.video-sec .in{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.video-sec .head{text-align:center;margin-bottom:46px}
.video-frame{position:relative;max-width:980px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border-strong);box-shadow:0 30px 90px rgba(0,0,0,.55)}
/* Format vertical (9:16) du rush shooting : cadre portrait centré. */
.video-frame.is-portrait{max-width:min(430px,84vw);aspect-ratio:9/16;box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 0 1px rgba(251,248,249,.04)}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.video-frame .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,16,15,.28) 0%,rgba(5,16,15,0) 22%,rgba(5,16,15,0) 68%,rgba(5,16,15,.5) 100%);transition:opacity var(--dur-base) var(--ease-out)}
.video-caption{text-align:center;margin-top:48px;font:400 14px var(--font-body);color:var(--text-faint)}
.video-caption::before{content:'';display:block;width:44px;height:2px;margin:0 auto 20px;border-radius:2px;background:var(--bl-yellow);transform:scaleX(0);transform-origin:center;transition:transform var(--dur-slow) var(--ease-out) .2s}
.video-caption.in::before{transform:scaleX(1)}

/* ---------- L'HISTOIRE : "La lettre" (cinématique) ---------- */
.letter{margin-top:110px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:92vh}
.letter-photo{position:relative;overflow:hidden;background:var(--surface-raised)}
.letter-photo img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:center 20%;filter:grayscale(1) contrast(1.05);transition:filter 1.4s var(--ease-out);will-change:transform}
.letter-photo .tint{position:absolute;inset:0;background:var(--bl-teal);mix-blend-mode:multiply;opacity:.55;transition:opacity 1.4s var(--ease-out);pointer-events:none}
.letter-photo .tint2{position:absolute;inset:0;background:linear-gradient(160deg,var(--bl-pink),transparent 60%);mix-blend-mode:screen;opacity:.18;transition:opacity 1.4s var(--ease-out);pointer-events:none}
.letter.dev .letter-photo img{filter:none}
.letter.dev .tint{opacity:0}
.letter.dev .tint2{opacity:0}
.letter-photo .credit{position:absolute;left:22px;bottom:20px;font:600 11px var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:rgba(251,248,249,.85);background:rgba(5,16,15,.45);backdrop-filter:blur(4px);padding:8px 13px;border-radius:var(--radius-m)}
.letter-paper{position:relative;background:var(--surface-light);color:var(--text-on-light);display:flex;align-items:center;overflow:hidden}
.letter-paper .ghost{position:absolute;top:44px;left:-10px;font-family:var(--font-display);font-weight:700;font-size:clamp(90px,10vw,150px);letter-spacing:.04em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.2px rgba(5,16,15,.07);white-space:nowrap;pointer-events:none;user-select:none;will-change:transform}
.letter-paper .inner{position:relative;padding:110px clamp(36px,6vw,96px);max-width:640px}
.letter-line{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.letter.dev .letter-line{opacity:1;transform:none}
.letter.dev .letter-line:nth-child(2){transition-delay:.15s}
.letter.dev .letter-line:nth-child(3){transition-delay:.3s}
.letter.dev .letter-line:nth-child(4){transition-delay:.45s}
.letter.dev .letter-line:nth-child(5){transition-delay:.6s}
.letter.dev .letter-line:nth-child(6){transition-delay:.75s}
.letter.dev .letter-line:nth-child(7){transition-delay:.9s}
.letter-paper h2{font-family:var(--font-display);font-weight:600;font-size:clamp(36px,3.6vw,52px);letter-spacing:-.02em;line-height:1.08;margin:16px 0 26px}
.letter-paper h2 .comma{color:var(--bl-pink)}
.letter-paper p{font:400 16.5px/1.8 var(--font-body);color:var(--text-on-light-secondary);margin:0 0 18px;max-width:52ch}
.letter-paper p strong{color:var(--text-on-light);font-weight:700}
.sign{display:flex;flex-direction:column;gap:2px;margin:8px 0 32px}
.sign .sign-mark{display:block;width:clamp(250px,28vw,350px);height:auto;color:var(--text-on-light)}
/* Signature « écrite en direct » : chaque lettre se trace à la plume dans l'ordre de lecture,
   puis la paraphe rose. pathLength=1 normalise la longueur de chaque tracé (léger recouvrement
   entre lettres pour un geste continu). « les banana lovers » = 15 lettres. */
.sign .sign-mark .gl path,.sign .sign-mark .sign-underline{stroke-dasharray:1;stroke-dashoffset:1}
.letter.dev .sign .sign-mark .gl path{animation:sign-draw .22s var(--ease-out) both}
.letter.dev .sign .sign-mark .sign-underline{animation:sign-draw .5s var(--ease-out) both;animation-delay:3.05s}
@keyframes sign-draw{to{stroke-dashoffset:0}}
.letter.dev .sign .sign-mark .gl:nth-of-type(1) path{animation-delay:.60s}
.letter.dev .sign .sign-mark .gl:nth-of-type(2) path{animation-delay:.76s}
.letter.dev .sign .sign-mark .gl:nth-of-type(3) path{animation-delay:.92s}
.letter.dev .sign .sign-mark .gl:nth-of-type(4) path{animation-delay:1.08s}
.letter.dev .sign .sign-mark .gl:nth-of-type(5) path{animation-delay:1.24s}
.letter.dev .sign .sign-mark .gl:nth-of-type(6) path{animation-delay:1.40s}
.letter.dev .sign .sign-mark .gl:nth-of-type(7) path{animation-delay:1.56s}
.letter.dev .sign .sign-mark .gl:nth-of-type(8) path{animation-delay:1.72s}
.letter.dev .sign .sign-mark .gl:nth-of-type(9) path{animation-delay:1.88s}
.letter.dev .sign .sign-mark .gl:nth-of-type(10) path{animation-delay:2.04s}
.letter.dev .sign .sign-mark .gl:nth-of-type(11) path{animation-delay:2.20s}
.letter.dev .sign .sign-mark .gl:nth-of-type(12) path{animation-delay:2.36s}
.letter.dev .sign .sign-mark .gl:nth-of-type(13) path{animation-delay:2.52s}
.letter.dev .sign .sign-mark .gl:nth-of-type(14) path{animation-delay:2.68s}
.letter.dev .sign .sign-mark .gl:nth-of-type(15) path{animation-delay:2.84s}

/* ---------- Bande photo ---------- */
.strip-sec{padding-top:110px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start;max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
/* Mur décalé : colonnes paires descendues (bord haut/bas en quinconce, écarts uniformes). */
.strip a:nth-child(2n){margin-top:clamp(30px,4vw,56px)}
.strip a{position:relative;border-radius:var(--radius-l);overflow:hidden;aspect-ratio:3/4;display:block}
.strip img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .8s var(--ease-out)}
.strip a:hover img{transform:scale(1.07)}
.strip a::after{content:'@banana_loveroff';position:absolute;bottom:12px;left:14px;font:600 11px var(--font-display);letter-spacing:.12em;color:var(--bl-blanc);opacity:0;transform:translateY(6px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.strip a:hover::after{opacity:1;transform:none}

/* ---------- Newsletter ---------- */
.news{max-width:820px;margin:0 auto;padding:130px var(--pad) 120px;text-align:center}
.news h2{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;margin:12px 0 14px}
.news p{color:var(--text-secondary);font:400 16px/1.6 var(--font-body);margin-bottom:30px}
.news-form{display:flex;flex-direction:column;gap:14px;max-width:480px;margin:0 auto}
.news-row{display:flex;gap:10px}
.news input[type=email]{-webkit-appearance:none;appearance:none;flex:1;height:54px;border-radius:var(--radius-m);border:1.5px solid var(--border-subtle);background:var(--surface-raised);color:var(--text-primary);padding:0 18px;font:400 15px var(--font-body);transition:border-color var(--dur-fast)}
.news input[type=email]:focus{outline:none;border-color:var(--field-focus);box-shadow:0 0 0 3px var(--field-focus-ring)}
.news input[type=email]::placeholder{color:var(--text-faint)}
.news-consent{display:flex;gap:10px;align-items:flex-start;text-align:left;color:var(--text-secondary);font:400 13px/1.5 var(--font-body);cursor:pointer}
.news-consent input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--selected);cursor:pointer}
.news-consent a{color:var(--bl-pink);text-decoration:underline}
.news-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.news-msg{min-height:1.2em;margin:0;font:500 13px/1.4 var(--font-body);text-align:left}
.news-msg.is-error{color:var(--bl-pink)}
.news-msg.is-ok{color:var(--bl-teal-2)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border-subtle)}
footer .in{max-width:var(--container);margin:0 auto;padding:64px var(--pad) 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer h4{font:600 12px var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer li a{font:400 14px var(--font-body);color:var(--text-secondary);transition:color var(--dur-fast)}
footer li a:hover{color:var(--bl-blanc)}
footer .baseline{font:400 14px/1.7 var(--font-body);color:var(--text-secondary);max-width:32ch;margin-top:14px}
.legal{max-width:var(--container);margin:0 auto;padding:0 var(--pad) 26px;display:flex;justify-content:space-between;font:400 12.5px var(--font-body);color:var(--text-faint)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;right:24px;z-index:100;display:flex;align-items:center;gap:12px;max-width:min(360px,calc(100vw - 48px));background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-m);padding:14px 18px;font:500 14px var(--font-body);color:var(--text-primary);box-shadow:0 12px 48px rgba(0,0,0,.6);transform:translateY(calc(100% + 48px));transition:transform .45s var(--ease-out)}
.toast.show{transform:none}
.toast-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--bl-teal-2)}
/* Variante erreur : accent rose de la DA porté par la pastille + une bordure
   fine homogène (pas de trait latéral) + un halo rose qui pulse. */
.toast.is-error{border-color:rgba(215,22,91,.5)}
.toast.is-error.show{animation:blToastGlow 1.7s var(--ease-in-out) infinite}
.toast.is-error .toast-dot{background:var(--bl-pink);box-shadow:0 0 0 4px rgba(215,22,91,.18)}
/* On conserve l'ombre portée (profondeur) et on fait respirer un halo rose. */
@keyframes blToastGlow{
  0%,100%{box-shadow:0 12px 48px rgba(0,0,0,.55),0 0 16px 1px rgba(215,22,91,.25)}
  50%{box-shadow:0 12px 48px rgba(0,0,0,.55),0 0 38px 8px rgba(215,22,91,.6)}
}

/* ==========================================================
   FICHE PRODUIT (PDP)
   ========================================================== */
.pdp{max-width:var(--container);margin:0 auto;padding:110px var(--pad) 0}
.crumb{display:flex;align-items:center;gap:10px;font:500 13px var(--font-display);letter-spacing:.06em;color:var(--text-faint);margin-bottom:30px}
.crumb a{color:var(--text-secondary);transition:color var(--dur-fast)}
.crumb a:hover{color:var(--bl-blanc)}
.pdp-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:64px;align-items:start}
.gallery{position:sticky;top:100px;display:flex;flex-direction:column;gap:14px}
.gallery .main{position:relative;overflow:hidden;border-radius:var(--radius-l);background:var(--surface-raised);aspect-ratio:4/4.2}
.gallery .main img{width:100%;height:100%;object-fit:cover;animation:imgin .5s var(--ease-out)}
@keyframes imgin{from{opacity:0;transform:scale(1.03)}}
.gallery .thumbs{display:flex;gap:12px}
.gallery .thumbs button{width:88px;height:88px;padding:0;border-radius:var(--radius-m);overflow:hidden;border:1.5px solid var(--border-subtle);background:var(--surface-raised);transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.gallery .thumbs button:hover{transform:translateY(-3px)}
.gallery .thumbs button.sel{border-color:var(--bl-blanc)}
.gallery .thumbs img{width:100%;height:100%;object-fit:cover}
.pinfo{display:flex;flex-direction:column;gap:24px}
.pinfo .badges{display:flex;gap:8px}
.pinfo h1{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,3.8vw,48px);letter-spacing:-.02em;line-height:1.06}
.rating{display:flex;align-items:center;gap:10px;font:500 13.5px var(--font-body);color:var(--text-secondary)}
.rating .stars{color:var(--bl-yellow);letter-spacing:2px;font-size:15px}
.rating a{text-decoration:underline;text-underline-offset:3px;color:var(--text-faint)}
.rating a:hover{color:var(--text-primary)}
.pprice{display:flex;align-items:baseline;gap:14px}
.pprice .now{font-family:var(--font-display);font-weight:600;font-size:30px}
.pprice .was{font:400 17px var(--font-body);color:var(--text-faint);text-decoration:line-through}
.pdesc{font:400 15.5px/1.75 var(--font-body);color:var(--text-secondary);max-width:54ch}
.lbl{display:flex;justify-content:space-between;align-items:center;font:600 12px var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.lbl button{background:none;border:0;color:var(--bl-teal-3);font:500 12.5px var(--font-body);text-decoration:underline;text-decoration-color:rgba(152,209,201,.5);text-underline-offset:3px;text-transform:none;letter-spacing:0;cursor:pointer;transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.lbl button:hover{color:var(--bl-teal-2);text-decoration-color:var(--bl-teal-2)}
.blk{display:flex;flex-direction:column;gap:12px}
.swatches{display:flex;gap:12px}
.swatch{width:42px;height:42px;border-radius:50%;border:2px solid var(--border-subtle);padding:3px;background:transparent;transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out);position:relative}
.swatch span{display:block;width:100%;height:100%;border-radius:50%}
.swatch:hover{transform:scale(1.12)}
.swatch.sel{border-color:var(--bl-blanc)}
.sizes{display:flex;gap:10px;flex-wrap:wrap}
.size{min-width:52px;height:46px;padding:0 14px;border-radius:var(--radius-m);border:1.5px solid var(--border-subtle);background:transparent;color:var(--text-primary);font:600 14px var(--font-display);transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.size:hover:not(:disabled){border-color:var(--border-strong);transform:translateY(-2px)}
.size.sel{background:var(--bl-blanc);color:var(--bl-noir);border-color:var(--bl-blanc)}
.size:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.buyrow{display:flex;gap:12px}
.qty{display:flex;align-items:center;border:1.5px solid var(--border-subtle);border-radius:var(--radius-m);height:58px}
.qty button{width:46px;height:100%;background:none;border:0;color:var(--text-primary);font-size:19px;transition:color var(--dur-fast)}
.qty button:hover{color:var(--bl-pink-2)}
.qty .v{min-width:30px;text-align:center;font:600 16px var(--font-display)}
.buyrow .btn-primary{flex:1}
.reassure{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border-subtle);padding-top:20px;font:400 13.5px var(--font-body);color:var(--text-secondary)}
.reassure span::before{content:'→ ';color:var(--bl-teal-2)}
.acc{border-top:1px solid var(--border-subtle)}
.acc:last-child{border-bottom:1px solid var(--border-subtle)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;font:600 14px var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:20px;color:var(--text-faint);transition:transform var(--dur-base) var(--ease-out)}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .body{padding:0 0 20px;font:400 14.5px/1.75 var(--font-body);color:var(--text-secondary)}
.acc .body ul{padding-left:18px;display:flex;flex-direction:column;gap:6px}

/* ---------- Avis ---------- */
.reviews{margin-top:110px}
.reviews .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.review{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-l);padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.review:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.review .stars{color:var(--bl-yellow);letter-spacing:2px}
.review p{font:400 14.5px/1.7 var(--font-body);color:var(--text-secondary)}
.review .who{font:600 13px var(--font-display);letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.review .who .ok{color:var(--bl-teal-2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* ---------- Modale guide des tailles ---------- */
.scrim{position:fixed;inset:0;background:rgba(5,16,15,.72);backdrop-filter:blur(5px);display:none;place-items:center;z-index:120;animation:fade var(--dur-fast) var(--ease-out)}
.scrim.open{display:grid}
@keyframes fade{from{opacity:0}}
.modal{width:min(620px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-l);padding:32px;position:relative;animation:viewin .35s var(--ease-out)}
.modal h3{font-family:var(--font-display);font-weight:600;font-size:22px;margin-bottom:6px}
.modal .sub{font:400 13.5px var(--font-body);color:var(--text-secondary);margin-bottom:22px}
.modal .x{position:absolute;top:16px;right:16px;background:none;border:0;color:var(--text-faint);font-size:22px;line-height:1;transition:color var(--dur-fast)}
.modal .x:hover{color:var(--text-primary)}
/* Conteneur : la table défile horizontalement dans son cadre si elle dépasse
   (mobile étroit + 5 colonnes) au lieu d'être rognée. Voir @media 640px. */
.sizetable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sizetable{width:100%;border-collapse:collapse;font:400 14px var(--font-body)}
.sizetable th{font:600 11.5px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-strong);white-space:nowrap}
.sizetable td{padding:11px 12px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);white-space:nowrap}
.sizetable tr td:first-child{font:600 14px var(--font-display);color:var(--text-primary)}
.sizetable tr:hover td{background:rgba(251,248,249,.04)}
.modal .note{margin-top:16px;font:400 12.5px var(--font-body);color:var(--text-faint)}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .grid3,.reviews .grid{grid-template-columns:1fr 1fr}
  .letter{grid-template-columns:1fr;min-height:0}
  .letter-photo{min-height:62vh}
  .letter-paper .inner{padding:80px var(--pad)}
  .strip{grid-template-columns:1fr 1fr}
  .strip a:nth-child(2n){margin-top:clamp(22px,6vw,38px)}
  footer .in{grid-template-columns:1fr 1fr}
  .nav-toggle{display:grid}
  /* Menu mobile : panneau plein écran, révélation éditoriale.
     Lueurs rose + teal de la charte, grande typo display, liens numérotés,
     entrée en cascade. Le header (z-index 50) reste au-dessus : logo + burger visibles. */
  /* Dimensionnement en unités viewport (pas inset:0) : le panneau couvre tout l'écran
     même quand .hdr.scrolled pose un backdrop-filter (qui ferait sinon de .hdr le bloc
     conteneur du fixed et clipperait le fond à la hauteur du header). */
  /* NB : ces règles ciblent #primary-nav (le menu burger du header) et NON un
     `nav` générique : le sommaire des pages légales est aussi un <nav> (.legal-toc)
     et héritait sinon de opacity:0/visibility:hidden → ses liens devenaient
     invisibles tout en occupant la hauteur, d'où une fausse « grosse marge »
     sous le titre. Toujours scoper le menu mobile à #primary-nav. */
  #primary-nav{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;z-index:40;
      display:flex;flex-direction:column;justify-content:center;gap:0;
      counter-reset:navi;
      padding:calc(76px + 5vh) var(--pad) max(40px,8vh);
      background:
        radial-gradient(130% 70% at 100% 0%, rgba(215,22,91,.18), transparent 55%),
        radial-gradient(120% 80% at 0% 100%, rgba(30,130,128,.24), transparent 52%),
        rgba(5,16,15,.98);
      -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
      transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
      transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out),visibility var(--dur-base)}
  #primary-nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  /* Menu ouvert : on efface le chrome du header (fond flouté) pour supprimer le bloc
     conteneur parasite et laisser le panneau plein écran s'afficher proprement.
     Logo + burger restent au-dessus (header z-50 > menu z-40). */
  html.nav-open .hdr,html.nav-open .hdr.scrolled{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Indice de cascade posé sur l'enfant structurel (a en fallback, li avec un menu),
     hérité par le lien : robuste aux deux structures de sortie de wp_nav_menu. */
  #primary-nav>a,#primary-nav>li{--i:0;width:100%;list-style:none}
  #primary-nav>:nth-child(1){--i:1}#primary-nav>:nth-child(2){--i:2}#primary-nav>:nth-child(3){--i:3}
  #primary-nav>:nth-child(4){--i:4}#primary-nav>:nth-child(5){--i:5}#primary-nav>:nth-child(6){--i:6}#primary-nav>:nth-child(7){--i:7}
  #primary-nav a{position:relative;display:flex;align-items:baseline;gap:16px;width:100%;padding:14px 0;
        font-family:var(--font-display);font-weight:600;font-size:clamp(30px,8.5vw,46px);
        line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:var(--text-primary);
        border-bottom:1px solid var(--border-subtle);
        transform:translateY(18px);opacity:0;
        transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out),color var(--dur-fast)}
  #primary-nav a::before{counter-increment:navi;content:counter(navi,decimal-leading-zero);
        font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.12em;
        color:var(--bl-yellow);transform:translateY(-.55em)}
  #primary-nav a::after{display:none}
  #primary-nav a:last-child,#primary-nav>li:last-child a{border-bottom:0}
  #primary-nav a:hover,#primary-nav a:active,#primary-nav .current-menu-item>a{color:var(--bl-pink-2)}
  #primary-nav.open a{transform:none;opacity:1;transition-delay:calc(var(--i) * 55ms)}
  /* Anti-flash : au franchissement du breakpoint, JS pose .no-anim le temps du resize
     pour que le panneau bascule sans fondu parasite. */
  #primary-nav.no-anim,#primary-nav.no-anim a{transition:none!important}
  .pdp-grid{grid-template-columns:1fr;gap:40px}
  .gallery{position:static}
}
@media(max-width:640px){
  :root{--pad:20px}
  /* Garde-fou : jamais de scroll horizontal sur mobile. On corrige les sources
     réelles de débordement (ex. rangée quantité+CTA fiche produit), et ceci
     verrouille le comportement au cas où un élément dépasserait malgré tout.
     Sûr ici : aucun position:sticky sur mobile (galerie en static <1000px). */
  html,body{overflow-x:hidden;max-width:100%}
  .grid3,.reviews .grid{grid-template-columns:1fr}
  /* Héros mobile : contenu ancré en bas (flex-end du .hero) + compacté pour
     tenir sous le header sans chevauchement. */
  .hero{min-height:560px;padding-top:86px}
  .hero .content{padding-bottom:44px}
  .hero .eyebrow{--eb-size:13px;letter-spacing:.2em}
  .hero p{margin-bottom:22px;line-height:1.55}
  /* Newsletter mobile : champ + bouton empilés, même hauteur confortable,
     police 16px sur l'input (en dessous, iOS zoome au focus). */
  .news-row{flex-direction:column;gap:12px}
  /* En colonne, flex:1 (flex-basis:0) s'applique à la HAUTEUR et écrase le champ
     à ~0 → on le neutralise pour que height:56px soit respecté. */
  .news input[type=email]{flex:none;height:56px;font-size:16px}
  .news-row .btn{width:100%;height:56px}
  .mq-item{font-size:22px}
  .buyrow{flex-direction:column}
  .qty{justify-content:center}
  /* Tags fiche produit : texte réduit + nowrap pour rester sur UNE ligne chacun
     (à deux côte à côte ils étaient comprimés et passaient sur 2 lignes).
     flex-wrap de sécurité : sur écran très étroit le 2e tag passe dessous,
     mais chaque tag garde son texte sur une seule ligne. */
  .pinfo .badges{flex-wrap:wrap;gap:8px 10px}
  .pinfo .badge{white-space:nowrap;font-size:9.5px;letter-spacing:.08em;padding:6px 11px}
  /* En-tête de section : passage en colonne (titre pleine largeur au-dessus,
     bouton en dessous). Sinon le bouton comprime le bloc titre et l'eyebrow,
     découpé caractère par caractère pour l'anim, se coupe en plein mot. */
  .section .head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:32px}
  .section .head .btn{flex:none}
  .section .head .eyebrow{--eb-size:13px;letter-spacing:.2em}
  /* Modale guide des tailles : padding resserré + colonnes compactées pour que
     le tableau (jusqu'à 5 colonnes) tienne dans la fiche ; s'il dépasse malgré
     tout, .sizetable-wrap défile horizontalement au lieu d'être rogné. */
  .modal{padding:24px 20px}
  .modal h3{font-size:20px}
  .modal .sub{margin-bottom:18px}
  .sizetable th{padding:9px 8px;letter-spacing:.05em;font-size:10.5px}
  .sizetable td{padding:10px 8px;font-size:13.5px}
  .sizetable tr td:first-child{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv,.h-rv{opacity:1;transform:none}
  .rv-img{clip-path:none}
  .eyebrow .ch>span{transform:none;opacity:1}
  .video-caption::before{transform:scaleX(1)}
}

/* ==========================================================
   GLUE WORDPRESS (hors maquette) : accessibilité & conteneurs
   ========================================================== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;z-index:200;top:0}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:var(--bl-pink);color:var(--bl-blanc);padding:10px 16px;border-radius:var(--radius-m);font:600 14px var(--font-display)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* Logo personnalisé (Customizer) aligné sur la tache 44px de la maquette */
.custom-logo-link{display:inline-flex;align-items:center}
.custom-logo{height:44px!important;width:auto!important;transition:transform var(--dur-base) var(--ease-out)}
.custom-logo-link:hover .custom-logo{transform:rotate(-8deg) scale(1.08)}
/* Conteneurs WooCommerce (boutique, archives, panier, checkout) */
.woo-main{max-width:var(--container);margin:0 auto;padding:130px var(--pad) 80px;min-height:60vh}
.woo-main a{color:var(--bl-pink-2)}
/* Liens légaux du pied de page */
.legal-links{display:inline-flex;flex-wrap:wrap;gap:8px}
.legal-links a{color:var(--text-faint);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.legal-links a:hover,.legal-links a:focus-visible{color:var(--bl-blanc);text-decoration-color:currentColor}
.site-credit{max-width:var(--container);margin:0 auto;padding:22px var(--pad) 34px;border-top:1px solid var(--border-subtle);font:500 12.5px/1.5 var(--font-body);letter-spacing:.02em;color:var(--text-faint);text-align:center}
.site-credit p{margin:0}
.site-credit p+p{margin-top:5px}
.site-credit a{color:var(--bl-pink);font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:1px;text-shadow:0 0 10px rgba(215,22,91,.35);transition:color var(--dur-fast),text-decoration-color var(--dur-fast),text-shadow var(--dur-fast);animation:credit-glow 3.2s var(--ease-in-out) 1s infinite}
/* Halo rose « qui respire » : jamais éteint (base .35), pulse plus lumineux à mi-cycle pour attirer l'œil sans être clignotant. */
@keyframes credit-glow{50%{text-shadow:0 0 22px rgba(215,22,91,.7),0 0 6px rgba(215,22,91,.5)}}
.site-credit a:hover,.site-credit a:focus-visible{color:#ef2570;text-decoration-color:currentColor;text-shadow:0 0 24px rgba(239,37,112,.85),0 0 8px rgba(239,37,112,.6);animation:none}

/* ---------- Footer mobile : bloc marque pleine largeur + nav 2 colonnes,
   ligne légale empilée (copyright puis liens) au lieu de se télescoper. ---------- */
@media(max-width:640px){
  footer .in{grid-template-columns:1fr 1fr;gap:34px 24px;padding:48px var(--pad) 30px}
  footer .in>:first-child{grid-column:1 / -1}
  footer .baseline{max-width:none}
  .legal{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:26px}
  .legal-links{gap:9px 12px}
  .site-credit{padding-top:22px;line-height:1.6}
}

/* ==========================================================
   FICHE PRODUIT : liaison WooCommerce natif <-> skin maquette
   (masque les <select> par défaut, restyle qty + bouton)
   ========================================================== */
.bl-notices{max-width:640px;margin:0 auto 20px}
.bl-notices .woocommerce-message,.bl-notices .woocommerce-error,.bl-notices .woocommerce-info{
  list-style:none;background:var(--surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--radius-m);padding:14px 18px;margin-bottom:10px;
  font:500 14px var(--font-body);color:var(--text-primary);display:flex;align-items:center;gap:12px}
/* On neutralise l'icône absolue de WooCommerce (chevauchait le texte) et on la
   remplace par une pastille alignée en flex. */
.bl-notices .woocommerce-info::before{content:none}
.bl-notices .woocommerce-message::before,.bl-notices .woocommerce-error::before{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;position:static;margin:0;
  width:22px;height:22px;border-radius:50%;font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1}
.bl-notices .woocommerce-message{background:rgba(46,179,186,.08);border-color:rgba(46,179,186,.38)}
.bl-notices .woocommerce-message::before{content:"✓";background:var(--bl-teal-2);color:var(--bl-noir)}
/* Erreur : alerte visible sans barre latérale (fond + bordure rosés, pastille « ! »). */
.bl-notices .woocommerce-error{background:rgba(215,22,91,.1);border-color:rgba(215,22,91,.5)}
.bl-notices .woocommerce-error::before{content:"!";background:var(--bl-pink);color:var(--bl-blanc)}
.bl-notices a{color:var(--bl-pink-2)}

/* Le formulaire natif : on garde la logique, on cache la table de <select> */
.bl-cart .variations{display:none!important}

/* Garde-fou ajout panier : pulse rose sur le bloc dont le choix manque. */
.blk.bl-attn{animation:blAttn .7s var(--ease-out)}
@keyframes blAttn{0%{box-shadow:0 0 0 0 rgba(215,22,91,.5)}100%{box-shadow:0 0 0 12px rgba(215,22,91,0)}}
.bl-cart .woocommerce-variation-price,
.bl-cart .woocommerce-variation-availability,
.bl-cart .woocommerce-variation-description{display:none!important}
.bl-cart .single_variation_wrap{margin:0}
.bl-cart .woocommerce-variation.single_variation{margin:0}

/* buyrow = quantité (compacte) + gros CTA dominant */
.bl-cart,
.bl-cart form.cart,
.bl-cart .single_variation_wrap{width:100%}
/* Neutralise les styles génériques hérités par le <form> (grid + bordures
   haut/bas dont la ligne du bas coupait la zone d'achat en deux). */
.bl-cart form.cart{display:block;border:0;height:auto;margin:0;padding:0;background:none;box-shadow:none}
.bl-cart .woocommerce-variation-add-to-cart{display:flex;gap:14px;align-items:stretch;width:100%;margin:8px 0 4px}
/* État invalide : on grise visuellement mais on laisse Woo gérer le clic
   (il affiche un message si la sélection est incomplète). Pas de pointer-events:none. */
.bl-cart .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button,
.bl-cart .single_add_to_cart_button.disabled,
.bl-cart .single_add_to_cart_button:disabled{
  opacity:1;background:var(--bl-bordeaux);color:var(--bl-blanc);
  cursor:not-allowed;box-shadow:none}

/* Stepper quantité (− valeur +) : hauteur alignée sur le CTA */
.bl-cart .quantity.bl-qty{display:flex;align-items:center;border:1.5px solid var(--border-strong);
  border-radius:var(--radius-m);height:64px;overflow:hidden;flex:0 0 auto}
.bl-cart .quantity.bl-qty .bl-qminus,.bl-cart .quantity.bl-qty .bl-qplus{
  width:50px;height:100%;background:none;border:0;color:var(--text-primary);font-size:22px;line-height:1;
  display:grid;place-items:center;transition:color var(--dur-fast),background var(--dur-fast)}
.bl-cart .quantity.bl-qty .bl-qminus:hover,.bl-cart .quantity.bl-qty .bl-qplus:hover{
  color:var(--bl-pink-2);background:rgba(251,248,249,.05)}
.bl-cart .quantity.bl-qty input.qty{width:40px;height:100%;text-align:center;background:transparent;
  border:0;border-left:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle);
  color:var(--text-primary);font:600 17px var(--font-display);-moz-appearance:textfield}
.bl-cart .quantity.bl-qty input.qty::-webkit-outer-spin-button,
.bl-cart .quantity.bl-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* CTA « Ajoute au panier » : bouton d'achat dominant */
.bl-cart .single_add_to_cart_button{flex:1 1 auto;min-width:0;position:relative;display:inline-flex;align-items:center;
  justify-content:center;gap:10px;height:64px;padding:0 28px;border:0;border-radius:var(--radius-m);
  background:var(--accent);color:var(--bl-blanc);white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.01em;
  box-shadow:0 10px 30px rgba(215,22,91,.35);
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),box-shadow var(--dur-fast)}
.bl-cart .single_add_to_cart_button:hover{background:var(--accent-hover);transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(215,22,91,.5)}
.bl-cart .single_add_to_cart_button:active{transform:translateY(0) scale(.99)}
/* Halo de lumière pulsé sous le CTA pour attirer l'œil (opacity+scale only ;
   figé automatiquement en prefers-reduced-motion via la règle globale). */
.bl-cart .single_add_to_cart_button::before{content:"";position:absolute;left:50%;bottom:-9px;
  width:82%;height:30px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(215,22,91,.6),transparent 72%);filter:blur(11px);
  transform:translateX(-50%) scale(.9);opacity:.4;
  animation:bl-cta-halo 2.6s var(--ease-in-out) infinite}
@keyframes bl-cta-halo{0%,100%{opacity:.32;transform:translateX(-50%) scale(.86)}
  50%{opacity:.85;transform:translateX(-50%) scale(1.1)}}
.bl-cart .single_add_to_cart_button[data-price]::after{content:" · " attr(data-price);font-weight:600;opacity:.92}
.bl-cart .reset_variations{display:inline-block;margin-top:10px;font:400 12.5px var(--font-body);
  color:var(--text-faint);text-decoration:underline;text-underline-offset:3px}
.bl-cart .reset_variations:hover{color:var(--text-primary)}

@media(max-width:640px){
  .bl-cart .single_add_to_cart_button{font-size:16px;padding:0 18px}
  /* Rangée quantité + CTA : en ligne, elle dépassait la largeur de l'écran
     (stepper fixe + libellé bouton + prix en nowrap) → scroll horizontal.
     On empile : stepper compact au-dessus, bouton pleine largeur en dessous. */
  .bl-cart .woocommerce-variation-add-to-cart{flex-direction:column;align-items:stretch;gap:12px}
  .bl-cart .quantity.bl-qty{align-self:flex-start}
  .bl-cart .single_add_to_cart_button{width:100%}
}

/* Espace des blocs accordéons */
.pinfo .accordions{margin-top:4px}

/* ==========================================================
   PAGE 404 (introuvable) : DA maquette : chiffre géant + tampon
   ========================================================== */
.err404{position:relative;max-width:var(--container);margin:0 auto;
  min-height:calc(100vh - 90px);display:flex;align-items:center;
  padding:150px var(--pad) 90px}
.err404-in{max-width:640px}
.err404 .eyebrow{color:var(--bl-pink)}
.err404-code{font-family:var(--font-display);font-weight:700;line-height:.9;
  letter-spacing:-.04em;font-size:clamp(120px,22vw,240px);margin:14px 0 8px}
.err404-code .accent{color:var(--accent)}
.err404-title{font-family:var(--font-display);font-weight:600;
  font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;line-height:1.1}
.err404-lead{margin-top:18px;font-size:17px;line-height:1.6;
  color:var(--text-secondary);max-width:52ch}
.err404-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.err404-search{display:flex;gap:10px;margin-top:34px;max-width:480px}
.err404-search input{flex:1;height:48px;padding:0 18px;
  background:var(--surface-raised);border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-m);color:var(--text-primary);
  font:500 15px var(--font-body);transition:border-color var(--dur-fast)}
.err404-search input::placeholder{color:var(--text-faint)}
.err404-search input:focus{outline:none;border-color:var(--field-focus);box-shadow:0 0 0 3px var(--field-focus-ring)}
.err404-stamp{position:absolute;right:48px;top:130px;width:130px;height:130px;
  color:var(--text-faint)}
.err404-stamp svg{animation-duration:22s}
@media(max-width:1000px){.err404-stamp{display:none}}
@media(max-width:640px){
  .err404{min-height:auto;padding:130px var(--pad) 70px}
  .err404-search{flex-direction:column}
  .err404-search .btn{width:100%}
}

/* ---------- Galerie fiche produit : zoom au survol ---------- */
.gallery .main.bl-zoomable{cursor:zoom-in}
.gallery .main img{transition:transform .35s var(--ease-out);will-change:transform}
/* pendant le survol, le suivi du curseur (transform-origin) doit être instantané */
.gallery .main.bl-zoomable:hover img{transition:transform .12s var(--ease-out)}
.gallery .thumbs button{cursor:pointer}
@media(prefers-reduced-motion:reduce){
  .gallery .main img{transition:none}
  .gallery .main.bl-zoomable{cursor:default}
}

/* ==========================================================
   PAGES LÉGALES (mentions légales, CGV, confidentialité)
   Fond noir, sommaire sticky + colonne de lecture. DA V12.
   ========================================================== */
/* Autonomie de mise en page : woo.css (qui porte .page-main) n'est pas
   chargé sur les pages non-WooCommerce, on rétablit padding + centrage. */
.legaldoc{max-width:var(--container);margin:0 auto;padding:130px var(--pad) 90px}
.legaldoc .page-head .eyebrow{display:inline-flex;margin-bottom:12px}
.legaldoc .page-head .maj{margin-top:14px;font:500 12.5px var(--font-body);letter-spacing:.02em;color:var(--text-faint)}
.legaldoc .page-head .maj b{color:var(--text-secondary);font-weight:600}

.legaldoc .page-body{display:grid;grid-template-columns:220px minmax(0,760px);gap:96px;align-items:start}

/* Sommaire sticky */
.legal-toc{position:sticky;top:100px}
.legal-toc .toc-title{font:600 11px var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--bl-yellow);margin-bottom:14px}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:flex;flex-direction:column;gap:0}
.legal-toc a{display:flex;gap:11px;align-items:baseline;padding:7px 0 7px 14px;margin-left:-16px;border-left:2px solid transparent;font:500 13.5px/1.4 var(--font-body);color:var(--text-secondary);transition:color var(--dur-fast),border-color var(--dur-fast)}
.legal-toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font:600 10.5px var(--font-display);color:var(--text-faint);flex:none}
.legal-toc a:hover{color:var(--bl-blanc);border-color:var(--bl-pink)}

/* Corps */
.legal-body{max-width:760px}
.legal-sec{padding:34px 0;border-top:1px solid var(--border-subtle)}
.legal-sec:first-child{padding-top:0;border-top:0}
.legal-sec h2{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.01em}
.legal-sec h2 .idx{flex:none;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--bl-pink);transform:translateY(-2px)}
.legal-sec p{margin:0 0 14px;max-width:64ch;font:400 15.5px/1.75 var(--font-body);color:var(--text-secondary)}
.legal-sec p:last-child{margin-bottom:0}
.legal-sec a{color:var(--bl-pink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal-sec a:hover{color:var(--bl-blanc)}

/* Bloc identité (éditeur, hébergeur) : fiche « extrait de registre » lignée.
   Pas de barre latérale : en-tête dénomination + court filet jaune (motif eyebrow),
   puis lignes séparées par des filets fins, chiffres en tabular-nums. */
.id-card{margin:0 0 16px;padding:26px 30px 14px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-l)}
.id-card dl{margin:0;display:grid;grid-template-columns:max-content 1fr}
.id-card dt{display:flex;align-items:center;padding:13px 30px 13px 0;border-top:1px solid var(--border-subtle);font:600 10.5px/1.5 var(--font-display);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
.id-card dd{display:flex;align-items:center;margin:0;padding:13px 0;border-top:1px solid var(--border-subtle);font:500 15px/1.5 var(--font-body);color:var(--text-primary);font-variant-numeric:tabular-nums}
.id-card dt:first-of-type{grid-column:1/-1;border-top:0;padding:0;font-size:11px;letter-spacing:.16em}
.id-card dd.name{grid-column:1/-1;display:block;border-top:0;position:relative;margin:7px 0 22px;padding:0 0 15px;font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.1;letter-spacing:.005em;color:var(--bl-blanc)}
.id-card dd.name::after{content:'';position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--bl-yellow)}
.id-card dd a{color:var(--bl-pink-2)}

/* Note « à compléter / à confirmer » (placeholders à valider par le client) */
.legal-note{margin:16px 0 0;padding:12px 16px;background:rgba(251,187,69,.05);border:1px dashed var(--border-strong);border-radius:var(--radius-m);font:400 13px/1.6 var(--font-body);color:var(--text-faint)}
.legal-note b{color:var(--bl-yellow);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11px}

@media(max-width:1000px){
  .legaldoc{padding:110px var(--pad) 70px}
  /* Sur le layout empilé, le sommaire + les sections tombent juste sous la ligne
     de flottaison et ne franchissent pas le seuil 0.18 de l'IntersectionObserver
     au chargement : le contenu reste alors en opacity:0 et donne l'impression
     d'une grosse marge vide sous le titre. On affiche donc le contenu légal
     directement (la révélation au scroll est conservée sur desktop). */
  .legaldoc .rv,.legaldoc .rv-img{opacity:1;transform:none;clip-path:none}
  .legaldoc .page-body{grid-template-columns:1fr;gap:0}
  .legal-toc{position:static;margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--border-subtle)}
  .legal-toc ol{flex-flow:row wrap;gap:6px 20px}
  .legal-toc a{margin-left:0;padding-left:0;border-left:0}
}
@media(max-width:640px){
  .id-card{padding:22px 20px 10px}
  .id-card dl{grid-template-columns:1fr}
  .id-card dt{border-top:1px solid var(--border-subtle);padding:12px 0 2px}
  .id-card dt:first-of-type{border-top:0;padding:0}
  .id-card dd{border-top:0;padding:0 0 4px}
  .id-card dd.name{margin:7px 0 14px}
}

/* ==========================================================
   BANDEAU COOKIES (consentement maison, RGPD/CNIL)
   Carte flottante non bloquante, bas gauche (le toast est bas droite).
   DA V12 : surface overlay, accent rose, Jost/Mulish, tokens motion.
   ========================================================== */
.cookie{position:fixed;left:24px;bottom:24px;z-index:130;width:min(430px,calc(100vw - 32px));transform:translateY(160%);opacity:0;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.cookie.is-in{transform:none;opacity:1}
.cookie [hidden]{display:none}
.cookie-card{background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-l);padding:24px 24px 20px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.cookie-card:focus{outline:none}
.cookie-eyebrow{display:inline-flex;margin-bottom:10px}
.cookie-title{font:600 21px/1.15 var(--font-display);letter-spacing:-.01em;color:var(--text-primary)}
.cookie-title::after{content:'';display:block;width:40px;height:3px;margin-top:10px;border-radius:2px;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-out) .18s}
.cookie.is-in .cookie-title::after{transform:scaleX(1)}
.cookie-desc{margin-top:13px;font:400 13.5px/1.62 var(--font-body);color:var(--text-secondary)}
.cookie-desc a{color:var(--bl-pink-2);text-decoration:underline;text-underline-offset:2px}

/* Panneau de personnalisation */
.cookie-prefs{margin-top:16px;border-top:1px solid var(--border-subtle)}
.cookie-row{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border-subtle);cursor:pointer}
.cookie-row:last-child{border-bottom:0}
.cookie-row.is-locked{cursor:default}
.cookie-row-txt{display:flex;flex-direction:column;gap:3px}
.cookie-row-t{font:600 13.5px var(--font-display);letter-spacing:.01em;color:var(--text-primary)}
.cookie-row-d{font:400 12px/1.5 var(--font-body);color:var(--text-faint)}

/* Interrupteur (switch) aux couleurs de la marque */
.cookie-sw{position:relative;flex:none;width:44px;height:24px;margin-top:1px}
.cookie-sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.cookie-sw input:disabled{cursor:default}
.cookie-sw::before{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);background:var(--border-strong);transition:background var(--dur-fast) var(--ease-out);pointer-events:none}
.cookie-sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--bl-blanc);transition:transform var(--dur-fast) var(--ease-out);pointer-events:none}
.cookie-sw:has(input:checked)::before{background:var(--accent)}
.cookie-sw:has(input:checked)::after{transform:translateX(20px)}
.cookie-sw:has(input:disabled)::before{background:var(--bl-teal);opacity:.6}
.cookie-sw:has(input:focus-visible)::before{outline:2px solid var(--focus-ring);outline-offset:3px}

/* Actions */
.cookie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.cookie-actions .btn{flex:1 1 140px}
.cookie.is-expanded .cookie-save{order:-1;flex-basis:100%}
.cookie.is-expanded [data-cookie="customize"]{display:none}
.cookie-link{background:none;border:0;color:var(--text-secondary);font:600 13px var(--font-display);letter-spacing:.01em;text-decoration:underline;text-underline-offset:3px;padding:6px 4px}
.cookie-link:hover{color:var(--text-primary)}
.cookie-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}

/* Lien « Gérer les cookies » du footer (bouton stylé comme un lien) */
.cookie-reopen{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;padding:0}
.cookie-reopen:hover{color:var(--text-primary)}
.cookie-reopen:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}

@media(max-width:640px){
  .cookie{left:12px;right:12px;bottom:12px;width:auto}
  .cookie-actions .btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .cookie{transition:opacity var(--dur-fast) linear;transform:none}
  .cookie-title::after{transition:none;transform:scaleX(1)}
}

/* --- Tableau des cookies (page /cookies/) --- */
.cookie-table-wrap{margin-top:16px;overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-m)}
.cookie-table{width:100%;border-collapse:collapse;min-width:520px;font:400 13px/1.5 var(--font-body)}
.cookie-table th,.cookie-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border-subtle);vertical-align:top}
.cookie-table thead th{font:600 11px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bl-yellow);background:rgba(251,248,249,.02)}
.cookie-table tbody tr:last-child td{border-bottom:0}
.cookie-table code{font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-primary);word-break:break-word}
.cookie-table td:nth-child(2){color:var(--text-secondary)}
.cookie-table td:nth-child(3){color:var(--text-faint);white-space:nowrap}
.cookie-tag{display:inline-block;font:600 10.5px var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.cookie-tag.is-need{background:rgba(46,179,186,.14);color:var(--bl-teal-3)}
.cookie-tag.is-optional{background:rgba(251,187,69,.14);color:var(--bl-yellow)}
.cookie-manage{margin-top:18px}