/* ============================================================
   MBEZORA — Carrousel d'images en arrière-plan du hero (pages/services.php)
   ------------------------------------------------------------
   Fichier : assets/css/services-hero.css
   Chargé par services.php via $page_css.
   Mêmes images que le carrousel de l'accueil :
   assets/images/hero-services/<pôle>.png
   Les images couvrent TOUT le hero (inset: 0 + cover). Un voile
   sombre dégradé garde le texte lisible, une teinte de la couleur
   du pôle donne une identité à chaque diapositive.
============================================================ */

.sv-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---- Diapositive : fondu enchaîné ---- */
.sv-hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.3s ease;
}
.sv-hero-slide.is-active { opacity: 1; }

/* L'image remplit tout l'espace et zoome très lentement (effet « Ken Burns »).
   À la sortie, le zoom n'est réinitialisé qu'une fois le fondu terminé :
   aucun saut visible. */
.sv-hero-slide-img {
  position: absolute; inset: 0;
  background-color: var(--sv-navy-2, #0B1F5C);
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 0s linear 1.3s;
  will-change: transform;
}
.sv-hero-slide.is-active .sv-hero-slide-img {
  transform: scale(1.1);
  transition: transform var(--sv-dur, 9s) linear;
}

/* Teinte aux couleurs du pôle (sert aussi de repli si l'image manque) */
.sv-hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background:
          radial-gradient(900px 560px at 82% 18%, color-mix(in srgb, var(--c) 42%, transparent), transparent 65%),
          radial-gradient(700px 480px at 0% 100%, color-mix(in srgb, var(--c) 26%, transparent), transparent 65%);
  mix-blend-mode: screen;
}

/* ---- Voile : sombre sous le texte (gauche), plus léger à droite ---- */
.sv-hero-veil {
  position: absolute; inset: 0;
  background:
          linear-gradient(to top, rgba(6,15,38,.72) 0%, transparent 32%),
          linear-gradient(100deg, rgba(6,15,38,.93) 0%, rgba(6,15,38,.76) 40%, rgba(6,15,38,.40) 100%);
}

/* Le hero a désormais une photo : la grille et les halos restent par-dessus, plus discrets */
.sv-hero--bg .sv-hero-grid-bg { opacity: .7; }
.sv-hero--bg .sv-orb { opacity: .28; }

/* ---- Barre de progression (bas du hero) ---- */
.sv-hero-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; z-index: 3;
  background: rgba(255,255,255,.14);
}
.sv-hero-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent, #00C2FF), #fff);
  border-radius: 0 3px 3px 0;
}
.sv-hero-progress span.is-animating { animation: sv-hero-progress var(--sv-dur, 9s) linear forwards; }
.sv-hero-bg-wrap.is-paused .sv-hero-progress span { animation-play-state: paused; }
@keyframes sv-hero-progress { from { width: 0; } to { width: 100%; } }

/* ---- Commandes : légende cliquable + puces ---- */
.sv-hero .container.sv-hero-ctrl {
  position: absolute; left: 0; right: 0; bottom: 22px;
  z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.sv-hero-cap {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .4rem .9rem .4rem .45rem;
  border-radius: 50px;
  background: rgba(7,15,38,.55);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; text-decoration: none;
  font-size: .8rem; font-weight: 700;
  transition: background .3s ease, border-color .3s ease;
}
.sv-hero-cap:hover { background: rgba(7,15,38,.8); border-color: rgba(255,255,255,.4); color: #fff; }
.sv-hero-cap-ic {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c, #0066FF);
  font-size: .7rem;
  transition: background .5s ease;
}
.sv-hero-cap-n { color: rgba(226,232,255,.65); font-variant-numeric: tabular-nums; font-weight: 600; }
.sv-hero-cap i.fa-arrow-right { font-size: .68rem; transition: transform .3s ease; }
.sv-hero-cap:hover i.fa-arrow-right { transform: translateX(4px); }

.sv-hero-dots { display: flex; gap: .45rem; }
.sv-hero-dot {
  width: 9px; height: 9px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: width .35s ease, background .35s ease, transform .2s ease;
}
.sv-hero-dot:hover { background: rgba(255,255,255,.7); transform: scale(1.15); }
.sv-hero-dot.is-active { width: 26px; border-radius: 5px; background: var(--c, #fff); }
.sv-hero-dot:focus-visible, .sv-hero-cap:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 1100px) {
  /* Une seule colonne : le texte occupe toute la largeur, voile uniforme */
  .sv-hero-veil {
    background:
            linear-gradient(to top, rgba(6,15,38,.75) 0%, transparent 30%),
            linear-gradient(rgba(6,15,38,.7), rgba(6,15,38,.7));
  }
}
@media (max-width: 640px) {
  .sv-hero .container.sv-hero-ctrl { bottom: 16px; justify-content: center; }
  .sv-hero-cap-n { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-hero-slide { transition: none; }
  .sv-hero-slide-img, .sv-hero-slide.is-active .sv-hero-slide-img { transform: none; transition: none; }
  .sv-hero-progress span { display: none; }
}

/* ============================================================
   MISE À JOUR — fenêtre de code retirée : le texte est seul,
   à gauche, et les images prennent toute la place à droite.
============================================================ */

/* Hero plus haut, contenu centré verticalement */
.sv-hero--bg {
  display: flex; align-items: center;
  min-height: clamp(600px, 80vh, 780px);
  padding: 130px 0 120px;
}
.sv-hero--bg .container { width: 100%; }
.sv-hero-inner--solo { grid-template-columns: minmax(0, 1fr); }
.sv-hero-inner--solo .sv-hero-text { max-width: 640px; }
.sv-hero--bg .sv-hero-facts { max-width: 640px; }

/* Voile allégé : sombre uniquement derrière le texte, image nette ailleurs */
.sv-hero-veil {
  background:
          linear-gradient(to top, rgba(6,15,38,.55) 0%, transparent 22%),
          linear-gradient(95deg, rgba(6,15,38,.90) 0%, rgba(6,15,38,.72) 30%, rgba(6,15,38,.18) 62%, rgba(6,15,38,0) 100%);
}
/* Teinte de couleur plus légère pour ne pas délaver l'image */
.sv-hero-slide::after { opacity: .55; }
/* Lueurs et grille retirées de la zone image */
.sv-hero--bg .sv-orb { display: none; }
.sv-hero--bg .sv-hero-grid-bg { opacity: .35; }

/* Lisibilité du texte sur la photo */
.sv-hero--bg h1, .sv-hero--bg h2, .sv-hero--bg .sv-hero-lead { text-shadow: 0 2px 18px rgba(6,15,38,.55); }
.sv-hero--bg .sv-hero-lead { color: rgba(236,241,255,.92); }

@media (max-width: 1100px) {
  .sv-hero--bg { min-height: 0; padding: 110px 0 120px; }
  /* Une colonne : le texte couvre l'image, voile plus dense pour rester lisible */
  .sv-hero-veil {
    background:
            linear-gradient(to top, rgba(6,15,38,.6) 0%, transparent 30%),
            linear-gradient(rgba(6,15,38,.68), rgba(6,15,38,.68));
  }
}
@media (max-width: 640px) {
  .sv-hero--bg { padding: 90px 0 110px; }
}

/* ============================================================
   MISE À JOUR — plus de zoom : l'image s'affiche à sa taille
   naturelle de « cover » (le strict minimum pour remplir le hero).
============================================================ */
.sv-hero-slide-img,
.sv-hero-slide.is-active .sv-hero-slide-img {
  transform: none;
  transition: none;
  will-change: auto;
}

/* ============================================================
   MISE À JOUR — image entière, sans zoom ni recadrage
   ------------------------------------------------------------
   Deux couches par diapositive :
   • .sv-hero-slide-blur : la même image, agrandie et floutée,
     qui remplit tout le hero (aucun bord vide) ;
   • .sv-hero-slide-img  : l'image nette, affichée EN ENTIER
     (contain), calée à droite, à la hauteur du hero.
============================================================ */
.sv-hero-slide-blur {
  position: absolute; inset: -40px;
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.15) brightness(.9);
}
.sv-hero-slide-img,
.sv-hero-slide.is-active .sv-hero-slide-img {
  background-color: transparent;
  background-image: var(--img, none);
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  transform: none; transition: none;
}
/* Un fondu en bord gauche de l'image nette, pour qu'elle se raccorde au flou */
.sv-hero-slide-img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}
/* Voile : le texte reste lisible, l'image n'est plus assombrie à droite */
.sv-hero-veil {
  background:
          linear-gradient(to top, rgba(6,15,38,.5) 0%, transparent 20%),
          linear-gradient(95deg, rgba(6,15,38,.88) 0%, rgba(6,15,38,.62) 34%, rgba(6,15,38,.08) 62%, rgba(6,15,38,0) 100%);
}
@media (max-width: 1100px) {
  .sv-hero-slide-img { background-position: center; -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================
   MISE À JOUR — zoom léger sur l'image nette (1 → 1,05)
   Doux et lent ; réinitialisé seulement après le fondu de sortie.
============================================================ */
.sv-hero-slide .sv-hero-slide-img {
  transform: scale(1);
  transform-origin: 70% 50%;
  transition: transform 0s linear 1.3s;
  will-change: transform;
}
.sv-hero-slide.is-active .sv-hero-slide-img {
  transform: scale(1.05);
  transition: transform var(--sv-dur, 6s) ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .sv-hero-slide .sv-hero-slide-img,
  .sv-hero-slide.is-active .sv-hero-slide-img { transform: none; transition: none; }
}