/* ===========================================================
   Animation « Le déroulé d'une mission » — lignes #rawMission1 à #rawMission5
   Séquence par ligne : 1) le loader grandit  2) le numéro apparaît
   3) titre + texte apparaissent
   Structure Elementor d'une ligne :
     #rawMissionN
       ├─ .loderMissionBlck                      (le loader)
       └─ conteneur
            ├─ conteneur > .circumMission        (le numéro)
            └─ conteneur                         (titre + texte)
   Les états « cachés » ne s'appliquent que si le script a ajouté .mission-anim
   sur <html> : sans JavaScript, tout reste visible.
   =========================================================== */

:root{
  --mission-loader-color:#2C4A6E;
  --mission-dur-loader:.9s;
  --mission-dur-fade:.5s;
  --mission-ease:cubic-bezier(.65,0,.35,1);
}

/* --- Le cercle du numéro --- */
[id^="rawMission"] .circumMission{
  --border-radius:50%;          /* Elementor impose 0 par défaut via cette variable */
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:auto;
  position:relative;
  overflow:visible;
}

/* --- Ondes autour du cercle : deux anneaux qui partent en décalé,
   une fois que le loader a atteint sa taille définitive --- */
:root{
  --mission-wave-color:rgba(255,255,255,.75); /* même blanc que la bordure du cercle */
  --mission-wave-start:1s;                    /* = durée du loader (.9s) + une petite marge */
  --mission-wave-dur:2.6s;
}
/* Les anneaux sont deux <span class="mission-wave"> ajoutés par le script dans chaque rond.
   Surtout pas ::before/::after : Elementor s'en sert déjà sur ses conteneurs (bordures,
   fonds) et le mélange dessinait une croix parasite au centre des ronds. */
[id^="rawMission"] .circumMission .mission-wave{
  position:absolute;
  inset:-1px;                   /* calé sur la bordure de 1px du cercle */
  box-sizing:border-box;
  border:1px solid var(--mission-wave-color);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
/* Étapes 01 à 04 : 3 ondes en ~5 s puis arrêt (la mission est découpée en étapes) */
.mission-anim [id^="rawMission"].is-inview .mission-wave--1{
  animation:missionWave var(--mission-wave-dur) cubic-bezier(.2,.6,.3,1) var(--mission-wave-start) 2;
}
.mission-anim [id^="rawMission"].is-inview .mission-wave--2{
  animation:missionWave var(--mission-wave-dur) cubic-bezier(.2,.6,.3,1) calc(var(--mission-wave-start) + var(--mission-wave-dur) / 2) 1;
}
/* Étape 05 « Accompagner » : les ondes ne s'arrêtent jamais (l'accompagnement est continu) */
.mission-anim #rawMission5.is-inview .mission-wave{
  animation-iteration-count:infinite;
}
@keyframes missionWave{
  0%  { transform:scale(1);   opacity:.8; }
  100%{ transform:scale(1.8); opacity:0;  }
}

/* --- Largeur définitive de chaque loader --- */
#rawMission1 .loderMissionBlck{ width:5vw;  }
#rawMission2 .loderMissionBlck{ width:15vw; }
#rawMission3 .loderMissionBlck{ width:25vw; }
#rawMission4 .loderMissionBlck{ width:35vw; }
#rawMission5 .loderMissionBlck{ width:45vw; }

/* --- Neutralise les animations d'entrée Elementor posées sur ces lignes
   (fadeInLeft / fadeInRight) : elles se battaient avec la croissance du loader --- */
.mission-anim [id^="rawMission"] .animated,
.mission-anim [id^="rawMission"] .elementor-invisible{
  animation:none !important;
  visibility:visible !important;
}

/* --- État de départ (caché) --- */
.mission-anim .loderMissionBlck{
  background-color:var(--mission-loader-color);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--mission-dur-loader) var(--mission-ease);
  will-change:transform;
}
.mission-anim [id^="rawMission"] .circumMission{
  opacity:0;
  transform:scale(.6);
  transition:opacity var(--mission-dur-fade) ease, transform var(--mission-dur-fade) ease;
  transition-delay:.7s;
}
/* Titre + texte : dernier conteneur du bloc de contenu de la ligne */
.mission-anim [id^="rawMission"] > .e-con:not(.loderMissionBlck) > .e-con:last-child{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
  transition-delay:1.15s;
}

/* --- État déclenché : .is-inview ajoutée par le script quand la ligne entre à l'écran --- */
.mission-anim [id^="rawMission"].is-inview .loderMissionBlck{ transform:scaleX(1); }
.mission-anim [id^="rawMission"].is-inview .circumMission{ opacity:1; transform:scale(1); }
.mission-anim [id^="rawMission"].is-inview > .e-con:not(.loderMissionBlck) > .e-con:last-child{
  opacity:1;
  transform:translateY(0);
}

/* --- Accessibilité : aucun mouvement pour qui le demande --- */
@media (prefers-reduced-motion: reduce){
  .mission-anim .loderMissionBlck,
  .mission-anim [id^="rawMission"] .circumMission,
  .mission-anim [id^="rawMission"] > .e-con:not(.loderMissionBlck) > .e-con:last-child{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  [id^="rawMission"] .mission-wave{
    animation:none !important;
    opacity:0 !important;
  }
}