/* =========================================================================
   dynamique.css — couche d'animations (proposition du 02.10.2026)
   -------------------------------------------------------------------------
   Chargée après fluide.css. Elle n'ajoute que du mouvement : ni contenu,
   ni police, ni couleur ne changent. Retirer ce fichier (et dynamique.js)
   rend au site son comportement exact d'avant.

   Tout est sous « prefers-reduced-motion: no-preference » : un visiteur
   qui a demandé moins d'animations sur son téléphone n'en voit aucune.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

/* ---------------------------------------------------------------
   1. PASSAGE D'UN ONGLET À L'AUTRE
   La page glisse dans le sens de l'onglet choisi, comme dans une
   application ; la barre de navigation et le bandeau ne bougent pas.
   (Chrome, Edge, Safari récents ; ailleurs, chargement normal.)
   --------------------------------------------------------------- */
@view-transition { navigation: auto; }

html.dyn-vt nav            { view-transition-name: barre-nav; }
html.dyn-vt .barre-contact { view-transition-name: barre-contact; }
html.dyn-vt .wa-flottant   { view-transition-name: bouton-whatsapp; }

::view-transition-group(root) { animation-duration: 0.42s; }
::view-transition-old(root) {
    animation: 0.26s cubic-bezier(0.4, 0, 1, 1) both dyn-page-sortie;
}
::view-transition-new(root) {
    animation: 0.5s cubic-bezier(0.22, 1, 0.36, 1) both dyn-page-entree;
}
/* vers un onglet plus à droite : la page arrive par la droite */
html:active-view-transition-type(vers-droite)::view-transition-old(root) { animation-name: dyn-sortie-gauche; }
html:active-view-transition-type(vers-droite)::view-transition-new(root) { animation-name: dyn-entree-droite; }
/* vers un onglet plus à gauche : l'inverse */
html:active-view-transition-type(vers-gauche)::view-transition-old(root) { animation-name: dyn-sortie-droite; }
html:active-view-transition-type(vers-gauche)::view-transition-new(root) { animation-name: dyn-entree-gauche; }

@keyframes dyn-page-sortie  { to   { opacity: 0; transform: scale(0.985); } }
@keyframes dyn-page-entree  { from { opacity: 0; transform: translateY(28px); } }
@keyframes dyn-sortie-gauche { to   { opacity: 0; transform: translateX(-60px); } }
@keyframes dyn-sortie-droite { to   { opacity: 0; transform: translateX(60px); } }
@keyframes dyn-entree-droite { from { opacity: 0; transform: translateX(90px); } }
@keyframes dyn-entree-gauche { from { opacity: 0; transform: translateX(-90px); } }

/* ---------------------------------------------------------------
   2. LES CARTES ARRIVENT EN CASCADE
   Au lieu d'un bloc entier qui monte d'un coup, chaque carte arrive
   à son tour, avec un léger rebond d'échelle.
   --------------------------------------------------------------- */
.au-defilement.dyn-cascade { opacity: 1; transform: none; }
.dyn-cascade:not(.est-visible) > * { opacity: 0; }
.dyn-cascade.est-visible > * {
    animation: dyn-monter 0.8s cubic-bezier(0.22, 1.2, 0.36, 1) backwards;
    animation-delay: calc(var(--dyn-rang, 0) * 85ms);
}
@keyframes dyn-monter {
    from { opacity: 0; transform: translateY(46px) scale(0.94); }
    60%  { opacity: 1; }
}

/* Les photos des disciplines : un rideau qui se lève, la photo qui
   recule d'un zoom, puis le texte qui glisse en place. */
.dyn-cascade.est-visible > .carte-photo {
    animation-name: dyn-rideau;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1);
}
.dyn-cascade.est-visible > .carte-photo::before {
    animation: dyn-zoom-photo 1.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--dyn-rang, 0) * 85ms);
}
.dyn-cascade.est-visible > .carte-photo h3,
.dyn-cascade.est-visible > .carte-photo p {
    animation: dyn-texte 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--dyn-rang, 0) * 85ms + 380ms);
}
.dyn-cascade.est-visible > .carte-photo p { animation-delay: calc(var(--dyn-rang, 0) * 85ms + 470ms); }
@keyframes dyn-rideau {
    from { clip-path: inset(100% 0 0 0 round 15px); }
    to   { clip-path: inset(0 0 0 0 round 15px); }
}
@keyframes dyn-zoom-photo { from { transform: scale(1.35); } }
@keyframes dyn-texte      { from { opacity: 0; transform: translateY(18px); } }

/* ---------------------------------------------------------------
   3. LE TRAIT ROUGE DES TITRES SE DESSINE
   --------------------------------------------------------------- */
.section-title.au-defilement::after {
    transform: scaleX(0);
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.section-title.au-defilement.est-visible::after { transform: scaleX(1); }
.page-entete::after { animation: dyn-trait 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards; }
.page-entete h1     { animation: dyn-titre 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.page-entete p      { animation: dyn-titre 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards; }
@keyframes dyn-trait { from { transform: scaleX(0); } }
@keyframes dyn-titre { from { opacity: 0; transform: translateY(24px); } }

/* ---------------------------------------------------------------
   4. ACCUEIL : LE TITRE S'EFFACE QUAND ON DÉFILE
   Le fond s'approche lentement pendant que le texte monte et se
   dissipe. Lié au doigt : on remonte, tout revient.
   --------------------------------------------------------------- */
header .hero-content > * { animation: dyn-titre 1s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
header .hero-content > :nth-child(2) { animation-delay: 0.15s; }
header .hero-content > :nth-child(3) { animation-delay: 0.3s; }

@supports (animation-timeline: scroll()) {
    header .hero-content {
        animation: dyn-hero-texte linear both;
        animation-timeline: scroll(root);
        animation-range: 0 75vh;
    }
    header .hero-diapo {
        animation: dyn-hero-fond linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100vh;
    }
    @keyframes dyn-hero-texte { to { transform: translateY(-16vh) scale(0.94); opacity: 0; } }
    @keyframes dyn-hero-fond  { to { transform: scale(1.14); } }
}

/* ---------------------------------------------------------------
   5. MENU MOBILE : LES ONGLETS ARRIVENT UN À UN
   --------------------------------------------------------------- */
@media (max-width: 900px) {
    body.menu-open .nav-onglets > a,
    body.menu-open .nav-outils > * {
        animation: dyn-tiroir 0.55s cubic-bezier(0.22, 1.15, 0.36, 1) backwards;
    }
    body.menu-open .nav-onglets > a:nth-child(1) { animation-delay: 0.08s; }
    body.menu-open .nav-onglets > a:nth-child(2) { animation-delay: 0.13s; }
    body.menu-open .nav-onglets > a:nth-child(3) { animation-delay: 0.18s; }
    body.menu-open .nav-onglets > a:nth-child(4) { animation-delay: 0.23s; }
    body.menu-open .nav-onglets > a:nth-child(5) { animation-delay: 0.28s; }
    body.menu-open .nav-onglets > a:nth-child(6) { animation-delay: 0.33s; }
    body.menu-open .nav-outils > * { animation-delay: 0.4s; }
    @keyframes dyn-tiroir { from { opacity: 0; transform: translateX(48px); } }
}

/* ---------------------------------------------------------------
   6. NOS DISCIPLINES SUR TÉLÉPHONE : ON SWIPE
   Les six cartes forment une bande qu'on fait défiler au doigt ;
   la suivante dépasse pour inviter au geste, la carte au centre est
   pleine taille et les autres reculent légèrement.
   --------------------------------------------------------------- */
@media (max-width: 620px) {
    .grid-six.dyn-swipe {
        display: flex; gap: 14px;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--page-pad, 20px) * -1);
        padding: 6px var(--page-pad, 20px) 14px;
        scroll-padding-inline: var(--page-pad, 20px);
    }
    .grid-six.dyn-swipe::-webkit-scrollbar { display: none; }
    .grid-six.dyn-swipe > .card {
        flex: 0 0 84%;
        min-height: 360px;
        scroll-snap-align: center;
    }
    @supports (animation-timeline: view(inline)) {
        .grid-six.dyn-swipe.est-visible > .card {
            animation: dyn-profondeur linear both;
            animation-timeline: view(inline);
        }
        @keyframes dyn-profondeur {
            0%   { transform: scale(0.9); opacity: 0.55; }
            40%, 60% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0.9); opacity: 0.55; }
        }
    }
    .dyn-points { display: flex; justify-content: center; gap: 7px; margin-top: 4px; }
    .dyn-points span {
        width: 7px; height: 7px; border-radius: 4px; background: #c8d2dc;
        transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s;
    }
    .dyn-points span.actif { width: 22px; background: var(--primary-red); }
}

/* ---------------------------------------------------------------
   7. NOS OFFRES : LE CONTENU REJOUE SON ENTRÉE QUAND ON CHANGE DE FILTRE
   --------------------------------------------------------------- */
.offres-groupe.dyn-rejoue > * {
    animation: dyn-monter 0.6s cubic-bezier(0.22, 1.15, 0.36, 1) backwards;
    animation-delay: calc(var(--dyn-rang, 0) * 70ms);
}

} /* fin prefers-reduced-motion */

/* Hors animation, les points de la bande n'ont pas lieu d'être. */
@media (prefers-reduced-motion: reduce), (min-width: 621px) {
    .dyn-points { display: none; }
}