@font-face {
    font-family: "NineByFiveNBP";
    src: url("../Ressources/Nine-By-Five-NBP/nine0.ttf") format("truetype");
    font-display: swap;
}

:root {
    --bg-outer: #000000;
    --screen-blue: #06079d;
    --text: rgba(245, 250, 255, 0.96);
    --line: rgba(235, 245, 255, 0.95);
    --font-ui: "NineByFiveNBP", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    
    /* Planchers minimum absolus pour garantir la lisibilité */
    --min-font-title: 14px;
    --min-font-body: 10px;
    --min-font-small: 9px;
    --min-button-height: 36px;
    
    /* Glow global - à modifier ici pour tout changer */
    --text-glow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
    --text-glow-strong: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.3);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-outer);
}

.page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   TERMINAL SHELL - CONTENEUR DE RÉFÉRENCE
   ============================================ */

.crt-shell {
    container-type: inline-size;
    container-name: terminal;
    
    width: min(
        calc(100dvw - 20px),
        calc((100dvh - 20px) * 4 / 3)
    );
    
    aspect-ratio: 4 / 3;
    background: var(--screen-blue);
    border: 0;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
    margin: 0 auto;
}

.crt-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

.crt-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.22) 0px,
        rgba(0, 0, 0, 0.22) 2px,
        transparent 2px,
        transparent 4px
    );
}

/* ============================================
   FRAME PRINCIPAL DU TERMINAL - GLOW GLOBAL
   ============================================ */

.waiting-frame {
    background: var(--screen-blue);
    border: max(2px, 0.28cqw) solid var(--line);
    display: grid;
    grid-template-rows: minmax(30px, 5cqh) 1fr minmax(28px, 5cqh);
    grid-template-areas: 
        "header"
        "content"
        "footer";
    padding: 0;
    overflow: hidden;
    /* GLOW APPLIQUÉ ICI - TOUS LES ENFANTS HÉRITENT */
    text-shadow: var(--text-glow);
}

/* Classe pour désactiver le glow sur un élément précis */
.no-glow {
    text-shadow: none !important;
}

.waiting-topbar,
.waiting-footer {
    display: flex;
    align-items: center;
    padding: 0 clamp(10px, 1.4cqw, 16px);
    min-height: min(40px, 5vh); 
    border-bottom: max(2px, 0.28cqw) solid var(--line);
    font: 700 max(var(--min-font-body), clamp(14px, 3cqw, 44px)) / 1 var(--font-ui);
    color: var(--text);
    flex-shrink: 0;
    /* text-shadow hérité de .waiting-frame */
}

.waiting-topbar {
    grid-area: header;
    justify-content: flex-end;
}

.waiting-footer {
    grid-area: footer;
    border-top: max(2px, 0.28cqw) solid var(--line);
    border-bottom: 0;
    justify-content: space-between;
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */

.waiting-copy {
    grid-area: content;
    padding: clamp(8px, 1.5cqw, 26px) clamp(10px, 3cqw, 78px);
    color: var(--text);
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    max-height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    /* text-shadow hérité de .waiting-frame */
}

.waiting-title {
    margin: 0 0 clamp(12px, 2cqw, 20px);
    font: 700 max(var(--min-font-title), clamp(16px, 4.5cqw, 58px)) / 1.05 var(--font-ui);
    /* GLOW PLUS FORT POUR LE TITRE */
    text-shadow: var(--text-glow-strong);
}

/* Tous les paragraphes - glow hérité */
.waiting-copy p {
    margin: 0 0 clamp(8px, 1.2cqw, 12px);
    font: 600 max(var(--min-font-body), clamp(10px, 2.5cqw, 24px)) / 1.3 var(--font-ui);
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.waiting-copy .waiting-cta {
    margin-top: clamp(16px, 3cqw, 32px);
    font: 600 max(var(--min-font-body), clamp(10px, 2.5cqw, 24px)) / 1.3 var(--font-ui);
    overflow-wrap: break-word;
}

.waiting-copy .waiting-discord-note,
.waiting-copy .waiting-closing {
    margin-top: clamp(20px, 4cqw, 40px);
    font: 600 max(var(--min-font-body), clamp(10px, 2.5cqw, 24px)) / 1.3 var(--font-ui);
    overflow-wrap: break-word;
}

/* ============================================
   FORMULAIRE DE CONTACT
   ============================================ */

.contact-form-overlay {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1cqw, 10px);
    margin: clamp(12px, 2cqw, 20px) auto;
    transform-origin: center center;
    overflow-wrap: break-word;
}

.contact-email-input,
.contact-submit-btn {
    width: 100%;
    height: max(var(--min-button-height), clamp(38px, 5cqw, 48px));
    border: 2px solid var(--line);
    background: rgba(6, 7, 157, 0.35);
    color: var(--text);
    font: 600 max(var(--min-font-body), clamp(12px, 2.2cqw, 26px)) / 1 var(--font-ui);
    padding: 0 clamp(8px, 1.2cqw, 12px);
    outline: none;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    border-radius: 16px / 12px;
    overflow-wrap: break-word;
    /* text-shadow hérité de .waiting-frame */
}

.contact-email-input::placeholder {
    color: rgba(235, 245, 255, 0.78);
}

.contact-submit-btn {
    width: clamp(140px, 68%, 320px);
    min-width: 132px;
    align-self: center;
    cursor: pointer;
    text-align: center;
    font-weight: 700;
    transform: scaleX(1.06);
    touch-action: manipulation;
}

.contact-submit-btn:hover,
.contact-submit-btn:focus-visible {
    background: rgba(30, 34, 210, 0.45);
    border-color: rgba(245, 250, 255, 1);
}

.contact-feedback {
    min-height: clamp(18px, 2.2cqw, 22px);
    margin: 0;
    text-align: center;
    color: var(--text);
    font: 600 max(var(--min-font-small), clamp(11px, 1.8cqw, 18px)) / 1.1 var(--font-ui);
    /* text-shadow hérité */
}

.contact-feedback.is-error {
    color: #ffd9d9;
}

.discord-link-overlay {
    width: 100%;
    max-width: 520px;
    min-height: max(var(--min-button-height), clamp(38px, 5cqw, 48px));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: clamp(12px, 2cqw, 20px) auto;
    border: 2px solid var(--line);
    border-radius: 14px / 10px;
    background: rgba(6, 7, 157, 0.35);
    color: var(--text);
    font: 700 max(var(--min-font-body), clamp(12px, 2.2cqw, 24px)) / 1.15 var(--font-ui);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 0 clamp(10px, 2cqw, 18px);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    touch-action: manipulation;
    /* text-shadow hérité */
}

.discord-link-overlay:hover,
.discord-link-overlay:focus-visible {
    background: rgba(30, 34, 210, 0.45);
    border-color: rgba(245, 250, 255, 1);
    outline: none;
}

/* ============================================
   BOUTON D'ANNULATION
   ============================================ */

.cancel-sequence-btn {
    position: absolute;
    top: 68px;
    left: clamp(10px, 1.4cqw, 16px);
    z-index: 100;
    background: transparent;
    border: 2px solid var(--line);
    color: var(--text);
    font: 700 max(var(--min-font-body), clamp(12px, 2.2cqw, 32px)) / 1 var(--font-ui);
    padding: clamp(4px, 0.8cqw, 8px) clamp(8px, 1.4cqw, 16px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    border-radius: 8px / 6px;
    /* text-shadow hérité */
}

.cancel-sequence-btn:hover,
.cancel-sequence-btn:focus-visible {
    background: rgba(30, 34, 210, 0.45);
    border-color: rgba(245, 250, 255, 1);
    outline: none;
}

.cancel-sequence-btn.visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   ANIMATIONS ET ÉTATS
   ============================================ */

.original-content {
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.original-content.dimmed {
    color: rgba(245, 250, 255, 0.35);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}

.original-content.dimmed .highlighted-text {
    color: var(--text) !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.5);
    transition: none;
}

.original-content.dimmed .contact-email-input,
.original-content.dimmed .contact-submit-btn,
.original-content.dimmed .discord-link-overlay {
    color: rgba(245, 250, 255, 0.35);
    background: rgba(6, 7, 157, 0.15);
    border-color: rgba(235, 245, 255, 0.35);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

.original-content.dimmed .contact-email-input::placeholder {
    color: rgba(235, 245, 255, 0.25);
}

.original-content.dimmed .contact-submit-btn:hover,
.original-content.dimmed .contact-submit-btn:focus-visible,
.original-content.dimmed .discord-link-overlay:hover,
.original-content.dimmed .discord-link-overlay:focus-visible {
    background: rgba(30, 34, 210, 0.25);
    border-color: rgba(245, 250, 255, 0.5);
}

.sequence-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    text-align: center;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.sequence-container.active {
    opacity: 1;
    visibility: visible;
}

.sequence-text {
    font: 600 max(var(--min-font-body), clamp(14px, 2.8cqw, 28px)) / 1.4 var(--font-ui);
    color: var(--text);
    min-height: 60px;
    display: inline-block;
    text-align: center;
    width: 100%;
    /* text-shadow hérité */
}

.sequence-text .word {
    display: inline-block;
    margin-right: 4px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}

.sequence-text .word.visible {
    opacity: 1;
    transform: translateY(0);
}

.original-content.hidden {
    opacity: 0;
    visibility: hidden;
}

.original-content.fade-in {
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        color: rgba(245, 250, 255, 0.35);
    }
    to {
        opacity: 1;
        color: var(--text);
    }
}

/* ============================================
   RESPONSIVE - TABLETTE / MOBILE
   ============================================ */

@media (max-width: 980px) {
    .waiting-copy p {
        font: 600 max(var(--min-font-body), clamp(10px, 2cqw, 20px)) / 1.2 var(--font-ui);
    }
    
    .contact-email-input,
    .contact-submit-btn {
        font: 600 max(var(--min-font-body), clamp(12px, 2.2cqw, 22px)) / 1 var(--font-ui);
    }
    
    .discord-link-overlay {
        font: 700 max(var(--min-font-body), clamp(12px, 2cqw, 22px)) / 1.15 var(--font-ui);
    }

    .contact-form-overlay {
        width: min(56%, 420px);
        top: 39.5%;
    }
}

/* ============================================
   CORRECTION MOBILE
   ============================================ */

@media (max-width: 860px) {
    .page {
        padding: 0 !important;
        place-items: stretch;
        background: var(--screen-blue);
    }

    .crt-shell {
        width: 100% !important;
        height: 100% !important;
        min-height: 100dvh !important;
        aspect-ratio: auto !important;
        box-shadow: none !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .waiting-frame {
        min-height: 100%;
        grid-template-rows: minmax(40px, 5vh) 1fr minmax(36px, 4vh);
        grid-template-areas: 
            "header"
            "content"
            "footer";
        border: 0 !important;
        /* GLOW HÉRITÉ PAR TOUS LES ENFANTS */
        text-shadow: var(--text-glow);
    }

    .waiting-topbar,
    .waiting-footer {
        font: 700 clamp(14px, 3.5vh, 24px) / 1 var(--font-ui);
        padding: 0 12px;
        border-bottom: max(1px, 0.15vh) solid var(--line);
    }

    .waiting-footer {
        border-top: max(1px, 0.15vh) solid var(--line);
        border-bottom: 0;
    }

    .waiting-copy {
        padding: clamp(10px, 2vh, 18px) clamp(12px, 3vw, 24px);
    }

    .waiting-title {
        font: 700 clamp(16px, 4vh, 30px) / 1.05 var(--font-ui);
        text-shadow: var(--text-glow-strong);
    }

    .waiting-copy p,
    .waiting-copy .waiting-cta,
    .waiting-copy .waiting-discord-note,
    .waiting-copy .waiting-closing {
        font: 600 clamp(11px, 2.5vh, 18px) / 1.2 var(--font-ui);
    }

    .contact-form-overlay,
    .discord-link-overlay {
        position: static;
        width: auto;
        max-width: none;
        margin: 0 14px;
        min-height: 44px;
    }

    .contact-email-input,
    .contact-submit-btn,
    .discord-link-overlay {
        font: 600 clamp(13px, 3vh, 18px) / 1 var(--font-ui);
        height: max(44px, 6vh);
    }

    .contact-submit-btn {
        width: 100%;
        transform: none;
    }
}

@media (max-width: 420px) {
    .waiting-topbar,
    .waiting-footer {
        font: 700 clamp(12px, 3vh, 20px) / 1 var(--font-ui);
        padding: 0 10px;
    }
    
    .waiting-copy {
        padding: clamp(8px, 1.5vh, 14px) clamp(10px, 2.5vw, 18px);
    }
}

@media (max-height: 500px) {
    .waiting-topbar,
    .waiting-footer {
        display: none !important;
        visibility: hidden;
        height: 0;
        padding: 0;
        margin: 0;
        border: none;
    }

    .waiting-frame {
        grid-template-rows: 1fr !important;
        grid-template-areas: "content";
        border: 0 !important;
    }

    .waiting-copy {
        padding: clamp(10px, 2vh, 20px) clamp(10px, 3vw, 30px);
        max-height: 100%;
        overflow-y: auto;
    }

    .waiting-title {
        font-size: clamp(14px, 3vh, 30px) !important;
        line-height: 1.1;
        text-shadow: var(--text-glow-strong);
    }

    .waiting-copy p,
    .waiting-copy .waiting-cta,
    .waiting-copy .waiting-discord-note,
    .waiting-copy .waiting-closing {
        font-size: clamp(10px, 1.5vh, 16px) !important;
        line-height: 1.2;
    }
    
    .contact-submit-btn,
    .discord-link-overlay {
        min-height: 36px !important;
        font-size: clamp(11px, 1.5vh, 18px) !important;
    }
}