/*
 * Ondia — feuille de style du site de présentation.
 *
 * Aucune police téléchargée, aucune image distante, aucun script : la pile de
 * polices système suffit, et c'est ce qui permet à la page de ne déclencher
 * aucune requête vers un tiers. Voir l'en-tête Content-Security-Policy dans
 * nginx/ondia.conf, qui l'impose au navigateur au lieu de s'y fier.
 *
 * Les couleurs reprennent celles de l'app : le violet du lanceur, le lavande
 * des conteneurs Material 3.
 */

:root {
  color-scheme: light dark;

  --violet-profond: #2e1b52;
  --violet: #3f2b96;
  --primaire: #6750a4;
  --lavande: #eaddff;

  --fond: #fdfaff;
  --surface: #f4eefb;
  --surface-haute: #ffffff;
  --texte: #1c1b1f;
  --texte-doux: #4a4458;
  --bord: #e3dcec;

  --rayon: 1.25rem;
  --colonne: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #131019;
    --surface: #1d1a24;
    --surface-haute: #241f2e;
    --texte: #e7e0ec;
    --texte-doux: #c9c2d3;
    --bord: #332d3d;
    --lavande: #d5c4f2;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.colonne {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: var(--primaire); }
@media (prefers-color-scheme: dark) { a { color: var(--lavande); } }

/* ------------------------------------------------------------------ bandeau */

.hero {
  background: linear-gradient(135deg, var(--violet-profond), var(--primaire));
  color: #fff;
  padding: 4.5rem 0 4rem;
}

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hero .sous-titre {
  margin: 0.35rem 0 1.25rem;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--lavande);
}

.hero .accroche {
  margin: 0;
  max-width: 34rem;
  font-size: 1.15rem;
  color: #efe7fb;
}

.jauge { width: 190px; height: 190px; flex: none; }

@media (max-width: 46rem) {
  .hero-grille { grid-template-columns: 1fr; }
  .jauge { width: 130px; height: 130px; }
}

/* ------------------------------------------------------------------ sections */

section { padding: 4rem 0; }
section.alterne { background: var(--surface); }

h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  letter-spacing: -0.01em;
}

.chapeau {
  margin: 0 0 2.25rem;
  max-width: 42rem;
  color: var(--texte-doux);
  font-size: 1.1rem;
}

/* ------------------------------------------------------------------ cartes */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.carte {
  background: var(--surface-haute);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.5rem;
}

section.alterne .carte { background: var(--fond); }

.carte h3 {
  margin: 0.75rem 0 0.4rem;
  font-size: 1.15rem;
}

.carte p {
  margin: 0;
  color: var(--texte-doux);
}

.carte svg { width: 32px; height: 32px; color: var(--primaire); }
@media (prefers-color-scheme: dark) { .carte svg { color: var(--lavande); } }

/* --------------------------------------------------- exemple de couverture */

.exemple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

@media (max-width: 52rem) { .exemple { grid-template-columns: 1fr; } }

.releve {
  background: var(--surface-haute);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.25rem;
}

section.alterne .releve { background: var(--fond); }

.verdict {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border-radius: 0.85rem;
  color: var(--texte);
}

section.alterne .verdict { background: var(--surface); }

.piece {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.85rem;
}

.piece + .piece { margin-top: 0.4rem; }
.piece.faible { background: color-mix(in srgb, #b3261e 12%, transparent); }
.piece svg { width: 26px; height: 26px; flex: none; color: var(--primaire); }
@media (prefers-color-scheme: dark) { .piece svg { color: var(--lavande); } }
.piece .nom { font-weight: 600; }
.piece .note { margin-left: auto; color: var(--texte-doux); font-size: 0.95rem; }

/* ------------------------------------------------------------------ tableau */

.paliers {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.paliers th, .paliers td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}

.paliers th { font-weight: 600; }
.paliers td:not(:first-child) { color: var(--texte-doux); }

/* ------------------------------------------------------------------ listes */

.liste-nette {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--texte-doux);
}

.liste-nette li + li { margin-top: 0.5rem; }

.apres-cartes { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ etiquette */

.etiquette {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--lavande);
  color: var(--violet);
  font-size: 0.9rem;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .etiquette { background: #3b2f52; color: var(--lavande); }
}

/* ------------------------------------------------------------------ pied */

footer {
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--bord);
  color: var(--texte-doux);
  font-size: 0.95rem;
}

footer p { margin: 0.4rem 0; }