@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,
.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-2x-dark{filter:var(--fill-svg-primary-2x-dark);}
.fill-svg-primary-x-dark{filter:var(--fill-svg-primary-x-dark);}
.fill-svg-primary-dark{filter:var(--fill-svg-primary-dark);}
.fill-svg-primary-main{filter:var(--fill-svg-primary-main);}
.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-2x-dark{filter:var(--fill-svg-focus-2x-dark);}
.fill-svg-focus-x-dark{filter:var(--fill-svg-focus-x-dark);}
.fill-svg-focus-dark{filter:var(--fill-svg-focus-dark);}
.fill-svg-focus-main{filter:var(--fill-svg-focus-main);}
.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-x-dark{filter:var(--fill-svg-neutral-x-dark);}
.fill-svg-neutral-2x-dark{filter:var(--fill-svg-neutral-2x-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:#FFF !important;
    background-color:var(--primary-main);
}

.btn-primary a {
    color:#FFF !important;
}

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

.btn-focus{
    color:var(--neutral-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(--neutral-2x-dark) !important;
    background-color:var(--focus-dark) !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);
}

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

/* ===============================
 *  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-x-dark) !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-2x-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
=============================== */
.liste-texte ul {
    padding-left: 0;
    margin-bottom: 1rem;
}

.liste-texte ul li {
    position:relative;
    list-style: none;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,.2);
}

.liste-texte ul li:last-child {
    border-bottom: 0;
}

/* ===============================
 *  BLOCKQUOTE
=============================== */
blockquote {
    border-left: 5px solid var(--primary-main);
    padding-left: 1rem;
    margin:2vmax 0 !important;
    text-wrap-style: balance;
}

[class*=bg-primary-] blockquote,
[class*=bg-secondary-] blockquote{
    border-left-color: #FFF;
}


/*
===================================================================
    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*/