/* ═══════════════════════════════════════════════════════════════════════════
   Thème Minitel CRT — Project 42

   Effet écran cathodique pour les pages de type "minitel".
   Scanlines, lueur, vignette, bordures arrondies.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Conteneur principal du terminal ──────────────────── */

.terminal-minitel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.terminal-minitel-frame {
    position: relative;
    width: 100%;
    max-width: 820px;
    padding: 2rem;
    background: #1a1a1a;
    border-radius: 24px;
    box-shadow:
        0 0 0 4px #333,
        0 0 0 8px #1a1a1a,
        0 0 0 10px #444,
        0 20px 60px rgba(0, 0, 0, 0.7);
    /* Léger effet bombé de l'écran CRT */
    transform: perspective(800px) rotateX(1deg);
}

/* ─── L'écran lui-même ────────────────────────────────── */

.terminal-minitel-ecran {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0a0a0a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Le canvas Minitel remplit l'écran */
.terminal-minitel-ecran .minitel-canvas,
.terminal-minitel-ecran canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ─── Overlay scanlines ────────────────────────────────── */

.terminal-minitel-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.08) 0px,
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* ─── Overlay vignette (coins plus sombres) ───────────── */

.terminal-minitel-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 11;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 80%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

/* ─── Reflet verre CRT ─────────────────────────────────── */

.terminal-minitel-reflet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    z-index: 12;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 30%,
        transparent 100%
    );
    border-radius: 8px 8px 0 0;
}

/* ─── Glow de l'écran (ambiance) ───────────────────────── */

.terminal-minitel-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    pointer-events: none;
    z-index: 5;
    border-radius: 16px;
    background: transparent;
    box-shadow:
        0 0 40px rgba(80, 250, 123, 0.08),
        0 0 80px rgba(80, 250, 123, 0.04);
}

/* Variante ambre (mode rétro) */
.terminal-minitel-frame.ambre .terminal-minitel-glow {
    box-shadow:
        0 0 40px rgba(255, 180, 50, 0.1),
        0 0 80px rgba(255, 180, 50, 0.05);
}

.terminal-minitel-frame.ambre .terminal-minitel-ecran {
    background: #0d0800;
}

/* ─── LED témoin ───────────────────────────────────────── */

.terminal-minitel-led {
    position: absolute;
    top: 0.75rem;
    right: 1.5rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #50fa7b;
    box-shadow: 0 0 8px rgba(80, 250, 123, 0.8);
    z-index: 20;
    animation: ledPulse 2s ease-in-out infinite;
}

.terminal-minitel-frame.ambre .terminal-minitel-led {
    background: #ffb832;
    box-shadow: 0 0 8px rgba(255, 180, 50, 0.8);
}

@keyframes ledPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ─── Étiquette "3615 PROJECT 42" ──────────────────────── */

.terminal-minitel-label {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    color: #555;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ─── Écran éteint (démarrage progressif) ─────────────── */

.terminal-minitel-ecran.allume .terminal-minitel-scanlines,
.terminal-minitel-ecran.allume .terminal-minitel-vignette,
.terminal-minitel-ecran.allume .terminal-minitel-reflet {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.terminal-minitel-ecran:not(.allume) {
    background: #000;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 1);
}

.terminal-minitel-ecran:not(.allume) canvas {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.terminal-minitel-ecran.allume canvas {
    opacity: 1;
}

/* Animation d'allumage CRT */
@keyframes crtPowerOn {
    0% {
        transform: scale(1, 0.01);
        filter: brightness(10);
    }
    20% {
        transform: scale(1, 0.01);
        filter: brightness(10);
    }
    40% {
        transform: scale(1, 1);
        filter: brightness(3);
    }
    100% {
        transform: scale(1, 1);
        filter: brightness(1);
    }
}

.terminal-minitel-ecran.power-on {
    animation: crtPowerOn 0.8s ease-out forwards;
}

/* ─── Ligne téléphonique (effet parasites) ────────────── */

@keyframes glitchLine {
    0%, 100% { transform: translateX(0); opacity: 0; }
    5% { transform: translateX(-2px); opacity: 0.1; }
    10% { transform: translateX(4px); opacity: 0; }
    15% { transform: translateX(-1px); opacity: 0.05; }
    20% { transform: translateX(0); opacity: 0; }
}

.terminal-minitel-ecran::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 15;
    animation: glitchLine 8s infinite;
    opacity: 0;
}

/* ─── Texte d'information sous le terminal ─────────────── */

.terminal-minitel-info {
    margin-top: 1.5rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    letter-spacing: 0.05em;
}

.terminal-minitel-info kbd {
    display: inline-block;
    padding: 0.15em 0.4em;
    background: #2a2a3a;
    border: 1px solid #444;
    border-radius: 3px;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: #ccc;
}

/* ─── Adaptation mobile ────────────────────────────────── */

@media (max-width: 768px) {
    .terminal-minitel-frame {
        padding: 1rem;
        border-radius: 16px;
        box-shadow:
            0 0 0 3px #333,
            0 0 0 6px #1a1a1a,
            0 0 0 7px #444,
            0 10px 30px rgba(0, 0, 0, 0.7);
    }

    .terminal-minitel-ecran {
        border-radius: 4px;
    }

    .terminal-minitel-label {
        font-size: 0.5rem;
    }
}

/* ─── Préférences réduction de mouvement ───────────────── */

@media (prefers-reduced-motion: reduce) {
    .terminal-minitel-ecran.power-on {
        animation: none;
    }

    .terminal-minitel-led {
        animation: none;
    }

    .terminal-minitel-ecran::after {
        animation: none;
    }
}