/* ==========================================================================
   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 {
    background: linear-gradient(90deg, #00ffcc, #0099ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Lueur Néon (idéal pour les boutons ou images) */
.neon-glow {
    box-shadow: 0 0 15px var(--qs-neon-a40) !important;
}

/* 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%); }