/* Page QR ACT : page mobile légère, lue sur le téléphone du jeune après la station. Couleur de la station : --st. */
main{max-width:720px}
.logos{max-width:720px;margin:0 auto 16px;display:flex;align-items:center;gap:12px}
.logo{height:52px;width:auto;border-radius:10px;display:block}
.logo-text{display:grid;place-items:center;height:52px;padding:0 12px;border:2px solid var(--line);font-weight:800;font-size:.75rem;line-height:1.15;text-align:center;color:var(--ink);background:var(--surface)}

.bandeau{background:var(--st);color:#fff;border-radius:22px;padding:22px;display:grid;gap:10px}
.bandeau .eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.bandeau h1{color:#fff;font-size:clamp(1.7rem,6vw,2.4rem)}
.bandeau p{margin:0;line-height:1.5;opacity:.95}

.urgence{border:3px solid var(--bad);border-radius:18px;padding:16px 18px;background:color-mix(in srgb,var(--bad) 8%,var(--bg))}
.urgence h2{margin:0 0 6px;color:var(--bad);font-size:1.15rem}
.urgence p,.urgence li{line-height:1.5}
.urgence ul{margin:6px 0;padding-left:1.2em}
.a-completer{display:inline-block;padding:1px 8px;border-radius:6px;background:color-mix(in srgb,var(--bad) 18%,transparent);border:1px dashed var(--bad);font-weight:700;font-size:.9em}

section{display:grid;gap:10px}
section h2{margin:0;font-size:1.35rem;line-height:1.25}
section p,section li{margin:0;line-height:1.55}
section ul,section ol{margin:0;padding-left:1.3em;display:grid;gap:6px}
.intro{font-size:1.08rem}

.tableau{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:14px;overflow:hidden}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--st);color:#fff;font-size:.9rem}

.encadre{border-left:6px solid var(--st);background:var(--surface);border-radius:12px;padding:14px 16px;display:grid;gap:4px}
.encadre b{color:var(--st);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.encadre.phrase{font-style:italic}
.encadre.retenir{background:var(--st);color:#fff}
.encadre.retenir b{color:#fff}
.encadre.important{border-left-color:var(--bad)}
.encadre.important b{color:var(--bad)}

.etapes{list-style:none;padding:0!important;counter-reset:n}
.etapes li{counter-increment:n;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px 12px 52px;position:relative}
.etapes li::before{content:counter(n);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--st);color:#fff;font-weight:800;display:grid;place-items:center}
.etapes strong{display:block}

/* Carte à remplir : rien n'est enregistré ni envoyé, elle reste sur l'écran du jeune. */
.carte{background:var(--surface);border:2px dashed var(--st);border-radius:18px;padding:16px;display:grid;gap:10px}
.carte label{display:grid;gap:4px;font-weight:700}
.carte input{font:inherit;padding:12px;border-radius:10px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.carte input:focus{outline:none;border-color:var(--st)}
.carte .note{margin:0;font-size:.85rem;color:var(--muted)}

.pied{max-width:720px;margin:28px auto 0;color:var(--muted);font-size:.82rem;display:grid;gap:6px;border-top:1px solid var(--line);padding-top:14px}
.pied p{margin:0}