/* Importation des polices d'écritures */

@font-face {        /* Paragraphes */
    font-family: "Renogare";
    src: url("../fonts/renogare.otf") format("opentype");
}
@font-face {        /* Titres et sous-titres */
    font-family: "Akira";
    src: url("../fonts/akira.otf") format("opentype");
}

/* Réinitialisation des propriétés par défaut de la page */

*, ::before, ::after {
    margin: 0;
    padding: 0;
}

/* Déclarations des propriétés globales */

html {
    scroll-behavior: smooth;
}
body {
    color: #FFFFFF;
    font-family: "Renogare", sans-serif;
}
a {
    color: #FFFFFF;
    text-decoration: none;
}
a, p {
    font-size: 16px;
}
p {
    text-align: justify;
    line-height: 32px;
}
h1, h2 {
    font-family: "Akira", sans-serif;
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
ul {
    display: flex;
    list-style-type: none;
}

/* Header */

header {
    width: 100%;
    height: 100vh;
}
header nav {
    padding: 0 65px;
    position: fixed;
    width: 100%;
    height: 150px;
    display: flex;
    background: linear-gradient(180deg, #07090D -65%, transparent);     /* On ajoute un dégradé dans le fond pour que les textes soient davantage lisibles quel que soit l'endroit de la page */
    z-index: 2;     /* On place la barre de navigation devant pour éviter que certains éléments de la page la masque (exemple : boutons "En savoir plus") */
}
header ul {
    align-items: center;
}
header ul li {
    margin-left: 65px;
}
header ul li:first-child {
    margin-left: 0;     /* On retire la marge de gauche du premier élément de la liste car sinon elle se cumulera avec le padding du container */
}
header ul a img {
    width: 70px;
}
header ul a {
    font-size: 20px;
}
header ul a::after, footer ul > li > a::after {     /* On crée une animation en utilisant des pseudo-éléments */
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #FFFFFF;
    transform-origin: bottom left;
    transform: scaleX(0%);
    transition: transform 0.3s ease-out;
}
header ul a:hover::after, footer ul > li > a:hover::after {
    transform: scaleX(100%);
}
header ul li:first-child a::after {
    content: none;      /* On retire l'animation au survol de la souris pour le logo (premier élément de la barre de navigation) */
}
header ul li #current::after {      /* On différencie la page acutelle par rapport aux autres pages en modifiant la couleur du souligement et en le conservant (même si on ne le survole pas) */
    background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
    transform: scaleX(100%);
}
header video, header > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
header video, header > img {
    filter: brightness(85%) contrast(105%);     /* On applique certains filtres sur la vidéo et l'image d'arrière-plan pour correctement les incorporer dans le fond (notamment pour conserver la lisibilité des textes) */
}
header > a {
    position: absolute;
    left: 50%;
    bottom: 65px;
    transform: translateX(-50%);
    animation: bounce 1s infinite;      /* On applique l'animation que l'on a codée sur la flèche tout en la rendant infinie */
}
header > a img {
    width: 65px;
}

/* Footer */

footer {
    padding: 40px 65px;
    background: #07090D;
}
footer ul {
    padding-bottom: 30px;
    justify-content: space-between;
    align-items: center;        /* Ici, cette propriété permet de centrer verticalement les deux textes (copyright et ancre) par rapport aux icônes des réseaux sociaux */
}
footer ul div a {
    margin: 0 10px;
}
footer ul div a:first-child {
    margin-left: 0;     /* On enlève la marge de gauche du premier élément afin que le texte "Revenir en haut" soit correctement centré sur la page */
}
footer ul div a img {
    width: 40px;
}

/* Sélecteurs en commun entre les pages */

.line {
    margin: 45px 0;
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
}
.learn_button, form > input {
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59) 1;      /* Le "1" permet de répéter une seule fois le dégradé en l'effectuant sur tous les bords */
}
.learn_button {
    position: relative;
    width: 144px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;       /* On cache tout les enfants du bouton en dehors de celui-ci (ici, le pseudo-élément permettant de faire l'animation au survol de la souris) */
}
.learn_button::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
}
.learn_button:hover::before {
    transform: translateY(0%);
}
.learn_button a {
    padding: 15px;      /* On augmente la taille de la zone cliquable pour le lien afin qu'il soit équivalent à la taille du bouton */
    font-size: 15px;
    z-index: 1;     /* On place le texte devant pour ne pas qu'il se fasse cacher par l'animation */
}
#final_photo {
    width: 100%;
    height: 750px;
}
#final_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main - Index */

.summary {
    width: 100%;
    min-height: 750px;      /* On applique une hauteur minimale pour en même temps : 1) Avoir de l'espace en haut et en bas 2) Éviter que le texte déborde, la hauteur évoluera donc avec la taille que prend le texte */
    display: flex;
    background: #07090D;
}
.summary img {
    width: 50%;
    object-fit: cover;
    flex-grow: 1;       /* Ici, cette propriété permet à la l'image de pousser le plus possible la div "description" vers la droite pour prendre la totalité de la largeur de l'écran (même lorsque la somme des pourcentages de la largeur des deux div n'est pas égale à 100%) */
}
.summary article {
    padding: 75px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.summary article .learn_button {
    margin-top: 45px;
}

/* Main - Histoire */

.history {
    padding: 75px 65px 0 65px;      /* Haut - Droit - Bas - Gauche */
    background: #07090D;
}
.history:last-of-type {
    padding: 75px 65px;
}
.history .context {
    display: flex;
    flex-direction: column;
}
.history:nth-of-type(even) .context {       /* Pour une section sur deux, on positionne le titre etc... à droite */
    align-items: flex-end;
}
.history .details {
    width: 100%;
    display: flex;
}
.history:nth-of-type(even) .details {
    flex-direction: row-reverse;
}
.history .details img {
    width: 40%;
    object-fit: cover;
    aspect-ratio: 1;        /* Redimensionne automatiquement l'image pour qu'elle soit sous forme de carré (hauteur = largeur) */
    flex-grow: 1;       /* Exactement comme dans le main de la page "index" */
    filter: grayscale(100%);
    transition: filter 0.3s ease-out;
}
.history .details img:hover {
    filter: grayscale(0%);
}
.history .details article {
    width: 60%;
    display: flex;
    align-items: center;
}
.history .details article p {
    padding-left: 135px;
}
.history:nth-of-type(even) .details p {
    padding-left: 0;
    padding-right: 135px;
}

/* Main - Activités */

.activity {
    position: relative;
    width: 100%;
    min-height: 900px;
    display: flex;
}
.background {       /* On créer une div dédiée à l'image de fond pour avoir accès aux différents filtres (si on mettait l'image sur la section enière avec "background-image", aucun filtre n'aurait été appliquable */
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    filter: brightness(30%);        /* On applique un filtre pour diminuer la luminosité de l'image afin que le texte par-dessus soit davantage lisible */
    z-index: -1;
}
.activity:nth-of-type(1) .background {      /* On applique l'image d'arrière-plan correspondant à chaque section */
    background-image: url("../photos/activites/photo_pacific_park.jpg");
}
.activity:nth-of-type(2) .background {
    background-image: url("../photos/activites/photo_playland_arcade.jpg");
}
.activity:nth-of-type(3) .background {
    background-image: url("../photos/activites/photo_merry_go_round.jpg");
}
.activity:nth-of-type(4) .background {
    background-image: url("../photos/activites/photo_heal_the_bay.jpg");
}
.activity:nth-of-type(5) .background {
    background-image: url("../photos/activites/photo_restaurant.jpg");
}
.activity article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.activity article h2 {
    text-align: center;
}
.activity article h2, .activity article p, .activity article .learn_button {
    margin: 45px 0;
}
.activity article h2, .activity article p {
    padding: 0 18%;
}

/* Main - Culture */

.entertainment {
    padding: 0 65px;
    min-height: 700px;
    display: flex;
    background: #07090D;
}
.entertainment:nth-of-type(even) {      /* Ici, on reproduit le même comportement qu'avec la page "histoire" */
    flex-direction: row-reverse;
}
.entertainment article, .entertainment .illustration {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.entertainment article {
    padding-right: 65px;
}
.entertainment:nth-of-type(even) article {
    padding-right: 0;
    padding-left: 65px;
}
.entertainment article h3 {
    font-style: italic;
}
.entertainment .illustration img {
    width: 100%;
    height: 75%;
    object-fit: cover;
}

/* Main - Réserver */

.reservation {
    width: 100%;
    min-height: 750px;
    display: flex;
    background: #07090D;
}
.reservation > div {
    padding: 65px 0 65px 65px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.reservation > div h2 {
    margin-right: 65px;
}
form input, form select {
    margin-right: 45px;
    margin-bottom: 22.5px;
    width: 210px;
    height: 30px;
    font-family: "Renogare", sans-serif;
}
form select {
    width: 214px;       /* En regardant dans l'inspecteur, la largeur du select n'est pas la même par défaut que les autres champs de saisie (donc j'ai augmenté sa largeur séparément, soit 4 pixels de plus) */
}
form div:last-of-type {     /* On sélectionne le dernier champ du formulaire, donc la checkbox */
    margin-top: 22.5px;
    display: flex;
    align-items: center;
    font-size: 14px;
}
form div:last-of-type input {
    margin-right: 22.5px;
    margin-bottom: 0;
    width: 25px;
    height: 25px;
}
form > input {      /* Ici, on sélectionne les boutons qui sont des enfants directs du formulaire (il n'y en a donc qu'un seul : le bouton submit => cela évite de créer un id) */
    margin-top: 45px;
    width: 144px;
    height: 44px;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.25s ease-out, color 0.25s ease-out;        /* Ici, on applique la transition uniquement sur les propriétés "background" et "color" (sinon, elle s'applique automatiquement à toutes les propriétés => moins optimisé) */
}
form > input:hover {
    background: #FFFFFF;
    color: #07090D;
}
.reservation img {
    width: 50%;
    object-fit: cover;
}

/* Main - Traitement */

#header_traitement {
    height: 150px;
    background: #07090D;
}
#donnees {
    height: calc(100vh - 150px - 220px);        /* On attribue une hauteur particulière pour que la page n'ai pas de scroll (150px = hauteur du header, 220px = hauteur du footer => visible dans l'inspecteur) */
    display: flex;
    background: #07090D;
}
#donnees article {
    padding: 0 65px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#donnees article ul {
    margin-top: 45px;
    flex-direction: column;
}
#donnees article ul li {
    margin-bottom: 10px;
}
#donnees img {
    padding-right: 65px;
    width: 50%;
    object-fit: cover;
}
#ancre_traitement {
    display: none;      /* L'ancre n'est pas nécessaire sur desktop (car pas de scroll) donc on la cache MAIS on la ré-affiche lors du passage au format mobile-tablette => voir media queries */
}

/* Animation (seulement pour la flèche dans le header) */

@keyframes bounce {
    0% {
        transform: translate(-50%, 0%);
    }
    25% {
        transform: translate(-50%, 15px);   /* On fait remonter l'élément de 15px vers le haut (il est fortement conseillé d'utiliser la propriété "transform" car "top" aurait rechargé le DOM => moins optimisé) */
    }
    100% {
        transform: translate(-50%, 0%);
    }
}

/* Media Queries (tentative de "responsif" jusqu'à environ 700 pixels de largeur) */

@media screen and (max-width: 1200px) {
    .summary, .reservation {
        flex-direction: column;
    }
    .summary, .entertainment, #donnees article, #donnees article ul {
        align-items: center;
    }
    .summary:nth-of-type(even), .entertainment, .entertainment:nth-of-type(even), #donnees {
        flex-direction: column-reverse;     /* On inverse l'ordre des éléments une fois sur deux (sinon, certaines images se suivraient en raison du code HTML) */
    }
    .summary img, .reservation img, #donnees img {
        width: 100%;
    }
    .summary article, .entertainment article, .entertainment .illustration, #donnees article {
        width: auto;
    }
    .entertainment article, .entertainment:nth-of-type(even) article {
        margin: 45px 0;
        padding: 0;
    }
    .entertainment .illustration {
        margin-top: 45px;
    }
    .reservation > div {
        padding: 65px 0;
        width: 100%;
        align-items: center;
    }
    .reservation > div h2 {
        margin-right: 0;
    }
    form, form div {
        display: flex;
    }
    form {
        flex-direction: column;
        align-items: center;
    }
    form div, #donnees article {
        justify-content: center;
    }
    form div:last-of-type input, form input, form select {
        margin: 22.5px;
    }
    #donnees {
        height: auto;
    }
    #donnees article {
        padding: 65px;
    }
    #donnees article h1, #donnees article p {
        text-align: center;
    }
    #donnees img {
        padding-right: 0;
    }
    #ancre_traitement {
        display: block;     /* On ré-affiche l'ancre car à ce moment-là, le scroll est présent donc l'ancre est pertinente */
    }
}
@media screen and (max-width: 1000px) {
    .history .details, .history:nth-of-type(even) .details {
        flex-direction: column;
    }
    .history .details img, .history .details article{
        width: auto;
    }
    .history .details article p, .history:nth-of-type(even) .details article p {
        padding: 0;
        padding-top: 45px;
    }
}
@media screen and (max-width: 950px) {
    header nav, footer ul {
        padding: 0;
        justify-content: center;
    }
    header ul li {
        margin: 0 15px;
    }
    footer ul {
        align-items: center;
        flex-wrap: wrap;
    }
    footer ul > li {
        margin: 0 20px;
    }
    footer ul div a {
        margin: 5px;
    }
}
@media screen and (max-width: 818px) {
    footer > p {
        text-align: center;
    }
}