/* ==========================================================================
   bp-avocats.bzh — mise en mouvement du bandeau d'accueil
   Ajout non destructif : toutes les règles sont préfixées .hero.v2 et ce
   fichier se charge après styles.css. Pour revenir en arrière, il suffit de
   retirer les deux lignes hero-anim.css et hero-anim.js de index.html.
   ========================================================================== */

/* --- 1. Les deux taches de couleur, derrière les portraits -------------- */
.hero.v2 .hvisuel .taches{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero.v2 .hvisuel .taches span{position:absolute;display:block;
  transition:transform 1s cubic-bezier(.22,.61,.36,1);will-change:transform}
.hero.v2 .hvisuel .taches i{display:block;width:100%;height:100%;
  filter:blur(26px);will-change:border-radius,transform}
/* Chaque tache est calée sur la silhouette qu'elle accompagne : les deux
   portraits débordent du bloc visuel, les taches les suivent. */
.hero.v2 .hvisuel .taches .t1{left:-18%;bottom:12%;width:62%;aspect-ratio:1/1.51}
.hero.v2 .hvisuel .taches .t2{left:41%;bottom:11%;width:76%;aspect-ratio:1/1.26}
.hero.v2 .hvisuel .taches .t1 i{background:rgba(1,42,88,.27);
  border-radius:58% 42% 47% 53%/46% 51% 49% 54%;
  animation:bp-ondule-1 19s ease-in-out infinite}
.hero.v2 .hvisuel .taches .t2 i{background:rgba(240,180,50,.34);
  border-radius:44% 56% 52% 48%/55% 45% 55% 45%;
  animation:bp-ondule-2 23s ease-in-out infinite}
@keyframes bp-ondule-1{
  0%,100%{border-radius:58% 42% 47% 53%/46% 51% 49% 54%;transform:translate3d(0,0,0) scale(1)}
  34%{border-radius:43% 57% 61% 39%/55% 38% 62% 45%;transform:translate3d(2.8%,-3.2%,0) scale(1.07)}
  67%{border-radius:51% 49% 38% 62%/61% 57% 43% 39%;transform:translate3d(-3%,2.2%,0) scale(.95)}
}
@keyframes bp-ondule-2{
  0%,100%{border-radius:44% 56% 52% 48%/55% 45% 55% 45%;transform:translate3d(0,0,0) scale(1)}
  30%{border-radius:60% 40% 38% 62%/42% 58% 42% 58%;transform:translate3d(-3.2%,2.4%,0) scale(.945)}
  64%{border-radius:38% 62% 59% 41%/60% 43% 57% 40%;transform:translate3d(2.6%,-2.8%,0) scale(1.075)}
}

/* --- 2. Les portraits : lignes d'épaules alignées ----------------------- */
/* La photo de Laurent est cadrée plus serré que celle de Corentin : on la
   rend 4,5 % moins haute pour que les deux lignes d'épaules se superposent,
   Corentin restant légèrement plus grand, comme dans la réalité. */
.hero.v2 .duo .p1{height:411px}

/* --- 3. L'accroche, mot à mot ------------------------------------------- */
.hero.v2 h1.h1-mots .mot{display:inline-block;opacity:0;transform:translateY(.4em);
  animation:bp-mot .62s cubic-bezier(.2,.75,.3,1) forwards}
@keyframes bp-mot{to{opacity:1;transform:none}}

/* --- 4. Les chiffres qui se relaient ----------------------------------- */
.hero.v2 .hpreuves.tourne{align-items:start}
.hero.v2 .hpreuves.tourne>div{min-height:64px;
  transition:opacity .4s ease,transform .4s ease}
.hero.v2 .hpreuves.tourne>div.sort{opacity:0;transform:translateY(-7px)}
.hero.v2 .hpreuves.tourne>div.hors{display:none}

@media(max-width:900px){
  .hero.v2 .duo .p1{height:277px}
  .hero.v2 .hpreuves.tourne>div{min-height:78px}
  .hero.v2 .hvisuel .taches i{filter:blur(18px)}
}

/* --- 5. Mouvement réduit : tout s'affiche, rien ne bouge ---------------- */
@media(prefers-reduced-motion:reduce){
  .hero.v2 .hvisuel .taches i{animation:none}
  .hero.v2 h1.h1-mots .mot{opacity:1;transform:none;animation:none}
  .hero.v2 .hvisuel .taches span{transition:none}
}