/* ═══════════════════════════════════════════════════════════════════
   Luminote — site vitrine. DA reprise de l'app (refonte V7) :
   fond nuit #0f172a + lueurs radiales, cartes « chunky », Quicksand,
   dégradé 7 notes réservé à la clé de sol (signature de marque).
   Aucune ressource externe : polices auto-hébergées (assets/fonts/).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Polices (identiques à l'app) ── */
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/quicksand-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/quicksand-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/quicksand-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/quicksand-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/quicksand-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/quicksand-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/quicksand-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/quicksand-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bravura : uniquement pour la clé de sol du hero (glyphe SMuFL U+E050). */
@font-face {
  font-family: 'Bravura'; font-style: normal; font-weight: 400; font-display: block;
  src: url('fonts/Bravura.woff2') format('woff2');
}

/* ── Tokens (mêmes valeurs que src/styles/tokens.js de l'app) ── */
:root {
  --ink-950: #0f172a;
  --ink-900: #1a1f2e;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-subtle: #7688a0;
  --text-bright: #F3F6FF;
  --sky: #38bdf8;
  --blue-300: #93c5fd;
  --blue-500: #3b82f6;
  --indigo: #818cf8;
  --mint: #10b981;
  --amber: #fbbf24;
  --emerald-500: #2EA65C;
  --emerald-600: #1E8248;
  --emerald-700: #155E35;
  --raised: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  --border-subtle: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.12);
  --chunk: 0 4px 0 rgba(2,6,23,.8);
  --top-edge: inset 0 1px 0 rgba(255,255,255,.08);
  --radius-card: 20px;
  --radius-control: 14px;
}

/* ── Base ── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text);
  font-family: 'Quicksand', -apple-system, 'Segoe UI', sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Lueurs radiales fixes (mêmes stops que StarBackground de l'app). */
.glow {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(720px 480px at 50% -60px, rgba(56,189,248,.10), transparent 70%),
    radial-gradient(640px 560px at 92% 38%, rgba(129,140,248,.09), transparent 70%);
}
/* Étoiles : deux couches de points en box-shadow, scintillement très lent. */
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stars i {
  position: absolute; top: 0; left: 0; width: 2px; height: 2px;
  border-radius: 50%; background: transparent;
}
.stars i:first-child {
  box-shadow:
    8vw 12vh 0 0 rgba(255,255,255,.38), 21vw 68vh 0 0 rgba(255,255,255,.22),
    34vw 28vh 0 -.5px rgba(255,255,255,.30), 47vw 82vh 0 0 rgba(255,255,255,.20),
    58vw 12vh 0 -.5px rgba(255,255,255,.34), 71vw 52vh 0 0 rgba(255,255,255,.24),
    83vw 22vh 0 0 rgba(255,255,255,.36), 92vw 74vh 0 -.5px rgba(255,255,255,.22),
    15vw 44vh 0 -1px rgba(255,255,255,.18), 64vw 88vh 0 -1px rgba(255,255,255,.18);
  animation: twinkle 5.5s ease-in-out infinite;
}
.stars i:last-child {
  box-shadow:
    12vw 86vh 0 0 rgba(255,255,255,.26), 27vw 8vh 0 -.5px rgba(255,255,255,.30),
    41vw 56vh 0 -1px rgba(255,255,255,.18), 53vw 34vh 0 0 rgba(255,255,255,.28),
    66vw 18vh 0 -.5px rgba(255,255,255,.22), 77vw 78vh 0 0 rgba(255,255,255,.30),
    88vw 44vh 0 -1px rgba(255,255,255,.18), 96vw 10vh 0 0 rgba(255,255,255,.26),
    5vw 62vh 0 -.5px rgba(255,255,255,.24), 37vw 94vh 0 0 rgba(255,255,255,.20);
  animation: twinkle 7s ease-in-out 2.2s infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ── Bascule de langue : .L caché sauf langue active ── */
.L { display: none !important; }
html.lang-fr .L.fr, html.lang-en .L.en, html.lang-es .L.es { display: revert !important; }

/* ── Liens, focus, sélection ── */
a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(56,189,248,.30); }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* ── Header commun ── */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0 0.6rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em;
  color: var(--text-bright);
  text-shadow: 0 0 18px rgba(56,189,248,.35);
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }

/* Sélecteur de langue : pill sombre, comme dans l'app. */
.lang-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: rgba(30,41,59,.6); border: 1px solid var(--border-subtle);
  border-radius: 999px;
}
.lang-switch button {
  appearance: none; border: 0; cursor: pointer;
  font: 700 .72rem/1 'Quicksand', sans-serif; letter-spacing: .06em;
  color: var(--text-muted); background: transparent;
  padding: .42rem .66rem; border-radius: 999px;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] {
  color: var(--text-bright); background: rgba(255,255,255,.14);
}

/* ── Cartes « chunky » (relief V7) ── */
.card {
  background: var(--raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--chunk), var(--top-edge);
}

/* ── Boutons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: 700 1.02rem/1.2 'Quicksand', sans-serif;
  border-radius: 18px; padding: .95rem 1.5rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .06s ease, box-shadow .06s ease, filter .15s ease;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn-cta {
  color: #fff;
  background: linear-gradient(180deg, var(--emerald-500), var(--emerald-600));
  box-shadow: 0 4px 0 var(--emerald-700), var(--top-edge);
}
.btn-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--emerald-700), var(--top-edge); }
.btn-ghost {
  color: var(--text);
  background: var(--raised);
  border-color: var(--border-subtle);
  box-shadow: var(--chunk), var(--top-edge);
}
.btn-ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(2,6,23,.8), var(--top-edge); }
/* Badge Play Store inactif (« Bientôt disponible ») */
.btn-store {
  color: var(--text-muted);
  background: rgba(30,41,59,.55);
  border-color: var(--border-subtle);
  cursor: default; opacity: .8;
}
.btn-store small { display: block; font-weight: 500; font-size: .68rem; letter-spacing: .04em; color: var(--text-subtle); }
.btn-store .store-lines { text-align: left; line-height: 1.25; }

/* ── Hero ── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; padding: 3.2rem 0 3.6rem; }
.hero-copy { max-width: 34rem; }
/* Clé de sol Bravura au dégradé 7 notes — LA signature de marque. */
.clef {
  font-family: 'Bravura', serif; font-size: 120px; line-height: 0;
  /* L'encre du glyphe déborde largement du corps (≈1,1 em au-dessus de la
     ligne de base, ≈0,66 em en dessous) : padding en em, sinon le haut de la
     clé est tronqué par le background-clip. */
  display: inline-block; padding: 1.2em 0.1em 0.75em;
  background: linear-gradient(180deg, #ffb02e 0%, #ff6a5f 32%, #e0559f 55%, #8a5cff 75%, #2e8bff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,130,90,.18));
  user-select: none;
}
.hero h1 {
  margin: .4rem 0 .3rem;
  font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 700; letter-spacing: -.03em;
  color: var(--text-bright);
  text-shadow: 0 0 28px rgba(56,189,248,.35);
}
.hero h1 .sparkle { display: inline-block; vertical-align: super; margin-left: .18rem; }
.baseline {
  margin: 0 0 1.1rem;
  font-size: 1.06rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sky);
}
.lede { margin: 0 0 1.8rem; font-size: 1.12rem; color: var(--text-muted); max-width: 30rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ── Téléphone (démo + captures) ── */
.phone {
  position: relative;
  width: 300px; aspect-ratio: 300 / 634;
  border-radius: 38px;
  background: #0b101f;
  border: 2px solid #262f45;
  box-shadow: 0 24px 60px rgba(2,6,23,.6), var(--top-edge);
  padding: 10px;
  flex-shrink: 0;
}
.phone::before { /* poinçon caméra */
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: #1e293b; z-index: 3;
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 28px; overflow: hidden; background: var(--ink-950);
}
.phone-screen img, .phone-screen video, .phone-screen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.phone-screen img, .phone-screen video { object-fit: cover; }
/* Voile + bouton play par-dessus la capture, tant que la démo n'est pas lancée */
.demo-cover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: .6rem; padding-bottom: 2.1rem;
  background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.88) 88%);
  border: 0; cursor: pointer; width: 100%;
  font-family: 'Quicksand', sans-serif;
}
.demo-cover .play-round {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--emerald-500), var(--emerald-600));
  box-shadow: 0 4px 0 var(--emerald-700), 0 0 26px rgba(46,166,92,.45), var(--top-edge);
  transition: transform .12s ease;
}
.demo-cover:hover .play-round { transform: scale(1.06); }
.demo-cover .play-round svg { margin-left: 4px; }
.demo-cover span { color: var(--text-bright); font-weight: 700; font-size: .95rem; }
.demo-note { margin-top: .8rem; text-align: center; font-size: .8rem; color: var(--text-subtle); }
.demo-note a { color: var(--text-muted); text-decoration: underline; }

/* ── Sections ── */
section { padding: 2.6rem 0; }
.eyebrow {
  margin: 0 0 .4rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle);
}
h2.section-title {
  margin: 0 0 1.6rem; font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 700; letter-spacing: -.02em; color: var(--text-bright);
}

/* 3 points clés : tuiles teintées façon V7 (bleu / émeraude / ambre). */
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.key-card { padding: 1.5rem 1.4rem; }
.key-tile {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 1rem;
  border: 1px solid var(--border-strong);
}
.key-tile.t-blue    { background: rgba(59,130,246,.16);  box-shadow: 0 0 22px rgba(59,130,246,.18); }
.key-tile.t-mint    { background: rgba(16,185,129,.15);  box-shadow: 0 0 22px rgba(16,185,129,.16); }
.key-tile.t-amber   { background: rgba(251,191,36,.14);  box-shadow: 0 0 22px rgba(251,191,36,.15); }
.key-card h3 { margin: 0 0 .35rem; font-size: 1.08rem; font-weight: 700; color: var(--text-bright); }
.key-card p { margin: 0; font-size: .95rem; color: var(--text-muted); }

/* Bande de captures réelles */
.shots { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; }
.shots .phone { width: 236px; }
.shots figcaption {
  text-align: center; margin-top: .75rem;
  font-size: .85rem; font-weight: 600; color: var(--text-muted);
}
.shots figure { margin: 0; }

/* Le programme : chiffres de la méthode + exercices avancés */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 2.4rem; }
.stat { padding: 1.2rem 1rem; text-align: center; }
.stat .num {
  display: block; font-size: 2.1rem; font-weight: 700; line-height: 1.15;
  color: var(--text-bright); text-shadow: 0 0 22px rgba(56,189,248,.30);
}
.stat .lbl { display: block; margin-top: .15rem; font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.program-lede { margin: 0 0 2rem; max-width: 40rem; color: var(--text-muted); font-size: 1.05rem; }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:last-child { grid-column: 1 / -1; }
}

/* Bandeau final */
.closing { text-align: center; padding: 3.4rem 0 4.2rem; }
.closing .clef { font-size: 64px; }
.closing h2 { margin: .3rem 0 .5rem; font-size: 1.7rem; font-weight: 700; color: var(--text-bright); letter-spacing: -.02em; }
.closing p { margin: 0 auto 1.6rem; max-width: 30rem; color: var(--text-muted); }

/* ── Footer commun ── */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 1.8rem 0 2.4rem; margin-top: 2rem;
  font-size: .86rem; color: var(--text-subtle);
}
.site-footer .foot-inner { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text); }

/* ── Pages légales (lecture longue) ── */
.doc { max-width: 46rem; margin: 0 auto; padding: 1.2rem 1.25rem 3rem; }
.doc-header { padding: 2.2rem 0 1.4rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.8rem; }
.doc-header h1 { margin: 0 0 .4rem; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; color: var(--text-bright); }
.doc-header .updated { margin: 0; color: var(--text-subtle); font-size: .88rem; }
.doc h2 { margin: 2.2rem 0 .7rem; font-size: 1.12rem; font-weight: 700; color: var(--text-bright); }
.doc h2 .num { color: var(--text-subtle); font-weight: 500; margin-right: .5rem; }
.doc p, .doc li { color: var(--text); }
.doc p { margin: 0 0 .9rem; }
.doc ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.doc li { margin-bottom: .4rem; }
.doc strong { color: var(--text-bright); }
/* Cartouche « l'essentiel » en tête de la politique */
.callout {
  padding: 1.1rem 1.25rem; margin: 0 0 1.6rem;
  border-left: 3px solid var(--emerald-500);
}
.callout p { margin: 0; font-weight: 600; color: var(--text-bright); }
.doc address { font-style: normal; }
.doc .kv { margin: 0 0 .9rem; padding-left: 0; list-style: none; }
.doc .kv li { margin-bottom: .3rem; }
.doc .kv .k { color: var(--text-muted); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 2rem; }
  .hero-copy { max-width: 36rem; }
  .lede { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .keys { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .phone { width: min(300px, 88vw); }
  .btn { width: 100%; }
  .cta-row { flex-direction: column; align-items: stretch; }
}

/* ── Accessibilité : mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}