@font-face {
    font-family: 'Basier Circle Regular';
    src: url('/app/themes/formulaires-skolae-tours-theme/assets/fonts/basier-circle/BasierCircle-Regular.otf') format('opentype');
    font-display: swap;
    font-weight: 400;
}
@font-face {
    font-family: 'Basier Circle Medium';
    src: url('/app/themes/formulaires-skolae-tours-theme/assets/fonts/basier-circle/BasierCircle-Medium.otf') format('opentype');
    font-display: swap;
    font-weight: 500;
}
@font-face {
    font-family: 'Basier Circle SemiBold';
    src: url('/app/themes/formulaires-skolae-tours-theme/assets/fonts/basier-circle/BasierCircle-SemiBold.otf') format('opentype');
    font-display: swap;
    font-weight: 600;
}
@font-face {
    font-family: 'Basier Circle Bold';
    src: url('/app/themes/formulaires-skolae-tours-theme/assets/fonts/basier-circle/BasierCircle-Bold.otf') format('opentype');
    font-display: swap;
    font-weight: 700;
}

:root {

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

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

   --font-api-loader-error : "Basier Circle Regular", "Inter", system-ui, serif;

    /* PROP COMMUNES background body */
    --Color-background-main : white;

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

    --Color-progress-text : #272727;
    --Color-progress-text-focus : #272727;
    --Color-progress-text-done : #272727;
    --Color-background-text-selecte: #FFF388;

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

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

    --Color-progress-circle-border-hover : #272727;
    --Color-progress-circle-background-hover : #393939;
    --Color-progress-circle-text-hover : #FFF388;

    --Color-progress-done-circle-border : #272727;
    --Color-progress-done-circle-background : #272727;
    --Color-progress-done-circle-text : #FFF388;

    --Color-progress-focus-circle-border : #272727;
    --Color-progress-focus-circle-background : #272727;
    --Color-progress-focus-circle-text : #FFF388;



    /* PROP COMMUNES boutons */
    --Color-btn-background : #F4F4F4; /* j ai du renommer la variable, sinon il prends la valeur de */
    /* --Color-btn-background-brochure : #F4F4F4; */

    --Color-btn-background-hover : #FFF388;
    --Color-btn-border : none;
    --Color-btn-border-hover : none;
    --Btn-border-radius : 36px;
    --Color-btn-text : #272727;
    --Color-btn-text-hover : #272727;
    --Btn-padding-inline : 40px;
    --Btn-padding-block : 12px;

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

    --Color-loader-background-head-footer : #272727;
    --Color-loader-text : white;

    --Color-error-background-head-footer : #272727;
    --Color-error-background-body : white;
    --Color-error-subtitle : red;
    --Color-error-content : #272727;
    --Color-checkbox-focus : #FFF388;

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

   

    /* PAGE 1 et 2 */

    /*--------------CHAMPS DE FORMULAIRE */
    --Color-label : #272727;
    --Color-placeholder : #272727;
    --Color-input-background : #F4F4F4;
    --Color-input-border : none;
    --Color-input-border-focus : none;
    --Color-input-text : #272727;
    --Color-picto-select : #F4F4F4;;
    --Color-Halo-focus : #e6e6e6;


    /* PAGE 3 */

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

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

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

    --Color-texte-rgpd : #272727;
    --Color-line-rgpd : #272727;
    --Color-rgpd-checkbox-border : #272727;
    --Color-rgpd-checkbox-checked : #FFF388;
    --Color-rgpd-checkbox : white;

}

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

/* Couleur de sélection de texte */
.moduleBrochure ::selection {
    background: var(--Color-background-text-selected) !important;
    color: var(--Color-progress-text) !important;
}

.moduleBrochure ::-moz-selection {
    background: var(--Color-background-text-selected) !important;
    color: var(--Color-progress-text) !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;
    font-weight: 600 !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-inline: var(--Btn-padding-inline);
    padding-block: var(--Btn-padding-block);    
    color: var(--Color-btn-text);
    font-weight: normal;
    min-width: min-content !important;
    font-family: var(--font-btn-nav) !important;    
}

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

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

/* --------------- OVERRIDE ANCIENS SVG POUR BOUTONS CTA --------------- */
/* Remplacer par mask-image pour bouton suivant (permet de changer la couleur au hover) */
.moduleBrochure.CL-theme div.btn[data-nav-btn="next"]::after {
    content: '';
    display: block;
    width: 5px;
    height: 13px;
    /* background-color: var(--Color-btn-background); */
    background-color: var(--Color-picto-select);/* #F4F4F4;*/
    
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%225%22 height=%2213%22 viewBox=%220 0 5 13%22%3E%3Cpath d=%22M0.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%22 fill=%22black%22/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%225%22 height=%2213%22 viewBox=%220 0 5 13%22%3E%3Cpath d=%22M0.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%22 fill=%22black%22/%3E%3C/svg%3E');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.moduleBrochure #ges-formulaire div.btn > span {
    text-transform: lowercase;
    letter-spacing: 0.5px;

}
.moduleBrochure #ges-formulaire div.btn > span::first-letter {
    text-transform: uppercase;
}

.moduleBrochure.CL-theme div.btn[data-nav-btn="next"]:hover::after {
    background-color: var(--Color-btn-text-hover);
}

/* Flexbox pour bouton précédent afin de placer la flèche à gauche du span */
.moduleBrochure.CL-theme div.btn[data-nav-btn="prev"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Remplacer par mask-image pour bouton précédent (::before = à gauche du span) */
.moduleBrochure.CL-theme div.btn[data-nav-btn="prev"]::before {
    content: '';
    display: block;
    width: 5px;
    height: 13px;
    background-color: var(--Color-picto-select); 
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%225%22 height=%2213%22 viewBox=%220 0 5 13%22%3E%3Cpath d=%22M4.37871 13C4.17883 13 4.00393 12.9133 3.879 12.711L0.131174 6.93153C-0.0437245 6.67145 -0.0437245 6.32468 0.131174 6.0646L3.879 0.285103C4.07888 -0.0327697 4.47865 -0.0905647 4.75349 0.140615C5.02833 0.371795 5.0783 0.834155 4.87842 1.15203L1.40543 6.49806L4.87842 11.8441C5.0783 12.162 5.02833 12.6243 4.75349 12.8555C4.65355 12.9422 4.50364 13 4.37871 13Z%22 fill=%22black%22/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%225%22 height=%2213%22 viewBox=%220 0 5 13%22%3E%3Cpath d=%22M4.37871 13C4.17883 13 4.00393 12.9133 3.879 12.711L0.131174 6.93153C-0.0437245 6.67145 -0.0437245 6.32468 0.131174 6.0646L3.879 0.285103C4.07888 -0.0327697 4.47865 -0.0905647 4.75349 0.140615C5.02833 0.371795 5.0783 0.834155 4.87842 1.15203L1.40543 6.49806L4.87842 11.8441C5.0783 12.162 5.02833 12.6243 4.75349 12.8555C4.65355 12.9422 4.50364 13 4.37871 13Z%22 fill=%22black%22/%3E%3C/svg%3E');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.moduleBrochure.CL-theme div.btn[data-nav-btn="prev"]:hover::before {
    background-color: var(--Color-btn-text-hover);
}

.moduleBrochure.CL-theme .form-nav .form-nav-item .btn[data-nav-btn='prev'],
.moduleBrochure.CL-theme .form-nav .form-nav-item .btn[data-nav-btn='next'],
.moduleBrochure.CL-theme .form-nav .form-nav-item .btn[data-nav-btn='submit'] {
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.moduleBrochure.CL-theme .form-nav .form-nav-item .btn[data-nav-btn='prev'] > span,
.moduleBrochure.CL-theme .form-nav .form-nav-item .btn[data-nav-btn='next'] > span,
.moduleBrochure.CL-theme .form-nav .form-nav-item .btn[data-nav-btn='submit'] > span {
    line-height: 0px; /* c est la meilleure maniere de trouver un alignement entre le texte et le svg */
}

.moduleBrochure.CL-theme .form-nav .form-nav-item .btn[data-nav-btn='submit'] {
    display: flex !important;
    min-height: calc(var(--Btn-padding-block) * 2 + 13px); /* aligne avec prev/next qui ont un pseudo-element ::before/::after de 13px */
}

/* Masquer le bouton précédent sur la première étape */
.moduleBrochure.CL-theme #form_candidature > #ges-formulaire > div.candidature-page-wrapper div[data-slide-id="0"] #form-step-0 .form-nav .form-nav-item  button[data-nav-btn="prev"],
.moduleBrochure.CL-theme #form_candidature > #ges-formulaire > div.candidature-page-wrapper div[data-slide-id="0"] #form-step-0 .form-nav .form-nav-item  div.btn[data-nav-btn="prev"] {
    display: none !important;
}

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

.moduleBrochure.CL-theme button:hover, .moduleBrochure.CL-theme div.btn:hover {
    background: var(--Color-btn-background-hover) !important;
    border: var(--Color-btn-border-hover);
    color: var(--Color-btn-text-hover); 
}

.moduleBrochure.CL-theme form .form-validate button.btnSubmit:hover {
    background: var(--Color-btn-background-hover) !important;
    border: var(--Color-btn-border-hover) !important;
    color: var(--Color-btn-text-hover) !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;
        font-family: var(--font-label) !important;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
}
/* ---------------- CHAMP DE FORMULAIRES -----------------*/

.moduleBrochure form .form-line .form-label {
    color: var(--Color-label) !important;
    font-family: var(--font-label) !important;
    font-weight: 600;
    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;
}

.moduleBrochure form .form-line .form-input select, .moduleBrochure form .form-line .form-input input, .moduleBrochure form .form-line .form-input select .input_autofill {
    color: var(--Color-input-text);
    font-family: var(--font-input-select) !important;
}

.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;
}

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

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

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

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

/* Radio buttons */
.moduleBrochure input[type="radio"]:checked {
    background-color: var(--Color-progress-done-circle-text) !important;
    border-color: var(--Color-progress-done-circle-border) !important;
}

.moduleBrochure input[type="radio"]:checked::after {
    background-color: var(--Color-progress-done-circle-background) !important;
}

/* Checkboxes - toutes les checkboxes en jaune */
.moduleBrochure input[type="checkbox"] {
    accent-color: var(--Color-progress-done-circle-text) !important;
}

.moduleBrochure input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 5px var(--Color-checkbox-focus) !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;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
}

.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: var(--Color-rgpd-checkbox) !important;
}

.moduleBrochure .form_rgpd#form_rgpd_1 input[type='checkbox']:checked {    
        background: var(--Color-rgpd-checkbox-checked )  !important;
        border-color: var(--Color-rgpd-checkbox-border) !important;
}

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