/* Permet de changer toutes les couleurs de notre projet qu'une seule fois */
:root {
    --color1: #ede4d0;
    --color2: pink;
    --color3: #393b4b;
    --color4: rgb(18, 19, 19);
}

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

body {
    background: url(./img/bg.jpg) center/cover;
    height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color1);
    /*annonce de la couleur pour le body */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* avec overflow: hidden tout ce qui dépasse tu le cache (permet de cacher le battleship qui sort de l'écran) */
}

/* Configuration de la class card */
.card {
    background: rgba(0, 0, 0, 0.5);
    width: calc(100% - 50px);
    /* calc sert à faire des calcul, dans cet exemple le texte aura 25px de chaque côté (100% du texte - 50px) */
    padding: 20px 20px 6px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.507);
    border-radius: 5px;
    backdrop-filter: blur(5px);
    /* backdrop-filter sert à flouter ce qui se trouve derrière le background de .card */
}

/* :before ou :after élément intégré avant ou après la class card sans passer par le html */
.card::before {
    content: "\2730";
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 2.4rem;
    /* Pour agrandir le :before on n'utilise pas le height mais font-size avec une valeur en rem */
}

h1 {
    margin-bottom: 24px;
    position: relative;
    /* si on veut que le after (qui est en absolute) reste dans le parent alors il faut le mettre en relative */
}

h1::after {
    /* pour un after ou un before il faut toujours un content (même vide) et une position absolute */
    content: "";
    position: absolute;
    background: var(--color2);
    height: 1px;
    width: 100%;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    /* on vient de créer une barre horizontale et de la faire disparaitre avec scaleX */
    animation: h1anim 6s ease-in-out forwards;
    /* avec animation on appelle l'animation ci-dessous (nom de l'anim, dure 10s, l'effet voulu ease-in-out (lent au début et lent à la fin), forwards garde la barre visible à la fin sinon elle disparait. */
    transform-origin: center;
    /* permet de faire partir la barre de gauche mais on peut aussi partir de droite,de base la transform part du centre */
}

/* on crée l'animation */
@keyframes h1anim {
    100% {
        transform: translateX(-50%) scaleX(1);
    }

    /* on peu aussi dire to {} */
}

.grid-container {
    display: grid;
    grid-template-columns: 20% 80%;
}

/* Configuration de la class polygon-container à gauche du paragraphe */
.polygon-container {
    filter: drop-shadow(-1px 8px 3px var(--color3));
    /* seul moyen pour faire une ombre au polygon */
    place-self: center left;
    /* pour centrer de cette façon là, il faut mettre le parent en grid (l'élément restera aussi plaqué à gauche)*/
}

.polygon {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: linear-gradient(135deg, var(--color2) 0%, var(--color1) 100%);
    height: 100px;
    width: 100px;
}

.polygon::after {
    content: "Un texte";
    position: absolute;
    color: var(--color2);
    background: var(--color4);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(344deg);
    width: 90px;
    padding: 4px;
    text-align: center;
}

/* Configuration du paragraphe */
p {
    /* écartement des lignes */
    line-height: 26px;
    margin: 20px 0;
    /* Les 4 éléments suivants servent à conserver les 4 premières lignes du texte et à cacher le reste */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    text-align: justify;
}

/* Changer la couleur de selection lorsqu'on passe la souris sur le texte en gardant le bouton gauche appuyé */
p::selection {
    background: var(--color2);
    color: var(--color3);
}

/* Configuration de la class checkbox-container et de ses checkbox */
.checkbox-container {
    display: flex;
    justify-content: space-around;
    margin: 20px 0 30px;
    perspective: 40px;
    /* perspective pour faire fonctionner l'animation du label2 */
}

input[type="checkbox"] {
    /* on fait disparaitre les cases à cocher (checkbox) */
    display: none;
}

/* Quand l'input de type checkbox est coché + le label */
input[type="checkbox"]:checked+label {
    background: var(--color2);
    color: var(--color3);
    transform: scale(1.1);
    filter: brightness(120%);
}

label {
    cursor: pointer;
    border: 1px solid var(--color1);
    background: var(--color3);
    padding: 10px;
    border-radius: 5px;
    transition: 0.2s;
    /* mettre la transition ici et pas dans checked+label pour qu'elle se fasse en entrée mais aussi en sortie */
    user-select: none;
    /* l'utilisateur ne peux pas selectionner/surligner le texte */
}

/* Quand le 1er label que tu vois est survolé */
label:first-of-type:hover {
    animation: label1 1s infinite linear;
    /* avec infinite l'animation se joue à l'infini et linear pour que le mouvement soit régulier */
}

@keyframes label1 {
    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }

    /* à la moitié de ton animation tu dois faire 1.4 et à la fin tu reviens à 1 (normale) */
}

/* le label qui est le 4eme enfant (Bouton option 2) */
label:nth-child(4):hover {
    animation: label2 3s infinite linear;
}

/* Ne pas oublier la perspective sur le parent */
@keyframes label2 {
    33% {
        transform: translateZ(30px);
    }

    66% {
        transform: translateZ(-40px);
    }

    100% {
        transform: translateZ(0);
    }

    /* avec translateZ chiffre positif devant nous, chiffre négatif l'élément partir loin et 0 c'est l'état normal*/
}

/* Configuration de la class email */
.e-mail {
    text-align: center;
    margin-bottom: 20px;
}

.e-mail input {
    padding: 10px;
    border-radius: 5px;
    outline: none;
    border: 3px solid transparent;
    transition: 0.3s;
    text-align: center;
    font-size: 1.1rem;
    color: var(--color1);
    /* on désigne une largeur mini et maxi à notre input et une largeur de 35% en responsive */
    min-width: 180px;
    width: 35%;
    max-width: 300px;
}

/* Quand l'utilisateur utlilise (il est focus) l'input de type text */
input[type="text"]:focus {
    background: transparent;
    border: 3px solid var(--color2);
    border-radius: 150px;
}

input[type="text"]::placeholder {
    color: var(--color2);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* Configurer le button */
button {
    cursor: pointer;
    background: var(--color2);
    border: none;
    font: size 1.3rem;
    padding: 10px 20px;
    border-radius: 150px;
    margin: 0 auto;
    display: block;
    /* mettre le bouton en block car il est en inline-block et ne peut donc pas être centrer grace à margin auto*/
    transition: 0.4s;
    /* mettre la transition ici et pas dans hover pour qu'elle se fasse en entrée mais aussi en sortie */
}

/* lorsqu'on survole button */
button:hover {
    letter-spacing: 3px;
}

/* Quand on clique sur le button */
button:active {
    transform: scale(1.2);
    background: var(--color1);
    filter: brightness(120%);
    /* au clic le bouton grossi et change de couleur*/
}

/* lorsqu'on survole le bouton et le a doit faire ... */
button:hover+a,
a:hover {
    opacity: 1;
    visibility: visible;
    /* apparait seulement lorsqu'on passe sur le bouton "Valider" */
    transform: translateY(0);
}

/* Configurer le lien a */
a {
    color: var(--color2);
    /* text-decoration: none; pour que le lien ne soit pas souligné */
    text-align: center;
    display: block;
    /* le lien n'est plus inline */
    opacity: 0;
    /* le lien disparait */
    visibility: hidden;
    /* reste invisible lorsqu'on passe sur le lien */
    transform: translateY(20px);
    /* déplace le lien de 20px vers le bas */
    transition: 0.3s;
}

a:visited {
    color: var(--color1);
}

img {
    height: 40px;
    position: absolute;
    filter: drop-shadow(0px 6px 3px rgba(255, 255, 0, 0.6));
    /*ombre jaune du vaisseau*/
    z-index: -1;
    /* avec z-index le vaisseau passe derrière le décor car valeur inférieure */
    animation: spaceship 60s infinite linear;
}

@keyframes spaceship {
    0% {
        top: 2%;
        left: 2%;
        transform: rotate(90deg);
    }

    10% {
        top: 6%;
        left: 30%;
        transform: rotate(95deg);
    }

    20% {
        top: 9%;
        left: 60%;
        transform: rotate(60deg)
    }

    30% {
        top: 0%;
        left: 80%;
        transform: rotate(90deg);
    }

    40% {
        top: 20%;
        left: 120%;
        transform: rotate(110deg);
    }

    50% {
        top: 50%;
        left: 80%;
        transform: rotate(323deg);
    }

    60% {
        top: 90%;
        left: 90%;
        transform: rotate(256deg);
    }

    70% {
        top: 110%;
        left: 50%;
        transform: rotate(237deg);
    }

    80% {
        top: 85%;
        left: 30%;
        transform: rotate(323deg);
    }

    90% {
        top: 50%;
        left: 15%;
        transform: rotate(350deg);
    }

    100% {
        top: 2%;
        left: 2%;
        transform: rotate(90deg);
    }
}

@media screen and (max-width: 635px) and (orientation: portrait) {
    body {
        height: 100vh;
        width: 100vw;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      }

    .grid-container {
        display: grid;
        grid-template-columns: 30% 70%;
    }
}

@media screen and (max-width: 460px) and (orientation: portrait) {
    body {
        height: 100vh;
        width: 100vw;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      }

    .grid-container {
        display: grid;
        grid-template-columns: 40% 60%;
    }
}

@media screen and (max-width: 365px) and (orientation: portrait) {
    body {
        height: 100vh;
        width: 100vw;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      }

    .grid-container {
        display: grid;
        grid-template-columns: 50% 50%;
    }
}
   
/*--------------mode paysage-----------------*/
@media screen and (max-width: 932px) and (orientation: landscape) {
    body {
        height: 100vh;
        width: 100vw;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      }

    .card {
        width: 70%;
    }

    h1 {
        margin-bottom: 10px;
    }

    .polygon {
        height: 80px;
        width: 80px;
    }

    p {
        margin: 10px 0;
    }

    .checkbox-container {
        margin: 10px 0 20px;
    }

    .e-mail {
        margin-bottom: 10px;
    }
}