/* =========================================================================
   Bulle Ortho — thèmes (Pastel, Verre, Nuit) et écriture « feutre »
   Le thème vit sur <html data-theme="…" data-font="…">, choisi dans le sélecteur.
   ========================================================================= */

/* ---------- Écriture « feutre » : celle de la page Déglutition (Fredoka bien gras + DM Sans) ---------- */
html[data-font="feutre"] {
  --display: "Fredoka", system-ui, sans-serif;
  --text: "DM Sans", system-ui, sans-serif;
  --round: "Fredoka", system-ui, sans-serif;
}
html[data-font="feutre"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
html[data-font="feutre"] h1 em, html[data-font="feutre"] h2 em, html[data-font="feutre"] em { font-style: normal; font-weight: 700; color: #DE5B94; }
html[data-font="feutre"] .kicker { display: inline-block; padding: 8px 13px; border-radius: 13px; background: #FFF0A4; color: #CA5289; font: 600 14px/1.25 "Fredoka", sans-serif; letter-spacing: 0; text-transform: none; transform: rotate(-1.7deg); box-shadow: 5px 6px 0 #F6DCE8; }
html[data-font="feutre"] .kicker .dot { display: none; }
html[data-font="feutre"] .btn { font-family: "DM Sans", sans-serif; font-weight: 800; }
html[data-font="feutre"] .btn:not(.ghost):not(.link) { background: linear-gradient(155deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); }
html[data-font="feutre"] .film-cap, html[data-font="feutre"] .film-cap em { font-weight: 700; }
html[data-font="feutre"] .film-cap em { color: var(--butter); }
html[data-font="feutre"] :is(.stat b, .step-n, .cap b, .res b, .faq summary, .pick b) { font-family: "Fredoka", sans-serif; font-weight: 700; font-style: normal; }

/* ---------- Thème Verre (Apple, presque transparent) ---------- */
html[data-theme="verre"] {
  --porcelain: #F5F5F7;
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --rose: #FAD4E2;
  --sky: #D6E9FF;
  --mint: #DDF3E8;
  --lilac: #E3DDFF;
  --glass: rgba(255, 255, 255, .28);
  --glass-strong: rgba(255, 255, 255, .5);
  --glass-line: rgba(255, 255, 255, .65);
  --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 .5px rgba(0,0,0,.04), 0 20px 50px -18px rgba(0,0,0,.18);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 .5px rgba(0,0,0,.05), 0 40px 90px -24px rgba(0,0,0,.28);
}
html[data-theme="verre"]:not([data-font="feutre"]) { --display: "Inter Tight", "Plus Jakarta Sans", system-ui, sans-serif; --text: "Inter Tight", system-ui, sans-serif; }
html[data-theme="verre"]:not([data-font="feutre"]) h1, html[data-theme="verre"]:not([data-font="feutre"]) h2 { font-weight: 700; letter-spacing: -.045em; }
html[data-theme="verre"]:not([data-font="feutre"]) em { font-style: normal; background: linear-gradient(90deg, #E2508B, #8C6CF0 55%, #3E9BF0); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="verre"] .glass { -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); }
html[data-theme="verre"] .mesh i { opacity: .7; filter: blur(100px); }
html[data-theme="verre"] .btn:not(.ghost):not(.link) { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff), var(--c)); }

/* ---------- Thème Nuit étoilée : bleu nuit, or, étoiles qui scintillent, lumières chaudes ---------- */
html[data-theme="nuit"] {
  color-scheme: dark;
  --porcelain: #0B1430;
  --ink: #F4F1FF;
  --muted: #B9C0DE;
  --rose: #3A2C66;
  --raspberry: #FF9EC7;
  --raspberry-d: #F27DB0;
  --lilac: #6E5CD6;
  --sky: #1E3E7A;
  --mint: #12485A;
  --butter: #FFD36E;
  --blue: #9CC4FF;
  --red: #FF8A70;
  --glass: rgba(22, 34, 72, .62);
  --glass-strong: rgba(30, 44, 92, .82);
  --glass-line: rgba(255, 236, 190, .16);
  --shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 20px 60px -16px rgba(0,0,0,.6), 0 0 36px -14px rgba(255,211,110,.25);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.1) inset, 0 40px 100px -20px rgba(0,0,0,.7), 0 0 60px -18px rgba(255,211,110,.35);
}
html[data-theme="nuit"] body { background: radial-gradient(1100px 700px at 80% -10%, #2B3F86, transparent 60%), radial-gradient(900px 700px at 0% 50%, #1A1F55, transparent 60%), linear-gradient(180deg, #0B1430, #120F33 60%, #0B1430); }
html[data-theme="nuit"] .mesh i { opacity: .22; mix-blend-mode: screen; }
html[data-theme="nuit"] h1, html[data-theme="nuit"] h2 { text-shadow: 0 0 30px rgba(255,236,190,.18); }
html[data-theme="nuit"] em { color: var(--butter); text-shadow: 0 0 16px rgba(255,211,110,.55); }
html[data-theme="nuit"] .btn:not(.ghost):not(.link) { box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 22px -4px rgba(255,211,110,.55), 0 10px 26px -10px rgba(0,0,0,.6); }
html[data-theme="nuit"] .btn.ghost { background: rgba(255,255,255,.06); }
html[data-theme="nuit"] .hero-veil { background: radial-gradient(circle at 50% 58%, rgba(11,20,48,0) 0 18%, rgba(11,20,48,.5) 50%, rgba(11,20,48,.92) 84%), linear-gradient(180deg, rgba(11,20,48,.7), rgba(11,20,48,.05) 30%, rgba(11,20,48,.5) 75%, var(--porcelain)); }
html[data-theme="nuit"] .hero h1 { text-shadow: 0 2px 30px rgba(11,20,48,.9), 0 0 40px rgba(255,211,110,.22); }
html[data-theme="nuit"] .compass-dial circle:first-of-type { fill: rgba(24,36,80,.75); stroke: rgba(255,236,190,.35); }
html[data-theme="nuit"] .compass-dial { filter: drop-shadow(0 0 34px rgba(255,211,110,.3)) drop-shadow(0 30px 50px rgba(0,0,0,.5)); }
html[data-theme="nuit"] .ticks-ring, html[data-theme="nuit"] .rose { stroke: rgba(255,236,190,.5); fill: rgba(255,255,255,.07); }
html[data-theme="nuit"] :is(.cap-ico, .res-ico, .format-ico, .feature::before, .hud-count, .flink, .code, .book-dialog .close, .mp-cover) { background: #1E2C5E; color: var(--ink); }
html[data-theme="nuit"] :is(.nav a:hover, .nav a.on, .socials a, .pills li, .pick, .tag, .device-tabs, .howto-steps li, .slot, .map li span) { background: rgba(255,255,255,.08); color: var(--ink); border-color: rgba(255,255,255,.12); }
html[data-theme="nuit"] .pick:hover, html[data-theme="nuit"] .pick[aria-pressed="true"], html[data-theme="nuit"] .howto-steps li.on { background: rgba(255,255,255,.14); }
html[data-theme="nuit"] .statement .w { color: rgba(244,241,255,.16); }
html[data-theme="nuit"] .statement .w.on { color: var(--ink); }
html[data-theme="nuit"] .statement .w.hl.on { color: var(--butter); }
html[data-theme="nuit"] .film-shade { background: linear-gradient(180deg, var(--porcelain) 0%, rgba(11,20,48,0) 18%, rgba(11,20,48,0) 55%, rgba(11,20,48,.7) 100%); }
html[data-theme="nuit"] .book-dialog { background: rgba(16,26,60,.95); color: var(--ink); border-color: rgba(255,236,190,.15); }
html[data-theme="nuit"] .gl-logo span { -webkit-text-stroke-color: #fff; filter: drop-shadow(0 0 22px rgba(255,236,190,.35)) drop-shadow(0 .12em .18em rgba(0,0,0,.5)); }
html[data-theme="nuit"] .gl-logo .g { color: #D9D6EA; }
html[data-theme="nuit"] .showcase-sticky { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--t2, #BFE3CD) 28%, #0B1430), #0B1430 78%); }
html[data-theme="nuit"] .mouth-sticky { background: radial-gradient(circle at 50% 45%, #4A2346, #1E1438 62%, #0B1430); }
html[data-theme="nuit"] .loader { color: var(--ink); }
html[data-theme="nuit"] .field { border-color: #ddd; }
html[data-theme="nuit"] .portrait { box-shadow: 0 0 60px -12px rgba(255,211,110,.45), var(--shadow-lg); border-color: rgba(255,236,190,.25); }
/* ciel étoilé + lucioles */
.night-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; overflow: hidden; }
html[data-theme="nuit"] .night-sky { display: block; }
.night-sky i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.8); opacity: .3; animation: twinkle var(--d) ease-in-out infinite; animation-delay: var(--dl); }
.night-sky i.gold { background: #FFE7A8; box-shadow: 0 0 10px 3px rgba(255,211,110,.7); }
.night-sky i.fly { animation: firefly var(--d) ease-in-out infinite alternate, twinkle 2.4s ease-in-out infinite; }
.night-sky b { position: absolute; top: var(--y); left: -10%; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #fff); border-radius: 2px; opacity: 0; transform: rotate(18deg); animation: shoot 9s linear infinite; animation-delay: var(--dl); }
@keyframes twinkle { 50% { opacity: 1; transform: scale(1.4); } }
@keyframes firefly { to { transform: translate(var(--fx), var(--fy)); } }
@keyframes shoot { 0%, 92% { opacity: 0; left: -10%; } 93% { opacity: 1; } 100% { opacity: 0; left: 110%; } }
@media (prefers-reduced-motion: reduce) { .night-sky i, .night-sky b { animation: none; } }

/* ---------- Thème BD / manga (comme Studio Pro Max) ---------- */
html[data-theme="bd"] {
  --porcelain: #F6F2E8;
  --ink: #111114;
  --muted: #3E3E46;
  --rose: #FFD6E4;
  --raspberry: #E02A36;
  --raspberry-d: #B81E29;
  --butter: #FFE14D;
  --blue: #2A63E0;
  --red: #E02A36;
  --glass: #FFFFFF;
  --glass-strong: #FFFFFF;
  --glass-line: #111114;
  --shadow: 5px 5px 0 #111114;
  --shadow-lg: 8px 8px 0 #111114;
  --r: 10px;
}
html[data-theme="bd"]:not([data-font="feutre"]) { --display: "Bangers", "Arial Black", Impact, sans-serif; --text: "Comic Neue", "Fredoka", sans-serif; }
html[data-theme="bd"] body { background: #F6F2E8; }
html[data-theme="bd"] body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; background-image: radial-gradient(circle, rgba(17,17,20,.16) 1px, transparent 1.5px); background-size: 7px 7px; mix-blend-mode: multiply; opacity: .5; }
html[data-theme="bd"] .mesh { display: none; }
html[data-theme="bd"]:not([data-font="feutre"]) :is(h1, h2, h3) { font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
html[data-theme="bd"]:not([data-font="feutre"]) h2 { text-shadow: 4px 4px 0 var(--butter); }
html[data-theme="bd"] em { font-style: normal; color: var(--raspberry); }
html[data-theme="bd"] .glass { background: #fff; border: 3px solid #111114; box-shadow: 5px 5px 0 #111114; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="bd"] .btn { border: 2.5px solid #111114; box-shadow: 4px 4px 0 #111114; font-weight: 800; transition: transform .1s, box-shadow .1s; }
html[data-theme="bd"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #111114; }
html[data-theme="bd"] .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111114; }
html[data-theme="bd"] .btn.ghost { background: #fff; }
html[data-theme="bd"] .kicker { background: #111114; color: #fff; padding: 3px 10px; transform: skewX(-10deg); letter-spacing: .08em; }
html[data-theme="bd"] .kicker .dot { display: none; }
html[data-theme="bd"] .topbar { background: #fff !important; border: 3px solid #111114; box-shadow: 4px 4px 0 #111114; }
html[data-theme="bd"] .hero-veil { background: radial-gradient(circle at 50% 58%, rgba(246,242,232,0) 0 20%, rgba(246,242,232,.6) 52%, rgba(246,242,232,.95) 82%); }
html[data-theme="bd"] .hero h1 { text-shadow: 4px 4px 0 #FFE14D, 7px 7px 0 #111114; }
html[data-theme="bd"] .compass-dial circle:first-of-type { fill: #fff; stroke: #111114; stroke-width: 5; }
html[data-theme="bd"] .compass-dial { filter: drop-shadow(6px 6px 0 #111114); }
html[data-theme="bd"] :is(.cap, .stat, .res, .deal) { border-radius: 10px; }
html[data-theme="bd"] :is(.mouth-step, .mouth-product, .card, .buy-panel, .hud-who, .tray, .picker-panel, .fx-toast, .topbar) { background: #fff !important; border: 3px solid #111114 !important; box-shadow: 5px 5px 0 #111114 !important; }
html[data-theme="bd"] .film-cap { font-family: "Bangers", Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #111114; text-shadow: none; background: #fff; border: 3px solid #111114; box-shadow: 5px 5px 0 #111114; padding: 10px 18px; border-radius: 26px 26px 26px 4px; width: auto; max-width: min(640px, calc(100% - 32px)); }
html[data-theme="bd"] .film-cap::before { display: none; }
html[data-theme="bd"] .film-cap em { color: #E02A36; }
html[data-theme="bd"] .portrait { border: 4px solid #111114; box-shadow: 8px 8px 0 #111114; }
html[data-theme="bd"] .gl-logo span { filter: drop-shadow(5px 5px 0 #111114); }
html[data-theme="bd"] .showcase-sticky { background: #FFE14D; background-image: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,.55) 0 6deg, transparent 6deg 14deg); }
html[data-theme="bd"] :is(.face, .face-orb i, .pick-face) { border-color: #111114; box-shadow: 3px 3px 0 #111114; }

/* ---------- Sélecteur de thème ---------- */
.theme-switch { position: fixed; left: 14px; bottom: 14px; z-index: 80; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; }
.theme-switch button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; background: transparent; font: 700 13px var(--text); color: var(--ink); transition: transform .3s var(--spring), background .2s; }
.theme-switch button:hover { transform: scale(1.12); }
.theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--porcelain); }
.theme-switch .sw { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.2); }
.theme-switch [data-set-theme="pastel"] .sw { background: conic-gradient(#F4C7D6, #BFE0FA, #CDEBD9, #F6EC9A, #F4C7D6); }
.theme-switch [data-set-theme="verre"] .sw { background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(214,233,255,.6)); box-shadow: 0 0 0 1.5px rgba(0,0,0,.15), inset 0 1px 2px #fff; }
.theme-switch [data-set-theme="nuit"] .sw { background: radial-gradient(circle at 70% 30%, #FFE7A8 0 12%, transparent 14%), radial-gradient(circle at 30% 70%, #fff 0 6%, transparent 8%), linear-gradient(160deg, #2B3F86, #0B1430); box-shadow: 0 0 8px rgba(255,211,110,.6); }
.theme-switch [data-set-theme="bd"] .sw { background: radial-gradient(circle, #111 1px, transparent 1.5px) 0 0 / 5px 5px, #FFE14D; box-shadow: 0 0 0 2px #111, 2px 2px 0 #111; }
.theme-switch .sep { width: 1px; height: 22px; background: color-mix(in srgb, var(--ink) 18%, transparent); margin: 0 2px; }
.theme-switch [data-set-font] { width: auto; padding: 0 12px; border-radius: 999px; font: 700 17px "Fredoka", sans-serif; }
.theme-switch .lbl { position: absolute; left: 0; bottom: calc(100% + 8px); padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--porcelain); font: 700 12px var(--text); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: .25s; pointer-events: none; }
.theme-switch:hover .lbl { opacity: 1; transform: none; }
@media (max-width: 760px) { .theme-switch { left: 8px; bottom: 8px; transform: scale(.88); transform-origin: left bottom; } }
html.theme-anim, html.theme-anim * { transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s !important; }

/* ---------- Lisibilité garantie : tout texte posé sur une scène 3D ou une vidéo ---------- */
:is(.mouth-step, .mouth-product, .card, .buy-panel, .hud-who, .tray, .picker-panel, .fx-toast) {
  background: rgba(255, 255, 255, .9) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  color: #2A1B2E;
}
:is(.mouth-step, .mouth-product, .card, .feature, .buy-panel) :is(p, small, .buy-hook) { color: #4A3D52 !important; }
:is(.mouth-step, .mouth-product, .card, .feature, .buy-panel) h3 { color: #2A1B2E; }
.card h3 { color: color-mix(in srgb, var(--c) 80%, #000) !important; }
.mouth-step .fun { display: inline-block; padding: 4px 12px; border-radius: 12px; background: #FFF1A8; color: #A3245A !important; }
.step-n { color: #C2386F; }
.film-cap { text-shadow: 0 2px 4px rgba(20,10,28,.75), 0 6px 30px rgba(20,10,28,.7); }
.film-cap::before { content: ""; position: absolute; inset: -18px -26px; z-index: -1; border-radius: 28px; background: radial-gradient(ellipse at center, rgba(20,10,28,.45), transparent 72%); }
html[data-theme="nuit"] :is(.mouth-step, .mouth-product, .card, .buy-panel, .hud-who, .tray, .picker-panel, .fx-toast) { background: rgba(22, 15, 36, .92) !important; color: #F6EEF8; border-color: rgba(255,255,255,.14); }
html[data-theme="nuit"] :is(.mouth-step, .mouth-product, .card, .feature, .buy-panel) :is(p, small, .buy-hook) { color: #DCCFE6 !important; }
html[data-theme="nuit"] :is(.mouth-step, .mouth-product, .card, .feature, .buy-panel) h3 { color: #fff; }
html[data-theme="nuit"] .card h3 { color: color-mix(in srgb, var(--c) 45%, #fff) !important; }
html[data-theme="nuit"] .step-n { color: #FF8FBF; }
html[data-theme="nuit"] .mouth-step .fun { background: #4A1A35; color: #FFD1E5 !important; }
.film-cap { isolation: isolate; }

/* Écriture Bulle : étiquettes « école » en biais, comme sur Instagram */
html[data-font="feutre"] :is(.tag, .deal-tag, .device-pill, .buy-level, .badge small, .cap small) { font-family: "Fredoka", sans-serif; font-weight: 600; }
html[data-font="feutre"] :is(.tag, .deal-tag, .device-pill) { padding: 7px 12px; border-radius: 11px; background: #FFF0A4; color: #CC548E; transform: rotate(-2deg); box-shadow: 4px 5px 0 #F6DCE8; letter-spacing: 0; }
html[data-font="feutre"] :is(.res:nth-child(3n+2), .deal:nth-child(2n)) .deal-tag, html[data-font="feutre"] .card:nth-of-type(even) .tag { background: #F9D7E7; }
html[data-font="feutre"] .pills li { font-family: "Fredoka", sans-serif; font-weight: 600; background: #F9E1EB; color: #955674; border: 0; }
html[data-font="feutre"] .pills li:nth-child(3n) { background: #FFF0A4; color: #CC548E; }
html[data-font="feutre"] .pills li:nth-child(3n+2) { background: #E7EDFF; color: #5B5FB0; }
html[data-font="feutre"] .team-label { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 22px; padding: 6px 12px; border-radius: 12px; background: #FFF0A4; color: #CA5289; }
html[data-font="feutre"] .urgent b { font-family: "Fredoka", sans-serif; }
html[data-theme="nuit"][data-font="feutre"] :is(.tag, .deal-tag, .device-pill, .kicker) { background: #4A3A12; color: #FFE36E; box-shadow: 4px 5px 0 #4A1A35; }

/* Barre du haut et panneau « Tu es … » toujours opaques (au-dessus du ciel 3D, des vidéos…) */
.topbar { background: rgba(255,255,255,.92) !important; }
.hud-who small { color: #4A3D52 !important; font-weight: 600; }
.hud-who b { color: #2A1B2E; }
html[data-theme="nuit"] .topbar { background: rgba(22,15,36,.92) !important; }
html[data-theme="nuit"] .hud-who small { color: #DCCFE6 !important; }
html[data-theme="nuit"] .hud-who b { color: #fff; }

/* ---------- Vitrine : points forts en « bandelettes » façon Instagram ---------- */
.showcase .feature { width: auto; max-width: min(310px, 32vw); padding: 11px 16px 12px; border: 0; border-radius: 12px; background: #FFF0A4 !important; color: #A3245A !important; font: 600 clamp(16px, 1.4vw, 19px)/1.25 "Fredoka", sans-serif; box-shadow: 5px 6px 0 #F6DCE8; -webkit-backdrop-filter: none; backdrop-filter: none; rotate: -2.5deg; }
.showcase .feature::before { content: attr(data-ico); display: inline; width: auto; height: auto; margin: 0 7px 0 0; background: none; font-size: 1.1em; }
.showcase .f2 { background: #F9D7E7 !important; color: #8E2A5C !important; rotate: 2deg; box-shadow: 5px 6px 0 #EBC7F0; }
.showcase .f3 { background: #E7EDFF !important; color: #4B4FA0 !important; rotate: -1deg; box-shadow: 5px 6px 0 #D5DEFA; }
.showcase .feature::after { content: ""; position: absolute; top: 50%; width: clamp(40px, 7vw, 120px); border-top: 2.5px dashed currentColor; opacity: .55; }
.showcase .f1::after, .showcase .f3::after { left: calc(100% + 8px); }
.showcase .f2::after { right: calc(100% + 8px); }
.showcase .feature.on { animation: stripIn .7s var(--spring) both; }
@keyframes stripIn { from { scale: .6; } to { scale: 1; } }
html[data-theme="nuit"] .showcase .feature { background: #4A3A12 !important; color: #FFE36E !important; box-shadow: 5px 6px 0 #4A1A35; }
html[data-theme="nuit"] .showcase .f2 { background: #4A1A35 !important; color: #FFC4DD !important; box-shadow: 5px 6px 0 #2A1446; }
html[data-theme="nuit"] .showcase .f3 { background: #1D2C5A !important; color: #C8D6FF !important; box-shadow: 5px 6px 0 #2A1446; }

/* sélecteur rangé dans la barre du haut */
.theme-switch.in-bar { position: static; padding: 3px; gap: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 999px; transform: none; margin-left: auto; margin-right: 6px; }
.theme-switch.in-bar button { width: 30px; height: 30px; }
.theme-switch.in-bar .sw { width: 17px; height: 17px; }
.theme-switch.in-bar [data-set-font] { padding: 0 9px; font-size: 14px; }
.theme-switch.in-bar .lbl { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); }
@media (max-width: 760px) { .theme-switch.in-bar { margin-right: 4px; } .theme-switch.in-bar .sep, .theme-switch.in-bar .lbl { display: none; } }
@media (max-width: 400px) { .topbar .logo > span:last-child { display: none; } }
.showcase .f1 { left: max(14px, 3vw); }
.showcase .f2 { right: max(14px, 3vw); }
.showcase .f3 { left: max(14px, 5vw); }
html[data-theme="nuit"] .btn.ghost { color: color-mix(in srgb, var(--c) 35%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 50%, #fff); }
html[data-theme="nuit"] .btn.link { color: color-mix(in srgb, var(--c) 35%, #fff); }

/* sélecteur discret : un rond 🎨, la palette se déplie dessous */
.theme-switch.in-bar { position: relative; background: none; padding: 0; margin-left: auto; margin-right: 4px; }
.ts-toggle { width: 36px !important; height: 36px !important; font-size: 17px !important; background: color-mix(in srgb, var(--ink) 6%, transparent) !important; }
.ts-pop { display: none; }
.theme-switch.in-bar .ts-pop { position: absolute; right: 0; top: calc(100% + 10px); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transform: translateY(-6px) scale(.95); pointer-events: none; transition: .25s var(--spring); }
.theme-switch.in-bar.open .ts-pop { opacity: 1; transform: none; pointer-events: auto; }
.ts-title { font: 700 11px var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 6px; }
.theme-switch:not(.in-bar) .ts-toggle { display: none; }
.theme-switch:not(.in-bar) .ts-pop { display: flex; align-items: center; gap: 4px; }
.theme-switch .lbl { display: none !important; }

/* Titre de la bouche : toujours lisible devant le visage */
.mouth-intro h2 { display: inline-block; padding: 10px 26px 14px; border-radius: 28px; background: rgba(255,255,255,.88); box-shadow: 0 14px 40px -16px rgba(60,30,70,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mouth-intro .lead { display: inline-block; margin-top: 10px; padding: 4px 14px; border-radius: 999px; background: rgba(255,255,255,.88); }
html[data-theme="nuit"] .mouth-intro h2, html[data-theme="nuit"] .mouth-intro .lead { background: rgba(16,26,60,.9); }
html[data-theme="bd"] .mouth-intro h2 { background: #fff; border: 3px solid #111; box-shadow: 5px 5px 0 #111; }

/* =====================================================================================
   ZÉRO GROS CARRÉ (demande de Jason : « interdiction partout »)
   Les textes posés sur la 3D ou la vidéo n'ont plus de boîte : lettres détourées + halo fluide sans bords.
   ===================================================================================== */
:root { --halo: #FFFFFF; --halo-ink: #2A1B2E; --halo-soft: #4A3D52; }
html[data-theme="nuit"] { --halo: #0D0D12; --halo-ink: #FFFFFF; --halo-soft: #E4E4EC; }
html[data-theme="bd"] { --halo: #FFFFFF; --halo-ink: #111114; --halo-soft: #111114; }

html :is(.card, .buy-panel, .mouth-step, .mouth-product, .mouth-intro h2, .mouth-intro .lead) {
  background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; isolation: isolate;
}
/* halo flou, en forme de nuage, jamais de bord net */
html :is(.card, .buy-panel, .mouth-step, .mouth-product)::before {
  content: ""; position: absolute; inset: -18% -14%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 72%, transparent), color-mix(in srgb, var(--halo) 38%, transparent) 62%, transparent);
  filter: blur(10px); animation: haloBreath 6s ease-in-out infinite;
}
@keyframes haloBreath { 50% { transform: scale(1.04) rotate(2deg); border-radius: 46% 54% 52% 48%; } }
/* lettres détourées (comme un autocollant) : lisibles sur n'importe quel décor */
html :is(.card, .buy-panel, .mouth-step, .mouth-product, .mouth-intro) :is(h2, h3, .buy-title) {
  color: var(--halo-ink); -webkit-text-stroke: .16em var(--halo); paint-order: stroke fill;
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--halo-ink) 22%, transparent));
}
html :is(.card, .mouth-step, .mouth-product) h3 { color: color-mix(in srgb, var(--c, var(--raspberry)) 78%, var(--halo-ink)) !important; }
html :is(.card, .buy-panel, .mouth-step, .mouth-product, .mouth-intro) :is(p, small, .buy-hook, .lead, li, .btn.link) {
  color: var(--halo-soft) !important; font-weight: 600; -webkit-text-stroke: 4px var(--halo); paint-order: stroke fill;
}
html :is(.card, .buy-panel) .btn.link { -webkit-text-stroke: 4px var(--halo); }
.buy-panel { justify-content: center; gap: 28px; }
@media (prefers-reduced-motion: reduce) { html :is(.card, .buy-panel, .mouth-step, .mouth-product)::before { animation: none; } }

/* BD : plus de bulle-boîte pour les légendes du film, juste les lettres détourées façon onomatopée */
html[data-theme="bd"] .film-cap { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; border-radius: 0;
  color: #fff; -webkit-text-stroke: .14em #111114; paint-order: stroke fill; text-shadow: 4px 4px 0 #111114; letter-spacing: .04em; }
html[data-theme="bd"] .film-cap em { color: #FFE14D; }
html[data-theme="bd"] :is(.card, .buy-panel, .mouth-step, .mouth-product) :is(h3, .buy-title) { -webkit-text-stroke: .12em #111114; color: #fff !important; text-shadow: 4px 4px 0 #111114; filter: none; }
html[data-theme="bd"] .mouth-intro h2 { -webkit-text-stroke: .1em #111114; color: #fff; text-shadow: 5px 5px 0 #111114; }

/* =====================================================================================
   THÈME DARK (remplace l'ancien « Nuit » bleu et doré, trouvé trop néon)
   Noir profond neutre façon Apple, texte blanc, lumières douces aux couleurs des livres.
   ===================================================================================== */
html[data-theme="nuit"] {
  --porcelain: #0B0B0F; --ink: #F5F5F7; --muted: #A1A1AA;
  --rose: #2A1F27; --raspberry: #FF7AB0; --raspberry-d: #F2629C; --lilac: #8B7CF6;
  --sky: #1B2533; --mint: #15302A; --butter: #FFD45C; --blue: #7DB9F0; --red: #FF7A63;
  --glass: rgba(28, 28, 34, .72); --glass-strong: rgba(36, 36, 44, .9); --glass-line: rgba(255, 255, 255, .1);
  --shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 50px -18px rgba(0,0,0,.7);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.08) inset, 0 40px 90px -24px rgba(0,0,0,.8);
}
html[data-theme="nuit"] body { background:
  radial-gradient(900px 600px at 85% -5%, rgba(106,180,227,.16), transparent 60%),
  radial-gradient(800px 600px at 5% 45%, rgba(240,90,63,.10), transparent 60%),
  radial-gradient(900px 700px at 60% 100%, rgba(62,156,124,.12), transparent 60%), #0B0B0F; }
html[data-theme="nuit"] .night-sky { display: none; }
html[data-theme="nuit"] :is(h1, h2, .hero h1) { text-shadow: 0 2px 24px rgba(0,0,0,.6); }
html[data-theme="nuit"] em { color: var(--butter); text-shadow: none; }
html[data-theme="nuit"] .btn:not(.ghost):not(.link) { box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 12px 30px -10px color-mix(in srgb, var(--c) 70%, transparent); }
html[data-theme="nuit"] .hero-veil { background: radial-gradient(circle at 50% 58%, rgba(11,11,15,0) 0 18%, rgba(11,11,15,.45) 50%, rgba(11,11,15,.9) 84%), linear-gradient(180deg, rgba(11,11,15,.6), rgba(11,11,15,0) 30%, rgba(11,11,15,.45) 75%, var(--porcelain)); }
html[data-theme="nuit"] .compass-dial circle:first-of-type { fill: rgba(30,30,38,.8); stroke: rgba(255,255,255,.25); }
html[data-theme="nuit"] .compass-dial { filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
html[data-theme="nuit"] :is(.ticks-ring, .rose) { stroke: rgba(255,255,255,.4); fill: rgba(255,255,255,.06); }
html[data-theme="nuit"] :is(.cap-ico, .res-ico, .format-ico, .feature::before, .hud-count, .flink, .code, .book-dialog .close, .mp-cover) { background: #23232B; }
html[data-theme="nuit"] .film-shade { background: linear-gradient(180deg, var(--porcelain) 0%, rgba(11,11,15,0) 18%, rgba(11,11,15,0) 55%, rgba(11,11,15,.7) 100%); }
html[data-theme="nuit"] :is(.book-dialog, .bm-pop) { background: rgba(22,22,28,.96) !important; border-color: rgba(255,255,255,.1); }
html[data-theme="nuit"] .topbar { background: rgba(18,18,24,.9) !important; }
html[data-theme="nuit"] .gl-logo span { filter: drop-shadow(0 .12em .18em rgba(0,0,0,.6)); }
html[data-theme="nuit"] .showcase-sticky { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--t2, #BFE3CD) 22%, #0B0B0F), #0B0B0F 78%); }
html[data-theme="nuit"] .mouth-sticky { background: radial-gradient(circle at 50% 45%, #3A1E2C, #16121A 62%, #0B0B0F); }
html[data-theme="nuit"] .portrait { box-shadow: var(--shadow-lg); border-color: rgba(255,255,255,.14); }
html[data-theme="nuit"] .nav-pill { background: rgba(255,255,255,.12); box-shadow: none; }
html[data-theme="nuit"] .bm-btn { background: rgba(255,255,255,.1); color: #fff; }
html[data-theme="nuit"] .theme-switch [data-set-theme="nuit"] .sw,
.theme-switch [data-set-theme="nuit"] .sw { background: linear-gradient(160deg, #3A3A44, #0B0B0F); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.3); }
html[data-theme="nuit"] .showcase .feature { background: #2B2614 !important; color: #FFE08A !important; box-shadow: 5px 6px 0 #1A1A20; }
html[data-theme="nuit"] .showcase .f2 { background: #2E1B25 !important; color: #FFC4DD !important; }
html[data-theme="nuit"] .showcase .f3 { background: #1B2333 !important; color: #C8D6FF !important; }

/* Lisibilité, tous thèmes : bulles d'astuce en bandelette (jamais blanc sur blanc en Dark) */
.bp-hint, .book-hint, html[data-theme] .bp-hint, html[data-theme] .book-hint { background: #FFF0A4 !important; color: #A3245A !important; font-family: "Fredoka", sans-serif; box-shadow: 4px 5px 0 #F6DCE8; }
html[data-theme="nuit"] :is(.bp-hook, .price) { color: color-mix(in srgb, var(--bc) 35%, #fff) !important; }
html[data-theme="nuit"] .bp-price, html[data-theme="nuit"] .demo-card { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; }
html[data-theme="nuit"] .tag { background: #2B2614 !important; color: #FFE08A !important; }
html[data-theme="nuit"] .crumb { color: #E4E4EC; }
/* badge « classement Amazon » */
.amz-rank { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 14px; border-radius: 12px; background: #FFF3D6; color: #9A4A0A; font: 700 15px "Fredoka", sans-serif; box-shadow: 4px 5px 0 #F6E0B4; rotate: -1.5deg; animation: amzPulse 3s ease-in-out infinite; }
.amz-rank b { color: #C2501A; }
@keyframes amzPulse { 50% { rotate: .5deg; scale: 1.03; } }
html[data-theme="nuit"] .amz-rank { background: #3A2A10; color: #FFD9A0; box-shadow: 4px 5px 0 #000; } html[data-theme="nuit"] .amz-rank b { color: #FFC56B; }
/* Pages livres : plus de boîtes non plus (démo, points forts, autres livres, prix) */
.book-page :is(.demo-card, .feat, .other, .bp-price), html[data-theme] .book-page :is(.demo-card, .feat, .other, .bp-price) { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.book-page .bp-price { padding-left: 0 !important; }
.book-page .feat h3 { font-family: "Fredoka", sans-serif; }
html[data-theme="nuit"] .glide-word { fill: #FFFFFF !important; }
html[data-theme="nuit"] .glide-path { stroke: rgba(255,255,255,.35) !important; }
/* Démo « la méthode en 4 secondes » : un vrai toboggan bien visible, à la couleur du livre */
.glide-path, html[data-theme] .glide-path { stroke: color-mix(in srgb, var(--bc, #E2508B) 45%, #fff) !important; stroke-width: 26 !important; filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--bc, #E2508B) 75%, #000)) drop-shadow(0 12px 14px rgba(0,0,0,.25)); }
html[data-theme="nuit"] .glide-path { stroke: color-mix(in srgb, var(--bc, #E2508B) 60%, #fff) !important; }

/* =====================================================================================
   Pages livres : même direction artistique que le site (bandelettes, rien d'enfermé dans des boîtes)
   ===================================================================================== */
.book-page .feat-grid { display: flex !important; flex-direction: column; align-items: flex-start; gap: 16px; }
.book-page .feat, html[data-theme] .book-page .feat { display: inline-flex !important; align-items: center; gap: 12px; padding: 12px 18px !important; border-radius: 14px; background: #FFF0A4 !important; box-shadow: 5px 6px 0 #F6DCE8 !important; rotate: -2deg; }
.book-page .feat:nth-child(2) { background: #F9D7E7 !important; box-shadow: 5px 6px 0 #EBC7F0 !important; rotate: 1.5deg; margin-left: 6%; }
.book-page .feat:nth-child(3) { background: #E7EDFF !important; box-shadow: 5px 6px 0 #D5DEFA !important; rotate: -1deg; margin-left: 2%; }
.book-page .feat h3, html[data-theme] .book-page .feat h3 { margin: 0; color: #A3245A !important; font: 700 clamp(18px, 2.2vw, 24px)/1.2 "Fredoka", sans-serif !important; }
.book-page .feat:nth-child(2) h3 { color: #8E2A5C !important; } .book-page .feat:nth-child(3) h3 { color: #4B4FA0 !important; }
.book-page .feat-ico { width: auto !important; height: auto !important; margin: 0 !important; background: none !important; font-size: 26px; }
.book-page .feat[data-reveal] { transition: transform .7s cubic-bezier(.3,1.5,.5,1), opacity .5s; transition-delay: var(--d, 0s); }
.book-page .steps-card, html[data-theme] .book-page .steps-card { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; }
.book-page .mini-steps { list-style: none; padding: 0; margin: 18px 0 22px; display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; position: relative; }
.book-page .mini-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; border-left: 3px dashed color-mix(in srgb, var(--bc, #E2508B) 55%, transparent); }
.book-page .mini-steps li, html[data-theme] .book-page .mini-steps li { position: relative; display: grid !important; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; padding: 10px 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.book-page .mini-steps b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bc, #E2508B) !important; color: #fff !important; font: 700 20px "Fredoka", sans-serif; box-shadow: 0 0 0 5px var(--porcelain), 0 8px 16px -6px rgba(0,0,0,.35); }
.book-page .mini-steps span, html[data-theme] .book-page .mini-steps span { color: var(--ink) !important; font: 700 17px/1.35 var(--text); }
.book-page .others { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 26px; }
.book-page .other, html[data-theme] .book-page .other { display: grid !important; justify-items: center; gap: 8px; width: 170px; padding: 0 !important; text-align: center; background: none !important; }
.book-page .other-cover { width: 130px !important; height: auto !important; aspect-ratio: 1; border-radius: 4px 10px 10px 4px; background-size: 200% 100% !important; background-position: right center !important; box-shadow: 0 20px 30px -14px rgba(42,27,46,.55); transition: transform .4s var(--spring); }
.book-page .other:hover .other-cover { transform: translateY(-8px) rotate(-4deg); }
html[data-theme="nuit"] .book-page .feat { background: #2B2614 !important; box-shadow: 5px 6px 0 #000 !important; } html[data-theme="nuit"] .book-page .feat h3 { color: #FFE08A !important; }
html[data-theme="nuit"] .book-page .feat:nth-child(2) { background: #2E1B25 !important; } html[data-theme="nuit"] .book-page .feat:nth-child(2) h3 { color: #FFC4DD !important; }
html[data-theme="nuit"] .book-page .feat:nth-child(3) { background: #1B2333 !important; } html[data-theme="nuit"] .book-page .feat:nth-child(3) h3 { color: #C8D6FF !important; }
html[data-theme="nuit"] .book-page .mini-steps b { background: color-mix(in srgb, var(--bc) 60%, #fff) !important; color: #0B0B0F !important; }

/* ---------- Sceau doré « classement Amazon » ---------- */
.amz-badge { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 16px; text-decoration: none; }
.amz-seal { position: relative; flex: none; width: 84px; height: 84px; display: grid; place-items: center; animation: sealSway 4s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(150,90,0,.35)); }
.amz-seal::before, .amz-seal::after { content: ""; position: absolute; top: 62%; width: 20px; height: 34px; background: linear-gradient(#E2508B, #B83A72); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); z-index: -1; }
.amz-seal::before { left: 22%; rotate: 18deg; } .amz-seal::after { right: 22%; rotate: -18deg; background: linear-gradient(#7FAEF0, #4B6FC2); }
.amz-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.amz-seal svg path { fill: url(#none); fill: #F2B33D; }
.amz-seal svg circle { fill: #FFD966; stroke: #E09A1F; stroke-width: 2; stroke-dasharray: 3 3; }
.amz-in { position: relative; display: grid; justify-items: center; line-height: 1; color: #7A3E00; }
.amz-in small { font: 700 9px "Fredoka", sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.amz-in b { font: 700 26px/1 "Fredoka", sans-serif; letter-spacing: -.02em; }
.amz-badge:not(.best) .amz-in b { font-size: 20px; }
.amz-in em { font: 700 9.5px "Fredoka", sans-serif; font-style: normal; }
.amz-shine { position: absolute; inset: 8px; border-radius: 50%; overflow: hidden; pointer-events: none; }
.amz-shine::after { content: ""; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); rotate: 20deg; animation: sealShine 3.6s ease-in-out infinite; }
@keyframes sealSway { 50% { rotate: -6deg; scale: 1.04; } }
@keyframes sealShine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.amz-cap { font: 700 22px/1.05 "Caveat", cursive; color: #B9620E; rotate: -2deg; }
.amz-cap > span { font-size: 17px; color: var(--muted); }
.amz-badge.sm .amz-seal { width: 66px; height: 66px; } .amz-badge.sm .amz-in b { font-size: 20px; } .amz-badge.sm .amz-cap { font-size: 18px; }
.amz-mini { display: inline-block; margin: 0 0 12px; font: 700 20px "Caveat", cursive !important; color: #B9620E !important; rotate: -2deg; }
html[data-theme="nuit"] .amz-cap { color: #FFC56B; } html[data-theme="nuit"] .amz-mini { color: #FFC56B !important; }
.amz-rank { display: none !important; } /* ancien bandeau texte, remplacé par le sceau */
@media (prefers-reduced-motion: reduce) { .amz-seal, .amz-shine::after { animation: none; } }