/* =============================================================================
   Persoquiz — feuille de style du site
   Bootstrap fournit la grille et les utilitaires ; ce fichier impose la palette.

   Parti pris de couleur : les SEULES couleurs saturées de la page sont les
   quatre couleurs du profil (rouge, jaune, vert, bleu). La marque, elle, utilise
   une encre chaude et un ambre — donc rien qui puisse être confondu avec l'une
   des quatre. Sans ça, un bouton vert entrerait en concurrence avec le profil Vert.
   ============================================================================= */

:root {
    /* Marque */
    --ink:      #2f2a20;   /* texte fort, boutons */
    --ink-soft: #4a4235;
    --muted:    #7a7263;   /* texte secondaire */
    --faint:    #a9a091;   /* mentions légales, notes */
    --amber:    #c9861a;   /* accent de marque (logo, baseline) */
    --amber-dk: #a8802a;

    /* Surfaces */
    --cream:  #fffdf6;     /* fond de page */
    --sand:   #f8f4e9;     /* blocs, cartes neutres */
    --line:   #e9e0cc;     /* filets, bordures */
    --white:  #ffffff;

    /* Les 4 couleurs du profil — dupliquées côté PHP dans pages/_quizz.php */
    --c-red:    #e84040;
    --c-yellow: #f0b429;
    --c-green:  #3ec23e;
    --c-blue:   #3b82c4;
}

/* ------------------------------------------------------------------ base */
body {
    background: var(--cream);
    color: var(--ink);
    font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--amber-dk); }
a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ boutons */
/* On neutralise le thème Bootstrap : encre chaude, jamais une des 4 couleurs. */
.btn { font-weight: 800; border-radius: 99px; }

.btn-primary,
.btn-primary:focus {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}
.btn-primary:hover,
.btn-primary:active {
    background: var(--ink-soft);
    border-color: var(--ink-soft);
    color: var(--cream);
}

.btn-outline-primary,
.btn-outline-secondary {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: var(--sand);
    border-color: var(--amber);
    color: var(--ink);
}

/* Toggle adulte / enfant */
.btn-check:checked + .btn-outline-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}

/* ------------------------------------------------------------------ formulaire */
.form-check-input { border-color: #cfc6b2; }
.form-check-input:checked {
    background-color: var(--ink);
    border-color: var(--ink);
}
.form-check-input:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 .2rem rgba(201, 134, 26, .18);
}
.form-check-label { color: var(--ink-soft); }

/* ------------------------------------------------------------------ divers */
.progress { background: #ece5d5; }

.alert-warning {
    background: #fff6e0;
    border-color: #f0dcae;
    color: #7a5a12;
}

/* Marque */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
}
.brand-name {
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: -1px;
    color: var(--ink);
    line-height: 1;
}
/* Pied de page */
.site-footer {
    border-top: 2px solid var(--line);
    margin-top: 3rem;
    padding: 1.6rem 0 2.4rem;
    color: var(--faint);
    font-size: .85rem;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }