/*PAGE DE STYLES CSS*/

/*INFLUE TOUT LE SITE WEB*/
* {
    margin: 0;
    box-sizing: border-box;
}

/*INFLUE TOUTE LA PAGE*/
body {
    /*Toute la page*/
    /*Style de police*/
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif, serif, sans-serif;
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 150%;
    /*Style du site*/
    background-color: #e7b23c;
    color: black;

}

/*LE HEADER - TOUTES LES PAGES*/
/*LE HEADER - TOUTES LES PAGES*/
/*LE HEADER - TOUTES LES PAGES*/

header {
    /*Font différent pour le header*/
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.banniere {
    /*Réglage de l'image en fond du header*/
    background-image: url(https://images.fathomevents.com/image/upload/w_2000,dpr_2,f_auto,q_auto/v1692223567/Events/2023/1815/HG_1920x700_FATHOM_KA_FE-Website_CntrUnit_V1.jpg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.logo {
    /*Logo Hunger Games*/
    height: 150px;
    padding-top: 1%;
    padding-bottom: 1%;
    /*Pour le mettre au milieu de la page :*/
    display: flex;
    justify-content: center;
}

.navheader {
    /*Le style de la barre de navigation*/
    background-color: black;
}

.navheader ul {
    /*Toute la liste (histoire, protagonistes, enquête*/
    display: flex;
    justify-content: center;
    list-style: none;
}

.navheader li {
    /*L'écart entre les 3 boutons */
    margin: 2%;
}

.navheader a:hover {
    /*Couleur quand on pointe la souris dessus*/
    color: rgba(223, 223, 223, 0.785);
}

.navheader a {
    /*Détails police*/
    color: #ca8125;
    text-decoration: none;
    font-weight: bold;
    font-size: 200%;
}


/*IMPLIQUÉES DANS PLUSIEURS PAGES*/

.flex1 {
    /*Flexbox pour les autres pages (hors accueil)*/
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    display: flex;
}

.flexcolumn {
    /*Flexbox version colonne pour deux pages*/
    display: flex;
    flex-direction: column;
    margin-top: 1%;
    margin-bottom: 2%;
}

.justify {
    /*Permet de justifier tout les textes*/
    text-align: justify;
    background-color: #ca8125;
    padding: 1%;
}

.article {
    /*Les textes dans les <article>*/
    text-align: justify;
    background-color: #ca8125;
    padding: 1%;
    margin-left: 1%;
    margin-right: 1%;
}

.hr {
    /*Lignes entre les sections sur histoire et enquête*/
    border: 5px solid #000;
    margin-top: 4%;
}




/*IMPLIQUÉES DANS LA PAGE D'ACCUEIL SEULEMENT*/

.flex {
    /*Flexbox différente avec 3 div*/
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1%;
    display: flex;
    /*Permet de mettre un écart entre les div*/
    gap: 5%;
    width: 97%;
}

.flex div:first-child {
    /*garder la même image en zoomant et éviter que les images deviennent illisibles*/
    flex: 0 0 40%;
}

.carte {
    /* Image de la carte*/
    width: 60%;
}

.districts {
    /*Image des districts*/
    width: 46%;
}

.texte {
    /*Permet d'aligner le texte et l'image de la page d'accueil seulement*/
    text-align: justify;
    margin-top: 1%;
    background-color: #ca8125;
    padding: 1%;
}

.hr2 {
    /*Ligne avec un border plus petit que les autres pour séparer les sections*/
    border: 2px solid #000;
    margin-top: 2%;
}

.reverseflex {
    /*Reverse Flexbox sur la première page pour varier les class*/
    margin-left: 2%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    /*Permet d'inverser l'ordre des div enfants*/
    display: flex;
    flex-direction: row-reverse;
}

.reverseflex div:first-child {
    /*Permet d'avoir une plus grande ligne de texte et de garder la même image en zoomant*/
    flex: 0 0 40%;
    text-align: right;
    margin-right: 1%;
}

.arene {
    /*Image de l'arène*/
    width: 95%;
    height: 100%;
}

.suzannecollins {
    /*Image de Suzanne Collins, réduite et mise au centre*/
    width: 50%;
    margin-top: 1%;
    margin-bottom: 1%;
    /*Pour la mettre au centre*/
    margin-left: 25%;
    margin-right: 25%;
}

/*IMPLIQUÉES DANS LA PAGE HISTOIRE SEULEMENT*/

.h2 {
    /*Permet de bien placer le titre de la page*/
    margin-top: 2%;
    text-align: center;
    font-size: 33px;
}

.hg74 {
    /*Image de gauche sur les 74e Hunger Games*/
    width: 34%;
    margin-bottom: -2%;
    margin-top: -1%;
}

.hg75 {
    /*Image de droite sur les 75e Hunger Games*/
    width: 66%;
    margin-bottom: -2%;
    margin-top: -1%;
}

.revolte {
    /*Le texte sur la révolte qui prend lui toute la place de l'écran*/
    text-align: justify;
    background-color: #ca8125;
    padding: 1%;
    margin: 1%;
    /*Bien espacer de la section du haut*/
    margin-top: 3%;
    margin-bottom: 2%;
}

.mockingjay {
    /*Le son du geai moqueur mis au centre*/
    align-self: center;
}

.hangingtree {
    /*Div de la vidéo de la révolte, réduite pour la mettre plus au centre*/
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 2%;
}

.hangingtree video {
    /*La vidéo prend la place de toute la div*/
    width: 100%;
}

/*IMPLIQUÉES DANS LA PAGE PROTAGONISTES SEULEMENT*/

.personnages {
    /*Les images de protagonistes pour qu'elle ne réduisent pas en zoomant*/
    width: 100%;
    height: 100%;
    min-width: 400px;
}

/*IMPLIQUÉES DANS LA PAGE ENQUÊTE SEULEMENT*/

.aside {
    /*Les couvertures alignées aux textes*/
    margin: 1%;
    margin-top: 2%;
    display: flex;
}

.aside p {
    /*Les textes décalés sur la droite pour éviter que les éléments se touchent*/
    margin-left: 1.5%;
}

.oeuvres {
    /*Les Images réduits dans la div*/
    width: 10%;
    height: 100%;
}

.formulaire {
    /*Le style du formulaire*/
    background-color: #ca8125;
    border: 3px solid #000;
    padding: 1%;
    /*Changement de police pour le formulaire*/
    font-family: 'Viga', sans-serif, monospace;
    width: 100%;
    margin-top: 2%;
}

.bandeannonce {
    /*La div de la bande annonce centrée*/
    margin-left: 1%;
    align-self: center;
}

.bandeannonce video {
    /*Permet de voir encore la vidéo en zoomant*/
    width: 100%;
}

/*LE FOOTER - TOUTE LA PAGE*/
/*LE FOOTER - TOUTE LA PAGE*/
/*LE FOOTER - TOUTE LA PAGE*/

footer {
    /*Le style du footer*/
    background-color: black;
}

.navfooter {
    /*Flex des logos*/
    display: flex;
    align-items: center;
}

.reseauxsociaux {
    /*Positionnement des logos réseaux*/
    display: flex;
    margin-left: 1%;
    width: 25%;
}

.reseauxsociaux img {
    /*Taille des images réseaux*/
    width: 28%;
}

.logofooter {
    /*Positionnement du logo Hunger Games*/
    margin-top: 1%;
    margin-bottom: 1%;
    display: flex;
    /*div du logo mise au milieu*/
    justify-content: center;
    width: 50%;
}

.logofooter img {
    /*Taille de l'image logo Hunger Games*/
    width: 8%;
}

.wikipedia {
    /*Positionnement du logo Wikipédia*/
    display: flex;
    /*droite*/
    justify-content: flex-end;
    margin-right: 2%;
    width: 24%;
}

.wikipedia img {
    /*Taille de l'image Wikipédia*/
    width: 10%;
}


/*Page php*/
.php {
    margin: 2%;
}

/*FIN*/