@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ─── BASE ─────────────────────────────────────────── */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* ─── UTILITAIRES ───────────────────────────────────── */
.gradient-yellow {
    background: linear-gradient(135deg, #FFD54F 0%, #FFB300 100%);
}

.btn-shadow {
    box-shadow: 0 4px 14px 0 rgba(255, 179, 0, 0.39);
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ─── ANIMATIONS DE REVEAL AU SCROLL ───────────────── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ─── NUMÉROS D'ÉTAPES ──────────────────────────────── */
.step-number {
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    color: #FFB300;
    opacity: 1;
    display: inline-block;
}

/* ─── MENU DESKTOP : OVERLAY D'ASSOMBRISSEMENT ──────── */
#menu-bg-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 35;
}

.overlay-active #menu-bg-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ─── MENU DESKTOP : SOUS-MENUS ─────────────────────── */
.submenu-animation {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pont invisible pour maintenir le hover entre le lien et le sous-menu */
.submenu-animation::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

.group:hover .submenu-animation {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ─── MODAL ──────────────────────────────────────────── */
.modal-enter {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.step-inactive {
    opacity: 0.3;
    filter: grayscale(1);
}

/* Masque la scrollbar du modal */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ─── SCANNER IA (MODAL ÉTAPE 2) ────────────────────── */
/*
 * L'animation utilise transform (GPU/compositor thread) et non top/height
 * (main thread) pour rester fluide même quand JS charge le modèle IA.
 */
/* ── SCANNER : effet comète (dégradé suit le sens du mouvement) ──
 * scan-pos  → transform (compositor thread) : ne se fige pas pendant le chargement du modèle IA
 * scan-grad → background (main thread)      : bascule de direction au retournement
 * scan-opacity → opacity (compositor thread): fondu court aux retournements pour masquer le saut
 * --scan-h : hauteur du conteneur interne, définie en JS avant le démarrage (défaut 270px)
 */
.scanner-line {
    width: 100%;
    height: 80px;           /* élément "comète" : 3px ligne + 77px queue */
    position: absolute;
    top: 0;                 /* fixe — seul transform anime le déplacement */
    left: 0;
    z-index: 10;
    pointer-events: none;
    will-change: transform, opacity;
    animation:
        scan-pos     2.5s infinite ease-in-out,   /* mouvement (GPU) */
        scan-grad    2.5s infinite ease-in-out,   /* inversion du dégradé */
        scan-opacity 2.5s infinite ease-in-out;   /* fondu aux retournements (GPU) */
    filter:
        drop-shadow(0 0 5px rgba(74,222,128,.95))
        drop-shadow(0 0 14px rgba(74,222,128,.6));
}

/* Mouvement via translateY (compositor thread)
   Phase descente (0→49.9%) : ligne brillante au BAS de l'élément → queue au-dessus
   Phase montée  (50→100%)  : ligne brillante en HAUT de l'élément → queue en-dessous */
@keyframes scan-pos {
    0%    { transform: translateY(-77px); }
    49.9% { transform: translateY(calc(var(--scan-h, 270px) - 80px)); }
    50%   { transform: translateY(calc(var(--scan-h, 270px) - 3px)); }
    100%  { transform: translateY(0px); }
}

@keyframes scan-grad {
    /* Descente : blanc → vert en bas (ligne), dégradé s'estompe vers le haut (queue) */
    0%, 49.9% {
        background: linear-gradient(to bottom,
            transparent                  0%,
            rgba(74, 222, 128, .08)     35%,
            rgba(74, 222, 128, .45)     70%,
            rgba(74, 222, 128, .90)     92%,
            #ffffff                     100%
        );
    }
    /* Montée : blanc → vert en haut (ligne), dégradé s'estompe vers le bas (queue) */
    50%, 100% {
        background: linear-gradient(to top,
            transparent                  0%,
            rgba(74, 222, 128, .08)     35%,
            rgba(74, 222, 128, .45)     70%,
            rgba(74, 222, 128, .90)     92%,
            #ffffff                     100%
        );
    }
}

/* Fondu doux (≈ 0.25s) aux deux retournements pour masquer le saut de dégradé.
   opacity est compositor-threaded : reste fluide même sous charge JS. */
@keyframes scan-opacity {
    0%    { opacity: 0; }   /* invisible : retournement haut */
    10%   { opacity: 1; }   /* fondu entrée → descente */
    40%   { opacity: 1; }   /* visible */
    50%   { opacity: 0; }   /* invisible : retournement bas */
    60%   { opacity: 1; }   /* fondu entrée → montée */
    90%   { opacity: 1; }   /* visible */
    100%  { opacity: 0; }   /* fondu sortie → boucle retournement haut */
}

.overlay-green {
    background: rgba(0, 15, 8, 0.03);
    position: absolute;
    inset: 0;
    pointer-events: none;
}