/* Topo Audit, pages statiques : une colonne, fond blanc, le bleu du mot-image (#1D4ED8). */
:root {
  --fond: #ffffff;
  --texte: #0f1a33;
  --doux: #4a5672;
  --bleu: #1d4ed8;
  --cadre: #e3e8f4;
  --video: #f2f5fc;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
  display: grid;
  gap: 40px;
}
.nom { margin: 0; line-height: 0; }
.nom img { width: min(360px, 80%); height: auto; }
.phrase { font-size: clamp(19px, 3.2vw, 23px); max-width: 34ch; margin: 18px 0 0; text-wrap: balance; }
.video {
  aspect-ratio: 16 / 9; width: 100%; border-radius: 10px;
  background: var(--video); border: 1px solid var(--cadre);
  display: grid; place-items: center; color: var(--doux); font-size: 15px; text-align: center; padding: 16px;
}
.video strong { display: block; color: var(--texte); font-weight: 600; font-size: 17px; }
video { width: 100%; border-radius: 10px; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.etapes li { display: grid; gap: 4px; min-width: 0; }
.etapes b { font-weight: 800; color: var(--bleu); font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; }
.etapes span { color: var(--doux); font-size: 16px; }
.contact { border-top: 1px solid var(--cadre); padding-top: 28px; display: grid; gap: 8px; }
.contact p { margin: 0; color: var(--doux); }
.adresse { font-weight: 600; font-size: 20px; color: var(--texte); word-break: break-all; }
a { color: var(--bleu); }
.note, .pied { font-size: 13px; color: var(--doux); margin: 0; }
.pied { display: flex; flex-wrap: wrap; gap: 16px; }
.texte { max-width: 68ch; }
.texte h1 { font-size: 30px; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
.texte h2 { font-size: 20px; margin: 32px 0 8px; }
.texte p, .texte li { color: var(--texte); }
.texte ul { padding-left: 1.2em; }
.date { color: var(--doux); font-size: 14px; margin: 0; }
.a-confirmer { background: #fff4c2; border-radius: 3px; padding: 0 3px; }