:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #121216;
  color: #f8f6f4;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 78% 0%, #30242a 0, #121216 35rem);
}

button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #ffaaa2; outline-offset: 3px; }
[hidden] { display: none !important; }

.app-shell { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; padding: 24px 20px 42px; }
.landing { position: relative; isolation: isolate; min-height: calc(100vh - 104px); display: flex; flex-direction: column; justify-content: center; }
.landing::before { position: absolute; z-index: -1; top: 8%; left: 50%; width: min(92vw, 520px); height: 340px; border-radius: 50%; background: radial-gradient(ellipse, #ff6b5e12, transparent 68%); content: ""; pointer-events: none; transform: translateX(-50%); }
.landing-topline { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.landing .brand-mark { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 11px; background: #ff6b5e; color: #171318; font-size: 19px; font-weight: 950; box-shadow: 0 6px 14px #ff6b5e29; }
.eyebrow { margin: 0 0 8px; color: #ff8b80; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(48px, 14vw, 68px); line-height: .94; letter-spacing: -.07em; }
.landing .eyebrow { margin: 0; font-size: 9px; letter-spacing: .145em; }
.landing h1 { margin: 0 0 7px; font-size: clamp(60px, 17vw, 82px); font-weight: 900; line-height: .82; letter-spacing: -.095em; text-shadow: 0 10px 24px #00000038; }
.landing h1 span { color: #ff6b5e; }
.baseline { max-width: 25ch; margin-bottom: 0; color: #ded6d7; font-size: 16px; font-weight: 650; line-height: 1.25; letter-spacing: -.035em; }
.landing-awards { position: relative; width: 100%; height: clamp(198px, 58vw, 236px); margin: 10px 0 2px; }
.landing-awards::before { position: absolute; top: 50%; left: 50%; width: min(72vw, 300px); height: min(72vw, 300px); border-radius: 50%; background: radial-gradient(circle, #ff6b5e1c, transparent 68%); content: ""; pointer-events: none; transform: translate(-50%, -50%); animation: landing-glow 4s ease-in-out infinite; }
.landing-awards::after { position: absolute; top: 8%; left: 50%; width: 72%; height: 78%; border: 1px solid #ffaaa20f; border-radius: 48% 52% 44% 56%; content: ""; pointer-events: none; transform: translateX(-50%) rotate(-6deg); }
.landing-award-card { position: absolute; top: 5px; display: flex; width: clamp(92px, 28vw, 116px); aspect-ratio: 9 / 16; flex-direction: column; align-items: center; overflow: hidden; border: 1px solid #51464f; border-radius: 19px; padding: 14px 8px 10px; background: linear-gradient(155deg, #30252f, #1d1b22 68%); box-shadow: 0 18px 34px #00000052, inset 0 1px 0 #ffffff14; color: #f8f6f4; text-align: center; transform-origin: 50% 72%; animation: landing-card-in .65s ease-out both; }
.landing-award-card::before { position: absolute; z-index: 0; top: -28%; left: -30%; width: 120%; height: 65%; border-radius: 50%; background: #ff8b8017; content: ""; filter: blur(10px); transform: rotate(-14deg); }
.landing-award-card::after { position: absolute; z-index: 0; right: 8px; bottom: 8px; left: 8px; height: 1px; background: linear-gradient(90deg, transparent, #ffaaa242, transparent); content: ""; }
.landing-award-card > * { position: relative; z-index: 1; }
.landing-award-card--left { z-index: 1; left: 11%; top: 24px; animation-delay: .08s; transform: rotate(-10deg); }
.landing-award-card--center { z-index: 3; left: 50%; border-color: #76515a; background: linear-gradient(155deg, #3a2531, #241b23 68%); animation-delay: .16s; transform: translateX(-50%) rotate(2deg); }
.landing-award-card--right { z-index: 2; right: 11%; top: 27px; animation-delay: .24s; transform: rotate(10deg); }
.landing-award-emoji { margin-bottom: 5px; font-size: clamp(25px, 8vw, 31px); line-height: 1; }
.landing-award-title { max-width: 100%; min-height: 20px; color: #ff8b80; font-size: 6px; font-weight: 900; letter-spacing: .1em; line-height: 1.12; }
.landing-award-card strong { margin-top: 3px; font-size: clamp(10px, 3.1vw, 12px); letter-spacing: -.045em; }
.landing-award-card b { margin-top: auto; color: #ff8b80; font-size: clamp(20px, 6.3vw, 25px); line-height: .88; letter-spacing: -.09em; }
.landing-award-card small { margin-top: 4px; color: #c5bdc0; font-size: 6px; font-weight: 700; line-height: 1; }
.landing-award-brand { display: grid; position: absolute !important; right: 8px; bottom: 8px; width: 14px; height: 14px; place-items: center; border-radius: 5px; background: #ff6b5e; color: #21171a; font-size: 8px; font-weight: 900; }
.landing-demo-note { margin: 3px 0 0; color: #81797c; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-align: center; }
.privacy-reassurance { margin: 13px 0 10px; border: 1px solid #6e5559; border-radius: 18px; padding: 14px; background: linear-gradient(125deg, #2a2025, #1b191f); box-shadow: inset 0 1px 0 #ffffff0a; }
.privacy-reassurance-heading { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.privacy-reassurance-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: #ff6b5e20; color: #ffad9f; font-size: 21px; font-weight: 900; line-height: 1; }
.privacy-reassurance h2 { margin: 1px 0 5px; font-size: 17px; line-height: 1.15; letter-spacing: -.035em; }
.privacy-promise { margin: 0; color: #ffd5ce; font-size: 13px; font-weight: 800; line-height: 1.35; }
.privacy-mechanism { margin: 3px 0 0; color: #ece4e4; font-size: 13px; line-height: 1.4; }
.landing-trust-details { margin-top: 12px; border: 1px solid #39333a; border-radius: 13px; background: #1a181d; }
.landing-trust-details > summary { display: flex; min-height: 45px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; color: #e9e1e2; font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.landing-trust-details > summary::-webkit-details-marker { display: none; }
.landing-trust-details > summary::after { color: #ff8b80; content: "+"; font-size: 18px; font-weight: 500; }
.landing-trust-details[open] > summary { border-bottom: 1px solid #39333a; }
.landing-trust-details[open] > summary::after { content: "−"; }
.landing-trust-copy { display: grid; gap: 9px; padding: 12px 13px 13px; }
.landing-trust-copy p { margin: 0; color: #b7afb1; font-size: 11px; line-height: 1.43; }
.landing-trust-copy p::before { margin-right: 6px; color: #ff8b80; content: "•"; }
.landing-actions { display: grid; gap: 10px; margin-top: 1px; }
.button { display: flex; min-height: 56px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 16px; padding: 12px 20px; font-weight: 800; text-align: center; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.button:active, .back-button:active { transform: scale(.98); }
.button-primary { background: #ff6b5e; color: #21171a; box-shadow: 0 10px 28px #ff6b5e33; }
.button-secondary { border-color: #4b4548; background: #211f24; color: #f8f6f4; }
.already-file { display: block; width: max-content; margin: 13px auto 0; color: #bcb4b6; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.landing-free-note { margin: 9px auto 0; color: #aaa2a5; font-size: 10px; font-weight: 700; }
@keyframes landing-card-in { from { opacity: 0; filter: blur(3px) saturate(.7); } to { opacity: 1; filter: none; } }
@keyframes landing-glow { 50% { opacity: .72; transform: translate(-50%, -50%) scale(1.08); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }


.results-header { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: start; margin: 12px 0 26px; }
.back-button { width: 38px; height: 38px; border: 1px solid #474146; border-radius: 12px; background: #211f24; color: #fff; font-size: 22px; line-height: 1; }
.results-header h1 { margin-bottom: 6px; font-size: 31px; letter-spacing: -.045em; overflow-wrap: anywhere; }
.period { margin: 0; color: #aca5a7; font-size: 13px; line-height: 1.35; }
.message-count { display: grid; margin: 2px 0 0; color: #958e91; font-size: 11px; text-align: right; }
.message-count strong { color: #f8f6f4; font-size: 23px; line-height: 1; letter-spacing: -.04em; }
.dashboard { margin: 0 0 26px; }
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 0 0 16px; }
.dashboard-heading .eyebrow { margin-bottom: 6px; }
.dashboard-heading h2 { margin: 0; font-size: clamp(24px, 6.6vw, 31px); line-height: 1; letter-spacing: -.055em; }
.dashboard-story-link { flex: none; margin-bottom: 2px; color: #ffaaa2; font-size: 12px; font-weight: 850; text-decoration: none; white-space: nowrap; }
.dashboard-story-link:hover { color: #fff0ec; }
.ceremony-button { width: 100%; min-height: 49px; margin: 0 0 13px; border-radius: 14px; }
.dashboard .stats-grid { margin-top: 0; }
.dashboard .authors-section { margin-top: 29px; }
.story-continue { display: grid; gap: 14px; margin: 4px 0 17px; border: 1px solid #ff8b8045; border-radius: 20px; padding: 18px; background: linear-gradient(135deg, #ff6b5e16, #1d1b21 58%); }
.story-continue .eyebrow { margin-bottom: 7px; }
.story-continue h2 { margin: 0 0 7px; font-size: clamp(25px, 7vw, 34px); line-height: .98; letter-spacing: -.06em; }
.story-continue p:not(.eyebrow) { max-width: 37ch; margin: 0; color: #cec4c6; font-size: 14px; line-height: 1.42; }
.story-continue-link { width: 100%; min-height: 50px; }
#journey-root { scroll-margin-top: 14px; }
.story-details { margin-top: 28px; border: 1px solid #3c363d; border-radius: 18px; background: #19181d; }
.story-details > summary { display: flex; min-height: 56px; align-items: center; justify-content: space-between; padding: 13px 16px; color: #f0e8e8; font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; }
.story-details > summary::-webkit-details-marker { display: none; }
.story-details > summary::after { color: #ff8b80; content: "+"; font-size: 21px; font-weight: 500; transition: transform .18s ease; }
.story-details[open] > summary { border-bottom: 1px solid #3c363d; }
.story-details[open] > summary::after { transform: rotate(45deg); }
.story-details-content { padding: 19px 14px 14px; }
.results-actions { display: grid; gap: 10px; }
.results-actions .button { width: 100%; margin: 0; }
.coverage-note { margin: -10px 0 20px; padding: 12px 14px; border: 1px solid #765946; border-radius: 12px; background: #332821; color: #ebc8a5; font-size: 13px; line-height: 1.4; }
.cards-create-button { width: 100%; margin: 0 0 22px; }
.moments-button { width: 100%; margin: -10px 0 22px; }
.quiz-button { width: 100%; margin: -10px 0 22px; }
.wallpaper-button { width: 100%; margin: -10px 0 22px; }
.souvenir-panel { margin: -10px 0 22px; padding: 14px; border: 1px solid #3c363d; border-radius: 16px; background: #1c1a20; }
.souvenir-button { width: 100%; min-height: 48px; }
.souvenir-panel p { margin: 9px 2px 0; color: #aaa2a5; font-size: 11px; line-height: 1.4; }
.souvenir-panel .souvenir-status { min-height: 0; color: #d8d0d1; font-weight: 650; overflow-wrap: anywhere; }
.souvenir-panel .souvenir-status:empty { display: none; }
.souvenir-panel .souvenir-status.is-error { color: #ffaaa2; }
.insights-panel { margin: -10px 0 28px; padding: 14px; border: 1px solid #3c363d; border-radius: 16px; background: #1c1a20; }
.insights-button { width: 100%; min-height: 48px; }
.insights-panel p { margin: 9px 2px 0; color: #aaa2a5; font-size: 11px; line-height: 1.4; }
.insights-panel .insights-status { min-height: 0; color: #d8d0d1; font-weight: 650; }
.insights-panel .insights-status:empty { display: none; }
.insights-panel .insights-status.is-error { color: #ffaaa2; }
/* Le widget Turnstile n'occupe de la place que si Cloudflare décide de se montrer. */
.turnstile-host { display: flex; justify-content: center; margin: 10px 0 0; }

/* Bannière publicitaire : même gabarit que les cartes, annoncée comme telle, et
   inexistante tant que public/ads.js n'est pas armé (l'hôte reste `hidden`). */
.ad-slot { display: block; width: min(100%, 430px); margin: 18px auto 4px; border: 1px solid #2f2b32; border-radius: 16px; padding: 10px; background: #17161a; text-align: center; }
.ad-slot-label { margin: 0 0 8px; color: #7c757a; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ad-slot .adsbygoogle { display: block; min-height: 90px; }
.turnstile-host:empty { margin: 0; }
.stats-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-card, .author-card { border: 1px solid #383338; border-radius: 18px; background: #211f24; box-shadow: 0 12px 26px #00000014; }
.stat-card { min-height: 126px; padding: 17px; }
.stat-label { margin-bottom: 12px; color: #aaa2a5; font-size: 12px; font-weight: 700; }
.stat-value { display: block; font-size: 31px; line-height: 1; letter-spacing: -.06em; }
.stat-detail { margin: 9px 0 0; color: #c7bfc1; font-size: 12px; line-height: 1.35; }
.chart-card { grid-column: 1 / -1; min-height: 182px; }
.hourly-chart { display: grid; height: 117px; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; }
.chart-column { display: grid; height: 100%; grid-template-rows: 1fr 15px; align-items: end; min-width: 0; }
.chart-fill { display: block; width: 100%; min-height: 3px; align-self: end; border-radius: 4px 4px 1px 1px; background: #ff6b5e; }
.chart-hour { display: block; color: #8c8487; font-size: 8px; line-height: 15px; text-align: center; }
.level-0 { height: 3px; opacity: .22; }.level-1 { height: 5%; }.level-2 { height: 10%; }.level-3 { height: 15%; }.level-4 { height: 20%; }.level-5 { height: 25%; }.level-6 { height: 30%; }.level-7 { height: 35%; }.level-8 { height: 40%; }.level-9 { height: 45%; }.level-10 { height: 50%; }.level-11 { height: 55%; }.level-12 { height: 60%; }.level-13 { height: 65%; }.level-14 { height: 70%; }.level-15 { height: 75%; }.level-16 { height: 80%; }.level-17 { height: 85%; }.level-18 { height: 90%; }.level-19 { height: 95%; }.level-20 { height: 100%; }

.authors-section { margin-top: 38px; }
.section-heading h2 { margin-bottom: 16px; font-size: 25px; line-height: 1.05; letter-spacing: -.05em; }
.author-list { display: grid; gap: 12px; }
.author-card { padding: 18px; }
.author-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.author-heading h3 { margin: 0; font-size: 20px; letter-spacing: -.035em; overflow-wrap: anywhere; }
.author-share { flex: none; color: #ff8b80; font-size: 14px; font-weight: 800; }
.author-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; margin: 0; }
.author-fact dt { margin-bottom: 4px; color: #958e91; font-size: 11px; }
.author-fact dd { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.emoji-line { margin: 19px 0 0; padding-top: 14px; border-top: 1px solid #39343a; color: #f1dfd8; font-size: 15px; min-height: 35px; }
.signature-words { margin: 10px 0 0; color: #ffb0a7; font-size: 12px; line-height: 1.4; }
.media-note { margin: 10px 0 0; color: #aaa2a5; font-size: 12px; }

/* Le récit est entièrement rendu par journey-ui.js. Ces classes donnent au DOM
   dynamique la même matière que le reste du produit, sans styles inline. */
#journey-root:empty { display: none; }
.journey { border: 1px solid #3c363d; border-radius: 22px; padding: 18px; background: #1c1a20; box-shadow: 0 12px 28px #00000024; }
.journey-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.journey-topline > * { margin: 0; }
.journey-topline, .journey-kicker { color: #ffaaa2; font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.journey-chapters { position: relative; z-index: 1; display: flex; gap: 7px; margin: 0 0 23px; overflow-x: auto; scrollbar-width: none; }
.journey-chapters::-webkit-scrollbar { display: none; }
.journey-chapter { min-width: 29px; height: 7px; flex: 1; border: 0; border-radius: 99px; padding: 0; background: #ffffff22; color: transparent; transition: background .2s ease, transform .2s ease; }
.journey-chapter.is-active { background: #ff6b5e; box-shadow: 0 0 0 3px #ff6b5e21; }
.journey-chapter:focus-visible { outline: 2px solid #fff0ec; outline-offset: 3px; }
.journey-stage { position: relative; z-index: 1; min-height: 285px; border: 1px solid #3c363d; border-radius: 18px; padding: clamp(20px, 6vw, 31px); background: #211f24; }
.journey-stage.is-revealed { border-color: #6b5152; background: #252024; }
.journey-kicker { margin: 0 0 12px; }
.journey-title { max-width: 13ch; margin: 0; font-size: clamp(29px, 8.2vw, 46px); font-weight: 900; line-height: .96; letter-spacing: -.068em; text-wrap: balance; }
.journey-copy { max-width: 36ch; margin: 15px 0 0; color: #d9d0d2; font-size: 15px; line-height: 1.45; }
.journey-value { display: block; margin-top: 23px; color: #ff8b80; font-size: clamp(45px, 14vw, 76px); font-weight: 900; line-height: .85; letter-spacing: -.09em; }
.journey-unit { display: block; clear: both; margin: 9px 0 0; color: #beb4b7; font-size: 13px; font-weight: 750; line-height: 1.3; letter-spacing: normal; }
.journey-recipient { display: inline-flex; margin-top: 16px; border: 1px solid #ffffff1c; border-radius: 999px; padding: 6px 10px; color: #f0e4e2; font-size: 12px; font-weight: 750; }
.journey-reveal { display: inline-flex; min-height: 42px; align-items: center; margin-top: 19px; border: 1px solid #ff8b8066; border-radius: 12px; padding: 9px 13px; background: #ff6b5e1c; color: #ffcdc6; font-size: 13px; font-weight: 800; }
.journey-reveal:active { transform: scale(.98); }
.journey-source { margin: 17px 0 0; color: #968c90; font-size: 11px; line-height: 1.35; }
.journey-controls { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 15px; }
.journey-progress { color: #bdb3b6; font-size: 12px; font-weight: 750; text-align: center; }
.journey-next, .journey-prev { min-width: 44px; min-height: 44px; border: 1px solid #ffffff22; border-radius: 13px; padding: 8px 12px; background: #ffffff0c; color: #f8f1f0; font-weight: 850; }
.journey-next { border-color: #ff6b5e; background: #ff6b5e; color: #251618; }
.journey-next:disabled, .journey-prev:disabled { opacity: .35; cursor: default; }
.journey-finale { position: relative; z-index: 1; padding: 2px 1px 0; }
.journey-paths { display: grid; gap: 10px; margin-top: 20px; }
.journey-path { display: block; width: 100%; border: 1px solid #454046; border-radius: 15px; padding: 15px; background: #211f24; color: #f6eeee; text-align: left; }
.journey-path--primary { border-color: #ff6b5e8c; background: #2a2023; }
.journey-path-title { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 850; }
.journey-path-copy { display: block; color: #cfc4c5; font-size: 12px; line-height: 1.4; }
.journey-fact { margin: 18px 0 0; color: #e4d9d9; font-size: 15px; font-weight: 650; line-height: 1.4; }
.journey-orbit { display: none; }
.journey-people { display: flex; margin-top: 18px; }
.journey-person { display: grid; width: 34px; height: 34px; margin-left: -7px; place-items: center; border: 2px solid #211a20; border-radius: 50%; background: #514150; color: #fff3ef; font-size: 12px; font-weight: 850; }
.journey-person:first-child { margin-left: 0; background: #ff6b5e; color: #26181a; }
.journey-secondary { margin-top: 13px; color: #a69b9e; font-size: 12px; line-height: 1.4; }
.journey-saved { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: #abe4bf; font-size: 12px; font-weight: 800; }
.journey-emoji { display: inline-grid; width: 1.45em; height: 1.45em; place-items: center; border-radius: 7px; background: #ff6b5e20; }

.moments { min-height: calc(100vh - 66px); padding-bottom: 24px; }
.moments-header { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; margin: 12px 0 16px; }
.moments-header h1 { margin: 0 0 8px; font-size: 38px; letter-spacing: -.055em; }
.moments-header p:not(.eyebrow) { margin: 0; color: #c7bfc1; font-size: 14px; line-height: 1.45; }
.moments-status { min-height: 22px; margin: 0 0 14px; color: #ffb0a7; font-size: 13px; font-weight: 750; }
.moments-list { display: grid; gap: 12px; }
.moment-candidate { border: 1px solid #3d373c; border-radius: 18px; padding: 15px; background: #211f24; }
.moment-candidate-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.moment-choice { display: inline-flex; align-items: center; gap: 9px; color: #f8f6f4; font-size: 13px; font-weight: 800; cursor: pointer; }
.moment-choice input { width: 19px; height: 19px; accent-color: #ff6b5e; }
.moment-meta { margin: 0; color: #a9a1a4; font-size: 11px; text-align: right; }
.moment-text { display: block; width: 100%; min-height: 94px; resize: vertical; border: 1px solid #514a4f; border-radius: 12px; padding: 11px 12px; background: #17161a; color: #f8f6f4; font: inherit; font-size: 15px; line-height: 1.45; }
.moment-text:focus { border-color: #ff8b80; outline: 2px solid #ff6b5e33; }
.moment-hint { margin: 8px 1px 0; color: #958e91; font-size: 11px; line-height: 1.35; }
.moments-generate { position: sticky; bottom: 12px; width: 100%; margin-top: 18px; }

.quiz { min-height: calc(100vh - 66px); padding-bottom: 24px; }
.quiz-header { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: start; margin: 12px 0 24px; }
.quiz-header h1 { margin: 0; font-size: 38px; letter-spacing: -.055em; }
.quiz-round { margin: 5px 0 0; color: #ff8b80; font-size: 15px; font-weight: 850; }
.quiz-review { display: grid; gap: 14px; margin: 4px 0 20px; border: 1px solid #514249; border-radius: 22px; padding: 20px; background: linear-gradient(145deg, #302027, #211f24 64%, #19171c); box-shadow: 0 16px 34px #0000002b; }
.quiz-review h2 { margin: 0; font-size: clamp(27px, 7vw, 37px); line-height: 1; letter-spacing: -.055em; }
.quiz-review > p { margin: -6px 0 2px; color: #c7bfc1; font-size: 14px; line-height: 1.4; }
.quiz-review-list { display: grid; gap: 8px; }
.quiz-review-item { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; border: 1px solid #ffffff16; border-radius: 13px; padding: 11px 12px; background: #ffffff08; color: #e8e0e1; font-size: 13px; font-weight: 700; line-height: 1.32; cursor: pointer; }
.quiz-review-item input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: #ff6b5e; }
.quiz-review-launch, .quiz-review-replace { width: 100%; min-height: 50px; }
.quiz-review-replace { margin-top: -5px; }
.quiz-question-card { position: relative; min-height: 220px; overflow: hidden; border: 1px solid #514249; border-radius: 24px; padding: 38px 25px 26px; background: linear-gradient(145deg, #332127, #211f24 63%, #19171c); box-shadow: 0 18px 38px #0000002e; }
.quiz-quote-mark { display: block; height: 40px; color: #ff6b5e; font-family: Georgia, serif; font-size: 92px; font-weight: 800; line-height: .65; }
.quiz-question { margin: 16px 0 0; color: #f8f6f4; font-size: clamp(22px, 6.2vw, 31px); font-weight: 750; line-height: 1.21; letter-spacing: -.035em; text-wrap: balance; }
.quiz-feedback { min-height: 25px; margin: 15px 3px 10px; color: #c9c3c1; font-size: 14px; font-weight: 800; }
.quiz-feedback.is-correct { color: #8ed6a4; }
.quiz-feedback.is-wrong { color: #ffaaa2; }
.quiz-next { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; margin: 2px 0 3px; border: 1px solid #ff6b5e; border-radius: 12px; padding: 8px 14px; background: #ff6b5e; color: #251618; font-size: 13px; font-weight: 850; }
.quiz-choices { display: grid; gap: 10px; }
.quiz-choice { width: 100%; min-height: 58px; border: 1px solid #4b4548; border-radius: 16px; padding: 12px 18px; background: #211f24; color: #f8f6f4; font-weight: 800; text-align: left; overflow-wrap: anywhere; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.quiz-choice:active { transform: scale(.985); }
.quiz-choice.is-correct { border-color: #56b475; background: #1d4030; color: #d8f6e2; }
.quiz-choice.is-wrong { border-color: #df716b; background: #4a2929; color: #ffd7d3; }
.quiz-choice:disabled { cursor: default; opacity: 1; }
.quiz-final { display: grid; gap: 12px; padding: 28px 0 0; text-align: center; }
.quiz-final .eyebrow { margin-bottom: 0; }
.quiz-score { color: #ff6b5e; font-size: clamp(72px, 25vw, 126px); line-height: .9; letter-spacing: -.095em; }
.quiz-summary { max-width: 31ch; margin: 2px auto 14px; color: #d5cdcf; font-size: 17px; line-height: 1.4; }

.cards { min-height: calc(100vh - 66px); }
.cards-header, .cards-detail-header { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; margin: 12px 0 24px; }
.cards-header h1 { margin: 0; font-size: 38px; letter-spacing: -.055em; }
.cards-detail-header { align-items: center; margin-bottom: 16px; }
.cards-detail-header h2 { margin: 0; font-size: 19px; letter-spacing: -.03em; }
.cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Collant : le message d'arrivée reste lisible même une fois descendu sur les cartes neuves. */
.cards-status { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; gap: 8px; margin: -12px 0 16px; padding: 12px 14px; border: 1px solid #ff6b5e4d; border-radius: 14px; background: #2c1e22; color: #ffd9d3; font-size: 13px; font-weight: 700; line-height: 1.35; box-shadow: 0 10px 22px #0c0b0e8c; }
.cards-thumbnail { position: relative; display: grid; width: 100%; min-height: 252px; overflow: hidden; place-items: center; border: 1px solid #4b4548; border-radius: 18px; padding: 0; background: linear-gradient(145deg, #31222c, #17161a); color: #f8f6f4; box-shadow: 0 12px 26px #0000001f; }
.cards-thumbnail:focus-visible, .cards-detail-actions .button:focus-visible { outline: 3px solid #ff8b80; outline-offset: 3px; }
.cards-thumbnail.is-fresh { border-color: #ff6b5e; box-shadow: 0 0 0 2px #ff6b5e6b, 0 12px 26px #0000001f; animation: cards-fresh 1.5s ease-out 2; }
@keyframes cards-fresh { 0%, 100% { box-shadow: 0 0 0 2px #ff6b5e6b, 0 12px 26px #0000001f; } 50% { box-shadow: 0 0 0 7px #ff6b5e2e, 0 12px 26px #0000001f; } }
.cards-thumbnail-label { padding: 18px; color: #c9c3c1; font-size: 13px; font-weight: 800; text-align: center; }
.cards-thumbnail-canvas { display: block; width: 100%; height: auto; }
.cards-detail { min-height: calc(100vh - 90px); padding-bottom: 24px; }
.cards-detail-canvas { display: block; width: min(100%, 430px); max-height: calc(100vh - 220px); margin: 0 auto; border: 1px solid #4b4548; border-radius: 20px; background: #17161a; box-shadow: 0 18px 42px #00000042; }
.cards-detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 430px); margin: 16px auto 0; }
.cards-detail-actions .button { min-height: 50px; padding: 10px 12px; }

.wallpaper { min-height: calc(100vh - 66px); padding-bottom: 24px; }
.wallpaper-header { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; margin: 12px 0 20px; }
.wallpaper-header h1 { margin: 0 0 8px; font-size: 38px; letter-spacing: -.055em; }
.wallpaper-lede { margin: 0; max-width: 34ch; color: #c7bfc1; font-size: 14px; line-height: 1.45; }
.wallpaper-designs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.wallpaper-design { min-height: 46px; border: 1px solid #4b4548; border-radius: 999px; padding: 8px 17px; background: #211f24; color: #d8d0d2; font-size: 14px; font-weight: 800; letter-spacing: -.015em; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.wallpaper-design.is-active { border-color: #ff6b5e; background: #ff6b5e; color: #21171a; }
.wallpaper-design:focus-visible, .wallpaper-toggle:focus-within { outline: 3px solid #ff8b80; outline-offset: 3px; }
.wallpaper-preview { display: grid; place-items: center; }
.wallpaper-canvas { display: block; width: auto; max-width: 100%; height: min(58vh, 520px); border: 1px solid #4b4548; border-radius: 26px; background: #17161a; box-shadow: 0 20px 44px #0000004d; }
.wallpaper-toggle { display: flex; align-items: flex-start; gap: 11px; margin: 20px auto 0; max-width: 430px; border: 1px solid #3d373c; border-radius: 16px; padding: 14px 15px; background: #211f24; cursor: pointer; }
.wallpaper-toggle input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: #ff6b5e; }
.wallpaper-toggle strong { display: block; font-size: 14px; font-weight: 800; }
.wallpaper-toggle small { display: block; margin-top: 4px; color: #a9a1a4; font-size: 12px; line-height: 1.35; }
.wallpaper-download { width: min(100%, 430px); margin: 14px auto 0; }
.wallpaper-hint { max-width: 430px; margin: 11px auto 0; color: #958e91; font-size: 12px; line-height: 1.4; text-align: center; }
.wallpaper-status { min-height: 20px; max-width: 430px; margin: 8px auto 0; color: #ffb0a7; font-size: 13px; font-weight: 750; text-align: center; }

.error-panel { max-width: 390px; margin: 22vh auto 0; text-align: center; }
.error-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 22px; place-items: center; border-radius: 50%; background: #452b2a; color: #ff8b80; font-size: 28px; font-weight: 900; }
.error-panel h2 { margin-bottom: 12px; font-size: 28px; letter-spacing: -.05em; }
.error-panel p { margin-bottom: 28px; color: #b7afb1; line-height: 1.5; }

.tutorial { min-height: calc(100vh - 66px); padding-bottom: 142px; }
/* pan-y pinch-zoom : le scroll vertical et le zoom restent natifs, le glissement horizontal est à nous. */
.tutorial-content { min-height: calc(100vh - 178px); display: flex; flex-direction: column; padding-top: 15px; touch-action: pan-y pinch-zoom; }
.tutorial-platform { display: inline-flex; width: max-content; margin: 3px 0 15px; padding: 5px 11px; border: 1px solid #4d363c; border-radius: 999px; background: #2a1e22; color: #ff8b80; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.tutorial-step-number { margin: 0 0 7px; color: #9a9295; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tutorial h1 { margin-bottom: 11px; font-size: clamp(31px, 9.2vw, 44px); font-weight: 850; line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; }
.tutorial-instruction { max-width: 32ch; margin: 0 0 22px; color: #ded6d7; font-size: 17px; font-weight: 500; line-height: 1.48; }
/* Le cadre est piloté par la HAUTEUR disponible (largeur en vh, ratio 390/620 des captures) :
   la capture n'est jamais rognée — les % de l'anneau « tap » restent donc valides — et le
   bouton principal reste au-dessus de la barre basse sans scroller. */
.tutorial-visual { position: relative; display: grid; width: min(100%, 30vh); align-self: center; overflow: hidden; place-items: center; border: 1px solid #4c4650; border-radius: 30px; padding: 7px; background: linear-gradient(158deg, #332d37, #1b1a1f 58%); box-shadow: 0 22px 46px #00000059, inset 0 1px 0 #ffffff12; }
.tutorial-visual::before { content: ""; position: absolute; z-index: 2; top: 7px; left: 50%; width: 62px; height: 13px; border-radius: 0 0 9px 9px; background: #0d0c10; transform: translateX(-50%); }
.tutorial-visual img { display: block; width: 100%; height: auto; }
.tutorial-visual.is-fallback { width: 100%; min-height: 220px; }
.tutorial-visual.is-fallback::before { display: none; }
.tutorial-visual.is-fallback::after { content: "L'illustration sera disponible ici."; padding: 24px; color: #958e91; font-size: 14px; text-align: center; }
.tutorial-visual.is-fallback img, .tutorial-visual.is-fallback .tap-ring { display: none; }
.tutorial-content.with-install .tutorial-visual { width: min(100%, 21vh); }
.tap-anchor { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 24px; line-height: 0; }
.tap-ring { position: absolute; z-index: 1; width: 44px; height: 44px; border: 3px solid #ff6b5e; border-radius: 50%; box-shadow: 0 0 0 7px #ff6b5e33; pointer-events: none; transform: translate(-50%, -50%); animation: tutorial-pulse 1.5s ease-out infinite; }
@keyframes tutorial-pulse { 0% { transform: translate(-50%, -50%) scale(.76); opacity: 1; } 72% { transform: translate(-50%, -50%) scale(1.16); opacity: .8; } 100% { transform: translate(-50%, -50%) scale(1.16); opacity: 0; } }
/* margin-top auto : sur une étape sans capture, les boutons descendent sous le pouce. */
.tutorial-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 20px; }
.tutorial-actions .button { width: 100%; }
.tutorial-next { min-height: 50px; border: 1px solid #4b4548; border-radius: 15px; background: #211f24; color: #efe9ea; font-weight: 800; transition: transform .15s ease, border-color .15s ease; }
.tutorial-next:active { transform: scale(.98); border-color: #6b6167; }
.tutorial-swipe-hint { display: none; margin: 13px 0 0; color: #8d8588; font-size: 13px; text-align: center; }
@media (pointer: coarse) { .tutorial-swipe-hint { display: block; } }

/* Les libellés de navigation localisés restent entiers sur les écrans les plus étroits. */
@media (max-width: 380px) {
  .journey-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-progress { grid-column: 1 / -1; grid-row: 2; }
  .journey-prev, .journey-next { width: 100%; }
}

.tutorial-install { margin-top: 13px; padding: 13px 15px; border: 1px solid #3d373b; border-radius: 18px; background: #1d1b21; }
.tutorial-install-title { margin: 0 0 9px; color: #d3cbcd; font-size: 14px; font-weight: 800; }
.tutorial-install-button { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; border: 1px solid #ff6b5e; border-radius: 14px; background: #ff6b5e1f; color: #ff8b80; font-weight: 800; transition: transform .15s ease; }
.tutorial-install-button:active { transform: scale(.98); }
.tutorial-install-hint { margin: 0; color: #aaa2a5; font-size: 14px; line-height: 1.45; }
.tutorial-install-done { margin: 0; color: #8ed6a4; font-size: 14px; font-weight: 750; line-height: 1.45; }

.tutorial-bottom-bar { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; width: min(100%, 720px); margin: 0 auto; padding: 13px 20px max(15px, env(safe-area-inset-bottom)); border-top: 1px solid #413a41; background: linear-gradient(#1a191ee6, #131217f7); backdrop-filter: blur(14px); }
.tutorial-progress { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.tutorial-progress span { display: block; width: 8px; height: 8px; border-radius: 50%; background: #5f585d; transition: width .28s cubic-bezier(.3, .8, .3, 1), background-color .28s ease, box-shadow .28s ease; }
.tutorial-progress span[aria-current="step"] { width: 26px; border-radius: 5px; background: #ff6b5e; box-shadow: 0 0 0 3px #ff6b5e29; }
.tutorial-back, .tutorial-file-link { border: 0; border-radius: 11px; background: transparent; color: #e9e3e3; font-size: 14px; font-weight: 750; transition: transform .15s ease, color .15s ease; }
.tutorial-back { grid-column: 1; justify-self: start; padding: 7px 12px 7px 0; }
.tutorial-back:active, .tutorial-file-link:active { transform: scale(.97); }
.tutorial-file-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; border: 1px solid #4e4145; padding: 9px 14px; background: #241d20; color: #ff8b80; }
.tutorial-file-privacy { grid-column: 1 / -1; margin: 0; color: #aaa2a5; font-size: 11px; line-height: 1.35; }
.tutorial-desktop-url { margin: 12px 0 26px; color: #ff8b80; font-size: clamp(34px, 11vw, 52px); font-weight: 900; letter-spacing: -.07em; }
.tutorial-desktop-note { margin-top: auto; padding: 18px; border: 1px solid #3d373b; border-radius: 18px; background: #211f24; color: #c9c3c1; line-height: 1.45; }
/* Sur desktop c'est l'encadré qui absorbe l'espace libre, pas les boutons. */
.tutorial-desktop-note + .tutorial-actions { margin-top: 0; padding-top: 14px; }

/* Transition de glissement entre étapes : sortie courte, entrée depuis le côté opposé. */
@keyframes tutorial-out-next { to { opacity: 0; transform: translateX(-26px); } }
@keyframes tutorial-out-prev { to { opacity: 0; transform: translateX(26px); } }
@keyframes tutorial-in-next { from { opacity: 0; transform: translateX(26px); } }
@keyframes tutorial-in-prev { from { opacity: 0; transform: translateX(-26px); } }
@keyframes tutorial-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tutorial-content.is-out-next { animation: tutorial-out-next .11s ease-in both; }
.tutorial-content.is-out-prev { animation: tutorial-out-prev .11s ease-in both; }
.tutorial-content.is-in-next { animation: tutorial-in-next .17s ease-out both; }
.tutorial-content.is-in-prev { animation: tutorial-in-prev .17s ease-out both; }
/* Le contenu est reconstruit à chaque étape : ces animations rejouent donc d'elles-mêmes. */
.tutorial-step-number, .tutorial h1, .tutorial-instruction, .tutorial-visual,
.tutorial-actions, .tutorial-swipe-hint, .tutorial-install { animation: tutorial-rise .34s ease-out both; }
.tutorial h1 { animation-delay: .03s; }
.tutorial-instruction { animation-delay: .06s; }
.tutorial-visual { animation-delay: .09s; }
.tutorial-actions { animation-delay: .12s; }
.tutorial-swipe-hint, .tutorial-install { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .tutorial-content, .tutorial-content.is-out-next, .tutorial-content.is-out-prev,
  .tutorial-content.is-in-next, .tutorial-content.is-in-prev, .tutorial-step-number,
  .tutorial h1, .tutorial-instruction, .tutorial-visual, .tutorial-actions,
  .tutorial-swipe-hint, .tutorial-install, .tutorial-progress span, .tap-ring,
  .landing-topline, .landing-eyebrow, .landing h1, .landing .baseline, .landing-mystery,
  .landing-awards::before, .landing-award-card, .privacy-reassurance, .landing-actions,
  .landing .already-file, .landing-free-note,
  .cards-thumbnail.is-fresh {
    animation: none;
    transition: none;
  }
}

@media (min-width: 560px) {
  .app-shell { padding-top: 44px; }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chart-card { grid-column: span 2; }
  .author-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallpaper-designs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tutorial-bottom-bar { right: max(20px, calc((100vw - 720px) / 2)); left: max(20px, calc((100vw - 720px) / 2)); width: auto; border-right: 1px solid #3c363a; border-left: 1px solid #3c363a; border-radius: 18px 18px 0 0; }
}

/* Le voile d'attente vit hors de <main> : il couvre l'écran pendant une génération
   longue et bloque au passage tout second clic. */
.busy-overlay { position: fixed; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px; inset: 0; background: #0c0b0ee8; backdrop-filter: blur(3px); }
.busy-card { display: flex; width: min(100%, 320px); flex-direction: column; align-items: center; gap: 18px; border: 1px solid #4b4548; border-radius: 22px; padding: 30px 24px; background: linear-gradient(155deg, #2a1d24, #17161a); box-shadow: 0 22px 54px #00000066; }
.busy-spinner { width: 46px; height: 46px; border: 4px solid #ffffff1f; border-top-color: #ff6b5e; border-radius: 50%; animation: busy-spin .85s linear infinite; }
.busy-text { margin: 0; color: #f8f6f4; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; }
@keyframes busy-spin { to { transform: rotate(360deg); } }

.error-diagnostic { margin-top: 10px; color: #958e91; font-size: 12px; font-family: ui-monospace, monospace; word-break: break-all; }
.app-version { margin-top: 14px; color: #4a444a; font-size: 10px; }

/* Sélecteur de langue : présent partout, discret partout. Assez grand pour le pouce,
   assez effacé pour ne jamais concurrencer les actions de la page. */
.app-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 26px; padding-top: 14px; border-top: 1px solid #ffffff0f; }
.footer-legal { padding: 4px 8px; color: #6f676c; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: color .15s ease; }
.footer-legal:hover { color: #bcb4b6; text-decoration: underline; }
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-option { min-width: 38px; min-height: 30px; border: 0; border-radius: 9px; padding: 4px 8px; background: transparent; color: #6f676c; font-size: 11px; font-weight: 800; letter-spacing: .08em; transition: color .15s ease, background .15s ease; }
.lang-option:hover { color: #bcb4b6; }
.lang-option.is-active { background: #ff6b5e14; color: #ff8b80; }
.lang-separator { color: #3d383d; font-size: 11px; }

/* — Observatoire : la mémoire locale, l'écran qui croise les conversations —
   Toute dimension dépendant des données (largeur de barre, couleur d'une conversation)
   est posée par CSSOM depuis observatory-ui.js : la CSP interdit les styles inline. */
.button-ghost { min-height: 46px; border-color: #ffffff1c; background: #ffffff08; color: #d9d1d3; font-size: 14px; }
.button-ghost:hover { border-color: #ff6b5e4d; color: #f8f6f4; }
.metrics-toggle { display: block; margin: 12px auto 0; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 11px; }
.guide-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 11px; }
.guide-links a { color: #aaa2a5; }
#commerce { max-width: 520px; margin: 20px auto; padding: 24px; border: 1px solid #5a4145; border-radius: 22px; background: radial-gradient(circle at 90% 0, #ff6b5e1c, transparent 45%), #1b191f; }
#commerce h1 { margin: 22px 0 16px; font-size: clamp(32px, 8vw, 48px); line-height: 1; }
#commerce > p { color: #c9c1c3; line-height: 1.5; font-size: 14px; overflow-wrap: anywhere; }
#commerce .button { width: 100%; margin: 18px 0; }
#commerce details { margin-top: 24px; padding-top: 16px; border-top: 1px solid #4b4548; }
#commerce summary { padding: 8px 0; cursor: pointer; }
#commerce label { display: block; margin: 12px 0 6px; font-size: 13px; }
#commerce input { width: 100%; min-height: 48px; padding: 10px; border: 1px solid #76686d; border-radius: 9px; background: #121216; color: #f8f6f4; }
#commerce a { color: #ffa197; overflow-wrap: anywhere; }
.observatory-entry { width: 100%; }

.observatory-add-panel { margin: -10px 0 22px; padding: 14px; border: 1px solid #3c363d; border-radius: 16px; background: #1c1a20; }
.observatory-add { width: 100%; }
.observatory-add-note { margin: 9px 2px 0; color: #aaa2a5; font-size: 11px; line-height: 1.4; }
.observatory-add-status { margin: 8px 2px 0; color: #9fe0bd; font-size: 12px; font-weight: 650; line-height: 1.4; }
.observatory-add-status:empty { display: none; }
.observatory-add-status.is-error { color: #ffaaa2; }
.observatory-add-panel .observatory-entry { margin-top: 12px; }

.observatory { min-height: calc(100vh - 66px); padding-bottom: 24px; }
.observatory-header { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; margin: 12px 0 22px; }
.observatory-header h1 { margin: 0 0 8px; font-size: 38px; letter-spacing: -.055em; }
.observatory-lede { margin: 0; color: #c7bfc1; font-size: 14px; line-height: 1.45; }
.observatory-unavailable { margin: 0 0 20px; padding: 12px 14px; border: 1px solid #765946; border-radius: 12px; background: #332821; color: #ebc8a5; font-size: 13px; line-height: 1.4; }

.observatory-conversations { margin-bottom: 32px; }
.observatory-list { display: grid; gap: 10px; }
.observatory-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; border: 1px solid #383338; border-radius: 16px; padding: 14px 15px; background: #211f24; }
.observatory-item-dot { width: 10px; height: 10px; align-self: start; margin-top: 5px; border-radius: 50%; background: #ff6b5e; }
.observatory-item-body { min-width: 0; }
.observatory-item-name { margin: 0 0 4px; font-size: 17px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.observatory-item-meta { margin: 0; color: #958e91; font-size: 11px; line-height: 1.35; }
.observatory-item-count { margin: 5px 0 0; color: #ff8b80; font-size: 12px; font-weight: 750; }
.observatory-remove { min-height: 34px; align-self: center; border: 1px solid #4b4548; border-radius: 10px; padding: 5px 12px; background: #191820; color: #bcb4b6; font-size: 12px; font-weight: 700; }
.observatory-remove:hover { border-color: #7a4c4c; color: #ffaaa2; }
.observatory-clear { display: block; width: max-content; margin: 14px auto 0; border: 0; background: transparent; color: #8c8487; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.observatory-clear:hover { color: #ffaaa2; }

.observatory-empty { border: 1px dashed #4b4548; border-radius: 18px; padding: 24px 20px; background: #1a1920; text-align: center; }
.observatory-empty h2 { margin-bottom: 10px; font-size: 22px; letter-spacing: -.04em; }
.observatory-empty p { margin: 0 auto 18px; max-width: 380px; color: #b7afb1; font-size: 13px; line-height: 1.5; }

.observatory-me { display: grid; gap: 8px; margin-bottom: 34px; padding: 15px; border: 1px solid #3c363d; border-radius: 16px; background: #1c1a20; }
.observatory-me-label { color: #aaa2a5; font-size: 12px; font-weight: 700; }
.observatory-me-select { min-height: 44px; border: 1px solid #4b4548; border-radius: 12px; padding: 8px 12px; background: #211f24; color: #f8f6f4; font-size: 15px; font-weight: 700; }
.observatory-me-hint { margin: 0; color: #8c8487; font-size: 11px; line-height: 1.4; }

.observatory-view { margin-bottom: 38px; }
.observatory-view-lede { margin: -8px 0 16px; color: #a8a0a2; font-size: 12px; line-height: 1.45; }
.observatory-view-note { margin: 10px 2px 0; color: #958e91; font-size: 12px; }
.observatory-canvas { display: block; width: 100%; height: 300px; border: 1px solid #383338; border-radius: 18px; background: #1a1920; }
.observatory-legend { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.observatory-legend-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center; color: #c7bfc1; font-size: 12px; }
.observatory-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff6b5e; }
.observatory-legend-item.is-group .observatory-legend-dot { box-shadow: 0 0 0 2px #ffffff26; }
.observatory-legend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.observatory-legend-value { color: #8c8487; font-size: 11px; font-weight: 700; }

#observatory-rankings .stat-value.is-name { font-size: 21px; line-height: 1.1; letter-spacing: -.04em; overflow-wrap: anywhere; }

.portrait-list { display: grid; gap: 12px; }
.portrait-row { border: 1px solid #383338; border-radius: 18px; padding: 16px; background: #211f24; }
.portrait-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.portrait-head h3 { margin: 0; font-size: 17px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.portrait-share { flex: none; color: #ff8b80; font-size: 13px; font-weight: 800; }
.portrait-track { height: 6px; margin-bottom: 15px; border-radius: 999px; background: #ffffff12; overflow: hidden; }
.portrait-fill { display: block; height: 100%; border-radius: 999px; background: #ff6b5e; }
.portrait-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.portrait-fact dt { margin-bottom: 4px; color: #958e91; font-size: 11px; line-height: 1.25; }
.portrait-fact dd { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: -.02em; }

@media (min-width: 560px) {
  .observatory-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; }
  .portrait-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* — Pack Yapped+ (la caisse). Invisible tant que le paywall est éteint. — */
.pack { min-height: calc(100vh - 66px); padding-bottom: 24px; }
/* Cible de défilement, pas un élément interactif : pas de halo de focus sur toute la section. */
.pack:focus-visible { outline: none; }
.pack-header { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; margin: 12px 0 22px; }
.pack-header h1 { margin: 0 0 8px; font-size: 38px; letter-spacing: -.055em; }
.pack-lede { margin: 0; color: #b7afb1; font-size: 14px; line-height: 1.45; }
.pack-list { display: grid; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }
.pack-item { display: flex; align-items: flex-start; gap: 11px; border: 1px solid #383338; border-radius: 16px; padding: 14px 16px; background: #211f24; font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.02em; }
.pack-item::before { flex: none; color: #ff6b5e; font-weight: 900; content: "+"; }
.pack-offer { border: 1px solid #3c363d; border-radius: 18px; padding: 16px; background: #1c1a20; }
.pack-price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; color: #aaa2a5; font-size: 12px; }
.pack-price strong { color: #f8f6f4; font-size: 30px; font-weight: 900; letter-spacing: -.05em; }
.pack-trust { margin: 11px 2px 0; color: #aaa2a5; font-size: 11px; line-height: 1.4; }
.pack-status { min-height: 0; margin: 14px 0 0; color: #d8d0d1; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.pack-status:empty { display: none; }
.pack-status.is-error { color: #ffaaa2; }
.pack-owned { border: 1px solid #ff6b5e4d; border-radius: 18px; padding: 16px; background: #251d21; }
.pack-owned p { margin: 0 0 10px; color: #b7afb1; font-size: 12px; line-height: 1.45; }
.pack-owned-title { color: #ff8b80 !important; font-size: 15px !important; font-weight: 800; }
.pack-owned-link { color: #f8f6f4 !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px !important; overflow-wrap: anywhere; user-select: all; }
.pack-restore { margin-top: 18px; border: 1px solid #383338; border-radius: 16px; padding: 12px 16px; background: #1a181d; }
.pack-restore summary { color: #d8d0d2; font-size: 13px; font-weight: 750; cursor: pointer; }
.pack-restore-hint { margin: 12px 0 10px; color: #aaa2a5; font-size: 11px; line-height: 1.45; }
.pack-restore-input { width: 100%; min-height: 46px; margin-bottom: 10px; border: 1px solid #4b4548; border-radius: 12px; padding: 10px 12px; background: #121216; color: #f8f6f4; font-size: 13px; }
.pack-restore-input:focus-visible, .pack-restore summary:focus-visible { outline: 3px solid #ff8b80; outline-offset: 3px; }

/* Les mentions « c'est dans le pack » sont des boutons : chaque cadenas mène à la caisse. */
.pack-hint { display: block; width: 100%; margin: 9px 0 0; border: 0; border-radius: 10px; padding: 4px 0; background: none; color: #ff8b80; font-size: 11px; font-weight: 750; line-height: 1.4; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.pack-hint:focus-visible { outline: 3px solid #ff8b80; outline-offset: 3px; }
.moments .pack-hint, .wallpaper .pack-hint { margin: 0 0 14px; }
.button.is-locked::after, .wallpaper-design.is-locked::after { margin-left: 8px; font-size: .85em; content: "🔒"; }
.wallpaper-design.is-locked { border-style: dashed; color: #a49a9d; }

/* Explicit import routes, available on every device. */
.tutorial-paths { display: grid; gap: 14px; margin: 10px 0 24px; }
.tutorial-path-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 14px; align-items: center; min-height: 116px; padding: 20px 16px; border: 1px solid #64505a; border-radius: 22px; background: linear-gradient(125deg, #35242e, #211e28); color: #fff3ee; text-align: left; cursor: pointer; }
.tutorial-path-card:hover { border-color: #ff8b80; background: #3b2630; }
.tutorial-path-card:focus-visible, .tutorial-change-path:focus-visible { outline: 3px solid #ffad89; outline-offset: 4px; }
.tutorial-path-icon { display: grid; place-items: center; width: 42px; height: 48px; border-radius: 13px; background: #ff8b8020; color: #ffad89; font-size: 31px; }
.tutorial-path-card strong { display: block; font-size: 19px; line-height: 1.25; }
.tutorial-path-copy { display: block; margin-top: 7px; color: #d2c2c9; font-size: 14px; line-height: 1.45; }
.tutorial-path-privacy { margin: 0; color: #b9adaf; font-size: 13px; line-height: 1.5; }
.tutorial-change-path { align-self: center; margin-top: 20px; padding: 12px; border: 0; background: transparent; color: #ffad9f; font-weight: 700; text-decoration: underline; cursor: pointer; }
.tutorial-desktop-steps { display: grid; gap: 15px; margin: 0 0 22px; padding-left: 25px; color: #ded6d7; line-height: 1.5; }
.tutorial-desktop-steps li::marker { color: #ffad89; font-weight: 800; }

.tutorial-route-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 24px; padding: 5px; border: 1px solid #56434c; border-radius: 17px; background: #17151b; }
.tutorial-route-switch button { min-height: 48px; padding: 10px 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #c9bcc1; font-size: 13px; font-weight: 750; line-height: 1.3; cursor: pointer; }
.tutorial-route-switch button[aria-pressed="true"] { border-color: #ad665f; background: #4a2a30; color: #fff1eb; }
.tutorial-route-switch button:focus-visible { outline: 3px solid #ffad89; outline-offset: 2px; }