/* =========================================
           VARIABLES ET DESIGN SYSTEM
        ========================================= */
        :root {
            --primary: #0f172a;       
            --primary-light: #1e293b; 
            --accent: #0ea5e9;        
            --accent-hover: #0284c7;  
            --surface: #ffffff;
            --background: #f8fafc;
            --border: #e2e8f0;
            --text-main: #334155;
            --text-light: #64748b;
            --transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            /* Marge latérale du contenu : 5% sur grand écran, mais jamais moins de 28px
               (sinon le texte se colle aux bords sur téléphone) */
            --gutter: max(28px, 5%);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
        
        body { 
            background-color: var(--background); 
            color: var(--text-main); 
            overflow: hidden; /* Empêche le scroll global pour garder l'effet SPA */
        }

        /* Bandeau affiché uniquement si JavaScript est désactivé */
        .noscript-banner {
            position: fixed; bottom: 0; left: 0; width: 100%; z-index: 2000;
            background: var(--primary); color: #fff; padding: 16px var(--gutter);
            text-align: center; font-size: 0.9rem; line-height: 1.6;
        }
        .noscript-banner a { color: #7dd3fc; }

        /* Personnalisation de la barre de défilement (Scrollbar) */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--background); }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

        /* =========================================
           HEADER & NAVIGATION
        ========================================= */
        header {
            position: fixed; top: 0; width: 100%; height: 100px;
            background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 var(--gutter); z-index: 1000;
        }

        .logo { font-size: 24px; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; display: flex; align-items: center; }
        .logo span { color: var(--accent); }
        .logo img { height: 72px; width: auto; display: block; }

        /* Liens de navigation centrés en haut */
        nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
        nav ul { display: flex; list-style: none; gap: 8px; }
        nav ul li a {
            display: inline-block; padding: 18px 20px; /* grande zone cliquable */
            text-decoration: none; color: var(--text-main); font-weight: 600;
            font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;
            cursor: pointer; transition: color 0.3s; position: relative;
        }
        nav ul li a::after {
            content: ''; position: absolute; width: 0; height: 2px;
            bottom: 12px; left: 20px; background-color: var(--accent); transition: width 0.3s ease;
        }
        nav ul li a:hover::after, nav ul li a.active-link::after { width: calc(100% - 40px); }
        nav ul li a:hover, nav ul li a.active-link { color: var(--primary); }

        .lang-switch button {
            background: none; border: none; cursor: pointer; padding: 3px;
            margin-left: 8px; line-height: 0; border-radius: 4px; transition: 0.3s;
        }
        .lang-switch button img {
            width: 30px; height: 20px; object-fit: cover; display: block;
            border-radius: 3px; opacity: 0.4; transition: 0.3s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }
        .lang-switch button:hover img { opacity: 0.85; transform: scale(1.05); }
        .lang-switch button.active-lang img { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }

        /* Lien LinkedIn dans le header (à droite des drapeaux) */
        .social-link {
            display: inline-flex; align-items: center;
            margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border);
        }
        .social-link img { width: 26px; height: 26px; display: block; opacity: 0.75; transition: 0.3s; }
        .social-link:hover img { opacity: 1; transform: translateY(-2px) scale(1.05); }

        /* Bloc LinkedIn dans la page Contact */
        .contact-social {
            display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
            padding: 12px 20px; background: var(--surface); border: 1px solid var(--border);
            border-radius: 8px; text-decoration: none; color: var(--primary);
            font-weight: 600; transition: 0.3s;
        }
        .contact-social img { width: 24px; height: 24px; }
        .contact-social:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08); }

        /* =========================================
           PAGES & ANIMATIONS COULISSANTES
        ========================================= */
        main { position: relative; width: 100vw; height: 100vh; padding-top: 100px; overflow: hidden; }
        .page {
            position: absolute; top: 100px; left: 0; width: 100%; height: calc(100vh - 100px);
            overflow-y: auto; overflow-x: hidden; background-color: var(--background);
            opacity: 0; visibility: hidden; pointer-events: none;
            transform: translateX(0); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
            z-index: 1; padding-bottom: 120px;
        }
        .page.active {
            opacity: 1; visibility: visible; pointer-events: auto;
            transform: translateX(0); z-index: 10;
        }
        /* Positions de départ/sortie du slide directionnel (placées APRÈS .active pour primer sur son transform) */
        .page.enter-from-right { transform: translateX(100%);  opacity: 1; visibility: visible; }
        .page.enter-from-left  { transform: translateX(-100%); opacity: 1; visibility: visible; }
        .page.exit-to-left  { transform: translateX(-100%); opacity: 1; visibility: visible; pointer-events: none; z-index: 5; }
        .page.exit-to-right { transform: translateX(100%);  opacity: 1; visibility: visible; pointer-events: none; z-index: 5; }

        /* ===== FONDS DÉGRADÉS PAR PAGE (recréés en CSS) ===== */
        /* Plein écran (Fond 2 : vertical blanc -> bleu) : Accueil, Projets, Contact */
        #accueil, #projets, #contact { background: linear-gradient(180deg, #ffffff, #cfe4f4 55%, #b3d4ea); }
        /* Côtés seulement (Fond 2), centre neutre : Expertise & Outils, Le Bureau */
        #expertise, #bureau {
            background-color: var(--background);
            background-image:
                linear-gradient(to right, #bcdcf0, rgba(188, 220, 240, 0)),
                linear-gradient(to left, #bcdcf0, rgba(188, 220, 240, 0));
            background-size: 35% 100%, 35% 100%;
            background-position: left center, right center;
            background-repeat: no-repeat;
            background-attachment: local;
        }

        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* ===== INTRO / SÉQUENCE LOGO + MESSAGE DE BIENVENUE (page d'accueil) ===== */
        .intro-cover { position: relative; height: calc(100vh - 100px); }
        /* Petite séparation en bas de l'écran d'arrivée (marque la frontière avec l'accueil) */
        .intro-cover::after {
            content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 80%; height: 3px; border-radius: 3px; background: var(--accent);
            opacity: 0; animation: introHintIn 0.8s ease 3.4s forwards;
        }

        /* Logo TRÈS grand, centré, puis monte un peu (reste visible) pour laisser place au texte */
        .intro-logo {
            position: absolute; top: 50%; left: 50%;
            width: min(800px, 95vw); height: auto;
            transform: translate(-50%, -50%);
            animation: introLogoSeq 2.6s ease forwards;
        }
        @keyframes introLogoSeq {
            0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
            25%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            55%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 1; transform: translate(-50%, -50%) translateY(-22vh) scale(0.9); }
        }

        /* Message de bienvenue : apparaît une fois le logo parti */
        .intro-welcome {
            position: absolute; top: 66%; left: 50%; width: 90%;
            transform: translate(-50%, -50%); text-align: center;
            opacity: 0; animation: introWelcomeIn 0.9s ease 2.4s forwards;
        }
        @keyframes introWelcomeIn {
            from { opacity: 0; transform: translate(-50%, -50%) translateY(24px); }
            to   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
        }
        /* Titre d'accroche de l'intro : rendu identique à un h1, mais sans en être un
           (un seul h1 par page pour le SEO — le vrai h1 est celui du contenu d'accueil) */
        .intro-welcome .welcome-title {
            font-size: clamp(2rem, 6vw, 4.2rem); color: var(--primary); font-weight: 700;
            line-height: 1.1; margin-bottom: 16px; letter-spacing: -1px;
        }
        .welcome-sub {
            font-size: 36px; color: lightskyblue;
            font-weight: 800; line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px;
        }
        .welcome-small { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--text-light); margin: 0; }

        /* Invite à défiler : apparaît en dernier, en bas */
        .intro-hint {
            position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
            background: none; border: none; cursor: pointer;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            color: var(--text-light); font-weight: 700; text-transform: uppercase;
            letter-spacing: 2px; font-size: 13px;
            opacity: 0; animation: introHintIn 0.8s ease 3.4s forwards;
        }
        .intro-hint .arrow { font-size: 26px; line-height: 1; animation: introBounce 1.8s ease-in-out infinite; }
        @keyframes introHintIn { to { opacity: 1; } }
        @keyframes introBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

        /* =========================================
           COMPOSANTS UI
        ========================================= */
        /* .container gère UNIQUEMENT les marges latérales, .section-padding UNIQUEMENT les
           verticales : les deux classes cohabitent sur le même élément, donc la notation
           raccourcie « padding » remettrait l'autre axe à zéro. */
        .container { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
        .section-padding { padding-top: 100px; padding-bottom: 40px; }
        
        h1 { font-size: 4.5rem; color: var(--primary); line-height: 1.1; margin-bottom: 25px; font-weight: 800; letter-spacing: -2px; }
        h2 { font-size: 3rem; color: var(--primary); margin-bottom: 20px; font-weight: 800; letter-spacing: -1px; }
        h3 { font-size: 1.5rem; color: var(--primary); margin-bottom: 15px; font-weight: 700; }
        .subtitle { display: inline-block; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; font-size: 13px; }
        p { font-size: 1.15rem; line-height: 1.8; color: var(--text-main); margin-bottom: 20px; }

        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 16px 36px; background-color: var(--accent); color: var(--surface);
            font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 14px;
            border-radius: 8px; border: none; cursor: pointer; transition: 0.3s;
        }
        .btn:hover { background-color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1); }
        
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }


        /* ===== BANDEAU BAS DE PAGE (footer, sur chaque page) ===== */
        .site-footer { margin-top: 90px; border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.7); }
        .footer-inner {
            max-width: 1200px; margin: 0 auto; padding: 48px var(--gutter);
            display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: start;
        }
        .footer-logo { height: 60px; width: auto; display: block; margin-bottom: 14px; }
        .footer-name { font-weight: 800; color: var(--primary); font-size: 1.15rem; letter-spacing: -0.3px; margin-bottom: 10px; }
        .footer-addr { font-size: 0.95rem; line-height: 1.7; color: var(--text-main); margin: 0; }
        .footer-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); font-weight: 700; margin-bottom: 16px; }
        .footer-col p { font-size: 0.98rem; line-height: 1.5; margin-bottom: 10px; }
        .footer-col a { color: var(--text-main); text-decoration: none; cursor: pointer; transition: color 0.3s; }
        .footer-col a:hover { color: var(--accent); }
        .footer-contact-link { font-weight: 700; color: var(--accent); }
        .footer-linkedin { display: inline-flex; align-items: center; gap: 10px; }
        .footer-linkedin img { width: 28px; height: 28px; }
        .footer-linkedin span { font-size: 0.9rem; color: var(--text-main); word-break: break-all; }

        /* Bas de page : copyright */
        .footer-bottom {
            max-width: 1100px; margin: 0 auto; padding: 26px var(--gutter) 4px;
            border-top: 1px solid var(--border); text-align: center;
        }
        .footer-copy { font-size: 0.9rem; color: var(--text-main); font-weight: 600; margin: 0; }
        @media (max-width: 768px) {
            .footer-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }
            .footer-logo { margin-left: auto; margin-right: auto; }
            .footer-linkedin { justify-content: center; }
        }
        
        /* Bannière (certification CIR) */
        .stats-banner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; background: var(--primary); color: var(--surface); padding: 60px; border-radius: 16px; margin-top: 60px; }

        /* Bannière de certification CIR */
        .cir-banner { justify-content: center; align-items: center; gap: 50px; }
        .cir-logo { height: 120px; width: auto; background: #fff; padding: 14px; border-radius: 12px; flex-shrink: 0; }
        .cir-text { font-size: 1.5rem; line-height: 1.5; color: var(--surface); margin: 0; }
        .cir-text strong { color: var(--accent); }
        @media (max-width: 768px) {
            .cir-banner { flex-direction: column; text-align: center; gap: 28px; }
            .cir-logo { height: 100px; }
            .cir-text { font-size: 1.2rem; }
        }

        .software-grid { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
        .software-tag { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-weight: 600; }
        .software-tag img { height: 28px; width: auto; display: block; object-fit: contain; }

        /* Chapitres (pages Expertise et Logiciels / Domaine d'activité) : 2 colonnes alternées */
        .chapter {
            display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
            position: relative; padding-top: 120px;
        }
        /* Barre de séparation centrée au-dessus de chaque chapitre (2/3 de la largeur) */
        .chapter::before {
            content: ""; position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
            width: 66%; height: 4px; border-radius: 4px; background: var(--accent);
        }
        .chapter.reverse .chapter-media { order: -1; }   /* image à gauche, texte à droite */
        .chapter .card-icon { font-size: 46px; margin-bottom: 16px; display: block; }
        .chapter h2 { margin-bottom: 18px; }
        .chapter ul { margin: 16px 0 0; padding-left: 1.2em; }
        .chapter ul li { font-size: 1.08rem; line-height: 1.7; color: var(--text-main); margin-bottom: 10px; }
        .chapter ul li::marker { color: var(--accent); }
        .chapter .software-grid { margin-top: 28px; }
        .chapter-media img {
            width: 100%; height: 400px; object-fit: cover; border-radius: 16px;
            border: 1px solid var(--border); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
        }
        @media (max-width: 768px) {
            .chapter { grid-template-columns: 1fr; gap: 28px; padding-top: 70px; }
            .chapter.reverse .chapter-media { order: 0; }   /* sur mobile : toujours texte puis image */
            .chapter-media img { height: 240px; }
            .chapter::before { top: 28px; }
        }

        /* Carrousel Logos — défilement infini inversé, flou progressif sur les bords (adapté d'InfiniteSlider + ProgressiveBlur) */
        .logos-section { text-align: center; margin-top: 80px; }
        .logos-slider {
            overflow: hidden; position: relative; white-space: nowrap;
            width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
            margin-top: 50px; padding: 30px 0;
            border-top: 2px solid #000; border-bottom: 2px solid #000;
            background: #ffffff;
        }
        /* Bords : flou progressif (backdrop-filter masqué) + fondu vers le fond */
        .logos-slider::before, .logos-slider::after {
            content: ""; position: absolute; top: 0; width: 150px; height: 100%; z-index: 2;
            pointer-events: none;
            backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        }
        .logos-slider::before {
            left: 0;
            background: linear-gradient(to right, #ffffff, transparent);
            -webkit-mask-image: linear-gradient(to right, #000 25%, transparent);
            mask-image: linear-gradient(to right, #000 25%, transparent);
        }
        .logos-slider::after {
            right: 0;
            background: linear-gradient(to left, #ffffff, transparent);
            -webkit-mask-image: linear-gradient(to left, #000 25%, transparent);
            mask-image: linear-gradient(to left, #000 25%, transparent);
        }
        /* Piste : défilement inversé, continu (pas d'interruption au survol) */
        .logos-track { display: inline-block; animation: scroll 28s linear infinite reverse; }
        .logos-track img { height: 40px; width: auto; margin: 0 60px; vertical-align: middle; transition: transform 0.3s; }
        .logos-track img:hover { transform: scale(1.08); }
        @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* Contact */
        .form-control { width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; background: var(--background); transition: 0.3s; margin-bottom: 20px; }
        .form-control:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1); }
        textarea.form-control { height: 160px; resize: none; }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
        .form-result { margin: 16px 0 0; font-weight: 600; text-align: center; font-size: 0.95rem; }
        .form-result.success { color: #059669; }
        .form-result.error { color: #dc2626; }

        /* Libellés des descriptions Contact (Demande de projet / Candidature) */
        .contact-desc-label { color: var(--primary); font-size: 1.15rem; margin: 22px 0 8px; }
        .contact-desc-label:first-child { margin-top: 0; }

        /* Contact direct par e-mail (sans formulaire) */
        .contact-direct { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 220px; }
        .contact-email-intro { margin: 0 0 16px; color: var(--text-main); font-size: 1.05rem; }
        .contact-email {
            display: inline-block; font-weight: 700; font-size: 1.15rem; color: var(--accent);
            text-decoration: none; word-break: break-all; transition: color 0.3s;
        }
        .contact-email:hover { color: var(--primary); text-decoration: underline; }

        /* Carte (localisation) */
        .map-section { margin-top: 80px; }
        .map-section h3 { text-align: center; margin-bottom: 30px; }
        .map-wrapper {
            border-radius: 16px; overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
        }
        .map-wrapper iframe { display: block; width: 100%; height: 420px; border: 0; }
        .map-address {
            text-align: center; margin-top: 24px;
            font-size: 1.1rem; color: var(--text-main); line-height: 1.7;
        }
        .map-address strong { color: var(--primary); font-size: 1.2rem; }
        .map-address a { color: var(--accent); text-decoration: none; font-weight: 600; }
        .map-address a:hover { text-decoration: underline; }

        /* Bouton hamburger : caché par défaut (grand écran) */
        .menu-toggle {
            display: none; background: none; border: none; cursor: pointer;
            color: var(--primary); border-radius: 8px; align-items: center;
            justify-content: center; transition: 0.3s;
        }
        .menu-toggle:hover { background: var(--background); }

        /* Sous-menus déroulants au survol (Expertise et Logiciels, Domaine d'activité) */
        .has-submenu { position: relative; }
        .submenu {
            position: absolute; top: 100%; left: 0;
            transform: translateY(10px);
            min-width: 240px; list-style: none; padding: 8px 0; margin: 0;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
            z-index: 1100;
        }
        /* :focus-within => le sous-menu s'ouvre aussi à la navigation au clavier */
        .has-submenu:hover .submenu,
        .has-submenu:focus-within .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
        .submenu li { width: 100%; }
        .submenu li a {
            display: block; padding: 12px 22px; text-transform: none; letter-spacing: 0;
            font-size: 0.92rem; font-weight: 600; white-space: nowrap; color: var(--text-main);
        }
        .submenu li a::after { display: none; }
        .submenu li a:hover, .submenu li a:focus { background: var(--background); color: var(--accent); }

        /* ===== RESPONSIVE : header en barre + menu hamburger (< 960px) ===== */
        @media (max-width: 960px) {
            .menu-toggle { display: inline-flex; height: 52px; width: 52px; }
            .logo img { height: 60px; }

            /* hamburger tout à gauche, puis logo, drapeaux poussés à droite */
            nav {
                order: 0; position: static; transform: none; left: auto; top: auto;
                display: flex; align-items: center; height: 100px; margin-right: 16px;
            }
            .logo { order: 1; }
            .lang-switch { order: 2; margin-left: auto; }

            /* la liste de liens devient un menu déroulant sous le header */
            nav ul {
                position: absolute; top: 100px; left: 5%; right: auto;
                flex-direction: column; gap: 0; min-width: 230px;
                background: var(--surface); border: 1px solid var(--border);
                border-radius: 0 0 14px 14px; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
                padding: 8px 0; overflow: hidden;
                opacity: 0; visibility: hidden; transform: translateY(-12px);
                transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
            }
            /* ouverture au clic / tactile uniquement (pas au survol) */
            nav.open ul { opacity: 1; visibility: visible; transform: translateY(0); }

            nav ul li { width: 100%; }
            nav ul li a { display: block; width: 100%; padding: 14px 24px; }
            nav ul li a::after { display: none; }
            nav ul li a:hover { background: var(--background); color: var(--primary); }
            nav ul li a.active-link { color: var(--accent); }

            /* Sous-menus affichés en liste indentée dans le menu hamburger */
            .submenu {
                position: static; transform: none; opacity: 1; visibility: visible;
                pointer-events: auto; box-shadow: none; border: none; border-radius: 0;
                background: transparent; min-width: 0; padding: 0;
            }
            .submenu li a { padding: 10px 24px 10px 44px; font-size: 0.85rem; color: var(--text-light); }
        }

        /* ===== RESPONSIVE CONTENU : tablettes & téléphones (< 768px) ===== */
        @media (max-width: 768px) {
            h1 { font-size: 2.4rem; letter-spacing: -1px; margin-bottom: 18px; }
            h2 { font-size: 1.9rem; letter-spacing: -0.5px; }
            h3 { font-size: 1.3rem; }
            p { font-size: 1.05rem; line-height: 1.7; }
            .section-padding { padding-top: 40px; padding-bottom: 30px; }

            /* Les grilles passent en une seule colonne (empilées) */
            .grid-2 { grid-template-columns: 1fr; gap: 32px; }
            .chapter .card-icon { font-size: 40px; margin-bottom: 14px; }

            /* Bannière CIR */
            .stats-banner { padding: 32px; gap: 24px; margin-top: 40px; }

            /* Carte Google plus basse + adresse lisible */
            .map-section { margin-top: 50px; }
            .map-wrapper iframe { height: 300px; }

            /* Boutons pleine largeur (plus faciles à toucher) */
            .btn { width: 100%; }

            /* Logos un peu plus rapprochés + bords de fondu réduits */
            .logos-track img { height: 34px; margin: 0 34px; }
            .logos-slider::before, .logos-slider::after { width: 80px; }

            /* Fonds "côtés" réduits pour ne pas gêner la lecture du texte */
            #expertise, #bureau { background-size: 18% 100%, 18% 100%; }
        }

        /* Très petits écrans (< 430px) */
        @media (max-width: 430px) {
            h1 { font-size: 2rem; }
            h2 { font-size: 1.6rem; }
            .card { padding: 22px; }
            .stats-banner { padding: 24px; }
        }