/* Nous cassons (reset) l'effet d'héritage pour toutes les balises susceptibles d'être concernées */
html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
}


/* GESTION DES 3 FONDS D'ECRAN */

body.initial-background {
    background-image: url("img/1.Background-accueil.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
body.quiz-background {
    background-image: url("img/2c.Background-questions.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
body.replay-background {
    background-image: url("img/3.Background-finalscore&rejouer.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}



/* div INTRO */
#intro{
    width: 90%;
    font-family: "Roboto";
    font-size: 1em;
    color : white;
    font-style: italic;
    text-align: center;
    margin-left: 2em;
    margin-right : 2em;
    padding: 15px;
    background-color: rgba(211, 229, 235, 0.25); /* Bleu clair avec 50% de transparence */
    box-shadow: 10px 10px 20px rgba(146, 178, 237, 0.7); /*Ombre bleu clair avec 70% de transparence*/
    border-radius: 15px;
}

#quiz-container{
    margin: 0, 150px;
}
#options-container{
    margin: 20px 6px 40px 6px;
    padding: 20px 120px;
}
#options-container button{
    padding: 12px;
    font-size: 1.5em;
    font-weight: bold;
}

h1{
    text-align: center;
    font-family: "Audiowide", sans-serif;
    /* font-family: "Sixtyfour Convergence", sans-serif; */
    color : orange;
    font-size: 3.5em;
    text-shadow : #a7c728;
}

.flex-row{
    display: flex;
    flex-direction: row;
}
.flex-column{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* div Questions */
#question-text{
    font-family: "Roboto";
    font-size: 2em;
    color: antiquewhite;
    margin : 1em 2em;
    padding : 1em;
    /* border-bottom: 7px double #bae705;
    background-color: rgba(8, 84, 159, 0.5);
    border-radius :0 15px 0 15px;
    box-shadow: 10px 10px 25px rgb(8, 115, 229); */
    }
.question{
    display: flex;
    flex-direction: column;
}

#container-suivant-timer{
    position : relative;
    display: flex;
    flex-direction: row;
    margin-top: 4em;
    margin-bottom : 0.50em;
    padding: 0.25em 0.5em;
    justify-content:space-between;
    align-items: center;
    /* padding: 2em;
    justify-content: space-between; */
}
#container-suivant-timer > div:first-child { /* Cibler le conteneur du bouton "Suivant" */
    /* Styles pour aligner le bouton à gauche */
}

#warningTimerContainer {
    /* Retirer le positionnement absolu ici */
    width: auto;
    text-align: center;
    margin-top: 0; /* Réinitialiser la marge haute */
    margin-left: 10px; /* Ajouter un peu d'espace entre le bouton et le GIF */
}

/* #warningTimerContainer{
    /*position: absolute;  Positionnement absolu par rapport à #container-suivant-timer */
   /* top: 0;  Aligner le haut du GIF avec le haut du conteneur parent */
   /*  left: 50%; Placer le bord gauche du GIF au centre du conteneur parent */
    /*transform: translateX(-50%);  Décaler le GIF de moitié de sa largeur vers la gauche pour le centrer horizontalement */
    /* Autres styles que vous aviez déjà */
    /*width: auto;  Ajuster la largeur au contenu */
    /*margin-top: 65px;  Ajuster la marge pour l'éloigner du haut si nécessaire */
    /*text-align: center; Centrer le GIF à l'intérieur de son conteneur */

    /* width: 40%;
    font-size: 2em;
    font-weight: bold; */
    /* width: 50% auto;
  
    text-align: left;
    width: 40% auto;
    margin-top: 70px; 
}*/

#warningTimer {
     /*position: absolute; Positionnement absolu par rapport à #container-suivant-timer */
    /*top: 0;  Aligner le haut du compteur avec le haut du conteneur parent */
    /*left: 70%;  Positionner le bord gauche du compteur à 70% de la largeur du conteneur parent (ajuster selon vos besoins) */
   /* transform: translateX(-50%);  Ajuster le décalage horizontal pour centrer approximativement par rapport à sa position */
    /* Autres styles que vous aviez déjà */
    color: darkblue;
    font-size: 2em;
    font-weight: bold;
    font-family: "Roboto";
    padding: 8px;
    border-radius: 50px;
    border: 6px solid #a7c728;
    background-color: violet;
    text-align: center; /* Centrer le texte à l'intérieur du compteur */
    width: auto; /* Ajuster la largeur au contenu */
    /*margin-top: 65px;  Conserver la même marge haute pour l'alignement vertical */
    margin-top: 0; /* Réinitialiser la marge haute */
    margin-left: 10px; /* Ajouter de l'espace entre le GIF et le compteur */
}

/* #warningTimer{
    color: darkblue;
    font-size: 2em;
    font-weight: bold;
    font-family: "Roboto";
    padding: 8px;
    border-radius: 50px;
    border: 6px solid #a7c728;
    background-color: violet;
    text-align: left;
    width: 30% auto;
    margin-top: 70px;
} */

/*  BOUTONS */

/* Bouton "Décollage !" */
#start-button{
    margin: 1em auto;
    text-align : center;  /* centre le texte à l'intérieur du bouton */
    padding : 20px 8px;
    font-size: 2.5em;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-shadow: -3px -3px 5px #953ce2;
    background-color:#a7c728;
    width: 30%;
    border-radius: 0 10px 0 10px;
    box-shadow: 12px 12px 10px violet;
}
/* Bouton "Suivant" */
#next-button{
    margin: 20px 0 0 10px;
    padding : 8px 8px;
    font-size: 1.75em;
    background-color:#953ce2;
    width: 100%;
    box-shadow: 12px 12px 10px #bae705;
    border-radius: 0 10px 0 10px;
}

/* Bouton "Rejouer"*/
#replay-button{
    margin: 100px 70px 100px 10px;
    text-align : center;  /* centre le bouton */
    padding : 15px 10px;
    font-size: 2.35em;
    letter-spacing: 3px;
    font-weight: bold;
    background-color:rgba(221, 97, 221, 0.878);
    border: 8px dotted rgba(211, 220, 50);
    color:#386e11;
    width: 80%;
    border-radius: 15px;
    cursor: pointer;
    text-shadow: 1px 1px 5px yellow;
    box-shadow: 2px 2px 10px yellow;
    animation : pulse 1s infinite;
} 
@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform : scale(1.05);
    }
    100%{
        transform : scale(1);
     }
}


/* Bouton Options */
.boutonOptionsCSS{
    margin : 10px;
    padding : 12px;
    background-color: rgba(95, 158, 160, 0.5);
    color : rgb(36, 36, 148);
    border-radius : 10px;
    cursor :pointer;
    box-shadow: 0 4px 4px orange;
    transition: transform 0.2s ease-in-out; /* animation */
}
.boutonOptionsCSS:hover {
    transform: scale(1.05) translateY(-5px); /* Agrandissement et léger mouvement vers le haut */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée */
  }


/* PROGRESS BAR 🚀 */

/* #progressFusee{
margin-top : 230px;
} */

#progress-bar-container {
    position: relative;
    width: 80%;
    height: 40px;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.915);
    border: 4px solid greenyellow;
    box-shadow: -10px -10px 10px #dce705;
    /* box-shadow: 8px 8px -8px -8px 10px greenyellow; */
    border-radius: 5px;
    margin-top: 60px;
    margin-left: 40px;
    margin-bottom: 30px;
    /* margin-top: 200px 10px; */
}

#progress-bar {
    width: 0%;   /* on demarre la barre à 0 puis elle s'élargira après chaque réponse */
    height: 50px;
    /* margin: 15px, 0; */
    background-image: linear-gradient(to right, rgba(150, 100, 200, 0.5), hsl(262, 39%, 49%)); /* Dégradé du violet clair au violet foncé */
    /* background-color: hsl(262, 39%, 49%);  Couleur de la barre de progression */
    border-radius: 5px;
    transition: width 0.3s ease;

    /* margin-top: 200px 10px;
    justify-content: space-between;
    position: relative; */
}
#fuseeProgress{
    position: absolute;
    width: 170px;
    height: 150px;
    bottom: -55px; /* position verticale de la fusée */
    left: -20px; /* Position initiale à gauche */
    /* width: 30px; Ajustez la taille de l'image */
    transition: left 0.3s ease; /* Ajoute une transition pour un mouvement fluide */
}
#progress-bar-text {
    position:absolute;
    left: 0px;
    /* top: 70px;  Positionnez la div sous la barre de progression */
    width: 100%;
    height: 20px; /* Ajustez la hauteur selon vos besoins */
    background-color: transparent; /* Supprimez la couleur de fond */
    /* 
    progress-bar-text a un positionnement absolute.
    Cela signifie que sa position est déterminée par les propriétés top, left, bottom et right,
    et non par les marges. Margin-top, etc, ne peuvent pas fonctionnner.
    */
}
#questionCounter{
    position: absolute; /* Position absolue pour le positionner par rapport à la barre de progression */
   top: 150%;
   left: 5px; /* Position initiale à gauche */
   bottom: -25px; /* Positionnez le texte en dessous de la barre de progression */
   font-family: "Roboto";
   font-size: 1.25em;
   font-style: italic;
   color: #e29300;
   white-space: nowrap; /* Empêcher le texte de passer à la ligne */
}

.hidden{
	display: none;
}


/* #warningTimer{
    color:lightseagreen;
    font-size: 2em;
    font-weight: bold;
    font-family: "Roboto";
    padding: 5px;
    border: 1px solid blue;
    text-align: left;
    width: 50%;
} */

/* STYLES DERNIERE PAGE */

#dernierePage{
    margin: -300px;
    align-items: center;
}

#score-correct-answer{
    font-family: "Audiowide", sans-serif;
    /* font-family: "Roboto"; */
    color: white;
    font-size: 3.5em;
    padding : 8px;
    /* border: 4px solid blue; */
    text-align: center;
}

#messageJoueur{
    width : 60%;
    font-family: "Roboto";
    font-size: 2em;
    margin : 10px 20px;
    color :aliceblue;
    padding : 14px;
    border: 4px solid hsl(262, 39%, 49%);
    border-radius: 10px;
    text-align: center;
    background-color:rgba(94, 146, 243, 0.5);
}


#dernierePage #progress-bar-container {
    margin-top: 350px; /* Ajustez cette valeur pour déplacer la barre de progression dans #dernierePage */
    margin-bottom : 200px;
    margin-left: 150px;  /* Pour centrer horizontalement dans #dernierePage si besoin */
    margin-right: 150px;
}

#dernierePage #fuseeProgress {
    bottom: -115px;
}

#dernierePage #questionCounter {
    bottom: -85px;
}