/* Page d'accueil « de la nuit au matin » (7/11, maquettes validées par Gilles) : le soir on cherche seul, au réveil c'est prêt.
   Sept retouches visuelles, sans changer l'ordre des sections ni les textes. Chargé en dernier, par la seule page d'accueil. */
:root {
  --nuit: #1b2742;
  --nuit-2: #24345a;
  --crepuscule: #a9b6cc;
  --aube: #fff4e2;
  --soleil: #e39a2a;
  --soleil-texte: #85550d;
  --aube-sortie: cubic-bezier(.23, 1, .32, 1);
}

/* 1. Tableau du haut : « Seul, le soir » en bleu nuit ; « Au réveil » reste clair et s'éclaire une fois à l'arrivée,
   ligne après ligne. C'est le seul mouvement automatique de la page. Sur téléphone, le tableau empilé ne change pas. */
@media (min-width: 641px) {
  .hm .matin-compare thead th.soir { background: var(--nuit); color: var(--crepuscule); border-radius: 18px 18px 0 0; }
  .hm .matin-compare thead th.soir svg { fill: var(--crepuscule); }
  .hm .matin-compare td:not(.avec) { background: var(--nuit); color: var(--crepuscule); border-top-color: #2c3b5e; }
  .hm .matin-compare tbody tr:last-child td:not(.avec) { border-radius: 0 0 18px 18px; }
  .hm .matin-compare th.avec, .hm .matin-compare td.avec { position: relative; }
  .hm .matin-compare th.avec::after, .hm .matin-compare td.avec::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--nuit-2); opacity: 0; pointer-events: none; animation: aube-leve 560ms var(--aube-sortie) 120ms both; }
  .hm .matin-compare tbody tr:nth-child(2) td.avec::after { animation-delay: 190ms; }
  .hm .matin-compare tbody tr:nth-child(3) td.avec::after { animation-delay: 260ms; }
  .hm .matin-compare tbody tr:nth-child(4) td.avec::after { animation-delay: 330ms; }
  .hm .matin-compare tbody tr:nth-child(5) td.avec::after { animation-delay: 400ms; }
  .hm .matin-compare tbody tr:nth-child(6) td.avec::after { animation-delay: 470ms; }
}
@keyframes aube-leve { from { opacity: 1; } to { opacity: 0; } }

/* 2. Les cinq scènes : la rubrique en pastille de sa couleur, « 3 sur 5 », et la flèche nomme la scène suivante. */
.story-scene .reason-label { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 11px; border-radius: 999px; background: var(--family); color: #fff; font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.story-scene .reason-label::before { background: #fff; border-radius: 50%; opacity: .85; }
.scene-rang { margin-left: 2px; padding-left: 9px; border-left: 1px solid #ffffff73; font-weight: 600; }
.story-scene > .section-scroll.scene-scroll { width: auto; min-height: 0; display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; }
.story-scene > .scene-scroll svg { width: 44px; height: 44px; flex: 0 0 44px; }
.scene-suite { font-size: 15px; font-weight: 650; color: var(--ink); }

/* 3. « Six minutes pour commencer » : une ligne qui va de la nuit au soleil, les durées en grand. */
.begin-steps { position: relative; }
.begin-steps li { position: relative; }
.begin-steps .step-index { position: relative; z-index: 1; border-radius: 50%; background: #fbf8f3; border: 3px solid var(--nuit-2); color: var(--nuit); }
.begin-steps li:last-child .step-index { border-color: var(--soleil); background: var(--aube); color: var(--soleil-texte); box-shadow: 0 0 0 6px #e39a2a26; }
.begin-steps .step-time { font-family: var(--heading); font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; color: var(--ink); margin-bottom: 8px; }
.begin-steps li:last-child .step-time { font-size: 19px; letter-spacing: -.3px; color: var(--soleil-texte); }
@media (min-width: 901px) {
  .begin-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--nuit) 0%, var(--nuit-2) 30%, #b9825d 72%, var(--soleil) 100%); }
  .begin-steps li { flex-direction: column; gap: 16px; }
}
@media (max-width: 900px) {
  .begin-steps::before { content: none; }
  .begin-steps li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 20px; bottom: -30px; width: 5px; background: linear-gradient(180deg, var(--nuit), var(--nuit-2)); }
  .begin-steps li:nth-last-child(2)::after { background: linear-gradient(180deg, var(--nuit-2), #b9825d 60%, var(--soleil)); }
}
@media (max-width: 640px) {
  .begin-steps li:not(:last-child)::after { left: 15px; top: 17px; bottom: -25px; }
  .begin-steps .step-time { font-size: 23px; }
  .begin-steps li:last-child .step-time { font-size: 18px; }
}

/* 4. Avis : celui d'Anthony en grand, avant le défilé ; il répond au doute « encore une app de plus ». */
.avis-une { margin: 0 0 34px; padding-left: 24px; border-left: 4px solid var(--soleil); display: grid; gap: 12px; }
.avis-une .avis-etoiles { margin: 0; }
.avis-une blockquote { margin: 0; }
.avis-une blockquote p { font-family: var(--heading); font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; line-height: 1.42; letter-spacing: -.4px; color: var(--ink); max-width: 860px; }
.avis-une figcaption { font-size: 15px; color: var(--muted); }
@media (max-width: 640px) { .avis-une { padding-left: 16px; margin-bottom: 26px; } }

/* 5. Prix : les sept jours offerts, puis le 8e, où rien n'est prélevé. */
.essai-jours { list-style: none; padding: 0; margin: 20px 0 4px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 3.2fr); gap: 4px; }
.price-panel .essai-jours li { margin: 0; padding: 0; min-height: 34px; border-radius: 6px; background: #dfe6f7; color: var(--blue); font-family: var(--heading); font-size: 12px; font-weight: 700; display: grid; place-items: center; text-align: center; }
.price-panel .essai-jours li::before { content: none; }
.price-panel .essai-jours li:first-child { background: var(--blue); color: #fff; }
.price-panel .essai-jours li.j8 { padding: 3px 6px; background: var(--aube); border: 1px dashed var(--soleil); color: var(--soleil-texte); font-family: var(--body); font-size: 12px; font-weight: 650; line-height: 1.15; }
@media (max-width: 900px) {
  .essai-jours { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .price-panel .essai-jours li.j8 { grid-column: 1 / -1; padding: 7px 10px; }
}

/* 6. Fin de page : un ciel de nuit étoilé qui s'éclaire vers l'horizon, et un soleil qui pointe. Immobile. */
.final-section {
  background:
    radial-gradient(1.5px 1.5px at 6% 22%, #ffffffb3 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 15% 58%, #ffffff8c 50%, transparent 51%),
    radial-gradient(2px 2px at 24% 14%, #ffffffa6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 37% 38%, #ffffff80 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 12%, #ffffffb3 50%, transparent 51%),
    radial-gradient(2px 2px at 61% 30%, #ffffff99 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 10%, #ffffffa6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 26%, #ffffff8c 50%, transparent 51%),
    radial-gradient(2px 2px at 93% 16%, #ffffffb3 50%, transparent 51%),
    linear-gradient(180deg, #17234f 0%, #2b3270 42%, #6a4a8c 74%, #c98a72 100%);
}
.final-section > div { z-index: 1; }
.final-section::after { content: ""; position: absolute; right: calc(max(4.5vw, 24px) + 340px); bottom: -170px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, #ffe6b3 0%, #f7b867 40%, #f7b86700 70%); pointer-events: none; }
@media (max-width: 900px) { .final-section::after { right: calc(max(4.5vw, 24px) + 290px); } }
@media (max-width: 640px) { .final-section::after { right: -110px; bottom: -205px; } }
.final-section p:not(.eyebrow) { color: #e8ecf6; text-shadow: 0 0 6px #17234f; }
@media (forced-colors: active) { .final-section::before, .final-section::after { display: none; } }

/* 7. Finitions : le bouton s'enfonce à l'appui ; la réponse de la FAQ apparaît en fondu. */
.button { transition: background-color 180ms ease, border-color 180ms ease, transform 160ms var(--aube-sortie); }
.button:active { transform: scale(.97); }
.faq-list details[open] > :not(summary) { animation: aube-fondu 200ms var(--aube-sortie); }
@keyframes aube-fondu { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .hm .matin-compare th.avec::after, .hm .matin-compare td.avec::after { display: none; }
  .button { transition: none; }
  .button:active { transform: none; }
  .faq-list details[open] > :not(summary) { animation: none; }
}

/* Accueil, retouches 3 et 5 (7/11) : sous chaque scène, une ligne tirée de la journée de Claire ; après la dernière,
   le bouton d'essai sur ordinateur (sur téléphone, la barre du bas le porte déjà). */
.story-scene .story-example small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
.story-scene .scene-essai { margin-top: 24px; min-width: 280px; }
.story-scene > p.scene-essai-note { margin-top: 8px; font-size: 14px; color: var(--muted); }
.story-scene .scene-essai + .scene-essai-note + .scene-scroll { margin-top: 18px; }
@media (max-width: 760px) { .scene-essai, .scene-essai-note { display: none; } }