/* ==========================================================================
   testimonial.css — .lba-testimonial

   Carte de temoignage, presentee dans un carrousel a deux cartes par vue (une
   seule sous 991px). Le defilement est assure par .lba-carousel en mode
   glissement ; ce fichier ne decrit que la carte et la pagination.

   ⚠️ PARTI PRIS STRUCTURANT : le texte du temoignage s'affiche EN ENTIER.
   Aucune hauteur figee, aucun `overflow: hidden` sur `.lba-testimonial__content`.
   Un cadre fige a 97px coupe en pleine phrase les deux tiers d'un temoignage de
   330px. Toutes les regles marquees « consequence du texte entier » plus bas
   decoulent de ce choix.

   Le composant ne depend d'aucune librairie de carrousel : la pagination a
   points est portee par `.lba-carousel__dot`.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Le carrousel
   --------------------------------------------------------------------------
   Largeur plafonnee a 1280px et centre.

   `align-items: stretch` : les cartes d'une meme vue prennent la hauteur de la
   plus haute. C'est la contrepartie directe du texte entier — sans quoi les
   deux cartes auraient des hauteurs differentes.
   -------------------------------------------------------------------------- */

.lba-testimonials {
  --lba-carousel-per-view: 2;

  max-width: 1280px;
  margin: 20px auto 0;
}

.lba-testimonials .lba-carousel__track {
  align-items: stretch;
}

/* Gouttiere : 72px de part et d'autre de chaque carte
   (36px <= 1400px, 20px <= 1200px).

   ⚠️ `align-items: stretch` annule le `center` que le mode glissement pose sur
   ses slides (carousel.css §4, ecrit pour centrer les logos dans le bandeau).
   Sans cette surcharge, les cartes gardent leur hauteur propre et flottent au
   centre de la vue : 644 px contre 347 px mesures, ecart tres visible des lors
   que le texte s'affiche en entier. */
.lba-testimonials .lba-carousel__slide {
  display: flex;
  align-items: stretch;
  padding: 2rem 72px;
}

@media screen and (max-width: 1400px) {
  .lba-testimonials .lba-carousel__slide {
    padding: 2rem 36px;
  }
}

@media screen and (max-width: 1200px) {
  .lba-testimonials .lba-carousel__slide {
    padding: 2rem 20px;
  }
}

/* Une carte par vue sous 991px. */
@media screen and (max-width: 991px) {
  .lba-testimonials {
    --lba-carousel-per-view: 1;
  }
}


/* --------------------------------------------------------------------------
   2. La carte
   --------------------------------------------------------------------------
   `min-height: 300px` fixe un plancher, pas un plafond : les cartes plus
   longues s'etendent librement.
   -------------------------------------------------------------------------- */

/* `justify-content: flex-start` et NON `space-between` — consequence du texte
   entier : les cartes d'une meme vue s'alignant sur la plus haute,
   `space-between` pousse les etoiles en pied de carte et ouvre un grand blanc
   entre le temoignage et la note sur la carte la plus courte. Ici la note reste
   sous le texte, et le blanc passe en bas de carte, ou il ne se remarque pas. */
.lba-testimonial {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 300px;
  padding: 30px;
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 3px 32px #4E4E4E29;
  text-align: center;
}


/* --------------------------------------------------------------------------
   3. En-tete : avatar + auteur
   --------------------------------------------------------------------------
   Aucun temoignage n'a d'image a ce jour : le rond gris reste vide. Il est
   conserve — c'est lui qui donne son equilibre a l'en-tete, et il accueillera
   une photo des qu'une sera fournie.
   -------------------------------------------------------------------------- */

.lba-testimonial__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
}

.lba-testimonial__avatar {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #CED4DA;
  overflow: hidden;
}

.lba-testimonial__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lba-testimonial__author {
  text-align: left;
}

.lba-testimonial__name {
  margin: 0 0 5px;
  color: var(--heading);
  font-size: 22px;
  font-weight: var(--lba-font-weight-bold);
  line-height: 24px;
}

.lba-testimonial__company {
  color: var(--text);
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   4. Le texte
   --------------------------------------------------------------------------
   ⛔ Ni `height` fixe ni `overflow: hidden` ici : c'est le parti pris annonce
   en en-tete — le texte s'affiche en entier.

   Pas de `flex-grow` non plus : il pousserait la note en pied de carte et
   ouvrirait un blanc sur les temoignages courts, une fois les hauteurs
   egalisees. La note suit donc le texte (voir §2).
   -------------------------------------------------------------------------- */

.lba-testimonial__content {
  margin: 1rem 0 0;
  text-align: left;
}

.lba-testimonial__content p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   5. La note
   --------------------------------------------------------------------------
   Cinq etoiles SVG inlinees, quatre pleines (valeur 4/5 pour les deux
   temoignages). Les etoiles sont ROUGES, couleur d'accent du site — et non
   dorees.

   L'etoile vide est le meme dessin en contour : les deux etats sont produits
   par `fill` / `stroke` sur un trace unique, ce qui evite d'embarquer deux
   fichiers pour une difference de remplissage.
   -------------------------------------------------------------------------- */

.lba-testimonial__rating {
  display: flex;
  gap: 4px;
  margin-top: 15px;
  text-align: left;
}

.lba-testimonial__rating svg {
  display: block;
  width: 24px;
  height: 22.826px;
  stroke: var(--primary-color);
  fill: none;
}

.lba-testimonial__rating svg.is-filled {
  fill: var(--primary-color);
}


/* --------------------------------------------------------------------------
   6. Pagination a points
   --------------------------------------------------------------------------
   Rond de 16px borde de 4px, reduit a la moitie au repos, a taille pleine et
   borde de rouge lorsqu'il est actif. Les boutons sont generes par
   carousel.js (§4).
   -------------------------------------------------------------------------- */

.lba-carousel__dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.lba-carousel__dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 4px solid #9B9B9B;
  border-radius: 50%;
  background: #9B9B9B;
  transform: scale(.5);
  transition: transform var(--lba-transition-fast),
              border-color var(--lba-transition-fast),
              background-color var(--lba-transition-fast);
  cursor: pointer;
}

.lba-carousel__dot.is-active {
  border-color: var(--primary-color);
  background: var(--white);
  transform: scale(1);
}


/* --------------------------------------------------------------------------
   7. Paliers
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {

  .lba-testimonial {
    padding: 20px;
  }

  .lba-testimonial__top {
    gap: 20px;
  }

  .lba-testimonial__avatar {
    width: 50px;
    height: 50px;
  }
}