/* ==========================================================================
   Talia — Hero slider
   --------------------------------------------------------------------------
   SEUL fichier de style du hero vidéo. Markup : parts/hero/hero-slider.php
   Enregistrement et rendu : inc/blocks/hero-slider.php

   UNE SEULE CONVENTION DE CLASSE. Le thème avait deux blocs quasi identiques,
   `talia/hero-slider` et `talia/hero-slider-header`, avec deux jeux de règles
   dont plusieurs étaient des copies mot pour mot — la pastille de catégorie
   était déclarée deux fois à l'identique. Tout est replié sur
   `.talia-hero-slider` ; le bloc déprécié rend le même markup, donc les pages
   existantes sont couvertes.

   Ce qui n'est PAS ici : `.hero-video*`, le conteneur partagé avec le
   shortcode [toolbox_hero_video], resté dans main.css.
   ========================================================================== */

.hero-video.talia-hero-slider {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  align-items: center;
}

.talia-hero-slider {
  --hero-content-safe-top: clamp(96px, calc(var(--header-height, 132px) + var(--hero-promo-height, 0px) + 18px), 260px);
}

.talia-hero-slider .talia-hero-header__category.talia-hero-slider__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #dbeafe;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /*
    Pas de `nowrap` : en 320px la pastille mesurait 294px pour 320 disponibles,
    à un mot près du débordement. Elle se replie plutôt que de pousser le hero
    en largeur.
  */
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

.talia-hero-slider .talia-hero-header__category.talia-hero-slider__category mark {
  background-color: transparent !important;
  padding: 0 !important;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Icône de la pastille de catégorie

   Facultative, choisie dans les réglages du bloc. Elle pulse de 1 à 0,3 comme
   un témoin d'enregistrement vidéo.

   L'écart avec le texte est posé en `margin` sur l'icône, PAS en `gap` sur la
   pastille : celle-ci est en `inline-flex`, et un `gap` s'appliquerait aussi
   entre les fragments de texte dès que la catégorie contient un `<mark>` ou
   du gras — l'espace se verrait au milieu du libellé.

   La taille suit le texte (`em`), sauf le point, dont la maquette fixe le
   diamètre à 7px quelle que soit la taille de la pastille.
   -------------------------------------------------------------------------- */

.talia-hero-slider__category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.55em;
  animation: talia-hero-pill-pulse 1.8s ease-in-out infinite;
}

.talia-hero-slider__category-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.talia-hero-slider__category-icon--dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

@keyframes talia-hero-pill-pulse {
  50% {
    opacity: 0.3;
  }
}

/* Un témoin qui clignote sans fin est un déclencheur connu : on le fige pour
   qui a demandé moins d'animations. L'icône reste affichée. */
@media (prefers-reduced-motion: reduce) {
  .talia-hero-slider__category-icon {
    animation: none;
  }
}

.talia-hero-slider .hero-title mark,
.talia-hero-slider .hero-description mark {
  background-color: transparent;
  padding: 0 0.2em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: 0.9;
}

.talia-hero-slider .hero-scroll-indicator.hero-scroll-mobile {
  display: flex !important;
  margin-top: var(--spacing-lg);
}

.talia-hero-slider .hero-scroll-indicator.hero-scroll-desktop {
  display: none !important;
}

.talia-hero-slider .scroll-arrow {
  color: #ffffff !important;
}

.talia-hero-slider .scroll-arrow svg {
  stroke: #ffffff !important;
}

.talia-hero-slider .hero-description {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-lg);
}

.talia-hero-slider .hero-video-text {
  max-width: 960px;
  padding-top: 0;
  padding-bottom: var(--spacing-sm);
}

.talia-hero-slider .hero-title {
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.18;
  margin-bottom: var(--spacing-md);
}

.talia-hero-slider .hero-video-content {
  display: flex;
  align-items: center;
  min-height: 100%;
  padding-bottom: clamp(8px, 2vh, 24px);
}

/* --------------------------------------------------------------------------
   Arguments du hero

   Des repères courts sous les CTA, dans le hero lui-même — pas un bloc de
   section posé par-dessus une vidéo.

   MASQUÉS SUR TÉLÉPHONE, et c'est un arbitrage, pas un oubli. Le hero mobile
   tenait déjà 625px de contenu dans 844px de haut : pastille, titre sur trois
   lignes, description sur cinq, deux boutons. Les arguments ajoutaient 138px
   à un écran déjà plein. Les resserrer ne suffisait pas, et réduire leur texte
   revenait à afficher ce que personne ne lit.

   Ils reviennent dès 600px, où la place existe.

   PALIERS EXPLICITES PLUTÔT QU'AUTO-FIT sur tablette. `auto-fit` remplit la
   largeur disponible sans se soucier du nombre d'arguments : en 768px il
   tenait trois colonnes et renvoyait le quatrième seul à la ligne, ce qui se
   lit comme un oubli. Deux colonnes donnent une grille pleine avec quatre
   arguments, et une dernière ligne à moitié remplie avec trois — un cas
   nettement moins fréquent, et moins voyant.

   Au-delà de 1024px la largeur suffit pour que `auto-fit` aligne les quatre
   d'un coup : on le laisse reprendre la main, sans nombre codé en dur.
   -------------------------------------------------------------------------- */

.talia-hero-slider__arguments {
  display: none;
}

@media (min-width: 600px) {
  .talia-hero-slider__arguments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    width: 100%;
    max-width: 820px;
    margin: clamp(13px, 2.4vh, 28px) auto 0;
    padding: clamp(11px, 2vh, 20px) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    list-style: none;
    /* Tout le hero est centré — pastille, titre, description, boutons. Des
       arguments alignés à gauche cassaient cet axe. */
    text-align: center;
  }

  .talia-hero-slider__argument {
    margin: 0;
    padding: 0;
  }

  .talia-hero-slider__argument-title {
    display: block;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
  }

  .talia-hero-slider__argument-text {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.5;
  }
}

@media (min-width: 1024px) {
  .talia-hero-slider__arguments {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}


.talia-hero-slider__cta-legend {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  font-weight: 400;
}

.talia-hero-slider .talia-cta-button__email-input::placeholder {
  color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-height: 860px) {
  .talia-hero-slider.hero-video {
      align-items: center;
    }

  .talia-hero-slider .hero-video-content {
      align-items: center;
    }

  .talia-hero-slider .hero-title {
      font-size: clamp(1.45rem, 4.3vh, 2.55rem);
      line-height: 1.14;
      margin-bottom: var(--spacing-sm);
    }

  .talia-hero-slider .hero-description {
      font-size: clamp(0.86rem, 1.95vh, 1.02rem);
      line-height: 1.38;
      margin-bottom: var(--spacing-sm);
    }

  .talia-hero-slider .hero-actions .btn {
      min-height: 40px;
      padding: 9px 16px;
      font-size: 0.88rem;
    }

  /* Écran court mais assez large pour les arguments : on resserre les espaces,
     jamais les tailles de texte. */
  .talia-hero-slider__arguments {
      gap: 10px 18px;
      margin-top: 14px;
      padding-top: 12px;
    }

  .talia-hero-slider .talia-hero-header__category.talia-hero-slider__category {
      margin-bottom: 10px;
    }
}


@media (max-width: 767.98px) {
  .talia-hero-slider {
      /*
        Mobile safety-first: leave extra breathing room below nav
        (including iOS notch safe-area) to prevent any overlap.
      */
      --hero-content-safe-top: clamp(124px, calc(var(--header-height, 132px) + var(--hero-promo-height, 0px) + env(safe-area-inset-top, 0px) + 20px), 280px);
    }
}