/* ============================================================
   Projet Atlas — feuille de style principale
   Extraite de l'inline d'index.php (refactor multi-pages).
   Mise en cache 1 an immutable (.htaccess) ; cache-busting via ?v=ASSET_VER.
   ============================================================ */

    /* DM Sans 300 italic (latin-ext) */
    @font-face {
      font-family: 'DM Sans';
      font-style: italic;
      font-weight: 300;
      font-display: swap;
      src: url(../fonts/dm-sans-300-italic-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* DM Sans 300 italic (latin) */
    @font-face {
      font-family: 'DM Sans';
      font-style: italic;
      font-weight: 300;
      font-display: swap;
      src: url(../fonts/dm-sans-300-italic-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* DM Sans 300 normal (latin-ext) */
    @font-face {
      font-family: 'DM Sans';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(../fonts/dm-sans-300-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* DM Sans 300 normal (latin) */
    @font-face {
      font-family: 'DM Sans';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(../fonts/dm-sans-300-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* DM Sans 400 normal (latin-ext) */
    @font-face {
      font-family: 'DM Sans';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../fonts/dm-sans-400-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* DM Sans 400 normal (latin) */
    @font-face {
      font-family: 'DM Sans';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../fonts/dm-sans-400-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* DM Sans 500 normal (latin-ext) */
    @font-face {
      font-family: 'DM Sans';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(../fonts/dm-sans-500-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* DM Sans 500 normal (latin) */
    @font-face {
      font-family: 'DM Sans';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(../fonts/dm-sans-500-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Space Mono 400 normal (latin-ext) */
    @font-face {
      font-family: 'Space Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../fonts/space-mono-400-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Space Mono 400 normal (latin) */
    @font-face {
      font-family: 'Space Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../fonts/space-mono-400-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Space Mono 700 normal (latin-ext) */
    @font-face {
      font-family: 'Space Mono';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(../fonts/space-mono-700-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Space Mono 700 normal (latin) */
    @font-face {
      font-family: 'Space Mono';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(../fonts/space-mono-700-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Syne 400 normal (latin-ext) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../fonts/syne-400-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Syne 400 normal (latin) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../fonts/syne-400-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Syne 500 normal (latin-ext) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(../fonts/syne-500-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Syne 500 normal (latin) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(../fonts/syne-500-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Syne 600 normal (latin-ext) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url(../fonts/syne-600-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Syne 600 normal (latin) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url(../fonts/syne-600-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Syne 700 normal (latin-ext) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(../fonts/syne-700-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Syne 700 normal (latin) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(../fonts/syne-700-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Syne 800 normal (latin-ext) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url(../fonts/syne-800-normal-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Syne 800 normal (latin) */
    @font-face {
      font-family: 'Syne';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url(../fonts/syne-800-normal-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --white: #FFFFFF;
            --black: #050508;
            --navy: #0D1B3E;
            --gold: #C9A84C;
            --gold-light: #E8C97A;
            --gold-pale: #F5EDD5;
            --grey: #6B7280;
            --grey-light: #F4F4F6;
            --border: rgba(0,0,0,0.08);
            --font-display: 'Syne', sans-serif;
            --font-body: 'DM Sans', sans-serif;
            --font-mono: 'Space Mono', monospace;
            --nav-h: 72px;
            --pad: clamp(72px, 9vw, 140px);
            --wrap: min(1200px, 100% - 48px);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-body);
            background: var(--white);
            color: var(--black);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* ── NAV ── */
        nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            height: var(--nav-h);
            display: flex; align-items: center;
            transform: translateY(-100%);
            transition: transform .45s cubic-bezier(.16,1,.3,1), background .4s, box-shadow .4s;
        }
        nav.scrolled {
            transform: translateY(0);
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(20px);
            box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.08);
        }
        .nav-inner {
            width: var(--wrap); margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between;
        }
        .nav-logo {
            display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0;
        }
        .nav-logo svg { width: 32px; height: 32px; flex-shrink: 0; }
        .nav-logo-text {
            font-family: var(--font-display); font-weight: 700;
            font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
            color: var(--white); transition: color .4s; white-space: nowrap;
        }
        nav.scrolled .nav-logo-text { color: var(--black); }

        .nav-links {
            display: flex; align-items: center; gap: 32px; list-style: none;
        }
        .nav-links a {
            font-size: 14px; font-weight: 500; letter-spacing: .02em;
            color: rgba(255,255,255,.8); text-decoration: none; transition: color .3s;
        }
        .nav-links a:hover { color: var(--gold-light); }
        nav.scrolled .nav-links a { color: var(--grey); }
        nav.scrolled .nav-links a:hover { color: var(--gold); }

        /* Sous-menu Alexandrie (dropdown nav) */
        .nav-links .nav-sub { position: relative; }
        .nav-sub-toggle { display: inline-flex; align-items: center; gap: 5px; }
        .nav-caret { width: 14px; height: 14px; transition: transform .25s; }
        .nav-sub:hover .nav-caret, .nav-sub:focus-within .nav-caret { transform: rotate(180deg); }
        .nav-sub::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } /* pont hover */
        .subnav {
            position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(8px);
            min-width: 232px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
            box-shadow: 0 26px 54px -26px rgba(13,27,62,.45); padding: 8px; list-style: none;
            opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 1001;
        }
        .subnav::before { content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
        .nav-sub:hover .subnav, .nav-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        .subnav a { display: block; padding: 11px 14px; border-radius: 7px; font-size: 14px; color: var(--black) !important; white-space: nowrap; transition: background .2s, color .2s; }
        .subnav a:hover { background: var(--grey-light); color: var(--gold) !important; }

        .nav-cta {
            font-family: var(--font-display); font-size: 12px; font-weight: 700;
            letter-spacing: .12em; text-transform: uppercase;
            padding: 10px 22px; border: 1.5px solid rgba(255,255,255,.6);
            color: var(--white); text-decoration: none; transition: all .3s; white-space: nowrap;
        }
        .nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
        nav.scrolled .nav-cta { border-color: var(--gold); color: var(--gold); }
        nav.scrolled .nav-cta:hover { background: var(--gold); color: var(--black); }

        /* HAMBURGER */
        .burger {
            display: none; flex-direction: column; gap: 5px;
            cursor: pointer; padding: 6px; background: none; border: none;
            z-index: 1001; flex-shrink: 0;
        }
        .burger span {
            display: block; width: 24px; height: 2px;
            background: var(--white); border-radius: 2px; transition: all .35s ease;
        }
        nav.scrolled .burger span { background: var(--black); }
        .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--white) !important; }
        .burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--white) !important; }

        /* MOBILE MENU OVERLAY */
        .mobile-menu {
            position: fixed; inset: 0; z-index: 999;
            background: var(--black);
            display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
            padding: calc(var(--nav-h) + 24px) 24px 32px;
            overflow-y: auto; -webkit-overflow-scrolling: touch;
            opacity: 0; pointer-events: none; visibility: hidden;
            transition: opacity .4s ease, visibility .4s;
        }
        .mobile-menu.open { opacity: 1; pointer-events: all; visibility: visible; }
        .mobile-menu-links {
            /* Annule l'héritage de la règle globale `nav { position:fixed; top:0; height; transform }` */
            position: static; transform: none; height: auto; z-index: auto;
            display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%;
        }
        .mobile-menu-links a {
            font-family: var(--font-display); font-size: clamp(28px, 9vw, 52px); font-weight: 800;
            color: rgba(255,255,255,.85); text-decoration: none; letter-spacing: -.025em;
            padding: 12px 0; display: block; text-align: center; width: 100%;
            border-bottom: 1px solid rgba(255,255,255,.06);
            transform: translateY(24px); opacity: 0;
            transition: transform .4s ease, opacity .4s ease, color .25s;
        }
        .mobile-menu.open .mobile-menu-links a { transform: none; opacity: 1; }
        .mobile-menu.open .mobile-menu-links a:nth-child(1) { transition-delay: .08s; }
        .mobile-menu.open .mobile-menu-links a:nth-child(2) { transition-delay: .13s; }
        .mobile-menu.open .mobile-menu-links a:nth-child(3) { transition-delay: .18s; }
        .mobile-menu.open .mobile-menu-links a:nth-child(4) { transition-delay: .23s; }
        .mobile-menu-links a:hover { color: var(--gold); }
        /* Sous-menus mobiles : sections ouvertes + items indentés */
        .mobile-menu-links .mm-group { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: block; padding: 16px 0 2px; opacity: 1 !important; transform: none !important; }
        .mobile-menu-links a.mm-sub { font-size: clamp(20px, 6vw, 30px); }
        .mobile-menu-actions {
            margin-top: 40px; display: flex; flex-direction: column; gap: 12px;
            width: 100%; max-width: 320px;
            transform: translateY(24px); opacity: 0;
            transition: transform .4s ease .28s, opacity .4s ease .28s;
        }
        .mobile-menu.open .mobile-menu-actions { transform: none; opacity: 1; }
        .mobile-menu-actions .btn-primary,
        .mobile-menu-actions .btn-outline2 {
            display: block; text-align: center;
            font-family: var(--font-display); font-size: 13px; font-weight: 700;
            letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
            padding: 16px 32px; border: 2px solid var(--gold);
            transition: all .3s;
        }
        .mobile-menu-actions .btn-primary { background: var(--gold); color: var(--black); }
        .mobile-menu-actions .btn-outline2 { background: transparent; color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.25); }
        .mobile-menu-tag {
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
            color: rgba(255,255,255,.25); text-transform: uppercase; margin-bottom: 36px;
        }

        /* ── HERO ── */
        .hero {
            position: relative; height: 100vh; min-height: 600px;
            overflow: hidden; display: flex; align-items: center; justify-content: center;
        }
        .hero-video-wrap {
            position: absolute; inset: -20%; z-index: 0;
        }
        #hero-video {
            width: 100%; height: 100%; object-fit: cover; object-position: center;
        }
        .hero-overlay {
            position: absolute; inset: 0; z-index: 1;
            background: linear-gradient(to bottom, rgba(5,5,8,.48) 0%, rgba(5,5,8,.38) 40%, rgba(5,5,8,.72) 100%);
        }
        .hero-content {
            position: relative; z-index: 2;
            text-align: center; max-width: 920px; padding: 0 20px;
        }
        .hero-tag {
            display: inline-flex; align-items: center; gap: 10px;
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
            text-transform: uppercase; color: var(--gold-light); margin-bottom: 28px;
            opacity: 0; transform: translateY(20px);
            animation: fadeUp .8s ease .3s forwards;
        }
        .hero-tag-line { width: 24px; height: 1px; background: var(--gold); flex-shrink: 0; }
        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(36px, 5.5vw, 72px); font-weight: 800;
            line-height: 1; letter-spacing: -.03em; color: var(--white);
            margin-bottom: 24px;
            opacity: 0; transform: translateY(30px);
            animation: fadeUp 1s ease .5s forwards;
        }
        .hero-title em { font-style: normal; color: var(--gold-light); }
        .hero-sub {
            font-size: clamp(15px, 1.8vw, 19px); font-weight: 300;
            color: rgba(255,255,255,.72); line-height: 1.65;
            max-width: 560px; margin: 0 auto 44px;
            opacity: 0; transform: translateY(20px);
            animation: fadeUp 1s ease .7s forwards;
        }
        .hero-actions {
            display: flex; align-items: center; justify-content: center;
            gap: 14px; flex-wrap: wrap;
            opacity: 0; transform: translateY(20px);
            animation: fadeUp 1s ease .9s forwards;
        }
        .btn-primary {
            font-family: var(--font-display); font-size: 12px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            padding: 16px 36px; background: var(--gold); color: var(--black);
            text-decoration: none; border: 2px solid var(--gold); transition: all .3s;
        }
        .btn-primary:hover { background: transparent; color: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); }
        .btn-outline {
            font-family: var(--font-display); font-size: 12px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            padding: 16px 36px; background: transparent; color: var(--white);
            text-decoration: none; border: 2px solid rgba(255,255,255,.4); transition: all .3s;
        }
        .btn-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); transform: translateY(-2px); }
        .hero-scroll {
            position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
            z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
            opacity: 0; animation: fadeIn 1s ease 1.4s forwards;
        }
        .hero-scroll span {
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
            color: rgba(255,255,255,.4); text-transform: uppercase;
        }
        .scroll-line {
            width: 1px; height: 44px;
            background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
            animation: pulse-line 2.2s ease-in-out infinite;
        }

        /* ── MANIFESTO ── */
        .manifesto { padding: var(--pad) 0; background: var(--white); }
        .manifesto-inner { width: var(--wrap); margin: 0 auto; }
        .label {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .25em;
            text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 32px;
        }
        .manifesto-text {
            font-family: var(--font-display);
            font-size: clamp(26px, 4.2vw, 54px); font-weight: 700;
            line-height: 1.15; letter-spacing: -.01em; color: var(--black); max-width: 920px;
        }
        .manifesto-text .hl { color: var(--gold); }
        .manifesto-cols {
            display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
            max-width: 820px; margin-top: 48px;
        }
        .manifesto-cols p { font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--grey); text-align: justify; }

        /* ── PROBLEM ── */
        .problem {
            padding: var(--pad) 0; background: var(--black);
            position: relative; overflow: hidden;
        }
        .problem::before {
            content: 'ATLAS';
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%,-50%);
            font-family: var(--font-display); font-size: clamp(80px,16vw,260px);
            font-weight: 800; color: rgba(255,255,255,.025);
            white-space: nowrap; pointer-events: none; letter-spacing: -.05em;
        }
        .problem-inner { width: var(--wrap); margin: 0 auto; position: relative; z-index: 1; }
        .problem-head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 48px; margin-bottom: 64px;
        }
        .problem-title {
            font-family: var(--font-display);
            font-size: clamp(27px,5vw,60px); font-weight: 800;
            color: var(--white); line-height: 1.08; letter-spacing: -.025em;
            overflow-wrap: break-word;
        }
        .problem-desc {
            font-size: 17px; font-weight: 300;
            color: rgba(255,255,255,.5); line-height: 1.75;
            max-width: 380px; padding-top: 12px; flex-shrink: 0;
        }
        .problem-grid {
            display: grid; grid-template-columns: repeat(3,1fr);
            gap: 1px; background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.07);
        }
        .p-card { background: var(--black); padding: 44px 36px; transition: background .3s; }
        .p-card:hover { background: #0E0E14; }
        .p-card-n {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
            color: var(--gold); margin-bottom: 20px;
        }
        .p-card h3 {
            font-family: var(--font-display); font-size: 21px; font-weight: 700;
            color: var(--white); line-height: 1.3; margin-bottom: 12px;
        }
        .p-card p { font-size: 15px; font-weight: 300; color: rgba(255,255,255,.48); line-height: 1.72; text-align: justify; }

        /* ── MISSIONS ── */
        .missions { padding: var(--pad) 0; background: var(--white); }
        .missions-inner { width: var(--wrap); margin: 0 auto; }
        .section-head {
            display: flex; align-items: flex-end; justify-content: space-between;
            gap: 40px; margin-bottom: 64px;
        }
        .section-title {
            font-family: var(--font-display);
            font-size: clamp(25px,4.5vw,50px); font-weight: 800;
            color: var(--black); line-height: 1.08; letter-spacing: -.02em;
            overflow-wrap: break-word;
        }
        .section-desc {
            font-size: 16px; font-weight: 300; color: var(--grey);
            line-height: 1.72; max-width: 340px;
        }
        .missions-grid {
            display: grid; grid-template-columns: repeat(2,1fr);
            gap: 2px; background: var(--border);
        }
        .m-card {
            background: var(--white); padding: 52px 44px;
            position: relative; overflow: hidden; transition: background .4s;
        }
        .m-card::after {
            content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
            background: var(--gold); transform: scaleX(0); transform-origin: left;
            transition: transform .4s;
        }
        .m-card:hover { background: #FAFAF8; }
        .m-card:hover::after { transform: scaleX(1); }
        .m-icon {
            width: 48px; height: 48px;
            border: 1.5px solid var(--gold); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: var(--gold); margin-bottom: 28px;
        }
        .m-icon svg { width: 20px; height: 20px; }
        .m-num {
            position: absolute; top: 44px; right: 44px;
            font-family: var(--font-display); font-size: 64px; font-weight: 800;
            color: rgba(0,0,0,.04); line-height: 1; letter-spacing: -.04em;
        }
        .m-card h3 {
            font-family: var(--font-display); font-size: 22px; font-weight: 700;
            color: var(--black); margin-bottom: 12px; line-height: 1.2;
        }
        .m-card p { font-size: 15px; font-weight: 300; color: var(--grey); line-height: 1.72; margin-bottom: 24px; text-align: justify; }
        .m-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .m-tag {
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
            color: var(--gold); padding: 5px 10px;
            background: var(--gold-pale); border: 1px solid #EDD99A;
        }

        /* ── STATS ── */
        .stats {
            padding: clamp(56px,8vw,100px) 0;
            background: var(--navy); position: relative; overflow: hidden;
        }
        .stats::after {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,.12) 0%, transparent 70%);
            pointer-events: none;
        }
        .stats-inner {
            width: var(--wrap); margin: 0 auto;
            display: grid; grid-template-columns: repeat(4,1fr);
            gap: 1px; background: rgba(255,255,255,.06);
            position: relative; z-index: 1;
        }
        .stat { background: var(--navy); padding: 52px 36px; text-align: center; }
        .stat-n {
            font-family: var(--font-display);
            font-size: clamp(28px,4vw,48px); font-weight: 800;
            color: var(--white); line-height: 1; margin-bottom: 12px; letter-spacing: -.02em;
        }
        .stat-n .gold { color: var(--gold); }
        .stat-n .stat-old {
            font-size: .5em; font-weight: 700; color: rgba(255,255,255,.32);
            text-decoration: line-through; text-decoration-color: var(--gold); margin-right: .3em;
        }
        .stat-l { font-size: 14px; font-weight: 400; color: rgba(255,255,255,.42); line-height: 1.55; }

        /* ── STRUCTURE ── */
        .structure { padding: var(--pad) 0; background: var(--white); }
        .structure-inner { width: var(--wrap); margin: 0 auto; }
        .structure-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 72px; align-items: center; margin-top: 64px;
        }
        .struct-items { display: flex; flex-direction: column; gap: 32px; }
        .struct-item { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; }
        .struct-icon {
            width: 52px; height: 52px; background: var(--gold-pale);
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .struct-icon svg { width: 22px; height: 22px; color: var(--gold); }
        .struct-item h3 {
            font-family: var(--font-display); font-size: 16px; font-weight: 700;
            color: var(--black); margin-bottom: 6px;
        }
        .struct-item p { font-size: 14px; color: var(--grey); line-height: 1.65; text-align: justify; }
        .diagram { background: var(--black); padding: 44px; }
        .diagram-lbl {
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
            text-transform: uppercase; color: var(--gold); margin-bottom: 36px;
        }
        .d-org { display: flex; flex-direction: column; align-items: center; }
        .d-node {
            background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
            padding: 14px 24px; text-align: center; width: 100%;
        }
        .d-node.top { border-color: var(--gold); background: rgba(201,168,76,.1); }
        .d-node-t { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--white); }
        .d-node-s { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.38); margin-top: 4px; }
        .d-line { width: 1px; height: 28px; background: rgba(255,255,255,.14); }
        .d-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; width: 100%; }
        .d-conn { height: 28px; width: 100%; position: relative; }
        .d-conn::before {
            content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 100%;
            background: rgba(255,255,255,.14);
        }
        .d-conn::after {
            content: ''; position: absolute; top: 50%;
            left: calc(16.67% + 3px); right: calc(16.67% + 3px);
            height: 1px; background: rgba(255,255,255,.14);
        }

        /* ── JOIN ── */
        .join { padding: var(--pad) 0; background: var(--white); }
        .join-inner { width: var(--wrap); margin: 0 auto; }
        .join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
        .join-title {
            font-family: var(--font-display);
            font-size: clamp(25px,4.5vw,48px); font-weight: 800;
            color: var(--black); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 20px;
            overflow-wrap: break-word;
        }
        .join-desc { font-size: 16px; font-weight: 300; color: var(--grey); line-height: 1.75; margin-bottom: 36px; text-align: justify; }
        .join-benefits { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; }
        .join-benefits li {
            display: flex; align-items: flex-start; gap: 14px;
            font-size: 15px; color: var(--black); line-height: 1.5;
        }
        .join-benefits li::before {
            content: '';
            width: 20px; height: 20px; flex-shrink: 0;
            border: 1.5px solid var(--gold); border-radius: 50%;
            background: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%23C9A84C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
            position: relative; top: 2px;
        }
        .price-card {
            background: var(--black); padding: 52px 44px; position: relative; overflow: hidden;
        }
        .price-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
            background: linear-gradient(to right, var(--gold), var(--gold-light));
        }
        .price-lbl {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
            color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 28px;
        }
        .price-amt {
            display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px;
            line-height: 1; margin-bottom: 4px;
        }
        .price-new {
            font-family: var(--font-display); font-size: 80px; font-weight: 800;
            color: var(--white); letter-spacing: -.04em;
        }
        .price-new .cur { font-size: .4em; vertical-align: top; color: var(--gold); }
        /* Placement de la devise selon la langue (html[lang] mis à jour par le sélecteur).
           Défaut = français : symbole APRÈS le montant, avec espace. EN : symbole AVANT.
           NB : ces règles pilotent SEUL le `display` des `.cur` — ne pas redéfinir `display`
           sur `.price-new .cur` / `.modal-price .amt .cur`, sinon le basculement casse. */
        .cur-pre { display: none; }
        .cur-post { display: inline-block; margin-left: .06em; }
        html[lang="en"] .cur-pre { display: inline-block; margin-right: .04em; }
        html[lang="en"] .cur-post { display: none; }
        .price-period { font-size: 14px; color: rgba(255,255,255,.38); margin-bottom: 36px; }
        .price-feats {
            list-style: none; display: flex; flex-direction: column; gap: 12px;
            margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .price-feats li { font-size: 14px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 12px; }
        .price-feats li::before { content: '→'; color: var(--gold); font-family: var(--font-mono); }
        /* Promo tarif fondateur */
        .price-badge {
            position: absolute; top: 22px; right: 0;
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
            text-transform: uppercase; background: var(--gold); color: var(--black);
            padding: 6px 14px; font-weight: 700;
        }
        .price-old {
            font-family: var(--font-display); font-size: 34px; font-weight: 700;
            color: rgba(255,255,255,.34); text-decoration: line-through;
            text-decoration-color: var(--gold); letter-spacing: -.02em;
        }
        .price-old .cur { font-size: .64em; }
        .join-promo {
            border: 1px solid rgba(201,168,76,.4); background: rgba(201,168,76,.06);
            border-left: 3px solid var(--gold); padding: 22px 24px; margin-bottom: 32px;
        }
        .join-promo-tag {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
            text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 12px;
        }
        .join-promo p { font-size: 15px; color: #4A5160; line-height: 1.7; margin: 0; text-align: justify; }
        .join-promo strong { color: var(--black); font-weight: 700; }
        .btn-gold {
            display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            padding: 18px 36px; background: var(--gold); color: var(--black);
            text-decoration: none; text-align: center; border: 2px solid var(--gold); transition: all .3s;
        }
        .btn-gold:hover { background: transparent; color: var(--gold-light); border-color: var(--gold-light); }

        /* ── DONATE ── */
        .donate { padding: var(--pad) 0; background: var(--grey-light); }
        .donate-inner { width: var(--wrap); margin: 0 auto; text-align: center; }
        .donate-title {
            font-family: var(--font-display);
            font-size: clamp(27px,5vw,56px); font-weight: 800;
            color: var(--black); line-height: 1.08; letter-spacing: -.02em;
            overflow-wrap: break-word; max-width: 760px; margin: 0 auto 20px;
        }
        .donate-sub {
            font-size: 17px; font-weight: 300; color: var(--grey); line-height: 1.7;
            max-width: 520px; margin: 0 auto 56px;
        }
        .donate-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 40px; }
        .d-tier {
            background: var(--white); padding: 36px 28px; text-align: left;
            border: 1.5px solid transparent; transition: all .3s; position: relative;
        }
        .d-tier.featured { border-color: var(--gold); }
        .d-tier:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.08); }
        .d-badge {
            position: absolute; top: -12px; left: 28px;
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
            text-transform: uppercase; background: var(--gold); color: var(--black); padding: 4px 12px;
        }
        .d-amt {
            font-family: var(--font-display); font-size: 36px; font-weight: 800;
            color: var(--black); letter-spacing: -.02em; margin-bottom: 6px;
        }
        .d-name {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em;
            text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
        }
        .d-desc { font-size: 14px; color: var(--grey); line-height: 1.6; text-align: justify; }
        .donate-custom { font-size: 16px; color: var(--grey); }
        .donate-custom a { color: var(--gold); text-decoration: none; font-weight: 500; }
        .btn-dark {
            display: inline-block; margin-top: 36px;
            font-family: var(--font-display); font-size: 13px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            padding: 18px 56px; background: var(--black); color: var(--white);
            text-decoration: none; border: 2px solid var(--black); transition: all .3s;
        }
        .btn-dark:hover { background: var(--gold); border-color: var(--gold); color: var(--black); transform: translateY(-2px); }

        /* ── FOOTER ── */
        footer { background: var(--black); padding: 72px 0 36px; }
        .footer-inner { width: var(--wrap); margin: 0 auto; }
        .footer-top {
            display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 44px;
            padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 36px;
        }
        .footer-brand { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--white); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
        .footer-about { font-size: 14px; color: rgba(255,255,255,.32); line-height: 1.72; max-width: 260px; margin-bottom: 22px; }
        .footer-email { font-family: var(--font-mono); font-size: 12px; color: var(--gold); text-decoration: none; word-break: break-all; }
        .footer-address { font-size: 13px; color: rgba(255,255,255,.32); line-height: 1.7; margin-top: 18px; font-style: normal; max-width: 260px; }
        .footer-address .addr-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 5px; }
        .fcol-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
        .fcol-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }
        .fcol-links a { font-size: 14px; color: rgba(255,255,255,.42); text-decoration: none; transition: color .3s; }
        .fcol-links a:hover { color: var(--gold-light); }
        .footer-fullname { font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.7; text-align: center; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 28px; }
        .footer-fullname .fn-acr, .footer-fullname .fn-cap { color: var(--gold); text-transform: uppercase; font-weight: 700; }
        .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
        .footer-copy { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.18); }
        .footer-legal { display: flex; gap: 20px; }
        .footer-legal a { font-size: 11px; color: rgba(255,255,255,.18); text-decoration: none; transition: color .3s; }
        .footer-legal a:hover { color: rgba(255,255,255,.5); }

        /* ── BANDEAU CONSENTEMENT COOKIES (RGPD / ePrivacy) ── */
        .cookie-banner {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
            background: rgba(5,5,8,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            border-top: 1px solid rgba(201,168,76,.35);
            padding: 22px 0; box-shadow: 0 -12px 44px rgba(0,0,0,.55);
            transform: translateY(115%); transition: transform .5s cubic-bezier(.16,1,.3,1);
        }
        .cookie-banner.show { transform: translateY(0); }
        .cookie-inner { width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
        .cookie-text { flex: 1 1 420px; min-width: 0; }
        .cookie-title { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--gold); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 7px; }
        .cookie-text p { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.62); text-align: justify; margin: 0; }
        .cookie-text a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }
        .cookie-actions { display: flex; gap: 12px; flex: 0 0 auto; }
        .cookie-btn {
            font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
            padding: 13px 26px; border-radius: 2px; cursor: pointer; border: 1px solid;
            transition: all .3s; white-space: nowrap;
        }
        /* Refus AUSSI accessible que l'acceptation (exigence CNIL) : même taille, fort contraste. */
        .cookie-refuse { background: transparent; color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.5); }
        .cookie-refuse:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.07); }
        .cookie-accept { background: var(--gold); color: var(--black); border-color: var(--gold); font-weight: 700; }
        .cookie-accept:hover { background: var(--gold-light); border-color: var(--gold-light); }
        @media (max-width: 700px) {
            .cookie-inner { gap: 16px; }
            .cookie-actions { width: 100%; }
            .cookie-btn { flex: 1 1 0; padding: 14px 8px; text-align: center; }
        }

        /* ── ANIMATIONS ── */
        @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeIn { to { opacity: 1; } }
        @keyframes pulse-line {
            0%,100% { opacity: .3; transform: scaleY(.4); transform-origin: top; }
            50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
        }
        .reveal { opacity: 0; transform: translateY(32px); transition: opacity .75s ease, transform .75s ease; }
        .reveal.visible { opacity: 1; transform: none; }
        .d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; }
        .d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; }

        /* ════════════════════════════
           TABLET  (≤ 900px)
        ════════════════════════════ */
        @media (max-width: 900px) {
            :root { --wrap: min(1200px, 100% - 40px); }

            .nav-links { display: none; }
            .nav-cta  { display: none; }
            .burger   { display: flex; padding: 10px; }

            /* La barre + le burger restent visibles dès le haut de page (sinon menu inaccessible) */
            nav { transform: translateY(0); }
            /* Lisibilité du burger/logo blancs au-dessus du hero quand la barre est transparente */
            nav:not(.scrolled) .burger span { box-shadow: 0 0 4px rgba(0,0,0,.45); }
            nav:not(.scrolled) .nav-logo-text { text-shadow: 0 1px 6px rgba(0,0,0,.5); }
            /* Menu ouvert : forcer la barre transparente pour que la croix (X) et le logo
               blancs restent visibles sur le fond sombre, même après avoir scrollé */
            .mobile-menu.open ~ nav { background: transparent !important; box-shadow: none !important; }
            .mobile-menu.open ~ nav .nav-logo-text { color: #fff; }
            .mobile-menu.open ~ nav .burger span { background: #fff !important; }

            .manifesto-cols { grid-template-columns: 1fr; gap: 20px; max-width: 100%; }

            .problem-head { flex-direction: column; gap: 20px; }
            .problem-grid { grid-template-columns: 1fr 1fr; }

            .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }

            .stats-inner { grid-template-columns: repeat(2,1fr); }

            .structure-grid { grid-template-columns: 1fr; gap: 48px; }

            .join-grid { grid-template-columns: 1fr; gap: 52px; }

            .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
            .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
            .footer-legal { justify-content: center; }
        }

        /* ════════════════════════════
           LARGE TABLET  (901px – 1100px)
        ════════════════════════════ */
        @media (min-width: 901px) and (max-width: 1100px) {
            .missions-grid { grid-template-columns: 1fr; }
            .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
        }

        /* ════════════════════════════
           MOBILE  (≤ 640px)
        ════════════════════════════ */
        @media (max-width: 640px) {
            :root {
                --pad: clamp(56px, 12vw, 80px);
                --wrap: min(1200px, 100% - 32px);
                --nav-h: 64px;
            }

            /* NAV */
            .nav-logo-text { font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

            /* HERO */
            .hero {
                height: auto;
                min-height: 100svh;
                padding: calc(var(--nav-h) + 56px) 0 64px;
                align-items: flex-start;
            }
            .hero-video-wrap { inset: 0; }
            .hero-tag { font-size: 9px; letter-spacing: .12em; gap: 8px; }
            .hero-tag-line { width: 16px; }
            .hero-title { font-size: clamp(36px, 10vw, 52px); letter-spacing: -.025em; margin-bottom: 18px; }
            .hero-sub { font-size: 15px; margin-bottom: 36px; }
            .hero-actions { flex-direction: column; gap: 10px; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; }
            .btn-primary, .btn-outline { display: block; text-align: center; padding: 16px 24px; width: 100%; }
            .hero-scroll { display: none; }

            /* MANIFESTO */
            .manifesto-text { font-size: clamp(22px, 6.5vw, 30px); }
            .manifesto-cols p { font-size: 15px; }

            /* PROBLEM */
            .problem-grid { grid-template-columns: 1fr; }
            .p-card { padding: 32px 24px; }
            .p-card h3 { font-size: 18px; }

            /* MISSIONS */
            .missions-grid { grid-template-columns: 1fr; }
            .m-card { padding: 36px 24px; }
            .m-num { font-size: 52px; top: 32px; right: 24px; }
            .m-card h3 { font-size: 20px; }

            /* STATS */
            .stats-inner { grid-template-columns: 1fr 1fr; }
            .stat { padding: 36px 20px; }
            .stat-n { font-size: clamp(20px, 5.5vw, 30px); }

            /* STRUCTURE */
            .struct-item { grid-template-columns: 44px 1fr; gap: 16px; }
            .struct-icon { width: 44px; height: 44px; }
            .diagram { padding: 28px 20px; }
            .d-row { grid-template-columns: 1fr; gap: 4px; }
            .d-conn::after { display: none; }
            .d-conn { height: 16px; }
            .d-node { padding: 12px 16px; }
            .d-node-t { font-size: 12px; }

            /* JOIN */
            .join-grid { gap: 40px; }
            .price-card { padding: 36px 24px; }
            .price-new { font-size: 68px; }
            .price-old { font-size: 30px; }
            .join-benefits li { font-size: 14px; }
            .btn-gold { padding: 16px 24px; }

            /* DONATE */
            .donate-tiers { grid-template-columns: 1fr; gap: 12px; }
            .d-tier { padding: 32px 24px; }
            .d-amt { font-size: 32px; }
            .donate-sub { font-size: 15px; margin-bottom: 40px; }
            .btn-dark { display: block; text-align: center; padding: 18px 24px; }

            /* FOOTER */
            .footer-top { grid-template-columns: 1fr; gap: 32px; }
            .footer-about { max-width: 100%; }
        }

        /* ════════════════════════════
           VERY SMALL  (≤ 380px)
        ════════════════════════════ */
        @media (max-width: 380px) {
            .hero-title { font-size: 36px; }
            .nav-logo-text { display: none; }
        }

        /* ── MODALS ── */
        .modal-overlay {
            position: fixed; inset: 0; z-index: 2000;
            background: rgba(5,5,8,.72); backdrop-filter: blur(6px);
            display: flex; align-items: flex-start; justify-content: center;
            padding: 40px 20px; overflow-y: auto;
            opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
        }
        .modal-overlay.open { opacity: 1; visibility: visible; }
        .modal {
            position: relative; width: 100%; max-width: 580px; margin: auto;
            background: var(--white); border-top: 4px solid var(--gold);
            box-shadow: 0 40px 120px rgba(0,0,0,.45);
            transform: translateY(24px) scale(.98); transition: transform .4s cubic-bezier(.16,1,.3,1);
        }
        .modal-overlay.open .modal { transform: translateY(0) scale(1); }
        .modal-head { padding: 40px 40px 0; }
        .modal-label {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
            text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 14px;
        }
        .modal-title {
            font-family: var(--font-display); font-size: clamp(26px,4vw,34px); font-weight: 800;
            color: var(--black); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 14px;
        }
        .modal-intro { font-size: 15px; font-weight: 300; color: var(--grey); line-height: 1.65; text-align: justify; }
        .modal-body { padding: 28px 40px 40px; }
        .modal-close {
            position: absolute; top: 18px; right: 18px; width: 40px; height: 40px;
            border: 1.5px solid var(--border); background: var(--white); cursor: pointer;
            display: flex; align-items: center; justify-content: center; border-radius: 50%;
            font-size: 20px; color: var(--grey); transition: all .25s; line-height: 1;
        }
        .modal-close:hover { border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }

        .modal-price {
            display: flex; align-items: baseline; gap: 10px; margin-bottom: 24px;
            padding-bottom: 24px; border-bottom: 1px solid var(--border);
        }
        .modal-price .amt {
            font-family: var(--font-display); font-size: 44px; font-weight: 800;
            color: var(--black); letter-spacing: -.02em; line-height: 1;
        }
        .modal-price .amt .cur { font-size: .5em; vertical-align: top; color: var(--gold); }
        .modal-price .amt-old {
            font-family: var(--font-display); font-size: 26px; font-weight: 700;
            color: rgba(0,0,0,.32); text-decoration: line-through;
            text-decoration-color: var(--gold);
        }
        .modal-price .amt-old .cur { font-size: .7em; }
        .modal-price .per { font-family: var(--font-mono); font-size: 12px; color: var(--grey); text-transform: uppercase; letter-spacing: .1em; }
        .modal-promo {
            border: 1px solid rgba(201,168,76,.45); background: rgba(201,168,76,.08);
            border-left: 3px solid var(--gold); padding: 16px 18px; margin-bottom: 24px;
            font-size: 14px; line-height: 1.65; color: var(--grey); text-align: justify;        }
        .modal-promo strong { color: var(--black); font-weight: 600; }
        .modal-promo .mp-tag {
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
            text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 8px;
        }

        .modal-sub {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em;
            text-transform: uppercase; color: var(--gold); margin: 0 0 16px;
        }
        .modal-benefits { list-style: none; margin: 0 0 28px; }
        .modal-benefits li {
            position: relative; padding-left: 26px; margin-bottom: 12px;
            font-size: 14px; color: var(--black); line-height: 1.5;
        }
        .modal-benefits li::before {
            content: '→'; position: absolute; left: 0; top: 0;
            color: var(--gold); font-family: var(--font-mono);
        }

        .pay-box { background: var(--grey-light); padding: 24px; margin-bottom: 20px; }
        .pay-label {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--black); font-weight: 700;
            margin: 26px 0 10px; padding-left: 12px; border-left: 3px solid var(--gold);
        }
        .pay-label-hl { color: #d92d20; }
        .pay-ref-note {
            font-size: 13px; color: #d92d20; line-height: 1.6; margin: 2px 0 18px;
            padding: 12px 16px; background: rgba(217,45,32,.07); border-left: 3px solid #d92d20;
            text-align: justify;
        }
        .pay-ref-code { color: #d92d20; font-weight: 700; letter-spacing: .05em; }
        .pay-note {
            font-size: 13px; color: var(--grey); line-height: 1.6; margin-bottom: 20px;
            padding: 12px 16px; background: var(--gold-pale); border-left: 3px solid var(--gold);
            text-align: justify;        }
        .pay-row {
            display: flex; justify-content: space-between; align-items: center; gap: 16px;
            padding: 12px 0; border-bottom: 1px solid var(--border);
        }
        .pay-row:last-child { border-bottom: none; }
        .pay-k {
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
            text-transform: uppercase; color: var(--grey); flex-shrink: 0;
        }
        .pay-v { font-size: 14px; color: var(--black); font-weight: 500; text-align: right; }
        .pay-v.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; }
        .copy-btn {
            margin-left: 10px; padding: 3px 9px; font-family: var(--font-mono); font-size: 10px;
            letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
            background: var(--white); border: 1px solid var(--border); color: var(--gold);
            transition: all .2s; vertical-align: middle;
        }
        .copy-btn:hover { border-color: var(--gold); }
        .copy-btn.done { color: #2e9e5b; border-color: #2e9e5b; }
        .modal-mail {
            display: inline-block; width: 100%; box-sizing: border-box; text-align: center;
            font-family: var(--font-display); font-size: 13px; font-weight: 700;
            letter-spacing: .12em; text-transform: uppercase; padding: 16px 32px;
            background: var(--gold); color: var(--black); text-decoration: none;
            border: 2px solid var(--gold); transition: all .3s;
        }
        .modal-mail:hover { background: transparent; color: var(--gold); }
        @media (max-width: 480px) {
            .modal-head { padding: 32px 24px 0; }
            .modal-body { padding: 24px 24px 32px; }
            .pay-row { flex-direction: column; align-items: flex-start; gap: 4px; }
            .pay-v { text-align: left; }
        }

        /* ── MODALES TEXTE LÉGAL (confidentialité + mentions légales) ── */
        #modalPrivacy .modal, #modalLegal .modal { max-width: 660px; }
        .privacy-block { margin-bottom: 26px; }
        .privacy-block:last-child { margin-bottom: 0; }
        .privacy-block .modal-sub { margin-bottom: 9px; }
        .privacy-block p { font-size: 14px; font-weight: 300; color: var(--grey); line-height: 1.7; text-align: justify; margin: 0; }
        .privacy-block a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
        .privacy-updated { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--grey); text-transform: uppercase; }
        .cookie-text a.cookie-more { cursor: pointer; }

        /* ── FULLSCREEN MINDMAP MODAL ── */
        .fs-modal {
            position: fixed; inset: 0; z-index: 3000;
            background: #050709; overflow-y: auto; overscroll-behavior: contain;
            opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
        }
        .fs-modal.open { opacity: 1; visibility: visible; }
        .fs-modal-bar {
            position: sticky; top: 0; z-index: 3100;
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 20px; background: rgba(5,7,9,.85); backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(255,255,255,.06);
        }
        .fs-modal-bar .fs-brand {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
            text-transform: uppercase; color: #606880;
        }
        .fs-modal-close {
            display: inline-flex; align-items: center; gap: 8px;
            font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
            text-transform: uppercase; cursor: pointer; color: #dde4f0;
            background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
            padding: 9px 16px; border-radius: 6px; transition: all .25s;
        }
        .fs-modal-close:hover { background: rgba(255,255,255,.14); border-color: #f0d882; color: #f0d882; }
        .fs-loading {
            color: #606880; text-align: center; padding: 120px 20px;
            font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
        }

        /* Trigger button (structure section) */
        .mm-trigger-wrap { text-align: center; margin-top: 56px; }
        .mm-trigger {
            display: inline-flex; align-items: center; gap: 12px;
            font-family: var(--font-display); font-size: 13px; font-weight: 700;
            letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
            padding: 18px 40px; background: var(--black); color: var(--white);
            text-decoration: none; border: 2px solid var(--black); transition: all .3s;
        }
        .mm-trigger:hover { background: var(--gold); border-color: var(--gold); color: var(--black); transform: translateY(-2px); }
        .mm-trigger svg { width: 18px; height: 18px; }

        /* ── LANGUAGE SWITCHER (top-right) ── */
        .lang-switch {
            position: fixed; top: 16px; right: 16px; z-index: 1500;
            font-family: var(--font-mono);
        }
        .flag-svg {
            width: 22px; height: 14px; border-radius: 2px; display: block;
            overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex-shrink: 0;
        }
        .lang-current {
            display: flex; align-items: center; gap: 8px; cursor: pointer;
            background: rgba(5,5,8,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,.2); color: #fff;
            padding: 7px 12px; border-radius: 999px; font-size: 12px;
            letter-spacing: .08em; transition: border-color .25s, background .25s;
        }
        .lang-current:hover { border-color: var(--gold); }
        .lang-name { font-weight: 700; }
        .lang-caret { width: 11px; height: 11px; opacity: .8; transition: transform .25s; }
        .lang-switch.open .lang-caret { transform: rotate(180deg); }
        .lang-list {
            position: absolute; top: calc(100% + 8px); right: 0; min-width: 158px;
            list-style: none; margin: 0; padding: 6px;
            background: rgba(10,10,14,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
            box-shadow: 0 24px 60px rgba(0,0,0,.45);
            opacity: 0; visibility: hidden; transform: translateY(-6px);
            transition: opacity .25s, transform .25s, visibility .25s;
        }
        .lang-switch.open .lang-list { opacity: 1; visibility: visible; transform: none; }
        .lang-switch.lang-switch--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
        .lang-list li { border-radius: 7px; }
        /* Toute la ligne est cliquable : le lien remplit le <li>, flag + nom sur une seule ligne */
        .lang-list a {
            display: flex; align-items: center; gap: 10px; width: 100%;
            padding: 10px 14px; border-radius: 7px;
            color: #cfd3dc; font-size: 13px; letter-spacing: .02em; font-weight: 600;
            text-decoration: none; white-space: nowrap; cursor: pointer;
            transition: background .2s, color .2s;
        }
        .lang-list a:hover, .lang-list a:focus-visible { background: rgba(255,255,255,.08); color: #fff; outline: none; }
        .lang-list li.active a { color: var(--gold); }
        .lang-list li.active a:hover { color: var(--gold-light); }
        /* Reserve top-right room so the nav CTA never sits under the switcher */
        @media (min-width: 901px) { .nav-inner { padding-right: 124px; } }
        @media (max-width: 900px) { .lang-switch { top: 16px; right: 70px; } }

/* ============================================================
   PAGES DE CONTENU (adhésion, don, contact, légal) — refactor multi-pages
   ============================================================ */
.contentpage { background: var(--white); padding: calc(var(--nav-h) + 60px) 0 96px; min-height: 72vh; }
.contentpage-inner { width: min(760px, 100% - 48px); margin: 0 auto; }
.contentpage .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 14px; }
.contentpage h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px); font-weight: 800; color: var(--black); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 18px; }
.contentpage .intro { font-size: 17px; font-weight: 300; color: var(--grey); line-height: 1.7; text-align: justify; margin-bottom: 40px; }
.contentpage .cp-body { }
.contentpage .modal-price { margin-top: 8px; }
.contentpage .back-home { display: inline-flex; align-items: center; gap: 8px; margin-top: 44px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--grey); text-decoration: none; transition: color .25s; }
.contentpage .back-home:hover { color: var(--gold); }
.contentpage .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 8px; }
.contentpage .contact-card { border: 1px solid var(--border); padding: 22px 24px; }
.contentpage .contact-card .modal-sub { margin-bottom: 8px; }
.contentpage .contact-card a { color: var(--gold); text-decoration: none; font-weight: 500; word-break: break-word; }
.contentpage .contact-card p { font-size: 14px; color: var(--grey); line-height: 1.6; }
@media (max-width: 600px) { .contentpage .contact-grid { grid-template-columns: 1fr; } }

/* Barre de nav toujours solide sur les pages claires (sinon texte blanc sur fond blanc) */
body.solid-nav #navbar { transform: translateY(0); }

/* Page Structure (schéma) : dégager la barre de nav fixe au-dessus du mind-map */
.mm-page { padding-top: var(--nav-h); background: #050709; }

/* ============================== PAGE PARCOURS (« Comment ça marche ») ============================== */
.guide { background: var(--white); color: var(--black); }
.guide-wrap { width: min(1100px, 100% - 48px); margin: 0 auto; }
.guide-wrap--narrow { width: min(760px, 100% - 48px); }
.guide-sec { padding: clamp(48px, 8vw, 92px) 0; }
.guide .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 16px; }

/* Hero */
.guide-hero {
    position: relative; overflow: hidden;
    padding: calc(var(--nav-h) + clamp(40px, 7vw, 80px)) 0 clamp(40px, 7vw, 72px);
    background:
        radial-gradient(820px 420px at 82% -12%, var(--gold-pale), transparent 62%),
        linear-gradient(180deg, #fbfaf7, var(--white));
    border-bottom: 1px solid var(--border);
}
.guide-hero h1 {
    font-family: var(--font-display); font-weight: 800; line-height: 1.06; letter-spacing: -.02em;
    font-size: clamp(30px, 5.2vw, 52px); color: var(--black); max-width: 16ch; overflow-wrap: break-word; margin: 0 0 18px;
}
.guide-lead { font-size: clamp(16px, 2vw, 18px); font-weight: 300; color: var(--grey); line-height: 1.7; max-width: 60ch; text-align: justify; margin: 0 0 28px; }

.guide-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.gbtn {
    --b: var(--gold);
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    padding: 15px 26px; border-radius: 2px; border: 2px solid var(--b); transition: all .28s ease; white-space: nowrap;
}
.gbtn--primary { background: var(--gold); color: var(--black); }
.gbtn--primary:hover { background: transparent; color: var(--black); border-color: var(--black); transform: translateY(-2px); }
.gbtn--ghost { background: transparent; color: var(--black); border-color: var(--border); }
.gbtn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.gbtn--ghost-dark { color: #fff; border-color: rgba(255,255,255,.35); }
.gbtn--ghost-dark:hover { border-color: var(--gold-light); color: var(--gold-light); }
.gbtn--link { border: 0; padding: 15px 6px; color: var(--grey); }
.gbtn--link:hover { color: var(--gold); transform: translateX(3px); }

/* En-tête de section */
.guide-head { max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 44px); }
.guide-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.6vw, 36px); line-height: 1.12; color: var(--black); letter-spacing: -.01em; margin: 0 0 12px; overflow-wrap: break-word; }
.guide-head p { font-size: 16px; font-weight: 300; color: var(--grey); line-height: 1.65; text-align: justify; margin: 0; }

/* Avantages */
.guide-adv { background: linear-gradient(180deg, var(--white), #faf9f6); border-block: 1px solid var(--border); }
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.adv-card { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 26px 24px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.adv-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -26px rgba(20,18,12,.4); border-color: var(--gold); }
.adv-ic { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--gold-pale); color: var(--gold); margin-bottom: 16px; }
.adv-ic svg { width: 26px; height: 26px; }
.adv-card:hover .adv-ic { background: var(--gold); color: var(--white); }
.adv-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--black); margin: 0 0 8px; }
.adv-card p { font-size: 14.5px; font-weight: 300; color: var(--grey); line-height: 1.6; text-align: justify; margin: 0; }

/* Frise / timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--gold), var(--gold-pale)); }
.tl-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 30px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-marker { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 2px solid var(--gold); display: grid; place-items: center; }
.tl-marker::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.tl-step.visible .tl-marker::after { animation: tlpulse 2.4s ease-out .3s 1; }
@keyframes tlpulse { 0% { opacity: .5; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.3); } }
.tl-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--gold); }
.tl-card { background: var(--white); border: 1px solid var(--border); border-radius: 5px; padding: 24px 26px; transition: box-shadow .3s ease, border-color .3s ease; }
.tl-card:hover { box-shadow: 0 20px 44px -30px rgba(20,18,12,.45); border-color: var(--gold); }
.tl-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--gold-pale); color: var(--gold); margin-bottom: 12px; }
.tl-ic svg { width: 22px; height: 22px; }
.tl-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--black); margin: 0 0 10px; }
.tl-card p { font-size: 15px; font-weight: 300; color: var(--grey); line-height: 1.65; text-align: justify; margin: 0; }
.tl-card p strong { font-weight: 600; color: var(--black); }
.tl-variant { margin-top: 12px !important; padding: 11px 15px; background: var(--gold-pale); border-left: 3px solid var(--gold); font-size: 14px; color: #6a5a2e; border-radius: 0 3px 3px 0; }
.tl-card-fig { margin: 18px 0 0; text-align: center; }
.tl-card-fig img { width: min(380px, 100%); height: auto; border-radius: 10px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); }
.tl-card-fig figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--grey); margin-top: 12px; }

/* Bandeau CTA intermédiaire (accent sombre de marque) */
.guide-midcta { background: #090e16; color: #fff; padding: clamp(44px, 7vw, 72px) 0; text-align: center; }
.guide-midcta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.6vw, 34px); margin: 0 0 12px; color: #fff; }
.guide-midcta p { color: rgba(255,255,255,.72); font-size: 16px; font-weight: 300; margin: 0 0 26px; }
.guide-midcta .guide-cta-row { justify-content: center; }
.guide-midcta .gbtn--primary:hover { color: #fff; border-color: var(--gold-light); }

/* FAQ */
.guide-faq { background: #faf9f6; }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--black); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }
.faq-chev { position: relative; flex: none; width: 16px; height: 16px; }
.faq-chev::before, .faq-chev::after { content: ''; position: absolute; top: 7px; left: 0; width: 16px; height: 2px; background: var(--gold); transition: transform .3s ease; }
.faq-chev::after { transform: rotate(90deg); }
.faq-item[open] .faq-chev::after { transform: rotate(0); }
.faq-a { overflow: hidden; }
.faq-a p { font-size: 15px; font-weight: 300; color: var(--grey); line-height: 1.7; text-align: justify; margin: 0 0 20px; max-width: 68ch; }
.faq-item[open] .faq-a { animation: faqopen .35s ease; }
@keyframes faqopen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Final */
.guide-final h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); color: var(--black); margin: 0 0 14px; }

/* Responsive */
@media (max-width: 860px) { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    .adv-grid { grid-template-columns: 1fr; }
    .tl-step { grid-template-columns: 44px 1fr; gap: 16px; }
    .timeline::before { left: 21px; }
    .tl-marker { width: 44px; height: 44px; }
    .tl-num { font-size: 17px; }
    .gbtn { flex: 1 1 auto; justify-content: center; }
}

/* ── Carte d'illustration animée (parcours) : flottement 3D + hologramme + scan + halo ── */
.card3d-wrap { perspective: 1200px; display: inline-block; max-width: 100%; }
.card3d {
    position: relative; width: min(380px, 100%); border-radius: 14px; overflow: hidden;
    transform-style: preserve-3d; animation: card3dFloat 6s ease-in-out infinite;
    box-shadow: 0 24px 60px -12px rgba(5,8,16,.55), 0 0 40px rgba(0,212,255,.10);
    transition: box-shadow .35s ease;
}
.card3d:hover { box-shadow: 0 34px 82px -16px rgba(5,8,16,.72), 0 0 64px rgba(0,212,255,.22); }
.card3d img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: none; }
@keyframes card3dFloat {
    0%, 100% { transform: rotateX(2deg) rotateY(-2deg) translateY(0); }
    33% { transform: rotateX(-1deg) rotateY(3deg) translateY(-6px); }
    66% { transform: rotateX(3deg) rotateY(-1deg) translateY(-3px); }
}
.card3d-holo, .card3d-scan, .card3d-border { position: absolute; inset: 0; pointer-events: none; border-radius: 14px; }
.card3d-holo {
    background: linear-gradient(135deg, transparent 0%, rgba(0,212,255,.05) 25%, rgba(200,168,75,.09) 50%, rgba(0,212,255,.05) 75%, transparent 100%);
    background-size: 200% 200%; animation: card3dHolo 4s linear infinite; mix-blend-mode: screen;
}
@keyframes card3dHolo { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } }
.card3d-scan { overflow: hidden; }
.card3d-scan::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,.55), transparent);
    animation: card3dScan 3.2s linear infinite;
}
@keyframes card3dScan { 0% { top: -4px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.card3d-border { border: 1px solid rgba(0,212,255,.18); box-shadow: inset 0 0 30px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) {
    .card3d { animation: none; }
    .card3d-holo, .card3d-scan::before { animation: none; opacity: .4; }
}

/* ============================== PAGE RÉSULTATS (« Transparence ») ============================== */
.res { background: #faf8f3; color: var(--black); }
.res-wrap { width: min(1180px, 100% - 48px); margin: 0 auto; }
.res-sec { padding: clamp(52px, 8vw, 100px) 0; }
.res .eyebrow, .res-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; }

/* ---- HERO (bandeau sombre dashboard) ---- */
.res-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(1100px 520px at 78% -8%, rgba(201,168,76,.16), transparent 60%),
        radial-gradient(900px 500px at 12% 6%, rgba(63,167,160,.12), transparent 60%),
        linear-gradient(160deg, #0c1733 0%, #0a1228 55%, #070d1d 100%);
    color: #fff;
    padding: calc(var(--nav-h) + clamp(40px, 6vw, 72px)) 0 clamp(48px, 7vw, 84px);
}
.res-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 46px 46px; mask-image: radial-gradient(80% 80% at 50% 0%, #000 30%, transparent 78%);
}
.res-hero > .res-wrap { position: relative; z-index: 1; }
.res-hero h1 {
    font-family: var(--font-display); font-weight: 800; line-height: 1.04;
    font-size: clamp(30px, 5.4vw, 60px); letter-spacing: -.02em; max-width: 16ch;
    background: linear-gradient(180deg, #fff 55%, #d7c39a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.res-lead { margin-top: 22px; max-width: 60ch; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.7; color: rgba(255,255,255,.74); font-weight: 300; text-align: justify; }
.res-updated { margin-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.5); }
.res-updated strong { color: var(--gold-light); font-weight: 400; }
.res-live { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-light); }
.res-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fd0a0; box-shadow: 0 0 0 0 rgba(95,208,160,.7); animation: resPulse 2s infinite; }
@keyframes resPulse { 0% { box-shadow: 0 0 0 0 rgba(95,208,160,.6); } 70% { box-shadow: 0 0 0 9px rgba(95,208,160,0); } 100% { box-shadow: 0 0 0 0 rgba(95,208,160,0); } }

/* ---- « Depuis X jours » (bandeau) ---- */
.res-since {
    margin-top: clamp(30px, 4.5vw, 48px); display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 20px 26px; border-radius: 16px;
    background: linear-gradient(110deg, rgba(201,168,76,.16), rgba(201,168,76,.04));
    border: 1px solid rgba(201,168,76,.28);
}
.res-since-ic { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(201,168,76,.18); color: var(--gold-light); flex-shrink: 0; }
.res-since-ic svg { width: 26px; height: 26px; }
.res-since-tick { animation: resTick 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes resTick { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.res-since-main { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.res-since-n { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); line-height: 1; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-since-u { color: var(--gold-light); font-size: .62em; }
.res-since-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.res-since-meta { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55); }
.res-since-meta strong { color: var(--gold-light); font-weight: 400; }

/* ---- KPI tiles ---- */
.res-kpis { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.res-kpi {
    position: relative; padding: 26px 24px 24px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px);
    overflow: hidden;
}
.res-kpi::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--gold), transparent); opacity: .85; }
.res-kpi--goal::after { background: linear-gradient(90deg, #3FA7A0, transparent); }
.res-kpi-ic { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; align-items: center; justify-content: center; background: rgba(201,168,76,.14); color: var(--gold-light); margin-bottom: 16px; }
.res-kpi--goal .res-kpi-ic { background: rgba(63,167,160,.16); color: #7fd6cf; }
.res-kpi-ic svg { width: 20px; height: 20px; }
.res-kpi-n { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3.2vw, 34px); line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-kpi-goal { font-size: .5em; font-weight: 600; color: rgba(255,255,255,.45); margin-left: 4px; letter-spacing: 0; }
.res-kpi-l { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; color: #fff; }
.res-kpi-s { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: rgba(255,255,255,.5); }

/* ---- Goal bar ---- */
.res-goal { margin-top: 22px; padding: 24px 26px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.res-goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.res-goal-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); }
.res-goal-pct { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.res-goal-track { position: relative; height: 12px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.res-goal-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, #b8932f, var(--gold-light)); transition: width 1.4s cubic-bezier(.22,1,.36,1); }
.res-goal-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-100%); animation: resShine 2.6s 1.2s infinite; }
@keyframes resShine { to { transform: translateX(180%); } }
.res-goal.visible .res-goal-fill { width: var(--w); }
.res-goal-flag { position: absolute; top: -4px; left: 0; width: 0; transition: width 1.4s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.res-goal.visible .res-goal-flag { width: var(--w); }
.res-goal-flag span { position: absolute; right: 0; transform: translateX(50%); top: -26px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #07101f; background: var(--gold-light); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.res-goal-flag span::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(45deg); width: 7px; height: 7px; background: var(--gold-light); }
.res-goal-note { margin-top: 14px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.6); }
.res-goal-note strong { color: #fff; font-weight: 600; }

/* ---- Section heads (light) ---- */
.res-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 46px); }
.res-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.08; letter-spacing: -.02em; color: var(--navy); }
.res-head p { margin-top: 14px; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.65; color: var(--grey); font-weight: 300; }

/* ---- Répartition (split bar) ---- */
.res-split-sec { background: #faf8f3; }
.res-split { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: 0 18px 50px -28px rgba(13,27,62,.25); }
.res-split-bar { display: flex; height: 56px; border-radius: 12px; overflow: hidden; background: var(--grey-light); }
.res-split-seg { display: flex; align-items: center; justify-content: center; width: 0; transition: width 1.3s cubic-bezier(.22,1,.36,1); position: relative; min-width: 0; }
.res-split.visible .res-split-seg { width: var(--w); }
.res-split-seg span { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #fff; opacity: 0; transition: opacity .5s .9s; white-space: nowrap; }
.res-split.visible .res-split-seg span { opacity: 1; }
.res-split-adh { background: linear-gradient(120deg, #c9a84c, #e3c878); }
.res-split-don { background: linear-gradient(120deg, #3FA7A0, #5fc3bc); }
.res-split-legend { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 20px; }
.res-leg { display: flex; align-items: center; gap: 10px; }
.res-leg-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.res-leg-adh { background: #c9a84c; } .res-leg-don { background: #3FA7A0; }
.res-leg-k { font-size: 14px; color: var(--grey); }
.res-leg-v { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---- Impact cards ---- */
.res-impact-sec { background: #fff; }
.res-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.res-impact {
    position: relative; padding: 32px 28px 26px; border-radius: 20px; overflow: hidden;
    background: linear-gradient(180deg, #fbfaf6, #fff); border: 1px solid var(--border);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.res-impact:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(13,27,62,.35); border-color: rgba(201,168,76,.5); }
.res-impact-ic { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(201,168,76,.12); color: var(--gold); margin-bottom: 20px; }
.res-impact-ic svg { width: 30px; height: 30px; }
.res-impact-up { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.res-impact-big { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.res-impact-big > .res-count { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 52px); line-height: 1; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.res-impact-unit { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 2vw, 21px); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.res-impact-name { margin-top: 14px; font-size: 13px; font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); font-weight: 700; }
.res-impact-desc { margin-top: 10px; font-size: 14.5px; line-height: 1.62; color: var(--grey); text-align: justify; }
.res-impact-foot { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; }
.res-impact-rate, .res-impact-rate2 { font-family: var(--font-mono); font-size: 12px; color: var(--grey); }
.res-impact-rate strong, .res-impact-rate2 strong { color: var(--navy); font-weight: 700; }
.res-impact-rate2 { color: #9aa0aa; }
/* Icônes animées */
.res-impact:hover .ix-w { animation: ixWrite 1.1s ease forwards; }
.ix-w { stroke-dasharray: 40; stroke-dashoffset: 0; }
@keyframes ixWrite { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.res-impact:hover .ix-k { animation: ixCheck .7s ease forwards; }
.ix-k { stroke-dasharray: 26; }
@keyframes ixCheck { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
.res-impact:hover .ix-spin { transform-origin: 24px 24px; animation: ixSpin 6s linear infinite; }
@keyframes ixSpin { to { transform: rotate(360deg); } }

/* ---- Charts ---- */
.res-charts-sec { background: #faf8f3; }
.res-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.res-chart { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 22px 22px 12px; box-shadow: 0 18px 50px -30px rgba(13,27,62,.3); }
.res-chart-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.res-chart-title { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--navy); }
.res-chart-dot { width: 11px; height: 11px; border-radius: 50%; }
.res-chart-now { text-align: right; font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.res-chart-now small { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-top: 4px; }
.res-chart-plot { width: 100%; }
.res-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.res-grid { stroke: rgba(13,27,62,.08); stroke-width: 1; }
.res-axis-y { fill: #9aa0aa; font-family: var(--font-mono); font-size: 12px; text-anchor: end; }
.res-axis-x { fill: #9aa0aa; font-family: var(--font-mono); font-size: 12px; text-anchor: middle; }
.res-area { opacity: 0; }
.res-chart.visible .res-area { animation: resFade 1s .4s ease forwards; }
@keyframes resFade { to { opacity: 1; } }
.res-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.res-chart.visible .res-line { animation: resDraw 1.5s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes resDraw { to { stroke-dashoffset: 0; } }
.res-dot { opacity: 0; transform-box: fill-box; transform-origin: center; }
.res-chart.visible .res-dot { animation: resPop .45s var(--d, 1s) cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes resPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.res-dot--live { filter: drop-shadow(0 0 0 rgba(201,168,76,.6)); }
.res-chart.visible .res-dot--live { animation: resPop .45s var(--d,1s) cubic-bezier(.34,1.56,.64,1) forwards, resLive 2.2s 1.6s infinite; }
@keyframes resLive { 0% { filter: drop-shadow(0 0 0 rgba(201,168,76,.55)); } 70% { filter: drop-shadow(0 0 7px rgba(201,168,76,0)); } 100% { filter: drop-shadow(0 0 0 rgba(201,168,76,0)); } }
.res-empty { text-align: center; padding: 48px 24px; color: var(--grey); font-size: 16px; background: #fff; border: 1px dashed var(--border); border-radius: 18px; }
.res-note { margin-top: 26px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: #9aa0aa; max-width: 70ch; }

/* ---- CTA ---- */
.res-cta { background: linear-gradient(160deg, #0c1733, #070d1d); color: #fff; padding: clamp(52px, 8vw, 92px) 0; text-align: center; }
.res-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 4vw, 42px); letter-spacing: -.02em; }
.res-cta p { margin: 16px auto 0; max-width: 52ch; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.6; }
.res-cta-row { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .res-kpis { grid-template-columns: repeat(2, 1fr); }
    .res-impact-grid { grid-template-columns: 1fr; }
    .res-charts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .res-kpis { grid-template-columns: 1fr; }
    .res-chart-now { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .res-goal-fill, .res-goal-flag, .res-split-seg { transition: none; }
    .res-goal-fill::after, .res-live-dot { animation: none; }
    .res-line { stroke-dashoffset: 0; }
    .res-area, .res-dot, .res-split-seg span { opacity: 1; }
    .res-dot { transform: none; }
}

/* ============================== FORMULAIRE DE CONTACT ============================== */
.cform { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: clamp(24px, 4vw, 40px); margin-bottom: 40px; box-shadow: 0 22px 60px -34px rgba(13,27,62,.3); }
.cform-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 3vw, 26px); color: var(--navy); letter-spacing: -.01em; }
.cform-intro { margin-top: 8px; font-size: 14px; color: var(--grey); }
/* Pot de miel : invisible et hors flux, mais présent pour les robots. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cf-field--full { grid-column: 1 / -1; }
.cf-field label { font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: .01em; }
.cf-opt { font-weight: 400; color: #9aa0aa; font-size: 12px; }
.cf-field input, .cf-field textarea {
    width: 100%; padding: 13px 15px; font-family: var(--font-body); font-size: 15px; color: var(--black);
    background: #faf9f6; border: 1.5px solid var(--border); border-radius: 11px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.cf-field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(201,168,76,.14); }
.cf-field input.cf-invalid, .cf-field textarea.cf-invalid { border-color: #d9534f; background: #fdf6f6; }
.cf-err { font-size: 12px; color: #c0392b; min-height: 0; }
.cf-err:empty { display: none; }
.cform-foot { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cform-btn {
    position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 15px 32px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: .01em;
    color: var(--black); background: var(--gold); border: 2px solid var(--gold); border-radius: 12px; transition: all .25s;
}
.cform-btn:hover { background: transparent; color: var(--navy); border-color: var(--navy); transform: translateY(-2px); }
.cform-btn:disabled { opacity: .7; cursor: default; transform: none; }
.cform-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(0,0,0,.25); border-top-color: var(--black); border-radius: 50%; animation: cfSpin .7s linear infinite; }
.cform--sending .cform-spinner { display: inline-block; }
@keyframes cfSpin { to { transform: rotate(360deg); } }
.cform-status { font-size: 14px; font-weight: 500; }
.cform-status--pending { color: var(--grey); }
.cform-status--error { color: #c0392b; }
.cform-ok {
    width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 14px;
    background: linear-gradient(120deg, rgba(63,167,160,.12), rgba(63,167,160,.04)); border: 1px solid rgba(63,167,160,.35);
    animation: cfOkIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cfOkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cform-ok-ic { flex-shrink: 0; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #3FA7A0; color: #fff; }
.cform-ok-ic svg { width: 26px; height: 26px; }
.cform-ok-ic svg path { stroke-dasharray: 20; animation: cfCheck .5s .25s ease both; }
@keyframes cfCheck { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
.cform-ok p { font-size: 15px; line-height: 1.55; color: var(--navy); font-weight: 500; }
@media (max-width: 600px) { .cform-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cform-spinner { animation-duration: 1.4s; } .cform-ok, .cform-ok-ic svg path { animation: none; } }

/* ============================== ENCART « payé mais rien reçu » (pages claires) ============================== */
.cp-alert { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 34px; padding: 20px 24px; border-radius: 14px;
    background: linear-gradient(110deg, rgba(201,168,76,.14), rgba(201,168,76,.04)); border: 1px solid rgba(201,168,76,.4); }
.cp-alert-ic { flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(201,168,76,.2); color: #b8860b; }
.cp-alert-ic svg { width: 24px; height: 24px; }
.cp-alert-body { flex: 1 1 280px; min-width: 0; }
.cp-alert-body strong { display: block; font-size: 15px; color: var(--navy); margin-bottom: 4px; }
.cp-alert-body p { font-size: 14px; line-height: 1.55; color: var(--grey); }
.cp-alert-btn { flex-shrink: 0; display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 10px; background: var(--navy); color: #fff;
    font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all .25s; }
.cp-alert-btn:hover { background: var(--gold); color: var(--black); transform: translateY(-2px); }

/* ============================== RÉSULTATS : note temps réel + encart ============================== */
.res-realtime { margin-top: 16px; max-width: 60ch; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.6); }
.res-realtime strong { color: var(--gold-light); font-weight: 600; }
.res-alert-sec { background: #faf8f3; padding: clamp(28px, 4vw, 44px) 0 0; }
.res-alert { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px;
    background: #fff; border: 1px solid rgba(201,168,76,.4); box-shadow: 0 18px 50px -32px rgba(13,27,62,.3); }
.res-alert-ic { flex-shrink: 0; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(201,168,76,.16); color: #b8860b; }
.res-alert-ic svg { width: 26px; height: 26px; }
.res-alert-body { flex: 1 1 300px; min-width: 0; }
.res-alert-body strong { display: block; font-size: 16px; color: var(--navy); margin-bottom: 5px; }
.res-alert-body p { font-size: 14px; line-height: 1.55; color: var(--grey); }
.res-alert-btn { flex-shrink: 0; display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 11px; background: var(--navy); color: #fff;
    font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all .25s; }
.res-alert-btn:hover { background: var(--gold); color: var(--black); transform: translateY(-2px); }

/* ============================== PARCOURS : section « rien reçu » (#probleme) ============================== */
.guide-fix { scroll-margin-top: 88px; background: #faf8f3; }
.fix-card { background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--gold); border-radius: 18px; padding: clamp(28px, 4.5vw, 46px); box-shadow: 0 26px 70px -40px rgba(13,27,62,.4); }
.fix-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #b8860b; margin-bottom: 16px; }
.fix-warn { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(201,168,76,.16); }
.fix-warn svg { width: 18px; height: 18px; }
.fix-card h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.6vw, 36px); line-height: 1.08; letter-spacing: -.02em; color: var(--navy); }
.fix-lead { margin-top: 16px; font-size: clamp(15px, 1.9vw, 18px); line-height: 1.7; color: #3a4150; text-align: justify; }
.fix-sub { margin-top: 30px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); font-weight: 700; }
.fix-p { margin-top: 10px; font-size: 15.5px; line-height: 1.7; color: var(--grey); text-align: justify; }
.fix-p a, .fix-do a { color: #b8860b; font-weight: 600; }
.fix-p strong, .fix-delay strong { color: var(--navy); }

/* Tableau de bord temps réel */
.recon { margin-top: 24px; padding: 22px; border-radius: 16px; background: linear-gradient(160deg, #0c1733, #0a1228); color: #fff; }
.recon-top { display: flex; justify-content: flex-end; }
.recon-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
.recon-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fd0a0; box-shadow: 0 0 0 0 rgba(95,208,160,.7); animation: resPulse 2s infinite; }
.recon-intro { margin: 6px 0 18px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.8); }
.recon-intro strong { color: #fff; font-weight: 700; }
.recon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.recon-tile { padding: 16px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.recon-tile--ok { background: rgba(63,167,160,.12); border-color: rgba(63,167,160,.32); }
.recon-tile--alert { background: rgba(201,168,76,.14); border-color: rgba(201,168,76,.42); }
.recon-n { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 4vw, 34px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.recon-tile--alert .recon-n { color: var(--gold-light); }
.recon-l { display: block; margin-top: 8px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.62); }
.recon-note { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,.5); }

/* Actions : téléphone + bouton contact */
.fix-actions { margin-top: 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.fix-phone { display: flex; flex-direction: column; gap: 2px; }
.fix-phone-t { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.fix-phone-x { font-size: 12.5px; color: var(--grey); }
.fix-phone-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 3vw, 26px); color: var(--navy); text-decoration: none; letter-spacing: .01em; }
.fix-phone-num:hover { color: #b8860b; }
.fix-cta { margin-left: auto; }
.fix-delay { margin-top: 26px; padding: 18px 22px; border-radius: 12px; background: #fbf7ea; border: 1px solid rgba(201,168,76,.3); }
.fix-delay-t { display: block; font-weight: 700; font-size: 13px; color: #9a7a1e; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.fix-delay p { font-size: 14px; line-height: 1.6; color: #5a4e2e; }
@media (max-width: 620px) {
    .recon-grid { grid-template-columns: 1fr 1fr; }
    .fix-cta { margin-left: 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .recon-live-dot { animation: none; } }

/* Indicatif téléphonique (liste box drapeau + indicatif) */
.cf-phone { display: flex; gap: 10px; align-items: stretch; }
.cf-code {
    flex: 0 0 auto; width: auto; max-width: 190px; min-width: 0;
    padding: 13px 34px 13px 13px; font-family: var(--font-body); font-size: 15px; color: var(--black);
    background: #faf9f6; border: 1.5px solid var(--border); border-radius: 11px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    text-overflow: ellipsis;
}
.cf-code:focus { outline: none; border-color: var(--gold); background-color: #fff; box-shadow: 0 0 0 4px rgba(201,168,76,.14); }
.cf-phone input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 420px) { .cf-code { max-width: 132px; padding-right: 28px; } }

/* Page Contact : formulaire pleine largeur + cartes en dessous (responsive, hors pages légales) */
.contentpage--wide .contentpage-inner { width: min(1060px, 100% - 48px); }
.contentpage--wide .intro { max-width: 68ch; }
.contentpage--wide .contact-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 14px; }

/* ============================================================
   Modale Événement — teaser global (1×/session)
   ============================================================ */
.evt-modal { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; padding: 20px; }
.evt-modal.show { display: flex; }
.evt-modal-overlay { position: absolute; inset: 0; background: rgba(5,5,8,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: evtmFade .4s ease both; }
.evt-modal-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: linear-gradient(160deg, #0D1B3E 0%, #0a1230 55%, #070b1f 100%); border: 1px solid rgba(201,168,76,.35); border-radius: 18px; padding: 38px 34px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.02); color: #eef1f8; animation: evtmPop .5s cubic-bezier(.2,.7,.3,1) both; }
.evt-modal-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), transparent); opacity: .9; }
.evt-modal-glow { position: absolute; top: -40%; right: -30%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.16), transparent 70%); pointer-events: none; animation: evtmGlow 5s ease-in-out infinite; }
.evt-modal-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #cdd4e6; cursor: pointer; transition: all .25s; z-index: 2; }
.evt-modal-x:hover { background: rgba(201,168,76,.2); color: #fff; border-color: var(--gold); transform: rotate(90deg); }
.evt-modal-x svg { width: 16px; height: 16px; }
.evt-modal-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; position: relative; }
.evt-modal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: evtmBlink 1.5s ease-in-out infinite; }
.evt-modal-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 5.5vw, 30px); line-height: 1.12; color: #fff; margin: 0 0 10px; position: relative; }
.evt-modal-sub { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: #aeb6cd; margin: 0 0 20px; position: relative; }
.evt-modal-benefits { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; position: relative; }
.evt-modal-benefits li { display: flex; gap: 11px; align-items: flex-start; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: #dde2ef; }
.evt-modal-benefits svg { flex-shrink: 0; width: 19px; height: 19px; color: var(--gold); margin-top: 1px; }
.evt-modal-actions { display: grid; gap: 10px; position: relative; }
.evt-modal-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 10px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all .25s; border: 2px solid transparent; }
.evt-modal-btn--gold { background: var(--gold); color: #050508; box-shadow: 0 8px 24px rgba(201,168,76,.28); }
.evt-modal-btn--gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,168,76,.4); }
.evt-modal-btn--line { border-color: rgba(201,168,76,.55); color: var(--gold-light); }
.evt-modal-btn--line:hover { background: rgba(201,168,76,.1); border-color: var(--gold); color: #fff; }
.evt-modal-btn--ghost { color: #9aa3bd; font-size: 11px; padding: 8px; letter-spacing: .1em; }
.evt-modal-btn--ghost:hover { color: var(--gold-light); }
.evt-modal-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: #7b859f; text-align: center; margin: 16px 0 0; position: relative; }
body.evt-modal-lock { overflow: hidden; }
@keyframes evtmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes evtmPop { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes evtmGlow { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes evtmBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (max-width: 420px) { .evt-modal-card { padding: 32px 22px 24px; } }
@media (prefers-reduced-motion: reduce) { .evt-modal-overlay, .evt-modal-card, .evt-modal-glow, .evt-modal-dot { animation: none !important; } }