html{ 
    background-color: rgb(158, 202, 210);
    /*background-color: white; /* arrière plan (la page) en blanc */
    /*background-color: black;*/
}

@font-face{
    font-family: "Bigilla";
    font-style: normal;
    src: url('Bigilla.otf');
}


@font-face{
    font-family: "Bigilla";
    font-style: bold;
    src: url('Bigilla-Bold.otf');
}

@font-face{
    font-family: "Montserrat";
    font-style: thin;
    src: url('Montserrat-Thin.ttf');
}

body{
    font-family: "Bigilla", Montserrat;
    
}

h1{ /* titre de niveau 1 (la puissance la plus élevée) */
    font-family: "Montserrat";
    font-size: 35px; /* taille de la police */
    /*font-family: 'Montserrat', sans-serif; /* choix de la police */
    font-weight: bold; /* typographie en gras */
}

a{
    text-decoration: none; /* enlever les réglages par défaut des liens */
    color: white; /* application de la couleur au lien */
}


.arriere-plan{
    display: block;
    position: absolute;
    /*background-image: url(images/fondplante.png);*/
    margin: auto;
    z-index: 1;

}

.header-logo {
    display: block;
    z-index: 3;
    /*font-size: 21px; /* taille de la police*/
    width: 18%;
   /* margin-left: 2%;*/
   margin: auto;
} 
 

.header-nav { /* appeller les liens qui sont dans le header-nav*/
    display: block;
    text-align: center;
    font-size: 15px; /* taille de la police*/
    font-family: 'Montserrat', sans-serif;/* typographie */
    /*font-weight: lighter; /* typographie fine */
    /*text-align: right;  aligner le texte à droite*/
    padding: 10px;

}

.header-nav a:hover, .lien:hover{ /* lecture en cascade : changement de couleur au survole*/
    color: black; /* Bleu des mers du sud */
    transition: .8s; /* temps d'apparition de la couleur */
/*  font-style: italic; /* style de police en italique*/
/*  text-align: center;*/
}


.header-title{
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    /*display: block;*/
    margin-top: 3%;
    text-align: center;
    font-family: 'Bigilla', sans-serif;/* typographie */
    font-style: thin;
    position: fixed;
    font-size: 100px;
    /*text-align: right;*/
    opacity: 0.2;
 
}

.justine{
    z-index: 3;
    margin-left: -150%;
    grid-column: 3/ 3;
}

.gendreau{
    z-index: 10;
    margin-left: -210%;
    grid-column: 4 / 4;
}



.menu{
    
}


/* ancien menu */
/*.header{
/*    grid-column: 2 / 4;
/*    display: flex; /* gérer en remplissant automatiquement l'espace dans la grille */
/*    justify-content: space-between; /*disposer toutes les "class header" de manière régulière le long de l’axe principal*/
/*    /*align-items: baseline; /*disposer toutes les "class header" de manière à être toutes alignées*/
/*    padding-left: 40px;
/*    padding-right: 40px;
/*    padding-top: 0px;
/*    /*background-image:url(images/fond9.png); /* bandeau */
/*}*/







.grid{ /* appeler la class "grille"*/
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr; /* Découper la page en colonne : 1 colonne(1largeur), 1 colonne (2largeurs); 1 colonne (2largeurs); 1 colonne (1largeur) ; */
    grid-column-gap: 0px; /* cela permet de définir l'espacement entre les colonnes (en pixel) de la grid*/
}

.left{ /*Colonne de gauche */
    z-index: 2;
    grid-column: 2 / 3; /* test */
}
.right{ /*Colonne de droite */
    z-index: 4;
    grid-column: 3 / 4; /* test */
}

.images{ /* division de la grille en 4 colonne pour insérer les images*/
    grid-column: 2 / 4; /* les images prennent 2 largeurs sur quatre*/
}

video{
    display:block; /* Affichage en bloc indispensable avec le "grid" (avec un saut de ligne avant et après) */
    width: auto;
    height:auto;
    max-width: 100%;
    margin-top: 34px;

}

img{
    display:block; /* affichage en bloc (possible de régler le border grâce au "block") */
    width: auto; /* largeur auto calculé en fonction de conteneur */
    max-width: 100%; /* taille de l'image */
    margin-top: 34px; /* réglage haut extérieure */
}


p{
    font-size: 15px; /* taille de la police*/
    font-weight: lighter; /* graisse fine de la typo*/
    line-height: 20px; /* espacement en haut et en bas de la typo*/
    font-family: 'Chivo', sans-serif; /* choix de police  */
}

/*----- rotation = premiere feuille droite ------*/
.rotation_1D{
    -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
} 
.rotation_1D:hover {
    -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
  margin-left: 6%;
}

/*----- rotation = toutes les feuilles à droite ------*/
.rotation_D{
    -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
} 
.rotation_D:hover {
    -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg); 
}

/*----- rotation = premieres feuilles à gauche ------*/
.rotation_1G{
    -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
} 
.rotation_1G:hover {
    -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg); 
  margin-right: 7%;
}
/*----- rotation = toutes les feuilles à gauche ------*/
.rotation_G{
    -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
} 
.rotation_G:hover {
    -webkit-transform: rotate(15deg);
  transform: rotate(15deg); 
  margin-right: -4%;
}


.container { /* appeller le contenu de la page d'accueil */
    position: relative; /* gérer la disposition de l'image du container en fonction de sa position par défaut*/
    width: 100%; /* largeur */
}


.overlay { /* réglages du contenu qui sera en survole : page d'accueil  */
    position: relative; /* gérer la disposition du survole (affichage bleu) en fonction de la position dite absolute (soit à partir du bord du bloc précédent)*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%; /* hauteur */
    width: 100%;/* largeur */
    opacity: 0; /* initial */
    transition: .6s; /* temps d'apparition de la couleur */
    /*background-color: rgba(187, 210, 225, 0.85); /* RGBA : A=transparence ; */

}



.container:hover img{ /*Ombre porté*/
       filter:drop-shadow(7px 7px 7px white); 
      -webkit-filter:drop-shadow(7px 7px 7px white);
}

.container:hover .overlay { /* réglage du survole : page d'accueil */
    opacity: 1; 
}

.text {
    color: rgb(255, 255, 255); /* blanc */
    font-size: 15px; /* taille de la typo */
    font-weight: normal; /* graisse standard de la typo */
    font-family: 'Chivo', sans-serif; /* type de police */
    line-height: 20px; /* espace en haut et en bas de la typo soit 10px audessus et 10px en dessous */
    position: absolute;/* gérer la disposition du survole (affichage bleu) en fonction de la position dite absolute (soit à partir du bord du bloc précédent)*/
    top: 50%;
    left: 35%;
    text-align: center; /* aligner le texte au centre */
  }

.project{ /* petit texte au survole "type de projet" */
    font-weight: lighter;/* graisse fine de la typo */
    color: white; /* couleur noir*/
}

.project-title{ /* titre du projet (page affordante)*/
    margin-top: 90px; /* réglage haut extérieure */
    grid-column: 2 / 4; /* le texte prend 2 largeurs sur 4 */
    font-size: 21px; /* taille de la typo */
    font-family: 'Chivo', sans-serif; /* type de police */
    font-weight: normal; /* graisse standard de la typo */
}
/*.presentation{
    grid-column: 2 / 4;*/
}
.text-right{
    text-align: right; /* aligner le texte à droite */
    grid-column: 4 / 5;
}

.commanditaire{ /* texte explicatif au projet */
    grid-column: 2 / 3; /* le texte apparaît dans la 2ème colonnes (milieu) */
    margin-bottom: 10px; /* réglage bas extérieure */
}

.vidéo{
    grid-column: 3 / 3; /* la vidéo apparaît dans la 3ème colonnes (droite) */
    margin-bottom: 10px;/* réglage bas extérieure */
}



body{
    margin-bottom: 90px;/* réglage bas extérieure */
}