/* =========================================================
   CARROUSEL « AUTRES TÉMOIGNAGES » (page d'accueil)

   Remplace l'ancienne liste verticale statique. Défilement
   natif avec scroll-snap : le geste tactile reste celui du
   système et le clavier fonctionne sans code en plus.

   Mobile d'abord ; construit sur les variables du thème.
========================================================= */

.tvs-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

/* ---------- En-tête du carrousel ---------- */
.tvs-rail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.tvs-rail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--primary);
}

.tvs-rail-title h4 {
  margin: 6px 0 0;
  font-size: clamp(1.02rem, 4vw, 1.22rem);
  line-height: 1.25;
  color: #fff;
}

.tvs-rail-tools {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tvs-rail-nav {
  display: flex;
  gap: 6px;
}

.tvs-nav {
  display: grid;
  /* 40px : cible tactile correcte dès 320px. */
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, opacity .25s ease;
}

.tvs-nav:hover:not(:disabled) {
  border-color: var(--primary);
  background: rgba(112, 197, 0, .16);
  color: var(--primary);
}

.tvs-nav:disabled {
  opacity: .32;
  cursor: default;
}

/* Sans débordement, la navigation n'a pas d'objet. */
.tvs-rail.tvs-no-scroll .tvs-rail-nav,
.tvs-rail.tvs-no-scroll .tvs-dots {
  display: none;
}

.tvs-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--primary);
  font-size: .85rem;
  font-weight: 800;
  white-space: nowrap;
  color: #10220f;
  transition: gap .25s ease, background-color .25s ease, transform .25s ease;
}

.tvs-more:hover {
  gap: 12px;
  background: #9cf03a;
  transform: translateY(-2px);
}

.tvs-more i {
  font-size: 11px;
}

/* ---------- Piste ---------- */
.tvs-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Le geste horizontal ne doit pas bloquer le défilement vertical. */
  touch-action: pan-x pan-y;
}

.tvs-viewport::-webkit-scrollbar {
  height: 0;
}

.tvs-track {
  display: flex;
  gap: 12px;
  padding: 2px;
}

/* ---------- Vignette ---------- */
.tvs-slide {
  display: flex;
  flex: 0 0 auto;
  /* Une vignette pleine largeur moins un aperçu de la suivante :
     l'utilisateur voit qu'il peut faire défiler. */
  width: min(78%, 260px);
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}

.tvs-slide:hover {
  border-color: rgba(112, 197, 0, .45);
  background: rgba(112, 197, 0, .08);
  transform: translateY(-3px);
}

.tvs-slide.is-active {
  border-color: var(--primary);
  background: rgba(112, 197, 0, .13);
  box-shadow: 0 0 0 1px rgba(112, 197, 0, .25) inset;
}

.tvs-slide-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0b0f0b;
}

/* Position absolue : en flux, l'image impose son ratio intrinsèque au
   conteneur et annule l'`aspect-ratio` déclaré au-dessus. */
.tvs-slide-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.tvs-slide:hover .tvs-slide-media img {
  transform: scale(1.05);
}

.tvs-slide-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 22px;
  color: rgba(255, 255, 255, .28);
}

.tvs-slide-shade {
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(6, 12, 7, .78), transparent);
  pointer-events: none;
}

.tvs-slide-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: rgba(112, 197, 0, .92);
  font-size: 13px;
  color: #10220f;
  transform: translate(-50%, -50%) scale(.9);
  opacity: .9;
  transition: transform .3s ease, opacity .3s ease;
}

.tvs-slide:hover .tvs-slide-play,
.tvs-slide.is-active .tvs-slide-play {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.tvs-slide-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(6, 12, 7, .7);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--primary);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.tvs-slide-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 13px 14px;
}

.tvs-slide-body strong {
  font-size: .92rem;
  line-height: 1.25;
  color: #fff;
}

.tvs-slide-formation {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
}

.tvs-slide-body small {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}

/* ---------- Pastilles ---------- */
.tvs-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding-block: 6px;
}

.tvs-dot {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}

/* Surface de frappe de 44px sans agrandir le point visible. */
.tvs-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 14px);
  height: 44px;
  transform: translate(-50%, -50%);
}

.tvs-dot.is-active {
  width: 24px;
  background: var(--primary);
}

/* ---------- Tablette et plus ---------- */
@media (min-width: 620px) {
  .tvs-slide {
    width: 232px;
  }
}

@media (min-width: 1024px) {
  .tvs-rail {
    gap: 16px;
  }

  .tvs-slide {
    width: 216px;
  }

  .tvs-track {
    gap: 14px;
  }
}

/* ---------- Très petits écrans ---------- */
@media (max-width: 360px) {
  .tvs-rail-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .tvs-rail-tools {
    width: 100%;
    justify-content: space-between;
  }

  .tvs-slide {
    width: min(84%, 232px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tvs-slide,
  .tvs-slide-media img,
  .tvs-more,
  .tvs-nav,
  .tvs-dot {
    transition: none !important;
  }

  .tvs-slide:hover {
    transform: none !important;
  }

  .tvs-slide:hover .tvs-slide-media img {
    transform: none !important;
  }
}

/* =========================================================
   V19 — DÉCLARATION DE PARTENARIAT (accueil)

   Occupe l'espace laissé vide à droite du carrousel des
   témoignages : la colonne gauche mesure environ 1036px de
   haut, la colonne droite s'arrêtait à 565px.
========================================================= */

.partner-pledge {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  margin-top: 18px;
  padding: 24px 22px;
  border: 1px solid rgba(112, 197, 0, .26);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(112, 197, 0, .16), transparent 62%),
    rgba(255, 255, 255, .04);
}

.partner-pledge-glow {
  position: absolute;
  z-index: 0;
  top: -70px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 197, 0, .3), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: pledgeHalo 7s ease-in-out infinite;
}

@keyframes pledgeHalo {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  50% { transform: translate3d(-12px, 14px, 0) scale(1.12); opacity: 1; }
}

.partner-pledge > *:not(.partner-pledge-glow) {
  position: relative;
  z-index: 1;
}

.partner-pledge-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 7px 14px;
  border: 1px solid rgba(112, 197, 0, .32);
  border-radius: 999px;
  background: rgba(112, 197, 0, .12);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--primary);
}

.partner-pledge h3 {
  margin: 0;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  line-height: 1.32;
  color: #fff;
}

.partner-pledge h3 span {
  color: var(--primary);
}

.partner-pledge-text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}

/* ---------------------------------------------------------
   Les trois partenaires
--------------------------------------------------------- */
.partner-pledge-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.partner-pledge-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;

  /* État de départ de l'apparition : la classe .is-visible, posée par
     testimonial-rail.js quand la carte entre dans l'écran, lance l'animation. */
  opacity: 0;
  transform: translateY(14px);
}

.partner-pledge.is-visible .partner-pledge-item {
  animation: pledgeApparition .6s cubic-bezier(.2, .8, .2, 1) both;
  /* Décalage en cascade : une ligne après l'autre. */
  animation-delay: calc(var(--rang, 0) * .13s + .1s);
}

@keyframes pledgeApparition {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.partner-pledge-item:hover {
  border-color: rgba(112, 197, 0, .42);
  background: rgba(112, 197, 0, .09);
  transform: translateX(3px);
}

.partner-pledge-logo {
  display: grid;
  width: 62px;
  height: 40px;
  place-items: center;
  padding: 5px 7px;
  border-radius: 10px;
  background: #ffffff;
}

.partner-pledge-logo.is-dark {
  background: #0d0f0d;
}

/* Hauteur posée sur l'image : dans une grille, `max-height: 100%`
   ne se résout pas et le logo s'afficherait à sa taille naturelle. */
.partner-pledge-logo img {
  height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.partner-pledge-copy {
  min-width: 0;
}

.partner-pledge-copy strong {
  display: block;
  font-size: .88rem;
  line-height: 1.25;
  color: #fff;
}

.partner-pledge-copy small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .6);
}

.partner-pledge-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  /* 44px : cible tactile confortable. */
  min-height: 44px;
  margin-top: 2px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--primary);
  font-size: .87rem;
  font-weight: 800;
  color: #10220f;
  transition: gap .25s ease, background-color .25s ease, transform .25s ease;
}

.partner-pledge-link:hover {
  gap: 13px;
  background: #9cf03a;
  transform: translateY(-2px);
}

.partner-pledge-link i {
  font-size: 11px;
}

/* ---------------------------------------------------------
   Grand écran : la carte remplit la hauteur restante
--------------------------------------------------------- */
/* ---------------------------------------------------------
   Grand écran : la carte doit tenir dans la hauteur restante.

   Mesuré : la colonne gauche fait 1036px, la carte « plateforme »
   455px — il reste donc environ 453px. Sans ce resserrement la
   déclaration en réclamait 570 et faisait dépasser la colonne
   droite de 116px, ce qui ne faisait que déplacer le vide.
--------------------------------------------------------- */
@media (min-width: 1025px) {
  .testimonial-capture-column {
    display: flex;
    flex-direction: column;
  }

  .partner-pledge {
    flex: 1;
    gap: 10px;
    justify-content: center;
    padding: 20px;
  }

  .partner-pledge h3 {
    font-size: 1.16rem;
    line-height: 1.28;
  }

  .partner-pledge-text {
    font-size: .86rem;
    line-height: 1.5;
  }

  .partner-pledge-list {
    gap: 8px;
  }

  .partner-pledge-item {
    gap: 11px;
    padding: 8px 11px;
  }

  .partner-pledge-logo {
    width: 54px;
    height: 34px;
  }

  .partner-pledge-logo img {
    height: 19px;
  }

  .partner-pledge-copy small {
    font-size: 11px;
  }

  .partner-pledge-kicker {
    padding: 6px 12px;
    font-size: 10.5px;
  }

  .partner-pledge-link {
    min-height: 40px;
    padding: 9px 16px;
  }
}

/* Entre 1025 et 1299px la colonne est plus étroite : le texte enveloppe
   davantage et la carte redevenait plus haute que la colonne voisine
   (189px de décalage mesuré à 1180px). On y retire la ligne descriptive
   sous chaque partenaire — elle reste sur la page Découverte. */
@media (min-width: 1025px) and (max-width: 1299px) {
  .partner-pledge h3 {
    font-size: 1.05rem;
  }

  .partner-pledge-text {
    font-size: .83rem;
  }

  .partner-pledge-copy small {
    display: none;
  }

  .partner-pledge-item {
    padding: 7px 10px;
  }
}

@media (max-width: 400px) {
  .partner-pledge {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .partner-pledge-item {
    padding: 10px 11px;
    gap: 11px;
  }

  .partner-pledge-logo {
    width: 54px;
    height: 36px;
  }

  .partner-pledge-logo img {
    height: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-pledge-glow {
    animation: none !important;
  }

  .partner-pledge.is-visible .partner-pledge-item {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .partner-pledge-item:hover {
    transform: none !important;
  }
}

/* Filet de sécurité : sans JavaScript, les lignes restent visibles. */
.no-js .partner-pledge-item,
.partner-pledge.is-visible .partner-pledge-item {
  opacity: 1;
}

/* =========================================================
   V19 — BORD DROIT DU CARROUSEL

   La piste mesure 1368px dans une fenêtre de 867px : les
   vignettes étaient coupées net, sans arrondi ni indication
   qu'il restait du contenu à faire défiler.
========================================================= */
.tvs-viewport {
  /* Arrondi identique à celui des vignettes : la coupe suit la carte. */
  border-radius: 18px;
}

/* Dégradé de fondu sur le bord où il reste du contenu. Les classes
   at-start / at-end sont posées par testimonial-rail.js. */
.tvs-rail:not(.at-end) .tvs-viewport {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 54px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 54px), transparent 100%);
}

.tvs-rail:not(.at-start):not(.at-end) .tvs-viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 54px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 54px), transparent 100%);
}

.tvs-rail:not(.at-start).at-end .tvs-viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px);
  mask-image: linear-gradient(to right, transparent 0, #000 40px);
}

/* Sans débordement, aucun fondu : la carte doit rester entière. */
.tvs-rail.tvs-no-scroll .tvs-viewport {
  -webkit-mask-image: none;
  mask-image: none;
}


/* =========================================================
   V20 — ALIGNEMENT DES DEUX EN-TÊTES DE COLONNE (accueil)

   En deux colonnes, le titre de droite (« Découvrez notre
   plateforme ») passe sur deux lignes alors que celui de
   gauche tient sur une seule. Mesuré : la carte capture
   démarrait 29 à 35 px plus bas que la carte vidéo, à
   TOUTES les largeurs de 1051 à 1536 px.

   On réserve deux lignes de titre dans les deux colonnes.
   L'unité « lh » vaut une hauteur de ligne calculée, donc
   la réservation suit la taille de police (elle est en
   clamp()) et reste juste après traduction en malagasy,
   tant que le titre tient sur une ou deux lignes.
========================================================= */
@media (min-width: 1280px) {

  .testimonials-media-layout .testimonial-media-heading h3 {
    min-height: 2lh;
  }
}