/* ==========================================================================
   Cobalt — Animation Cartographie corporelle (héros)
   Styles isolés sous le préfixe .cobalt-carto — n'affecte rien d'autre.
   ========================================================================== */

.cobalt-carto{
  position:relative;
  width:100%;
  aspect-ratio:1500 / 742;   /* ratio des captures ; garde les images alignées */
  border-radius:14px;
  overflow:hidden;
  background:#0d3940;         /* couleur de fond le temps du chargement */
}

/* Les 3 états superposés, on fait un fondu de l'un à l'autre */
.cobalt-carto__frame{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .45s ease;
}
.cobalt-carto__frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.cobalt-carto__frame.is-active{opacity:1}

/* Curseur animé */
.cobalt-carto__cursor{
  position:absolute;
  left:62%; top:86%;
  width:26px; height:26px;
  z-index:6;
  transform:translate(-4px,-2px);
  transition:left 1s cubic-bezier(.5,.05,.2,1),
             top  1s cubic-bezier(.5,.05,.2,1),
             opacity .4s ease;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));
  pointer-events:none;
}
.cobalt-carto__cursor.is-pressed{transform:translate(-4px,-2px) scale(.82)}

/* Onde de clic */
.cobalt-carto__ripple{
  position:absolute;
  z-index:5;
  width:14px; height:14px;
  left:0; top:0;
  border-radius:50%;
  border:2px solid rgba(224,138,91,.95);  /* orange COBALT */
  transform:translate(-50%,-50%) scale(.3);
  opacity:0;
  pointer-events:none;
}
.cobalt-carto__ripple.is-go{animation:cobaltCartoRipple .6s ease-out}
@keyframes cobaltCartoRipple{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}
}

/* Accessibilité : si l'utilisateur a désactivé les animations,
   on fige l'état "zone sélectionnée" et on masque le curseur. */
@media (prefers-reduced-motion: reduce){
  .cobalt-carto__frame,
  .cobalt-carto__cursor{transition:none}
}

/* ==========================================================================
   Intégration héros COBALT — reconstruction du composite en 3 couches.
   Le wrapper reprend exactement la boîte de l'ancienne figure
   .hero-cobalt__img (carré 1024×1024) ; le fond pétrole diagonal reste
   porté par .hero-cobalt::before, inchangé. Les % internes reproduisent
   le cadrage écran/consultante de l'ancien composite.
   ========================================================================== */
.hero-cobalt__anim{
  position:absolute;
  left:-14%;
  right:-2%;
  bottom:calc(-1 * var(--wp--preset--spacing--80, 4rem));
  aspect-ratio:1 / 1;
}

/* Couche 2 : l'écran animé */
.hero-cobalt__screen{
  position:absolute;
  left:6.5%;
  right:6%;
  top:4%;
  border-radius:14px;
  box-shadow:0 24px 40px rgba(21,46,52,.28);
}

/* Couche 3 : la consultante détourée, au premier plan.
   width 76% + left -16% : tête et chevelure chevauchent la partie GAUCHE de
   l'écran (sommet du crâne — 5,1 % de marge alpha dans le PNG — à ~28 % du
   wrapper), sans masquer les deux silhouettes animées : aux hauteurs où
   l'écran est recouvert, la tête reste à gauche de x≈35 %, début de la
   carte « Face ». */
.hero-cobalt__femme{
  position:absolute;
  left:-16%;
  bottom:0;
  width:76%;
  height:auto;
  z-index:8;
  filter:drop-shadow(0 24px 40px rgba(21,46,52,.28));
}

/* Mobile : même empilement, mais le wrapper reprend le flux (comme
   l'ancienne image passée en position:static) dans le panneau pétrole. */
@media (max-width: 781px){
  .hero-cobalt__anim{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
  }
  .hero-cobalt__screen{box-shadow:0 12px 24px rgba(21,46,52,.25)}
  .hero-cobalt__femme{filter:drop-shadow(0 12px 24px rgba(21,46,52,.25))}
}