/* 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;
}

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

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

/* 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;
}

/* --- 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 : les deux visuels n'ont pas le même rapport
   largeur/hauteur (946x276 et 774x276). main2.css les cale sur une largeur
   commune de 120px, ce qui donne deux 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 {
    width: auto !important;
    height: 40px;
}

/* 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;
}