*{
    box-sizing: border-box;
}

body{
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 18px;
	line-height: 1.5;
	color: #fff; 
	text-align: justify;
	/*background:#45BD6B; couleur vert */ 
	background : #B21515;
	/*background:#779EA7; couleur bleu*/
}

h1{
	font-size: 26px;
}

.italique{
	font-size: 16px;
	font-style: italic;
}

/* a servis pour la rubrique achat de l'accueil */
.texteblanc{
	color: white;
	padding: 12px;
	font-size: 17px;
	font-weight: bold;
}

.lien{
	color: white;
	border-bottom: none;
	display: inline;
}

.lien:hover{
	color: #B21515; /* couleur du backgound lorsqu'on survol un element redirecteur en gros ca l'efface lorsqu'on passe dessus */
	border-bottom: none;
}

.header,
.footer{
	background: #fff;
	color: #B21515;
	position: -webkit-sticky;
	position: sticky;
}

.header{
	top:0; /* pour que l'header reste toujours visible quand on defile la page */
	z-index:100;
}

.nav,
.footer-nav,
.main{
	max-width: 1200px;
	margin: 0 auto;
}

.main{
	flex: 1;
	padding: 25px;
	overflow-y: auto;
}


.main a:hover{
	color: #B21515; /* couleur du backgound lorsqu'on survol un element redirecteur en gros ca l'efface lorsqu'on passe dessus */
	border-bottom: none;/* permet d'enlever le soulignement dans la flexbox main lorsqu'on est sur un element redirecteur */
}

.main a{
	color: white;
	border-bottom: none;
	display: inline;
}

.flex{
	display: flex;
}

.footer-nav.flex{
	justify-content: center;  
}

.flex-item{
	padding: 12px;
}

.flex-item.home{
	margin: 0 auto 0 0;
	font-size: 1em;
	border-bottom: 5px solid #B21515;
}

.flex-item.home a{
	border: none;
}

a{
	color: #B21515; /* couleur du background */
	text-decoration: none;
	display: block;
	border-bottom: 5px solid #fff; /* soulignement blanc des elements redirecteur */
}

a:hover{
	border-bottom: 5px solid #B21515; /* soulignement couleur du background qd on passe sur un element redirecteur */
	transition: border-color 400ms ease-out; /* transition de la couleur */
}

p{
	max-width: 35em;
}


/* top bouton */

#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #920117;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#topBtn:hover {
  background-color: #666;
}


/* Page livres */
main{
	display: flex;
	/*justify-content: space-around;*/
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

main div{
	height: 50vh;
	text-align: center;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	margin: 10px;
	padding: 5px;
	border: 10px solid #fff; 
}


main div img{
	max-width: 100%;
	max-height: 100%;
}

.conteneur_livres{
	position: relative;
}


.a-img_txt{
	display: block;
	width: auto;
	height: 100%;
}

.a-txt{
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	opacity:0; /* on rend le texte invisible */
}

.conteneur_livres:hover{
	background-color : #fff; /* au passage de la souris le conteneur devient blanc */
}

.conteneur_livres:hover img{
	opacity: 0.1; /* l'image devient moins opaque au passage de la souris */
}

.conteneur_livres:hover .a-txt{
	color: black;
	font-weight: bold;
	opacity:1; /* le texte redevient visible au passage de la souris */
	transition: opacity .6s; /* transition pour l'opacite */
}


/* Page individuelle des livres : page LMK, page DVL, page CJC */
.img_livres{
	display : flex;
	flex-direction: column;
	align-items: center;
}

.img_lmk, .img_dvl, .img_cjc {
	display: block;
	width: auto;
	height: 60vh;
	margin: 10px;
	padding: 5px;
	border: 10px solid #fff;
}

/* box qui s'etend (pour les extraits) */
.collapsible{
  background-color: #E35A6E;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
}

.active, .collapsible:hover{
  background-color: #A22638;
}

.collapsible:after{
  content: '\002B'; /* pour le signe + */
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after{
  content: "\2212"; /* pour le signe - */
}

.collapsed-content{
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #CC3E53;
  font-size : 16px;
}

/* pour la tab francais/anglais */

.tab_lang { /* creation de la tab */
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #E35A6E;
}

.tab_lang button { /* style du bouton */
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  color : #fff;
}

.tab_lang button:hover {
  background-color: #A22638;
}

.tab_lang button.active { /* le bouton courant */
  background-color: #A22638;
}

.tabcontent_lang { /* style de la tab */
  display: none;
  padding: 6px 50px;
  border: 1px solid #ccc;
  border-top: none;
  position : center;
  -webkit-animation: fadeEffect 0.5s;
  animation: fadeEffect 0.5s;
}

@-webkit-keyframes fadeEffect { /* effet de transition */
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect { /* effet de transition */
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Page evenements */

.timeline {
  position: relative;
  top : 0;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.event_container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.event_container::after { /* creation des cercles sur le timeline */
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #E35A6E; /* orange : #FF9F55 */
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.timeline_left { /* placer le conteneur a gauche */
  left: 0;
}

.timeline_right { /* placer le conteneur a droite*/
  left: 50%;
}

.timeline_left::before { /* ajouts des fleches pointant vers la droite sur le conteneur de gauche */
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

.timeline_right::before { /* ajouts des fleches pointant vers la gauche sur le conteneur de droite */
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

.timeline_right::after { /* fixation du cercle pour les conteneurs a droite*/
  left: -16px;
}

.event_content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
  color : black;
}

@media screen and (max-width: 600px) { /* media queries pour les ecrans de moins de 600px de large */
  /* on place la timeline a gauche */
  .timeline::after {
  left: 31px;
  }
  
  /* conteneurs de largeur pleine */
  .event_container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* les fleches pointent vers la gauche */
  .event_container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* cercles au meme endroit */
  .timeline_left::after, .right::after {
  left: 15px;
  }
  
  /* tout les conteneurs de droites se comportent comme ceux de gauche */
  .timeline_right {
  left: 0%;
  }
}

/* Page audiovisuel */

.main_audiovisuel {
  max-width: 60vw;
  margin: auto;
}

.row_visuel {
  margin: 10px -20px;
  color : black;
}

.row_visuel,
.row_visuel > .column {
  padding: 8px; /* espacement entre chaque colonne */
}


.column { /* creation de trois colonnes de meme taille, l'une a cote de l'autre */
  float: left;
  width: 33.33%;
  display: none; /* cache tout les elements par defaut */
}


.row_visuel:after { /* on enleve les flottants apres les lignes */
  content: "";
  display: table;
  clear: both;
} 

.content_audiovisuel {
  background-color: white;
  padding: 10px;
  height : 90vh;
  
  /*display: block;
  width: auto;
  height: 100%;*/
}
 
.content_audiovisuel img{
	width : 100%;
} 

.show { /* on ajoute la class show aux element filtres */
  display: block;
}

.btn_audiovisuel { /* style des boutons */
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn_audiovisuel:hover {
  background-color: #ddd;
}

.btn_audiovisuel.active {
  background-color: #666;
  color: white;
}