/* ─── FONTS AUTO-HÉBERGÉES — Plus Jakarta Sans ───────────────────────────── */
/* Remplace Google Fonts CDN — chemin relatif depuis css/ vers assets/fonts/ */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/plus-jakarta-sans-v12-latin-200.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: optional;
}

/* ── Fallback métriquement ajusté — réduit le FOUT sur toutes les pages ── */
@font-face {
    font-family: 'Plus Jakarta Sans Fallback';
    src: local('Arial');
    font-weight: 400 700;
    ascent-override: 96%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 104%;
}



/* --- PAGE INDEX / --- */








                                                                            /* --- PAGE MUSIQUES / --- */

                                                                            /* Cache le curseur UNIQUEMENT au survol de l'iFrame */
iframe:hover ~ #cursor,
.audio-card iframe:hover ~ #cursor {
    opacity: 0 !important;
}

/* Si votre curseur est à la racine du body, on utilise cette règle plus moderne */
body:has(iframe:hover) #cursor {
    opacity: 0;
}

/* Restaure le curseur normal sur les iframes des cartes musique */
@media (pointer: fine) {
    .audio-card iframe {
        cursor: auto !important;
    }
}

/* Morphing curseur → caret au survol des champs de saisie */
input, textarea, select {
    cursor: none !important;
}
input[type="checkbox"], input[type="radio"] {
    cursor: none !important;
}


/* Stylisation du lecteur audio natif */


.custom-audio-player {
    height: 40px;
    filter: invert(100%) hue-rotate(180deg) brightness(1.5); /* Inverse les couleurs pour qu'il soit blanc sur fond noir */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Grille des lecteurs */
.audio-grid {
    display: grid;
    /* Crée 3 colonnes égales sur PC, 1 seule sur mobile */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

/* Cartes individuelles */
.audio-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 30px;
    /* Sortie très douce (quand la souris quitte) */
    transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 2.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 2.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 2.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.audio-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.20);
    transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 1.6s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 1.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Boutons de plateforme */
.platform-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px; /* Espace important entre l'icône et le texte */
    padding: 18px 25px; /* Augmentation du padding pour un look plus premium */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.platform-btn {
    overflow: hidden;
    height: 58px; /* fixe la hauteur une bonne fois pour toutes */
}

.platform-btn:hover img {
    filter: brightness(0) !important; /* noir au hover */
}


.platform-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: block;
}


.platform-btn:hover {
    background: white;
    color: black;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}


/* --- VARIABLES ET BASE --- */
:root { --bg-dark: #050505; --accent: #ffffff; }
body { 
    font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', sans-serif; 
    background-color: var(--bg-dark); 
    color: #eeeeee; 
    overflow-x: hidden; 
}

/* --- CURSEUR --- */
#cursor {
    width: 15px; height: 15px; background: #fff; border-radius: 50%; position: fixed;
    pointer-events: none; z-index: 10001; mix-blend-mode: difference; overflow: visible;
    box-shadow: 0 0 0 0 transparent;
    transition: transform      0.25s cubic-bezier(0.4,0,0.2,1),
                width          0.25s cubic-bezier(0.4,0,0.2,1),
                height         0.25s cubic-bezier(0.4,0,0.2,1),
                border-radius  0.25s cubic-bezier(0.4,0,0.2,1),
                background     0.25s cubic-bezier(0.4,0,0.2,1),
                box-shadow     0.25s cubic-bezier(0.4,0,0.2,1),
                opacity        0.35s ease;
    display: none;
    transform: translate(-50%, -50%);
    /* Invisible au chargement : main.js le révèle au premier mousemove */
    opacity: 0;
}
#cursor::before, #cursor::after {
    content: '';
    position: absolute;
    width: 9px; height: 2px;
    background: #fff;
    border-radius: 1px;
    left: 50%; transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.15s ease 0.1s;
}
#cursor::before { top: -1px; }
#cursor::after  { bottom: -1px; }

@media (pointer: fine) {
    body { cursor: none; }
    * { cursor: none !important; }
    .swiper, .swiper * { cursor: none !important; }
    #cursor { display: block; }

    /* --- Curseur de saisie (I-beam) --- */
    #cursor.text-cursor {
        width: 2px !important;
        height: 20px !important;
        border-radius: 1px !important;
        transform: translate(-50%, -50%) !important;
    }
    #cursor.text-cursor::before,
    #cursor.text-cursor::after {
        opacity: 1;
    }

    /* --- Curseur de pointage (bulle agrandie) --- */
    #cursor.pointer-cursor {
        transform: translate(-50%, -50%) scale(5) !important;
    }

    /* --- Curseur de glissement (grab) --- */
    #cursor.grab-cursor {
        width: 34px !important;
        height: 10px !important;
        border-radius: 5px !important;
        transform: translate(-50%, -50%) !important;
    }
    #cursor.grab-cursor::before,
    #cursor.grab-cursor::after {
        width: 6px !important;
        height: 10px !important;
        border-radius: 0 !important;
        top: 50% !important;
        bottom: auto !important;
        opacity: 1 !important;
        transition: opacity 0.15s ease, width 0.2s ease, transform 0.2s ease !important;
    }
    #cursor.grab-cursor::before {
        left: -9px !important;
        transform: translateY(-50%) !important;
        clip-path: polygon(100% 0%, 0% 50%, 100% 100%) !important;
    }
    #cursor.grab-cursor::after {
        left: auto !important;
        right: -9px !important;
        transform: translateY(-50%) !important;
        clip-path: polygon(0% 0%, 100% 50%, 0% 100%) !important;
    }

    /* --- Curseur en cours de glissement (grabbing) --- */
    #cursor.grabbing-cursor {
        width: 22px !important;
        height: 10px !important;
        border-radius: 5px !important;
        transform: translate(-50%, -50%) !important;
    }
    #cursor.grabbing-cursor::before,
    #cursor.grabbing-cursor::after {
        opacity: 0 !important;
    }
}


/* --- Point central dans la bulle (indicateur de survol cliquable) --- */
#cursor-hand {
    position: fixed;
    width: 8px;
    height: 8px;
    pointer-events: none;
    z-index: 10001;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.75), 0 0 0 1.5px rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.2s ease;
}
#cursor-hand.visible { opacity: 1; }

/* --- Animation diaphragme au clic (SVG généré en JS) --- */
/* --- DROPDOWN MENU (menu déroulant hors nav) --- */
#dropdown-menu {
    display: none;
    position: fixed;
    z-index: 9998;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 10px;
    min-width: 200px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}

/* LE PONT INVISIBLE : empêche le menu de se fermer lors du passage de la souris */
#dropdown-menu::before {
    content: "";
    position: absolute;
    top: -30px;   /* ← était -20px */
    left: -20px;  /* ← élargit aussi sur les côtés */
    right: -20px; /* ← élargit aussi sur les côtés */
    height: 30px; /* ← était 20px */
    background: transparent;
}

.dropdown-inner {
    background: rgba(10, 10, 10, 0.9); /* Fond sombre légèrement transparent */
    backdrop-filter: blur(20px); /* Effet de flou moderne */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure très fine */
    border-radius: 20px;
    padding: 10px;
    min-width: 200px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

/* Animations */
@keyframes slideUpMenu {
    from { 
        opacity: 0; 
        transform: translateX(-50%) translateY(6px) scale(0.98); 
    }
    to { 
        opacity: 1; 
        transform: translateX(-50%) translateY(0) scale(1); 
    }
}

#dropdown-menu.is-entering {
    animation: slideUpMenu 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#dropdown-menu.is-leaving {
    animation: slideDownMenu 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes slideDownMenu {
    from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    to   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.95); }
}

/* Style des liens dans le menu */
.dropdown-item {
    display: block;
    padding: 14px 18px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    letter-spacing: 0.25em;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 12px;
    text-decoration: none;
    position: relative;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    padding-left: 24px; /* Petit décalage vers la droite au survol */
}

/* Petit point indicateur au survol d'un item */
.dropdown-item::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 4px;
    height: 4px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.dropdown-item:hover::after {
    transform: translateY(-50%) scale(1);
}

@keyframes verticalFade {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Toggle Expertises mobile : pas de tiret, même alignement que les <a> ── */
/* visibility:hidden garde l'espace du ::before identique aux autres mobile-link → alignement parfait */
#mobile-expertises-toggle::before,
#mobile-expertises-toggle:hover::before { visibility: hidden; margin-left: -10px; margin-right: 0; opacity: 0; }
#mobile-expertises-toggle:hover         { transform: none; }
#mobile-expertises-toggle.is-open       { transform: translateX(10px); }

/* ── Sous-liens Expertises : tiret au survol ── */
#mobile-expertises-sub a {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
#mobile-expertises-sub a::before {
    content: "—";
    opacity: 0;
    margin-left: -16px;
    transition: all 0.3s ease;
    color: rgba(255,255,255,0.8);
}
#mobile-expertises-sub a:hover {
    transform: translateX(6px);
    opacity: 1 !important;
}
#mobile-expertises-sub a:hover::before {
    opacity: 1;
    margin-left: -24px;
    margin-right: 8px;
}

/* ── Promo hero : reveal ligne par ligne ── */
.promo-inner {
    transform: translateY(115%);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}
#promo-hero.is-visible .promo-mask:nth-child(1) .promo-inner { transform: translateY(0); transition-delay: 0s; }
#promo-hero.is-visible .promo-mask:nth-child(2) .promo-inner { transform: translateY(0); transition-delay: 0.14s; }
#promo-hero.is-visible .promo-mask:nth-child(3) .promo-inner { transform: translateY(0); transition-delay: 0.28s; }
#promo-hero.is-visible .promo-mask:nth-child(4) .promo-inner { transform: translateY(0); transition-delay: 0.55s; }
#promo-hero.is-visible .promo-mask:nth-child(6) .promo-inner { transform: translateY(0); transition-delay: 0.75s; }
.promo-sep-mobile { display: flex; }

/* ── Desktop : séparateur mobile masqué, espace entre les deux paragraphes ── */
@media (min-width: 768px) {
    .promo-sep-mobile { display: none !important; }
    .promo-mask:nth-child(4) { margin-bottom: 2.5rem; }
}

/* Séparateur — lignes qui s'étendent */
.promo-sep-line {
    height: 1px;
    background: rgba(255,255,255,0.3);
    width: 0;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.42s;
}
#promo-hero.is-visible .promo-sep-line { width: 60px; }

/* Losange central */
.promo-sep-diamond {
    width: 5px; height: 5px;
    border: 1px solid rgba(255,255,255,0.35);
    transform: rotate(45deg) scale(0);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.5s;
    flex-shrink: 0;
}
#promo-hero.is-visible .promo-sep-diamond { transform: rotate(45deg) scale(1); }

/* ── Texte creux (outline) ── */
.text-hollow {
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.92);
    color: transparent;
}

/* ── Section logos clients ── */
.client-logo-slot {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.client-logo-slot img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1) brightness(1.6);
    opacity: 0.85;
}
.client-logo-slot .logo-placeholder {
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,0.25);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ── Dropdown "Plus" (même style que les autres dropdowns) ── */
#dropdown-menu-more {
    display: none;
    position: fixed;
    z-index: 9998;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 10px;
    min-width: 180px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}
#dropdown-menu-more::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -20px;
    right: -20px;
    height: 30px;
    background: transparent;
}
#dropdown-menu-more.is-entering {
    animation: slideUpMenu 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#dropdown-menu-more.is-leaving {
    animation: slideDownMenu 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ── Dropdown Expertises (même style que #dropdown-menu) ── */
#dropdown-menu-expertises {
    display: none;
    position: fixed;
    z-index: 9998;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 10px;
    min-width: 230px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}
#dropdown-menu-expertises::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -20px;
    right: -20px;
    height: 30px;
    background: transparent;
}
#dropdown-menu-expertises.is-entering {
    animation: slideUpMenu 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#dropdown-menu-expertises.is-leaving {
    animation: slideDownMenu 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}


/* --- SOUS-LIGNAGE AU SURVOL --- */
.underline-hover {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}
/* ── Lien nav page active ── */
@keyframes nav-haptic {
    0%   { transform: scale(1); }
    14%  { transform: scale(0.95); }  /* légère compression */
    42%  { transform: scale(1.03); }  /* micro rebond */
    68%  { transform: scale(0.99); }  /* amortissement */
    100% { transform: scale(1); }
}
@keyframes nav-active-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes nav-glow-travel {
    0%   { left: -22px; opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.nav-active {
    display: inline-block;
    position: relative;
    color: white !important;
    text-shadow:
        0 0 8px  rgba(255,255,255,0.95),
        0 0 22px rgba(255,255,255,0.55),
        0 0 60px rgba(255,255,255,0.22);
    animation:
        nav-active-fadein 0.45s ease-out 0s both,
        nav-haptic        0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s both;
}
/* Spot lumineux animé derrière le mot */
.nav-active::before {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 0;
    width: 22px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.75) 0%, transparent 70%);
    filter: blur(9px);
    animation: nav-glow-travel 5s ease-in-out 0.45s infinite both;
    pointer-events: none;
}
.nav-active svg {
    color: white;
}

/* ── Vidéo de fond — fondu doux à l'entrée ── */
@keyframes video-bg-fadein {
    from { opacity: 0; }
    to   { opacity: 0.2; }
}
@keyframes video-bg-fadein-15 {
    from { opacity: 0; }
    to   { opacity: 0.15; }
}
.video-bg-fade {
    animation: video-bg-fadein 2.5s ease-out forwards;
}
.video-bg-fade-15 {
    animation: video-bg-fadein-15 2.5s ease-out forwards;
}

.underline-hover::after {
    content: ''; 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100%; 
    height: 1px;
    background-color: white; 
    transform: scaleX(0); 
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .underline-hover::after, 
.underline-hover:hover::after { 
    transform: scaleX(1); 
    transform-origin: left; 
}

.mobile-link { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease; display: inline-block; }
.mobile-link:hover { transform: scale(1.06); color: #ffffff; }

.text-shimmer { 
    background: linear-gradient(to right, #ffffff 20%, #666666 50%, #ffffff 80%); 
    background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    animation: shimmer-swipe 5s linear infinite; display: inline-block; 
}
@keyframes shimmer-swipe { to { background-position: 200% center; } }

.btn-rounded {
    border-radius: 9999px;
    padding: 14px 28px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s ease,
                opacity 0.3s ease;
}
/* Reflet lumineux qui traverse au hover */
.btn-rounded::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.22) 50%,
        transparent 70%
    );
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-rounded:hover::after { left: 130%; }
.btn-rounded:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.btn-rounded:active {
    transform: translateY(0px) scale(0.97);
    box-shadow: none;
    transition-duration: 0.12s;
}
/* Boutons déjà animés : on ne double pas le scale */
.btn-rounded.hover\:scale-105:hover,
.btn-rounded.hover\:scale-110:hover {
    transform: translateY(-2px) scale(1.03);
}
/* ── Menu mobile : bouton Contact — shrink au press ──
   scale(1) explicite au repos/hover pour neutraliser tout scale-up Tailwind.
   :active presse rapide (0.07s), retour élastique via cubic-bezier. */
#mobile-menu .btn-rounded        { transform: scale(1) !important; box-shadow: none !important; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1) !important; }
#mobile-menu .btn-rounded:hover  { transform: scale(1) !important; }
#mobile-menu .btn-rounded:active { transform: scale(0.94) !important; transition-duration: 0.1s !important; }
#mobile-menu .btn-rounded::after { display: none; }

/* ── Menu mobile : icônes réseaux — même logique shrink ── */
#mobile-menu a.transition.hover\:scale-110        { transform: scale(1) !important; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1) !important; }
#mobile-menu a.transition.hover\:scale-110:hover  { transform: scale(1) !important; }
#mobile-menu a.transition.hover\:scale-110:active { transform: scale(0.86) !important; transition-duration: 0.1s !important; }

/* ── Éléments Tailwind hover:scale sans transition custom ── */
a.hover\:scale-105, a.hover\:scale-110,
button.hover\:scale-105, button.hover\:scale-110 {
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) !important;
}
#cart-icon-mobile.hover\:scale-110 {
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) !important;
}

/* Conteneur qui masque le débordement */
.reveal-box {
    display: block;
    position: relative;
}

/* L'animation personnalisée pour AOS */
[data-aos="footer-reveal"] {
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
    transition-property: transform, opacity;
}

[data-aos="footer-reveal"].aos-animate {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Style additionnel pour les champs du formulaire au focus */
form input:focus, form textarea:focus {
    background: rgba(245,238,250,0.85) !important;
    box-shadow: inset 0 3px 7px rgba(0,0,0,0.13), inset 0 1px 3px rgba(0,0,0,0.09) !important;
    color: rgba(0,0,0,0.88) !important;
}

                        /* Footer - infos et boutons réseaux sociaux */


/* Animation de battement discret */
@keyframes logoPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Style des liens réseaux dans le footer */
footer .group:hover svg {
    animation: logoPulse 1.5s ease-in-out infinite;
    color: #1100ff;
    /* Effet de lueur (Glow) */
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
}

/* Transition fluide pour le retour à l'état normal */
footer svg {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Effets au survol par plateforme */
footer .group:hover span { color: rgb(255, 255, 255); }


/* On cible les chemins (path) à l'intérieur des SVG pour forcer la couleur */
footer svg, .mobile-link svg {
    transition: all 0.4s ease-in-out !important;
}

/* YouTube : Rouge Soft (Hex: #CD1A2B) */
.group:hover .logo-youtube, 
.mobile-link:hover .logo-youtube { 
    color: #CD1A2B !important; 
    fill: #CD1A2B !important; /* Force le remplissage si currentColor échoue */
    filter: drop-shadow(0 0 8px rgba(205, 26, 43, 0.4)) !important;
    animation: logoPulse 1.5s infinite;
}

/* LinkedIn : Bleu Soft */
.group:hover .logo-linkedin, 
.mobile-link:hover .logo-linkedin { 
    color: #0077B5 !important; 
    fill: #0077B5 !important;
    filter: drop-shadow(0 0 8px rgba(0, 119, 181, 0.4)) !important;
    animation: logoPulse 1.5s infinite;
}

/* Instagram : Rose Soft */
.group:hover .logo-instagram, 
.mobile-link:hover .logo-instagram { 
    color: #e18530 !important; 
    fill: #30e156 !important;
    filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.4)) !important;
    animation: logoPulse 1.5s infinite;
}

/* Spotify : vert Soft */
.group:hover .logo-spotify, 
.mobile-link:hover .logo-spotify { 
    color: #E1306C !important; 
    fill: #E1306C !important;
    filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.4)) !important;
    animation: logoPulse 1.5s infinite;
}

.social-container a {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: fit-content; /* Empêche le texte de se replier sur lui-même */
}

/* --- AJUSTEMENT MOBILE des boutons de réseaux sociaux--- */
@media (max-width: 768px) {
    .social-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 5px !important; /* Espace minimal pour mobile */
        width: 100% !important;
    }
    
    .social-container a {
        flex: 1 !important; /* Partage l'espace sur mobile uniquement */
        min-width: 0 !important;
    }

    .social-container span {
        font-size: 11px !important; /* Texte plus petit pour éviter les chevauchements */
        letter-spacing: 0.05em !important;
        white-space: nowrap; /* Empêche le texte de passer sur deux lignes */
    }
    
    .social-container svg {
        width: 26px !important;
        height: 26px !important;
    }
}


                            /* --- NAVIGATION & MENU MOBILE --- */

/* --- MENU MOBILE SCROLLABLE --- */

/* La zone interne du menu : flex column, prend toute la hauteur,
   avec padding déjà géré par Tailwind (pt-20 px-8).
   On la rend scrollable si son contenu dépasse.
   padding-left : laisse la place au tiret (::before) qui sort sur la gauche */
.menu-scroll-area {
    flex: 1;
    overflow-y: auto; /* scrollbar uniquement quand le contenu dépasse */
    overflow-x: hidden;
    min-height: 0;
    padding-left: 20px;
    /* Scrollbar discrète */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    /* Padding bas — espace sous le dernier élément + safe area pour la barre d'URL */
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    /* Défilement tactile (Android / iOS) */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    pointer-events: auto;
    will-change: scroll-position;
}

.menu-scroll-area::-webkit-scrollbar {
    width: 3px;
}

.menu-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.menu-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 99px;
}

/* Dégradé masquant en haut pour indiquer qu'on peut scroller vers le haut */
.menu-scroll-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
    /* Caché par défaut, affiché si le menu est trop petit */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* On l'affiche via JS quand le scroll est disponible — voir main.js */
.menu-scroll-fade.visible {
    opacity: 1;
}




/* --- EFFET TIRET (Menu Mobile) --- */
.mobile-link {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    padding: 12px 20px; /* Agrandit la hitbox (haut/bas et gauche) */
    width: 100%;        /* Le lien prend toute la largeur pour cliquer plus facilement */
    margin-left: -20px; /* Compense le padding pour l'alignement visuel */
}

/* La ligne de séparation */
.menu-separator {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 10px 0 20px 0; /* Espace autour de la barre */
}

/* Ajustement de l'effet tiret pour ne pas chevaucher le padding */
.mobile-link::before {
    content: "—";
    opacity: 0;
    margin-left: -10px;
    transition: all 0.3s ease;
    color: #fff;
}

.mobile-link:hover {
    transform: translateX(10px);
}

.mobile-link:hover::before {
    opacity: 1;
    margin-left: -25px;
    margin-right: 10px;
}

/* --- LOGOS RÉSEAUX SOCIAUX (Couleurs Fixes) --- */

/* Instagram : Rose/Violine */
.logo-instagram { filter: invert(41%) sepia(85%) saturate(3029%) hue-rotate(309deg) brightness(98%) contrast(101%); }

/* LinkedIn : Bleu standard */
.logo-linkedin { filter: invert(32%) sepia(91%) saturate(1458%) hue-rotate(179deg) brightness(93%) contrast(101%); }

/* YouTube : Rouge Soft (Précis, fini le jaune) */
.logo-youtube { filter: invert(18%) sepia(86%) saturate(5437%) hue-rotate(349deg) brightness(89%) contrast(92%); }

/* Spotify : Vert Medium */
.logo-spotify { filter: invert(61%) sepia(50%) saturate(504%) hue-rotate(92deg) brightness(93%) contrast(85%); }



                                                                            /* --- PAGE CGV / --- */


/* --- ANIMATIONS DE BALAYAGE CGV --- */

/* Animation de sortie vers la gauche */
.slide-out-left {
    animation: slideOutLeft 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation d'entrée depuis la droite */
.slide-in-right {
    animation: slideInRight 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation de sortie vers la droite */
.slide-out-right {
    animation: slideOutRight 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation d'entrée depuis la gauche */
.slide-in-left {
    animation: slideInLeft 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-30px); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Conteneur pour éviter le scroll horizontal pendant l'animation */
.cgv-wrapper {
    overflow: hidden;
    width: 100%;
}

.cgv-tab-btn {
    padding: 12px 24px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.cgv-tab-btn.active {
    background: white;
    color: black;
    border-color: white;
}

.cgv-tab-btn:hover:not(.active) {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}


                                            /* --- PAGE BOUTIQUE / --- */

        .strokeme { -webkit-text-stroke: 1px #fff; color: transparent; }
        
        .product-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 40px;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 40px rgba(255,255,255,0.07), 0 20px 60px rgba(0,0,0,0.6);
            transition: background 0.6s ease, border-color 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .product-card:hover {
            background: rgba(255, 255, 255, 0.04) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            transform: translateY(-6px) !important;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.2), 0 12px 60px rgba(255,255,255,0.12), 0 30px 80px rgba(0,0,0,0.8) !important;
        }

        .category-pill {
            padding: 10px 22px;
            font-size: 9px;
            letter-spacing: 0.2em;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 999px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            color: rgba(255,255,255,0.5);
        }

        .category-pill.active, .category-pill:hover {
            background: white;
            color: black;
            border-color: white;
        }

        /* Effet de brillance sur le bouton commander */
        .btn-shop {
            background: white;
            color: black;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .btn-shop:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(255,255,255,0.2);
        }


                                     /* --- PAGE CONTACT / --- */

        .input-field {
    width: 100%;
    background: rgba(255, 255, 255, 0.05); /* Fond léger */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 1.5rem;
    color: white; /* Texte saisi en blanc */
    border-radius: 20px; /* Cases bien arrondies */
    outline: none;
    transition: all 0.3s ease;
}

/* Améliore la visibilité du texte de remplacement (placeholder) */
.input-field::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 0.1em;
}

/* Correction du menu de sélection : on force le fond des options en noir */
.input-field option {
    background-color: #050505; 
    color: white;
}

.input-field:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}


/* --- Force la scrollbar à toujours être présente */ 


html {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* --- Bloque le scroll sans décalage de contenu (panier, paiement) */
html.scroll-locked {
    overflow-y: hidden;
    scrollbar-gutter: stable;
}



                                     /* --- PAGE PHOTOGRAPHIES / --- */


/* --- PILLS : plus visibles, avec hint de clic --- */
.category-pill {
    padding: 10px 24px;
    font-size: 9px;
    letter-spacing: 0.2em;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 999px;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    background: rgba(255,255,255,0.10);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    font-weight: 700;
}
.category-pill:hover {
    border-color: rgba(255,255,255,0.85);
    color: white;
    background: rgba(255,255,255,0.18);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.category-pill.active {
    background: white;
    color: black;
    border-color: white;
    font-weight: 700;
    box-shadow: 0 2px 16px rgba(255,255,255,0.22);
}

/* --- TEXTE PROMO AU-DESSUS DES PILLS --- */
#promo-block {
    transition: opacity 0.3s ease;
}

/* --- GALERIE : 2 colonnes sur mobile, auto sur desktop --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 0;
    width: 100%;
}
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 0;
    }
    .photo-card {
        aspect-ratio: 1/1;
        border-radius: 12px;
    }
}

/* --- OVERLAY BOUTON COMMANDER --- */
.photo-card { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; background: #111; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.photo-card:hover img { transform: scale(1.08); }

.photo-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    border-radius: inherit;
    pointer-events: none;
}
.photo-card-overlay .add-to-cart-btn {
    pointer-events: auto;
}
.photo-card:hover .photo-card-overlay { opacity: 1; }

@media (max-width: 768px) {
    /* Overlay et son bouton Commander complètement masqués sur mobile */
    .photo-card-overlay {
        display: none !important;
    }
}

/* ── Mini-panier flottant (mobile uniquement) ── */
.mini-cart-btn {
    display: none; /* caché par défaut, affiché via media query */
}

@media (max-width: 767px) {
    .mini-cart-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 8px;
        right: 8px;
        z-index: 10;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(240, 240, 240, 0.97);
        color: #111;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.15s ease,
                    box-shadow 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Agrandit le SVG du panier à l'intérieur de la bulle */
    .mini-cart-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .mini-cart-btn:active {
        transform: scale(0.88);
        background: rgba(220, 220, 220, 0.98);
        transition-duration: 0.08s;
    }

    /* Animation "ajouté" : flash vert rapide */
    .mini-cart-btn.added {
        background: rgba(80, 200, 120, 0.95);
        color: white;
        transform: scale(1.2);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.2s ease;
    }
}

.add-to-cart-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: white;
    color: black;
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.add-to-cart-btn:hover { transform: scale(1.06); }
@media (max-width: 768px) {
    .add-to-cart-btn { 
        padding: 5px 10px; 
        font-size: 8px; 
        background: rgba(40,40,40,0.92);
        color: rgba(255,255,255,0.9);
        border: 1px solid rgba(255,255,255,0.55);
        box-shadow: none;
        gap: 4px;
    }
    .add-to-cart-btn svg { width: 10px; height: 10px; }
}

/* --- LIGHTBOX : curseur natif affiché --- */
#lightbox { cursor: default !important; }
#lightbox * { cursor: default !important; }
#lightbox button { cursor: pointer !important; }

/* --- SHOP LIGHTBOX : garde le curseur custom --- */
#shop-lightbox { cursor: none !important; }
#shop-lightbox * { cursor: none !important; }
#shop-lightbox button { cursor: none !important; }

/* --- PANIER SIDEBAR --- */
#cart-sidebar {
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    contain: layout style;
    -webkit-overflow-scrolling: touch;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    height: 100dvh !important;
}
@media (min-width: 768px) {
    #cart-sidebar { width: 380px !important; max-width: 380px !important; }
}
@media (max-width: 767px) {
    #cart-sidebar { background: #000 !important; }
}
#cart-sidebar.open { transform: translateX(0) !important; }

/* Overlay sombre derrière la sidebar → clic ferme */
#cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9994;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- BOUTON COMMANDER dans sidebar --- */
#cart-order-btn {
    display: block;
    width: 100%;
    background: white;
    color: black;
    border: none;
    border-radius: 999px;
    padding: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease;
}
#cart-order-btn:hover { transform: scale(1.02); }

/* --- BADGE PANIER NAV MOBILE (caché par défaut) --- */
#cart-icon-mobile {
    position: relative;
}

/* Affiche l'icône panier mobile quand le panier est rempli :
   - soit sous le breakpoint xl (nav mobile classique)
   - soit en mode hamburger adaptatif JS (quelle que soit la largeur) */
@media (max-width: 1023px) {
    #cart-icon-mobile.cart-mobile-visible {
        display: flex !important;
    }
}
#nav-pill.adaptive:not(.expanded) #cart-icon-mobile.cart-mobile-visible {
    display: flex !important;
}
/* Quand la nav desktop est en mode étendu (expanded), le panier desktop est
   affiché : on masque alors le panier mobile, même sous 1023px, pour éviter
   le double panier lors du redimensionnement de la fenêtre. */
#nav-pill.adaptive.expanded #cart-icon-mobile {
    display: none !important;
}

/* --- BOUTON FLOTTANT MOBILE : chevron animé --- */
#floating-chevron.open { transform: rotate(180deg); }
#floating-filter-toggle:active,
#blog-floating-toggle:active { transform: scale(0.94); }

/* --- TOAST --- */
#cart-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: white;
    color: black;
    padding: 11px 24px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99999;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
#cart-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


    /* --- GRILLE VIDÉO AMÉLIORÉE --- */
        .video-grid { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 30px; 
            padding: 20px; 
        }
        
        @media (max-width: 768px) { 
            .video-grid { 
                grid-template-columns: 1fr; 
                gap: 20px;
                padding: 10px;
            } 
        }

        /* --- CARTE VIDÉO AMÉLIORÉE --- */
        .video-card-enhanced { 
            position: relative; 
            border-radius: 30px; 
            overflow: hidden; 
            aspect-ratio: 16/9; 
            background: #111; 
            cursor: pointer; 
            border: 1px solid rgba(255,255,255,0.05);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                        border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .video-card-enhanced:hover { 
            transform: scale(1.02); 
            border-color: rgba(255,255,255,0.2);
            box-shadow: 0 20px 40px rgba(0,0,0,0.5);
        }
        
        .video-card-enhanced img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .video-card-enhanced:hover img { 
            transform: scale(1.1);
        }

        /* --- BADGE CATÉGORIE --- */
        .video-category-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.15);
            padding: 6px 14px;
            border-radius: 100px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: white;
            z-index: 5;
        }

        /* --- OVERLAY AMÉLIORÉ --- */
        .video-info-enhanced {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 30px 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 5;
        }
        
        .video-card-enhanced:hover .video-info-enhanced { 
            transform: translateY(0); 
            opacity: 1; 
        }

        .video-title {
            font-size: 1.2rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 5px;
        }

        .video-meta {
            display: flex;
            gap: 15px;
            font-size: 9px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            opacity: 0.7;
            margin-bottom: 10px;
        }

        .video-description-preview {
            font-size: 11px;
            opacity: 0.8;
            line-height: 1.4;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .video-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .video-tag {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 4px 10px;
            border-radius: 50px;
            font-size: 8px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        /* --- BOUTON PLAY --- */
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 10;
        }

        .video-card-enhanced:hover .play-button {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        .play-button svg {
            width: 24px;
            height: 24px;
            fill: white;
            margin-left: 3px;
        }

        /* --- FILTRES --- */
        .filter-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin: 40px 0;
            padding: 0 20px;
        }

        .filter-pill {
            padding: 10px 24px;
            font-size: 9px;
            letter-spacing: 0.2em;
            border: 1px solid rgba(255,255,255,0.45);
            border-radius: 999px;
            text-transform: uppercase;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            color: rgba(255,255,255,0.85);
            cursor: pointer;
            background: rgba(255,255,255,0.10);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
            font-weight: 700;
        }
        
        .filter-pill:hover {
            border-color: rgba(255,255,255,0.85);
            color: white;
            background: rgba(255,255,255,0.18);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
        }
        
        .filter-pill.active {
            background: white;
            color: black;
            border-color: white;
            font-weight: 700;
            box-shadow: 0 2px 16px rgba(255,255,255,0.22);
        }

        /* --- BANDEAU CTA --- */
        .cta-banner {
            background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 40px;
            padding: 40px;
            margin: 60px 20px;
            text-align: center;
        }

        .price-tag {
            display: inline-block;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            padding: 8px 20px;
            border-radius: 100px;
            font-size: 10px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            margin: 10px;
        }

        /* --- MODALE PROJET --- */
        #project-modal {
            transition: opacity 0.3s ease;
        }
        
        .modal-content {
            max-width: 1000px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            background: #0a0a0a;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 30px;
            padding: 30px;
        }

        /* --- PROGRESS BAR POUR CHARGEMENT VIDÉO (optionnel) --- */
        .video-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: white;
            transition: width 0.1s linear;
        }

        /* --- EN-TÊTES DE PROJET (groupement vidéos) --- */
        .project-header-block {
            grid-column: 1 / -1;
            padding: 48px 0 20px 0;
            margin-top: 20px;
        }

        .project-header-block:first-child {
            margin-top: 0;
            padding-top: 12px;
        }

        .project-header-inner {
            border-left: 2px solid rgba(255,255,255,0.15);
            padding-left: 28px;
        }

        .project-header-top {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }

        .project-label {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: #fff;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 100px;
        }

        .project-years-badge {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.15em;
            color: rgba(255,255,255,0.55);
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            padding: 4px 12px;
            border-radius: 100px;
        }

        .project-title {
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #ffffff;
            margin-bottom: 10px;
            line-height: 1.05;
        }

        .project-subtitle {
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            color: rgba(255,255,255,0.5);
            margin-bottom: 16px;
            text-transform: none;
        }

        .project-description {
            font-size: 0.82rem;
            line-height: 1.8;
            color: rgba(255,255,255,0.6);
            max-width: 68ch;
            margin: 14px 0 4px;
        }

        .project-description em {
            font-style: italic;
            color: rgba(255,255,255,0.82);
        }

        .project-client-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .project-client-label {
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.35);
            margin-right: 4px;
        }

        .project-client-name {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.55);
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            padding: 4px 12px;
            border-radius: 100px;
        }

        @media (max-width: 640px) {
            .project-header-block {
                padding: 36px 0 16px 0;
            }
            .project-header-inner {
                padding-left: 18px;
            }
            .project-header-top {
                flex-wrap: wrap;
                gap: 8px;
                margin-bottom: 10px;
            }
            .project-header-top .project-client-name {
                order: 3;
                align-self: flex-start;
            }
            .project-title {
                font-size: clamp(1.3rem, 6vw, 1.8rem);
                margin-bottom: 12px;
            }
        }


    /* ============================================================
                                PAGE CONTACT 
    ============================================================ */

    
         /* ── Labels champs ── */
        .field-label {
            display: block;
            font-size: 12px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            opacity: 0.7;
            font-weight: 700;
            height: 20px; /* Force une hauteur identique pour tous les titres de champs */
            margin-bottom: 8px; /* Espace constant avec le champ */
             line-height: 1;
        }
        .required-star {
            color: rgba(255,255,255,0.5);
            font-size: 20px;
            margin-left: 2px;
        }

        /* ── Bloc infos gauche ── */
        .info-card {
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.55);
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
            color: #ffffff;
        }

        /* ── Photo placeholder ── */
        .photo-placeholder {
            width: 100%;
            aspect-ratio: 3/2;
            background: rgba(255,255,255,0.03);
            border-bottom: 1px solid rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .photo-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;
            object-position: 50% 20%;
        }
        .photo-placeholder::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(5,5,5,0.7) 0%, transparent 50%);
        }

        /* ── Infos de contact ── */
        .contact-info-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .contact-info-row:last-child { border-bottom: none; }
        .contact-info-icon {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            background: rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .contact-info-label {
            font-size: 12px;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            opacity: 0.35;
            font-weight: 700;
            display: block;
            margin-bottom: 2px;
        }
        .contact-info-value {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.05em;
            opacity: 0.85;
        }

        /* ── Bouton email direct ── */
        .btn-email-direct {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 14px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.2);
            background: #ffffff;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #0a0a0a;
            text-decoration: none;
            transition: all 0.3s ease;
            margin-top: 20px;
        }
        .btn-email-direct:hover {
            background: rgba(255,255,255,0.85);
            border-color: rgba(255,255,255,0.85);
            transform: translateY(-1px);
        }

        /* ── Formulaire card ── */
        .form-card {
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.55);
            border-radius: 32px;
            padding: 40px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
            color: #ffffff;
        }
        @media (min-width: 768px) {
            .form-card { padding: 52px; }
        }

        /* ── Inputs clairs dans form-card ── */
        .info-card .input-field {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.15);
            color: #ffffff;
        }
        .info-card .input-field::placeholder {
            color: rgba(255,255,255,0.35);
        }
        .info-card .input-field:focus {
            border-color: rgba(255,255,255,0.3);
            background: rgba(255,255,255,0.1);
        }
        .info-card select.input-field option {
            background: #1e1e20;
            color: #ffffff;
        }
        .form-card .input-field {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.15);
            color: #ffffff;
        }
        .form-card .input-field::placeholder {
            color: rgba(255,255,255,0.35);
        }
        .form-card .input-field:focus {
            border-color: rgba(255,255,255,0.3);
            background: rgba(255,255,255,0.1);
        }
        .form-card select.input-field option {
            background: #1e1e20;
            color: #ffffff;
        }

        /* ── Success state ── */
        #form-success { display: none; }

        /* ── Séparateur ou ── */
        .or-separator {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 20px 0 0;
        }
        .or-separator::before,
        .or-separator::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,0.08);
        }
        .or-separator span {
            font-size: 9px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            opacity: 0.3;
            font-weight: 700;
        }

/* --- LISERÉ DÉGRADÉ BAS DE PAGE (global, sous les boutons flottants) --- */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9)   0%,
        rgba(0, 0, 0, 0.75)  15%,
        rgba(0, 0, 0, 0.55)  30%,
        rgba(0, 0, 0, 0.35)  50%,
        rgba(0, 0, 0, 0.15)  70%,
        rgba(0, 0, 0, 0.04)  85%,
        rgba(0, 0, 0, 0)    100%
    );
    pointer-events: none;
    z-index: 30;
}

/* ── Animation panier : pulse icône + bulle volante ── */
@keyframes cartPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.cart-pulse {
    animation: cartPulse 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ══════════════════════════════════════════════
   ANIMATION CLIC BOUTON PANIER
   ══════════════════════════════════════════════ */

/* Bounce sobre — pas de rotation, amplitude modérée */
@keyframes cartBtnBounce {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.85); }
    55%  { transform: scale(1.18); }
    78%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

/* Un seul ripple, discret */
@keyframes cartBtnRipple {
    0%   { transform: scale(0.4); opacity: 0.45; }
    100% { transform: scale(2.6); opacity: 0; }
}
/* Désactivés mais conservés pour éviter toute erreur */
@keyframes cartBtnRipple2 { 0%, 100% { opacity: 0; } }
@keyframes cartBtnFlash    { 0%, 100% { opacity: 0; } }

/* Animation du bouton "Mon Panier" dans le menu mobile */
@keyframes cartMenuPop {
    0%   { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);  transform: scale(1); }
    20%  { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.55); transform: scale(0.97); }
    60%  { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); transform: scale(1.02); }
    100% { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);  transform: scale(1); }
}

/* ── Classes déclenchées par JS ── */

.cart-btn-bounce {
    animation: cartBtnBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
.cart-btn-ripple {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid white;
    pointer-events: none;
    animation: cartBtnRipple 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cart-btn-ripple2 {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    pointer-events: none;
    animation: cartBtnRipple2 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}
.cart-btn-flash {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: white;
    pointer-events: none;
    animation: cartBtnFlash 0.5s ease forwards;
}
.cart-menu-pop {
    animation: cartMenuPop 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

/* ── TOTAL STICKY en haut de la sidebar ── */
.cart-total-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(to bottom, #0a0a0a 80%, transparent 100%);
    padding: 12px 0 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Liens légaux en bas de la sidebar ── */
.cart-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
    padding: 14px 0 4px;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cart-legal-links a {
    color: rgba(255,255,255,0.3);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}
.cart-legal-links a:hover { color: rgba(255,255,255,0.6); }
.cart-legal-sep { color: rgba(255,255,255,0.15); }

/* ── Curseur visible dans la modale de paiement ── */
#stripe-payment-modal,
#stripe-payment-modal * {
    cursor: auto !important;
}
#stripe-payment-modal button { cursor: pointer !important; }
#stripe-payment-modal input,
#stripe-payment-modal select { cursor: text !important; }
#stripe-payment-modal input[type="checkbox"] { cursor: pointer !important; }

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS BOUTONS — product-option (modale panier)
   ══════════════════════════════════════════════════════════════ */

.product-option {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.18s ease,
                background 0.18s ease;
}
.product-option:hover {
    transform: translateX(5px);
}
.product-option:active {
    transform: translateX(3px) scale(0.98);
    transition-duration: 0.08s;
}

/* ══════════════════════════════════════════════
   ANIMATION LOGO NAVBAR
   ══════════════════════════════════════════════ */

@keyframes logoSpin {
    0%   { opacity: 0; transform: rotate(-180deg) scale(0.4); }
    65%  { transform: rotate(12deg) scale(1.08); }
    82%  { transform: rotate(-5deg) scale(0.97); }
    100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* isolation: isolate coupe l'effet mix-blend-mode du curseur sur le logo */
a:has(#nav-logo) {
    isolation: isolate;
}

#nav-logo {
    animation: logoSpin 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
    transform-origin: center;
    pointer-events: none;
    isolation: isolate;
}

#nav-logo.ready {
    pointer-events: auto;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.45s ease;
}

#nav-logo.ready:hover {
    transform: rotate(20deg) scale(1.3);
    /* Glow en couches : large + serré pour rester visible malgré blend-mode */
    filter: drop-shadow(0 0 6px #fff)
            drop-shadow(0 0 16px rgba(255,255,255,0.8))
            drop-shadow(0 0 30px rgba(255,255,255,0.4));
}

/* ══════════════════════════════════════════════
   FADE-IN AU CHARGEMENT DES IMAGES & ICÔNES
   ══════════════════════════════════════════════ */

/* État initial : invisible */
img.img-fade {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* État chargé : apparition douce */
img.img-fade.img-loaded {
    opacity: 1;
}

/* Zoom arsenal : déclenché par le parent car pointer-events:none sur l'image */
[data-arsenal-trigger] img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
[data-arsenal-trigger]:hover img {
    transform: scale(1.1);
}

/* Fade-in pour les SVG et éléments nav au chargement de la page */
.nav-fade {
    opacity: 0;
    animation: navFadeIn 0.5s ease forwards;
}

@keyframes navFadeIn {
    to { opacity: 1; }
}

/* ══════════════════════════════════════════════
   SECTIONS ARTISTE + TRAVAUX — fond clair
   ══════════════════════════════════════════════ */

/* Base texte */
#artiste, #travaux { color: #111; }

/* Classes opacity-* Tailwind : force couleur sombre */
#artiste .opacity-40, #artiste .opacity-50, #artiste .opacity-60,
#travaux .opacity-40, #travaux .opacity-50, #travaux .opacity-60 {
    color: #333;
}

/* ── Tuiles stats (#artiste .card-presta) ──
   Isolation complète de Tailwind : on déclare TOUTES les propriétés animées
   explicitement pour empêcher toute transition parasite à 150ms. */
#artiste .card-presta {
    background: #fff !important;
    border: 1.5px solid rgba(0,0,0,0.14) !important;
    border-top: 3px solid #222 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08),
                0 1px 4px  rgba(0,0,0,0.05) !important;
    color: #111;
    position: relative;
    overflow: hidden;
    /* transform fixé explicitement — évite que Tailwind anime "rien→rien" */
    transform: translateY(0) scale(1) !important;
    will-change: box-shadow, opacity;
    /* Contrôle TOTAL de la transition : on exclut transform */
    transition: box-shadow   1.1s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                opacity      1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Overlay lumineux — fade in rapide / fade out lent */
#artiste .card-presta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(
        150deg,
        rgba(255,255,255,0.65) 0%,
        rgba(255,255,255,0.20) 50%,
        rgba(255,255,255,0.00) 100%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Le contenu des tuiles reste au-dessus de l'overlay */
#artiste .card-presta > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    #artiste .card-presta:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,0.11),
                    0 2px 8px  rgba(0,0,0,0.06) !important;
        border-color: rgba(0,0,0,0.20) !important;
        /* transform verrouillé — AUCUN mouvement */
        transform: translateY(0) scale(1) !important;
        transition: box-shadow   0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity      0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    #artiste .card-presta:hover::after {
        opacity: 1;
        transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

/* ── Cartes travaux (card-presta dans #travaux) ── */
#travaux .card-presta {
    background: #fff !important;
    border: 1.5px solid rgba(0,0,0,0.14) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.09),
                0 1px 4px  rgba(0,0,0,0.06) !important;
    color: #111;
}

/* Tags pill */
#artiste [class*="border-white"],
#travaux [class*="border-white"] {
    border-color: rgba(0,0,0,0.20) !important;
    color: #222 !important;
}
#artiste [class*="bg-white/5"],
#travaux [class*="bg-white/5"] {
    background: #e8e7e2 !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    color: #333 !important;
}

/* ── Onglets travaux ── */
.travaux-tab {
    background: #e8e7e2;
    border: 1.5px solid rgba(0,0,0,0.18);
    color: rgba(0,0,0,0.55);
    cursor: pointer;
    font-size: 11px;
    transition: background 0.4s cubic-bezier(0.22,1,0.36,1),
                border-color 0.4s cubic-bezier(0.22,1,0.36,1),
                color 0.3s ease,
                box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
}
.travaux-tab:hover {
    background: #dddcd7;
    border-color: rgba(0,0,0,0.30);
    color: rgba(0,0,0,0.85);
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}
.travaux-tab.active-tab {
    background: #111;
    border-color: #111;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}

/* ── FADE UNIFIÉ POUR TOUTES LES CARTES ──
   Entrée rapide (0.4s) / sortie lente (0.9s)
   Overlay ::before pour le flash de lumière          */

/* ── 1. travaux-card ── */
.travaux-card {
    position: relative;
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 8px  rgba(0, 0, 0, 0.07),
                0 1px 3px  rgba(0, 0, 0, 0.05) !important;
    /* Sortie : lente et douce */
    transition: transform    0.85s cubic-bezier(0.16, 1, 0.3, 1),
                background   1.0s  cubic-bezier(0.16, 1, 0.3, 1),
                border-color 1.0s  cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow   1.0s  cubic-bezier(0.16, 1, 0.3, 1);
}
/* Overlay flash de lumière */
.travaux-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.travaux-card > * { position: relative; z-index: 1; }

@media (min-width: 768px) {
    .travaux-card:hover {
        background: #fafafa !important;
        border-color: rgba(0, 0, 0, 0.22) !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14),
                    0 4px  12px rgba(0, 0, 0, 0.08) !important;
        transform: translateY(-5px);
        /* Entrée : rapide */
        transition: transform    0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    background   0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow   0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .travaux-card:hover::before {
        opacity: 1;
        transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

/* ── 2. support-btn — fond coloré par plateforme, contraste fort ── */
.support-btn {
    background: #e8e7e2;           /* même teinte que les onglets : se détache du fond */
    border: 1.5px solid rgba(0,0,0,0.18);
    border-left: 4px solid rgba(0,0,0,0.30);
    box-shadow: 0 4px 14px rgba(0,0,0,0.09),
                0 1px 4px  rgba(0,0,0,0.05);
    color: #111;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background   0.85s cubic-bezier(0.16,1,0.3,1),
                border-color 0.85s cubic-bezier(0.16,1,0.3,1),
                box-shadow   0.85s cubic-bezier(0.16,1,0.3,1),
                transform    0.75s cubic-bezier(0.16,1,0.3,1);
}
.support-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1);
}
.support-btn > * { position: relative; z-index: 1; }

.support-btn:hover {
    transform: translateY(-3px);
    color: #111;
    transition: background   0.35s cubic-bezier(0.22,1,0.36,1),
                border-color 0.35s cubic-bezier(0.22,1,0.36,1),
                box-shadow   0.35s cubic-bezier(0.22,1,0.36,1),
                transform    0.35s cubic-bezier(0.22,1,0.36,1);
}
.support-btn:hover::before {
    opacity: 1;
    transition: opacity 0.30s cubic-bezier(0.22,1,0.36,1);
}

/* Bandcamp — teinte cyan au repos, plus vive au hover */
.support-btn-bandcamp {
    background: rgba(29,193,209,0.10) !important;
    border-left-color: rgba(29,193,209,0.75) !important;
}
.support-btn-bandcamp:hover {
    background: rgba(29,193,209,0.18) !important;
    border-color: rgba(29,193,209,0.50) !important;
    border-left-color: rgba(29,193,209,1) !important;
    box-shadow: 0 12px 36px rgba(29,193,209,0.22),
                0 3px  8px  rgba(29,193,209,0.12) !important;
}

/* PayPal — teinte bleue */
.support-btn-paypal {
    background: rgba(0,112,186,0.08) !important;
    border-left-color: rgba(0,112,186,0.70) !important;
}
.support-btn-paypal:hover {
    background: rgba(0,112,186,0.15) !important;
    border-color: rgba(0,112,186,0.40) !important;
    border-left-color: rgba(0,112,186,1) !important;
    box-shadow: 0 12px 36px rgba(0,112,186,0.20),
                0 3px  8px  rgba(0,112,186,0.10) !important;
}

/* Tipeee — teinte verte */
.support-btn-tipeee {
    background: rgba(106,195,65,0.09) !important;
    border-left-color: rgba(106,195,65,0.70) !important;
}
.support-btn-tipeee:hover {
    background: rgba(106,195,65,0.16) !important;
    border-color: rgba(106,195,65,0.40) !important;
    border-left-color: rgba(106,195,65,1) !important;
    box-shadow: 0 12px 36px rgba(106,195,65,0.20),
                0 3px  8px  rgba(106,195,65,0.10) !important;
}

/* Onglets et cartes travaux → voir bloc ci-dessus */

/* ══════════════════════════════════════════════
   CARTES TRAVAUX — VIDÉO YOUTUBE INTÉGRÉE
   ══════════════════════════════════════════════ */

/* Le placeholder (fond pointillé) disparaît dès que l'iframe se charge */
.travaux-video-wrap iframe[style*="opacity: 1"] ~ .travaux-placeholder,
.travaux-video-wrap iframe[style*="opacity:1"] ~ .travaux-placeholder {
    display: none;
}

/* Tant que l'iframe n'est pas chargée, elle ne prend pas de place visuelle */
.travaux-video-wrap iframe[style*="opacity: 0"],
.travaux-video-wrap iframe[style*="opacity:0"] {
    position: absolute;
    inset: 0;
}

/* Stat-counter : légère animation de chargement (pulsation) pendant le fetch */
.stat-counter {
    transition: opacity 0.4s ease;
}
/* ══════════════════════════════════════════════
   SKELETON + FADE-IN IFRAMES VIDÉO TRAVAUX
   ══════════════════════════════════════════════ */

@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.travaux-video-skeleton {
    z-index: 1;
    pointer-events: none;
}

.travaux-yt-iframe {
    z-index: 2;
}

/* Placeholder au-dessus du skeleton tant que l'iframe n'est pas là */
.travaux-placeholder {
    z-index: 3;
}

/* ── Logo AQVILVS sur fond clair ──
   mix-blend-mode:multiply + filter:invert(1) rend le logo noir
   et transparent sur fond blanc/clair sans fond blanc parasite  */
#artiste .logo-aqvilvs {
    filter: invert(1) brightness(0);
    mix-blend-mode: multiply;
}

/* ── Support buttons — fond coloré distinct du fond clair ── */
/* On renforce les ombres portées pour les "décoller" du fond */
.support-btn {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10),
                0 1px  4px rgba(0, 0, 0, 0.07) !important;
}
.support-btn:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13),
                0 3px  8px  rgba(0, 0, 0, 0.08) !important;
}
/* ══════════════════════════════════════════════
   ANIMATION COMPTEUR STATS
   ══════════════════════════════════════════════ */

/* Pendant l'animation, le chiffre a un léger éclat */
.stat-counter {
    transition: opacity 0.3s ease;
    display: inline-block;
}

/* La carte stat est légèrement grisée tant que le chiffre n'est pas chargé */
#artiste .card-presta:has(.stat-counter) {
    transition: opacity 0.4s ease;
}
/* ══════════════════════════════════════════════
   TYPOGRAPHIE — TAILLES MOBILES SECTIONS CLAIRES
   ══════════════════════════════════════════════ */

/* Sur mobile, les labels et textes secondaires sont plus lisibles */
@media (max-width: 767px) {
    /* Labels de catégorie dans les cartes travaux */
    #travaux .travaux-card [class*="tracking-"] {
        font-size: 10px;
    }

    /* Titres des cartes travaux */
    #travaux .travaux-card h3 {
        font-size: 15px;
    }

    /* Descriptions */
    #travaux .travaux-card p[style*="0.58"] {
        font-size: 13px;
        line-height: 1.6;
    }

    /* Stats labels sous les chiffres */
    #artiste .card-presta p:last-child {
        font-size: 9px;
        letter-spacing: 0.2em;
    }

    /* Boutons support : label plus visible */
    .support-btn p:first-child {
        font-size: 12px;
    }
    .support-btn p:last-child {
        font-size: 10px;
    }

    /* Tags pill */
    #travaux .travaux-card [class*="rounded-full"] {
        font-size: 9px;
        padding: 4px 10px;
    }
}

/* ══════════════════════════════════════════════
   ANIMATION SCRAMBLE AU SURVOL DES TUILES
   ══════════════════════════════════════════════ */

/* Légère variation de couleur pendant le scramble */
@keyframes counterScramblePulse {
    0%   { opacity: 1;    }
    15%  { opacity: 0.65; }
    50%  { opacity: 0.80; }
    85%  { opacity: 0.70; }
    100% { opacity: 1;    }
}

/* Le chiffre s'active quand la carte est survolée */
#artiste .card-presta:hover .stat-counter {
    animation: counterScramblePulse 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* ══════════════════════════════════════════════
   SKELETON LOADER — iframes audio & vidéo
   ══════════════════════════════════════════════ */

.iframe-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 200% 100%;
    animation: iframeSkeleton 1.6s ease-in-out infinite;
    border-radius: 12px;
    pointer-events: none;
}

/* Sur fond clair (sections travaux) — teinte inversée */
#travaux .iframe-skeleton {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.05) 25%,
        rgba(0,0,0,0.10) 50%,
        rgba(0,0,0,0.05) 75%
    );
    background-size: 200% 100%;
}

@keyframes iframeSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* ══════════════════════════════════════════════
   MINIATURES YOUTUBE — page musiques
   ══════════════════════════════════════════════ */

/* Bouton play centré */
.yt-thumb-wrap .yt-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.yt-thumb-wrap .yt-play-btn svg {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    padding: 10px;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1),
                background 0.6s cubic-bezier(0.16,1,0.3,1);
}

@media (min-width: 768px) {
    .yt-thumb-wrap:hover .yt-play-btn svg {
        transform: scale(1.07);
        background: rgba(255,50,50,0.75);
    }
}
/* ══════════════════════════════════════════════
   BOUTON PLAY — cartes Travaux (fond clair)
   ══════════════════════════════════════════════ */

.travaux-yt-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content:s center;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.travaux-yt-play-btn svg {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
    background: rgba(0,0,0,0.42);
    border-radius: 50%;
    padding: 10px;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                background 0.3s ease;
}

/* ── Zoom vidéos.html identique sur les cartes travaux ──
   Carte : scale(1.02) + ombre au hover
   Image : scale(1.1) indépendant, transition plus longue  */

.travaux-yt-thumb-wrap {
    overflow: hidden;
    transition: transform     0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow    0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.travaux-yt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                opacity   0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    .travaux-yt-thumb-wrap:hover {
        transform: scale(1.02);
        box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }

    .travaux-yt-thumb-wrap:hover .travaux-yt-play-btn svg {
        transform: scale(1.12);
        background: rgba(220,40,40,0.85);
    }
}
/* ─── FONTS AUTO-HÉBERGÉES — Plus Jakarta Sans ───────────────────────────── */
/* Remplace Google Fonts CDN — chemin relatif depuis css/ vers assets/fonts/ */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/plus-jakarta-sans-v12-latin-200.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: optional;
}

/* ── Fallback métriquement ajusté — réduit le FOUT sur toutes les pages ── */
@font-face {
    font-family: 'Plus Jakarta Sans Fallback';
    src: local('Arial');
    font-weight: 400 700;
    ascent-override: 96%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 104%;
}



/* --- PAGE INDEX / --- */








                                                                            /* --- PAGE MUSIQUES / --- */

                                                                            /* Cache le curseur UNIQUEMENT au survol de l'iFrame */
iframe:hover ~ #cursor,
.audio-card iframe:hover ~ #cursor {
    opacity: 0 !important;
}

/* Si votre curseur est à la racine du body, on utilise cette règle plus moderne */
body:has(iframe:hover) #cursor {
    opacity: 0;
}

/* Morphing curseur → caret au survol des champs de saisie */
input, textarea, select {
    cursor: none !important;
}
input[type="checkbox"], input[type="radio"] {
    cursor: none !important;
}


/* Stylisation du lecteur audio natif */


.custom-audio-player {
    height: 40px;
    filter: invert(100%) hue-rotate(180deg) brightness(1.5); /* Inverse les couleurs pour qu'il soit blanc sur fond noir */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Grille des lecteurs */
.audio-grid {
    display: grid;
    /* Crée 3 colonnes égales sur PC, 1 seule sur mobile */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

/* Cartes individuelles */
.audio-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 30px;
    /* Sortie très douce (quand la souris quitte) */
    transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 2.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 2.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 2.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.audio-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.20);
    transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 1.6s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 1.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Boutons de plateforme */
.platform-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px; /* Espace important entre l'icône et le texte */
    padding: 18px 25px; /* Augmentation du padding pour un look plus premium */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.platform-btn {
    overflow: hidden;
    height: 58px; /* fixe la hauteur une bonne fois pour toutes */
}

.platform-btn:hover img {
    filter: brightness(0) !important; /* noir au hover */
}


.platform-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: block;
}


.platform-btn:hover {
    background: white;
    color: black;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}


/* --- VARIABLES ET BASE --- */
:root { --bg-dark: #050505; --accent: #ffffff; }
body { 
    font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', sans-serif; 
    background-color: var(--bg-dark); 
    color: #eeeeee; 
    overflow-x: hidden; 
}

/* --- CURSEUR --- */
#cursor {
    width: 15px; height: 15px; background: #fff; border-radius: 50%; position: fixed;
    pointer-events: none; z-index: 10001; mix-blend-mode: difference; overflow: visible;
    box-shadow: 0 0 0 0 transparent;
    transition: transform      0.25s cubic-bezier(0.4,0,0.2,1),
                width          0.25s cubic-bezier(0.4,0,0.2,1),
                height         0.25s cubic-bezier(0.4,0,0.2,1),
                border-radius  0.25s cubic-bezier(0.4,0,0.2,1),
                background     0.25s cubic-bezier(0.4,0,0.2,1),
                box-shadow     0.25s cubic-bezier(0.4,0,0.2,1),
                opacity        0.35s ease;
    display: none;
    transform: translate(-50%, -50%);
    /* Invisible au chargement : main.js le révèle au premier mousemove */
    opacity: 0;
}
#cursor::before, #cursor::after {
    content: '';
    position: absolute;
    width: 9px; height: 2px;
    background: #fff;
    border-radius: 1px;
    left: 50%; transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.15s ease 0.1s;
}
#cursor::before { top: -1px; }
#cursor::after  { bottom: -1px; }

@media (pointer: fine) {
    body { cursor: none; }
    * { cursor: none !important; }
    .swiper, .swiper * { cursor: none !important; }
    #cursor { display: block; }

    /* --- Curseur de saisie (I-beam) --- */
    #cursor.text-cursor {
        width: 2px !important;
        height: 20px !important;
        border-radius: 1px !important;
        transform: translate(-50%, -50%) !important;
    }
    #cursor.text-cursor::before,
    #cursor.text-cursor::after {
        opacity: 1;
    }

    /* --- Curseur de pointage (bulle agrandie) --- */
    #cursor.pointer-cursor {
        transform: translate(-50%, -50%) scale(5) !important;
    }

    /* --- Curseur de glissement (grab) --- */
    #cursor.grab-cursor {
        width: 34px !important;
        height: 10px !important;
        border-radius: 5px !important;
        transform: translate(-50%, -50%) !important;
    }
    #cursor.grab-cursor::before,
    #cursor.grab-cursor::after {
        width: 6px !important;
        height: 10px !important;
        border-radius: 0 !important;
        top: 50% !important;
        bottom: auto !important;
        opacity: 1 !important;
        transition: opacity 0.15s ease, width 0.2s ease, transform 0.2s ease !important;
    }
    #cursor.grab-cursor::before {
        left: -9px !important;
        transform: translateY(-50%) !important;
        clip-path: polygon(100% 0%, 0% 50%, 100% 100%) !important;
    }
    #cursor.grab-cursor::after {
        left: auto !important;
        right: -9px !important;
        transform: translateY(-50%) !important;
        clip-path: polygon(0% 0%, 100% 50%, 0% 100%) !important;
    }

    /* --- Curseur en cours de glissement (grabbing) --- */
    #cursor.grabbing-cursor {
        width: 22px !important;
        height: 10px !important;
        border-radius: 5px !important;
        transform: translate(-50%, -50%) !important;
    }
    #cursor.grabbing-cursor::before,
    #cursor.grabbing-cursor::after {
        opacity: 0 !important;
    }
}

/* --- DROPDOWN MENU (menu déroulant hors nav) --- */
#dropdown-menu {
    display: none;
    position: fixed;
    z-index: 9998;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 10px;
    min-width: 200px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}

/* LE PONT INVISIBLE : empêche le menu de se fermer lors du passage de la souris */
#dropdown-menu::before {
    content: "";
    position: absolute;
    top: -30px;   /* ← était -20px */
    left: -20px;  /* ← élargit aussi sur les côtés */
    right: -20px; /* ← élargit aussi sur les côtés */
    height: 30px; /* ← était 20px */
    background: transparent;
}

.dropdown-inner {
    background: rgba(10, 10, 10, 0.9); /* Fond sombre légèrement transparent */
    backdrop-filter: blur(20px); /* Effet de flou moderne */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure très fine */
    border-radius: 20px;
    padding: 10px;
    min-width: 200px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

/* Animations */
@keyframes slideUpMenu {
    from { 
        opacity: 0; 
        transform: translateX(-50%) translateY(6px) scale(0.98); 
    }
    to { 
        opacity: 1; 
        transform: translateX(-50%) translateY(0) scale(1); 
    }
}

#dropdown-menu.is-entering {
    animation: slideUpMenu 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#dropdown-menu.is-leaving {
    animation: slideDownMenu 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes slideDownMenu {
    from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    to   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.95); }
}

/* Style des liens dans le menu */
.dropdown-item {
    display: block;
    padding: 14px 18px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    letter-spacing: 0.25em;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 12px;
    text-decoration: none;
    position: relative;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    padding-left: 24px; /* Petit décalage vers la droite au survol */
}

/* Petit point indicateur au survol d'un item */
.dropdown-item::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 4px;
    height: 4px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.dropdown-item:hover::after {
    transform: translateY(-50%) scale(1);
}

@keyframes verticalFade {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* --- SOUS-LIGNAGE AU SURVOL --- */
.underline-hover {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}
.underline-hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: white;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .underline-hover::after,
.underline-hover:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.mobile-link { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease; display: inline-block; }
.mobile-link:hover { transform: scale(1.06); color: #ffffff; }

.text-shimmer { 
    background: linear-gradient(to right, #ffffff 20%, #666666 50%, #ffffff 80%); 
    background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    animation: shimmer-swipe 5s linear infinite; display: inline-block; 
}
@keyframes shimmer-swipe { to { background-position: 200% center; } }

.btn-rounded {
    border-radius: 9999px;
    padding: 14px 28px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s ease,
                opacity 0.3s ease;
}
/* Reflet lumineux qui traverse au hover */
.btn-rounded::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.22) 50%,
        transparent 70%
    );
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-rounded:hover::after { left: 130%; }
.btn-rounded:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.btn-rounded:active {
    transform: translateY(0px) scale(0.97);
    box-shadow: none;
    transition-duration: 0.12s;
}
/* Boutons déjà animés : on ne double pas le scale */
.btn-rounded.hover\:scale-105:hover,
.btn-rounded.hover\:scale-110:hover {
    transform: translateY(-2px) scale(1.03);
}
/* ── Menu mobile : bouton Contact — shrink au press ──
   scale(1) explicite au repos/hover pour neutraliser tout scale-up Tailwind.
   :active presse rapide (0.07s), retour élastique via cubic-bezier. */
#mobile-menu .btn-rounded        { transform: scale(1) !important; box-shadow: none !important; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1) !important; }
#mobile-menu .btn-rounded:hover  { transform: scale(1) !important; }
#mobile-menu .btn-rounded:active { transform: scale(0.94) !important; transition-duration: 0.1s !important; }
#mobile-menu .btn-rounded::after { display: none; }

/* ── Menu mobile : icônes réseaux — même logique shrink ── */
#mobile-menu a.transition.hover\:scale-110        { transform: scale(1) !important; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1) !important; }
#mobile-menu a.transition.hover\:scale-110:hover  { transform: scale(1) !important; }
#mobile-menu a.transition.hover\:scale-110:active { transform: scale(0.86) !important; transition-duration: 0.1s !important; }

/* ── Éléments Tailwind hover:scale sans transition custom ── */
a.hover\:scale-105, a.hover\:scale-110,
button.hover\:scale-105, button.hover\:scale-110 {
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) !important;
}
#cart-icon-mobile.hover\:scale-110 {
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) !important;
}

/* Conteneur qui masque le débordement */
.reveal-box {
    display: block;
    position: relative;
}

/* L'animation personnalisée pour AOS */
[data-aos="footer-reveal"] {
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
    transition-property: transform, opacity;
}

[data-aos="footer-reveal"].aos-animate {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Style additionnel pour les champs du formulaire au focus */
form input:focus, form textarea:focus {
    background: rgba(245,238,250,0.85) !important;
    box-shadow: inset 0 3px 7px rgba(0,0,0,0.13), inset 0 1px 3px rgba(0,0,0,0.09) !important;
    color: rgba(0,0,0,0.88) !important;
}

                        /* Footer - infos et boutons réseaux sociaux */


/* Animation de battement discret */
@keyframes logoPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Style des liens réseaux dans le footer */
footer .group:hover svg {
    animation: logoPulse 1.5s ease-in-out infinite;
    color: #1100ff;
    /* Effet de lueur (Glow) */
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
}

/* Transition fluide pour le retour à l'état normal */
footer svg {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Effets au survol par plateforme */
footer .group:hover span { color: rgb(255, 255, 255); }


/* On cible les chemins (path) à l'intérieur des SVG pour forcer la couleur */
footer svg, .mobile-link svg {
    transition: all 0.4s ease-in-out !important;
}

/* YouTube : Rouge Soft (Hex: #CD1A2B) */
.group:hover .logo-youtube, 
.mobile-link:hover .logo-youtube { 
    color: #CD1A2B !important; 
    fill: #CD1A2B !important; /* Force le remplissage si currentColor échoue */
    filter: drop-shadow(0 0 8px rgba(205, 26, 43, 0.4)) !important;
    animation: logoPulse 1.5s infinite;
}

/* LinkedIn : Bleu Soft */
.group:hover .logo-linkedin, 
.mobile-link:hover .logo-linkedin { 
    color: #0077B5 !important; 
    fill: #0077B5 !important;
    filter: drop-shadow(0 0 8px rgba(0, 119, 181, 0.4)) !important;
    animation: logoPulse 1.5s infinite;
}

/* Instagram : Rose Soft */
.group:hover .logo-instagram, 
.mobile-link:hover .logo-instagram { 
    color: #e18530 !important; 
    fill: #30e156 !important;
    filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.4)) !important;
    animation: logoPulse 1.5s infinite;
}

/* Spotify : vert Soft */
.group:hover .logo-spotify, 
.mobile-link:hover .logo-spotify { 
    color: #E1306C !important; 
    fill: #E1306C !important;
    filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.4)) !important;
    animation: logoPulse 1.5s infinite;
}

.social-container a {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: fit-content; /* Empêche le texte de se replier sur lui-même */
}

/* --- AJUSTEMENT MOBILE des boutons de réseaux sociaux--- */
@media (max-width: 768px) {
    .social-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 5px !important; /* Espace minimal pour mobile */
        width: 100% !important;
    }
    
    .social-container a {
        flex: 1 !important; /* Partage l'espace sur mobile uniquement */
        min-width: 0 !important;
    }

    .social-container span {
        font-size: 11px !important; /* Texte plus petit pour éviter les chevauchements */
        letter-spacing: 0.05em !important;
        white-space: nowrap; /* Empêche le texte de passer sur deux lignes */
    }
    
    .social-container svg {
        width: 26px !important;
        height: 26px !important;
    }
}


                            /* --- NAVIGATION & MENU MOBILE --- */

/* --- MENU MOBILE SCROLLABLE --- */

/* La zone interne du menu : flex column, prend toute la hauteur,
   avec padding déjà géré par Tailwind (pt-20 px-8).
   On la rend scrollable si son contenu dépasse.
   padding-left : laisse la place au tiret (::before) qui sort sur la gauche */
.menu-scroll-area {
    flex: 1;
    overflow-y: auto; /* scrollbar uniquement quand le contenu dépasse */
    overflow-x: hidden;
    min-height: 0;
    padding-left: 20px;
    /* Scrollbar discrète */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    /* Padding bas — espace sous le dernier élément + safe area pour la barre d'URL */
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    /* Défilement tactile (Android / iOS) */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    pointer-events: auto;
    will-change: scroll-position;
}

.menu-scroll-area::-webkit-scrollbar {
    width: 3px;
}

.menu-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.menu-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 99px;
}

/* Dégradé masquant en haut pour indiquer qu'on peut scroller vers le haut */
.menu-scroll-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
    /* Caché par défaut, affiché si le menu est trop petit */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* On l'affiche via JS quand le scroll est disponible — voir main.js */
.menu-scroll-fade.visible {
    opacity: 1;
}




/* --- EFFET TIRET (Menu Mobile) --- */
.mobile-link {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    padding: 12px 20px; /* Agrandit la hitbox (haut/bas et gauche) */
    width: 100%;        /* Le lien prend toute la largeur pour cliquer plus facilement */
    margin-left: -20px; /* Compense le padding pour l'alignement visuel */
}

/* La ligne de séparation */
.menu-separator {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 10px 0 20px 0; /* Espace autour de la barre */
}

/* Ajustement de l'effet tiret pour ne pas chevaucher le padding */
.mobile-link::before {
    content: "—";
    opacity: 0;
    margin-left: -10px;
    transition: all 0.3s ease;
    color: #fff;
}

.mobile-link:hover {
    transform: translateX(10px);
}

.mobile-link:hover::before {
    opacity: 1;
    margin-left: -25px;
    margin-right: 10px;
}

/* --- LOGOS RÉSEAUX SOCIAUX (Couleurs Fixes) --- */

/* Instagram : Rose/Violine */
.logo-instagram { filter: invert(41%) sepia(85%) saturate(3029%) hue-rotate(309deg) brightness(98%) contrast(101%); }

/* LinkedIn : Bleu standard */
.logo-linkedin { filter: invert(32%) sepia(91%) saturate(1458%) hue-rotate(179deg) brightness(93%) contrast(101%); }

/* YouTube : Rouge Soft (Précis, fini le jaune) */
.logo-youtube { filter: invert(18%) sepia(86%) saturate(5437%) hue-rotate(349deg) brightness(89%) contrast(92%); }

/* Spotify : Vert Medium */
.logo-spotify { filter: invert(61%) sepia(50%) saturate(504%) hue-rotate(92deg) brightness(93%) contrast(85%); }



                                                                            /* --- PAGE CGV / --- */


/* --- ANIMATIONS DE BALAYAGE CGV --- */

/* Animation de sortie vers la gauche */
.slide-out-left {
    animation: slideOutLeft 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation d'entrée depuis la droite */
.slide-in-right {
    animation: slideInRight 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation de sortie vers la droite */
.slide-out-right {
    animation: slideOutRight 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation d'entrée depuis la gauche */
.slide-in-left {
    animation: slideInLeft 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-30px); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Conteneur pour éviter le scroll horizontal pendant l'animation */
.cgv-wrapper {
    overflow: hidden;
    width: 100%;
}

.cgv-tab-btn {
    padding: 12px 24px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.cgv-tab-btn.active {
    background: white;
    color: black;
    border-color: white;
}

.cgv-tab-btn:hover:not(.active) {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}


                                            /* --- PAGE BOUTIQUE / --- */

        .strokeme { -webkit-text-stroke: 1px #fff; color: transparent; }
        
        .product-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 40px;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 40px rgba(255,255,255,0.07), 0 20px 60px rgba(0,0,0,0.6);
            transition: background 0.6s ease, border-color 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .product-card:hover {
            background: rgba(255, 255, 255, 0.04) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            transform: translateY(-6px) !important;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.2), 0 12px 60px rgba(255,255,255,0.12), 0 30px 80px rgba(0,0,0,0.8) !important;
        }

        .category-pill {
            padding: 10px 22px;
            font-size: 9px;
            letter-spacing: 0.2em;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 999px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            color: rgba(255,255,255,0.5);
        }

        .category-pill.active, .category-pill:hover {
            background: white;
            color: black;
            border-color: white;
        }

        /* Effet de brillance sur le bouton commander */
        .btn-shop {
            background: white;
            color: black;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .btn-shop:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(255,255,255,0.2);
        }


                                     /* --- PAGE CONTACT / --- */

        .input-field {
    width: 100%;
    background: rgba(255, 255, 255, 0.05); /* Fond léger */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 1.5rem;
    color: white; /* Texte saisi en blanc */
    border-radius: 20px; /* Cases bien arrondies */
    outline: none;
    transition: all 0.3s ease;
}

/* Améliore la visibilité du texte de remplacement (placeholder) */
.input-field::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 0.1em;
}

/* Correction du menu de sélection : on force le fond des options en noir */
.input-field option {
    background-color: #050505; 
    color: white;
}

.input-field:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}


/* --- Force la scrollbar à toujours être présente */ 


html {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* --- Bloque le scroll sans décalage de contenu (panier, paiement) */
html.scroll-locked {
    overflow-y: hidden;
    scrollbar-gutter: stable;
}



                                     /* --- PAGE PHOTOGRAPHIES / --- */


/* --- PILLS : plus visibles, avec hint de clic --- */
.category-pill {
    padding: 10px 24px;
    font-size: 9px;
    letter-spacing: 0.2em;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 999px;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    background: rgba(255,255,255,0.10);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    font-weight: 700;
}
.category-pill:hover {
    border-color: rgba(255,255,255,0.85);
    color: white;
    background: rgba(255,255,255,0.18);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.category-pill.active {
    background: white;
    color: black;
    border-color: white;
    font-weight: 700;
    box-shadow: 0 2px 16px rgba(255,255,255,0.22);
}

/* --- TEXTE PROMO AU-DESSUS DES PILLS --- */
#promo-block {
    transition: opacity 0.3s ease;
}

/* --- GALERIE : 2 colonnes sur mobile, auto sur desktop --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 0;
    width: 100%;
}
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 0;
    }
    .photo-card {
        aspect-ratio: 1/1;
        border-radius: 12px;
    }
}

/* --- OVERLAY BOUTON COMMANDER --- */
.photo-card { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; background: #111; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.photo-card:hover img { transform: scale(1.08); }

.photo-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    border-radius: inherit;
    pointer-events: none;
}
.photo-card-overlay .add-to-cart-btn {
    pointer-events: auto;
}
.photo-card:hover .photo-card-overlay { opacity: 1; }

@media (max-width: 768px) {
    /* Overlay et son bouton Commander complètement masqués sur mobile */
    .photo-card-overlay {
        display: none !important;
    }
}

/* ── Mini-panier flottant (mobile uniquement) ── */
.mini-cart-btn {
    display: none; /* caché par défaut, affiché via media query */
}

@media (max-width: 767px) {
    .mini-cart-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 8px;
        right: 8px;
        z-index: 10;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(240, 240, 240, 0.97);
        color: #111;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.15s ease,
                    box-shadow 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Agrandit le SVG du panier à l'intérieur de la bulle */
    .mini-cart-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .mini-cart-btn:active {
        transform: scale(0.88);
        background: rgba(220, 220, 220, 0.98);
        transition-duration: 0.08s;
    }

    /* Animation "ajouté" : flash vert rapide */
    .mini-cart-btn.added {
        background: rgba(80, 200, 120, 0.95);
        color: white;
        transform: scale(1.2);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.2s ease;
    }
}

.add-to-cart-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: white;
    color: black;
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.add-to-cart-btn:hover { transform: scale(1.06); }
@media (max-width: 768px) {
    .add-to-cart-btn { 
        padding: 5px 10px; 
        font-size: 8px; 
        background: rgba(40,40,40,0.92);
        color: rgba(255,255,255,0.9);
        border: 1px solid rgba(255,255,255,0.55);
        box-shadow: none;
        gap: 4px;
    }
    .add-to-cart-btn svg { width: 10px; height: 10px; }
}

/* --- LIGHTBOX : curseur natif affiché --- */
#lightbox { cursor: default !important; }
#lightbox * { cursor: default !important; }
#lightbox button { cursor: pointer !important; }

/* --- SHOP LIGHTBOX : garde le curseur custom --- */
#shop-lightbox { cursor: none !important; }
#shop-lightbox * { cursor: none !important; }
#shop-lightbox button { cursor: none !important; }

/* --- PANIER SIDEBAR --- */
#cart-sidebar {
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    contain: layout style;
    -webkit-overflow-scrolling: touch;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    height: 100dvh !important;
}
@media (min-width: 768px) {
    #cart-sidebar { width: 380px !important; max-width: 380px !important; }
}
@media (max-width: 767px) {
    #cart-sidebar { background: #000 !important; }
}
#cart-sidebar.open { transform: translateX(0) !important; }

/* Overlay sombre derrière la sidebar → clic ferme */
#cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9994;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- BOUTON COMMANDER dans sidebar --- */
#cart-order-btn {
    display: block;
    width: 100%;
    background: white;
    color: black;
    border: none;
    border-radius: 999px;
    padding: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease;
}
#cart-order-btn:hover { transform: scale(1.02); }

/* --- BADGE PANIER NAV MOBILE (caché par défaut) --- */
#cart-icon-mobile {
    position: relative;
}

/* Affiche l'icône panier mobile quand le panier est rempli :
   - soit sous le breakpoint xl (nav mobile classique)
   - soit en mode hamburger adaptatif JS (quelle que soit la largeur) */
@media (max-width: 1023px) {
    #cart-icon-mobile.cart-mobile-visible {
        display: flex !important;
    }
}
#nav-pill.adaptive:not(.expanded) #cart-icon-mobile.cart-mobile-visible {
    display: flex !important;
}
/* Quand la nav desktop est en mode étendu (expanded), le panier desktop est
   affiché : on masque alors le panier mobile, même sous 1023px, pour éviter
   le double panier lors du redimensionnement de la fenêtre. */
#nav-pill.adaptive.expanded #cart-icon-mobile {
    display: none !important;
}

/* --- BOUTON FLOTTANT MOBILE : chevron animé --- */
#floating-chevron.open { transform: rotate(180deg); }
#floating-filter-toggle:active,
#blog-floating-toggle:active { transform: scale(0.94); }

/* --- TOAST --- */
#cart-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: white;
    color: black;
    padding: 11px 24px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99999;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
#cart-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


    /* --- GRILLE VIDÉO AMÉLIORÉE --- */
        .video-grid { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 30px; 
            padding: 20px; 
        }
        
        @media (max-width: 768px) { 
            .video-grid { 
                grid-template-columns: 1fr; 
                gap: 20px;
                padding: 10px;
            } 
        }

        /* --- CARTE VIDÉO AMÉLIORÉE --- */
        .video-card-enhanced { 
            position: relative; 
            border-radius: 30px; 
            overflow: hidden; 
            aspect-ratio: 16/9; 
            background: #111; 
            cursor: pointer; 
            border: 1px solid rgba(255,255,255,0.05);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                        border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .video-card-enhanced:hover { 
            transform: scale(1.02); 
            border-color: rgba(255,255,255,0.2);
            box-shadow: 0 20px 40px rgba(0,0,0,0.5);
        }
        
        .video-card-enhanced img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .video-card-enhanced:hover img { 
            transform: scale(1.1);
        }

        /* --- BADGE CATÉGORIE --- */
        .video-category-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.15);
            padding: 6px 14px;
            border-radius: 100px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: white;
            z-index: 5;
        }

        /* --- OVERLAY AMÉLIORÉ --- */
        .video-info-enhanced {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 30px 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 5;
        }
        
        .video-card-enhanced:hover .video-info-enhanced { 
            transform: translateY(0); 
            opacity: 1; 
        }

        .video-title {
            font-size: 1.2rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 5px;
        }

        .video-meta {
            display: flex;
            gap: 15px;
            font-size: 9px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            opacity: 0.7;
            margin-bottom: 10px;
        }

        .video-description-preview {
            font-size: 11px;
            opacity: 0.8;
            line-height: 1.4;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .video-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .video-tag {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 4px 10px;
            border-radius: 50px;
            font-size: 8px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        /* --- BOUTON PLAY --- */
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 10;
        }

        .video-card-enhanced:hover .play-button {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        .play-button svg {
            width: 24px;
            height: 24px;
            fill: white;
            margin-left: 3px;
        }

        /* --- FILTRES --- */
        .filter-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin: 40px 0;
            padding: 0 20px;
        }

        .filter-pill {
            padding: 10px 24px;
            font-size: 9px;
            letter-spacing: 0.2em;
            border: 1px solid rgba(255,255,255,0.45);
            border-radius: 999px;
            text-transform: uppercase;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            color: rgba(255,255,255,0.85);
            cursor: pointer;
            background: rgba(255,255,255,0.10);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
            font-weight: 700;
        }
        
        .filter-pill:hover {
            border-color: rgba(255,255,255,0.85);
            color: white;
            background: rgba(255,255,255,0.18);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
        }
        
        .filter-pill.active {
            background: white;
            color: black;
            border-color: white;
            font-weight: 700;
            box-shadow: 0 2px 16px rgba(255,255,255,0.22);
        }

        /* --- BANDEAU CTA --- */
        .cta-banner {
            background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 40px;
            padding: 40px;
            margin: 60px 20px;
            text-align: center;
        }

        .price-tag {
            display: inline-block;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            padding: 8px 20px;
            border-radius: 100px;
            font-size: 10px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            margin: 10px;
        }

        /* --- MODALE PROJET --- */
        #project-modal {
            transition: opacity 0.3s ease;
        }
        
        .modal-content {
            max-width: 1000px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            background: #0a0a0a;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 30px;
            padding: 30px;
        }

        /* --- PROGRESS BAR POUR CHARGEMENT VIDÉO (optionnel) --- */
        .video-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: white;
            transition: width 0.1s linear;
        }

    /* ============================================================
                                PAGE CONTACT 
    ============================================================ */

    
         /* ── Labels champs ── */
        .field-label {
            display: block;
            font-size: 12px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            opacity: 0.7;
            font-weight: 700;
            height: 20px; /* Force une hauteur identique pour tous les titres de champs */
            margin-bottom: 8px; /* Espace constant avec le champ */
             line-height: 1;
        }
        .required-star {
            color: rgba(255,255,255,0.5);
            font-size: 20px;
            margin-left: 2px;
        }

        /* ── Bloc infos gauche ── */
        .info-card {
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.55);
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
            color: #ffffff;
        }

        /* ── Photo placeholder ── */
        .photo-placeholder {
            width: 100%;
            aspect-ratio: 3/2;
            background: rgba(255,255,255,0.05);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .photo-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;
            object-position: 50% 20%;
        }
        .photo-placeholder::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(5,5,5,0.7) 0%, transparent 50%);
        }

        /* ── Infos de contact ── */
        .contact-info-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .contact-info-row:last-child { border-bottom: none; }
        .contact-info-icon {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            background: rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .contact-info-label {
            font-size: 12px;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            opacity: 0.35;
            font-weight: 700;
            display: block;
            margin-bottom: 2px;
        }
        .contact-info-value {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.05em;
            opacity: 0.85;
        }

        /* ── Bouton email direct ── */
        .btn-email-direct {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 14px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.2);
            background: #ffffff;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #0a0a0a;
            text-decoration: none;
            transition: all 0.3s ease;
            margin-top: 20px;
        }
        .btn-email-direct:hover {
            background: rgba(255,255,255,0.85);
            border-color: rgba(255,255,255,0.85);
            transform: translateY(-1px);
        }

        /* ── Formulaire card ── */
        .form-card {
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.55);
            border-radius: 32px;
            padding: 40px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
            color: #ffffff;
        }
        @media (min-width: 768px) {
            .form-card { padding: 52px; }
        }

        /* ── Success state ── */
        #form-success { display: none; }

        /* ── Séparateur ou ── */
        .or-separator {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 20px 0 0;
        }
        .or-separator::before,
        .or-separator::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,0.08);
        }
        .or-separator span {
            font-size: 9px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            opacity: 0.3;
            font-weight: 700;
        }

/* --- LISERÉ DÉGRADÉ BAS DE PAGE (global, sous les boutons flottants) --- */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9)   0%,
        rgba(0, 0, 0, 0.75)  15%,
        rgba(0, 0, 0, 0.55)  30%,
        rgba(0, 0, 0, 0.35)  50%,
        rgba(0, 0, 0, 0.15)  70%,
        rgba(0, 0, 0, 0.04)  85%,
        rgba(0, 0, 0, 0)    100%
    );
    pointer-events: none;
    z-index: 30;
}

/* ── Animation panier : pulse icône + bulle volante ── */
@keyframes cartPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.cart-pulse {
    animation: cartPulse 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ══════════════════════════════════════════════
   ANIMATION CLIC BOUTON PANIER
   ══════════════════════════════════════════════ */

/* Bounce sobre — pas de rotation, amplitude modérée */
@keyframes cartBtnBounce {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.85); }
    55%  { transform: scale(1.18); }
    78%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

/* Un seul ripple, discret */
@keyframes cartBtnRipple {
    0%   { transform: scale(0.4); opacity: 0.45; }
    100% { transform: scale(2.6); opacity: 0; }
}
/* Désactivés mais conservés pour éviter toute erreur */
@keyframes cartBtnRipple2 { 0%, 100% { opacity: 0; } }
@keyframes cartBtnFlash    { 0%, 100% { opacity: 0; } }

/* Animation du bouton "Mon Panier" dans le menu mobile */
@keyframes cartMenuPop {
    0%   { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);  transform: scale(1); }
    20%  { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.55); transform: scale(0.97); }
    60%  { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); transform: scale(1.02); }
    100% { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);  transform: scale(1); }
}

/* ── Classes déclenchées par JS ── */

.cart-btn-bounce {
    animation: cartBtnBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
.cart-btn-ripple {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid white;
    pointer-events: none;
    animation: cartBtnRipple 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cart-btn-ripple2 {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    pointer-events: none;
    animation: cartBtnRipple2 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}
.cart-btn-flash {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: white;
    pointer-events: none;
    animation: cartBtnFlash 0.5s ease forwards;
}
.cart-menu-pop {
    animation: cartMenuPop 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

/* ── TOTAL STICKY en haut de la sidebar ── */
.cart-total-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(to bottom, #0a0a0a 80%, transparent 100%);
    padding: 12px 0 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Liens légaux en bas de la sidebar ── */
.cart-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
    padding: 14px 0 4px;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cart-legal-links a {
    color: rgba(255,255,255,0.3);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}
.cart-legal-links a:hover { color: rgba(255,255,255,0.6); }
.cart-legal-sep { color: rgba(255,255,255,0.15); }

/* ── Curseur visible dans la modale de paiement ── */
#stripe-payment-modal,
#stripe-payment-modal * {
    cursor: auto !important;
}
#stripe-payment-modal button { cursor: pointer !important; }
#stripe-payment-modal input,
#stripe-payment-modal select { cursor: text !important; }
#stripe-payment-modal input[type="checkbox"] { cursor: pointer !important; }

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS BOUTONS — product-option (modale panier)
   ══════════════════════════════════════════════════════════════ */

.product-option {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.18s ease,
                background 0.18s ease;
}
.product-option:hover {
    transform: translateX(5px);
}
.product-option:active {
    transform: translateX(3px) scale(0.98);
    transition-duration: 0.08s;
}

/* ══════════════════════════════════════════════
   ANIMATION LOGO NAVBAR
   ══════════════════════════════════════════════ */

@keyframes logoSpin {
    0%   { opacity: 0; transform: rotate(-180deg) scale(0.4); }
    65%  { transform: rotate(12deg) scale(1.08); }
    82%  { transform: rotate(-5deg) scale(0.97); }
    100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* isolation: isolate coupe l'effet mix-blend-mode du curseur sur le logo */
a:has(#nav-logo) {
    isolation: isolate;
}

#nav-logo {
    animation: logoSpin 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
    transform-origin: center;
    pointer-events: none;
    isolation: isolate;
}

#nav-logo.ready {
    pointer-events: auto;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.45s ease;
}

#nav-logo.ready:hover {
    transform: rotate(20deg) scale(1.3);
    /* Glow en couches : large + serré pour rester visible malgré blend-mode */
    filter: drop-shadow(0 0 6px #fff)
            drop-shadow(0 0 16px rgba(255,255,255,0.8))
            drop-shadow(0 0 30px rgba(255,255,255,0.4));
}

/* ══════════════════════════════════════════════
   FADE-IN AU CHARGEMENT DES IMAGES & ICÔNES
   ══════════════════════════════════════════════ */

/* État initial : invisible */
img.img-fade {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* État chargé : apparition douce */
img.img-fade.img-loaded {
    opacity: 1;
}

/* Zoom arsenal : déclenché par le parent car pointer-events:none sur l'image */
[data-arsenal-trigger] img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
[data-arsenal-trigger]:hover img {
    transform: scale(1.1);
}

/* Fade-in pour les SVG et éléments nav au chargement de la page */
.nav-fade {
    opacity: 0;
    animation: navFadeIn 0.5s ease forwards;
}

@keyframes navFadeIn {
    to { opacity: 1; }
}

/* ══════════════════════════════════════════════
   SECTIONS ARTISTE + TRAVAUX — fond clair
   ══════════════════════════════════════════════ */

/* Base texte */
#artiste, #travaux { color: #111; }

/* Classes opacity-* Tailwind : force couleur sombre */
#artiste .opacity-40, #artiste .opacity-50, #artiste .opacity-60,
#travaux .opacity-40, #travaux .opacity-50, #travaux .opacity-60 {
    color: #333;
}

/* ── Tuiles stats (#artiste .card-presta) ──
   Isolation complète de Tailwind : on déclare TOUTES les propriétés animées
   explicitement pour empêcher toute transition parasite à 150ms. */
#artiste .card-presta {
    background: #fff !important;
    border: 1.5px solid rgba(0,0,0,0.14) !important;
    border-top: 3px solid #222 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08),
                0 1px 4px  rgba(0,0,0,0.05) !important;
    color: #111;
    position: relative;
    overflow: hidden;
    /* transform fixé explicitement — évite que Tailwind anime "rien→rien" */
    transform: translateY(0) scale(1) !important;
    will-change: box-shadow, opacity;
    /* Contrôle TOTAL de la transition : on exclut transform */
    transition: box-shadow   1.1s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                opacity      1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Overlay lumineux — fade in rapide / fade out lent */
#artiste .card-presta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(
        150deg,
        rgba(255,255,255,0.65) 0%,
        rgba(255,255,255,0.20) 50%,
        rgba(255,255,255,0.00) 100%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Le contenu des tuiles reste au-dessus de l'overlay */
#artiste .card-presta > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    #artiste .card-presta:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,0.11),
                    0 2px 8px  rgba(0,0,0,0.06) !important;
        border-color: rgba(0,0,0,0.20) !important;
        /* transform verrouillé — AUCUN mouvement */
        transform: translateY(0) scale(1) !important;
        transition: box-shadow   0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity      0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    #artiste .card-presta:hover::after {
        opacity: 1;
        transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

/* ── Cartes travaux (card-presta dans #travaux) ── */
#travaux .card-presta {
    background: #fff !important;
    border: 1.5px solid rgba(0,0,0,0.14) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.09),
                0 1px 4px  rgba(0,0,0,0.06) !important;
    color: #111;
}

/* Tags pill */
#artiste [class*="border-white"],
#travaux [class*="border-white"] {
    border-color: rgba(0,0,0,0.20) !important;
    color: #222 !important;
}
#artiste [class*="bg-white/5"],
#travaux [class*="bg-white/5"] {
    background: #e8e7e2 !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    color: #333 !important;
}

/* ── Onglets travaux ── */
.travaux-tab {
    background: #e8e7e2;
    border: 1.5px solid rgba(0,0,0,0.18);
    color: rgba(0,0,0,0.55);
    cursor: pointer;
    font-size: 11px;
    transition: background 0.4s cubic-bezier(0.22,1,0.36,1),
                border-color 0.4s cubic-bezier(0.22,1,0.36,1),
                color 0.3s ease,
                box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
}
.travaux-tab:hover {
    background: #dddcd7;
    border-color: rgba(0,0,0,0.30);
    color: rgba(0,0,0,0.85);
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}
.travaux-tab.active-tab {
    background: #111;
    border-color: #111;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}

/* ── FADE UNIFIÉ POUR TOUTES LES CARTES ──
   Entrée rapide (0.4s) / sortie lente (0.9s)
   Overlay ::before pour le flash de lumière          */

/* ── 1. travaux-card ── */
.travaux-card {
    position: relative;
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 8px  rgba(0, 0, 0, 0.07),
                0 1px 3px  rgba(0, 0, 0, 0.05) !important;
    /* Sortie : lente et douce */
    transition: transform    0.85s cubic-bezier(0.16, 1, 0.3, 1),
                background   1.0s  cubic-bezier(0.16, 1, 0.3, 1),
                border-color 1.0s  cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow   1.0s  cubic-bezier(0.16, 1, 0.3, 1);
}
/* Overlay flash de lumière */
.travaux-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.travaux-card > * { position: relative; z-index: 1; }

@media (min-width: 768px) {
    .travaux-card:hover {
        background: #fafafa !important;
        border-color: rgba(0, 0, 0, 0.22) !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14),
                    0 4px  12px rgba(0, 0, 0, 0.08) !important;
        transform: translateY(-5px);
        /* Entrée : rapide */
        transition: transform    0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    background   0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow   0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .travaux-card:hover::before {
        opacity: 1;
        transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

/* ── 2. support-btn — fond coloré par plateforme, contraste fort ── */
.support-btn {
    background: #e8e7e2;           /* même teinte que les onglets : se détache du fond */
    border: 1.5px solid rgba(0,0,0,0.18);
    border-left: 4px solid rgba(0,0,0,0.30);
    box-shadow: 0 4px 14px rgba(0,0,0,0.09),
                0 1px 4px  rgba(0,0,0,0.05);
    color: #111;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background   0.85s cubic-bezier(0.16,1,0.3,1),
                border-color 0.85s cubic-bezier(0.16,1,0.3,1),
                box-shadow   0.85s cubic-bezier(0.16,1,0.3,1),
                transform    0.75s cubic-bezier(0.16,1,0.3,1);
}
.support-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1);
}
.support-btn > * { position: relative; z-index: 1; }

.support-btn:hover {
    transform: translateY(-3px);
    color: #111;
    transition: background   0.35s cubic-bezier(0.22,1,0.36,1),
                border-color 0.35s cubic-bezier(0.22,1,0.36,1),
                box-shadow   0.35s cubic-bezier(0.22,1,0.36,1),
                transform    0.35s cubic-bezier(0.22,1,0.36,1);
}
.support-btn:hover::before {
    opacity: 1;
    transition: opacity 0.30s cubic-bezier(0.22,1,0.36,1);
}

/* Bandcamp — teinte cyan au repos, plus vive au hover */
.support-btn-bandcamp {
    background: rgba(29,193,209,0.10) !important;
    border-left-color: rgba(29,193,209,0.75) !important;
}
.support-btn-bandcamp:hover {
    background: rgba(29,193,209,0.18) !important;
    border-color: rgba(29,193,209,0.50) !important;
    border-left-color: rgba(29,193,209,1) !important;
    box-shadow: 0 12px 36px rgba(29,193,209,0.22),
                0 3px  8px  rgba(29,193,209,0.12) !important;
}

/* PayPal — teinte bleue */
.support-btn-paypal {
    background: rgba(0,112,186,0.08) !important;
    border-left-color: rgba(0,112,186,0.70) !important;
}
.support-btn-paypal:hover {
    background: rgba(0,112,186,0.15) !important;
    border-color: rgba(0,112,186,0.40) !important;
    border-left-color: rgba(0,112,186,1) !important;
    box-shadow: 0 12px 36px rgba(0,112,186,0.20),
                0 3px  8px  rgba(0,112,186,0.10) !important;
}

/* Tipeee — teinte verte */
.support-btn-tipeee {
    background: rgba(106,195,65,0.09) !important;
    border-left-color: rgba(106,195,65,0.70) !important;
}
.support-btn-tipeee:hover {
    background: rgba(106,195,65,0.16) !important;
    border-color: rgba(106,195,65,0.40) !important;
    border-left-color: rgba(106,195,65,1) !important;
    box-shadow: 0 12px 36px rgba(106,195,65,0.20),
                0 3px  8px  rgba(106,195,65,0.10) !important;
}

/* Onglets et cartes travaux → voir bloc ci-dessus */

/* ══════════════════════════════════════════════
   CARTES TRAVAUX — VIDÉO YOUTUBE INTÉGRÉE
   ══════════════════════════════════════════════ */

/* Le placeholder (fond pointillé) disparaît dès que l'iframe se charge */
.travaux-video-wrap iframe[style*="opacity: 1"] ~ .travaux-placeholder,
.travaux-video-wrap iframe[style*="opacity:1"] ~ .travaux-placeholder {
    display: none;
}

/* Tant que l'iframe n'est pas chargée, elle ne prend pas de place visuelle */
.travaux-video-wrap iframe[style*="opacity: 0"],
.travaux-video-wrap iframe[style*="opacity:0"] {
    position: absolute;
    inset: 0;
}

/* Stat-counter : légère animation de chargement (pulsation) pendant le fetch */
.stat-counter {
    transition: opacity 0.4s ease;
}
/* ══════════════════════════════════════════════
   SKELETON + FADE-IN IFRAMES VIDÉO TRAVAUX
   ══════════════════════════════════════════════ */

@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.travaux-video-skeleton {
    z-index: 1;
    pointer-events: none;
}

.travaux-yt-iframe {
    z-index: 2;
}

/* Placeholder au-dessus du skeleton tant que l'iframe n'est pas là */
.travaux-placeholder {
    z-index: 3;
}

/* ── Logo AQVILVS sur fond clair ──
   mix-blend-mode:multiply + filter:invert(1) rend le logo noir
   et transparent sur fond blanc/clair sans fond blanc parasite  */
#artiste .logo-aqvilvs {
    filter: invert(1) brightness(0);
    mix-blend-mode: multiply;
}

/* ── Support buttons — fond coloré distinct du fond clair ── */
/* On renforce les ombres portées pour les "décoller" du fond */
.support-btn {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10),
                0 1px  4px rgba(0, 0, 0, 0.07) !important;
}
.support-btn:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13),
                0 3px  8px  rgba(0, 0, 0, 0.08) !important;
}
/* ══════════════════════════════════════════════
   ANIMATION COMPTEUR STATS
   ══════════════════════════════════════════════ */

/* Pendant l'animation, le chiffre a un léger éclat */
.stat-counter {
    transition: opacity 0.3s ease;
    display: inline-block;
}

/* La carte stat est légèrement grisée tant que le chiffre n'est pas chargé */
#artiste .card-presta:has(.stat-counter) {
    transition: opacity 0.4s ease;
}
/* ══════════════════════════════════════════════
   TYPOGRAPHIE — TAILLES MOBILES SECTIONS CLAIRES
   ══════════════════════════════════════════════ */

/* Sur mobile, les labels et textes secondaires sont plus lisibles */
@media (max-width: 767px) {
    /* Labels de catégorie dans les cartes travaux */
    #travaux .travaux-card [class*="tracking-"] {
        font-size: 10px;
    }

    /* Titres des cartes travaux */
    #travaux .travaux-card h3 {
        font-size: 15px;
    }

    /* Descriptions */
    #travaux .travaux-card p[style*="0.58"] {
        font-size: 13px;
        line-height: 1.6;
    }

    /* Stats labels sous les chiffres */
    #artiste .card-presta p:last-child {
        font-size: 9px;
        letter-spacing: 0.2em;
    }

    /* Boutons support : label plus visible */
    .support-btn p:first-child {
        font-size: 12px;
    }
    .support-btn p:last-child {
        font-size: 10px;
    }

    /* Tags pill */
    #travaux .travaux-card [class*="rounded-full"] {
        font-size: 9px;
        padding: 4px 10px;
    }
}

/* ══════════════════════════════════════════════
   ANIMATION SCRAMBLE AU SURVOL DES TUILES
   ══════════════════════════════════════════════ */

/* Légère variation de couleur pendant le scramble */
@keyframes counterScramblePulse {
    0%   { opacity: 1;    }
    15%  { opacity: 0.65; }
    50%  { opacity: 0.80; }
    85%  { opacity: 0.70; }
    100% { opacity: 1;    }
}

/* Le chiffre s'active quand la carte est survolée */
#artiste .card-presta:hover .stat-counter {
    animation: counterScramblePulse 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* ══════════════════════════════════════════════
   SKELETON LOADER — iframes audio & vidéo
   ══════════════════════════════════════════════ */

.iframe-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 200% 100%;
    animation: iframeSkeleton 1.6s ease-in-out infinite;
    border-radius: 12px;
    pointer-events: none;
}

/* Sur fond clair (sections travaux) — teinte inversée */
#travaux .iframe-skeleton {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.05) 25%,
        rgba(0,0,0,0.10) 50%,
        rgba(0,0,0,0.05) 75%
    );
    background-size: 200% 100%;
}

@keyframes iframeSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* ══════════════════════════════════════════════
   MINIATURES YOUTUBE — page musiques
   ══════════════════════════════════════════════ */

/* Bouton play centré */
.yt-thumb-wrap .yt-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.yt-thumb-wrap .yt-play-btn svg {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    padding: 10px;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1),
                background 0.6s cubic-bezier(0.16,1,0.3,1);
}

@media (min-width: 768px) {
    .yt-thumb-wrap:hover .yt-play-btn svg {
        transform: scale(1.07);
        background: rgba(255,50,50,0.75);
    }
}
/* ══════════════════════════════════════════════
   BOUTON PLAY — cartes Travaux (fond clair)
   ══════════════════════════════════════════════ */

.travaux-yt-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content:s center;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.travaux-yt-play-btn svg {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
    background: rgba(0,0,0,0.42);
    border-radius: 50%;
    padding: 10px;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                background 0.3s ease;
}

/* ── Zoom vidéos.html identique sur les cartes travaux ──
   Carte : scale(1.02) + ombre au hover
   Image : scale(1.1) indépendant, transition plus longue  */

.travaux-yt-thumb-wrap {
    overflow: hidden;
    transition: transform     0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow    0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.travaux-yt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                opacity   0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    .travaux-yt-thumb-wrap:hover {
        transform: scale(1.02);
        box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }

    .travaux-yt-thumb-wrap:hover .travaux-yt-play-btn svg {
        transform: scale(1.12);
        background: rgba(220,40,40,0.85);
    }
}
/* ── Label "Filtrer" devant les pills ── */
.filter-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    padding-right: 4px;
    white-space: nowrap;
    align-self: center;
}

/* ── Processus créatif — photo plein-fond ── */
.proc-card {
    position: relative;
    overflow: hidden;
}
/* Image absolue qui remplit toute la carte */
.proc-img-fill {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.proc-img-fill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.6) saturate(0.8);
    transition: transform 1.4s cubic-bezier(0.16,1,0.3,1);
}
.proc-card:hover .proc-img-fill img { transform: scale(1.06); }
/* Dégradé : photo visible en haut, fondu opaque vers le bas */
.proc-img-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(15,15,16,0.18)  0%,
        rgba(15,15,16,0.45) 38%,
        rgba(15,15,16,0.82) 65%,
        rgba(15,15,16,0.97) 100%);
    pointer-events: none;
}
/* Contenu texte au-dessus du fond */
.proc-content {
    position: relative;
    z-index: 1;
}
/* Tailles de texte responsives dans les cartes processus */
.proc-content .proc-num   { font-size: 2.4rem; }
.proc-content .proc-title { font-size: 15px; }
.proc-content .proc-desc  { font-size: 14px; }
@media (min-width: 1024px) {
    .proc-content .proc-num   { font-size: 3rem; }
    .proc-content .proc-title { font-size: 17px; }
    .proc-content .proc-desc  { font-size: 15px; }
}

/* ── Processus créatif — layout liste sur mobile ── */
@media (max-width: 767px) {
    .proc-card {
        min-height: 100px !important;
        text-align: left !important;
        padding: 1rem 1.25rem !important;
    }
    /* Gradient horizontal : image visible à gauche, fondu vers la droite */
    .proc-img-fill::after {
        background: linear-gradient(to right,
            rgba(15,15,16,0.15)  0%,
            rgba(15,15,16,0.60) 45%,
            rgba(15,15,16,0.95) 100%);
    }
    /* Layout 2 colonnes : numéro | titre + description */
    .proc-content {
        display: grid;
        grid-template-columns: 54px 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 1rem;
        height: 100%;
    }
    .proc-content .proc-num {
        grid-column: 1;
        grid-row: 1 / 3;
        font-size: 2rem !important;
        margin-bottom: 0 !important;
        text-align: center;
        line-height: 1;
    }
    .proc-content .proc-title {
        grid-column: 2;
        grid-row: 1;
        font-size: 13px !important;
        margin-bottom: 0.2rem !important;
    }
    .proc-content .proc-desc {
        grid-column: 2;
        grid-row: 2;
        font-size: 12px !important;
    }
}

/* ── Bouton "Toutes les expertises" — retour page services ── */
.service-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9999px;
    text-decoration: none;
    color: rgba(255,255,255,0.4);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    font-family: "Plus Jakarta Sans", sans-serif;
    transition: border-color 0.2s, color 0.2s;
}
.service-back-btn:hover {
    border-color: rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.75);
}
.service-back-btn svg { flex-shrink: 0; }

/* ── Bouton "Tous les articles" — retour index blog ── */
.blog-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.07);
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    font-family: "Plus Jakarta Sans", sans-serif;
    transition: color 0.2s;
}
.blog-back-btn:hover { color: rgba(255,255,255,1); }
.blog-back-btn svg { flex-shrink: 0; }

/* ── Breadcrumb wrapper (pages produit shop) ── */
.shop-breadcrumb-wrap {
    padding-top: 110px;
    padding-bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .shop-breadcrumb-wrap { padding-top: 140px; }
}

/* ── Breadcrumb pill (pages produit shop) ── */
.breadcrumb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 9999px;
    padding: 8px 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.breadcrumb-pill a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s;
    padding: 0 2px;
}
.breadcrumb-pill a:hover { color: #fff; }
.breadcrumb-pill .breadcrumb-sep {
    color: rgba(255,255,255,0.35);
    margin: 0 6px;
    font-size: 11px;
    font-weight: 300;
}
.breadcrumb-pill > span:last-child {
    color: rgba(255,255,255,0.9);
    font-weight: 700;
}
@media (max-width: 640px) {
    .breadcrumb-pill {
        font-size: 8px;
        letter-spacing: 0.12em;
        padding: 7px 12px;
    }
    .breadcrumb-pill > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
}

/* ── Grille "Découvrez aussi" (pages produit shop) ── */
.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 768px) {
    .related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Hero background : image ou vidéo plein-fond ── */
.page-hero   { overflow: hidden; }
.article-hero { overflow: hidden; }
.hero-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}
@keyframes hero-img-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.hero-bg-img,
.hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.5) saturate(0.8);
    animation: hero-img-fadein 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Dégradé de lisibilité sur le fond hero */
.hero-bg-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        rgba(5,5,5,0.30)  0%,
        rgba(5,5,5,0.50) 50%,
        rgba(5,5,5,0.72) 100%);
    pointer-events: none;
}
/* Tous les enfants directs du hero sauf le fond passent devant */
.page-hero > :not(.hero-bg-wrap),
.article-hero > :not(.hero-bg-wrap) {
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PAYSAGE — Nav · Menu mobile · Panier (toutes les pages)
   @media max-height:500px + orientation:landscape
   ══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {

    /* ── Nav compacte ── */
    nav.fixed { padding-top: 4px !important; padding-bottom: 0 !important; }
    #nav-pill { padding: 5px 12px !important; }
    #nav-pill img#nav-logo { width: 24px !important; height: 24px !important; }
    #nav-pill .text-\[13px\],
    #nav-pill .md\:text-\[15px\] { font-size: 10px !important; }
    #menu-toggle svg { width: 18px; height: 18px; }

    /* ── Side panier compact ── */
    #cart-sidebar { width: 220px !important; max-width: 45vw !important; }
    #cart-sidebar > div { padding: 8px 10px !important; }
    #cart-sidebar h3 { font-size: 8px !important; letter-spacing: 0.2em !important; }
    #cart-sidebar #cart-items { padding: 6px 10px !important; gap: 6px !important; }
    #cart-sidebar #cart-items .rounded-2xl { padding: 6px !important; gap: 6px !important; }
    #cart-sidebar #cart-items img { width: 28px !important; height: 28px !important; border-radius: 8px !important; }
    #cart-sidebar #cart-items p { font-size: 8px !important; }
    #cart-sidebar #cart-items button { width: 18px !important; height: 18px !important; }
    #cart-sidebar #cart-items svg { width: 10px !important; height: 10px !important; }
    #cart-close svg { width: 14px !important; height: 14px !important; }
    #cart-footer { padding: 8px 10px 10px !important; }
    #cart-footer-row { margin-bottom: 8px !important; }
    #cart-footer-label { font-size: 8px !important; }
    #cart-footer-total { font-size: 14px !important; }
    #cart-order-btn { padding: 8px 12px !important; font-size: 9px !important; margin-bottom: 8px !important; }
    #cart-legal-grid { gap: 4px !important; }
    #cart-legal-grid a { padding: 4px !important; font-size: 7px !important; border-radius: 6px !important; }
    #cart-tva-note { font-size: 7px !important; margin-top: 6px !important; }
    #cart-empty-msg { font-size: 8px !important; }

    /* ── Menu mobile compact ── */
    #mobile-menu { width: 220px !important; }
    #mobile-menu .pt-20 { padding-top: 40px !important; }
    #mobile-menu .px-8 { padding-left: 16px !important; padding-right: 16px !important; }
    #mobile-menu .mobile-link { padding: 4px 12px !important; font-size: 10px !important; }
    #mobile-menu .menu-separator { margin: 4px 0 8px 0 !important; }
    #mobile-menu #menu-close { top: 12px !important; right: 12px !important; }
    #mobile-menu #menu-close svg { width: 20px !important; height: 20px !important; }
    #mobile-menu .w-full.pt-8 { padding-top: 8px !important; }
    #mobile-menu .btn-rounded { padding: 8px !important; font-size: 9px !important; }
    #mobile-menu a svg, #mobile-menu .w-5 { width: 16px !important; height: 16px !important; }
}
.filter-bar-label svg { opacity: 0.5; }


/* ════════════════════════════════════════════════════════════════════════
   NAV — règles propagées depuis index.html vers toutes les pages
   (déplacées ici pour que qui-suis-je, expertises, blog, services, etc.
   héritent du même comportement de nav, sans yo-yo entre breakpoints)
   ════════════════════════════════════════════════════════════════════════ */

        /* ════════════════════════════════════════════════════════════════════
           NAV — modes distincts par appareil & taille (anti yo-yo)
           ┌─────────────────────────────────┬────────────────────────────────┐
           │ Mode                            │ Détection                       │
           ├─────────────────────────────────┼────────────────────────────────┤
           │ Mobile portrait                 │ pointer:coarse + portrait       │
           │ Mobile paysage                  │ pointer:coarse + landscape      │
           │ PC compact (14"-16", < 1480px)  │ pointer:fine + max-width:1479px │
           │ PC desktop (≥ 1480px)           │ pointer:fine + min-width:1480px │
           └─────────────────────────────────┴────────────────────────────────┘
           Sur les modes mobiles : nav par défaut Tailwind (pill détachée +
           burger). Sur PC compact : pill collée au haut, compacte. Sur PC
           desktop : pill détachée du haut, tous les liens visibles.
           Une seule transition propre à 1480px sur PC : plus de yo-yo.
           ════════════════════════════════════════════════════════════════════ */

        /* ── PC compact (largeur < 1480, hauteur indifférente) :
              cache certains liens, active le bouton "Plus", pill légèrement compacte ── */
        @media (pointer: fine) and (max-width: 1479px) {
            .nav-link-overflow           { display: none !important; }
            #nav-more-btn                { display: flex !important; }
            /* Réduire légèrement l'espacement des liens */
            #nav-links-desktop           { gap: 0; }
            #nav-links-desktop > *       { margin: 0 0.9rem !important; }
            /* Padding pill identique au format plein (≥ 1480px = 2rem) */
            #nav-pill                    { padding-left: 2rem !important; padding-right: 2rem !important; }
            /* Icône panier : taille figée en px pour ne pas suivre le scaling fluide
               qui la réduit à ~26px sur 14". Reste lisible. */
            #cart-icon-btn               { width: 36px !important; height: 36px !important; }
            #cart-icon-btn svg           { width: 20px !important; height: 20px !important; }
            #cart-icon-btn #cart-count   { width: 16px !important; height: 16px !important; font-size: 9px !important; }
        }
        @media (pointer: fine) and (min-width: 1480px) {
            #nav-more-btn                { display: none !important; }
        }

        /* ── PC compact + hauteur réduite (≤ 800px, typique 14" en 1366×768) :
              en plus du compact, on colle la pill au haut pour gagner de la hauteur.
              Si la hauteur est suffisante, on reste en pill détachée. ── */
        @media (pointer: fine) and (max-width: 1479px) and (max-height: 800px) {
            /* Boutons nav légèrement plus compacts */
            .btn-rounded                 { padding: 11px 22px !important; }
            #nav-contact-btn.btn-rounded { padding: 10px 18px !important; }
            /* Logo nav légèrement réduit */
            #nav-logo                    { width: 32px !important; height: 32px !important; }
            /* Nav collée en haut de fenêtre, hauteur réduite */
            nav.fixed                    { padding-top: 0 !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
            #nav-pill                    { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; border-radius: 0 0 22px 22px !important; }

            /* Dropdowns : réduit le "pont invisible" ::before qui sinon remonte
               dans la pill (30px de haut, 20px de chaque côté) et intercepte les
               clics sur les boutons voisins (Blog, Expertises, etc.). En stuck
               la pill est collée au haut, donc le pont déborde dessus. On le
               réduit à 10px pile poil au-dessus du menu, sans extension latérale
               — ça couvre toujours le gap trigger/menu mais ne déborde plus. */
            #dropdown-menu::before,
            #dropdown-menu-expertises::before,
            #dropdown-menu-more::before {
                top: -10px !important;
                height: 10px !important;
                left: 0 !important;
                right: 0 !important;
            }
        }

        /* ── Nav adaptative : JS contrôle via .adaptive/.expanded sur #nav-pill ── */
        /* Quand JS prend le relais (class "adaptive"), il overrides les breakpoints xl: de Tailwind */
        #nav-pill.adaptive #nav-links-desktop                        { display: none !important; }
        #nav-pill.adaptive #cart-icon-btn,
        #nav-pill.adaptive #nav-lang-desktop,
        #nav-pill.adaptive #nav-contact-btn                          { display: none !important; }
        #nav-pill.adaptive #menu-toggle                              { display: flex !important; }

        #nav-pill.adaptive.expanded #nav-links-desktop               { display: flex !important; }
        #nav-pill.adaptive.expanded #cart-icon-btn,
        #nav-pill.adaptive.expanded #nav-lang-desktop                { display: flex !important; }
        #nav-pill.adaptive.expanded #nav-contact-btn                 { display: block !important; }
        #nav-pill.adaptive.expanded #menu-toggle                     { display: none !important; }

        /* Quand expanded, le pill a plus de padding horizontal */
        #nav-pill.adaptive.expanded { padding-left: 2rem; padding-right: 2rem; }

        /* En mode compact, supprimer le margin-left du conteneur droit
           (prévu pour espacer du centre, devenu inutile quand le centre est masqué) */
        #nav-pill.adaptive:not(.expanded) > div:last-child { margin-left: 0 !important; }

        /* ── Items nav : jamais de retour à la ligne interne ──
           Garantit que texte + chevron restent sur une seule ligne.
           Si la place manque, le JS navAdaptive bascule en hamburger. ── */
        #nav-links-desktop > * { white-space: nowrap; flex-shrink: 0; }

        /* ── PC compact étroit (1024-1199px) : resserre les espacements ── */
        @media (min-width: 1024px) and (max-width: 1199px) {
            #nav-links-desktop > *       { margin: 0 0.4rem !important; }
            #nav-pill > div:last-child   { gap: 0.5rem !important; }
        }

        /* ── Nav hamburger : hauteur calée sur le format desktop étendu ──
           Référence :
             • Hauteur > 800px : .btn-rounded (padding:14px×2 + font:11px×LH≈1.3) ≈ 43px
                                 + pill p-4 (1rem) × 2 → calc(2rem + 44px) avec marge.
             • Hauteur ≤ 800px : compact — .btn-rounded réduit à 11px×2 + 11px×LH≈35px,
                                 padding pill 0.5rem × 2 → calc(1rem + 37px).
           Les deux règles éliminent l'écart de hauteur entre mode étendu et hamburger. ── */
        @media (pointer: fine) and (min-height: 801px) {
            #nav-pill.adaptive:not(.expanded) {
                min-height: calc(2rem + 44px);
            }
        }
        @media (pointer: fine) and (max-width: 1479px) and (max-height: 800px) {
            #nav-pill.adaptive:not(.expanded) {
                min-height: calc(1rem + 37px);
            }
        }

        /* ── Menu mobile : largeur élargie sur desktop ── */
        @media (pointer: fine) {
            #mobile-menu { width: 220px !important; }
        }

        /* ── Logo & icône panier : taille fixe sur desktop ──
           w-9 h-9 (2.25rem) varie avec le scaling fluide (27-36px selon la largeur).
           On fixe à 36px (= 2.25rem × 16px, taille pleine sans scaling).

           Mode étendu (expanded) : min-height:801px pour ne pas écraser le
           mode compact (height ≤ 800px) qui réduit déjà le logo à 32px.

           Mode hamburger : sélecteur ciblant directement l'état
           adaptive:not(.expanded), indépendamment de la hauteur de fenêtre.
           #cart-icon-mobile remplace #cart-icon-btn en mode hamburger. ── */

        /* Mode étendu – hauteur suffisante seulement */
        @media (pointer: fine) and (min-height: 801px) {
            #nav-logo                              { width: 36px !important; height: 36px !important; }
            #cart-icon-btn                         { width: 36px !important; height: 36px !important; }
            #cart-icon-btn svg                     { width: 20px !important; height: 20px !important; }
        }

        /* Mode hamburger – toute hauteur de fenêtre */
        @media (pointer: fine) {
            #nav-pill.adaptive:not(.expanded) #nav-logo        { width: 36px !important; height: 36px !important; }
            #nav-pill.adaptive:not(.expanded) #cart-icon-mobile { width: 36px !important; height: 36px !important; }
            #nav-pill.adaptive:not(.expanded) #cart-icon-mobile svg { width: 20px !important; height: 20px !important; }
            /* Hamburger calé sur la proportion mobile (panier 20px → hamburger 24px) */
            #menu-toggle svg                   { width: 24px !important; height: 24px !important; }
        }

/* ── Marge minimale logo/hamburger dans le pill sur tous appareils tactiles ── */
@media (pointer: coarse) {
    #nav-pill { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* ── Series headers dans la galerie photo ── */
.series-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
}
.series-header--first {
    margin-top: 0;
}
.series-header span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}
.series-header::before {
    content: '';
    width: 18
/* Curseur personnalisé toujours au-dessus de tout (lightbox/modales) — sinon il passe derrière */
#cursor,#cursor-hand{z-index:2147483647 !important;}