/* ==========================================================
   WEB.CB06 — IDENTITÉ VISUELLE PREMIUM V7
   ========================================================== */

.site-header .brand,
header .brand {
    display: flex !important;
    align-items: center !important;

    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

.site-header .brand img,
header .brand img,
header img[src*="logo.svg"] {
    display: block !important;

    width: 245px !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;

    overflow: visible !important;
}

.site-header .header__inner {
    display: flex !important;
    align-items: center !important;

    min-height: 82px !important;
}

.site-footer .brand,
footer .brand,
footer .footer-brand,
footer [class*="brand"] {
    display: flex !important;
    align-items: center !important;

    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.site-footer img[src*="logo-footer.svg"],
footer img[src*="logo-footer.svg"] {
    display: block !important;

    width: 245px !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;

    filter:
        drop-shadow(
            0 12px 28px rgba(0, 0, 0, .18)
        ) !important;
}

@media (max-width: 1120px) {

    .site-header .header__inner {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        gap: 14px !important;

        min-height: 82px !important;
    }

    .site-header .brand img,
    header .brand img,
    header img[src*="logo.svg"] {
        width: 232px !important;
        max-width: calc(100vw - 102px) !important;
    }

    .site-header .header__actions {
        flex: 0 0 auto !important;

        margin: 0 !important;
    }
}

@media (max-width: 620px) {

    .site-header .header__inner {
        min-height: 80px !important;

        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .site-header .brand img,
    header .brand img,
    header img[src*="logo.svg"] {
        width: 220px !important;
        max-width: calc(100vw - 96px) !important;
    }

    .site-footer img[src*="logo-footer.svg"],
    footer img[src*="logo-footer.svg"] {
        width: 224px !important;
    }
}

@media (max-width: 390px) {

    .site-header .brand img,
    header .brand img,
    header img[src*="logo.svg"] {
        width: 205px !important;
        max-width: calc(100vw - 91px) !important;
    }

    .site-footer img[src*="logo-footer.svg"],
    footer img[src*="logo-footer.svg"] {
        width: 210px !important;
    }
}

/* WEB.CB06 SKIP LINK FIX BEGIN */

/*
 * Le lien reste disponible pour le clavier et les lecteurs d’écran,
 * mais n’apparaît pas dans la mise en page normale.
 */
.skip-link,
a.skip-link,
body > a[href="#main"]:first-of-type,
body > a[href="#main-content"]:first-of-type {
    position: fixed !important;
    top: -200px !important;
    left: 16px !important;
    z-index: 20000 !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 12px 18px !important;

    overflow: visible !important;

    border-radius: 12px !important;

    background: #071321 !important;
    color: #ffffff !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;

    opacity: 0 !important;
    pointer-events: none !important;
}

.skip-link:focus,
a.skip-link:focus,
body > a[href="#main"]:first-of-type:focus,
body > a[href="#main-content"]:first-of-type:focus {
    top: 16px !important;

    opacity: 1 !important;
    pointer-events: auto !important;

    box-shadow: 0 12px 30px rgba(7, 19, 33, .25) !important;
}

/* WEB.CB06 SKIP LINK FIX END */

/* CB06 ACCESSIBILITY LINK FINAL BEGIN */

a.skip-link,
.skip-link,
body > a[href="#main"],
body > a[href="#main-content"],
body > a[href="#contenu"] {
    position: fixed !important;
    top: 0 !important;
    left: 16px !important;
    z-index: 999999 !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 12px 18px !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: #071321 !important;
    color: #ffffff !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-160%) !important;
}

a.skip-link:focus,
.skip-link:focus,
body > a[href="#main"]:focus,
body > a[href="#main-content"]:focus,
body > a[href="#contenu"]:focus {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(16px) !important;

    box-shadow:
        0 14px 36px rgba(7, 19, 33, .28) !important;
}

/* CB06 ACCESSIBILITY LINK FINAL END */

/* CB06 FOOTER PREMIUM V9 BEGIN */

/* ==========================================================
   FOOTER PREMIUM — STRUCTURE GÉNÉRALE
   ========================================================== */

.site-footer,
footer.site-footer {
    position: relative !important;

    overflow: hidden !important;

    padding-top: 0 !important;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(23, 104, 255, .08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(143, 242, 210, .045),
            transparent 25%
        ),
        #071321 !important;
}

.site-footer > .container,
footer.site-footer > .container {
    width: min(100% - 48px, 1320px) !important;
    max-width: 1320px !important;

    margin-inline: auto !important;
}

/* ==========================================================
   GRILLE PRINCIPALE — 4 COLONNES SUR ORDINATEUR
   ========================================================== */

.site-footer .footer-grid,
footer.site-footer .footer-grid {
    display: grid !important;

    grid-template-columns:
        minmax(330px, 1.55fr)
        minmax(175px, .88fr)
        minmax(175px, .88fr)
        minmax(175px, .88fr) !important;

    align-items: start !important;

    column-gap: clamp(40px, 4vw, 72px) !important;
    row-gap: 38px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 64px 0 42px !important;
}

/* ==========================================================
   COLONNE MARQUE
   ========================================================== */

.site-footer .footer-brand,
footer.site-footer .footer-brand,
footer .footer-grid > .footer-brand {
    display: block !important;

    grid-column: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 430px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

.site-footer .footer-brand > a,
footer.site-footer .footer-brand > a {
    display: inline-flex !important;

    align-items: center !important;

    width: auto !important;

    margin: 0 0 20px !important;
    padding: 0 !important;
}

.site-footer .footer-brand > img,
.site-footer .footer-brand > a > img,
footer .footer-brand > img,
footer .footer-brand > a > img,
footer img[src*="logo-footer.svg"] {
    display: block !important;

    width: 230px !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;

    filter:
        drop-shadow(
            0 12px 28px rgba(0, 0, 0, .16)
        ) !important;
}

.site-footer .footer-brand > p,
footer.site-footer .footer-brand > p {
    display: block !important;

    width: 100% !important;
    max-width: 410px !important;

    margin: 0 0 20px !important;

    color: #b8c7d9 !important;

    font-size: .91rem !important;
    font-weight: 400 !important;

    line-height: 1.68 !important;

    letter-spacing: 0 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* ==========================================================
   CONTACT DU FOOTER
   ========================================================== */

.site-footer .footer-contact,
footer.site-footer .footer-contact {
    position: static !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr) !important;

    align-items: start !important;

    gap: 9px !important;

    width: 100% !important;
    max-width: 410px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.site-footer .footer-contact a,
footer.site-footer .footer-contact a {
    position: static !important;

    display: grid !important;

    grid-template-columns:
        25px
        minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 34px !important;

    margin: 0 !important;
    padding: 3px 0 !important;

    color: #f5f9ff !important;

    font-size: .88rem !important;
    font-weight: 520 !important;

    line-height: 1.45 !important;

    text-decoration: none !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;

    transform: none !important;

    transition:
        color .18s ease,
        transform .18s ease !important;
}

.site-footer .footer-contact a:hover,
footer.site-footer .footer-contact a:hover {
    color: #8ff2d2 !important;

    transform:
        translateX(3px) !important;
}

.site-footer .footer-contact svg,
footer.site-footer .footer-contact svg {
    display: block !important;

    width: 19px !important;
    height: 19px !important;

    color: #8ff2d2 !important;
}

/* ==========================================================
   COLONNES DE NAVIGATION
   ========================================================== */

.site-footer .footer-column,
footer.site-footer .footer-column {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 2px 0 0 !important;

    overflow: visible !important;
}

.site-footer .footer-column h3,
footer.site-footer .footer-column h3 {
    margin: 0 0 18px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: .74rem !important;
    font-weight: 650 !important;

    letter-spacing: .105em !important;
    line-height: 1.35 !important;

    text-transform: uppercase !important;
}

.site-footer .footer-column nav,
footer.site-footer .footer-column nav,
.site-footer .footer-column ul,
footer.site-footer .footer-column ul {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr) !important;

    align-items: start !important;

    gap: 6px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.site-footer .footer-column li,
footer.site-footer .footer-column li {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Zone de clic plus haute sans augmenter excessivement
 * la hauteur totale du footer.
 */
.site-footer .footer-column a,
footer.site-footer .footer-column a {
    display: flex !important;

    align-items: center !important;

    width: 100% !important;
    min-height: 34px !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 5px 0 !important;

    color: #b8c7d9 !important;

    font-size: .86rem !important;
    font-weight: 420 !important;

    line-height: 1.45 !important;

    text-decoration: none !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;

    transform: none !important;

    transition:
        color .18s ease,
        transform .18s ease !important;
}

.site-footer .footer-column a::before,
footer.site-footer .footer-column a::before {
    content: "";

    flex: 0 0 auto;

    width: 0;
    height: 1px;

    margin-right: 0;

    background: #8ff2d2;

    opacity: 0;

    transition:
        width .18s ease,
        margin-right .18s ease,
        opacity .18s ease;
}

.site-footer .footer-column a:hover,
footer.site-footer .footer-column a:hover,
.site-footer .footer-column a:focus-visible,
footer.site-footer .footer-column a:focus-visible {
    color: #ffffff !important;

    transform:
        translateX(2px) !important;
}

.site-footer .footer-column a:hover::before,
footer.site-footer .footer-column a:hover::before,
.site-footer .footer-column a:focus-visible::before,
footer.site-footer .footer-column a:focus-visible::before {
    width: 12px;

    margin-right: 8px;

    opacity: 1;
}

/* ==========================================================
   BAS DU FOOTER
   ========================================================== */

.site-footer .footer-bottom,
footer.site-footer .footer-bottom {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    flex-wrap: wrap !important;

    gap: 12px 28px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 22px 0 26px !important;

    border-top:
        1px solid rgba(255, 255, 255, .1) !important;

    color: #9eafc3 !important;

    font-size: .74rem !important;
    font-weight: 400 !important;

    line-height: 1.5 !important;
}

.site-footer .footer-bottom p,
footer.site-footer .footer-bottom p {
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.site-footer .footer-bottom a,
footer.site-footer .footer-bottom a {
    display: inline-flex !important;

    align-items: center !important;

    min-height: 30px !important;

    padding: 4px 0 !important;

    color: #b8c7d9 !important;

    text-decoration: none !important;
}

.site-footer .footer-bottom a:hover,
footer.site-footer .footer-bottom a:hover {
    color: #ffffff !important;
}

/* ==========================================================
   ÉCRANS INTERMÉDIAIRES
   Garde 4 colonnes jusqu'à 980 px pour éviter un footer haut.
   ========================================================== */

@media (max-width: 1180px) and (min-width: 981px) {

    .site-footer .footer-grid,
    footer.site-footer .footer-grid {
        grid-template-columns:
            minmax(280px, 1.4fr)
            repeat(3, minmax(145px, 1fr)) !important;

        column-gap: 30px !important;

        padding-top: 58px !important;
    }

    .site-footer .footer-brand > p,
    footer.site-footer .footer-brand > p {
        font-size: .86rem !important;
    }

    .site-footer .footer-column a,
    footer.site-footer .footer-column a {
        font-size: .82rem !important;
    }
}

/* ==========================================================
   TABLETTE — 2 COLONNES
   ========================================================== */

@media (max-width: 980px) {

    .site-footer .footer-grid,
    footer.site-footer .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 56px !important;
        row-gap: 42px !important;

        padding:
            56px 0 38px !important;
    }

    .site-footer .footer-brand,
    footer.site-footer .footer-brand {
        grid-column: 1 / -1 !important;

        max-width: none !important;
    }

    .site-footer .footer-brand > p,
    footer.site-footer .footer-brand > p {
        max-width: 700px !important;
    }

    .site-footer .footer-contact,
    footer.site-footer .footer-contact {
        display: flex !important;

        flex-wrap: wrap !important;

        gap: 6px 28px !important;

        max-width: 760px !important;
    }

    .site-footer .footer-contact a,
    footer.site-footer .footer-contact a {
        width: auto !important;
        min-width: 220px !important;
    }
}

/* ==========================================================
   MOBILE — 1 COLONNE
   ========================================================== */

@media (max-width: 640px) {

    .site-footer > .container,
    footer.site-footer > .container {
        width:
            min(100% - 36px, 1320px) !important;
    }

    .site-footer .footer-grid,
    footer.site-footer .footer-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        row-gap: 34px !important;

        padding:
            48px 0 32px !important;
    }

    .site-footer .footer-brand,
    footer.site-footer .footer-brand {
        grid-column: auto !important;
    }

    .site-footer .footer-brand > img,
    .site-footer .footer-brand > a > img,
    footer .footer-brand > img,
    footer .footer-brand > a > img,
    footer img[src*="logo-footer.svg"] {
        width: 215px !important;
    }

    .site-footer .footer-brand > p,
    footer.site-footer .footer-brand > p {
        max-width: 100% !important;

        margin-bottom: 17px !important;

        font-size: .88rem !important;
        line-height: 1.65 !important;
    }

    .site-footer .footer-contact,
    footer.site-footer .footer-contact {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 6px !important;

        max-width: 100% !important;
    }

    .site-footer .footer-contact a,
    footer.site-footer .footer-contact a {
        width: 100% !important;
        min-width: 0 !important;
    }

    .site-footer .footer-column {
        padding-top: 0 !important;
    }

    .site-footer .footer-column h3 {
        margin-bottom: 13px !important;
    }

    .site-footer .footer-column nav,
    footer.site-footer .footer-column nav,
    .site-footer .footer-column ul,
    footer.site-footer .footer-column ul {
        gap: 3px !important;
    }

    .site-footer .footer-column a,
    footer.site-footer .footer-column a {
        min-height: 39px !important;

        padding: 7px 0 !important;

        font-size: .88rem !important;
    }

    .site-footer .footer-bottom,
    footer.site-footer .footer-bottom {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        justify-items: start !important;

        gap: 9px !important;

        padding:
            20px 0
            calc(92px + env(safe-area-inset-bottom))
            !important;
    }
}

/* CB06 FOOTER PREMIUM V9 END */