/* ==========================================================================
   Homepage — micro-animations (dynamisme uniquement, aucun changement de
   layout/texte/couleur). Chargé uniquement sur la page d'accueil.
   ========================================================================== */

/* --------------------------------------------------------------------
   Système générique "reveal" (apparition au scroll)
   Un seul IntersectionObserver (Assets/JS/home-reveal.js) ajoute
   .is-visible une fois ; les transitions ci-dessous font le reste.
   -------------------------------------------------------------------- */
.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal:not(.is-visible),
.reveal-left:not(.is-visible),
.reveal-right:not(.is-visible) {
    will-change: opacity, transform;
}

.reveal {
    transform: translateY(20px);
}

.reveal-left {
    transform: translateX(-20px);
}

.reveal-right {
    transform: translateX(20px);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

.reveal-delay-1.is-visible { transition-delay: 0.08s; }
.reveal-delay-2.is-visible { transition-delay: 0.16s; }
.reveal-delay-3.is-visible { transition-delay: 0.24s; }

/* Groupe à stagger : le parent reçoit .is-visible, chaque enfant direct se
   révèle à son tour (évite d'observer chaque carte séparément). */
.reveal-group > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-group.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.4s; }
.reveal-group.is-visible > *:nth-child(7) { transition-delay: 0.48s; }
.reveal-group.is-visible > *:nth-child(8) { transition-delay: 0.56s; }
.reveal-group.is-visible > *:nth-child(9) { transition-delay: 0.64s; }

/* "Comment ça fonctionne ?" : seules les 5 étapes suivent le stagger du
   groupe ; les flèches (déjà animées en continu ci-dessous) restent
   simplement visibles pour ne pas cumuler deux animations de transform
   sur le même élément. */
.home-parcours__steps.reveal-group > .home-parcours__arrow {
    opacity: 1;
    transform: none;
    transition: none;
}

/* --------------------------------------------------------------------
   Ambiances lentes (idle) — toujours filter/box-shadow/opacity, jamais
   de propriété coûteuse animée en continu. Mises en pause automatiquement
   sous prefers-reduced-motion (bloc dédié plus bas).
   -------------------------------------------------------------------- */
@keyframes home-anim-breathe-shadow {
    0%, 100% { box-shadow: 0 0 26px rgba(245, 179, 1, 0.18); }
    50% { box-shadow: 0 0 36px rgba(245, 179, 1, 0.32); }
}

@keyframes home-anim-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

@keyframes home-anim-bg-breathe {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.68; }
}

/* Hero : PAS d'animation "glow-filter" ici (retirée). En-dessous de 1280px,
   .home-hero__visual img bascule en inset:0 / object-fit:cover, donc son
   rectangle coïncide exactement avec les bords de sa fenêtre de cadrage —
   même mécanisme que 5G/Découvrez ci-dessous : le drop-shadow() animé
   suivait ce contour RECTANGULAIRE entier de l'image (fond de l'asset
   opaque), produisant le halo jaune/or signalé dès que ce cadrage
   "empilé" s'active. Le réseau/halo intégré à l'illustration elle-même
   reste inchangé ; seule cette pulsation ajoutée est retirée. */

/* 5G : PAS d'animation "glow-filter" ici (retirée). En-dessous de 1024px,
   .home-5g__visual img est positionnée en inset:0 / object-fit:cover, donc
   son rectangle coïncide exactement avec les bords de sa fenêtre de
   cadrage. Illustration_5G_V2.png étant opaque jusqu'au bord (aucune marge
   transparente), le drop-shadow() de home-anim-glow-filter suivait ce
   contour RECTANGULAIRE entier de l'image, produisant une bande jaune/or
   diffuse au-dessus et en dessous de l'image dès que ce cadrage
   "empilé" s'active — c'est le halo signalé, jamais présent dans l'image
   elle-même. Les lumières dorées restent (elles font partie du PNG), seule
   cette pulsation ajoutée est retirée ; image strictement stable comme sur
   Découvrez / appareils, pour la même raison. */

/* Découvrez / appareils : PAS d'animation "glow-filter" ici (retirée).
   Illustration_mobil.png est un PNG sans transparence réelle autour des
   appareils (fond rempli en noir opaque sur tout le canevas, vérifié pixel
   par pixel) : le
   drop-shadow() de home-anim-glow-filter suit donc le contour RECTANGULAIRE
   entier de l'image plutôt que les seuls appareils/filaments, ce qui
   produisait une grande nappe jaune/brune diffuse derrière tout le bloc de
   texte à l'intensité maximale de l'animation (alpha 0.22, flou 16px) —
   c'est le halo signalé, jamais présent dans l'image elle-même. Les
   filaments dorés restent (ils font partie du PNG), seule cette pulsation
   ajoutée est retirée ; image strictement stable comme voulu à l'origine. */

/* Couverture France : PAS d'animation "glow-filter" ici (retirée). Même
   mécanisme que Hero/5G/Découvrez : en-dessous de 1280px,
   .home-couverture__visual img bascule en inset:0 / object-fit:cover, son
   rectangle coïncide alors avec les bords de la fenêtre de cadrage, et le
   drop-shadow() animé suivait le contour RECTANGULAIRE entier de ce JPEG
   opaque (aucune transparence possible dans ce format) — d'où le halo
   jaune/or signalé dès ce cadrage "empilé". Le réseau de points lumineux
   fait partie de l'image et reste inchangé ; seule la pulsation ajoutée
   est retirée. */

/* Forfait "+ Populaire" : halo qui respire en continu, en pause au hover
   pour laisser l'effet de survol existant s'exprimer sans concurrence. */
.home-plans__card--popular {
    animation: home-anim-breathe-shadow 4s ease-in-out infinite;
}

/* "none" (et non "paused") : une animation CSS, même en pause, continue
   d'imposer sa dernière valeur de box-shadow et masquerait l'effet hover
   existant. La couper entièrement rend la main à la règle :hover d'origine,
   exactement comme avant l'ajout de la respiration. */
.home-plans__card--popular:hover {
    animation: none;
}

/* Flèches "Comment ça fonctionne ?" : micro-nudge horizontal continu,
   desktop uniquement (en mobile la flèche est pivotée à 90°, un nudge
   horizontal irait dans le mauvais sens). */
@media (min-width: 769px) {
    .home-parcours__arrow {
        animation: home-anim-arrow-nudge 2.6s ease-in-out infinite;
    }
}

/* Contact : respiration d'opacité extrêmement légère sur le fond
   décoratif uniquement — jamais sur la carte Google. */
.home-contact__bg {
    animation: home-anim-bg-breathe 10s ease-in-out infinite;
}

/* --------------------------------------------------------------------
   Mobile : on garde uniquement le fade du système reveal, on retire les
   ambiances "idle" superposées pour rester sobre et performant.
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
    .home-plans__card--popular,
    .home-contact__bg {
        animation: none;
    }

    /* Fade simple uniquement sur mobile : pas de glissement latéral en
       plus du fondu (un seul mouvement à la fois). */
    .reveal-left,
    .reveal-right {
        transform: translateY(20px);
    }

    .reveal-left.is-visible,
    .reveal-right.is-visible {
        transform: translate(0, 0);
    }
}

/* --------------------------------------------------------------------
   Accessibilité : prefers-reduced-motion
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-group > * {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto;
    }

    .home-plans__card--popular,
    .home-parcours__arrow,
    .home-contact__bg {
        animation: none !important;
    }
}