/* ==========================================================================
   pages.css - styles propres à une page, préfixés par la section
   Structure du 8 août 2026 : cinq entrées, accueil en magazine.
   ========================================================================== */

/* ==========================================================================
   Accueil - Hero identitaire statique
   La façade reste la matière principale. Un décor botanique indépendant
   encadre l'oiseau de marque sans modifier la photo ni son voile.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100dvh, 50rem);
  padding:
    calc(var(--header-h) + clamp(2rem, 5vh, 4rem))
    clamp(var(--sp-3), 1.8vw, var(--sp-6))
    clamp(2.5rem, 5vh, 4.5rem);
  background: var(--nuit);
  color: var(--papier);
  --ton-fond: var(--nuit);
  --ton-texte: #FBFAF7;
  --ton-texte-2: #D3DAE8;
  --ton-texte-3: #AEB7CA;
  --ton-accent: var(--jaune);
  --ton-accent-texte: var(--jaune);
  --ton-filet: color-mix(in srgb, #FBFAF7 22%, transparent);
  --ton-filet-net: color-mix(in srgb, #FBFAF7 46%, transparent);
  --ton-btn-fond: var(--corail);
  --ton-btn-texte: var(--nuit);
  overflow: hidden;
  isolation: isolate;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}

.hero__photo {
  position: absolute;
  inset: -2%;
  z-index: 0;
  width: 104%;
  height: 104%;
  max-width: none;
  object-fit: cover;
  object-position: 54% 47%;
  filter: saturate(.9) contrast(1.05) brightness(.98);
  opacity: .76;
  transform: scale(1.015);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg,
      rgb(6 22 47 / .98) 0%,
      rgb(6 22 47 / .94) 34%,
      rgb(6 22 47 / .72) 48%,
      rgb(6 22 47 / .28) 66%,
      rgb(6 22 47 / .10) 100%),
    linear-gradient(180deg,
      rgb(6 22 47 / .20) 0%,
      rgb(6 22 47 / .02) 48%,
      rgb(6 22 47 / .66) 100%);
  pointer-events: none;
}

.hero__grille {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}

.hero__ornement {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  /* La bande de navigation se dégage ici, une fois pour tous les formats.
     Le repère est la hauteur réelle de l'en-tête, pas un pourcentage du
     hero : le fondu tombe donc toujours au même endroit, quelle que soit
     la hauteur de l'écran, et s'arrête avant la tête de l'oiseau. */
  --ornement-degage: linear-gradient(180deg,
    rgb(0 0 0 / .22) 0,
    rgb(0 0 0 / .55) calc(var(--header-h) * .6),
    rgb(0 0 0 / 1) calc(var(--header-h) + .5rem));
  -webkit-mask-image: var(--ornement-degage);
  mask-image: var(--ornement-degage);
}

/* Le décor est une composition plein cadre, pas un motif posé : il occupe
   exactement le hero et se recadre par `cover`. L'ancrage en haut à droite
   garantit que les rognages d'écran très large ou très étroit mordent sur
   les feuilles périphériques et jamais sur l'oiseau.
   Le sépia léger fait passer les blancs froids du dessin sur le papier
   chaud de la charte ; le masque laisse la colonne de titre en filigrane. */
.hero__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right top;
  opacity: .86;
  filter: sepia(.26) saturate(1.12) brightness(1.03);
  /* Le titre occupe la moitié gauche : le décor n'y passe qu'en filigrane et
     ne reprend sa pleine densité qu'une fois la colonne de texte franchie.
     Les paliers mobiles redéfinissent cette même variable. */
  --deco-masque: linear-gradient(90deg,
    rgb(0 0 0 / .42) 0%,
    rgb(0 0 0 / .42) 22%,
    rgb(0 0 0 / .70) 42%,
    rgb(0 0 0 / 1) 60%);
  -webkit-mask-image: var(--deco-masque);
  mask-image: var(--deco-masque);
}

/* En couleurs forcées les masques et le filtre tombent : le dessin repasserait
   à pleine densité sous le titre. Comme les autres motifs du site, il se retire. */
@media (forced-colors: active) {
  .hero__ornement { display: none; }
}

.hero__contenu {
  grid-column: 1 / span 7;
  width: 100%;
  max-width: 46rem;
}

.hero__sur {
  margin-bottom: var(--sp-5);
  font-family: var(--font-enseigne);
  font-size: var(--fs-base);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--jaune);
}

.hero h1 {
  max-width: none;
  font-size: clamp(2.85rem, 4.85vw, 5.35rem);
  line-height: .94;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 80, 'opsz' 96;
  color: var(--papier);
}

.hero h1 > span,
.hero h1 > em {
  display: block;
}

.hero h1 em {
  color: var(--jaune);
  font-style: normal;
  font-variation-settings: 'wdth' 76, 'opsz' 96;
  letter-spacing: -.022em;
}

.hero__promesse {
  max-width: 43ch;
  margin-top: var(--sp-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.58;
  color: var(--ton-texte-2);
}

.hero__actions {
  margin-top: var(--sp-8);
}

.hero__pratique {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  width: min(100%, 42rem);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ton-filet);
  font-size: var(--fs-sm);
}

.hero__pratique .mention {
  color: var(--ton-texte-2);
  font-weight: var(--fw-semi);
}

.hero__pratique .statut::before {
  animation: none;
}

/* Desktop : le hero n'a plus besoin de remplir l'écran. Le plafond redescend
   de 50rem à 40rem (≈ 83 % d'un 1280 × 800, ≈ 61 % d'un 1920 × 1080) et le
   plancher suit la fenêtre jusqu'à 74dvh sur les écrans bas, où la requête
   suivante reprend la main sur les paddings. */
@media (min-width: 1000px) {
  .hero {
    min-height: min(74dvh, 40rem);
  }
}

@media (min-width: 1000px) and (max-height: 830px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--sp-6));
    padding-bottom: var(--sp-8);
  }

  .hero h1 {
    font-size: clamp(2.75rem, 4.85vw, 5rem);
  }

  .hero__promesse {
    margin-top: var(--sp-5);
  }

  .hero__actions,
  .hero__pratique {
    margin-top: var(--sp-6);
  }
}

@media (max-width: 999px) {
  .hero {
    --deco-descente: clamp(1.5rem, 4.5vh, 2.5rem);
    padding-top: calc(var(--header-h) + clamp(2.5rem, 9vh, 5.5rem));
    padding-bottom: var(--sp-8);
  }

  .hero__photo {
    object-position: 53% 50%;
    opacity: .58;
  }

  .hero::after {
    background:
      linear-gradient(180deg,
        rgb(6 22 47 / .91) 0%,
        rgb(6 22 47 / .77) 36%,
        rgb(6 22 47 / .46) 64%,
        rgb(6 22 47 / .93) 100%),
      linear-gradient(90deg,
        rgb(6 22 47 / .66) 0%,
        rgb(6 22 47 / .30) 100%);
  }

  .hero__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Le texte passe au centre : le masque bascule du vertical à l'horizontal.
     L'oiseau tient la bande haute, la branche la bande basse, et la zone de
     lecture au milieu retrouve un fond calme.
     Le dessin est composé pour un écran nu : sa branche haute tombe pile dans
     la barre de navigation. On le descend donc sous l'en-tête, et le contenu
     recule d'autant pour que l'oiseau ait sa propre bande. */
  .hero__deco {
    transform: translateY(var(--deco-descente));
    opacity: .9;
    /* Quatre paliers : la barre de navigation reste dégagée, l'oiseau garde
       sa pleine densité jusqu'à `--deco-plein`, la zone de lecture retombe en
       filigrane, la branche de pied ressort pour fermer le cadre. Les paliers
       sont des variables : la tablette et les écrans courts les recalent sans
       redéclarer le dégradé. */
    --deco-plein: 19%;
    --deco-fondu: 28%;
    --deco-voile: .30;
    --deco-pied: 84%;
    --deco-pied-fin: 95%;
    --deco-pied-densite: 1;
    --deco-masque: linear-gradient(180deg,
      rgb(0 0 0 / 1) 0%,
      rgb(0 0 0 / 1) var(--deco-plein),
      rgb(0 0 0 / var(--deco-voile)) var(--deco-fondu),
      rgb(0 0 0 / var(--deco-voile)) var(--deco-pied),
      rgb(0 0 0 / var(--deco-pied-densite)) var(--deco-pied-fin));
  }

  .hero__contenu {
    grid-column: 1;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
  }

  .hero__sur {
    margin-bottom: var(--sp-4);
  }

  .hero h1 {
    margin-inline: auto;
    max-width: 15ch;
    font-size: clamp(2.65rem, 8.4vw, 4.8rem);
  }

  .hero__promesse {
    max-width: 42ch;
    margin: var(--sp-5) auto 0;
  }

  .hero__actions {
    justify-content: center;
    margin-top: var(--sp-6);
  }

  .hero__pratique {
    justify-content: center;
    margin: var(--sp-6) auto 0;
    padding-top: var(--sp-4);
  }
}

/* Tablette : le hero redevient presque carré alors que le texte, lui, passe
   au centre. `cover` sur toute la hauteur grossirait le dessin de près de
   moitié et poserait l'oiseau en plein sur le titre. On limite donc le calque
   à une bande haute : l'oiseau garde une taille de vignette au-dessus du
   texte, et la branche de pied vient border la marge droite. */
@media (min-width: 640px) and (max-width: 999px) {
  .hero__deco {
    height: clamp(24rem, 62%, 34rem);
    /* Le calque est plus court : les paliers se recalent dessus, sinon la
       transition couperait l'oiseau en plein corps. */
    --deco-plein: 44%;
    --deco-fondu: 56%;
    --deco-voile: .40;
    --deco-pied: 82%;
    --deco-pied-fin: 100%;
    --deco-pied-densite: .62;
  }
}

@media (max-width: 639px) {
  .hero {
    min-height: min(100svh, 46rem);
    padding:
      calc(var(--header-h) + clamp(2.25rem, 9vh, 5.5rem))
      var(--sp-4)
      var(--sp-6);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
  }

  .hero__photo {
    object-position: 52% 50%;
  }

  /* Le portrait est cadré pour l'écran : il se pose centré, sans rognage
     latéral notable. */
  .hero__deco {
    object-position: center top;
  }

  .hero__sur {
    font-size: var(--fs-sm);
  }

  .hero h1 {
    max-width: 14ch;
    font-size: clamp(2.35rem, 11.2vw, 3.5rem);
  }

  .hero__promesse {
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
  }

  .hero__actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-5);
  }

  .hero__actions .btn {
    width: 100%;
    min-height: 48px;
    padding: .7rem .85rem;
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  .hero__pratique {
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-5);
    font-size: var(--fs-xs);
  }
}

/* Téléphone court : le texte occupe déjà toute la hauteur utile, il n'y a plus
   de bande libre pour l'oiseau. Le décor recule alors en texture et son fondu
   démarre plus haut, pour ne jamais passer devant le sur-titre. */
@media (max-width: 639px) and (max-height: 720px) {
  .hero__deco {
    opacity: .6;
    --deco-plein: 13%;
    --deco-fondu: 21%;
    --deco-voile: .26;
  }
}

@media (max-width: 390px) {
  .hero__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Accueil - 2 · En ce moment
   Une seule vitrine éditoriale : le livre du moment occupe la scène, les deux
   informations secondaires forment un journal compact à sa droite.
   ========================================================================== */

.moment-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3.25rem, 5.5vh, 5rem);
}
.moment-section > .conteneur { position: relative; z-index: 1; }
.oiseau-gimmick--moment {
  top: clamp(4.25rem, 6vw, 6.5rem);
  right: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
  width: clamp(5.25rem, 7vw, 7.25rem);
  color: var(--bleu);
  opacity: .1;
  transform: rotate(-2deg);
}
.moment-section .entete-section {
  max-width: 52rem;
  margin-bottom: clamp(var(--sp-6), 3vh, var(--sp-10));
}
.moment-section .entete-section h2 {
  max-width: 18ch;
  font-size: clamp(2.35rem, 1.85rem + 2.2vw, 4.15rem);
  line-height: .98;
  letter-spacing: -.03em;
}
.moment-section .entete-section p {
  max-width: 50ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
}

.moment-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  width: 100%;
}
.moment-bento__tuile {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ton-filet);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-soft),
              border-color var(--d-base) var(--ease-soft);
}

/* Cellule principale : une vraie couverture sur une table de nouveautés. */
.moment-bento__une { background: var(--papier); }
.moment-bento__une-media {
  position: relative;
  height: clamp(210px, 32vw, 270px);
  margin: 0;
  overflow: hidden;
  background: var(--nuit);
}
/* Le décor reste lisible mais passe derrière le livre. Le voile nuit se
   creuse là où la couverture est posée : un halo elliptique centré sur elle,
   un dégradé qui fonce vers son côté et une assise plus sombre en bas. La
   table reste visible à l'opposé, le livre ne se bat plus contre les piles
   colorées qui l'entourent. */
.moment-bento__une-media {
  --voile-x: 80%;
  --voile-y: 58%;
  --voile-sens: 90deg;
  --voile-taille: 38% 78%;
}
.moment-bento__une-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse var(--voile-taille) at var(--voile-x) var(--voile-y), rgb(6 22 47 / .58), rgb(6 22 47 / .28) 55%, transparent 80%),
    linear-gradient(var(--voile-sens), rgb(6 22 47 / .06) 0%, rgb(6 22 47 / .3) 42%, rgb(6 22 47 / .72) 100%),
    linear-gradient(0deg, rgb(6 22 47 / .42) 0%, transparent 42%);
  pointer-events: none;
}
.moment-bento__une-decor {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 67%;
  opacity: .66;
  filter: saturate(.78) contrast(1.02);
  transform: scale(1.01);
  transition: transform var(--d-slow) var(--ease-out);
}
.moment-bento__une-livre,
.moment-bento__sortie-livre {
  position: relative;
  z-index: 2;
  display: block;
  filter: drop-shadow(0 18px 24px rgb(6 22 47 / .32)) drop-shadow(0 3px 6px rgb(6 22 47 / .18));
  transform: perspective(900px) rotateY(-7deg) rotateZ(1.5deg);
  transform-origin: center bottom;
  transition: transform 300ms var(--ease-out);
}
.moment-bento__une-livre {
  position: absolute;
  right: clamp(1.25rem, 7%, 3.5rem);
  bottom: 6%;
  width: clamp(122px, 20%, 168px);
}
.moment-bento__une-livre::before,
.moment-bento__sortie-livre::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 2.5%;
  right: -4.5%;
  bottom: 2.5%;
  width: 8%;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(to bottom, #F5F1E8, #F5F1E8 2px, #E0D7C6 3px);
  box-shadow: inset 1px 0 1px rgb(0 0 0 / .12);
}
.moment-bento__une-livre img,
.moment-bento__sortie-livre img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 4px 4px 2px;
}
.moment-bento__une-corps {
  display: grid;
  gap: clamp(var(--sp-5), 3vw, var(--sp-8));
  padding: clamp(1.4rem, 1.1rem + 1vw, 2.2rem);
}
.moment-bento__une-titre,
.moment-bento__une-lecture,
.moment-bento__agenda-corps,
.moment-bento__sortie-corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.moment-bento__une-titre { gap: var(--sp-2); }
.moment-bento__une-lecture { gap: var(--sp-4); }
.moment-bento__repere {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  margin-bottom: var(--sp-2);
  padding: .3rem .68rem;
  border: 1px solid color-mix(in srgb, var(--nuit) 16%, transparent);
  border-radius: var(--r-chip);
  background: var(--jaune);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .42);
  color: var(--nuit);
  font-size: clamp(.65rem, .62rem + .08vw, .7rem);
  font-weight: var(--fw-black);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-wrap: balance;
  transform: translateY(0);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-soft);
}
.moment-bento h3 {
  font-size: clamp(1.45rem, 1.2rem + .7vw, 1.85rem);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.moment-bento__une h3 {
  font-size: clamp(2rem, 1.65rem + 1vw, 2.8rem);
  line-height: .96;
  letter-spacing: -.035em;
}
.moment-bento__auteur {
  color: var(--ton-texte-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.moment-bento__une-lecture p {
  max-width: 44ch;
  color: var(--ton-texte-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.moment-bento__une-lecture .lien-fleche { margin-top: auto; }

/* Cellule agenda : photographie plein cadre et information courte. */
.moment-bento__agenda {
  position: relative;
  min-height: 255px;
  isolation: isolate;
  background: var(--nuit);
  color: #FBFAF7;
}
.moment-bento__agenda-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
.moment-bento__agenda-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(6 22 47 / .94) 0%, rgb(6 22 47 / .82) 55%, rgb(6 22 47 / .35) 100%),
    linear-gradient(0deg, rgb(6 22 47 / .7) 0%, transparent 65%);
}
.moment-bento__agenda-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  opacity: .82;
  filter: saturate(.76) contrast(1.06);
  transition: transform var(--d-slow) var(--ease-out);
}
.moment-bento__agenda-corps {
  position: relative;
  z-index: 1;
  gap: var(--sp-2);
  width: min(84%, 340px);
  min-height: inherit;
  padding: clamp(1.25rem, 1rem + .6vw, 1.6rem);
}
.moment-bento__agenda .lien-fleche { color: var(--jaune); }
.moment-bento__date {
  font-family: var(--font-body);
  font-size: clamp(.72rem, .68rem + .1vw, .78rem);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--jaune);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-block: .05rem .15rem;
}
.moment-bento__date::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jaune);
  box-shadow: 0 0 6px var(--jaune);
  flex-shrink: 0;
}
.moment-bento__agenda .tbc {
  background: none;
  box-shadow: none;
  padding: 0;
  color: inherit;
  font-style: normal;
}
.moment-bento__agenda .mention {
  color: #B9C2D6;
  font-size: clamp(.8rem, .76rem + .12vw, .88rem);
  line-height: 1.45;
}
.moment-bento__agenda .lien-fleche { margin-top: auto; }

/* Cellule à paraître : alcôve dorée et couverture soignée. */
.moment-bento__sortie {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(130px, .75fr);
  min-height: 255px;
  background: var(--papier-2);
  color: var(--nuit);
}
.moment-bento__sortie .moment-bento__repere {
  background: var(--nuit);
  color: var(--jaune);
  border: 1px solid color-mix(in srgb, var(--nuit) 75%, transparent);
  box-shadow: 0 1px 3px rgb(6 22 47 / .12);
}
.moment-bento__sortie-corps {
  gap: var(--sp-2);
  min-width: 0;
  padding: clamp(1.25rem, 1rem + .6vw, 1.6rem);
}
.moment-bento__sortie-corps .moment-bento__auteur {
  font-size: var(--fs-xs);
  color: var(--ton-texte-2);
  margin-top: -.1rem;
}
.moment-bento__sortie-corps > p:not(.moment-bento__auteur) {
  color: var(--encre-douce);
  font-size: clamp(.8rem, .76rem + .12vw, .88rem);
  line-height: 1.45;
}
.moment-bento__sortie .lien-fleche {
  margin-top: auto;
  font-size: var(--fs-xs);
}
.moment-bento__sortie-media {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: clamp(var(--sp-3), 2vw, var(--sp-5));
  overflow: hidden;
  background: radial-gradient(circle at 45% 42%, color-mix(in srgb, var(--jaune) 95%, #fff) 0%, color-mix(in srgb, var(--jaune) 68%, var(--papier)) 85%);
  border-left: 1px solid color-mix(in srgb, var(--nuit) 8%, transparent);
}
.moment-bento__sortie-livre {
  position: relative;
  z-index: 2;
  width: min(116px, 84%);
  max-height: 86%;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 16px 20px rgb(6 22 47 / .28)) drop-shadow(0 2px 5px rgb(6 22 47 / .16));
  transform: perspective(800px) rotateY(-7deg) rotateZ(1.2deg);
  transform-origin: center bottom;
  transition: transform 280ms var(--ease-out);
}
.moment-bento__sortie-livre img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px 4px 4px 2px;
}

.moment-bento .lien-fleche {
  transform: scale(1);
  transform-origin: left center;
  transition: color var(--d-fast) var(--ease-soft),
              transform var(--d-fast) var(--ease-out);
}
.moment-bento .lien-fleche:active { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
  .moment-bento__tuile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--nuit) 16%, transparent);
  }
  .moment-bento__une:hover .moment-bento__une-decor { transform: scale(1.032); }
  .moment-bento__une:hover .moment-bento__une-livre {
    transform: perspective(900px) translateY(-8px) rotateY(-2deg) rotateZ(.5deg) scale(1.02);
  }
  .moment-bento__sortie:hover .moment-bento__sortie-livre {
    transform: perspective(800px) translateY(-7px) rotateY(-2deg) rotateZ(.5deg) scale(1.025);
  }
  .moment-bento__agenda:hover .moment-bento__agenda-media img {
    transform: scale(1.032);
  }
  .moment-bento__tuile:hover .moment-bento__repere { transform: translateY(-1px); }
  .moment-bento .lien-fleche:hover { transform: translateX(2px); }
}

@media (min-width: 680px) {
  .moment-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moment-bento__une {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    min-height: 330px;
  }
  .moment-bento__une-media { height: 100%; }
  .moment-bento__une-corps { grid-template-columns: 1fr; }
  .moment-bento__agenda,
  .moment-bento__sortie { min-height: 275px; }
}

@media (min-width: 1080px) {
  .moment-section { padding-block: clamp(3rem, 5.5vh, 4.25rem); }
  .moment-section .entete-section { margin-bottom: var(--sp-8); }
  .moment-bento {
    grid-template-columns: minmax(0, 1.28fr) minmax(390px, .96fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(520px, 55vh, 560px);
    gap: var(--sp-5);
  }
  .moment-bento__une {
    grid-row: 1 / 3;
    grid-column: 1;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.15fr) minmax(190px, .85fr);
    min-height: 0;
  }
  .moment-bento__une-media { height: 100%; }
  .moment-bento__une-corps {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    padding: clamp(1.4rem, 1.1rem + 1vw, 2.2rem);
    gap: clamp(var(--sp-6), 3vw, var(--sp-10));
    align-items: start;
  }
  .moment-bento__agenda,
  .moment-bento__sortie { min-height: 0; }
  .moment-bento__agenda-corps,
  .moment-bento__sortie-corps {
    gap: var(--sp-2);
    padding: clamp(1.25rem, 1rem + .6vw, 1.6rem);
  }
  .moment-bento__agenda h3,
  .moment-bento__sortie h3 { font-size: clamp(1.35rem, 1.15rem + .4vw, 1.65rem); }
  .moment-bento__agenda { grid-column: 2; grid-row: 1; }
  .moment-bento__sortie { grid-column: 2; grid-row: 2; }
}

@media (max-width: 679px) {
  .moment-section .entete-section h2 { max-width: 14ch; }
  .moment-bento__une-corps { gap: var(--sp-5); }
  .moment-bento__une-lecture { gap: var(--sp-3); }
  .moment-bento__agenda,
  .moment-bento__sortie { min-height: 260px; }
  .moment-bento__agenda-corps { width: min(85%, 320px); }
  .moment-bento__une-livre {
    right: auto;
    left: 50%;
    translate: -50% 0;
  }
  /* Livre centré en haut du cadre : le halo s'élargit et le suit au centre,
     le dégradé fonce vers le haut, là où les rayonnages clairs le touchent. */
  .moment-bento__une-media {
    --voile-x: 50%;
    --voile-y: 48%;
    --voile-sens: 0deg;
    --voile-taille: 62% 90%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moment-bento__tuile,
  .moment-bento__une-decor,
  .moment-bento__une-livre,
  .moment-bento__sortie-livre,
  .moment-bento__agenda-media img,
  .moment-bento__repere,
  .moment-bento .lien-fleche { transition: none; }
  .moment-bento__tuile:hover { transform: none; }
  .moment-bento__une:hover .moment-bento__une-decor { transform: scale(1.01); }
  .moment-bento__une:hover .moment-bento__une-livre,
  .moment-bento__sortie:hover .moment-bento__sortie-livre {
    transform: perspective(900px) rotateY(-7deg) rotateZ(1.5deg);
  }
  .moment-bento__agenda:hover .moment-bento__agenda-media img,
  .moment-bento__tuile:hover .moment-bento__repere,
  .moment-bento .lien-fleche:hover,
  .moment-bento .lien-fleche:active { transform: none; }
}

/* Variante horizontale de la pastille de date : dans une brique étroite, le
   bloc carré de 84px mange la moitié de la largeur. */
.pastille-date--ligne {
  flex-direction: row;
  align-items: baseline;
  gap: var(--sp-2);
  width: auto;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
}
.pastille-date--ligne .pastille-date__num { font-size: 1.5rem; margin-block: 0; }

/* ==========================================================================
   Accueil et Sélections - 3 - Les recommandations de l'équipe
   Une grande scène de lecture et deux notes éditoriales. La hiérarchie vient
   de la composition, pas d'une rangée de trois cartes identiques.
   ========================================================================== */

.conseils-section {
  overflow: clip;
  /* Un peu plus ramassée que le rythme général : la recommandation devient
     un temps fort dense, sans créer un second hero au milieu de la page. */
  padding-block: clamp(4.5rem, 2.6rem + 5vw, 8rem);
}
.conseils-section .entete-section {
  max-width: 76rem;
  margin-bottom: clamp(2rem, 1.65rem + 1.4vw, 3rem);
}
.conseils-section .entete-section h2 {
  max-width: 20ch;
  font-size: clamp(2.45rem, 1.82rem + 2.45vw, 4.45rem);
  line-height: .94;
  letter-spacing: -.032em;
  font-variation-settings: 'wdth' 82, 'opsz' 72;
}
.conseils-section .entete-section p {
  max-width: 52ch;
  margin-top: var(--sp-5);
  text-wrap: balance;
}
/* L'en-tête porte l'équipe : le titre à gauche, les trois libraires posés à
   côté en pile de tirages photo. Sur mobile tout se centre, la pile sous le
   texte : une colonne étroite alignée à gauche laissait la pile flotter. */
.conseils-entete {
  display: grid;
  gap: clamp(var(--sp-6), 3vw, var(--sp-10));
  align-items: end;
  justify-items: center;
  text-align: center;
}
.conseils-entete h2,
.conseils-entete p { margin-inline: auto; }
@media (min-width: 820px) {
  .conseils-entete {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    text-align: start;
  }
  .conseils-entete h2,
  .conseils-entete p { margin-inline: 0; }
}

.equipe-pile {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  margin: 0;
}
@media (min-width: 820px) {
  .equipe-pile { padding-bottom: var(--sp-2); }
}

.equipe-pile__portraits {
  --pile-taille: clamp(5.5rem, 4.1rem + 4.2vw, 8.75rem);
  --pile-recouvrement: calc(var(--pile-taille) * .3);
  display: flex;
  margin: 0;
  padding: 0 0 0 var(--pile-recouvrement);
  list-style: none;
}

/* Chaque portrait est un tirage : cadre papier, ombre portée, légère
   inclinaison propre. Posés les uns sur les autres, jamais alignés au cordeau.
   Le ressort : une courbe qui dépasse légèrement sa cible avant de se poser,
   comme un tirage qu'on soulève du bout des doigts. cubic-bezier sert de repli
   aux navigateurs qui ne lisent pas encore linear(). */
.equipe-pile__portrait {
  --ressort: cubic-bezier(.34, 1.45, .64, 1);
  --ressort: linear(0, .22 6%, .6 15%, .92 26%, 1.07 37%, 1.09 44%, 1.04 56%, .99 70%, 1.005 84%, 1);
  position: relative;
  width: var(--pile-taille);
  aspect-ratio: 1;
  margin: 0 0 0 calc(-1 * var(--pile-recouvrement));
  padding: 5px;
  border-radius: 1.25rem;
  background: var(--papier);
  box-shadow: 0 1px 3px rgb(6 22 47 / .12), 0 16px 30px -12px rgb(6 22 47 / .42);
  rotate: var(--incline, 0deg);
  translate: 0 var(--decale, 0);
  transition: rotate 520ms var(--ressort),
              translate 520ms var(--ressort),
              scale 520ms var(--ressort),
              box-shadow 320ms var(--ease-out),
              filter 320ms var(--ease-out);
}
.equipe-pile__portrait:nth-child(1) { --incline: -7deg; --decale: .45rem; --eventail: -1.6rem; --eventail-incline: -10deg; }
.equipe-pile__portrait:nth-child(2) { --incline: 3deg;  --decale: -.4rem; --eventail: 0rem;    --eventail-incline: 1deg; }
.equipe-pile__portrait:nth-child(3) { --incline: -2deg; --decale: .2rem;  --eventail: 1.6rem;  --eventail-incline: 9deg; }

.equipe-pile__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(1.25rem - 5px);
}

/* Chaque tirage est un bouton : au doigt il n'existe pas de survol, le toucher
   joue donc la même scène. Le bouton ne dessine rien, il épouse le cadre. */
.equipe-pile__bouton {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: calc(1.25rem - 5px);
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* La scène, en deux temps. La pile s'ouvre d'abord en éventail franc : les
   tirages s'écartent et s'inclinent vers l'extérieur, comme une main qui les
   étale. Le portrait choisi se redresse, monte et passe devant ; les deux
   autres reculent d'un cran pour lui laisser la place. Trois déclencheurs
   pour une même scène : le survol à la souris, le toucher (classes posées par
   site.js) et le focus clavier. */
.equipe-pile__portraits.est-ouverte .equipe-pile__portrait,
.equipe-pile__portraits:has(.equipe-pile__bouton:focus-visible) .equipe-pile__portrait {
  rotate: var(--eventail-incline);
  translate: var(--eventail) -.15rem;
  filter: saturate(.8) brightness(.96);
}
.equipe-pile__portraits .equipe-pile__portrait.est-actif,
.equipe-pile__portraits .equipe-pile__portrait:has(.equipe-pile__bouton:focus-visible) {
  z-index: 3;
  rotate: 0deg;
  translate: var(--eventail) -.8rem;
  scale: 1.14;
  filter: none;
  box-shadow: 0 2px 4px rgb(6 22 47 / .14), 0 26px 44px -14px rgb(6 22 47 / .5);
}

@media (hover: hover) and (pointer: fine) {
  .equipe-pile__portraits:hover .equipe-pile__portrait {
    rotate: var(--eventail-incline);
    translate: var(--eventail) -.15rem;
    filter: saturate(.8) brightness(.96);
  }
  .equipe-pile__portraits .equipe-pile__portrait:hover {
    z-index: 3;
    rotate: 0deg;
    translate: var(--eventail) -.8rem;
    scale: 1.14;
    filter: none;
    box-shadow: 0 2px 4px rgb(6 22 47 / .14), 0 26px 44px -14px rgb(6 22 47 / .5);
  }
}

.equipe-pile__legende {
  font-family: var(--font-enseigne);
  font-size: var(--fs-md);
  line-height: 1.1;
  color: var(--ton-texte);
}

.conseils-section .souligne::after {
  height: .13em;
  bottom: -.01em;
  background: var(--jaune);
  rotate: -1.2deg;
}

.coups-vitrine {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-6), 2.5vw, var(--sp-8));
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* --- CARTE MAJEURE (.coup-majeur) --- */
.coup-majeur {
  --ton-fond: var(--nuit);
  --ton-texte: #FBFAF7;
  --ton-texte-2: #D3DAE8;
  --ton-texte-3: #AEB7CA;
  --ton-accent: var(--jaune);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  background: var(--nuit);
  color: var(--ton-texte);
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
}

/* Alcôve / Scène 3D du livre */
.coup-majeur__scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 320px;
  margin: 0;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--nuit);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* Fond atmosphérique flouté issu de la couverture du livre */
.coup-majeur__fond-flou {
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}

.coup-majeur__fond-flou img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: blur(0px) brightness(0.80) saturate(1.65);
  transform: scale(1.15);
}

.coup-majeur__fond-flou::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(6, 22, 47, 0.15) 0%, rgba(6, 22, 47, 0.68) 100%),
    linear-gradient(175deg, rgba(6, 22, 47, 0.20) 0%, rgba(6, 22, 47, 0.60) 100%);
  pointer-events: none;
}

/* Badge coup de cœur en surimpression (fond plein) */
.coup-majeur__badge-top {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--jaune);
  color: var(--nuit);
  border: 1px solid var(--jaune);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40);
  font-size: 0.72rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.coup-majeur__badge-top svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: currentColor;
}

.coup-majeur__livre {
  position: relative;
  z-index: 2;
  display: block;
  width: min(82%, 240px);
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.58));
  transform: perspective(900px) rotateY(-7deg) rotateZ(-1.5deg);
  transform-origin: center bottom;
  transition: transform 320ms var(--ease-out), filter 320ms var(--ease-out);
}

/* Tranche de livre / épaisseur */
.coup-majeur__livre::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 2.2%;
  right: -4.5%;
  bottom: 2.2%;
  width: 8%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #d8d2c4, #f4f1ea 45%, #cfc8ba);
  box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.35);
}

.coup-majeur__livre img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 4px 4px 2px;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.2);
}

/* Corps éditorial de la carte majeure */
.coup-majeur__corps {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(1.75rem, 2.5vw, 2.75rem);
  background:
    linear-gradient(160deg, rgba(12, 36, 80, 0.4) 0%, transparent 60%),
    var(--nuit);
  border-left: 1px solid rgba(251, 250, 247, 0.08);
}

.coup-majeur__identite {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.coup-majeur__genre-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ton-texte-3);
}

.coup-majeur__titre {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.5rem + 1.2vw, 2.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: #FFFFFF;
  margin: 0;
  text-wrap: balance;
}

.coup-majeur__auteur {
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
  font-weight: var(--fw-bold);
  color: var(--jaune);
}

/* Citation / Avis du libraire en Cormorant Garamond */
.coup-majeur__avis-bloc {
  margin-top: clamp(var(--sp-4), 2vw, var(--sp-6));
  padding-top: clamp(var(--sp-4), 2vw, var(--sp-6));
  border-top: 1px solid rgba(251, 250, 247, 0.12);
}

.coup-majeur__avis {
  font-family: var(--font-cite);
  font-style: italic;
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.38rem);
  line-height: 1.45;
  color: #F7F5F0;
  margin: 0;
  position: relative;
  quotes: "«" "»";
}

.coup-majeur__avis::before { content: open-quote; margin-right: 0.15em; font-size: 1.2em; color: var(--jaune); }
.coup-majeur__avis::after { content: close-quote; margin-left: 0.15em; font-size: 1.2em; color: var(--jaune); }

/* Signature du libraire */
/* Signature : le visage du libraire d'abord, lisible, cerclé de jaune ; son
   prénom en second, sur deux lignes. Plus de pastille grise : à 26 px le
   portrait n'était qu'une tache sombre. */
.coup-majeur__signature {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.coup-majeur__signature .signature__pastille {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--nuit), 0 0 0 4px var(--jaune);
}

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

.coup-majeur__signature .signature__texte {
  display: grid;
  line-height: 1.2;
}
.coup-majeur__signature .signature__texte > span {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ton-texte-3);
}

.coup-majeur__signature strong {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--jaune);
}

/* Pied de carte */
.coup-majeur__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: clamp(var(--sp-5), 2vw, var(--sp-8));
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(251, 250, 247, 0.08);
}

.coup-majeur__editeur {
  font-size: var(--fs-xs);
  color: var(--ton-texte-3);
  font-weight: var(--fw-medium);
}

.coup-majeur__action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--jaune);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-soft);
}

.coup-majeur__action svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: var(--r-full);
  background: rgba(255, 214, 41, 0.15);
  color: var(--jaune);
  transition: transform var(--d-fast) var(--ease-soft), background-color var(--d-fast) var(--ease-soft);
}

.coup-majeur:hover .coup-majeur__action svg {
  transform: translateX(3px);
  background: var(--jaune);
  color: var(--nuit);
}

.coup-majeur:hover .coup-majeur__livre {
  transform: perspective(900px) translateY(-6px) rotateY(-4deg) rotateZ(-0.8deg) scale(1.02);
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.65));
}


/* --- COLONNE SECONDAIRE (.coups-vitrine__secondaires) --- */
.coups-vitrine__secondaires {
  --ton-fond: var(--jaune);
  --ton-texte: var(--nuit);
  --ton-texte-2: #35405C;
  --ton-texte-3: #4A5470;
  --ton-accent: var(--nuit);
  background: #FFD629;
  padding: clamp(var(--sp-6), 2.5vw, var(--sp-8));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.coups-secondaires__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-3);
  border-bottom: 1.5px solid rgba(6, 22, 47, 0.12);
}

.coups-secondaires__titre {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--nuit);
  margin: 0;
  text-transform: uppercase;
}

.coups-secondaires__badge {
  font-size: 0.72rem;
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: rgba(6, 22, 47, 0.1);
  color: var(--nuit);
}

/* Cartes mineures individuelles */
.coup-mineur {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: clamp(var(--sp-4), 1.8vw, var(--sp-5));
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(6, 22, 47, 0.09);
  box-shadow: 0 4px 14px rgba(6, 22, 47, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out),
              background-color var(--d-fast) var(--ease-soft);
}

.coup-mineur:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(6, 22, 47, 0.12);
}

.coup-mineur .media {
  aspect-ratio: 3 / 4;
  width: 86px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 5px 12px rgba(6, 22, 47, 0.2);
  transform: rotate(-1.5deg);
  transition: transform var(--d-fast) var(--ease-out);
  flex-shrink: 0;
}

.coup-mineur:nth-of-type(2) .media {
  transform: rotate(1.5deg);
}

.coup-mineur:hover .media {
  transform: rotate(0deg) scale(1.04);
}

.coup-mineur__corps {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.coup-mineur__meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.coup-mineur__genre {
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4A5470;
}

.coup-mineur__titre {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--nuit);
  margin: 0;
}

.coup-mineur__auteur {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #243350;
}

.coup-mineur__avis {
  font-family: var(--font-cite);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.35;
  color: #35405C;
  margin: 4px 0 0;
}

.coup-mineur__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(6, 22, 47, 0.08);
}

.coup-mineur__editeur {
  font-size: 0.7rem;
  color: #626C82;
  font-weight: var(--fw-medium);
}

.coup-mineur__signature {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  color: var(--nuit);
}

.coup-mineur__signature .pastille-mini {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--jaune);
}

.coup-mineur__signature .pastille-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Action globale vers tous les coups de cœur */
.coups-vitrine__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-full);
  background: rgba(6, 22, 47, 0.08);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--nuit);
  text-decoration: none;
  transition: background-color var(--d-fast) var(--ease-soft),
              transform var(--d-press) var(--ease-out);
}

.coups-vitrine__action:hover {
  background: var(--nuit);
  color: var(--jaune);
}

.coups-vitrine__action svg {
  width: 16px;
  height: 16px;
  transition: transform var(--d-fast) var(--ease-soft);
}

.coups-vitrine__action:hover svg {
  transform: translateX(3px);
}

@media (min-width: 680px) {
  .coup-majeur {
    grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr);
  }
  .coup-majeur__scene { min-height: 420px; }
  .coup-majeur__pied {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 980px) {
  .coups-vitrine {
    grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.98fr);
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(6, 22, 47, 0.06);
  }
  .coup-majeur {
    border-radius: var(--r-xl) 0 0 var(--r-xl);
    box-shadow: none;
  }
  .coups-vitrine__secondaires {
    border-radius: 0 var(--r-xl) var(--r-xl) 0;
    box-shadow: none;
  }
}

@media (min-width: 680px) and (max-width: 979px) {
  .coups-vitrine__secondaires {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  .coups-secondaires__entete,
  .coups-vitrine__action {
    grid-column: 1 / -1;
  }
}

@media (max-width: 679px) {
  .conseils-section .entete-section h2 { max-width: 14ch; }
  .conseils-section .entete-section p {
    margin-top: var(--sp-4);
    font-size: var(--fs-base);
    line-height: 1.55;
  }
  .coup-majeur {
    grid-template-columns: 1fr;
  }
  .coup-majeur__scene {
    min-height: 260px;
    padding: var(--sp-6) var(--sp-4);
  }
  .coup-majeur__livre {
    width: min(70%, 180px);
  }
  .coup-majeur__corps {
    padding: var(--sp-5);
    border-left: 0;
    border-top: 1px solid rgba(251, 250, 247, 0.08);
  }
  .coup-majeur__titre {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .coup-mineur {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .coup-mineur .media {
    width: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coup-majeur__livre,
  .coup-mineur .media { transition: none; }
  .coup-majeur:hover .coup-majeur__livre {
    transform: perspective(900px) rotateY(-7deg) rotateZ(-1.5deg);
  }
  .coup-mineur:hover .media { transform: rotate(-1.5deg); }
  .coup-mineur:nth-of-type(2):hover .media { transform: rotate(1.5deg); }
}

/* ==========================================================================
   Accueil et Sélections — 4 · Une table, une histoire
   La sélection thématique n'est pas une grille de fiches : c'est une idée
   à gauche, et la rangée de livres qui la sert à droite. Sur mobile, la
   rangée devient un défilement au doigt plutôt qu'une pile de quatre cartes.
   ========================================================================== */

.table-moment {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .table-moment { grid-template-columns: 0.85fr 1.15fr; }
  .table-moment__livres { row-gap: calc(var(--sp-5) + var(--sp-8)); }
}
.table-moment h2 { max-width: 16ch; }
.table-moment .plomb {
  max-width: 38ch;
  margin-top: clamp(var(--sp-5), 2.5vw, var(--sp-8));
}
.table-moment__note {
  max-width: 38ch;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ton-filet-net);
  color: var(--ton-texte-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.table-moment__actions { margin-top: var(--sp-8); }

.table-moment__livres {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}
@media (max-width: 979px) {
  .table-moment__livres {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sp-2);
    padding-bottom: var(--sp-4);
    scrollbar-width: thin;
    scrollbar-color: var(--ton-filet-net) transparent;
  }
  .table-moment__livres::-webkit-scrollbar { height: 7px; }
  .table-moment__livres::-webkit-scrollbar-track { background: transparent; }
  .table-moment__livres::-webkit-scrollbar-thumb {
    border-radius: var(--r-full);
    background: var(--ton-filet-net);
  }
  .table-moment__livres > * { flex: none; width: min(46vw, 210px); scroll-snap-align: start; }
  .table-moment__livres:focus-visible { outline-offset: -3px; }
}

/* Les couvertures sont légèrement décalées en hauteur : une rangée
   parfaitement alignée ressemble à un catalogue, pas à une table.
   Le décalage vise les enfants de la figure : la révélation GSAP réécrit
   `transform` et `translate` sur la figure elle-même et l'effaçait. */
.livre-mini { margin: 0; }
.livre-mini .media { aspect-ratio: 3 / 4; box-shadow: var(--shadow-md); }
.livre-mini figcaption {
  display: grid;
  gap: 2px;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--ton-texte-2);
}
.livre-mini figcaption strong {
  color: var(--ton-texte);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
@media (min-width: 980px) {
  .livre-mini:nth-child(even) > * { transform: translateY(var(--sp-8)); }
}

/* ========================================================================== 
   Accueil - 4 · La table des imaginaires
   Une scène unique plutôt qu'une grille : les couvertures gardent leur rôle
   de livres physiques, avec une profondeur locale seulement à l'interaction.
   ========================================================================== */

.table-theatre {
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4.5rem, 7vw, 7.5rem);
}
.table-theatre__grille {
  display: grid;
  grid-template-columns: minmax(17rem, .68fr) minmax(0, 1.32fr);
  gap: clamp(var(--sp-10), 5vw, var(--sp-24));
  align-items: center;
}
.table-theatre__intro {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}
.table-theatre__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-bottom: var(--sp-4);
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-full);
  background: var(--nuit);
  color: var(--jaune);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(6, 22, 47, 0.18);
}
.table-theatre__badge svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: currentColor;
}
.table-theatre__intro h2 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 2.15rem + 2.35vw, 5rem);
  line-height: .92;
  letter-spacing: -.036em;
  text-wrap: balance;
}
.table-theatre__intro .plomb {
  max-width: 38ch;
  margin-top: clamp(var(--sp-5), 2.5vw, var(--sp-8));
  color: var(--ton-texte-2);
}
.table-theatre__note {
  max-width: 34ch;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ton-filet-net);
  color: var(--ton-texte-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.table-theatre__actions { margin-top: var(--sp-8); }

/* La hauteur suit l'emprise réelle de la pile, légende de survol comprise :
   les couvertures sont centrées optiquement face à l'introduction au lieu de
   flotter en haut d'une scène vide. */
.table-theatre__scene {
  position: relative;
  min-height: clamp(26rem, 34vw, 30.5rem);
  overflow: visible;
  background: transparent;
  perspective: 1200px;
}
.table-theatre__livres {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-style: preserve-3d;
}
.livre-scene {
  --angle: 0deg;
  position: absolute;
  z-index: 1;
  width: clamp(8.5rem, 22%, 11.5rem);
  margin: 0;
  opacity: 1;
  transition: opacity var(--d-base) var(--ease-soft), filter var(--d-base) var(--ease-soft);
}
.livre-scene__lien { display: block; color: inherit; }
.livre-scene--1 { top: 27%; left: 0; --angle: -8deg; }
.livre-scene--2 { top: 8%; left: 18%; z-index: 3; width: clamp(9.25rem, 24%, 12.75rem); --angle: 3deg; }
.livre-scene--3 { top: 24%; left: 39%; z-index: 2; --angle: -3deg; }
.livre-scene--4 { top: 7%; left: 59%; z-index: 4; width: clamp(9rem, 23%, 12.25rem); --angle: 5deg; }
.livre-scene--5 { top: 26%; right: 0; z-index: 2; --angle: -5deg; }
.livre-scene__envol {
  position: relative;
  z-index: 2;
  transform: translate3d(0, 0, 0) rotate(var(--angle));
  transform-origin: center bottom;
  transition: transform 280ms var(--ease-out), filter 280ms var(--ease-out);
  will-change: auto;
}
.livre-scene__objet {
  position: relative;
  transform-style: preserve-3d;
}
.livre-scene__media {
  height: auto;
  overflow: hidden;
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: 0 6px 10px rgb(6 22 47 / .16), 0 22px 38px rgb(6 22 47 / .26);
}
.livre-scene__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  transition: filter var(--d-base) var(--ease-soft), transform 280ms var(--ease-out);
}
.livre-scene__legende {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  align-content: end;
  gap: var(--sp-3);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(.9rem, 1.5vw, 1.2rem);
  border-radius: var(--r-lg);
  border: 1px solid rgb(6 22 47 / .08);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .96), rgb(255 255 255 / .82)),
    var(--blanc);
  box-shadow: 0 8px 15px rgb(6 22 47 / .11), 0 24px 42px rgb(6 22 47 / .20);
  color: var(--nuit);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, -1px) rotate(0deg) scale(.985);
  transform-origin: center;
  transition: opacity 140ms var(--ease-soft), transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.livre-scene__legende::before {
  content: "";
  position: absolute;
  top: clamp(.9rem, 1.5vw, 1.2rem);
  left: clamp(.9rem, 1.5vw, 1.2rem);
  width: 1.8rem;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--corail);
}
.livre-scene__identite {
  display: grid;
  align-content: end;
  gap: .18rem;
  min-width: 0;
}
.livre-scene__identite strong {
  font-family: var(--font-display);
  font-size: clamp(.9rem, .78rem + .28vw, 1.08rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.livre-scene__identite > span {
  color: var(--encre-douce);
  font-size: clamp(.68rem, .64rem + .1vw, .76rem);
  font-weight: var(--fw-semi);
  line-height: 1.35;
}
.livre-scene__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  align-self: end;
  border: 0;
  border-radius: var(--r-full);
  color: var(--blanc);
  background: var(--nuit);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .2),
    0 7px 14px rgb(6 22 47 / .2);
  transition: color 180ms var(--ease-soft), background-color 180ms var(--ease-soft), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.livre-scene__action svg {
  width: 1.05rem;
  height: 1.05rem;
  transform: translateX(1px);
}
.livre-scene__action:hover,
.livre-scene__action:focus-visible {
  background: var(--jaune);
  color: var(--nuit);
  transform: translateX(3px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    0 9px 18px rgb(6 22 47 / .24);
}
.livre-scene__action:active { transform: translateX(2px) scale(.94); }


/* Le clavier révèle la même relation couverture-cartel que le survol. Sur
   écran tactile, site.js pose .is-active au premier toucher. */
.livre-scene:focus-within,
.livre-scene.is-active { z-index: 8; }
.livre-scene:focus-within .livre-scene__envol,
.livre-scene.is-active .livre-scene__envol {
  filter: drop-shadow(0 30px 30px rgb(6 22 47 / .24));
  transform: translate3d(-.3rem, -.45rem, 64px) rotate(0deg) scale(1.025);
}
.livre-scene:focus-within .livre-scene__media img,
.livre-scene.is-active .livre-scene__media img {
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.012);
}
.livre-scene:focus-within .livre-scene__legende,
.livre-scene.is-active .livre-scene__legende {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(1.45rem, 6.1rem, 0) rotate(1.15deg) scale(1);
  box-shadow: 0 9px 17px rgb(6 22 47 / .12), 0 28px 48px rgb(6 22 47 / .23);
}

@media (hover: hover) and (pointer: fine) {
  .livre-scene:hover { z-index: 8; }
  .livre-scene:hover .livre-scene__envol {
    filter: drop-shadow(0 30px 30px rgb(6 22 47 / .24));
    transform: translate3d(-.3rem, -.45rem, 64px) rotate(0deg) scale(1.025);
  }
  .livre-scene:hover .livre-scene__media img {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.012);
  }
  .livre-scene:hover .livre-scene__legende {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(1.45rem, 6.1rem, 0) rotate(1.15deg) scale(1);
    box-shadow: 0 9px 17px rgb(6 22 47 / .12), 0 28px 48px rgb(6 22 47 / .23);
  }
  .table-theatre__scene:has(.livre-scene:hover) .livre-scene:not(:hover) {
    filter: saturate(.55);
    opacity: .52;
  }
  .table-theatre__scene:has(.livre-scene:hover) .livre-scene:not(:hover) .livre-scene__envol {
    transform: translate3d(0, 8px, -18px) rotate(var(--angle)) scale(.96);
  }
}

@media (max-width: 979px) {
  .table-theatre { padding-block: clamp(4rem, 10vw, 5.5rem); }
  .table-theatre__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .table-theatre__intro { max-width: 44rem; }
  .table-theatre__intro h2 { max-width: 13ch; }
  .table-theatre__scene { min-height: 0; }
  .table-theatre__livres {
    --coverflow-card: min(72vw, 17rem);
    position: relative;
    display: flex;
    gap: clamp(.75rem, 4vw, 1.25rem);
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: max(var(--sp-6), calc((100% - var(--coverflow-card)) / 2));
    scroll-snap-type: x mandatory;
    /* 12rem de reserve en bas servaient a la fiche qui se depliait par-dessus
       la couverture et a la barre de navigation. Les deux ont disparu : la
       legende est desormais posee dans le flux, sous la couverture. */
    padding: var(--sp-8) max(var(--sp-6), calc((100% - var(--coverflow-card)) / 2)) var(--sp-4);
    scrollbar-width: none;
    perspective: 900px;
  }
  .table-theatre__livres::-webkit-scrollbar { display: none; }
  /* `transform` et `opacity` sont ecrits en ligne par le JS a chaque frame de
     defilement. Les valeurs ci-dessous ne sont que le repli : ce que voit
     quelqu'un dont le JS n'a pas tourne, ou l'etat avant la premiere mesure.
     Aucune transition sur ces deux proprietes : elles suivent le doigt, une
     interpolation viendrait se mettre en travers. */
  .livre-scene,
  .livre-scene--2 {
    position: relative;
    inset: auto;
    flex: 0 0 var(--coverflow-card);
    width: auto;
    scroll-snap-align: center;
    scroll-snap-stop: normal;
  }
  /* L'estompe porte sur la couverture et la legende, pas sur la <figure> :
     celle-ci est l'enfant que le reveal d'entree (GSAP) anime deja en opacite,
     et deux auteurs sur une meme propriete ne cohabitent pas. */
  .livre-scene__envol {
    transform: perspective(900px) scale(.9);
    transform-origin: center;
    transition: none;
    opacity: .6;
    will-change: transform, opacity;
  }
  .livre-scene.is-coverflow-active { z-index: 5; }

  /* La legende quitte la superposition : elle n'est plus une carte qui se
     deplie au toucher mais un cartouche pose sous la couverture, lisible
     d'emblee. Elle herite de l'opacite de la figure, donc elle s'estompe
     avec sa couverture quand celle-ci quitte le centre. */
  .livre-scene__legende {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--sp-4);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    text-align: center;
    opacity: .6;
  }
  .livre-scene__legende::before { content: none; }
  .livre-scene__identite {
    display: grid;
    gap: .2rem;
    padding: 0;
    text-align: center;
  }
  /* La couverture entiere est deja le lien vers la fiche : une fleche en plus
     sous le titre est une seconde cible pour la meme destination. */
  .livre-scene__action { display: none; }
  .livre-scene__identite strong {
    font-size: clamp(.98rem, 4.2vw, 1.12rem);
    line-height: 1.1;
  }
  .livre-scene__identite > span {
    font-size: .75rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .table-theatre__livres:focus-visible { outline-offset: -3px; }
}
/* Grands ecrans tactiles seulement — une tablette, ou la scene garde sa
   disposition eclatee et ou la fiche se deplie encore au toucher. En dessous
   de 980 px la legende est posee sous la couverture et reste lisible : la
   masquer ici la ferait disparaitre. */
@media (hover: none) and (min-width: 980px), (pointer: coarse) and (min-width: 980px) {
  .livre-scene__legende {
    opacity: 0;
    pointer-events: none;
  }
  .livre-scene.is-active .livre-scene__envol {
    transform: perspective(900px) translate3d(-.18rem, -.45rem, 40px) rotateY(0deg) scale(1.015);
  }
}

@media (max-width: 520px) {
  .table-theatre__intro .plomb { font-size: var(--fs-base); }
  .table-theatre__note { margin-top: var(--sp-5); }
  .table-theatre__actions { margin-top: var(--sp-6); }
}

@media (prefers-reduced-motion: reduce) {
  .livre-scene,
  .livre-scene__envol,
  .livre-scene__media img,
  .livre-scene__legende { transition: none; }
  .livre-scene:hover .livre-scene__envol,
  .livre-scene:focus-within .livre-scene__envol,
  .livre-scene.is-active .livre-scene__envol,
  .livre-scene.is-coverflow-active .livre-scene__envol,
  .livre-scene[data-coverflow-position] .livre-scene__envol,
  .table-theatre__scene:has(.livre-scene:hover) .livre-scene:not(:hover) .livre-scene__envol {
    filter: none;
    transform: rotate(var(--angle));
  }
  .table-theatre__scene:has(.livre-scene:hover) .livre-scene:not(:hover) {
    filter: none;
    opacity: 1;
  }
}

/* ========================================================================== 
   Accueil - 5 · Les rencontres de la librairie
   Une prochaine date honnêtement annoncée comme en préparation, puis trois
   archives réelles qui montrent les auteurs et les livres déjà accueillis.
   ========================================================================== */

.rendezvous {
  overflow: clip;
  padding-block: clamp(var(--sp-12), 4.5vw, 4.25rem);
}
.rendezvous__entete {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr);
  gap: clamp(var(--sp-8), 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(var(--sp-8), 3vw, var(--sp-10));
}
.rendezvous__entete h2 {
  max-width: 19ch;
  font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.032em;
}
.rendezvous__introduction {
  max-width: 35rem;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ton-filet-net);
}
.rendezvous__introduction p {
  color: var(--ton-texte-2);
  font-size: var(--fs-sm);
}
.rendezvous__repere {
  display: block;
  margin-top: var(--sp-4);
  color: var(--ton-accent-texte);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rendezvous__programme {
  display: grid;
  grid-template-columns: minmax(18rem, .78fr) minmax(0, 1.72fr);
  gap: clamp(var(--sp-6), 2.5vw, var(--sp-10));
  align-items: start;
}
.rendezvous__principal,
.rendezvous__secondaire,
.rendezvous__archives { min-width: 0; }
.rendezvous__archives {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) minmax(0, 1fr);
  gap: clamp(var(--sp-4), 1.7vw, var(--sp-6));
  align-items: start;
}
.rendezvous__secondaire {
  min-width: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ton-filet-net);
}
.rendezvous__secondaire:nth-child(2) { margin-top: var(--sp-6); }
.rendezvous__media {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--ton-carte);
}
.rendezvous__media--principal {
  aspect-ratio: 16 / 9.6;
  border-radius: var(--r-lg);
}
.rendezvous__media--secondaire {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
}
.rendezvous__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--ease-out),
              filter var(--d-base) var(--ease-soft);
}
.rendezvous__media--principal img {
  object-position: center 58%;
  filter: saturate(.78) contrast(1.04);
}
.rendezvous__media--secondaire img { object-position: center; }
.rendezvous__detail {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ton-filet-net);
}
.rendezvous__media + .rendezvous__detail {
  margin-top: var(--sp-4);
  border-top: 0;
}
.rendezvous__type {
  color: var(--ton-accent-texte);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.rendezvous__detail h3 {
  max-width: 25ch;
  margin-top: var(--sp-2);
  font-size: clamp(1.35rem, 1.16rem + .55vw, 1.85rem);
  line-height: 1.06;
  letter-spacing: -.024em;
}
.rendezvous__secondaire .rendezvous__detail h3 {
  font-size: clamp(1.02rem, .95rem + .32vw, 1.28rem);
}
.rendezvous__detail > p:not(.rendezvous__type) {
  margin-top: var(--sp-3);
  color: var(--ton-texte-2);
  font-size: var(--fs-sm);
}
.rendezvous__secondaire .rendezvous__detail > p:not(.rendezvous__type) {
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.rendezvous__detail cite { font-style: italic; }
.rendezvous__principal .lien-fleche { margin-top: var(--sp-5); }
.rendezvous__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-6);
}

@media (hover: hover) and (pointer: fine) {
  .rendezvous__principal:hover .rendezvous__media img,
  .rendezvous__secondaire:hover .rendezvous__media img {
    transform: scale(1.025);
    filter: saturate(1) contrast(1.03);
  }
}

@media (min-width: 980px) and (max-height: 820px) {
  .rendezvous { padding-block: var(--sp-10) var(--sp-12); }
  .rendezvous__entete { margin-bottom: var(--sp-6); }
  .rendezvous__entete h2 { font-size: clamp(2.15rem, 3.3vw, 3.1rem); }
  .rendezvous__media--principal { aspect-ratio: 16 / 8.7; }
  .rendezvous__actions { margin-top: var(--sp-5); }
}

@media (max-width: 900px) {
  .rendezvous__entete {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .rendezvous__introduction { max-width: 42rem; }
  .rendezvous__programme {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .rendezvous__media--principal { aspect-ratio: 16 / 7.5; }
}

@media (max-width: 640px) {
  .rendezvous { padding-block: var(--sp-12); }
  .rendezvous__entete h2 { max-width: 15ch; }
  .rendezvous__media--principal {
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
  }
  .rendezvous__archives {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-3);
    scrollbar-width: thin;
    scrollbar-color: var(--ton-filet-net) transparent;
  }
  .rendezvous__archives::-webkit-scrollbar { height: 6px; }
  .rendezvous__archives::-webkit-scrollbar-track { background: transparent; }
  .rendezvous__archives::-webkit-scrollbar-thumb {
    border-radius: var(--r-full);
    background: var(--ton-filet-net);
  }
  .rendezvous__secondaire,
  .rendezvous__secondaire:nth-child(2) {
    flex: 0 0 min(78vw, 20rem);
    margin-top: 0;
    scroll-snap-align: start;
  }
  .rendezvous__secondaire .rendezvous__detail h3 { font-size: var(--fs-md); }
  .rendezvous__actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .rendezvous__media img { transition: none; }
  .rendezvous__principal:hover .rendezvous__media img,
  .rendezvous__secondaire:hover .rendezvous__media img {
    transform: none;
  }
}

/* ========================================================================== 
   Accueil - 6 · 200 m² à parcourir
   Deux colonnes de même hauteur se répondent en ordre inversé : paysage puis
   portrait à gauche, portrait puis paysage à droite. Le mobile élargit seul
   la visite avec trois vues supplémentaires dans son carrousel.
   ========================================================================== */

.visite {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.visite > .conteneur { position: relative; z-index: 1; }
.oiseau-gimmick--visite {
  top: clamp(2.75rem, 4vw, 4.5rem);
  right: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
  width: clamp(6.5rem, 9vw, 9.5rem);
  color: var(--bleu);
  opacity: .07;
  transform: rotate(-8deg);
}
.visite__grille {
  display: grid;
  gap: clamp(var(--sp-10), 4vw, var(--sp-16));
  align-items: start;
}
.visite__intro { max-width: 38rem; }
.visite__intro h2 {
  max-width: 11ch;
  font-size: clamp(2.35rem, 1.85rem + 2.2vw, 4.15rem);
  line-height: .98;
  letter-spacing: -0.03em;
}
.visite__intro > p {
  max-width: 42ch;
  margin-top: var(--sp-4);
  color: var(--ton-texte-2);
}
.visite .lieu-actions {
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.visite__galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  width: min(100%, 46rem);
  min-width: 0;
  margin-left: auto;
}
.visite__colonne {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.visite__photo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
}
.visite__photo .media {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: var(--r-lg);
  background: var(--papier-3);
}
.visite__photo--paysage .media { aspect-ratio: 3 / 2; }
.visite__photo--portrait .media { aspect-ratio: 4 / 5; }
.visite__photo--mobile { display: none; }
.visite__photo img {
  transition: transform var(--d-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .visite__photo:hover img {
    transform: scale(1.012);
  }
}

@media (min-width: 1100px) {
  .visite__grille {
    grid-template-columns: minmax(270px, .58fr) minmax(0, 1.42fr);
  }
  .visite__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-8));
  }
}

/* La symétrie inversée reste lisible sur tablette, avec une largeur plafonnée
   pour que les photographies ne redeviennent pas monumentales. */
@media (min-width: 720px) and (max-width: 1099px) {
  .visite__galerie {
    width: min(100%, 42rem);
    margin-inline: auto;
  }
}

/* Sur téléphone, le rail reste natif mais s'aligne sur le texte et montre
   assez de la photographie suivante pour rendre le geste évident. */
@media (max-width: 719px) {
  .visite__grille { gap: var(--sp-8); }
  .visite__intro h2 { max-width: 12ch; }
  .visite__galerie {
    display: flex;
    width: calc(100% + var(--gutter));
    gap: var(--sp-3);
    margin-left: 0;
    margin-right: calc(0px - var(--gutter));
    padding-right: var(--gutter);
    padding-bottom: var(--sp-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--ton-filet-net) transparent;
  }
  .visite__colonne { display: contents; }
  .visite__galerie::-webkit-scrollbar { height: 5px; }
  .visite__galerie::-webkit-scrollbar-track { background: transparent; }
  .visite__galerie::-webkit-scrollbar-thumb {
    border-radius: var(--r-full);
    background: var(--ton-filet-net);
  }
  .visite__photo {
    flex: 0 0 min(64vw, 250px);
    scroll-snap-align: start;
  }
  .visite__photo--mobile { display: flex; }
  .visite__photo--portrait .media { flex: none; aspect-ratio: 5 / 6; }
  .visite__photo--paysage { flex-basis: min(72vw, 300px); }
  .visite__photo--paysage .media { flex: none; aspect-ratio: 3 / 2; }
  .visite .lieu-actions { align-items: flex-start; }
}

/* ==========================================================================
   Accueil - 7 · Vous cherchez quelque chose de précis ?
   Un index de service ouvert : aucune carte, aucune ombre. Le titre reste
   stable à gauche et les trois réponses se lisent comme de grandes entrées.
   ========================================================================== */

.demande-section {
  isolation: isolate;
  overflow: clip;
  margin-inline: clamp(.5rem, 1.5vw, 1.5rem);
  padding-block: clamp(4.25rem, 6vw, 6.75rem);
  padding-top: max(clamp(4.25rem, 6vw, 6.75rem), calc(var(--header-h) + var(--sp-3)));
  border-radius: var(--r-xl);
}
.demande-section::before {
  content: '';
  position: absolute;
  right: clamp(-15rem, -10vw, -7rem);
  bottom: clamp(-17rem, -18vw, -9rem);
  z-index: 0;
  width: clamp(22rem, 34vw, 38rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--nuit) 14%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.demande-section > .conteneur { position: relative; z-index: 1; }
.demande-index {
  display: grid;
  grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr);
  gap: clamp(var(--sp-10), 7vw, var(--sp-24));
  align-items: start;
}
.demande-index__intro {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-8));
  max-width: 35rem;
}
.demande-index__intro::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--sp-5));
  left: 0;
  width: clamp(3.25rem, 5vw, 4.75rem);
  height: 7px;
  border-radius: var(--r-full);
  background: var(--corail);
}
.demande-index__intro h2 {
  /* Le manifeste et le filet d'ouverture de l'index partagent une ligne :
     on retire l'espace interne de la ligne de texte pour poser la hauteur
     de capitale exactement sur le filet, pas la boîte du bloc. */
  margin-top: -.085em;
  max-width: 11ch;
  font-size: clamp(2.75rem, 2.1rem + 2.8vw, 5.15rem);
  line-height: .91;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.demande-index__intro p {
  max-width: 39ch;
  margin-top: clamp(var(--sp-5), 2.4vw, var(--sp-8));
  color: var(--ton-texte-2);
  font-size: var(--fs-md);
}

/* Les trois entrées partagent une seule grille : sans colonnes communes,
   chaque ligne calcule sa propre largeur d'action et les descriptions ne
   retombent jamais au même endroit. */
.demande-index__liste {
  display: grid;
  grid-template-columns: minmax(185px, .78fr) minmax(230px, 1fr) auto;
  column-gap: clamp(var(--sp-6), 3vw, var(--sp-12));
  border-top: 2px solid var(--nuit);
}
.demande-choix {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(185px, .78fr) minmax(230px, 1fr) auto;
  column-gap: clamp(var(--sp-6), 3vw, var(--sp-12));
  /* Ligne de lecture commune : intitulé, explication et action partent de
     la même ligne de base, quelle que soit la longueur du texte. */
  align-items: baseline;
  /* Plancher seulement : la ligne suit son contenu plutôt que de laisser un
     vide sous la plus courte des trois. */
  min-height: clamp(114px, 8vw, 136px);
  padding-block: clamp(var(--sp-5), 1.8vw, var(--sp-8));
  padding-inline: clamp(var(--sp-3), 1.3vw, var(--sp-6));
  border-bottom: 1px solid var(--ton-filet-net);
  isolation: isolate;
  transition: color var(--d-base) var(--ease-soft);
}
/* L'index se referme avec le trait qui l'a ouvert. */
.demande-choix:last-child { border-bottom: 2px solid var(--nuit); }

@supports (grid-template-columns: subgrid) {
  .demande-choix { grid-template-columns: subgrid; }
}

.demande-choix::before {
  content: '';
  position: absolute;
  /* Le voile tient exactement entre les filets : la ligne s'allume sur toute
     la largeur de l'index, sans jamais rejouer la mise en page ni recomposer
     le paragraphe au survol. */
  inset: 0;
  z-index: -1;
  background: var(--nuit);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 280ms var(--ease-out);
}
.demande-choix h3 {
  max-width: 11ch;
  font-size: clamp(1.8rem, 1.45rem + 1vw, 2.65rem);
  line-height: .98;
  letter-spacing: -.025em;
  transition: color var(--d-base) var(--ease-soft),
              transform var(--d-base) var(--ease-out);
}
.demande-choix p {
  max-width: 38ch;
  margin: 0;
  color: var(--ton-texte-2);
  font-size: var(--fs-sm);
  transition: color var(--d-base) var(--ease-soft);
}
.demande-choix__action {
  position: relative;
  justify-self: end;
  padding-block: var(--sp-2);
  border-bottom: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--d-base) var(--ease-soft);
}
/* Au repos, un filet complet et discret ; au survol, le trait plein se
   déploie par-dessus, de la droite vers la gauche. */
.demande-choix__action::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-base) var(--ease-out);
}
.demande-choix__action--tel {
  padding: var(--sp-3) var(--sp-5);
  border: 0;
  border-radius: var(--r-full);
  background: var(--nuit);
  color: var(--jaune);
  transition: color var(--d-base) var(--ease-soft),
              background-color var(--d-base) var(--ease-soft),
              transform var(--d-press) var(--ease-out);
}
.demande-choix__action--tel::after { display: none; }

.demande-choix:focus-visible {
  color: var(--papier);
}
.demande-choix:focus-visible::before { transform: scaleY(1); }
.demande-choix:focus-visible h3 { color: var(--papier); }
.demande-choix:focus-visible p { color: #D7DDEA; }
.demande-choix:focus-visible .demande-choix__action { color: var(--papier); }
.demande-choix:focus-visible .demande-choix__action--tel {
  background: var(--jaune);
  color: var(--nuit);
}
.demande-choix:active .demande-choix__action--tel { transform: scale(.96); }

@media (hover: hover) and (pointer: fine) {
  .demande-choix:hover { color: var(--papier); }
  .demande-choix:hover::before { transform: scaleY(1); }
  .demande-choix:hover h3 {
    color: var(--papier);
    transform: translateX(5px);
  }
  .demande-choix:hover p { color: #D7DDEA; }
  .demande-choix:hover .demande-choix__action { color: var(--papier); }
  .demande-choix:hover .demande-choix__action::after { transform: scaleX(1); }
  .demande-choix:hover .demande-choix__action--tel {
    background: var(--jaune);
    color: var(--nuit);
  }
}

/* Sans survol, la pression reste le seul retour possible : elle ne doit pas
   disparaître avec la souris. */
@media (hover: none) {
  .demande-choix:active { color: var(--papier); }
  .demande-choix:active::before {
    transform: scaleY(1);
    transition-duration: var(--d-press);
  }
  .demande-choix:active h3,
  .demande-choix:active .demande-choix__action { color: var(--papier); }
  .demande-choix:active p { color: #D7DDEA; }
  .demande-choix:active .demande-choix__action--tel {
    background: var(--jaune);
    color: var(--nuit);
  }
}

@media (max-width: 980px) {
  .demande-index {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--sp-8), 5.5vw, var(--sp-12));
  }
  .demande-index__intro {
    position: static;
    max-width: 48rem;
  }
  .demande-index__intro h2 { max-width: 13ch; }
}

@media (max-width: 759px) {
  /* Sur téléphone, le manifeste devient une respiration centrale avant le
     carrousel : badge, titre, texte, repère et action partagent le même axe.
     Les couvertures, elles, gardent leur défilement horizontal naturel. */
  .table-theatre__intro {
    max-width: 36rem;
    margin-inline: auto;
    text-align: center;
  }
  .table-theatre__badge,
  .table-theatre__intro h2,
  .table-theatre__intro .plomb,
  .table-theatre__note { margin-inline: auto; }
  .table-theatre__actions { justify-content: center; }

  .oiseau-gimmick--moment,
  .oiseau-gimmick--visite { display: none; }

  .demande-section {
    padding-block: clamp(3rem, 10vw, 3.75rem);
    border-radius: var(--r-lg);
  }
  .demande-index { gap: var(--sp-8); }
  .demande-index__intro h2 {
    max-width: 12ch;
    font-size: clamp(2.35rem, 10.5vw, 3.5rem);
  }
  .demande-index__intro p { margin-top: var(--sp-4); }
  .demande-index__liste { grid-template-columns: minmax(0, 1fr); }
  .demande-choix {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-3);
    min-height: 0;
    padding-block: clamp(var(--sp-4), 5vw, var(--sp-5));
    padding-inline: var(--sp-3);
  }
  .demande-choix h3 { max-width: 14ch; }
  .demande-choix p { max-width: 44ch; }
  .demande-choix__action { justify-self: start; }
}

/* Mouvement réduit : on retire les déplacements, jamais le retour d'état.
   Le voile apparaît sans se déplier et le trait de l'action reste plein. */
@media (prefers-reduced-motion: reduce) {
  .demande-choix::before {
    transform: none;
    opacity: 0;
    transition: none;
  }
  .demande-choix:hover::before,
  .demande-choix:active::before,
  .demande-choix:focus-visible::before { opacity: 1; }
  .demande-choix h3,
  .demande-choix,
  .demande-choix p,
  .demande-choix__action,
  .demande-choix__action::after,
  .demande-choix__action--tel { transition: none; }
  .demande-choix:hover h3 { transform: none; }
  .demande-choix:active .demande-choix__action--tel { transform: none; }
  .demande-choix:hover .demande-choix__action::after { transform: scaleX(1); }
}

/* ==========================================================================
   Accueil - 8 · Venir nous voir
   La façade réelle mène vers un bloc pratique compact. Les informations
   Format compact et architectural. L'ensemble des repères pratiques tient
   dans un encombrement vertical maîtrisé, face à la vitrine réelle.
   ========================================================================== */

.accueil-contact {
  overflow: clip;
  padding-block: clamp(2rem, 1.8rem + 1.6vw, 3.25rem);
}
/* Le pied remonte de son rayon pour former sa courbe supérieure. Sur mobile,
   on réserve ce recouvrement et une vraie pause de lecture après la carte
   d'accès, plutôt que de laisser le footer s'y coller. */
@media (max-width: 759px) {
  .accueil-contact { padding-bottom: calc(var(--sp-16) + var(--r-2xl)); }
}

.accueil-contact__entete {
  max-width: 52rem;
  margin-bottom: clamp(var(--sp-4), 1.6vw, var(--sp-6));
}

.accueil-contact__entete h2 {
  max-width: 24ch;
  font-size: clamp(1.85rem, 1.5rem + 1.4vw, 2.85rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.accueil-contact__entete p {
  max-width: 58ch;
  margin-top: var(--sp-2);
  color: var(--ton-texte-2);
  font-size: clamp(0.92rem, 0.88rem + 0.18vw, 1.02rem);
  line-height: 1.5;
}

.accueil-acces {
  display: grid;
  gap: clamp(var(--sp-5), 2.5vw, var(--sp-8));
  grid-template-columns: 1fr;
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* Storefront Visual Column */
.accueil-acces__visuel {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.accueil-acces__visuel .media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(6, 22, 47, 0.08), var(--shadow-md);
  background-color: var(--ton-carte-2);
}

.accueil-acces__visuel .media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transition: transform var(--d-slow) var(--ease-out);
}

.accueil-acces__visuel:hover .media img {
  transform: scale(1.02);
}

.accueil-acces__legende {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-inline: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--ton-texte-3);
  font-weight: var(--fw-medium);
}

.accueil-acces__repere-point {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background-color: var(--bleu);
  flex-shrink: 0;
}

/* Info Column: Styled as an ultra-compact architectural card */
.accueil-acces__carte {
  background: var(--blanc);
  border: 1px solid rgba(6, 22, 47, 0.08);
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-4), 2.2vw, var(--sp-6));
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  min-width: 0;
}

/* Status Bar at top of card */
.accueil-acces__statut-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ton-filet);
  width: 100%;
}

.accueil-acces__statut-titre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.18rem);
  color: var(--ton-texte);
  margin: 0;
  letter-spacing: -0.015em;
}

/* Schedule Table: Tight, clean, legible */
.accueil-acces .horaires {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.accueil-acces .horaires th,
.accueil-acces .horaires td {
  padding-block: 0.24rem;
  padding-inline: var(--sp-2);
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(6, 22, 47, 0.05);
  transition: background-color var(--d-fast) var(--ease-soft);
}

.accueil-acces .horaires th {
  font-weight: var(--fw-semi);
  color: var(--ton-texte-2);
  text-align: left;
}

.accueil-acces .horaires td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ton-texte);
  font-weight: var(--fw-medium);
}

.accueil-acces .horaires tr:last-child th,
.accueil-acces .horaires tr:last-child td {
  border-bottom: 0;
}

.accueil-acces .horaires tr.is-aujourdhui th,
.accueil-acces .horaires tr.is-aujourdhui td {
  background-color: rgba(255, 79, 51, 0.06);
  color: var(--ton-accent-texte);
  font-weight: var(--fw-bold);
}

.accueil-acces .horaires tr.is-aujourdhui th {
  border-top-left-radius: var(--r-chip);
  border-bottom-left-radius: var(--r-chip);
}

.accueil-acces .horaires tr.is-aujourdhui td {
  border-top-right-radius: var(--r-chip);
  border-bottom-right-radius: var(--r-chip);
}

/* Coordinates: 2-column inline grid on desktop/tablet for vertical economy */
.accueil-acces__coordonnees {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ton-filet);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--sp-4);
}

@media (min-width: 440px) {
  .accueil-acces__coordonnees {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

.accueil-acces__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.accueil-acces__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--papier-2);
  color: var(--bleu);
  flex-shrink: 0;
}

.accueil-acces__icone svg {
  width: 14px;
  height: 14px;
}

.accueil-acces__adresse {
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.35;
}

.accueil-acces__adresse strong {
  display: block;
  color: var(--ton-texte);
  font-weight: var(--fw-bold);
}

.accueil-acces__adresse span {
  display: block;
  color: var(--ton-texte-2);
}

.accueil-acces__tel {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  line-height: 1.35;
}

.accueil-acces__tel-lien {
  font-weight: var(--fw-bold);
  color: var(--ton-texte);
  font-variant-numeric: tabular-nums;
}

.accueil-acces__tel-lien:hover {
  color: var(--bleu);
}

/* Single CTA Action */
.accueil-acces__actions {
  display: flex;
  width: 100%;
  padding-top: var(--sp-1);
}

.accueil-acces__actions .btn {
  width: 100%;
  justify-content: center;
  padding: 0.65rem var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.accueil-acces__actions .btn svg {
  margin-left: var(--sp-2);
  transition: transform var(--d-fast) var(--ease-soft);
}

.accueil-acces__actions .btn:hover svg {
  transform: translate(2px, -2px);
}

/* Desktop layout: Balanced 2 columns with reduced height */
@media (min-width: 940px) {
  .accueil-acces {
    grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.92fr);
    align-items: stretch;
  }

  .accueil-acces__visuel {
    height: 100%;
  }

  .accueil-acces__visuel .media {
    flex: 1;
    height: 100%;
    min-height: 360px;
    aspect-ratio: auto;
  }

  .accueil-acces__carte {
    height: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accueil-acces__visuel .media img,
  .accueil-acces__actions .btn svg {
    transition: none;
    transform: none !important;
  }
}

.agenda-actions,
.lieu-actions { margin-top: var(--sp-10); }

@media (min-width: 540px) and (max-width: 899px) {
  .galerie--mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie--mosaique > *:first-child,
  .galerie--mosaique > *:last-child { grid-column: 1 / -1; }
  .galerie--mosaique > *:last-child .media { aspect-ratio: 16 / 7; }
}

@media (max-width: 519px) {
  .agenda-actions,
  .lieu-actions,
  .accueil-acces__infos .groupe-btn,
  .accueil-acces__actions,
  .agenda-actions .btn,
  .lieu-actions .btn,
  .accueil-acces__infos .btn,
  .accueil-acces__actions .btn { width: 100%; }
}

/* ==========================================================================
   Sélections — nouveautés
   Une liste horizontale plutôt qu'une quatrième grille de couvertures :
   la page en compte déjà deux au-dessus.
   ========================================================================== */

.nouveautes-liste { display: grid; gap: var(--sp-5); }
.nouveaute {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--ton-carte);
  border: 1px solid var(--ton-filet);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-soft);
}
@media (min-width: 700px) { .nouveaute { grid-template-columns: 120px 1fr; } }
.nouveaute:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.nouveaute .media { aspect-ratio: 3 / 4; border-radius: var(--r-md); }
.nouveaute__corps { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; min-width: 0; }
.nouveaute__corps h3 { font-size: var(--fs-md); }
.nouveaute__corps p { font-size: var(--fs-sm); color: var(--ton-texte-2); }

.coeur-grille {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

/* ==========================================================================
   Fiche livre
   Une page éditoriale issue de la sélection, jamais une fiche marchande.
   ========================================================================== */

.fiche-livre {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.75rem, 2.6vw, 3rem));
  padding-bottom: clamp(3rem, 4.5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: var(--ton-fond);
  color: var(--ton-texte);
}

.fiche-livre::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(30vw, 25rem);
  height: 1px;
  right: 0;
  bottom: clamp(2.5rem, 5vw, 5rem);
  background: color-mix(in srgb, var(--jaune) 45%, transparent);
  pointer-events: none;
}

.fiche-livre .ariane { margin-bottom: clamp(var(--sp-6), 2.8vw, var(--sp-10)); }

.fiche-livre__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-8), 4vw, var(--sp-16));
  align-items: center;
}

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

.fiche-livre__genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.fiche-livre__genres .etiquette {
  min-height: 0;
  padding: .34rem .56rem;
  border: 0;
  border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--ton-texte) 8%, transparent);
  color: color-mix(in srgb, var(--ton-texte) 82%, transparent);
  font-size: .7rem;
  letter-spacing: .075em;
}

.fiche-livre h1 {
  max-width: 16ch;
  font-size: clamp(2.45rem, 1.88rem + 2.7vw, 4.75rem);
  letter-spacing: -0.03em;
  line-height: .98;
  color: var(--ton-texte);
  text-wrap: balance;
}

.fiche-livre__sous-titre {
  max-width: 34ch;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--ton-texte-2);
}

.fiche-livre__auteur {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--jaune);
}

.fiche-livre__accroche {
  max-width: 52ch;
  margin-top: var(--sp-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--ton-texte-2);
}

.fiche-livre__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-6));
  margin-top: clamp(var(--sp-6), 2.5vw, var(--sp-8));
}

.fiche-livre__actions :focus-visible {
  outline: 2px solid var(--jaune);
  outline-offset: 4px;
}

.fiche-livre__actions .btn--principal {
  min-height: 3.35rem;
  padding: 0.85rem 1.85rem;
  font-size: 0.95rem;
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  box-shadow: 0 2px 4px rgb(6 22 47 / .24), 0 8px 24px -4px rgb(255 214 41 / .38);
  border: 1.5px solid rgb(255 255 255 / .24);
  transition: box-shadow var(--d-base) var(--ease-soft),
              border-color var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft);
}

.fiche-livre__actions .btn--principal:hover {
  box-shadow: 0 4px 12px rgb(6 22 47 / .3), 0 16px 36px -4px rgb(255 214 41 / .55);
  border-color: rgb(255 255 255 / .45);
}

.fiche-livre__actions .btn--principal:active {
  transform: scale(.98);
  box-shadow: 0 2px 6px rgb(6 22 47 / .25), 0 6px 16px -4px rgb(255 214 41 / .3);
}

.fiche-livre__actions .btn--principal svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.3;
  transition: transform var(--d-base) var(--ease-out);
}

.fiche-livre__actions .btn--principal:hover svg {
  transform: scale(1.08) rotate(-4deg);
}

.fiche-livre__actions .lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ton-texte-2);
  transition: color var(--d-fast) var(--ease-soft);
}

.fiche-livre__actions .lien-fleche svg {
  border-color: color-mix(in srgb, #FBFAF7 20%, transparent);
  color: var(--ton-texte-2);
  transition: transform var(--d-base) var(--ease-out),
              background-color var(--d-base) var(--ease-soft),
              border-color var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft);
}

.fiche-livre__actions .lien-fleche:hover {
  color: var(--jaune);
}

.fiche-livre__actions .lien-fleche:hover svg {
  transform: translateX(-4px);
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--nuit);
}

.fiche-livre__couverture {
  position: relative;
  width: min(100%, 18rem);
  margin: 0 auto;
}

.fiche-livre__couverture::before {
  content: '';
  position: absolute;
  inset: .7rem -.6rem -.6rem .7rem;
  z-index: -1;
  border-radius: var(--r-md);
  background: rgb(250, 72, 49);
}

.fiche-livre__couverture .media {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.fiche-livre__couverture figcaption {
  margin-top: var(--sp-3);
  margin-left: .7rem;
  margin-right: -.6rem;
  padding-inline: var(--sp-2);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: #ffffff;
  text-wrap: balance;
}

.fiche-livre__lecture { padding-block: clamp(4rem, 6vw, 7rem); }

.fiche-livre__contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-12), 6vw, var(--sp-24));
  align-items: start;
}

.fiche-livre__resume { max-width: 45rem; }
.fiche-livre__resume h2 { max-width: 14ch; }
.fiche-livre__resume p {
  margin-top: var(--sp-5);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ton-texte-2);
}

.fiche-livre__infos {
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  border-radius: var(--r-lg);
  background: var(--ton-carte-2);
}

.fiche-livre__infos h2 { font-size: var(--fs-lg); }
.fiche-livre__infos dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  margin: var(--sp-6) 0 0;
}
.fiche-livre__infos dl > div {
  min-width: 0;
}
.fiche-livre__infos dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ton-texte-3);
}
.fiche-livre__infos dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--ton-texte);
  overflow-wrap: anywhere;
}
.fiche-livre__infos > p {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ton-filet);
  font-size: var(--fs-xs);
  color: var(--ton-texte-3);
}

/* Le mot du libraire reprend la sobriété d'une fiche de lecture glissée dans
   un livre : un repère de couverture, une signature et le texte à sa vraie
   longueur. Les avis courts prennent plus d'ampleur, les longs restent des
   textes à lire et non des citations surdimensionnées. */
.fiche-livre__avis {
  position: relative;
  padding-block: clamp(3.75rem, 6vw, 6.5rem);
  overflow: hidden;
}

.fiche-livre__avis-grille {
  max-width: 70rem;
  margin-inline: auto;
}

.fiche-livre__avis-fiche {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, .36fr) minmax(0, 1fr);
  gap: clamp(var(--sp-8), 4vw, var(--sp-16));
  margin: 0;
  padding: clamp(2rem, 1.35rem + 3vw, 4rem);
  border-radius: var(--r-lg);
  background: var(--papier);
  box-shadow: 0 18px 50px -28px rgb(6 22 47 / .4);
}

.fiche-livre__avis-entete {
  display: grid;
  align-content: start;
  gap: clamp(var(--sp-6), 3vw, var(--sp-10));
  min-width: 0;
  padding-right: clamp(var(--sp-6), 2vw, var(--sp-8));
  border-right: 1px solid var(--ton-filet);
}

.fiche-livre__avis-visuels {
  position: relative;
  width: min(100%, 10.5rem);
  min-height: 8.9rem;
  isolation: isolate;
}

.fiche-livre__avis-portraits {
  display: flex;
  align-items: flex-start;
  min-height: 7.75rem;
}

.fiche-livre__avis-portraits img {
  display: block;
  width: 7.75rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-lg);
}

.fiche-livre__avis-couverture {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 3.65rem;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 3px solid var(--papier);
  border-radius: var(--r-chip);
  box-shadow: 0 8px 18px -9px rgb(6 22 47 / .55);
  rotate: 2deg;
}

.fiche-livre__avis-identite { min-width: 0; }

.fiche-livre__avis-entete h2 {
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
  font-family: var(--font-enseigne);
  font-size: clamp(1.55rem, 1.35rem + .7vw, 2rem);
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--ton-texte);
}

.fiche-livre__avis-signature {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ton-texte-2);
}

.fiche-livre__avis-signature strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--ton-texte);
}

.fiche-livre__avis-coup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  line-height: 1.25;
  color: var(--corail-texte);
}

.fiche-livre__avis-coeur {
  display: grid;
  flex: 0 0 auto;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--corail);
  color: var(--papier);
  box-shadow: 0 5px 12px -7px rgb(6 22 47 / .7);
}

.fiche-livre__avis-coeur img {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) invert(1);
}

.fiche-livre__avis-corps { min-width: 0; }

.fiche-livre__avis-texte {
  display: grid;
  gap: 1em;
  max-width: 68ch;
  font-size: clamp(.98rem, .94rem + .18vw, 1.08rem);
  line-height: 1.76;
  text-wrap: pretty;
  color: var(--ton-texte);
}

.fiche-livre__avis-texte p { margin: 0; }

.fiche-livre__avis-suite {
  display: grid;
  gap: 1em;
}

.fiche-livre__avis-suite[hidden] {
  display: none;
}

.fiche-livre__avis-deplier,
.fiche-livre__avis-deplier[hidden] {
  display: none;
}

.fiche-livre__avis-texte p:first-child {
  font-weight: var(--fw-semi);
}

.fiche-livre__avis--court .fiche-livre__avis-texte {
  max-width: 35ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.08rem + 1.1vw, 2.15rem);
  font-weight: var(--fw-semi);
  letter-spacing: -.02em;
  line-height: 1.25;
}

.fiche-livre__avis-action {
  margin-top: clamp(var(--sp-8), 3vw, var(--sp-10));
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ton-filet);
}

.fiche-livre__avis-action .lien-fleche {
  width: max-content;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--nuit);
}

.fiche-livre__suite { padding-block: clamp(4.5rem, 7vw, 8rem); }
.fiche-livre__suite .entete-section { max-width: 46rem; }
.fiche-livre__suite .entete-section p { max-width: 54ch; }

.fiche-livre__proches {
  display: grid;
  gap: clamp(var(--sp-8), 4vw, var(--sp-16));
}
.fiche-livre__proche { min-width: 0; }
.fiche-livre__proche a {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  color: var(--ton-texte);
}
.fiche-livre__proche .media {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-soft);
}
.fiche-livre__proche a:hover .media,
.fiche-livre__proche a:focus-visible .media {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.fiche-livre__proche-texte { display: grid; gap: var(--sp-1); min-width: 0; }
.fiche-livre__proche-texte strong {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: 1.15;
  text-wrap: balance;
}
/* Le genre se lit comme une précision, pas comme un sur-titre : trois petites
   capitales espacées empilées donnaient à la section un rythme de gabarit. */
.fiche-livre__proche-genre {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ton-accent-texte);
}

/* Le titre porte l'affordance du lien, pas seulement la couverture qui se
   soulève : un trait se pose sous le titre au survol et au focus clavier. */
.fiche-livre__proche-texte strong {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--d-base) var(--ease-out);
}
.fiche-livre__proche a:hover strong,
.fiche-livre__proche a:focus-visible strong { background-size: 100% 2px; }
.fiche-livre__proche-auteur { font-size: var(--fs-xs); color: var(--ton-texte-2); }
.fiche-livre__proche-resume,
.fiche-livre__proche-action { display: none; }
.fiche-livre__proches-secondaires {
  display: grid;
  align-content: center;
}
.fiche-livre__proches-secondaires .fiche-livre__proche { padding-block: var(--sp-5); }
.fiche-livre__proches-secondaires .fiche-livre__proche + .fiche-livre__proche {
  border-top: 1px solid var(--ton-filet);
}

.fiche-livre__proche--principal a {
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 3vw, var(--sp-10));
  align-items: center;
}
.fiche-livre__proche--principal .fiche-livre__proche-texte { gap: var(--sp-2); }
.fiche-livre__proche--principal .fiche-livre__proche-texte strong { font-size: var(--fs-lg); }
.fiche-livre__proche--principal .fiche-livre__proche-resume {
  display: block;
  max-width: 42ch;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ton-texte-2);
}
.fiche-livre__proche--principal .fiche-livre__proche-action {
  display: inline-flex;
  width: max-content;
  margin-top: var(--sp-3);
  padding-bottom: .16rem;
  border-bottom: 1px solid currentColor;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ton-texte);
}

/* Un seul geste de marque plutôt que cinq empilés : le fond reste un
   dégradé nuit sobre, le jaune n'apparaît que sur le bouton, et le signe de
   la librairie se pose en filigrane, seule touche décorative. Avant cette
   passe, un halo radial derrière le bouton redoublait déjà son ombre jaune,
   et un filet lumineux en haut gauche débordait sur l'angle arrondi du
   cadre : deux détails qui salissaient plus qu'ils ne signaient. */
.fiche-livre__cta {
  position: relative;
  display: grid;
  gap: clamp(var(--sp-6), 3vw, var(--sp-10));
  padding: clamp(2.5rem, 4vw, 3.75rem) clamp(2rem, 4vw, 3.75rem);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--nuit) 0%, #0c2450 100%);
  border: 1px solid color-mix(in srgb, #FBFAF7 12%, transparent);
  box-shadow: 0 4px 20px -2px rgb(6 22 47 / .18), 0 24px 56px -12px rgb(6 22 47 / .24);
  overflow: hidden;
  isolation: isolate;
  align-items: center;
}

.fiche-livre__cta :focus-visible {
  outline: 2px solid var(--jaune);
  outline-offset: 4px;
}

.fiche-livre__cta::before {
  content: '';
  position: absolute;
  right: -2rem;
  bottom: -3.5rem;
  width: 18rem;
  height: 18rem;
  background-image: url('../img/logo-oiseau-moqueur.webp');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .05;
  pointer-events: none;
  z-index: -1;
  filter: brightness(2);
}

.fiche-livre__cta h2 {
  max-width: 16ch;
  font-size: clamp(1.85rem, 1.45rem + 1.6vw, 2.75rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #FBFAF7;
  text-wrap: balance;
}

.fiche-livre__cta p {
  max-width: 50ch;
  margin-top: var(--sp-3);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  line-height: 1.62;
  color: #B9C2D6;
  text-wrap: pretty;
}

.fiche-livre__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
}

.fiche-livre__cta .btn--principal {
  --btn-fond: var(--jaune);
  --btn-survol: var(--papier);
  color: var(--nuit);
  min-height: 3.35rem;
  padding: 0.85rem 1.85rem;
  font-size: 0.95rem;
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  box-shadow: 0 2px 4px rgb(6 22 47 / .24), 0 8px 24px -4px rgb(255 214 41 / .4);
  border: 1.5px solid rgb(255 255 255 / .24);
  transition: box-shadow var(--d-base) var(--ease-soft),
              border-color var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft);
}

.fiche-livre__cta .btn--principal:hover {
  box-shadow: 0 4px 12px rgb(6 22 47 / .3), 0 16px 36px -4px rgb(255 214 41 / .55);
  border-color: rgb(255 255 255 / .45);
  color: var(--nuit);
}

.fiche-livre__cta .btn--principal:active {
  transform: scale(.98);
  box-shadow: 0 2px 6px rgb(6 22 47 / .25), 0 6px 16px -4px rgb(255 214 41 / .3);
}

.fiche-livre__cta .btn--principal svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.3;
  transition: transform var(--d-base) var(--ease-out);
}

.fiche-livre__cta .btn--principal:hover svg {
  transform: scale(1.08) rotate(-4deg);
}

.fiche-livre__cta .lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  color: #D7DDEA;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: color var(--d-fast) var(--ease-soft);
}

.fiche-livre__cta .lien-fleche svg {
  border-color: color-mix(in srgb, #FBFAF7 20%, transparent);
  color: #D7DDEA;
  transition: transform var(--d-base) var(--ease-out),
              background-color var(--d-base) var(--ease-soft),
              border-color var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft);
}

.fiche-livre__cta .lien-fleche:hover {
  color: var(--jaune);
}

.fiche-livre__cta .lien-fleche:hover svg {
  transform: translateX(4px);
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--nuit);
}

@media (min-width: 820px) {
  .fiche-livre__grille { grid-template-columns: minmax(14rem, .58fr) minmax(0, 1.42fr); }
  .fiche-livre__couverture { grid-column: 1; grid-row: 1; }
  .fiche-livre__entete { grid-column: 2; grid-row: 1; }
  .fiche-livre__contenu { grid-template-columns: minmax(0, 1.4fr) minmax(19rem, .6fr); }
  /* Colonnes proportionnées au contenu réel : la principale (couverture +
     résumé de 42ch) remplit sa part, sans laisser 300 px vides avant la liste. */
  .fiche-livre__proches { grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr); }
  .fiche-livre__cta { grid-template-columns: minmax(0, 1.2fr) auto; }
  .fiche-livre__cta-actions { justify-content: flex-end; gap: var(--sp-6); }
}

/* Sur l'écran vertical, la couverture quittait le premier écran : le hero
   n'était qu'un empilement de texte. Elle remonte maintenant aux côtés du
   titre, posée comme sur le comptoir. L'en-tête devient un seul gabarit à
   deux colonnes (le bloc __entete s'efface dans la grille) ; l'identité se
   centre en face de la couverture, l'accroche et les actions reprennent
   toute la largeur dessous. */
@media (max-width: 819px) {
  .fiche-livre { padding-top: calc(var(--header-h) + var(--sp-5)); }

  /* Le fil tient sur une ligne : l'étape courante redonde le h1 juste
     dessous, elle sort du chemin plutôt que de renvoyer le hero plus bas. */
  .fiche-livre .ariane { margin-bottom: var(--sp-6); }
  .fiche-livre .ariane li[aria-current] { display: none; }

  .fiche-livre__grille {
    grid-template-columns: minmax(0, clamp(8.25rem, 35vw, 11.5rem)) minmax(0, 1fr);
    column-gap: clamp(var(--sp-4), 4vw, var(--sp-8));
    row-gap: var(--sp-4);
    align-items: start;
  }
  .fiche-livre__entete { display: contents; }

  .fiche-livre__couverture {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 100%;
    margin: var(--sp-1) 0 0;
    transform: rotate(-2.25deg);
  }
  /* Pas de carton corail sur l'écran vertical : à cette taille, il encombre
     la couverture plus qu'il ne la signe. */
  .fiche-livre__couverture::before { content: none; }
  /* Avec un sous-titre, l'identité compte une rangée de plus : l'auteur
     passe en pleine largeur sous la couverture, en signature qui fait le
     pont vers l'accroche, plutôt que de flotter seul face au vide. */
  .fiche-livre__grille:has(.fiche-livre__sous-titre) .fiche-livre__auteur {
    grid-column: 1 / -1;
  }
  /* La légende redonde l'éditeur de la fiche : elle reste lue par les
     lecteurs d'écran mais quitte une colonne trop étroite pour elle. */
  .fiche-livre__couverture figcaption {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* L'identité se centre face à la couverture : quand celle-ci dépasse le
     texte, les rangées croissent et les trois repères se répartissent
     l'espace au lieu de laisser un vide sous l'auteur. */
  .fiche-livre__genres { grid-column: 2; align-self: end; margin-bottom: 0; }
  .fiche-livre__genres .etiquette {
    padding: .28rem .5rem;
    font-size: .62rem;
    letter-spacing: .06em;
  }
  .fiche-livre h1 {
    grid-column: 2;
    align-self: center;
    max-width: none;
    font-size: clamp(1.75rem, 1.1rem + 3vw, 3.1rem);
    line-height: 1.02;
    hyphens: auto;
  }
  .fiche-livre__sous-titre { grid-column: 2; align-self: center; margin-top: 0; }
  /* L'auteur appartient au titre : il se serre sous lui, les chips et
     l'accroche gardent le grand écart du gabarit. */
  .fiche-livre__auteur {
    grid-column: 2;
    margin-top: calc(-1 * var(--sp-2));
    font-size: var(--fs-base);
  }
  .fiche-livre__accroche {
    grid-column: 1 / -1;
    max-width: 58ch;
    margin-top: var(--sp-2);
    text-wrap: pretty;
  }
  .fiche-livre__actions { grid-column: 1 / -1; margin-top: var(--sp-3); }

  .fiche-livre__avis-fiche { grid-template-columns: 1fr; }
  .fiche-livre__avis-entete {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-5);
    padding: 0 0 var(--sp-6);
    border-right: 0;
    border-bottom: 1px solid var(--ton-filet);
  }
  .fiche-livre__avis-visuels { width: 8.25rem; min-height: 7.2rem; }
  .fiche-livre__avis-portraits { min-height: 6.1rem; }
  .fiche-livre__avis-portraits img { width: 6.1rem; }
  .fiche-livre__avis-couverture { width: 3.05rem; }
  .fiche-livre__avis-signature { margin-top: var(--sp-3); }
}

@media (min-width: 520px) and (max-width: 819px) {
  .fiche-livre__cta-actions { gap: var(--sp-6); margin-top: var(--sp-2); }
}

@media (max-width: 519px) {
  .fiche-livre__actions { align-items: stretch; }
  .fiche-livre__actions .btn { width: 100%; min-height: 3.25rem; }
  .fiche-livre__actions .lien-fleche { justify-content: center; width: 100%; min-height: 48px; padding-block: var(--sp-2); }
  .fiche-livre__infos dl { grid-template-columns: 1fr; }
  .fiche-livre__proche--principal a { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .fiche-livre__proche--principal .fiche-livre__proche-resume { display: none; }
  .fiche-livre__avis { padding-block: var(--sp-10); }
  .fiche-livre__avis-fiche { padding: var(--sp-5); }
  .fiche-livre__avis-entete { grid-template-columns: 1fr; align-items: start; }
  .fiche-livre__avis-visuels { width: 8.5rem; min-height: 7.35rem; }
  .fiche-livre__avis-portraits { min-height: 6.2rem; }
  .fiche-livre__avis-portraits img { width: 6.2rem; }
  .fiche-livre__avis-couverture { width: 3.1rem; }
  .fiche-livre__avis-entete h2 { font-size: 1.5rem; }
  .fiche-livre__avis-texte { font-size: .97rem; line-height: 1.72; }
  .fiche-livre__avis-deplier:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
    margin-top: var(--sp-3);
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--corail-texte);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    cursor: pointer;
    transition: color var(--d-fast) var(--ease-soft),
                transform var(--d-press) var(--ease-out);
  }
  .fiche-livre__avis-deplier:hover { color: var(--corail-fonce); }
  .fiche-livre__avis-deplier:active { transform: translateY(1px); }
  .fiche-livre__avis-chevron {
    width: .9rem;
    height: .9rem;
    background: currentColor;
    -webkit-mask: url('../img/icons/caret-down-bold.svg') center / contain no-repeat;
    mask: url('../img/icons/caret-down-bold.svg') center / contain no-repeat;
    transition: transform var(--d-base) var(--ease-out);
  }
  .fiche-livre__avis-deplier[aria-expanded="true"] .fiche-livre__avis-chevron {
    transform: rotate(180deg);
  }
  .fiche-livre__avis-deplier:not([hidden]) + .fiche-livre__avis-action {
    margin-top: var(--sp-4);
  }
  .fiche-livre__avis-action .lien-fleche { justify-content: space-between; width: 100%; min-height: 48px; }
  .fiche-livre__cta { padding: 2.25rem 1.5rem; }
  .fiche-livre__cta::before { width: 14rem; height: 14rem; right: -2rem; bottom: -2.5rem; opacity: .04; }
  .fiche-livre__cta-actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .fiche-livre__cta-actions .btn { width: 100%; min-height: 3.25rem; }
  .fiche-livre__cta-actions .lien-fleche { justify-content: center; width: 100%; min-height: 48px; padding-block: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  .fiche-livre__avis-deplier,
  .fiche-livre__avis-chevron { transition: none; }
  .fiche-livre__proche .media { transition: none; }
  .fiche-livre__proche a:hover .media,
  .fiche-livre__proche a:focus-visible .media { transform: none; }
  .fiche-livre__actions .btn--principal,
  .fiche-livre__actions .btn--principal:hover,
  .fiche-livre__actions .btn--principal svg,
  .fiche-livre__actions .btn--principal:hover svg,
  .fiche-livre__actions .lien-fleche svg,
  .fiche-livre__actions .lien-fleche:hover svg,
  .fiche-livre__cta .btn--principal,
  .fiche-livre__cta .btn--principal:hover,
  .fiche-livre__cta .btn--principal svg,
  .fiche-livre__cta .btn--principal:hover svg,
  .fiche-livre__cta .lien-fleche svg,
  .fiche-livre__cta .lien-fleche:hover svg {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Agenda
   ========================================================================== */

.evenement-une {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .evenement-une { grid-template-columns: 1fr 1fr; } }
.evenement-une .media { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.evenement-une__corps { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.evenement-une__corps h2 { font-size: var(--fs-xl); }

.agenda-liste { display: grid; gap: var(--sp-5); }
.agenda-passees {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.agenda-passees figure { margin: 0; }
.agenda-passees .media { aspect-ratio: 4 / 3; }
.agenda-passees figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ton-texte-2); }

/* ==========================================================================
   La librairie — portraits, univers, principes
   ========================================================================== */

.librairie-portraits {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .librairie-portraits { grid-template-columns: 1fr 1fr; } }
.portrait .media { aspect-ratio: 4 / 5; border-radius: var(--r-xl); }
.portrait__nom { margin-top: var(--sp-6); font-size: var(--fs-xl); }
.portrait__role {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ton-accent-texte);
}
.portrait__citation {
  margin-top: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 4px solid var(--ton-accent);
  font-family: var(--font-cite);
  font-size: var(--fs-md);
  font-style: italic;
  line-height: 1.4;
  padding-bottom: .1em;
  color: var(--ton-texte);
}

.principes {
  display: grid;
  gap: var(--sp-8) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.principe { padding-top: var(--sp-6); border-top: 3px solid var(--ton-accent); }
.principe h3 { font-size: var(--fs-md); }
.principe p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ton-texte-2); }

/* Les univers en défilement horizontal épinglé : le scroll vertical pousse la
   bande sur le côté, on parcourt les 200 m² au lieu d'en lire la liste.
   C'est la seule raison d'être de l'épinglage, et la réponse à « une petite
   librairie a forcément peu de choix ». */
.rayons-pan {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-12);
  background: var(--ton-fond);
}
.rayons-pan.is-anime {
  display: flex;
  align-items: center;
  min-height: 100dvh;
  padding-block: 0;
}
.rayons-pan__piste {
  display: flex;
  gap: var(--sp-6);
  padding-inline: var(--gutter);
  align-items: stretch;
}
.rayons-pan__piste > * { flex: none; width: min(80vw, 420px); }
.rayons-pan .tuile-univers .media { aspect-ratio: 4 / 5; }

/* Sans JS ou en mouvement réduit, la bande redevient un défilement au doigt. */
.rayons-pan:not(.is-anime) .rayons-pan__piste {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4);
  scrollbar-width: none;
}
.rayons-pan:not(.is-anime) .rayons-pan__piste::-webkit-scrollbar { display: none; }
.rayons-pan:not(.is-anime) .rayons-pan__piste > * { scroll-snap-align: start; }

/* ==========================================================================
   Infos pratiques — coordonnées, accès, services
   ========================================================================== */

.contact-grille {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .contact-grille { grid-template-columns: 0.9fr 1.1fr; } }

.contact-nap { display: grid; gap: var(--sp-6); }
.contact-nap address { font-style: normal; line-height: 1.75; }
.contact-nap__ligne {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--ton-filet);
}
.contact-nap__ligne:last-child { border-bottom: 0; }
.contact-nap__ligne svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--ton-accent); }
.contact-nap__ligne strong { display: block; font-size: var(--fs-sm); color: var(--ton-texte); }

.acces-grille {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .acces-grille { grid-template-columns: 1fr 1fr; } }

.carte-plan {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--ton-filet);
  background: var(--ton-carte-2);
}
.carte-plan iframe { display: block; width: 100%; height: 100%; border: 0; }

.acces-modes {
  display: grid;
  gap: var(--sp-8) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.acces-mode h3 { font-size: var(--fs-md); }
.acces-mode p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ton-texte-2); }
.acces-mode__icone {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-full);
  background: var(--jaune);
  color: var(--nuit);
}
.acces-mode__icone svg { width: 22px; height: 22px; }

/* Les services confirmés : huit entrées courtes séparées par un filet, pas
   huit cartes. Une carte pour trois lignes de texte est du décor.
   Colonnes fixées plutôt qu'auto-fit : huit entrées réparties en 2 ou 4
   colonnes tombent juste, en 3 ou 5 elles laissent des cases vides. */
.services-grille {
  display: grid;
  gap: var(--sp-6) var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .services-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .services-grille { grid-template-columns: repeat(4, 1fr); } }
.service-item { padding-top: var(--sp-5); border-top: 1px solid var(--ton-filet-net); }
.service-item h3 { font-size: var(--fs-md); }
.service-item p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ton-texte-2); }

/* ==========================================================================
   Demander un livre
   ========================================================================== */

.reserver-grille {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .reserver-grille { grid-template-columns: 1.15fr 0.85fr; } }
.reserver-aside > * + * { margin-top: var(--sp-6); }
.reserver-aside .media { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }

/* Les trois questions du formulaire de conseil, montrées telles quelles :
   la promesse est qu'il n'y en a que trois. Autant le prouver. */
.conseil-manifeste {
  display: grid;
  gap: var(--sp-10);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px) { .conseil-manifeste { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-16); } }
.conseil-manifeste h2 { font-size: var(--fs-2xl); max-width: 16ch; }

.conseil-questions { display: grid; gap: var(--sp-4); counter-reset: q; }
.conseil-question {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-full);
  background: var(--ton-carte);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--ton-texte);
}
.conseil-question::before {
  counter-increment: q;
  content: counter(q);
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--nuit);
  color: var(--jaune);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--fw-black);
}

/* ==========================================================================
   Pages légales — colonne de texte, rythme de lecture long
   ========================================================================== */

.texte-legal { margin-top: var(--sp-10); }
.texte-legal h2 {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-lg);
}
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p { color: var(--ton-texte-2); }