/* ============================================
           CHARTE GRAPHIQUE COEUR DU FERRET
           Inspiree des documents officiels de l'association
           ============================================ */
        :root {
            --marine: #1B3A4B;
            --marine-deep: #0F2631;
            --marine-light: #234E64;
            --or: #D4A655;
            --or-light: #E8C882;
            --or-pale: #F5E6C8;
            --sable: #F7F0E4;
            --blanc: #FDFAF5;
            --terracotta: #B5503C;
            --terracotta-hover: #9A412F;
            --vert-bassin: #3A7D6A;
            --vert-bassin-light: #4A9D85;
            --gris: #4A4A4A;
            --gris-light: #7A7A7A;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            color: var(--gris);
            background-color: var(--blanc);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
            transition: background-color 0.5s, color 0.5s;
        }
        section { transition: background 0.5s, color 0.5s; }
        h1, h2, h3, .nav-logo { font-family: 'Playfair Display', Georgia, serif; }

        /* ---- NAVIGATION ---- */
        nav {
            position: fixed; top: 0; width: 100%;
            background: var(--marine-deep);
            z-index: 1000;
            border-bottom: 2px solid var(--or);
        }
        .nav-container {
            max-width: 1200px; margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 2rem;
        }
        .nav-logo {
            display: flex; align-items: center; gap: 0.6rem;
            color: #fff; font-size: 1.2rem; font-weight: 700;
            padding: 0.8rem 0; text-decoration: none; white-space: nowrap;
        }
        .nav-logo img.logo-round {
            width: 36px; height: 36px; border-radius: 50%;
            border: 1.5px solid var(--or);
        }
        .nav-logo .logo-bar {
            display: block; width: 3px; height: 28px;
            background: var(--or); border-radius: 2px;
        }
        .nav-logo .logo-text span { color: var(--or); }
        .nav-links {
            display: flex; list-style: none; gap: 0.15rem;
            flex-wrap: wrap; justify-content: flex-end;
        }
        .nav-links a {
            color: rgba(255,255,255,0.75); text-decoration: none;
            padding: 0.5rem 0.7rem; border-radius: 6px;
            font-size: 0.82rem; font-weight: 500;
            transition: all 0.2s; white-space: nowrap;
            font-family: 'Inter', sans-serif;
        }
        .nav-links a:hover, .nav-links a.active {
            background: rgba(212,166,85,0.15); color: var(--or-light);
        }
        .burger {
            display: none; background: none; border: none;
            cursor: pointer; padding: 0.75rem;
            min-width: 44px; min-height: 44px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            z-index: 1001;
        }
        .burger span {
            display: block; width: 22px; height: 2px;
            background: var(--or); margin: 5px 0; transition: 0.3s; border-radius: 1px;
        }

        /* ---- HERO ---- */
        .hero {
            margin-top: 52px;
            background: var(--marine-deep);
            color: #fff;
            display: flex; min-height: 520px;
            position: relative; overflow: hidden;
        }
        .hero-content {
            flex: 1; display: flex; flex-direction: column;
            justify-content: center; padding: 4rem 3rem 4rem 4rem;
            position: relative; z-index: 2;
            max-width: 600px;
        }
        .hero-bar {
            width: 60px; height: 4px; background: var(--or);
            border-radius: 2px; margin-bottom: 1rem;
        }
        .hero-label {
            color: var(--or); font-family: 'Inter', sans-serif;
            font-size: 0.75rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 2.5px;
            margin-bottom: 1.5rem;
        }
        .hero h1 {
            font-size: 2.8rem; font-weight: 700;
            line-height: 1.15; margin-bottom: 1.5rem;
            letter-spacing: -0.5px;
        }
        .hero h1 span { color: var(--or); }
        .hero .subtitle {
            font-size: 1.05rem; opacity: 0.85;
            font-weight: 300; line-height: 1.8;
            margin-bottom: 2.5rem;
        }
        .hero .cta-group { display: flex; gap: 1rem; flex-wrap: wrap; }
        .hero-image {
            flex: 1; min-width: 40%;
            background: url('images/photos/phare%20cap%20Ferret.jpg') center/cover;
            position: relative;
        }
        .hero-image::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(90deg, var(--marine-deep) 0%, rgba(27,58,75,0.3) 100%);
        }

        /* ---- BOUTONS ---- */
        .btn {
            display: inline-block; padding: 0.75rem 2rem; border-radius: 4px;
            font-weight: 600; text-decoration: none; font-size: 0.9rem;
            transition: all 0.25s; cursor: pointer; border: none;
            font-family: 'Inter', sans-serif; letter-spacing: 0.3px;
        }
        .btn-primary { background: var(--or); color: var(--marine-deep); }
        .btn-primary:hover {
            background: var(--or-light); transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(212,166,85,0.3);
        }
        .btn-secondary {
            background: transparent; color: #fff;
            border: 1.5px solid rgba(255,255,255,0.4);
        }
        .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
        .btn-terracotta { background: var(--terracotta); color: #fff; }
        .btn-terracotta:hover {
            background: var(--terracotta-hover); transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(181,80,60,0.3);
        }
        .btn-vert { background: var(--marine); color: #fff; }
        .btn-vert:hover {
            background: #244f65; transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(27,58,75,0.35);
        }
        .btn .btn-icon { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        /* ---- SECTIONS ---- */
        section { padding: 5rem 2rem; }
        .container { max-width: 960px; margin: 0 auto; }
        .section-header { margin-bottom: 2.5rem; }
        .section-label {
            color: var(--or); font-family: 'Inter', sans-serif;
            font-size: 0.72rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 2.5px;
            margin-bottom: 0.5rem;
        }
        .section-title {
            font-size: 2rem; color: var(--marine);
            font-weight: 700; margin-bottom: 0.4rem;
        }
        .section-bar {
            width: 50px; height: 3px; background: var(--or);
            border-radius: 2px; margin-top: 0.8rem;
        }
        .bg-sable { background-color: var(--sable); }
        .bg-marine { background-color: var(--marine); color: #fff; }
        .bg-marine .section-title { color: #fff; }
        .bg-marine .section-label { color: var(--or-light); }
        .bg-marine-deep { background-color: var(--marine-deep); color: #fff; }
        .bg-marine-deep .section-title { color: #fff; }
        .bg-marine-deep .section-label { color: var(--or-light); }

        /* ---- ILLUSTRATIONS DE FOND SVG - ESPRIT CAP FERRET ---- */
        /* Qui sommes-nous : phare du Cap Ferret stylise */
        #qui {
            background-color: var(--blanc);
            background-image: url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.13' stroke='%231B3A4B' fill='none' stroke-linecap='round'%3E%3Crect x='140' y='80' width='20' height='120' rx='2' stroke-width='2'/%3E%3Crect x='135' y='70' width='30' height='12' rx='2' stroke-width='1.5'/%3E%3Cpath d='M150 70 L150 55 M143 58 L150 50 L157 58' stroke-width='1.5'/%3E%3Cpath d='M128 200 L172 200' stroke-width='2'/%3E%3Cpath d='M132 200 L132 210 Q150 220 168 210 L168 200' stroke-width='1'/%3E%3Cpath d='M138 120 L138 160 M162 120 L162 160' stroke-width='0.8' stroke-dasharray='4 6'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 300px 300px;
        }
        /* Objectifs : pinasse d'Arcachon stylisee */
        #objectifs {
            background-color: var(--sable);
            background-image: url("data:image/svg+xml,%3Csvg width='350' height='220' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.18' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- coque pinasse --%3E%3Cpath d='M50 120 Q55 118 90 115 L200 110 Q240 108 270 110 L290 114 Q285 122 270 124 L200 126 Q130 128 80 125 Q55 123 50 120Z' stroke='%233A7D6A' stroke-width='2.2' fill='%233A7D6A' fill-opacity='0.06'/%3E%3Cpath d='M48 118 L42 120' stroke='%233A7D6A' stroke-width='2.5'/%3E%3Cpath d='M290 114 L298 112' stroke='%233A7D6A' stroke-width='2'/%3E%3C!-- ligne de flottaison --%3E%3Cpath d='M65 122 Q130 118 200 117 Q250 116 280 118' stroke='%233A7D6A' stroke-width='0.8' stroke-dasharray='6 4'/%3E%3C!-- mat --%3E%3Cline x1='160' y1='112' x2='160' y2='38' stroke='%233A7D6A' stroke-width='2.5'/%3E%3C!-- voile latine triangulaire --%3E%3Cpath d='M160 42 L160 100 L210 88 Z' stroke='%233A7D6A' stroke-width='1.5' fill='%233A7D6A' fill-opacity='0.1'/%3E%3Cpath d='M165 50 L165 95' stroke='%233A7D6A' stroke-width='0.5' opacity='0.5'/%3E%3Cpath d='M170 56 L170 92' stroke='%233A7D6A' stroke-width='0.5' opacity='0.5'/%3E%3C!-- flamme en haut du mat --%3E%3Cpath d='M160 38 Q168 34 162 30' stroke='%23D4A655' stroke-width='1.2' fill='none'/%3E%3C!-- vagues --%3E%3Cpath d='M0 150 Q25 140 50 150 T100 150 T150 150 T200 150 T250 150 T300 150 T350 150' stroke='%231B3A4B' stroke-width='1' fill='none'/%3E%3Cpath d='M15 162 Q40 152 65 162 T115 162 T165 162 T215 162 T265 162 T315 162 T365 162' stroke='%231B3A4B' stroke-width='0.7' fill='none'/%3E%3Cpath d='M5 172 Q30 164 55 172 T105 172 T155 172 T205 172 T255 172 T305 172 T355 172' stroke='%231B3A4B' stroke-width='0.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 350px 220px;
        }
        /* Actualites : mouette et vagues du Bassin */
        #actualites {
            background-color: var(--blanc);
            background-image: url("data:image/svg+xml,%3Csvg width='250' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.12' stroke='%231B3A4B' fill='none' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M80 60 Q90 45 105 55 M80 60 Q70 45 55 55'/%3E%3Cpath d='M170 80 Q178 68 190 75 M170 80 Q162 68 150 75'/%3E%3Cpath d='M0 150 Q30 135 60 150 T120 150 T180 150 T250 150' stroke-width='1'/%3E%3Cpath d='M0 165 Q30 150 60 165 T120 165 T180 165 T250 165' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 250px 200px;
        }
        /* Actions : pinasse sur le Bassin */
        #actions {
            background-color: var(--sable);
            background-image: url("data:image/svg+xml,%3Csvg width='300' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.12' stroke='%23D4A655' fill='none' stroke-linecap='round'%3E%3Cpath d='M100 100 L100 55 M100 55 L130 70 L130 95 L100 80' stroke-width='1.2'/%3E%3Cpath d='M70 105 L140 105 L150 115 L60 115 Z' stroke-width='1.5'/%3E%3Cpath d='M0 130 Q40 118 80 130 T160 130 T240 130 T300 130' stroke-width='0.8' stroke='%231B3A4B'/%3E%3Cpath d='M0 140 Q40 128 80 140 T160 140 T240 140 T300 140' stroke-width='0.6' stroke='%231B3A4B'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 300px 200px;
        }
        /* Humour : cabane tchanquee */
        #humour {
            background-color: var(--blanc);
            background-image: url("data:image/svg+xml,%3Csvg width='250' height='250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.12' stroke='%231B3A4B' fill='none' stroke-linecap='round'%3E%3Cpath d='M105 80 L125 60 L145 80 Z' stroke-width='1.5'/%3E%3Crect x='108' y='80' width='34' height='25' stroke-width='1.2'/%3E%3Cline x1='112' y1='105' x2='112' y2='145' stroke-width='1.5'/%3E%3Cline x1='138' y1='105' x2='138' y2='145' stroke-width='1.5'/%3E%3Cline x1='108' y1='105' x2='105' y2='145' stroke-width='0.8'/%3E%3Cline x1='142' y1='105' x2='145' y2='145' stroke-width='0.8'/%3E%3Cpath d='M80 145 Q125 135 170 145' stroke-width='0.8'/%3E%3Cpath d='M75 155 Q125 145 175 155' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 250px 250px;
        }
        /* Adhesion : huitres du Bassin */
        #adhesion {
            background-color: var(--sable);
            background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.14' stroke='%23D4A655' fill='none' stroke-linecap='round'%3E%3Cellipse cx='100' cy='90' rx='30' ry='18' stroke-width='1' transform='rotate(-15 100 90)'/%3E%3Cpath d='M75 85 Q100 75 125 85' stroke-width='0.6'/%3E%3Cpath d='M78 92 Q100 82 122 92' stroke-width='0.5'/%3E%3Cellipse cx='55' cy='140' rx='20' ry='12' stroke-width='0.8' transform='rotate(10 55 140)'/%3E%3Cpath d='M38 137 Q55 128 72 137' stroke-width='0.5'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 200px 200px;
        }
        /* Contact : ancre marine */
        #contact {
            background-color: var(--blanc);
            background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.12' stroke='%231B3A4B' fill='none' stroke-linecap='round' stroke-width='1.2'%3E%3Ccircle cx='100' cy='55' r='8'/%3E%3Cline x1='100' y1='63' x2='100' y2='140'/%3E%3Cpath d='M100 140 Q100 155 85 155 L75 155' stroke-width='1.5'/%3E%3Cpath d='M100 140 Q100 155 115 155 L125 155' stroke-width='1.5'/%3E%3Cline x1='85' y1='80' x2='115' y2='80' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 200px 200px;
        }

        /* ---- QUI SOMMES-NOUS ---- */
        #qui .content-box {
            background: #fff; border-radius: 8px; padding: 2.5rem;
            box-shadow: 0 1px 15px rgba(0,0,0,0.05);
            border-left: 4px solid var(--or);
            color: var(--gris);
        }
        #qui .content-box p { margin-bottom: 1rem; font-size: 0.95rem; color: #333; }
        #qui .content-box strong { color: var(--marine); }
        .statuts-toggle {
            color: var(--marine-light); cursor: pointer; font-weight: 600;
            border: none; background: none; font-size: 0.9rem;
            padding: 0.5rem 0; text-decoration: none;
            font-family: 'Inter', sans-serif;
            border-bottom: 1.5px dashed var(--or);
        }
        .statuts-toggle:hover { color: var(--marine); }
        .statuts-full {
            display: none; margin-top: 1.5rem; padding-top: 1.5rem;
            border-top: 1px solid var(--or-pale);
        }
        .statuts-full.open { display: block; }
        .statuts-full h4 {
            color: var(--marine); margin: 1.2rem 0 0.4rem;
            font-size: 0.95rem; font-family: 'Inter', sans-serif; font-weight: 600;
        }
        .statuts-full p { font-size: 0.88rem; margin-bottom: 0.6rem; }

        /* ---- OBJECTIFS ---- */
        .objectifs-grid {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem; margin-top: 0.5rem;
        }
        .objectif-card {
            background: #fff; border-radius: 8px; padding: 2rem;
            box-shadow: 0 1px 12px rgba(0,0,0,0.05);
            border-top: 3px solid var(--vert-bassin);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .objectif-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(0,0,0,0.08);
        }
        .objectif-card h3 {
            color: var(--marine); margin-bottom: 0.6rem;
            font-size: 1.05rem;
        }
        .objectif-card p { font-size: 0.9rem; color: var(--gris); }
        .objectifs-appel {
            margin-top: 2rem; padding: 1.5rem 2.5rem;
            background: var(--marine); color: #fff;
            border-radius: 8px; text-align: center;
            font-size: 1rem; font-weight: 400;
            border-left: 4px solid var(--or);
        }
        .objectifs-appel strong { color: var(--or-light); }

        /* ---- ACTUALITES ---- */
        #actualites { text-align: center; }
        .actu-grid {
            display: grid; gap: 1.5rem; max-width: 800px; margin: 0 auto;
        }
        .actu-card {
            background: #fff; border-radius: 8px; padding: 2rem;
            box-shadow: 0 2px 20px rgba(0,0,0,0.06);
            border: 1.5px solid var(--or);
            text-align: center;
        }
        .actu-card.actu-featured {
            padding: 2.5rem;
            border-width: 2px;
        }
        .actu-card.actu-edito {
            background: linear-gradient(135deg, #fdfaf3 0%, #f7f0e4 100%);
            border: 2px solid var(--or);
            padding: 2.5rem 2rem;
            text-align: left;
            position: relative;
        }
        .actu-edito .edito-header {
            text-align: center; margin-bottom: 1.8rem;
        }
        .actu-edito .edito-header h3 {
            font-size: 1.5rem; color: var(--marine);
            font-family: 'Playfair Display', Georgia, serif;
        }
        .actu-edito .edito-intro {
            text-align: center; font-size: 0.95rem; color: #555;
            max-width: 640px; margin: 0 auto 1.8rem; line-height: 1.7;
        }
        .edito-themes {
            display: grid; gap: 1.2rem;
        }
        .edito-theme {
            padding: 1.2rem 1.4rem; border-radius: 6px;
            background: rgba(255,255,255,0.7);
            border-left: 3px solid var(--or);
        }
        .edito-theme h4 {
            font-size: 0.95rem; color: var(--marine); margin: 0 0 0.5rem;
            font-family: 'Inter', sans-serif; font-weight: 700;
        }
        .edito-theme p {
            font-size: 0.88rem; color: #555; line-height: 1.6; margin: 0;
        }
        .edito-theme .edito-links {
            margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
        }
        .edito-theme .edito-links a {
            font-size: 0.8rem; color: var(--or-dark, #b8913e);
            text-decoration: none; font-weight: 600;
        }
        .edito-theme .edito-links a:hover {
            color: var(--terracotta); text-decoration: underline;
        }
        .actu-badge {
            display: inline-block; background: var(--terracotta); color: #fff;
            padding: 0.25rem 1rem; border-radius: 3px; font-size: 0.7rem;
            font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
            margin-bottom: 1rem; font-family: 'Inter', sans-serif;
        }
        .actu-card h3 { font-size: 1.3rem; color: var(--marine); margin-bottom: 0.8rem; }
        .actu-card p { font-size: 0.95rem; }
        .actu-soustitre {
            color: var(--or); font-size: 0.85rem; margin-top: 1rem;
            font-weight: 600; font-family: 'Inter', sans-serif;
        }
        .actu-card-date {
            color: #999; font-size: 0.8rem; margin-top: 1rem;
            font-family: 'Inter', sans-serif;
        }
        .actu-liens {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 0.6rem; margin-top: 1.2rem; max-width: 600px; margin-left: auto; margin-right: auto;
        }
        .actu-liens .btn {
            padding: 0.55rem 1rem; font-size: 0.8rem; text-align: left;
            border-radius: 6px; display: flex; align-items: center;
        }
        .actu-liens .btn-full {
            grid-column: 1 / -1; justify-content: center; text-align: center;
            padding: 0.65rem 1.5rem; font-size: 0.85rem;
        }
        /* legacy compat */
        .actu-highlight {
            background: #fff; border-radius: 8px; padding: 3rem;
            box-shadow: 0 2px 20px rgba(0,0,0,0.06);
            border: 1.5px solid var(--or);
            max-width: 700px; margin: 0 auto;
        }
        .actu-date {
            color: var(--or); font-size: 0.85rem; margin-top: 1.2rem;
            font-weight: 600; font-family: 'Inter', sans-serif;
        }

        /* ---- ACTIONS (cartes - theme clair par defaut) ---- */
        .actions-section {
            background: var(--sable); padding: 4rem 0;
            transition: background 0.4s;
        }
        .actions-section .section-label { color: var(--or); }
        .actions-section .section-title { color: var(--marine); transition: color 0.4s; }
        .actions-section .section-bar { background: var(--or); }
        .actions-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 1.5rem; margin-top: 1rem;
        }
        .action-card {
            background: #fff;
            border: 1.5px solid rgba(212,166,85,0.4);
            border-radius: 12px; padding: 2rem;
            transition: border-color 0.3s, background 0.4s, box-shadow 0.3s;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }
        .action-card:hover {
            border-color: var(--or);
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        .action-card-num {
            color: var(--or); font-size: 0.85rem; font-weight: 700;
            font-family: 'Inter', sans-serif; margin-bottom: 0.8rem;
        }
        .action-card h3 {
            color: var(--marine); font-size: 1.15rem; margin-bottom: 0.8rem;
            font-weight: 700; transition: color 0.4s;
        }
        .action-card p {
            color: #555; font-size: 0.9rem;
            line-height: 1.6; transition: color 0.4s;
        }
        .action-card-tag {
            display: inline-block; margin-top: 1.2rem;
            padding: 0.25rem 0.9rem; border-radius: 20px;
            border: 1px solid var(--or); color: var(--or);
            font-size: 0.75rem; font-weight: 600;
            font-family: 'Inter', sans-serif;
        }
        /* ============================================
           MODE SOMBRE GLOBAL
           ============================================ */
        body.dark-mode {
            background-color: #0c1820;
            color: #c8c8c8;
        }
        /* --- Navigation --- */
        body.dark-mode nav {
            background: #060e14;
            border-bottom-color: rgba(212,166,85,0.5);
        }
        body.dark-mode .nav-links a { color: rgba(255,255,255,0.65); }
        body.dark-mode .nav-links a:hover { color: var(--or); }
        /* --- Hero --- */
        body.dark-mode .hero { background: #080f15; }
        body.dark-mode .hero-label { color: rgba(255,255,255,0.5); }
        body.dark-mode .hero h1 { color: #f0ece4; }
        body.dark-mode .hero .subtitle { color: #a8b8c0; }
        /* --- Toutes les sections --- */
        body.dark-mode section {
            background: #0c1820;
        }
        body.dark-mode .bg-sable {
            background: #101e28;
        }
        body.dark-mode .bg-marine {
            background: #0a161e;
        }
        body.dark-mode .bg-marine-deep {
            background: #060e14;
        }
        body.dark-mode .actions-section {
            background: #101e28;
        }
        /* --- Titres et labels --- */
        body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: #f0ece4; }
        body.dark-mode .section-title { color: #f0ece4; }
        body.dark-mode .section-label { color: var(--or); }
        body.dark-mode .section-bar { background: var(--or); }
        body.dark-mode p { color: #a8b8c0; }
        body.dark-mode a { color: var(--or); }
        /* --- Cartes et conteneurs --- */
        body.dark-mode .objectif-card,
        body.dark-mode .action-card,
        body.dark-mode .actu-card,
        body.dark-mode .actu-highlight,
        body.dark-mode .content-box,
        body.dark-mode .adhesion-box {
            background: #152530; color: #c8c8c8;
            border-color: rgba(212,166,85,0.35);
            box-shadow: 0 2px 15px rgba(0,0,0,0.3);
        }
        body.dark-mode .content-box p { color: #c8c8c8; }
        body.dark-mode .content-box strong { color: #f0ece4; }
        body.dark-mode .statuts-toggle { color: var(--or); }
        body.dark-mode .objectif-card:hover,
        body.dark-mode .action-card:hover {
            background: #1a2e3c;
            border-color: var(--or);
        }
        /* --- Actions --- */
        body.dark-mode .action-card-tag { color: var(--or-light); border-color: var(--or-light); }
        body.dark-mode .action-card-num { color: var(--or-light); }
        /* --- Actualites --- */
        body.dark-mode .actu-card.actu-edito {
            background: linear-gradient(135deg, #0f1e28 0%, #152530 100%);
        }
        body.dark-mode .edito-theme {
            background: rgba(255,255,255,0.05);
            border-left-color: var(--or);
        }
        body.dark-mode .edito-theme h4 { color: #f0ece4; }
        body.dark-mode .edito-theme p { color: #b0b8bc; }
        body.dark-mode .edito-intro { color: #b0b8bc; }
        body.dark-mode .edito-theme .edito-links a { color: var(--or); }
        body.dark-mode .edito-theme .edito-links a:hover { color: var(--terracotta); }
        body.dark-mode .actu-badge { background: var(--terracotta); }
        body.dark-mode .actu-soustitre { color: var(--or); }
        body.dark-mode .actu-card-date { color: #7a8a92; }
        /* --- Newsletters --- */
        body.dark-mode .newsletter-item {
            background: #152530; border-color: rgba(212,166,85,0.3);
        }
        body.dark-mode .newsletter-item:hover {
            background: #1a2e3c; border-color: var(--or);
        }
        body.dark-mode .nl-title { color: #f0ece4; }
        body.dark-mode .nl-date { color: var(--or); }
        body.dark-mode .newsletter-note { color: #8898a0; }
        body.dark-mode .newsletter-icon { color: var(--or); }
        /* --- Galerie --- */
        body.dark-mode .gallery-tabs button { color: #a8b8c0; border-color: rgba(255,255,255,0.15); }
        body.dark-mode .gallery-tabs button:hover { color: #f0ece4; }
        body.dark-mode .gallery-tabs button.active { color: var(--or); border-color: var(--or); }
        body.dark-mode .gallery-grid img { border-color: rgba(212,166,85,0.2); }
        body.dark-mode .lightbox { background: rgba(0,0,0,0.92); }
        /* --- Conversations IA --- */
        body.dark-mode .conversation-card {
            background: #152530; border-color: rgba(212,166,85,0.3);
        }
        body.dark-mode .conversation-card:hover {
            background: #1a2e3c; border-color: var(--or);
        }
        body.dark-mode .conversation-card h3 { color: #f0ece4; }
        body.dark-mode .conversation-card p { color: #a8b8c0; }
        body.dark-mode .conversations-empty { color: #8898a0; }
        /* --- Adhesion --- */
        body.dark-mode .adhesion-box strong { color: #f0ece4; }
        /* --- Contact --- */
        body.dark-mode .contact-grid > div {
            background: #152530; border-color: rgba(212,166,85,0.3);
        }
        body.dark-mode .contact-grid > div:hover {
            background: #1a2e3c;
        }
        /* --- Liens utiles --- */
        body.dark-mode .liens-utiles a {
            background: #152530; border-color: rgba(212,166,85,0.3); color: #c8c8c8;
        }
        body.dark-mode .liens-utiles a:hover { border-color: var(--or); color: var(--or); }
        /* --- Boutons --- */
        body.dark-mode .btn-primary { background: var(--or); color: #0c1820; }
        body.dark-mode .btn-primary:hover { background: var(--or-light); }
        body.dark-mode .btn-secondary { border-color: var(--or); color: var(--or); }
        body.dark-mode .btn-secondary:hover { background: rgba(212,166,85,0.15); }
        body.dark-mode .btn-terracotta { background: var(--terracotta); color: #fff; }
        body.dark-mode .btn-vert { background: #244f65; color: #fff; }
        body.dark-mode .btn-vert:hover { background: #2d6480; }
        /* --- Objectifs --- */
        body.dark-mode .objectifs-appel { color: #c8c8c8; }
        /* --- Footer --- */
        body.dark-mode footer {
            background: #060e14;
            border-top-color: rgba(212,166,85,0.5);
            color: rgba(255,255,255,0.5);
        }
        body.dark-mode footer a { color: var(--or); }
        /* --- Sections par ID : fond + SVG masqués en mode sombre --- */
        body.dark-mode #qui,
        body.dark-mode #actualites,
        body.dark-mode #humour,
        body.dark-mode #contact {
            background-color: #0c1820 !important;
            background-image: none !important;
        }
        body.dark-mode #objectifs,
        body.dark-mode #actions,
        body.dark-mode #adhesion {
            background-color: #101e28 !important;
            background-image: none !important;
        }
        /* ---- Toggle theme bouton ---- */
        .theme-toggle {
            background: none; border: 1px solid rgba(255,255,255,0.3);
            border-radius: 50%; width: 32px; height: 32px;
            cursor: pointer; display: flex; align-items: center;
            justify-content: center; margin-left: 0.5rem;
            padding: 0; transition: border-color 0.3s;
            -webkit-tap-highlight-color: transparent;
        }
        .theme-toggle:hover { border-color: var(--or); }
        .theme-toggle svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.7); transition: fill 0.3s; }
        .theme-toggle:hover svg { fill: var(--or); }

        /* ---- NEWSLETTERS ---- */
        .newsletter-list {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem; margin-top: 0.5rem;
        }
        .newsletter-item {
            display: flex; align-items: center;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(212,166,85,0.25);
            border-radius: 8px; padding: 1.2rem 1.5rem;
            text-decoration: none; color: #fff; transition: all 0.2s;
        }
        .newsletter-item:hover {
            background: rgba(212,166,85,0.1);
            border-color: var(--or); transform: translateX(4px);
        }
        .newsletter-icon {
            width: 40px; height: 40px; background: rgba(212,166,85,0.15);
            border-radius: 8px; display: flex; align-items: center; justify-content: center;
            margin-right: 1rem; flex-shrink: 0; font-size: 1.2rem;
        }
        .newsletter-item .nl-title { font-weight: 600; font-size: 0.9rem; }
        .newsletter-item .nl-date { font-size: 0.8rem; opacity: 0.6; margin-top: 0.15rem; }
        .newsletter-note {
            margin-top: 1.5rem; font-size: 0.85rem; opacity: 0.6;
            font-style: italic; text-align: center;
        }

        /* ---- GALERIE ---- */
        .galerie-intro { margin-bottom: 1.5rem; font-size: 0.95rem; }
        .galerie-tabs {
            display: flex; gap: 0.5rem; margin-bottom: 2rem;
            flex-wrap: wrap; justify-content: center;
        }
        .galerie-tab {
            padding: 0.6rem 1.5rem; border-radius: 4px; cursor: pointer;
            border: 1.5px solid var(--or-pale); background: #fff;
            font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600;
            color: var(--marine); transition: all 0.2s;
        }
        .galerie-tab:hover { border-color: var(--or); background: var(--or-pale); }
        .galerie-tab.active {
            background: var(--or); color: var(--marine-deep); border-color: var(--or);
        }
        .galerie-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.2rem;
        }
        .galerie-card {
            background: #fff; border-radius: 8px; overflow: hidden;
            box-shadow: 0 1px 12px rgba(0,0,0,0.05); transition: transform 0.2s;
            cursor: pointer;
        }
        .galerie-card:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(0,0,0,0.08); }
        .galerie-card img {
            width: 100%; height: 220px; object-fit: cover;
            display: block; background: var(--sable);
        }
        .galerie-card .caption {
            padding: 0.7rem 1rem; font-size: 0.82rem;
            color: var(--marine); font-weight: 500;
        }
        .galerie-section { display: none; }
        .galerie-section.active { display: grid; }
        .lightbox {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15,38,49,0.95); z-index: 2000;
            align-items: center; justify-content: center; cursor: pointer;
        }
        .lightbox.open { display: flex; }
        .lightbox img { max-width: 90%; max-height: 90%; border-radius: 4px; }

        /* ---- ADHESION ---- */
        .adhesion-box { text-align: center; max-width: 620px; margin: 0 auto; }
        .adhesion-box > p { margin-bottom: 1.5rem; font-size: 1rem; }
        .adhesion-card {
            background: #fff; border-radius: 8px; padding: 2.5rem;
            box-shadow: 0 2px 20px rgba(0,0,0,0.06);
            border-top: 4px solid var(--or);
            max-width: 380px; margin: 1.5rem auto;
        }
        .adhesion-card h3 { color: var(--marine); margin-bottom: 0.5rem; font-size: 1.1rem; }
        .adhesion-card .price {
            font-size: 2.8rem; font-weight: 800; color: var(--terracotta);
            margin: 0.3rem 0; font-family: 'Playfair Display', serif;
        }
        .adhesion-card .price span {
            font-size: 0.9rem; font-weight: 400; color: var(--gris-light);
            font-family: 'Inter', sans-serif;
        }
        .adhesion-card p { font-size: 0.9rem; margin-bottom: 1.2rem; color: var(--gris); }
        .iban-box {
            margin-top: 2rem; background: #fff; border-radius: 8px;
            padding: 2rem; box-shadow: 0 1px 12px rgba(0,0,0,0.05);
            border-left: 4px solid var(--marine); text-align: left;
        }
        .iban-box h3 { color: var(--marine); margin-bottom: 0.75rem; font-size: 1rem; }
        .iban-code {
            font-family: 'Courier New', monospace; font-size: 1rem;
            background: var(--sable); padding: 0.8rem 1rem; border-radius: 6px;
            margin: 0.5rem 0; letter-spacing: 1.5px; word-break: break-all;
            border: 1px solid var(--or-pale);
        }
        .iban-bic { font-family: 'Courier New', monospace; font-size: 0.85rem; color: var(--gris-light); }
        .parrainage-box {
            margin-top: 2rem; background: #fff; border-radius: 8px;
            padding: 2rem; box-shadow: 0 1px 12px rgba(0,0,0,0.05);
            border-left: 4px solid var(--or); text-align: left;
        }
        .parrainage-box h3 { color: var(--marine); margin-bottom: 0.75rem; font-size: 1rem; }

        /* ---- CONTACT ---- */
        .contact-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 2rem; margin-top: 0.5rem;
        }
        .contact-form {
            background: #fff; border-radius: 8px; padding: 2rem;
            box-shadow: 0 1px 12px rgba(0,0,0,0.05);
        }
        .form-group { margin-bottom: 1.2rem; }
        .form-group label {
            display: block; font-weight: 600; margin-bottom: 0.3rem;
            color: var(--marine); font-size: 0.85rem;
        }
        .form-group input, .form-group textarea, .form-group select {
            width: 100%; padding: 0.7rem 1rem;
            border: 1.5px solid #ddd; border-radius: 6px;
            font-size: 0.9rem; font-family: 'Inter', sans-serif;
            transition: border-color 0.2s; background: #fff;
        }
        .form-group input:focus, .form-group textarea:focus {
            outline: none; border-color: var(--or);
            box-shadow: 0 0 0 3px rgba(212,166,85,0.15);
        }
        .form-group textarea { height: 120px; resize: vertical; }
        .contact-info { display: flex; flex-direction: column; gap: 1.2rem; }
        .contact-info-card {
            background: #fff; border-radius: 8px; padding: 1.5rem;
            box-shadow: 0 1px 12px rgba(0,0,0,0.05);
        }
        .contact-info-card h3 {
            color: var(--marine); margin-bottom: 0.4rem; font-size: 0.95rem;
        }
        .contact-info-card p { font-size: 0.88rem; color: var(--gris); }
        .contact-info-card a { color: var(--marine-light); text-decoration: none; font-weight: 500; }
        .contact-info-card a:hover { color: var(--or); }

        /* ---- LIENS / RESEAUX ---- */
        .social-links {
            display: flex; gap: 1rem; justify-content: center;
            margin-top: 2rem; flex-wrap: wrap;
        }
        .social-link {
            display: flex; align-items: center; gap: 0.5rem;
            background: rgba(212,166,85,0.1); border: 1px solid rgba(212,166,85,0.3);
            color: #fff; padding: 0.75rem 1.5rem; border-radius: 6px;
            text-decoration: none; font-weight: 600; font-size: 0.85rem;
            transition: all 0.2s; font-family: 'Inter', sans-serif;
        }
        .social-link:hover {
            background: rgba(212,166,85,0.2); border-color: var(--or);
            transform: translateY(-2px);
        }
        .social-link svg { width: 18px; height: 18px; fill: var(--or); }
        /* ---- CONVERSATIONS IA ---- */
        .ia-tabs {
            display: flex; gap: 0.5rem; flex-wrap: wrap;
            justify-content: center; margin-bottom: 1.5rem;
        }
        .ia-tab {
            background: none; border: 1.5px solid var(--or-pale);
            border-radius: 25px; padding: 0.4rem 1.2rem;
            font-size: 0.82rem; font-weight: 600; cursor: pointer;
            color: var(--gris); font-family: 'Inter', sans-serif;
            transition: all 0.2s;
        }
        .ia-tab:hover { border-color: var(--or); color: var(--marine); }
        .ia-tab.active {
            background: var(--or); color: #fff; border-color: var(--or);
        }
        .ia-cat-desc {
            text-align: center; font-size: 0.9rem; color: var(--gris-light);
            margin-bottom: 1.5rem; font-style: italic;
        }
        .conversations-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.2rem;
        }
        .conversation-card {
            background: #fff; border-radius: 8px; padding: 1.5rem;
            border: 1.5px solid var(--or-pale); transition: all 0.2s;
            text-decoration: none; color: var(--gris); display: block;
        }
        .conversation-card:hover {
            border-color: var(--or); transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
        }
        .conversation-card .conv-service {
            display: inline-block; padding: 0.2rem 0.7rem; border-radius: 3px;
            font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 1px; margin-bottom: 0.8rem;
            font-family: 'Inter', sans-serif;
        }
        .conv-claude { background: #f0e6d3; color: #8B5E3C; }
        .conv-chatgpt { background: #d9f0e0; color: #2D6A3F; }
        .conv-gpt { background: #d9f0e0; color: #2D6A3F; }
        .conv-mistral { background: #dde5f0; color: #3A5A8C; }
        .conv-ia { background: #e0e8f0; color: #1B3A4B; }
        .conversation-card h3 {
            font-size: 1rem; color: var(--marine); margin-bottom: 0.4rem;
        }
        .conversation-card p {
            font-size: 0.85rem; color: var(--gris-light); line-height: 1.5;
        }
        .conv-sources {
            font-size: 0.78rem; color: var(--gris-light); margin-top: 0.6rem;
            font-style: italic;
        }
        .conversation-card .conv-date {
            font-size: 0.75rem; color: var(--or); font-weight: 600;
            margin-top: 0.8rem; font-family: 'Inter', sans-serif;
        }
        .conversations-empty {
            text-align: center; padding: 2rem; color: var(--gris-light);
            font-style: italic; font-size: 0.9rem;
        }
        /* dark mode IA (onglets) */
        body.dark-mode .ia-tab { border-color: rgba(212,166,85,0.3); color: #a8b8c0; }
        body.dark-mode .ia-tab:hover { border-color: var(--or); color: #f0ece4; }
        body.dark-mode .ia-tab.active { background: var(--or); color: #0c1820; }
        body.dark-mode .ia-cat-desc { color: #8898a0; }

        .liens-utiles { margin-top: 2.5rem; text-align: center; }
        .liens-utiles h3 {
            color: var(--or-light); margin-bottom: 0.8rem; font-size: 0.95rem;
            font-family: 'Inter', sans-serif; font-weight: 600;
        }
        .liens-row {
            display: flex; justify-content: center; flex-wrap: wrap;
            gap: 0.4rem 1.5rem; margin-bottom: 0.6rem;
        }
        .liens-utiles a {
            color: rgba(255,255,255,0.7); text-decoration: none;
            font-size: 0.88rem;
        }
        .liens-utiles a:hover { color: var(--or-light); }

        /* ---- FOOTER ---- */
        footer {
            background: var(--marine-deep); color: rgba(255,255,255,0.5);
            text-align: center; padding: 2.5rem 2rem; font-size: 0.82rem;
            border-top: 2px solid var(--or);
        }
        footer a { color: var(--or); text-decoration: none; }
        footer a:hover { color: var(--or-light); }

        /* ---- RESPONSIVE ---- */
        @media (max-width: 768px) {
            .burger { display: block; }
            .nav-links {
                display: none; flex-direction: column; position: absolute;
                top: 100%; left: 0; right: 0; background: var(--marine-deep);
                padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                border-top: 1px solid rgba(212,166,85,0.2);
            }
            .nav-links.active { display: flex; }
            .nav-links a { padding: 0.75rem 1rem; }
            .hero { flex-direction: column; min-height: auto; }
            .hero-content { padding: 3rem 1.5rem 2rem; max-width: 100%; }
            .hero h1 { font-size: 2rem; }
            .hero-image { min-height: 250px; }
            .objectifs-grid { grid-template-columns: 1fr; }
            .contact-grid { grid-template-columns: 1fr; }
            section { padding: 3.5rem 1.25rem; }
            .actu-highlight { padding: 1.5rem; }
            .actu-card { padding: 1.5rem; }
            .actu-grid { gap: 1rem; }
            /* Sur mobile : tout visible immediatement, pas d'animation */
            .fade-in, .fade-left, .fade-right, .scale-in { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
            /* Forcer l'affichage des blocs interactifs sur mobile */
            .actions-grid { grid-template-columns: 1fr; }
            .action-card { padding: 1.5rem; }
            .conversations-grid { grid-template-columns: 1fr; }
            .ia-tabs { gap: 0.4rem; }
            .ia-tab { padding: 0.35rem 0.9rem; font-size: 0.78rem; }
            .actu-highlight,
            .actu-card,
            .actu-grid,
            .actions-grid,
            .action-card,
            .newsletter-list,
            .newsletter-item,
            .adhesion-box,
            .contact-grid,
            .content-box,
            .objectif-card,
            .objectifs-appel,
            .btn {
                opacity: 1 !important;
                visibility: visible !important;
                display: revert !important;
                overflow: visible !important;
            }
            .newsletter-item { display: flex !important; }
            .newsletter-list { display: grid !important; grid-template-columns: 1fr !important; }
            .actu-highlight .btn,
            .actu-card .btn,
            .adhesion-box .btn { display: inline-block !important; }
            .contact-grid { display: grid !important; grid-template-columns: 1fr !important; }
        }

        /* ---- ANIMATIONS ---- */
        .fade-in {
            opacity: 0; transform: translateY(20px);
            transition: opacity 0.6s cubic-bezier(.25,.46,.45,.94), transform 0.6s cubic-bezier(.25,.46,.45,.94);
        }
        .fade-in.visible { opacity: 1; transform: translateY(0); }
        .fade-left {
            opacity: 0; transform: translateX(-30px);
            transition: opacity 0.6s cubic-bezier(.25,.46,.45,.94), transform 0.6s cubic-bezier(.25,.46,.45,.94);
        }
        .fade-left.visible { opacity: 1; transform: translateX(0); }
        .fade-right {
            opacity: 0; transform: translateX(30px);
            transition: opacity 0.6s cubic-bezier(.25,.46,.45,.94), transform 0.6s cubic-bezier(.25,.46,.45,.94);
        }
        .fade-right.visible { opacity: 1; transform: translateX(0); }
        .scale-in {
            opacity: 0; transform: scale(0.92);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .scale-in.visible { opacity: 1; transform: scale(1); }
        /* Stagger : delai en cascade pour les enfants d'une grille */
        .stagger > :nth-child(1) { transition-delay: 0s; }
        .stagger > :nth-child(2) { transition-delay: 0.08s; }
        .stagger > :nth-child(3) { transition-delay: 0.16s; }
        .stagger > :nth-child(4) { transition-delay: 0.24s; }
        .stagger > :nth-child(5) { transition-delay: 0.32s; }
        .stagger > :nth-child(6) { transition-delay: 0.40s; }
        /* Fallback : si pas de JS ou observer KO, tout reste visible */
        noscript ~ * .fade-in, .no-observer .fade-in,
        noscript ~ * .fade-left, .no-observer .fade-left,
        noscript ~ * .fade-right, .no-observer .fade-right,
        noscript ~ * .scale-in, .no-observer .scale-in { opacity: 1; transform: none; }
        /* Barre de progression de lecture */
        .scroll-progress {
            position: fixed; top: 0; left: 0; height: 3px;
            background: linear-gradient(90deg, var(--or), var(--or-light));
            width: 0%; z-index: 1001;
            transition: none;
        }
        /* Navbar auto-hide */
        nav.nav-hidden { transform: translateY(-100%); }
        nav { transition: transform 0.35s cubic-bezier(.25,.46,.45,.94), background 0.3s; }

        /* Bouton retour en haut */
        .back-to-top {
            position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
            width: 48px; height: 48px; border-radius: 50%;
            background: var(--marine); color: #fff; border: 2px solid var(--or);
            font-size: 1.4rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        }
        .back-to-top.visible { opacity: 1; visibility: visible; }
        .back-to-top:hover { background: var(--or); color: var(--marine); transform: scale(1.1); }
        body.dark-mode .back-to-top { background: #0c1820; border-color: var(--or); }
        body.dark-mode .back-to-top:hover { background: var(--or); color: #0c1820; }

        /* Bandeau notification nouveau contenu */
        .notif-banner {
            position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
            background: var(--or); color: var(--marine);
            padding: .55rem 1rem; text-align: center;
            font-size: .85rem; font-weight: 600;
            display: flex; align-items: center; justify-content: center; gap: .8rem;
            transform: translateY(-100%); transition: transform .4s ease;
            box-shadow: 0 2px 12px rgba(0,0,0,.15);
        }
        .notif-banner.visible { transform: translateY(0); }
        .notif-banner a {
            color: var(--marine); text-decoration: underline;
            font-weight: 700; cursor: pointer;
        }
        .notif-banner .notif-close {
            background: none; border: none; color: var(--marine);
            font-size: 1.2rem; cursor: pointer; padding: 0 .3rem;
            margin-left: .5rem; opacity: .7; transition: opacity .2s;
        }
        .notif-banner .notif-close:hover { opacity: 1; }
        body.dark-mode .notif-banner { background: #c49244; }

        /* ---- DRIVER.JS - Visite guidée personnalisée ---- */
        .driver-popover {
            background: var(--blanc, #FDFAF5);
            border: 2px solid var(--or, #D4A655);
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            font-family: 'Inter', 'Segoe UI', sans-serif;
            max-width: 340px;
        }
        .driver-popover .driver-popover-title {
            font-family: 'Playfair Display', Georgia, serif;
            color: var(--marine, #1B3A4B);
            font-size: 1.1rem;
            font-weight: 700;
        }
        .driver-popover .driver-popover-description {
            color: var(--gris, #4A4A4A);
            font-size: 0.88rem;
            line-height: 1.6;
        }
        .driver-popover .driver-popover-progress-text {
            color: var(--gris-light, #7A7A7A);
            font-size: 0.75rem;
        }
        .driver-popover-prev-btn {
            background: transparent;
            color: var(--marine, #1B3A4B);
            border: 1.5px solid var(--marine, #1B3A4B);
            border-radius: 4px;
            font-weight: 600;
            font-size: 0.82rem;
            padding: 0.4rem 1rem;
        }
        .driver-popover-prev-btn:hover {
            background: var(--sable, #F7F0E4);
        }
        .driver-popover-next-btn, .driver-popover-close-btn {
            background: var(--or, #D4A655);
            color: var(--marine-deep, #0F2631);
            border: none;
            border-radius: 4px;
            font-weight: 600;
            font-size: 0.82rem;
            padding: 0.4rem 1rem;
        }
        .driver-popover-next-btn:hover, .driver-popover-close-btn:hover {
            background: var(--or-light, #E8C882);
        }
        .driver-popover .driver-popover-arrow-side-left.driver-popover-arrow,
        .driver-popover .driver-popover-arrow-side-right.driver-popover-arrow,
        .driver-popover .driver-popover-arrow-side-top.driver-popover-arrow,
        .driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
            border-color: var(--or, #D4A655);
        }
        /* Driver.js en mode sombre */
        body.dark-mode .driver-popover {
            background: #152530;
            border-color: var(--or, #D4A655);
        }
        body.dark-mode .driver-popover .driver-popover-title {
            color: #f0ece4;
        }
        body.dark-mode .driver-popover .driver-popover-description {
            color: #a8b8c0;
        }
        body.dark-mode .driver-popover-prev-btn {
            color: #f0ece4;
            border-color: #f0ece4;
        }
        body.dark-mode .driver-popover-prev-btn:hover {
            background: rgba(255,255,255,0.08);
        }
        /* Bouton de lancement du tour */
        .tour-btn {
            position: fixed;
            bottom: 5.5rem;
            right: 2rem;
            z-index: 9998;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--or, #D4A655);
            color: var(--marine-deep, #0F2631);
            border: 2px solid var(--marine, #1B3A4B);
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: transform 0.2s, background 0.2s;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
        }
        .tour-btn:hover {
            transform: scale(1.1);
            background: var(--or-light, #E8C882);
        }
        body.dark-mode .tour-btn {
            background: var(--or, #D4A655);
            border-color: var(--or, #D4A655);
            color: #0c1820;
        }