@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* variable CSS */
:root {
    --bg: #0a0a0a;
    --accent: #e8ff47;
    --text: #f0ede6;
    --band-bg: #e8ff47;
    --band-text: #0a0a0a;
    --ticker-speed: 30s;
    --ticker-distance: 50%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Mono', monospace;
    overflow-x: hidden;
}

/* === SLIDE === */
.slide {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Contenu central de la slide */
.slide_content {
    text-align: center;
    padding: 2rem;
}

.slide_content h1 {
    font-family: 'Bebas Neue', sans-serif;
    /* clamp(min, taille idéale[unité fluide], max) */
    font-size: clamp(4rem, 12vw, 10rem);
    letter-spacing: 0.05em;
    /* si la font-size est de 80px la line-height sera de 80px (suit automatiquement) */
    line-height: 1;
    color: var(--text);
}

.slide_content h1 span {
    color: var(--accent);
}

.slide_content p {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* Ticker Band */
.ticker-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: var(--band-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    border-top: 2px solid #0a0a0a;
}

@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(var(--ticker-distance)); }
}

.ticker-track {
    display: flex;
    align-items: center;
    /* empêche le texte de passer à la ligne */
    white-space: nowrap;
    animation-name: ticker;
    animation-duration: var(--ticker-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

/*
    will-change est une indication donnée au navigateur pour lui dire à l'avance qu'une propriéé va être animée ou modifiée

    ça dit en gros au navigateur:
    cet élément va être transformé en permanence, ce qui va en réponse créer un calque GPU dédié à l'élément, ce qui permet à l'animation de tourner directement sur la carte graphique plutôt que sur le CPU (ce qui donne une animation plus fuilde et sans saccades)

    Utiliser avec modération car ça consomme de la mémoire GPU donc si beaucoup dans le site, ce n'est pas optimisé et risque de saccades
*/



/* On duplique le contenu pour créer une boucle seamless */
/* animation-play-state contrôle si l'animation est en cours ou en pause, valeur (running [default] et paused) */
.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
}

.ticker-item a {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    color: var(--band-text);
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.2s;
}

.ticker-item a:hover {
    opacity: 0.5;
    text-decoration: underline;
    /* text-underline-offset: contrôle la distance entre le texte et le soulignement */
    text-underline-offset: 4px;
}

/* Séparateur entre items */
.ticker-sep {
    display: block;
    width: 8px;
    height: 8px;
    background: var(--band-text);
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.4;
}

/*
    explication de l'animation

    Le JS duplique les blocs jusqu'a ce que le contenu fasse au moins 3 fois la largeur de l'écran

   Le JS mesure item.offsetWidth — la largeur exacte d'un bloc en pixels — et l'injecte dans --ticker-distance. Disons que ça donne -480px.
Le track contient par exemple 4 blocs identiques. L'animation déplace tout vers la gauche de exactement 480px :

départ  : [bloc1][bloc2][bloc3][bloc4]  → position 0
arrivée : [bloc1][bloc2][bloc3][bloc4]  → position -480px (bloc1 sorti à gauche)

Quand l'animation repart à 0, bloc2 se retrouve exactement où était bloc1 au départ. Comme tous les blocs sont identiques, l'œil ne voit aucune coupure.

*/