/* Feuille unique du site natinfgo.fr.
   Les couleurs sont celles de l'application, aux mêmes valeurs : le site et l'écran
   doivent se reconnaître. Deux jeux, comme dans l'application — le sombre pour la nuit,
   le clair pour le plein jour — choisis par le réglage du visiteur. */
:root {
  --fond: #0B1220; --fond-bas: #131E36; --carte: rgba(255,255,255,.06);
  --texte: #F2F5FA; --doux: #9AA7BD; --faible: #6B7A94;
  --or: #D4AF37; --rouge: #D7261E; --vert: #35C77A; --filet: rgba(255,255,255,.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --fond: #F5F7FA; --fond-bas: #E6EBF2; --carte: #FFFFFF;
    --texte: #0F1620; --doux: #44506A; --faible: #5D6B84;
    --or: #8A6A12; --rouge: #B31E17; --vert: #1B7A4B; --filet: rgba(16,32,48,.14);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0; background: linear-gradient(180deg, var(--fond), var(--fond-bas));
  background-attachment: fixed; color: var(--texte); font: 17px/1.6 -apple-system,
  BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.conteneur { max-width: 62rem; margin: 0 auto; padding: 0 20px; }
header.haut { padding: 48px 0 12px; }
nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font-size: .95rem; }
nav a { color: var(--doux); text-decoration: none; }
nav a:hover, nav a[aria-current] { color: var(--or); }
nav .marque { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--texte); font-weight: 700; }
nav .marque img { width: 34px; height: 34px; border-radius: 9px; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.12; margin: 28px 0 12px; letter-spacing: -.02em; }
h2 { font-size: 1.35rem; margin: 2.6rem 0 .8rem; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
p, li { color: var(--doux); }
p.lede { font-size: 1.15rem; color: var(--texte); max-width: 40rem; }
strong { color: var(--texte); }
a { color: var(--or); }
.grille { display: grid; gap: 18px; margin: 26px 0; }
@media (min-width: 760px) { .grille.trois { grid-template-columns: repeat(3, 1fr); } .grille.deux { grid-template-columns: 1fr 1fr; } }
.carte { background: var(--carte); border: 1px solid var(--filet); border-radius: 16px; padding: 20px 22px; }
.carte h3 { margin-top: 0; color: var(--texte); }
.carte p { margin-bottom: 0; font-size: .97rem; }
.ecrans { display: flex; gap: 16px; overflow-x: auto; padding: 8px 0 16px; scroll-snap-type: x proximity; }
.ecrans figure { margin: 0; flex: none; scroll-snap-align: center; width: 210px; }
.ecrans img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--filet); display: block; }
.ecrans figcaption { font-size: .85rem; color: var(--faible); margin-top: 8px; }
.etat { display: inline-block; border: 1px solid var(--filet); border-radius: 999px; padding: 6px 14px;
        font-size: .85rem; color: var(--doux); background: var(--carte); }
.avertissement { border-left: 3px solid var(--rouge); padding-left: 16px; margin: 1.6rem 0; }
.avertissement p { color: var(--texte); }
footer { margin-top: 4rem; padding: 26px 0 46px; border-top: 1px solid var(--filet); font-size: .9rem; color: var(--faible); }
footer a { color: var(--doux); }