@charset "utf-8";
/* CSS Document */

/**
 * Cette feuille de styles gère les utilitaires CSS
 */

/*
==================================================
    BREAKPOINT BOOTSTRAP 5.2
==================================================
    #X-Small devices (portrait phones, less than 576px)         // 320px
    #Small devices (landscape phones, 576px and up)             // 576px
    #Medium devices (tablets, 768px and up)                     // 768px
    #Large devices (desktops, 992px and up)                     // 992px
    #X-Large devices (large desktops, 1200px and up)            // 1200px+ > 1250 avec scrollbar
    #XX-Large devices (larger desktops, 1400px and up)          // 1400px+
*/

/*
===================================================================
===================================================================
===================================================================
    X-Small devices (portrait phones, less than 576px)   // 320px
===================================================================
===================================================================
===================================================================
    Pas besoin de déclarer de média queries
*/

textarea {/* Permet à la zone de s'agrandir en focntion du contenu sans déclencher de scrollbar */
    form-sizing: normal;
}

.modal-backdrop.show {
    opacity: .9;
}

/* ===============================
 *  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-primary-2x-light{background-color:var(--primary-2x-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-main{filter: invert(66%) sepia(97%) saturate(403%) hue-rotate(24deg) brightness(94%) contrast(91%);}
.fill-svg-primary-dark{filter: invert(48%) sepia(96%) saturate(357%) hue-rotate(29deg) brightness(97%) contrast(94%);}
.fill-svg-primary-x-dark{filter: invert(17%) sepia(48%) saturate(576%) hue-rotate(27deg) brightness(94%) contrast(99%);}
.fill-svg-primary-light{filter: invert(94%) sepia(18%) saturate(811%) hue-rotate(12deg) brightness(102%) contrast(90%);}
.fill-svg-primary-x-light{filter: invert(91%) sepia(20%) saturate(244%) hue-rotate(32deg) brightness(106%) contrast(94%);}

.fill-svg-secondary-main{filter: invert(42%) sepia(0%) saturate(3526%) hue-rotate(149deg) brightness(110%) contrast(118%);}
.fill-svg-secondary-dark{filter: invert(0%) sepia(0%) saturate(3206%) hue-rotate(151deg) brightness(94%) contrast(91%);}
.fill-svg-secondary-x-dark{filter: invert(0%) sepia(90%) saturate(7500%) hue-rotate(347deg) brightness(105%) contrast(111%);}
.fill-svg-secondary-light{filter: invert(77%) sepia(6%) saturate(213%) hue-rotate(44deg) brightness(94%) contrast(84%);}
.fill-svg-secondary-x-light{filter: invert(100%) sepia(18%) saturate(283%) hue-rotate(35deg) brightness(101%) contrast(87%);}

.fill-svg-focus-main{filter:invert(21%) sepia(85%) saturate(3303%) hue-rotate(313deg) brightness(78%) contrast(121%);}
.fill-svg-focus-dark{filter: invert(14%) sepia(65%) saturate(4195%) hue-rotate(311deg) brightness(100%) contrast(108%);}
.fill-svg-focus-x-dark{filter: invert(10%) sepia(18%) saturate(3198%) hue-rotate(282deg) brightness(98%) contrast(93%);}
.fill-svg-focus-light{filter: invert(68%) sepia(11%) saturate(3934%) hue-rotate(290deg) brightness(104%) contrast(101%);}
.fill-svg-focus-x-light{filter: invert(86%) sepia(5%) saturate(2534%) hue-rotate(294deg) brightness(105%) contrast(102%);}

/*.fill-svg-focus-main{filter: invert(92%) sepia(72%) saturate(524%) hue-rotate(301deg) brightness(110%) contrast(91%);}
.fill-svg-focus-dark{filter: invert(79%) sepia(47%) saturate(414%) hue-rotate(338deg) brightness(105%) contrast(97%);}
.fill-svg-focus-x-dark{filter: invert(76%) sepia(51%) saturate(521%) hue-rotate(341deg) brightness(101%) contrast(102%);}
.fill-svg-focus-light{filter: invert(87%) sepia(41%) saturate(364%) hue-rotate(304deg) brightness(116%) contrast(93%);}
.fill-svg-focus-x-light{filter: invert(99%) sepia(6%) saturate(1068%) hue-rotate(3deg) brightness(112%) contrast(95%);}*/

.fill-svg-neutral-main{filter: invert(82%) sepia(8%) saturate(8%) hue-rotate(349deg) brightness(88%) contrast(84%);}
.fill-svg-neutral-dark{filter: invert(44%) sepia(17%) saturate(12%) hue-rotate(58deg) brightness(95%) contrast(88%);}
.fill-svg-neutral-black{filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(2deg) brightness(97%) contrast(100%);}
.fill-svg-neutral-light{filter: invert(99%) sepia(4%) saturate(84%) hue-rotate(248deg) brightness(112%) contrast(91%);}
.fill-svg-neutral-x-light{filter: invert(97%) sepia(1%) saturate(117%) hue-rotate(187deg) brightness(111%) contrast(96%);}
.fill-svg-white{filter: invert(100%) sepia(0%) saturate(401%) hue-rotate(235deg) brightness(121%) contrast(100%);}

.fill-svg-etoile{filter: invert(85%) sepia(60%) saturate(3105%) hue-rotate(329deg) brightness(101%) contrast(100%);}

/* ===============================
 *  BACKGROUNDS CORNERS
=============================== */
[class*=bg-img-corner-] {
    background-repeat: no-repeat;
    background-position-y:bottom ;
    background-size: auto 50%;
}

.bg-img-corner-white-right {
    background-image: url("../img/corner-white-right.svg");
    background-position-x: right;
}

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

/* ===============================
 *  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:#FFF !important;
    background-color:var(--focus-main);
}

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

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

.btn-primary-2x-light:hover,
.btn-primary-2x-light:active,
.btn-primary-2x-light:focus-visible{
    color:var(--primary-dark) !important;
    background-color:var(--primary-x-light) !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:#FFF !important;
    background-color:var(--focus-dark) !important;
}


/* ===============================
 *  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-primary-2x-light{color:var(--primary-2x-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)E !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;}

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

/* ===============================
 *  PADDING
=============================== */
.py-6 {padding-top:5rem; padding-bottom:5rem;}
.py-7 {padding-top:8rem; padding-bottom:8rem;}

/* ===============================
 *  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:after,
.liste-texte ol li:after {
    content: "";
    background: rgba(255,255,255,.3);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
}

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

.liste-texte ul li:last-child:after,
.liste-texte ol li:last-child:after {
    display: none
}

/* ===============================
 *  COLUMNIZE TEXTE
=============================== */
ul.col2-texte {
    column-count: 1;
    column-gap: 2px;
}

ul.col2-texte li {
    display: inline-block;
    width: 100%;
    border:0;
    padding-left: 2%;
    padding-right: 2%;
    background: var(--neutral-x-light);
}

ul.col2-texte li:nth-child(even) {
    background: var(--neutral-light);
}

/* ===============================
 *  TABLEAU
=============================== */
.table-striped {
    min-width: 650px;
}

.table-striped>thead>tr>th,
.table-striped>tbody>tr>td:first-letter,
.table-striped>tbody>tr>th {
    text-transform: uppercase !important;
}

.table-striped>tbody>tr>td span.type {
    text-transform: capitalize !important;
}

/**/
.table-striped>tbody>tr>th {
    font-weight: 500;
}


/**/
.table-striped>tbody>tr,
.table>:not(caption)>*>* {
    border:0 !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>*:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background: var(--neutral-light);
    box-shadow:none !important;
}


/* ===============================
 *  ACCORDEON + TAB
=============================== */
section .tab-content>.tab-pane {
    display: block;
    opacity: 1;
}

/**/
section .accordion-item {
    border-radius:0;
    border:0;
}

section .accordion-header .accordion-button {
    display: inline-block;
    border-radius:var(--radius-sm)!important;
    border:0;
    box-shadow:none;
    padding:1.5rem .75rem;
    color:var(--primary-x-dark);
    background-color:var(--primary-x-light);
    font-weight: var(--fw-bold);
    margin-top:2vmax;
    text-transform: uppercase;
}

section .tab-pane:first-child .accordion-header .accordion-button {
    margin-top:0;
}

section .accordion-header .accordion-button[aria-expanded="true"] {
    background-color:var(--primary-light);
}

section .accordion-header .accordion-button:after {
    content:"";
    right: 10px;
    position: absolute;
    background-image:url("../img/ic_angle-down.svg");
    /*filter: invert(7%) sepia(86%) saturate(3004%) hue-rotate(252deg) brightness(116%) contrast(107%);*/
}

/*section .accordion-header .accordion-button:not(.collapsed):after {
    filter: invert(100%) sepia(0%) saturate(401%) hue-rotate(235deg) brightness(121%) contrast(100%);
}*/

section .accordion-body {
    padding-left:0;
    padding-right:0;
}

/* ===============================
 *  DÉTAILS EN LISTING
=============================== */
ul.detail-listing {
    padding-left: 0;
    margin-bottom: 0;
}

ul.detail-listing.overflow {
    max-height: 40vmax;
    overflow-y: scroll;
}

ul.detail-listing li {
    list-style: none;
    display: flex;
    padding: .5rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--neutral-light);
    margin-bottom:5px;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

ul.detail-listing li:last-child {
    margin-bottom: 0;
}

ul.detail-listing li strong {
    float: right;
    /*text-transform: capitalize;*/
}

ul.detail-listing.stripped li:nth-child(even) {
    background:#FFF;
}

/* Pour des infos supplémentaires ds le listing */
ul.detail-listing li.infos {
    padding:0;
    background: none;
    font-size: .75rem;
    color:var(--neutral-dark);
    border-bottom: 1px solid var(--neutral-light);
}

ul.detail-listing li.infos:nth-last-child {
    border-bottom:none;
}


/* ===============================
 *  LISTE NUMÉROTÉE
=============================== */
ol.detail-listing,
.detail-listing ol {
    position: relative;
    padding-left:2rem !important;
    margin-bottom: 0;
    counter-reset: item;
    list-style-type: none;
    line-height: 1.2;
}

ol.detail-listing > li,
.detail-listing ol > li {
    list-style: none;
    padding-top: .5rem;
    padding-bottom: .5rem;
    line-height: 1.5;
}

ol.detail-listing > li:before,
.detail-listing ol > li:before {
    content: counter(item) "  ";
    counter-increment: item;
    position: absolute;
    left:0;
    width:1.5rem;
    height:1.5rem;
    background-color: #FFF;
    font-weight: var(--fw-bold);
    font-size: .813rem;
    color:var(--primary-main);
    text-align:center;
    line-height: 1.5rem;
    border-radius: var(--radius-xs);
}

/* ===============================
 *  LISTE NUMÉROTÉE avec "titre" en strong
=============================== */
ol.detail-listing li:has(span[style*=font-weight]),
.detail-listing ol li:has(span[style*=font-weight]){
    font-size: .75rem;
}

ol.detail-listing li:has(span[style*=font-weight]) span,
.detail-listing ol li:has(span[style*=font-weight]) span{
    font-size:1rem;
    font-weight: var(--fw-bold) !important;
}


/* ===============================
 *  BLOCKQUOTE CITATION
=============================== */
blockquote {
    border-left: 5px solid var(--primary-main);
    padding-left: 1rem;
    margin:2vmax 0 !important;
    max-width: 640px;
}

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

/* ===============================
 *  LISTING ACTUALITÉS
=============================== */
.listingActus {

}

.listingActus .one {
    margin-bottom: 3vmax;
}

.listingActus .one .photo {
    position: relative;
    height: 20vmax;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.listingActus .one .photo img {
    position: absolute;
    height: auto !important;
    min-height: auto;
    max-height: fit-content;
    width: auto !important;
    max-width: 120%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.listingActus .one span {
    margin: 1vmax 0 0.5vmax;
    display: inline-block;
}

.listingActus .one p {
    font-size: .813rem;
}

/* ===============================
 *  ALERT
=============================== */
.alert {
    display: flex;
    align-items: center;
}

.alert img {
    float: left;
    margin-right: 1rem;
    width: 42px;
    mix-blend-mode: overlay;
}
/**/


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

    /* ===============================
     *  WIDTH (BIG ELEMENT)
    =============================== */
    .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) {
    /* ===============================
     *  WIDTH (BIG ELEMENT)
    =============================== */
    .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;}

    /**
     * DÉTAILS EN LISTING
     */
    ul.detail-listing.overflow {
        max-height: 30vmax;
    }

    /* ===============================
     *  BACKGROUNDS CORNERS
    =============================== */
    [class*=bg-img-corner-] {
        background-position-y:center ;
        background-size: contain;
    }

    /* ===============================
     *  LISTING ACTUALITÉS
    =============================== */
    .listingActus .one {
        margin-bottom: 0;
    }

    .listingActus .one .photo {
        height: 10vmax;
    }

    /* ===============================
     *  COLUMNIZE TEXTE
    =============================== */
    ul.col2-texte {
        column-count: 2;
    }

    ul.col2-texte li {
        margin-bottom: 2px;
    }
    /* ===============================
     *  MARKER PR CALER LE SCROLL
    =============================== */
    .scrollspyMarker {
        position: relative;
        top:-120px;
    }


}/*/mediaquery*/


/*
===================================================================
===================================================================
===================================================================
    Large devices (desktops, 992px and up)             // 992px
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 992px) {
    /* ===============================
     *  WIDTH (BIG ELEMENT)
    =============================== */
    .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;}

    /* ===============================
     *  DÉTAILS EN LISTING
    =============================== */
    ul.detail-listing.overflow {
        max-height: 40vmin;
        padding-right: 10px;
    }

    /* CUSTOM SCROLL BAR */
    /* width */
    ul.detail-listing.overflow::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ul.detail-listing.overflow::-webkit-scrollbar-track {
        background: var(--neutral-light);
        border-radius: 10px;
    }

    /* Handle */
    ul.detail-listing.overflow::-webkit-scrollbar-thumb {
        background: var(--neutral-main);
        border-radius: 10px;
    }


    /* ===============================
     *  ACCORDEON + TAB
    =============================== */
    section .accordion-header {
        display: none;
    }

    section .accordion-body {
        padding: 0;
    }

    /**/
    section .tab-content>.tab-pane:not(.show) {
        display: none;
        opacity: 0;
    }

    section .accordion-collapse.collapse:not(.show) {
        display: block;
    }

    section .nav-pills {
        margin-right:5% !important;
    }

    section .nav-pills.sticky-lg-top {
        top:180px;
    }

    section .nav-pills button {
        background-color: var(--primary-x-light) !important;
        border-radius:var(--radius-sm);
        color:var(--primary-x-dark);
        text-transform: uppercase;
        text-align:left;
        line-height:1.2;
        font-weight: var(--fw-bold);
        margin-bottom: 1vmin;
    }

    section .nav-pills button:first-child,
    section .nav-pills button.active + button {
        border-top:0;
    }

    section .nav-pills button.active {
        background-color: var(--primary-light) !important;
    }

    section .nav-pills button {
        padding-top:2rem;
        padding-bottom:2rem;
    }

    section .nav-pills button img {
        float: right;
        width:16px;
        /*filter: invert(7%) sepia(86%) saturate(3004%) hue-rotate(252deg) brightness(116%) contrast(107%) drop-shadow(-.5px 0 0 currentColor) drop-shadow(-1px 0 0 currentColor);*/
    }

    /*section .nav-pills button.active img {
        filter: invert(100%) sepia(0%) saturate(401%) hue-rotate(235deg) brightness(121%) contrast(100%) drop-shadow(-.5px 0 0 #FFF) drop-shadow(-1px 0 0 #FFF);
    }*/

    /* ===============================
     *  LISTING ACTUALITÉS
    =============================== */
    .listingActus .one .photo {
        height: 15vmax;
    }

}/*/mediaquery*/


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

    /* ===============================
     *  WIDTH (BIG ELEMENT)
    =============================== */
    .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) {

    /* ===============================
     *  WIDTH (BIG ELEMENT)
    =============================== */
    .w-xxl-auto {width:auto !important;}
    .w-xl-25 {width:25% !important;}
    .w-xxl-50 {width:50% !important;}
    .w-xxl-75 {width:75% !important;}
    .w-xxl-100 {width:100% !important;}

    /* ===============================
     *  LISTING ACTUALITÉS
    =============================== */
    .listingActus .one .photo {
        height: 20vmin;
    }
}/*/mediaquery*/

.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, .color-white h2, .color-white h3 {color:#FFF!important;}
.color-black{color:#000!important;}

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

/* ===============================
 *  PADDING
=============================== */
.py-6 {padding-top:5rem; padding-bottom:5rem;}
.py-7 {padding-top:8rem; padding-bottom:8rem;}


/* ===============================
 *  COLUMNIZE TEXTE
=============================== */
ul.col2-texte {
    column-count: 1;
    column-gap: 2px;
}

ul.col2-texte li {
    display: inline-block;
    width: 100%;
    border:0;
    padding-left: 2%;
    padding-right: 2%;
    background: var(--neutral-x-light);
}

ul.col2-texte li:nth-child(even) {
    background: var(--neutral-light);
}

/* ===============================
 *  TABLEAU
=============================== */
.table-striped {
    min-width: 650px;
}

.table-striped>thead>tr>th,
.table-striped>tbody>tr>td:first-letter,
.table-striped>tbody>tr>th {
    text-transform: uppercase !important;
}

.table-striped>tbody>tr>td span.type {
    text-transform: capitalize !important;
}

/**/
.table-striped>tbody>tr>th {
    font-weight: 500;
}


/**/
.table-striped>tbody>tr,
.table>:not(caption)>*>* {
    border:0 !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>*:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background: var(--neutral-light);
    box-shadow:none !important;
}


/* ===============================
 *  ACCORDEON + TAB
=============================== */
section .tab-content>.tab-pane {
    display: block;
    opacity: 1;
}

/**/
section .accordion-item {
    border-radius:0;
    border:0;
}

section .accordion-header .accordion-button {
    display: inline-block;
    border-radius:var(--radius-sm)!important;
    border:0;
    box-shadow:none;
    padding:1.5rem .75rem;
    color:var(--primary-x-dark);
    background-color:var(--primary-x-light);
    font-weight: var(--fw-bold);
    margin-top:2vmax;
    text-transform: uppercase;
}

section .tab-pane:first-child .accordion-header .accordion-button {
    margin-top:0;
}

section .accordion-header .accordion-button[aria-expanded="true"] {
    background-color:var(--primary-x-light);

}

section .accordion-header .accordion-button:after {
    content:"";
    right: 10px;
    position: absolute;
    background-image:url("../img/ic_angle-down.svg");
    /*filter: invert(7%) sepia(86%) saturate(3004%) hue-rotate(252deg) brightness(116%) contrast(107%);*/
}

/*section .accordion-header .accordion-button:not(.collapsed):after {
    filter: invert(100%) sepia(0%) saturate(401%) hue-rotate(235deg) brightness(121%) contrast(100%);
}*/

section .accordion-body {
    padding-left:0;
    padding-right:0;
}

/* ===============================
 *  DÉTAILS EN LISTING
=============================== */
ul.detail-listing {
    padding-left: 0;
    margin-bottom: 0;
}

ul.detail-listing.overflow {
    max-height: 40vmax;
    overflow-y: scroll;
}

ul.detail-listing li {
    list-style: none;
    display: flex;
    padding: .5rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--neutral-light);
    margin-bottom:5px;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

ul.detail-listing li:last-child {
    margin-bottom: 0;
}

ul.detail-listing li strong {
    float: right;
    /*text-transform: capitalize;*/
}

ul.detail-listing.stripped li:nth-child(even) {
    background:#FFF;
}

/* Pour des infos supplémentaires ds le listing */
ul.detail-listing li.infos {
    padding:0;
    background: none;
    font-size: .75rem;
    color:var(--neutral-dark);
    border-bottom: 1px solid var(--neutral-light);
}

ul.detail-listing li.infos:nth-last-child {
    border-bottom:none;
}


/* ===============================
 *  LISTE NUMÉROTÉE
=============================== */
ol.detail-listing,
.detail-listing ol {
    position: relative;
    padding-left:2rem !important;
    margin-bottom: 0;
    counter-reset: item;
    list-style-type: none;
    line-height: 1.2;
}

ol.detail-listing > li,
.detail-listing ol > li {
    list-style: none;
    padding-top: .5rem;
    padding-bottom: .5rem;
    line-height: 1.5;
}

ol.detail-listing > li:before,
.detail-listing ol > li:before {
    content: counter(item) "  ";
    counter-increment: item;
    position: absolute;
    left:0;
    width:1.5rem;
    height:1.5rem;
    background-color: #FFF;
    font-weight: var(--fw-bold);
    font-size: .813rem;
    color:var(--primary-main);
    text-align:center;
    line-height: 1.5rem;
    border-radius: var(--radius-xs);
}

/* ===============================
 *  LISTE NUMÉROTÉE avec "titre" en strong
=============================== */
ol.detail-listing li:has(span[style*=font-weight]),
.detail-listing ol li:has(span[style*=font-weight]){
    font-size: .75rem;
}

ol.detail-listing li:has(span[style*=font-weight]) span,
.detail-listing ol li:has(span[style*=font-weight]) span{
    font-size:1rem;
    font-weight: var(--fw-bold) !important;
}


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

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

blockquote .author {
    margin-bottom: 1rem;
    font-size: .875em;
    color: #6c757d;
}

/* ===============================
 *  LISTING ACTUALITÉS
=============================== */
.listingActus {

}

.listingActus .one {
    margin-bottom: 3vmax;
}

.listingActus .one .photo {
    position: relative;
    height: 20vmax;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.listingActus .one .photo img {
    position: absolute;
    height: auto !important;
    min-height: auto;
    max-height: fit-content;
    width: auto !important;
    max-width: 120%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.listingActus .one span {
    margin: 1vmax 0 0.5vmax;
    display: inline-block;
}

.listingActus .one p {
    font-size: .813rem;
}

/* ===============================
 *  ALERT
=============================== */
.alert {
    display: flex;
    align-items: center;
}

.alert img {
    float: left;
    margin-right: 1rem;
    width: 42px;
    mix-blend-mode: overlay;
}
/**/


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

/* ===============================
 *  WIDTH (BIG ELEMENT)
=============================== */
.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) {
/* ===============================
 *  WIDTH (BIG ELEMENT)
=============================== */
.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;}

/**
 * DÉTAILS EN LISTING
 */
ul.detail-listing.overflow {
    max-height: 30vmax;
}

/* ===============================
 *  BACKGROUNDS CORNERS
=============================== */
[class*=bg-img-corner-] {
    background-position-y:center ;
    background-size: contain;
}

/* ===============================
 *  LISTING ACTUALITÉS
=============================== */
.listingActus .one {
    margin-bottom: 0;
}

.listingActus .one .photo {
    height: 10vmax;
}

/* ===============================
 *  COLUMNIZE TEXTE
=============================== */
ul.col2-texte {
    column-count: 2;
}

ul.col2-texte li {
    margin-bottom: 2px;
}
/* ===============================
 *  MARKER PR CALER LE SCROLL
=============================== */
.scrollspyMarker {
    position: relative;
    top:-120px;
}


}/*/mediaquery*/


/*
===================================================================
===================================================================
===================================================================
    Large devices (desktops, 992px and up)             // 992px
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 992px) {
/* ===============================
 *  WIDTH (BIG ELEMENT)
=============================== */
.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;}

/* ===============================
 *  DÉTAILS EN LISTING
=============================== */
ul.detail-listing.overflow {
    max-height: 40vmin;
    padding-right: 10px;
}

/* CUSTOM SCROLL BAR */
/* width */
ul.detail-listing.overflow::-webkit-scrollbar {
    width: 10px;
}

/* Track */
ul.detail-listing.overflow::-webkit-scrollbar-track {
    background: var(--neutral-light);
    border-radius: 10px;
}

/* Handle */
ul.detail-listing.overflow::-webkit-scrollbar-thumb {
    background: var(--neutral-main);
    border-radius: 10px;
}


/* ===============================
 *  ACCORDEON + TAB
=============================== */
section .accordion-header {
    display: none;
}

section .accordion-body {
    padding: 0;
}

/**/
section .tab-content>.tab-pane:not(.show) {
    display: none;
    opacity: 0;
}

section .accordion-collapse.collapse:not(.show) {
    display: block;
}

section .nav-pills {
    margin-right:5% !important;
}

section .nav-pills.sticky-lg-top {
    top:180px;
}

section .nav-pills button {
    background-color: var(--primary-x-light) !important;
    border-radius:var(--radius-sm);
    color:var(--primary-x-dark);
    text-transform: uppercase;
    text-align:left;
    line-height:1.2;
    font-weight: var(--fw-bold);
    margin-bottom: 1vmin;
}

section .nav-pills button:first-child,
section .nav-pills button.active + button {
    border-top:0;
}

section .nav-pills button.active {
    background-color: var(--primary-light) !important;
    color:var(--primary-x-dark) !important;
}

section .nav-pills button {
    padding-top:1rem;
    padding-bottom:1rem;
}

section .nav-pills button:hover:not(.active) {
    color: var(--primary-x-dark) !important;
}

section .nav-pills button img {
    float: right;
    width:16px;
    /*filter: invert(7%) sepia(86%) saturate(3004%) hue-rotate(252deg) brightness(116%) contrast(107%) drop-shadow(-.5px 0 0 currentColor) drop-shadow(-1px 0 0 currentColor);*/
}

/*section .nav-pills button.active img {
    filter: invert(100%) sepia(0%) saturate(401%) hue-rotate(235deg) brightness(121%) contrast(100%) drop-shadow(-.5px 0 0 #FFF) drop-shadow(-1px 0 0 #FFF);
}*/

/* ===============================
 *  LISTING ACTUALITÉS
=============================== */
.listingActus .one .photo {
    height: 15vmax;
}

}/*/mediaquery*/


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

/* ===============================
 *  WIDTH (BIG ELEMENT)
=============================== */
.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) {

/* ===============================
 *  WIDTH (BIG ELEMENT)
=============================== */
.w-xxl-auto {width:auto !important;}
.w-xl-25 {width:25% !important;}
.w-xxl-50 {width:50% !important;}
.w-xxl-75 {width:75% !important;}
.w-xxl-100 {width:100% !important;}

/* ===============================
 *  LISTING ACTUALITÉS
=============================== */
.listingActus .one .photo {
    height: 20vmin;
}
}/*/mediaquery*/