:root{
    /* fond */
    --Bleu: #0044FF;
    --Rose: #FF007B;
    --BrunFonce: #3B3B3B;
    --Vert: #00FF2B;
    --Blanc: #EEEEEE;
    --BleuFonce: #165374;
    /* texte */
    --Brun: #8C8C8C;
    --Beige: #F4F4BB;
    --Gris: #4A4A4A;
    --Rouge: #DC4646;
    --GrisClaire: #E2E2E2;
    --RougeClaire: #EA8585;
}

.color1{
    background-color: var(--Bleu);
    color: var(--Brun);
}

.color2{
    background-color: var(--Rose);
    color: var(--Beige);
}

.color3{
    background-color: var(--BrunFonce);
    color: var(--Gris);
}

.color4{
    background-color: var(--Vert);
    color: var(--Rouge);
}

.color5{
    background-color: var(--Blanc);
    color: var(--GrisClaire);
}

.color6{
    background-color: var(--BleuFonce);
    color: var(--RougeClaire);
}





body {
    margin: 0;
    background: #111;
    color: #fff;
    font-family: 'Tenon', sans-serif;
    overflow: hidden; /* On masque tout débordement */
}

.ticker-container {
    width: 100vw;
    height: 100svh; /* ou 100vh selon navigateur */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ticker-line {
    display: flex;
    white-space: nowrap;
    font-size: 6rem;
    font-weight: 200;
    line-height: 1;
}

.ticker-line span {
    display: inline-block;
    text-transform: uppercase;
    pointer-events: auto;
}

.monNom{
    font-weight: 700;
}

a{
    text-decoration: none;
    color: inherit;
}

span{
    transition: 0.2s ease-in;
}

span:hover{
    transform: rotate(4deg);
}

@media (max-width: 1000px){
    .ticker-line {
        font-size: 5rem;
    }
}

@media (max-width: 700px){
    .ticker-line {
        font-size: 3rem;
    }
}