/* =========================================================================
   Mode sombre — chargée par chaque page après site.css, avec media="(prefers-color-scheme: dark)" :
   elle suit le réglage du téléphone ou de l'ordinateur. Le bouton de l'en-tête impose l'autre mode :
   le script du <head> (rendu.SCRIPT_THEME) met alors ce media à "all" ou "not all", avant le premier
   affichage, et site.js le change au clic. Une seule copie des règles sombres, sans JavaScript elle
   suit l'appareil.
   Suit le réglage du téléphone ou de l'ordinateur (prefers-color-scheme), sans bouton. Les jetons
   passent en sombre et les fonds blancs écrits en dur sont repris ici. Les maquettes de
   l'application (fenêtre, téléphone, badges) restent claires comme la vraie interface : elles
   retrouvent les jetons clairs. Héros, appel à l'action et pied de page sont déjà sombres.
   ========================================================================= */
:root {
  color-scheme: dark;
  --encre: #eef0ff;
  --texte: #c6c9e8;
  --texte-doux: #a0a5cd;
  --marque: #8f90fb;
  --marque-fonce: #b8bcff;
  --marque-pale: #242a66;
  --fond: #0b0d26;
  --fond-doux: #10133a;
  --surface: #161a47;
  --bord: #272c64;
  --bord-fort: #3a4083;
  --rouge: #ff8f87;
  --ombre-s: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --ombre: 0 14px 34px -14px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  --ombre-l: 0 34px 70px -24px rgba(0, 0, 0, .8);
}
.ecran, .tel, .flottant, .fenetre {
  --encre: #151843; --texte: #3b3f5a; --texte-doux: #5d627e; --marque: #3d3bd8; --marque-fonce: #332fb8;
  --marque-pale: #eceefe; --bord: #e2e5f3; --bord-fort: #c9cdea; --rouge: #b42318;
}
.entete { background: rgba(11, 13, 38, .9); }
.entete--defile { box-shadow: 0 6px 24px -14px rgba(0, 0, 0, .8); }
.nav__sous, .entete__menu, .carte, .etape, .tableau-defile, .compare__carte, .appareil, .puces a, .puces li > span,
.faq__item, .officiel, .formulaire, .champ input, .champ select, .champ textarea, .haut { background: var(--surface); }
.compare__carte--apres { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; }
.cta-zone { --zone: var(--fond); }
.cta-zone--doux { --zone: var(--fond-doux); }
/* --marque s'éclaircit pour les textes : les boutons pleins gardent un fond soutenu */
.btn--plein { background: #4744e0; }
.btn--plein:hover { background: #5653ec; }
.btn--secondaire:hover { background: #2e3479; color: var(--marque-fonce); }
.haut { color: var(--encre); }
.tableau thead th { background: var(--marque-800); }
.tableau tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
.bientot { background: rgba(245, 177, 47, .16); color: #f7c35f; }
.encadre--legal { background: rgba(245, 158, 11, .12); }
.encadre--legal .ico { color: #f5b041; }
.encadre--attention { background: rgba(229, 72, 77, .14); }
.compare__etiquette { background: rgba(229, 72, 77, .16); }
.obl { color: var(--rouge); }
/* pointeuses (appareils noirs ou gris foncé) et logos des partenaires (souvent foncés) sur fond clair */
.appareil__photo { background: radial-gradient(circle at 50% 62%, #fff 0, rgba(255, 255, 255, 0) 70%), #dfe2f2; }
.defile img { box-sizing: content-box; padding: 8px 14px; border-radius: 12px; background: #eef0f8; opacity: .85; }
.defile img:hover { opacity: 1; }
.drapeau { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
@media (max-width: 1079.98px) {
  .entete, .nav { background: var(--fond); }
}

/* bouton mode clair / sombre et logo de l'en-tête */
.theme__lune, .theme__texte-sombre { display: none; }
.theme__soleil { display: block; }
.theme__texte-clair { display: inline; }
.entete__logo .logo-clair { display: none; }
.entete__logo .logo-sombre { display: block; }