@charset "UTF-8";

/* Importation de la police ARK-ES-DenseBold */
@font-face {
    font-family: "Stedelijk";
    src: url("../fonts/Stedelijk.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police Vinston */
@font-face {
    font-family: "Vinston";
    src: url("../fonts/Vinston.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police Ark-Medium */
@font-face {
    font-family: "ArkMedium";
    src: url("../fonts/Ark-Medium.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police Workbench-Regular */
@font-face {
    font-family: "WorkbenchRegular";
    src: url("../fonts/Workbench-Regular-VariableFont_BLED,SCAN.ttf")
        format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police Orbit-Regular */
@font-face {
    font-family: "OrbitRegular";
    src: url("../fonts/Orbit-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police Sixtyfour-Regular */
@font-face {
    font-family: "SixtyfourRegular";
    src: url("../fonts/Sixtyfour-Regular-VariableFont_BLED,SCAN.ttf")
        format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police GeistMono-Regular */
@font-face {
    font-family: "GeistMonoRegular";
    src: url("../fonts/GeistMono-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Importation de la police VT323 */
@font-face {
    font-family: "VT323";
    src: url("../fonts/VT323-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

#overlay {
    position: fixed; /* Fixe l'overlay à la fenêtre */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Couleur avec opacité */
    pointer-events: none; /* Empêche toute interaction avec cet élément */
    z-index: 1000; /* Place l'overlay au-dessus de tout */
    animation: flicker 0.2s steps(2) infinite; /* Animation brutale */
}

@keyframes flicker {
    0% {
        opacity: 0;
    }
    24% {
        opacity: 0;
    }
    25% {
        opacity: 0.2;
    }
    49% {
        opacity: 0.2;
    }
    50% {
        opacity: 0;
    }
    74% {
        opacity: 0;
    }
    75% {
        opacity: 0.1;
    }
    99% {
        opacity: 0.1;
    }
    100% {
        opacity: 0;
    }
}

#screen {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: visible; /* Empêche le débordement */
}

#scan {
    position: fixed; /* Fixe les scanlines à la fenêtre */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintient les proportions des scanlines */
    pointer-events: none; /* Empêche toute interaction avec cet élément */
    opacity: 0.5; /* Transparence pour l'effet CRT */
    z-index: 2000; /* Place au-dessus de tout */
}

#bezel {
    position: fixed; /* Fixe le bezel à la fenêtre */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: transparent; /* Assurez-vous qu'il n'y a pas de fond blanc */
    z-index: 800;
}

* {
    box-sizing: border-box;
    user-select: none; /* Empêche la sélection de texte */
    -webkit-user-select: none; /* Support pour les navigateurs basés sur WebKit (Chrome, Safari) */
    -moz-user-select: none; /* Support pour Firefox */
    -ms-user-select: none; /* Support pour les anciennes versions d'Internet Explorer */
}

/* Désactiver le scroll natif du body */
body {
    font-family: "VT323", monospace; /* Remplace OrbitRegular par VT323 */
    margin: 0;
    /* background-color: black; */
    background-color: rgb(43, 0, 0);
    color: rgb(255, 0, 0);
    height: 100vh;
    overflow: hidden; /* Désactive la scrollbar native */
    cursor: none; /* Désactive le curseur par défaut */
}
/* Remplace le curseur par une croix rouge */

#scroll-container {
    position: relative;
    width: 100%;
    height: 100%;

    overflow-y: scroll; /* Active une scrollbar interne */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); /* Ajoute un glow rouge */
}

/* Scrollbar personnalisée */
#scroll-container::-webkit-scrollbar {
    width: 18px;
}

#scroll-container::-webkit-scrollbar-track {
    background: rgba(43, 0, 0); /* Fond rouge semi-transparent pour tester */
    border: 3px solid rgb(255, 0, 0); /* Bordure rouge */
    border-radius: 0.3em;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); /* Glow externe */
}

#scroll-container::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 0.3em;
    border: 3px solid rgb(255, 0, 0);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); /* Glow rouge */
}

.cross-cursor {
    position: fixed;
    font-size: 30px; /* Taille du symbole + */
    color: red; /* Couleur de la croix */
    font-weight: bold; /* Rendre la croix plus visible */
    font-family: "Courier New", Courier, monospace; /* Police fixe pour une croix parfaite */
    transform: translate(
        -50%,
        -50%
    ); /* Centrer la croix par rapport à la position du curseur */
    pointer-events: none; /* Empêche la croix d'interférer avec les éléments cliquables */
    z-index: 10; /* Assure que la croix soit au-dessus de tout le contenu */
}

/* Barre de recherche fixe */
.search-bar {
    position: fixed;
    top: 0;
    left: 12px;
    width: calc(100vw - 42px); /* Ajuste le width pour éviter de dépasser */
    background-color: rgb(43, 0, 0); /* Fond CRT */
    border: 3px solid rgb(255, 0, 0); /* Bordure rouge */
    border-radius: 0.3em; /* Coins arrondis */
    padding: 6px 0;
    display: flex;
    justify-content: center;
    font-size: 14px;
    color: rgb(255, 0, 0); /* Texte rouge */
    z-index: 1000; /* Place au-dessus du contenu */
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6); /* Glow CRT */
}

/* Contenu de la barre de recherche */
.url-box {
    font-family: "VT323", monospace; /* Police CRT */
    background-color: rgb(43, 0, 0); /* Fond CRT */
    color: rgb(255, 0, 0); /* Texte rouge */
    padding: 6px 0; /* Espacement vertical */
    border-radius: 0.3em; /* Coins arrondis */
    font-size: 14px;
    border: 3px solid red; /* Bordure rouge */
    width: 95%; /* Prend presque toute la largeur */
    text-align: left; /* Aligne le texte à gauche */
}

/* Contenu texte URL */
.URL {
    font-family: "VT323", monospace; /* Police CRT */
    color: rgb(255, 0, 0); /* Texte rouge */
    font-size: 20px;
    border: none;
    margin: 0;
    padding: 0 10px; /* Espacement horizontal */
    white-space: nowrap; /* Empêche le retour à la ligne */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute "..." pour indiquer le dépassement */
    display: block; /* Nécessaire pour text-overflow */
}

/* Espace pour tester le scroll */
.content {
    margin-top: 60px;
}

.scroll-filler {
    height: 20px; /* Permet de scroller */
}

/* Cadre de l'article */
.article-box {
    /* background-color: black; */
    background-color: rgb(43, 0, 0);
    color: rgb(255, 0, 0);
    border: 3px solid red;
    border-radius: 0.3em;
    padding: 20px; /* Espacement interne */
    margin: 20px auto 0; /* Centre horizontalement et ajoute un espacement vertical */
    width: calc(100vw - 42px); /* Même largeur que .search-bar */
    max-width: 1200px; /* Limite la largeur maximale */
    box-sizing: border-box; /* Inclut les bordures et paddings dans le calcul de la largeur */
}

/* Glow rouge pour la deuxième article box */
.article-box {
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6);
}

.article-box.legal h1,
.article-box.legal h2,
.article-box.legal p,
.article-box.legal a {
    text-shadow: inherit; /* Hérite du glow défini pour la boîte */
}

/* Headline de l'article */
.article-headline {
    font-family: "WorkbenchRegular", serif; /* Utilise la police Workbench-Regular */
    font-size: calc(
        6vw + 1rem
    ); /* Typo responsive : dépend de la largeur de l'écran */
    margin-bottom: 20px;
    text-align: center; /* Centrer le texte */
    line-height: 1;
    word-wrap: break-word; /* Permet de gérer les longs mots */
    color: rgb(255, 0, 0); /* Conserve la couleur rouge */
    -webkit-text-stroke: 0; /* Désactive tout contour */
}

/* Sous-titre de l'article */
.article-subtitle {
    font-family: "VT323", monospace; /* Remplace OrbitRegular par VT323 */
    font-size: calc(
        1vw + 1rem
    ); /* Typo responsive : dépend de la largeur de l'écran */

    font-weight: 400; /* Poids normal pour différencier du titre principal */
    color: rgb(43, 0, 0); /* Texte en noir */
    text-align: center; /* Centré sous le titre principal */
    margin: 10px auto 20px; /* Centre horizontalement et ajoute des marges verticales */
    line-height: 1; /* Espacement entre les lignes */
    background-color: rgb(255, 0, 0); /* Fond rouge */
    display: block; /* Permet de centrer avec margin auto */
    padding: 5px 10px; /* Ajoute un peu d'espace autour du texte */
    border-radius: 0.3em; /* Coins arrondis pour un design plus moderne */
    max-width: 80%; /* Limite la largeur maximale pour éviter qu'il prenne toute la largeur */
    text-shadow: 0 0 5px rgba(43, 0, 0, 0.5), 0 0 25px rgba(43, 0, 0, 0.5);
}

/* Conteneur de l'image */
.article-image-container {
    position: relative; /* Nécessaire pour que l'image reste dans son cadre */
    overflow: hidden; /* Empêche l'image de dépasser le cadre */
    border-radius: 0.3em; /* Coins arrondis comme le cadre */
    border: 3px solid red; /* Bordure rouge comme le cadre */
    max-width: 1200px; /* Limite la largeur maximale */
    margin: 0 auto; /* Centre le conteneur horizontalement */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); /* Glow rouge */
}

/* Image de l'article */
.article-image {
    display: block; /* Centre l'image horizontalement */
    width: 100%; /* L'image prend toute la largeur du conteneur */
    height: auto; /* Conserve les proportions par défaut */
    object-fit: cover; /* Ajuste l'image pour qu'elle reste bien cadrée */
    transition: transform 0.3s ease; /* Animation fluide pour le zoom */
}

/* Effet de zoom au survol */
.article-image-container:hover .article-image {
    transform: scale(1.1); /* Zoom léger (10% de plus) */
}

/* Ajustement du ratio pour les petits écrans */
@media (max-width: 768px) {
    .article-image {
        aspect-ratio: 16 / 9; /* Définit un ratio 16:9 pour les écrans étroits */
        height: auto; /* Conserve les proportions */
    }
}

/* Ajustement pour les écrans plus larges */
@media (min-width: 769px) {
    .article-image {
        aspect-ratio: auto; /* Permet à l'image de s'étirer verticalement */
        max-height: 500px; /* Limite la hauteur maximale pour éviter qu'elle prenne tout l'écran */
    }
}

/* Légende de l'image */
.image-caption {
    font-family: "VT323", monospace; /* Remplace OrbitRegular par VT323 */
    font-size: 1.2rem; /* Taille par défaut */
    color: rgb(255, 0, 0); /* Couleur rouge */
    text-align: center; /* Centrer la légende sous l'image */
    margin-bottom: 20px; /* Espacement avec le corps de texte */
    margin-top: 5px; /* Espacement avec l'image */
    font-style: italic; /* Met le texte en italique */
}

/* Ajustement pour les petits écrans */
@media (max-width: 768px) {
    .image-caption {
        font-size: 0.9rem; /* Réduit la taille de la police pour les petits écrans */
    }
}

/* Ajustement pour les très petits écrans */
@media (max-width: 480px) {
    .image-caption {
        font-size: 0.8rem; /* Réduit encore plus la taille pour les écrans très étroits */
    }
}

/* Corps de texte de l'article */
.article-body {
    font-family: "VT323", monospace; /* Remplace OrbitRegular par VT323 */
    font-size: 1.7rem; /* Taille par défaut */
    line-height: 1.2; /* Espacement entre les lignes pour une meilleure lisibilité */
    color: rgb(255, 0, 0); /* Texte rouge */
    text-align: left; /* Justifie le texte pour un rendu propre */
    max-width: 1200px; /* Limite la largeur maximale */
    margin: 0 auto; /* Centre horizontalement */
    hyphens: auto;
}

/* Ajustement pour les petits écrans */
@media (max-width: 768px) {
    .article-body {
        font-size: 1.3rem; /* Réduit la taille de la police pour les petits écrans */
    }
}

/* Ajustement pour les très petits écrans */
@media (max-width: 480px) {
    .article-body {
        font-size: 1.1rem; /* Réduit encore plus la taille pour les écrans très étroits */
        line-height: 1.3;
    }
}
/* Texte "SUBSCRIBE NOW!" */
.subscribe-now {
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    width: fit-content;
    color: #ff0000;
    font-size: 3rem;
    font-weight: bold;
    background-color: transparent;
    transition: all 0.3s ease;
}

/* Conteneur pour le premier bouton */
.first-container {
    position: relative;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style pour le premier bouton "SUBSCRIBE NOW!" */
.subscribe-now.first {
    font-size: clamp(3rem, 5vw, 5rem); /* Taille minimale de 3rem */
    animation: bounce-large 1.5s infinite,
        size-pulse-large 2s infinite alternate;
    text-align: center;
    color: #ff0000;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6);
}

/* Animation de taille dynamique pour le premier bouton */
@keyframes size-pulse-large {
    0% {
        font-size: clamp(3rem, 6vw, 7.5rem); /* Taille minimale de 3rem */
    }
    50% {
        font-size: clamp(3rem, 7.5vw, 9rem); /* Taille minimale de 3rem */
    }
    100% {
        font-size: clamp(3rem, 6vw, 7.5rem); /* Taille minimale de 3rem */
    }
}

/* Animation de saut dynamique pour le premier bouton */
@keyframes bounce-large {
    0%,
    100% {
        transform: translateY(0); /* Position initiale */
    }
    25% {
        transform: translateY(-40px); /* Saut vers le haut (plus grand) */
    }
    50% {
        transform: translateY(15px); /* Rebond vers le bas */
    }
    75% {
        transform: translateY(-20px); /* Petit saut vers le haut */
    }
}

/* Conteneur pour le deuxième bouton */
.second-container {
    position: relative; /* Nécessaire pour que les animations utilisent ce conteneur comme référence */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Empêche les mots de dépasser visuellement */
}

/* Style pour le deuxième bouton "SUBSCRIBE NOW!" */
.subscribe-now.second {
    text-decoration: none; /* Supprime le soulignement */
    display: inline-block;
    transition: all 0.3s ease; /* Transition fluide */
    width: 100%;
}

/* Conteneur spécifique pour l'animation du deuxième bouton */
.animated-subscribe-now {
    display: flex;
    flex-direction: column; /* Force les lignes à s'empiler */
    gap: 5px; /* Réduit l'espacement entre les lignes */
    align-items: center; /* Centre les lignes horizontalement */
    justify-content: center; /* Centre verticalement */
    width: 100%; /* S'assure que le conteneur occupe toute la largeur */
    overflow: hidden; /* Empêche les mots de dépasser l'écran */
}

/* Animation pour "SUBSCRIBE" */
.animated-subscribe-now div:nth-child(1) .word {
    animation: moveSubscribe 2s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
}

/* Animation pour "NOW" */
.animated-subscribe-now div:nth-child(2) .word {
    animation: moveNow 2s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
}

/* Animation de taille dynamique */
@keyframes size-pulse {
    0% {
        font-size: 3rem; /* Taille initiale */
    }
    50% {
        font-size: 3.5rem; /* Taille augmentée */
    }
    100% {
        font-size: 3rem; /* Retour à la taille initiale */
    }
}

/* Animation de saut dynamique */
@keyframes bounce {
    0%,
    100% {
        transform: translateY(0); /* Position initiale */
    }
    25% {
        transform: translateY(-30px); /* Saut vers le haut */
    }
    50% {
        transform: translateY(10px); /* Rebond vers le bas */
    }
    75% {
        transform: translateY(-15px); /* Petit saut vers le haut */
    }
}

/* Animation pour "SUBSCRIBE" : glisse depuis le bord gauche de .second-container */
@keyframes moveSubscribeFromContainer {
    0% {
        transform: translateX(-100%) skew(-10deg); /* Commence hors du conteneur à gauche */
        opacity: 0; /* Invisible au début */
    }
    20% {
        transform: translateX(0) skew(-10deg); /* Arrive au bord gauche du conteneur */
        opacity: 1; /* Devient visible */
    }
    40% {
        transform: translateX(0) scale(1.3) skew(-10deg); /* Pulsation au centre */
        opacity: 1;
    }
    50% {
        transform: translateX(0) scale(1) skew(-10deg); /* Retour à la taille normale */
        opacity: 1;
    }
    100% {
        transform: translateX(100%) skew(-10deg); /* Sort hors du conteneur à droite */
        opacity: 0; /* Devient invisible */
    }
}

/* Animation pour "NOW" : glisse depuis le bord droit de .second-container */
@keyframes moveNowFromContainer {
    0% {
        transform: translateX(100%) skew(-10deg); /* Commence hors du conteneur à droite */
        opacity: 0; /* Invisible au début */
    }
    20% {
        transform: translateX(0) skew(-10deg); /* Arrive au bord droit du conteneur */
        opacity: 1; /* Devient visible */
    }
    40% {
        transform: translateX(0) scale(1.3) skew(-10deg); /* Pulsation au centre */
        opacity: 1;
    }
    50% {
        transform: translateX(0) scale(1) skew(-10deg); /* Retour à la taille normale */
        opacity: 1;
    }
    100% {
        transform: translateX(-100%) skew(-10deg); /* Sort hors du conteneur à gauche */
        opacity: 0; /* Devient invisible */
    }
}

/* Troisième bouton : Exemple d'animation de rotation */
.subscribe-now.third {
    text-decoration: none; /* Supprime le soulignement */
    display: inline-block;
    color: red; /* Couleur du texte */
    font-size: 3rem; /* Taille par défaut */
    font-family: "VT323", monospace; /* Police utilisée */
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease; /* Transition fluide */
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Taille et style pour le deuxième "SUBSCRIBE NOW!" */
.subscribe-now2-link {
    text-decoration: none; /* Supprime le soulignement */
    display: inline-block;
    transition: all 0.3s ease; /* Transition fluide */
}

.subscribe-now2-link:hover .wod {
    color: transparent; /* Rend le texte transparent */
    -webkit-text-stroke: 0.4px #ff0000; /* Ajoute un contour rouge */
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 15px rgba(255, 0, 0, 0.6); /* Glow rouge */
}

/* Ajuste la taille du deuxième bouton pour correspondre au premier */
.animated-subscribe-now .word {
    font-size: clamp(3rem, 5vw, 5rem); /* Taille minimale de 3rem */
    color: red;
    font-family: "VT323", monospace;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6),
        0 0 30px rgba(255, 0, 0, 0.4);
    transform: skew(-10deg);
    opacity: 0;
}

/* Deuxième bouton : Animation de slide */
.subscribe-now.second .animated-subscribe-now .word {
    font-size: clamp(3rem, 5vw, 6rem);
    color: red;
    font-family: "VT323", monospace;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6),
        0 0 30px rgba(255, 0, 0, 0.4);
    transform: skew(-10deg);
    opacity: 0;
}

/* Animation pour "SUBSCRIBE" */
.subscribe-now.second .animated-subscribe-now div:nth-child(1) .word {
    animation: moveSubscribe 2s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
}

/* Animation pour "NOW" */
.subscribe-now.second .animated-subscribe-now div:nth-child(2) .word {
    animation: moveNow 2s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
}

.noselect {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 et IE 11 */
    user-select: none; /* Syntaxe standard */
}

/* Glow rouge pour les textes rouges */
*:where(
        [style*="color: rgb(255, 0, 0)"],
        [style*="color: #ff0000"],
        .red-text
    ) {
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6);
}

/* Glow rouge pour les éléments avec un fond rouge */
*:where(
        [style*="background-color: rgb(255, 0, 0)"],
        [style*="background-color: #ff0000"],
        .red-bg
    ) {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6);
}

.article-body,
.image-caption,
.subscribe-now,
.subscribe-now2,
.cross-cursor,
.URL {
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6);
}

.article-headline {
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 25px rgba(255, 0, 0, 0.8);
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 35px rgba(255, 0, 0, 0.9);
}

.search-bar,
.article-subtitle,
.url-box,
.article-box,
.article-image {
    box-shadow: 0 0 7px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6);
}

#scroll-container::-webkit-scrollbar,
#scroll-container::-webkit-scrollbar-track,
#scroll-container::-webkit-scrollbar-thumb {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6);
}

.video-logo {
    display: block; /* Centre la vidéo horizontalement */
    margin: 0 auto 10px; /* Centre horizontalement et ajoute un espacement en dessous */
    width: 30vw; /* Définit une largeur fixe pour la vidéo */
    height: auto; /* Conserve les proportions de la vidéo */

    /* box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); */
}

/* Écran de chargement */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(43, 0, 0); /* Fond CRT */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* Au-dessus de tout le contenu */
    font-family: "VT323", monospace; /* Police CRT */
    color: rgb(255, 0, 0); /* Texte rouge CRT */
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6); /* Glow CRT */
}

#loading-screen .search-bar {
    position: absolute; /* Position absolue pour un placement précis */
    top: 5%; /* Place la barre plus haut dans l'écran de chargement */
    left: 50%;
    transform: translateX(-50%); /* Centre horizontalement */
    width: 90%; /* Ajuste la largeur pour l'écran de chargement */
    z-index: 2001; /* Assure qu'elle est au-dessus des autres éléments */
    background-color: rgb(43, 0, 0); /* Fond CRT */
    border: 3px solid rgb(255, 0, 0); /* Bordure rouge */
    border-radius: 0.3em; /* Coins arrondis */
    padding: 6px 0;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6); /* Glow CRT */
}

#loading-screen .url-box {
    width: 95%; /* Ajuste la largeur pour l'écran de chargement */
    margin: 0 auto; /* Centre horizontalement */
    font-family: "VT323", monospace; /* Police CRT */
    color: rgb(255, 0, 0); /* Texte rouge */
    padding: 6px 0; /* Espacement vertical */
    border-radius: 0.3em; /* Coins arrondis */
    font-size: 14px;
    border: 3px solid red; /* Bordure rouge */
    text-align: left; /* Aligne le texte à gauche */
}

/* Fausse barre URL */
.fake-url-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgb(43, 0, 0); /* Fond CRT */
    color: rgb(255, 0, 0); /* Texte rouge CRT */
    font-size: 1.2rem;
    padding: 10px;
    text-align: center;
    border-bottom: 3px solid rgb(255, 0, 0); /* Bordure rouge */
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6); /* Glow CRT */
    font-family: "VT323", monospace; /* Police CRT */
    z-index: 1000; /* Place au-dessus de tout */
}

/* Vidéo de chargement */
.loading-video {
    display: block;
    margin: 0 auto 20px auto;

    background: transparent;
    max-width: 90vw;
    height: auto;
}

/* Conteneur de la barre de chargement */
.loading-bar-container {
    position: absolute; /* Position absolue pour un placement précis */
    bottom: 10%; /* Place la barre de chargement plus haut */
    left: 50%;
    transform: translateX(-50%); /* Centre horizontalement */
    width: 80%; /* Largeur de la barre */
    height: 10px; /* Hauteur de la barre */
    background-color: rgba(255, 0, 0, 0.2); /* Fond semi-transparent */
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6); /* Glow CRT */
}

/* Barre de chargement */
.loading-bar {
    width: 0%; /* Commence vide */
    height: 100%;
    background-color: rgb(255, 0, 0); /* Couleur rouge */
    border-radius: 5px;
    transition: width 1.5s linear; /* Animation fluide */
}

/* Conteneur pour le deuxième bouton "SUBSCRIBE NOW!" */
.animated-subscribe-now {
    display: flex;
    flex-direction: column; /* Force les lignes à s'empiler */
    gap: 5px; /* Réduit l'espacement entre les lignes */
    align-items: center; /* Centre les lignes horizontalement */
    justify-content: center; /* Centre verticalement */
    width: 100%; /* S'assure que le conteneur occupe toute la largeur */
    overflow: hidden; /* Empêche les mots de dépasser l'écran */
}

.animated-subscribe-now div {
    display: flex;
    justify-content: center; /* Centre les mots dans chaque ligne */
    width: 100%; /* S'assure que les mots occupent tout l'espace horizontal */
}

.animated-subscribe-now .word {
    font-size: clamp(3rem, 5vw, 5rem); /* Taille minimale de 3rem */
    color: red;
    font-family: "VT323", monospace; /* Police utilisée dans votre projet */
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6),
        0 0 30px rgba(255, 0, 0, 0.4);
    transform: skew(-10deg); /* Reste en italique tout au long de l'animation */
    opacity: 0; /* Par défaut invisible */
}

/* Ajustement pour les petits écrans */
@media (max-width: 768px) {
    .animated-subscribe-now .word {
        font-size: 4vw; /* Réduit la taille pour les écrans plus petits */
    }
}

@media (max-width: 480px) {
    .animated-subscribe-now .word {
        font-size: 3vw; /* Réduit encore plus la taille pour les très petits écrans */
    }
}

/* Animation pour "SUBSCRIBE" */
.animated-subscribe-now div:nth-child(1) .word {
    animation: moveSubscribe 2s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
}

/* Animation pour "NOW" */
.animated-subscribe-now div:nth-child(2) .word {
    animation: moveNow 2s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
}

/* Animation pour "SUBSCRIBE" */
@keyframes moveSubscribe {
    0% {
        transform: translateX(-100%) skew(-10deg); /* Commence hors de la zone à gauche */
        opacity: 0; /* Invisible au début */
    }
    20% {
        transform: translateX(0) skew(-10deg); /* Arrive au bord gauche de la zone */
        opacity: 1; /* Devient visible */
    }
    40% {
        transform: translateX(0) scale(1.3) skew(-10deg); /* Pulsation plus grande au centre */
        opacity: 1;
    }
    50% {
        transform: translateX(0) scale(1) skew(-10deg); /* Retour à la taille normale */
        opacity: 1;
    }
    100% {
        transform: translateX(100%) skew(-10deg); /* Sort hors de la zone à droite */
        opacity: 0; /* Devient invisible */
    }
}

/* Animation pour "NOW" */
@keyframes moveNow {
    0% {
        transform: translateX(100%) skew(-10deg); /* Commence hors de la zone à droite */
        opacity: 0; /* Invisible au début */
    }
    20% {
        transform: translateX(0) skew(-10deg); /* Arrive au bord droit de la zone */
        opacity: 1; /* Devient visible */
    }
    40% {
        transform: translateX(0) scale(1.3) skew(-10deg); /* Pulsation plus grande au centre */
        opacity: 1;
    }
    50% {
        transform: translateX(0) scale(1) skew(-10deg); /* Retour à la taille normale */
        opacity: 1;
    }
    100% {
        transform: translateX(-100%) skew(-10deg); /* Sort hors de la zone à gauche */
        opacity: 0; /* Devient invisible */
    }
}

/* Conteneur pour le troisième bouton */
.third-container {
    position: relative;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px; /* Ajoute un espacement au-dessus du bouton */
}

/* Animation pour le troisième bouton "SUBSCRIBE NOW!" */
.animated-subscribe-now-bounce {
    display: flex;
    flex-direction: column; /* Force les lignes à s'empiler */
    gap: -10px; /* Réduit l'espacement entre les lignes */
    align-items: center; /* Centre les lignes horizontalement */
    text-align: center; /* Centre le texte horizontalement */
}

.animated-subscribe-now-bounce div {
    display: flex;
    gap: 1px; /* Réduit l'espacement entre les lettres */
}

.animated-subscribe-now-bounce span {
    font-size: clamp(4rem, 5vw, 6rem);
    color: red;
    font-family: "VT323", monospace; /* Police utilisée dans votre projet */
    text-transform: uppercase;
    display: inline-block;
    transform: translateY(0);
    transition: transform 0.2s ease; /* Transition uniquement pour le mouvement */
    animation: bounce 0.6s ease infinite alternate; /* Animation de rebond */
    position: relative;
    -webkit-text-stroke: 1px #ff0000; /* Ajoute un contour rouge */
}

.animated-subscribe-now-bounce span:nth-child(odd) {
    animation-delay: 0.1s;
}

.animated-subscribe-now-bounce span:nth-child(even) {
    animation-delay: 0.2s;
}

@keyframes bounce {
    100% {
        transform: translateY(-40px); /* Augmente l'amplitude du mouvement */
    }
}

/* Conteneur des boutons */
.button-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne si nécessaire */
    justify-content: center; /* Centre les boutons horizontalement */
    gap: 20px; /* Espacement entre les boutons */
    margin-top: 20px; /* Espacement au-dessus des boutons */
    max-width: calc(100vw - 42px); /* Même largeur maximale que .article-box */
    width: 100%; /* Prend toute la largeur disponible */
    box-sizing: border-box; /* Inclut les bordures et paddings dans le calcul de la largeur */
    margin-left: auto; /* Centre horizontalement */
    margin-right: auto; /* Centre horizontalement */
}

/* Style des boutons */
.custom-button2,
.custom-button3,
.custom-button4 {
    font-family: "VT323", monospace; /* Police VT323 */
    font-size: 1.5rem;
    color: rgb(255, 0, 0); /* Texte rouge */
    background-color: rgb(43, 0, 0); /* Fond CRT */
    border: 3px solid red; /* Bordure rouge */
    border-radius: 10px; /* Coins arrondis */
    padding: 10px 20px; /* Espacement interne */
    text-decoration: none; /* Supprime le soulignement */
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); /* Glow rouge */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    flex: 1 1 calc(25% - 20px); /* Chaque bouton prend 25% de la largeur moins l'espacement */
    max-width: 200px; /* Limite la largeur maximale des boutons */
}
/* Style des boutons */
.custom-button1 {
    font-family: "VT323", monospace; /* Police VT323 */
    font-size: 1.5rem;
    color: rgb(43, 0, 0); /* Texte rouge */
    background-color: rgb(255, 0, 0); /* Fond CRT */
    border: 3px solid red; /* Bordure rouge */
    border-radius: 10px; /* Coins arrondis */
    padding: 10px 20px; /* Espacement interne */
    text-decoration: none; /* Supprime le soulignement */
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); /* Glow rouge */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    flex: 1 1 calc(25% - 20px); /* Chaque bouton prend 25% de la largeur moins l'espacement */
    max-width: 200px; /* Limite la largeur maximale des boutons */
}

/* Effet au survol */
.custom-button1:hover,
.custom-button2:hover,
.custom-button3:hover,
.custom-button4:hover {
    transform: scale(1.1); /* Zoom léger au survol */
    color: rgb(43, 0, 0);
    background-color: rgb(255, 0, 0); /* Fond CRT */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 0, 0, 0.6); /* Glow plus intense */
}

/* Media query pour les écrans de moins de 900px */
@media (max-width: 900px) {
    .custom-button1,
    .custom-button2,
    .custom-button3,
    .custom-button4 {
        flex: 1 1 calc(22% - 10px); /* Réduit la largeur des boutons */
        padding: 8px 12px; /* Réduit l'espacement interne */
        font-size: 1.2rem; /* Réduit la taille de la typographie */
    }
}

/* Media query pour les écrans de moins de 700px */
@media (max-width: 700px) {
    .custom-button1,
    .custom-button2,
    .custom-button3,
    .custom-button4 {
        flex: 1 1 calc(22% - 10px); /* Réduit la largeur des boutons */
        padding: 6px 10px; /* Réduit l'espacement interne */
        font-size: 1rem; /* Réduit la taille de la typographie */
    }
}

/* Media query pour les écrans de moins de 500px */
@media (max-width: 500px) {
    .custom-button1,
    .custom-button2,
    .custom-button3,
    .custom-button4 {
        flex: 1 1 calc(24% - 5px); /* Ajuste la largeur pour rester aligné */
        padding: 4px 8px; /* Réduit encore plus l'espacement interne */
        font-size: 0.8rem; /* Réduit encore plus la taille de la typographie */
    }
}

/* Style pour les liens "conditions générales" */
.legal-link {
    color: rgb(255, 0, 0); /* Texte rouge */
    text-decoration: none; /* Supprime le soulignement */
    transition: color 0.3s ease; /* Transition fluide pour le changement de couleur */
}

.legal-link:hover {
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6); /* Glow rouge au survol */
}

@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 50px rgba(255, 0, 0, 1), 0 0 60px rgba(255, 0, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6);
    }
}

.article-image-container {
    animation: glow-pulse 0.5s infinite alternate;
}

.highlight-glow {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    font-size: 2.2em;
    font-family: "VT323", monospace;
    color: #ff0000;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
    animation: glow-blink 0.5s infinite alternate;
    text-align: center;
    line-height: 0.8;
}

@keyframes glow-blink {
    0% {
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
        opacity: 1;
    }
    50% {
        text-shadow: 0 0 30px #ff0000, 0 0 60px #ff0000;
        opacity: 0.7;
    }
    100% {
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
        opacity: 1;
    }
}

.promo-container {
    position: fixed;
    top: 30px;
    right: -50px;
    width: 450px;
    height: 450px;
    z-index: 50;
    pointer-events: none; /* pour que ça n'intercepte pas les clics */
}

.promo-rotation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* ✅ pour centrer le SVG */
    align-items: center;
    justify-content: center;
    animation: spin 6s linear infinite;
}
.star-glow {
    filter: drop-shadow(0 0 3px #ff0000) drop-shadow(0 0 12px #ff0000);
    animation: star-glow-pulse 1s infinite alternate;
}

@keyframes star-glow-pulse {
    0% {
        filter: drop-shadow(0 0 2px #ff0000) drop-shadow(0 0 4px #ff0000);
    }
    50% {
        filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 16px #ff0000);
    }
    100% {
        filter: drop-shadow(0 0 2px #ff0000) drop-shadow(0 0 4px #ff0000);
    }
}
.promo-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 4.5rem;
    line-height: 0.8;
    color: rgb(43, 0, 0);
    text-align: center;
    pointer-events: none;
    /* Inner glow rouge permanent, avec offsets négatifs et positifs */
    text-shadow: 0 0 6px #ff0000, 0 0 12px #ff0000, -2px -2px 6px #ff0000,
        2px 2px 6px #ff0000, -2px 2px 6px #ff0000, 2px -2px 6px #ff0000,
        -1px -1px 3px #ff0000, 1px 1px 3px #ff0000, -1px 1px 3px #ff0000,
        1px -1px 3px #ff0000;
    filter: blur(1px);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.promo-rotation svg {
    width: 100%;
    height: 100%;
    max-width: 450px;
    max-height: 450px;
}

/* Responsive pour écrans moyens */
@media (max-width: 1000px) {
    .promo-container {
        width: 300px;
        height: 300px;
        top: 20px;
        right: -30px;
    }
    .promo-rotation svg {
        max-width: 300px;
        max-height: 300px;
    }
    .promo-text {
        font-size: 3rem;
    }
}

/* Responsive pour petits écrans */
@media (max-width: 600px) {
    .promo-container {
        width: 160px;
        height: 160px;
        top: 10px;
        right: -10px;
    }
    .promo-rotation svg {
        max-width: 160px;
        max-height: 160px;
    }
    .promo-text {
        font-size: 1.5rem;
    }
}

.promo-container {
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        opacity 0.5s;
    transform: scale(0.5);
    opacity: 0;
    will-change: transform, opacity;
}

.promo-container.visible {
    transform: scale(1);
    opacity: 1;
}

.promo-container.hiding {
    transform: scale(0.5);
    opacity: 0;
}

.promo1 {
    top: 30px;
    right: -30px;
}
.promo2 {
    top: 40%;
    left: -40px;
    right: auto;
}
.promo3 {
    bottom: -15px;
    right: 5vw;
    left: auto;
    top: auto;
    width: 450px;
    height: 450px;
}

.video-logo {
    pointer-events: auto;
    cursor: pointer;
}

.video-logo::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}
.video-logo::-webkit-media-controls {
    display: none !important;
}
.video-logo {
    object-fit: cover;
}
/* Par défaut, on cache la version mobile */
.mobile-only {
    display: none !important;
}
.desktop-only {
    display: block !important;
}

/* Sur mobile, on inverse */
@media (max-width: 800px), (pointer: coarse) {
    .mobile-only {
        display: block !important;
        margin: 0 auto;
        filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 16px #ff0000);
        background: transparent;
    }
    .video-logo.mobile-only {
        display: none;
    }
    .video-logo.desktop-only {
        display: none !important;
    }
}

.loading-video {
    display: block;
    margin: 0 auto 20px auto;

    background: transparent;
    max-width: 90vw;
    height: auto;
}

.mobile-only {
    display: none !important;
}
.desktop-only {
    display: block !important;
}

@media (max-width: 800px), (pointer: coarse) {
    .mobile-only {
        display: block !important;
    }
    .desktop-only {
        display: none !important;
    }
    .loading-video.mobile-only {
        width: 60px;
        height: 36px;
    }
}