/**
 * header-footer.css
 * -----------------------------------------------------------------------
 * Sous-ensemble du design V3 (site.css), contenant UNIQUEMENT les règles
 * nécessaires au header, à la navigation, au menu mobile, au footer et
 * aux modales légales.
 *
 * Pensé pour être chargé EN PLUS de Tailwind sur les pages qui n'ont pas
 * encore été migrées vers le design V3 (actuellement : le blog), sans
 * jamais toucher au reste de leur contenu :
 * - Aucun reset global (body, a, img, button, h1-h6) n'est présent ici,
 *   uniquement des versions scopées à nos composants.
 * - Toutes les autres règles sont déjà scopées par classe/élément propre
 *   à ces composants (.header, .nav, .mobile-menu, footer, .legal-modal-*).
 *
 * À utiliser avec include/header.php et include/footer.php.
 * -----------------------------------------------------------------------
 */



        :root {

            --blue: #0b2f72;
            --blue-2: #1f5ed6;
            --blue-3: #4d83ef;

            --blue-soft: #eef4ff;

            --dark: #101828;
            --text: #344054;
            --muted: #667085;

            --border: #e4e7ec;

            --light: #f8fafc;
            --white: #ffffff;

            --google-yellow: #fbbc04;

            --radius-xl: 30px;
            --radius-lg: 22px;
            --radius-md: 14px;

            --shadow-sm:
                0 12px 30px rgba(16, 24, 40, 0.06);

            --shadow-lg:
                0 30px 80px rgba(16, 24, 40, 0.14);

            --container: 1380px;

        }


/* =========================================
   RESETS SCOPÉS (header/footer/menu/modales uniquement)
   -----------------------------------------------------
   Équivalents des resets globaux a{}/button{}/img{} du
   design V3, mais limités à nos composants pour ne jamais
   affecter le contenu Tailwind existant du blog.
========================================= */

.header a,
.mobile-menu a,
footer a,
.legal-modal-box a {
    color: inherit;
    text-decoration: none;
}

.header button,
.mobile-menu button,
.legal-modal-box button {
    font: inherit;
}

.header .logo img,
.footer-logo {
    display: block;
    max-width: 100%;
}






        body.menu-open {

            overflow: hidden;

        }




        .container {

            width: min(
                calc(100% - 40px),
                var(--container)
            );

            margin-inline: auto;

        }





        /* =========================================
           BUTTONS
        ========================================= */


        .btn {

            position: relative;

            overflow: hidden;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            min-height: 54px;

            padding: 0 24px;

            border: 1px solid transparent;

            border-radius: 13px;

            font-weight: 800;

            font-size: 14px;

            transition:

                transform .25s ease,

                box-shadow .25s ease,

                background-color .25s ease,

                border-color .25s ease;

        }




        .btn::after {

            content: "";

            position: absolute;

            top: -50%;

            left: -70%;

            width: 40%;

            height: 200%;

            background:
                rgba(255,255,255,.22);

            transform:
                rotate(20deg);

            transition:
                left .45s ease;

        }




        .btn:hover::after {

            left: 130%;

        }




        .btn:hover {

            transform:
                translateY(-2px);

        }




        .btn-primary {

            background:
                var(--blue);

            color:
                white;

            box-shadow:
                0 12px 30px
                rgba(11,47,114,.18);

        }




        .btn-primary:hover {

            background:
                #071f50;

            box-shadow:
                0 16px 38px
                rgba(11,47,114,.25);

        }




        .btn-secondary {

            color:
                var(--dark);

            background:
                white;

            border-color:
                #cfd5df;

        }




        .btn-secondary:hover {

            border-color:
                var(--blue);

            color:
                var(--blue);

        }





        /* =========================================
           HEADER
        ========================================= */


        .header {

            position: sticky;

            top: 0;

            z-index: 1000;

            background:
                #ffffff;

            border-bottom:
                1px solid
                rgba(228,231,236,.8);

        }




        .nav {

            min-height: 72px;

            display: flex;

            align-items: center;

            justify-content:
                space-between;

            gap: 30px;

        }




        .logo {

            flex-shrink: 0;

            display: inline-flex;

            transition: transform .3s ease;

        }




        .logo:hover {

            transform: scale(1.05);

        }




        .logo img {

            width: 195px;

            height: auto;

        }




        .nav-links {

            display: flex;

            align-items: center;

            gap: 30px;

        }




        .nav-links a {

            position: relative;

            font-size: 13px;

            font-weight: 800;

            text-transform:
                uppercase;

        }




        .nav-links a::after {

            content: "";

            position: absolute;

            left: 0;

            bottom: -7px;

            width: 0;

            height: 2px;

            background:
                var(--blue-2);

            transition:
                width .25s ease;

        }




        .nav-links a:hover::after {

            width: 100%;

        }




        .nav-links a.is-active {

            color:
                var(--blue-2);

        }




        .nav-links a.is-active::after {

            width: 100%;

        }





        /* =========================================
           MOBILE BUTTON
        ========================================= */


        .menu-btn {

            display: none;

            width: 48px;

            height: 48px;

            border:
                1px solid var(--border);

            border-radius:
                12px;

            background:
                white;

            cursor:
                pointer;

            align-items:
                center;

            justify-content:
                center;

        }




        .burger {

            width:
                22px;

            display:
                grid;

            gap:
                5px;

        }




        .burger span {

            height:
                2px;

            background:
                var(--dark);

            border-radius:
                2px;

            transition:
                .25s ease;

        }




        .menu-btn.active
        .burger span:nth-child(1) {

            transform:
                translateY(7px)
                rotate(45deg);

        }




        .menu-btn.active
        .burger span:nth-child(2) {

            opacity:
                0;

        }




        .menu-btn.active
        .burger span:nth-child(3) {

            transform:
                translateY(-7px)
                rotate(-45deg);

        }





        /* =========================================
           MOBILE MENU
        ========================================= */


        .mobile-menu {

            position:
                fixed;

            inset:
                0;

            z-index:
                999;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            background:
                #ffffff;

            padding:
                105px 26px 40px;

            opacity:
                0;

            visibility:
                hidden;

            transform:
                translateY(-10px);

            transition:

                opacity .25s ease,

                visibility .25s ease,

                transform .25s ease;

        }




        .mobile-menu.active {

            opacity:
                1;

            visibility:
                visible;

            transform:
                translateY(0);

        }




        .mobile-menu nav {

            display:
                grid;

            gap:
                4px;

        }




        .mobile-menu nav a {

            font-family:
                "Manrope",
                sans-serif;

            font-size:
                clamp(
                    19px,
                    5vw,
                    26px
                );

            font-weight:
                800;

            padding:
                12px 0;

            border-bottom:
                1px solid
                var(--border);

            display: flex;
            align-items: center;
            gap: 14px;

            opacity: 0;
            transform: translateX(-16px);
            transition: opacity .35s ease, transform .35s ease;

        }




        .mm-num {

            font-family: "Inter", sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: var(--blue-3);
            min-width: 26px;

        }




        .mobile-menu.active nav a {

            opacity: 1;
            transform: translateX(0);

        }




        .mobile-menu.active nav a:nth-child(1) { transition-delay: .05s; }


        .mobile-menu.active nav a:nth-child(2) { transition-delay: .10s; }


        .mobile-menu.active nav a:nth-child(3) { transition-delay: .15s; }


        .mobile-menu.active nav a:nth-child(4) { transition-delay: .20s; }


        .mobile-menu.active nav a:nth-child(5) { transition-delay: .25s; }


        .mobile-menu.active nav a:nth-child(6) { transition-delay: .30s; }


        .mobile-menu.active nav a:nth-child(7) { transition-delay: .35s; }




        .mm-quick-contact {

            display: grid;
            gap: 10px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--border);

        }




        .mm-quick-contact a {

            font-family: "Inter", sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 10px;

        }




        .mobile-menu .btn {

            margin-top:
                28px;

            width:
                100%;

        }





        /* =========================================
           FOOTER
        ========================================= */


        footer {

            padding:
                65px 0 34px;

            background:
                #06152e;

            color:
                white;

        }




        .footer-grid {

            display:
                grid;

            grid-template-columns:
                1.6fr 1fr 1fr;

            gap:
                45px;

        }




        .footer-logo {

            width:
                225px;

            margin-bottom:
                18px;

            border-radius:
                12px;

        }




        .footer-social {

            display:
                flex;

            gap:
                10px;

            margin-top:
                20px;

        }




        .footer-social a {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            width:
                38px;

            height:
                38px;

            border-radius:
                10px;

            background:
                rgba(255,255,255,.06);

            margin-bottom:
                0;

            transition:
                background .2s ease,
                color .2s ease;

        }




        .footer-social a:hover {

            background:
                var(--blue-2);

            color:
                white;

        }




        .footer-legal-extra {

            font-size:
                13px;

            color:
                #8491a7;

            margin-bottom:
                6px;

        }




        footer p,
        footer a {

            color:
                #b7c1d3;

        }




        footer h4 {

            margin-bottom:
                14px;

        }




        footer a {

            display:
                block;

            margin-bottom:
                8px;

            transition:
                color .2s ease;

        }




        footer a:hover {

            color:
                white;

        }




        /* =========================================
           MODALES LÉGALES
        ========================================= */

        .legal-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }



        .legal-modal-overlay.active {
            display: flex;
        }



        .legal-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(16,24,40,.6);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }



        .legal-modal-box {
            position: relative;
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            width: 100%;
            max-width: 760px;
            max-height: 82vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: scale(.95);
            opacity: 0;
            transition: transform .25s ease, opacity .25s ease;
        }



        .legal-modal-overlay.active .legal-modal-box {
            transform: scale(1);
            opacity: 1;
        }



        .legal-modal-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 20px;
            padding: 26px 30px;
            background: var(--blue);
            color: var(--white);
        }



        .legal-modal-head h2 {
            font-size: 20px;
            font-weight: 800;
            margin: 0;
        }



        .legal-modal-head p {
            font-size: 13px;
            margin: 4px 0 0;
            color: rgba(255,255,255,.7);
        }



        .legal-modal-close {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,.15);
            color: var(--white);
            font-size: 15px;
            cursor: pointer;
            transition: background .2s ease;
        }



        .legal-modal-close:hover {
            background: rgba(255,255,255,.3);
        }



        .legal-modal-body {
            padding: 30px;
            overflow-y: auto;
            color: var(--text);
            font-size: 14.5px;
            line-height: 1.7;
        }



        .legal-modal-loading {
            text-align: center;
            padding: 40px 0;
            color: var(--muted);
            font-size: 14px;
        }



        .legal-modal-foot {
            padding: 16px 30px;
            border-top: 1px solid var(--border);
            background: var(--light);
            display: flex;
            justify-content: flex-end;
        }



        .legal-modal-close-btn {
            padding: 10px 22px;
            border-radius: 999px;
            border: none;
            background: var(--blue-2);
            color: var(--white);
            font-weight: 700;
            font-size: 13.5px;
            cursor: pointer;
            transition: background .2s ease;
        }



        .legal-modal-close-btn:hover {
            background: var(--blue);
        }



        .legal-modal-body h3 {
            font-size: 16px;
            font-weight: 800;
            color: var(--dark);
            margin: 26px 0 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }



        .legal-modal-body h3:first-child {
            margin-top: 0;
        }



        .legal-modal-body h3 span {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 8px;
            background: var(--blue-soft);
            color: var(--blue-2);
            font-size: 12.5px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }



        .legal-modal-body p {
            margin: 0 0 8px;
            font-size: 14px;
        }



        .legal-modal-body strong {
            color: var(--dark);
        }



        .legal-modal-body a {
            color: var(--blue-2);
            text-decoration: underline;
        }



        .legal-modal-body section {
            margin-bottom: 18px;
        }


/* =========================================
   RESPONSIVE
========================================= */


@media
        (max-width: 1180px) {




            .nav-links,
            .header .nav >
            .btn-primary {

                display:
                    none;

            }




            .menu-btn {

                display:
                    flex;

            }

}


@media
        (max-width: 768px) {




            .container {

                width:
                    min(
                        calc(100% - 28px),
                        var(--container)
                    );

            }




            .nav {

                min-height:
                    76px;

            }




            .logo img {

                width:
                    190px;

            }




            .hero-actions .btn {

                width:
                    100%;

            }




            .cta-actions .btn {

                width:
                    100%;

            }




            .footer-grid {

                grid-template-columns:
                    1fr;

                gap:
                    34px;

            }

}


@media
        (max-width: 430px) {




            .logo img {

                width:
                    165px;

            }

}