/* =========================================================================
   « ON PARLE DE VOTRE PROJET ? »

   Plus de carte encadrée : le bloc s'ouvre sur la page, et nos visios
   passent derrière, sur un arc. Ce qui garde le texte lisible par-dessus,
   c'est le voile — mesuré, pas estimé.

   À charger APRÈS theme-ink.css.
   ========================================================================= */

.visio {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 9vw, 120px) 0 clamp(96px, 10vw, 132px);
  isolation: isolate;
}

/* ---- le décor ----------------------------------------------------------- */

.visio-fond {
  position: absolute; inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.visio-fond.visio-prete { opacity: .62; }

.visio-piste {
  position: absolute; inset: 0;
  /* les captures restent nettes ; on les relève seulement, parce que le
     fond de Meet est noir et qu'elles disparaîtraient sur la page encre */
  filter: saturate(.95) brightness(1.22);
  will-change: transform;
}
.visio-carte {
  position: absolute; left: 0; top: 0;
  border-radius: 14px; overflow: hidden;
  background: #0A1017;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .9);
  will-change: transform;
}
.visio-carte img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

/* Le voile : sans lui, une capture claire passant derrière un mot le rend
   illisible. Dégradé depuis les bords, plus dense au centre, là où vit le
   texte. Mesuré : le titre reste au-dessus de 7:1 sur toute la bande. */
.visio::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(54% 58% at 50% 50%, rgba(13, 27, 36, .92) 0%, rgba(13, 27, 36, .66) 62%, rgba(13, 27, 36, .18) 100%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(13, 27, 36, .1) 18%, rgba(13, 27, 36, .1) 82%, var(--bg) 100%);
}

/* ---- le propos ---------------------------------------------------------- */

.visio-dit {
  position: relative; z-index: 1;
  max-width: 640px; margin: 0 auto; text-align: center;
}
.visio-dit h2 {
  font-size: clamp(26px, 3.5vw, 40px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.16;
  margin: 0 0 16px;
  text-shadow: 0 2px 24px rgba(9, 19, 25, .55);
}
.visio-dit > p {
  color: var(--gray-light); font-size: 16px; line-height: 1.7;
  margin: 0 0 32px;
  text-shadow: 0 1px 16px rgba(9, 19, 25, .55);
}

@media (max-width: 700px) {
  .visio-piste { filter: saturate(.95) brightness(1.22); }
  .visio-fond.visio-prete { opacity: .5; }
  /* le voile se desserre : sur un écran étroit les cartes passent toutes
     par le centre, et à la densité du grand écran on ne voyait plus rien */
  .visio { padding-bottom: clamp(190px, 46vw, 250px); }
  .visio::before {
    background:
      radial-gradient(86% 46% at 50% 34%, rgba(13, 27, 36, .9) 0%, rgba(13, 27, 36, .62) 70%, rgba(13, 27, 36, .2) 100%),
      linear-gradient(to bottom, var(--bg) 0%, rgba(13, 27, 36, .1) 14%, rgba(13, 27, 36, .1) 88%, var(--bg) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* l'arc reste, il ne défile plus */
  .visio-fond { transition: none; }
}