/* ==========================================================================
   MOBILE — fluidité sur téléphone
   Chargée en tout dernier sur les pages. Rien ne change sur ordinateur.

   Les animations restent toutes là. Ce qui change, c'est la façon de les
   dessiner : sur un téléphone, trois effets coûtent très cher à chaque
   image et font ramer le défilement :
     · le flou d'arrière-plan (backdrop-filter), recalculé à chaque image
       sous la barre de navigation fixe et sous les cartes en verre ;
     · les fusions de calques (mix-blend-mode) des blobs et du grain,
       qui obligent à recomposer tout ce qu'il y a derrière ;
     · les grands flous (filter: blur) animés.
   On les remplace par des équivalents visuels qui ne coûtent presque rien.
   (Le récit avec le téléphone a sa propre version mobile dans vivant.css.)
   ========================================================================== */

@media (max-width: 900px), (hover: none) and (pointer: coarse) {

    /* ------------------------------------------------ 1. FOND : les blobs
       Le dégradé radial des blobs est déjà doux : sans le flou de 50 px ni
       la fusion « screen », le rendu reste le même halo, mais le calque
       n'est plus recalculé. Ils continuent de dériver. */
    .blob {
        filter: none;
        mix-blend-mode: normal;
        opacity: 0.3;
    }
    .blob-5 { opacity: 0.22; }

    /* ------------------------------------------------ 2. GRAIN DE PELLICULE
       Même grain, même mouvement, mais posé en transparence simple au lieu
       d'une fusion « overlay » (la plus coûteuse des fusions). */
    .scene-grain,
    .appel-final::after,
    .voix-tuile::after,
    .diapo::after,
    .uc-hero-section::before {
        mix-blend-mode: normal;
        opacity: 0.06;
    }

    /* ------------------------------------------------ 3. LES DISQUES DE LUMIÈRE
       Ils respirent toujours, mais par une mise à l'échelle (calculée par
       la carte graphique) au lieu d'un changement de luminosité, qui
       redessinait tout le disque et son halo à chaque image. Le halo est
       resserré : un flou de 320 px est énorme à calculer sur un téléphone. */
    .scene-lumiere,
    .voix-tuile::before,
    .appel-final::before {
        animation-name: respireMobile;
        box-shadow:
            0 0 70px 10px rgba(59, 130, 246, 0.42),
            0 0 160px 40px rgba(37, 99, 235, 0.22);
    }
    /* Le halo bleu derrière le téléphone du récit, sans flou. */
    .recit-ecran::before { filter: none; }

    /* ------------------------------------------------ 4. VERRE DÉPOLI
       Plus de flou d'arrière-plan : les fonds deviennent un peu plus
       opaques pour garder la même lisibilité. */
    *, *::before, *::after {
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }
    .header .container { background: rgba(4, 9, 15, 0.94); }
    .notif { background: rgba(14, 26, 52, 0.86); }
    .uc-hero-metric { background: rgba(12, 22, 44, 0.82); }
    .voix-lecteur, .af-agenda { background: rgba(12, 22, 44, 0.82); }
    .mq-notif { background: rgba(40, 52, 60, 0.92); }
    .uc-card-link { background: rgba(255, 255, 255, 0.22); }
    .nav-dropdown .dropdown-menu { background: rgba(10, 22, 40, 0.98); }

    /* ------------------------------------------------ 5. APPARITIONS
       Les blocs montent toujours en fondu ; seul le flou de départ saute,
       parce que plusieurs blocs qui se défloutent en même temps pendant le
       défilement suffisaient à faire sauter des images. */
    .reveal,
    .reveal:not(.visible) {
        filter: none;
    }
    .reveal {
        transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
                    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* ------------------------------------------------ 6. PHOTOS
       Versions de 1080 px pour les téléphones : 5 à 6 fois plus légères,
       et surtout beaucoup plus rapides à décoder. Les grandes restent
       chargées sur ordinateur. */
    [style*="restaurant.jpg"] { background-image: url('/assets/restaurant-mobile.jpg') !important; }
    [style*="immobilier.jpg"] { background-image: url('/assets/immobilier-mobile.jpg') !important; }
    [style*="cabinet.jpg"]    { background-image: url('/assets/cabinet-mobile.jpg') !important; }
}

@keyframes respireMobile {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}