/* Inter font faces */
@font-face{
    font-family:"Inter-Ialic";
    src:url('/app/themes/formulaires-ppa-assurance-theme/assets/fonts/fonts/Inter-Ialic-VariableFont_opsz,wght.ttf') format("opentype");
    font-display:swap;
    font-style:normal;
    font-weight:300;
    font-stretch:normal
}
@font-face{
    font-family:"Inter";
    src:url('/app/themes/formulaires-ppa-assurance-theme/assets/fonts/Inter-VariableFont_opsz,wght.ttf') format("opentype");
    font-display:swap;
    font-style:italic;
    font-weight:300;
    font-stretch:normal
}

/* Gazpacho font faces */
@font-face{
    font-family:"Gazpacho";
    src:url('/app/themes/formulaires-ppa-assurance-theme/assets/fonts/Gazpacho-MediumItalic.otf') format("opentype");
    font-display:swap;
    font-style:normal;
    font-weight:400;
    font-stretch:normal
}

:root {

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

   --font-btn-nav : "Inter SemiBold", "Inter", system-ui, serif;
   --font-label : "Inter SemiBold", "Inter", system-ui, serif;
   --font-input-select : "Inter Regular", "Inter", system-ui, serif;
   
   --font-resume-title : "Inter SemiBold", "Inter", system-ui, serif;
   --font-resume-text : "Inter Regular", "Inter", system-ui, serif;
   --font-resume-text-valeur : "Neue Haas Grotesk Display Pro", system-ui, serif;


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

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

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

    --Color-progress-text : #10182A;
    --Color-progress-text-focus : #10182A;
    --Color-progress-text-done : #10182A;

    --Color-progress-text-line-mobile : #10182A;

    --Color-progress-circle-border : #10182A;
    --Color-progress-circle-background : none;
    --Color-progress-circle-text : #009CAC;

    --Color-progress-circle-border-hover : #10182A;
    --Color-progress-circle-background-hover : #10182A;
    --Color-progress-circle-text-hover : #009CAC;

    --Color-progress-done-circle-border : #10182A;
    --Color-progress-done-circle-background : #10182A;
    --Color-progress-done-circle-text : #FFFFFF;

    --Color-progress-focus-circle-border : #10182A;
    --Color-progress-focus-circle-background : #10182A ;
    --Color-progress-focus-circle-text : #FFFFFF;



    /* PROP COMMUNES boutons */
    --Color-btn-background :#162038;
    --Color-btn-background-hover : #009CAC;
    --Color-btn-border : 1px solid #162038 ;
    --Color-btn-border-hover : 1px solid #009CAC;
    --Btn-border-radius : 4px;
    --Color-border-input: #413F3D;
    --Color-btn-text : #FFFFFF;
    --Color-btn-text-hover : #FFFFFF;
    --Btn-padding-inline : 40px;
    --Btn-padding-block : 12px;

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

    --Color-loader-background-head-footer : #162038;
    --Color-loader-text : #FFFFFF;;

    --Color-error-background-head-footer : #162038;
    --Color-error-background-body : #ffff;
    --Color-error-subtitle : red;
    --Color-error-content : #10182A;

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

   

    /* PAGE 1 et 2 */

    /*--------------CHAMPS DE FORMULAIRE */
    --Color-label : #10182A;
    --Color-placeholder : #10182A;
    --Color-input-background : transparent;
    --Color-input-border : 1px solid #10182A;
    --Color-input-border-focus : 1px solid #009CAC;
    --Color-input-text : #10182A;
    --Color-input-text-input : #1E1E1E;
    --Color-picto-select : #10182A;
    --Color-Halo-focus : #e6e6e6;


    /* PAGE 3 */

    --Color-resume-title : #10182A;
    --Color-resume-number : #10182A;
    --Color-resume-number-border : #10182A;
    --Color-resume-number-background : none;

    --Color-resume-label : #10182A;
    --Color-resume-texte : #10182A;

    --Color-picto-edit : #10182A;
    --Color-picto-edit-hover : #e6e6e6;

    --Color-texte-rgpd : #10182A;
    --Color-line-rgpd : #10182A;
    --Color-rgpd-checkbox-border : #10182A;
    --Color-rgpd-checkbox-checked : #009CAC;

}

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

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) !important;
    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 {
    color: inherit !important;
    content: '';
    display: inline-block;
    width: 5px;
    height: 13px;
    margin-left: 8px;
    margin-top: 4px;
    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="%23fff"/></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 {
    color: inherit !important;
    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="%23fff"/></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: #009CAC !important;
    border: var(--Color-btn-border-hover);
    color: var(--Color-btn-text-hover) !important;
}

.moduleBrochure .CL-theme form .form-validate button.btnSubmit:hover {
    background: #009CAC !important;
    border: var(--Color-btn-border-hover) !important;
    color: var(--Color-btn-text-hover) !important; 
}

/* Masquer la flèche sur le CTA valider (btnSubmit) dans la page récap */
.moduleBrochure .CL-theme form .form-validate button.btnSubmit::after {
    display: none !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: 600;
}
/* ---------------- CHAMP DE FORMULAIRES -----------------*/

.moduleBrochure form .form-line .form-label {
     color: var(--Color-label) !important;
    font-family: var(--font-label) !important;
    font-style: normal;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 120%; /* 19.2px */
}

/* 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-input );
    font-family: var(--font-input-select) !important;
    font-size: 16px !important;
    font-weight: 300;
    border-radius: 0 !important;
    font-style: normal;    
    line-height: 160%; /* 25.6px */
    background-color: #EEE !important;
    /* background: #FFF; */
    border: 1px solid var(--Color-border-input) !important;/* important sinon la proprieté ne s'applique pas */
    /* opacity: 0.7; */
}

.moduleBrochure form .form-line .form-input .select2-container--default .select2-selection--single .select2-selection__rendered {
    /* background: var(--Color-background-main) !important; */

    color: var(--Color-input-text-input ); /*var(--Color-input-text);*/
    font-family: var(--font-input-select) !important;
    font-size: 16px !important;
    font-weight: 300;
}

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

/* Options des dropdowns select2 */
.moduleBrochure .select2-results__option {
   font-family: var(--font-input-select) !important;
   font-size: 16px !important;
   font-weight: 300 !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: 1px solid #413F3D; */
    background: var(--Color-background-main) !important;
    border-color: var(--Color-input-border-focus); /*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: #009CAC !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: #009CAC !important;
}

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

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

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

.moduleBrochure #resume_content .resume-title{
    color: var(--Color-resume-title);
    font-family: var(--font-resume-title) !important;
    text-transform: capitalize !important;
    font-size: 20px !important;
    font-weight: 700;
}

.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-input-text-input);
    font-family: var(--font-resume-text) ;
    font-weight: 300 ;
    font-size: 12px ;
}

.moduleBrochure #resume_content .resume-texte {
    color: var(--Color-input-text-input);
    font-family: var(--font-resume-text-valeur) ;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/*-------------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-input-text-input);
    font-family: var(--font-resume-text-valeur) ;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.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: #009CAC !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;
}