/* ==========================================================================
   QUICK SWING - UTILS (LE DOSSIER SECRET DU TURFU)

Comment utiliser ces classes comme un pro dans Gutenberg ?
Tu peux combiner les classes dans le champ "Classe(s) CSS additionnelle(s)" de tes blocs.

Exemple 1 : Pour une carte d'article qui "pop", mets : glass rounded-md hover-lift
Exemple 2 : Pour un bouton néon arrondi, mets : neon-glow rounded-full text-gradient
Exemple 3 : Pour un titre tronqué sur 2 lignes : text-truncate
   ========================================================================== */


/* --- ESPACEMENTS (Margins & Paddings) --- */
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: 0.25rem !important; }
.mt-2  { margin-top: 0.5rem !important; }
.mt-3  { margin-top: 1rem !important; }
.mt-4  { margin-top: 1.5rem !important; }
.mt-5  { margin-top: 2rem !important; }
.mt-10 { margin-top: 5rem !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-2  { margin-bottom: 0.5rem !important; }
.mb-3  { margin-bottom: 1rem !important; }
.mb-4  { margin-bottom: 1.5rem !important; }
.mb-5  { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 5rem !important; }

.p-2 { padding: 1rem !important; }
.p-5 { padding: 2.5rem !important; }

/* --- VISIBILITÉ & RESPONSIVE --- */
/* Cache sur mobile (Tablettes incluses < 782px) */
@media (max-width: 781px) {
    .hide-mobile { display: none !important; }
    .wp-block-columns {
        flex-direction: column !important;
        gap: 2rem;
    }
}
/* Cache sur ordinateur (> 782px) */
@media (min-width: 782px) {
    .hide-desktop { display: none !important; }
}

/* --- EFFETS VISUELS "TURFU" --- */

/* Glassmorphism : Effet de verre dépoli */
.glass {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Texte avec dégradé Fluo */
.text-gradient {
    color: var(--qs-neon);
    display: inline-block;
}

/* Bordure qui brille discrètement */
.border-neon {
    border: 1px solid #00ffcc !important;
    box-shadow: inset 0 0 5px var(--qs-neon-a20);
}

/* --- INTERACTIONS & SURVOL (HOVER) --- */

/* Soulèvement au survol (Effet carte flottante) */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1) !important;
}
.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
}

/* Zoom léger sur image (à mettre sur un bloc Image ou Groupe) */
.hover-zoom {
    overflow: hidden;
}
.hover-zoom img {
    transition: transform 0.5s ease !important;
}
.hover-zoom:hover img {
    transform: scale(1.1);
}

/* Opacité douce au survol — transition définie sur la base pour l'aller ET le retour */
.hover-ghost {
    transition: opacity 0.3s ease;
}
.hover-ghost:hover {
    opacity: 0.7;
}

/* --- MISES EN PAGE RAPIDES (LAYOUT) --- */

/* Centrage parfait (Flexbox) */
.flex-center {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* Grille 2 colonnes — passe en 1 colonne sur très petits écrans */
.grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 480px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Force le texte à ne pas dépasser 2 lignes (tronqué avec ...) */
.text-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Images hover effect */
/* Conteneur de l'image */
.imghovereffect {
    overflow: hidden; /* Important pour que le zoom ne dépasse pas du cadre */
    border-radius: 12px; /* Optionnel : arrondit les angles pour un look plus doux */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
    cursor: pointer;
}

/* L'image elle-même */
.imghovereffect img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease !important;
    display: block;
}

/* État au survol (Hover) */
.imghovereffect:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* Ombre élégante et diffuse */
    transform: translateY(-5px); /* Soulève légèrement l'image */
}

.imghovereffect:hover img {
    transform: scale(1.08); /* Zoom subtil */
    filter: brightness(1.05) contrast(1.05); /* Rend l'image plus vibrante */
}

/* --- ARRONDIS --- */
.rounded-sm   { border-radius: 8px !important; }
.rounded-md   { border-radius: 15px !important; }
.rounded-lg   { border-radius: 30px !important; }
.rounded-full { border-radius: 9999px !important; }

/* --- MASQUES --- */
.mask-circle { clip-path: circle(50%); }


/* --- TEXTE DÉGRADÉ ANIMÉ --- */
.text-gradient-animated {
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--accent),
        var(--wp--preset--color--accent-2),
        var(--wp--preset--color--accent-alt),
        var(--wp--preset--color--accent)
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--wp--preset--color--accent); /* fallback */
    animation: gradient-flow 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .text-gradient-animated {
        animation: none;
        background-position: 0% center;
    }
}

@keyframes gradient-flow {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* --- PARALLAX MULTICOUCHE (3 profondeurs) ---
   Ajouter ces classes dans "Classe(s) CSS additionnelle(s)" dans Gutenberg.
   qs-parallax-bg  → plan arrière (lent, fond)
   qs-parallax-mid → plan intermédiaire (médium, éléments décoratifs)
   Le texte et le contenu de premier plan ne reçoivent aucune classe.
   Fonctionne mieux sur les sections hero (haut de page).
   Désactivé automatiquement sur mobile et si prefers-reduced-motion. */
.qs-parallax-bg,
.qs-parallax-mid {
    will-change: transform;
}