/* ——— STRUCTURE NOTRE HISTOIRE ——— */
.story-page .story-title{
  font-family: 'Nunito Sans','Avenir Next',sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 35px;
}

.story-grid{
  max-width: 1200px;
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr; /* 1/3 - 2/3 */
  gap: 32px;
  align-items: start;
}

.story-card{
  background: #1a1a1a;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  color: #eee;
  text-align: left;
}
.story-card p{ line-height: 1.7; margin: 0 0 14px; }
.story-lead{ font-weight: 700; color: #ffcc70; margin-bottom: 10px; }

.story-h2{
  font: 800 1.2rem/1.2 'Nunito Sans',system-ui,sans-serif;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.story-sub{
  font: 700 1rem/1.2 'Nunito Sans',system-ui,sans-serif;
  text-transform: uppercase;
  opacity: .9; margin: 0 0 10px;
}

/* ——— BOOK 3D ——— */
.book-wrap{
  display:inline-block;
  perspective: 1400px;
  perspective-origin: 50% 40%;
}
.book-caption{
  margin-top:.6rem;
  text-align:center;
  font: 600 0.95rem/1.2 "Nunito Sans", system-ui, sans-serif;
  color:#ddd;
  opacity:.9;
}
.book-wrap::before{
  content:"";
  display:block;
  width: 160px;
  height: 2px;
  margin: 0 auto 12px;
  background: linear-gradient(90deg, transparent, #ffcc70 30%, #ffcc70 70%, transparent);
  opacity:.55;
}

/* Taille du livre */
:root{
  --book-w: 300px;        /* largeur face */
  --book-h: 440px;        /* hauteur */
  --spine: 20px;          /* épaisseur tranche */
  --radius: 10px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --red: #c00;
}

@media (max-width: 980px){
  :root{ --book-w: 260px; --book-h: 380px; --spine: 18px; }
  .story-grid{ grid-template-columns: 1fr; }
  .story-book-col{ display:flex; justify-content:center; }
}

/* Élément interactif */
.book{
  position: relative;
  width: calc(var(--book-w) + var(--spine));
  height: var(--book-h);
  transform-style: preserve-3d;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .2s;
}
@media (hover:hover){
  .book:hover{ transform: rotateY(-45deg) translateZ(0); }
}
.book.is-open{ transform: rotateY(180deg); }

/* Faces */
.book__cover,
.book__spine,
.book__pages{
  position:absolute; inset:0;
  border-radius: var(--radius);
  backface-visibility: hidden;
}
/* 1re de couv. */
.book__cover--front{
  width: var(--book-w);
  height: var(--book-h);
  left: var(--spine);
  background: #111 url("images/livre/front.jpg") center/cover no-repeat;
  transform: translateZ(calc(var(--spine) / 2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* 4e de couv. */
.book__cover--back{
  width: var(--book-w);
  height: var(--book-h);
  left: 0;
  background: #111 url("images/livre/back.jpg") center/cover no-repeat;
  transform: rotateY(180deg) translateX(calc(-1 * var(--spine)))
             translateZ(calc(var(--spine) / 2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* Tranche */
.book__spine{
  width: var(--spine);
  height: var(--book-h);
  left: 0;
  background: #1a1a1a url("images/livre/spine.jpg") center/cover no-repeat;
  transform: rotateY(90deg) translateZ(calc(var(--book-w) + (var(--spine)/2)));
  border-radius: var(--radius);
  box-shadow: inset -2px 0 10px rgba(0,0,0,.35);
}
/* Bord pages */
.book__pages{
  width: var(--book-w);
  height: var(--book-h);
  left: var(--spine);
  background:
    linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,0) 35%),
    repeating-linear-gradient(#d8d8d8 0 1px, #f1f1f1 1px 3px);
  transform: translateZ(calc(var(--spine) / -2));
  filter: brightness(.96);
}

/* Focus visible */
.book:focus-visible{
  filter: drop-shadow(0 0 0.6rem var(--red));
}

/* ——— CARTOUCHE AUTEUR ——— */
.author-card{
  max-width: 1200px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 26px;
  align-items: center;
  background: #151515;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.author-media{
  overflow: hidden;
  border-radius: 10px;
}
.author-photo{
  width: 80%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
  filter: saturate(85%);
}
.author-text{
  color: #e9e9e9;
  line-height: 1.7;
}
.author-text a{
  color: #ffcc70;
  text-decoration: underline;
}
@media (max-width: 900px){
  .author-card{ grid-template-columns: 1fr; }
  .author-photo{ max-height: 200px; }
}

/* ——— TITRAGES EN CAPS GLOBAUX ——— */
h1, h2, h3, .nav-link{
  text-transform: uppercase;
}






/*Livre*/

.bk-list {
	list-style: none;
	position: relative;
}

.bk-list li {
	position: relative;
	width: 300px;
	float: left;
	z-index: 1;
	margin: 0px 50px 40px 0;
	-webkit-perspective: 1800px;
	perspective: 1800px;
}

.bk-list li:last-child {
	margin-right: 0;
}

.bk-info {
	position: relative;
	margin-top: 440px;
}

.bk-info h3 {
	padding: 25px 0 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(0,0,0,0.3);
	font-size: 26px;
}

.bk-info h3 span:first-child {
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	padding-bottom: 5px;
	display: block;
	color: #777;
}

.bk-info p {
	line-height: 24px;
	color: #444;
	min-height: 160px;
}

.bk-list li .bk-book {
	position: absolute;
	width: 100%;
	height: 400px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
}

.bk-list li .bk-book.bk-bookdefault:hover {
	-webkit-transform: rotate3d(0,1,0,35deg);
	transform: rotate3d(0,1,0,35deg);
}

.bk-list li .bk-book > div,
.bk-list li .bk-front > div {
	display: block;
	position: absolute;
}

.bk-list li .bk-front {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
	-webkit-transform: translate3d(0,0,20px);
	transform: translate3d(0,0,20px);
	z-index: 10;
}

.bk-list li .bk-front > div {
	z-index: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.bk-list li .bk-page {
	-webkit-transform: translate3d(0,0,19px);
	transform: translate3d(0,0,19px);
	display: none;
	width: 295px;
	height: 390px;
	top: 5px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 9;
}

.bk-list li .bk-front,
.bk-list li .bk-back,
.bk-list li .bk-front > div {
	width: 300px;
	height: 400px;
}

.bk-list li .bk-left,
.bk-list li .bk-right {
	width: 40px;
	left: -20px;
}

.bk-list li .bk-top,
.bk-list li .bk-bottom {
	width: 295px;
	height: 40px;
	top: -15px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bk-list li .bk-back {
	-webkit-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	box-shadow: 10px 10px 30px rgba(0,0,0,0.3);
	border-radius: 3px 0 0 3px;
}

.bk-list li .bk-cover-back {
	background-color: #000;
	-webkit-transform: rotate3d(0,1,0,-179deg);
	transform: rotate3d(0,1,0,-179deg);
	background-image: url(../../../../img/DERNIERE-PAGE-ENCOURAGEMENTS-GLORIOUS-GRACYL.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 300px 400px;
}

.bk-list li .bk-right {
	height: 390px;
	top: 5px;
	-webkit-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
	-moz-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
	transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bk-list li .bk-left {
	height: 400px;
	-webkit-transform: rotate3d(0,1,0,-90deg);
	transform: rotate3d(0,1,0,-90deg);
}

.bk-list li .bk-top {
	-webkit-transform: rotate3d(1,0,0,90deg);
	transform: rotate3d(1,0,0,90deg);
}

.bk-list li .bk-bottom {
	-webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
	transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
}

/* Transform classes */

.bk-list li .bk-viewinside .bk-front {
	-webkit-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
	transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
}

.bk-list li .bk-book.bk-viewinside {
	-webkit-transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
	transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
}

.bk-list li .bk-book.bk-viewback {
	-webkit-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
	transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
}

/* Main colors and content */

.bk-list li .bk-page,
.bk-list li .bk-right,
.bk-list li .bk-top,
.bk-list li .bk-bottom {
	background-color: #fff;
}

.bk-list li .bk-front > div {
	border-radius: 0 3px 3px 0;
	box-shadow: 
		inset 4px 0 10px rgba(0, 0, 0, 0.1);
}

.bk-list li .bk-front:after {
	content: '';
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: -1px;
	width: 1px;
}

.bk-list li .bk-cover:after,
.bk-list li .bk-back:after {
	content: '';
	position: absolute;
	top: 0;
	left: 10px;
	bottom: 0;
	width: 3px;
	background: rgba(0,0,0,0.06);
	box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}

.bk-list li .bk-back:after {
	left: auto;
	right: 10px;
}

.bk-left h2 {
	width: 400px;
	height: 40px;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(90deg) translateY(-40px);
	transform: rotate(90deg) translateY(-40px);
}

.bk-content {
	position: absolute;
	top: 30px;
	left: 20px;
	bottom: 20px;
	right: 20px;
	padding: 30px;
	overflow: hidden;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	cursor: default;
}

.bk-content-current {
	opacity: 1;
	pointer-events: auto;
}

.bk-content p {
	padding: 0 0 10px;
	-webkit-font-smoothing: antialiased;
	color: #000;
	font-size: 13px;
	line-height: 20px;
	text-align: justify;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.bk-page nav {
	display: block;
	text-align: center;
	margin-top: 20px;
	position: relative;
	z-index: 100;
	cursor: pointer;
}

.bk-page nav span {
	display: inline-block;
	width: 20px;
	height: 20px;
	color: #aaa;
	background: #f0f0f0;
	border-radius: 50%;
}

/* Individual style & artwork */

/* Book 1 */
.book-1 .bk-back,
.book-1 .bk-left,
.book-1 .bk-front:after {
	background-color: #09283a;
		background-image: url(/images/livre/back.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 300px 400px;
}

.book-1 .bk-cover {
	background-image: url(/images/livre/front.png);	
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 300px 400px;
}

.book-1 .bk-left {
	background-image: url(/images/livre/spine.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 40px 400px;
}

.book-1 .bk-cover h2 {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 30px;
	background: rgba(255,255,255,0.2);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
}

.book-1 .bk-cover h2 span:first-child,
.book-1 .bk-left h2 span:first-child {
	text-transform: uppercase;
	font-weight: 400;
	font-size: 13px;
	padding-right: 20px;
}

.book-1 .bk-cover h2 span:first-child {
	display: block;
}

.book-1 .bk-cover h2 span:last-child,
.book-1 .bk-left h2 span:last-child {
	font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
} 

.book-1 .bk-content p {
	font-family: Georgia, Times, "Times New Roman", serif;
}

.book-1 .bk-left h2 {
	color: #fff;
	font-size: 15px;
	line-height: 40px;
	padding-right: 10px;
	text-align: right;
}

.book-1 .bk-back p {
	color: #fff;
	font-size: 13px;
	padding: 40px;
	text-align: center;
	font-weight: 700;
}

/* ===== CTA rouge (cohérent avec le site) ===== */
.btn{ 
  -webkit-appearance:none; appearance:none;
  border:0; cursor:pointer; outline:0;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.9rem 1.25rem; border-radius:12px;
  font:800 .95rem/1 "Nunito Sans",system-ui,sans-serif; letter-spacing:.02em;
  transition:transform .06s ease, filter .2s ease, background .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.btn:active{ transform:translateY(1px); }

/* plein rouge */
.btn-red{
  background:#cf0000; color:#fff;
  box-shadow:0 6px 18px rgba(207,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn-red:hover{ filter:brightness(1.06); }

/* gris foncé (secondaire) */
.btn-dark{
  background:#2b2b2b; color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn-dark:hover{ filter:brightness(1.06); }

/* petite variante “ghost” avec trait rouge */
.btn-ghost-red{
  background:transparent; color:#ffccc2;
  box-shadow:inset 0 0 0 1.5px #cf0000;
}
.btn-ghost-red:hover{ background:rgba(207,0,0,.1); color:#fff; }

/* carte un peu plus large et respirante */
.press-mosaic-card{
  max-width:1200px;
  padding:46px 34px 34px;
  margin: auto;
}

/* grille toujours en 12 colonnes */
.press-mosaic{
  --col:12; --gap:22px;
  display:grid; grid-template-columns:repeat(var(--col),1fr); gap:var(--gap);
}

/* base : léger plus grand, lettres espacées */
.q{
  --span:4; --fs:clamp(1.15rem,1.0vw + 1.0rem,1.6rem);
  grid-column:span var(--span);
  padding:10px 6px 6px;
  text-transform:uppercase; color:#fff;
  letter-spacing:.045em;
  transform:translateY(14px) scale(.965); opacity:0;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s;
}
.q.in{ transform:none; opacity:1; }

.q blockquote{
  margin:0 0 6px;
  font:800 var(--fs)/1.12 "Nunito Sans",system-ui,sans-serif;
}
.q figcaption{
  margin:0;
  font:800 .82rem/1 "Nunito Sans",system-ui,sans-serif;
}
.q a{ color:#ffcc70; text-decoration:none; }
.q a:hover{ color:#fff; text-decoration:underline; }

/* ===== Pattern fixe harmonisé (se répète toutes les 6) =====
   -> équilibre visuel, tailles variées, plein largeur 12 colonnes  */
.q:nth-child(6n+1){ /* gros, à gauche */
  --span:6; --fs:clamp(1.55rem,2.0vw + 1.2rem,2.25rem);
  text-align:left;
}
.q:nth-child(6n+2){ /* gros, à droite */
  --span:6; --fs:clamp(1.45rem,1.7vw + 1.2rem,2.05rem);
  text-align:right;
}
.q:nth-child(6n+3){ /* moyen, centré */
  --span:5; --fs:clamp(1.3rem,1.3vw + 1.0rem,1.85rem);
  text-align:center;
}
.q:nth-child(6n+4){ /* moyen +, aligné gauche */
  --span:7; --fs:clamp(1.35rem,1.5vw + 1.05rem,1.95rem);
  text-align:left;
}
.q:nth-child(6n+5){ /* plus petit, centré */
  --span:6; --fs:clamp(1.15rem,1.0vw + .95rem,1.55rem);
  text-align:center;
}
.q:nth-child(6n+6){ /* moyen, aligné droite */
  --span:5; --fs:clamp(1.25rem,1.2vw + 1.0rem,1.75rem);
  text-align:right;
}

/* Responsive : garde l’esprit sans trous */
@media (max-width:1100px){
  .press-mosaic{ --col:10; --gap:18px; }
  .q:nth-child(6n+1){ --span:6; }
  .q:nth-child(6n+2){ --span:6; }
  .q:nth-child(6n+3){ --span:5; }
  .q:nth-child(6n+4){ --span:5; }
  .q:nth-child(6n+5){ --span:5; }
  .q:nth-child(6n+6){ --span:5; }
}
@media (max-width:780px){
  .press-mosaic{ --col:6; --gap:16px; }
  .q{ --span:6; text-align:center; }
  .q blockquote{ line-height:1.14; }
}
@media (max-width:520px){
  .press-mosaic{ --col:4; --gap:14px; }
  .q{ --span:4; }
}

/* Cartouche global */
.press-quotes {
  background:#0f0f0f;
  border-radius:14px;
  padding:40px 30px;
  box-shadow:0 6px 20px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.05);
  margin:50px auto;
  max-width:1200px;
  text-align:center;
}

.quotes-title {
  font:800 1.8rem/1.2 'Nunito Sans',system-ui,sans-serif;
  text-transform:uppercase;
  margin-bottom:30px;
  color:#fff;
  letter-spacing:.02em;
}

/* grille harmonisée */
.quotes-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap:28px 40px;
  justify-items:center;
}

/* chaque citation */
.quote {
  color:#fff;
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-weight:700;
  line-height:1.4;
  text-align:left;
  max-width:360px;
  position:relative;
  transition: transform .3s ease, opacity .3s ease;
}

.quote p {
  font-size:1.2rem;
  margin:0 0 8px;
}

.quote cite {
  display:block;
  font-size:.9rem;
  font-weight:700;
  color:#ffcc70;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.quote cite a {
  color:#ffcc70;
  text-decoration:none;
}
.quote cite a:hover {
  text-decoration:underline;
}

.press-quotes.section-card h2{
  margin-bottom: 45px;
}

.section-card h2{
  margin-bottom: 20px;
}

/* Apparition douce pour la dernière citation */
.quote-new{
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  filter: blur(2px);
  transition:
    opacity 900ms ease,
    transform 900ms cubic-bezier(.17,.67,.23,1),
    filter 900ms ease;
  will-change: opacity, transform, filter;
}
.quote-new.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Option: petit “pop” léger du texte lui-même */
.quote-new.is-in p{
  animation: quote-pop 700ms cubic-bezier(.2,.8,.2,1) 120ms both;
}
@keyframes quote-pop{
  0%   { transform: scale(.992); letter-spacing: .2px; }
  100% { transform: scale(1);   letter-spacing: 0; }
}

/* Section globale */
.press-quotes {
  margin: 60px auto;
  padding: 40px 30px;
  background: #111;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
  max-width: 1200px;
  text-align: center;
}

/* Titre */
.quotes-title {
  font: 800 1.6rem/1.2 'Nunito Sans', system-ui, sans-serif;
  text-transform: uppercase;
  margin-bottom: 36px;
  color: #fff;
  letter-spacing: .5px;
}

/* Grille harmonisée */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px 48px;
  align-items: start;
}

/* Chaque citation */
.quote {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
  position: relative;
  margin: 0;
}
.quote p {
  margin: 0 0 10px;
  font-size: 1.15rem;
}
.quote cite {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: #ffcc70;
}
.quote cite a {
  color: #ffcc70;
  text-decoration: none;
}
.quote cite a:hover {
  text-decoration: underline;
}

/* === Apparition animée === */
.quote.reveal {
  opacity: 0;
  transform: translateY(22px) scale(.96);
  filter: blur(2px);
  transition:
    opacity 900ms ease,
    transform 900ms cubic-bezier(.2,.7,.2,1),
    filter 900ms ease;
}
.quote.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}