body, * {
    margin: 0;
    padding: 0;
    font-family: "Calibri";
    overflow-x: hidden;
    /*
    Il s'agit ici de modifier le style de base de tout les éléments ( * ), et notamment enlever les marges intérieures (padding) et extérieures (margin) que le navigateur applique de base aux éléments.
    */
}

.alert-responsive{
    display: none;
}

@media screen and (max-width:450px){
    .alert-responsive {
        display: block;
        width: 100vw;
        height: 100vh;
        position: fixed;
        background: linear-gradient(112.74deg, #e09569 1.67%, #C41FDF 83.77%);
        font-size: 5vw;
        text-align: center;
        color: black;
        z-index: 10;
    }
    .alert-responsive p{
        font-weight: bolder;
        width: 80%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.italic {
    font-style: italic;

    /*
    Il s'agit d'une classe générique pour mettre un texte en italique. Elle permet d'éviter d'avoir à réécrire à chaque fois ce style.
    */
}

.uppercase {
    text-transform: uppercase;
    /*
    De même, il s'agit d'une classe générique pour mettre un texte en MAJUSCULE. Elle permet d'éviter d'avoir à réécrire à chaque fois ce style.
    */
}

.bold {
    font-weight: bold;
     /*
    De même, il s'agit d'une classe générique pour mettre un texte en GRAS. Elle permet d'éviter d'avoir à réécrire à chaque fois ce style.
    */
}

.button {
    height: 5vw;
    width: 5vw;
    border-radius: 100%;
    font-size: 25px;
    text-align: center;  
    background-color: white;
    color: black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);

    /*
    Cette classe est utilisé par chaque bouton, ayant tous le même style, l'icône est le seul élément à changer d'une page à l'autre (<i>).
    On définit des longueurs (height et width) qui s'adapte à la taille de la fenêtre ici vw (view width) et vh (view height).

    Le font-size est ici utilisé pour définir la taille de l'icone car il s'agit d'un élément : <i></i> (font-awesome). De même, l'attribut : color définit la couleur de l'icône.
    */
}


a {
    text-decoration: none; /*On enlève les décorations de base du lien*/
}


.button a {
    color: black;

    /*
    Ici, il s'agit d'enlever la couleur (bleue) de base des liens.
    */
}

.button_b {
    background-color: black !important;
    color: white !important;

    /*
    Il s'agit ici d'une déclinaison du .button qui modifie le fond et la couleur d'un boutton (!important force l'application du style car déjà défini pour .button).
    */
}

.button_b a {
    color: white;

    /*
    Comme précédement, il s'agit de modifier la couleur du lien.
    */
}

.home-button {
    position: absolute; /* position absolute permet de placer l'élement par rapport aux extrêmités de la page (coin haut gauche/droite,
    coin bas gauche/droite*/
    top: 4%;
    right: 4%;
    /*
    Ainsi, on place l'élément à 4% du bord bas de la page et à 4% de la bordure droite de la page
    */

    /*
    Il s'agit ici d'une classe qui désigne l'ensemble des bouttons renvoyant au menu, ainsi avec position : absolute; on place le boutton par rapport aux extrêmités de la page : ici on le met à 4% à droite de page (référence : côté droit) et on le descend de 4% par référence aux haut de la page. 
    */
}

.pointer {
    cursor: pointer;

    /*
    Il s'agit ici de pouvoir appliquer une classe à des éléments qui n'aurait pas la main qui apparaît sur l'élément (plus facile pour désigner qu'il s'agit d'un objet cliquable).
    */
}

.button i {
    position: relative; /* Permet de positionner le contenu par rapport à une position relative, qui ici correspond à la position initiale de l'objet*/
    top: 45%;
    overflow: hidden; /* Il s'agit ici de désactiver/cacher les barres de scroll de la page (horizontale et verticale)*/
    transform: translateY(-50%);/**/
}
.next-button {
    position: fixed; /*La position fixed marche comme la positon absolute, cependant, si l'utilisateur descend en bas de la page, 
    l'objet le suivra*/
    bottom: 4%;
    right: 4%;
}

h1.head-title {
    margin: 2% 2%;
}

/*

AUPARAVANT, il s'agissait de définir des classes génériques pour des éléments qui pouvaient se répéter sur chaque page, maintenant il s'agit de définir le style pour des éléments précis sur chaque page.

A NOTER : chaque page est définie par une classe particulière (en général, le nom de la page). Exemple : <body class="accueil">

*/

/*
    Page : Index.html (ACCUEIL)
*/

body.index{
    background: url('../ressources/img/lombard-street-sf.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: white;
}

/* body.index, body.index div, body.index h1, body.index h2{
   transition-duration: 0.8s;
} */

body.index::before{ 
    /* :before permet de créer un pseudo-élément, un élément enfant de la page, ainsi il permet d'éviter de créer une div et il prendra les tailles de l'élement parent (width: 100%; height:100%;)
    
    POUR CREER UN PSEUDO-ELEMENT, il faut :
     - définir un contenu (qui peut être vide) : content: " ";
     - définir une position relative aux extrêmités de la page (absolute, fixed, ...)
    */
    position: absolute;
    content: " ";
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom left, #b47c86, #979585);
    /* On crée ici un dégradé de couleurs.*/
    opacity: 0.1;
    z-index: -1; /*Z-index permet de gérer le positionnement des éléments sur une page : premier-plan, second-plan, ... Ainsi, on le positionne de façon à se placer sur l'image du body mais en dessous des textes.*/
}

body.index div.middle{  
    position: absolute;
    top: 30%;
    width: 100%;
    /*
    Etant destiné à se situer au milieu, on l'y place en prenant compte de la taille des textes
    */
}

body.index div.middle div.text, body.index div.middle div.button {
    position: relative; /*Ici on positionne l'élément par rapport à sa position d'origine*/
    left: 5%;
}

body.index div.middle h1.title {
    font-size: 12vh; /*Ici vh est une unité qui s'adapte à la taille du viewport, fenêtre (vh = viewport height)*/
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /*text-shadow permet de définir une ombre à un texte*/
}

body.index div.middle h1.title span.italic{
    color: yellow;
    font-size: 9vh;/*Ici vh est unité qui s'adapte à la taille du viewport, fenêtre (vh = viewport height)*/
}

body.index div.middle h6.subtitle {
    font-size: 4vh;/*Ici vh est unité qui s'adapte à la taille du viewport, fenêtre (vh = viewport height)*/
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-weight: normal;
}

body.index div.middle .button {
    margin-top: 2%;
    margin-left: 2%;
    transition-duration: 0.5s;
    /* transition-duration permet de définir la durée avec laquelle le style va s'appliquer*/
}


body.index div.bottom{  
    position: absolute;
    bottom: 3%;
    width: 100%;
}

body.index div.bottom div.menu ul{
    font-size: 3.5vh;
    /*vh est une unité qui prend en compte la hauteur de la page*/
}

body.index div.bottom div.menu ul li{  
    display: inline-block; /*Cet attribut permet de mettre les éléments en liste horizontale, si l'élement dépasse de la page alors il revient à la ligne et l'élement suivant sera sur la même ligne. Ainsi de suite, ...*/
    margin: 1% 1%;
    position: relative;
    left: 29.5vw; /* On prend en compte un positionnement en fonction de la longueur (width) de la page*/
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

body.index div.bottom div.menu ul li a{  
    color: white;
}

body.index div.bottom div.menu ul li a:hover{  
    color: yellow;
}


/*
----------------------------------------------------------------------------------------------------------------------------------------

/////////////////////////////////////
////PAGE : acteurs.html (Acteurs)
////////////////////////////////////
*/

body.acteurs div.bottom div.acteur {
    width: 29%;
    height: 80vh;
    background-color: black;
    display: inline-block;
    margin: 2% 2%;
    background-size: cover;
    transition-duration: 2s;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

body.acteurs div.bottom div.acteur p{
    position: absolute;
    color: white;
    width: 33%;
    height: 80vh;
    font-size: 100px;
    word-break: break-all; /**/
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.8;
    overflow-y: hidden; /*On cache les éventuelles barres de scroll verticale */
}


/*
    PAGES : dossier /html/acteurs  (Acteur)
    Style commun aux différentes pages de chaque acteurs contenues
    dans le dossier : acteurs
*/

body.acteur_page .paragraphe {
    width: 40%;
    margin: 2% 2%;
    font-weight: 100;
}

body.acteur_page .center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

body.acteur_page {
    background-color: antiquewhite;
}

body.acteur_page ul li {
    display: inline-block;
    margin: 2% 2%;
}

body.acteur_page ul li:first-child { /*:first-child permet de sélectionner le premier élément enfant de la liste*/
    width: 29%;
    height: 80vh;
    background-color: black;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

body.acteur_page ul li:last-child {/*:last-child permet de sélectionner le dernier élément enfant de la liste*/
    position: absolute;
    width: 60%;
    height: 80vh;
}

body.acteur_page ul li:last-child p{
    display: inline-block; 
}


/*
-------------------------------------------------------------------------------------------------------------------------------------

/////////////////////////////////////// 
////PAGE : chiffres.html (chiffres)
//////////////////////////////////////
*/

body.chiffres div.bottom div.chiffres_list {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    /*
    Les 3 lignes précédentes permettent d'aligner l'élément, ici horizontalement (x). TranslateX est une autre manière de créer un
    déplacement de l'objet.
    */
    margin-top: 5%;
    width: 96%;
}

body.chiffres div.bottom div.chiffres_list div.chiffre {
    position: relative;
    left: 1.5%;
    display: inline-block;
    width: 30%;
    height: 30vh;
    background-color: tomato;
    margin: 1.5% 1%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transition-duration: 0.5s;
}

body.chiffres div.bottom div.chiffres_list div.chiffre:hover {
    /*Ce style s'appliquera lorsque la souris passera sur l'élement = :hover*/
    background-color: violet;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
    transition-duration: 0.5s;
}

body.chiffres div.bottom div.chiffres_list div.chiffre div.text {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10%;
    width: 90%;
    font-size: 1.2em;
    color: white;
}


body.chiffres div.bottom div.chiffres_list div.chiffre div.icon{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20%;
}


body.chiffres div.bottom div.chiffres_list div.chiffre div.icon i{
   font-size: 2.5em;
   overflow-y: hidden;
   color: #fff2da;
}


/*
-------------------------------------------------------------------------------------------------------------------------------------

/////////////////////////////////////// 
////PAGE : histoire.html (histoire)
//////////////////////////////////////
*/


body.histoire div.bottom .block {
    display: table-cell;
    /*Permet de reproduite l'alignement de cellules d'une même ligne dans un tableau : ainsi elles auront la même hauteur, ...*/
}

body.histoire div.left {
    width: 40%;
}

body.histoire div.right {
    width: 58vw;
}

body.histoire div.top {
    /*Position fixed permet de faire descendre le menu lorsque l'utilisateur décide de descendre dans la page*/
    position: fixed;
    width: 100%;
    background-color: white;
    z-index: 2; /*Permet de gérer le positionnement des éléments (arrière-plan, premier-plan mais ici avec des chiffres)*/
}

body.histoire div.top div.button {
    top: 14%;
}

body.histoire div.bottom {
    position: relative;
    margin-top: 13.5vh;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

body.histoire div.left {
   min-height: 80vh;
   height: 85vh;
}
body.histoire div.left div.illustrations-list{
    position: absolute;
    width: 100%;
    min-height: 80vh;
}


body.histoire div.left div.img-illustration{
    height: 100vh;
    width: 30%;
    margin: 6% 6%;
    box-shadow: 0 0 20px rgb(0 0 0 / 40%);
}

body.histoire div.right ul {
    margin-left: 8%;
}

body.histoire div.right ul li {
    margin-top: 4%;
    margin-bottom: 4%;
    width: 60%;
    height: auto;
    margin-left: 7%;
}

body.histoire div.right ul li::before{ /*Ce pseudo élément correspondra aux ronds qui apparaissent sur la frise*/
    content: " ";
    position: absolute;
    height: 3.5vh;
    width: 3.5vh;
    /* left: 39.5vw; */
    margin-left: -7vh;
    border-radius: 500%;
    background-color: white;
    box-shadow: 0 0 10px rgb(0 0 0 / 40%);
    z-index: 2;
    margin-top: 0.6%;
}

body.histoire div.right ul li::after{ /*Ce pseudo élément correspondra au trait qui forme la frise, en fait, chaque élément
    aura un trait affiché ce qui permettra de donner l'illusion que la ligne est continue*/
    /*Tout comme :before, :after est un pseudo-élément (voir plus haut)*/
    content: " ";
    position: absolute;
    height: 22%;
    width: 0.25%;
    left: 44.9%;
    margin-top: -7%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}


/*
-------------------------------------------------------------------------------------------------------------------------------------

////////////////////////////////////////////////// 
////Partie concernant popup bot sur page d'accueil
////            (index.html)
//////////////////////////////////////////////////
*/

.bot-button {
    position: fixed;
    right: 4%;
    bottom: 4%;
}

div.popup-bot {
    display: none;
    position: absolute;
    bottom: 18%;
    right: 2%;
    height: 50vh;
    width: 19.1vw;
    background-color: white;
    color: black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}

div.popup-bot div.texts-form{
    height: 85%;
    width: 100%;
}

div.popup-bot div.texts-form div.text{
    width: 85%;
    padding:6% 4%;
    border-radius: 15px;
    margin-top: 4%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

div.popup-bot div.texts-form div.user{
    background-color: whitesmoke;
 }

 div.popup-bot div.texts-form div.bot{
    background-color: rgb(199 199 236);
 }


 div.popup-bot div.inputs {
     margin-top: 2%;
 }

 div.popup-bot div.inputs input {
     padding-top: 1%;
     border: none;
     outline: none; /*Désactivation du style qui s'applique lorsqu'on clique sur un input (la bordure s'encadre)*/
     margin-right: 0;
     margin-left: 0;
 }

 div.popup-bot div.inputs input.text{
    width: 13.5vw;
    height: 6vh;
    padding-left: 10px;
    background-color: whitesmoke;
 }

 div.popup-bot div.inputs input.submit{
    width: 4.4vw;
    height: 6.5vh;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
 }
 div.popup-bot div.inputs input.submit:hover{
    background-color: cornflowerblue;
 }