/* =========================================================================
   Animations et apparitions au défilement.
   Principe :
   - un script inline ajoute la classe .js sur <html> (voir layouts/main.php) ;
   - les éléments animés sont masqués seulement dans ce cas (aucun clignotement) ;
   - assets/js/animations.js ajoute .is-visible à l’entrée dans l’écran ;
   - si le script ne se charge pas, la classe .js est retirée après 2,5 s
     et le contenu redevient visible.
   ========================================================================= */

:root {
    --ease-out: cubic-bezier(.16, .84, .24, 1);
    --ease-back: cubic-bezier(.34, 1.42, .64, 1);
    --reveal-distance: 46px;
    --reveal-duration: 620ms;
}

html {
    scroll-behavior: smooth;
}

/* Les ancres (#contenu, …) ne passent pas sous l’en-tête fixe */
[id] {
    scroll-margin-top: 96px;
}

/* --- Éléments animés : état initial ------------------------------------- */
.js :where(
    .hero__eyebrow,
    .hero__title,
    .hero__text,
    .hero__actions,
    .hero__media,
    .breadcrumb,
    .page-hero__title,
    .page-hero__intro,
    .section__head,
    .card,
    .panel,
    .step,
    .member,
    .stat,
    .stat__value,
    .alert,
    .notice,
    .cta-band,
    .table,
    .faq__item,
    .logos,
    .hours li,
    .prose > *,
    .error-page
) {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition:
        opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms),
        transform var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms);
}

/* --- Éléments animés : état révélé ------------------------------------- */
.js :where(
    .hero__eyebrow,
    .hero__title,
    .hero__text,
    .hero__actions,
    .hero__media,
    .breadcrumb,
    .page-hero__title,
    .page-hero__intro,
    .section__head,
    .card,
    .panel,
    .step,
    .member,
    .stat,
    .stat__value,
    .alert,
    .notice,
    .cta-band,
    .table,
    .faq__item,
    .logos,
    .hours li,
    .prose > *,
    .error-page
).is-visible {
    opacity: 1;
    transform: none;
}

/* Variantes optionnelles : data-reveal="fade|left|right|zoom" */
.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition:
        opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms),
        transform var(--reveal-duration) var(--ease-out) var(--reveal-delay, 0ms);
}

.js [data-reveal="fade"] {
    transform: none;
}

.js [data-reveal="left"] {
    transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

.js [data-reveal="right"] {
    transform: translate3d(var(--reveal-distance), 0, 0);
}

.js [data-reveal="zoom"] {
    transform: scale(.94);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* --- Bandeau de page : dégradé légèrement animé ------------------------- */
.page-hero,
.hero {
    background-size: 220% 220%;
}

.js .page-hero {
    animation: gradientShift 16s ease-in-out infinite;
}

@keyframes gradientShift {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* --- En-tête et navigation --------------------------------------------- */
.site-header {
    transition: box-shadow .35s ease, background-color .35s ease, backdrop-filter .35s ease;
}

.site-header.is-scrolled {
    background-color: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(13, 43, 51, .12);
}

.site-header__inner {
    transition: padding .35s var(--ease-out);
}

.site-header.is-scrolled .site-header__inner {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.brand__mark {
    transition: transform .45s var(--ease-out), box-shadow .35s ease;
}

.site-header.is-scrolled .brand__mark {
    transform: scale(.94);
    box-shadow: 0 6px 14px rgba(14, 114, 132, .28);
}

.nav__link {
    position: relative;
    transition: background-color .25s ease, color .25s ease;
}

.nav__link::after {
    content: "";
    position: absolute;
    right: 0.7rem;
    bottom: 0.3rem;
    left: 0.7rem;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--ease-out);
}

.nav__link:hover::after,
.nav__link.is-active::after {
    transform: scaleX(1);
}

.nav__submenu {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s var(--ease-out);
}

.nav__item--parent:hover > .nav__submenu,
.nav__item.is-open > .nav__submenu {
    opacity: 1;
    transform: none;
}

.nav__sublink {
    transition: background-color .2s ease, color .2s ease, transform .25s var(--ease-out);
}

.nav__sublink:hover {
    transform: translateX(4px);
}

/* --- Cartes, encarts, étapes, membres ---------------------------------- */
.card {
    transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
}

.card:hover {
    border-color: rgba(14, 114, 132, .35);
}

.card__media img {
    transition: transform .7s var(--ease-out);
}

.card:hover .card__media img {
    transform: scale(1.07);
}

.card__icon {
    transition: transform .45s var(--ease-out), background-color .3s ease;
}

.card:hover .card__icon {
    transform: translateY(-3px) rotate(-6deg);
    background-color: #e6f4f6;
}

.card__link {
    position: relative;
}

.card__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--ease-out);
}

.card:hover .card__link::after {
    transform: scaleX(1);
}

.panel {
    transition: border-color .3s ease, box-shadow .3s ease;
}

.panel:hover {
    border-color: rgba(14, 114, 132, .3);
    box-shadow: var(--shadow);
}

.step {
    transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
}

.step:hover {
    transform: translateY(-6px);
    border-color: rgba(14, 114, 132, .35);
    box-shadow: var(--shadow);
}

.step::before {
    transition: transform .45s var(--ease-out), background-color .3s ease;
}

.step:hover::before {
    transform: scale(1.08);
    background-color: var(--color-accent-dark);
}

.member {
    transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
}

.member:hover {
    transform: translateY(-6px);
    border-color: rgba(14, 114, 132, .35);
    box-shadow: var(--shadow);
}

.member__photo img {
    transition: transform .7s var(--ease-out);
}

.member:hover .member__photo img {
    transform: scale(1.08);
}

.stat {
    transition: transform .4s var(--ease-out);
}

.stat:hover {
    transform: translateY(-4px);
}

.stat__value {
    font-variant-numeric: tabular-nums;
}

/* --- Boutons ------------------------------------------------------------ */
.btn {
    position: relative;
    overflow: hidden;
}

.btn--primary::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(-140%);
    pointer-events: none;
}

.btn--primary:hover::after {
    animation: btnShimmer .8s ease-out;
}

@keyframes btnShimmer {
    from {
        transform: translateX(-140%);
    }

    to {
        transform: translateX(240%);
    }
}

/* --- Bandeaux d’appel à l’action --------------------------------------- */
.cta-band {
    transition: transform .4s var(--ease-out), box-shadow .4s ease;
}

.cta-band:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

/* --- Alerte : rappel visuel discret ------------------------------------ */
.alert.is-visible {
    animation: alertPulse 1.2s var(--ease-out) 1;
}

@keyframes alertPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 162, 97, .45);
    }

    100% {
        box-shadow: 0 0 0 16px rgba(244, 162, 97, 0);
    }
}

/* --- FAQ et tableaux --------------------------------------------------- */
.faq__item {
    transition: border-color .3s ease, box-shadow .3s ease;
}

.faq__item:hover {
    border-color: rgba(14, 114, 132, .35);
    box-shadow: var(--shadow-sm);
}

.faq__item summary {
    transition: color .25s ease;
}

.faq__item summary:hover {
    color: var(--color-accent);
}

.faq__item[open] p {
    animation: contentIn .4s var(--ease-out) both;
}

@keyframes contentIn {
    from {
        opacity: 0;
        transform: translate3d(0, -4px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.table tbody tr {
    transition: background-color .25s ease;
}

.table tbody tr:hover {
    background-color: var(--color-surface);
}

/* --- Formulaires ------------------------------------------------------- */
.field input,
.field select,
.field textarea {
    transition: border-color .25s ease, box-shadow .25s ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: rgba(14, 114, 132, .45);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(14, 114, 132, .12);
}

/* --- Titres mot à mot (effet « rideau ») -------------------------------- */
.js .split {
    opacity: 1;
    transform: none;
    transition: none;
}

.js .split__word {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 0.06em;
    vertical-align: bottom;
}

.js .split__inner {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 108%, 0) rotate(3deg);
    transition:
        transform .8s var(--ease-out) var(--split-delay, 0ms),
        opacity .55s ease var(--split-delay, 0ms);
}

.js .split.is-visible .split__inner {
    opacity: 1;
    transform: none;
}

/* --- Barre de progression du défilement -------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 95;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent-light), var(--color-highlight));
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    will-change: transform;
}

/* --- Parallaxe et formes décoratives ----------------------------------- */
.hero {
    overflow: hidden;
}

.hero__inner {
    position: relative;
    z-index: 1;
}

.hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
    pointer-events: none;
}

.hero__blob--1 {
    top: -90px;
    right: 5%;
    width: 320px;
    height: 320px;
    background-color: rgba(255, 255, 255, .20);
    animation: floatY 13s ease-in-out infinite;
}

.hero__blob--2 {
    bottom: -70px;
    left: -50px;
    width: 240px;
    height: 240px;
    background-color: rgba(244, 162, 97, .30);
    animation: floatY 17s ease-in-out infinite reverse;
}

.hero__blob--3 {
    top: 38%;
    left: 46%;
    width: 170px;
    height: 170px;
    background-color: rgba(255, 255, 255, .14);
    animation: floatY 21s ease-in-out infinite;
}

@keyframes floatY {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -28px, 0);
    }
}

/* Sur petit écran, on allège les effets (perf + batterie) */
@media (max-width: 700px) {
    .hero__blob {
        animation: none;
        filter: blur(22px);
        opacity: .18;
    }
}

/* --- Bandeau de logos en défilement continu (marquee) ------------------ */
.marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
    will-change: transform;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__item {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 150px;
}

.marquee__item img {
    width: 100%;
    height: auto;
    opacity: .8;
    filter: grayscale(1);
    transition: filter .3s ease, opacity .3s ease, transform .4s var(--ease-out);
}

.marquee__item img:hover {
    opacity: 1;
    filter: none;
    transform: scale(1.06);
}

@keyframes marqueeScroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* --- Apparitions alternées (vague) dans les grilles ------------------- */
/* Vague d'apparition : décalage volontairement VERTICAL.
   Un décalage horizontal (+23 px vers la droite) élargissait la page et
   laissait un blanc à droite tant que l'élément n'était pas révélé. */
.js .grid--2 > :is(.panel, .card):nth-child(odd) {
    transform: translate3d(0, calc(var(--reveal-distance) * .35), 0);
}

.js .grid--2 > :is(.panel, .card):nth-child(even) {
    transform: translate3d(0, calc(var(--reveal-distance) * 1), 0);
}

.js .grid--4 > .card:nth-child(even),
.js .members > .member:nth-child(even) {
    transform: translate3d(0, calc(var(--reveal-distance) * 1.2), 0);
}

.js .members > .member:nth-child(4n + 3),
.js .grid--4 > .card:nth-child(4n + 3) {
    transform: translate3d(0, calc(var(--reveal-distance) * .6), 0);
}

.js .grid--2 > :is(.panel, .card).is-visible,
.js .grid--4 > .card.is-visible,
.js .members > .member.is-visible {
    transform: none;
}

/* --- Cartes : inclinaison 3D + halo qui suit le curseur ---------------- */
.js .card--tilt {
    position: relative;
    transform-style: preserve-3d;

    /* La transition de survol est posée par le JS (animations.js) afin de ne
       pas écraser la transition d’apparition de la carte. */
}

.js .card--tilt .card__media,
.js .card--tilt .card__icon,
.js .card--tilt .card__title {
    transform: translateZ(26px);
}

.js .card--tilt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(14, 114, 132, .16), transparent 62%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.js .card--tilt:hover::before {
    opacity: 1;
}

/* --- Parcours patient : ligne qui se dessine --------------------------- */
.steps {
    position: relative;
}

.steps::before {
    content: "";
    position: absolute;
    top: 42px;
    right: 12%;
    left: 12%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-highlight));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s var(--ease-out) .25s;
}

.steps.is-visible::before {
    transform: scaleX(1);
}

/* --- Statistiques : halo à l’apparition + fond animé ------------------- */
.section--dark {
    background-image: radial-gradient(circle at 20% 25%, rgba(18, 144, 159, .30), transparent 55%);
    background-size: 200% 200%;
    animation: gradientShift 20s ease-in-out infinite;
}

.stat.is-visible {
    animation: statGlow 1.1s var(--ease-out) 1;
}

@keyframes statGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 162, 97, .38);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(244, 162, 97, 0);
    }
}

/* --- Apparition de la page au chargement ------------------------------ */
.topbar {
    animation: pageIn .55s var(--ease-out) both;
}

.site-header {
    animation: pageIn .55s var(--ease-out) .06s both;
}

.site-main {
    animation: pageIn .7s var(--ease-out) .12s both;
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --- Bouton « Retour en haut » ----------------------------------------- */
.back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 80;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .35s ease, transform .35s var(--ease-out), visibility .35s, background-color .25s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.back-to-top:hover {
    background-color: var(--color-accent-dark);
    color: #fff;
    text-decoration: none;
}

/* --- Mouvement réduit : on désactive tout ------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js :where(
        .hero__eyebrow,
        .hero__title,
        .hero__text,
        .hero__actions,
        .hero__media,
        .breadcrumb,
        .page-hero__title,
        .page-hero__intro,
        .section__head,
        .card,
        .panel,
        .step,
        .member,
        .stat,
        .stat__value,
        .alert,
        .notice,
        .cta-band,
        .table,
        .faq__item,
        .logos,
        .hours li,
        .prose > *,
        .error-page
    ),
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .js .page-hero,
    .js .btn--primary:hover::after,
    .alert.is-visible {
        animation: none;
    }

    .card:hover,
    .step:hover,
    .member:hover,
    .stat:hover,
    .cta-band:hover,
    .nav__sublink:hover,
    .card:hover .card__media img,
    .member:hover .member__photo img {
        transform: none;
    }

    /* Valeurs ajoutées par les effets avancés */
    .js .split,
    .js .split__inner {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .js .grid--2 > :is(.panel, .card),
    .js .grid--4 > .card,
    .js .members > .member {
        transform: none;
    }

    .hero__blob,
    .marquee__track,
    .topbar,
    .site-header,
    .site-main,
    .section--dark,
    .stat.is-visible {
        animation: none;
    }

    .steps::before {
        transform: scaleX(1);
        transition: none;
    }

    .js .card--tilt::before,
    .scroll-progress {
        display: none;
    }
}