@charset "utf-8";
/* mise en page CSS */

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

*:focus
{
    outline: none;
}

html, body
{
    overflow-x: clip;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #D9D9D9 #353535;
  }
  
/* Chrome, Edge and Safari */
*::-webkit-scrollbar
{
    width: 1.5vmax;
}

/* width */
::-webkit-scrollbar
{
    width: 1.5vmax;
}
  
/* Track */
::-webkit-scrollbar-track
{
    background: #353535; 
}
   
/* Handle */
::-webkit-scrollbar-thumb
{
    background: #d9d9d9;
    border-radius: 10px;
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
    background: #ffffff; 
}

body
{
    background: url(img/dark-matter.png) repeat;
    background-color: #949494;
    color: #353535;
}

.saira-extra-condensed-regular
{
    font-family: "Saira Extra Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
.saira-extra-condensed-bold
{
    font-family: "Saira Extra Condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.containeur
{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.contenu
{
    display: flex;
    flex-direction: column;
    margin: 0 3vmax 0 3vmax;
    padding: 2vmax;
    background: #d9d9d9;
    border: 1vmax double #d9d9d9;
    border-radius: 1.2vmax;
    background-clip: padding-box;
    box-shadow: .5vmin .5vmin 1.5vmin .5vmin rgba(0,0,0,0.5);
}

.contenu h1
{
    font-size: 5vmin;
    text-align: center;
    border-bottom: .5vmin solid #545454;
    padding-bottom: 2vmin;
}

.contenu h2
{
    font-size: 3vmin;
    margin-top: 2vmax;
}

.contenu p
{
    font-size: 2.5vmin;
    margin-left: 2.2vmin;
}

.contenu ul
{
    font-size: 2.5vmin;
    margin-left: 6vmin;
}

.contact-info
{
    width: auto;
    margin: auto;
    display: inline-block;
    padding: 1.5vmin 2.2vmin 1.5vmin 0;
    background-color: rgba(229, 180, 0, .61);
    border-radius: 1.2vmin;
}

.highlight
{
    display: inline-block;
    padding-right: 2.2vmin;
    background-color: rgba(102, 153, 51, .6);
    border-radius: 1.2vmin;
}

.contenu a
{
    color: #3f668e;
    text-decoration: none;
}

.contenu a:hover
{
    text-decoration: underline;
}

button
{
    color: #353535;
    font-size: 4vmin;
    width: 15vmax;
    border: #d9d9d9 solid 1px;
    background: #d9d9d9;
    z-index: 2;
    cursor: pointer;
}

.buttonH
{
    margin: 3vmax auto -1.8vmin;
    border-radius: 1.2vmax 1.2vmax 0 0;
    box-shadow: 0 0 3vmin rgba(0,0,0,0.8);
    clip-path: inset(-4vmin -4vmin 0vmin -4vmin);
}

.buttonB
{
    margin: -1.8vmin auto 3vmax;
    border-radius: 0 0 1.2vmax 1.2vmax;
    box-shadow: 0 0 3vmin rgba(0,0,0,0.8);
    clip-path: inset(0vmin -4vmin -4vmin -4vmin);
}

.lienRetour
{
    position: relative;
    display: inline-block;
}

/* Effet de soulignement animé sur le texte RETOUR */
.lienRetour::after
{
    content: '';
    position: absolute;
    bottom: 10%; /* Distance sous le texte */
    left: 0;
    width: 0;
    height: .5vmin; /* Épaisseur du soulignement */
    background-color: #545454; /* couleur */
    transition: width 0.2s ease-in-out;
}

button:hover .lienRetour::after
{
    width: 100%;
}