/* ---------- Micro-interactions : une seule courbe, des durées courtes, du mouvement utile ---------- */
:root { --ease: cubic-bezier(.2, .8, .2, 1); interpolate-size: allow-keywords; }

/* 1. Apparitions au défilement (uniquement si le script a posé data-reveal) */
.js-micro [data-reveal] { opacity: 0; transition: opacity .8s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms), filter .8s var(--ease) var(--d, 0ms), clip-path 1.05s var(--ease) var(--d, 0ms), background-color .3s, border-color .3s, box-shadow .3s; }
.js-micro [data-reveal="haut"] { transform: translate3d(0, 26px, 0); }
.js-micro [data-reveal="titre"] { transform: translate3d(0, 42px, 0); filter: blur(8px); }
.js-micro [data-reveal="masque"] { transform: translate3d(0, 20px, 0); clip-path: inset(0 0 calc(100% - 2px) 0 round 14px); /* 2 px restent « visibles » pour l'observateur (opacité 0) */ }
.js-micro [data-reveal="masque"] img, .js-micro [data-reveal="masque"] video { transform: scale(1.12); transition: transform 1.5s var(--ease) var(--d, 0ms); }
.js-micro [data-reveal].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(-40px round 14px); }
.js-micro [data-reveal="masque"].is-in img, .js-micro [data-reveal="masque"].is-in video { transform: none; }

/* 2. Entrée du hero, au chargement */
@media (prefers-reduced-motion: no-preference) {
  .ouverture .label, .ouverture h1, .ouverture .intro, .ouverture .actions, .defiler { animation: hero-entree 1.05s var(--ease) backwards; }
  .ouverture .label { animation-delay: .1s; }
  .ouverture h1 { animation-delay: .22s; animation-duration: 1.2s; }
  .ouverture .intro { animation-delay: .5s; }
  .ouverture .actions { animation-delay: .68s; }
  .defiler { animation-delay: 1s; }
  /* le hero se resserre quand on s'en éloigne : le contenu recule, le fond rentre sur les côtés */
    .hero-fond { clip-path: inset(0 calc(var(--hero-p, 0) * 3.2vw) 0 calc(var(--hero-p, 0) * 3.2vw)); }
  .defiler { opacity: calc(1 - var(--hero-p, 0) * 1.6); }
  /* la lumière du fond évolue avec la page : plus de pêche, un peu moins de violet */
  .lueur-peche { opacity: calc(.55 + var(--sc, 0) * .9); }
  .lueur-violet { opacity: calc(1 - var(--sc, 0) * .22); }
}
@keyframes hero-entree { from { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* 3. Mots qui s'allument */
.mot-allume { opacity: .22; transition: opacity .45s var(--ease); }
.mot-allume.on { opacity: 1; }

/* 4. Survols */
.bouton, .bouton-ligne, .defiler, .theme-toggle, .burger { transition-property: background, color, border-color, transform, translate, box-shadow; }
.lien { background: linear-gradient(var(--peche), var(--peche)) left bottom / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s, border-color .3s; }
.lien:hover { background-size: 100% 1px; }
.lien:hover span[aria-hidden] { transform: translate(3px, -3px); }
.offre, .faq details, .etude-meta, .etude-liste li, .etude-suivant { position: relative; }
.offre::before, .faq details::before, .etude-meta::before, .etude-liste li::before, .etude-suivant::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .09), transparent 62%); }
.offre:hover::before, .faq details:hover::before, .etude-meta:hover::before, .etude-liste li:hover::before, .etude-suivant:hover::before { opacity: 1; }
html[data-theme="light"] .offre::before, html[data-theme="light"] .faq details::before, html[data-theme="light"] .etude-meta::before, html[data-theme="light"] .etude-liste li::before, html[data-theme="light"] .etude-suivant::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(78, 60, 144, .07), transparent 62%); }
.rangee figure { overflow: hidden; }
.rangee figure img { transition: transform .9s var(--ease); }
@media (hover: hover) { .rangee figure:hover img { transform: scale(1.03); } .rangee figure:hover video { transform: none; } }
.expertises li { transition: background .3s, padding .4s var(--ease); }
.expertises li:hover { padding-left: 10px; }
.expertises li:hover .signe { transform: translate(4px, -4px); color: var(--peche); }
.expertises .signe { transition: transform .35s var(--ease), color .3s; }

/* 5. Suite du parcours : invite à continuer */
.teaser { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(40px, 5vw, 72px); font: 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brume); min-height: 44px; transition: color .3s; }
.teaser span { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--ligne); border-radius: 50%; color: var(--peche); }
.teaser:hover { color: var(--craie); }
@media (prefers-reduced-motion: no-preference) { .teaser span { animation: teaser-rebond 2.2s ease-in-out infinite; } }
@keyframes teaser-rebond { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* 6. Barre de lecture */
.lecture { position: fixed; z-index: 7; top: 0; left: 0; right: 0; height: 3px; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #4E3C90, #8A6192, #F4A297); pointer-events: none; }

/* 7. FAQ : ouverture fluide (navigateurs récents) */
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* 8. Changement de thème : cercle qui s'ouvre depuis le bouton */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  .teaser span, .defiler span { animation: none; }
}

.expertise .teaser { grid-column: 2; justify-self: start; margin-top: clamp(8px, 2vw, 24px); }
@media (max-width: 899px) { .expertise .teaser { grid-column: 1; } }

/* Titres : chaque ligne s'enfonce dans son propre masque en quittant l'écran, de haut en bas. */
.ligne { display: block; }
.ligne-in { display: block; will-change: transform; }
.ligne.coupe { clip-path: inset(-.45em -.3em 0 -.3em); }

/* ---------- Chorégraphie par section ---------- */
.js-micro [data-reveal="gauche"] { transform: translate3d(-56px, 0, 0); }
.js-micro [data-reveal="droite"] { transform: translate3d(56px, 0, 0); }
.js-micro [data-reveal="pop"] { transform: translate3d(0, 24px, 0) scale(.92); }
.js-micro [data-reveal="balayage"] { clip-path: inset(0 100% 0 0); transform: none; }
.js-micro [data-reveal="balayage"].is-in { clip-path: inset(-40px); }

/* Filets qui se dessinent de gauche à droite, avec une tête colorée */
.expertises li, .etapes li, .points li { position: relative; border-top-color: transparent; }
.expertises li::after, .etapes li::after, .points li::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--peche), var(--trait) 38%); transform-origin: left; transition: transform 1.2s var(--ease) var(--d, 0ms); pointer-events: none; }
.js-micro .expertises li[data-reveal]:not(.is-in)::after, .js-micro .etapes li[data-reveal]:not(.is-in)::after, .js-micro .points li[data-reveal]:not(.is-in)::after { transform: scaleX(0); }

/* Bandeau de logos : arrivée un à un */
@media (prefers-reduced-motion: no-preference) {
  .js-micro .defile-piste li { transition: opacity .7s var(--ease) calc(var(--i, 0) * 85ms), transform .85s var(--ease) calc(var(--i, 0) * 85ms); }
  .js-micro .defile:not(.entre) .defile-piste li { opacity: 0; transform: translate3d(0, 18px, 0) scale(.84); }
}

/* Parallaxe des images : un peu de marge pour ne jamais voir le bord */
.rangee figure img { scale: 1.08; }

/* Profondeur du hero : les couches suivent la souris, avec inertie */
.ouverture .label, .ouverture h1, .ouverture .intro, .ouverture .actions { transition: translate .9s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .ouverture .label { animation: hero-entree 1.05s var(--ease) .1s backwards, flotte 7s ease-in-out 1.3s infinite; }
  @keyframes flotte { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -5px, 0); } }
  /* appels à l'action : un anneau qui bat doucement */
  .signature-finale .bouton, .appel .bouton { position: relative; }
  .signature-finale .bouton::after, .appel .bouton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: battement 3.4s ease-out infinite; }
  @keyframes battement { 0% { box-shadow: 0 0 0 0 rgba(244, 162, 151, .5); } 70%, 100% { box-shadow: 0 0 0 24px rgba(244, 162, 151, 0); } }
  html[data-theme="light"] .signature-finale .bouton::after, html[data-theme="light"] .appel .bouton::after { animation-name: battement-clair; }
  @keyframes battement-clair { 0% { box-shadow: 0 0 0 0 rgba(78, 60, 144, .35); } 70%, 100% { box-shadow: 0 0 0 24px rgba(78, 60, 144, 0); } }

  /* Tunnel de contact : à chaque étape, titre puis choix arrivent l'un après l'autre */
  .etape:not([hidden]) legend { animation: choix-entree .7s var(--ease) backwards; }
  .etape:not([hidden]) .choix-item { animation: choix-entree .65s var(--ease) backwards; }
  .etape:not([hidden]) .choix-item:nth-child(1) { animation-delay: .12s; }
  .etape:not([hidden]) .choix-item:nth-child(2) { animation-delay: .2s; }
  .etape:not([hidden]) .choix-item:nth-child(3) { animation-delay: .28s; }
  .etape:not([hidden]) .choix-item:nth-child(4) { animation-delay: .36s; }
  @keyframes choix-entree { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
}

/* Les entrées latérales ne doivent jamais créer de défilement horizontal */
html, body { overflow-x: clip; }
@media (max-width: 640px) { .js-micro [data-reveal="gauche"] { transform: translate3d(-28px, 0, 0); } .js-micro [data-reveal="droite"] { transform: translate3d(28px, 0, 0); } }