/*
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.8.0
Text Domain: quick-swing
*/

/* ==========================================================================
   1. VARIABLES & SYSTÈME
   ========================================================================== */
:root {
    /* Tokens sémantiques — valeurs sources dans theme.json (palette + settings.custom),
       surchargeables par chaque variation de style. Les --qs-* ne sont que des alias. */
    --qs-neon: var(--wp--preset--color--accent, #00ffcc);
    --qs-neon-alt: var(--wp--preset--color--accent-alt, #ff2d78);
    --qs-bg: var(--wp--preset--color--base, #0a0a0a);
    --qs-contrast: var(--wp--preset--color--contrast, #ffffff);
    --qs-glass-bg: var(--wp--custom--glass-bg, rgba(255, 255, 255, 0.06));
    --qs-glass-border: var(--wp--custom--glass-border, var(--qs-neon-a15));
    --qs-glass-blur: var(--wp--custom--glass-blur, blur(15px));
    --qs-divider-fill: var(--wp--custom--divider-fill, var(--wp--preset--color--base, #0a0a0a));
    --qs-grain-opacity: var(--wp--custom--grain-opacity, 0.06);
    --header-height: 80px;
    --transition-base: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-fast: 0.18s 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);

    /* Intensité du glow — pilotée via Options Quick Swing (0 = aucun, 1 = défaut, 2 = max) */
    --qs-glow-intensity: var(--wp--custom--glow-intensity, 1);
    --qs-glow-4:  calc(4px  * var(--qs-glow-intensity));
    --qs-glow-8:  calc(8px  * var(--qs-glow-intensity));
    --qs-glow-12: calc(12px * var(--qs-glow-intensity));
    --qs-glow-15: calc(15px * var(--qs-glow-intensity));
    --qs-glow-16: calc(16px * var(--qs-glow-intensity));
    --qs-glow-20: calc(20px * var(--qs-glow-intensity));
    --qs-glow-24: calc(24px * var(--qs-glow-intensity));
    --qs-glow-30: calc(30px * var(--qs-glow-intensity));
    --qs-glow-32: calc(32px * var(--qs-glow-intensity));
    --qs-glow-40: calc(40px * var(--qs-glow-intensity));

    /* 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;
    text-wrap: pretty;
}

/* font-family des titres : gérée par theme.json (elements.heading) via
   var(--qs-font-title, Space Grotesk) — surchargeable par l'option qs_title_font
   et par les variations typographiques (styles/typography/). */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    color: var(--qs-neon);
}

h1, h2, h3,
.wp-block-heading:is(h1, h2, h3) {
    text-wrap: balance;
}

.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;
}

/* Skip link — accessibilité clavier */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    padding: 0.5rem 1.25rem;
    background: var(--qs-neon);
    color: #000;
    font-weight: 700;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border-radius: 0 0 6px 6px;
    z-index: 99999;
    transition: top var(--transition-fast);
    text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Focus visible — navigation clavier */
:focus-visible {
    outline: 2px solid var(--qs-neon);
    outline-offset: 3px;
    border-radius: 2px;
    box-shadow: 0 0 0 4px var(--qs-neon-a10);
}

/* ==========================================================================
   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: var(--qs-grain-opacity, 0.06);
    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;
}

/* ==========================================================================
   MESH GRADIENT — fond animé 4 blobs (activé via .qs-texture-mesh sur body)
   Technique : @property CSS → radial-gradient animé sur background-image
   ========================================================================== */
@property --qs-b1x { syntax: '<percentage>'; initial-value: 15%; inherits: false; }
@property --qs-b1y { syntax: '<percentage>'; initial-value: 60%; inherits: false; }
@property --qs-b2x { syntax: '<percentage>'; initial-value: 85%; inherits: false; }
@property --qs-b2y { syntax: '<percentage>'; initial-value: 25%; inherits: false; }
@property --qs-b3x { syntax: '<percentage>'; initial-value: 50%; inherits: false; }
@property --qs-b3y { syntax: '<percentage>'; initial-value: 80%; inherits: false; }
@property --qs-b4x { syntax: '<percentage>'; initial-value: 72%; inherits: false; }
@property --qs-b4y { syntax: '<percentage>'; initial-value: 12%; inherits: false; }

body.qs-texture-mesh {
    background-image:
        radial-gradient(ellipse 40% 35% at var(--qs-b1x) var(--qs-b1y),
            color-mix(in srgb, var(--qs-neon) 8%, transparent), transparent 100%),
        radial-gradient(ellipse 35% 40% at var(--qs-b2x) var(--qs-b2y),
            color-mix(in srgb, var(--qs-neon-alt) 7%, transparent), transparent 100%),
        radial-gradient(ellipse 45% 30% at var(--qs-b3x) var(--qs-b3y),
            color-mix(in srgb, var(--qs-neon) 5%, transparent), transparent 100%),
        radial-gradient(ellipse 30% 45% at var(--qs-b4x) var(--qs-b4y),
            color-mix(in srgb, var(--qs-neon-alt) 5%, transparent), transparent 100%);
    background-attachment: fixed;
    animation:
        qs-mesh-b1 25s ease-in-out infinite alternate,
        qs-mesh-b2 32s ease-in-out infinite alternate-reverse,
        qs-mesh-b3 20s ease-in-out infinite alternate,
        qs-mesh-b4 38s ease-in-out infinite alternate-reverse;
}

body.qs-texture-mesh::after {
    display: none !important;
}

@keyframes qs-mesh-b1 {
    0%   { --qs-b1x: 15%; --qs-b1y: 60%; }
    40%  { --qs-b1x: 28%; --qs-b1y: 35%; }
    100% { --qs-b1x:  8%; --qs-b1y: 72%; }
}
@keyframes qs-mesh-b2 {
    0%   { --qs-b2x: 85%; --qs-b2y: 25%; }
    50%  { --qs-b2x: 72%; --qs-b2y: 15%; }
    100% { --qs-b2x: 90%; --qs-b2y: 38%; }
}
@keyframes qs-mesh-b3 {
    0%   { --qs-b3x: 50%; --qs-b3y: 80%; }
    60%  { --qs-b3x: 38%; --qs-b3y: 62%; }
    100% { --qs-b3x: 62%; --qs-b3y: 88%; }
}
@keyframes qs-mesh-b4 {
    0%   { --qs-b4x: 72%; --qs-b4y: 12%; }
    45%  { --qs-b4x: 82%; --qs-b4y: 28%; }
    100% { --qs-b4x: 60%; --qs-b4y:  6%; }
}

@media (prefers-reduced-motion: reduce) {
    body.qs-texture-mesh { animation: 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 {
    margin: 0;
    padding: 0 2rem;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header-container > .wp-block-template-part {
    display: contents;
}

/* ==========================================================================
   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), filter var(--transition-base);
}

.glass-card:hover {
    border-color: var(--qs-neon-a30);
    transform: translateY(-5px);
    filter:
        drop-shadow(-1px 0 3px rgba(255, 0, 80, 0.22))
        drop-shadow( 1px 0 3px rgba(0, 180, 255, 0.22));
}

@media (prefers-reduced-motion: reduce) {
    .glass-card:hover { filter: none; }
}

.neon-glow {
    color: var(--qs-neon);
    text-shadow:
        0 0 var(--qs-glow-4)  var(--qs-neon),
        0 0 var(--qs-glow-16) var(--qs-neon-a80),
        0 0 var(--qs-glow-40) var(--qs-neon-a30);
    box-shadow: 0 0 var(--qs-glow-15) var(--qs-neon-a40);
}

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: background var(--transition-fast),
                box-shadow  var(--transition-fast),
                transform   var(--qs-mag-dur, 0.55s) var(--qs-mag-ease, cubic-bezier(0.23,1,0.32,1));
}

.wp-block-button.is-style-neon-swing .wp-block-button__link:hover {
    background: var(--qs-neon-a08);
    box-shadow: 0 0 var(--qs-glow-24) var(--qs-neon-a50), 0 8px var(--qs-glow-32) var(--qs-neon-a20);
}

/* ── Arrow kinétique boutons (inspiré Lottie arrow-06 shoot-through) ─── */
.wp-block-button.is-style-neon-swing .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.qs-btn-arrow-clip {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    min-width: 1.6em;
    align-self: stretch;
    flex-shrink: 0;
}
.qs-btn-arrow {
    display: inline-flex;
    align-items: center;
    will-change: transform;
    transform-origin: left center;
    line-height: 1;
}

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

.site-footer {
    padding: 0;
    background-color: var(--wp--preset--color--surface);
    background-image: linear-gradient(to top, var(--qs-neon-a04) 0%, transparent 60%);
    position: relative;
    border: none !important;
    overflow: hidden;
}

/* ── Zone marque ─────────────────────────────────────────────────────────── */
.footer-brand {
    padding: 4rem 5% 2.5rem;
}

.footer-brand-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-brand-left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-logo-display {
    font-family: var(--wp--preset--font-family--space-grotesk, 'Space Grotesk', system-ui, sans-serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--qs-neon);
    filter: drop-shadow(0 0 18px var(--qs-neon-a30));
    margin: 0 !important;
    display: inline-block;
    overflow: visible;
    transition: filter 0.4s ease;
}

.footer-logo-display:hover {
    filter: drop-shadow(0 0 30px var(--qs-neon-a50));
}

.footer-tagline {
    font-size: 0.875rem !important;
    color: color-mix(in srgb, var(--qs-contrast) 50%, transparent) !important;
    line-height: 1.7 !important;
    max-width: 360px;
    margin: 0 !important;
}

/* ── Réseaux sociaux ─────────────────────────────────────────────────────── */
.qs-social-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.qs-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--qs-glass-bg);
    border: 1px solid var(--qs-glass-border);
    color: color-mix(in srgb, var(--qs-contrast) 55%, transparent);
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    text-decoration: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.qs-social-link:hover {
    background: var(--qs-neon-a10);
    border-color: var(--qs-neon-a50);
    color: var(--qs-neon) !important;
    box-shadow: 0 0 var(--qs-glow-20) var(--qs-neon-a25), inset 0 0 10px var(--qs-neon-a08);
    transform: translateY(-3px);
}

.qs-social-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Footer 3 colonnes ───────────────────────────────────────────────────── */
.footer-body {
    padding: 0 5% 2.5rem;
}

.footer-body .wp-block-columns {
    align-items: flex-start;
    gap: 2rem;
}

.footer-body .wp-block-column {
    text-align: left;
}

.footer-body h4 {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--qs-neon) !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

.footer-body p,
.footer-body li {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--qs-contrast) 55%, transparent);
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.footer-body a {
    color: color-mix(in srgb, var(--qs-contrast) 55%, transparent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-body a:hover {
    color: var(--qs-neon);
}

.footer-body .wp-block-list {
    padding-left: 0;
    list-style: none;
}

/* ── Barre credits ───────────────────────────────────────────────────────── */
.footer-credits-bar {
    padding: 0 5% 1.5rem;
}

.footer-credits-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer-credits-bar .footer-copyright {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--qs-contrast) 38%, transparent);
    font-family: inherit;
    cursor: default;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 !important;
}

.footer-credits-made {
    font-size: 0.8rem !important;
    color: color-mix(in srgb, var(--qs-contrast) 38%, transparent) !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

.footer-credits-made a {
    color: color-mix(in srgb, var(--qs-contrast) 55%, transparent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-credits-made a:hover {
    color: var(--qs-neon);
}

.footer-heart {
    color: #ff4e6a;
    font-size: 0.85em;
    display: inline-block;
}

.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; }


.qs-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: color-mix(in srgb, var(--qs-bg) 85%, transparent);
    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; }

.qs-btt-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: rotate(-90deg);
    transform-origin: 24px 24px;
}

@property --qs-btt-progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}
.qs-btt-arc {
    stroke-dashoffset: calc(138.23px * (1 - var(--qs-btt-progress, 0)));
    transition: --qs-btt-progress 0.15s linear;
}

.footer-copyright {
    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));
}


/* ==========================================================================
   PAGE 404
   ========================================================================== */
.qs-404-hero {
    min-height: calc(100vh - var(--header-height));
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 4rem var(--wp--preset--spacing--md, 1.5rem);
    text-align: center;
    background: transparent !important;
}

.qs-404-recent {
    background: transparent !important;
    padding-block: 4rem;
}

.qs-404-code {
    position: relative !important;
    display: inline-flex !important;
    gap: 0.1em;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: clamp(7rem, 22vw, 14rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    font-family: var(--wp--preset--font-family--space-grotesk, 'Space Grotesk', sans-serif) !important;
    color: var(--qs-neon) !important;
    margin-block: 0 !important;
}

.qs-404-sub {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem) !important;
    font-weight: 300 !important;
    color: var(--wp--preset--color--contrast) !important;
    margin-block: 0 !important;
    letter-spacing: 0.02em;
}

.qs-404-desc {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.95rem !important;
    margin-block: 0 !important;
    max-width: 480px;
}

/* Split-flap tile */
.qs-flap {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 0.72em;
    height: 1em;
    background: #111;
    border-radius: 5px;
    border: 1px solid var(--qs-neon-a20);
    box-shadow: 0 0 50px var(--qs-neon-a10), 0 2px 20px rgba(0, 0, 0, 0.8);
}

.qs-flap::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: calc(50% - 1px);
    height: 2px;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10;
    pointer-events: none;
}

.qs-flap__top,
.qs-flap__bot {
    position: relative;
    height: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.qs-flap__ch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    font-size: 1em;
    line-height: 1;
    color: var(--qs-neon);
    text-shadow: 0 0 30px var(--qs-neon-a50);
    font-weight: 900;
    font-family: var(--wp--preset--font-family--space-grotesk, 'Space Grotesk', sans-serif);
    white-space: nowrap;
}

.qs-flap__top .qs-flap__ch { top: 0; }
.qs-flap__bot .qs-flap__ch { bottom: 0; }

.qs-flap__veil {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: #111;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    transform-origin: bottom center;
    z-index: 5;
}

.qs-flap__veil .qs-flap__ch { top: 0; }

.qs-flap__veil.is-flipping {
    animation: qs-flap-flip 0.14s ease-in;
}

@keyframes qs-flap-flip {
    from { transform: perspective(400px) rotateX(0deg); }
    to   { transform: perspective(400px) rotateX(-90deg); }
}

/* Barre de recherche 404 */
.qs-404-search {
    width: 100%;
    max-width: 480px;
}

.qs-404-search .wp-block-search__inside-wrapper {
    border: 1px solid var(--qs-neon-a30) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    backdrop-filter: blur(8px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.qs-404-search .wp-block-search__inside-wrapper:focus-within {
    border-color: var(--qs-neon) !important;
    box-shadow: 0 0 20px var(--qs-neon-a15);
}

.qs-404-search .wp-block-search__input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--wp--preset--color--contrast) !important;
    font-family: var(--wp--preset--font-family--jetbrains-mono, 'JetBrains Mono', monospace) !important;
    font-size: 0.85rem !important;
    padding: 0.85rem 1rem !important;
    flex: 1;
}

.qs-404-search .wp-block-search__input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.qs-404-search .wp-block-search__input:focus {
    box-shadow: 0 0 0 3px var(--qs-neon);
    outline: none;
}

.qs-404-search .wp-block-search__button {
    background: var(--qs-neon-a06) !important;
    border: none !important;
    border-left: 1px solid var(--qs-neon-a20) !important;
    border-radius: 0 !important;
    color: var(--qs-neon) !important;
    padding: 0.85rem 1.4rem !important;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s ease;
}

.qs-404-search .wp-block-search__button:hover {
    background: var(--qs-neon-a15) !important;
}

/* Scanlines + radial ambient sur le hero 404 */
.qs-404-hero {
    position: relative;
    isolation: isolate;
}
.qs-404-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 55% at 50% 38%, var(--qs-neon-a08) 0%, transparent 65%),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(0, 255, 204, .012) 3px,
            rgba(0, 255, 204, .012) 4px
        );
    z-index: -1;
    pointer-events: none;
}

/* Glow respirant après que les 3 chiffres soient posés */
.qs-flap-settled .qs-flap {
    animation: qs-flap-breathe 2.5s ease-in-out infinite;
}
.qs-flap-settled .qs-flap:nth-child(2) { animation-delay: .5s; }
.qs-flap-settled .qs-flap:nth-child(3) { animation-delay: 1s; }

@keyframes qs-flap-breathe {
    0%, 100% { box-shadow: 0 0 50px var(--qs-neon-a10), 0 2px 20px rgba(0,0,0,.8); }
    50%       { box-shadow: 0 0 90px var(--qs-neon-a25), 0 0 40px var(--qs-neon-a12), 0 2px 20px rgba(0,0,0,.8); }
}

/* Glitch aléatoire post-settle */
.qs-404-code.qs-flap-glitch {
    animation: qs-404-post-glitch .28s steps(4) forwards;
}
@keyframes qs-404-post-glitch {
    0%   { transform: translate(0, 0);      filter: none; }
    25%  { transform: translate(-5px, 1px); filter: hue-rotate(120deg) brightness(1.35); }
    50%  { transform: translate(4px, -1px); filter: hue-rotate(-60deg); }
    75%  { transform: translate(-2px, 0);   filter: brightness(1.15); }
    100% { transform: translate(0, 0);      filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .qs-flap-settled .qs-flap  { animation: none; }
    .qs-404-code.qs-flap-glitch { animation: none; }
}

/* Cartes articles (404, etc.) */
.post-card {
    overflow: hidden;
}

.post-card .wp-block-post-featured-image img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
}

.post-card__body {
    padding: 1.2rem 1.5rem 1.5rem;
}

.post-card__title {
    font-size: 1rem !important;
    margin-bottom: 0.45rem !important;
    color: var(--wp--preset--color--contrast) !important;
    line-height: 1.4 !important;
}

.post-card__title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.post-card__title a:hover {
    color: var(--qs-neon) !important;
}

.post-date {
    font-size: 0.73rem !important;
    color: rgba(255, 255, 255, 0.3) !important;
    font-family: var(--wp--preset--font-family--jetbrains-mono, 'JetBrains Mono', monospace) !important;
    margin: 0 !important;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   PAGE RÉSULTATS DE RECHERCHE
   ========================================================================== */

.qs-search-hero {
    padding: 3rem 0 2rem;
    background: transparent !important;
    border-bottom: 1px solid var(--qs-glass-border);
    margin-bottom: 2.5rem;
}
.qs-search-hero__label {
    font-family: var(--wp--preset--font-family--jetbrains-mono, 'JetBrains Mono', monospace);
    font-size: .68rem;
    color: var(--qs-neon);
    letter-spacing: .22em;
    margin-bottom: .75rem !important;
}
.qs-search-hero__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    font-weight: 800 !important;
    color: var(--wp--preset--color--contrast) !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

/* Carte résultat */
.qs-search-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0;
    background: var(--qs-glass-bg);
    border: 1px solid var(--qs-glass-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.qs-search-card:hover {
    border-color: var(--qs-neon-a35);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.qs-search-card .wp-block-post-featured-image {
    overflow: hidden;
    background: rgba(255,255,255,.03);
    min-height: 140px;
}
.qs-search-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.qs-search-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

/* Pas d'image : image absente ou figure vide → colonne pleine largeur */
.qs-search-card:not(:has(.wp-block-post-featured-image img)) {
    grid-template-columns: 1fr;
}

.qs-search-card__body {
    padding: 1.25rem 1.5rem;
    display: flex !important;
    flex-direction: column;
    gap: .4rem;
    background: transparent !important;
}

.qs-search-card .qs-search-card__terms {
    font-size: .68rem !important;
    color: var(--qs-neon) !important;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 !important;
}
.qs-search-card .qs-search-card__terms a {
    color: var(--qs-neon) !important;
    text-decoration: none !important;
}
.qs-search-card .qs-search-card__title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--contrast) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.qs-search-card .qs-search-card__title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .2s;
}
.qs-search-card:hover .qs-search-card__title a {
    color: var(--qs-neon) !important;
}
.qs-search-card .qs-search-card__date {
    font-size: .7rem !important;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
    color: rgba(255,255,255,.3) !important;
    margin: 0 !important;
    letter-spacing: .03em;
}
.qs-search-card .qs-search-card__excerpt {
    font-size: .88rem !important;
    color: rgba(255,255,255,.5) !important;
    margin: 0 !important;
    line-height: 1.55 !important;
    flex: 1;
}
.qs-search-card .qs-search-card__excerpt p { margin: 0 !important; }
.qs-search-card .qs-search-card__more {
    font-size: .78rem !important;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
    color: var(--qs-neon) !important;
    text-decoration: none !important;
    letter-spacing: .05em;
    margin: 0 !important;
    align-self: flex-start;
    border-bottom: 1px solid var(--qs-neon-a25);
    transition: border-color .2s;
}
.qs-search-card .qs-search-card__more:hover {
    border-color: var(--qs-neon);
}

/* État vide */
.qs-no-results {
    text-align: center;
    padding: 5rem 2rem;
    background: transparent !important;
}
.qs-no-results__label {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .68rem;
    color: rgba(255,255,255,.28);
    letter-spacing: .22em;
    margin-bottom: 1rem !important;
}
.qs-no-results__title {
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
    font-weight: 800 !important;
    color: var(--wp--preset--color--contrast) !important;
    margin: 0 0 1rem !important;
}
.qs-no-results__desc {
    color: rgba(255,255,255,.4) !important;
    font-size: .95rem !important;
    max-width: 420px;
    margin: 0 auto 2rem !important;
}

/* Formulaire de recherche (no-results + 404) */
.qs-search-form {
    max-width: 480px;
    margin: 0 auto !important;
}
.qs-search-form .wp-block-search__inside-wrapper {
    border: 1px solid var(--qs-neon-a30) !important;
    border-radius: 4px !important;
    background: rgba(0,0,0,.45);
    overflow: hidden;
    backdrop-filter: blur(8px);
    transition: border-color .3s, box-shadow .3s;
}
.qs-search-form .wp-block-search__inside-wrapper:focus-within {
    border-color: var(--qs-neon) !important;
    box-shadow: 0 0 20px var(--qs-neon-a15);
}
.qs-search-form .wp-block-search__input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--wp--preset--color--contrast) !important;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
    font-size: .85rem !important;
    padding: .85rem 1rem !important;
    flex: 1;
}
.qs-search-form .wp-block-search__input::placeholder { color: rgba(255,255,255,.45) !important; }
.qs-search-form .wp-block-search__input:focus {
    box-shadow: 0 0 0 3px var(--qs-neon);
    outline: none;
}
.qs-search-form .wp-block-search__button {
    background: var(--qs-neon-a06) !important;
    border: none !important;
    border-left: 1px solid var(--qs-neon-a20) !important;
    border-radius: 0 !important;
    color: var(--qs-neon) !important;
    padding: .85rem 1.4rem !important;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background .2s;
}
.qs-search-form .wp-block-search__button:hover { background: var(--qs-neon-a15) !important; }

/* Pagination */
.qs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.qs-pagination .wp-block-query-pagination-previous,
.qs-pagination .wp-block-query-pagination-next {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: .78rem;
    color: var(--qs-neon) !important;
    text-decoration: none;
    padding: .5rem 1rem;
    border: 1px solid var(--qs-neon-a30);
    border-radius: 4px;
    transition: background .2s, border-color .2s;
    letter-spacing: .05em;
}
.qs-pagination .wp-block-query-pagination-previous:hover,
.qs-pagination .wp-block-query-pagination-next:hover {
    background: var(--qs-neon-a08);
    border-color: var(--qs-neon-a50);
}
.qs-pagination .wp-block-query-pagination-numbers {
    display: flex;
    gap: .35rem;
    align-items: center;
}
.qs-pagination .page-numbers {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: .82rem;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    color: rgba(255,255,255,.45) !important;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all .2s;
}
.qs-pagination .page-numbers:hover {
    color: var(--qs-neon) !important;
    border-color: var(--qs-neon-a30);
    background: var(--qs-neon-a06);
}
.qs-pagination .page-numbers.current {
    color: var(--qs-neon) !important;
    border-color: var(--qs-neon-a50);
    background: var(--qs-neon-a08);
    font-weight: 700;
}
.qs-pagination .page-numbers.dots {
    border: none;
    color: rgba(255,255,255,.2) !important;
    pointer-events: none;
}

@media (max-width: 600px) {
    .qs-search-card {
        grid-template-columns: 1fr;
    }
    .qs-search-card .wp-block-post-featured-image {
        height: 160px;
    }
}

/* ==========================================================================
   CPT PROJETS
   ========================================================================== */

.qs-archive-header {
    padding: 3rem 0 2rem;
}

.qs-projet-card {
    overflow: hidden;
}

.qs-projet-card .wp-block-post-featured-image img,
.qs-projet-card .wp-block-image img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
}

.qs-projet-card__body {
    padding: 1.2rem 1.5rem 1.5rem;
}

.qs-projet-card__title {
    font-size: 1.05rem !important;
    margin-bottom: 0.4rem !important;
    color: var(--wp--preset--color--contrast);
}

/* Tags techno */
.qs-tag,
.qs-projet-tags a,
.qs-projet-techno-terms a {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--qs-neon-a08);
    border: 1px solid var(--qs-neon-a25);
    color: var(--qs-neon) !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--jetbrains-mono, 'JetBrains Mono', monospace);
    text-decoration: none !important;
    margin: 2px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.qs-tag:hover,
.qs-projet-tags a:hover,
.qs-projet-techno-terms a:hover {
    background: var(--qs-neon-a15);
    border-color: var(--qs-neon-a50);
}

/* Single projet */
.qs-single-projet {
    padding-top: 2rem;
}

.qs-projet-meta-card {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
}

.qs-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 1.2rem !important;
}

.qs-meta-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--qs-neon);
    font-family: var(--wp--preset--font-family--jetbrains-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
}

.qs-meta-value {
    font-size: 0.95rem;
    color: var(--wp--preset--color--contrast);
}

.qs-meta-link {
    color: var(--qs-neon) !important;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
}

/* Bindings (template single-projet) : les meta sont des paragraphes/boutons
   liés via core/post-meta, on neutralise les marges et le chrome du bouton
   pour retrouver le rendu "lien" des anciens shortcodes. */
.qs-meta-item p {
    margin: 0;
}

.qs-meta-item .wp-block-button__link {
    background: none;
    border: none;
    padding: 0;
    color: var(--qs-neon);
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.qs-meta-item .wp-block-button__link:hover { opacity: 0.7; }

/* Une meta vide est retirée du rendu par qs-core : on masque alors
   l'item entier (label orphelin). */
.qs-meta-item:not(:has(.qs-meta-value, .wp-block-button, .wp-block-post-terms)) {
    display: none;
}

/* ==========================================================================
   BARBA — Overlay "Neon Blade"
   ========================================================================== */
.qs-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: var(--qs-bg, #0a0a0a);
    transform: translateX(-100%);
    pointer-events: none;
    will-change: transform;
    clip-path: inset(0);
}
.qs-transition-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 3px;
    height: 100%;
    background: var(--qs-neon, #00ffcc);
    box-shadow:
        0 0 12px var(--qs-neon),
        0 0 40px var(--qs-neon-a50, rgba(0, 255, 204, 0.5)),
        0 0 80px var(--qs-neon-a20, rgba(0, 255, 204, 0.2));
}

.qs-meta-link:hover { opacity: 0.7; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.qs-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9900;
    background: rgba(0, 0, 0, 0.93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    pointer-events: none;
}
.qs-lightbox-overlay.is-open {
    pointer-events: all;
}
.qs-lightbox-img-wrap {
    width: calc(90vw - 180px);
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qs-lightbox-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}
.qs-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--qs-neon-a40);
    color: var(--qs-neon);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
}
.qs-lightbox-close:hover {
    background: var(--qs-neon-a10);
    box-shadow: 0 0 14px var(--qs-neon-a40);
}
.qs-lightbox-prev,
.qs-lightbox-next {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--qs-neon-a30);
    color: var(--qs-neon);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.qs-lightbox-prev:hover,
.qs-lightbox-next:hover {
    background: var(--qs-neon-a10);
    box-shadow: 0 0 18px var(--qs-neon-a40);
}
.qs-lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: var(--qs-neon-a50, rgba(0, 255, 204, 0.5));
}

/* ==========================================================================
   TABLE DES MATIÈRES (TOC)
   ========================================================================== */
.qs-toc { display: none; }

@media (min-width: 1400px) {
    .qs-toc {
        display: block;
        position: fixed;
        top: 50%;
        right: 1.5rem;
        transform: translateY(-50%);
        max-width: 200px;
        z-index: 200;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    .qs-toc.is-visible { opacity: 1; }

    .qs-toc-title {
        font-family: var(--wp--preset--font-family--jetbrains-mono, 'JetBrains Mono', monospace);
        font-size: 0.58rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--qs-neon);
        margin: 0 0 0.75rem 0;
    }

    .qs-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--qs-neon-a20); }

    .qs-toc a {
        display: block;
        padding: 0.3rem 0.75rem;
        font-family: var(--wp--preset--font-family--inter, system-ui);
        font-size: 0.7rem;
        color: var(--qs-contrast);
        opacity: 0.4;
        text-decoration: none;
        border-left: 1px solid transparent;
        margin-left: -1px;
        line-height: 1.35;
        transition: opacity 0.2s ease, color 0.2s ease, border-left-color 0.2s ease;
    }

    .qs-toc li.qs-toc-h3 a { padding-left: 1.25rem; font-size: 0.65rem; }
    .qs-toc a:hover { opacity: 0.7; }
    .qs-toc a.is-active { opacity: 1; color: var(--qs-neon); border-left-color: var(--qs-neon); }
}

/* ==========================================================================
   CURSEUR PERSONNALISÉ
   ========================================================================== */
body.qs-cursor-active,
body.qs-cursor-active * { cursor: none !important; }

.qs-cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--qs-neon);
    box-shadow: 0 0 10px var(--qs-neon), 0 0 24px var(--qs-neon-a30, rgba(0,255,204,0.3));
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    transition: opacity 0.2s ease;
}

.qs-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--qs-neon);
    background: rgba(0, 255, 204, 0.02);
    backdrop-filter: url(#qs-lens);
    -webkit-backdrop-filter: url(#qs-lens);
    pointer-events: none;
    z-index: 99998;
    will-change: transform;
    opacity: 0.6;
    transition: opacity 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, border-width 0.15s ease;
}

.qs-cursor-trail {
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    background: var(--qs-neon);
    pointer-events: none;
    z-index: 99997;
    will-change: transform;
}

.qs-cursor-burst {
    position: fixed;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--qs-neon);
    pointer-events: none;
    z-index: 99997;
    transform: translate(-50%, -50%) scale(0);
    animation: qs-burst 0.55s ease-out forwards;
}

@keyframes qs-burst {
    from { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    to   { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

/* Curseur — état hover (élément clicable) */
.qs-cursor-dot.is-hover { opacity: 0; }

.qs-cursor-ring.is-hover {
    /* taille inchangée : 32px */
    opacity: 1;
    background: rgba(0, 255, 204, 0.08);
    border-width: 2px;
    box-shadow:
        0 0 0 1px rgba(0, 255, 204, 0.2),
        0 0 18px var(--qs-neon-a50, rgba(0,255,204,0.5)),
        0 0 38px rgba(0, 255, 204, 0.2),
        inset 0 0 12px rgba(0, 255, 204, 0.06);
}

/* Point central qui remplace le dot disparu */
.qs-cursor-ring.is-hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--qs-neon);
    box-shadow: 0 0 8px var(--qs-neon);
}

.qs-cursor-trail.is-hover { opacity: 0 !important; transition: opacity 0.15s ease; }

.qs-cursor-dot.is-hidden,
.qs-cursor-ring.is-hidden    { opacity: 0 !important; }
.qs-cursor-trail.is-hidden   { opacity: 0 !important; }