/* ScolAlerte Parents : lisible sur un petit téléphone, grands caractères, forts contrastes. Aucune police chargée. */
:root {
  --police: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --fond: #EEF1F5;
  --surface: #FFFFFF;
  --trait: #D8DEE8;
  --texte: #14213A;
  --texte-2: #536079;
  --bleu: #1B56B3;
  --bleu-fort: #143F87;
  --nuit: #0F2A52;
  --rouge: #B42318;
  --avis-fond: #FFF4E5;
  --avis-trait: #F2B45A;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0B1628;
    --surface: #14233D;
    --trait: #2A3B5A;
    --texte: #EEF2F8;
    --texte-2: #A9B6CC;
    --bleu: #5B8FE0;
    --bleu-fort: #7FA8EA;
    --rouge: #F07167;
    --avis-fond: #3A2A10;
    --avis-trait: #A87420;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 17px; line-height: 1.45; }
main { max-width: 34rem; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.entete { display: flex; align-items: center; gap: 12px; padding: 8px 0 16px; }
.entete img { border-radius: 10px; flex: none; }
.entete h1 { margin: 0; font-size: 1.25rem; }
.entete .ecole { margin: 0; color: var(--texte-2); font-weight: 600; }
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.carte h2 { margin: 0 0 8px; font-size: 1.1rem; }
.carte p { margin: 0 0 12px; }
.discret { color: var(--texte-2); }
.avis { background: var(--avis-fond); border: 1px solid var(--avis-trait); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.etapes { margin: 0 0 12px; padding-left: 1.4rem; }
.etapes li { margin-bottom: 8px; }
button { font: inherit; border-radius: 12px; border: 1px solid var(--trait); background: var(--surface); color: var(--texte); padding: 12px 16px; min-height: 48px; cursor: pointer; }
button.principal { width: 100%; background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 700; }
button.secondaire { width: 100%; margin-bottom: 14px; font-weight: 600; }
button.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; font-weight: 700; }
button.lien { background: none; border: none; color: var(--bleu-fort); text-decoration: underline; padding: 8px 0; min-height: 44px; }
button:disabled { opacity: .6; }
.code { text-align: center; }
.qr { display: block; width: 100%; max-width: 22rem; margin: 4px auto 8px; background: #fff; border-radius: 6px; }
.code-texte { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; word-break: break-all; text-align: left; color: var(--texte-2); }
.messages { list-style: none; margin: 0 0 8px; padding: 0; }
.messages li { border-top: 1px solid var(--trait); padding: 10px 0; display: grid; gap: 2px; }
.messages li:first-child { border-top: none; padding-top: 0; }
.messages .quand { color: var(--texte-2); font-size: .85rem; font-variant-numeric: tabular-nums; }
.confirmer p { margin: 0 0 10px; }
.boutons { display: flex; gap: 10px; flex-wrap: wrap; }
.boutons button { flex: 1 1 8rem; }
.pied { text-align: center; }
.confidentialite { color: var(--texte-2); font-size: .85rem; text-align: center; margin-top: 18px; }