/* =========================================================
   QUIZ MAZDA - STYLES ISOLÉS
   Tous les sélecteurs sont préfixés quizMazda-
   Objectif : éviter les conflits + stable avec CSS global
   ========================================================= */

.quizMazda-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    font-family: Arial, Helvetica, sans-serif;
    background: #f7f7f7;
    border-radius: 8px;
}

.quizMazda-title {
    text-align: center;
    margin-bottom: 10px;
}

.quizMazda-intro {
    text-align: center;
    margin-bottom: 30px;
}

/* -------------------- Questions -------------------- */

.quizMazda-question {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    background: #fff;
}

.quizMazda-question legend {
    font-weight: bold;
    margin-bottom: 10px;
}

.quizMazda-questionText {
    font-weight: bold;
    margin: 10px 0 12px;
}

/* IMPORTANT :
   On ne met PAS grid sur .quizMazda-question (fieldset),
   car legend + grid peut devenir instable selon navigateurs/styles globaux.
   La grille est uniquement sur .quizMazda-choices (conteneur des réponses).
*/

/* =========================================================
   QUESTIONS EN 2 COLONNES (réduit le scroll)
   ========================================================= */

.quizMazda-questionsGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* on enlève la marge du fieldset car c'est la grille qui gère l'espacement */
.quizMazda-questionsGrid .quizMazda-question{
  margin-bottom: 0;
}

/* 2 colonnes sur écran large */
@media (min-width: 1000px){
  .quizMazda-container{
    max-width: 1100px; /* optionnel : un peu plus large pour respirer */
  }

  .quizMazda-questionsGrid{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}


/* -------------------- Réponses (cartes) -------------------- */

/* Conteneur des choix */
.quizMazda-container .quizMazda-choices {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 12px !important;

    justify-items: stretch !important;
    align-items: stretch !important;
}

/* 2 colonnes sur écrans larges */
@media (min-width: 800px) {
    .quizMazda-container .quizMazda-choices {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Carte = label cliquable (reset total pour neutraliser CSS global) */
.quizMazda-container label.quizMazda-choice {
    all: unset !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    width: 100% !important;
    justify-self: stretch !important;

    padding: 14px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;

    cursor: pointer !important;
}

/* Empêche les thèmes de coller des pseudo-éléments sur label */
.quizMazda-container label.quizMazda-choice::before,
.quizMazda-container label.quizMazda-choice::after {
    content: none !important;
    display: none !important;
}

/* Texte réponse */
.quizMazda-container .quizMazda-choiceText {
    all: unset !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;

    font: inherit !important;
    color: inherit !important;
    line-height: 1.35 !important;
}

/* Radio : reset + apparence native */
.quizMazda-container label.quizMazda-choice input[type="radio"] {
    all: unset !important;
    -webkit-appearance: radio !important;
    appearance: radio !important;

    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 auto !important;
}

/* -------------------- Infos utilisateur -------------------- */

.quizMazda-user {
    margin-top: 30px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px !important;
}

.quizMazda-user label {
    display: block;
    margin-bottom: 15px;
}

.quizMazda-user input[type="text"],
.quizMazda-user input[type="email"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.quizMazda-checkbox {
    font-size: 0.9em;
}

/* -------------------- Boutons -------------------- */

.quizMazda-submit {
    display: block;
    margin: 30px auto 0;
    padding: 12px 30px;
    font-size: 1rem;
    background: #017651;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.quizMazda-submit:hover {
    background: cadetblue;
}

#quizMazda-result {
    margin-top: 30px;
}

/* -------------------- Bloc résultat -------------------- */

.quizMazda-resultBox {
    margin-top: 20px;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
}

.quizMazda-resultBox--ok {
    border-color: #bfe7cc;
    background: #e9f8ef;
}

.quizMazda-resultBox--error {
    border-color: #f4b9b9;
    background: #fdecec;
}

.quizMazda-pdfBtn {
    margin-top: 10px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #1e3a5f;
    color: #fff;
}

.quizMazda-pdfInfo{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #f2c9a6;
  background: #fff3e8;
  border-radius: 10px;
  font-size: 0.95rem;
}

/* =========================================================
   QUIZ MAZDA – SÉLECTION (100% COMPATIBLE Safari + Firefox)
   IMPORTANT :
   - Pas de :has() (Firefox ne supporte pas)
   - On applique l'effet "carte" sur le SPAN (.quizMazda-choiceText)
     car on peut le cibler avec input:checked + span
   ========================================================= */

/* La carte de réponse = le texte (span) prend toute la largeur */
.quizMazda-container label.quizMazda-choice {
    /* on garde le label en flex pour aligner radio + carte */
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Le "span" devient la vraie carte cliquable visuelle */
.quizMazda-container .quizMazda-choiceText {
    display: block !important;
    width: 100% !important;

    padding: 14px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;

    line-height: 1.35 !important;
    cursor: pointer !important;

    /* petite transition douce */
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Hover sur la carte (facultatif mais sympa) */
.quizMazda-container label.quizMazda-choice:hover .quizMazda-choiceText {
    background: #f1f6fb !important;
    border-color: #1e3a5f !important;
}

/* ✅ ÉTAT SÉLECTIONNÉ (compatible partout) */
.quizMazda-container label.quizMazda-choice input[type="radio"]:checked + .quizMazda-choiceText {
    background: #e9f2fb !important;
    border-color: #1e3a5f !important;
    font-weight: bold !important;
    color: #1e3a5f !important;
}

/* Focus clavier (accessibilité) */
.quizMazda-container label.quizMazda-choice input[type="radio"]:focus + .quizMazda-choiceText {
    border-color: #1e3a5f !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15) !important;
}

/* =========================================================
   QUIZ MAZDA – PERSONNALISATION (OPTIONNELLE)
   Modifie ici :
   - tailles de texte
   - couleurs normales (avant sélection)
   - bordures / arrondis
   ========================================================= */

/* -------------------- Textes généraux -------------------- */

/* Titre principal */
.quizMazda-title{
  font-size: 2rem;        /* ex: 2rem */
  color: #1e3a5f;
}

/* Intro */
.quizMazda-intro{
  font-size: 1.05rem;     /* ex: 1rem à 1.1rem */
  color: #444;
}

/* Titre Question X */
.quizMazda-question legend{
  font-size: 1.2rem;
  color: #222;
}

/* Texte de la question */
.quizMazda-questionText{
  font-size: 1rem;
  color: #333;
}

/* Texte des réponses */
.quizMazda-choiceText{
  font-size: 0.90rem;        /* taille des propositions */
  color: #222;
}


/* -------------------- Cartes réponses : état normal -------------------- */
/* IMPORTANT : comme on a fait de .quizMazda-choiceText la "carte",
   c'est ici qu'on change couleurs, bordures, arrondis, etc.
*/

.quizMazda-container .quizMazda-choiceText{
  background: #ffffff !important;     /* fond normal */
  border-color: #dcdcdc !important;   /* bordure normale */
  border-radius: 8px !important;     /* arrondi */
}

/* Hover (survol) */
.quizMazda-container label.quizMazda-choice:hover .quizMazda-choiceText{
  background: #f7fbff !important;     /* fond au survol */
  border-color: #9bb7d6 !important;   /* bordure au survol */
}


/* -------------------- Boutons -------------------- */

.quizMazda-submit{
  font-size: 1.05rem;
  border-radius: 8px;
}

.quizMazda-pdfBtn{
  font-size: 0.95rem;
  border-radius: 8px;
}


/* -------------------- Conteneur quiz -------------------- */

.quizMazda-container{
  background: #f7f7f7;   /* fond global autour du quiz */
}

/* =========================================================
   Couleurs personnalisées
   ========================================================= */

/* ==============================================
	TEXT COLORS
============================================== */

	/* qm-Colored */
	.qm-colored,.qm-colored-hover:hover,.qm-colored-active.active{
		color:#E8F1FA !important;
	}
	/* qm-Colored1 */
	.qm-colored1,.qm-colored1-hover:hover,.qm-colored1-active.active{
		color:#EAF6EE !important;
	}
	/* qm-Colored2 */
	.qm-colored2,.qm-colored2-hover:hover,.qm-colored2-active.active{
		color:#F1EDFA !important;
	}
    /* qm-Colored3 */
	.qm-colored3,.qm-colored3-hover:hover,.qm-colored3-active.active{
		color:#FFF3E6 !important;
	}

/* ==============================================
	BACKGROUND COLORS
============================================== */

	/* qm-bg-colored */
	.qm-bg-colored,.qm-bg-colored-hover:hover,.qm-bg-colored-active.active,.qm-bg-colored-hover-trigger:hover .qm-bg-colored-hover-target{
		background-color:#E8F1FA !important;
	}
	/* qm-bg-colored1 */
	.qm-bg-colored1,.qm-bg-colored1-hover:hover,.qm-bg-colored1-active.active,.qm-bg-colored1-hover-trigger:hover .qm-bg-colored1-hover-target{
		background-color:#EAF6EE !important;
	}
	/* qm-bg-colored2 */
	.qm-bg-colored2,.qm-bg-colored2-hover:hover,.qm-bg-colored2-active.active,.qm-bg-colored1-hover-trigger:hover .qm-bg-colored1-hover-target{
		background-color:#F1EDFA !important;
	}
    /* qm-bg-colored3 */
	.qm-bg-colored3,.qm-bg-colored3-hover:hover,.qm-bg-colored3-active.active,.qm-bg-colored1-hover-trigger:hover .qm-bg-colored1-hover-target{
		background-color:#FFF3E6 !important;
	}