/* Carte : faire coller l’iframe aux bords du bloc */
.aspect.map{
  display:block;           /* annule le grid du parent .aspect */
  position:relative;
  overflow:hidden;
  border:1px solid var(--c-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  padding:0;               /* pas d’espace interne */
}
.aspect.map iframe{
  position:absolute;
  inset:0;                 /* top/right/bottom/left: 0 */
  width:100%;
  height:100%;
  border:0;
  border-radius:inherit;   /* bords arrondis identiques */
  display:block;
}
/* Faire entrer l'image dans le bloc .hero-card */
.hero-card{
  position: relative;
  overflow: hidden;      /* coupe ce qui dépasse et garde les coins arrondis */
  padding: 0;
  display: block;        /* on n'a plus besoin du grid ici */
}

.hero-card img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;     /* remplit le bloc ; peut rogner un peu */
  border-radius: inherit;
}
/* Les images à l'intérieur d'un .aspect doivent remplir le bloc */
.aspect{
  overflow: hidden;          /* évite un liseré et respecte les coins arrondis */
}
.aspect > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;         /* remplit le bloc ; peut rogner un peu */
  border-radius: inherit;
}
.ul{list-style: none;}
/* Image "visage" FIXE : sous le texte, au-dessus du fond */
.visage-fixed{
  position: fixed;
  /* taille “élastique” : mini 260px, idéal 38vw, maxi 640px */
  width: clamp(260px, 57vw, 840px);
  height: auto;

  /* ancrage bas-droite avec offsets qui s’adaptent un peu */
  right: clamp(-4rem, 49vw, 58vw);
  bottom: clamp(-6rem, 30vh, -2rem);

  z-index: 0;
  pointer-events: none;
  opacity: .50;
  will-change: filter, transform;
  animation: visageGlow 5.5s ease-in-out infinite;
}
#services{
  border-block: 1px solid var(--c-border);
}
/* Le contenu passe au-dessus de l'image */
header, main, footer{
  position: relative;
  z-index: 1;
}

/* Option mobile : réduire/masquer si besoin */
@media (max-width: 800px){
  .visage-fixed{
    width: clamp(220px, 149vw, 560px);
    right: -18vw;
    bottom: -10vh;
  }
  /* ou: .visage-fixed{ display:none; } */
}
@keyframes visageGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 6px rgba(168,85,247,.35))   /* mauve #a855f7 */
      drop-shadow(0 0 18px rgba(255,255,255,.22));
    transform: scale(1);
  }
  50%{
    filter:
      drop-shadow(0 0 22px rgba(168,85,247,.6))
      drop-shadow(0 0 48px rgba(255,255,255,.32));
    transform: scale(1.02);
  }
}