html,
body {
    overflow-x: visible;
}
/* Block scroll while loader is visible */
body:not(.is-loaded) {
    overflow: hidden !important;
    height: 100vh;
}
body {
    font-family: 'Inter', sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    /* No transition - curtain handles mode switch animation */
}
.glass-panel {
    background: rgba(250, 250, 249, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* No transition - curtain handles mode switch animation */
}
.reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
section {
    position: relative;
    background-color: inherit;
    /* No transition - curtain handles mode switch animation */
}

/* ═══════════════════════════════════════════════════════════
   Nav adaptive contrast — dark sections under the nav
   ═══════════════════════════════════════════════════════════ */
nav.nav-dark.glass-panel {
    background: rgba(28, 25, 23, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    transition:
        background 0.35s ease,
        border-color 0.35s ease;
}
nav.glass-panel:not(.nav-dark) {
    transition:
        background 0.35s ease,
        border-color 0.35s ease;
}
nav.nav-dark #logo-link {
    color: #fafaf9;
}
nav.nav-dark .nav-link {
    color: #a8a29e;
}
nav.nav-dark .nav-link:hover {
    color: #fafaf9;
}
nav.nav-dark .nav-link.active {
    color: #fafaf9 !important;
    font-weight: 600;
}
nav.nav-dark .nav-link::after {
    background-color: #d6d3d1;
}
nav.nav-dark #zb-toggle {
    border-color: #57534e;
    color: #d6d3d1;
}
nav.nav-dark #zb-toggle:hover {
    border-color: #f97316;
}
nav.nav-dark #lang-toggle {
    border-color: #57534e;
}
nav.nav-dark #lang-fr,
nav.nav-dark #lang-en {
    color: #78716c;
}
nav.nav-dark #lang-fr.font-bold,
nav.nav-dark #lang-en.font-bold {
    color: #fafaf9 !important;
}
nav.nav-dark #lang-toggle span[aria-hidden] {
    color: #57534e;
}
nav.nav-dark .hamburger-icon span {
    background-color: #fafaf9;
}

/* Zero Bullshit Dark Mode */
body.zb-mode {
    background-color: #1c1917;
    color: #fafaf9;
}
body.zb-mode .glass-panel {
    background: rgba(28, 25, 23, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}
body.zb-mode header {
    background-color: #1c1917;
}
body.zb-mode .bg-white {
    background-color: #0c0a09 !important;
}
body.zb-mode .bg-stone-50 {
    background-color: #1c1917 !important;
}
body.zb-mode .bg-stone-900 {
    background-color: #0c0a09 !important;
}
body.zb-mode .text-stone-900 {
    color: #fafaf9 !important;
}
body.zb-mode .text-stone-500 {
    color: #a8a29e !important;
}
body.zb-mode .text-stone-400 {
    color: #d6d3d1 !important;
}
body.zb-mode .border-stone-200 {
    border-color: #44403c !important;
}
body.zb-mode .border-stone-200\/50 {
    border-color: rgba(68, 64, 60, 0.5) !important;
}
body.zb-mode .bg-stone-100 {
    background-color: #292524 !important;
}
body.zb-mode .text-stone-600 {
    color: #d6d3d1 !important;
}
body.zb-mode .hover\:bg-stone-50:hover {
    background-color: #292524 !important;
}

/* Badge status contrast fixes in ZB mode */
body.zb-mode header .inline-flex.items-center.gap-2.px-3.py-1.rounded-full {
    background-color: rgba(52, 211, 153, 0.05) !important; /* emerald très transparent */
    border-color: rgba(52, 211, 153, 0.6) !important; /* emerald bordure visible */
}
body.zb-mode header .inline-flex.items-center.gap-2.px-3.py-1.rounded-full span {
    color: #34d399 !important; /* emerald-400 pour le texte */
}

/* ZB Toggle button glow */
#zb-toggle.active {
    border-color: #f97316;
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
}
#zb-toggle {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: all 0.3s ease;
}

/* ZB Gauge fill — pseudo-element behind content */
#zb-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.3));
    transform-origin: left center;
    transform: scaleX(var(--zb-fill, 0));
    border-radius: inherit;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* Pulse when gauge > 60% */
#zb-toggle.zb-gauge-pulse {
    animation: zbGaugePulse 2s ease-in-out infinite;
}
#zb-toggle.zb-gauge-pulse-fast {
    animation: zbGaugePulse 1.2s ease-in-out infinite;
}
#zb-toggle.zb-gauge-pulse-urgent {
    animation: zbGaugePulse 0.8s ease-in-out infinite;
}

@keyframes zbGaugePulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Glow when gauge > 80% */
#zb-toggle.zb-gauge-glow {
    box-shadow:
        0 0 12px rgba(249, 115, 22, 0.3),
        0 0 4px rgba(249, 115, 22, 0.15);
}

/* Flash at 100% before auto-trigger */
#zb-toggle.zb-gauge-flash {
    animation: zbGaugeFlash 0.4s ease-out forwards;
}
@keyframes zbGaugeFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
    30% {
        box-shadow: 0 0 20px 4px rgba(249, 115, 22, 0.7);
    }
    100% {
        box-shadow: 0 0 30px 8px rgba(249, 115, 22, 0);
    }
}

/* Reset gauge when in ZB mode */
body.zb-mode #zb-toggle::before {
    transform: scaleX(0);
}

/* Mode Transition Curtain - GPU-accelerated slide */
.mode-curtain {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: linear-gradient(135deg, #1c1917 0%, #0c0a09 100%);
    transform: translateX(-100%);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
}
.mode-curtain.rtl {
    transform: translateX(100%);
}
/* Default direction: left to right (Corporate → ZB) */
.mode-curtain.slide-in {
    animation: curtainSlideInLTR 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.mode-curtain.slide-out {
    animation: curtainSlideOutLTR 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
/* Reverse direction: right to left (ZB → Corporate) */
.mode-curtain.rtl.slide-in {
    animation: curtainSlideInRTL 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.mode-curtain.rtl.slide-out {
    animation: curtainSlideOutRTL 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
/* Curtain color matches destination mode */
.mode-curtain.to-light {
    background: linear-gradient(135deg, #fafaf9 0%, #f5f5f4 100%);
}
/* Corporate → ZB: left to right */
@keyframes curtainSlideInLTR {
    from {
        transform: translateX(-100%) translateZ(0);
    }
    to {
        transform: translateX(0) translateZ(0);
    }
}
@keyframes curtainSlideOutLTR {
    from {
        transform: translateX(0) translateZ(0);
    }
    to {
        transform: translateX(100%) translateZ(0);
    }
}
/* ZB → Corporate: right to left */
@keyframes curtainSlideInRTL {
    from {
        transform: translateX(100%) translateZ(0);
    }
    to {
        transform: translateX(0) translateZ(0);
    }
}
@keyframes curtainSlideOutRTL {
    from {
        transform: translateX(0) translateZ(0);
    }
    to {
        transform: translateX(-100%) translateZ(0);
    }
}

/* ── Nav Link — 3 states: hover, active/pressed, current page (.active) ── */

/* On-load entrance animation for the active underline */
@keyframes navUnderlineReveal {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

nav .nav-link {
    position: relative;
    transition: color 0.25s ease;
}

/* Underline pseudo-element (shared by all 3 states) */
nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1.5px;
    background-color: #a8a29e; /* stone-400 */
    border-radius: 1px;
    transform: scaleX(1);
    transform-origin: left center;
    transition:
        opacity 0.15s ease,
        background-color 0.15s ease;
    opacity: 0;
}

/* ── STATE 1: Hover — instant faint underline ── */
nav .nav-link:hover::after {
    opacity: 0.25;
}

/* ── STATE 3: Current page (.active) — persistent indicator ── */
nav .nav-link.active {
    color: #1c1917 !important; /* stone-900 */
    font-weight: 600;
}
nav .nav-link.active::after {
    transform: scaleX(1);
    opacity: 1;
    background-color: #57534e; /* stone-600 — warm, elegant */
    animation: navUnderlineReveal 0.5s cubic-bezier(0.33, 1, 0.68, 1) both;
}

/* Active link hover & press — rock-solid, zero flicker */
nav .nav-link.active:hover::after,
nav .nav-link.active:active::after {
    opacity: 1;
}

/* ── ZB Dark Mode — Orange underline + glow ── */
body.zb-mode nav .nav-link {
    color: #78716c; /* stone-500 */
}
body.zb-mode nav .nav-link:hover {
    color: #d6d3d1; /* stone-300 */
}
body.zb-mode nav .nav-link::after {
    background-color: #f97316; /* orange-500 */
}
body.zb-mode nav .nav-link:hover::after {
    opacity: 0.25;
}
/* ZB active link — rock-solid on press too */
body.zb-mode nav .nav-link.active:active::after {
    opacity: 1;
    background-color: #f97316;
}
body.zb-mode nav .nav-link.active {
    color: #fafaf9 !important;
}
body.zb-mode nav .nav-link.active::after {
    transform: scaleX(1);
    opacity: 1;
    background-color: #f97316;
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.5);
}

/* ── Nav Dark (over dark sections) — ensure active underline stays light ── */
nav.nav-dark .nav-link.active::after {
    background-color: #d6d3d1; /* stone-300 */
}

/* Content swap is instant — hidden behind the mode curtain */

/* ═══════════════════════════════════════════════════════════
   Mobile Navigation Menu
   ═══════════════════════════════════════════════════════════ */

/* Hamburger icon — 3 bars morphing to X */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    position: relative;
}
.hamburger-icon span {
    display: block;
    width: 18px;
    height: 1.5px;
    background-color: #1c1917;
    border-radius: 1px;
    position: absolute;
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.2s ease;
}
.hamburger-icon span:nth-child(1) {
    transform: translateY(-5px);
}
.hamburger-icon span:nth-child(2) {
    transform: translateY(0);
}
.hamburger-icon span:nth-child(3) {
    transform: translateY(5px);
}

/* Open state — X shape */
.hamburger-open .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg);
}
.hamburger-open .hamburger-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger-open .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg);
}

/* ZB dark mode — hamburger color */
body.zb-mode .hamburger-icon span {
    background-color: #fafaf9;
}

/* Mobile menu overlay */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 45; /* Below nav (50), above content (1) */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.3s;
}
.mobile-menu[hidden] {
    display: block !important; /* Override hidden for CSS transitions */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.mobile-menu.mobile-menu-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Backdrop */
.mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(250, 250, 249, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
body.zb-mode .mobile-menu-backdrop {
    background: rgba(28, 25, 23, 0.95);
}

/* Inner wrapper — vertical layout with centered nav + footer pinned bottom */
.mobile-menu-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Nav links container */
.mobile-menu-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mobile menu links */
.mobile-menu-link {
    display: block;
    padding: 24px 32px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #78716c;
    text-decoration: none;
    transition:
        color 0.2s ease,
        transform 0.2s ease,
        opacity 0.3s ease;
    transform: translateY(12px);
    opacity: 0;
    -webkit-tap-highlight-color: transparent;
    border: none;
    outline: none;
}
.mobile-menu-open .mobile-menu-link {
    transform: translateY(0);
    opacity: 1;
}
/* Staggered entrance */
.mobile-menu-open .mobile-menu-link:nth-child(1) {
    transition-delay: 0.05s;
}
.mobile-menu-open .mobile-menu-link:nth-child(2) {
    transition-delay: 0.1s;
}
.mobile-menu-open .mobile-menu-link:nth-child(3) {
    transition-delay: 0.15s;
}

/* Active & hover states */
.mobile-menu-link.active {
    color: #1c1917 !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1.5px;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
    color: #1c1917;
}

/* Override nav-link underline — not needed in mobile menu */
.mobile-menu-link::after {
    display: none !important;
}

/* Kill ALL focus rings/outlines in mobile menu (Safari iOS adds tap highlight + focus ring) */
.mobile-menu-link:focus,
.mobile-menu-link:focus-visible,
.mobile-menu-link:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Footer — pinned to bottom with ZB toggle */
.mobile-menu-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(8px);
    opacity: 0;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}
.mobile-menu-open .mobile-menu-footer {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.2s;
}

/* Separator */
.mobile-menu-separator {
    width: 40px;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

/* ZB toggle button — pill style */
.mobile-menu-zb {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #78716c;
    background: none;
    border: 1px solid #d6d3d1;
    border-radius: 9999px;
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-zb:hover,
.mobile-menu-zb:focus-visible {
    border-color: #f97316;
    color: #1c1917;
}

/* ZB dark mode — mobile menu */
body.zb-mode .mobile-menu-link {
    color: #78716c;
}
body.zb-mode .mobile-menu-link:hover,
body.zb-mode .mobile-menu-link:focus-visible {
    color: #fafaf9;
}
body.zb-mode .mobile-menu-link.active {
    color: #fafaf9 !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #f97316;
}
body.zb-mode .mobile-menu-separator {
    background: rgba(255, 255, 255, 0.1);
}
body.zb-mode .mobile-menu-zb {
    color: #a8a29e;
    border-color: #44403c;
}
body.zb-mode .mobile-menu-zb:hover,
body.zb-mode .mobile-menu-zb:focus-visible {
    border-color: #f97316;
    color: #fafaf9;
}

/* Hide on desktop */
@media (min-width: 768px) {
    .mobile-menu,
    #mobile-menu-btn {
        display: none !important;
    }
}

/* Z-index hierarchy for proper layering */
nav {
    z-index: 50 !important; /* Nav au-dessus de tout */
}

section,
header,
footer {
    position: relative;
    z-index: 1; /* Sections en bas de pile */
    background: transparent; /* S'assurer que le background ne bloque pas */
}

/* 3D Avatar Scene - Absolute positioning inside header */
#avatar-3d-container {
    position: absolute;
    top: -50px; /* Raised 50px */
    left: 33%; /* Décalage suggéré : 33% vers la droite */
    width: 67%; /* Occupe le reste de la largeur */
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible !important;
    background: transparent !important;
    pointer-events: none;
    z-index: 5; /* Sous la nav, au-dessus des sections */
}
#avatar-3d-container.loaded {
    opacity: 0.85; /* Professionnel mais moderne - présence sans être distrayant */
}
/* Loading state: pulse animation pour le placeholder */
#avatar-3d-container.loading {
    opacity: 0.3;
}
@keyframes placeholder-pulse {
    0%,
    100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.5;
    }
}
#avatar-3d-container.loading canvas {
    animation: placeholder-pulse 1.5s ease-in-out infinite;
}
/* ZB mode: avatar fully visible */
body.zb-mode #avatar-3d-container.loaded {
    opacity: 1;
}
#avatar-canvas {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent !important;
}

/* Audio Player Styles */
/* Audio Player Minimal */
#audio-player {
    transition: opacity 0.3s ease;
}
#audio-player:hover {
    opacity: 1 !important;
}

/* Hide on very small mobile */
@media (max-width: 640px) {
    #audio-player {
        bottom: 0.75rem;
        right: 0.75rem;
        transform: scale(0.9);
    }
    body.zb-mode #audio-player {
        right: auto;
        left: 50%;
        transform: scale(0.9) translateX(-50%);
    }
}

/* Hero Reveal Animation - Guimauve style */
/* Old hero-reveal animation (replaced by hero-text-reveal) */
/*
.hero-reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
*/

/* Keep hero-reveal for other elements (badge, paragraph, badges) */
.hero-reveal:not(.hero-text-reveal .reveal-line) {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-reveal:not(.hero-text-reveal .reveal-line).visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   HERO ANIMATIONS - FLOW ÉLÉGANT
   ======================================== */

/* Badge "Available" - Apparition douce et subtile */
.hero-badge-available {
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-badge-available.visible {
    opacity: 1;
    transform: scale(1);
}

/* Sous-titre - Animation élégante après le titre */
.hero-subtitle {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Badges métiers - Container — au-dessus de la grille */
.hero-badges-container {
    opacity: 0;
    position: relative;
    z-index: 30;
}

.hero-badges-container.visible {
    opacity: 1;
}

/* Badges individuels - Apparition en cascade */
.hero-badge {
    /* Fond blanc pur pour ressortir au-dessus de la grille */
    background-color: rgba(255, 255, 255, 1); /* blanc pur */
    border-color: #d6d3d1; /* stone-300, plus visible */
    color: #57534e; /* stone-600 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* ombre légère */

    /* Z-index AUGMENTÉ pour être au-dessus du container parent (z-20) */
    position: relative;
    z-index: 30;

    /* Animation initiale - invisible */
    opacity: 0;
    transform: translateY(15px) scale(0.9);

    /* Transition ultra fluide */
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-badge.badge-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hover subtil sur les badges */
.hero-badge:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Mode ZB - Fond PLUS DARK harmonisé avec le thème */
body.zb-mode .hero-badge {
    background-color: rgba(28, 25, 23, 1); /* stone-900, plus franc */
    border-color: #44403c; /* stone-700, plus visible */
    color: #a8a29e; /* stone-400 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

body.zb-mode .hero-badge:hover {
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
    border-color: #78716c; /* stone-500 */
}

/* Badge "Unavailable" - Apparition dramatique en rouge (indisponible) */
.hero-badge-unavailable {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); /* red-100 to red-200 */
    border: 1px solid #fca5a5; /* red-300 */

    /* Z-index AUGMENTÉ pour être au-dessus du container parent (z-20) */
    position: relative;
    z-index: 30;

    /* Animation initiale */
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-badge-unavailable.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Animation pulse rouge pour le dot */
@keyframes unavailable-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.unavailable-ping {
    background-color: #dc2626; /* red-600 */
    animation: unavailable-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.unavailable-dot {
    background-color: #dc2626; /* red-600 */
}

.unavailable-text {
    color: #991b1b; /* red-800 */
    font-weight: 600;
}

/* Mode ZB - Badge unavailable en GHOST BUTTON orange */
/* Spécificité maximale pour override le sélecteur générique ligne 77 */
body.zb-mode header .hero-badge-unavailable.inline-flex.items-center.gap-2.px-3.py-1.rounded-full {
    background: #0c0a09 !important; /* stone-950 - fond dark (override gradient + ligne 78) */
    border: 1px solid #f97316 !important; /* orange-600 - STROKE ORANGE (override ligne 79) */
}

body.zb-mode
    header
    .hero-badge-unavailable.inline-flex.items-center.gap-2.px-3.py-1.rounded-full
    .unavailable-text {
    color: #f97316 !important; /* orange-600 - TEXTE ORANGE (override ligne 82) */
    font-weight: 600;
}

/* Forcer l'orange sur TOUS les spans enfants de .unavailable-text */
body.zb-mode
    header
    .hero-badge-unavailable.inline-flex.items-center.gap-2.px-3.py-1.rounded-full
    .unavailable-text
    span {
    color: #f97316 !important; /* orange-600 - Force sur spans enfants aussi */
}

body.zb-mode header .hero-badge-unavailable .unavailable-dot {
    background-color: #f97316 !important; /* orange-600 - DOT ORANGE */
}

body.zb-mode header .hero-badge-unavailable .unavailable-ping {
    background-color: #f97316 !important; /* orange-600 - PULSE ORANGE */
}

/* ========== INTERACTIVE GRID & POST-ITS ========== */

/* Grid Layer - desktop only */
#hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    pointer-events: auto;
    overflow: hidden;
    cursor: crosshair;
}

@media (min-width: 768px) {
    #hero-grid {
        display: grid;
    }
}

.grid-cell {
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    /* No will-change here — it promoted cells to GPU layers that conflicted with curtain compositing */
    pointer-events: none; /* Let clicks pass through to grid container */
}

body.zb-mode .grid-cell {
    border-color: rgba(255, 255, 255, 0.06);
}

/* Mouse Glow */
#hero-glow {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.03) 0%, transparent 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
}

@media (min-width: 1024px) {
    #hero-glow {
        display: block;
    }
}

body.zb-mode #hero-glow {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
}

#hero:hover #hero-glow {
    opacity: 1;
}

/* Wires Layer - connections between post-its */
#hero-wires {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
    display: none;
}

@media (min-width: 1024px) {
    #hero-wires {
        display: block;
    }
}

.wire-path {
    fill: none;
    stroke: rgba(59, 130, 246, 0.25);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 8 6;
    filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.4));
    animation: wirePulse 3s ease-in-out infinite;
}

body.zb-mode .wire-path {
    stroke: rgba(96, 165, 250, 0.35);
    filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.5));
}

.wire-path.reverse {
    animation-direction: reverse;
}

.wire-path.fading {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

@keyframes wirePulse {
    0%,
    100% {
        stroke-dashoffset: 0;
        filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.3));
    }
    50% {
        stroke-dashoffset: -14;
        filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.7));
    }
}

body.zb-mode .wire-path {
    animation-name: wirePulseZB;
}

@keyframes wirePulseZB {
    0%,
    100% {
        stroke-dashoffset: 0;
        filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.4));
    }
    50% {
        stroke-dashoffset: -14;
        filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.8));
    }
}

/* Wire traveling dots */
.wire-dot {
    fill: var(--wire-dot-color, rgba(59, 130, 246, 0.6));
    filter: drop-shadow(0 0 var(--wire-dot-glow-radius, 6px) var(--wire-dot-color, rgba(59, 130, 246, 0.6)));
    opacity: 0.85;
}

body.zb-mode .wire-dot {
    fill: rgba(96, 165, 250, 0.8);
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.9));
    opacity: 1;
}

/* Post-its Container */
#hero-postits {
    position: absolute;
    inset: 0;
    z-index: 3; /* Behind 3D character (z-index: 5) */
    pointer-events: none;
    overflow: hidden;
    display: none;
}

@media (min-width: 768px) {
    #hero-postits {
        display: block;
    }
}

/* ========== MOBILE DESKTOP TEASER ========== */
/* Post-it teaser — visible only on real mobile devices (touch + < 768px) */
/* JS adds .mobile-teaser-active after touch detection */
#mobile-desktop-teaser {
    display: none;
}

@media (max-width: 767px) {
    #mobile-desktop-teaser.mobile-teaser-active {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 15;
        pointer-events: none;
    }

    .mobile-teaser-postit {
        position: absolute;
        left: 50%;
        top: 45%;
        --rotation: -3deg;
        cursor: default;
        /* Override .postit-note defaults that conflict with bounce-in animation */
        transform: translate(-50%, -50%) scale(0);
        transition: none;
        animation: mobile-postit-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .mobile-teaser-postit.postit-note:hover,
    .mobile-teaser-postit.postit-note.active {
        transform: translate(-50%, -50%) rotate(var(--rotation, -3deg));
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
        z-index: auto;
    }

    /* Leaving animation — elegant shrink-out */
    .mobile-teaser-postit.mobile-teaser-leaving {
        animation: mobile-postit-bounce-out 0.4s ease-in forwards !important;
    }

    /* Yellow waving hand */
    .mobile-teaser-hand {
        display: inline-block;
        font-size: 22px;
        line-height: 1;
        margin-right: 4px;
        vertical-align: middle;
        animation: mobile-hand-wave 1s ease-in-out 0.5s both;
    }
}

/* ========== DISINTEGRATE EFFECT ========== */
/* Container for clip-path fragments during disintegration */
.disintegrate-container {
    pointer-events: none;
    overflow: visible;
}

/* ── Bounce-in: elastic pop from center ── */
@keyframes mobile-postit-bounce-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(-8deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15) rotate(-1deg);
    }
    70% {
        transform: translate(-50%, -50%) scale(0.92) rotate(-4deg);
    }
    85% {
        transform: translate(-50%, -50%) scale(1.05) rotate(-2deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(var(--rotation, -3deg));
    }
}

/* ── Bounce-out: elegant shrink with micro-expand ── */
@keyframes mobile-postit-bounce-out {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(var(--rotation, -3deg));
    }
    25% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.06) rotate(-1deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(-8deg);
    }
}

/* ── Hand wave: playful oscillation ── */
@keyframes mobile-hand-wave {
    0% {
        transform: rotate(0deg) scale(1);
    }
    15% {
        transform: rotate(14deg) scale(1.15);
    }
    30% {
        transform: rotate(-10deg) scale(1.1);
    }
    45% {
        transform: rotate(12deg) scale(1.05);
    }
    60% {
        transform: rotate(-6deg) scale(1);
    }
    75% {
        transform: rotate(4deg) scale(1);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* ========== POST-IT FLIP SYSTEM ========== */
/* 3-level structure: .postit-container > .postit-inner > .postit-front + .postit-back */

/* Utilities for 3D transforms */
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Container: handles positioning, perspective, drag target */
.postit-container {
    position: absolute;
    perspective: 1200px;
    pointer-events: auto;
    cursor: grab;
    width: 250px;
    height: 115px;
    transform: scale(0) rotate(var(--rotation, -2deg));
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.postit-container.active {
    transform: scale(1) rotate(var(--rotation, -2deg));
}

.postit-container.fade-out {
    opacity: 0;
    transform: scale(0.8) rotate(var(--rotation, -2deg));
    transition: all 0.3s ease-out;
}

.postit-container:hover {
    transform: scale(1.03) rotate(var(--rotation, -2deg)) translateY(-3px);
    z-index: 60;
}

.postit-container:active {
    cursor: grabbing;
}

.postit-container.theater-active {
    z-index: 1001 !important;
    cursor: pointer;
    will-change: transform, width, height;
    overflow: visible; /* Back face content must not be clipped during resize */
}

.postit-container.theater-active:hover {
    transform: none; /* Disable hover transform in theater mode */
}

/* Inner: receives rotateY for flip — transitions driven by JS (2-phase) */
.postit-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* No CSS transition here — JS sets transition per phase for the 2-step flip */
}

.postit-inner.flipped {
    /* Class used as state marker; actual rotateY is set via JS inline style */
}

/* Post-it Note — front face (inside container) */
.postit-note {
    position: absolute;
    inset: 0;
    background: #f4f1e8;
    color: #1c1917;
    padding: 10px 15px 6px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
    font-family: 'Caveat', cursive;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
}

/* Standalone post-its (onboarding, shy, mobile) — not inside a .postit-container */
.postit-note:not(.backface-hidden) {
    inset: auto;
    width: 250px;
    height: 115px;
}

.postit-note.postit-square {
    width: 135px;
    height: 135px;
}

.postit-note::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    width: 25px;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 0 0 2px 2px;
}

/* Legacy compat — .active/.fade-out now on container, kept here for mobile teaser */
.postit-note.active {
    transform: scale(1) rotate(var(--rotation, -2deg));
}

.postit-note.fade-out {
    opacity: 0;
    transform: scale(0.8) rotate(var(--rotation, -2deg));
    transition: all 0.3s ease-out;
}

/* Falling leaf animation */
@keyframes fallLeaf {
    0% {
        opacity: 1;
        transform: scale(1) rotate(var(--rotation, -2deg));
    }
    25% {
        transform: scale(0.95) rotate(calc(var(--rotation, -2deg) + 10deg)) translateX(20px);
    }
    50% {
        transform: scale(0.9) rotate(calc(var(--rotation, -2deg) - 15deg)) translateX(-15px)
            translateY(50px);
    }
    75% {
        transform: scale(0.85) rotate(calc(var(--rotation, -2deg) + 20deg)) translateX(25px)
            translateY(150px);
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: scale(0.7) rotate(calc(var(--rotation, -2deg) + 45deg)) translateX(10px)
            translateY(300px);
    }
}

.postit-note.falling,
.postit-container.falling {
    animation: fallLeaf 2s ease-in forwards;
    pointer-events: none;
}

/* Unstuck effect when dragging */
.postit-container.unstuck .postit-note {
    box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.25) !important;
    filter: brightness(1.05);
}

.postit-container:hover .postit-note {
    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.18);
}

/* Post-it Text Formatting */
.postit-line1 {
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 6px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.postit-line2 {
    font-family: 'Permanent Marker', 'Caveat', cursive;
    font-size: 14px;
    font-weight: 400;
    opacity: 1;
    line-height: 1.35;
    flex: 1 1 auto;
    min-height: 0;
}

/* Stroke-write animation: characters appear sequentially */
/* .postit-container.active for hero grid, .postit-note.active for legacy/mobile teaser */
.postit-container.active .postit-line2 .sc,
.postit-note.active .postit-line2 .sc {
    opacity: 0;
    animation: sc-write 0.06s ease-out forwards;
    animation-delay: calc(0.45s + var(--i) * 0.03s);
}

@keyframes sc-write {
    to {
        opacity: 1;
    }
}

.postit-date {
    color: #666;
    font-weight: 500;
    font-size: 10px;
}

/* Post-it Color Categories - Soft Pastel */
.postit-note.postit-design {
    background: #fef9e7;
}

.postit-note.postit-strategy {
    background: #e8f5e9;
}

.postit-note.postit-spicy {
    background: #fce4ec;
}

.postit-note.postit-perso {
    background: #e0f7fa;
}

.postit-note.postit-teaser {
    background: #ede7f6; /* soft lavender — distinct from all other categories */
}

/* Tape effect for perso (blue) post-its */
.postit-note.postit-perso::before {
    display: none;
}

.postit-note.postit-perso::after {
    content: '';
    position: absolute;
    top: -8px;
    right: 15px;
    width: 40px;
    height: 18px;
    background: rgba(255, 255, 255, 0.6);
    transform: rotate(var(--tape-rotation, 3deg));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ── Flip icon — right-aligned bottom line, hidden until stroke-write completes ── */
.postit-flip-icon {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    width: 100%;
    flex-shrink: 0;
    min-height: 20px;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.3s ease;
    background: none;
    border: none;
    color: inherit;
    z-index: 2;
}

.postit-flip-icon.visible {
    opacity: 0.5;
    pointer-events: auto;
}

.postit-flip-icon.visible:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Finger emoji — rotated 90deg right, gentle bounce */
.flip-icon-finger {
    font-size: 11px;
    line-height: 1;
    display: inline-block;
    transform: rotate(90deg);
    animation: flip-icon-bounce 1.5s ease-in-out infinite;
}

/* Label text — readable, normal font */
.flip-icon-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: #44403c;
}

@keyframes flip-icon-bounce {
    0%,
    100% {
        transform: rotate(90deg) translateY(0);
    }
    50% {
        transform: rotate(90deg) translateY(-3px);
    }
}

/* ── Post-it back face — reading mode ── */
.postit-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    border-radius: 2px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f4f1e8;
    color: #1c1917;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
}

/* Glare highlight — follows mouse via --glare-x/--glare-y custom properties */
.postit-back::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: radial-gradient(
        circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.12) 0%,
        transparent 60%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
}

.postit-container.theater-active .postit-back::after {
    opacity: 1;
}

.postit-back-title {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.7;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.postit-back-text {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.65;
    flex: 1;
}

.postit-back-close {
    font-size: 10px;
    text-align: center;
    opacity: 0.35;
    margin-top: 10px;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

/* ── Theater overlay ── */
#flip-theater-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    z-index: 1000; /* Below theater-active container (1001) but above everything else */
    pointer-events: none;
    transition: opacity 400ms ease-out;
}

#flip-theater-overlay.active {
    opacity: 0.7;
    pointer-events: auto;
}

/* ZB Mode Post-its */
body.zb-mode .postit-note {
    background: #fff9e6;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.3);
}

body.zb-mode .postit-date {
    color: #d4a574;
}

/* Geo-Personalized Welcome Post-it (applied to demo-postit when city detected) */
.geo-postit {
    background: #dbeafe !important; /* Light blue — stands out from other post-it colors */
}

.geo-postit .postit-line1 {
    font-size: 11px;
    color: #1e40af;
    opacity: 0.7;
}

.geo-postit .postit-line2 {
    font-size: 14px;
    color: #1e3a5f;
}

.geo-postit::before {
    background: rgba(30, 64, 175, 0.12) !important;
}

/* ================================================
   TWITTER VIRAL POST-IT — Social Proof
   ================================================ */

/* --- Viral Card — Fixed bottom-left (desktop) --- */
.viral-card {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 14px 14px;
    background: rgba(250, 250, 249, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 3px solid #1d9bf0;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
    cursor: pointer;
    max-width: 320px;
    animation: viral-card-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition:
        transform 300ms ease,
        box-shadow 300ms ease,
        opacity 400ms ease-out;
}

.viral-card[hidden] {
    display: none !important;
}

.viral-card-fade-out {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 400ms ease-out;
}

.viral-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(29, 155, 240, 0.3);
}

/* Shake continu apres slide-in (classe ajoutee par JS via animationend) */
.viral-card.viral-card-shaking {
    animation: refinedShake 0.4s ease-in-out infinite;
}

.viral-card:hover {
    box-shadow: 0 8px 32px rgba(29, 155, 240, 0.15);
}

@keyframes refinedShake {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    15% {
        transform: translateX(-3px) rotate(-1.2deg);
    }
    30% {
        transform: translateX(2px) rotate(0.8deg);
    }
    45% {
        transform: translateX(-2px) rotate(-0.6deg);
    }
    60% {
        transform: translateX(1px) rotate(0.4deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes viral-card-in {
    0% {
        opacity: 0;
        transform: translateY(150%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Viral card inner content */
.viral-card .viral-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.viral-card .viral-x-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.viral-card .viral-handle {
    font-size: 11px;
    font-weight: 500;
    color: #71767b;
    letter-spacing: 0.01em;
}

.viral-card .viral-text {
    font-size: 13px;
    font-weight: 500;
    color: #1c1917;
    line-height: 1.4;
    margin-bottom: 8px;
}

.viral-card .viral-stats {
    font-size: 11px;
    color: #71767b;
    margin-bottom: 6px;
}

.viral-card .viral-stats-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
}

.viral-card .viral-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.viral-card .viral-stat-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #71767b;
}

.viral-card .viral-link {
    font-size: 11px;
    color: #1d9bf0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ZB Mode */
body.zb-mode .viral-card {
    background: rgba(28, 25, 23, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    border-left: 3px solid #1d9bf0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

body.zb-mode .viral-card .viral-text {
    color: #e7e9ea;
}

body.zb-mode .viral-card .viral-handle,
body.zb-mode .viral-card .viral-stats {
    color: #71767b;
}

/* Hide on mobile — toast handles it */
@media (max-width: 1023px) {
    .viral-card {
        display: none !important;
    }
}

/* --- Twitter toast (mobile) --- */
.twitter-toast {
    position: fixed;
    bottom: 24px;
    left: 16px;
    right: 16px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(250, 250, 249, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 3px solid #1d9bf0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
    font-size: 14px;
    color: #1c1917;
    font-weight: 500;
    cursor: pointer;
    animation: toast-slide-up 300ms ease-out;
}

.twitter-toast[hidden] {
    display: none !important;
}

.twitter-toast-pin {
    font-size: 18px;
    flex-shrink: 0;
}

.twitter-toast-text {
    flex: 1;
}

.twitter-toast-close {
    background: none;
    border: none;
    font-size: 16px;
    color: #71767b;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 150ms ease;
}

.twitter-toast-close:hover {
    opacity: 1;
}

@keyframes toast-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* ZB mode override — warmer tone */
body.zb-mode .geo-postit {
    background: #fef3c7 !important; /* Amber-100 */
}

body.zb-mode .geo-postit .postit-line1 {
    color: #92400e;
}

body.zb-mode .geo-postit .postit-line2 {
    color: #78350f;
}

body.zb-mode .geo-postit::before {
    background: rgba(146, 64, 14, 0.12) !important;
}

/* Interaction Hint */
.interaction-hint {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.interaction-hint:hover {
    opacity: 0.7;
}

.interaction-hint .hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 9px;
    opacity: 0.6;
}

/* Hide grid elements on mobile */
@media (max-width: 767px) {
    #hero-grid,
    #hero-glow,
    #hero-postits,
    .interaction-hint {
        display: none !important;
    }
}

/* Hero text should not block clicks on grid */
#hero > .max-w-6xl {
    pointer-events: none;
    transform: translateY(-50px); /* Raised 50px */
}
#hero > .max-w-6xl a,
#hero > .max-w-6xl button,
#hero > .max-w-6xl .interaction-hint {
    pointer-events: auto;
}

/* Easter Egg Overlay */
.easter-egg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: easterFadeIn 0.4s ease-out;
}

.easter-egg-overlay.hidden {
    display: none;
}

@keyframes easterFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.easter-content {
    text-align: center;
    max-width: 500px;
    padding: 50px 40px;
    color: white;
}

.easter-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.easter-content p {
    font-size: 1.15rem;
    opacity: 0.7;
    line-height: 1.6;
    margin-bottom: 15px;
}

.easter-subtext {
    opacity: 0.5 !important;
    font-size: 0.95rem !important;
    margin-top: 25px !important;
}

.easter-cta {
    display: inline-block;
    padding: 14px 36px;
    background: white;
    color: black;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.easter-cta:hover {
    background: #d4a574;
    color: white;
}

.easter-close {
    display: block;
    margin: 25px auto 0;
    background: none;
    border: none;
    color: white;
    opacity: 0.4;
    cursor: pointer;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
}

.easter-close:hover {
    opacity: 0.7;
}

/* ========================================
   HERO TEXT REVEAL - Lightfern Animation
   ======================================== */

.hero-text-reveal {
    --ease-bounce: cubic-bezier(0.34, 2.2, 0.64, 1);
}

.word-wrapper {
    display: inline-flex;
    white-space: nowrap;
}

.char-actor {
    display: inline-block;
    transform: translateY(120%);
    opacity: 0;
    transition:
        transform 0.7s var(--ease-bounce),
        opacity 0.25s ease-out;
    will-change: transform, opacity;
}

/* L'animation se declenche sur le parent */
.is-animating .char-actor {
    transform: translateY(0%);
    opacity: 1;
}

/* Masquer les lignes avant le traitement JS */
.reveal-line {
    opacity: 0;
}

.line-ready {
    opacity: 1;
}

/* ========================================
   AVATAR 3D - Lazy Loading & Fade-in
   ======================================== */

#avatar-3d-container {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#avatar-3d-container.loading {
    opacity: 0.3;
}

#avatar-3d-container.loaded {
    opacity: 0.85;
}

body.zb-mode #avatar-3d-container.loaded {
    opacity: 1;
}

/* ========================================
   AVATAR 3D - Mobile breakpoints (absolute overlay)
   ======================================== */
/* sm: small mobile (<480px) */
@media (max-width: 479px) {
    #avatar-3d-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 800px;
        margin-top: 0;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
    }
    #avatar-3d-container.loaded {
        opacity: 0.9;
    }
    body.zb-mode #avatar-3d-container.loaded {
        opacity: 1;
    }
}
/* md: large mobile / tablet portrait (480-767px) */
@media (min-width: 480px) and (max-width: 767px) {
    #avatar-3d-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 800px;
        margin-top: 0;
        pointer-events: none;
        z-index: 1;
    }
    #avatar-3d-container.loaded {
        opacity: 0.9;
    }
    body.zb-mode #avatar-3d-container.loaded {
        opacity: 1;
    }
}

/* ========================================
   STICKY HEADER - SECTION EXPERIENCE
   ======================================== */

/* Header sticky avec ombre au scroll */
.sticky-header-wrapper {
    position: relative;
}

#experience-header {
    /* Sticky positioning juste sous le nav global */
    position: sticky;
    top: 56px; /* Nav height (~56px) — collé sans gap */
    z-index: 40; /* Sous le nav (z-50) mais au-dessus du contenu */
    background-color: transparent; /* Background on ::before for full-width */

    /* Pas d'ombre par défaut - gérée par JS */
    box-shadow: none;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Full-width background, content stays aligned with main container */
#experience-header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background-color: white;
    z-index: -1;
    /* Shadow managed via .sticky-shadow class toggled by JS */
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}

/* Full-width shadow when sticky header is pinned */
#experience-header.sticky-shadow::before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Full-width bottom border line */
#experience-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(214, 211, 209, 0.5) 10%,
        rgba(214, 211, 209, 0.5) 90%,
        transparent
    );
}

/* Style élégant pour les dates */
.experience-date {
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    color: rgb(168 162 158); /* stone-400 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 1rem;
}

/* Trait vertical élégant à gauche de la date */
.experience-date::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgb(245 158 11),
        /* orange-500 */ transparent
    );
    border-radius: 2px;
}

/* Zebra striping - alternance de background */
.experience-row:nth-child(even) {
    background-color: rgb(250 250 249); /* stone-50 */
}

.experience-row:nth-child(odd) {
    background-color: transparent;
}

/* Responsive : masquer sur mobile (comme actuellement) */
@media (max-width: 767px) {
    #experience-header {
        display: none;
    }
    /* Full-bleed zebra-stripe background on mobile:
       Use viewport-relative calc to break out of all parent constraints */
    .experience-row {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    /* Justified text on mobile */
    .hero-subtitle,
    header + section[data-dark-bg] .max-w-6xl > p,
    #experience .experience-row p {
        text-align: justify;
    }
}

/* ZB Mode - Sticky Header */
body.zb-mode #experience-header {
    /* Pas d'ombre par défaut en ZB non plus */
    box-shadow: none;
}

body.zb-mode #experience-header::before {
    background-color: #0c0a09;
}

body.zb-mode #experience-header.sticky-shadow::before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.zb-mode .experience-row:nth-child(even) {
    background-color: #1c1917 !important;
}

body.zb-mode .experience-row:nth-child(odd) {
    background-color: #0c0a09 !important;
}

/* ZB Mode - Convictions section: slightly lighter background */
body.zb-mode #expertise {
    background-color: #292524; /* stone-800 — lighter than corpo stone-900 */
}

body.zb-mode #expertise h2 {
    color: #78716c; /* stone-500 */
}

body.zb-mode #expertise h3 {
    color: #e7e5e4; /* stone-200 */
}

body.zb-mode #expertise p.text-3xl {
    color: #fafaf9; /* stone-50 */
}

body.zb-mode #expertise iconify-icon {
    color: #a8a29e; /* stone-400 */
}