: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; }
[hidden] { display: none !important; }

.app-shell { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; padding: 24px 20px 42px; }
.landing { min-height: calc(100vh - 66px); display: flex; flex-direction: column; justify-content: center; }
.landing-topline { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.landing .brand-mark { display: grid; width: 27px; height: 27px; flex: none; place-items: center; border-radius: 9px; background: #ff6b5e; color: #171318; font-size: 15px; font-weight: 900; transform: rotate(-8deg); box-shadow: 0 7px 15px #ff6b5e3b; }
.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 8px; font-size: clamp(58px, 17vw, 78px); font-weight: 900; line-height: .82; letter-spacing: -.095em; text-shadow: 0 12px 30px #0000004a; }
.landing h1 span { color: #ff6b5e; }
.baseline { max-width: 300px; margin-bottom: 0; color: #ded6d7; font-size: 17px; font-weight: 650; line-height: 1.25; letter-spacing: -.035em; }
.landing-awards { position: relative; width: 100%; height: clamp(164px, 50vw, 194px); margin: 8px 0 8px; isolation: isolate; }
.landing-award-card { position: absolute; top: 5px; display: flex; width: clamp(88px, 28vw, 109px); aspect-ratio: 9 / 16; flex-direction: column; align-items: center; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 17px; padding: 13px 7px 9px; background: linear-gradient(155deg, #30213a 0%, #21162b 48%, #11151e 100%); box-shadow: 0 15px 25px #00000061, inset 0 1px #ffffff17; color: #f8f6f4; text-align: center; transform-origin: 50% 72%; }
.landing-award-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 16%, #ffffff28, transparent 29%), linear-gradient(128deg, transparent 32%, #ffffff0d 32.5%, transparent 33%); pointer-events: none; }
.landing-award-card::after { content: ""; position: absolute; right: -19%; bottom: 12%; width: 58%; aspect-ratio: 1; border: 1px solid #ff918833; border-radius: 50%; box-shadow: 0 0 0 11px #ff6b5e0b; }
.landing-award-card > * { position: relative; z-index: 1; }
.landing-award-card--left { z-index: 1; left: 11%; top: 24px; background: linear-gradient(155deg, #10253a, #15223a 53%, #10151f); transform: rotate(-10deg); animation: landing-card-left 5.6s ease-in-out infinite; }
.landing-award-card--center { z-index: 3; left: 50%; background: linear-gradient(160deg, #482128, #2b1a2d 54%, #15151d); transform: translateX(-50%) rotate(2deg); animation: landing-card-center 5s ease-in-out infinite; }
.landing-award-card--right { z-index: 2; right: 11%; top: 27px; background: linear-gradient(155deg, #302242, #1d2034 56%, #12151e); transform: rotate(10deg); animation: landing-card-right 5.3s ease-in-out infinite; }
.landing-award-emoji { margin-bottom: 5px; font-size: clamp(25px, 8vw, 31px); line-height: 1; filter: drop-shadow(0 4px 7px #00000057); }
.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: #ff6b5e; font-size: clamp(20px, 6.3vw, 25px); line-height: .88; letter-spacing: -.09em; }
.landing-award-card small { margin-top: 4px; color: #d4c8cb; 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-trust { margin: 0 0 12px; }
.privacy-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.privacy-badges span { display: inline-flex; min-height: 24px; align-items: center; border: 1px solid #5c4246; border-radius: 999px; padding: 3px 9px; background: #ff6b5e10; color: #f0d9d6; font-size: 10px; font-weight: 800; letter-spacing: .01em; }
.landing-actions { display: grid; gap: 12px; }
.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; }
.privacy-note { margin: 7px 1px 0; color: #a8a0a2; font-size: 11px; font-weight: 550; line-height: 1.35; }
.privacy-note span { color: #ff6b5e; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }

@keyframes landing-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes landing-card-left { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-5px); } }
@keyframes landing-card-center { 0%, 100% { transform: translateX(-50%) rotate(2deg) translateY(0); } 50% { transform: translateX(-50%) rotate(1deg) translateY(-7px); } }
@keyframes landing-card-right { 0%, 100% { transform: rotate(10deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-4px); } }
.landing-topline, .landing h1, .landing .baseline, .landing-awards, .landing-trust, .landing-actions, .landing .already-file { animation: landing-reveal .46s cubic-bezier(.2, .75, .25, 1) both; }
.landing h1 { animation-delay: .05s; }
.landing .baseline { animation-delay: .1s; }
.landing-awards { animation-delay: .15s; }
.landing-trust { animation-delay: .2s; }
.landing-actions { animation-delay: .25s; }
.landing .already-file { animation-delay: .3s; }

.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; }
.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; }
.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; }
.media-note { margin: 10px 0 0; color: #aaa2a5; font-size: 12px; }

.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; }
.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-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; }

.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: 112px; }
/* 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; } }

.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-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 h1, .landing .baseline, .landing-awards,
  .landing-trust, .landing-actions, .landing .already-file, .landing-award-card {
    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)); }
  .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; }
}

.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; }