/*
Theme Name: Quick Swing
Theme URI: https://nilsou.fr/
Author: Nilsou
Description: Thème sur mesure ultra-léger et moderne (Block-ready). Glassmorphism, Néons et animations Anime.js.
Version: 1.6.2
Text Domain: quick-swing
*/

/* ==========================================================================
   1. VARIABLES & SYSTÈME
   ========================================================================== */
:root {
    --qs-neon: var(--wp--preset--color--neon-cyan, #00ffcc);
    --qs-neon-alt: var(--wp--preset--color--neon-pink, #ff00ff);
    --qs-bg: var(--wp--preset--color--base, #0a0a0a);
    --qs-contrast: var(--wp--preset--color--contrast, #ffffff);
    --qs-glass-bg: rgba(255, 255, 255, 0.03);
    --qs-glass-border: rgba(255, 255, 255, 0.08);
    --qs-glass-blur: blur(15px);
    --qs-divider-fill: var(--wp--preset--color--base, #0a0a0a);
    --header-height: 80px;
    --header-logo-scale: 1;
    --header-nav-size: 0.85rem;
    --header-nav-spacing: 2.5px;
    --header-nav-opacity: 0.7;
    --transition-base: 0.4s cubic-bezier(0.23, 1, 0.32, 1);

    /* Variantes alpha du néon — color-mix pour cascade automatique */
    --qs-neon-a02: color-mix(in srgb, var(--qs-neon)  2%, transparent);
    --qs-neon-a04: color-mix(in srgb, var(--qs-neon)  4%, transparent);
    --qs-neon-a05: color-mix(in srgb, var(--qs-neon)  5%, transparent);
    --qs-neon-a06: color-mix(in srgb, var(--qs-neon)  6%, transparent);
    --qs-neon-a08: color-mix(in srgb, var(--qs-neon)  8%, transparent);
    --qs-neon-a10: color-mix(in srgb, var(--qs-neon) 10%, transparent);
    --qs-neon-a12: color-mix(in srgb, var(--qs-neon) 12%, transparent);
    --qs-neon-a15: color-mix(in srgb, var(--qs-neon) 15%, transparent);
    --qs-neon-a20: color-mix(in srgb, var(--qs-neon) 20%, transparent);
    --qs-neon-a25: color-mix(in srgb, var(--qs-neon) 25%, transparent);
    --qs-neon-a30: color-mix(in srgb, var(--qs-neon) 30%, transparent);
    --qs-neon-a35: color-mix(in srgb, var(--qs-neon) 35%, transparent);
    --qs-neon-a40: color-mix(in srgb, var(--qs-neon) 40%, transparent);
    --qs-neon-a50: color-mix(in srgb, var(--qs-neon) 50%, transparent);
    --qs-neon-a80: color-mix(in srgb, var(--qs-neon) 80%, transparent);

    /* Pile z-index */
    --z-grain:   100;
    --z-header:  3000;
    --z-overlay: 4000;
    --z-btt:     8000;
    --z-burger:  9999;
}

/* ==========================================================================
   2. RÉGLAGES DE BASE & LAYOUT
   ========================================================================== */
html {
    background-color: var(--qs-bg);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    background-color: var(--qs-bg);
    color: var(--qs-contrast);
    font-family: var(--wp--preset--font-family--inter, system-ui);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    line-height: 1.6;
    margin: 0;
}

.site-main {
    margin-top: calc(var(--header-height));
    /* Padding supprimé pour permettre le Fullwidth réel */
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--qs-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, transparent, var(--qs-neon), transparent);
    border-radius: 20px;
}

/* ==========================================================================
   ALIGNEMENTS GUTENBERG — Grande largeur & Pleine largeur
   useRootPaddingAwareAlignments gère les variables CSS, on cible les classes.
   ========================================================================== */

/* Grande largeur (wide) */
.alignwide {
    max-width: var(--wp--style--global--wide-size, 1200px) !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Pleine largeur (full) — sort du conteneur sur toute la fenêtre */
.alignfull {
    max-width: 100vw !important;
    width:     100vw !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Pleine largeur dans l'éditeur FSE — corrige le contexte iframe */
.editor-styles-wrapper .alignfull {
    margin-left:  calc(-1 * var(--wp--style--root--padding-left, 1rem)) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem)) !important;
    width: calc(100% + var(--wp--style--root--padding-left, 1rem) + var(--wp--style--root--padding-right, 1rem)) !important;
    max-width: none !important;
}

/* ==========================================================================
   GRAIN OVERLAY
   ========================================================================== */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    background-repeat: repeat;
}

body.block-editor-page::after,
body.wp-admin::after {
    display: none;
}

/* ==========================================================================
   3. STRUCTURE HEADER
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    transition: height 0.5s var(--transition-base), padding 0.5s var(--transition-base);
    padding: 1.5rem 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* ==========================================================================
   4. EFFETS SIGNATURES
   ========================================================================== */
.glass-card, .is-style-glass {
    background: var(--qs-glass-bg) !important;
    backdrop-filter: var(--qs-glass-blur);
    -webkit-backdrop-filter: var(--qs-glass-blur);
    border: 1px solid var(--qs-glass-border);
    border-radius: 24px;
    padding: 2.5rem;
    transition: transform var(--transition-base), border-color var(--transition-base);
}

.glass-card:hover {
    border-color: var(--qs-neon-a30);
    transform: translateY(-5px);
}

.neon-glow {
    color: var(--qs-neon);
    text-shadow: 0 0 15px var(--qs-neon-a50);
}

hr.wp-block-separator {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--qs-neon), transparent);
    opacity: 0.6;
}

/* ==========================================================================
   5. COMPOSANTS ET BOUTONS
   ========================================================================== */
.wp-block-button.is-style-neon-swing .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--qs-neon);
    color: var(--qs-neon);
    border-radius: 4px;
    padding: 1rem 2.5rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    transition: all var(--transition-base);
}

.wp-block-button.is-style-neon-swing .wp-block-button__link:hover {
    background: var(--qs-neon-a05);
    box-shadow: 0 0 20px var(--qs-neon-a40);
    transform: scale(1.02);
}

/* ==========================================================================
   6. ANIMATIONS & FOOTER & BTT
   ========================================================================== */
.js .fade-up { opacity: 0; transform: translateY(30px); will-change: transform, opacity; }
.js .fade-up.is-visible { opacity: 1; transform: translateY(0); }

.site-footer {
    padding: 3rem 5%;
    background: linear-gradient(to top, var(--qs-neon-a02) 0%, transparent 100%);
    position: relative;
    text-align: center;
    border: none !important;
}

.footer-separator {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--qs-neon), transparent) !important;
    box-shadow: 0 0 15px var(--qs-neon);
    margin: 0 auto 2.5rem !important;
    width: 100%;
    max-width: 1200px;
    opacity: 0.6;
}

.no-btt .qs-back-to-top { display: none !important; }

.is-leaving { opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }

.qs-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--qs-neon-a40);
    background: rgba(4, 4, 4, 0.85);
    backdrop-filter: blur(12px);
    color: var(--qs-neon);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-btt);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.qs-back-to-top.is-visible { opacity: 1; pointer-events: all; }

.footer-copyright {
    background: linear-gradient(90deg, #00ffcc, #0099ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #00ffcc;
    display: inline-block;
    text-align: center;
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    line-height: 1.1;
    cursor: pointer;

    /* Masque de base */
    -webkit-mask-image: linear-gradient(110deg, rgba(0,0,0, 0.4) 40%, rgba(0,0,0, 1) 50%, rgba(0,0,0, 0.4) 60%);
    mask-image: linear-gradient(110deg, rgba(0,0,0, 0.4) 40%, rgba(0,0,0, 1) 50%, rgba(0,0,0, 0.4) 60%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    --qs-sweep-x: 150%;
    -webkit-mask-position: var(--qs-sweep-x) 0%;
    mask-position: var(--qs-sweep-x) 0%;
    margin-block-start: 0;
    transition: filter 0.5s ease;
}

.footer-copyright:hover {
    filter: drop-shadow(0 0 15px var(--qs-neon-a80));
}

@keyframes shiny-sweep {
    0%   { -webkit-mask-position: 150% 0%; mask-position: 150% 0%; }
    100% { -webkit-mask-position: -50% 0%; mask-position: -50% 0%; }
}