/* ═══════════════════════════════════════════════════════════
   YFORMATIQUE GABON — style.css (v2, post-refonte Tailwind)
   Ce fichier ne contient QUE ce que Tailwind (CDN, sans build)
   ne peut pas faire facilement :
     - variables de couleur du thème jour/nuit
     - animations sur-mesure (ticker, marquee, chatbox, lightbox)
   Tout le reste (layout, espacement, grilles, typo) est en
   classes Tailwind directement dans les vues PHP.
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root,
[data-theme="dark"] {
    --bg:           #0b0e13;
    --bg2:          #141925;
    --bg3:          #1b2230;
    --bg4:          #232b3b;
    --border:       rgba(255,255,255,0.08);
    --border2:      rgba(255,255,255,0.14);
    --text:         #e8edf5;
    --text2:        #98a3b8;
    --text3:        #5c6b82;
    --heading:      #f5f7fb;
    --green:        #00C27C;
    --green-bg:     rgba(0,194,124,0.10);
    --green-border: rgba(0,194,124,0.25);
    --blue:         #1565C0;
    --blue-light:   #2F7FE0;
    --gold:         #F4B400;
    --gold-bg:      rgba(244,180,0,0.10);
    --gold-border:  rgba(244,180,0,0.30);
    --navbar-bg:    rgba(20,25,37,0.78);
    --chat-bg:      #141925;
    --chat-bot-bg:  #1b2230;
    --chat-user-bg: #00C27C;
    --card-shadow:  0 2px 16px rgba(0,0,0,0.35);
    --card-hover:   0 16px 48px -12px rgba(0,0,0,0.55);
    --flag-gradient: linear-gradient(90deg, #00C27C 0%, #F4B400 50%, #2F7FE0 100%);
}

[data-theme="light"] {
    --bg:           #f5f7fc;
    --bg2:          #ffffff;
    --bg3:          #eef1f8;
    --bg4:          #e4e8f2;
    --border:       rgba(0,0,0,0.07);
    --border2:      rgba(0,0,0,0.13);
    --text:         #2c3347;
    --text2:        #5a6480;
    --text3:        #9aa0b4;
    --heading:      #10131c;
    --green:        #00a866;
    --green-bg:     rgba(0,168,102,0.08);
    --green-border: rgba(0,168,102,0.25);
    --blue:         #1565C0;
    --blue-light:   #1976D2;
    --gold:         #B8860B;
    --gold-bg:      rgba(184,134,11,0.08);
    --gold-border:  rgba(184,134,11,0.25);
    --navbar-bg:    rgba(255,255,255,0.78);
    --chat-bg:      #ffffff;
    --chat-bot-bg:  #f0f2f8;
    --chat-user-bg: #00a866;
    --card-shadow:  0 2px 12px rgba(0,0,0,0.07);
    --card-hover:   0 16px 40px -12px rgba(0,0,0,0.16);
    --flag-gradient: linear-gradient(90deg, #00a866 0%, #B8860B 50%, #1565C0 100%);
}

html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--text); transition: background .22s ease, color .22s ease; }

/* ── Reveal au scroll (piloté par Alpine x-intersect) ── */
[x-cloak] { display: none !important; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Ticker "En vogue" — BLINDÉ : la pause au survol est en !important
   pour ne jamais pouvoir être silencieusement neutralisée par un autre style. ── */
.vogue-ticker-track  { animation: tickerScroll 40s linear infinite; }
.vogue-ticker-track:hover { animation-play-state: paused !important; }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vogue-ticker-track, .tech-marquee-track { animation: none !important; } }

/* ── Marquee technologies ── */
.tech-marquee-track { animation: marquee 30s linear infinite; }
.tech-marquee-track:hover { animation-play-state: paused !important; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Badges flottants hero ── */
@keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hig-float-badge { animation: floatBadge 4s ease-in-out infinite; }

/* ── Hero dot / live badge ── */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.hero-dot { animation: blink 2s infinite; }
@keyframes pulseLive { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.trending-live-badge { animation: pulseLive 2s infinite; }

/* ── Signature : barre dégradée aux couleurs du drapeau gabonais ── */
.flag-bar { background: var(--flag-gradient); }
.text-flag-gradient {
    background: var(--flag-gradient);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.border-flag-gradient { border-image: var(--flag-gradient) 1; }

/* ── Carte à bordure dégradée au survol (anneau lumineux signature) ── */
.gradient-border-hover { position: relative; isolation: isolate; }
.gradient-border-hover::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: var(--flag-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 1;
}
.gradient-border-hover:hover::before { opacity: 1; }

/* ── Chatbox : fenêtre + bulle de frappe ── */
.chatbox-window {
    transform: scale(.95) translateY(10px);
    transform-origin: bottom right;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
    opacity: 0;
}
.chatbox-window.open { transform: scale(1) translateY(0); opacity: 1; }
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.chatbox-badge { animation: badgePulse 2s infinite; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.chat-typing span { animation: typingDot .9s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }

/* ── Scrollbars discrètes ── */
.thin-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 4px; }

/* ── Lightbox galerie projet ── */
.lightbox-overlay { display: none; }
.lightbox-overlay.open { display: flex; }

/* ── Fonds "aurora" et motif grille (signature visuelle, 3 tons drapeau) ── */
.bg-aurora {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.bg-aurora::before, .bg-aurora::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(70px);
}
.bg-aurora::before {
    width: 480px; height: 480px; top: -180px; left: -120px;
    background: radial-gradient(circle, var(--green) 0%, transparent 70%);
    opacity: .18;
}
.bg-aurora::after {
    width: 420px; height: 420px; top: -120px; right: -140px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    opacity: .14;
}
.bg-aurora-gold {
    content: ''; position: absolute; width: 360px; height: 360px; left: 38%; top: 40px;
    border-radius: 50%; filter: blur(80px);
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
    opacity: .12; z-index: 0; pointer-events: none;
}
.bg-grid-pattern {
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, black, transparent);
    -webkit-mask-image: linear-gradient(180deg, black, transparent);
}
.glass-card {
    background: color-mix(in srgb, var(--bg2) 88%, transparent);
    backdrop-filter: blur(10px);
}
.glow-ring { box-shadow: 0 0 0 1px var(--border), 0 8px 24px -8px rgba(0,194,124,.25); }