@charset "utf-8";

/*
===================================================================
    X-Small devices (portrait phones, less than 576px)   // 320px
===================================================================
*/

textarea {
    form-sizing: normal;
}

.modal {
    background-color: var(--modal-overlay-bg);
    padding: 20px;
}

.modal-backdrop {
    opacity: 0 !important;
}

.modal-dialog {
    margin: 0 auto;
}

/* ===============================
 *  BACKGROUNDS COLORS
=============================== */
.bg-primary { background-color: var(--primary-main) !important;}
.bg-secondary { background-color: var(--secondary-main) !important;}

.bg-primary-main{background-color:var(--primary-main) !important;}
.bg-primary-dark{background-color:var(--primary-dark) !important;}
.bg-primary-x-dark{background-color:var(--primary-x-dark) !important;}
.bg-primary-light{background-color:var(--primary-light) !important;}
.bg-primary-x-light{background-color:var(--primary-x-light) !important;}

.bg-secondary-main{background-color:var(--secondary-main) !important;}
.bg-secondary-dark{background-color:var(--secondary-dark) !important;}
.bg-secondary-x-dark{background-color:var(--secondary-x-dark) !important;}
.bg-secondary-light{background-color:var(--secondary-light) !important;}
.bg-secondary-x-light{background-color:var(--secondary-x-light) !important;}

.bg-focus-main{background-color:var(--focus-main) !important;}
.bg-focus-dark{background-color:var(--focus-dark) !important;}
.bg-focus-x-dark{background-color:var(--focus-x-dark) !important;}
.bg-focus-light{background-color:var(--focus-light) !important;}
.bg-focus-x-light{background-color:var(--focus-x-light) !important;}

.bg-neutral-main{background-color:var(--neutral-main) !important;}
.bg-neutral-dark{background-color:var(--neutral-dark) !important;}
.bg-neutral-black{background-color:var(--neutral-black) !important;}
.bg-neutral-light{background-color:var(--neutral-light) !important;}
.bg-neutral-x-light{background-color:var(--neutral-x-light) !important;}

/* GESTION DES Hn SUR FOND DE COULEUR FONCÉE */
.bg-primary-main h3, .bg-primary-main h4, .bg-primary-main h5, .bg-primary-main h6  {color:var(--focus-main);};
.bg-secondary-main h3, .bg-secondary-main h4, .bg-secondary-main h5, .bg-secondary-main h6 {color:#FFF;}

/* ===============================
 *  FILL SVG
 *  https://codepen.io/sosuke/pen/Pjoqqp
=============================== */
.fill-svg-primary-main{filter: var(--fill-svg-primary-main);}
.fill-svg-primary-dark{filter: var(--fill-svg-primary-dark)}
.fill-svg-primary-x-dark{filter:var(--fill-svg-primary-x-dark);}
.fill-svg-primary-light{filter:var(--fill-svg-primary-light);}
.fill-svg-primary-x-light{filter:var(--fill-svg-primary-x-light);}

.fill-svg-secondary-main{filter:var(--fill-svg-secondary-main);}
.fill-svg-secondary-dark{filter:var(--fill-svg-secondary-dark);}
.fill-svg-secondary-x-dark{filter:var(--fill-svg-secondary-x-dark);}
.fill-svg-secondary-light{filter:var(--fill-svg-secondary-light);}
.fill-svg-secondary-x-light{filter:var(--fill-svg-secondary-x-light);}

.fill-svg-focus-main{filter:var(--fill-svg-focus-main);}
.fill-svg-focus-dark{filter:var(--fill-svg-focus-dark);}
.fill-svg-focus-x-dark{filter:var(--fill-svg-focus-x-dark);}
.fill-svg-focus-light{filter:var(--fill-svg-focus-light);}
.fill-svg-focus-x-light{filter:var(--fill-svg-focus-x-light);}

.fill-svg-neutral-main{filter:var(--fill-svg-neutral-main);}
.fill-svg-neutral-dark{filter:var(--fill-svg-neutral-dark);}
.fill-svg-neutral-black{filter: var(--fill-svg-neutral-black);}
.fill-svg-neutral-light{filter:var(--fill-svg-neutral-light);}
.fill-svg-neutral-x-light{filter:var(--fill-svg-neutral-x-light);}
.fill-svg-white{filter:var(--fill-svg-white);}

.fill-svg-etoile{filter: var(--fill-svg-etoile);}
.fill-svg-red{filter:var(--fill-svg-red);}

/* ===============================
 *  BUTTONS
=============================== */
.btn {
    border-radius: var(--radius-xs);
    border:0;
}

.btn-primary {
    color:var(--focus-main) !important;
    background-color:var(--primary-main);
}

.btn-primary a {
    color:var(--focus-main) !important;
}

.btn-secondary{
    color:#FFF !important;
    background-color:var(--secondary-main);
}

.btn-focus{
    color:var(--primary-2x-dark) !important;
    background-color:var(--focus-main);
}

/* BTN HOVER */
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible{
    background-color:var(--primary-dark) !important;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus-visible{
    color:#FFF !important;
    background-color:var(--secondary-dark) !important;
}

.btn-focus:hover,
.btn-focus:active,
.btn-focus:focus-visible{
    color:var(--primary-2x-dark) !important;
    background-color:var(--focus-x-light) !important;
}

/* BTN OUTLINE */
.btn-outline-primary {
    color: var(--primary-dark);
    background-color: transparent;
    border: 1px solid var(--primary-dark);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus-visible {
    color: #FFF;
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark);
}

.btn-outline-secondary {
    color: var(--secondary-main);
    background-color: transparent;
    border: 1px solid var(--secondary-main);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus-visible {
    color: #FFF;
    background-color: var(--secondary-dark) !important;
    border-color: var(--secondary-dark);
}

.btn-outline-focus {
    color: var(--focus-dark);
    background-color: transparent;
    border: 1px solid var(--focus-dark);
}

.btn-outline-focus:hover,
.btn-outline-focus:active,
.btn-outline-focus:focus-visible {
    color: var(--neutral-2x-dark);
    background-color: var(--focus-main) !important;
    border-color: var(--focus-main);
}

/* BTN ICON : icône à gauche + texte à droite, alignés au centre.
   Combinable avec .btn-primary, .btn-outline-primary, .btn-sm, .btn-lg, etc. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.btn-icon > img,
.btn-icon > svg {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
}

/* ===============================
 *  FONT SIZES
=============================== */
.fs-7 {
    font-size: .813rem !important;
}

.fs-8 {
    font-size: .688rem !important;
}

/* ===============================
 *  FONT WEIGHTS
=============================== */
.fw-normal {font-weight: var(--fw-normal)}
.fw-bold {font-weight: var(--fw-bold)}
.fw-bolder {font-weight: var(--fw-bolder)}

/* ===============================
 *  FONT COLORS
=============================== */
.color-primary-main {color:var(--primary-main) !important;}
.color-primary-dark{color:var(--primary-dark) !important;}
.color-primary-x-dark{color:var(--primary-x-dark) !important;}
.color-primary-light{color:var(--primary-light) !important;}
.color-primary-x-light{color:var(--primary-x-light) !important;}

.color-secondary-main{color:var(--secondary-main) !important;}
.color-secondary-dark{color:var(--secondary-dark) !important;}
.color-secondary-x-dark{color:var(--secondary-x-dark) !important;}
.color-secondary-light{color:var(--secondary-light) !important;}
.color-secondary-x-light{color:var(--secondary-x-light) !important;}

.color-focus-main{color:var(--focus-main) !important;}
.color-focus-dark{color:var(--focus-dark) !important;}
.color-focus-x-dark{color:var(--focus-x-dark) !important;}
.color-focus-light{color:var(--focus-light) !important;}
.color-focus-x-light{color:var(--focus-x-light) !important;}

.color-neutral-main{color:var(--neutral-main) !important;}
.color-neutral-dark{color:var(--neutral-dark) !important;}
.color-neutral-black{color:var(--neutral-black) !important;}
.color-neutral-light{color:var(--neutral-light) !important;}
.color-neutral-x-light{color:var(--neutral-x-light) !important;}

.color-white, .color-white a:not(.btn), .color-white h2, .color-white h3 {color:#FFF!important;}
.color-black{color:#000!important;}

/* ===============================
 *  TEXT WRAP
=============================== */
.text-balance {text-wrap-style: balance;}
.text-pretty {text-wrap-style: pretty;}

/* ===============================
 *  RADIUS
=============================== */
.radius-xs {border-radius:var(--radius-xs);}
.radius-sm {border-radius:var(--radius-sm);}
.radius-md {border-radius:var(--radius-md);}
.radius-lg {border-radius:var(--radius-lg);}
.radius-xl {border-radius:var(--radius-xl);}

/* ===============================
 *  WIDTH (ICON)
=============================== */
.w-16px {width:16px !important;}
.w-21px {width:21px !important;}
.w-24px {width:24px !important;}
.w-32px {width:32px !important;}
.w-48px {width:48px !important;}
.w-64px {width:4vmax !important;}
.w-128px {width:128px !important;}

/* ===============================
 *  SPACING FLUIDE (niveaux 6-7-8)
 *  Complète Bootstrap -1 à -5 (non écrasés)
=============================== */
.mt-6, .my-6 { margin-top: var(--space-6) !important; }
.mb-6, .my-6 { margin-bottom: var(--space-6) !important; }
.pt-6, .py-6 { padding-top: var(--space-6) !important; }
.pb-6, .py-6 { padding-bottom: var(--space-6) !important; }

.mt-7, .my-7 { margin-top: var(--space-7) !important; }
.mb-7, .my-7 { margin-bottom: var(--space-7) !important; }
.pt-7, .py-7 { padding-top: var(--space-7) !important; }
.pb-7, .py-7 { padding-bottom: var(--space-7) !important; }

.mt-8, .my-8 { margin-top: var(--space-8) !important; }
.mb-8, .my-8 { margin-bottom: var(--space-8) !important; }
.pt-8, .py-8 { padding-top: var(--space-8) !important; }
.pb-8, .py-8 { padding-bottom: var(--space-8) !important; }

/* ===============================
 *  BACKGROUND IMAGES
=============================== */
.bg-img-corner-white-left {
    background-image: url("/assets/img/corner-white.svg");
    background-position-x: left;
}

/* ===============================
 *  BUTTONS VARIANTS
=============================== */
.btn-primary-x-light {
    color: var(--primary-main) !important;
    background-color: var(--primary-x-light);
}

.btn-primary-x-light:hover,
.btn-primary-x-light:active,
.btn-primary-x-light:focus-visible {
    color: var(--primary-dark) !important;
    background-color: var(--primary-light) !important;
}

/* ===============================
 *  TEXT WIDTH
=============================== */
.text-w760 {
    max-width: 760px !important;
}

/* ===============================
 *  BACKGROUND DÉCORATIF
=============================== */
.bg-item-section {
    background: url("/assets/img/bg-item.svg") no-repeat calc(100vw - 250px) center;
    background-size: calc(50vw + 200px);
}

.bg-item-section.left {
    background-position-x: -10vw;
}

/* ===============================
 *  LISTE TEXTE
 *  Listes ul/ol avec barre verticale colorée à gauche.
 *  Fonctionne soit sur un conteneur parent (<div class="liste-texte">),
 *  soit directement sur la liste (<ul class="liste-texte">).
 *  - ul : barre primary-x-light (par défaut, sur fond clair)
 *  - ol : barre blanche (pour usage sur fond coloré foncé)
 *  - niveau imbriqué : pastille focus-light (sable)
=============================== */
.liste-texte:is(ul, ol),
.liste-texte :is(ul, ol),
#listing-outro :is(ul, ol) {
    padding-inline-start: 0;
}

.liste-texte:is(ul, ol) > li,
.liste-texte :is(ul, ol) > li,
#listing-outro :is(ul, ol) > li {
    position: relative;
    list-style: none;
    padding: .5rem .5rem .5rem 20px;
}

.liste-texte:is(ul, ol) > li:before,
.liste-texte :is(ul, ol) > li:before,
#listing-outro :is(ul, ol) > li:before {
    content: "";
    position: absolute;
    top: .5rem;
    bottom: .5rem;
    left: 0;
    width: 5px;
    max-width: 120px;
    border-radius: var(--radius-sm);
    background: var(--focus-light);
}

/* Variante ol : barre blanche (pour fond coloré) */
ol.liste-texte > li:before,
.liste-texte ol > li:before {
    background: #FFF;
}

/* Niveau imbriqué : pastille focus-light */
.liste-texte:is(ul, ol) :is(ul, ol),
.liste-texte :is(ul, ol) :is(ul, ol),
#listing-outro :is(ul, ol) :is(ul, ol) {
    margin-left: 5px;
}

.liste-texte:is(ul, ol) :is(ul, ol) > li,
.liste-texte :is(ul, ol) :is(ul, ol) > li,
#listing-outro :is(ul, ol) :is(ul, ol) > li {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: 15px;
    margin-left: 0;
}

.liste-texte:is(ul, ol) :is(ul, ol) > li:before,
.liste-texte :is(ul, ol) :is(ul, ol) > li:before,
#listing-outro :is(ul, ol) :is(ul, ol) > li:before {
    height: 10px;
    background: var(--focus-light);
    top: calc(1rem - 4px);
}



/*
===================================================================
    Small devices (landscape phones, 576px and up)     // 576px
===================================================================
*/
@media screen and (min-width: 576px) {

.w-sm-auto {width:auto !important;}
.w-sm-25 {width:25% !important;}
.w-sm-50 {width:50% !important;}
.w-sm-75 {width:75% !important;}
.w-sm-100 {width:100% !important;}

}/*/mediaquery*/


/*
===================================================================
    Medium devices (tablets, 768px and up)             // 768px
===================================================================
*/
@media screen and (min-width: 768px) {

.w-md-auto {width:auto !important;}
.w-md-25 {width:25% !important;}
.w-md-50 {width:50% !important;}
.w-md-75 {width:75% !important;}
.w-md-100 {width:100% !important;}

}/*/mediaquery*/


/*
===================================================================
    Large devices (desktops, 992px and up)             // 992px
===================================================================
*/
@media screen and (min-width: 992px) {

.w-lg-auto {width:auto !important;}
.w-lg-25 {width:25% !important;}
.w-lg-50 {width:50% !important;}
.w-lg-75 {width:75% !important;}
.w-lg-100 {width:100% !important;}

.bg-item-section {
    background-position-x: 50vw;
}

.bg-item-section.left {
    background-position-x: -10vw;
}

}/*/mediaquery*/


/*
===================================================================
    X-Large devices (large desktops, 1200px and up)    // 1200px+
===================================================================
*/
@media screen and (min-width: 1200px) {

.w-xl-auto {width:auto !important;}
.w-xl-25 {width:25% !important;}
.w-xl-50 {width:50% !important;}
.w-xl-75 {width:75% !important;}
.w-xl-100 {width:100% !important;}

}/*/mediaquery*/


/*
===================================================================
    XX-Large devices (larger desktops, 1400px and up)  // 1400px+
===================================================================
*/
@media screen and (min-width: 1400px) {

.w-xxl-auto {width:auto !important;}
.w-xxl-25 {width:25% !important;}
.w-xxl-50 {width:50% !important;}
.w-xxl-75 {width:75% !important;}
.w-xxl-100 {width:100% !important;}

}/*/mediaquery*/