/* Débat IA : la page d'accueil, la création de partie, la page introuvable. */
.a-page { max-width: 480px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 18px 40px; display: flex; flex-direction: column; gap: 18px; min-height: 100vh; }
.a-tete { padding: 10px 2px 4px; }
.a-nom { font-family: var(--f-titre); font-weight: 800; font-size: 44px; line-height: 1; color: var(--encre); }
.a-sous { color: var(--doux); font-size: 17px; margin-top: 8px; }
.a-carte { background: var(--carte); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--ombre); }
.a-titre { font-family: var(--f-titre); font-weight: 800; font-size: 22px; color: var(--encre); }
.a-label { font-weight: 700; }
.a-champ { width: 100%; border: 1.5px solid var(--trait); border-radius: 12px; padding: 12px; background: var(--carte); font-size: 18px; }
.a-champ:focus { border-color: var(--encre); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.a-code { font-family: var(--f-titre); font-weight: 800; font-size: 30px; letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.a-principal { min-height: 56px; border: 0; border-radius: 14px; background: var(--action); color: var(--action-t); font-weight: 700; font-size: 18px; }
.a-second { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 2px solid var(--trait); border-radius: 14px; background: var(--carte);
  font-weight: 700; font-size: 17px; color: var(--encre); text-decoration: none; }
.a-erreur { color: var(--alerte); font-weight: 700; }
.a-choix { display: flex; flex-direction: column; gap: 8px; }
.a-option { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--trait); border-radius: 12px; padding: 12px; cursor: pointer; }
.a-option:has(input:checked) { border-color: var(--encre); background: color-mix(in srgb, var(--encre) 6%, var(--carte)); }
.a-option input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--action); flex: none; }
.a-option b { display: block; color: var(--encre); }
.a-option small { color: var(--doux); font-size: 15px; }
.a-pied { margin-top: auto; text-align: center; color: var(--doux); font-size: 14px; }
.a-code::placeholder { letter-spacing: .04em; font-size: 22px; }