/*
  Projet : Site 15A
  Fichier : css/cta.css (socle partagé des call-to-action)
  Version : 0.29.0 — 2026-07-20 10:32
  Objectif : Style unique et réutilisable des boutons d'action (CTA) et des
             blocs de clôture « passez à l'action », partagés par toutes les
             pages. Reprend le look du bouton .btn-cta de la page Tournois
             (fond blanc translucide, bord bas épais, coins arrondis, police
             nulshock) mais en LARGEUR FLEXIBLE pour accueillir des libellés
             longs (« Demander une démo »), là où .btn-cta était figé à 155px.
             À charger sur chaque page qui pose un CTA. Ne remplace pas
             .btn-cta (conservé tel quel sur Tournois).
             Porte aussi le traitement visuel de la vidéo de démonstration
             (bloc « scène de projection », variante --framed).
*/

/* ---- Bouton d'action ---------------------------------------------------- */
.cta15a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 180px;
  padding: 0 26px;
  height: 54px;
  font-family: nulshock, "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border: 1px solid #fff;
  border-bottom-width: 4px;
  border-radius: 16px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.61), rgb(255 255 255 / 27%));
  backdrop-filter: blur(3px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cta15a:hover,
.cta15a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.78), rgb(255 255 255 / 40%));
  color: #fff;
}

.cta15a:focus-visible {
  outline: 3px solid #ffd7b0;
  outline-offset: 3px;
}

/* Variante pleine (couleur de marque) — CTA principal quand on veut plus de
   présence qu'un bouton translucide (ex. « Demander une démo »). */
.cta15a--primary {
  color: #fff;
  border-color: #b34d0d;
  background: linear-gradient(180deg, #f0732a 0%, #de6111 100%);
  backdrop-filter: none;
}

.cta15a--primary:hover,
.cta15a--primary:focus-visible {
  background: linear-gradient(180deg, #ff8236 0%, #ef6c17 100%);
  color: #fff;
}

/* Variante secondaire discrète (contour) — pour un CTA d'appoint. */
.cta15a--ghost {
  background: transparent;
  backdrop-filter: none;
}

.cta15a--ghost:hover,
.cta15a--ghost:focus-visible {
  background: rgb(255 255 255 / 18%);
}

/* ---- Bloc de clôture « passez à l'action » ------------------------------ */
.cta15a-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 900px;
  margin: 3.5rem auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.cta15a-block__title {
  margin: 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
}

.cta15a-block__text {
  margin: 0;
  color: #fff;
  opacity: 0.92;
  max-width: 640px;
}

.cta15a-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* ---- Vidéo de démonstration (une par page) ------------------------------ */
.demo-video-15a-wrap {
  max-width: 1000px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}

.demo-video-15a {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  background: #000;
}

/* ---- Vidéo de démonstration — traitement « scène de projection » -------- */
/*
   Variante `--framed`. Le problème d'origine : la vidéo était un rectangle
   posé au milieu de la page, et son contenu passe sur fond BLANC studio à
   partir de la 20e seconde — sur le fond texturé de la page, ça faisait un
   pavé blanc découpé. La réponse n'est pas un cadre de téléviseur : c'est
   une SCÈNE. La page s'assombrit largement autour de la vidéo, en dégradé
   sans bord net, comme une salle de projection ; la couleur d'accent de la
   page (--demo-accent) éclaire cette scène par le haut. La vidéo, elle, ne
   reçoit qu'un LISERÉ de verre fin — le même vocabulaire que les boutons
   15A (blanc translucide, bord bas plus épais, flou d'arrière-plan) — et
   une vignette intérieure qui fond ses bords clairs dans la scène.
   Ne s'applique QUE si la classe --framed est posée : les pages qui ne
   l'ont pas gardent le rendu d'origine.
*/
.demo-video-15a-wrap--framed {
  max-width: 1020px;
  margin: 4rem auto 4.5rem;
}

.demo-video-15a-stage {
  position: relative;
  isolation: isolate;
}

/* La scène : nappe sombre très étalée, sans bord net, + deux lueurs à la
   couleur de la page (au-dessus et en dessous) qui simulent la lumière que
   l'écran renvoie sur le fond. C'est elle qui « creuse » la page. */
.demo-video-15a-stage::before {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  top: -26%;
  bottom: -34%;
  z-index: -2;
  background:
    radial-gradient(
      40% 30% at 50% 12%,
      var(--demo-accent, #c1ab5f) 0%,
      rgba(255, 255, 255, 0) 72%
    ),
    radial-gradient(
      42% 32% at 50% 88%,
      var(--demo-accent, #c1ab5f) 0%,
      rgba(255, 255, 255, 0) 74%
    ),
    radial-gradient(
      62% 66% at 50% 50%,
      rgba(4, 7, 11, 0.94) 0%,
      rgba(4, 7, 11, 0.78) 42%,
      rgba(4, 7, 11, 0.34) 68%,
      rgba(4, 7, 11, 0) 84%
    );
  filter: blur(30px);
  pointer-events: none;
}

/* Socle : ombre au sol, pour que l'ensemble repose au lieu de flotter. */
.demo-video-15a-stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -20px;
  height: 26px;
  z-index: -1;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0) 74%
  );
  filter: blur(9px);
  pointer-events: none;
}

/* Liseré de verre 15A — fin, translucide, bord bas plus épais (même famille
   que les boutons du site). Pas un cadre de téléviseur : une arête. */
.demo-video-15a-frame {
  position: relative;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom-width: 3px;
  border-bottom-color: rgba(255, 255, 255, 0.34);
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 55%,
    rgba(255, 255, 255, 0.16) 100%
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    0 30px 60px -22px rgba(0, 0, 0, 0.6),
    0 10px 24px -14px rgba(0, 0, 0, 0.5);
}

/* Filet lumineux au sommet du liseré, à la couleur de la page : la signature
   qui change d'un univers à l'autre sans rien toucher d'autre. */
.demo-video-15a-frame::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(40%, 300px);
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    var(--demo-accent, #c1ab5f) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow: 0 0 16px 1px var(--demo-accent, #c1ab5f);
  z-index: 3;
  pointer-events: none;
}

/* Panneau de verre posé sur l'image : reflet diagonal discret + vignette qui
   fond les bords clairs de la vidéo dans la scène (c'est ce qui neutralise
   le fond blanc du studio) + arête blanche de vitre. */
.demo-video-15a-frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 15px;
  z-index: 2;
  /* Repli pour les navigateurs sans color-mix : vignette neutre. */
  background:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.04) 16%,
      rgba(255, 255, 255, 0) 34%
    ),
    radial-gradient(
      124% 124% at 50% 50%,
      rgba(6, 9, 14, 0) 42%,
      rgba(6, 9, 14, 0.24) 76%,
      rgba(6, 9, 14, 0.5) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 0 0 2px rgba(9, 12, 17, 0.55);
  pointer-events: none;
}

/* Fondu teinté : les bords de l'image s'éteignent dans la couleur de la page
   au lieu de s'arrêter net sur le fond texturé. C'est ce qui fait disparaître
   l'effet « pavé blanc » quand la vidéo passe sur fond studio. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .demo-video-15a-frame::after {
    background:
      linear-gradient(
        118deg,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.04) 16%,
        rgba(255, 255, 255, 0) 34%
      ),
      radial-gradient(
        118% 122% at 50% 46%,
        rgba(6, 9, 14, 0) 34%,
        color-mix(in srgb, var(--demo-accent, #c1ab5f) 13%, transparent) 60%,
        color-mix(in srgb, var(--demo-accent, #c1ab5f) 40%, transparent) 82%,
        color-mix(in srgb, var(--demo-accent, #c1ab5f) 64%, transparent) 94%,
        rgba(10, 14, 20, 0.6) 100%
      );
  }
}

.demo-video-15a-wrap--framed .demo-video-15a {
  position: relative;
  z-index: 1;
  border-radius: 15px;
  box-shadow: none;
  /* Étalonnage léger : sort le blanc pur du studio de la zone « papier »
     pour qu'il lise comme un écran allumé, sans toucher aux plans sombres. */
  filter: brightness(0.94) saturate(1.04);
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .demo-video-15a { border-radius: 12px; }

  .demo-video-15a-wrap--framed {
    margin: 2.25rem auto 2.75rem;
  }
  .demo-video-15a-frame {
    padding: 4px;
    border-bottom-width: 2px;
    border-radius: 14px;
  }
  .demo-video-15a-frame::before { width: min(56%, 180px); }
  .demo-video-15a-frame::after {
    inset: 4px;
    border-radius: 10px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.22),
      inset 0 0 22px 6px rgba(6, 9, 14, 0.5);
  }
  .demo-video-15a-wrap--framed .demo-video-15a { border-radius: 10px; }
  /* Scène resserrée : sur petit écran, elle ne doit jamais déborder en largeur. */
  .demo-video-15a-stage::before {
    left: -4%;
    right: -4%;
    top: -14%;
    bottom: -16%;
    filter: blur(20px);
  }
  .demo-video-15a-stage::after { bottom: -14px; height: 20px; }
  .cta15a {
    width: 100%;
    max-width: 320px;
  }
  .cta15a-actions {
    width: 100%;
    flex-direction: column;
  }
  .cta15a-block {
    margin: 2.5rem auto;
    padding: 2rem 1rem;
  }
}