:root {
            --fond: #ffffff;
            --adn-jaune: #F2E24D;
            --neutre-bleu: #5C82B5;
            --neutre-vert: #C0C7AD;
            --neutre-bordeaux: #713643;
            --contraste-bordeaux: #713643;
        }

        * {
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            font-family: 'Manrope', sans-serif;
            background-color: var(--fond);
            color: var(--neutre-bleu);
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 100svh;
        }

        header {
            padding: clamp(14px, 2vh, 24px) 32px;
            display: flex;
            justify-content: center;
            position: relative;
            flex: 0 0 auto;
        }

        .header-logo {
            position: absolute;
            left: 40px;
            top: 50%;
            transform: translateY(-50%);
        }

        .header-logo img {
            height: 46px;
            width: auto;
            display: block;
        }

        /* Rend le header transparent uniquement sur cette page */
        .cu-header {
            background: transparent !important;
        }

        nav {
            display: flex;
            gap: 60px;
        }

        nav a {
            text-decoration: none;
            color: var(--neutre-bleu);
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: color 0.3s ease;
        }

        nav a:hover, nav a.actif {
            color: var(--adn-jaune);
            border-bottom: 2px solid;
        }

        main {
            flex: 1 1 auto;
            display: grid;
            place-items: center;
            padding: 6px 24px 8px;
            min-height: 0;
        }

        .bubbles-stage {
            width: min(800px, 80vmin);
            aspect-ratio: 1 / 1;
            position: relative;
            --orbit: clamp(140px, 30vmin, 340px);
        }

        .bubbles-center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
            pointer-events: none;
            width: min(360px, 52%);
        }

        .bubbles-center h1 {
            margin: 0;
            font-family: 'Oswald', sans-serif;
            font-size: clamp(20px, 2.8vmin, 32px);
            line-height: 1.02;
            color: var(--contraste-bordeaux);
            text-transform: uppercase;
        }

        .bubbles-center p {
            margin: 10px 0 0;
            font-size: clamp(10px, 1.5vmin, 14px);
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--neutre-bleu);
            font-weight: 600;
        }

        /* STYLE DES BULLES AVEC TEXTE */
        .bubble {
            --size: clamp(110px, 30vmin, 230px);
            --overlay: var(--neutre-bleu);
            --dx: 0px;
            --dy: 0px;
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
            
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--overlay);
            color: white;
            text-decoration: none;
            font-weight: 800;
            box-shadow: 0 16px 28px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: box-shadow 0.28s ease, transform 0.3s ease;
            
            -webkit-mask-image: -webkit-radial-gradient(white, black);
            mask-image: radial-gradient(white, black);
            isolation: isolate;
            overflow: hidden;
        }

        .bubble-photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: grayscale(1);
            opacity: 0;
            transform: scale(1.02);
            transition: opacity 0.3s ease, transform 0.4s ease, filter 0.3s ease;
            z-index: 0;
        }

        .filtre-jaune { filter: url(#solarisation-jaune); }
        .filtre-bleu { filter: url(#solarisation-bleu); }
        .filtre-bordeaux { filter: url(#solarisation-bordeaux); }

        .bubble-label {
            position: relative;
            z-index: 1;
            display: block;
            width: 100%;
            padding: clamp(14px, calc(var(--size) * 0.16), 10px);
            text-align: center;
            line-height: 1.25;
            text-transform: uppercase;
            transform: translateY(0);
            transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
            font-size: clamp(14px, 1.8vmin, 16px);
            white-space: nowrap;
        }

        .bubble.is-hovered .bubble-label {
            transform: translateY(calc(var(--size) * 0.24));
        }

        .bubble::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(43, 33, 50, 0.52) 0%, rgba(43, 33, 50, 0.14) 40%, rgba(43, 33, 50, 0.02) 68%);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 0;
        }

        .bubble:hover,
        .bubble.is-hovered {
            box-shadow: 0 22px 42px rgba(0, 0, 0, 0.2);
            z-index: 5;
            color: var(--adn-jaune);
        }

        .bubble:hover .bubble-photo,
        .bubble.is-hovered .bubble-photo {
            opacity: 1;
            transform: scale(1.08);
        }

        .bubble:hover::after,
        .bubble.is-hovered::after {
            opacity: 1;
        }

        /* Positions et Couleurs */
        .bubble-1 { --dx: 0px; --dy: calc(var(--orbit) * -1); --overlay: var(--neutre-bordeaux); }
        .bubble-2 { --dx: calc(var(--orbit) * 0.96); --dy: calc(var(--orbit) * -0.315); --overlay: var(--neutre-bleu); }
        .bubble-3 { --dx: calc(var(--orbit) * 0.592); --dy: calc(var(--orbit) * 0.862); --overlay: var(--neutre-vert); }
        .bubble-4 { --dx: calc(var(--orbit) * -0.592); --dy: calc(var(--orbit) * 0.862); --overlay: var(--neutre-bordeaux); }
        .bubble-5 { --dx: calc(var(--orbit) * -0.96); --dy: calc(var(--orbit) * -0.315); --overlay: var(--neutre-bleu); }

        footer {
            padding: 8px 16px 10px;
            text-align: center;
            font-size: 12px;
            flex: 0 0 auto;
        }

        footer a { color: var(--neutre-bleu); text-decoration: none; }

        @media (max-width: 900px) {
            .bubbles-stage {
                width: min(500px, 72vh, 94vw);
                --orbit: clamp(82px, calc((100svh - 190px) * 0.34), 165px);
            }
            .bubble { 
                --size: clamp(114px, calc((100svh - 190px) * 0.33), 172px);
                font-size: clamp(11px, calc(var(--size) * 0.075), 14px);
                padding: clamp(12px, calc(var(--size) * 0.15), 20px);
            }
        }

        /* ========================================== */
    /* RESPONSIVE MOBILE : PAGE PROJETS (BULLES)  */
    /* ========================================== */
    @media (max-width: 850px) {
        /* 1. On réactive le scroll sur mobile */
        html, body {
            overflow: auto !important;
            height: auto !important;
        }

        /* 2. Le conteneur aligne tout au centre, de haut en bas */
        .bubbles-stage, main {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 8px !important;
            padding: 20px 20px 40px 20px !important;
            height: auto !important;
            width: 100% !important;
            position: relative !important;
        }

        /* 3. Le titre repasse tout en haut (on annule le centrage absolu) */
        .bubbles-center {
            position: relative !important;
            left: auto !important;
            top: auto !important;
            transform: none !important;
            width: 100% !important;
            margin-bottom: 24px !important; /* Espace avant la première bulle */
        }

        /* 4. On garde les ronds parfaits et on les centre */
        .bubble {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            transform: none !important; /* Annule l'animation PC */
            translate: none !important; /* Neutralise le JS de la souris */
            
            /* Dimensions pour faire un rond parfait sur mobile */
            width: 140px !important;
            height: 140px !important;
            aspect-ratio: 1 / 1 !important;
            border-radius: 50% !important; 
            
            margin: 0 !important;
            padding: 20px !important;
        }

        /* 5. On autorise le texte à passer à la ligne pour tenir dans le rond */
        .bubble-label {
            white-space: normal !important;
            font-size: 12px !important;
        }

        /* Ajustement de l'animation au clic/touché sur mobile */
        .bubble:active {
            transform: scale(0.96) !important;
        }
        .bubble.is-hovered .bubble-label {
            transform: translateY(15px) !important;
        }
    }

    @media (max-height: 800px) {
        .bubbles-stage {
            transform: scale(0.8); /* Réduit légèrement la taille des bulles sur petit écran */
            transform-origin: center center;
        }
    }