@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

:root {
  --text-color-light: white;
  --text-color-dark: #000;
  --text-color-grey: #444;

  --color-light: white;
  --color-dark: #333333;

  --color-background-01: #005bea;
  --color-background-02: #00c6fb;
  --color-background-03: #FFCD4B;
  --color-background-04: #FF7676;
  --color-background-05: #ef303a;
  --color-background-dark: #333333;
  --color-background-light: #FFF;
  
  --color-mark-01:#6a11cb;
  --color-mark-02:#0075fc;
  
  --button-color-grey: #888;
  --button-color-greylight: #999;

  --font-titles: 'Anton', sans-serif;
  --font-text: 'Open Sans', sans-serif;
  }

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

 html {
   margin: 0;
   padding: 0;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-color: var(--color-light);
 }

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: var(--font-titles);
  color: var(--text-color-light);
  font-size: 1em;
  
 }

a {
   color: var(--text-color-light);
   text-decoration: none;
   display: inline-block;
   transition: zoom-light 2s ease;
 }

a:hover {
   text-decoration: underline;
   animation: zoom-light .5s 1;
 }
 
 @keyframes zoom-light {
    50% { transform: scale(1.01); }
    100% { transform: scale(1); }
  }

header, main, article, aside, figcaption, figure, footer, hgroup, main, menu, nav, section, button {
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0;
   margin-top: 0;
   padding: 0;
 }

header {
   width: 100%;
   height: 100vh;
 }

header ul{
   text-align: right;
   padding-top: 1em;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
   font-size: 2em;
 }

header li{
   list-style: none;
   text-transform: uppercase;
   padding-bottom: 1em;
 }

header a {
   margin-right: 2em;
   margin-left: 2em;
 }

header img  {
   max-height: 70vh;
   width: 80vw;
   margin: 2em;
   margin-top: 4em;
 }

 nav {
   height: 4em;
 }

main {

   }

section {
  width: 100%;
  padding: 2em;
  }

section:last-child {
  padding-bottom: 10em;
  }
  
section:last-child h2{
  margin-top: 2em;
  }

section img {
    width: 4em;
    margin-top: 5em;
    margin-bottom: 3em;
  }

.gradient01 {
  background-image: linear-gradient(to top, var(--color-background-01) 0%, var(--color-background-02) 100%);
  }
  
.gradient02 {
  background-image: linear-gradient(to bottom, var(--color-background-03) 0%, var(--color-background-04) 100%);
  }
  
.gradient03 {
  background-image: linear-gradient(to bottom, var(--color-background-04) 0%, var(--color-background-05) 100%);
  }
  
.gradient04 {
  background-image: linear-gradient(to bottom, var(--color-background-05) 0%, var(--color-background-03) 100%);
  }
  
.gradient05 {
  background-image: linear-gradient(to right, var(--color-mark-01) 0%, var(--color-mark-02) 100%);
  }

.gradient06 {
  background-image: linear-gradient(to right, var(--color-background-03) 0%, var(--color-background-04) 100%);
  }
  
mark {
  padding-left: .2em;
  padding-right: .2em;
  border-radius: .3em;
  }
  
h2 mark a {
     color: var(--text-color-dark);
     text-decoration: none;
     transition: transform .5s ease; /* Animation */
   }

h2 mark a:hover {
      color: var(--text-color-dark);
      text-decoration: underline;
      transform: none;
    }

h1 {
  font-size: calc(2em + 8vw);
  color: var(--text-color-dark);
}

h2 {
  font-size: 2.5em;
  font-family: var(--font-text);
  font-weight: 200;
  color: var(--text-color-dark);
}

h3 {
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 2.2em;
  font-weight: 200;
  font-family: var(--font-text);
  color: var(--text-color-dark);
}

hr {
  margin: auto;
  height: 1px;
  width: 50%;
  border: 1px solid var(--color-light);
}

article {
  width: 80%;
  padding: 2em;
  margin-top: 2em;
  text-align: left;
  font-weight: 200;
  border: 5px solid #333;
  border-radius: 25px;
}

article p{
  padding-left: 1em;
  margin-bottom: 1em;
  font-size: 2em;
  font-family: var(--font-text);
  color: var(--text-color-light);
}

.quote{
  text-align: center;
  font-style: italic;
  font-size: 1.5em;
  padding: 1em;
}

.links{
  text-align: center;
  margin-top: 1em;
  font-size: 1.5em;
}

article a{
  color: var(--text-color-light);
}

article p a:hover {
   transform: none;
 }
 
article i{
  padding-right: 1em;
}

a img {
  display: inline-block;
  width: 60vw;
  max-width: 25em;
  margin: 2em;
  border-radius: 2em;
}

article ul {
  display: block;
  margin:0;
  margin-bottom:1em;
  padding:0;
  font-family: var(--font-text);
  text-align: center;
  }

article li {
   list-style: none;
   margin:0;
   padding:0;
   font-size: 2em;
   line-height: 2em;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
  }

article li i {
  font-size: .3em;
  vertical-align: text-top;
  }

article li a {
    color: var(--text-color-light);
    text-decoration: none;
   }
  
article li a:hover {
    text-decoration: underline;
    transform: none;
   }
   
article figure {
  text-align: center;
 }
 
article figcaption {
   font-family: var(--font-text);
  }

article figcaption a:hover {
   transform: none;
  }

button {
  background: transparent;
  border: none;
 }
 
.certificson {
    width: 100%;
  }
  
.certificson img{
    width: 15vw;
    min-width: 25em;
  }
  
.certificson h1{
    font-size: calc(2em + 3vw);
  }
  
.certificson article{
    margin-bottom: 10em;
  }

.top {
  padding-top: 5em;
}

footer {
	margin-top: auto;
	height: 15em;
	margin: 0;
	padding: 0;
	background-color: var(--color-background-dark);
	font-size: 1em;
 }

footer ul {
	text-align: right;
    padding-top: 1em;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

footer li{
   list-style: none;
   padding: 1em;
 }
 
 footer img{
    height: 2em;
  }
  
.formulaire {
  display: flex;
  justify-content: center;
  }
  
  form {
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  }
  
  input[type="text"],
  input[type="email"],
  textarea {
  font-family: var(--font-text);
  width: 50vw;
  padding: .3em;
  border-radius: .5em;
  box-shadow: none;
  margin-bottom: 10px;
  font-size: 2em;
  }
  
  form label {
  text-align: center;
  padding: 1em;
  font-size: 2em;
  }
  
  input[type="submit"] {
  font-family: var(--font-titles);
  color: var(--text-color-light)
  text-align: center;
  display: block;
  cursor: pointer;
  font-size: 2em;
  outline: 2px solid var(--text-color-grey);
  border-radius: 2em;
  padding: .5em;
  background-image: linear-gradient(to right, var(--color-mark-01) 0%, var(--color-mark-02) 100%);
  }
  
  input[type="submit"]:hover {
  background-image: linear-gradient(to right, var(--color-mark-01) 0%, var(--color-mark-02) 80%);
  }
  
/* Secret */

#handshake-container {
    width: 50vw;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto; /* Pour centrer horizontalement */
}

#handshake {
    font-size: 5rem;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#countdown {
    font-size: 5rem;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

#your-turn {
    opacity: 0;
    font-size: 2rem;
    transition: opacity 1s ease-in-out;
    margin-top: 20px; /* Ajuster selon vos besoins */
}

#replay-button {
    opacity: 0; /* Bouton invisible au début */
    font-family: var(--font-titles);
    color: var(--text-color-light);
    text-align: center;
    display: block;
    cursor: pointer;
    font-size: 2em;
    outline: 2px solid var(--text-color-grey);
    border-radius: 2em;
    padding: .5em;
    background-image: linear-gradient(to right, var(--color-mark-01) 0%, var(--color-mark-02) 100%);
    margin: 20px auto; /* Centrer horizontalement */
    transition: opacity 1s ease-in-out; /* Ajout d'une transition */
}

.handshake-bounce {
    animation: bounce 1s 3;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}
 
/* media queries */
 
 @media (max-width: 1024px) {
   
     section {
     width: 100%;
     padding: .8em;
     }
 
    article {
       width: 100%;
       text-align: center;
       padding: 1em;
     }
     
     article p{
       padding-left: 0;
     }
     
     .certificson img{
       width: 70vw;
       min-width: 5em;
     }
     
     input[type="text"],
     input[type="email"],
     textarea {
     width: 100%;
     }
 
    }