/* ============================================================
   EMILIEN GOUTU · le carnet d'un gastronome voyageur
   Papier, encre, ambre. Playfair Display + Lora + Cinzel (locales)
   ============================================================ */

@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-v40-latin-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-v40-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-v40-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('../fonts/lora-v37-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('../fonts/lora-v37-latin-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('../fonts/lora-v37-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel-v26-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --papier: #f8f2e7;
  --papier-fonce: #efe5d3;
  --papier-clair: #fffaf1;
  --encre: #2e2117;
  --encre-douce: #5c4a3a;
  --ambre: #c8924a;          /* décor uniquement */
  --ambre-encre: #8a5a1f;    /* texte : contraste 5,3 sur papier */
  --brun: #5c3d1e;
  --bordeaux: #7a2d2d;
  --table: #1f1510;
  --trait: #dccdb4;
  --ombre: 0 18px 40px -18px rgba(46, 33, 23, .35);
  --titre: 'Playfair Display', Georgia, serif;
  --corps: 'Lora', Georgia, serif;
  --caps: 'Cinzel', Georgia, serif;
  --largeur: 1180px;
  --lecture: 40rem;
  --courbe: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font-family: var(--corps); font-size: 1.1875rem; line-height: 1.75;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
/* grain de papier très léger */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .17 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
img, svg { max-width: 100%; display: block; }
a { color: var(--ambre-encre); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--bordeaux); }
:focus-visible { outline: 2px solid var(--ambre-encre); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--encre); }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--brun); }
p { margin: 0 0 1em; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--encre); color: var(--papier); padding: 10px 16px; border-radius: 4px; }
.evitement:focus { top: 12px; }

.surtitre { font-family: var(--caps); font-weight: 600; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ambre-encre); margin: 0 0 .9em; line-height: 1.5; }
.surtitre-clair { color: #e3c28f; }
.titre-section { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.titre-page { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.titre-clair { color: var(--papier); }
.section { max-width: var(--largeur); margin: 0 auto; padding: clamp(64px, 10vw, 128px) 16px; }
@media (min-width: 720px) { .section { padding-left: 32px; padding-right: 32px; } }
.section-tete { margin-bottom: 40px; }

/* Boutons */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bouton {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px; border: 1px solid var(--encre); border-radius: 999px;
  background: var(--encre); color: var(--papier); font-family: var(--caps); font-weight: 600; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background .3s, color .3s, transform .3s var(--courbe);
}
.bouton:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--papier); transform: translateY(-2px); }
.bouton-ligne { background: transparent; color: var(--encre); }
.bouton-ligne:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.bouton-clair { background: var(--papier); color: var(--brun); border-color: var(--papier); }
.bouton-clair::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%); transform: translateX(-120%); animation: reflet 3.6s var(--courbe) infinite 1s; }
.bouton-clair:hover { background: var(--ambre); color: var(--table); border-color: var(--ambre); }
@keyframes reflet { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.lien-fleche { font-family: var(--caps); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambre-encre); text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }
.lien-fleche::after { content: '→'; font-family: var(--corps); letter-spacing: 0; transition: transform .3s var(--courbe); }
a:hover .lien-fleche::after, .lien-fleche:hover::after { transform: translateX(5px); }

/* Tampons de saison */
.tampon {
  display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px 4px;
  border: 2px solid currentColor; border-radius: 3px; font-family: var(--caps); font-weight: 600;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; transform: rotate(-4deg);
  color: var(--bordeaux); opacity: .9; mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.tampon-hors-serie { color: #6b4f38; }
.tampon-paris { color: #7a2d2d; }
.tampon-bordeaux { color: #5a2a3a; }
.tampon-naples { color: #2f4a3a; }
.tampon-saison-2 { color: #3d3a5c; }
.tampon-grand { font-size: .9rem; padding: 8px 16px 7px; border-width: 3px; }
.tampon-applique { animation: tampon .7s var(--courbe) both .2s; }
@keyframes tampon { 0% { transform: rotate(-12deg) scale(1.8); opacity: 0; } 60% { transform: rotate(-3deg) scale(.94); opacity: 1; } 100% { transform: rotate(-4deg) scale(1); opacity: .9; } }

/* Titres qui s'écrivent (Text Reveal) */
[data-ecrire] .mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
/* 20/10 (21st Text Reveal, « fade-in-blur ») : chaque mot monte du masque en sortant d'un léger flou,
   comme une encre qui sèche ; le flou se dissipe un peu après la montée */
[data-ecrire] .mot > span { display: inline-block; transform: translateY(105%); opacity: .15; filter: blur(5px);
  transition: transform .9s var(--courbe), opacity .7s ease-out, filter 1.1s ease-out; transition-delay: calc(var(--m) * 55ms); }
[data-ecrire].ecrit .mot > span { transform: none; opacity: 1; filter: none; }

/* Apparitions */
/* En animation (et avec « translate ») pour ne jamais gêner les effets de survol des cartes */
[data-apparait].attente { opacity: 0; }
[data-apparait].vu { animation: apparait .9s var(--courbe) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes apparait { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

/* ── En-tête et sommaire plein écran ────────────────────── */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 200; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 16px; transition: background .4s, box-shadow .4s, color .4s, transform .4s var(--courbe);
}
@media (min-width: 720px) { .entete { padding: 18px 32px; } }
.entete.defile { background: rgba(248, 242, 231, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--trait); }
.entete.cache { transform: translateY(-100%); }
.logo { font-family: var(--titre); font-style: italic; font-size: 1.35rem; color: var(--encre); text-decoration: none; line-height: 1; display: flex; flex-direction: column; gap: 4px; }
.logo span { font-family: var(--caps); font-style: normal; font-weight: 600; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ambre-encre); }
.entete-droite { display: flex; align-items: center; gap: 10px; }
.entete-dernier { display: none; font-family: var(--caps); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--encre); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--trait); background: var(--papier-clair); }
.entete-dernier:hover { border-color: var(--encre); color: var(--encre); }
@media (min-width: 720px) { .entete-dernier { display: inline-block; } }
.bouton-sommaire { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 0; background: var(--encre); color: var(--papier); font-family: var(--caps); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; position: relative; z-index: 260; }
.bouton-sommaire-icone { width: 18px; height: 10px; position: relative; }
.bouton-sommaire-icone i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--courbe), top .45s var(--courbe); }
.bouton-sommaire-icone i:first-child { top: 1px; } .bouton-sommaire-icone i:last-child { top: 7px; }
.sommaire-ouvert .bouton-sommaire-icone i:first-child { top: 4px; transform: rotate(45deg); }
.sommaire-ouvert .bouton-sommaire-icone i:last-child { top: 4px; transform: rotate(-45deg); }
/* Sur l'entrée du livre (table sombre), l'en-tête passe en clair */
.page-accueil .entete:not(.defile) .logo { color: var(--papier); }
.page-accueil .entete:not(.defile) .logo span { color: #e3c28f; }
.page-accueil .entete:not(.defile) .entete-dernier { background: transparent; color: var(--papier); border-color: rgba(248,242,231,.35); }
.page-accueil .entete:not(.defile) .bouton-sommaire { background: var(--papier); color: var(--encre); }
.sommaire-ouvert .entete .logo, .sommaire-ouvert .entete .entete-dernier { opacity: 0; pointer-events: none; }
/* Menu ouvert : l'en-tête passe au-dessus du sommaire, pour que le bouton « Fermer » (la croix) reste visible, téléphone compris */
.sommaire-ouvert .entete { z-index: 300; transform: none; background: transparent; box-shadow: none; backdrop-filter: none; }

.sommaire { position: fixed; inset: 0; z-index: 250; background: var(--papier); overflow-y: auto; clip-path: circle(0 at calc(100% - 70px) 40px); transition: clip-path .8s var(--courbe); }
.sommaire[hidden] { display: block; visibility: hidden; }
.sommaire.ouvert { clip-path: circle(150% at calc(100% - 70px) 40px); visibility: visible; }
.sommaire-papier { max-width: var(--largeur); margin: 0 auto; padding: 110px 16px 48px; display: grid; gap: 48px; }
@media (min-width: 900px) { .sommaire-papier { grid-template-columns: 1.6fr 1fr; padding: 130px 32px 64px; align-items: start; } }
.sommaire-papier > .surtitre { grid-column: 1 / -1; margin: 0; }
.sommaire-liste { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.sommaire-liste a { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; gap: 12px; padding: 10px 0; text-decoration: none; color: var(--encre); }
.sommaire-num { font-family: var(--caps); font-size: .85rem; color: var(--ambre-encre); }
.sommaire-titre { font-family: var(--titre); font-size: clamp(1.9rem, 5.4vw, 3.6rem); line-height: 1.1; transition: transform .5s var(--courbe), color .3s; }
.sommaire-liste a:hover .sommaire-titre, .sommaire-liste a[aria-current] .sommaire-titre { color: var(--bordeaux); font-style: italic; transform: translateX(10px); }
.sommaire .sommaire-liste li { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--courbe), transform .6s var(--courbe); }
.sommaire.ouvert .sommaire-liste li { opacity: 1; transform: none; }
.sommaire.ouvert .sommaire-liste li:nth-child(1) { transition-delay: .18s } .sommaire.ouvert .sommaire-liste li:nth-child(2) { transition-delay: .24s } .sommaire.ouvert .sommaire-liste li:nth-child(3) { transition-delay: .30s } .sommaire.ouvert .sommaire-liste li:nth-child(4) { transition-delay: .36s } .sommaire.ouvert .sommaire-liste li:nth-child(5) { transition-delay: .42s } .sommaire.ouvert .sommaire-liste li:nth-child(6) { transition-delay: .48s }
.sommaire-aside { border-left: 1px solid var(--trait); padding-left: 28px; }
@media (max-width: 899px) { .sommaire-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--trait); padding-top: 28px; } .sommaire-liste a { grid-template-columns: 2.4rem 1fr; } }
.sommaire-dernier { display: grid; gap: 6px; padding: 22px; background: var(--papier-clair); border: 1px solid var(--trait); border-radius: 6px; text-decoration: none; color: var(--encre); margin-bottom: 26px; }
.sommaire-dernier .tampon { justify-self: start; margin-bottom: 8px; }
.sommaire-dernier-num { font-family: var(--caps); font-size: .75rem; letter-spacing: .16em; color: var(--ambre-encre); }
.sommaire-dernier-titre { font-family: var(--titre); font-size: 1.5rem; line-height: 1.2; }
.sommaire-saisons { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 1rem; }
/* J6 (Immersive Full Screen Navigation) : la colonne de droite arrive après les titres,
   la carte du dernier épisode grandit, les saisons montent une à une */
.sommaire .sommaire-aside > .surtitre, .sommaire .sommaire-saisons li { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--courbe), transform .5s var(--courbe); }
.sommaire .sommaire-dernier { opacity: 0; transform: scale(.9); transform-origin: left top; transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), border-color .3s; }
.sommaire.ouvert .sommaire-aside > .surtitre { opacity: 1; transform: none; transition-delay: .42s; }
.sommaire.ouvert .sommaire-dernier { opacity: 1; transform: none; transition-delay: .5s; }
.sommaire.ouvert .sommaire-saisons li { opacity: 1; transform: none; transition-delay: calc(.6s + var(--i, 0) * 60ms); }
.sommaire-dernier:hover { border-color: var(--encre); }
/* Fermeture : le papier recule et pâlit pendant que le cercle se referme */
.sommaire-papier { transform-origin: 50% 0; }
.sommaire.ferme .sommaire-papier { transform: scale(.94); opacity: .5; transition: transform .7s cubic-bezier(.55, 0, 1, .45), opacity .7s cubic-bezier(.55, 0, 1, .45); }
/* Titres : chaque lettre roule vers le haut au survol et laisse monter sa jumelle bordeaux */
.roule { display: inline-block; }
.roule-mot { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.roule-c { display: inline-block; white-space: pre; text-shadow: 0 1.3em var(--bordeaux); transition: transform .5s cubic-bezier(.625, .05, 0, 1); transition-delay: calc(var(--c, 0) * 15ms); }
.sommaire-roule a:hover .sommaire-titre, .sommaire-roule a[aria-current] .sommaire-titre { font-style: normal; color: var(--encre); }
.sommaire-roule a[aria-current] .sommaire-titre { color: var(--bordeaux); font-style: italic; }
.sommaire-roule a[aria-current] .roule-c { text-shadow: none; }
@media (hover: hover) { .sommaire-roule a:not([aria-current]):hover .roule-c { transform: translateY(-1.3em); } }
.sommaire-roule a:not([aria-current]):focus-visible .roule-c { transform: translateY(-1.3em); }
@media (prefers-reduced-motion: reduce) { .roule-c { text-shadow: none; } .sommaire.ferme .sommaire-papier { transform: none; opacity: 1; } }

/* ── ENTRÉE : ouvrir le livre ───────────────────────────── */
.ouverture { position: relative; background: var(--table); color: var(--papier); }
.ouverture-scene { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1fr; align-items: center; gap: 32px; padding: 110px 16px 64px; overflow: hidden; }
@media (min-width: 900px) { .ouverture-scene { grid-template-columns: 1fr 1.1fr; padding: 120px 32px 64px; } }
.ouverture-table { position: absolute; inset: 0; background:
  radial-gradient(ellipse 60% 55% at 38% 52%, rgba(200,146,74,.28), transparent 70%),
  repeating-linear-gradient(92deg, rgba(255,255,255,.018) 0 2px, transparent 2px 9px),
  repeating-linear-gradient(88deg, rgba(0,0,0,.08) 0 1px, transparent 1px 23px),
  linear-gradient(180deg, #2a1c13 0%, #1c130d 100%); }
.ouverture-lumiere { position: absolute; width: 60vmax; height: 60vmax; left: 10%; top: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,150,.18), transparent 60%); animation: bougie 6s ease-in-out infinite alternate; }
@keyframes bougie { 0% { opacity: .75; transform: translate(0,0) scale(1); } 100% { opacity: 1; transform: translate(2%, 1%) scale(1.05); } }

.livre3d { --h: min(62vh, 520px); --w: calc(var(--h) * .63); --ep: calc(var(--w) * .1); position: relative; z-index: 2; justify-self: center; width: var(--w); height: var(--h); perspective: 1800px; }
@media (max-width: 899px) { .livre3d { --h: min(46vh, 380px); } .anime .ouverture { height: 270vh; } }
.livre3d-corps { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-22deg) rotateX(6deg); transition: transform .8s var(--courbe); }
.livre3d-corps > * { position: absolute; inset: 0; }
.livre3d-dos { background: #d8c9a6; border-radius: 2px 6px 6px 2px; transform: translateZ(calc(var(--ep) * -1)); box-shadow: 0 30px 60px rgba(0,0,0,.55); }
/* Tranche des pages, perpendiculaire au bord droit (méthode du composant Book de 21st) */
.livre3d-corps > .livre3d-tranche { inset: 4px auto 4px 0; width: var(--ep);
  transform: translateX(calc(var(--w) - var(--ep) / 2 - 2px)) rotateY(90deg) translateX(calc(var(--ep) / 2));
  background: repeating-linear-gradient(90deg, #f3ead6 0 2px, #dcd0b6 2px 3px); }
.livre3d-page { background: linear-gradient(90deg, #e9dfc8 0%, #fbf6ea 6%, #fbf6ea 100%); border-radius: 0 4px 4px 0; transform: translateZ(-1px); padding: 12% 11%; color: var(--encre); overflow: hidden; }
.livre3d-page-texte { display: flex; flex-direction: column; gap: 6%; height: 100%; font-family: var(--corps); }
.livre3d-page-num { font-family: var(--caps); font-size: calc(var(--w) * .035); letter-spacing: .2em; color: var(--ambre-encre); text-transform: uppercase; }
.livre3d-page-titre { font-family: var(--titre); font-size: calc(var(--w) * .085); line-height: 1.15; }
.livre3d-page-lignes { font-size: calc(var(--w) * .042); line-height: 1.7; color: var(--encre-douce); }
.livre3d-page-lignes::first-letter { font-family: var(--titre); font-size: 3.1em; float: left; line-height: .9; margin: .06em .08em 0 0; color: var(--bordeaux); }
.livre3d-couverture { transform-style: preserve-3d; transform-origin: left center; transform: translateZ(1px); }
.livre3d-recto, .livre3d-verso { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 6px 6px 2px; overflow: hidden; }
.livre3d-recto img { width: 100%; height: 100%; object-fit: cover; }
.livre3d-reliure { position: absolute; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.22) 35%, rgba(0,0,0,.12) 60%, transparent); mix-blend-mode: multiply; }
.livre3d-reflet { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, transparent 32%, transparent 70%, rgba(0,0,0,.18) 100%); }
.livre3d-verso { transform: rotateY(180deg); background:
  radial-gradient(circle at 30% 30%, rgba(122,45,45,.08) 0 18%, transparent 19%) 0 0 / 34px 34px,
  radial-gradient(circle at 70% 70%, rgba(200,146,74,.12) 0 14%, transparent 15%) 0 0 / 34px 34px, #efe3c9;
  display: grid; place-items: center; }
.livre3d-exlibris { font-family: var(--caps); font-size: calc(var(--w) * .04); letter-spacing: .25em; color: var(--brun); text-align: center; border: 1px solid rgba(92,61,30,.4); padding: 9% 12%; background: rgba(251,246,234,.8); line-height: 1.8; }
.livre3d-exlibris em { font-family: var(--titre); font-style: italic; letter-spacing: 0; font-size: 1.5em; text-transform: none; }
.livre3d-ombre { position: absolute; left: 6%; right: -8%; bottom: -9%; height: 16%; background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%); filter: blur(10px); z-index: -1; }

.ouverture-papier { position: absolute; inset: 0; background: var(--papier); opacity: 0; pointer-events: none; z-index: 3; }
.ouverture-texte { position: relative; z-index: 4; max-width: 640px; }
.ouverture-texte .surtitre { color: #e3c28f; }
.ouverture-titre { font-size: clamp(2.6rem, 6.5vw, 5.4rem); color: var(--papier); margin-bottom: .4em; }
.ouverture-titre em { color: #e3c28f; }
.ouverture-chapeau { font-size: 1.15rem; color: rgba(248,242,231,.82); max-width: 34rem; }
.ouverture .bouton { background: var(--papier); color: var(--encre); border-color: var(--papier); }
.ouverture .bouton:hover { background: var(--ambre); border-color: var(--ambre); }
.ouverture .bouton-ligne { background: transparent; color: var(--papier); border-color: rgba(248,242,231,.5); }
.ouverture-indice { display: none; }

/* Version animée (le script ajoute .ouverture-animee) */
.anime .ouverture { height: 340vh; }
.anime .ouverture-scene { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; grid-template-columns: 1fr; place-items: center; padding: 0 16px; }
.anime .ouverture .livre3d { grid-area: 1 / 1; }
.anime .ouverture-texte { grid-area: 1 / 1; text-align: center; opacity: 0; visibility: hidden; }
/* Secours : si le script ne s'est pas lancé, le texte s'affiche quand même */
.anime .ouverture:not(.ouverture-animee) .ouverture-texte { animation: secours .6s 2.5s forwards; }
@keyframes secours { to { opacity: 1; visibility: visible; } }
.anime .ouverture-texte .boutons { justify-content: center; }
.anime .ouverture-chapeau { margin-left: auto; margin-right: auto; }
.ouverture-animee.texte-papier .ouverture-titre { color: var(--encre); }
.ouverture-animee.texte-papier .ouverture-titre em { color: var(--brun); }
.ouverture-animee.texte-papier .ouverture-texte .surtitre { color: var(--ambre-encre); }
.ouverture-animee.texte-papier .ouverture-chapeau { color: var(--encre-douce); }
.ouverture-animee.texte-papier .bouton { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.ouverture-animee.texte-papier .bouton-ligne { background: transparent; color: var(--encre); border-color: var(--encre); }
.ouverture-animee .ouverture-indice { display: block; position: absolute; bottom: 28px; left: 0; right: 0; z-index: 5; text-align: center; font-family: var(--caps); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(248,242,231,.75); }
.ouverture-animee .ouverture-indice::after { content: ''; display: block; width: 1px; height: 42px; margin: 12px auto 0; background: linear-gradient(rgba(248,242,231,.8), transparent); animation: indice 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes indice { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ── Le dernier épisode (BlogPostCard) ──────────────────── */
.dernier-grille { display: grid; gap: 28px; }
@media (min-width: 900px) { .dernier-grille { grid-template-columns: 1.55fr 1fr; gap: 40px; } }
.carte-une { position: relative; }
.carte-une-lien { display: block; height: 100%; padding: clamp(28px, 4vw, 48px); background: var(--papier-clair); border: 1px solid var(--trait); border-radius: 8px; text-decoration: none; color: var(--encre); box-shadow: var(--ombre); transition: transform .5s var(--courbe), box-shadow .5s var(--courbe); position: relative; overflow: hidden; }
.carte-une-lien::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--trait); border-radius: 4px; pointer-events: none; }
.carte-une-lien:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -24px rgba(46,33,23,.45); color: var(--encre); }
.carte-une-tete { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.carte-une-num { font-family: var(--titre); font-size: clamp(4.5rem, 10vw, 7.5rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.2px var(--ambre); }
.carte-une-titre { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .45em; }
.carte-une-extrait { color: var(--encre-douce); font-size: 1.08rem; max-width: 36rem; }
.dernier-precedents { display: flex; flex-direction: column; gap: 6px; }
.carte-courte { display: grid; grid-template-columns: 3rem 1fr; gap: 14px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--trait); text-decoration: none; color: var(--encre); transition: padding .35s var(--courbe), background .35s; }
.carte-courte:hover { padding-left: 14px; background: var(--papier-clair); color: var(--encre); }
.carte-courte-num { font-family: var(--titre); font-size: 2rem; color: var(--ambre-encre); line-height: 1; }
.carte-courte-corps { display: grid; }
.carte-courte-titre { font-family: var(--titre); font-size: 1.2rem; line-height: 1.25; }
.carte-courte-meta { font-size: .9rem; color: var(--encre-douce); }
.dernier-precedents .lien-fleche { margin-top: 18px; }
/* 22/10 (21st BlogPostCard) : le titre se souligne de gauche à droite au survol ou au focus (trait bordeaux, ligne par ligne),
   le grand numéro grossit à peine comme l'image de l'original, et les précédents arrivent en cascade (150 ms d'écart) */
.souligne { background: linear-gradient(var(--bordeaux), var(--bordeaux)) left 0 bottom .02em / 0% 1.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .5s var(--courbe); }
.carte-une-lien:hover .souligne, .carte-une-lien:focus-visible .souligne, .carte-courte:hover .souligne, .carte-courte:focus-visible .souligne { background-size: 100% 1.5px; }
.carte-une-lien:focus-visible { transform: translateY(-4px); box-shadow: 0 30px 60px -24px rgba(46,33,23,.45); }
.carte-courte:focus-visible { padding-left: 14px; background: var(--papier-clair); }
.carte-une-num { transform-origin: right top; transition: transform .6s var(--courbe); }
.carte-une-lien:hover .carte-une-num, .carte-une-lien:focus-visible .carte-une-num { transform: scale(1.05); }
@media (min-width: 900px) { .dernier [data-apparait].vu { animation-delay: calc(var(--i, 0) * 150ms); } } /* sur téléphone les cartes arrivent une à une : pas d'attente */
@media (prefers-reduced-motion: reduce) { .souligne, .carte-une-num { transition: none; } .carte-une-lien:hover .carte-une-num, .carte-une-lien:focus-visible .carte-une-num { transform: none; } }

/* ── Carte du voyage (texte le long du chemin) ──────────── */
.voyage { background: var(--papier-fonce); padding: clamp(64px, 10vw, 120px) 16px; overflow: hidden; }
.voyage-tete { max-width: var(--largeur); margin: 0 auto 24px; padding: 0 0; }
@media (min-width: 720px) { .voyage { padding-left: 32px; padding-right: 32px; } }
.voyage-tete p:last-child { max-width: 38rem; color: var(--encre-douce); }
.voyage-carte { max-width: var(--largeur); margin: 0 auto; }
.voyage svg { width: 100%; height: auto; overflow: visible; }
.voyage-trajet-fond { fill: none; stroke: var(--trait); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.voyage-trajet { fill: none; stroke: var(--bordeaux); stroke-width: 2.5; stroke-linecap: round; }
.voyage-texte-chemin { font-family: var(--caps); font-size: 15px; letter-spacing: .18em; fill: var(--ambre-encre); text-transform: uppercase; }
.voyage-etape circle { fill: var(--papier); stroke: var(--bordeaux); stroke-width: 3; transition: r .3s; }
.voyage-etape text { font-family: var(--titre); font-size: 26px; fill: var(--encre); }
.voyage-etape .voyage-etape-saison { font-family: var(--caps); font-size: 13px; letter-spacing: .2em; fill: var(--encre-douce); text-transform: uppercase; }
.voyage-etape:hover circle, .voyage-etape:focus circle { r: 13; }
.voyage-etape-actuelle circle { fill: var(--bordeaux); animation: battement 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes battement { 50% { transform: scale(1.35); } }

/* ── Citation (Editorial Testimonial) ───────────────────── */
/* Mise en page éditoriale : grand numéro de l'épisode, citation alignée à gauche,
   trait qui se trace sous la signature une fois la phrase lue */
.citation { max-width: 1000px; margin: 0 auto; padding: clamp(80px, 12vw, 150px) 16px; position: relative; }
.citation figure { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.citation-numero { font-family: var(--titre); font-size: clamp(5rem, 12vw, 9rem); line-height: .8; font-variant-numeric: lining-nums tabular-nums; color: var(--ambre); opacity: .35; user-select: none; }
.citation-corps { padding-top: clamp(4px, 1.5vw, 18px); }
.citation blockquote { margin: 0; }
.citation blockquote p { font-family: var(--titre); font-style: italic; font-size: clamp(1.6rem, 3.6vw, 2.75rem); line-height: 1.3; color: var(--encre); }
.citation [data-mots] .mot { opacity: .55; transition: opacity .5s; }
.citation [data-mots] .mot.lu { opacity: 1; }
.citation figcaption { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.citation-trait { width: 48px; height: 1px; background: var(--encre); transition: width .6s var(--courbe); }
.citation-nom { font-family: var(--caps); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; transition: color .3s; }
.citation figcaption a { font-size: .98rem; color: var(--encre-douce); transition: color .3s; }
.citation figcaption:hover .citation-trait, .citation figcaption:focus-within .citation-trait { width: 72px; }
.citation figcaption:hover .citation-nom, .citation figcaption:focus-within .citation-nom { color: var(--bordeaux); }
.citation figcaption:hover a, .citation figcaption a:focus-visible { color: var(--encre); }
/* Avec le script : le numéro glisse en entrant ; à la fin de la phrase, le trait
   se trace et pousse la signature à sa place (elle reste lisible tout du long) */
.citation-animee .citation-numero { opacity: 0; transform: translateX(-16px); transition: opacity .9s, transform .9s var(--courbe); }
.citation-animee.visible .citation-numero { opacity: .35; transform: none; }
.citation-animee .citation-trait { width: 0; }
.citation-animee.lue .citation-trait { width: 48px; }
.citation-animee.lue figcaption:hover .citation-trait, .citation-animee.lue figcaption:focus-within .citation-trait { width: 72px; }
@media (max-width: 640px) {
  .citation figure { grid-template-columns: 1fr; gap: 8px; }
  .citation-numero { font-size: 4.5rem; }
}

/* ── Le livre (Editorial Collage) ───────────────────────── */
.collage { max-width: var(--largeur); margin: 0 auto; padding: clamp(64px, 10vw, 128px) 16px; display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .collage { grid-template-columns: 1fr 1fr; padding-left: 32px; padding-right: 32px; } }
.page-livre .collage { padding-top: 140px; }
.collage-texte p { color: var(--encre-douce); max-width: 32rem; }
.collage-images { position: relative; min-height: 420px; }
.collage-lavis { position: absolute; inset: 8% 4% 4% 14%; background: radial-gradient(circle at 40% 40%, rgba(200,146,74,.35), rgba(122,45,45,.12) 55%, transparent 72%); filter: blur(4px); border-radius: 50%; }
.collage-couverture { position: relative; margin: 0; width: min(62%, 300px); margin-left: 8%; transform: rotate(-3deg); box-shadow: 0 40px 70px -28px rgba(46,33,23,.6); border-radius: 2px 6px 6px 2px; overflow: hidden; }
.collage-couverture img { width: 100%; height: auto; }
.collage-portrait { position: absolute; right: 4%; bottom: -4%; width: min(40%, 190px); margin: 0; background: var(--papier-clair); padding: 10px 10px 34px; transform: rotate(5deg); box-shadow: 0 24px 50px -20px rgba(46,33,23,.55); }
.collage-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.25) saturate(.9); }
/* 24/10 (21st Editorial Collage Hero) : le texte puis le collage sortent d'un léger flou en montant ;
   le portrait se pose un peu après la couverture, et le lavis s'étend derrière eux */
.collage [data-apparait].vu { animation-name: apparait-flou; }
@keyframes apparait-flou { from { opacity: 0; translate: 0 24px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.collage-images.vu .collage-portrait { animation: portrait-pose .8s var(--courbe) .3s both; }
@keyframes portrait-pose { from { opacity: 0; translate: 18px 22px; } to { opacity: 1; translate: 0 0; } }
.collage-images.vu .collage-lavis { animation: lavis-etale 1.4s var(--courbe) .1s both; }
@keyframes lavis-etale { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
.collage-portrait figcaption { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--titre); font-style: italic; font-size: 1rem; }

/* ── L'auteur (sur mesure : passe-partout et signature) ── */
.signature { max-width: var(--largeur); margin: 0 auto; padding: clamp(64px, 10vw, 128px) 16px; display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .signature { grid-template-columns: .8fr 1.2fr; gap: 80px; padding-left: 32px; padding-right: 32px; } }
.signature-photo { justify-self: center; text-align: center; }
.passe-partout { position: relative; padding: 22px; background: var(--papier-clair); border: 1px solid var(--trait); box-shadow: var(--ombre); transform: rotate(-2deg); transition: transform .8s var(--courbe); }
.signature-photo:hover .passe-partout { transform: rotate(0); }
.passe-partout img { width: min(260px, 60vw); aspect-ratio: 1; object-fit: cover; filter: sepia(.2) contrast(1.02); outline: 1px solid rgba(92,61,30,.25); outline-offset: 6px; }
.coin { position: absolute; width: 34px; height: 34px; background: var(--papier-fonce); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.coin-hg { top: 8px; left: 8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.coin-bd { bottom: 8px; right: 8px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.signature-legende { margin-top: 18px; font-family: var(--titre); font-style: italic; color: var(--encre-douce); }
.signature-chapeau { font-family: var(--titre); font-size: 1.45rem; line-height: 1.45; color: var(--encre); }
.signature-texte > p:not(.surtitre):not(.signature-chapeau) { color: var(--encre-douce); }
.signature-trait { width: 220px; height: 44px; margin: 8px 0 22px; }
.signature-trait path { fill: none; stroke: var(--bordeaux); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 2.2s var(--courbe); }
.signature-trait.trace path { stroke-dashoffset: 0; }

/* ── Lettre des épisodes du mercredi (Newsletter Signup Card) ───────────── */
.lettre { padding: clamp(48px, 8vw, 100px) 16px; }
.lettre-carte { max-width: 760px; margin: 0 auto; text-align: center; padding: clamp(32px, 6vw, 60px) clamp(20px, 5vw, 60px); background: var(--papier-clair); border: 1px solid var(--trait); border-radius: 10px; box-shadow: var(--ombre); position: relative; }
.lettre-carte::before { content: ''; position: absolute; inset: 0; border-radius: 10px; background: repeating-linear-gradient(135deg, var(--bordeaux) 0 14px, transparent 14px 22px, #2f4a3a 22px 36px, transparent 36px 44px); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 5px; opacity: .55; pointer-events: none; }
.lettre-titre { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.lettre-texte { color: var(--encre-douce); }
.lettre-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.lettre-champ { flex: 1 1 260px; max-width: 360px; text-align: left; }
.lettre-champ input { width: 100%; }
.lettre-merci { font-family: var(--titre); font-size: 1.3rem; color: var(--bordeaux); margin-top: 16px; outline: none; }
/* 24/10 (21st Newsletter Signup Card) : le formulaire s'efface en remontant, le merci arrive avec une coche ronde qui se trace */
/* 10/11 : « display: grid / flex » l'emportait sur l'attribut hidden, le formulaire restait affiché après l'envoi */
.contact-form[hidden], .lettre-form[hidden] { display: none; }
.lettre-form.part { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease-out, transform .25s var(--courbe); }
.lettre-merci:not([hidden]) { display: inline-flex; align-items: center; gap: 14px; text-align: left; animation: merci-arrive .6s var(--courbe) both; }
@keyframes merci-arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.lettre-coche { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bordeaux); animation: coche-rond .5s cubic-bezier(.34,1.4,.5,1) .1s both; }
.lettre-coche svg { width: 20px; height: 20px; }
.lettre-coche path { fill: none; stroke: var(--papier-clair); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; animation: coche-trace .45s var(--courbe) .4s forwards; }
@keyframes coche-rond { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes coche-trace { to { stroke-dashoffset: 0; } }
.lettre-erreur { margin: 10px 0 0; font-size: .95rem; color: var(--bordeaux); }
.lettre-erreur:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lettre-merci:not([hidden]), .lettre-coche { animation: none; }
  .lettre-coche path { animation: none; stroke-dashoffset: 0; }
  .collage-images.vu .collage-portrait, .collage-images.vu .collage-lavis { animation: none; }
}
.lettre-compacte .lettre-carte { box-shadow: none; }
input, textarea { font: inherit; font-size: 1.05rem; color: var(--encre); background: var(--papier); border: 1px solid #cdbb9c; border-radius: 6px; padding: 12px 16px; min-height: 48px; transition: border-color .25s, box-shadow .25s; }
input:focus, textarea:focus { outline: none; border-color: var(--ambre-encre); box-shadow: 0 0 0 3px rgba(200,146,74,.25); }
.lettre-form input { border-radius: 999px; }

/* ── Bandeau Toques & Convives (Gradient CTA) ───────────── */
.bandeau-blog { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 110px) 16px; text-align: center; color: var(--papier); background: linear-gradient(125deg, #3a2614 0%, var(--brun) 40%, #8a5a1f 75%, var(--ambre) 100%); }
.bandeau-blog::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(255,214,150,.18), transparent 30%); animation: tourne 18s linear infinite; }
@keyframes tourne { to { transform: rotate(1turn); } }
.bandeau-blog-inner { position: relative; max-width: 640px; margin: 0 auto; }
/* 25/10 (21st Gradient CTA Banner) : pastille ronde et flèche ; au survol, la pastille traverse le bouton
   en pivotant d'un quart de tour pendant que le texte glisse à sa place */
.bouton-pastille { position: relative; padding: 6px 60px 6px 26px; min-height: 52px; transition: padding .5s var(--courbe), background .3s, color .3s, border-color .3s, transform .3s var(--courbe); }
.bouton-pastille-texte { position: relative; z-index: 1; }
.bouton-pastille-rond { position: absolute; z-index: 1; top: 50%; right: 6px; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center; border-radius: 50%; background: var(--brun); color: var(--papier); transition: right .5s var(--courbe), transform .5s var(--courbe), background .3s; }
.bouton-pastille-rond svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bouton-pastille:hover, .bouton-pastille:focus-visible { padding: 6px 26px 6px 60px; }
.bouton-pastille:hover .bouton-pastille-rond, .bouton-pastille:focus-visible .bouton-pastille-rond { right: calc(100% - 46px); transform: rotate(45deg); background: var(--table); }
@media (prefers-reduced-motion: reduce) { .bouton-pastille, .bouton-pastille-rond { transition: background .3s, color .3s; } }
.bandeau-blog h2 { color: var(--papier); font-size: clamp(2.2rem, 5vw, 3.4rem); font-style: italic; font-weight: 400; }
.bandeau-blog p { color: rgba(248,242,231,.86); }

/* ── Pied de page (Minimal Footer) ──────────────────────── */
.pied { background: radial-gradient(38% 70% at 22% 0%, rgba(227,194,143,.09), transparent 70%), var(--table); color: rgba(248,242,231,.78); padding: 64px 16px 28px; font-size: 1rem; }
.pied a { color: rgba(248,242,231,.86); text-decoration: none; }
.pied a:hover { color: #e3c28f; text-decoration: underline; }
.pied-haut { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(248,242,231,.14); }
@media (min-width: 900px) { .pied-haut { grid-template-columns: 1fr 2fr; } .pied { padding-left: 32px; padding-right: 32px; } }
.logo-pied { color: var(--papier) !important; }
.logo-pied span { color: #e3c28f; }
.pied-marque p { margin-top: 16px; max-width: 22rem; }
.pied-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; }
.pied-titre { font-family: var(--caps); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #e3c28f; margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied-bas { max-width: var(--largeur); margin: 0 auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .88rem; color: rgba(248,242,231,.72); }
.pied-bas p { margin: 0; }
/* 25/10 (21st Minimal Footer) : halo discret en haut à gauche, liens soulignés de gauche à droite,
   colonnes en cascade à l'arrivée */
.pied-colonnes a, .pied-bas a { background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--courbe), color .2s; }
.pied-colonnes a:hover, .pied-bas a:hover, .pied-colonnes a:focus-visible, .pied-bas a:focus-visible { text-decoration: none; background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .pied-colonnes a, .pied-bas a { transition: color .2s; } }

/* ── Rideau entre deux pages (Block Transition) ─────────── */
/* D'après Block Transition (Hyperiux, 21st) : les volets se ferment de haut en bas et se rouvrent de bas en haut */
.rideau { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
.rideau-rang { position: absolute; left: 0; width: 100%; height: calc(20% + 2px); overflow: hidden; }
.rideau-rang span { position: absolute; top: 0; width: 51%; height: 100%; background: var(--table); visibility: hidden; transition: transform .54s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .54s; }
.rideau-rang span:first-child { left: 0; transform: translateX(-101%); box-shadow: inset -1px 0 0 rgba(227, 194, 143, .45); }
.rideau-rang span:last-child { right: 0; transform: translateX(101%); box-shadow: inset 1px 0 0 rgba(227, 194, 143, .45); }
.rideau.ferme span { transform: translateX(0); visibility: visible; transition: transform .54s cubic-bezier(.65, 0, .35, 1) calc(var(--r) * .09s), visibility 0s linear calc(var(--r) * .09s); }
.rideau-arrivee .rideau span { transform: translateX(0); visibility: visible; transition: none; }
.rideau.leve span { transition: transform .5s cubic-bezier(.65, 0, .35, 1) calc((4 - var(--r)) * .09s), visibility 0s linear calc(.5s + (4 - var(--r)) * .09s); }
/* La page s'estompe en partant et se pose en arrivant (option « content shift » de l'original) */
#contenu > *:not(.lecture-barre) { transition: transform .75s cubic-bezier(.22, 1, .36, 1) .12s, filter .75s .12s, opacity .75s .12s; }
.quitte #contenu > *:not(.lecture-barre) { transform: scale(.98); filter: blur(4px); opacity: .85; transition-delay: 0s; }
.rideau-arrivee #contenu > *:not(.lecture-barre) { transform: scale(1.02); filter: blur(4px); opacity: .85; transition: none; }

/* ── Têtes de pages intérieures ─────────────────────────── */
.tete-page { max-width: var(--largeur); margin: 0 auto; padding: 150px 16px 40px; }
@media (min-width: 720px) { .tete-page { padding-left: 32px; padding-right: 32px; } }
.tete-page-chapeau { font-size: 1.2rem; color: var(--encre-douce); max-width: 40rem; }
.tete-saison .tampon { margin-bottom: 22px; }

/* ── Feuilleton : à la une, reprendre ───────────────────── */
.feuilleton-une { display: grid; gap: 24px; padding-top: 0; }
@media (min-width: 900px) { .feuilleton-une { grid-template-columns: 2fr 1fr; align-items: stretch; } }
.reprendre { padding: 28px; border: 1px dashed var(--ambre); border-radius: 8px; background: rgba(200,146,74,.06); align-self: start; }
.reprendre-lien { display: grid; gap: 4px; text-decoration: none; color: var(--encre); }
.reprendre-num { font-family: var(--caps); font-size: .78rem; letter-spacing: .16em; color: var(--ambre-encre); }
.reprendre-titre { font-family: var(--titre); font-size: 1.5rem; line-height: 1.2; }
.reprendre-aide { font-size: .92rem; color: var(--encre-douce); margin: 10px 0 0; }

/* ── L'étagère des saisons (3D Coverflow) ───────────────── */
.etagere { position: relative; overflow: hidden; background: var(--table); padding: clamp(64px, 9vw, 110px) 16px; color: var(--papier); }
.etagere-fond { position: absolute; inset: -10%; background: radial-gradient(circle at 50% 55%, var(--couleur-fond, #7a2d2d), transparent 60%); opacity: .55; filter: blur(40px); transition: background 1s; }
.etagere-inner { position: relative; max-width: var(--largeur); margin: 0 auto; text-align: center; }
.etagere-scene { position: relative; height: 470px; margin: 30px auto 24px; perspective: 1400px; outline-offset: 8px; }
.volume {
  --x: 0px; --r: 0deg; --s: 1;
  position: absolute; left: 50%; top: 0; width: 260px; height: 420px; margin-left: -130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 34px 26px;
  background: linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(255,255,255,.12) 4%, rgba(0,0,0,.08) 8%, transparent 12%), var(--couleur);
  color: #f3e6c8; text-decoration: none; border-radius: 3px 8px 8px 3px; text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
  transform: translateX(var(--x)) scale(var(--s)) rotateY(var(--r)); transition: transform .8s var(--courbe), opacity .8s, filter .8s;
}
.volume:hover { color: #fff3d6; }
.volume::after { content: ''; position: absolute; inset: 14px 14px 14px 30px; border: 1px solid rgba(227,194,143,.5); border-radius: 2px; pointer-events: none; }
.volume-nervures { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; background: repeating-linear-gradient(180deg, transparent 0 60px, rgba(227,194,143,.4) 60px 62px); }
.volume-tampon { font-family: var(--caps); letter-spacing: .3em; font-size: .8rem; color: #e3c28f; border: 1.5px solid #e3c28f; padding: 6px 12px; transform: rotate(-4deg); }
.volume-nom { font-family: var(--caps); font-size: .75rem; letter-spacing: .2em; margin-top: 14px; }
.volume-titre { font-family: var(--titre); font-style: italic; font-size: 1.75rem; line-height: 1.15; }
.volume-lieu { font-size: .95rem; opacity: .85; }
/* La saison à venir : un volume encore sans pages, qu on ne peut pas ouvrir */
.volume-a-venir { cursor: default; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.035) 14px 15px), linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(255,255,255,.12) 4%, rgba(0,0,0,.08) 8%, transparent 12%), var(--couleur); }
.volume-a-venir .volume-titre { opacity: .9; }
.volume-pied { position: absolute; bottom: 30px; font-family: var(--caps); font-size: .65rem; letter-spacing: .18em; opacity: .75; }
.etagere-commandes { display: flex; justify-content: center; align-items: center; gap: 18px; }
.etagere-fleche { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(248,242,231,.3); background: rgba(0,0,0,.3); color: var(--papier); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.etagere-fleche:hover { background: var(--papier); color: var(--encre); }
.etagere-points { display: flex; gap: 8px; }
.etagere-points { gap: 2px; }
.etagere-points button { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: width .3s; }
.etagere-points button::before { content: ''; width: 9px; height: 9px; border-radius: 99px; background: rgba(248,242,231,.3); transition: width .3s, background .3s; }
.etagere-points button[aria-current="true"] { width: 38px; }
.etagere-points button[aria-current="true"]::before { width: 30px; background: #e3c28f; }
@media (max-width: 600px) { .etagere-scene { height: 380px; } .volume { width: 210px; height: 340px; margin-left: -105px; } .volume-titre { font-size: 1.4rem; } }
.no-js .etagere-scene, .etagere-statique .etagere-scene { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; perspective: none; }
.no-js .volume, .etagere-statique .volume { position: relative; left: auto; margin: 0; transform: none; }

/* ── Sommaire : filtres, recherche, saisons dépliables ── */
.outils-feuilleton { display: grid; gap: 16px; margin-bottom: 18px; }
@media (min-width: 900px) { .outils-feuilleton { grid-template-columns: 1fr auto auto; align-items: center; } }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--trait); border-radius: 999px; background: var(--papier-clair); font-family: var(--caps); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre); cursor: pointer; transition: all .3s var(--courbe); }
.filtre span { font-family: var(--corps); letter-spacing: 0; font-size: .8rem; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; opacity: .7; }
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }
/* Pastille qui glisse d'un filtre à l'autre (ajoutée par le JS ; sans JS, le filtre actif garde son fond) */
.filtres.avec-pastille { position: relative; }
.filtres.avec-pastille .filtre { position: relative; z-index: 1; background: transparent; transition: color .12s, border-color .3s; }
/* Le filtre choisi ne passe en clair qu'à l'arrivée de la pastille ; celui qu'on quitte redevient sombre tout de suite */
.filtres.avec-pastille .filtre[aria-pressed="true"] { transition: color .2s ease .2s, border-color .3s; }
.filtres.avec-pastille .filtre[aria-pressed="true"] { background: transparent; border-color: transparent; }
.filtre-pastille { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--encre); pointer-events: none; transition: transform .5s cubic-bezier(.34,1.32,.5,1), width .5s cubic-bezier(.34,1.32,.5,1), height .5s var(--courbe); }
.filtre-pastille.sans-glisse { transition: none; }
@media (prefers-reduced-motion: reduce) { .filtre-pastille { transition: none; } }
.recherche { position: relative; }
.recherche svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--encre-douce); stroke-width: 2; }
.recherche input { width: 100%; min-width: 260px; padding-left: 44px; border-radius: 999px; background: var(--papier-clair); }
.recherche input::-webkit-search-cancel-button { display: none; }
.recherche input { padding-right: 46px; }
/* Croix d'effacement aux couleurs du carnet */
.recherche-effacer { position: absolute; right: 6px; top: 50%; width: 36px; height: 36px; transform: translateY(-50%); display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--encre-douce); cursor: pointer; transition: background .25s, color .25s, transform .3s var(--courbe); }
.recherche-effacer svg { position: static; width: 16px; height: 16px; transform: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.recherche-effacer:hover { background: var(--papier-fonce); color: var(--bordeaux); transform: translateY(-50%) rotate(90deg); }
.recherche-effacer[hidden] { display: none; }
/* Palette de résultats (Command Search) */
.recherche-palette { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; min-width: min(420px, calc(100vw - 32px)); background: var(--papier-clair); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre); overflow: hidden; animation: palette-entree .28s var(--courbe); }
.recherche-palette[hidden] { display: none; }
@keyframes palette-entree { from { opacity: 0; transform: translateY(-6px); } }
.palette-liste { position: relative; max-height: min(58vh, 420px); overflow-y: auto; padding: 6px 8px 8px; }
.palette-groupe { margin: 10px 10px 4px; font-family: var(--caps); font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ambre-encre); }
.palette-option { position: relative; z-index: 1; display: grid; grid-template-columns: 2.2rem 1fr; gap: 2px 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--encre); }
.palette-num { font-family: var(--titre); font-size: 1.1rem; color: var(--ambre-encre); transition: color .2s, transform .35s cubic-bezier(.34,1.32,.64,1); }
.palette-option[aria-selected="true"] .palette-num { color: var(--bordeaux); transform: translateX(2px); }
.palette-titre { font-family: var(--titre); font-size: 1.02rem; line-height: 1.3; }
.palette-extrait { grid-column: 2; font-size: .85rem; line-height: 1.45; color: var(--encre-douce); }
.palette-option mark { background: rgba(200,146,74,.3); color: inherit; padding: 0 2px; border-radius: 2px; }
.palette-pilule { position: absolute; z-index: 0; top: 0; left: 8px; right: 8px; border-radius: 9px; background: rgba(200,146,74,.14); pointer-events: none; opacity: 0; transition: transform .42s cubic-bezier(.34,1.32,.64,1), height .42s cubic-bezier(.34,1.32,.64,1), opacity .2s; }
.palette-pilule.sans-glisse { transition: opacity .2s; }
.palette-vide { margin: 14px 10px; font-size: .95rem; color: var(--encre-douce); }
.palette-aide { display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 14px; border-top: 1px solid var(--trait); background: var(--papier); font-size: .8rem; color: var(--encre-douce); }
.palette-aide kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--trait); border-radius: 6px; background: var(--papier-clair); font: inherit; font-size: .75rem; }
@media (hover: none) { .palette-aide { display: none; } }
@media (prefers-reduced-motion: reduce) { .recherche-palette { animation: none; } .palette-pilule, .palette-num, .recherche-effacer { transition: none; } }
.tri { display: inline-flex; border: 1px solid var(--trait); border-radius: 999px; padding: 3px; background: var(--papier-clair); justify-self: start; }
.tri button { border: 0; background: none; padding: 8px 14px; min-height: 38px; border-radius: 999px; font: inherit; font-size: .9rem; color: var(--encre-douce); cursor: pointer; }
.tri button[aria-pressed="true"] { background: var(--papier-fonce); color: var(--encre); }
.resultats { min-height: 1.6em; font-size: .95rem; color: var(--encre-douce); }
.saisons-liste { display: grid; gap: 14px; }
.saison-bloc { position: relative; border: 1px solid var(--trait); border-radius: 10px; background: var(--papier-clair); overflow: hidden; }
.saison-bloc[hidden] { display: none; }
.saison-bloc summary { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; padding: 20px 22px; cursor: pointer; list-style: none; }
.saison-bloc summary::-webkit-details-marker { display: none; }
.saison-bloc-nom { font-family: var(--titre); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.2; }
.saison-bloc-compte { font-size: .9rem; color: var(--encre-douce); white-space: nowrap; }
.saison-bloc-chevron { width: 12px; height: 12px; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: rotate(45deg); transition: transform .4s var(--courbe); margin-top: -4px; }
.saison-bloc[open] .saison-bloc-chevron { transform: rotate(-135deg); margin-top: 4px; }
@media (max-width: 600px) { .saison-bloc summary { grid-template-columns: auto 1fr auto; } .saison-bloc-compte { display: none; } }
.saison-bloc-corps { overflow: hidden; }
.episodes-liste { list-style: none; margin: 0; padding: 0 12px 6px; position: relative; }
.episodes-liste li[hidden] { display: none; }
.episodes-liste a { position: relative; z-index: 1; display: grid; grid-template-columns: 2.6rem 1fr auto auto; gap: 14px; align-items: baseline; padding: 13px 10px; border-top: 1px solid var(--trait); text-decoration: none; color: var(--encre); }
.ep-num { font-family: var(--titre); font-size: 1.3rem; color: var(--ambre-encre); }
.ep-titre { font-family: var(--titre); font-size: 1.12rem; line-height: 1.3; }
.ep-date, .ep-min { font-size: .88rem; color: var(--encre-douce); white-space: nowrap; }
.ep-extrait { grid-column: 2 / -1; font-size: .92rem; color: var(--encre-douce); }
.ep-extrait mark { background: rgba(200,146,74,.3); color: inherit; padding: 0 2px; border-radius: 2px; }
@media (max-width: 600px) { .episodes-liste a { grid-template-columns: 2.2rem 1fr; } .ep-date, .ep-min { grid-column: 2; display: inline; } }
/* Pilule de survol (Proximity Accordion) : un léger ressort, sans glissade à l'arrivée */
.survol-pilule { position: absolute; left: 12px; right: 12px; height: 0; background: rgba(200,146,74,.13); border-radius: 8px; pointer-events: none; opacity: 0; transition: top .42s cubic-bezier(.34,1.32,.64,1), height .42s cubic-bezier(.34,1.32,.64,1), opacity .2s; z-index: 0; }
.survol-pilule.sans-glisse { transition: opacity .2s; }
.episodes-liste li.proche .ep-num { color: var(--bordeaux); }
.episodes-liste .ep-num { transition: color .25s; }
/* Saison ouverte : une teinte discrète et un chevron qui pivote avec un ressort */
.saison-bloc { transition: background .3s, border-color .3s; }
.saison-bloc[open]:not(.se-ferme) { background: #fff7ea; border-color: rgba(200,146,74,.45); }
.saison-bloc summary:hover .saison-bloc-chevron { border-color: var(--bordeaux); }
.saison-bloc-chevron { transition: transform .5s cubic-bezier(.34,1.56,.64,1), margin .5s cubic-bezier(.34,1.56,.64,1), border-color .25s; }
.saison-bloc.se-ferme .saison-bloc-chevron { transform: rotate(45deg); margin-top: -4px; }
@media (prefers-reduced-motion: reduce) { .survol-pilule, .saison-bloc-chevron, .saison-bloc { transition: none; } }
.saison-bloc-lien { margin: 6px 22px 20px; }

/* ── Page d'un épisode ──────────────────────────────────── */
.lecture-barre { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 210; background: transparent; }
/* Barre de lecture (Reading Progress) : remplissage amorti, et à la fin
   une coche qui se trace pendant que « Épisode lu » remplace le temps restant */
.lecture-barre-plein { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--ambre), var(--bordeaux)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--courbe); }
.lecture-reste { position: fixed; right: 16px; bottom: 16px; z-index: 210; display: grid; justify-items: end; font-family: var(--caps); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; background: var(--encre); color: var(--papier); padding: 8px 14px; border-radius: 999px; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s var(--courbe); }
.lecture-reste > span { grid-area: 1 / 1; white-space: nowrap; }
.lecture-reste-gabarit { visibility: hidden; }
.lecture-reste-texte { transition: opacity .35s; }
.lecture-reste-fin { display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .35s; }
.lecture-reste-fin > span { transform: translateX(4px); transition: transform .45s var(--courbe); }
.lecture-reste-fin svg { flex: none; overflow: visible; }
.lecture-reste-fin polyline { fill: none; stroke: currentColor; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s cubic-bezier(.23, 1, .32, 1) .08s; }
.lecture-reste.visible { opacity: 1; transform: none; }
.lecture-reste.fini .lecture-reste-texte { opacity: 0; }
.lecture-reste.fini .lecture-reste-fin { opacity: 1; }
.lecture-reste.fini .lecture-reste-fin > span { transform: none; }
.lecture-reste.fini polyline { stroke-dashoffset: 0; }
.episode { max-width: calc(var(--lecture) + 32px); margin: 0 auto; padding: 130px 16px 40px; }
.ariane ol { list-style: none; padding: 0; margin: 0 0 40px; display: flex; flex-wrap: wrap; gap: 6px; font-size: .9rem; color: var(--encre-douce); }
.ariane li + li::before { content: '›'; margin-right: 6px; color: var(--ambre); }
.ariane a { color: var(--encre-douce); }
.episode-tete { text-align: center; margin-bottom: 40px; }
.episode-tete .tampon { margin-bottom: 26px; }
.episode-titre { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.episode-meta { color: var(--encre-douce); font-size: 1rem; }
.precedemment { border-left: 3px solid var(--ambre); padding: 14px 22px; background: rgba(200,146,74,.07); margin: 0 0 44px; border-radius: 0 6px 6px 0; }
.precedemment p { margin: 0; }
.precedemment .surtitre { margin-bottom: 4px; }
.precedemment-debut { font-size: .93rem; margin-top: 6px !important; }
.episode-image { margin: 0 0 40px; }
.episode-image img { width: 100%; border-radius: 6px; }
.episode-texte { font-size: 1.1875rem; line-height: 1.85; hanging-punctuation: first; }
.episode-texte p { margin-bottom: 1.15em; }
.lettrine > p:first-child::first-letter { font-family: var(--titre); font-size: 4.4em; float: left; line-height: .82; margin: .08em .1em 0 0; color: var(--bordeaux); }
.episode-texte blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 2px solid var(--ambre); font-style: italic; }
.episode-fin { text-align: center; color: var(--ambre); font-size: 1.4rem; letter-spacing: 1em; margin: 40px 0; }
/* « Au menu de cet épisode » : la carte d'un restaurant, rien si le champ est vide */
.au-menu { position: relative; max-width: 30rem; margin: 0 auto 48px; padding: 30px 32px 26px; background: var(--papier-clair); border: 1px solid var(--trait); border-radius: 6px; text-align: center; box-shadow: var(--ombre); }
.au-menu::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--trait); border-radius: 3px; pointer-events: none; }
.au-menu .surtitre { margin-bottom: 18px; }
.au-menu-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.au-menu-liste li { display: grid; gap: 2px; }
.au-menu-liste li + li::before { content: '·'; display: block; color: var(--ambre); margin-bottom: 10px; line-height: 1; }
.au-menu-plat { font-family: var(--titre); font-size: 1.2rem; line-height: 1.3; }
.au-menu-accord { font-style: italic; color: var(--encre-douce); font-size: .98rem; }
/* Carte retournable (3D Flip Card) : posée sur deux cartons qui s'écartent au survol,
   un bouton la retourne, au dos les accords. Seulement si un accord existe (episode.js). */
.au-menu.carte-menu { padding: 0; background: none; border: 0; box-shadow: none; perspective: 1400px; }
.au-menu.carte-menu::before { content: none; }
.carte-pile { position: absolute; inset: 0; }
.carte-feuille { position: absolute; inset: 0; background: var(--papier-fonce); border: 1px solid var(--trait); border-radius: 6px; box-shadow: 0 6px 14px -8px rgba(46, 33, 23, .25); transition: transform .7s cubic-bezier(.34, 1.4, .64, 1), box-shadow .7s var(--courbe); }
.carte-feuille:first-child { transform: translate(-3px, 5px) rotate(-1.4deg); transition-delay: .08s; }
.carte-feuille:last-child { transform: translate(4px, 8px) rotate(1.8deg); }
@media (hover: hover) {
  .carte-menu:hover .carte-feuille:first-child { transform: translate(-22px, 10px) rotate(-5.5deg); box-shadow: 10px 20px 30px -12px rgba(46, 33, 23, .25); transition-delay: 0s; }
  .carte-menu:hover .carte-feuille:last-child { transform: translate(24px, 16px) rotate(6.5deg); box-shadow: 10px 20px 30px -12px rgba(46, 33, 23, .3); transition-delay: .1s; }
  .carte-menu:hover .carte-pivot { translate: 0 -4px; }
}
.carte-pivot { position: relative; display: grid; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.34, 1.25, .64, 1), translate .5s var(--courbe); }
.carte-menu.retournee .carte-pivot { transform: rotateY(180deg); }
.carte-face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; padding: 30px 32px 18px; background: var(--papier-clair); border: 1px solid var(--trait); border-radius: 6px; box-shadow: var(--ombre); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.carte-face::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--trait); border-radius: 3px; pointer-events: none; }
.carte-verso { transform: rotateY(180deg); }
.carte-verso-plat { font-family: var(--caps); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambre-encre); }
.carte-verso .au-menu-accord { font-family: var(--titre); font-size: 1.15rem; color: var(--encre); }
.carte-retourner { position: relative; margin: auto auto 0; padding: 14px 6px 6px; min-height: 44px; border: 0; background: none; cursor: pointer; font-family: var(--caps); font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ambre-encre); }
.carte-retourner::after { content: ' ↻'; display: inline-block; transition: transform .5s var(--courbe); }
.carte-retourner:hover::after, .carte-retourner:focus-visible::after { transform: rotate(180deg); }
.carte-retourner:hover { color: var(--bordeaux); }
@media print {
  .carte-menu .carte-pivot { transform: none !important; }
  .carte-menu .carte-face { grid-area: auto; transform: none; backface-visibility: visible; margin-bottom: 12px; }
  .carte-pile, .carte-retourner { display: none; }
}
.episode-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.episode-nav-lien { display: grid; gap: 4px; padding: 20px; border: 1px solid var(--trait); border-radius: 8px; background: var(--papier-clair); text-decoration: none; color: var(--encre); font-family: var(--titre); font-size: 1.12rem; line-height: 1.3; transition: transform .4s var(--courbe), border-color .3s; }
.episode-nav-lien .surtitre { margin: 0; }
.episode-nav-suiv { text-align: right; }
a.episode-nav-lien:hover { border-color: var(--encre); transform: translateY(-3px); color: var(--encre); }
.episode-nav-attente { text-align: right; border-style: dashed; color: var(--encre-douce); }
@media (max-width: 560px) { .episode-nav { grid-template-columns: 1fr; } .episode-nav-suiv, .episode-nav-attente { text-align: left; } }
.livre-rappel { max-width: calc(var(--lecture) + 32px); margin: 0 auto 80px; padding: 0 16px; display: flex; gap: 18px; align-items: center; }
.livre-rappel img { width: 64px; height: auto; transform: rotate(-4deg); box-shadow: 0 10px 20px -8px rgba(0,0,0,.4); }
.livre-rappel p { margin: 0; }

/* ── Page d'une saison (Growth Story Timeline) ──────────── */
.chronologie { position: relative; max-width: 1000px; margin: 0 auto; padding: 40px 16px 80px; }
.chronologie ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.chronologie-ligne { position: absolute; top: 40px; bottom: 80px; left: 26px; width: 2px; background: var(--trait); }
.chronologie-ligne span { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bordeaux), var(--couleur, var(--bordeaux))); transform: scaleY(0); transform-origin: top; }
/* Tête de la ligne (d'après Growth Story Timeline) : un point qui avance avec la lecture de la page */
.chronologie-tete { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--couleur, var(--bordeaux)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--couleur, var(--bordeaux)) 22%, transparent); opacity: 0; transition: opacity .4s; will-change: transform; }
.chronologie.en-cours .chronologie-tete { opacity: 1; }
.chronologie-etape { position: relative; padding-left: 54px; }
.chronologie-point { position: absolute; left: 3px; top: 26px; width: 16px; height: 16px; border-radius: 50%; background: var(--papier); border: 3px solid var(--trait); transition: border-color .4s, background .4s; }
.chronologie-etape.atteinte .chronologie-point { border-color: var(--couleur, var(--bordeaux)); background: var(--couleur, var(--bordeaux)); animation: point-atteint .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes point-atteint { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
.chronologie-carte { border-left-width: 1px; }
.chronologie-etape.atteinte .chronologie-carte { border-color: color-mix(in srgb, var(--couleur, var(--bordeaux)) 45%, var(--trait)); }
.chronologie-carte { display: grid; gap: 6px; padding: 24px; background: var(--papier-clair); border: 1px solid var(--trait); border-radius: 8px; text-decoration: none; color: var(--encre); box-shadow: var(--ombre); transition: transform .5s var(--courbe); }
.chronologie-carte:hover { transform: translateY(-4px); color: var(--encre); }
.chronologie-carte .surtitre { margin: 0; }
.chronologie-titre { font-family: var(--titre); font-size: 1.5rem; line-height: 1.2; }
.chronologie-extrait { color: var(--encre-douce); font-size: 1rem; }
@media (min-width: 900px) {
  .chronologie-ligne { left: 50%; }
  .chronologie-etape { width: 50%; padding-left: 0; }
  .chronologie-gauche { padding-right: 54px; }
  .chronologie-droite { margin-left: 50%; padding-left: 54px; }
  .chronologie-gauche .chronologie-point { left: auto; right: -9px; }
  .chronologie-droite .chronologie-point { left: -7px; }
}
.saisons-voisines { max-width: 1000px; margin: 0 auto; padding: 0 16px 40px; display: flex; justify-content: space-between; gap: 16px; }
.saisons-voisines a { display: grid; text-decoration: none; font-family: var(--titre); font-size: 1.15rem; color: var(--encre); }
.saisons-voisines a + a, .saisons-voisines span + a { text-align: right; }

/* ── Livre : détails, fiche, achat ──────────────────────── */
.livre-details { display: grid; gap: 48px; padding-top: 20px; }
@media (min-width: 900px) { .livre-details { grid-template-columns: 1.4fr 1fr; } }
.livre-resume p { color: var(--encre-douce); }
.livre-exergue { font-family: var(--titre); font-size: 1.4rem; color: var(--encre) !important; }
.fiche { padding: 30px; border: 1px solid var(--trait); border-radius: 8px; background: var(--papier-clair); align-self: start; }
.fiche-titre { font-size: 1.5rem; }
.fiche dl { margin: 0; display: grid; }
.fiche dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dotted var(--trait); font-size: 1rem; }
.fiche dt { color: var(--encre-douce); } .fiche dd { margin: 0; text-align: right; }
.acheter-cartes { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 720px) { .acheter-cartes { grid-template-columns: 1fr 1fr; } }
.acheter-carte { display: grid; gap: 6px; padding: 28px; border-radius: 8px; border: 1px solid var(--encre); text-decoration: none; color: var(--encre); transition: background .3s, color .3s, transform .4s var(--courbe); }
.acheter-carte strong { font-family: var(--titre); font-size: 1.6rem; font-weight: 600; }
.acheter-carte:hover { background: var(--encre); color: var(--papier); transform: translateY(-3px); }
.acheter-carte:hover .surtitre { color: #e3c28f; }
.acheter-gouter { margin-top: 26px; color: var(--encre-douce); }

/* ── Textes longs (auteur, légal) ───────────────────────── */
.auteur-page { padding-top: 80px; }
.signature-page { padding-bottom: 20px; }
.texte-long { max-width: calc(var(--lecture) + 32px); margin: 0 auto; padding: 20px 16px 80px; }
.texte-long h2 { font-size: 1.8rem; margin-top: 1.6em; }
.texte-long blockquote { margin: 2em 0; padding: 0 0 0 1.4em; border-left: 3px solid var(--ambre); font-family: var(--titre); font-style: italic; font-size: 1.4rem; line-height: 1.45; }
.texte-long blockquote cite { display: block; margin-top: 10px; font-family: var(--caps); font-style: normal; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ambre-encre); }
.legal { padding-top: 140px; font-size: 1.02rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); }

/* ── Personnages (Creative Team Showcase) ───────────────── */
.galerie { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); padding-top: 20px; }
.personnage { position: relative; border: 1px solid var(--trait); border-radius: 12px; background: var(--papier-clair); overflow: hidden; transition: transform .6s var(--courbe), box-shadow .6s var(--courbe); }
.personnage:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 50px -26px rgba(46,33,23,.5); }
.personnage-portrait { aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(200,146,74,.35), transparent 60%), repeating-linear-gradient(45deg, rgba(92,61,30,.05) 0 2px, transparent 2px 8px), var(--papier-fonce); }
.personnage-portrait span { font-family: var(--titre); font-style: italic; font-size: 4.2rem; color: var(--brun); width: 130px; height: 130px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(92,61,30,.35); background: var(--papier-clair); box-shadow: 0 0 0 8px rgba(255,250,241,.6); transition: transform .8s var(--courbe); }
.personnage:hover .personnage-portrait span { transform: scale(1.08) rotate(-6deg); }
/* Personnages (inspiré de Creative Team Showcase, 21st, 18/10) : l'en-tête descend, les cartes montent en cascade
   (aussi celles visibles à l'ouverture), le portrait sépia reprend ses couleurs au survol */
.page-personnages .tete-page > .surtitre, .page-personnages .tete-page-chapeau { animation: descend .8s cubic-bezier(.21, .47, .32, .98) both; }
.page-personnages .tete-page-chapeau { animation-delay: .15s; }
@keyframes descend { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
.page-personnages .personnage[data-apparait].vu { animation: monte-carte .8s cubic-bezier(.21, .47, .32, .98) both; animation-delay: calc(var(--i, 0) * 100ms); }
@keyframes monte-carte { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
.personnage-portrait { filter: sepia(.35) saturate(.6); transition: filter .5s var(--courbe); }
.personnage:hover .personnage-portrait, .personnage:focus-within .personnage-portrait { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .page-personnages .tete-page > .surtitre, .page-personnages .tete-page-chapeau, .page-personnages .personnage[data-apparait].vu { animation: none; }
}
.personnage-corps { padding: 24px; }
.personnage-nom { font-size: 1.8rem; }
.personnage-corps p { color: var(--encre-douce); font-size: 1.02rem; }
.personnage-meta { font-size: .92rem !important; margin: 0; }

/* ── Contact (Centered Contact Form) ────────────────────── */
.contact { max-width: 760px; margin: 0 auto; padding: 150px 16px 100px; text-align: center; }
.contact-form { text-align: left; margin-top: 36px; padding: clamp(24px, 5vw, 44px); background: var(--papier-clair); border: 1px solid var(--trait); border-radius: 10px; box-shadow: var(--ombre); display: grid; gap: 18px; }
.contact-duo { display: grid; gap: 18px; }
@media (min-width: 640px) { .contact-duo { grid-template-columns: 1fr 1fr; } }
.contact-form label { display: block; font-family: var(--caps); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.facultatif { font-family: var(--corps); text-transform: none; letter-spacing: 0; color: var(--encre-douce); font-weight: 400; }
.contact-form input, .contact-form textarea { width: 100%; }
.contact-form .bouton { justify-self: start; }
.contact-assurances { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: var(--encre-douce); }
/* 26/10 (21st Centered Contact Form) : pastille ronde avec une enveloppe au-dessus du titre, assurances séparées
   par un filet avec leur icône (plume, cadenas), flèche qui avance dans le bouton */
.contact-pastille { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%; background: rgba(122,45,45,.08); color: var(--bordeaux); }
.contact-pastille svg, .contact-assurances svg, .contact-envoyer svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-pastille svg { width: 24px; height: 24px; }
.contact-assurances { padding-top: 16px; border-top: 1px solid var(--trait); justify-content: space-between; }
.contact-assurances li { display: inline-flex; align-items: center; gap: 8px; }
.contact-assurances svg { flex: none; width: 16px; height: 16px; color: var(--ambre-encre); }
.contact-envoyer svg { width: 18px; height: 18px; transition: transform .3s var(--courbe); }
.contact-envoyer:hover svg, .contact-envoyer:focus-visible svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .contact-envoyer svg { transition: none; } }
.contact-merci { margin-top: 36px; padding: 40px; border: 1px solid var(--trait); border-radius: 10px; background: var(--papier-clair); font-family: var(--titre); font-size: 1.4rem; animation: tampon .7s var(--courbe) both; }

/* ── 404 (Page Not Found animée) ────────────────────────── */
.introuvable { max-width: 760px; margin: 0 auto; padding: 150px 16px 110px; text-align: center; }
.introuvable .boutons { justify-content: center; }
.assiette { width: min(320px, 80vw); margin: 0 auto 20px; overflow: visible; }
.assiette-plat circle { fill: var(--papier-clair); stroke: var(--trait); stroke-width: 3; }
.assiette-plat .assiette-creux { fill: var(--papier); stroke-width: 2; }
.assiette-ombre { fill: rgba(46,33,23,.12); }
.assiette-fourchette path, .assiette-couteau path { fill: none; stroke: var(--encre-douce); stroke-width: 4; stroke-linecap: round; }
.assiette-plat { animation: assiette 4s ease-in-out infinite; transform-origin: 120px 84px; }
.assiette-fourchette { animation: couvert 2.4s ease-in-out infinite; transform-origin: 38px 124px; }
.assiette-couteau { animation: couvert 2.4s ease-in-out infinite reverse; transform-origin: 202px 124px; }
@keyframes assiette { 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes couvert { 50% { transform: rotate(-10deg); } }
/* Inspiré de Page Not Found (21st) : le message arrive après l'assiette, des herbes traversent une fois, des taches d'ambre filent puis se posent */
.page-404 #contenu { position: relative; overflow: hidden; }
.introuvable { position: relative; }
.introuvable-ciel { position: absolute; inset: 0 -50vw; pointer-events: none; z-index: 0; }
.introuvable > :not(.introuvable-ciel) { position: relative; z-index: 1; }
.introuvable-ciel .tache { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--ambre); opacity: 0; will-change: transform, opacity; }
.introuvable-ciel .tache.bordeaux { background: var(--bordeaux); }
.introuvable-ciel .herbe { position: absolute; left: 0; width: 46px; height: 46px; color: var(--encre-douce); opacity: .35; will-change: transform; }
.introuvable-ciel .herbe svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.introuvable.arrivee > .surtitre, .introuvable.arrivee > h1, .introuvable.arrivee > .tete-page-chapeau, .introuvable.arrivee > .boutons { animation: arrivee-404 .6s var(--courbe) .5s both; }
.introuvable.arrivee > h1 { animation-delay: .62s; }
.introuvable.arrivee > .tete-page-chapeau { animation-delay: .74s; }
.introuvable.arrivee > .boutons { animation-delay: .86s; }
@keyframes arrivee-404 { from { opacity: 0; transform: translateY(14px); } }
.bouton-retour, .bouton-maison { display: inline-flex; align-items: center; gap: 8px; }
.bouton-retour svg, .bouton-maison svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--courbe); }
.bouton-retour:hover svg, .bouton-retour:focus-visible svg { transform: translateX(-4px); }
.bouton-maison:hover svg, .bouton-maison:focus-visible svg { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .introuvable-ciel { display: none; } .bouton-retour svg, .bouton-maison svg { transition: none; } }

/* Validation des formulaires (module SWP, aux couleurs du carnet) */
.fg .erreur-champ, .fg [data-erreur] { color: var(--bordeaux); font-size: .9rem; margin-top: 6px; }
.fg [aria-invalid="true"] { border-color: var(--bordeaux); }

/* Animations réduites : tout est lisible, rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-ecrire] .mot > span { transform: none; opacity: 1; filter: none; }
  .citation [data-mots] .mot { opacity: 1; }
  .signature-trait path { stroke-dashoffset: 0; }
}
@media print { .entete, .sommaire, .pied, .lettre, .rideau, .lecture-barre, .lecture-reste, .episode-nav { display: none !important; } body::before { display: none; } }

/* Secours : si le script ne se lance pas, le rideau d'arrivée se retire seul au bout de 3 s */
.rideau-arrivee .rideau { animation: secours-rideau 0s 3s forwards; }
.rideau-arrivee #contenu > *:not(.lecture-barre) { animation: secours-contenu 0s 3s forwards; }
@keyframes secours-rideau { to { opacity: 0; } }
@keyframes secours-contenu { to { transform: none; filter: none; opacity: 1; } }