@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(--red-main) !important;}
.bg-secondary { background-color: var(--blue-md) !important;}

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

.bg-blue-main{background-color:var(--blue-main) !important;}
.bg-blue-dark{background-color:var(--blue-dark) !important;}
.bg-blue-x-dark{background-color:var(--blue-x-dark) !important;}
.bg-blue-md{background-color:var(--blue-md) !important;}
.bg-blue-light{background-color:var(--blue-light) !important;}
.bg-blue-x-light{background-color:var(--blue-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-md{background-color:var(--neutral-md)!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-red-main h3, .bg-red-main h4, .bg-red-main h5, .bg-red-main h6,
.bg-blue-main h3, .bg-blue-main h4, .bg-blue-main h5, .bg-blue-main h6 {color:#FFF;}

/* ===============================
 *  FILL SVG
 *  https://codepen.io/sosuke/pen/Pjoqqp
=============================== */
.fill-svg-red-main{filter: invert(28%) sepia(50%) saturate(6155%) hue-rotate(336deg) brightness(75%) contrast(113%);}
.fill-svg-red-dark{filter: invert(24%) sepia(58%) saturate(5725%) hue-rotate(339deg) brightness(68%) contrast(109%);}
.fill-svg-red-x-dark{filter: invert(8%) sepia(77%) saturate(4946%) hue-rotate(328deg) brightness(87%) contrast(106%);}
.fill-svg-red-light{filter: invert(63%) sepia(27%) saturate(4104%) hue-rotate(310deg) brightness(112%) contrast(92%);}
.fill-svg-red-x-light{filter: invert(94%) sepia(4%) saturate(3395%) hue-rotate(250deg) brightness(103%) contrast(108%);}
.fill-svg-red-2x-light{filter: invert(97%) sepia(14%) saturate(1241%) hue-rotate(263deg) brightness(108%) contrast(103%);}

.fill-svg-blue-main{filter: invert(7%) sepia(86%) saturate(3004%) hue-rotate(252deg) brightness(116%) contrast(107%);}
.fill-svg-blue-dark{filter: invert(14%) sepia(32%) saturate(5628%) hue-rotate(210deg) brightness(91%) contrast(94%);}
.fill-svg-blue-x-dark{filter: invert(14%) sepia(30%) saturate(2885%) hue-rotate(192deg) brightness(84%) contrast(104%);}
.fill-svg-blue-md{filter: invert(9%) sepia(58%) saturate(3680%) hue-rotate(249deg) brightness(106%) contrast(109%);}
.fill-svg-blue-light{filter: invert(96%) sepia(6%) saturate(470%) hue-rotate(178deg) brightness(97%) contrast(91%);}
.fill-svg-blue-x-light{filter: invert(87%) sepia(9%) saturate(118%) hue-rotate(186deg) brightness(111%) 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-md{filter: invert(100%) sepia(45%) saturate(0%) hue-rotate(112deg) brightness(89%) contrast(108%);}
.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(--red-main);
}

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

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

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

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

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

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

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

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

.color-blue-main{color:var(--blue-main) !important;}
.color-blue-dark{color:var(--blue-dark) !important;}
.color-blue-x-dark{color:var(--blue-x-dark) !important;}
.color-blue-md{color:var(--blue-md) !important;}
.color-blue-light{color:var(--blue-light)E !important;}
.color-blue-x-light{color:var(--blue-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-md{color:var(--neutral-md)!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:#FFF!important;}
.color-black{color:#000!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: 0;
}

.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(--blue-md);
    background-color:var(--blue-light);
    font-family: var(--font-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(--blue-md);
    color: #FFF;
}

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-family: var(--font-bold);
    font-size: .813rem;
    color:var(--red-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(--font-bold) !important;
}


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

[class*=bg-red-] blockquote,
[class*=bg-blue-] 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(--blue-light) !important;
    border-radius:var(--radius-sm);
    color:var(--blue-md);
    text-transform: uppercase;
    text-align:left;
    line-height:1.2;
    font-family: var(--font-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(--blue-md) !important;
    color:#FFF;
}

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

section .nav-pills button:hover:not(.active) {
    color: var(--blue-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*/