/* ============================================================
   fluidity.css — Easy-Schoolnet
   Améliorations de performance & de fluidité d'animation
   Règle d'or : n'animer que transform et opacity (GPU-only)
   ============================================================ */

/* --- Scroll fluide global --- */
html {
    scroll-behavior: smooth;
}

/* --- Accessibilité : respecter les préférences utilisateur --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Spinner reste visible mais ne tourne pas */
    .custom-spinner {
        animation: none !important;
        border: 3px solid #0093dd !important;
    }
}

/* ================================================================
   SPINNER CENTRALISÉ (remplace les duplications dans chaque page)
   ================================================================ */
.spinner-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.97);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.spinner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Spinner simplifié : border-based, GPU-only */
.custom-spinner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 4px solid rgba(0, 147, 221, 0.15);
    border-top-color: #0093dd;
    animation: fluidity-spin 0.75s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    will-change: transform;
    /* Supprimer les pseudo-éléments hérités qui causaient des animations doubles */
    background: transparent;
}

.custom-spinner::before,
.custom-spinner::after {
    display: none;
}

.spinner-text {
    color: #10183a;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    position: static; /* Annuler le position: relative avec ::after problématique */
}

/* Cacher l'animation de points "..." (performance) */
.spinner-text::after {
    display: none;
}

.spinner-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes fluidity-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   NAVBAR — transition optimisée (scroll-based shadow)
   ================================================================ */
.navbar {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    will-change: box-shadow;
}

.navbar.navbar-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ================================================================
   BOUTONS — transitions spécifiques (pas transition: all)
   ================================================================ */
.btn,
.btn-cta,
.btn-inscription,
.btn-filter-action {
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.22s ease,
                border-color 0.22s ease,
                color 0.22s ease !important;
}

/* ================================================================
   CARTES — transition GPU-only (transform + box-shadow)
   ================================================================ */
.step-card,
.subject-card,
.feature-card,
.testimonial-card,
.pricing-card,
.contact-form-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.hero-img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s ease !important;
    will-change: transform;
}

.hero-floating-element {
    will-change: transform;
}

/* Animations hero : utiliser uniquement translateY (GPU) */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* ================================================================
   TICKETS WIDGET (header)
   ================================================================ */
.tickets-compact-widget {
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s ease !important;
}

.buy-tickets-compact {
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s ease,
                background 0.22s ease !important;
}

/* ================================================================
   FOOTER — transitions spécifiques
   ================================================================ */
.footer-links a {
    transition: color 0.22s ease, transform 0.22s ease !important;
}

.footer-contact li {
    transition: transform 0.22s ease !important;
}

.contact-icon {
    transition: background-color 0.22s ease, color 0.22s ease !important;
}

.logo-wrapper {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ================================================================
   GO TOP BUTTON — transition optimisée
   ================================================================ */
.go-top {
    transition: opacity 0.3s ease,
                visibility 0.3s ease,
                transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s ease,
                background-color 0.22s ease !important;
}

/* ================================================================
   FORMULAIRES — transitions légères
   ================================================================ */
.form-control,
.input-group-text,
.accordion-button {
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                color 0.2s ease,
                background-color 0.2s ease !important;
}

/* ================================================================
   SUBJECT ICON — hover transform
   ================================================================ */
.subject-icon {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    will-change: transform;
}

/* ================================================================
   ANIMATIONS AOS — s'assurer du rendu GPU
   ================================================================ */
[data-aos] {
    will-change: opacity, transform;
}

/* ================================================================
   BADGE "MEILLEURE OFFRE" — réduction de l'animation pulse
   Les animations de type scale sont GPU-friendly
   ================================================================ */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}

/* ================================================================
   ACCORDION BOOTSTRAP — transition hauteur optimisée
   ================================================================ */
.accordion-collapse {
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ================================================================
   IMAGES — chargement progressif (lazy)
   ================================================================ */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* ================================================================
   SECTION SHIMMER — GPU-friendly (transform au lieu de background-position)
   ================================================================ */
@keyframes shimmer {
    0%   { transform: translateX(-200%) translateY(-200%) rotate(45deg); }
    100% { transform: translateX(200%)  translateY(200%)  rotate(45deg); }
}

/* ================================================================
   ANIMATIONS HERO SPHÈRES — correction will-change
   ================================================================ */
.hero-section::before,
.hero-section::after {
    will-change: transform;
}