/* Cléo — mêmes tokens que l'app (kit « Warm editorial »), pour que le site et l'app
   soient visiblement la même chose. Les valeurs sont copiées d'Assets.xcassets. */

:root {
  --background: #FBF7F0;
  --surface: #FFFFFF;
  --text: #24201B;
  --text-secondary: #6B6157;
  --text-muted: #9C9186;
  --accent: #C2603B;
  --accent-soft: rgba(194, 96, 59, 0.12);
  --border: rgba(36, 32, 27, 0.10);
  --radius: 24px;
  --radius-sm: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #17130F;
    --surface: #211C17;
    --text: #F3ECE1;
    --text-secondary: rgba(243, 236, 225, 0.66);
    --text-muted: rgba(243, 236, 225, 0.42);
    --accent: #E0865C;
    --accent-soft: rgba(224, 134, 92, 0.18);
    --border: rgba(243, 236, 225, 0.12);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "New York", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 2.5em 0 0.6em; }
h3 { font-size: 1.2rem; margin: 1.8em 0 0.4em; }

a { color: var(--accent); text-underline-offset: 3px; }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

header.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.brand { font-family: "New York", Georgia, serif; font-size: 1.25rem; font-weight: 600; text-decoration: none; color: var(--text); }
.lang { font-size: 0.9rem; color: var(--text-secondary); text-decoration: none; }

.hero { padding: 64px 0 32px; }
.hero p.lede { font-size: 1.2rem; color: var(--text-secondary); margin: 0 0 2rem; }

.cta {
  display: inline-block; background: var(--accent); color: #fff;
  padding: 14px 28px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.cta[aria-disabled="true"] { background: var(--text-muted); pointer-events: none; }
.cta-note { display: block; margin-top: 10px; font-size: 0.9rem; color: var(--text-muted); }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 24px 0; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.card h3 { margin-top: 0; }
.card p { margin: 0; color: var(--text-secondary); font-size: 0.98rem; }

.keypoint {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: var(--radius-sm); padding: 16px 20px; margin: 24px 0;
}

/* Captures d'écran.
   Une bande qui défile horizontalement plutôt qu'une grille : quatre écrans de téléphone
   côte à côte sur une colonne de 720 px donneraient des vignettes illisibles, et les
   empiler ferait descendre le prix trop bas dans la page. Le débordement est assumé et
   se prolonge jusqu'aux bords de la fenêtre. */
.shots { margin: 40px 0; }
.shot-row {
  display: flex; gap: 20px; overflow-x: auto; padding: 8px 24px 20px;
  margin: 0 -24px; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.shot-row figure { margin: 0; flex: 0 0 220px; scroll-snap-align: start; }
.shot-row img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface);
}
.shot-row figcaption {
  margin-top: 10px; font-size: 0.88rem; color: var(--text-muted); line-height: 1.4;
}
@media (min-width: 900px) {
  /* Sur large, la bande s'aligne sur la colonne de texte au lieu de coller au bord. */
  .shot-row { margin: 0; padding-left: 0; padding-right: 0; }
}

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-muted); font-weight: 500; }

.legal { padding-bottom: 64px; }
.legal p, .legal li { color: var(--text-secondary); }
.legal strong { color: var(--text); }

footer {
  border-top: 1px solid var(--border); margin-top: 64px; padding: 24px 0 48px;
  font-size: 0.9rem; color: var(--text-muted);
}
footer a { color: var(--text-secondary); }
footer nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }

@media (max-width: 480px) { body { font-size: 16px; } .hero { padding-top: 40px; } }