/* Icare & Dédale : la carte du vol.
   Le site est une carte ancienne tirée en estampe. La mer est gravée en hachures,
   chaque lieu est une vignette en aplats décalés, et le vol d'Icare relie les lieux. */

@font-face { font-family: "Marcellus"; src: url("fonts/Marcellus-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/Alegreya.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/Alegreya-Italic.ttf") format("truetype"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  --nuit: #1F2A44;
  --nuit-profond: #141B2D;
  --or: #C9962B;
  --or-clair: #D8A63A;
  --brique: #B5452E;
  --vert: #3E6B5A;
  --papier: #EFE8D8;
  --papier-clair: #F7F3EA;
  --encre-douce: #46506A;
  /* Grain du papier */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Mer gravée : vaguelettes en quinconce, comme sur les cartes marines */
  --mer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cg fill='none' stroke='%231F2A44' stroke-opacity='.11' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M6 18 q9 -7 18 0 t18 0'/%3E%3Cpath d='M66 50 q9 -7 18 0 t18 0'/%3E%3C/g%3E%3C/svg%3E");
  /* Méridiens et parallèles */
  --graticule: linear-gradient(90deg, rgba(31,42,68,.06) 1px, transparent 1px), linear-gradient(rgba(31,42,68,.06) 1px, transparent 1px);
  --mesure: 32rem;
  --mx: 50%;
  --my: 30%;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--nuit) var(--papier); }

body {
  margin: 0;
  background-color: var(--papier);
  background-image: var(--grain), var(--graticule);
  background-size: 240px 240px, 480px 480px, 480px 480px;
  color: var(--nuit);
  font: 400 1.125rem/1.6 "Alegreya", Georgia, serif;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

/* Reflet nacré du papier, qui suit le pointeur */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60rem 40rem at var(--mx) var(--my), rgba(214, 233, 226, .5), rgba(240, 214, 222, .25) 45%, transparent 70%);
  mix-blend-mode: soft-light;
}

/* Mer gravée : couche fixe qui dérive très lentement, comme la houle */
body::after {
  content: ""; position: fixed; inset: -64px -120px; pointer-events: none; z-index: 0;
  background-image: var(--mer); background-size: 120px 64px;
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: houle 26s linear infinite; }
}
@keyframes houle { from { transform: translate(0, 0); } to { transform: translate(120px, 32px); } }

::selection { background: var(--or); color: var(--nuit-profond); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--brique); }
a:focus-visible { outline: 3px solid var(--brique); outline-offset: 4px; border-radius: 2px; }
h1, h2 { font-family: "Marcellus", Georgia, serif; font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; }
.defs { position: absolute; width: 0; height: 0; }
.evitement { position: absolute; left: 1rem; top: -4rem; background: var(--nuit); color: var(--papier); padding: .6rem 1rem; z-index: 10; }
.evitement:focus { top: 1rem; }

/* ---------- En-tête ---------- */
.entete {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 3.5rem);
}
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; font-family: "Marcellus", serif; font-size: 1.15rem; }
.marque em, .esperluette { font-family: "Alegreya", serif; font-style: italic; color: var(--or); }
.entete nav { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); font-family: "Marcellus", serif; letter-spacing: .04em; }
.entete nav a { text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.entete nav a:hover { border-bottom-color: var(--brique); }

/* ---------- La carte ---------- */
.carte { position: relative; z-index: 1; max-width: 78rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 4rem; }

/* Le vol : pointillé rouge révélé par un masque, et Icare qui le suit */
.vol { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.vol-trace { stroke: var(--brique); stroke-width: 4.5; stroke-dasharray: 15 10; stroke-linejoin: round; }
.navire-vol { opacity: 0; transition: opacity .4s; }
.anime .navire-vol { opacity: 1; }

/* ---------- I. Ouverture ---------- */
.ouverture {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: min(calc(100svh - 5rem), 52rem);
  padding-bottom: 2rem;
}
.cartouche-titre {
  position: relative; background: var(--papier-clair); background-image: var(--grain);
  border: 3px solid var(--nuit); outline: 1px solid var(--nuit); outline-offset: -10px;
  padding: clamp(1.5rem, 3vw, 2.6rem);
}
.cartouche-titre h1 { font-size: clamp(2.8rem, 5.6vw, 5rem); letter-spacing: -.01em; }
.chapeau { font-size: clamp(1.1rem, 1.4vw, 1.3rem); margin: 1.1rem 0 1.4rem; max-width: 26rem; }
.invite { margin: 0; font-family: "Marcellus", serif; color: var(--brique); letter-spacing: .06em; }
.invite::after { content: ""; display: inline-block; vertical-align: middle; width: 3.5rem; margin-left: .6rem; border-top: 4px dashed var(--brique); }
.rose { position: absolute; right: 0; top: 0; width: clamp(5rem, 9vw, 8rem); height: auto; font-family: "Marcellus", serif; fill: var(--nuit); }

/* ---------- Vignettes ---------- */
.vignette { margin: 0; position: relative; z-index: 1; }
.vignette svg { display: block; width: 100%; height: auto; overflow: visible; }
.vignette figcaption { font-family: "Marcellus", serif; font-size: 1.05rem; letter-spacing: .05em; text-align: center; margin-top: .3rem; }

/* Impression au passage d'Icare : les couleurs s'impriment, le trait est déjà là */
@media (prefers-reduced-motion: no-preference) {
  .js .lieu:not(.imprime) .bloc:not(.bloc-cle) { opacity: 0; clip-path: inset(0 100% 0 0); }
  .js .lieu.imprime .bloc-1 { animation: tirage 1s cubic-bezier(.16, 1, .3, 1) both; }
  .js .lieu.imprime .bloc-2 { animation: tirage 1s .4s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes tirage {
  from { clip-path: inset(0 100% 0 0); opacity: .3; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ---------- Noms de régions ---------- */
.region { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; margin: clamp(3rem, 7vw, 6rem) auto clamp(2rem, 4vw, 3rem); max-width: 40rem; transform: rotate(-1.5deg); }
.region::before, .region::after { content: ""; flex: 1; border-top: 1px solid rgba(31, 42, 68, .45); }
.region span { font: italic 400 clamp(1.3rem, 2.4vw, 1.8rem) "Alegreya", serif; letter-spacing: .32em; text-transform: uppercase; color: var(--vert); white-space: nowrap; }

/* ---------- Lieux ---------- */
.lieu { position: relative; z-index: 1; }
.lieu + .lieu { margin-top: clamp(4rem, 9vw, 8rem); }
.lieu-gauche, .lieu-droite { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); width: min(100%, 64rem); }
.lieu-droite { margin-left: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.lieu-droite .vignette { order: 2; }
.lieu-centre { display: grid; justify-items: center; text-align: center; gap: 1.5rem; }
.lieu-centre .vignette { width: min(100%, 26rem); }

/* Cartouche : encadré à double filet, comme les légendes des cartes anciennes */
.cartouche {
  background: var(--papier-clair); background-image: var(--grain);
  border: 2px solid var(--nuit); outline: 1px solid var(--nuit); outline-offset: -8px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.cartouche h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: .6rem; }
.cartouche p { margin: 0 0 .6rem; max-width: var(--mesure); }
.cartouche p:last-child { margin-bottom: 0; }
.etat { font-style: italic; color: var(--brique); }
.liens { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.liens a { font-family: "Marcellus", serif; letter-spacing: .03em; }

/* Livres : la vraie couverture reste visible, pour qu'on la reconnaisse sur Amazon */
.lieu-livre .cartouche { display: flex; gap: 1.25rem; align-items: flex-start; }
.couverture { flex: none; width: clamp(6rem, 11vw, 8.5rem); display: block; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.couverture img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 8; object-fit: cover; outline: 1px solid var(--nuit); }
.couverture:hover, .couverture:focus-visible { transform: translateY(-5px) rotate(-1deg); }
.cartouche-saga .couverture { width: clamp(5rem, 8vw, 6.5rem); }
.cartouche-saga .couverture + .couverture { margin-left: -2.2rem; margin-top: 1.2rem; }

/* ---------- Légende (pied) ---------- */
.legende-carte { position: relative; z-index: 1; padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; }
.legende-cadre {
  max-width: 34rem; margin: 0 auto; text-align: center;
  background: var(--nuit); color: var(--papier);
  border: 2px solid var(--nuit); outline: 1px solid var(--or); outline-offset: -9px;
  padding: 2rem 1.5rem;
}
.legende-cadre h2 { font-size: 1.8rem; color: var(--or-clair); margin-bottom: .8rem; }
.legende-cadre p { margin: .4rem 0; }
.legende-cadre .liens { justify-content: center; }
.legende-cadre a:focus-visible { outline-color: var(--or-clair); }
.promesse { font-style: italic; color: #CFC6B2; font-size: .95rem; }

/* ---------- Téléphone ---------- */
@media (max-width: 860px) {
  .ouverture { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rose { width: 4.5rem; top: -.5rem; }
  .cartouche-titre { margin-right: 3.5rem; }
  .lieu-gauche, .lieu-droite { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 1rem; }
  .lieu-droite .vignette { order: 0; }
  .lieu-gauche .vignette { width: 88%; }
  .lieu-droite .vignette { width: 88%; margin-left: auto; }
}
@media (max-width: 560px) {
  .entete { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .entete nav { gap: 1.1rem; font-size: .95rem; }
  .region span { letter-spacing: .18em; font-size: 1.1rem; }
  .lieu-livre .cartouche { flex-direction: column; }
}


/* ---------- Ciel : nuages gravés qui dérivent derrière la carte ---------- */
.ciel { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.nuage { position: absolute; width: 14rem; height: auto; overflow: visible; }
.ciel .n1 { top: 12%; left: -16rem; width: 16rem; }
.ciel .n2 { top: 38%; left: -12rem; width: 11rem; opacity: .85; }
.ciel .n3 { top: 64%; left: -18rem; width: 18rem; }
.ciel .n4 { top: 84%; left: -10rem; width: 9rem; opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .ciel .n1 { animation: derive 95s linear infinite; animation-delay: -20s; }
  .ciel .n2 { animation: derive 140s linear infinite; animation-delay: -90s; }
  .ciel .n3 { animation: derive 120s linear infinite; animation-delay: -55s; }
  .ciel .n4 { animation: derive 170s linear infinite; animation-delay: -10s; }
}
@media (prefers-reduced-motion: reduce) {
  .ciel .n1 { left: 70%; } .ciel .n2 { left: 6%; } .ciel .n3 { left: 80%; } .ciel .n4 { left: 30%; }
}
@keyframes derive { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 22rem)); } }

/* ---------- Îles de l'accueil ---------- */
.vignette-lien { display: block; text-decoration: none; border-radius: 4px; }
.vignette-lien .vignette svg, .vignette-lien .gravure { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.vignette-lien:hover .vignette svg, .vignette-lien:focus-visible .vignette svg, .vignette-lien:hover .gravure, .vignette-lien:focus-visible .gravure { transform: translateY(-8px) scale(1.02); }
.vignette-lien figcaption { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; transition: text-decoration-color .3s; }
.vignette-lien:hover figcaption { text-decoration-color: var(--brique); }
.ile .vignette figcaption { font-size: 1.3rem; }
.oeuvres { list-style: none; margin: .4rem 0 1rem; padding: 0; font-family: "Marcellus", serif; font-size: 1.1rem; }
.oeuvres li { padding: .35rem 0; border-bottom: 1px solid rgba(31, 42, 68, .25); }
.oeuvres li::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .7rem; border-radius: 50%; background: var(--brique); vertical-align: middle; }
.ile .liens a { color: var(--brique); font-size: 1.15rem; }
.ile .liens a::after { content: ""; display: inline-block; width: 2.4rem; margin-left: .5rem; vertical-align: middle; border-top: 4px dashed var(--brique); }

/* ---------- Pages d'îles ---------- */
.ouverture-ile { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); }
.retour { margin: 0 0 1rem; font-family: "Marcellus", serif; }
/* Retour : un petit chevron gravé plutôt qu'un trait, qui se lirait comme un tiret */
.retour a::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .55em; vertical-align: .08em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.entete nav a[aria-current="page"] { border-bottom-color: var(--or); }

/* ---------- Voile : on traverse les nuages en changeant d'île ---------- */
.voile { position: fixed; inset: 0; pointer-events: none; z-index: 50; visibility: hidden; }
.voile::before { content: ""; position: absolute; inset: 0; background: var(--papier-clair); opacity: 0; }
.voile .nuage { width: 70vmax; height: auto; }
.voile .v1 { top: -12vmax; left: -18vmax; }
.voile .v2 { top: 18vh; right: -24vmax; }
.voile .v3 { bottom: -14vmax; left: 4vw; }
.voile .v4 { top: 30vh; left: -30vmax; }
.voile .v5 { bottom: -6vmax; right: -14vmax; }

/* Départ : l'île cliquée grossit, les nuages se referment */
.envol .voile, .arrivee .voile { visibility: visible; }
.envol .voile::before { animation: voile-ferme .7s .15s ease-in both; }
.envol .voile .v1, .envol .voile .v4 { animation: entre-gauche .8s cubic-bezier(.5, 0, .2, 1) both; }
.envol .voile .v2, .envol .voile .v5 { animation: entre-droite .8s cubic-bezier(.5, 0, .2, 1) both; }
.envol .voile .v3 { animation: entre-bas .8s cubic-bezier(.5, 0, .2, 1) both; }
.envol .zoom svg, .envol .zoom .gravure { transition: transform .9s cubic-bezier(.5, 0, .2, 1); transform: scale(2.4); }

/* Arrivée : les nuages s'écartent et l'île se pose */
.arrivee .voile::before { animation: voile-ouvre .9s .1s ease-out both; }
.arrivee .voile .v1, .arrivee .voile .v4 { animation: sort-gauche 1.3s cubic-bezier(.16, 1, .3, 1) both; }
.arrivee .voile .v2, .arrivee .voile .v5 { animation: sort-droite 1.3s cubic-bezier(.16, 1, .3, 1) both; }
.arrivee .voile .v3 { animation: sort-bas 1.3s cubic-bezier(.16, 1, .3, 1) both; }
.arrivee .ouverture .vignette svg, .arrivee .ouverture .gravure { animation: atterrit 1.4s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes voile-ferme { from { opacity: 0; } to { opacity: 1; } }
@keyframes voile-ouvre { from { opacity: 1; } to { opacity: 0; } }
@keyframes entre-gauche { from { transform: translateX(-90vmax); } to { transform: translateX(10vmax); } }
@keyframes entre-droite { from { transform: translateX(90vmax); } to { transform: translateX(-10vmax); } }
@keyframes entre-bas { from { transform: translateY(70vmax); } to { transform: translateY(-14vmax); } }
@keyframes sort-gauche { from { transform: translateX(10vmax); } to { transform: translateX(-100vmax); } }
@keyframes sort-droite { from { transform: translateX(-10vmax); } to { transform: translateX(100vmax); } }
@keyframes sort-bas { from { transform: translateY(-14vmax); } to { transform: translateY(80vmax); } }
@keyframes atterrit { from { transform: scale(1.35); opacity: .2; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .voile { display: none; } }

@media (max-width: 860px) {
  .ouverture-ile { grid-template-columns: minmax(0, 1fr); }
  .ciel .nuage { width: 9rem; }
}


/* ---------- Gravures : le trait est là, la couleur s'imprime au passage d'Icare ---------- */
.gravure { display: grid; }
.gravure img { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .lieu:not(.imprime) .couleur { clip-path: inset(0 100% 0 0); }
  .js .lieu.imprime .couleur { animation: impression 1.6s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes impression {
  from { clip-path: inset(0 100% 0 0); filter: saturate(.4); }
  to { clip-path: inset(0 0 0 0); filter: saturate(1); }
}
.ouverture .vignette { align-self: center; }
.ciel .nuage { opacity: .9; }

/* ---------- Décor : créatures de la carte ---------- */
.rose { width: clamp(4.5rem, 7vw, 6.5rem); height: auto; transform-origin: 50% 64%; }
.decor { position: absolute; z-index: 0; pointer-events: none; }
.decor img { display: block; width: 100%; height: auto; }
.decor-baleine { width: clamp(9rem, 17vw, 15rem); right: 4%; top: -38%; }
.decor-serpent { width: clamp(8rem, 15vw, 13rem); right: 3%; bottom: -30%; }
.ouverture-ile .decor-baleine, .ouverture-ile .decor-serpent { top: auto; bottom: -6%; }
.ouverture-ile .decor-serpent { right: auto; left: 2%; }
.ouverture-ile .decor-baleine { right: auto; left: 2%; }
@media (prefers-reduced-motion: no-preference) {
  .rose { animation: boussole 9s ease-in-out infinite alternate; }
  .decor-baleine { animation: nage 18s ease-in-out infinite alternate; }
  .decor-baleine img { animation: flotte 4.5s ease-in-out infinite alternate; }
  .decor-serpent img { animation: ondule 5.5s ease-in-out infinite alternate; transform-origin: 50% 90%; }
}
@keyframes boussole { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
@keyframes nage { from { transform: translateX(-3.5rem); } to { transform: translateX(2.5rem); } }
@keyframes flotte { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(7px) rotate(1.5deg); } }
@keyframes ondule { from { transform: translateY(4px) rotate(-3deg) scaleX(.97); } to { transform: translateY(-6px) rotate(2.5deg) scaleX(1.03); } }
@media (max-width: 860px) {
  .decor-baleine { top: -14%; right: 0; }
  .decor-serpent { bottom: -10%; right: 0; }
}

/* Navire gravé qui suit la route : il tangue sur la houle */
.navire-img { transform-box: fill-box; transform-origin: 50% 85%; }
@media (prefers-reduced-motion: no-preference) {
  .navire-img { animation: tangage 2.2s ease-in-out infinite alternate; }
}
@keyframes tangage { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(3px); } }


/* ---------- Mise en page resserrée : grandes îles, cartouches posés dessus ---------- */
.ouverture { min-height: min(calc(100svh - 5rem), 46rem); padding-bottom: 0; }
.lieu-gauche, .lieu-droite { width: min(100%, 74rem); grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 0; }
.lieu-droite { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.lieu-gauche .cartouche { margin-left: -3.5rem; position: relative; z-index: 2; }
.lieu-droite .cartouche { margin-right: -3.5rem; position: relative; z-index: 2; }
.lieu + .lieu { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.region { margin: clamp(1.5rem, 4vw, 3rem) auto clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 860px) {
  .lieu-gauche, .lieu-droite { grid-template-columns: minmax(0, 1fr); }
  .lieu-gauche .cartouche, .lieu-droite .cartouche { margin: .5rem 0 0; }
  .lieu-gauche .vignette, .lieu-droite .vignette { width: 100%; }
}
.lieu-droite > .vignette-lien { order: 2; }
@media (max-width: 860px) { .lieu-droite > .vignette-lien { order: 0; } }

/* ---------- Pied de carte discret ---------- */
.pied-carte { position: relative; z-index: 1; text-align: center; padding: 1.5rem 1rem 2.5rem; margin: 0 auto; max-width: 46rem; border-top: 1px solid rgba(31, 42, 68, .3); }
.pied-carte p { margin: .3rem 0; }
.pied-carte .pied-liens { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem 1.6rem; font-family: "Marcellus", serif; font-size: 1rem; }
.pied-carte .promesse { color: var(--encre-douce); font-size: .9rem; }

/* ---------- Pages de texte (confidentialité, mentions légales) ---------- */
.page-texte { position: relative; z-index: 1; max-width: 42rem; margin: 1rem auto 3rem; background: var(--papier-clair); background-image: var(--grain); border: 2px solid var(--nuit); outline: 1px solid var(--nuit); outline-offset: -9px; padding: clamp(1.5rem, 5vw, 3rem); }
.page-texte h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: .3rem; }
.page-texte h2 { font-size: 1.45rem; margin: 2rem 0 .6rem; }
.page-texte p, .page-texte li { max-width: 65ch; }
.page-texte ul { padding-left: 1.2rem; }
.page-texte li { margin: .35rem 0; }
.page-texte .date { font-style: italic; color: var(--encre-douce); margin-top: 0; }

/* ---------- Polices des îles : seuls les titres changent, le texte reste en Alegreya ---------- */
@font-face { font-family: "Fredericka"; src: url("fonts/FrederickatheGreat-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Grenze Gotisch"; src: url("fonts/GrenzeGotisch.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; src: url("fonts/SortsMillGoudy-Regular.ttf") format("truetype"); font-display: swap; }
.theme-jeux h1, .theme-jeux h2 { font-family: "Fredericka", "Marcellus", serif; letter-spacing: .01em; }
.theme-recits h1, .theme-recits h2 { font-family: "Grenze Gotisch", "Marcellus", serif; font-weight: 600; letter-spacing: 0; }
.theme-jours h1, .theme-jours h2 { font-family: "Sorts Mill Goudy", "Marcellus", serif; }
/* Le pied de page garde la police du studio */
.pied-carte, .pied-carte * { font-family: inherit; }

/* ---------- Repère « Aborder l'île » : visible au doigt, et au survol à la souris ---------- */
.vignette-lien { position: relative; }
.aborder {
  position: absolute; left: 50%; bottom: 3.2rem; transform: translateX(-50%);
  font-family: "Marcellus", serif; font-size: .95rem; letter-spacing: .06em; white-space: nowrap;
  background: var(--papier-clair); color: var(--brique);
  border: 1.5px solid var(--nuit); outline: 1px solid var(--nuit); outline-offset: -5px; padding: .45rem .95rem .4rem;
  transition: opacity .3s, transform .4s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) {
  .aborder { opacity: 0; transform: translate(-50%, 6px); }
  .vignette-lien:hover .aborder, .vignette-lien:focus-visible .aborder { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Fin de page d'île : continuer le voyage ---------- */
.suite { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; max-width: 64rem; margin: clamp(3rem, 6vw, 5rem) auto 0; }
.retour-carte { font-family: "Marcellus", serif; font-size: 1.05rem; }
.suite-ile {
  display: inline-flex; flex-direction: column; text-decoration: none; text-align: right;
  background: var(--papier-clair); background-image: var(--grain);
  border: 2px solid var(--nuit); outline: 1px solid var(--nuit); outline-offset: -7px;
  padding: .9rem 1.4rem; font-family: "Marcellus", serif; font-size: 1.5rem;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.suite-ile span { font-family: "Alegreya", serif; font-style: italic; font-size: .95rem; color: var(--brique); }
.suite-ile:hover, .suite-ile:focus-visible { transform: translateX(6px); }

/* ---------- Présentation d'un livre ---------- */
.accroche { font-style: italic; font-size: 1.15rem; color: var(--brique); }
.a-completer { background: rgba(201, 150, 43, .18); border-top: 2px solid var(--or); padding: .7rem .9rem; font-style: italic; }

/* ---------- En-tête fixe : se cache en descendant, revient en remontant ---------- */
.entete {
  position: sticky; top: 0; z-index: 40;
  background-color: rgba(239, 232, 216, .94); background-image: var(--grain);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .3s;
}
.entete.colle { box-shadow: 0 1px 0 rgba(31, 42, 68, .25), 0 6px 14px -10px rgba(31, 42, 68, .35); }
.entete.cache { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .entete { transition: none; } }


/* =========================================================================
   Mode nuit : pages des livres. On quitte la carte pour entrer dans le roman.
   ========================================================================= */
.mode-nuit { background-color: #141B2D; background-image: none; color: #EDE6D6; }
.mode-nuit::after, .mode-nuit .ciel, .mode-nuit .vol, .mode-nuit .voile { display: none; }
.mode-nuit a { color: #EDE6D6; }
.mode-nuit a:hover { text-decoration-color: var(--or-clair); }
.mode-nuit ::selection { background: var(--or-clair); color: var(--nuit-profond); }
.mode-nuit .entete { background-color: rgba(20, 27, 45, .94); background-image: none; color: #EDE6D6; }
.mode-nuit .entete nav a:hover { border-bottom-color: var(--or-clair); }
.mode-nuit .pied-carte { border-top-color: rgba(237, 230, 214, .25); }
.mode-nuit .pied-carte .promesse { color: #B8B0A0; }
.mode-nuit h1, .mode-nuit h2, .mode-nuit h3 { color: var(--or-clair); }

.livre { position: relative; z-index: 1; }
.livre-tete {
  position: relative; margin: 0 calc(-1 * clamp(1rem, 4vw, 3rem)); padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  background: linear-gradient(90deg, rgba(20, 27, 45, .98) 30%, rgba(20, 27, 45, .72) 60%, rgba(20, 27, 45, .35)), var(--bandeau) center / cover no-repeat;
  border-bottom: 1px solid rgba(216, 166, 58, .5);
}
.livre-tete-grille { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 36rem); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: 1.5rem; }
.livre-couverture img { display: block; width: 100%; height: auto; outline: 1px solid rgba(216, 166, 58, .6); outline-offset: 6px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); }
.serie { margin: 0 0 .4rem; font-style: italic; color: var(--or-clair); letter-spacing: .04em; }
.livre h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; margin-bottom: 1rem; }
.accroche-livre { font-style: italic; font-size: 1.3rem; color: #F2DDA4; margin: 0 0 1.2rem; }
.ordre { display: inline-block; margin: 0 0 1.2rem; padding: .45rem .8rem; border: 1px solid var(--or-clair); color: #F2DDA4; }
.livre-resume p { margin: 0 0 .8rem; max-width: 62ch; }
.bouton-or {
  display: inline-block; margin-top: .8rem; padding: .7rem 1.4rem; text-decoration: none;
  font-family: "Marcellus", serif; letter-spacing: .05em;
  background: var(--or-clair); border: 1px solid var(--or-clair); outline: 1px solid rgba(20, 27, 45, .6); outline-offset: -5px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), background-color .3s;
}
.mode-nuit .bouton-or { color: var(--nuit-profond); }
.bouton-or:hover, .bouton-or:focus-visible { transform: translateY(-2px); background: #E6B95A; }

.planches-livre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.2rem); margin: clamp(3rem, 6vw, 5rem) 0; }
.planche-livre { margin: 0; border: 1px solid rgba(216, 166, 58, .55); outline: 1px solid rgba(216, 166, 58, .25); outline-offset: 5px; background: rgba(9, 13, 24, .55); }
.planche-livre img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.planche-livre figcaption { padding: 1.1rem 1.25rem 1.3rem; }
.planche-livre h3 { font-family: "Grenze Gotisch", "Marcellus", serif; font-weight: 600; font-size: 1.7rem; margin: 0 0 .5rem; }
.planche-livre p { margin: 0; font-size: 1.02rem; }

.livre-seule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin: 0 0 clamp(3rem, 6vw, 5rem); }
.livre-seule img { width: 100%; height: auto; display: block; outline: 1px solid rgba(216, 166, 58, .5); outline-offset: 6px; }
.livre-seule h2, .livre-promesse h2, .livre-voisins h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .8rem; }
.livre-seule p, .livre-promesse p { max-width: 62ch; }
.livre-promesse { max-width: 46rem; margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; }
.livre-promesse p { margin-left: auto; margin-right: auto; }
.livre-voisins { text-align: center; border-top: 1px solid rgba(216, 166, 58, .35); padding-top: 2.5rem; }
.livre-voisins > div { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 1rem 0 2rem; }
.voisin { display: flex; align-items: center; gap: 1rem; text-decoration: none; text-align: left; }
.voisin img { width: 5.5rem; height: auto; outline: 1px solid rgba(216, 166, 58, .5); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.voisin:hover img { transform: translateY(-4px) rotate(-1deg); }
.voisin span { display: flex; flex-direction: column; font-family: "Grenze Gotisch", serif; font-weight: 600; font-size: 1.5rem; color: var(--or-clair); }
.voisin em { font-family: "Alegreya", serif; font-weight: 400; font-size: .95rem; color: #EDE6D6; }

@media (max-width: 860px) {
  .livre-tete { background: linear-gradient(180deg, rgba(20, 27, 45, .55), rgba(20, 27, 45, .97) 45%), var(--bandeau) top / 100% auto no-repeat; }
  .livre-tete-grille { grid-template-columns: minmax(0, 1fr); }
  .livre-couverture { width: 9.5rem; }
  .planches-livre, .livre-seule { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Entrées des livres : un rideau propre à chaque roman ---------- */
.entree { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #0B0F1A; cursor: pointer; overflow: hidden;
  animation: rideau-sort .7s 2.1s cubic-bezier(.5, 0, .2, 1) forwards; }
.entree-vue .entree, .entree.passe { display: none; }
.entree-libelle { position: absolute; bottom: 14vh; left: 0; right: 0; margin: 0; text-align: center; font-family: "Grenze Gotisch", serif; font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 2rem); color: var(--or-clair); letter-spacing: .04em; opacity: 0; animation: libelle 1.9s .2s ease forwards; }
@keyframes rideau-sort { to { opacity: 0; visibility: hidden; } }
@keyframes libelle { 20%, 75% { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .entree { display: none; } }

/* Roncevaux : le cor, des ondes d'or qui partent du centre, puis la page tremble */
.ondes { position: relative; width: 1px; height: 1px; }
.ondes i { position: absolute; left: -10vmin; top: -10vmin; width: 20vmin; height: 20vmin; border-radius: 50%; border: 3px solid var(--or-clair); opacity: 0;
  animation: onde 1.6s cubic-bezier(.2, .6, .3, 1) forwards; }
.ondes i:nth-child(2) { animation-delay: .25s; } .ondes i:nth-child(3) { animation-delay: .5s; } .ondes i:nth-child(4) { animation-delay: .75s; }
@keyframes onde { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(7); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.entree-vue) .mode-nuit:has(.entree-cor) .livre { animation: secousse .45s 2.2s ease-out both; }
}
@keyframes secousse { 0%, 100% { transform: none; } 20% { transform: translate(-5px, 2px); } 45% { transform: translate(4px, -2px); } 70% { transform: translate(-2px, 1px); } }

/* Ogier : le damier se renverse, case par case, en diagonale */
.entree-echiquier { background: transparent; animation-delay: 2.3s; }
.damier { position: absolute; inset: 0; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); perspective: 900px; }
.damier i { background: #1A1410; animation: case .55s calc(.6s + var(--i) * 70ms) cubic-bezier(.5, 0, .3, 1) forwards; transform-origin: 50% 100%; }
.damier i.ivoire { background: #E8DEC6; }
@keyframes case { to { transform: rotateX(-95deg); opacity: 0; } }

/* Valdrake I : trois griffures déchirent l'écran */
.griffes { position: absolute; inset: 0; width: 100%; height: 100%; }
.griffes path { fill: none; stroke: #B5452E; stroke-width: 14px; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 160; stroke-dashoffset: 160; animation: griffe .32s cubic-bezier(.6, 0, .3, 1) forwards; }
.griffes path:nth-child(1) { animation-delay: .5s; } .griffes path:nth-child(2) { animation-delay: .62s; } .griffes path:nth-child(3) { animation-delay: .74s; }
@keyframes griffe { to { stroke-dashoffset: 0; } }
.entree-griffe { animation: dechire .8s 1.6s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes dechire { to { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); visibility: hidden; } }

/* Valdrake II : la lune noire avale le soleil, il ne reste qu'un halo d'or */
.eclipse { position: relative; width: 34vmin; height: 34vmin; }
.eclipse i { position: absolute; inset: 0; border-radius: 50%; }
.eclipse .soleil { background: var(--or-clair); animation: halo 1.2s 1s ease-out forwards; }
.eclipse .lune { background: #0B0F1A; transform: translateX(-160%); animation: lune 1.2s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes lune { to { transform: translateX(0) scale(.96); } }
@keyframes halo { to { box-shadow: 0 0 0 2px rgba(216, 166, 58, .9), 0 0 60px 18px rgba(216, 166, 58, .35); } }

/* Corrections du mode nuit */
.mode-nuit .carte { z-index: auto; }          /* le rideau d'entrée passe devant l'en-tête */
.mode-nuit::before { display: none; }          /* pas de reflet nacré sur la nuit */
.livre-tete { background: radial-gradient(70rem 30rem at 15% 0%, rgba(216, 166, 58, .12), transparent 70%); }
.livre-bandeau { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.livre-bandeau img { display: block; width: 100%; height: auto; outline: 1px solid rgba(216, 166, 58, .5); outline-offset: 6px; }
.griffes path { stroke-dasharray: 100; stroke-dashoffset: 100; }
@media (max-width: 860px) { .livre-tete { background: none; } }

/* Griffures en barres (plus fiables que des tirets SVG) : elles se tracent de haut en bas */
.griffes { position: absolute; inset: 0; }
.griffes i { position: absolute; top: -15vh; width: clamp(10px, 1.4vw, 18px); height: 135vh; border-radius: 50%;
  background: linear-gradient(#B5452E, #8E2F1E); transform-origin: 50% 0; transform: rotate(-28deg) scaleY(0);
  animation: griffure .35s cubic-bezier(.6, 0, .3, 1) forwards; }
.griffes i:nth-child(1) { left: 34%; animation-delay: .5s; }
.griffes i:nth-child(2) { left: 46%; animation-delay: .6s; }
.griffes i:nth-child(3) { left: 58%; animation-delay: .7s; }
@keyframes griffure { to { transform: rotate(-28deg) scaleY(1); } }

/* Logo du studio à côté du titre de l'accueil */
.titre-logo { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.2rem); }
.titre-logo img { flex: none; width: 1.9em; height: auto; }
@media (max-width: 560px) { .titre-logo img { width: 1.6em; } }
.cartouche-titre h1.titre-logo { font-size: clamp(2.4rem, 4.3vw, 4rem); }
.titre-logo img { width: 1.75em; }

/* ---------- Logo animé du titre : le labyrinthe se trace, puis l'aile se déploie ---------- */
.titre-logo .logo-anime { flex: none; width: 1.75em; height: auto; overflow: visible; }
@media (max-width: 560px) { .titre-logo .logo-anime { width: 1.6em; } }
@media (prefers-reduced-motion: no-preference) {
  .logo-anime circle { animation: anneau 1s cubic-bezier(.16, 1, .3, 1) both; }
  .logo-anime #anneau2 { animation-delay: .12s; }
  .logo-anime #anneau3 { animation-delay: .24s; }
  .logo-anime .mur { animation: apparait .4s .7s ease-out both; }
  .logo-anime .plume { transform-box: view-box; transform-origin: 0 0; animation: plume .7s cubic-bezier(.2, 1.3, .4, 1) both; }
  .logo-anime .plume:nth-child(1) { animation-delay: 1.2s; }
  .logo-anime .plume:nth-child(2) { animation-delay: 1.1s; }
  .logo-anime .plume:nth-child(3) { animation-delay: 1s; }
  .logo-anime .plume:nth-child(4) { animation-delay: .9s; }
  .logo-anime .plume:nth-child(5) { animation-delay: .8s; }
  .logo-anime .plume:nth-child(6) { animation-delay: 1.05s; }
  .logo-anime .plume:nth-child(7) { animation-delay: .95s; }
  .logo-anime .plume:nth-child(8) { animation-delay: .85s; }
  .logo-anime .plume:nth-child(9) { animation-delay: .75s; }
  /* Au survol du titre, l'aile bat une fois */
  .titre-logo:hover .logo-anime #aile { transform-box: view-box; transform-origin: 230px 302px; animation: battement-aile .9s ease-in-out; }
}
@keyframes anneau { from { stroke-dashoffset: 360; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes plume { from { transform: rotate(48deg) scale(.15); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes battement-aile { 0%, 100% { transform: none; } 35% { transform: rotate(14deg) scale(.96); } 65% { transform: rotate(-6deg); } }