/* La vitrine des livres (la page d'accueil) : la mise en page de celle d'Ankor (accroche animée, cartes qui
   flottent, apparitions au défilement, bande de nuit, appel final), l'identité des livres d'Ibrahim
   (edition/CHARTE.md § 4) : les titres en Luckiest Guy, l'encre violette, le parchemin des pages de jeu, la
   frise de triangles des pages de texte. Le dégradé va de la lave au ciel de nuit.
   Téléphone d'abord, deux colonnes dès 900 px. La couleur ne porte jamais seule une information
   (Florian ne distingue pas le jaune du vert) : chaque repère a aussi son mot ou son signe. */

/* ── Les polices, servies par le site (aucune police chargée ailleurs) ── */

@font-face {
  font-family: "Luckiest Guy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/luckiest-guy-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Luckiest Guy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/luckiest-guy-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito Variable";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(fonts/nunito-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Variable";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(fonts/nunito-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Les jetons : le parchemin et l'encre le jour, le ciel du Sud la nuit ── */

/* Mise en page : une bande pleine largeur par section, le contenu dans une colonne de 1 120 px. */
:root {
  --titre: "Luckiest Guy", "Arial Black", "Trebuchet MS", system-ui, sans-serif;
  --police: "Nunito Variable", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fond: #fbf4e6;
  --fond-2: #f4e8d0;
  --carte: #fffdf8;
  --texte: #2b1a63;
  --doux: #5f5683;
  --trait: #e7d8bb;
  --lien: #5a2bc4;
  --accent: #c8431b;
  --lagon: #0f7480;
  --ombre: rgb(43 26 99 / 0.3);
  --degrade-doux: linear-gradient(165deg, #fff1dc 0%, #fde3d3 48%, #ece2fb 100%);
  --luciole: #ffcf5a;
  --luciole-halo: rgb(255 207 90 / 0.55);
  --halo-1: #ffb38a;
  --halo-2: #c9b6ff;
  --halo-3: #8fd9e0;
  --halo-opacite: 0.5;
  --logo-nom: #12396b;
  --logo-devise: #1d5c9f;

  /* Les mêmes dans les deux thèmes : la lave des boutons, la bande de nuit. */
  --degrade: linear-gradient(115deg, #f2892f 0%, #d9481f 34%, #8f2fc4 74%, #4a2499 100%);
  --bouton-texte: #ffffff;
  --nuit: #160c38;
  --nuit-2: #2c1a6b;
  --nuit-texte: #e9e3ff;
  --nuit-doux: #c3b9ea;
  --etoile: #fff4d1;
  --rayon: 18px;
  --ombre-haute: 0 24px 48px -24px var(--ombre), 0 2px 6px rgb(43 26 99 / 0.07);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #130b2e;
    --fond-2: #1a1040;
    --carte: #221650;
    --texte: #f3eeff;
    --doux: #bcb2dd;
    --trait: #362a70;
    --lien: #c9b8ff;
    --accent: #ff8a5c;
    --lagon: #5fd3dc;
    --ombre: rgb(0 0 0 / 0.55);
    --degrade-doux: linear-gradient(165deg, #1c1146 0%, #24113f 52%, #2b1236 100%);
    --halo-opacite: 0.16;
  --logo-nom: #f3f7fc;
  --logo-devise: #a9dcfa;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fond: #130b2e;
  --fond-2: #1a1040;
  --carte: #221650;
  --texte: #f3eeff;
  --doux: #bcb2dd;
  --trait: #362a70;
  --lien: #c9b8ff;
  --accent: #ff8a5c;
  --lagon: #5fd3dc;
  --ombre: rgb(0 0 0 / 0.55);
  --degrade-doux: linear-gradient(165deg, #1c1146 0%, #24113f 52%, #2b1236 100%);
  --halo-opacite: 0.16;
  --logo-nom: #f3f7fc;
  --logo-devise: #a9dcfa;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.6 var(--police);
  overflow-x: hidden;
}

/* La bande au-dessus de l'en-tête collant, sur un téléphone à encoche. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--fond);
}

img {
  max-width: 100%;
}

a {
  color: var(--lien);
}

.largeur {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

@media (min-width: 640px) {
  .largeur {
    padding-left: max(28px, env(safe-area-inset-left, 0px));
    padding-right: max(28px, env(safe-area-inset-right, 0px));
  }
}

.evitement {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--carte);
  padding: 8px 14px;
  border-radius: 999px;
}

.evitement:focus {
  left: 12px;
}

:focus-visible {
  outline: 3px solid var(--lien);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

/* ── Le logo ── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texte);
  text-decoration: none;
}

.logo img {
  width: 44px;
  height: 44px;
  flex: none;
}

/* Le nom et la devise, comme sur le logo (marque/) : « À ciel » léger, « ouvert » gras, en bleu nuit. */
.logo-mot {
  display: grid;
  gap: 3px;
  line-height: 1;
}

.logo-nom {
  color: var(--logo-nom);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logo-nom strong {
  font-weight: 850;
}

.logo-devise {
  color: var(--logo-devise);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Le texte en dégradé (titre de l'accroche) : lisible aussi sans dégradé. */
.degrade-texte {
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (forced-colors: active) {
  .degrade-texte {
    background: none;
    color: CanvasText;
  }
}

/* L'étiquette en pilule (« LA COLLECTION », « POUR QUI »). */
.pastille-titre {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Les boutons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-grand {
  min-height: 54px;
  padding: 0 26px;
  font-size: 1.02rem;
}

.btn-plein {
  color: var(--bouton-texte);
  background: var(--degrade);
  background-size: 140% 100%;
  box-shadow: 0 10px 24px -10px rgb(200 67 27 / 0.7);
}

.btn-plein:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgb(200 67 27 / 0.8);
}

.btn-clair {
  color: var(--texte);
  background: var(--carte);
  border: 1px solid var(--trait);
}

.btn-clair:hover {
  transform: translateY(-2px);
}

.btn-blanc {
  color: #3a1d85;
  background: #ffffff;
  box-shadow: 0 14px 30px -14px rgb(22 12 56 / 0.6);
}

.btn-blanc:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover {
    transition: none;
    transform: none;
  }
}

/* ── L'en-tête ── */

.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--fond) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow 0.25s ease;
}

.entete.decolle {
  box-shadow: 0 1px 0 var(--trait), 0 10px 30px -22px var(--ombre);
}

.entete-dedans {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.nav {
  display: none;
  gap: 24px;
  margin-left: 18px;
}

.nav a {
  color: var(--doux);
  font-weight: 750;
  font-size: 0.95rem;
  text-decoration: none;
}

.nav a:hover {
  color: var(--texte);
}

.entete-actions {
  margin-left: auto;
}

@media (max-width: 420px) {
  .entete-actions .btn {
    padding: 0 14px;
    font-size: 0.88rem;
  }
}

@media (min-width: 980px) {
  .nav {
    display: flex;
  }
}

/* ── L'accroche ── */

.hero {
  position: relative;
  padding-block: 36px 96px;
  background: var(--degrade-doux);
  overflow: hidden;
}

/* Trois halos flous derrière le texte : le soleil, la nuit, le lagon. */
.hero::before,
.hero::after,
.hero-grille::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: var(--halo-opacite);
  pointer-events: none;
  z-index: 0;
}

/* Le texte et les cartes passent devant les halos (sinon ::after, peint en dernier, les voile). */
.hero-grille,
.vague,
.hero-texte,
.hero-cartes {
  position: relative;
  z-index: 1;
}

.vague {
  position: absolute;
}

.hero::before {
  width: 340px;
  height: 340px;
  background: var(--halo-1);
  top: -90px;
  right: 6%;
}

.hero::after {
  width: 300px;
  height: 300px;
  background: var(--halo-2);
  bottom: -60px;
  right: 32%;
}

.hero-grille::before {
  width: 260px;
  height: 260px;
  background: var(--halo-3);
  top: 30%;
  left: -140px;
}

/* Les lucioles de Koko et Zéklèr : des points qui dérivent et clignotent, comme leur code. */
.lucioles i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--luciole);
  box-shadow: 0 0 10px 4px var(--luciole-halo), 0 0 26px 10px rgb(255 207 90 / 0.2);
  opacity: 0;
  pointer-events: none;
}

.lucioles i:nth-child(1) { top: 18%; left: 8%; }
.lucioles i:nth-child(2) { top: 64%; left: 44%; }
.lucioles i:nth-child(3) { top: 12%; left: 58%; }
.lucioles i:nth-child(4) { top: 78%; left: 86%; }
.lucioles i:nth-child(5) { top: 40%; left: 93%; }
.lucioles i:nth-child(6) { top: 86%; left: 14%; }
.lucioles i:nth-child(7) { top: 30%; left: 36%; }

@keyframes deriver {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 1; }
  30% { opacity: 0.25; }
  42% { opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: translate(var(--dx, 40px), var(--dy, -60px)); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .lucioles i {
    animation: deriver var(--duree, 9s) ease-in-out infinite;
    animation-delay: var(--attente, 0s);
  }
  .lucioles i:nth-child(1) { --dx: 60px; --dy: -50px; --duree: 10s; }
  .lucioles i:nth-child(2) { --dx: -40px; --dy: -80px; --duree: 8s; --attente: -3s; }
  .lucioles i:nth-child(3) { --dx: 30px; --dy: 60px; --duree: 11s; --attente: -6s; }
  .lucioles i:nth-child(4) { --dx: -70px; --dy: -40px; --duree: 9s; --attente: -2s; }
  .lucioles i:nth-child(5) { --dx: -30px; --dy: 70px; --duree: 12s; --attente: -8s; }
  .lucioles i:nth-child(6) { --dx: 50px; --dy: -70px; --duree: 10s; --attente: -5s; }
  .lucioles i:nth-child(7) { --dx: 40px; --dy: 40px; --duree: 13s; --attente: -1s; }
}

@media (prefers-reduced-motion: reduce) {
  .lucioles i {
    opacity: 0.7;
  }
}

.hero-grille {
  position: relative;
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero {
    padding-block: 64px 120px;
  }
  .hero-grille {
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
  }
}

.hero-texte {
  min-width: 0;
}

.hero .pastille-titre {
  color: var(--accent);
  background: color-mix(in srgb, var(--carte) 70%, transparent);
}

h1 {
  margin: 18px 0 10px;
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

/* Le dégradé est découpé à la boîte du texte : sans marge en haut, l'accent du « À » (plus haut que la
   ligne en Luckiest Guy) tomberait hors du dégradé et deviendrait invisible. */
h1 .degrade-texte {
  display: inline-block;
  padding-top: 0.18em;
  margin-top: -0.18em;
}

.sous-titre {
  margin: 0 0 18px;
  color: var(--doux);
  font-size: 1.12rem;
  font-weight: 700;
}

.chapo {
  margin: 0 0 26px;
  font-size: 1.06rem;
  color: var(--doux);
  max-width: 36rem;
}

.chapo strong {
  color: var(--texte);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .hero-actions .btn {
    width: 100%;
  }
}

.confiance {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--doux);
  font-size: 0.9rem;
  font-weight: 700;
}

.coche {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 900;
}

/* Les cartes de l'accroche. Au téléphone, elles se suivent en colonne (à peine décalées) : rien ne se
   cache. Sur grand écran, elles se superposent comme sur une table. */

.hero-cartes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.mini {
  position: relative;
  margin: 0;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-haute);
  padding: 16px 18px;
}

.mini p {
  margin: 0;
}

.mini-etiquette {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doux);
}

.etoiles {
  letter-spacing: 0;
}

.mini-titre {
  font-weight: 850;
  font-size: 1rem;
  margin: 6px 0 8px !important;
}

.mini-texte {
  font-size: 0.88rem;
  color: var(--doux);
}

.carte-couverture {
  padding: 8px;
  width: min(250px, 62%);
  align-self: center;
  rotate: -4deg;
}

.carte-couverture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
}

.fleches {
  display: flex;
  gap: 6px;
  margin: 2px 0 10px !important;
}

.fleches span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--lien) 12%, var(--carte));
  color: var(--lien);
  font-size: 1.15rem;
  font-weight: 900;
}

.reponse {
  margin-top: 12px;
  font-size: 0.92rem;
}

.reponse summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.reponse summary::-webkit-details-marker {
  display: none;
}

.pointilles {
  flex: 1;
  min-width: 40px;
  border-bottom: 2px dotted var(--doux);
}

.reponse[open] .pointilles {
  border-bottom-style: solid;
  border-bottom-color: var(--accent);
}

.reponse p {
  margin-top: 8px !important;
  font-weight: 800;
  color: var(--accent);
}

.carte-cerveau {
  display: flex;
  gap: 14px;
  align-items: center;
}

.carte-cerveau .mini-titre {
  margin: 4px 0 0 !important;
  font-size: 0.92rem;
}

.mini-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lagon) 16%, transparent);
  color: var(--lagon);
  font-size: 1.2rem;
}

@media (min-width: 900px) {
  .hero-cartes {
    display: block;
    min-height: 470px;
  }
  .mini {
    position: absolute;
  }
  .carte-couverture {
    top: 0;
    left: 4%;
    width: 280px;
  }
  .carte-enigme {
    top: 120px;
    right: 0;
    width: 300px;
  }
  .carte-cerveau {
    left: 0;
    top: 362px;
    width: min(330px, 80%);
  }
}

@keyframes flotter {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .flotte {
    animation: flotter 6s ease-in-out infinite;
  }
  .flotte-2 {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  .flotte-3 {
    animation-delay: -4s;
    animation-duration: 8s;
  }
}

.vague {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 70px;
}

.vague path {
  fill: var(--fond);
}

/* ── Les sections ── */

.section {
  padding-block: 72px;
}

@media (min-width: 900px) {
  .section {
    padding-block: 104px;
  }
}

.section-douce {
  background: var(--fond-2);
}

.section-tete {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 44px;
}

.section .pastille-titre {
  color: var(--doux);
}

h2 {
  margin: 16px 0 12px;
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.section-tete p:last-child {
  color: var(--doux);
  font-size: 1.05rem;
  margin: 0;
}

h3 {
  font-weight: 850;
}

/* ── Les livres de la collection : le volume 1 en grand, puis les quatre autres ── */

.rayon-livres {
  display: grid;
  gap: 18px;
}

@media (min-width: 640px) {
  .rayon-livres {
    grid-template-columns: repeat(2, 1fr);
  }
  .livre-premier {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .rayon-livres {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.livre {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
  overflow: hidden;
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}

.livre:hover {
  translate: 0 -4px;
  box-shadow: var(--ombre-haute);
}

.livre-couv {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--fond-2);
}

.livre-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 18px 20px 20px;
}

.livre-num {
  margin: 0;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.livre h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
}

.livre-resume {
  margin: 0;
  flex: 1;
  color: var(--doux);
  font-size: 0.95rem;
}

.livre-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--trait);
  font-size: 0.85rem;
  font-weight: 750;
  color: var(--doux);
}

.bientot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1.5px dashed var(--doux);
  border-radius: 999px;
  color: var(--doux);
  font-size: 0.8rem;
  font-weight: 800;
}

/* Au téléphone, les volumes 2 à 5 en cartes couchées : la couverture en vignette, le texte à côté. */
@media (max-width: 639px) {
  .livre:not(.livre-premier) {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: start;
  }
  .livre:not(.livre-premier) .livre-couv {
    width: 104px;
    margin: 16px 0 16px 16px;
    border-radius: 10px;
  }
  .livre:not(.livre-premier) .livre-corps {
    padding: 14px 16px 16px;
  }
  .livre:not(.livre-premier) h3 {
    font-size: 1.02rem;
  }
  .livre:not(.livre-premier) .livre-resume {
    font-size: 0.9rem;
  }
}

/* Le premier volume, en grand : la couverture à gauche dès 640 px. */
@media (min-width: 640px) {
  .livre-premier {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .livre-premier .livre-couv {
    height: 100%;
  }
  .livre-premier .livre-corps {
    padding: 28px 30px;
    justify-content: center;
  }
  .livre-premier h3 {
    font-family: var(--titre);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    letter-spacing: 0.01em;
  }
  .livre-premier .livre-resume {
    flex: 0 1 auto;
    font-size: 1.05rem;
  }
}

@media (min-width: 1000px) {
  .livre-premier {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  }
}

.commence-ici {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--bouton-texte);
  background: var(--degrade);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Les livres-jeux ── */

.rayon-jeux {
  display: grid;
  gap: 18px;
}

@media (min-width: 900px) {
  .rayon-jeux {
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 20px;
  }
  /* Même hauteur d'image dans les trois colonnes : les titres s'alignent. */
  .rayon-jeux .jeu-images {
    aspect-ratio: auto;
    height: 230px;
  }
}

.jeu {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
  overflow: hidden;
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}

.jeu:hover {
  translate: 0 -4px;
  box-shadow: var(--ombre-haute);
}

.jeu-images {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--fond-2);
}

.jeu-images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 0;
}

/* Une série : les images côte à côte, numérotées (le numéro, pas la couleur, dit l'ordre). */
.plusieurs {
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.plusieurs figure {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
}

.plusieurs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plusieurs figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(22 12 56 / 0.78);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.9rem;
}

.jeu-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 18px 20px 20px;
}

.jeu-corps h3 {
  margin: 0;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.jeu-surtitre {
  margin: 0;
  color: var(--lagon);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.jeu-resume {
  margin: 0;
  color: var(--doux);
  font-size: 0.95rem;
}

.jeu-liste {
  margin: 0;
  padding-left: 1.4em;
  color: var(--texte);
  font-size: 0.92rem;
  font-weight: 700;
}

.jeu-corps .livre-pied {
  margin-top: auto;
}

/* ── Un chapitre : six moments ── */

.moments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .moments {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .moments {
    grid-template-columns: repeat(3, 1fr);
  }
}

.moment {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 24px 22px 22px;
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}

.moment:hover {
  translate: 0 -4px;
  box-shadow: var(--ombre-haute);
}

.moment-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--bouton-texte);
  background: var(--degrade);
  font-family: var(--titre);
  font-size: 1.25rem;
  padding-top: 0.15em;
}

.moment h3 {
  margin: 14px 0 6px;
  font-size: 1.2rem;
}

.moment p {
  margin: 0;
  color: var(--doux);
  font-size: 0.98rem;
}

/* ── La nuit : la frise de triangles des pages de texte, la Croix du Sud ── */

.nuit {
  position: relative;
  background: radial-gradient(120% 140% at 15% 0%, var(--nuit-2) 0%, var(--nuit) 58%);
  color: var(--nuit-texte);
}

.frise {
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  /* Un triangle par tuile de 22 × 12 px, pointe en bas : demi-angle atan(11 / 12) ≈ 42,5°. */
  background: conic-gradient(from -42.5deg at 50% 100%, var(--fond) 85deg, transparent 0) 0 0 / 22px 12px repeat-x;
}

.nuit .pastille-titre {
  color: var(--luciole);
}

.nuit p {
  color: var(--nuit-doux);
  font-size: 1.1rem;
  max-width: 38rem;
}

.nuit strong,
.nuit em {
  color: #ffffff;
}

.nom-grille {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .nom-grille {
    grid-template-columns: 0.7fr 1.3fr;
    gap: 56px;
  }
}

.croix-du-sud {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
}

.croix-du-sud svg {
  width: clamp(130px, 22vw, 190px);
  height: auto;
  overflow: visible;
}

.etoiles-croix circle {
  fill: var(--etoile);
  filter: drop-shadow(0 0 6px rgb(255 244 209 / 0.9)) drop-shadow(0 0 16px rgb(255 207 90 / 0.5));
}

@keyframes scintiller {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .etoiles-croix circle {
    animation: scintiller 3.2s ease-in-out infinite;
  }
  .etoiles-croix circle:nth-child(2) { animation-delay: -1.1s; }
  .etoiles-croix circle:nth-child(3) { animation-delay: -2.3s; }
  .etoiles-croix circle:nth-child(4) { animation-delay: -0.6s; }
  .etoiles-croix circle:nth-child(5) { animation-delay: -1.7s; animation-duration: 2.4s; }
}

.croix-du-sud figcaption {
  color: var(--nuit-doux);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

/* ── Pour qui ── */

.publics {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .publics {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.public {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.public h3 {
  margin: 8px 0 0;
  font-size: 1.2rem;
}

.public p {
  margin: 0;
  color: var(--doux);
}

.public-icone {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 1.35rem;
  color: var(--bouton-texte);
  background: var(--degrade);
}

/* ── Les auteurs ── */

.auteurs {
  display: grid;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 760px) {
  .auteurs {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.auteur {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 24px;
}

.auteur h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.auteur p {
  margin: 0;
  color: var(--doux);
}

.initiales {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--bouton-texte);
  background: var(--degrade);
  font-family: var(--titre);
  font-size: 1.2rem;
  padding-top: 0.15em;
}

/* ── L'appel ── */

.appel {
  padding-block: 24px 88px;
  background: var(--fond-2);
}

.appel-dedans {
  text-align: center;
  color: #ffffff;
  background: var(--degrade);
  border-radius: 28px;
  padding: 52px 24px;
  box-shadow: 0 30px 60px -30px rgb(143 47 196 / 0.7);
}

.appel h2 {
  margin-top: 0;
}

.appel p {
  margin: 0 auto 24px;
  max-width: 34rem;
  font-size: 1.08rem;
}

/* ── Le pied de page ── */

.pied {
  border-top: 1px solid var(--trait);
  padding-block: 36px 44px;
  color: var(--doux);
  font-size: 0.92rem;
}

.pied-dedans {
  display: grid;
  gap: 18px;
}

@media (min-width: 900px) {
  .pied-dedans {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .pied-mentions {
    grid-column: 1 / -1;
  }
}

.pied-devise {
  margin: 8px 0 0;
}

.pied-liens {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.pied-liens a {
  font-weight: 750;
  text-decoration: none;
}

.pied-mentions {
  margin: 0;
  font-size: 0.85rem;
}

/* ── Les cartes entières cliquables : le lien du titre couvre la carte, le bouton d'achat reste au-dessus ── */

.livre,
.jeu {
  position: relative;
}

.lien-carte {
  color: inherit;
  text-decoration: none;
}

.lien-carte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lien-carte:focus-visible {
  outline: none;
}

.livre:has(.lien-carte:focus-visible),
.jeu:has(.lien-carte:focus-visible) {
  outline: 3px solid var(--lien);
  outline-offset: 3px;
}

.livre-pied .achat,
.livre-pied .bientot {
  position: relative;
  z-index: 2;
}

a.carte-couverture {
  display: block;
}

/* ── La page d'un livre ── */

.fiche-tete h1 {
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  line-height: 1.05;
}

.fiche-grille {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 900px) {
  .fiche-grille {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
  }
}

.fiche-couv {
  margin: 0;
  justify-self: center;
  width: min(100%, 420px);
}

.fiche-couv img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-haute);
}

.fiche-couv:not(.large) {
  rotate: -2deg;
}

.fiche-couv.large {
  width: 100%;
}

.fiche-images {
  display: grid;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-haute);
}

.fiche-images.plusieurs {
  grid-template-columns: repeat(2, 1fr);
}

.fiche-images img {
  border-radius: 0;
  box-shadow: none;
}

.fiche-texte {
  min-width: 0;
}

.fil {
  margin-bottom: 14px;
  color: var(--doux);
  font-size: 0.9rem;
  font-weight: 700;
}

.fil a {
  color: var(--doux);
}

.fiche-auteurs {
  margin: 0 0 14px;
  color: var(--accent);
  font-weight: 800;
}

.fiche-achat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.fiche-achat .bientot {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.95rem;
}

.achat-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--doux);
  font-size: 0.92rem;
}

/* Feuilleter : les pages en vignettes, deux colonnes au téléphone, trois dès 760 px. */
.extraits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 760px) {
  .extraits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.extrait {
  margin: 0;
}

.extrait a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-haute);
  transition: translate 0.25s ease;
}

.extrait a:hover {
  translate: 0 -4px;
}

.extrait img {
  display: block;
  width: 100%;
  height: auto;
}

.extrait figcaption {
  margin-top: 8px;
  color: var(--doux);
  font-size: 0.85rem;
  font-weight: 750;
  text-align: center;
}

/* Le livre : la présentation, et la fiche en bref à côté. */
.presentation-grille {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .presentation-grille {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 56px;
  }
}

.presentation p:not(.pastille-titre) {
  font-size: 1.06rem;
  color: var(--doux);
  max-width: 40rem;
}

.fiche-technique {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 24px;
}

.fiche-technique h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}

.fiche-technique dl {
  margin: 0;
  display: grid;
  gap: 4px;
}

.fiche-technique dt {
  margin-top: 8px;
  color: var(--doux);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fiche-technique dd {
  margin: 0;
  font-weight: 700;
}

/* Dans le même rayon : des vignettes couchées. */
.voisins {
  display: grid;
  gap: 14px;
}

@media (min-width: 640px) {
  .voisins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .voisins {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.voisin {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  text-decoration: none;
  font-weight: 800;
  line-height: 1.3;
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}

.voisin:hover {
  translate: 0 -3px;
  box-shadow: var(--ombre-haute);
}

.voisin img {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}

.voisin small {
  display: block;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Les pages de texte (mentions légales, 404) ── */

.page-texte h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

.page-texte h2 {
  margin: 34px 0 8px;
  font-family: var(--police);
  font-weight: 850;
  font-size: 1.3rem;
  letter-spacing: 0;
}

.page-texte p:not(.pastille-titre) {
  color: var(--doux);
}

.etroit {
  max-width: 760px;
}

.centre {
  text-align: center;
}

/* ── L'entrée de l'accroche : en CSS seul, dès l'affichage, sans attendre le script ── */

@keyframes entrer {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-entree] {
    animation: entrer 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  [data-entree="2"] { animation-delay: 0.08s; }
  [data-entree="3"] { animation-delay: 0.16s; }
  [data-entree="4"] { animation-delay: 0.24s; }
  [data-entree="5"] { animation-delay: 0.32s; }
  [data-entree="6"] { animation-delay: 0.2s; animation-duration: 1s; }
}

/* ── L'apparition au défilement (vitrine.js) : seulement si le script l'a préparée ── */

.revele-pret [data-revele] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--retard, 0ms),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--retard, 0ms),
    translate 0.25s ease,
    box-shadow 0.25s ease;
}

.revele-pret [data-revele].vu {
  opacity: 1;
  transform: none;
}

@media print {
  .revele-pret [data-revele] {
    opacity: 1;
    transform: none;
  }
}