/* HumanSans font faces */
@font-face{
    font-family:"HumanSans";
    src:url('/app/themes/formulaires-ecole-nemetra-theme/assets/fonts/fonts/HumanSans-Light.otf') format("opentype");
    font-display:swap;
    font-style:normal;
    font-weight:300;
    font-stretch:normal
}
@font-face{
    font-family:"HumanSans";
    src:url('/app/themes/formulaires-ecole-nemetra-theme/assets/fonts/HumanSans-LightOblique.otf') format("opentype");
    font-display:swap;
    font-style:italic;
    font-weight:300;
    font-stretch:normal
}
@font-face{
    font-family:"HumanSans";
    src: url('/app/themes/formulaires-ecole-nemetra-theme/assets/fonts/HumanSans-Medium.otf') format("opentype");
    font-display:swap;
    font-style:normal;
    font-weight:500;
    font-stretch:normal
}

/* Safiro font faces */
@font-face{
    font-family:"Safiro";
    src:url('/app/themes/formulaires-ecole-nemetra-theme/assets/fonts/Safiro-Regular.otf') format("opentype");
    font-display:swap;
    font-style:normal;
    font-weight:400;
    font-stretch:normal
}
@font-face{
    font-family:"Safiro";
    src:url('/app/themes/formulaires-ecole-nemetra-theme/assets/fonts/Safiro-Medium.otf') format("opentype");
    font-display:swap;
    font-style:normal;
    font-weight:500;
    font-stretch:normal
}
@font-face{
    font-family:"Safiro";
    src:url('/app/themes/formulaires-ecole-nemetra-theme/assets/fonts/Safiro-SemiBold.otf') format("opentype");
    font-display:swap;
    font-style:normal;
    font-weight:600;
    font-stretch:normal
}
:root {

    /* FAMILLE DE POLICE */
   
   --font-progress-text : "Safiro", "Inter", system-ui, serif;
   --font-progress-circle : "Human Sans Regular", "Inter", system-ui, serif;
   --font-text-accueil-message : "Human Sans Regular", "Inter", system-ui, serif;

   --font-btn-nav : "Safiro", "Inter", system-ui, serif;
   --font-label : "Safiro", "Inter", system-ui, serif;
   --font-input-select : "Human Sans Regular", "Inter", system-ui, serif;
   
   --font-resume-title : "Human Sans SemiBold", "Inter", system-ui, serif;
   --font-resume-text : "Human Sans Regular", "Inter", system-ui, serif;

   --font-api-loader-error : "Human Sans Regular", "Inter", system-ui, serif;

    /* PROP COMMUNES background body */
    --Color-background-main : #202020;

    /* PROP COMMUNES progress bar */
    --Color-background-banner-progress : #468054;

    --Color-progress-text : #EBF2FA;
    --Color-progress-text-focus : #EBF2FA;
    --Color-progress-text-done : #EBF2FA;

    --Color-progress-text-line-mobile : #EBF2FA;

    --Color-progress-circle-border : #EBF2FA;
    --Color-progress-circle-background : none;
    --Color-progress-circle-text : #EBF2FA;

    --Color-progress-circle-border-hover : #EBF2FA;
    --Color-progress-circle-background-hover : #EBF2FA;
    --Color-progress-circle-text-hover : #468054;

    --Color-progress-done-circle-border : #EBF2FA;
    --Color-progress-done-circle-background : #EBF2FA;
    --Color-progress-done-circle-text : #468054;

    --Color-progress-focus-circle-border : #468054;
    --Color-progress-focus-circle-background : #EBF2FA ;
    --Color-progress-focus-circle-text : #468054;



    /* PROP COMMUNES boutons */
    --Color-btn-background : transparent;
    --Color-btn-background-hover : transparent;
    --Color-btn-border : 1px solid #EBF2FA ;
    --Color-btn-border-hover : 1px solid #e6e6e6;
    --Btn-border-radius : 36px;
    --Color-btn-text : #EBF2FA;
    --Color-btn-text-hover : #EBF2FA;
    --Btn-padding-inline : 40px;
    --Btn-padding-block : 12px;

    --Color-svg : #EBF2FA;
    
    /* PROP COMMUNE api loader error */

    --Color-loader-background-head-footer : #468054;
    --Color-loader-text : #EBF2FA;

    --Color-error-background-head-footer : #468054;
    --Color-error-background-body : #363636;
    --Color-error-subtitle : red;
    --Color-error-content : #EBF2FA;

    /* PAGE 0 */
    --Color-acceuil-text : #EBF2FA;
    --Color-acceuil-text-bold : #EBF2FA;

   

    /* PAGE 1 et 2 */

    /*--------------CHAMPS DE FORMULAIRE */
    --Color-label : #EBF2FA;
    --Color-placeholder : #EBF2FA;
    --Color-input-background : #202020;
    --Color-input-border : 1px solid #468054;
    --Color-input-border-focus : 1px solid #468054;
    --Color-input-text : #EBF2FA;
    --Color-picto-select : #EBF2FA;
    --Color-Halo-focus : #468054;


    /* PAGE 3 */

    --Color-resume-title : #EBF2FA;
    --Color-resume-number : #EBF2FA;
    --Color-resume-number-border : #EBF2FA;
    --Color-resume-number-background : none;

    --Color-resume-label : #EBF2FA;
    --Color-resume-texte : #EBF2FA;

    --Color-picto-edit : #EBF2FA;
    --Color-picto-edit-hover : #e6e6e6;

    --Color-texte-rgpd : #EBF2FA;
    --Color-line-rgpd : #EBF2FA;
    --Color-rgpd-checkbox-border : #EBF2FA;
    --Color-rgpd-checkbox-checked : #468054;

}

/* ------------- PROP COMMUNES -----------------*/

/* Couleur de sélection de texte */
.moduleBrochure ::selection {
    background: #468054 !important;
    color: #272727 !important;
}

.moduleBrochure ::-moz-selection {
    background: #468054 !important;
    color: #272727 !important;
}




body{

    background: var(--Color-background-main) !important;
    
}



/*------------- PROGRESS BAR-----------------*/

.moduleBrochure.CL-theme #global_header #banner {

    background: var(--Color-background-banner-progress);

}

.moduleBrochure.CL-theme #global_header #progress-bar .progress_text {
    color: var(--Color-progress-text);
    font-family: var(--font-progress-text) !important;
    font-size: 16px !important;
}

.moduleBrochure.CL-theme #global_header #progress-bar .progress-item.focus .progress_text {
    color: var(--Color-progress-text-focus);
}

.moduleBrochure.CL-theme #global_header #progress-bar .progress-item.done .progress_text {
    color: var(--Color-progress-text-done);
}

/* ---------- MOBILE */
.moduleBrochure .mobile.page-title  {
    color: var(--Color-progress-text);
}
.moduleBrochure .mobile.page-title:after  {
    border-bottom: 1px solid var(--Color-progress-text-line-mobile);
}



/* --------- PROGRESS CIRCLE */

/* ------- ETAT NORMAL */
.moduleBrochure.CL-theme #global_header #progress-bar .progress-item .progress {

    border: 1px solid var(--Color-progress-circle-border);
    background-color: var(--Color-progress-circle-background);
    color: var(--Color-progress-circle-text);
    font-family: var(--font-progress-circle) !important;
    line-height: 16px;
}

/* ------- ETAT DONE */
.moduleBrochure.CL-theme #global_header #progress-bar .progress-item.done .progress {
    border: 1px solid var(--Color-progress-done-circle-border);
    background-color: var(--Color-progress-done-circle-background);
    color: var(--Color-progress-done-circle-text);
}

/* ------- ETAT FOCUS */
.moduleBrochure.CL-theme #global_header #progress-bar .progress-item.focus .progress {
    background-color: var(--Color-progress-focus-circle-background);
    border: 1px solid var(--Color-progress-focus-circle-border);
    color: var(--Color-progress-focus-circle-text);
    
}

/* ------- ETAT HOVER */
.moduleBrochure.CL-theme #global_header #progress-bar .progress-item.done:not(.focus) .progress.resume-goback:hover {
    background-color: var(--Color-progress-circle-background-hover);
    border: 1px solid var(--Color-progress-circle-border-hover);
    color: var(--Color-progress-circle-text-hover);
}


/*--------- MOBILE */
.moduleBrochure .mobile.page-title {
    color: var(--Color-progress-text);
    font-family: var(--font-progress-text) !important;

}

/*------------- BOUTONS-----------------*/

.moduleBrochure.CL-theme button, .moduleBrochure.CL-theme div.btn {
    background: var(--Color-btn-background);
    border: var(--Color-btn-border);
    border-radius: var(--Btn-border-radius);
    padding: 8px 40px 12px;
    color: var(--Color-btn-text);
    font-weight: normal;
    min-width: min-content !important;
    font-family: var(--font-btn-nav) !important;
    font-size: 16px !important;    
}

.moduleBrochure.CL-theme button, .moduleBrochure.CL-theme div.btn svg.svg-ges-formulaire-arrow-def-ctrl use{
     fill: var(--Color-svg);  
}

/* Nouvelles flèches SVG personnalisées pour les CTA */
.moduleBrochure.CL-theme button svg.svg-ges-formulaire-arrow-def-ctrl,
.moduleBrochure.CL-theme div.btn svg.svg-ges-formulaire-arrow-def-ctrl {
    display: none;
}

.moduleBrochure.CL-theme button::after,
.moduleBrochure.CL-theme div.btn::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 13px;
    margin-left: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg width="5" height="13" viewBox="0 0 5 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.621289 -2.71574e-08C0.821173 -3.58946e-08 0.996072 0.0866928 1.121 0.288976L4.86883 6.06847C5.04372 6.32855 5.04372 6.67532 4.86883 6.9354L1.121 12.7149C0.921116 13.0328 0.521348 13.0906 0.246507 12.8594C-0.0283336 12.6282 -0.0783046 12.1658 0.121579 11.848L3.59457 6.50194L0.121579 1.1559C-0.0783051 0.838028 -0.0283341 0.375668 0.246506 0.144488C0.346449 0.0577955 0.496362 -2.16967e-08 0.621289 -2.71574e-08Z" fill="%23EBF2FA"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

/* Masquer la flèche sur les boutons précédents */
.moduleBrochure.CL-theme button[data-nav-btn="prev"]::after,
.moduleBrochure.CL-theme div.btn[data-nav-btn="prev"]::after {
    display: none;
}

/* Flèche pour les boutons précédents (vers la gauche) */
.moduleBrochure.CL-theme button[data-nav-btn="prev"]::before,
.moduleBrochure.CL-theme div.btn[data-nav-btn="prev"]::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 13px;
    margin-right: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg width="5" height="13" viewBox="0 0 5 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.621289 -2.71574e-08C0.821173 -3.58946e-08 0.996072 0.0866928 1.121 0.288976L4.86883 6.06847C5.04372 6.32855 5.04372 6.67532 4.86883 6.9354L1.121 12.7149C0.921116 13.0328 0.521348 13.0906 0.246507 12.8594C-0.0283336 12.6282 -0.0783046 12.1658 0.121579 11.848L3.59457 6.50194L0.121579 1.1559C-0.0783051 0.838028 -0.0283341 0.375668 0.246506 0.144488C0.346449 0.0577955 0.496362 -2.16967e-08 0.621289 -2.71574e-08Z" fill="%23EBF2FA"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    transform: rotate(180deg);
}

/* Masquer le bouton précédent sur la première étape */
.moduleBrochure div[data-slide-id="0"] button[data-nav-btn="prev"],
.moduleBrochure div[data-slide-id="0"] div.btn[data-nav-btn="prev"] {
    display: none;
}

.moduleBrochure #ges-formulaire #pageAccueil div#launch {
    width: min-content !important;
}

.moduleBrochure.CL-theme button:hover, .moduleBrochure.CL-theme div.btn:hover {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #272727 !important; 
}

/* Flèche suivant en noir au hover */
.moduleBrochure.CL-theme button:hover::after,
.moduleBrochure.CL-theme div.btn:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg width="5" height="13" viewBox="0 0 5 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.621289 -2.71574e-08C0.821173 -3.58946e-08 0.996072 0.0866928 1.121 0.288976L4.86883 6.06847C5.04372 6.32855 5.04372 6.67532 4.86883 6.9354L1.121 12.7149C0.921116 13.0328 0.521348 13.0906 0.246507 12.8594C-0.0283336 12.6282 -0.0783046 12.1658 0.121579 11.848L3.59457 6.50194L0.121579 1.1559C-0.0783051 0.838028 -0.0283341 0.375668 0.246506 0.144488C0.346449 0.0577955 0.496362 -2.16967e-08 0.621289 -2.71574e-08Z" fill="%23272727"/></svg>');
}

/* Flèche précédent en noir au hover */
.moduleBrochure.CL-theme button[data-nav-btn="prev"]:hover::before,
.moduleBrochure.CL-theme div.btn[data-nav-btn="prev"]:hover::before {
    background-image: url('data:image/svg+xml;utf8,<svg width="5" height="13" viewBox="0 0 5 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.621289 -2.71574e-08C0.821173 -3.58946e-08 0.996072 0.0866928 1.121 0.288976L4.86883 6.06847C5.04372 6.32855 5.04372 6.67532 4.86883 6.9354L1.121 12.7149C0.921116 13.0328 0.521348 13.0906 0.246507 12.8594C-0.0283336 12.6282 -0.0783046 12.1658 0.121579 11.848L3.59457 6.50194L0.121579 1.1559C-0.0783051 0.838028 -0.0283341 0.375668 0.246506 0.144488C0.346449 0.0577955 0.496362 -2.16967e-08 0.621289 -2.71574e-08Z" fill="%23272727"/></svg>');
}

.moduleBrochure .CL-theme form .form-validate button.btnSubmit:hover {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #272727 !important; 
}

.moduleBrochure.CL-theme button, .moduleBrochure.CL-theme div.btn:hover svg use {
    fill : var(--Color-svg-hover);
}


/*----------LOADER*/

.moduleBrochure .processing #loader {
    background-color: var(--Color-loader-background-head-footer);
    border: solid 1px var(--Color-loader-background-head-footer);
}

.moduleBrochure .processing #loader .head {
    background-color: var(--Color-loader-background-head-footer);
    font-family: var(--font-api-loader-error) !important;
}

.moduleBrochure .processing #loader .head .title {
    font-family: var(--font-api-loader-error) !important;
    color: var(--Color-loader-text);
}

/*----------API ERROR */

.moduleBrochure #form-error-box api {
    background-color: var(--Color-error-background-head-footer);
    border: solid 1px var(--Color-error-background-head-footer);
    font-family: var(--font-api-loader-error) !important;
    /* color: red; */
}

.moduleBrochure #form-error-box api .head {
    background-color: var(--Color-error-background-head-footer);
    border: solid 1px var(--Color-error-background-head-footer);
    font-family: var(--font-api-loader-error) !important;
    /* color: red; */
}

.moduleBrochure #form-error-box api .body {
    background-color: var(--Color-error-background-body);
    border: solid 1px var(--Color-error-background-head-footer);
}


.moduleBrochure #form-error-box api .head .title{
    font-family: var(--font-api-loader-error) !important;
    color: var(--Color-error-title);
}


.moduleBrochure #form-error-box api .body .subtitle {
    font-family: var(--font-api-loader-error) !important;
    color: var(--Color-error-subtitle);
}

.moduleBrochure #form-error-box api .body #error-content li{
    color: var(--Color-error-content) !important;
    font-family: var(--font-api-loader-error) !important;
}

.moduleBrochure #form-error-box api .body li .error-extra-info {
    font-family: var(--font-api-loader-error) !important;
}

/* -------------------- PAGE 1 ----------------------*/
.moduleBrochure .required-fields-info {
        color: var(--Color-label) !important;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        font-family: "Safiro Medium", "Inter", system-ui, serif !important;
}
/* ---------------- CHAMP DE FORMULAIRES -----------------*/

.moduleBrochure #DQE_phone_code{
    background-color: var(--Color-input-background);
    border: var(--Color-input-border) !important;
}

.moduleBrochure .form-input svg.DQE_phone_code_arrow use{
    fill: var(--Color-picto-select);
}


.moduleBrochure form .form-line .form-label {
    color: var(--Color-label) !important;
    font-family: var(--font-label) !important;
    font-weight: 500;
    font-size: 16px !important;
}

/* Supprimer tous les border-radius des champs de formulaire */
.moduleBrochure form .form-line .form-input select, 
.moduleBrochure form .form-line .form-input input, 
.moduleBrochure form .form-line .form-input textarea,
.moduleBrochure form .form-line .form-input .select2-container .select2-selection--single,
.moduleBrochure .select2-container .select2-selection--single {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

/* Fond site + border verte sur tous les champs (état normal) */
.moduleBrochure form .form-line .form-input select, 
.moduleBrochure form .form-line .form-input input, 
.moduleBrochure form .form-line .form-input textarea,
.moduleBrochure form .form-line .form-input .select2-container .select2-selection--single,
.moduleBrochure .select2-container .select2-selection--single {
    background-color: var(--Color-input-background) !important;
    border: var(--Color-input-border) !important;
}


.moduleBrochure form .form-line .form-input select, .moduleBrochure form .form-line .form-input input:not([type='radio']):not([type='checkbox']), .moduleBrochure form .form-line .form-input select .input_autofill, .moduleBrochure form .form-line .form-input select.select_autofill {
    color: var(--Color-input-text) !important;
    font-family: var(--font-input-select) !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
}

.moduleBrochure form .form-line .form-input .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--Color-input-text);
    font-family: var(--font-input-select) !important;
    font-size: 16px;
}

.moduleBrochure .select2-container {
   color: var(--Color-input-text) !important;
   font-family: var(--font-input-select) !important;
   font-size: 16px;
}

.moduleBrochure form .form-line > .form-input > .input_autofill::placeholder
 {
    color: var(--Color-placeholder) !important;
    font-family: var(--font-input-select) !important;
    font-size: 16px;
}

/*----------- PICTO FLECHE SELECT*/

.moduleBrochure.CL-theme form .form-line .form-input svg.svg-ges-formulaire-arrow-def-ctrl use {
    fill: var(--Color-picto-select);
}

/*----------- FOCUS CHAMP*/

.moduleBrochure form .form-line .form-input:not(.radio.radio-box) input:focus, 
.moduleBrochure form .form-line .form-input textarea:focus, 
.moduleBrochure form .form-line .form-input select:focus{
    border-color: var(--Color-Halo-focus) !important;
    background-color: #363636 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px var(--Color-Halo-focus);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px var(--Color-Halo-focus);
}

/* Select2 dropdown ouvert / focus */
.moduleBrochure .select2-container--open .select2-selection--single,
.moduleBrochure .select2-container--focus .select2-selection--single {
    background-color: #363636 !important;
    border: 1px solid #468054 !important;
}

/* Fond du dropdown select2 */
.moduleBrochure .select2-dropdown {
    background-color: #363636 !important;
    border: 1px solid #468054 !important;
}

.moduleBrochure .select2-results__option {
    background-color: #363636 !important;
    color: var(--Color-input-text);
}

.moduleBrochure .select2-results__option--highlighted {
    background-color: #468054 !important;
    color: #EBF2FA !important;
}

/*----------- RADIO ET CHECKBOX*/

/* Radio buttons */
.moduleBrochure input[type="radio"]:checked {
    background-color: #468054 !important;
    border-color: #272727 !important;
}

.moduleBrochure input[type="radio"]:checked::after {
    background-color: #272727 !important;
}

/* Checkboxes - toutes les checkboxes en jaune */
.moduleBrochure input[type="checkbox"] {
    accent-color: #468054 !important;
}

.moduleBrochure input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 5px #468054 !important;
}

/* -------------------- PAGE 2 ----------------------*/

/*-------------SOUS TITRES*/

.moduleBrochure #resume_content .resume-title{
    color: var(--Color-resume-title);
    font-family: var(--font-resume-title) !important;
}

.moduleBrochure.CL-theme #pageResume form .resume-part .resume-number,
.moduleBrochure #pageResume form .resume-part .resume-number{
    color: var(--Color-resume-number) !important;
    background-color: var(--Color-resume-number-background)!important;
    border: solid 1px var(--Color-resume-number-border) !important;
    font-family: var(--font-resume-number) !important;
}

/*-------------TEXTE RESUME*/

.moduleBrochure #resume_content .resume-label {
    color: var(--Color-resume-label);
    font-family: var(--font-resume-text) !important;
    font-weight: bold;
}

.moduleBrochure #resume_content .resume-texte {
    color: var(--Color-resume-texte);
    font-family: var(--font-resume-text) !important;
}

/*-------------PICTO EDIT*/

.moduleBrochure.CL-theme form .resume-part .resume-goback svg.svg-ges-formulaire-goback-def-ctrl use {
    fill: var(--Color-picto-edit);
}

.moduleBrochure.CL-theme form .resume-part .resume-goback:hover svg.svg-ges-formulaire-goback-def-ctrl use {
    fill: var(--Color-picto-edit-hover);
}

/*-------------RGPD TEXTE*/

.moduleBrochure .form_rgpd label {
    color: var(--Color-texte-rgpd);
    font-family: var(--font-text-accueil-message) !important;
}

.moduleBrochure .form_rgpd#form_rgpd_1 {
    border-top: 1px solid var(--Color-line-rgpd) !important;
}

.moduleBrochure .form_rgpd#form_rgpd_1  input[type="checkbox"] {
        border: 1px solid var(--Color-rgpd-checkbox-border) !important;
        background-color: white !important;
}

.moduleBrochure .form_rgpd#form_rgpd_1 input[type='checkbox']:checked {
        background: #468054 !important;
        border-color: #272727 !important;
}

/* Gap spécifique pour la page récapitulative */
.moduleBrochure #ges-formulaire.line-display #pageResume div[data-role='content'] {
    gap: 10px !important;
}

.moduleBrochure .active {
    border-bottom: unset !important;
}