/* ============================================================
   LYRA DE LA LYRE · version mobile app-like (index-mobile.html)
   Chassis : appbar + tabbar + rails scroll-snap + modales.
   DA : void #0A0A0F, or #C9A96E, Gambetta (titres),
   Switzer (corps). Un seul fichier, sert aussi au tunnel.
   ============================================================ */

/* ── 1. TOKENS (copie exacte du :root desktop + chrome mobile) ── */
:root {
    --void: #0A0A0F; --gold: #C9A96E; --gold-light: #E8D5A3;
    --gold-dim: #A08850; --moon: #F0EDE8; --moon-dim: rgba(240,237,232,.70);
    --font-title: 'Gambetta', Georgia, serif; --font-body: 'Switzer', system-ui, sans-serif;
    --appbar-h: 56px; --tabbar-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px);
    --rule: rgba(201,169,110,.14);
    --gutter: clamp(1.1rem, 5vw, 1.6rem);
}

/* Reserve aux lecteurs d'ecran : complete le nom accessible d'un bouton sans s'afficher.
   WCAG 2.5.3 « Label in Name » exige que le nom accessible contienne le texte visible,
   ce qu'un aria-label posé par-dessus le contenu ne respectait pas. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── 2. RESET / BASE ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-padding-top: calc(var(--appbar-h) + 8px); }
body {
    background: var(--void); color: var(--moon);
    font-family: var(--font-body); font-weight: 300; letter-spacing: .03em; line-height: 1.75;
    overflow-x: hidden; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;
}
.wrap { width: 100%; max-width: 640px; margin: 0 auto; position: relative; }
.pad { padding-left: var(--gutter); padding-right: var(--gutter); }
section { padding: 4rem 0; position: relative; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--gold); color: var(--void); font-weight: 600; font-size: .85rem; padding: .85rem 1.2rem; }
.skip-link:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    #earth-canvas { display: none !important; }
}

/* Fonds de section (tonalites simplifiees du desktop) */
.tone-purple { background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(74,26,107,.16) 0%, transparent 60%) var(--void); }
.tone-gold { background: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(201,169,110,.06) 0%, transparent 60%) var(--void); }
.sec-nebula { background: radial-gradient(ellipse 90% 70% at 20% 20%, rgba(74,26,107,.18) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 85% 80%, rgba(201,169,110,.05) 0%, transparent 55%) var(--void); }
.h-divider { width: min(72%, 340px); height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--rule), transparent); }

/* ── 3. ENTREE #mEntry (styles complets · le critique inline pose le squelette) ── */
#mEntry { position: fixed; inset: 0; z-index: 200; background: var(--void); }
#mEntry.done { opacity: 0; pointer-events: none; }
.mEntry-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mEntry-brand { position: absolute; left: 0; right: 0; bottom: max(10vh, calc(var(--safe-b) + 8vh)); text-align: center; }
.mEntry-word { font-family: var(--font-title); color: var(--gold); font-size: 1.4rem; letter-spacing: .12em; }
.mEntry-line { display: block; width: 168px; height: 1px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: scaleX(0); animation: mline 1.5s cubic-bezier(.16,1,.3,1) .25s forwards; }
@keyframes mline { to { transform: scaleX(1); } }

/* ── 4. APP BAR ── */
.appbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 70;
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    min-height: var(--appbar-h);
    padding: .45rem var(--gutter); padding-top: calc(.45rem + env(safe-area-inset-top, 0px));
    background: rgba(10,10,15,.93); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-115%); visibility: hidden;
    transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s .35s;
}
.appbar.show { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s 0s; }
.appbar__brand { font-family: var(--font-title); font-size: 1.02rem; color: var(--gold); letter-spacing: .06em; padding: .4rem 0; }
.appbar__cta { min-height: 42px; display: inline-flex; align-items: center; padding: 0 1.15rem; background: var(--gold); color: var(--void); font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.appbar__cta:active { background: var(--gold-light); }
.appbar__cta .cta-badge { display: none; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 7px; background: var(--void); color: var(--gold); font-size: .6rem; font-weight: 700; line-height: 16px; text-align: center; border-radius: 8px; }

/* ── 5. TAB BAR ── */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; gap: .3rem;
    min-height: var(--tabbar-h);
    padding: .3rem .45rem calc(.3rem + var(--safe-b));
    background: rgba(10,10,15,.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-top: 1px solid var(--rule);
}
.tab-ind { position: absolute; top: 5px; left: 0; height: 2px; width: 26px; background: var(--gold); opacity: 0; transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .3s; pointer-events: none; }
.tab {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .24rem; min-height: 48px; padding: .35rem 0;
    color: var(--moon-dim); font-size: .62rem; font-weight: 400; letter-spacing: .04em;
    transition: color .2s ease, transform .14s ease;
}
.tab span { white-space: nowrap; }
.tab svg { width: 21px; height: 21px; stroke: var(--gold-dim); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease; }
.tab:active { transform: scale(.9); }
.tab[aria-current="true"] { color: var(--gold); }
.tab[aria-current="true"] svg { stroke: var(--gold); }
.tab--cta { color: var(--gold); position: relative; }
.tab--cta svg { stroke: var(--gold); }
.tab-badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 15px; height: 15px; padding: 0 3px; display: none; background: var(--gold); color: var(--void); font-family: var(--font-body); font-size: .58rem; font-weight: 700; line-height: 15px; text-align: center; border-radius: 8px; box-shadow: 0 0 0 2px var(--void); }

/* ── 6. HERO (planete 3D + fallback statique) ── */
#hero { height: 100svh; min-height: 560px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hero-fallback {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 90% 60% at 18% 42%, rgba(74,26,107,.30) 0%, transparent 58%),
        radial-gradient(ellipse 75% 80% at 85% 30%, rgba(20,5,50,.38) 0%, transparent 58%),
        radial-gradient(circle 46vw at 50% 88%, rgba(38,64,130,.5) 0%, rgba(16,24,52,.55) 55%, transparent 72%),
        var(--void);
}
/* Etoiles du fallback : zero asset, un seul pseudo-element en box-shadow */
.hero-fallback::after {
    content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%;
    background: transparent;
    box-shadow:
        4vw 12vh 0 0 rgba(240,237,232,.8), 12vw 30vh 0 -1px rgba(240,237,232,.5),
        20vw 8vh 0 0 rgba(240,237,232,.65), 26vw 44vh 0 -1px rgba(240,237,232,.4),
        33vw 18vh 0 0 rgba(232,213,163,.8), 41vw 6vh 0 -1px rgba(240,237,232,.55),
        47vw 27vh 0 0 rgba(240,237,232,.7), 55vw 15vh 0 -1px rgba(240,237,232,.45),
        62vw 38vh 0 0 rgba(240,237,232,.6), 69vw 9vh 0 0 rgba(201,169,110,.75),
        76vw 24vh 0 -1px rgba(240,237,232,.5), 83vw 40vh 0 0 rgba(240,237,232,.65),
        90vw 13vh 0 -1px rgba(240,237,232,.45), 95vw 31vh 0 0 rgba(240,237,232,.7),
        9vw 55vh 0 -1px rgba(240,237,232,.4), 88vw 52vh 0 -1px rgba(232,213,163,.5),
        17vw 66vh 0 0 rgba(240,237,232,.35), 72vw 61vh 0 -1px rgba(240,237,232,.3);
}
#earth-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s ease; touch-action: pan-y; }
#earth-canvas.earth-on { opacity: 1; }
.hero-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 70% 26% at 50% 12%, rgba(10,10,15,.78) 0%, transparent 100%), radial-gradient(ellipse 85% 32% at 50% 94%, rgba(10,10,15,.85) 0%, transparent 100%); }
.hero-window { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: calc(1.6rem + env(safe-area-inset-top, 0px)) var(--gutter) 1.4rem; pointer-events: none; }
.hero-window a, .hero-window button { pointer-events: auto; }
.hero-top { text-align: center; padding-top: 4vh; }
.hero-eyebrow { font-size: .72rem; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: inline-flex; align-items: baseline; gap: .8em; }
/* Un seul texte = une seule police, une seule couleur : le prefixe herite de tout. */
.hero-eyebrow-prefix { font-family: inherit; font-style: normal; text-transform: inherit; letter-spacing: inherit; }
.hero-title { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.85rem, 8.6vw, 2.6rem); line-height: 1.18; color: var(--moon); }
/* Exception DA unique, heritee du desktop : le span or du H1 */
.hero-title-gold { color: inherit; }
.hero-bottom { display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.hero-cta { margin-bottom: .4rem; }
.tome-pin {
    display: flex; align-items: center; gap: .85rem; width: 100%; max-width: 340px;
    min-height: 54px; padding: .55rem 1rem;
    background: rgba(10,10,15,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(201,169,110,.28); text-align: left;
    transition: border-color .3s, background .3s, transform .15s ease;
}
.tome-pin:active { transform: scale(.98); border-color: var(--gold); }
.pin-num { font-family: var(--font-title); font-size: 1.05rem; color: var(--gold); flex-shrink: 0; }
.pin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.pin-name { font-size: .82rem; color: var(--moon); letter-spacing: .05em; }
.pin-sub { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); }
.pin-video-badge { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; }
.hero-ready .pin-video-badge { animation: pinPulse 2.4s ease-in-out infinite; }
@keyframes pinPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,110,.35); } 50% { box-shadow: 0 0 0 8px rgba(201,169,110,0); } }
.hero-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: .5rem; padding: .4rem .9rem; font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--moon-dim); }
.hero-scroll svg { stroke: var(--gold); }
.hero-ready .hero-scroll svg { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ── 7. RYTHME DES SECTIONS ── */
.sec-head { text-align: center; margin-bottom: 2.1rem; padding: 0 var(--gutter); }
.sec-tag { display: block; font-size: .62rem; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); margin-bottom: .85rem; }
.sec-title { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.7rem, 7.6vw, 2.35rem); line-height: 1.2; color: var(--moon); }
.sec-sub { margin-top: 1rem; font-size: .85rem; color: var(--moon-dim); line-height: 1.9; }
.body-txt { font-size: .92rem; line-height: 2; color: var(--moon-dim); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 2.1rem; font-size: .62rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s, transform .15s ease; }
.btn:active { transform: scale(.97); }
.btn-gold { background: var(--gold); color: var(--void); border: 1px solid var(--gold); }
.btn-gold:active { background: var(--gold-light); }
.btn-outline { background: transparent; color: var(--gold); border: 1px solid rgba(201,169,110,.5); }
.btn-outline:active { border-color: var(--gold); }

/* Intro (citation) */
.intro-wrap { max-width: 560px; margin: 0 auto; text-align: center; padding: 0 var(--gutter); }
.v-line { width: 1px; height: 52px; margin: 0 auto; background: linear-gradient(var(--gold), transparent); }
.v-line-top { background: linear-gradient(transparent, var(--gold)); margin-bottom: 2rem; }
.v-line-bottom { margin-top: 2rem; }
.quote { font-family: var(--font-title); font-size: clamp(1.15rem, 5.4vw, 1.5rem); line-height: 1.75; color: var(--moon); }
.quote em { color: inherit; font-style: normal; }
.quote-by { margin-top: 1.5rem; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dim); }

/* Pour qui */
.pourqui-grid { display: grid; gap: .8rem; max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.pourqui-item { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.15rem; border: 1px solid var(--rule); background: rgba(201,169,110,.03); }
.pourqui-icon { color: var(--gold); font-size: 1rem; flex-shrink: 0; line-height: 1.7; }
.pourqui-text { font-size: .88rem; line-height: 1.85; color: var(--moon-dim); }

/* ── 8. RAILS scroll-snap (.trail tomes · .brail blog · .igrail instagram) ── */
.trail, .brail, .igrail {
    display: flex; gap: .9rem; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: .3rem var(--gutter) .9rem; scrollbar-width: none;
}
.trail::-webkit-scrollbar, .brail::-webkit-scrollbar, .igrail::-webkit-scrollbar { display: none; }
.rail-count { text-align: center; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dim); padding-top: .2rem; }

/* ── 9. CARTES ── */
/* Tomes */
.tcard { flex: 0 0 80vw; max-width: 330px; scroll-snap-align: center; position: relative; display: flex; flex-direction: column; background: rgba(240,237,232,.02); border: 1px solid var(--rule); }
.tome-stamp { position: absolute; top: .8rem; left: .8rem; z-index: 3; font-size: .54rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; padding: .38rem .7rem; background: var(--gold); color: var(--void); }
.tome-stamp-out { background: rgba(10,10,15,.85); color: var(--gold); border: 1px solid rgba(201,169,110,.5); }
.tcard-cover { position: relative; aspect-ratio: 696 / 1000; overflow: hidden; background: #06060b; border: 0; padding: 0; display: block; width: 100%; }
.tcard-cover img { width: 100%; height: 100%; object-fit: cover; }
.tcard-cover[data-lb]::after {
    content: ''; position: absolute; right: .65rem; bottom: .65rem; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(10,10,15,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/14px no-repeat;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.tome-num-badge { position: absolute; right: .7rem; top: .7rem; z-index: 2; font-family: var(--font-title); font-size: .95rem; color: var(--gold); background: rgba(10,10,15,.7); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(201,169,110,.35); border-radius: 50%; }
.tcard-body { padding: 1.15rem 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.tome-lbl { font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.tome-name { font-family: var(--font-title); font-weight: 400; font-size: 1.14rem; line-height: 1.3; color: var(--moon); }
.tome-desc { font-size: .8rem; line-height: 1.8; color: var(--moon-dim); flex: 1; }
.tome-foot { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; margin-top: .4rem; }
.tome-foot .btn { width: 100%; min-height: 48px; font-size: .58rem; }
.tome-price { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); }
/* Placeholders Tomes III / IV */
.tcard-ph { aspect-ratio: 696 / 1000; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(74,26,107,.22) 0%, transparent 65%), #07070d; }
.ph-ornament { font-size: .7rem; color: var(--gold-dim); letter-spacing: .5em; margin-bottom: 1.1rem; }
.ph-roman { font-family: var(--font-title); font-size: 3rem; color: var(--gold); line-height: 1; }
.ph-divider { width: 42px; height: 1px; background: var(--gold-dim); margin: 1.1rem auto; }
.ph-title { font-family: var(--font-title); font-size: 1.05rem; line-height: 1.4; color: var(--moon); }
.ph-sub { margin-top: .6rem; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dim); }
/* Reassurance */
.reassurance { max-width: 560px; margin: 2rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1.6rem; padding: 1.6rem var(--gutter) 0; border-top: 1px solid rgba(201,169,110,.08); }
.reassurance-item { display: flex; align-items: center; gap: .55rem; font-size: .64rem; letter-spacing: .08em; color: var(--moon-dim); }
.reassurance-icon { color: var(--gold); font-size: .95rem; }
.tomes-note { max-width: 560px; margin: 2rem auto 0; padding: 0 var(--gutter); text-align: center; font-size: .95rem; color: var(--moon-dim); line-height: 1.95; }
/* Blog */
.bcard { flex: 0 0 78vw; max-width: 320px; scroll-snap-align: center; display: block; background: rgba(240,237,232,.02); border: 1px solid var(--rule); }
.bcard-img { aspect-ratio: 16 / 10; overflow: hidden; background: #06060b; }
.bcard-img img { width: 100%; height: 100%; object-fit: cover; }
.bcard-body { padding: 1.05rem 1.05rem 1.25rem; }
.bcard-date { font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: .55rem; }
.bcard-title { font-family: var(--font-title); font-weight: 400; font-size: 1.02rem; line-height: 1.35; color: var(--moon); margin-bottom: .5rem; }
.bcard-txt { font-size: .78rem; line-height: 1.7; color: var(--moon-dim); }
/* Instagram */
.ig-head { text-align: center; margin-bottom: 1.9rem; padding: 0 var(--gutter); }
.ig-handle { display: inline-flex; align-items: center; gap: .55rem; font-size: .66rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; padding: .4rem .2rem; }
.ig-handle svg { width: 18px; height: 18px; fill: currentColor; }
.ig-title { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.7rem, 7.6vw, 2.35rem); line-height: 1.2; color: var(--moon); }
.ig-sub { margin-top: .85rem; font-size: .85rem; color: var(--moon-dim); line-height: 1.8; max-width: 30ch; margin-left: auto; margin-right: auto; }
.ig-btn { flex: 0 0 68vw; max-width: 270px; scroll-snap-align: center; position: relative; overflow: hidden; padding: 0; background: #06060b; border: 1px solid var(--rule); }
.ig-btn img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ig-btn::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.1) 40%, rgba(0,0,0,.55) 100%); }
.ig-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: rgba(10,10,15,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(201,169,110,.55); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ig-play svg { width: 18px; height: 18px; fill: var(--moon); }
.ig-hint { position: absolute; bottom: .8rem; left: 0; right: 0; z-index: 2; text-align: center; font-size: .54rem; letter-spacing: .26em; text-transform: uppercase; color: var(--moon); pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.ig-cta { text-align: center; margin-top: 1.6rem; padding: 0 var(--gutter); }
/* Figures bio + sociales */
.lyra-flow { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 1.25rem; }
.lyra-flow p { font-size: .9rem; line-height: 2; color: var(--moon-dim); text-align: left; }
.lyra-fig { margin: .6rem 0; }
.lyra-fig img { width: 100%; border: 1px solid rgba(201,169,110,.25); }
.lyra-fig figcaption { margin-top: .6rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); text-align: center; }
.lyra-emph { font-family: var(--font-title); font-size: 1.2rem !important; color: var(--gold) !important; text-align: center !important; line-height: 1.6 !important; }
.lyra-quote { border: 1px solid rgba(201,169,110,.2); background: rgba(201,169,110,.03); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.lyra-quote-sign { font-family: var(--font-title); color: var(--gold) !important; text-align: right !important; font-size: 1.05rem !important; }
.lyra-social { display: flex; flex-direction: column; gap: .8rem; max-width: 400px; margin: 2.4rem auto 0; padding: 0 var(--gutter); }
.social-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid rgba(201,169,110,.22); transition: border-color .3s; }
.social-card:active { border-color: var(--gold); }
.social-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; }
.social-txt { flex: 1; min-width: 0; }
.social-kind { display: block; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }
.social-name { display: block; font-size: .8rem; color: var(--moon); }
.social-arrow { color: var(--gold-dim); font-size: 1rem; }
/* Lecteurs */
.lecteurs-grid { display: grid; gap: .9rem; max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.lecteur-msg { border: 1px solid var(--rule); background: rgba(240,237,232,.02); padding: 1.3rem 1.2rem; }
.lecteur-tome { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.lecteur-msg blockquote { font-family: var(--font-title); font-size: .98rem; line-height: 1.85; color: var(--moon); }
.lecteur-sign { text-align: center; margin-top: 1.5rem; font-size: .78rem; font-style: italic; color: var(--gold-dim); }
/* Charte */
.charte-covers { display: flex; flex-direction: column; gap: 1.1rem; align-items: center; max-width: 320px; margin: 0 auto 2.2rem; padding: 0 var(--gutter); }
.charte-covers img { width: 100%; border: 1px solid rgba(201,169,110,.25); }

/* Portrait anime de Lyra : la video se pose au-dessus de l'image, qui reste le filet */
.lyra-portrait-frame { position: relative; overflow: hidden; border: 1px solid rgba(201,169,110,.25); line-height: 0; }
.lyra-portrait-frame img { border: 0; }
.lyra-portrait-vid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.lyra-portrait-frame.is-playing .lyra-portrait-vid { opacity: 1; }
/* Studio : on montre la vraie photo a editer, pas la video posee dessus */
.lyra-editing .lyra-portrait-vid { display: none; }

/* Bandeau video en tete de la section des 4 tomes */
.tomes-bandeau { position: relative; margin: 0 var(--gutter) 1.8rem; overflow: hidden; border: 1px solid rgba(201,169,110,.25); background: #000; }
.tomes-bandeau::before { content: ''; display: block; padding-top: 56.25%; }
.tomes-bandeau video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.charte-body { max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.charte-body > p { font-size: .92rem; line-height: 2; color: var(--moon-dim); }
.charte-body strong { color: inherit; font-weight: 400; }
.charte-list { display: grid; gap: .9rem; margin: 1.7rem 0; }
.charte-item { display: flex; gap: .85rem; align-items: flex-start; }
.charte-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: .62rem; }
.charte-item-text { font-size: .86rem; line-height: 1.85; color: var(--moon-dim); }
/* Projection */
.projection-lead { max-width: 560px; margin: 0 auto 2rem; padding: 0 var(--gutter); text-align: center; display: flex; flex-direction: column; gap: 1.3rem; }
.projection-lead p { font-size: .9rem; line-height: 2; color: var(--moon-dim); }
.projection-lead em { color: inherit; font-style: normal; }
.temoignage { max-width: 560px; margin: 0 auto 2.2rem; border: 1px solid rgba(201,169,110,.18); background: rgba(201,169,110,.03); padding: 1.6rem 1.3rem; text-align: center; }
.temoignage-tag { font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.temoignage-quote { font-family: var(--font-title); font-size: .98rem; line-height: 1.8; color: var(--moon); font-style: italic; }
.steps { display: grid; gap: 1px; background: rgba(201,169,110,.08); max-width: 560px; margin: 0 auto; }
.step { background: var(--void); padding: 1.7rem 1.3rem; text-align: center; }
.step-num { font-family: var(--font-title); font-size: 1.7rem; color: var(--gold); margin-bottom: .7rem; }
.step h3 { font-family: var(--font-title); font-weight: 400; font-size: .98rem; color: var(--moon); margin-bottom: .6rem; letter-spacing: .04em; }
.step p { font-size: .78rem; color: var(--moon-dim); line-height: 1.9; }
.projection-note { max-width: 560px; margin: 2rem auto 0; padding: 0 var(--gutter); text-align: center; font-size: .8rem; line-height: 2; color: var(--moon-dim); font-style: italic; }

/* ── 10. EXTRAITS : chips + panneaux + accordeon .x-clamp ── */
.extrait-tabs { display: flex; gap: .55rem; justify-content: center; padding: 0 var(--gutter); margin-bottom: 1.6rem; flex-wrap: wrap; }
.extrait-tab { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.1rem; border: 1px solid rgba(201,169,110,.35); color: var(--moon-dim); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s; }
.extrait-tab.is-active { background: var(--gold); border-color: var(--gold); color: var(--void); font-weight: 600; }
.extrait-panel { display: none; max-width: 620px; margin: 0 auto; padding: 0 var(--gutter); }
.extrait-panel.is-active { display: block; }
.extrait-chapeau { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 1.4rem; }
.x-clamp { position: relative; max-height: 360px; overflow: hidden; transition: max-height .6s cubic-bezier(.16,1,.3,1); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, transparent 98%); }
.x-clamp.is-open { max-height: 6000px; -webkit-mask-image: none; mask-image: none; }
.extrait-block { border-left: 1px solid rgba(201,169,110,.3); padding-left: 1.15rem; display: flex; flex-direction: column; gap: 1.1rem; }
.extrait-block p { font-size: .88rem; line-height: 2; color: var(--moon-dim); }
.extrait-block em { color: inherit; }
.extrait-source { font-size: .68rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim) !important; }
.x-more { display: block; margin: 1.1rem auto 0; min-height: 46px; padding: 0 1.6rem; border: 1px solid rgba(201,169,110,.4); color: var(--gold); font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.x-more:active { background: rgba(201,169,110,.1); }

/* ── 11. FAQ + FORMULAIRES ── */
.faq-wrap { max-width: 620px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 1px; background: none; }
.faq-item { background: rgba(240,237,232,.02); border: 1px solid var(--rule); border-bottom: 0; }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.05rem 1.1rem; font-size: .84rem; color: var(--moon); letter-spacing: .04em; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex-shrink: 0; font-family: var(--font-title); font-size: 1.3rem; color: var(--gold); line-height: 1; transition: transform .3s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 1.1rem 1.15rem; font-size: .8rem; color: var(--moon-dim); line-height: 1.95; }
/* Formulaires (newsletter / extrait / contact) */
.email-capture { max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.email-row { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.6rem; }
.email-row input[type="email"] { width: 100%; min-height: 52px; background: rgba(240,237,232,.04); border: 1px solid rgba(201,169,110,.3); border-bottom-color: rgba(201,169,110,.5); color: var(--moon); font-family: var(--font-body); font-size: 1rem; padding: .7rem 1rem; }
.email-row input[type="email"]:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 2px 16px rgba(201,169,110,.18); }
.email-row input::placeholder { color: rgba(240,237,232,.4); }
.email-row button[type="submit"] { min-height: 52px; background: var(--gold); color: var(--void); border: 1px solid var(--gold); font-size: .62rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.email-row button[type="submit"]:active { background: var(--gold-light); }
.form-fine { font-size: .6rem; color: var(--gold-dim); margin-top: 1rem; letter-spacing: .1em; }
.contact-wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.contact-intro { margin-top: 1rem; font-size: .88rem; line-height: 1.95; color: var(--moon-dim); text-align: center; }
.cform { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.cfield label { display: block; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.cfield input, .cfield textarea { width: 100%; min-height: 50px; background: rgba(240,237,232,.04); border: 1px solid transparent; border-bottom: 1px solid rgba(201,169,110,.4); color: var(--moon); font-family: var(--font-body); font-size: 1rem; padding: .7rem .9rem; }
.cfield textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.cfield input:focus-visible, .cfield textarea:focus-visible { outline: none; border-bottom-color: var(--gold); box-shadow: 0 2px 16px rgba(201,169,110,.18); }
.cfield input::placeholder, .cfield textarea::placeholder { color: rgba(240,237,232,.35); }
.cbtn { width: 100%; min-height: 54px; background: var(--gold); color: var(--void); border: 1px solid var(--gold); font-size: .64rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.cbtn:active { background: var(--gold-light); }
.form-ok { font-size: .78rem; letter-spacing: .12em; color: var(--gold); line-height: 1.9; text-align: center; padding: 1rem 0; }

/* ── 12. MENU plein ecran ── */
.menu { position: fixed; inset: 0; z-index: 90; background: rgba(8,8,13,.985); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; flex-direction: column; justify-content: center; padding: 4.2rem var(--gutter) calc(2.2rem + var(--safe-b)); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility .28s; overflow-y: auto; }
.menu.open { opacity: 1; visibility: visible; transform: none; }
.menu__close { position: absolute; top: calc(.9rem + env(safe-area-inset-top, 0px)); right: .9rem; width: 46px; height: 46px; color: var(--gold); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { font-family: var(--font-title); font-size: clamp(1.5rem, 6.4vw, 1.9rem); color: var(--moon); padding: .52rem 0; border-bottom: 1px solid var(--rule); transition: color .2s, padding-left .2s; }
.menu__nav a:active { color: var(--gold); padding-left: .4rem; }
.menu__legal { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moon-dim); }
.menu__legal a { padding: .35rem 0; }
.menu__legal a:active { color: var(--gold); }

/* ── 13. MODALES : lightbox .mlb · overlays video · pre-commande · lightbox IG ── */
.mlb { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; background: rgba(6,6,11,.985); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: calc(3.4rem + env(safe-area-inset-top, 0px)) 0 calc(1.1rem + var(--safe-b)); }
.mlb.open { display: flex; animation: mfade .25s ease; }
@keyframes mfade { from { opacity: 0; } to { opacity: 1; } }
.mlb__counter { position: absolute; top: calc(1.2rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.mlb__close { position: absolute; top: calc(.7rem + env(safe-area-inset-top, 0px)); right: .8rem; width: 48px; height: 48px; border-radius: 50%; background: rgba(240,237,232,.1); color: var(--moon); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.mlb__figure { position: relative; width: 100%; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; touch-action: pan-y; }
.mlb__img { max-width: 100vw; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #06060b; transition: opacity .28s ease; }
.mlb__cap { font-size: .78rem; letter-spacing: .06em; color: var(--moon-dim); text-align: center; padding: 0 1.2rem; flex: 0 0 auto; }
.mlb__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.mlb__nav { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(201,169,110,.4); background: rgba(240,237,232,.06); color: var(--moon); display: flex; align-items: center; justify-content: center; }
.mlb__nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mlb__nav:active { background: var(--gold); color: var(--void); }
.mlb__nav[hidden] { display: none; }
/* Overlays bandes-annonces */
.video-ov { position: fixed; inset: 0; z-index: 110; background: #000; display: none; align-items: center; justify-content: center; }
.video-ov.open { display: flex; animation: mfade .3s ease; }
.video-ov video { width: 100%; max-height: 100svh; background: #000; }
.video-ov .ov-close { position: absolute; top: calc(.7rem + env(safe-area-inset-top, 0px)); right: .8rem; z-index: 2; width: 48px; height: 48px; border-radius: 50%; background: rgba(10,10,15,.7); border: 1px solid rgba(201,169,110,.5); color: var(--gold); font-size: 1.25rem; display: flex; align-items: center; justify-content: center; }
.ov-spin { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid rgba(201,169,110,.25); border-top-color: var(--gold); border-radius: 50%; display: none; animation: ovspin .9s linear infinite; pointer-events: none; }
.video-ov.is-buffering .ov-spin { display: block; }
@keyframes ovspin { to { transform: rotate(360deg); } }
/* Pre-commande Tome I */
.preorder-modal { position: fixed; inset: 0; z-index: 105; background: rgba(6,6,11,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.preorder-modal[hidden] { display: none; }
.preorder-box { position: relative; width: 100%; max-width: 380px; background: #0d0d15; border: 1px solid rgba(201,169,110,.3); padding: 2.1rem 1.5rem 1.7rem; text-align: center; }
.preorder-box .sec-tag { margin-bottom: 0; }
.preorder-box h2 { font-family: var(--font-title); font-weight: 400; font-size: 1.3rem; color: var(--moon); margin: .9rem 0 .8rem; line-height: 1.3; }
.preorder-box > p { font-size: .82rem; color: var(--moon-dim); line-height: 1.85; margin-bottom: 1.4rem; }
.preorder-box .email-row { margin-top: 0; }
.preorder-close { position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; color: var(--gold); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
/* Lightbox Instagram (facade RGPD : iframe vide hors ouverture) */
.iglb { position: fixed; inset: 0; z-index: 100; background: rgba(6,6,11,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: flex-end; justify-content: center; }
.iglb.open { display: flex; animation: mfade .25s ease; }
.iglb__close { position: fixed; top: calc(.8rem + env(safe-area-inset-top, 0px)); right: .8rem; z-index: 2; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--void); font-size: 1.25rem; display: flex; align-items: center; justify-content: center; }
.iglb__inner { width: 100%; max-width: 460px; }
.iglb__frame { width: 100%; height: 88svh; border: 0; display: block; background: #06060b; }

/* ── 14. VERROU DE DEFILEMENT ── */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* ── 15. REVEAL (gate html.js : sans JS, tout reste visible) ── */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js .reveal, .reveal { opacity: 1; transform: none; transition: none; }
    .mEntry-line { animation: none; transform: scaleX(1); }
}

/* ── 16. STUDIO (mode edition cliente) : la tabbar cede la place a la barre ── */
body:has(#lyra-studio-bar) .tabbar, body.has-studio .tabbar { display: none; }
body:has(#lyra-studio-bar), body.has-studio { padding-bottom: 120px; }
#lyra-studio-bar { padding-bottom: calc(12px + var(--safe-b)) !important; }

/* ── 17. COOKIE CONSENT (cookie-consent.js : .lcc-*) au-dessus de la tabbar ── */
.lcc-banner { bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px) !important; left: 8px !important; right: 8px !important; z-index: 66 !important; }
.lcc-manage { bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px) !important; left: 8px !important; z-index: 66 !important; }

/* ── 18. FOOTER ── */
footer { background: var(--void); border-top: 1px solid var(--rule); padding: 2.8rem var(--gutter) 2.4rem; text-align: center; }
.foot-logo { display: inline-block; font-family: var(--font-title); font-size: 1.35rem; color: var(--gold); margin-bottom: 1.4rem; padding: .3rem .5rem; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .4rem; margin-bottom: 1.5rem; }
.foot-nav a { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--moon-dim); padding: .55rem .5rem; }
.foot-nav a:active { color: var(--gold); }
.foot-social { display: flex; justify-content: center; gap: .7rem; margin-bottom: 1.7rem; }
.foot-social a { width: 46px; height: 46px; border: 1px solid rgba(201,169,110,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); }
.foot-social svg { width: 16px; height: 16px; fill: currentColor; }
.foot-message { font-size: .72rem; letter-spacing: .22em; color: var(--gold-dim); margin-bottom: 1.6rem; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .6rem; margin-bottom: 1.1rem; }
.foot-legal a { font-size: .64rem; color: var(--moon-dim); padding: .5rem .35rem; }
.foot-legal a:active { color: var(--gold); }
.foot-copy { font-size: .62rem; letter-spacing: .08em; color: var(--gold-dim); line-height: 2; }
.foot-copy a { color: var(--gold); border-bottom: 1px solid rgba(201,169,110,.3); }

/* ============ TUNNEL (.cart- / .pay-) — sections ajoutées par l'orchestrateur ============ */
/* ============ TUNNEL (.cart- / .pay-) ============ */

/* ---- Appbar tunnel (variantes par page, pas de tabbar) ---- */
.page-cart .appbar,
.page-pay .appbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cart-back,
.pay-back{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:-12px;color:var(--gold);text-decoration:none;font-size:1.3rem;line-height:1}
.cart-brand{flex:1;min-width:0;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-title);font-size:1rem;color:var(--gold);text-decoration:none;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.pay-brand{flex:1;min-width:0;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-title);font-size:1rem;color:var(--gold);letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.cart-brand-mark,
.pay-brand-mark{height:28px;width:auto;display:block;flex:0 0 auto}
.page-cart .appbar .eyebrow{display:block;margin:0;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dim);white-space:nowrap;text-align:right}
.pay-step{flex:0 0 auto;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dim);white-space:nowrap}

/* ---- Conteneurs de page (dégagent l'appbar fixe) ---- */
.page-cart .cart-main{max-width:560px;margin:0 auto;padding:calc(74px + env(safe-area-inset-top,0px)) 20px 40px}
.page-pay .wrap{max-width:560px;margin:0 auto;padding:calc(74px + env(safe-area-inset-top,0px)) 20px 40px}
.page-cart h1,
.page-pay h1{font-family:var(--font-title);font-size:clamp(1.7rem,7.5vw,2.2rem);line-height:1.12;color:var(--moon);text-align:center;margin:14px 0 30px}
.page-pay .eyebrow{display:block;font-size:.66rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:14px}

/* Réserve sous le contenu pour le bouton fixe bas */
body.page-cart{padding-bottom:calc(88px + var(--safe-b))}
body.page-pay{padding-bottom:calc(92px + var(--safe-b))}

/* ---- Footer discret tunnel ---- */
.cart-foot,
.pay-foot{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 26px;padding:26px 20px 38px}
.cart-foot a,
.pay-foot a{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--moon-dim);text-decoration:none;border-bottom:1px solid rgba(201,169,110,.18);padding:8px 0 3px}

/* ============ PANIER (.page-cart) ============ */
.page-cart .grid{display:flex;flex-direction:column;gap:26px}
.page-cart .items{display:flex;flex-direction:column;gap:14px}
.page-cart .item{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start;padding:16px;border:1px solid rgba(201,169,110,.14);background:rgba(201,169,110,.02)}
.page-cart .item-img{width:72px;height:96px;object-fit:cover;background:#0D0820;border:1px solid rgba(201,169,110,.12)}
.page-cart .item-info h2{font-family:var(--font-title);font-size:.95rem;font-weight:400;color:var(--moon);margin-bottom:6px;line-height:1.35}
.page-cart .item-info p{font-size:.72rem;color:var(--moon-dim);line-height:1.6;margin-bottom:8px}
.page-cart .qty-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-cart .qty-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(201,169,110,.3);color:var(--gold);font-family:var(--font-body);font-size:1.1rem;cursor:pointer}
.page-cart .qty-btn:active{border-color:var(--gold);background:rgba(201,169,110,.08)}
.page-cart .qty-val{min-width:28px;text-align:center;font-size:.95rem;color:var(--moon)}
.page-cart .remove{min-height:44px;display:inline-flex;align-items:center;margin-left:auto;padding:0 4px;background:none;border:none;color:var(--gold-dim);font-family:var(--font-body);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(201,169,110,.25)}
.page-cart .item-price{grid-column:2;font-family:var(--font-title);font-size:1rem;color:var(--gold);margin-top:2px}

.page-cart .summary{background:rgba(201,169,110,.025);border:1px solid rgba(201,169,110,.15);padding:24px 20px}
.page-cart .summary h2{font-family:var(--font-title);font-size:1.1rem;font-weight:400;color:var(--moon);margin-bottom:14px;letter-spacing:.04em}
.page-cart .sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;font-size:.82rem;color:var(--moon-dim)}
.page-cart .sum-row span:last-child{text-align:right}
.page-cart .sum-row.total{padding-top:16px;margin-top:6px;border-top:1px solid rgba(201,169,110,.12);font-family:var(--font-title);font-size:1.35rem;color:var(--gold)}
.page-cart .sum-note{font-size:.68rem;color:var(--gold-dim);line-height:1.8;margin-top:12px}
.page-cart .continue{display:block;width:fit-content;margin:22px auto 0;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--moon-dim);text-decoration:none;border-bottom:1px solid rgba(201,169,110,.18);padding:10px 2px 4px;text-align:center}

/* CTA paiement : barre fixe bas, pleine largeur, safe-area */
.page-cart .btn-pay{position:fixed;bottom:0;left:0;right:0;z-index:60;display:block;text-align:center;background:var(--gold);color:var(--void);text-decoration:none;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;padding:20px 20px calc(18px + var(--safe-b));border:none;cursor:pointer}
.page-cart .btn-pay:active{background:var(--gold-light)}

.page-cart .empty{text-align:center;padding:64px 20px;border:1px dashed rgba(201,169,110,.15)}
.page-cart .empty p{font-size:.92rem;color:var(--moon-dim);margin-bottom:24px;line-height:1.8}
.page-cart .empty .cta{display:inline-block;border:1px solid var(--gold);color:var(--gold);text-decoration:none;font-size:.62rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;padding:16px 30px}
.page-cart .empty .cta:active{background:var(--gold);color:var(--void)}
.page-cart .offers{display:flex;flex-direction:column;gap:14px;margin-top:8px;text-align:left}
.page-cart .offer{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:16px;border:1px solid rgba(201,169,110,.15);background:rgba(201,169,110,.03)}
.page-cart .offer-img{width:72px;height:96px;object-fit:cover;background:#0D0820;border:1px solid rgba(201,169,110,.12)}
.page-cart .offer-info h2{font-family:var(--font-title);font-size:.95rem;font-weight:400;color:var(--moon);margin-bottom:6px;line-height:1.35}
.page-cart .offer-info p{font-size:.72rem;color:var(--moon-dim);line-height:1.6;margin-bottom:8px}
.page-cart .offer-price{font-family:var(--font-title);font-size:1rem;color:var(--gold)}
.page-cart .offer-add{grid-column:1/-1;min-height:48px;background:var(--gold);color:var(--void);border:none;font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;padding:15px 20px;cursor:pointer}
.page-cart .offer-add:active{background:var(--gold-light)}

/* ============ PAIEMENT (.page-pay) ============ */
.page-pay .grid{display:flex;flex-direction:column;gap:34px}
.page-pay .section{margin-bottom:38px}
.page-pay .section-tag{font-size:.64rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:block}

/* Formulaire : 1 colonne, saisie 16px mini (anti-zoom iOS) */
.page-pay .field-row{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
.page-pay .field{display:flex;flex-direction:column;gap:8px}
.page-pay label{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim)}
.page-pay label .req{color:var(--gold)}
.page-pay input,
.page-pay select,
.page-pay textarea{font-size:16px;background:transparent;border:none;border-bottom:1px solid rgba(201,169,110,.22);border-radius:0;color:var(--moon);font-family:var(--font-body);font-weight:300;padding:12px 0;outline:none;letter-spacing:.04em;transition:border-color .3s}
.page-pay input:focus,
.page-pay select:focus,
.page-pay textarea:focus{border-color:var(--gold);box-shadow:0 2px 16px rgba(201,169,110,.12)}
.page-pay input::placeholder,
.page-pay textarea::placeholder{color:rgba(240,237,232,.22)}
.page-pay select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-dim) 50%),linear-gradient(135deg,var(--gold-dim) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:32px;cursor:pointer}
.page-pay select option{background:var(--void);color:var(--moon)}
.page-pay textarea{resize:vertical;min-height:64px}
.page-pay input[type=radio],
.page-pay input[type=checkbox]{background:none;border:none;padding:0;accent-color:var(--gold)}

/* Modes de livraison */
.page-pay .shipping-group{margin-top:18px}
.page-pay .shipping-group:first-of-type{margin-top:6px}
.page-pay .shipping-group-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.page-pay .shipping-group-title{font-family:var(--font-body);font-size:.6rem;font-weight:600;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.page-pay .shipping-group-line{flex:1;height:1px;background:linear-gradient(to right,rgba(201,169,110,.25),transparent)}
.page-pay .shipping-options{display:flex;flex-direction:column;gap:10px}
.page-pay .shipping-opt{display:flex;align-items:center;gap:12px;padding:16px 14px;border:1px solid rgba(201,169,110,.12);cursor:pointer;transition:border-color .25s,background .25s}
.page-pay .shipping-opt.selected{border-color:var(--gold);background:rgba(201,169,110,.04)}
.page-pay .shipping-opt input[type=radio]{width:20px;height:20px;flex-shrink:0}
.page-pay .shipping-opt-info{flex:1;min-width:0}
.page-pay .shipping-opt-carrier{display:block;font-family:var(--font-title);font-size:.95rem;color:var(--moon);line-height:1.25}
.page-pay .shipping-opt-label{display:block;font-size:.78rem;color:var(--moon-dim);margin-top:4px}
.page-pay .shipping-opt-zone{display:block;font-size:.68rem;color:var(--gold-dim);margin-top:4px;letter-spacing:.04em;line-height:1.5}
.page-pay .shipping-opt-days{display:block;font-size:.62rem;color:var(--gold-dim);margin-top:6px;letter-spacing:.16em;text-transform:uppercase}
.page-pay .shipping-opt-price{font-family:var(--font-title);font-size:1.05rem;color:var(--gold);white-space:nowrap;align-self:center}

/* Mondial Relay : widget en flux normal, pleine largeur jusqu'aux gouttières */
.page-pay #mr-section{display:none;margin-top:18px}
.page-pay #mr-section.active{display:block}
.page-pay .mr-hint{font-size:.74rem;color:var(--moon-dim);margin-top:6px;line-height:1.6}
.page-pay #mr-widget{margin:14px -20px 0;width:calc(100% + 40px);height:clamp(480px,72vh,640px);background:#fff;border-top:1px solid rgba(201,169,110,.18);border-bottom:1px solid rgba(201,169,110,.18);color:#333}
/* Même correctif qu'en desktop : le widget est sur fond blanc, il ne doit pas hériter du texte
   ivoire de la charte sombre, sinon ses libellés et le texte saisi sont invisibles. */
/* Le gabarit fluide de Mondial Relay se pose avec un retrait de 5 px et une largeur de 99 % :
   on le ramene dans le conteneur, sinon il deborde d'un pixel a droite sur telephone. */
.page-pay #mr-widget .MR-Widget{margin-left:0;width:100%}
.page-pay #mr-widget input,.page-pay #mr-widget select,.page-pay #mr-widget textarea,.page-pay #mr-widget button{color:#333}
.page-pay #mr-widget input::placeholder{color:#8a8a8a;opacity:1}
/* Même exception qu'en desktop : fond magenta, libellé blanc. */
.page-pay #mr-widget button.MRW-BtGo{color:#fff}
.page-pay #mr-selected{margin-top:14px;padding:16px 18px;border:1px solid var(--gold);background:rgba(201,169,110,.06);display:none}
.page-pay #mr-selected.shown{display:block}
.page-pay #mr-selected-title{font-family:var(--font-title);font-size:1rem;color:var(--gold);margin-bottom:8px}
.page-pay #mr-selected-info{font-size:.85rem;color:var(--moon);line-height:1.6;white-space:pre-line}

/* Paiement Stripe : conteneur fluide, l'iframe s'adapte seule */
.page-pay #payment-element{margin-top:20px;padding:12px;background:rgba(255,255,255,.02);border:1px solid rgba(201,169,110,.12)}
.page-pay .error{margin-top:18px;padding:14px 16px;border:1px solid rgba(220,80,80,.4);background:rgba(220,80,80,.08);color:#ff9b9b;font-size:.8rem;line-height:1.6}
.page-pay #payment-error{scroll-margin-bottom:100px}

/* Récapitulatif + CGV */
.page-pay .summary{background:rgba(201,169,110,.025);border:1px solid rgba(201,169,110,.15);padding:24px 20px}
.page-pay .summary h2{font-family:var(--font-title);font-size:1.1rem;font-weight:400;color:var(--moon);margin-bottom:16px;letter-spacing:.04em}
.page-pay .sum-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;font-size:.8rem;color:var(--moon-dim)}
.page-pay .sum-item-name{flex:1;line-height:1.45}
.page-pay .sum-item-price{font-family:var(--font-title);color:var(--gold);white-space:nowrap}
.page-pay .sum-divider{height:1px;background:rgba(201,169,110,.1);margin:14px 0}
.page-pay .sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0;font-size:.82rem;color:var(--moon-dim)}
.page-pay .sum-row.total{padding-top:14px;margin-top:8px;border-top:1px solid rgba(201,169,110,.12);font-family:var(--font-title);font-size:1.35rem;color:var(--gold)}
.page-pay .sum-note{font-size:.66rem;color:var(--gold-dim);line-height:1.8;margin-top:16px}
.page-pay .lock-badge{display:flex;align-items:center;gap:8px;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim);margin-top:14px}
.page-pay .cgv-accept{display:flex;align-items:flex-start;gap:12px;margin-top:20px;font-size:.8rem;line-height:1.6;color:var(--moon-dim);cursor:pointer}
.page-pay .cgv-accept input{flex:none;width:22px;height:22px;margin-top:1px;cursor:pointer}
.page-pay .cgv-accept a{color:var(--gold);text-decoration:underline}
.page-pay .cgv-accept input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Bouton Payer : barre fixe bas (reste dans le form au sens DOM, submit OK) */
.page-pay #pay-btn{position:fixed;bottom:0;left:0;right:0;z-index:60;display:block;width:100%;text-align:center;background:var(--gold);color:var(--void);font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;padding:20px 20px calc(18px + var(--safe-b));border:none;cursor:pointer;transition:background .3s}
.page-pay #pay-btn:active:not(:disabled){background:var(--gold-light)}
.page-pay #pay-btn:disabled{background:var(--gold-dim);cursor:not-allowed;opacity:.7}

/* Panier vide côté paiement */
.page-pay .empty-redir{text-align:center;padding:80px 20px}
.page-pay .empty-redir p{margin-bottom:16px;color:var(--moon-dim);line-height:1.8}
.page-pay .empty-redir a{color:var(--gold);text-decoration:underline}

/* ── Paiement : pays -> modes de livraison, questionnaire (2026-07-27) ── */
/* Pays de livraison : toujours visible, il pilote les modes proposés (2026-07-27) */
.page-pay .country-hint{margin-top:10px;font-size:.72rem;line-height:1.6;color:var(--gold-dim);letter-spacing:.04em}
/* Aucun mode possible pour le pays choisi : on invite à écrire, jamais de paiement à l'aveugle */
.page-pay .ship-none{padding:18px;border:1px solid rgba(201,169,110,.28);background:rgba(201,169,110,.04);font-size:.8rem;line-height:1.7;color:var(--moon-dim)}
.page-pay .ship-none a{color:var(--gold);text-decoration:underline}
/* Questionnaire obligatoire : comment le lecteur a connu le livre */
.page-pay .origine-question{font-size:.86rem;line-height:1.65;color:var(--moon);margin-bottom:16px}
.page-pay .origine-options{display:flex;flex-direction:column;gap:10px}
.page-pay .origine-opt{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid rgba(201,169,110,.12);cursor:pointer;font-size:.82rem;color:var(--moon-dim);transition:all .25s}
.page-pay .origine-opt:hover{border-color:rgba(201,169,110,.32)}
.page-pay .origine-opt:has(input:checked){border-color:var(--gold);background:rgba(201,169,110,.04);color:var(--moon)}
.page-pay .origine-opt input[type=radio]{flex:none;accent-color:var(--gold);cursor:pointer}
.page-pay .origine-opt input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.page-pay .btn-pay:disabled{opacity:.45;cursor:not-allowed}
.page-pay .ship-weight{margin-bottom:14px;font-size:.72rem;letter-spacing:.04em;color:var(--gold-dim)}