@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:ital,wght@0,400;0,500;0,600;1,100&family=Trispace:wdth,wght@98.3,473;100,400&display=swap');


/* GLOBAL */
body {
    margin: 0; /* Marge de 0 */
    padding: 0; /* Marge intérieur a zéro de base => Par défaut les textes colleront aux bords */
    background-color: white; /* Couleur de fond blanche */
    color: black; /* Couleur du texte noir */
    font-family: Arial, Helvetica, sans-serif; /* Police par défaut Arial, si pas disponible le navigateur prendra Helvetica, si pas disponible non plus Sans-Serif */
}
h1 {
    font-family: 'La Belle Aurore', cursive, sans-serif; /* DÉJÀ EXPLIQUÉ */
    font-size: 100px; /* Taille de 100 pixels */
    text-align: center; /* Alignement au centre */
    padding: 10px; /* Marge intérieur de 10px */
}
h2 {
    padding-left: 10px; /* Marge intérieur gauche 10px */
}
p {
    padding-left: 20px; /* DÉJÀ EXPLIQUÉ */
    text-align: justify; /* Alignement justifié */
    padding: 5px; /* DÉJÀ EXPLIQUÉ */
    margin: 5px; /* DÉJÀ EXPLIQUÉ */
}
section {
    padding-top: 40px; /* DÉJÀ EXPLIQUÉ */
    padding-bottom: 40px; /* DÉJÀ EXPLIQUÉ */
}
.container {
    display: flex; /* DÉJÀ EXPLIQUÉ */
    flex-wrap: wrap; /* le contenu débordant est placé sur une nouvelle ligne */
    padding: 5px; /* DÉJÀ EXPLIQUÉ */
}
#container, #container p {
    text-align: center; /* DÉJÀ EXPLIQUÉ */
}

/* CLASS = swiss */
.swiss {
    padding-top: 100px; /* DÉJÀ EXPLIQUÉ */
}
.swiss .container .text {
    width: 50%; /* Largeur de 50% */
    margin: auto; /* Marge en automatique (les margest seront les mêmes a gauche et a droites souvent) */
}
.swiss .container .text p {
    padding-left: 20px; /* DÉJÀ EXPLIQUÉ */
}
.swiss .container .video {
    width: 50%; /* DÉJÀ EXPLIQUÉ */
}
.swiss .container .video video {
    width: 100%; /* DÉJÀ EXPLIQUÉ */
}

/* ID = res */
#res {
    margin: 10%; /* DÉJÀ EXPLIQUÉ */
}
#res .container .text {
    width: 50%; /* DÉJÀ EXPLIQUÉ */
    font-size: 1.2em; /* DÉJÀ EXPLIQUÉ - Taille dans une autre unité */
    margin: auto; /* DÉJÀ EXPLIQUÉ */
}
#res .container .text p {
    padding-left: 20px; /* DÉJÀ EXPLIQUÉ */
}
#res .container .video {
    width: 50%; /* DÉJÀ EXPLIQUÉ */
}
#res .container .video video {
    width: 100%; /* DÉJÀ EXPLIQUÉ */
}

/* ID = city */
#city .container .row {
    display: flex; /* Création d'une boite flexible */
    width: 99%; /* DÉJÀ EXPLIQUÉ */
    padding-bottom: 50px; /* DÉJÀ EXPLIQUÉ */
}
#city .city {
    width: 33%; /* DÉJÀ EXPLIQUÉ */
}
#city img {
    height: 150px; /* DÉJÀ EXPLIQUÉ */
}
#city .text {
    height: 150px; /* DÉJÀ EXPLIQUÉ */
    overflow: auto; /* le contenu débordant est caché, mais des barres de défilement sont affichées uniquement si le contenu déborde de l'élément */ 
}
#city img {
    width: 50%; /* DÉJÀ EXPLIQUÉ */
    display: block; /* Element affiché comme un block de contenu */
    margin: auto; /* DÉJÀ EXPLIQUÉ */
}
.row .city:nth-child(n+2) {
    border-left: 1px solid grey; /* Bordure à gauche d'1px en continu en gris */
}
#city .res {
    padding: 15px; /* DÉJÀ EXPLIQUÉ */
    text-align: center; /* DÉJÀ EXPLIQUÉ */
    width: 100%; /* DÉJÀ EXPLIQUÉ */
}
#city .res a {
    padding: 5px; /* DÉJÀ EXPLIQUÉ */
    border: 1px solid greenyellow; /* DÉJÀ EXPLIQUÉ */
    background-color: greenyellow; /* DÉJÀ EXPLIQUÉ */
    color: black; /* DÉJÀ EXPLIQUÉ */
    text-decoration: none; /* Pas de décoration de texte (soulignement, etc...) */
    transition: 0.5s; /* Pour tout changement une transition d'une demi seconde aura lieu */
    border-radius: 20px; /* Coins arrondis dans un rayon de 20px */
}
#city .res a:hover {
    border: 1px solid green; /* DÉJÀ EXPLIQUÉ */
    background-color: green; /* DÉJÀ EXPLIQUÉ */
    color: white; /* DÉJÀ EXPLIQUÉ */
    padding: 7px; /* DÉJÀ EXPLIQUÉ */
}

/* CONTACT */
form {
    width: 500px; /* DÉJÀ EXPLIQUÉ */
    margin: 0 auto; /* DÉJÀ EXPLIQUÉ */
    transition: 0.5s; /* DÉJÀ EXPLIQUÉ */
}
label {
    display: block; /* DÉJÀ EXPLIQUÉ */
    margin-bottom: 10px; /* DÉJÀ EXPLIQUÉ */
    text-align: left; /* DÉJÀ EXPLIQUÉ */
}
input[type="text"], input[type="email"], textarea {
    width: 100%; /* DÉJÀ EXPLIQUÉ */
    padding: 12px; /* DÉJÀ EXPLIQUÉ */
    border: 1px solid #ccc; /* DÉJÀ EXPLIQUÉ */
    border-radius: 4px; /* DÉJÀ EXPLIQUÉ */
    box-sizing: border-box; /* La taille de l'élément est calculée en prenant en compte son contenu et sa bordure. */
    resize: vertical; /* L'élement ne peut-être redimensionné que verticalement */
}
input[type="submit"] {
    margin-top: 5px; /* DÉJÀ EXPLIQUÉ */
    background-color: greenyellow; /* DÉJÀ EXPLIQUÉ */
    color: black; /* DÉJÀ EXPLIQUÉ */
    padding: 12px 20px; /* DÉJÀ EXPLIQUÉ */
    border: none; /* Enlève les bordures */
    border-radius: 4px; /* DÉJÀ EXPLIQUÉ */
    cursor: pointer; /* DÉJÀ EXPLIQUÉ (menu.css) */
    width: 100%; /* DÉJÀ EXPLIQUÉ */
    transition: 0.5s; /* DÉJÀ EXPLIQUÉ */
}
input[type="submit"]:hover {
    background-color: green; /* DÉJÀ EXPLIQUÉ */
    color: white; /* DÉJÀ EXPLIQUÉ */
}

/* BACKGROUND CITY */
.zurich {
    background-image: url("../img/zurich-2.jpg"); /* Image en fond */
}
.geneva {
    background-image: url("../img/geneve-2.jpg"); /* Image en fond */
}
.bern {
    background-image: url("../img/bern-2.jpg"); /* Image en fond */
}
.lucern {
    background-image: url("../img/lucerne-2.jpg"); /* Image en fond */
}
.lausanne {
    background-image: url("../img/lausanne-2.jpg"); /* Image en fond */
}
.lauterbrunnen {
    background-image: url("../img/lauterbrunnen-2.jpg"); /* Image en fond */
}
.imgHead {
    background-repeat: no-repeat; /* l'image en fond ne sera pas répétée */
    background-position: center; /* L'image sera centrée */
    background-size: 100%;
    color: whitesmoke; /* DÉJÀ EXPLIQUÉ */
    border: 5px solid black; /* Bordure de 5px continue en noire */
    box-shadow: 10px 5px 5px grey; /* Ombre grise - décallée de 10px à droite, 5px vers le bas, ombre diffuse */
    width: 50%; /* DÉJÀ EXPLIQUÉ */
    margin: auto; /* DÉJÀ EXPLIQUÉ */
    border-radius: 40px; /* Rayon des coins (40px) */
    padding-top: 100px; /* DÉJÀ EXPLIQUÉ */
}

@media screen and (max-width: 1100px) { /* Parie responsive -> Ecran plus petits de 1100px */
    /*GLOBAL*/
    h1 {
        font-size: 75px; /* DÉJÀ EXPLIQUÉ */
    }
    .container {
        display: block; /* DÉJÀ EXPLIQUÉ */
    }
    
    /* CLASS = swiss */
    .swiss .container .text {
        width: 100%; /* DÉJÀ EXPLIQUÉ */
    }
    .swiss .container .video {
        width: 100%; /* DÉJÀ EXPLIQUÉ */
    }
    /* ID = res */
    #res {
        margin: 5%; /* DÉJÀ EXPLIQUÉ */
    }
    #res .container .text {
        width: 100%; /* DÉJÀ EXPLIQUÉ */
        font-size: 1em; /* DÉJÀ EXPLIQUÉ */
    }
    #res .container .video {
        width: 100%; /* DÉJÀ EXPLIQUÉ */
    }

    /* ID = city */
    #city {
        width: 90%; /* DÉJÀ EXPLIQUÉ */
        height: auto; /* Hauteur automatique */
        margin: auto; /* DÉJÀ EXPLIQUÉ */
    }
    #city .container .row {
        display: block; /* DÉJÀ EXPLIQUÉ */
        width: 100%; /* DÉJÀ EXPLIQUÉ */
    }
    #city .city {
        width: 100%;
        border-bottom: 1px solid grey; /* DÉJÀ EXPLIQUÉ */
        border-left: 0px; /* DÉJÀ EXPLIQUÉ */
        padding: 10px; /* DÉJÀ EXPLIQUÉ */
    }
    #city .text {
        height: auto; /* DÉJÀ EXPLIQUÉ */
        overflow: visible; /* DÉJÀ EXPLIQUÉ */
    }
    #city img {
        width: 100%; /* DÉJÀ EXPLIQUÉ */
        height: auto; /* DÉJÀ EXPLIQUÉ */
    }
    
    /* CONTACT */
    form {
        width: 90%; /* DÉJÀ EXPLIQUÉ */
        margin: 0 auto; /* DÉJÀ EXPLIQUÉ */
    }

    .imgHead {
        background-size: 200%;
        color: whitesmoke; /* DÉJÀ EXPLIQUÉ */
        border: 5px solid black; /* Bordure de 5px continue en noire */
        box-shadow: 10px 5px 5px grey; /* Ombre grise - décallée de 10px à droite, 5px vers le bas, ombre diffuse */
        width: 75%; /* DÉJÀ EXPLIQUÉ */
        margin: auto; /* DÉJÀ EXPLIQUÉ */
        border-radius: 40px; /* Rayon des coins (40px) */
        padding-top: 100px; /* DÉJÀ EXPLIQUÉ */
    }
}

/* Animation */
.wrapper{
    width: 300px; /* DÉJÀ EXPLIQUÉ */
    height: 300px; /* DÉJÀ EXPLIQUÉ */
    background-color: lightgreen; /* DÉJÀ EXPLIQUÉ */
    border-radius: 50%; /* DÉJÀ EXPLIQUÉ */
    border: 10px solid black; /* DÉJÀ EXPLIQUÉ */
    margin: 10% auto; /* DÉJÀ EXPLIQUÉ */
    animation:color 4s ease-in infinite ;
                                            /*  déclaration d'une animation
                                                color = nom de l'animation appelée
                                                4s = durée de l'animation (4 secondes)
                                                ease-in = type de délai
                                                infinite = l'animation doit se répéter indéfiniment
                                            */
    
}

.plane{
    position: absolute; /* DÉJÀ EXPLIQUÉ */
    z-index: 100; /* DÉJÀ EXPLIQUÉ */
    animation: plane-move 1s 2s ease-in forwards ; /* DÉJÀ EXPLIQUÉ */
    
}

.wrapper img{
    width: 100%; /* DÉJÀ EXPLIQUÉ */
    height: 100%; /* DÉJÀ EXPLIQUÉ */
    margin: 20% 25%; /* DÉJÀ EXPLIQUÉ */
}

.tick{
    position: absolute; /* DÉJÀ EXPLIQUÉ */
    opacity: 0; /* DÉJÀ EXPLIQUÉ */
    animation: tick-visible 1s 3s ease-out forwards; /* DÉJÀ EXPLIQUÉ */
    
}

@keyframes plane-move{
   
    
    50%{
        transform: translate(90%,-90%);
        opacity: 0.5; /* DÉJÀ EXPLIQUÉ */
    }
    80%,100%{
        transform: translate(90%,-90%);
        opacity: 0; /* Element completement transparent */
        
    }
}

@keyframes tick-visible{
    
    100%{
        opacity: 1; /* Element completement opaque */
    }
}

@keyframes color{
    0%{
        border-color: black; /* Changement de la couleur de la bordure */
    }
    
     10%{
        border-color: red; /* DÉJÀ EXPLIQUÉ */
    }
    
    20%{
        border-color: brown; /* DÉJÀ EXPLIQUÉ */
    }
    
    30%{
        border-color: pink; /* DÉJÀ EXPLIQUÉ */
    }
    
    40%{
        border-color: gold; /* DÉJÀ EXPLIQUÉ */
    }
    
    50%{
        border-color: violet; /* DÉJÀ EXPLIQUÉ */
    }
    
    60%{
        border-color: paleturquoise; /* DÉJÀ EXPLIQUÉ */
    }
    
    70%{
        border-color: blue; /* DÉJÀ EXPLIQUÉ */
    }
    
    80%{
        border-color: mediumslateblue; /* DÉJÀ EXPLIQUÉ */
    }
    
    90%{
        border-color: coral; /* DÉJÀ EXPLIQUÉ */
    }
    
    100%{
        border-color: palevioletred; /* DÉJÀ EXPLIQUÉ */
    }
}