:root {
  --bg:#101421; --panel:#1B2232; --panel2:#222B3D; --line:rgba(237,237,242,.12);
  --text:#F4F1EB; --muted:#ADB4C3; --subtle:#798496; --accent:#EBCB9F;
  --radius:20px; --shadow:0 24px 90px rgba(0,0,0,.22);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis:none; -webkit-font-smoothing:antialiased;
  color-scheme:dark;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth; background:var(--bg)}
body {margin:0; background:var(--bg); color:var(--text); min-width:320px; min-height:100vh}
button,input {font:inherit}
button {cursor:pointer}
a {color:inherit}
button:focus-visible,input:focus-visible,[tabindex]:focus-visible {outline:3px solid #D9B6F6; outline-offset:3px}
button:disabled {opacity:.38;cursor:not-allowed}
button,a {-webkit-tap-highlight-color:transparent}
button svg {pointer-events:none}
.visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.loading-state {min-height:95vh;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:6px;color:var(--muted)}
.loading-state .brand-mark {font-family:Georgia,serif;font-size:84px;color:var(--accent)}
.app-shell {max-width:1140px; min-height:100vh;margin:0 auto;padding:0 32px 112px}
.topbar {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:31px 0 27px;border-bottom:1px solid var(--line)}
.brand {display:inline-flex;align-items:center;gap:11px;font-size:20px;font-weight:770;letter-spacing:-.8px;text-decoration:none;border:0;background:transparent;color:var(--text);padding:0}
.brand-mark {width:43px;height:43px;display:inline-grid;place-items:center;background:#283047;color:#EBCB9F;border:1px solid rgba(255,255,255,.09);border-radius:14px;font:33px/1 Georgia,serif}
.header-right {display:flex;align-items:center;gap:10px}
.quiet-pill {color:var(--muted);border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-size:12px;white-space:nowrap;letter-spacing:.02em}
.icon-button {width:43px;height:43px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:13px;display:inline-flex;align-items:center;justify-content:center;font-size:21px;line-height:1}
.icon-button:hover,.tab-button:hover,.primary-ghost:hover {background:var(--panel2)}
.desktop-nav {display:flex;align-items:center;gap:4px}
.tab-button {padding:10px 15px;min-height:43px;border:none;border-radius:12px;color:var(--muted);background:transparent;font-weight:600;font-size:13px}
.tab-button.is-active {background:#293046;color:var(--text)}
.main {padding-top:36px}
.eyebrow {color:#D6B9F3;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.hero {display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;padding:22px 0 42px}
.hero h1,.page-title {font:normal clamp(45px,6.6vw,80px)/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.055em;margin:12px 0 16px}
.hero h1 em {font-style:italic;color:#F0C993}
.hero-copy {font-size:16px;line-height:1.67;color:var(--muted);max-width:570px;margin:0 0 25px}
.hero-actions {display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.primary-button {min-height:49px;padding:12px 20px;border:0;border-radius:14px;background:#F0CB9A;color:#142032;font-weight:800;display:inline-flex;gap:12px;align-items:center;justify-content:center}
.primary-button:hover {background:#FFE0B4}
.primary-ghost {min-height:49px;padding:12px 18px;border:1px solid var(--line);border-radius:14px;color:var(--text);background:transparent;font-weight:650}
.hero-art {height:282px;border:1px solid rgba(255,255,255,.07);border-radius:27px;position:relative;overflow:hidden;background:radial-gradient(circle at 70% 80%,#46425d 0%,transparent 48%), radial-gradient(circle at 25% 20%,#384858 0%,transparent 54%), #22283c;box-shadow:var(--shadow)}
.orbit {position:absolute;border-radius:100%;border:1px solid rgba(240,214,175,.37);transform:rotate(-24deg)}
.orbit-1 {width:360px;height:250px;left:15px;top:21px}
.orbit-2 {width:275px;height:210px;left:56px;top:42px}
.orbit-3 {width:175px;height:128px;left:105px;top:83px}
.orbit-ball {position:absolute;left:66%;top:24%;width:23px;height:23px;border-radius:50%;background:#EBCB9F;box-shadow:0 0 60px #EBCB9F70}
.art-greek {position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);font:clamp(155px,17vw,210px)/1 Georgia,serif;color:#F0D4B5;text-shadow:0 20px 40px rgba(0,0,0,.17)}
.art-caption {position:absolute;left:24px;bottom:20px;color:#E9E2E0;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.section-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.section-title {font:normal 30px/1.12 Georgia,serif;margin:0 0 4px;letter-spacing:-.027em}
.section-lead {color:var(--muted);margin:0;line-height:1.5;font-size:14px}
.text-link {padding:8px 0;border:0;background:none;color:#EED1A9;font-weight:700;font-size:13px;white-space:nowrap}
.track-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:44px}
.track-card {min-height:191px;padding:20px 17px;background:var(--panel);border:1px solid var(--line);border-radius:20px;text-align:left;color:var(--text);transition:transform .17s,border-color .17s,background .17s;display:flex;flex-direction:column;gap:18px}
.track-card:hover,.series-card:hover {transform:translateY(-3px);border-color:var(--accent)}
.track-card .track-symbol {display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--track-accent) 16%,transparent);color:var(--track-accent);font-size:28px}
.track-card strong {display:block;font-size:17px;letter-spacing:-.025em}
.track-card small {display:block;margin-top:6px;font-size:12px;color:var(--muted);line-height:1.45}
.track-card .track-count {font-size:11px;color:var(--track-accent);margin-top:auto;font-weight:750}
.series-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:4px 0 36px}
.series-card {padding:0;border:1px solid var(--line);background:var(--panel);border-radius:20px;text-align:left;color:var(--text);overflow:hidden;transition:transform .17s,border-color .17s;display:flex;flex-direction:column}
.series-cover {height:148px;background:var(--series-color);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.series-cover:before,.series-cover:after {content:'';position:absolute;border-radius:50%;width:260px;height:260px;border:1px solid rgba(255,255,255,.23);transform:rotate(-20deg)}
.series-cover:before {left:-110px;top:-115px}.series-cover:after{right:-115px;bottom:-150px}
.cover-symbol {font:96px/1 Georgia,serif;color:rgba(255,255,255,.81);text-shadow:0 14px 40px rgba(0,0,0,.18)}
.cover-pill {position:absolute;left:15px;top:15px;background:rgba(10,12,22,.42);color:#fff;padding:6px 9px;border-radius:9px;font-weight:700;font-size:10px;letter-spacing:.04em;backdrop-filter:blur(10px)}
.series-body {padding:19px;display:flex;flex-direction:column;gap:7px;flex:1;min-height:158px}
.series-kicker {color:var(--accent);font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.series-body strong {font-size:18px;line-height:1.27;letter-spacing:-.025em}
.series-body p {font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.series-footer {display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;font-size:12px;color:var(--muted)}
.tiny-progress {height:4px;flex:1;max-width:68px;border-radius:5px;background:#485065;overflow:hidden}
.tiny-progress b {display:block;height:100%;border-radius:5px;background:#EBCB9F}
.recent-panel {border-radius:20px;background:linear-gradient(100deg,#2b3347,#28283f);border:1px solid rgba(255,255,255,.09);padding:19px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:40px}
.recent-panel h3 {margin:4px 0;font-size:18px}.recent-panel p {margin:0;font-size:12px;color:var(--muted)}
.page-header {padding:10px 0 25px}.page-header .page-title {font-size:clamp(39px,5vw,61px);margin-bottom:10px}.page-header p {color:var(--muted);font-size:15px;line-height:1.55;max-width:680px}
.back-button {display:flex;align-items:center;gap:9px;color:var(--muted);background:none;border:none;font-weight:700;font-size:13px;padding:9px 0;margin-bottom:8px}
.filter-row {display:flex;gap:8px;flex-wrap:wrap;margin:21px 0 22px}
.filter-chip {background:#1C2534;border:1px solid var(--line);padding:10px 14px;border-radius:999px;color:var(--muted);font-size:12px;font-weight:700;min-height:42px}
.filter-chip.is-active {color:#121724;background:#F0CB9A;border-color:transparent}
.searchbar {display:flex;gap:10px;align-items:center;background:#1B2333;border:1px solid var(--line);border-radius:15px;padding:0 16px;max-width:560px}
.searchbar .search-icon {color:#BBC2CF;font-size:23px}
.searchbar input {min-height:51px;width:100%;border:none;outline:none;background:transparent;color:var(--text);font-size:14px}
.searchbar input::placeholder{color:#9099AC}
.results-count {color:var(--subtle);font-size:13px;margin-bottom:15px}
.fav-empty {background:var(--panel);border:1px dashed #3b465a;padding:54px 20px;text-align:center;border-radius:20px;color:var(--muted)}
.fav-empty .big-icon {font-size:46px;display:block;margin:0 0 15px;color:#D9B6F6}
.fav-empty h3 {color:var(--text)}
.favorite-list {display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.favorite-card {background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:20px;text-align:left;color:var(--text);min-height:135px;display:flex;flex-direction:column;gap:11px}
.favorite-card:hover {background:var(--panel2)}
.favorite-card small {color:#EBCB9F;font-weight:700}
.favorite-card strong {font-size:16px;line-height:1.4}
.favorite-card span {font-size:12px;color:var(--muted);margin-top:auto}
.info-content {padding:8px 0 30px;max-width:740px}
.info-content p,.info-content li {color:var(--muted);line-height:1.7;font-size:15px}
.info-content strong {color:var(--text)}
.info-content h3 {font:normal 25px Georgia,serif}
.info-content ol {padding-left:24px}
.site-footer {border-top:1px solid var(--line);padding:26px 0;color:var(--subtle);display:flex;justify-content:space-between;font-size:12px;gap:15px}
.mobile-nav {display:none}
/* Lecteur de stories */
body.reader-open {overflow:hidden}
#reader:empty {display:none}
.reader-layer {position:fixed;inset:0;z-index:100;background:rgba(7,9,17,.96);display:grid;place-items:center;padding:13px}
.reader-frame {position:relative;width:min(100%,435px);height:min(92dvh,840px);min-height:530px;background:var(--reader-bg);border-radius:25px;box-shadow:0 28px 110px rgba(0,0,0,.6);overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.reader-frame:before {content:'';position:absolute;inset:-20% -50% 0 auto;width:130%;background:radial-gradient(ellipse at 68% 25%,rgba(255,255,255,.14),transparent 50%);z-index:-1;pointer-events:none}
.reader-frame:after {content:'';position:absolute;inset:auto -30% -30% auto;width:90%;aspect-ratio:1;border:1px solid rgba(255,255,255,.17);border-radius:50%;z-index:-1;pointer-events:none}
.reader-top {padding:17px 17px 0;z-index:2}
.progress-bars {display:flex;gap:4px;width:100%;padding:0 0 14px}
.progress-segment {height:3px;border-radius:3px;flex:1;background:rgba(255,255,255,.29);overflow:hidden}
.progress-segment.is-done {background:#F9F3E8}
.progress-segment.is-current {background:#F4D6AD}
.reader-header {display:flex;justify-content:space-between;align-items:center;gap:10px}
.reader-identity {display:flex;align-items:center;gap:10px;min-width:0}
.reader-logo {height:37px;width:37px;border-radius:11px;background:rgba(255,255,255,.14);display:grid;place-items:center;font:27px Georgia,serif;color:#FFF3E1}
.reader-name {font-weight:850;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.reader-counter {font-size:11px;opacity:.78;margin-top:2px}
.reader-close {border:none;background:rgba(0,0,0,.2);color:#fff;font-size:26px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px}
.story-stage {display:flex;flex:1;flex-direction:column;padding:22px 27px 16px;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.story-label {color:#FFF3DD;text-transform:uppercase;letter-spacing:.17em;font-weight:850;font-size:11px;opacity:.85;margin-bottom:17px}
.story-question {margin:0;font:normal clamp(32px,4.1vh,45px)/1.12 Georgia,serif;letter-spacing:-.044em;text-wrap:balance;max-width:100%;overflow-wrap:break-word}
.story-rule {width:53px;height:2px;background:#F6DAAE;opacity:.78;margin:27px 0 23px}
.answer-reveal {display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.36);background:rgba(255,255,255,.11);backdrop-filter:blur(8px);color:#fff;min-height:51px;padding:13px 16px;border-radius:13px;font-size:13px;font-weight:800}
.answer-reveal:hover {background:rgba(255,255,255,.2)}
.story-answer {animation:fade-in .25s ease-out;background:rgba(9,13,24,.21);border-left:2px solid #F7DBAA;border-radius:0 12px 12px 0;padding:17px 16px;max-width:100%}
.story-answer .answer-label {color:#FFDFAD;font-weight:850;font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;display:block}
.story-answer p {font-size:clamp(15px,2.15vh,19px);line-height:1.55;font-weight:470;margin:0;overflow-wrap:break-word}
.story-image {display:block;max-width:100%;max-height:100%;object-fit:contain;margin:auto;border-radius:8px}
.story-caption {font-size:13px;line-height:1.4;color:#fff;opacity:.88;margin-top:14px}
.reader-bottom {padding:15px 17px calc(15px + env(safe-area-inset-bottom));z-index:2;background:linear-gradient(0deg,rgba(5,5,12,.27),transparent)}
.story-meta {font-size:11px;opacity:.85;min-height:24px;padding:0 9px 10px}
.reader-controls {display:flex;align-items:center;gap:9px}
.reader-btn {border:1px solid rgba(255,255,255,.29);border-radius:13px;background:rgba(16,18,30,.29);color:#fff;min-width:48px;min-height:47px;display:flex;align-items:center;justify-content:center;font-size:22px}
.reader-btn:disabled {opacity:.28}
.reader-btn.favorite-on {color:#FFE09E}
.reader-btn.reader-next {flex:1;background:#FFF1D9;color:#1F2435;border:0;gap:10px;font-size:13px;font-weight:850}
.reader-desktop-hint {color:rgba(255,255,255,.44);font-size:11px;text-align:center;margin:10px 0 0}
.story-completion {align-items:center;justify-content:center;text-align:center}
@keyframes fade-in {from {opacity:0;transform:translateY(9px)} to {opacity:1;transform:translateY(0)}}
#toast {position:fixed;z-index:200;bottom:95px;left:50%;transform:translateX(-50%) translateY(25px);background:#EBCB9F;color:#172033;border-radius:12px;padding:11px 17px;font-weight:800;font-size:13px;box-shadow:0 15px 40px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;max-width:90vw;text-overflow:ellipsis;overflow:hidden}
#toast.show {opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:950px){
  .app-shell {padding:0 22px 100px}
  .hero {grid-template-columns:1.15fr .85fr;gap:18px}
  .hero h1 {font-size:60px}
  .track-grid {grid-template-columns:repeat(2,1fr)}
  .series-grid {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .app-shell {padding:0 17px 96px}
  .topbar {padding:14px 0;border-bottom:0}
  .brand {font-size:20px}.brand-mark {width:38px;height:38px;font-size:30px;border-radius:12px}
  .quiet-pill,.desktop-nav {display:none}
  .main {padding-top:13px}
  .hero {display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:6px 0 34px}
  .hero h1 {font-size:clamp(46px,12vw,63px);margin:12px 0}
  .hero-copy {font-size:14px;margin-bottom:18px}
  .hero-art {height:178px;border-radius:19px;order:-1}
  .orbit-1 {left:6%;top:-7%;width:87%;height:115%}
  .orbit-2 {left:18%;top:4%;width:65%;height:94%}
  .orbit-3 {left:32%;top:20%;width:37%;height:64%}
  .art-greek {font-size:130px}.art-caption {left:14px;bottom:13px;font-size:10px}
  .section-title {font-size:26px}
  .section-heading {margin-bottom:15px}
  .track-grid {gap:10px;margin-bottom:35px}
  .track-card {padding:15px;min-height:180px;gap:13px;border-radius:17px}
  .track-card strong {font-size:16px}.track-card small {font-size:11px}.track-card .track-symbol {width:39px;height:39px;font-size:26px}
  .series-grid {grid-template-columns:1fr;gap:13px}
  .series-card {display:grid;grid-template-columns:112px 1fr;min-height:152px;border-radius:17px}
  .series-cover {height:100%;min-height:152px}
  .series-cover .cover-pill {top:10px;left:9px;font-size:9px;padding:5px 6px}
  .cover-symbol {font-size:70px}
  .series-body {padding:14px;min-height:0;gap:6px}
  .series-body strong {font-size:16px}.series-body p {font-size:11px}.series-footer {padding-top:7px}
  .recent-panel {padding:15px;gap:10px}
  .recent-panel h3 {font-size:14px}.recent-panel .primary-button {padding:10px 13px;min-height:42px;font-size:12px}
  .page-header .page-title {font-size:44px}
  .favorite-list {grid-template-columns:1fr}
  .mobile-nav {display:flex;position:fixed;z-index:20;bottom:0;left:0;right:0;min-height:69px;padding:8px 10px calc(6px + env(safe-area-inset-bottom));background:rgba(19,24,38,.95);border-top:1px solid var(--line);backdrop-filter:blur(15px);align-items:center;justify-content:space-around}
  .mobile-tab {min-width:75px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 12px;background:transparent;border:none;color:#929BAE;font-size:10px;font-weight:700;border-radius:10px}
  .mobile-tab span {font-size:21px;line-height:1.05}
  .mobile-tab.is-active {color:#F3D4A8}
  .site-footer {display:block;text-align:center}
  .site-footer span {display:block;line-height:1.8}
  .reader-layer {padding:0}
  .reader-frame {width:100%;max-width:none;height:100dvh;min-height:0;border-radius:0}
  .story-stage {padding:25px 26px 10px}
  .story-question {font-size:clamp(30px,9vw,43px)}
  .reader-top {padding-top:calc(14px + env(safe-area-inset-top))}
  .reader-desktop-hint {display:none}
}
@media(max-height:650px){.story-stage {padding-top:10px;padding-bottom:5px}.story-question{font-size:30px}.story-rule{margin:16px 0}.story-answer p{font-size:15px}.reader-frame{min-height:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}