/* @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  z-index: 1;
}
h1{
    font-family: 'Permanent Marker', sans-serif;
    font-size: 2em;
    font-weight: 200;
    text-shadow: 3px 3px 5px rgb(90, 90, 90);
}
body{
    position: relative;
    overflow-x: hidden;
    /* height: 100%; */
    /* font-family: 'ubuntu', sans-serif; */
    /* background: linear-gradient(353deg, rgba(209,209,245,1) 0%, rgba(241,241,255,1) 39%, rgba(255,255,255,1) 100%); */
    /* background-color: rgb(224, 236, 255);   Bleu Clair  */
}
a {
    text-decoration: none;
}

.section {
    position: relative;
    /* display: inline-block; */
    left: 50%;
    top: 0px;
    transform: translateX(-50%); 
    width: 70%;
    margin-bottom: 5%;
    padding-top: 0px;
    margin-top: 0px;
    height: fit-content;
}

p {
    padding-bottom: 5%;
    font-size: 0.9em;
    /* font-weight: 800; */
}
/* li {
    font-size: 0.9em;
} */

.groupe_textes {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* display: inline-block; */
    height: 50%;
    width: 80%;
    padding: 1% 5% 1% 5%;
    font-weight: bold;
    vertical-align: top;
    font-size: 0.9vw;
}
.texte_impair {
    padding-left: 15%;
    text-align: justify;
    padding-top: 2%;
    opacity: 0;
    transition: 2s;
}
.texte_pair {
    padding-right: 15%;
    padding-top: 2%;
    opacity: 0;
    transition: 2s;
}
.anim_texte_impair {
    opacity: 1;
    transform: translateX(20%);
}
.anim_texte_pair {
    opacity: 1;
    transform: translateX(-20%);
}
.texte {
    margin: 20px 0px 20px 0px;
}
h2 {
    padding: 0px;
    font-size: min(120%, 22px);
    /* text-align: left; */
}
h5 {
    font-weight: normal;
}


/* ==== Code spécifique 'A Propos' ==== */
#image_code {
    position: relative;
    display: inline-block;
    width: 35%;
    border-radius: 20px;
    box-shadow: 0px 0px 10px black;
    overflow: hidden;
}
.titre {
    /* padding: 0px 3%; */
    width: fit-content;
    overflow: hidden;
}
#ligne {
    position: relative;
    width: 100%;
    animation: appear 1s ease-in;
    border: 3px solid rgb(82,123,204);
}
@keyframes appear {
    0% {
        transform: translateX(-110%);
    }
    50% {
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(-5%);
    }
}

/* ====== Gestion des bulles ========== */
.box_info_index {
    font-family: "poppins", sans-serif;
    position: absolute; /* Au lieu de Absolute
    right: -5px;  /* Valeur correcte pour que cela fonctionne normalement */
    /* right: 400px; */
    padding-top: 10px;
    top: 100px;
    right: 60px;
    width: 200px;
    height: 110px;
    max-height: 600px;
    border: 7px double rgba(56, 106, 205, 0.9);
    /* border-radius: 20px 0px 20px 0px; */
    border-radius: 20px;
    text-align: center;
    font-size: 11px;
    color: black;
    /* background: -webkit-radial-gradient(top left, rgba(255, 24, 24, 0.9), #FFFFFF); */
    /* box-shadow: -5px 12px 28px 6px #1c1c1c; */
    box-shadow: -3px 4px 8px rgba(0, 0, 0, 0.7);
    /* animation: 0.5s ease-out 0s 1 slideInFromRight forwards;   animation du tiroir */
    animation: 0.3s pop_in linear forwards;
    line-height: 15px;
    transition: 0.3s;
    /* opacity: 0.7; */
    z-index: 0;
}
.pop_out {
    animation: 1s ease-out 0s 1 pop_out
}

@keyframes pop_in {
  0% { transform: scale(0.4); }
  25% { transform: scale(0.9); }
  50% { transform: scale(0.8); }
  75% { transform: scale(0.9); }
  100% { transform: scale(0.8); }
}
@keyframes pop_out {
    0% { transform: scale(0.8); }
    5% { transform: scale(0.9); }
    15% { transform: scale(0); }
    100% { transform: scale(0); }
}