* {
  box-sizing: border-box;
  /* font-size:calc(0.5rem + 1.5vw); */
}

/* Style the body */
body {
  font-family:  Arial, Helvetica, sans-serif;
  margin: 0;
}

/* En-tête/logo Titre */
.header {
  padding: 2px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  background: #777;
  color: white;
}

.header-nahoon {
  padding: 2px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  background: white;
  color: white;
}


/* Augmenter la taille de la police du titre */
.header h1 {
  font-size: 20px;
}

/* separation */
.separation {
  padding: 10px;
  text-align: center;
  background: #777;
  color: white;
  text-align: left;
}

/* separation */
.separation-black {
  padding: 10px;
  text-align: center;
  background: #777;
  color: black;
  text-align: left;
}

/* branche */
.branche {
  padding: 10px;
  text-align: center;
  color: red;
  font-size: large ;
  font-weight:bold;
}

/* commentaire */
.comment {
  padding: 15px;
  text-align: left;
  color: black;
  /* font-size: large ; */
}

/* generation 01 */
.generation1 {
  padding-left: 25%;
  /*text-align: center;*/
  color: black;
}

/* generation 02 */
.generation2 {
  padding-left: 32%;
  /*text-align: center;*/
  color: black;
}

/* generation 021 */
.generation21 {
  padding-left: 37%;
  padding-right: 1%;
  color: black;
}



/* Conteneur de colonne */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Créez deux colonnes inégales qui se trouvent l'une à côté de l'autre*/
/* Barre latérale/colonne de gauche */
.side {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  background-color: #F4F0E3;

  /*padding: 00px;*/
  text-align: center;
}


/* Colonne principale */
.main {   
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  background-color: #f1f1f1;
  padding-left: 10px;
  text-align: left;
}


/* Principale2 img cote à cote */
.mainimg {   
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}


p{padding-left:20px;}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Disposition réactive - lorsque l'écran mesure moins de 700 pixels de large, empiler les deux colonnes l'une sur l'autre plutôt que l'une à côté de l'autre */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Disposition réactive - lorsque l'écran mesure moins de 400 pixels de large, empiler les deux colonnes l'une sur l'autre plutôt que l'une à côté de l'autre */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.clear { clear: both; }

 /*haut de page*/
#scrollUp
{
position: fixed;
bottom : 4%;
right: 3%;
opacity: 0.5;
}

/*mise en page header*/
.avant{float: left; margin-left:-1%; margin-top:0.51%;}
.apres{float: right; margin: 15px;}
.titre{text-align: center;}

img {
  vertical-align:middle;
  max-width: 100%;
  height: auto;
}


a {
text-decoration:none;
color:black;
}


   /* L’entité HTML   (« non breaking space ») va nous permettre d’ajouter une espace simple dit espace « insécable » ;
    L’entité HTML   (« en space ») va nous permettre de créer une espace double ;
    L’entité HTML   (« em space ») va nous permettre de créer une espace quadruple ;
    L’entité HTML   (« thin space ») va nous permettre de créer un espace très fin (demi-espace).
	*/