/* ==========================================================================
   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;
        /* Sans ce nowrap, .is-layout-flex garde son flex-wrap:wrap par défaut :
           avec une seule colonne par "ligne", chaque colonne ne stretch plus à
           la largeur du conteneur mais se dimensionne sur son contenu (shrink-to-fit),
           ce qui laisse déborder tout enfant flex/large (ex. un carousel) au lieu
           de le contraindre à 100% comme les autres blocs. */
        flex-wrap: nowrap !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;
}

/* Bouton : inverse texte/fond au survol, sans re-écrire le :hover à chaque bouton.
   Sur le bloc Bouton, ajouter la classe additionnelle : qs-btn-swap
   Choisir les couleurs Texte / Arrière-plan normalement dans l'éditeur (panneau Couleur) :
   l'inversion au survol est gérée en JS (js/custom.js, initBtnSwap) à partir de ces 2 couleurs. */
.qs-btn-swap .wp-block-button__link {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

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

/* --- IFRAME PROJET (pattern synchronisé "Iframe Projet") ---
   Iframe plein écran pour les 30 expériences interactives embarquées
   depuis uploads/. height:100vh est un repli immédiat (déborde un peu sous
   un header fixe) ; js/iframe-embed.js affine ensuite la hauteur exacte
   une fois chargé (soustrait la position du haut de l'iframe). */
.qs-iframe-embed {
    width: 100vw !important;
    height: 100vh !important;
    border: none;
    display: block;
    margin: 0;
    padding: 0;
}