/* LMY — styles (extrait de index.html, Passe D) */
/* Polices auto-hébergées (PERF-1) — woff2 Google Fonts, sous-ensembles latin + latin-ext
(le second ne se télécharge que si un caractère hors latin s'affiche). Fraunces garde son
axe opsz (contraste des grands titres). Cormorant = wordmark seul : sous-ensemble limité
aux lettres de « Oschoffa-Yansunnu » (~3 Ko) — si le wordmark change, re-télécharger
avec &text=. */
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap; src:url(/public/fonts/fraunces-italic-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap; src:url(/public/fonts/fraunces-italic.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap; src:url(/public/fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap; src:url(/public/fonts/fraunces.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/public/fonts/hanken-grotesk-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/public/fonts/hanken-grotesk.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Cormorant'; font-style:normal; font-weight:600; font-display:swap; src:url(/public/fonts/cormorant-wordmark.woff2) format('woff2'); unicode-range:U+2d, U+4f, U+59, U+61, U+63, U+66, U+68, U+6e-6f, U+73, U+75; }
:root { --ease: cubic-bezier(.16,1,.3,1); --spring: cubic-bezier(.34,1.4,.4,1); --header-h: 72px; }
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
body { background:#FBFAF7; color:#1A1D23; font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:17px; line-height:1.7; letter-spacing:-0.005em; }
.font-display { font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto; }
h1,h2,h3 { letter-spacing:-0.025em; line-height:1.08; }
/* Eyebrow with celestial star (added via CSS so i18n innerHTML stays clean) */
.eyebrow { font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:#7A5F2A; text-wrap:balance;
/* retrait suspendu : sur 2 lignes, la suite s'aligne sous le 1er mot, pas sous l'étoile (étoile .72em + marge .55em) */
padding-left:1.27em; text-indent:-1.27em; }
.eyebrow::before { content:""; display:inline-block; width:.72em; height:.72em; margin-right:.55em; vertical-align:middle; background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.8H21l-5.5 4 2.1 6.8L12 15.6 6.4 19.6l2.1-6.8L3 8.8h6.8z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.8H21l-5.5 4 2.1 6.8L12 15.6 6.4 19.6l2.1-6.8L3 8.8h6.8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.grain::after { content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* ---- Night hero (the sky) ---- */
.hero-night { position:relative; color:#EAE7DF;
background:
radial-gradient(60% 50% at 22% 8%, rgba(80,130,190,.20), transparent 60%),
radial-gradient(48% 60% at 86% 18%, rgba(176,141,87,.12), transparent 60%),
radial-gradient(90% 80% at 50% 128%, rgba(8,18,34,.75), transparent 70%),
linear-gradient(160deg, #16304F 0%, #122844 48%, #0E2038 100%); }
.starfield { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; animation: twinkle 6s ease-in-out infinite;
background-repeat:no-repeat;
background-image:
radial-gradient(1.5px 1.5px at 18% 26%, rgba(255,255,255,.85), transparent),
radial-gradient(1px 1px at 67% 18%, rgba(255,255,255,.6), transparent),
radial-gradient(1.5px 1.5px at 41% 64%, rgba(255,255,255,.5), transparent),
radial-gradient(1px 1px at 84% 58%, rgba(255,255,255,.7), transparent),
radial-gradient(1px 1px at 58% 84%, rgba(255,255,255,.5), transparent),
radial-gradient(1.5px 1.5px at 12% 78%, rgba(255,255,255,.55), transparent),
radial-gradient(1px 1px at 92% 32%, rgba(255,255,255,.5), transparent),
radial-gradient(1px 1px at 31% 12%, rgba(255,255,255,.5), transparent),
radial-gradient(1px 1px at 75% 75%, rgba(255,255,255,.45), transparent),
radial-gradient(1.5px 1.5px at 50% 40%, rgba(255,255,255,.4), transparent); }
@keyframes twinkle { 0%,100%{ opacity:.45 } 50%{ opacity:.68 } }
.cursor-glow { position:absolute; top:0; left:0; width:380px; height:380px; border-radius:50%; pointer-events:none; z-index:1; opacity:0;
background:radial-gradient(circle, rgba(201,162,75,.16), rgba(80,130,190,.07) 42%, transparent 66%); mix-blend-mode:screen; transition:opacity .5s; will-change:transform; }
.trail-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:30; pointer-events:none; }
/* Seamless night→ivory: long eased fade reaching pure #FBFAF7 before the section edge.
Dither is handled by the page-wide .grain overlay (uniform across the seam → no line). */
.hero-fade { position:absolute; left:0; right:0; bottom:-1px; height:360px; z-index:2; pointer-events:none;
background:linear-gradient(to bottom,
rgba(251,250,247,0) 0%, rgba(251,250,247,.008) 12%, rgba(251,250,247,.035) 22%,
rgba(251,250,247,.09) 32%, rgba(251,250,247,.17) 42%, rgba(251,250,247,.28) 52%,
rgba(251,250,247,.42) 61%, rgba(251,250,247,.58) 70%, rgba(251,250,247,.74) 78%,
rgba(251,250,247,.87) 85%, rgba(251,250,247,.96) 91%, #FBFAF7 96%); }
/* ---- Constellation ---- */
.constellation { position:relative; width:100%; aspect-ratio:1/1; max-width:500px; margin-inline:auto; }
@media (min-width:1024px){ .constellation{ margin-right:0; margin-left:auto; max-width:560px; } }
.constel-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; will-change:transform; }
/* Celestial rays: bright near the nodes, fading into the centre (no hard triangle) */
.constel-lines line { stroke:url(#rayGrad); stroke-width:1.4; vector-effect:non-scaling-stroke; fill:none; stroke-linecap:round; stroke-dasharray:1400; stroke-dashoffset:0; }
.draw line { animation: draw 1.4s var(--ease) forwards; }
@keyframes draw { from{ stroke-dashoffset:1400 } to{ stroke-dashoffset:0 } }
.spark { fill:#EAD08A; filter:drop-shadow(0 0 4px rgba(201,162,75,.95)); }
.node-layer { position:absolute; inset:0; will-change:transform; }
.node { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:.45rem; color:#E7E2D6; text-decoration:none; cursor:pointer; transition:color .25s; }
.node .dot { position:relative; display:grid; place-items:center; transition:transform .4s var(--spring); will-change:transform; }
.node .label { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; transition:opacity .25s; white-space:nowrap; }
.node:hover, .node:focus-visible { color:#fff; outline:none; }
.node:hover .dot, .node:focus-visible .dot { transform:scale(1.1); }
.node:hover .label, .node:focus-visible .label { opacity:1; }
.node:focus-visible .dot { outline:2px solid rgba(201,162,75,.7); outline-offset:5px; border-radius:50%; }
/* Icon chips — Livres / Vidéos / Contact (the node IS the component → chip allowed) */
.node .chip { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#E9D6A9;
background:radial-gradient(125% 125% at 50% 16%, rgba(255,255,255,.13), rgba(255,255,255,.025));
box-shadow:inset 0 0 0 1px rgba(201,162,75,.42), 0 6px 18px -6px rgba(8,18,34,.7), 0 0 18px -3px rgba(201,162,75,.3);
transition:box-shadow .4s var(--ease), color .3s, background .4s; }
.node .chip svg { width:23px; height:23px; }
.node:hover .chip, .node:focus-visible .chip { color:#F3E6C2;
background:radial-gradient(125% 125% at 50% 16%, rgba(255,255,255,.2), rgba(255,255,255,.05));
box-shadow:inset 0 0 0 1px rgba(201,162,75,.85), 0 8px 22px -6px rgba(8,18,34,.7), 0 0 30px -3px rgba(201,162,75,.6); }
/* Center avatar — L'auteur (placeholder portrait; swap ![]()
for a transparent PNG) */
.node-center .avatar { width:162px; height:162px; border-radius:50%; padding:3.5px;
background:conic-gradient(from 130deg, #C9A24B, #8a6f44 32%, #C9A24B 60%, #B08D57 82%, #C9A24B);
box-shadow:0 0 0 1px rgba(201,162,75,.25), 0 12px 34px -8px rgba(8,18,34,.85), 0 0 40px -6px rgba(201,162,75,.5);
transition:box-shadow .4s var(--ease); }
.node-center .avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 10%; display:block;
background:radial-gradient(112% 86% at 50% 12%, #2a4d74 0%, #16335a 50%, #0c1c33 100%); }
@media (min-width:1024px){ .node-center .avatar{ width:176px; height:176px; } }
.node-center:hover .avatar, .node-center:focus-visible .avatar { box-shadow:0 0 0 1px rgba(201,162,75,.45), 0 12px 36px -8px rgba(8,18,34,.8), 0 0 46px -6px rgba(201,162,75,.7); }
.node-center .label { font-family:'Fraunces',serif; font-size:1.1rem; letter-spacing:0; text-transform:none; opacity:.95; margin-top:.15rem; }
/* Soft celestial aura behind the figure of light */
.node-center .dot::after { content:""; position:absolute; inset:-46px; border-radius:50%; z-index:-1;
background:radial-gradient(circle, rgba(201,162,75,.3), rgba(80,130,190,.14) 44%, transparent 70%);
filter:blur(5px); animation:auraBreath 6.5s ease-in-out infinite; }
@keyframes auraBreath { 0%,100%{ opacity:.72; transform:scale(.95) } 50%{ opacity:1; transform:scale(1.06) } }
.node-center .dot::before { content:""; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(201,162,75,.4); animation:pulse 3.6s ease-in-out infinite; }
/* Single-column layouts: the À propos portrait already shows the author → no duplicate */
@media (max-width:1023.98px){
.constellation{ display:none; }
/* Hero now ends on the stats: keep them on the dark sky, clear of the dawn fade */
.hero-fade{ height:220px; }
.hero-inner{ padding-bottom:9.5rem; }
}
@keyframes pulse { 0%,100%{ transform:scale(.85); opacity:.55 } 55%{ transform:scale(1.2); opacity:0 } }
.deco-star { animation: twinkle 5s ease-in-out infinite; }
/* ---- Buttons ---- */
.btn { position:relative; display:inline-flex; align-items:center; gap:.55rem; font-weight:600; border-radius:999px; padding:.85rem 1.6rem; isolation:isolate;
transition:transform .25s var(--spring), box-shadow .25s var(--ease), opacity .2s; will-change:transform; cursor:pointer; line-height:1; }
.btn svg { width:1.05em; height:1.05em; }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.5); }
.btn:active { transform:translateY(1px) scale(.99); }
.btn-primary { background:#1E3A5F; color:#FBFAF7; box-shadow:0 4px 12px -2px rgba(30,58,95,.18); }
.btn-primary::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:linear-gradient(180deg,#234468,#16304F); opacity:0; transition:opacity .25s var(--ease); }
.btn-primary::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%); opacity:0; transition:opacity .3s var(--ease); }
@media (hover:hover){ .btn-primary:hover::after { opacity:1; } }
.btn-primary:active { transform:scale(.98); }
.btn-primary:active::before { opacity:1; }
/* Livre déjà dans le panier : plus un bouton, un simple texte « ✓ Dans le panier »
(clic = ouvrir le panier, sans en avoir l'air). Hauteur tactile conservée (44 px). */
.btn.btn-add.is-in { background:none; box-shadow:none; padding:0 .15rem; min-height:44px; gap:.4rem; color:#1A1D23; font-weight:500; border-radius:6px; }
.btn-add.is-in::before, .btn-add.is-in::after { display:none; }
.btn-add.is-in svg { width:17px; height:17px; flex:none; color:#9A7A3E; }
@media (hover:hover){ .btn.btn-add.is-in:hover { transform:none; color:#1E3A5F; } }
.btn.btn-add.is-in:active { transform:none; opacity:.7; }
.btn-add.is-in:focus-visible { outline:2px solid rgba(201,162,75,.7); outline-offset:3px; }
.btn-secondary { background:transparent; color:#1A1D23; box-shadow:inset 0 0 0 1px #D9D3C6; }
.btn-secondary::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:rgba(30,58,95,.05); opacity:0; transition:opacity .25s var(--ease); }
.btn-secondary:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px #1A1D23; }
.btn-secondary:hover::before { opacity:1; }
.btn-light { background:#FBFAF7; color:#16304F; box-shadow:0 4px 16px -4px rgba(0,0,0,.4); }
.btn-light:hover { transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(0,0,0,.5); }
.btn-ghost { background:transparent; color:currentColor; box-shadow:inset 0 0 0 1px currentColor; }
.btn-ghost::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:currentColor; opacity:0; transition:opacity .25s var(--ease); }
.btn-ghost:hover { transform:translateY(-2px); }
.btn-ghost:hover::before { opacity:.1; }
.link-u { position:relative; color:#1E3A5F; font-weight:600; }
.link-u::after { content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%; background:currentColor; opacity:.35; transition:opacity .25s var(--ease); }
.link-u:hover::after, .link-u:focus-visible::after { opacity:1; }
.link-u:focus-visible { outline:2px solid rgba(201,162,75,.7); outline-offset:4px; border-radius:2px; }
.link-u:active { opacity:.75; }
.coll-actions { display:flex; align-items:center; gap:1.5rem; }
/* ---- Bandeau pré-ouverture (boutique fermée tant que Stripe n'est pas branché) ---- */
.shop-notice { position:fixed; top:0; inset-inline:0; z-index:60; background:#16304F; color:#FBFAF7;
box-shadow:0 1px 0 rgba(0,0,0,.14); }
.shop-notice[hidden] { display:none; }
.shop-notice-in { max-width:72rem; margin-inline:auto; min-height:38px;
padding:.42rem 2.6rem .42rem 1.25rem; display:flex; align-items:center; justify-content:center;
gap:.6rem; position:relative; }
.shop-notice p { font-size:.82rem; line-height:1.4; letter-spacing:.004em; text-align:center; color:#E7DECE; }
.shop-notice-dot { width:6px; height:6px; border-radius:50%; flex:none; background:#C9A24B;
box-shadow:0 0 8px rgba(201,162,75,.9); }
.shop-notice-x { position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
width:30px; height:30px; display:grid; place-items:center; color:#9FB0C4; border-radius:8px;
transition:color .2s var(--ease), background .2s var(--ease); }
.shop-notice-x svg { width:15px; height:15px; }
.shop-notice-x:hover { color:#FBFAF7; background:rgba(255,255,255,.08); }
.shop-notice-x:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(201,162,75,.6); }
body.has-notice header { top:var(--notice-h, 38px); }
@media (max-width:640px){ .shop-notice p { font-size:.76rem; } }
/* Hero top padding clears the fixed header — and the pre-launch banner when shown.
--notice-h is measured by app.js (the banner wraps to 2 lines on mobile), so the
hero never crowds the header regardless of banner height. */
.hero-inner { padding-top: calc(var(--header-h, 72px) + 6.5rem); }
body.has-notice .hero-inner { padding-top: calc(var(--notice-h, 38px) + var(--header-h, 72px) + 3.75rem); }
@media (max-width:768px){
.hero-inner { padding-top: calc(var(--header-h, 72px) + 2.25rem); }
body.has-notice .hero-inner { padding-top: calc(var(--notice-h, 38px) + var(--header-h, 72px) + 2.75rem); }
}
/* ---- Newsletter : honeypot + états de retour (sobre, fondu) ---- */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.news-success, .news-error { opacity:0; transform:translateY(6px);
transition:opacity .45s var(--ease), transform .45s var(--ease); }
.news-success.in, .news-error.in { opacity:1; transform:none; }
.news-success { margin-top:.25rem; font-family:'Fraunces',Georgia,serif; font-size:1.15rem; letter-spacing:-.01em; color:#C9A24B; }
.news-error { margin-top:.75rem; font-size:.85rem; color:#E3B4A6; }
/* ---- Header (adapts: light over night hero, dark when scrolled) ---- */
header { color:#F4F2EC; transition:color .3s, background-color .3s, border-color .3s; }
header.scrolled { background:rgba(251,250,247,.82); backdrop-filter:blur(12px); border-bottom:1px solid #E7E3D9; color:#1A1D23; }
.nav-link { position:relative; color:currentColor; opacity:.82; transition:opacity .2s; }
.nav-link:hover { opacity:1; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background:#B08D57; border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav-link:hover::after, .nav-link[aria-current="true"]::after { transform:scaleX(1); }
.nav-link[aria-current="true"] { opacity:1; }
.seg { display:inline-flex; padding:3px; border-radius:999px; background:rgba(244,242,236,.16); box-shadow:inset 0 0 0 1px rgba(244,242,236,.28); }
header.scrolled .seg { background:#F0ECE2; box-shadow:inset 0 0 0 1px #E2DCCD; }
.seg button { font-size:.8rem; font-weight:600; padding:.28rem .66rem; border-radius:999px; color:currentColor; opacity:.7; transition:color .2s, background-color .2s, opacity .2s, box-shadow .2s; cursor:pointer; }
.seg button[aria-pressed="true"] { background:#FBFAF7; color:#16304F; opacity:1; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.seg button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.5); }
/* ---- Cards / images ---- */
.card { background:#FFFFFF; border:1px solid #E7E3D9; border-radius:20px; box-shadow:0 1px 2px rgba(26,29,35,.04),0 1px 3px rgba(30,58,95,.06); transition:transform .35s var(--spring), box-shadow .35s var(--ease); }
.card-hover:hover { transform:translateY(-5px); box-shadow:0 22px 44px -18px rgba(30,58,95,.28); will-change:transform; }
.img-treat { position:relative; overflow:hidden; }
.img-treat img { display:block; width:100%; height:100%; object-fit:cover; }
.img-treat::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(22,48,79,.42), transparent 55%); }
.hero-stats [data-stat] { white-space:nowrap; }
.about-portrait { position:relative; width:min(78%, 20rem); margin-inline:auto; }
.about-portrait::before { content:""; position:absolute; inset:0; transform:translate(14px, 14px); border:1px solid rgba(176,141,87,.55); border-radius:26px; pointer-events:none; }
.about-portrait > .img-treat { box-shadow:0 1px 2px rgba(22,48,79,.08), 0 18px 40px -12px rgba(22,48,79,.32), 0 40px 80px -30px rgba(22,48,79,.28); }
@media (min-width:1024px){ .about-portrait { width:100%; max-width:24rem; margin-inline:0; } .about-portrait::before { transform:translate(18px, 18px); } }
.link-arrow svg { transition:transform .35s var(--spring); }
.link-arrow:hover svg, .link-arrow:focus-visible svg { transform:translateX(4px); }
.link-arrow:active svg { transform:translateX(7px); }
.link-arrow:focus-visible { outline:2px solid #B08D57; outline-offset:4px; border-radius:4px; }
.img-tint::before { content:""; position:absolute; inset:0; z-index:1; mix-blend-mode:multiply; background:linear-gradient(140deg, rgba(30,58,95,.18), rgba(176,141,87,.12)); }
/* ---- Section divider (constellation) ---- */
.constel-divider { display:flex; align-items:center; gap:1rem; color:#E7E3D9; }
.constel-divider::before, .constel-divider::after { content:""; height:1px; flex:1; background:linear-gradient(to var(--d,right), transparent, #E7E3D9); }
/* ---- Reveal ---- */
.reveal { opacity:0; transform:translateY(20px); }
.reveal.in { opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
[id] { scroll-margin-top: 96px; }
.play-pulse { transition:transform .3s var(--spring); }
.group:hover .play-pulse { transform:scale(1.08); }
/* ---- Books: horizontal rail + cards ---- */
.book-rail-wrap { position:relative; }
.rail-nav { position:absolute; top:42%; transform:translateY(-50%) scale(.96); z-index:4;
width:42px; height:42px; border-radius:50%; display:none; align-items:center; justify-content:center;
background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
border:1px solid rgba(176,141,87,.28); color:rgba(30,58,95,.82); cursor:pointer;
box-shadow:0 8px 20px -12px rgba(30,58,95,.38);
opacity:0; pointer-events:none;
transition:opacity .3s var(--ease), transform .4s var(--spring), background .3s var(--ease), color .3s var(--ease); }
.rail-nav svg { width:19px; height:19px; }
.rail-prev { left:-8px; }
.rail-next { right:-8px; }
@media (hover:hover) and (pointer:fine){
.book-rail-wrap:not(.is-grid-wrap) .rail-nav:not([disabled]) { display:flex; }
.book-rail-wrap:not(.is-grid-wrap):hover .rail-nav:not([disabled]),
.rail-nav:focus-visible { opacity:.92; pointer-events:auto; transform:translateY(-50%) scale(1); }
}
.rail-nav:hover { background:rgba(255,255,255,.96); border-color:rgba(176,141,87,.4); color:#1E3A5F; opacity:1;
box-shadow:0 1px 2px rgba(26,29,35,.06), 0 12px 26px -12px rgba(30,58,95,.45); transform:translateY(-50%) scale(1.05); }
.rail-nav:active { transform:translateY(-50%) scale(.95); }
.rail-nav:focus-visible { outline:2px solid rgba(201,162,75,.8); outline-offset:2px; }
.book-rail { display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:.25rem;
padding:.4rem .25rem 1.4rem; margin-inline:-.25rem;
scrollbar-width:thin; scrollbar-color:rgba(176,141,87,.55) transparent; }
/* Mobile/tablette : le rail déborde jusqu'au bord de l'écran (coupe nette, sans fondu) → on voit qu'il défile */
@media (max-width:1023px){ .book-rail:not(.is-grid){ margin-inline:-1.5rem; padding-inline:1.5rem; scroll-padding-inline:1.5rem; scrollbar-width:none; }
.book-rail:not(.is-grid)::-webkit-scrollbar { display:none; } }
.book-rail::-webkit-scrollbar { height:6px; }
.book-rail::-webkit-scrollbar-thumb { background:rgba(176,141,87,.45); border-radius:999px; }
.book-rail::-webkit-scrollbar-track { background:transparent; }
.book-rail.is-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem 1.5rem; overflow:visible;
margin-inline:0; padding:.25rem; scroll-snap-type:none; -webkit-mask-image:none; mask-image:none; }
@media (min-width:1024px){ .book-rail.is-grid{ grid-template-columns:repeat(3,1fr); } }
.book-card { scroll-snap-align:start; flex:0 0 min(72vw, 246px); display:flex; flex-direction:column; text-align:left;
background:transparent; border:0; padding:0; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }
/* Tablette : 3 cartes + l'amorce de la 4e → on devine qu'on peut faire défiler */
@media (min-width:640px) and (max-width:1023px){ .book-card{ flex-basis:29vw; } }
.book-rail.is-grid .book-card { flex:initial; }
/* Présentoir : la couverture est le produit → jamais rognée ni filtrée. On met en scène
autour (papier chaud + halo doré + ombre au sol), le livre garde ses vraies couleurs. */
.book-card .cover { position:relative; overflow:hidden; border-radius:14px; aspect-ratio:2/3; isolation:isolate;
display:flex; align-items:center; justify-content:center; padding-bottom:6%;
background:
radial-gradient(58% 46% at 50% 46%, rgba(201,162,75,.20), rgba(201,162,75,.06) 60%, transparent 78%),
radial-gradient(120% 80% at 50% 0%, #FBF8F1, #F1EBDD 62%, #E7DFCD);
box-shadow:inset 0 0 0 1px rgba(122,95,42,.10), 0 1px 2px rgba(26,29,35,.05), 0 6px 16px -10px rgba(30,58,95,.18);
transition:transform .4s var(--spring), box-shadow .4s var(--ease); }
/* Grain local, uniquement sur le fond (sous le livre) */
.book-card .cover::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.05; mix-blend-mode:multiply; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Ombre au sol, sous le livre */
.book-card .cover::after { content:""; position:absolute; z-index:0; left:22%; right:22%; bottom:6.5%; height:7%; border-radius:50%;
background:radial-gradient(closest-side, rgba(14,32,56,.34), rgba(122,95,42,.10) 60%, transparent); filter:blur(5px);
transition:transform .5s var(--spring), opacity .5s var(--ease); }
/* Objet livre partagé (cartes + fiche) : couverture intacte, dos en relief, reflet de pelliculage */
.bk { position:relative; z-index:1; display:block; border-radius:3px 6px 6px 3px; overflow:hidden;
box-shadow:0 1px 2px rgba(14,32,56,.14), 0 14px 24px -12px rgba(14,32,56,.45), 0 26px 40px -26px rgba(122,95,42,.40);
transition:transform .5s var(--spring); }
.bk img { display:block; }
.bk::before { content:""; position:absolute; inset:0 auto 0 0; width:7%; z-index:1; pointer-events:none;
background:linear-gradient(90deg, rgba(0,0,0,.20), rgba(255,255,255,.14) 55%, transparent); }
.bk::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(115deg, rgba(255,255,255,.10), transparent 38%); }
/* La couverture tient dans les 2 limites (largeur ET hauteur) sans déformation, quel que soit son ratio */
.book-card .cover { container-type:size; }
.book-card .cover .bk img { width:auto; height:auto; max-width:86cqw; max-height:80cqh; }
/* Mobile « Voir tous » (2 colonnes étroites) : le livre occupe presque tout le cadre → lisible */
@media (max-width:639px){
.book-rail.is-grid { gap:1.6rem .9rem; }
.book-rail.is-grid .book-card .cover { padding-bottom:3%; border-radius:12px; }
.book-rail.is-grid .book-card .cover .bk img { max-width:90cqw; max-height:88cqh; }
.book-rail.is-grid .book-card .cover::after { bottom:3%; left:16%; right:16%; }
.book-rail.is-grid .book-card .bk-title { font-size:1rem; margin-top:.7rem; }
}
.book-card:focus-visible .cover .bk { transform:translateY(-5px); }
.book-card:focus-visible .cover::after { transform:scaleX(.9); opacity:.75; }
@media (hover:hover){
.book-card:hover .cover .bk { transform:translateY(-5px); }
.book-card:hover .cover::after { transform:scaleX(.9); opacity:.75; }
}
@media (prefers-reduced-motion: reduce){ .book-card .cover .bk, .book-card .cover::after { transition:none; }
.book-card:hover .cover .bk, .book-card:focus-visible .cover .bk { transform:none; } }
.book-card .cover .open-cue { display:none; }
.book-card:active .cover { transform:scale(.985); }
.book-card:focus-visible { outline:none; }
.book-card:focus-visible .cover { outline:2px solid rgba(201,162,75,.8); outline-offset:3px; }
/* Titre souligné au survol : filet doré qui suit chaque ligne du titre */
.book-card .bk-title { font-family:'Fraunces',serif; font-size:1.06rem; font-weight:500; line-height:1.3; margin-top:.85rem; color:#1A1D23; }
.book-card .bk-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } /* garde-fou : 3 lignes max (titre complet dans la fiche) */
.book-card .bk-title > span { background:linear-gradient(#B08D57,#B08D57) 0 100% / 0% 1px no-repeat; transition:background-size .5s cubic-bezier(.22,.61,.36,1);
padding-bottom:2px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.book-card:focus-visible .bk-title > span { background-size:100% 1px; }
@media (hover:hover){ .book-card:hover .bk-title > span { background-size:100% 1px; } }
.book-card .bk-foot { display:flex; align-items:baseline; gap:.5rem; margin-top:auto; padding-top:.45rem; font-size:.82rem; } /* prix calé en bas → aligné sur toute la rangée */
.book-card .bk-price { color:#7A5F2A; font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.book-card .bk-dot { width:3px; height:3px; border-radius:50%; background:#CFC8B8; align-self:center; }
.book-card .bk-pages { color:#6B7080; }
/* ---- Livre en vedette : pas de carte, le livre est mis en scène sur un halo (présentoir) ---- */
.featured { padding-block:.5rem; overflow-x:clip; } /* le halo (inset négatif) ne doit jamais élargir la page */
.feat-stage { position:relative; display:grid; place-items:center; padding:1.75rem 0 2.25rem; isolation:isolate; }
.feat-stage::before { content:""; position:absolute; z-index:-1; inset:-6% -10%; border-radius:50%;
background:radial-gradient(closest-side, rgba(201,162,75,.24), rgba(201,162,75,.08) 55%, transparent); }
.feat-stage::after { content:""; position:absolute; z-index:-1; left:18%; right:18%; bottom:1.1rem; height:18px; border-radius:50%;
background:radial-gradient(closest-side, rgba(14,32,56,.32), transparent); filter:blur(4px); }
.feat-cover { position:relative; display:block; width:min(62vw, 224px); border:0; padding:0; cursor:pointer; background:#163152;
border-radius:6px 12px 12px 6px; overflow:hidden; -webkit-tap-highlight-color:transparent;
box-shadow:0 2px 4px rgba(14,32,56,.12), 0 18px 34px -16px rgba(14,32,56,.45), 0 40px 70px -40px rgba(122,95,42,.45); }
@media (min-width:768px){ .feat-cover{ width:100%; max-width:256px; } }
.feat-cover img { width:100%; height:auto; display:block; } /* ratio naturel : jamais rognée */
/* Dos du livre : léger relief sur le bord gauche */
.feat-cover::before { content:""; position:absolute; inset:0 auto 0 0; width:14px; z-index:1;
background:linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.12) 45%, transparent); }
.feat-cue { position:absolute; z-index:2; left:50%; bottom:.75rem; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
padding:.45rem .8rem; border-radius:999px; font-size:.78rem; font-weight:600; color:#16304F; background:rgba(251,250,247,.94);
box-shadow:0 6px 16px -6px rgba(8,18,34,.45); transform:translate(-50%, 0); }
.feat-cue svg { width:15px; height:15px; }
/* Tactile : pastille icône discrète dans le coin (le libellé masquerait le titre de la couverture) */
@media (hover:none){
.feat-cue { left:auto; right:.6rem; bottom:.6rem; transform:none; padding:0; width:38px; height:38px; justify-content:center; font-size:0; gap:0; }
.feat-cover:active .feat-cue { transform:scale(.92); }
}
@media (hover:hover){
.feat-cue { opacity:0; transform:translate(-50%, 6px); transition:opacity .35s var(--ease), transform .45s var(--spring); }
.feat-cover:hover .feat-cue, .feat-cover:focus-visible .feat-cue { opacity:1; transform:translate(-50%, 0); }
}
@media (hover:hover){ .feat-cover:active .feat-cue { transform:translate(-50%, 0) scale(.96); } }
.feat-cover:focus-visible { outline:2px solid rgba(201,162,75,.8); outline-offset:4px; }
/* ---- Shared modal (fiche + extrait) ---- */
.modal { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-start; justify-content:center;
padding:max(2.5rem,5vh) 1rem 1rem; visibility:hidden; transition:visibility 0s linear .34s; }
.modal.open { visibility:visible; transition:visibility 0s linear 0s; }
.modal-backdrop { position:absolute; inset:0; background:rgba(14,32,56,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
opacity:0; transition:opacity .26s var(--ease); }
.modal.open .modal-backdrop { opacity:1; }
/* Frame wraps the (clipped, rounded) panel so the close button can float OUTSIDE it
without forcing overflow:visible on the panel (which would break rounded corners on scroll). */
.modal-frame { position:relative; width:100%; max-width:880px; }
.modal-panel { position:relative; width:100%; max-width:none; max-height:calc(100dvh - max(3.5rem,7vh));
background:#FBFAF7; border:1px solid #E7E3D9; border-radius:24px; overflow:hidden; display:flex; flex-direction:column;
box-shadow:0 40px 90px -28px rgba(8,18,34,.55), 0 16px 32px -18px rgba(8,18,34,.35);
transform:translateY(16px) scale(.985); opacity:0; transition:transform .42s var(--spring), opacity .3s var(--ease); }
.modal.open .modal-panel { transform:none; opacity:1; }
.modal-close { position:absolute; top:14px; right:14px; z-index:6; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
color:#1A1D23; background:rgba(251,250,247,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
box-shadow:inset 0 0 0 1px #E7E3D9, 0 4px 14px -6px rgba(8,18,34,.35); cursor:pointer; transition:transform .2s var(--spring), box-shadow .2s, background .2s; width:44px; height:44px; }
@media (hover:hover){ .modal-close:hover { background:#fff; box-shadow:inset 0 0 0 1px #B8B09E, 0 4px 14px -6px rgba(8,18,34,.35); } }
.modal-close:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.55); }
.modal-close:active { transform:scale(.92); }
@media (max-width:719px){
.modal:not([data-view="video"]) { padding:0; }
.modal:not([data-view="video"]) .modal-frame { height:100%; }
.modal:not([data-view="video"]) .modal-panel { height:100%; max-height:none; border:0; border-radius:0;
transform:translateY(28px); padding-bottom:env(safe-area-inset-bottom, 0px); }
.modal:not([data-view="video"]).open .modal-panel { transform:none; }
.modal:not([data-view="video"]) .modal-scroll { flex:1; }
.modal:not([data-view="video"]) .modal-close { top:calc(env(safe-area-inset-top, 0px) + 10px); right:10px; }
.modal[data-view="faq"] .legal, .modal[data-view="legal"] .legal { padding-top:calc(env(safe-area-inset-top, 0px) + 4.25rem); }
}
.modal-scroll { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
/* fiche produit */
.fiche { display:grid; grid-template-columns:1fr; }
@media (min-width:720px){ .fiche{ grid-template-columns:300px 1fr; } }
/* Même présentoir que les cartes (papier chaud + halo doré + grain local), un ton plus
profond pour se détacher du corps de la fiche. Couverture entière, jamais filtrée. */
.fiche-cover { position:relative; display:grid; place-items:center; padding:2.25rem 1.5rem 2.6rem; isolation:isolate;
background:
radial-gradient(55% 48% at 50% 46%, rgba(201,162,75,.24), rgba(201,162,75,.07) 62%, transparent 80%),
radial-gradient(130% 90% at 50% 0%, #F7F2E7, #EDE5D3 60%, #E2D8C2);
box-shadow:inset 0 -1px 0 rgba(122,95,42,.12); }
.fiche-cover::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.05; mix-blend-mode:multiply; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (min-width:720px){ .fiche-cover{ padding:3rem 2.25rem 3.4rem; box-shadow:inset -1px 0 0 rgba(122,95,42,.12); } }
/* Le livre + son ombre au sol (l'ombre suit le bas du livre quelle que soit sa hauteur) */
.fiche-book { position:relative; display:block; }
.fiche-book::after { content:""; position:absolute; z-index:0; left:10%; right:10%; bottom:-16px; height:22px; border-radius:50%;
background:radial-gradient(closest-side, rgba(14,32,56,.38), rgba(122,95,42,.12) 60%, transparent); filter:blur(6px); }
.fiche-cover .bk { box-shadow:0 2px 4px rgba(14,32,56,.16), 0 22px 36px -16px rgba(14,32,56,.5), 0 40px 60px -36px rgba(122,95,42,.45); }
.fiche-cover .bk img { width:auto; height:auto; max-width:100%; max-height:min(34vh, 300px); }
@media (min-width:720px){ .fiche-cover .bk img{ max-height:min(56vh, 380px); } }
.fiche-body { padding:2.25rem 1.75rem 2rem; }
.fiche-desc { line-height:1.7; }
/* Pied de fiche : Partager → WhatsApp / Copier le lien (pastilles de la page livre, version claire) */
.fiche-share .lv-share { margin-top:1.75rem; border-top-color:#E7E3D9; color:#5A5F6B; font-size:.9rem; }
.fiche-share .lv-share-btn { color:#1A1D23; box-shadow:inset 0 0 0 1px #DCD6C8; }
.fiche-share .lv-share-btn:hover { color:#1E3A5F; box-shadow:inset 0 0 0 1px #C9A24B; }
.fiche-desc p + p { margin-top:.85rem; }
/* Mise en avant : description complète sur desktop ; sur mobile l'accroche seule (repli : 1er paragraphe), pour garder le bouton proche */
.featured .feat-blurb { display:none; line-height:1.7; }
@media (max-width:767px){
.featured .feat-blurb { display:block; }
.featured .fiche-desc.has-blurb { display:none; }
.featured .fiche-desc p + p { display:none; }
}
@media (min-width:720px){ .fiche-body{ padding:3rem 2.75rem 2.75rem; } }
.fiche-meta { display:flex; align-items:center; gap:.55rem; font-size:.92rem; color:#5A5F6B; margin-top:.6rem; }
.fiche-meta .bk-price { color:#7A5F2A; font-weight:600; font-size:1.05rem; }
.fiche-meta .bk-dot { width:3px; height:3px; border-radius:50%; background:#CFC8B8; }
/* ----- « Livre en français » : signalé en mode EN — l'ouvrage est francophone ----- */
.lang-tag { display:inline-flex; align-items:center; line-height:1; font-size:.68rem; font-weight:600;
letter-spacing:.04em; text-transform:uppercase; color:#B08D57; padding:.32em .6em; border-radius:999px;
background:rgba(176,141,87,.1); box-shadow:inset 0 0 0 1px rgba(176,141,87,.28); }
/* ----- Stock : badge sur cover (alertes), note « stock bas », état épuisé + « Me prévenir » ----- */
.stock-badge { position:absolute; z-index:3; top:.6rem; left:.6rem; display:inline-flex; align-items:center; gap:.4em;
padding:.34em .62em; border-radius:999px; line-height:1; font-family:'Hanken Grotesk',system-ui,sans-serif;
font-size:.68rem; font-weight:600; letter-spacing:.03em; color:#FBFAF7;
background:rgba(14,32,56,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 16px -8px rgba(8,18,34,.6); }
.stock-badge .dot { width:6px; height:6px; border-radius:50%; flex:none; }
.stock-badge.low .dot { background:#E8C879; box-shadow:0 0 7px rgba(232,200,121,.85); }
.stock-badge.out { color:#F4E9DF; }
.stock-badge.out .dot { background:#E3B4A6; }
.is-out img { filter:saturate(.6) brightness(.84); }
.stock-note { display:inline-flex; align-items:center; gap:.5em; font-size:.86rem; font-weight:600; color:#B08D57; }
.stock-note .dot { width:7px; height:7px; border-radius:50%; flex:none; background:#E8C879; box-shadow:0 0 7px rgba(232,200,121,.85); }
.btn-disabled { background:#EFEBE2; color:#8A8575; box-shadow:inset 0 0 0 1px #E0DACE; cursor:not-allowed; pointer-events:none; }
.fiche-notify .nt-lead { font-size:.9rem; line-height:1.6; color:#5A5F6B; margin-bottom:.85rem; max-width:30rem; }
.fiche-notify form { display:flex; flex-wrap:wrap; gap:.6rem; }
.fiche-notify input[type=email] { flex:1 1 200px; min-width:0; padding:.72rem .95rem; border-radius:12px; background:#FFFFFF;
box-shadow:inset 0 0 0 1px #D9D3C6; color:#1A1D23; font-size:.95rem; transition:box-shadow .25s var(--ease); }
.fiche-notify input[type=email]::placeholder { color:#9A9384; }
.fiche-notify input[type=email]:focus { outline:none; box-shadow:inset 0 0 0 1.5px #1E3A5F; }
/* Extrait (aperçu du bloc « Feuilleter » des pages livres) */
.excerpt-body { font-size:1.08rem; line-height:1.82; color:#2c2f37; }
.excerpt-body p { margin-top:1.3rem; }
.excerpt-body p:first-of-type { margin-top:1.5rem; }
.excerpt-body p:first-of-type::first-letter { font-family:'Fraunces',serif; float:left; font-size:3.5em; line-height:.78;
font-weight:500; padding:.06em .14em 0 0; color:#B08D57; }
/* ----- Pages légales (modale long-format — calquée sur le lecteur d'extrait) ----- */
.legal { padding:2.75rem 1.5rem 2.25rem; }
@media (min-width:720px){ .legal{ padding:3.25rem 2.5rem 2.75rem; } }
.legal-inner { max-width:68ch; margin-inline:auto; }
.legal-title { font-family:'Fraunces',Georgia,serif; font-size:2rem; font-weight:500; line-height:1.12; letter-spacing:-.02em; color:#1A1D23; margin-top:.5rem; }
@media (min-width:720px){ .legal-title{ font-size:2.4rem; } }
.legal-meta { margin-top:.7rem; font-size:.84rem; color:#8A8575; }
.legal-doc { margin-top:2rem; font-size:1.02rem; line-height:1.75; color:#2c2f37; }
.legal-doc h2 { font-family:'Fraunces',Georgia,serif; font-size:1.32rem; font-weight:500; line-height:1.25; letter-spacing:-.01em; color:#1A1D23; margin-top:2.3rem; }
.legal-doc h2:first-child { margin-top:0; }
.legal-doc h3 { font-size:1.02rem; font-weight:600; color:#1A1D23; margin-top:1.7rem; }
.legal-doc p { margin-top:1rem; }
.legal-doc ul { margin-top:1rem; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.legal-doc li { position:relative; padding-left:1.4rem; }
.legal-doc li::before { content:""; position:absolute; left:.3rem; top:.62em; width:5px; height:5px; border-radius:50%; background:#C9A24B; }
.legal-doc strong { color:#1A1D23; font-weight:600; }
.legal-doc a { color:#B08D57; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:color .2s var(--ease); }
.legal-doc a:hover { color:#C9A24B; }
.legal-doc a:focus-visible { outline:none; color:#C9A24B; text-decoration-thickness:2px; }
.legal-todo { color:#A4724E; background:rgba(176,123,87,.12); border-radius:5px; padding:0 .35em; font-style:italic; font-size:.92em; }
/* Footer — Lever de lumière */
.footer-dawn { position:absolute; bottom:-80px; left:50%; transform:translateX(-50%); width:440px; height:440px; z-index:0; pointer-events:none; }
.footer-dawn-glow { position:absolute; inset:-80px; border-radius:50%;
background:radial-gradient(circle, rgba(176,141,87,.18) 0%, rgba(176,141,87,.08) 28%, rgba(176,141,87,.025) 52%, transparent 68%);
animation:dawn-glow 12s ease-in-out infinite; }
.footer-dawn-star { position:relative; width:100%; height:100%; animation:dawn-spin 90s linear infinite, dawn-breathe 11s ease-in-out infinite; }
@keyframes dawn-spin { from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }
@keyframes dawn-breathe { 0%,100%{ opacity:.07 } 50%{ opacity:.14 } }
@keyframes dawn-glow { 0%,100%{ opacity:.75; transform:scale(1) } 50%{ opacity:1; transform:scale(1.09) } }
/* liens légaux du footer (séparés par un point, calqués sur les liens du footer) */
.footer-legal { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem 1rem; }
.footer-legal a { position:relative; color:rgba(251,250,247,.5); transition:color .2s var(--ease); }
.footer-legal a:not(:last-child)::after { content:"·"; position:absolute; right:-.6rem; color:rgba(251,250,247,.3); }
.footer-legal a:hover { color:#C9A24B; }
.footer-legal a:focus-visible { outline:none; color:#C9A24B; text-decoration:underline; text-underline-offset:3px; }
/* ---- Videos: featured + vertical scroll list ---- */
.video-featured { display:block; width:100%; border:0; padding:0; background:transparent; color:inherit; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; }
.vthumb { display:block; position:relative; overflow:hidden; border-radius:22px; aspect-ratio:16/9; isolation:isolate;
box-shadow:0 18px 40px -12px rgba(30,58,95,.18), 0 8px 16px -8px rgba(26,29,35,.08);
transition:transform .4s var(--spring), box-shadow .4s var(--ease); will-change:transform; }
/* Certaines miniatures YouTube ont une bande noire incrustée → léger recadrage (4 %) */
.vthumb img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); }
.vthumb::before { content:""; position:absolute; inset:0; z-index:1; mix-blend-mode:multiply; background:linear-gradient(140deg, rgba(30,58,95,.18), rgba(176,141,87,.12)); }
.vthumb::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(14,32,56,.6), transparent 54%); }
.video-featured:hover .vthumb, .video-featured:focus-visible .vthumb { transform:translateY(-4px); box-shadow:0 28px 56px -20px rgba(30,58,95,.4); }
.video-featured:active .vthumb { transform:translateY(-1px) scale(.995); }
.video-featured:focus-visible { outline:none; }
.video-featured:focus-visible .vthumb { outline:2px solid rgba(201,162,75,.8); outline-offset:3px; }
/* Corner badge (bottom-left) so the centred subject's face is never covered. */
.vplay { position:absolute; left:16px; bottom:16px; z-index:2; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
color:#16304F; background:rgba(251,250,247,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 22px -10px rgba(8,18,34,.5); transition:transform .35s var(--spring), box-shadow .3s, background .3s; }
.vplay svg { width:22px; height:22px; margin-left:2px; }
.video-featured:hover .vplay, .video-featured:focus-visible .vplay { transform:scale(1.08); background:rgba(251,250,247,.86); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 14px 30px -10px rgba(8,18,34,.6); }
.vf-title { display:block; font-family:'Fraunces',serif; font-size:1.42rem; font-weight:500; line-height:1.22; margin-top:1rem; color:#1A1D23; transition:color .25s; }
.video-featured:hover .vf-title, .video-featured:focus-visible .vf-title { color:#1E3A5F; }
.vmeta { display:flex; align-items:center; gap:.5rem; margin-top:.45rem; font-size:.85rem; color:#5A5F6B; }
.vmeta .bk-dot { width:3px; height:3px; border-radius:50%; background:#CFC8B8; }
.video-list { display:flex; flex-direction:column; }
.video-item { display:flex; gap:1rem; align-items:center; width:100%; text-align:left; border:0; background:transparent; color:inherit;
cursor:pointer; padding:.9rem .15rem; border-bottom:1px solid #E7E3D9; -webkit-tap-highlight-color:transparent; }
.video-item:last-child { border-bottom:0; }
.vthumb-sm { position:relative; overflow:hidden; border-radius:12px; flex:0 0 128px; width:128px; aspect-ratio:16/9; isolation:isolate;
box-shadow:0 1px 2px rgba(26,29,35,.05), 0 6px 16px -10px rgba(30,58,95,.18); transition:transform .35s var(--spring); }
.vthumb-sm img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); }
.vthumb-sm::before { content:""; position:absolute; inset:0; z-index:1; mix-blend-mode:multiply; background:linear-gradient(140deg, rgba(30,58,95,.18), rgba(176,141,87,.12)); }
.vthumb-sm::after { content:""; position:absolute; inset:0; z-index:1; opacity:0; background:linear-gradient(to top right, rgba(14,32,56,.55), transparent 52%); transition:opacity .3s var(--ease); }
/* List thumbnails carry no permanent play badge (title + "X vues · date" already read as video,
and the whole row is clickable). The corner badge only fades in on hover / keyboard focus, so it
never persistently covers the centred face. Mobile relies on context. */
.vplay-sm { position:absolute; left:7px; bottom:7px; z-index:2; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; opacity:0;
color:#16304F; background:rgba(251,250,247,.7); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 3px 10px -4px rgba(8,18,34,.45); transition:transform .35s var(--spring), background .3s, opacity .3s var(--ease); }
.vplay-sm svg { width:12px; height:12px; margin-left:1px; }
.vi-title { font-weight:600; line-height:1.32; color:#1A1D23; transition:color .25s; }
/* Titres YouTube parfois très longs : 3 lignes max, et la vignette s'aligne sur le haut du texte */
.vi-title { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:639px){ .video-item{ align-items:flex-start; } }
.vi-meta { font-size:.82rem; color:#5A5F6B; margin-top:.3rem; }
.video-item:hover .vthumb-sm, .video-item:focus-visible .vthumb-sm { transform:scale(1.04); }
.video-item:hover .vplay-sm, .video-item:focus-visible .vplay-sm { transform:scale(1.14); background:rgba(251,250,247,.85); }
/* Reveal the badge only where a real pointer can hover, or on keyboard focus (never on mobile tap). */
.video-item:focus-visible .vplay-sm, .video-item:focus-visible .vthumb-sm::after { opacity:1; }
@media (hover:hover){ .video-item:hover .vplay-sm, .video-item:hover .vthumb-sm::after { opacity:1; } }
.video-item:hover .vi-title, .video-item:focus-visible .vi-title { color:#1E3A5F; }
.video-item:focus-visible { outline:none; }
.video-item:focus-visible .vthumb-sm { outline:2px solid rgba(201,162,75,.8); outline-offset:2px; }
/* End-of-list "see all" link → channel's full video catalogue */
.video-seeall { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; margin-top:.35rem;
padding:1rem; border-radius:14px; color:#16304F; font-weight:600; letter-spacing:-.01em; text-decoration:none;
-webkit-tap-highlight-color:transparent; transition:background .25s var(--ease), color .25s, transform .3s var(--spring); }
.video-seeall .vsa-arrow { width:16px; height:16px; transition:transform .3s var(--spring); }
.video-seeall:hover { background:rgba(176,141,87,.1); color:#1E3A5F; }
.video-seeall:hover .vsa-arrow { transform:translateX(3px); }
.video-seeall:active { transform:scale(.985); }
.video-seeall:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.5); }
@media (min-width:1024px){
.video-list { overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y proximity; scroll-padding-block:.25rem; padding-right:.4rem;
scrollbar-width:thin; scrollbar-color:rgba(176,141,87,.55) transparent; }
.video-list::-webkit-scrollbar { width:6px; }
.video-list::-webkit-scrollbar-thumb { background:rgba(176,141,87,.45); border-radius:999px; }
.video-list::-webkit-scrollbar-track { background:transparent; }
.video-item { scroll-snap-align:start; }
}
/* ---- Video lightbox (shared modal, data-view="video") ---- */
/* Video view: reserve headroom above the panel and float the close button OUTSIDE the player
(in the backdrop) so it never covers YouTube's own chrome — channel avatar/title (top-left),
share/watch-later (top-right), settings/CC/fullscreen (bottom). */
.modal[data-view="video"] { padding-top:max(4.25rem,8.5vh); }
.modal[data-view="video"] .modal-frame { max-width:960px; }
.modal[data-view="video"] .modal-panel { max-height:calc(100dvh - max(7.5rem,16vh)); }
.modal[data-view="video"] .modal-close { top:-48px; right:0; color:#FBFAF7; background:rgba(14,32,56,.55);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.modal[data-view="video"] .modal-close:hover { background:rgba(14,32,56,.85); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
@media (max-width:520px){ .modal[data-view="video"] .modal-close { top:-44px; } }
.vlight { display:flex; flex-direction:column; }
.vlight-stage { position:relative; aspect-ratio:16/9; overflow:hidden; isolation:isolate;
background:radial-gradient(120% 100% at 50% 22%, #27486e, #163152 56%, #0e2038); }
.vlight-stage img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); }
.vlight-stage::after { content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(125% 110% at 50% 32%, transparent 42%, rgba(8,18,34,.5)); }
.vlight-stage iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4; }
.vlight-play { position:absolute; inset:0; margin:auto; z-index:2; width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
color:#16304F; background:rgba(251,250,247,.74); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); border:0; cursor:pointer;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 12px 30px -12px rgba(8,18,34,.6); transition:transform .35s var(--spring), box-shadow .3s, background .3s; }
.vlight-play svg { width:28px; height:28px; margin-left:3px; }
.vlight-play:hover { transform:scale(1.08); background:rgba(251,250,247,.88); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 18px 40px -14px rgba(8,18,34,.7); }
.vlight-play:active { transform:scale(.96); }
.vlight-play:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.6), inset 0 0 0 1px rgba(255,255,255,.45), 0 12px 30px -12px rgba(8,18,34,.6); }
.vlight-body { padding:2rem 1.6rem 2rem; }
@media (min-width:720px){ .vlight-body { padding:2.4rem 2.75rem 2.6rem; } }
.vlight-meta { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; font-size:.92rem; color:#5A5F6B; margin-top:.6rem; }
.vlight-meta .bk-dot { width:3px; height:3px; border-radius:50%; background:#CFC8B8; }
/* ============================================================
Mobile refinements (Passe G) — flow, ergonomics & iOS polish.
Desktop layout intentionally untouched.
============================================================ */
/* --- Safe-area: notch + home indicator --- */
header { padding-top: env(safe-area-inset-top); }
@supports (padding: max(0px)) {
header > .max-w-6xl { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
footer#contact > .max-w-6xl { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
.modal { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}
/* --- Touch targets: FR/EN segmented control (mobile only) --- */
@media (max-width:767px){
.seg button { padding:.6rem .95rem; font-size:.85rem; }
}
/* --- « S'abonner » : desktop seulement (sur mobile il vit dans l'overlay).
NB : on pilote ça ici car styles.css est chargé après tailwind.css ;
.btn{display:inline-flex} l'emporte sinon sur la classe Tailwind `hidden`. --- */
.nav-subscribe { display:none; }
@media (min-width:1024px){ .nav-subscribe { display:inline-flex; } }
/* BLOG-1 : 6 liens de nav → entre 1024 et 1279 px, nav resserrée et « S'abonner » masqué (doublon de « Vidéos »). */
.nav-link { white-space:nowrap; }
@media (min-width:1024px) and (max-width:1279px){ .nav-main { gap:1.35rem; } .nav-subscribe { display:none; } }
/* --- Wordmark « Oschoffa-Yansunnu » : taille fluide pour identifier le site
sur mobile sans déborder, puis taille pleine dès la tablette. font-size
piloté ici (pas en inline) pour que clamp s'applique. --- */
.nav-wordmark { font-size:clamp(1.12rem, 4.6vw, 1.32rem); }
@media (min-width:768px){ .nav-wordmark { font-size:1.32rem; } }
/* --- Toggle FR/EN : dans la barre nav sur desktop, déplacé dans l'overlay
burger sur mobile (la barre mobile manque de place avec nom + suivi +
panier + burger). Le JS synchronise les 2 instances via [data-lang-btn]. --- */
.seg-header { display:none; }
@media (min-width:1024px){ .seg-header { display:inline-flex; } }
.seg-overlay { margin-top:1.4rem; align-self:center; }
@media (min-width:768px){ .seg-overlay { display:none; } }
/* --- Boutons hero : pleine largeur, empilés et centrés sur mobile --- */
@media (max-width:639px){
.hero-cta-row { flex-direction:column; align-items:stretch; gap:.7rem; }
.hero-cta-row .btn { width:100%; justify-content:center; }
/* Stats hero (Livres publiés / Abonnés YouTube) : centrées sur mobile */
.hero-stats { justify-content:center; text-align:center; }
/* Boutons du livre en vedette : même traitement pleine largeur / centré */
.featured-cta-row { flex-direction:column; align-items:stretch; gap:.7rem; }
.featured-cta-row .btn { width:100%; justify-content:center; }
.featured-cta-row .link-u { align-self:center; }
.featured-cta-row .btn.btn-add.is-in { width:auto; align-self:center; }
.featured-cta-row:has(.btn-add.is-in) { gap:.2rem; }
}
/* --- Hamburger ⇄ close icon --- */
#menuBtn .ic-close { display:none; }
#menuBtn[aria-expanded="true"] .ic-menu { display:none; }
#menuBtn[aria-expanded="true"] .ic-close { display:block; }
/* --- Header state while the full-screen overlay is open (ivory bg → dark chrome) --- */
header.nav-open { color:#1A1D23; background:transparent; border-color:transparent; }
header.nav-open .seg { background:#F0ECE2; box-shadow:inset 0 0 0 1px #E2DCCD; }
/* --- Full-screen mobile nav overlay --- */
.nav-overlay { position:fixed; inset:0; z-index:45; display:flex; background:#FBFAF7;
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .34s var(--ease), transform .45s var(--spring), visibility 0s linear .4s; }
.nav-overlay.open { opacity:1; visibility:visible; transform:none;
transition:opacity .34s var(--ease), transform .45s var(--spring), visibility 0s; }
.nav-overlay-inner { margin:auto; width:100%; padding:6rem 2rem calc(3rem + env(safe-area-inset-bottom));
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; text-align:center; }
.nav-overlay a:not(.btn) { font-family:'Fraunces',Georgia,serif; font-size:2.1rem; font-weight:500; line-height:1.1;
letter-spacing:-.02em; color:#1A1D23; opacity:0; transform:translateY(12px);
transition:opacity .4s var(--ease), transform .5s var(--spring), color .2s; }
.nav-overlay a:not(.btn)::after { content:""; display:block; height:2px; width:0; margin:.4rem auto 0;
background:#B08D57; border-radius:2px; transition:width .3s var(--ease); }
.nav-overlay a:not(.btn):active { color:#1E3A5F; }
.nav-overlay a:not(.btn):active::after, .nav-overlay a:not(.btn):focus-visible::after { width:1.8rem; }
.nav-overlay a:not(.btn):focus-visible { outline:none; color:#1E3A5F; }
.nav-overlay-cta { margin-top:1.1rem; opacity:0; transform:translateY(12px);
transition:opacity .4s var(--ease), transform .5s var(--spring), box-shadow .25s var(--ease); }
.nav-overlay.open a { opacity:1; transform:none; }
.nav-overlay.open a:nth-child(1){ transition-delay:.05s; }
.nav-overlay.open a:nth-child(2){ transition-delay:.10s; }
.nav-overlay.open a:nth-child(3){ transition-delay:.15s; }
.nav-overlay.open a:nth-child(4){ transition-delay:.20s; }
.nav-overlay.open .nav-overlay-cta{ transition-delay:.26s; }
/* --- Sticky primary action inside modals on phones (thumb reach; never cut at the fold) --- */
@media (max-width:719px){
.vlight-body { padding-bottom:0; }
.fiche-body { padding-bottom:calc(2rem + env(safe-area-inset-bottom)); }
.fiche-body .modal-actions { margin-top:1.75rem; }
.vlight-body .modal-actions {
position:sticky; bottom:0; z-index:4; margin-top:1.25rem; margin-bottom:0;
margin-left:-1.6rem; margin-right:-1.6rem; padding:1rem 1.6rem calc(1rem + env(safe-area-inset-bottom));
background:linear-gradient(to top, #FBFAF7 62%, rgba(251,250,247,.85) 85%, rgba(251,250,247,0)); }
/* Full-width CTA (Acheter / Regarder) for a bigger thumb target. */
.fiche-body .modal-actions { flex-direction:column; align-items:stretch; gap:.85rem; }
.fiche-body .modal-actions .btn,
.vlight-body .modal-actions .btn { width:100%; justify-content:center; }
.fiche-body .modal-actions .link-u { align-self:center; }
/* « Dans le panier » : état secondaire → la pastille épouse son texte, centrée (pas un gros bloc pleine largeur) */
.fiche-body .modal-actions .btn.btn-add.is-in { width:auto; align-self:center; }
.fiche-body .modal-actions:has(.btn-add.is-in) { gap:.35rem; }
}
/* --- Collapse the video list on mobile (companion to #videoMoreBtn) --- */
@media (max-width:1023px){
.video-list:not(.is-expanded) .video-item:nth-child(n+5){ display:none; }
.video-list:not(.is-expanded) .video-seeall{ display:none; }
}
/* .btn sets display:inline-flex, which outranks Tailwind's .lg:hidden / .hidden (equal
specificity, but styles.css loads after tailwind.css). Re-assert via the ID so the toggle
hides on desktop (≥1024px) and when JS adds .hidden (≤4 videos → nothing to collapse). */
#videoMoreBtn.hidden { display:none; }
@media (min-width:1024px){ #videoMoreBtn { display:none; } }
/* Écrans tactiles : champs à 16 px minimum → iOS ne zoome plus la page au focus (en dessous de 16 px, Safari agrandit). */
@media (pointer:coarse){ input:not([type=radio]):not([type=checkbox]):not([type=range]), select, textarea { font-size:16px !important; } }
/* ============ MINI-PANIER (tiroir latéral) ============ */
/* Déclencheur header — hérite de currentColor comme .nav-link (ivoire sur le hero, encre une fois scrollé). */
.cart-toggle, .track-toggle { position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:999px;
color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; isolation:isolate;
transition:transform .3s var(--spring); }
.cart-toggle::before, .track-toggle::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:currentColor; opacity:0; transition:opacity .25s var(--ease); }
.cart-toggle:hover::before, .track-toggle:hover::before { opacity:.1; }
.cart-toggle:active, .track-toggle:active { transform:scale(.94); }
.cart-toggle:focus-visible, .track-toggle:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.5); }
.cart-toggle svg, .track-toggle svg { width:22px; height:22px; }
/* Puce suivi (OC-3) : visible dès qu'une commande existe (le JS retire [hidden]),
mobile compris — le wordmark fluide libère assez de place. Le lien e-mail durable
(?order=…) reste un fallback. NB : on force display ici car styles.css charge après
tailwind (sinon le display:grid de Tailwind l'emporterait sur l'état caché). */
.track-toggle[hidden] { display:none; }
.track-toggle:not([hidden]) { display:inline-grid; }
.cart-badge { position:absolute; top:-1px; right:-2px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
display:inline-flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk',system-ui,sans-serif;
font-size:.66rem; font-weight:700; line-height:1; color:#16304F; background:linear-gradient(180deg,#E9C877,#C9A24B);
box-shadow:0 2px 6px -1px rgba(201,162,75,.6), inset 0 0 0 1px rgba(255,255,255,.45); }
.cart-badge[hidden] { display:none; }
/* Puce dorée « suivi disponible » sur l'icône livraison — signale qu'on peut rouvrir le récap de commande */
.track-dot { position:absolute; top:7px; right:8px; width:9px; height:9px; border-radius:999px;
background:linear-gradient(180deg,#E9C877,#C9A24B);
box-shadow:0 1px 5px -1px rgba(201,162,75,.8), inset 0 0 0 1px rgba(255,255,255,.55); }
/* La pastille « pop » juste après que le camion s'est garé */
.track-toggle.track-drivein .track-dot { animation:trackDotPop .5s var(--spring) .62s both; }
/* Camion qui entre en roulant (une fois, à l'apparition de l'icône) : glisse de la gauche + 2 cahots, puis se gare */
.track-toggle.track-drivein svg { animation:truckDrive .85s var(--spring) both; }
@keyframes truckDrive {
0% { transform:translateX(-150%); opacity:0; }
55% { transform:translateX(12%); opacity:1; }
62% { transform:translateX(12%) translateY(-1.5px); }
72% { transform:translateX(2%) translateY(0); }
82% { transform:translateX(2%) translateY(-1px); }
100% { transform:translateX(0) translateY(0); }
}
@keyframes trackDotPop { 0%{ transform:scale(0); opacity:0; } 60%{ transform:scale(1.35); } 100%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){
.track-toggle.track-drivein svg, .track-toggle.track-drivein .track-dot { animation:none; }
}
.cart-toggle.is-bump .cart-badge { animation:cartBump .45s var(--spring); }
@keyframes cartBump { 0%{ transform:scale(1); } 42%{ transform:scale(1.4); } 100%{ transform:scale(1); } }
.cart { position:fixed; inset:0; z-index:90; visibility:hidden; transition:visibility 0s linear .46s; }
.cart.open { visibility:visible; transition:visibility 0s linear 0s; }
.cart-backdrop { position:absolute; inset:0; background:rgba(14,32,56,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
opacity:0; transition:opacity .34s var(--ease); }
.cart.open .cart-backdrop { opacity:1; }
.cart-panel { position:absolute; top:0; right:0; height:100%; width:min(500px,100%); display:flex; flex-direction:column;
background:#FBFAF7; border-left:1px solid #E7E3D9;
box-shadow:-40px 0 90px -28px rgba(8,18,34,.55), -16px 0 32px -18px rgba(8,18,34,.3);
transform:translateX(100%); transition:transform .46s var(--spring); }
.cart.open .cart-panel { transform:none; will-change:transform; } /* promu seulement quand le panier est ouvert */
.cart-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.3rem 1.4rem 1.05rem; border-bottom:1px solid #EDE8DD; }
.cart-h { font-family:'Fraunces',Georgia,serif; font-size:1.4rem; font-weight:500; letter-spacing:-.01em; color:#1A1D23; }
.cart-close { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; color:#1A1D23;
background:rgba(30,58,95,.05); box-shadow:inset 0 0 0 1px #E7E3D9; cursor:pointer;
transition:transform .3s var(--spring), background .25s, box-shadow .25s; }
@media (hover:hover){ .cart-close:hover { background:#fff; box-shadow:inset 0 0 0 1px #B8B09E; } }
.cart-close:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.55); }
.cart-close:active { transform:scale(.92); }
.cart-body { flex:1; min-height:0; display:flex; flex-direction:column; }
.cart-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:1rem 1.4rem 1.2rem; }
@media (min-width:640px){ .cart-head{ padding:1.6rem 2rem 1.3rem; } .cart-scroll{ padding:1.25rem 2rem 1.5rem; } }
.cart-row { display:grid; grid-template-columns:88px 1fr auto; gap:1rem; align-items:start; padding:1.15rem 0; border-bottom:1px solid #EFEAE0; }
.cart-row:first-child { padding-top:.35rem; }
/* Retrait d'une ligne : repli en douceur (hauteur + opacité) avant de reconstruire le panier */
.cart-row.removing { overflow:hidden; transform-origin:top;
transition:height .32s var(--ease), opacity .26s var(--ease), padding .32s var(--ease), margin .32s var(--ease), border-color .2s linear; }
@media (prefers-reduced-motion: reduce){ .cart-row.removing { transition:none; } }
.cart-thumb { width:88px; height:auto; align-self:start; border-radius:4px 8px 8px 4px; overflow:hidden; background:#163152; box-shadow:0 4px 10px -5px rgba(8,18,34,.5); }
.cart-thumb img { width:100%; height:auto; display:block; }
@media (min-width:640px){ .cart-row{ grid-template-columns:104px 1fr auto; gap:1.4rem; padding:1.5rem 0; } .cart-thumb{ width:104px; } }
.cart-info { min-width:0; }
.cart-name { font-size:.98rem; font-weight:600; line-height:1.35; padding-top:.15rem; color:#1A1D23;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-unit { font-size:.8rem; color:#5A5F6B; margin-top:.22rem; }
.cart-ctrls { display:flex; align-items:center; gap:1rem; margin-top:.85rem; }
.cart-line-price { padding-top:.15rem; font-size:.98rem; font-weight:600; color:#B08D57; white-space:nowrap; text-align:right; }
.cart-remove { font-size:.78rem; color:#8A8575; text-decoration:underline; text-underline-offset:2px; cursor:pointer; border-radius:4px; transition:color .2s; }
@media (hover:hover){ .cart-remove:hover { color:#B4453A; } }
.cart-remove:active { color:#B4453A; }
.cart-remove:focus-visible { outline:none; color:#1E3A5F; box-shadow:0 0 0 2px rgba(201,162,75,.5); }
.qty { display:inline-flex; align-items:center; border-radius:999px; box-shadow:inset 0 0 0 1px #D9D3C6; background:#fff; }
.qty button { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#1E3A5F; cursor:pointer;
transition:background .2s var(--ease), transform .2s var(--spring); }
.qty button:hover { background:rgba(30,58,95,.08); }
.qty button:active { transform:scale(.9); }
.qty button:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(201,162,75,.55); }
.qty button:disabled { color:#C7C0B1; cursor:not-allowed; }
.qty button:disabled:hover { background:transparent; }
.qty svg { width:15px; height:15px; }
.qty .qv { min-width:1.5rem; text-align:center; font-size:.86rem; font-weight:600; color:#1A1D23; font-variant-numeric:tabular-nums; }
.cart-ship { margin-top:1.25rem; }
.cart-sub { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9A9384; margin-bottom:.65rem; }
/* Sélecteur de destination (France / Outre-mer / UE) — pilote la zone tarifaire AVANT Stripe. */
.cart-dest { margin-bottom:.85rem; }
.cart-dest-label { display:block; font-size:.74rem; color:#5A5F6B; margin-bottom:.35rem; }
.cart-dest-select { width:100%; appearance:none; -webkit-appearance:none; font:inherit; font-size:.86rem; color:#1A1D23;
padding:.62rem 2.2rem .62rem .8rem; border-radius:12px; border:none; box-shadow:inset 0 0 0 1px #E7E3D9; background-color:#fff;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5F6B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right .75rem center; background-size:1rem; cursor:pointer;
transition:box-shadow .2s var(--ease); }
.cart-dest-select:hover { box-shadow:inset 0 0 0 1px #CFC8B8; }
.cart-dest-select:focus-visible { outline:none; box-shadow:inset 0 0 0 1.5px #1E3A5F, 0 0 0 3px rgba(201,162,75,.4); }
.ship-opt { display:flex; align-items:center; gap:.7rem; padding:.72rem .8rem; border-radius:12px; box-shadow:inset 0 0 0 1px #E7E3D9;
cursor:pointer; margin-bottom:.5rem; transition:box-shadow .2s var(--ease), background .2s; }
.ship-opt:last-child { margin-bottom:0; }
.ship-opt:hover { box-shadow:inset 0 0 0 1px #CFC8B8; }
.ship-opt.is-sel { box-shadow:inset 0 0 0 1.5px #1E3A5F; background:rgba(30,58,95,.03); }
.ship-opt:focus-within { box-shadow:inset 0 0 0 1.5px #1E3A5F, 0 0 0 3px rgba(201,162,75,.4); }
.ship-opt input { accent-color:#1E3A5F; width:16px; height:16px; flex:none; cursor:pointer; }
.ship-label { flex:1; font-size:.86rem; color:#1A1D23; }
.ship-cost { font-size:.84rem; font-weight:600; color:#5A5F6B; white-space:nowrap; }
.ship-cost.free { color:#B08D57; }
/* Adresse du point de retrait — visible quand le mode « Retrait » est sélectionné. */
.cart-pickup { margin-top:.7rem; padding:.85rem .95rem; border-radius:12px; background:rgba(30,58,95,.04); box-shadow:inset 0 0 0 1px #E7E3D9; }
.cart-pickup-title { display:flex; align-items:center; gap:.4rem; margin:0 0 .5rem; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#B08D57; }
.cart-pickup-title svg { width:14px; height:14px; flex:none; }
.cart-pickup-name { margin:0; font-size:.9rem; font-weight:600; color:#1A1D23; }
.cart-pickup-addr, .cart-pickup-hours { margin:.18rem 0 0; font-size:.84rem; line-height:1.5; color:#5A5F6B; white-space:pre-line; }
.cart-pickup-note { display:flex; align-items:center; gap:.4rem; margin:.6rem 0 0; padding-top:.55rem; border-top:1px solid rgba(231,227,217,.9); font-size:.76rem; color:#9A9384; }
.cart-pickup-note svg { width:13px; height:13px; flex:none; }
.cart-foot { flex:none; padding:1.05rem 1.4rem calc(1.25rem + env(safe-area-inset-bottom)); border-top:1px solid #EDE8DD; background:#FBFAF7; }
@media (min-width:640px){ .cart-foot{ padding-inline:2rem; } }
.cart-sum { display:flex; flex-direction:column; gap:.42rem; margin-bottom:.95rem; }
.sum-row { display:flex; justify-content:space-between; font-size:.88rem; color:#5A5F6B; }
.sum-row .sum-val { font-weight:600; color:#1A1D23; }
.sum-row.total { font-family:'Fraunces',Georgia,serif; font-size:1.22rem; font-weight:500; color:#1A1D23; padding-top:.55rem; border-top:1px solid #EDE8DD; }
.sum-row .sum-val { display:inline-block; }
/* Le total « tique » en doré quand il change (qté, livraison, devis Boxtal qui arrive) */
.sum-row.total .sum-val.is-updated { animation:sumTick .55s var(--ease); }
@keyframes sumTick { 0%{ color:#B08D57; transform:translateY(-2px); } 60%{ color:#B08D57; } 100%{ color:#1A1D23; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .sum-row.total .sum-val.is-updated { animation:none; } }
.cart-vat { font-size:.72rem; color:#9A9384; margin:.35rem 0 0; text-align:right; }
.cart-foot .btn { width:100%; justify-content:center; }
.cart-secure { display:flex; align-items:center; justify-content:center; gap:.42rem; font-size:.76rem; color:#9A9384; margin-top:.75rem; }
.cart-secure svg { width:13px; height:13px; }
.cart-err { font-size:.82rem; color:#B4453A; margin-top:.75rem; text-align:center; }
.cart-err:empty { display:none; }
.cart-empty { margin-block:auto; padding:3rem 1.4rem 5rem; text-align:center; }
.cart-body:has(.cart-empty) { justify-content:center; }
.cart-empty svg { width:42px; height:42px; color:#CFC8B8; display:block; margin:0 auto 1rem; }
.cart-empty p { font-family:'Fraunces',Georgia,serif; font-size:1.18rem; color:#1A1D23; }
.cart-empty .btn { margin-top:1.25rem; }
/* Panier — état pré-ouverture : capture e-mail au lieu du bouton « Commander ». */
.cart-soon-title { font-family:'Fraunces',Georgia,serif; font-size:1.12rem; letter-spacing:-.01em; color:#1A1D23; }
.cart-soon-lead { font-size:.88rem; line-height:1.6; color:#5A5F6B; margin-top:.4rem; }
.cart-soon form { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.95rem; }
.cart-soon input[type=email] { flex:1 1 180px; min-width:0; padding:.72rem .95rem; border-radius:12px;
background:#FFFFFF; box-shadow:inset 0 0 0 1px #D9D3C6; color:#1A1D23; font-size:.95rem;
transition:box-shadow .25s var(--ease); }
.cart-soon input[type=email]::placeholder { color:#9A9384; }
.cart-soon input[type=email]:focus { outline:none; box-shadow:inset 0 0 0 1.5px #1E3A5F; }
.cart-foot .cart-soon .btn { width:auto; flex:0 0 auto; }
.cart-soon .nt-msg { margin-top:.7rem; }
.cart-soon .nt-msg.hidden { display:none; }
/* Panier — étape « Vos coordonnées » (mode WhatsApp, WA-1). Même papier que le panier,
champs en écho de la capture e-mail (.cart-soon) : fond blanc, filet sable, focus marine. */
.btn-wa { gap:.55rem; }
.btn-wa svg { width:18px; height:18px; flex:none; }
/* Repère d'étapes (Panier › Coordonnées › WhatsApp) — « Panier » ramène au panier. */
.wa-steps { display:flex; align-items:center; flex-wrap:wrap; gap:.15rem; list-style:none; margin:.6rem 0 0; padding:0; font-size:.78rem; font-weight:600; letter-spacing:.01em; color:#9A9384; }
.wa-steps li { display:flex; align-items:center; }
.wa-steps li + li::before { content:"›"; margin:0 .45rem; color:#CFC8B8; font-weight:400; }
.wa-steps .is-cur { color:#1A1D23; }
.wa-steps button { padding:.3rem 0; border:0; border-radius:4px; background:none; font:inherit; color:#5A5F6B; cursor:pointer; text-decoration:underline; text-decoration-color:#CFC8B8; text-underline-offset:3px; transition:color .2s var(--ease), transform .2s var(--spring); }
@media (hover:hover){ .wa-steps button:hover { color:#1E3A5F; } }
.wa-steps button:active { transform:scale(.96); }
.wa-steps button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.45); }
.wa-hint { font-size:.74rem; line-height:1.45; color:#9A9384; margin-top:.1rem; }
.wa-title { font-family:'Fraunces',Georgia,serif; font-size:1.32rem; font-weight:500; letter-spacing:-.02em; color:#1A1D23; margin-top:.65rem; }
.wa-lead { font-size:.86rem; line-height:1.6; color:#5A5F6B; margin-top:.3rem; }
.wa-form { display:grid; gap:.95rem; margin:1.25rem 0 1.5rem; }
.wa-addr { display:grid; grid-template-columns:7.5rem 1fr; gap:.55rem; border:0; padding:0; margin:0; min-width:0; }
.wa-addr > legend { padding:0; margin-bottom:.4rem; }
.wa-addr .wa-full { grid-column:1 / -1; }
.wa-sr-label .wa-lbl { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wa-field { display:flex; flex-direction:column; gap:.38rem; min-width:0; }
.wa-lbl { font-size:.76rem; font-weight:600; letter-spacing:.02em; color:#3A3F4A; }
.wa-opt { font-weight:400; color:#9A9384; }
.wa-inp { width:100%; min-width:0; padding:.72rem .9rem; border-radius:12px; border:0; font:inherit; font-size:.95rem; color:#1A1D23;
background:#FFFFFF; box-shadow:inset 0 0 0 1px #D9D3C6; transition:box-shadow .25s var(--ease); }
textarea.wa-inp { resize:vertical; min-height:3.4rem; line-height:1.5; }
.wa-inp::placeholder { color:#B3AC9D; }
@media (hover:hover){ .wa-inp:hover { box-shadow:inset 0 0 0 1px #CFC8B8; } }
.wa-inp:focus { outline:none; box-shadow:inset 0 0 0 1.5px #1E3A5F, 0 0 0 3px rgba(201,162,75,.28); }
.wa-inp[aria-invalid="true"] { box-shadow:inset 0 0 0 1.5px #B4453A; background:#FFF8F6; }
.wa-pay { display:grid; gap:.5rem; border:0; padding:0; margin:0; min-width:0; }
.wa-pay > legend { padding:0; margin-bottom:.4rem; }
.wa-pay .ship-opt { margin-bottom:0; }
.pay-hint { display:block; margin-top:.15rem; font-size:.74rem; font-weight:400; color:#9A9384; }
.wa-sum { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.9rem; font-size:.84rem; color:#5A5F6B; }
.wa-sum span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-sum .sum-val { font-family:'Fraunces',Georgia,serif; font-size:1.22rem; font-weight:500; color:#1A1D23; white-space:nowrap; }
/* FAQ — accordéon natif (zéro-JS, accessible). Surface en écho des cartes du site. */
.faq-list { display:flex; flex-direction:column; gap:.85rem; }
.faq-item { background:#FFFFFF; border:1px solid #E7E3D9; border-radius:16px; overflow:hidden;
box-shadow:0 1px 2px rgba(26,29,35,.04),0 1px 3px rgba(30,58,95,.05);
transition:border-color .35s var(--ease), box-shadow .35s var(--ease); }
.faq-item[open] { border-color:#D8CFB8; box-shadow:0 14px 34px -18px rgba(30,58,95,.24); }
.faq-q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
padding:1.15rem 1.4rem; font-size:1.06rem; font-weight:500; line-height:1.4; color:#1A1D23; letter-spacing:-0.01em; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q:hover { color:#16304F; }
.faq-q:focus-visible { outline:none; box-shadow:inset 0 0 0 2px rgba(176,141,87,.45); border-radius:16px; }
.faq-chevron { flex:none; width:20px; height:20px; color:#B08D57; transition:transform .4s var(--spring); }
.faq-item[open] .faq-chevron { transform:rotate(180deg); }
.faq-a { padding:0 1.4rem 1.3rem; color:#5A5F6B; font-size:.97rem; line-height:1.75; max-width:62ch; }
.faq-item[open] .faq-a { animation:faqReveal .42s var(--ease) both; }
@keyframes faqReveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
.faq-a p { margin:0 0 .7rem; }
.faq-a p:last-child { margin-bottom:0; }
.faq-a a { color:#1E3A5F; font-weight:600; text-decoration:underline; text-decoration-color:rgba(176,141,87,.55); text-underline-offset:3px; text-decoration-thickness:1.5px; transition:color .2s var(--ease), text-decoration-color .2s var(--ease); }
@media (hover:hover){ .faq-a a:hover { color:#B08D57; text-decoration-color:#B08D57; } }
.faq-a a:focus-visible { outline:none; border-radius:3px; box-shadow:0 0 0 3px rgba(201,162,75,.45); }
@media (prefers-reduced-motion: reduce){ .faq-chevron, .faq-item[open] .faq-a { transition:none; animation:none; } }
@media (max-width:640px){ .faq-q { padding:1rem 1.15rem; font-size:1rem; } .faq-a { padding:0 1.15rem 1.1rem; } }
/* La FAQ s'affiche dans la modale (coque .legal claire) → on garde les styles clairs ci-dessus, pas de variante sombre. */
/* Notice retour de commande */
.toast { position:fixed; left:50%; top:calc(.9rem + env(safe-area-inset-top)); transform:translate(-50%,-130%); z-index:95;
display:flex; align-items:center; gap:.6rem; max-width:calc(100vw - 2rem); padding:.8rem 1.05rem; border-radius:14px;
font-size:.9rem; font-weight:500; color:#1A1D23; background:#FBFAF7; border:1px solid #E7E3D9;
box-shadow:0 18px 40px -16px rgba(8,18,34,.45); opacity:0; visibility:hidden;
transition:transform .5s var(--spring), opacity .35s var(--ease), visibility 0s linear .5s; }
.toast.show { transform:translate(-50%,0); opacity:1; visibility:visible; transition:transform .5s var(--spring), opacity .35s var(--ease), visibility 0s linear 0s; }
.toast .ic { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; flex:none; }
.toast.success .ic { color:#16304F; background:linear-gradient(180deg,#E9C877,#C9A24B); }
.toast.cancel .ic { color:#8A8575; box-shadow:inset 0 0 0 1px #E0DACE; }
.toast .ic svg { width:13px; height:13px; }
.toast .tx { min-width:0; }
.toast .toast-x { margin-left:.25rem; color:#9A9384; cursor:pointer; flex:none; border-radius:6px; transition:color .2s; }
.toast .toast-x:hover { color:#1A1D23; }
.toast .toast-x:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(201,162,75,.5); }
.toast .toast-x svg { width:15px; height:15px; }
/* ---- Écran de confirmation de commande (retour Stripe) ---- */
.oc { position:fixed; inset:0; z-index:98; visibility:hidden; transition:visibility 0s linear .42s; }
.oc.open { visibility:visible; transition:visibility 0s linear 0s; }
.oc-backdrop { position:absolute; inset:0; background:rgba(8,18,34,.74); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
opacity:0; transition:opacity .42s var(--ease); }
.oc.open .oc-backdrop { opacity:1; }
.oc-scroll { position:relative; height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
display:flex; align-items:flex-start; justify-content:center; padding:max(2rem,5vh) 1rem 3rem; }
.oc-panel { position:relative; width:100%; max-width:560px; color:#F5F0E6; padding:2.6rem 1.7rem 2rem;
background:radial-gradient(125% 80% at 50% -12%, #22456e 0%, #14304f 44%, #0e2038 100%);
border:1px solid rgba(201,162,75,.22); border-radius:26px; overflow:hidden;
box-shadow:0 50px 110px -30px rgba(4,10,22,.82), 0 18px 40px -22px rgba(4,10,22,.6), inset 0 1px 0 rgba(255,255,255,.05);
transform:translateY(20px) scale(.97); opacity:0; transition:transform .5s var(--spring), opacity .35s var(--ease); }
.oc.open .oc-panel { transform:none; opacity:1; }
.oc-close { position:absolute; top:12px; right:12px; z-index:3; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
color:rgba(245,240,230,.7); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(245,240,230,.14); cursor:pointer;
transition:transform .3s var(--spring), color .25s var(--ease), background .25s var(--ease); }
@media (hover:hover){ .oc-close:hover { color:#F5F0E6; background:rgba(255,255,255,.1); } }
.oc-close:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.55); }
.oc-close:active { transform:scale(.92); }
.oc-close svg { width:18px; height:18px; }
.oc-seal { position:relative; width:96px; height:96px; margin:0 auto; }
.oc-seal::before { content:""; position:absolute; inset:-32%; border-radius:50%; z-index:0;
background:radial-gradient(circle, rgba(201,162,75,.3), transparent 64%); opacity:0; animation:ocGlow 1s var(--ease) .3s forwards; }
.oc-seal svg.oc-star { position:relative; z-index:1; width:100%; height:100%; display:block;
filter:drop-shadow(0 6px 22px rgba(201,162,75,.4)); transform:scale(.6); opacity:0; }
.oc.open .oc-seal svg.oc-star { animation:ocSeal .85s var(--spring) .15s forwards; }
@keyframes ocSeal { to { transform:scale(1); opacity:1; } }
@keyframes ocGlow { to { opacity:1; } }
.oc-badge { position:absolute; right:0; bottom:2px; z-index:2; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
background:linear-gradient(180deg,#E9C877,#C9A24B); box-shadow:0 4px 12px rgba(201,162,75,.45), 0 0 0 3px #14304f;
transform:scale(0); opacity:0; }
.oc-body.is-paid .oc-badge { animation:ocBadge .5s var(--spring) .5s forwards; }
@keyframes ocBadge { 0%{transform:scale(0);opacity:0;} 60%{transform:scale(1.16);opacity:1;} 100%{transform:scale(1);opacity:1;} }
.oc-badge svg { width:16px; height:16px; color:#0e2038; }
.oc-badge path { stroke-dasharray:22; stroke-dashoffset:22; }
.oc-body.is-paid .oc-badge path { animation:ocDraw .45s var(--ease) .78s forwards; }
@keyframes ocDraw { to { stroke-dashoffset:0; } }
.oc-title { font-family:'Fraunces',Georgia,serif; font-size:1.7rem; font-weight:500; line-height:1.16; letter-spacing:-.02em; text-align:center; margin-top:1.3rem; }
.oc-statuswrap { text-align:center; margin-top:.75rem; }
.oc-pill { display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:600; letter-spacing:.01em; padding:.36em .82em; border-radius:999px; }
.oc-pill.paid { color:#E9C877; background:rgba(201,162,75,.12); box-shadow:inset 0 0 0 1px rgba(201,162,75,.32); }
.oc-pill.pending { color:rgba(245,240,230,.78); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(245,240,230,.14); }
.oc-pill .dot { width:7px; height:7px; border-radius:50%; flex:none; }
.oc-pill.paid .dot { background:#C9A24B; }
.oc-pill.pending .dot { background:rgba(245,240,230,.65); animation:ocPulse 1.2s ease-in-out infinite; }
@keyframes ocPulse { 0%,100%{opacity:.35;} 50%{opacity:1;} }
.oc-orderno { text-align:center; margin-top:.6rem; font-size:.8rem; color:rgba(245,240,230,.5); }
.oc-orderno b { color:#E9C877; font-weight:600; letter-spacing:.1em; margin-left:.35em; }
.oc-email { text-align:center; margin-top:.3rem; font-size:.84rem; color:rgba(245,240,230,.62); line-height:1.5; }
.oc-email b { color:#F5F0E6; font-weight:600; }
.oc-card { margin-top:1.45rem; padding:1.1rem 1.15rem; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(245,240,230,.08); }
.oc-card-h { font-size:.71rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:#C9A24B; margin-bottom:.85rem; display:flex; align-items:center; gap:.5rem; }
.oc-card-h svg { width:15px; height:15px; flex:none; }
.oc-item { display:flex; gap:.8rem; align-items:center; padding:.55rem 0; }
.oc-item + .oc-item { border-top:1px solid rgba(245,240,230,.07); }
.oc-item-cover { flex:none; width:38px; height:54px; border-radius:5px; object-fit:cover; background:rgba(255,255,255,.07); box-shadow:0 3px 10px -4px rgba(0,0,0,.55); }
.oc-item-main { flex:1; min-width:0; }
.oc-item-title { font-family:'Fraunces',serif; font-size:.95rem; font-weight:500; line-height:1.25; }
.oc-item-qty { font-size:.78rem; color:rgba(245,240,230,.5); margin-top:.15rem; }
.oc-item-price { flex:none; font-size:.9rem; font-weight:600; font-variant-numeric:tabular-nums; }
.oc-totals { margin-top:.9rem; padding-top:.9rem; border-top:1px solid rgba(245,240,230,.1); }
.oc-trow { display:flex; justify-content:space-between; gap:1rem; font-size:.86rem; color:rgba(245,240,230,.72); padding:.2rem 0; }
.oc-trow span:last-child { font-variant-numeric:tabular-nums; white-space:nowrap; }
.oc-trow.grand { margin-top:.4rem; font-size:1.06rem; font-weight:700; color:#F5F0E6; }
.oc-trow.grand span:last-child { color:#E9C877; }
.oc-track-body { font-size:.86rem; line-height:1.55; color:rgba(245,240,230,.76); }
.oc-track-detail { margin-top:.75rem; padding:.7rem .8rem; border-radius:10px; background:rgba(201,162,75,.07); box-shadow:inset 0 0 0 1px rgba(201,162,75,.18); font-size:.83rem; line-height:1.5; color:rgba(245,240,230,.82); }
.oc-track-detail b { color:#F5F0E6; }
.oc-track-hours { white-space:pre-line; color:rgba(245,240,230,.6); margin-top:.35rem; font-size:.8rem; line-height:1.5; }
.oc-track-btn { display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem; padding:.6rem 1.15rem; border-radius:999px; font-size:.86rem; font-weight:600;
color:#0e2038; background:linear-gradient(180deg,#E9C877,#C9A24B); text-decoration:none; box-shadow:0 8px 20px -8px rgba(201,162,75,.5);
transition:transform .25s var(--spring), box-shadow .25s var(--ease); }
.oc-track-btn:hover { transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(201,162,75,.62); }
.oc-track-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.55); }
.oc-track-btn svg { width:15px; height:15px; }
.oc-track-pending { margin-top:.75rem; font-size:.8rem; color:rgba(245,240,230,.5); line-height:1.5; }
.oc-track-num { margin-top:.55rem; font-size:.8rem; color:rgba(245,240,230,.62); }
.oc-track-num b { color:#E9C877; font-weight:600; letter-spacing:.03em; }
.oc-track-btn:active { transform:scale(.97); }
/* Suivi WhatsApp (WA-1) — la frise : un fil d'or qui se remplit étape par étape.
Faites = astre doré plein ; en cours = astre cerclé d'un halo qui respire ; à venir = anneau vide. */
.oc-wa-btn svg { width:17px; height:17px; }
.oc-pill.cancelled { color:rgba(245,240,230,.6); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(245,240,230,.12); }
.oc-pill.cancelled .dot { background:rgba(245,240,230,.35); }
.oc-pay-details { white-space:pre-line; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.oc-pay-copy { margin-top:.75rem; padding:.5rem 1rem; font-size:.8rem; }
.oc-pay-copy:active { transform:scale(.97); }
/* « Retrouver ma commande » — champs clairs sur la nuit du panneau de suivi. */
.oc-find .oc-title { margin-top:2.4rem; }
.oc-find-form { display:flex; flex-direction:column; text-align:left; max-width:24rem; margin:1.6rem auto 0; }
.oc-lbl { font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(245,240,230,.6); margin:0 0 .4rem; }
.oc-inp { width:100%; padding:.78rem .95rem; margin-bottom:1rem; border:0; border-radius:12px; font:inherit; font-size:1rem; color:#F5F0E6;
background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(245,240,230,.16); transition:box-shadow .25s var(--ease); }
.oc-inp::placeholder { color:rgba(245,240,230,.32); }
@media (hover:hover){ .oc-inp:hover { box-shadow:inset 0 0 0 1px rgba(245,240,230,.28); } }
.oc-inp:focus { outline:none; box-shadow:inset 0 0 0 1.5px #C9A24B, 0 0 0 3px rgba(201,162,75,.22); }
#tf-ref { text-transform:uppercase; letter-spacing:.08em; }
.oc-find-err { font-size:.82rem; line-height:1.5; color:#F0B4A8; margin:-.3rem 0 .9rem; }
.oc-find-err:empty { display:none; }
.oc-find-submit { justify-content:center; }
.oc-find-submit:active { transform:scale(.98); }
/* Annulation (WA-14) : discrète par défaut — un lien gris en fin de carte, panneau au clic. */
.oc-cancel { margin-top:1rem; padding-top:.8rem; border-top:1px solid rgba(245,240,230,.08); }
.oc-cancel-line { font-size:.8rem; line-height:1.5; color:rgba(245,240,230,.48); }
.oc-cancel-link { padding:0; border:0; background:none; font:inherit; font-size:inherit; color:rgba(245,240,230,.7); cursor:pointer;
text-decoration:underline; text-decoration-color:rgba(245,240,230,.3); text-underline-offset:3px; transition:color .2s var(--ease); }
@media (hover:hover){ .oc-cancel-link:hover { color:#F5F0E6; } }
.oc-cancel-link:focus-visible { outline:none; border-radius:3px; box-shadow:0 0 0 3px rgba(201,162,75,.45); }
/* Panneau à plat dans la carte (pas de boîte dans la boîte) : question, raison en liste
déroulante discrète, puis « Garder » (petit bouton) et « Oui, annuler » (lien) sur une ligne. */
.oc-cancel-panel:not([hidden]) { animation:faqReveal .28s var(--ease) both; }
.oc-cancel-q { font-size:.86rem; line-height:1.5; color:#F5F0E6; text-wrap:pretty; }
.oc-cancel-reason { display:block; width:100%; max-width:20rem; margin-top:.65rem; padding:.55rem 2rem .55rem .75rem; border:0; border-radius:10px;
font:inherit; font-size:.82rem; color:rgba(245,240,230,.85); background-color:rgba(255,255,255,.05);
box-shadow:inset 0 0 0 1px rgba(245,240,230,.14); appearance:none; -webkit-appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A24B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right .6rem center; background-size:14px; transition:box-shadow .2s var(--ease); }
.oc-cancel-reason option { color:#1A1D23; }
@media (hover:hover){ .oc-cancel-reason:hover { box-shadow:inset 0 0 0 1px rgba(245,240,230,.26); } }
.oc-cancel-reason:focus-visible { outline:none; box-shadow:inset 0 0 0 1px #C9A24B, 0 0 0 3px rgba(201,162,75,.25); }
.oc-cancel-alt { margin-top:.6rem; font-size:.8rem; line-height:1.5; color:rgba(245,240,230,.75); }
.oc-cancel-alt a { color:#E9C877; text-decoration:underline; text-underline-offset:2px; }
.oc-cancel-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.1rem; margin-top:.9rem; }
.oc-cancel-keep { padding:.5rem 1rem; border:0; border-radius:999px; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
color:#0e2038; background:#F5F0E6; transition:transform .2s var(--spring), background .2s var(--ease); }
@media (hover:hover){ .oc-cancel-keep:hover { background:#fff; } }
.oc-cancel-keep:active { transform:scale(.97); }
.oc-cancel-keep:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.5); }
.oc-cancel-yes { padding:.5rem .2rem; border:0; background:none; font:inherit; font-size:.82rem; font-weight:600; color:#F0B4A8; cursor:pointer;
text-decoration:underline; text-decoration-color:rgba(240,180,168,.4); text-underline-offset:3px; transition:color .2s var(--ease), transform .2s var(--spring); }
@media (hover:hover){ .oc-cancel-yes:hover { color:#F7CFC6; } }
.oc-cancel-yes:active { transform:scale(.97); }
.oc-cancel-yes:focus-visible { outline:none; border-radius:4px; box-shadow:0 0 0 3px rgba(201,162,75,.45); }
.oc-cancel-yes:disabled { opacity:.5; cursor:default; }
@media (prefers-reduced-motion: reduce){ .oc-cancel-panel:not([hidden]) { animation:none; } }
.oc-flow { list-style:none; margin:.2rem 0 0; padding:0; }
.oc-flow-step { position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:0 0 1rem 1.9rem; font-size:.88rem; line-height:1.35; }
.oc-flow-step:last-child { padding-bottom:0; }
.oc-flow-step::after { content:""; position:absolute; left:6.5px; top:16px; bottom:-1px; width:1.5px; border-radius:2px; background:rgba(245,240,230,.12); }
.oc-flow-step.is-done::after { background:linear-gradient(180deg,#C9A24B,rgba(201,162,75,.55)); }
.oc-flow-step:last-child::after { display:none; }
.oc-flow-dot { position:absolute; left:0; top:3px; width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(245,240,230,.24); }
.oc-flow-step.is-done .oc-flow-dot { background:#C9A24B; box-shadow:none; }
.oc-flow-step.is-done .oc-flow-dot::before { content:""; position:absolute; left:5px; top:2.5px; width:4px; height:7px; border:solid #0e2038; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
.oc-flow-step.is-current .oc-flow-dot { background:#E9C877; box-shadow:0 0 0 4px rgba(201,162,75,.18); }
.oc-flow-step.is-current .oc-flow-dot::after { content:""; position:absolute; inset:-5px; border-radius:50%; box-shadow:0 0 0 1px rgba(233,200,119,.55); animation:ocFlowHalo 2.4s var(--ease) infinite; }
@keyframes ocFlowHalo { 0%{ transform:scale(.7); opacity:.9; } 70%,100%{ transform:scale(1.6); opacity:0; } }
.oc-flow-label { color:rgba(245,240,230,.45); }
.oc-flow-step.is-done .oc-flow-label { color:rgba(245,240,230,.78); }
.oc-flow-step.is-current .oc-flow-label { color:#F5F0E6; font-weight:600; }
.oc-flow-date { flex:none; font-size:.74rem; color:rgba(245,240,230,.48); font-variant-numeric:tabular-nums; }
.oc-flow-note { margin-top:1rem; padding-top:.8rem; border-top:1px solid rgba(245,240,230,.08); font-size:.8rem; line-height:1.5; color:rgba(245,240,230,.55); }
@media (prefers-reduced-motion: reduce){ .oc-flow-step.is-current .oc-flow-dot::after { animation:none; opacity:0; } }
.oc-steps { list-style:none; margin:.3rem 0 0; padding:0; }
.oc-step { position:relative; padding-left:1.7rem; padding-bottom:.85rem; font-size:.86rem; color:rgba(245,240,230,.76); line-height:1.4; }
.oc-step:last-child { padding-bottom:0; }
.oc-step::before { content:""; position:absolute; left:4px; top:5px; width:8px; height:8px; border-radius:50%; background:#C9A24B; box-shadow:0 0 0 3px rgba(201,162,75,.15); }
.oc-step::after { content:""; position:absolute; left:7.5px; top:14px; bottom:-2px; width:1px; background:rgba(245,240,230,.14); }
.oc-step:last-child::after { display:none; }
.oc-help { text-align:center; margin-top:1.4rem; font-size:.82rem; color:rgba(245,240,230,.56); }
.oc-help a { color:#E9C877; text-decoration:underline; text-underline-offset:2px; transition:opacity .2s; }
.oc-help a:hover { opacity:.75; }
.oc-help a:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(201,162,75,.5); border-radius:3px; }
.oc-actions { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.5rem; }
.oc-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.72rem 1.3rem; border-radius:999px; font-size:.88rem; font-weight:600; cursor:pointer; text-decoration:none; border:none;
transition:transform .25s var(--spring), background .25s var(--ease), box-shadow .25s var(--ease); }
.oc-btn-primary { color:#0e2038; background:#F5F0E6; }
.oc-btn-primary:hover { transform:translateY(-1px); background:#fff; }
.oc-btn-ghost { color:#F5F0E6; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(245,240,230,.16); }
.oc-btn-ghost:hover { transform:translateY(-1px); background:rgba(255,255,255,.12); }
.oc-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.55); }
.oc-msg { text-align:center; font-size:.92rem; line-height:1.6; color:rgba(245,240,230,.82); padding:1.2rem .4rem; }
@media (max-width:520px){ .oc-panel { padding:2.2rem 1.2rem 1.6rem; border-radius:22px; } .oc-title { font-size:1.45rem; } }
@media (prefers-reduced-motion:reduce){
.oc-backdrop,.oc-panel,.oc-seal svg.oc-star,.oc-seal::before,.oc-badge,.oc-badge path,.oc-pill.pending .dot { transition:none!important; animation:none!important; }
.oc-panel { transform:none; opacity:1; } .oc-seal svg.oc-star { transform:none; opacity:1; } .oc-seal::before { opacity:1; }
.oc-body.is-paid .oc-badge { transform:scale(1); opacity:1; } .oc-body.is-paid .oc-badge path { stroke-dashoffset:0; }
}
/* ---- Relay picker inline (dans le panier) ---- */
.relay-pick { margin-top:.9rem; padding:.85rem .95rem; border-radius:12px; background:rgba(176,141,87,.06); box-shadow:inset 0 0 0 1px #DFD9CC; }
.relay-pick-prompt { font-size:.83rem; color:#5A5F6B; margin-bottom:.65rem; line-height:1.5; }
.btn-relay-choose { display:inline-flex; align-items:center; gap:.45rem; font-size:.84rem; font-weight:600; color:#1E3A5F; background:none; border:none; padding:0; cursor:pointer; border-radius:4px; transition:opacity .2s; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#B08D57; }
.btn-relay-choose:hover { opacity:.7; }
.btn-relay-choose:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(201,162,75,.5); }
.btn-relay-choose svg { width:14px; height:14px; flex:none; }
.relay-chosen { display:flex; align-items:flex-start; gap:.6rem; }
.relay-chosen-info { flex:1; min-width:0; }
.relay-chosen-name { font-size:.88rem; font-weight:600; color:#1A1D23; }
.relay-chosen-addr { font-size:.8rem; color:#5A5F6B; margin-top:.15rem; line-height:1.4; }
.btn-relay-change { flex:none; font-size:.76rem; color:#B08D57; background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; border-radius:3px; transition:opacity .2s; white-space:nowrap; margin-top:.12rem; }
.btn-relay-change:hover { opacity:.7; }
.btn-relay-change:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(201,162,75,.5); }
/* ---- Modal Mondial Relay ---- */
.relay-modal { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
padding:1rem; visibility:hidden; transition:visibility 0s linear .3s; }
@media (min-width:640px){ .relay-modal { padding:1.5rem; } }
.relay-modal.open { visibility:visible; transition:visibility 0s linear 0s; }
.relay-modal-backdrop { position:absolute; inset:0; background:rgba(14,32,56,.6); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
opacity:0; transition:opacity .3s var(--ease); }
.relay-modal.open .relay-modal-backdrop { opacity:1; }
.relay-modal-wrap { position:relative; width:fit-content; max-width:min(960px,100%);
transform:translateY(24px); opacity:0; transition:transform .35s var(--ease), opacity .25s var(--ease); }
@media (min-width:640px){ .relay-modal-wrap { transform:translateY(12px) scale(.98); } }
.relay-modal.open .relay-modal-wrap { transform:none; opacity:1; }
.relay-modal-frame { border-radius:20px; overflow:hidden; background:#fff;
box-shadow:0 -4px 48px -8px rgba(14,32,56,.22), 0 0 0 1px rgba(14,32,56,.07);
max-height:calc(100dvh - 3rem); }
/* Picker point relais (Boxtal) */
.relay-picker { display:flex; flex-direction:column; width:min(880px, 92vw); max-height:calc(100dvh - 3rem); }
.relay-picker-head { padding:1.4rem 1.5rem 1.1rem; border-bottom:1px solid #EDE8DD; }
.relay-picker-eyebrow { font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#B08D57; }
.relay-picker-title { font-size:1.15rem; font-weight:600; color:#1A1D23; margin:.2rem 0 .9rem; line-height:1.25; }
.relay-search { display:flex; gap:.5rem; }
.relay-search-input { flex:1; min-width:0; font-size:.9rem; color:#1A1D23; padding:.6rem .8rem; border-radius:10px; border:none; background:#fff;
box-shadow:inset 0 0 0 1px #DFD9CC; transition:box-shadow .2s; }
.relay-search-input::placeholder { color:#9A9384; }
.relay-search-input:focus-visible { outline:none; box-shadow:inset 0 0 0 1.5px #B08D57, 0 0 0 3px rgba(201,162,75,.18); }
.relay-search-btn { flex:none; font-size:.85rem; font-weight:600; color:#fff; background:#1E3A5F; border:none; border-radius:10px; padding:.6rem 1.05rem; cursor:pointer;
transition:background .2s, transform .15s; }
.relay-search-btn:hover { background:#162B47; }
.relay-search-btn:active { transform:translateY(1px); }
.relay-search-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.5); }
.relay-picker-body { display:grid; grid-template-columns:minmax(0,340px) 1fr; min-height:0; flex:1; }
.relay-list { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:.5rem; display:flex; flex-direction:column; gap:.3rem; border-right:1px solid #EDE8DD; }
.relay-list-msg { font-size:.84rem; color:#5A5F6B; line-height:1.5; padding:1.1rem .9rem; text-align:center; }
.relay-card { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; background:none; border:none; cursor:pointer;
padding:.7rem .75rem; border-radius:10px; box-shadow:inset 0 0 0 1px transparent; transition:background .15s, box-shadow .15s; }
.relay-card:hover, .relay-card.is-hover { background:rgba(176,141,87,.08); }
.relay-card:focus-visible { outline:none; box-shadow:inset 0 0 0 1.5px #B08D57; }
.relay-card.is-selected { background:rgba(176,141,87,.1); box-shadow:inset 0 0 0 1px #B08D57; }
.relay-card-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.12rem; }
.relay-card-name { font-size:.86rem; font-weight:600; color:#1A1D23; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.relay-card-addr { font-size:.76rem; color:#5A5F6B; line-height:1.35; }
.relay-card-dist { flex:none; font-size:.7rem; font-weight:700; color:#B08D57; white-space:nowrap; }
.relay-map { min-height:320px; background:#EDE8DD; }
.relay-map .leaflet-container { height:100%; width:100%; font:inherit; }
@media (max-width:639px){
.relay-picker { width:92vw; }
.relay-picker-body { grid-template-columns:1fr; }
.relay-map { display:none; }
.relay-list { border-right:none; max-height:calc(100dvh - 13rem); }
}
.relay-modal-close { position:absolute; top:10px; right:10px; z-index:10; width:40px; height:40px; border-radius:50%;
display:grid; place-items:center; border:none; cursor:pointer;
color:#1A1D23; background:rgba(255,255,255,.9); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
box-shadow:0 2px 8px rgba(14,32,56,.14), inset 0 0 0 1px rgba(14,32,56,.1);
transition:background .2s, transform .2s, box-shadow .2s; }
@media (hover:hover){ .relay-modal-close:hover { background:#fff; box-shadow:0 2px 12px rgba(14,32,56,.2), inset 0 0 0 1px #B8B09E; } }
.relay-modal-close:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.5); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior:auto; }
.cart-toggle.is-bump .cart-badge { animation:none !important; }
.reveal { opacity:1 !important; transform:none !important; }
.starfield, .deco-star, .node-center .dot::before, .node-center .dot::after, .footer-dawn-star, .footer-dawn-glow { animation:none !important; opacity:.09 !important; }
.spark { display:none !important; }
* { transition:none !important; }
}
/* ---- SEO-1 : page statique d'un livre (/livres/, tools/build-books.mjs) ----
Le livre exposé sous le ciel de nuit de l'accueil (halo doré), puis l'extrait sur ivoire. */
.lv-wrap { max-width:72rem; margin-inline:auto; padding-inline:1.5rem; }
.lv-hero { overflow:hidden; padding-bottom:4.5rem; }
.lv-top { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem; height:72px; }
.lv-brand { display:inline-flex; align-items:center; gap:.6rem; color:#FBFAF7; border-radius:8px; }
.lv-brand .nav-wordmark { font-family:'Cormorant',serif; font-weight:600; line-height:1; letter-spacing:.01em; white-space:nowrap; }
.lv-logo-star { height:1.75rem; width:auto; transition:transform .5s var(--spring); }
.lv-brand:hover .lv-logo-star { transform:rotate(22.5deg); }
.lv-brand:focus-visible, .lv-back:focus-visible, .lv-crumbs a:focus-visible, .lv-link:focus-visible, .lv-mail:focus-visible { outline:2px solid rgba(201,162,75,.7); outline-offset:4px; }
.lv-back { display:inline-flex; align-items:center; gap:.4rem; font-size:.86rem; font-weight:600; color:rgba(251,250,247,.78); border-radius:999px; transition:color .2s var(--ease), transform .25s var(--spring); }
.lv-back:hover { color:#C9A24B; transform:translateX(-2px); }
.lv-back:active { transform:translateX(-1px) scale(.98); }
.lv-grid { position:relative; z-index:2; display:grid; gap:2.75rem; padding-top:1.5rem; align-items:center; }
@media (min-width:900px){ .lv-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:4.5rem; padding-top:3rem; } }
.lv-cover { position:relative; display:grid; place-items:center; padding:2rem 0 1.5rem; isolation:isolate; }
.lv-cover::before { content:""; position:absolute; z-index:-1; width:min(120%, 520px); aspect-ratio:1; border-radius:50%;
background:radial-gradient(closest-side, rgba(201,162,75,.30), rgba(201,162,75,.10) 55%, transparent 78%),
radial-gradient(closest-side, rgba(80,130,190,.14), transparent 90%); }
.lv-cover .bk { box-shadow:0 2px 4px rgba(4,10,20,.3), 0 28px 50px -18px rgba(4,10,20,.8), 0 0 70px -20px rgba(201,162,75,.5); }
.lv-cover .bk img { width:auto; height:auto; max-width:min(62vw, 300px); max-height:52vh; }
@media (min-width:900px){ .lv-cover .bk img { max-width:340px; max-height:min(64vh, 460px); } }
.lv-cover .fiche-book::after { background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%, transparent); }
.lv-crumbs ol { display:flex; flex-wrap:wrap; gap:.35rem; font-size:.8rem; color:rgba(251,250,247,.55); }
.lv-crumbs li + li::before { content:"/"; margin-right:.35rem; color:rgba(251,250,247,.3); }
.lv-crumbs a { color:rgba(251,250,247,.7); transition:color .2s var(--ease); border-radius:4px; }
.lv-crumbs a:hover { color:#C9A24B; }
.lv-crumbs [aria-current] { color:rgba(251,250,247,.9); }
.lv-eyebrow { color:#C9A24B; margin-top:1.75rem; }
.lv-title { font-size:clamp(2.1rem, 6vw, 3.4rem); font-weight:500; line-height:1.05; letter-spacing:-0.03em; color:#FBFAF7; margin-top:.75rem; text-wrap:balance; }
.lv-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-top:1.1rem; font-size:.95rem; color:rgba(234,231,223,.75); }
.lv-meta .bk-dot { width:3px; height:3px; border-radius:50%; background:rgba(234,231,223,.35); }
.lv-price { color:#E2C47E; font-weight:700; font-size:1.1rem; }
.lv-blurb { margin-top:1.5rem; max-width:52ch; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:1.18rem; line-height:1.6; color:#EAE7DF; }
.lv-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; margin-top:2.25rem; }
.lv-link { position:relative; font-weight:600; color:#EAE7DF; border-radius:4px; }
.lv-link::after { content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%; background:#C9A24B; opacity:.55; transition:opacity .25s var(--ease); }
.lv-link:hover::after, .lv-link:focus-visible::after { opacity:1; }
.lv-link:active { opacity:.8; }
.lv-out { width:100%; font-size:.9rem; font-weight:600; color:#E2C47E; }
.lv-section { padding-block:4.5rem; }
@media (min-width:900px){ .lv-section { padding-block:6rem; } }
.lv-section + .lv-section { padding-top:0; } /* deux sections ivoire à la suite (livre sans extrait) */
.lv-prose { max-width:62ch; margin-inline:auto; }
.lv-h2 { font-size:clamp(1.7rem, 4vw, 2.3rem); font-weight:500; letter-spacing:-0.03em; margin-top:.6rem; }
.lv-desc { margin-top:1.5rem; color:#3a3e48; }
.lv-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(6rem, 1fr)); gap:1px; margin-top:2.5rem; background:#E7E3D9;
border:1px solid #E7E3D9; border-radius:14px; overflow:hidden; }
.lv-facts > div { background:#FFFFFF; padding:1rem 1.15rem; }
.lv-facts dt { font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#7A5F2A; }
.lv-facts dd { margin-top:.25rem; font-weight:600; color:#1A1D23; }
.lv-others { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2.25rem 1.25rem; margin-top:2.5rem; }
@media (min-width:640px){ .lv-others { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.lv-other { display:flex; flex-direction:column; height:100%; border-radius:10px; }
.lv-other:focus-visible { outline:2px solid rgba(201,162,75,.7); outline-offset:6px; }
.lv-other-cover { display:grid; place-items:end center; aspect-ratio:4/5; padding:1.1rem; border-radius:10px; container-type:size;
background:radial-gradient(55% 50% at 50% 50%, rgba(201,162,75,.18), transparent 75%), linear-gradient(180deg,#F7F2E7,#EDE5D3); }
.lv-other-cover .bk { box-shadow:0 2px 4px rgba(14,32,56,.14), 0 16px 26px -12px rgba(14,32,56,.45); transition:transform .45s var(--spring); }
.lv-other-cover .bk img { width:auto; height:auto; max-width:80cqw; max-height:84cqh; } /* cq : le parent se dimensionne sur l'image */
.lv-other:hover .bk, .lv-other:focus-visible .bk { transform:translateY(-5px); }
.lv-other:active .bk { transform:translateY(-2px) scale(.99); }
.lv-other-title { margin-top:.85rem; font-family:'Fraunces',Georgia,serif; font-size:1rem; font-weight:500; line-height:1.3; color:#1A1D23; }
.lv-other-price { margin-top:auto; padding-top:.35rem; font-size:.9rem; font-weight:700; color:#7A5F2A; }
.lv-foot { background:#0E2038; color:rgba(251,250,247,.5); font-size:.875rem; }
.lv-foot-in { display:flex; flex-direction:column; gap:1rem; padding-block:2.5rem calc(2.5rem + env(safe-area-inset-bottom)); }
@media (min-width:768px){ .lv-foot-in { flex-direction:row; align-items:center; justify-content:space-between; } }
.lv-mail { color:rgba(251,250,247,.7); transition:color .2s var(--ease); border-radius:4px; }
.lv-mail:hover { color:#C9A24B; }
@media (prefers-reduced-motion: reduce){ .lv-logo-star, .lv-other-cover .bk, .lv-back { transition:none; } }
/* ---- UX-1 : pages livres — panier, réassurance, partage, série, liseuse, barre mobile, newsletter ---- */
html.lv-lock { overflow:hidden; }
.lv-top-r { display:flex; align-items:center; gap:.9rem; }
.lv-back { white-space:nowrap; }
.lv-back-s { display:none; }
@media (max-width:420px){ .lv-top-r { gap:.4rem; } .lv-back-l { display:none; } .lv-back-s { display:inline; } }
.lv-cart { color:#FBFAF7; }
.lv-actions .btn-add.is-in { color:#EAE7DF; }
.lv-actions .btn-add.is-in svg { color:#C9A24B; }
@media (hover:hover){ .lv-actions .btn-add.is-in:hover { color:#FBFAF7; } }
/* Page livre, mobile : achat pleine largeur, « Lire un extrait » centré dessous */
@media (max-width:639px){
.lv-actions[data-lv-cta] { flex-direction:column; align-items:stretch; gap:.4rem; }
.lv-actions[data-lv-cta] > .btn { width:100%; justify-content:center; }
.lv-actions[data-lv-cta] > .btn.btn-add.is-in { align-self:center; width:auto; }
.lv-actions[data-lv-cta] > .lv-link { align-self:center; padding:.7rem .25rem; }
.lv-actions[data-lv-cta] > .lv-link::after { bottom:.55rem; }
.lv-share { justify-content:center; }
.lv-share > span { flex-basis:100%; text-align:center; margin:0 0 .15rem; }
}
.lv-reassure { display:grid; gap:.45rem; margin-top:1.75rem; font-size:.88rem; color:rgba(234,231,223,.72); }
.lv-reassure li { display:flex; align-items:center; gap:.55rem; }
.lv-reassure svg { width:15px; height:15px; flex:none; color:#C9A24B; }
.lv-share { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:1.75rem; padding-top:1.4rem; border-top:1px solid rgba(251,250,247,.1);
font-size:.82rem; color:rgba(234,231,223,.55); }
.lv-share > span { margin-right:.2rem; letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; font-weight:600; }
.lv-share-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; border-radius:999px; font-weight:600; color:#EAE7DF;
box-shadow:inset 0 0 0 1px rgba(251,250,247,.2); transition:transform .25s var(--spring), box-shadow .2s var(--ease), color .2s var(--ease); }
.lv-share-btn svg { width:16px; height:16px; }
.lv-share-btn:hover { color:#FBFAF7; box-shadow:inset 0 0 0 1px rgba(201,162,75,.7); transform:translateY(-1px); }
.lv-share-btn:active { transform:scale(.97); }
.lv-share-btn:focus-visible { outline:2px solid rgba(201,162,75,.7); outline-offset:3px; }
/* Série : bandeau entre le ciel et la page */
.lv-series { background:#FBFAF7; border-bottom:1px solid #E7E3D9; }
.lv-series-in { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; min-height:76px; padding-block:.9rem; }
.lv-series-pos { grid-column:2; text-align:center; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#7A5F2A; }
.lv-series-link { display:inline-flex; align-items:center; gap:.65rem; max-width:20rem; font-family:'Fraunces',Georgia,serif; font-size:.98rem; line-height:1.3; color:#1A1D23;
border-radius:8px; transition:color .2s var(--ease), transform .25s var(--spring); }
.lv-series-link small { display:block; font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#8A7A5E; }
.lv-series-link svg { flex:none; color:#B08D57; }
.lv-series-link.is-next { justify-self:end; text-align:right; }
.lv-series-link:hover { color:#1E3A5F; }
.lv-series-link.is-prev:hover { transform:translateX(-2px); }
.lv-series-link.is-next:hover { transform:translateX(2px); }
.lv-series-link:active { opacity:.8; }
.lv-series-link:focus-visible { outline:2px solid rgba(201,162,75,.7); outline-offset:4px; }
@media (max-width:640px){
.lv-series-in { grid-template-columns:1fr 1fr; gap:.6rem 1rem; }
.lv-series-pos { grid-column:1 / -1; grid-row:1; }
.lv-series-link { font-size:.9rem; }
}
/* ---- CAT-1 : catalogue /livres — en-tête nuit compact, puis une étagère par série ---- */
.lv-cat-hero { padding-bottom:3.5rem; }
@media (min-width:900px){ .lv-cat-hero { padding-bottom:5rem; } }
.lv-cat-head { position:relative; z-index:2; padding-top:1.5rem; }
@media (min-width:900px){ .lv-cat-head { padding-top:3rem; } }
.lv-nowrap { white-space:nowrap; }
.lv-cat-lede { margin-top:1.25rem; max-width:56ch; font-size:1.05rem; line-height:1.7; color:rgba(234,231,223,.78); }
.lv-cat { padding-block:4rem 5rem; }
@media (min-width:900px){ .lv-cat { padding-block:5.5rem 7rem; } }
.lv-cat-group + .lv-cat-group { margin-top:4rem; padding-top:4rem; border-top:1px solid #E7E3D9; }
@media (min-width:900px){ .lv-cat-group + .lv-cat-group { margin-top:5rem; padding-top:5rem; } }
.lv-cat-group-head { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:1.25rem; }
.lv-cat-group-head .eyebrow { flex-basis:100%; }
.lv-cat-note { font-size:.92rem; color:#5A5F6B; }
.lv-other-tag { margin-top:.85rem; font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8A7A5E; }
.lv-other-tag + .lv-other-title { margin-top:.2rem; }
.lv-more-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; }
/* Bouton fermer des plein écrans (liseuse, visionneuse) */
.lv-reader-x { display:grid; place-items:center; width:42px; height:42px; border-radius:999px; color:#1A1D23; transition:transform .25s var(--spring), background-color .2s var(--ease); }
.lv-reader-x svg { width:22px; height:22px; }
.lv-reader-x:hover { background:rgba(30,58,95,.06); }
.lv-reader-x:active { transform:scale(.94); }
.lv-reader-x:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.5); }
/* Barre d'achat mobile */
.lv-buybar { display:none; }
@media (max-width:899px){
.lv-buybar { position:fixed; z-index:55; left:.75rem; right:.75rem; bottom:calc(.75rem + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:.9rem;
padding:.6rem .6rem .6rem 1.1rem; border-radius:999px; background:rgba(251,250,247,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -14px rgba(14,32,56,.45), 0 0 0 1px rgba(122,95,42,.12);
transform:translateY(140%); opacity:0; transition:transform .45s var(--spring), opacity .3s var(--ease); }
.lv-buybar[hidden] { display:none; }
.lv-buybar.is-on { transform:none; opacity:1; }
.lv-buybar-txt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.lv-buybar-title { font-family:'Fraunces',Georgia,serif; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-buybar-price { font-size:.85rem; font-weight:700; color:#7A5F2A; }
.lv-buybar .btn { padding:.75rem 1.15rem; font-size:.9rem; }
}
/* Newsletter compacte */
/* Newsletter = haut du pied de page (même fond nuit que l'accueil), séparée par un filet */
.lv-news { color:#EAE7DF; }
.lv-news-in { display:grid; gap:1.25rem; padding-block:3.5rem 3rem; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); }
@media (min-width:900px){ .lv-news-in { grid-template-columns:1fr minmax(0, 30rem); gap:3rem; } }
.lv-news h2 { font-size:clamp(1.5rem, 3.4vw, 1.9rem); font-weight:500; letter-spacing:-0.03em; color:#FBFAF7; }
.lv-news p { margin-top:.35rem; font-size:.95rem; color:rgba(234,231,223,.7); }
.lv-news-form { display:flex; flex-direction:column; gap:.6rem; }
@media (min-width:560px){ .lv-news-form { flex-direction:row; } }
.lv-news-form input[type=email] { flex:1; min-width:0; border-radius:999px; padding:.85rem 1.25rem; color:#FBFAF7; background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.lv-news-form input[type=email]::placeholder { color:rgba(251,250,247,.45); }
.lv-news-form input[type=email]:focus { outline:none; border-color:#C9A24B; box-shadow:0 0 0 3px rgba(201,162,75,.25); }
.lv-news-form .btn { justify-content:center; }
.lv-news-msg { grid-column:1 / -1; font-weight:600; }
.lv-news-msg.is-ok { color:#E2C47E; }
.lv-news-msg.is-err { color:#F2B8A8; }
.lv-news-in > .lv-news-msg { margin-top:0; }
/* ---- UX-2 : pages livres — galerie (4e de couv., pages intérieures), visionneuse, avis, 404 ---- */
.lv-cover { grid-template-rows:auto auto; }
.lv-zoomable { cursor:zoom-in; border-radius:2px; transition:transform .45s var(--spring); }
.lv-zoomable:hover { transform:translateY(-4px); }
.lv-zoomable:active { transform:translateY(-1px) scale(.995); }
.lv-zoomable:focus-visible { outline:2px solid rgba(201,162,75,.7); outline-offset:8px; }
.lv-thumbs { display:flex; justify-content:center; gap:.55rem; margin-top:2.25rem; }
@media (min-width:900px){ .lv-thumbs { gap:.65rem; margin-top:2.6rem; } }
.lv-thumb { position:relative; display:block; width:42px; aspect-ratio:2/3; border-radius:4px; overflow:hidden; cursor:zoom-in; background:rgba(8,18,34,.5);
box-shadow:0 0 0 1px rgba(251,250,247,.16), 0 8px 16px -8px rgba(4,10,20,.8); transition:transform .3s var(--spring), box-shadow .2s var(--ease); }
@media (min-width:900px){ .lv-thumb { width:54px; } }
.lv-thumb img { width:100%; height:100%; object-fit:cover; }
.lv-thumb:hover { transform:translateY(-3px); box-shadow:0 0 0 1.5px #C9A24B, 0 12px 20px -8px rgba(4,10,20,.85); }
.lv-thumb:active { transform:translateY(-1px) scale(.97); }
.lv-thumb:focus-visible { outline:2px solid rgba(201,162,75,.8); outline-offset:3px; }
.lv-thumb-more { position:absolute; inset:0; display:grid; place-items:center; background:rgba(14,32,56,.72); color:#FBFAF7; font-size:.85rem; font-weight:700; }
/* Visionneuse plein écran (