* { box-sizing: border-box; }

body, html {
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
	/* background-color: #303030; */
	/* background: rgba(48, 48, 48, 0.15); */
	background-color: #eeeeee;
}

/* Menu principal
----------------------------------*/
/* remove outer padding */
.main .row {
	padding: 0px;
	margin: 0px;
}

.main {
	-webkit-transition: margin 200ms ease-out;
	-moz-transition: margin 200ms ease-out;
	-o-transition: margin 200ms ease-out;
	transition: margin 200ms ease-out;
	border: none;
}


section {
	padding-left: 15px;
}


.bg-menu {
	background-color: #D9DCCC;
	border: 2px solid #bebebe;
	border-radius: 5px;
}


/* Formattage Headers
----------------------------------*/
p.header2 {
	color: #444;
	font-size: 10px;
	padding: 4px;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	margin-top: 15px;
	margin-bottom: 10px;
}

p.header3 {
	color: #938223;
	font-weight: bold;
	font-size: 22px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 20px;
	margin-bottom: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Times New Roman", "sans-serif";
}

h1 {
	font-size: 2.5rem;
	font-weight: normal;
	color: rgb(0,0,0);
	border-bottom: 5px ridge #ABABAB;
}

h2 {
	font-size: 2.3rem;
}

h3 {
	font-size: 2.0rem;
}

h4 {
	/*font-size: 1.8rem;*/
}

h5 {
	font-size:1.5rem;
	color: #000;
	font-weight: bold;
}


/*	Accueil :: Tuile "Pensée sans image"
--------------------------------------------*/
.blockquote-custom {
  position: relative;
  font-size: 1.1rem;
}

.blockquote-custom-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -40px;
  left: 19px;
}


/*	Accueil :: Tuile "Pensée image en cercle"
--------------------------------------------*/
.testimonial-card .card-up {
  height: 120px;
  overflow: hidden;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.gradient {
  background: linear-gradient(40deg, #D9DCCC, #efefef) !important;
}

.testimonial-card .avatar {
  width: 200px;
  margin-top: -60px;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 50%;
}


/*	Bibliothèque :: Onglet Chronologique
--------------------------------------------*/



/*	Bibliothèque :: Onglet Sujet
--------------------------------------------*/
.card-img-top-ong-sujet {
	/*width: 100%;*/
	/*height: 15vh;*/
	/*object-fit: contain;*/
	object-fit: cover;
	max-height: 200px;
}


/*	Pages tuiles :: Modèle BOOK ; Ref. : https://stackoverflow.com/questions/73685602/create-a-pure-html-css-book-with-flipping-pages
--------------------------------------------*/
.book {
  --c: 0;
  display: flex;
  margin: auto;
  width: 50%;
  /*1* let pointer event go trough pages of lower Z than .book */
  pointer-events: none;
  transform-style: preserve-3d;
  transition: translate 1s;
  translate: calc(min(var(--c), 1) * 50%) 0%;
  /* DEMO ONLY: incline on the X axis for pages preview */
  rotate: 1 0 0 30deg;

  [name^=book] { display: none; }
  &:has(#c0:checked) { --c:0; }
  &:has(#c1:checked) { --c:1; }
  &:has(#c2:checked) { --c:2; }
  &:has(#c3:checked) { --c:3; }
  &:has(#c4:checked) { --c:4; }
  &:has(#c5:checked) { --c:5; }
  &:has(#c6:checked) { --c:6; }
  &:has(#c7:checked) { --c:7; }
  &:has(#c8:checked) { --c:8; }
  &:has(#c9:checked) { --c:9; }
  &:has(#c10:checked) { --c:10; }
  &:has(#c11:checked) { --c:11; }
  &:has(#c12:checked) { --c:12; }
  &:has(#c13:checked) { --c:13; }
  &:has(#c14:checked) { --c:14; }
  &:has(#c15:checked) { --c:15; }
}

.page {
  --thickness: 5;
  /* PS: Don't go below thickness 0.4 or the pages might transpare */
  flex: none;
  display: flex;
  width: 100%;
  /*1* allow pointer events on pages */
  pointer-events: all;
  user-select: none;
  transform-style: preserve-3d;
  border: 2px solid #0008;
  transform-origin: left center;
  transition:
    transform 1s,
    rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ( calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * 1px)));
  rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);

  label {
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}



.front,
.back {
  flex: none;
  width: 100%;
  padding: 2rem;
  backface-visibility: hidden;
  background-color: #fff;
  /* Fix backface visibility Firefox: */
  translate: 0px;
}

.back {
  background-image: linear-gradient(to right, #fff 80%, #ddd 100%);
  translate: -100% 0;
  rotate: 0 1 0 180deg;
}


/* Textes généraux
----------------------------------*/
/*
p {
	margin-top: 0;
	margin-bottom: 2rem;
}
*/
/*
hr {
	margin-top: 2rem;
	margin-bottom: 0rem;
	border: 0;
	border-top: 2px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;
}
*/

/* Menu principal de la bibliothèque
----------------------------------------*/


/* Contenu des pages
----------------------------------*/
.nav-tabs .nav-item .nav-link {
  background-color: #aeaeae;
  color: #000;
}

.nav-tabs .nav-item .nav-link.active {
  background-color: #fff;
  color: #000;
  font-weight: bold;
}

.nav-tabs .nav-item .nav-link:hover {
	color: #fff;
}