/* TYPO */
/* Pour ajouter ta typo, il faudra que tu l'héberge sur ton serveur, via le FTP. 
 Pour l'instant, j'ai pris une google font, que j'ai lié dans la partie <head> du html.
 Une fois mise sur ton serveur, tu pourras supprimer les lignes du html, et sortir la déclaration qui suit de ce commentaire, 
 verifier si le chemin d'accès, le nom et l'extension est bon.
 Puis dans "html, body, h1, p" remplacer 'Inter' par 'apfel-grotesk' ou ce que tu auras défini.


*/
@font-face {
    font-family: 'apfel-grotesk';
    src: url(/font/apfel-grotesk.otf) format(opentype);
    font-weight: normal;
}

/* GÉNÉRAL */
html, body, h1, p{
    font-family: 'apfel-grotesk', sans-serif;
    font-weight: normal;
    color: black;
    margin: 0;
}
a{
    color: inherit;
    text-decoration: none;
}

/* HEADER */
header{
    padding: 10px; /* espace à l'intérieur du header */
    border-block-end: 1px solid black; /* bordure noire en bas du header */
}
h1{
    font-size: 60px; /* taille du titre */
    padding-block-end: 1em; /* espace en dessous du titre */
}

/* SECTIONS */
/* Chaque section représente une ligne */
section{
    --gap: 1rem;
    display: flex;
    overflow: hidden; /* permet au texte de ne pas sortir de l'écran */
    gap: var(--gap);
    border-block-end: 1px solid black; /* bordure noire sous chaque section */
}
/* La section noire en bas de la page */
.black, section:hover > *, section:hover{
    background-color: black;
}
.black p, section:hover > * p, section:hover p{
    color: white;
}

/* CONTAINERS */
/* Boites à l'intérieur des sections, dans lesquels on a à la fois du texte et des images*/
.container{
    font-size: 40px;
    align-items: center; /* permet d'avoir les images alignées au texte */
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: var(--gap);
    animation: scroll 45s infinite linear;
    /* animation permettant le défilement :
    scroll : renvoie à la propriété keyframes plus bas dans le code
    15s : définit la durée de l'animation
    infinite : fait que ça continue sans cesse
    linear : fait qu'il n'y a pas de variation dans la vitesse */
}
/* Pour les sections défilant dans l'autre sens */
.reverse{
    animation-direction: reverse; 
}
/* Pour mettre en pause l'animation au survol de la souris */
section:hover .container{
    animation-play-state: paused; 
}
.vide{
    font-size: 46px;
    }

/* IMAGES */
img{
    display: inline; /* image se met dans la continuité du txt */
    height: 1.5em; /* hauteur de l'image en fonction de la taille du texte définie dans le container. L'unité 'em' permet celà. */
    padding: 0 5px; /* espace à gauche et droite de l'image de 5px ; en dessus et en dessous : 0 */
}

/* Définition de l'animation de défilement */
@keyframes scroll{
    from{
        transform: translate(0%);
    }
    to{
        transform: translate(calc(-100% - var(--gap)));
    }
}