.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-49e97f2:#0064E0;--e-global-color-100fe6c:#1C1E21;--e-global-color-b98b34d:#F1F4F7;--e-global-color-a15913d:#EDEAFA;--e-global-color-8225793:#252A64;--e-global-color-d2341a7:#C0C1FF;--e-global-color-adcdd27:#063CFF;--e-global-color-ecc9154:#464BFC;--e-global-color-033f0c6:#0B1215;--e-global-color-5234b4d:#FFFFFF;--e-global-color-b5f22c8:#FFB906;--e-global-color-46c1639:#FC7900;--e-global-color-060b506:#662483;--e-global-color-66f5774:#64748B;--e-global-color-bffbbad:#7C3AED;--e-global-typography-primary-font-family:"OUTFIT";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"OUTFIT";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"OUTFIT";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"OUTFIT";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 p{margin-block-end:0px;}.elementor-kit-7 a{color:var( --e-global-color-49e97f2 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1250px;}.e-con{--container-max-width:1250px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.style-liste ul {
    list-style: none;
    padding: 0;
    font-weight: 300;
}

.style-liste ul li {
    position: relative;
    padding-left: 24px;
    line-height: 1.5;
}

.style-liste ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 17px;
    height: 17px;
    background-image: url('/wp-content/uploads/2025/03/svg-image-5.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.style-liste-white ul li::before {
    background-image: url('/wp-content/uploads/2025/03/svg-image-white.svg'); /* Chemin du SVG blanc */
}

#jet-engine-query-edit-modal {
    display: none !important;
}


.premium-lq__shadow1 {
    box-shadow: 0 0 0px 0 rgba(255,255,255,.6) inset !important;
}


#copy-triptyque .elementor-image-box-title {
    background: linear-gradient(90deg, #8059FA 0%, #063CFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* Pour compatibilité future */
}

#text-box .qc-icon-check-bleu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #063CFF 0%, #335BFF 100%);
    color: white;
    /* font-size: 13px; */
    /* font-weight: bold; */
    box-shadow: 0 2px 8px rgba(6, 60, 255, 0.25);
}


#text-box .qc-icon-check-violet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    /* Mise à jour de la couleur avec votre violet #7c3aed */
    background: #7c3aed; 
    color: white;
    /* Mise à jour de l'ombre pour correspondre au nouveau violet */
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.gradient {
  background: linear-gradient(90deg, #8059FA 0%, #063CFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 500; /* optionnel pour donner plus de force */
}

@font-face {
  font-family: 'Outfit';
  src: url('https://mesformations-business.com/wp-content/uploads/fonts/Outfit-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('https://mesformations-business.com/wp-content/uploads/fonts/Outfit-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('https://mesformations-business.com/wp-content/uploads/fonts/Outfit-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

#bloc-liste-ok ul {
    list-style: none;
    padding-left: 0;
}

#bloc-liste-ok ul li {
    padding-left: 35px;
    position: relative;
}

#bloc-liste-ok ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 12.5L10.5 14.5L15.5 9.5" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C21.5093 4.43821 21.8356 5.80655 21.9449 8" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}



/* --- Styles généraux --- */
.quiz-container {
    margin: 2rem auto 72px auto;
    padding: 48px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 20px 60px rgba(128, 89, 250, 0.12);
    border: 2px solid transparent;
    background-image: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%), linear-gradient(90deg, #8059FA 0%, #063CFF 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

@media (max-width: 640px) {
  .quiz-container {
    padding: 15px;
  }
}

.quiz-container h3 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px 0;
    text-align: center;
    background: linear-gradient(90deg, #8059FA 0%, #063CFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quiz-container p {
    font-size: 16px;
    color: #4b5563;
    margin-bottom: 12px;
}

/* --- Styles du Formulaire --- */
.quiz-form fieldset {
    background: #f8f9ff;
    border-radius: 16px;
    border: 1px solid #e0e0f0;
    padding: 20px;
    margin-bottom: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Outfit', sans-serif;
}

.quiz-form fieldset:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(128, 89, 250, 0.1);
}

.quiz-form legend {
    font-weight: 700;
    background: linear-gradient(90deg, #8059FA 0%, #063CFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
    display: block;
    padding: 0; 
}

/* Espacement des réponses (gap: 4 et my-4) */
.quiz-form .option-container {
    display: flex;
    align-items: flex-start; 
    /* CORRECTION: Augmentation du gap pour plus d'espace entre le radio et le texte */
    gap: 12px;
    margin-top: 16px; 
    margin-bottom: 16px; 
}

/* OPTIMISATION: Taille et Visibilité du radio button */
.custom-radio-color {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    /* CORRECTION: Fixer la taille pour qu'elle soit la même sélectionnée ou non */
    width: 20px; 
    height: 20px; 
    /* Le 'border' doit être pris en compte dans la taille apparente, 
       donc la taille de 20px est conservée comme dimension finale souhaitée. */
    border: 2px solid #aaa; 
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.custom-radio-color:checked {
    background-color: #7f58fa; 
    border-color: #7f58fa;
    box-shadow: 0 0 0 3px rgba(127, 88, 250, 0.3);
}

.custom-radio-color:checked::before {
    content: '';
    display: block;
    /* Dimensions du point intérieur pour un radio de 20px (20 - 2*2 = 16px de contenu disponible) */
    width: 8px; 
    height: 8px; 
    background-color: white; 
    border-radius: 50%;
    margin: 4px; /* (16px - 8px) / 2 = 4px, pour le centrage parfait */
}

/* Ajustement de l'alignement */
.quiz-form .radio-input {
    /* Retiré les classes h-4 w-4 mt-1 du JS et ajusté le margin-top à 0 dans le CSS 
       pour un alignement précis avec la nouvelle taille (20px) */
    margin-top: 0px !important; 
}

.quiz-form .label-text {
    flex-grow: 1; 
    white-space: normal; 
}


/* --- Styles du Bouton --- */
.quiz-form button, #quiz-replay-btn {
    padding: 12px 24px;
    border-radius: 16px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    transition: all 0.3s ease;
    border: none;
    background-color: #6366f1;
    color: #fff;
    cursor: pointer;
    text-align: center; 
}

.quiz-form button:hover, #quiz-replay-btn:hover {
    background: linear-gradient(90deg, #8059FA 0%, #063CFF 100%);
    color: #fff;
}

/* --- Styles du Résultat et Fade-in --- */
.quiz-result {
    border-radius: 16px;
    padding: 24px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(128, 89, 250, 0.08);
    font-family: 'Outfit', sans-serif;
    text-align: center;
}

/* Gestion du Fade-in */
.fade-transition {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fade-transition.is-visible {
    opacity: 1;
}

.hidden {
  display: none !important;
}

/* Formatage du résultat */
.quiz-result .result-score {
    font-size: 1.25rem; /* text-lg */
    font-weight: 800; /* Plus gras que 700 */
    margin-bottom: 1rem; /* Espacement après le score */
}

.quiz-result .result-message {
    font-size: 1rem;
    margin-bottom: 24px; /* Espacement de 24px avant le bouton Rejouer */
}

.quiz-result strong {
    font-weight: 700;
    color: #6366f1; 
}

/* Styles de base pour le feedback */
.quiz-feedback { 
    margin-top: 24px; 
    margin-bottom: 24px; /* ⬅️ POINT 1: Marge inférieure ajoutée */
    padding: 10px; 
    border-left: 5px solid; 
    opacity: 0; 
    /* Effet d'apparition fade-in-up */
    transform: translateY(10px); 
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; 
}
.quiz-feedback.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Couleurs de feedback */
.feedback-correct { border-color: #28a745; background-color: #d4edda; color: #155724; } /* Vert */
.feedback-incorrect { border-color: #dc3545; background-color: #f8d7da; color: #721c24; } /* Rouge */

/* Styles pour le récapitulatif final */
.quiz-result-final { 
    margin-top: 40px; 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    opacity: 0; 
    /* Effet d'apparition fade-in-up */
    transform: translateY(10px); 
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; 
}
.quiz-result-final.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}
.result-score-final {
    font-size: 1.25em; 
    font-weight: bold;
    color: #4c51bf; 
    margin-bottom: 10px;
}
.result-message-final {
    font-size: 1em;
    line-height: 1.4;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'OUTFIT';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://mesformations-business.com/wp-content/uploads/2025/04/Outfit-Light.woff') format('woff');
}
@font-face {
	font-family: 'OUTFIT';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://mesformations-business.com/wp-content/uploads/2025/04/Outfit-Regular.woff') format('woff');
}
@font-face {
	font-family: 'OUTFIT';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://mesformations-business.com/wp-content/uploads/2025/04/Outfit-Medium.woff') format('woff');
}
@font-face {
	font-family: 'OUTFIT';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://mesformations-business.com/wp-content/uploads/2025/04/Outfit-SemiBold.woff') format('woff');
}
/* End Custom Fonts CSS */