/* Habillage propre à l'opération Quiz Crédit Mutuel.
   Chargé après main2.css par les vues de resources/views/creditmutuel/. */

:root {
    --cm-blue: #0152A2;
    --cm-text-blue: #033192;
}

/* Page : blanc autour de l'écran de jeu */
body {
    background-color: #fff;
}

/* Écran de jeu */
.main_view {
    background: linear-gradient(180deg, #0050B3 24.26%, var(--cm-text-blue) 100%);
}

/* Champs du formulaire : arrondis sauf le coin bas-gauche, qui reste pointu
   (ordre : haut-gauche, haut-droit, bas-droit, bas-gauche) */
.form-control.form-input-custom,
.form-select.form-select-custom {
    border-radius: 12px 12px 12px 0;
    color: var(--cm-text-blue);
}

/* Espacement entre les champs du formulaire d'inscription resserré (1rem → 0.5rem) */
.form-quiz .mb-3 {
    margin-bottom: 0.5rem !important;
}

/* Placeholders en bleu, un ton plus clair que la saisie (comme la maquette) */
.form-control.form-input-custom::placeholder {
    color: var(--cm-text-blue);
    opacity: 0.6;
}

/* --- Écran de quiz --------------------------------------------------- */

/* Numéro de question et intitulé, posés sur le bleu de l'écran de jeu */
#carouselExample .numQuestion {
    color: #F2BE45;
    font-weight: bold;
}

#carouselExample .blockQuestion {
    color: #fff;
    font-weight: bold;
}

/* Réponses : même habillage que les champs du formulaire */
#carouselExample .customRadio {
    background-color: #fff;
    color: var(--cm-text-blue);
    border: 0;
    border-radius: 12px 12px 12px 0;
    margin-bottom: 0;
}

/* Espacement entre les réponses resserré, comme le formulaire
   (8px de marge + 2x4px de padding p-1 → 2x2px) */
#carouselExample .answer-item .row {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

#carouselExample .answer-item .form-check {
    margin-bottom: 0;
}

/* --- Page résultat : modale de correction ---------------------------- */

/* La modale reste sur fond blanc : on y reprend les couleurs du quiz,
   questions en bleu et bonne réponse dans le bloc « réponse sélectionnée ». */
#correctionModal .modal-title,
#correctionModal .blockQuestion {
    color: var(--cm-text-blue);
}

#correctionModal .correctionAnswer {
    background-color: var(--cm-text-blue);
    color: #fff;
    border-radius: 12px 12px 12px 0;
    box-shadow: none;
}

/* Boutons précédent / suivant / valider : les visuels n'ont pas le même
   rapport largeur/hauteur (1042x372, 870x372, 840x372, marge d'ombre
   transparente comprise). main2.css les cale sur une largeur commune de
   120px, ce qui donne des hauteurs différentes : on cale plutôt sur la
   hauteur et on laisse la largeur suivre. */
.quizprev,
.quiznext {
    width: auto !important;
}

.quizprev img,
.quiznext img,
#btn_validQuiz {
    width: auto !important;
    height: 54px !important;
}

/* Les visuels portent les classes carousel-control-*-icon de Bootstrap, qui
   ajoutent une flèche blanche en fond : visible à travers le bouton
   « Précédent », transparent. On ne garde que le visuel. */
.quizprev .carousel-control-prev-icon,
.quiznext .carousel-control-next-icon {
    background-image: none;
    filter: none;
}

/* Réponse sélectionnée : couleurs inversées, bordure blanche */
#carouselExample .form-check input[type="radio"]:checked + label,
#carouselExample .form-check input[type="radio"]:checked ~ label {
    background-color: var(--cm-text-blue);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 12px 12px 12px 0;
}

/* --- Pied de page : lien politique de confidentialité --- */
.cm-footer {
    padding: 16px 0 20px;
    text-align: center;
    font-size: 13px;
    color: #fff;
}

.cm-footer a {
    color: #fff;
    text-decoration: underline;
}