/* Pages du serveur de présentation (vidéo guidée, comptes d'essai, accès) : mêmes couleurs que le progiciel. */
:root {
  --fond: #f1f3f7; --carte: #fff; --texte: #1d2433; --doux: #6b7385; --trait: #e3e7ee;
  --bleu: #1f3864; --bleu-vif: #2a4a82; --bleu-clair: #e8eef8; --or: #c9971c; --or-clair: #fbf1d8;
  --vert: #067647; --vert-clair: #dcfae6;
  --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .08);
  --police: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --chiffres: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f1522; --carte: #182033; --texte: #e7ecf5; --doux: #9aa7bf; --trait: #26314a;
    --bleu: #8fb0ea; --bleu-vif: #a9c3f2; --bleu-clair: #22345a; --or: #e9b949; --or-clair: #3a3118;
    --vert: #4ccb8f; --vert-clair: #163527; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.55 var(--police); -webkit-font-smoothing: antialiased; }
a { color: var(--bleu-vif); }
.haut { background: #1f3864; color: #fff; }
.haut .dedans { max-width: 1180px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.haut svg { flex: none; }
.haut b { font-size: 16px; } .haut span { color: #c8d4ec; font-size: 13px; }
.haut .espace { flex: 1; }
.haut .bouton { white-space: nowrap; padding: 9px 14px; }
main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 56px; }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 6px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.sous { color: var(--doux); margin: 0 0 22px; max-width: 760px; }
.carte { background: var(--carte); border-radius: 12px; box-shadow: var(--ombre); padding: 20px; }
.bouton { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 11px 18px;
  font: 600 15px var(--police); text-decoration: none; cursor: pointer; background: #1f3864; color: #fff; }
.bouton:hover { background: #2a4a82; }
.bouton.or { background: #c9971c; color: #1d2433; } .bouton.or:hover { background: #e0ad2e; }
.bouton.discret { background: var(--bleu-clair); color: var(--texte); }
.bouton:focus-visible, .chapitre:focus-visible, .copier:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.avis { background: var(--or-clair); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.pied { color: var(--doux); font-size: 13px; margin-top: 28px; }
@media (max-width: 640px) { h1 { font-size: 21px; } .haut span { display: none; } main { padding-top: 18px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
