@font-face {
	font-family: 'Mulish';
	src: url('/fonts/Mulish-VariableFont_wght.ttf') format('truetype');
	font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Mulish';
	src: url('/fonts/Mulish-Italic-VariableFont_wght.ttf') format('truetype');
	font-weight: 200 900; font-style: italic; font-display: swap;
}

:root{
  --max: 40rem;
  --serif: "Palatino Linotype", Palatino, Georgia, serif;
  --title: Garamond, "Times New Roman", serif;
  --text: #111;
  --rule: #ddd;
  --rule-soft: #eee;
}
html { font-size:100%; box-sizing:border-box; }*,*:before,*:after { box-sizing:inherit;
}
body{ margin:0; padding:2rem 1rem; font: 1.05rem/1.65 var(--serif); color:var(--text); background:#fff;
}
main{ max-width:var(--max); margin:0 auto;
}


  /* ***************************************************************************************************************************** */
 /* VISUAL INFO ***************************************************************************************************************** */ 
/* ***************************************************************************************************************************** */

.visual {
	display:flex; flex-direction: row; align-items: flex-start;	justify-content: space-between; gap:1rem; width:50rem; margin:0 auto;
	border-radius: 2rem; background-color: #000066;
	}

.visual-image {
	flex: 1 1 0; margin: 0;
	}
.visual-image img {
	display: block; border-radius: 2rem 0 0 2rem; width: 100%; height: auto;
	}

.visual-info {
	flex: 1 1 0; margin: 1rem 1rem 0 0;
	font-family: 'Mulish', sans-serif; letter-spacing: 0.06rem; font-size: 1rem; color: #fff; text-decoration: none;
	}
.visual-info-row {
	display: grid; grid-template-columns: auto 0.12rem 1fr; align-items: flex-start; gap: 0.25rem; padding: 0;
	line-height: 1.1rem; font-size: 0.9rem;
	}
.visual-info-row p {
	padding: 0.5rem 0 0 0;
	}
.visual-info-left {
	width: 7rem; padding: 0.4rem 0; text-align: right; font-weight: 800;
	}
.visual-info-divider {
	background-color: #ccc; height: 100%;
	}
.visual-info-right {
	padding: 0.4rem 0; text-align: left;
	}
.visual-info-horizontal-line {
	width: 95%;
	height: 0.1rem; background-color: #ccc; margin: 0 15rem 0 0.5rem;
	}

  /* ***************************************************************************************************************************** */
 /* TEXT VERSION***************************************************************************************************************** */ 
/* ***************************************************************************************************************************** */

header{ text-align:center; margin:2.5rem 0 3rem;
}
h1, .subtitle{ font-family: var(--title); text-justify: center;
}
h1{ font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.05; margin: 0;
}
.subtitle{ font-size: clamp(1.1rem, 3.2vw, 1.4rem); margin: 1rem 0 0;
}
h2{ font-size:1.6rem; margin:3.2rem 0 1rem; text-justify: center;
}
p{ margin-top: 0; margin-bottom: 0; text-align:justify; hyphens: auto;
}
.p-ident{ margin-top: 0; margin-bottom: 0; text-align:justify; hyphens: auto;
}
.justify-last::after { content: ""; display: inline-block; width: 100%;
}
.indent{ text-indent:1.2em;
}
.center{ text-align:center;
}
.small{ font-size:.92rem; opacity:.9;
}
hr{ border:0; border-top:1px solid var(--rule); margin:2rem 0;
}
.break{ text-align:center; margin:1.8rem 0; letter-spacing:.25em; opacity:.7;
}
.poem{ max-width:30rem; margin:auto; padding:1.2rem 1rem; font-style:italic;
}
.poem p{ margin:.35rem 0; text-align:center; /* override the global p{ text-align:justify } */
}
a{ color:inherit;
}

/* tiny spacing helpers to replace inline styles */
.mt-lg{ margin-top:2.4rem !important; }
.mt-md{ margin-top:1rem !important; }
.mt-sm{ margin-top:.6rem !important; }

#texte {  }
.page { margin-bottom: 3rem; padding: 2rem 2rem 0.5rem 2rem; background-color: #fbf3eb; min-height: 50rem;  /* Hauteur minimale */
}
.page-number { width: 4rem; display: block; /* Keep it on its own line */ text-align: center; color: #888; margin: 0.5rem auto 0 auto;
}

.mode { display: flex; flex-direction: row; width: 100%; height: auto; padding: 0.2rem 0; gap: 1%; justify-content: center;
	font-family: 'Mulish', sans-serif; line-height: 1.5rem; letter-spacing: 0.06rem; font-size: 0.8rem;
	}

.mode-note { margin: 1rem 0 0 0;
	font-family: 'Mulish', sans-serif; line-height: 1.5rem; letter-spacing: 0.06rem; font-size: 1rem; color: #000;
	}

  /* ***************************************************************************************************************************** */
 /* AFFICHAGE ENRICHI & SIMPLIFIE *********************************************************************************************** */ 
/* ***************************************************************************************************************************** */

.enrichi-mode-left, .enrichi-mode-right {
  width: auto;
  margin: 0.5rem 0;
  padding: 0.2rem 0.6rem;
  display: inline-flex;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #333;
  border-radius: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.enrichi-mode-left { background-color: #006600; color: white; }
.enrichi-mode-right { background-color: white; color: #ccc; }

.simplifie-mode-left, .simplifie-mode-right {
  width: auto;
  margin: 0.5rem 0;
  padding: 0.2rem 0.6rem;
  display: inline-flex;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #333;
  border-radius: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.simplifie-mode-left { background-color: white; color: #ccc; }
.simplifie-mode-right { background-color: #0000aa; color: white; }

.enrichi-mode-left:hover { background-color: white; color: #006600; }
.simplifie-mode-right:hover { background-color: white; color: #0000aa; }

.simplifie-mode-left-svg { height: 1.15rem; width: auto; margin: 0; opacity: 0.4; }
.simplifie-mode-right-svg { height: 1.15rem; width: auto; margin: 0; }


.enrichi-mode-left-svg { height: 1.15rem; width: auto; margin: 0; filter: brightness(0) invert(1); }
.enrichi-mode-right-svg { height: 1.15rem; width: auto; margin: 0; opacity: 0.4; }

.enrichi-mode-left:hover .enrichi-mode-left-svg { filter: none; }

.simplifie-mode-left-span, .simplifie-mode-right-span,
.enrichi-mode-left-span, .enrichi-mode-right-span { margin: 0; }

  /* ***************************************************************************************************************************** */
 /* GRAPHIQUE VERSION************************************************************************************************************ */ 
/* ***************************************************************************************************************************** */

.special-wrapping { display: flex; flex-direction: row; align-items: center; justify-content: center; height: calc(100vh - 4rem);
	box-sizing: border-box; background-color: #fff; margin: 2rem auto; max-width: fit-content; position: relative; left: 0; }

.cover { display: flex; align-items: center; justify-content: center; flex: 0; margin:0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.cover img { height: calc(100vh - 4rem); max-height: calc(100vh - 4rem); width: auto; margin:0; object-fit: contain; }

.blank { display: flex; align-items: center; justify-content: center; flex: 0; margin:0; }
.blank img { height: calc(100vh - 4rem); max-height: calc(100vh - 4rem); width: auto; margin:0; object-fit: contain; }

.page-last { display: flex; align-items: center; justify-content: center; flex: 0; margin:0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.page-last img { height: calc(100vh - 4rem); max-height: calc(100vh - 4rem); width: auto; margin:0; object-fit: contain; }

.vertical-line-blank { width: 2px; margin:0; height: 100%; }

.two-pages-wrapping { display: flex; flex-direction: row; align-items: center; justify-content: center; height: calc(100vh - 4rem);
	box-sizing: border-box;	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); background-color: #fff; margin: 2rem auto; max-width: fit-content; position: relative; left: 0; }
.page-left, .page-right { display: flex; align-items: center; justify-content: center; flex: 0; margin:0; }
.page-left img, .page-right img { height: calc(100vh - 4rem); max-height: calc(100vh - 4rem); width: auto; margin:0; object-fit: contain; }

.vertical-line { width: 2px; margin:0; background-color: #eee; height: 100%; }

.bottom-section { width:40rem; margin: 0 auto; }

/* ***************************************************************************************************************************** */

footer{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--rule-soft); text-align:center; font-size:.95rem; }