/* ==========================================================================
   Mouvement — reveal au défilement, parallaxe, micro-interactions, curseur.
   Règle : rien ne bouge sans raison. Tout est annulé par `prefers-reduced-motion`
   et rien n'est caché si le JS ne tourne pas (les états initiaux sont posés
   par la classe `.motion`, ajoutée par anim.js).
   ========================================================================== */

/* Accent de la strate : couleur de l'ombre portée des boutons au survol. */
:root { --accent: var(--bordeaux); }
.histoire { --accent: var(--jaune); }
.bim { --accent: var(--jaune); }
.lettres-inscription { --accent: var(--bordeaux); }
.carrousel-lettres { --accent: var(--jaune); }
.voyager { --accent: var(--creme); }
.site-footer { --accent: var(--jaune); }

/* --------------------------------------------------------------------------
   1. Reveal au défilement
   -------------------------------------------------------------------------- */

.motion [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--duree-longue) var(--sortie),
    transform var(--duree-longue) var(--sortie),
    clip-path var(--duree-longue) var(--sortie);
  transition-delay: var(--delai, 0ms);
  will-change: opacity, transform;
}

.motion [data-reveal="rise"]  { transform: translateY(18px); }
.motion [data-reveal="left"]  { transform: translateX(-22px); }
.motion [data-reveal="right"] { transform: translateX(22px); }
.motion [data-reveal="image"] { transform: scale(1.04); }
.motion [data-reveal="fade"]  { transform: none; }

.motion [data-reveal].est-visible {
  opacity: 1;
  transform: none;
}

/* Titre masqué : la ligne monte de derrière un cache. */
.masque {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.masque > span { display: block; }
.motion .masque > span {
  transform: translateY(105%);
  transition: transform 900ms var(--sortie);
  transition-delay: var(--delai, 0ms);
}
.motion .masque.est-visible > span { transform: none; }

/* Le surligneur se trace au passage du texte. */
.motion mark.surligneur {
  background: linear-gradient(var(--jaune), var(--jaune)) no-repeat left center / 0% 100%;
  transition: background-size 900ms var(--sortie) 350ms;
}
.motion mark.surligneur.est-visible { background-size: 100% 100%; }

/* --------------------------------------------------------------------------
   2. Parallaxe (valeur posée par anim.js dans --py)
   -------------------------------------------------------------------------- */

.motion [data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* Le portrait du hero suit aussi la souris, d'un cheveu. */
.motion [data-souris] {
  transform: translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0);
  transition: transform 300ms var(--sortie);
}

/* Le fond du carrousel des lettres respire légèrement au défilement. */
.motion .carrousel-lettres__fond {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.08);
}

/* Le nom géant du pied de page glisse d'un cheveu. En dessous de 768 px il
   touche déjà les deux bords : on le laisse tranquille. */
@media (min-width: 768px) {
  .motion .footer-signature {
    transform: translate3d(var(--px, 0px), 0, 0);
    will-change: transform;
  }
}

/* --------------------------------------------------------------------------
   3. Micro-interactions au survol
   -------------------------------------------------------------------------- */

.btn {
  transition:
    transform var(--duree-courte) var(--sortie),
    box-shadow var(--duree-courte) var(--sortie),
    background-color var(--duree-courte) var(--sortie);
}
@media (hover: hover) {
  .btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 var(--accent);
  }
}
.btn:active { transform: translate(0, 0); box-shadow: none; }

/* Navigation : le surligneur jaune se déroule sous le libellé. Il est porté
   par le libellé lui-même, et non par le lien : « Méditer » a ainsi le même
   survol que les autres sans que le trait passe sous la pastille BIM!. */
.nav__texte { position: relative; isolation: isolate; }
.nav__texte::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: 3px;
  height: 9px;
  background: var(--jaune);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree-moyenne) var(--sortie);
}
@media (hover: hover) {
  .nav a:hover .nav__texte::after { transform: scaleX(1); }
}
.nav a[aria-current="page"] { text-decoration: none; }

/* Liens de texte : le soulignement se trace de la gauche. */
.lien-anim {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size var(--duree-moyenne) var(--sortie);
}
.lien-anim.est-souligne { background-size: 100% 2px; }
/* Au clavier, le soulignement se trace aussi : le lien reste identifiable. */
.lien-anim:focus-visible { background-size: 100% 2px; }
@media (hover: hover) {
  .lien-anim:hover { background-size: 100% 2px; }
  .lien-anim.est-souligne:hover { background-size: 0% 2px; }
}

/* Onglets du module « temps » : le filet se devine au survol. */
.onglet { transition: color var(--duree-courte) var(--sortie), background-color var(--duree-courte) var(--sortie); }
.onglet::after { transition: transform var(--duree-moyenne) var(--sortie); }
@media (hover: hover) and (min-width: 768px) {
  .onglet:hover { color: var(--charbon); }
  .onglet:hover::after { transform: scaleX(1); opacity: .35; }
  .onglet[aria-selected="true"]:hover::after { opacity: 1; }
}

/* Panneau du module « temps » : les entrées entrent en cascade au changement. */
@keyframes panneauEntre {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.motion .temps__panneau.est-change .temps__item {
  animation: panneauEntre var(--duree-moyenne) var(--sortie) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* Entrées du panneau et lignes de liste : léger décalage au survol. */
.temps__item, .liste-filets > a { transition: transform var(--duree-courte) var(--sortie); }
@media (hover: hover) {
  .temps__item:hover, .liste-filets > a:hover { transform: translateX(6px); }
}

/* Couvertures de livres : elles se soulèvent, l'ombre portée s'épaissit. */
.livre__cover img, .livre--bientot .livre__cover > div {
  transition: transform var(--duree-moyenne) var(--sortie), box-shadow var(--duree-moyenne) var(--sortie);
}
@media (hover: hover) and (min-width: 640px) {
  .livre:hover .livre__cover img { transform: translate(-4px, -6px); }
  .livre--touriste:hover .livre__cover img { box-shadow: 16px 16px 0 var(--corail); }
  .livre--antiseches:hover .livre__cover img { box-shadow: 16px 16px 0 var(--bordeaux); }
  .livre--chamanique:hover .livre__cover img { box-shadow: 16px 16px 0 var(--charbon); }
}

/* Bouton de lecture du podcast. */
.podcast__play { transition: transform var(--duree-moyenne) var(--sortie); }
.podcast__play svg { transition: transform var(--duree-courte) var(--sortie); }
@media (hover: hover) {
  .podcast__play:hover { transform: scale(1.08); }
  .podcast__play:hover svg { transform: translateX(2px); }
}

/* Flèches des carrousels : inversion franche. */
.carrousel-ctrl button {
  transition: background-color var(--duree-courte) var(--sortie), transform var(--duree-courte) var(--sortie);
}
.carrousel-ctrl button svg path { transition: stroke var(--duree-courte) var(--sortie); }
@media (hover: hover) {
  .carrousel-ctrl button:hover { background: var(--charbon); }
  .carrousel-ctrl button:hover svg path { stroke: var(--creme); }
}
.carrousel-ctrl button:active { transform: scale(.92); }

/* Champs : le cadre s'épaissit discrètement. */
.champ { transition: box-shadow var(--duree-courte) var(--sortie), background-color var(--duree-courte) var(--sortie); }
.champ:hover { background: #FFFFFF; }
.champ:focus { box-shadow: 4px 4px 0 var(--accent); }

/* Liens du pied de page et des listes. */
.footer-col a, .footer-social__liens a, .menu__nav a { transition: transform var(--duree-courte) var(--sortie), color var(--duree-courte) var(--sortie); }
@media (hover: hover) {
  .footer-col a:hover, .footer-social__liens a:hover { transform: translateX(5px); }
  .menu__nav a:hover { color: var(--jaune); transform: translateX(8px); }
}

/* Marque-page : il sort d'un cran. */
.bookmark { transition: transform var(--duree-moyenne) var(--sortie); }
@media (hover: hover) { .bookmark:hover { transform: translateX(-6px); } }

/* La fiche « antisèche » se redresse quand la souris s'en approche. */
.hero__fiche { transition: transform var(--duree-moyenne) var(--sortie); }
@media (hover: hover) { .hero__media:hover .hero__fiche { transform: rotate(-0.5deg) translateY(-4px); } }

/* --------------------------------------------------------------------------
   4. En-tête : il s'efface en descendant, revient en remontant.
   -------------------------------------------------------------------------- */

.motion .site-header {
  transition: transform var(--duree-moyenne) var(--sortie), box-shadow var(--duree-moyenne) var(--sortie);
}
.motion .site-header.est-cachee { transform: translateY(-100%); }
.motion .site-header.est-detachee { box-shadow: 0 2px 0 rgba(45, 45, 45, .12); }

/* --------------------------------------------------------------------------
   5. Menu plein écran
   -------------------------------------------------------------------------- */

@keyframes menuEntre { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuLigne { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.motion .menu { animation: menuEntre var(--duree-courte) ease both; }
.motion .menu__nav a,
.motion .menu__lettres,
.motion .menu__social {
  animation: menuLigne var(--duree-moyenne) var(--sortie) both;
  animation-delay: calc(60ms + var(--i, 0) * 45ms);
}

/* --------------------------------------------------------------------------
   6. Carrousel des Lettres de Jo
   -------------------------------------------------------------------------- */

@keyframes ltFade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes ltNext { from { opacity: 0; transform: translateX(72px); } to { opacity: 1; transform: none; } }
@keyframes ltPrev { from { opacity: 0; transform: translateX(-72px); } to { opacity: 1; transform: none; } }

.carrousel-lettres__fond.entre { animation: ltFade .8s ease both; }
.lettre-carte.entre-next { animation: ltNext .55s var(--sortie) both; }
.lettre-carte.entre-prev { animation: ltPrev .55s var(--sortie) both; }

@media (max-width: 767px) {
  @keyframes ltNext { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
  @keyframes ltPrev { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
}

.carrousel-lettres { cursor: grab; }
.carrousel-lettres.glisse { cursor: grabbing; }

/* --------------------------------------------------------------------------
   7. Curseur (souris précise uniquement)
   -------------------------------------------------------------------------- */

.curseur {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1.5px solid #FFFFFF;
  border-radius: 50%;
  pointer-events: none;
  z-index: 70;
  opacity: 0;
  mix-blend-mode: difference;
  transform: translate3d(-100px, -100px, 0);
  transition:
    opacity var(--duree-moyenne) ease,
    width var(--duree-moyenne) var(--sortie),
    height var(--duree-moyenne) var(--sortie),
    margin var(--duree-moyenne) var(--sortie),
    border-width var(--duree-moyenne) var(--sortie);
}
.curseur.est-actif { opacity: .85; }
.curseur.est-sur-lien {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-width: 1px;
}
.curseur.est-sur-glisse {
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
}

@media (hover: none), (pointer: coarse) { .curseur { display: none; } }

/* --------------------------------------------------------------------------
   8. Mouvement réduit : tout s'arrête, rien ne disparaît.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .curseur { display: none; }
}