@font-face {
    font-family: 'Plantin';
    src: url('font/PlantinMTPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-variant-ligatures: common-ligatures;
    font-feature-settings: "liga", "clig";
}

:root {
    /* Palette Automnale */
    --color-ocre: #C48A3E;
    --color-terre: #8B4C39;
    --color-mousse: #6A7F5F;
    --color-roux: #E6C39F;
    --color-noir: #ffffffe8;
    --color-bg: #262626;
    
    --font-main: 'Plantin', serif;
}

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

body {
    background-color: var(--color-bg);
    color: var(--color-noir);
    font-family: var(--font-main);
    height: 100vh;
    overflow: hidden; /* On gère le scroll nous-mêmes */
    text-rendering : optimizeLegibility;
}

#main-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

/* --- Structure des Séquences --- */
.sequence {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow-x: auto; /* Permet le scroll horizontal natif (caché) */
    overflow-y: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;
    background-color: var(--color-bg); /* Assure que la nouvelle séquence couvre l'ancienne */
    
    /* Masquer la barre de scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.sequence::-webkit-scrollbar {
    display: none;
}

.sequence.prev {
    transform: translateY(-100vh); /* Monte vers le haut */
    opacity: 0;
    pointer-events: none;
}

.sequence.next {
    transform: translateY(100vh); /* Caché en bas */
    opacity: 1; /* Prêt à être visible quand il monte */
}

.sequence.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* --- Le Ruban de Texte --- */
.scroll-track {
    display: flex;
    align-items: center;
    padding-left: 10vw; /* Marge de départ */
    padding-right: 50vw; /* Marge de fin pour laisser respirer */
    height: 100%;
    white-space: nowrap;
}

.text-item {
    margin-right: 15vw; /* Espace entre les phrases */
    flex-shrink: 0;
}

/* --- Effet Halo Glossien --- */
.halo-text {
    font-size: 3.6rem;
    font-weight: normal;
    color: var(--color-noir);
    z-index: 2;
    line-height: 1.2;
    white-space: pre; /* Préserve les espaces */
}

.char {
    position: relative;
    display: inline-block;
}

.char::before {
    content: attr(data-char);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--char-color);
    filter: blur(var(--char-blur));
    opacity: 1;
    z-index: -1;
    transform: scale(1,2); /* Cœur du halo un peu plus large */
}

/* Seconde couche pour le dégradé lointain */
.char::after {
    content: attr(data-char);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--char-color);
    filter: blur(calc(var(--char-blur) * 2)); /* Flou doublé pour la diffusion */
    opacity: 0.6; /* Plus transparent */
    z-index: -2; /* Derrière le premier halo */
    transform: scale(3); /* Très large pour étendre le dégradé */
}

/* --- Boutons & Interactions --- */
.interaction-point {
    margin-left: 10vw;
    margin-right: 10vw;
    display: flex;
    flex-direction: row; /* Alignement horizontal par défaut */
    gap: 5vw;
    align-items: center;
}

.choices-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
}

button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-main);
    text-align: left;
    /* Suppression du scale sur le bouton lui-même pour éviter le reflow */
}



/* Style optimisé pour les boutons : Halo statique mais réactif à l'opacité/couleur */
.btn-halo .char::before {
    /* Taille fixe pour éviter le recalcul de layout */
    transform: scale(2.0); 
    opacity: 0.8;
    transition: opacity 0.2s ease, filter 0.2s ease;
    /* On force une couleur unique (ex: or) ou on garde la couleur de la lettre mais on booste l'effet */
    filter: blur(15px); 
}

/* On supprime la couche after pour les boutons pour alléger le GPU */
.btn-halo .char::after {
    display: none;
}

/* Au survol : on joue uniquement sur l'opacité et le flou (compositing only) */
button:hover .char::before {
    opacity: 1;
    filter: blur(20px); /* Flou plus intense */
    /* Pas de changement de scale */
}
button:hover .char::after {
    transform: scale(3.5);
    transition: all 0.3s ease;
}

/* --- Tracks Layout --- */
.content-wrapper {
    position: relative;
    width: max-content;
    height: 100%;
    min-width: 100vw;
    /* padding-right géré par un spacer dans le JS pour garantir le scroll */
}

.track-top, .track-mid, .track-bot {
    display: flex;
    align-items: center;
}

.track-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    z-index: 10; /* Images derrière le texte pour ne pas gêner les clics */
    padding-left: 20vw;
    /* padding-right retiré ici car géré par le wrapper */
    align-items: flex-end;
    padding-bottom: 2vh;
    justify-content: space-between;
    box-sizing: border-box;
    pointer-events: none;
    gap: 10vw;
}

.track-mid {
    position: relative;
    top: 35%;
    height: 30%;
    z-index: 30; /* Texte et boutons au premier plan absolu */
    pointer-events: auto;
    padding-left: 10vw;
    /* padding-right retiré ici car géré par le wrapper */
    white-space: nowrap;
}

.track-bot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45%;
    z-index: 10; /* Images derrière le texte */
    padding-left: 30vw;
    /* padding-right retiré ici car géré par le wrapper */
    align-items: flex-start;
    padding-top: 2vh;
    justify-content: space-between;
    box-sizing: border-box;
    pointer-events: none;
    gap: 10vw;
}

/* Images dans les tracks */
.track-img {
    height: 90%;
    width: auto;
    object-fit: contain;
    /* margin-right supprimé car géré par space-between */
    opacity: 0;
    animation: fadeIn 1s forwards;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    flex-shrink: 1; /* Permettre aux images de réduire si le texte est court */
    max-width: 40vw; /* Limite pour éviter qu'elles ne soient trop larges individuellement */
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Ensure text is above images */
#main-container {
    z-index: 10;
    position: relative;
}