/* =====================================================================
   madly — grammaire d'arrivée des cards
   Chargé APRÈS le CSS des pages : il neutralise les anciens décalages
   figés sur des index de grille et unifie durées + courbes.
   Voir madly-reveal.js pour la cascade.
   ===================================================================== */

:root{
  /* La courbe signature du site (déjà 24 usages) : easeOutExpo.
     Elle démarre vite et se pose longuement — c'est ce qui se lit comme « smooth ».
     L'ancien clip-path utilisait cubic-bezier(.77,0,.175,1), un ease-IN-out :
     il démarrait lentement, d'où la sensation de mollesse à l'arrivée. */
  --rv-ease: cubic-bezier(.19, 1, .22, 1);
  --rv-dur:  .9s;    /* le voile qui découvre le média */
  --rv-dur-img: 1.1s; /* l'image continue un peu après : ça respire, ça ne « claque » pas */
  --rv-dur-txt: .6s;
  --rv-offset-txt: .22s;
}

/* ── 1. On efface les anciens décalages par index ────────────────────
   Ils supposaient une grille à 3 colonnes (nth-child(3n+2/3n+3)) qui n'existe
   plus : la grille fait 6 colonnes en desktop, 2 en tablette, 1 en mobile.
   La cascade est désormais calculée en JS d'après la position réelle. */
.card:nth-child(3n+2) .card-media,
.card:nth-child(3n+3) .card-media,
.card:nth-child(3n+2) .card-info,
.card:nth-child(3n+3) .card-info{
  transition-delay: 0s;
}

/* ── 2. Une seule courbe, un seul rythme ────────────────────────────── */
.card .card-media{
  transition: clip-path var(--rv-dur) var(--rv-ease) var(--rv-delay, 0ms);
}
.card .card-media img,
.card .card-media video{
  transition: transform var(--rv-dur-img) var(--rv-ease) var(--rv-delay, 0ms),
              filter .55s var(--rv-ease);
}
.card .card-info{
  transition: opacity var(--rv-dur-txt) var(--rv-ease)
                calc(var(--rv-delay, 0ms) + var(--rv-offset-txt)),
              transform var(--rv-dur-txt) var(--rv-ease)
                calc(var(--rv-delay, 0ms) + var(--rv-offset-txt));
}

/* ── 3. Blocs génériques (services, pôles) ──────────────────────────── */
.rv:not(.card){
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--rv-dur-txt) var(--rv-ease) var(--rv-delay, 0ms),
              transform var(--rv-dur-txt) var(--rv-ease) var(--rv-delay, 0ms);
}
.rv:not(.card).in-view{
  opacity: 1;
  transform: none;
}

/* ── 4. Le survol n'est PAS touché ──────────────────────────────────
   `.card:hover .card-arrow { width: 28px }` et `.card:hover .card-title-row
   { gap: 18px }` animent bien des propriétés de mise en page, mais :
     — l'animation de width EST l'effet (la flèche se déplie) ; la refaire en
       transform obligerait à réserver les 28px en permanence et changerait la
       mise en page au repos ;
     — ça ne concerne qu'UNE card à la fois, pas les 21 : le coût est marginal.
   On ne corrige donc que l'ARRIVÉE, qui est la vraie demande.

   ── 5. Le calque GPU ne doit exister que pendant l'animation ────────
   `will-change` permanent sur 21 cards = 21 calques gardés en mémoire en
   permanence, ce qui peut au contraire dégrader le rendu. On le relâche. */
.card.in-view .card-media,
.card.in-view .card-media img,
.card.in-view .card-media video{
  will-change: auto;
}

@media (prefers-reduced-motion: reduce){
  .rv, .rv:not(.card){ opacity: 1 !important; transform: none !important; transition: none !important; }
  .card .card-media, .card .card-media img, .card .card-info{ transition: none !important; }
}