/* ==========================================================
   ANSANM — style.css
   Fond noir, contrastes forts, gros caractères (accessibilité)
   Couleurs inspirées du drapeau martiniquais : noir / vert / rouge
   ========================================================== */

:root {
    --fond: #0d0d0d;
    --fond-carte: #1a1a1a;
    --texte: #f5f5f5;
    --texte-att: #b8b8b8;
    --vert: #00c853;      /* conducteur */
    --vert-fonce: #009624;
    --rouge: #ff3b30;     /* passager */
    --rouge-fonce: #c4001d;
    --bordure: #333333;
    --taille-base: 19px;
}

* { box-sizing: border-box; }

html { font-size: var(--taille-base); }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.55;
}

a { color: inherit; }

.conteneur {
    max-width: 620px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}

/* ---------- En-tête ---------- */
.entete {
    text-align: center;
    padding: 36px 20px 20px;
}

.logo {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0;
}

.logo .accent-vert { color: var(--vert); }
.logo .accent-rouge { color: var(--rouge); }

.slogan {
    color: var(--texte-att);
    font-size: 1.1rem;
    margin: 10px 0 0;
}

/* ---------- Gros boutons de choix (accueil) ---------- */
.choix-role {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 36px 0;
}

.bouton-role {
    display: block;
    text-decoration: none;
    padding: 26px 24px;
    border-radius: 14px;
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid transparent;
    min-height: 44px;
}

.bouton-role.conducteur {
    background: var(--vert);
    color: #06210f;
}
.bouton-role.conducteur:focus,
.bouton-role.conducteur:hover {
    background: var(--vert-fonce);
    color: #ffffff;
}

.bouton-role.passager {
    background: var(--rouge);
    color: #2a0500;
}
.bouton-role.passager:focus,
.bouton-role.passager:hover {
    background: var(--rouge-fonce);
    color: #ffffff;
}

.bouton-role .sous-texte {
    display: block;
    font-weight: 400;
    font-size: 0.95rem;
    margin-top: 6px;
}

/* ---------- Boutons standards (formulaires, actions) ---------- */
.btn {
    display: inline-block;
    padding: 16px 22px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    min-height: 44px;
}

.btn-vert { background: var(--vert); color: #06210f; }
.btn-vert:hover, .btn-vert:focus { background: var(--vert-fonce); color: #fff; }

.btn-rouge { background: var(--rouge); color: #2a0500; }
.btn-rouge:hover, .btn-rouge:focus { background: var(--rouge-fonce); color: #fff; }

.btn-large { display: block; width: 100%; text-align: center; }

/* ---------- Cartes d'explication ---------- */
.carte {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: 14px;
    padding: 22px;
    margin: 20px 0;
}

.etape {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.etape:last-child { margin-bottom: 0; }

.etape-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
}

.page-conducteur .etape-num { background: var(--vert); color: #06210f; }
.page-passager .etape-num { background: var(--rouge); color: #2a0500; }

.etape p { margin: 0; }

.exemple-chiffre {
    background: #111;
    border-left: 4px solid var(--vert);
    padding: 14px 16px;
    border-radius: 6px;
    margin: 18px 0;
    color: var(--texte-att);
}
.page-passager .exemple-chiffre { border-left-color: var(--rouge); }

/* ---------- Formulaires ---------- */
label {
    display: block;
    margin: 16px 0 6px;
    font-weight: 600;
}

input, select {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 2px solid var(--bordure);
    background: #141414;
    color: var(--texte);
    font-size: 1rem;
}

input:focus, select:focus {
    outline: 3px solid var(--vert);
    border-color: var(--vert);
}
.page-passager input:focus, .page-passager select:focus {
    outline-color: var(--rouge);
    border-color: var(--rouge);
}

/* ---------- Titres ---------- */
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }

/* ---------- Retour ---------- */
.retour {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--texte-att);
    text-decoration: none;
    font-size: 0.95rem;
}
.retour:hover { color: var(--texte); }

/* ---------- Accessibilité : focus clavier toujours visible ---------- */
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--vert);
    outline-offset: 2px;
}

/* ---------- Réduction de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}