/* =========================================================================
   PRODUCTION STYLESHEET
   Section : Carrousel d'avis clients
   Phase 6 - Production Optimization & Code Quality

   Ce fichier remplace les quatre fichiers des phases précédentes
   (layout.css, design.css, responsive.css, motion.css). Ils ont rempli
   leur rôle pédagogique (isoler géométrie / direction artistique /
   adaptation / mouvement à chaque étape) mais leur empilement produisait,
   une fois le projet terminé, une dette technique concrète :

     - 4 requêtes HTTP au lieu d'une ;
     - une chaîne de surcharge de variables (--tmp-color-* redéfini 3 fois
       à des endroits différents) difficile à tracer pour un nouveau
       développeur ;
     - des déclarations "transition" répétées et réécrites d'un fichier à
       l'autre pour la même règle.

   Le rendu final reste rigoureusement identique : ce fichier ne modifie
   ni la disposition, ni le design, ni les animations validés. Il se
   contente de fusionner et de nommer définitivement ce qui portait encore
   des noms provisoires (--tmp-color-*).

   Sommaire :
     1. Design tokens (source unique de vérité)
     2. Reset
     3. Base
     4. Section & conteneur
     5. En-tête (badge, titre, note, contrôles)
     6. Liste & carrousel
     7. Carte témoignage
     8. Media queries (≤1024 / ≤768 / ≤480 / ≥1600)
     9. Animations d'entrée
     10. Accessibilité - prefers-reduced-motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   Toutes les valeurs réutilisées ailleurs dans le fichier sont déclarées
   ici une seule fois. Les tailles et espacements sont directement fluides
   (clamp) : il n'existe plus de valeur fixe redéfinie plus loin par une
   valeur fluide, comme c'était le cas dans l'empilement des phases 2 → 4.
   ------------------------------------------------------------------------- */

.testimonials {
  /* - Couleurs - */
  --color-brand-green-strong: color-mix(in srgb, var(--color-forest) 80%, black);
  --color-text-body: color-mix(in srgb, var(--color-ink) 82%, var(--color-cream));
  --color-text-muted: color-mix(in srgb, var(--color-ink) 60%, var(--color-cream));
  --color-border: color-mix(in srgb, var(--color-forest) 45%, var(--color-cream));

  /* - Typographie - */

  --text-badge: clamp(0.6875rem, 0.62rem + 0.25vw, 0.8125rem);
  --text-heading: clamp(1.75rem, 1.1rem + 3vw, 3rem);
  --text-rating: clamp(0.9375rem, 0.86rem + 0.3vw, 1.0625rem);
  --text-card-title: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-body: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);

  /* - Espacements (fluides) - */
  --container-max-width: 1280px;
  --container-padding-inline: clamp(16px, 4vw, 24px);
  --space-section-y: clamp(48px, 5vw + 24px, 96px);
  --space-header-to-list: clamp(32px, 3vw + 20px, 64px);
  --space-badge-to-title: clamp(14px, 1.5vw + 8px, 24px);
  --space-title-to-rating: clamp(10px, 1vw + 6px, 16px);
  --space-card-gap: clamp(16px, 2vw + 6px, 32px);
  --space-card-padding: clamp(24px, 2.5vw + 12px, 40px);
  --card-min-width: 280px;

  /* - Contrôles - */

  /* - Ombres - */
  --shadow-card-hover: 0 4px 12px rgba(18, 38, 32, 0.08);

  /* - Mouvement - */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-hover: 180ms;
  --duration-state: 250ms;
  --duration-enter: 500ms;
}

/* Très grand écran : la composition respire davantage plutôt que
   d'étirer indéfiniment les lignes de texte. */
@media (min-width: 1600px) {
  .testimonials {
    --container-max-width: 1400px;
    --space-card-gap: 40px;
  }
}

/* -------------------------------------------------------------------------
   2-3. RESET & BASE
   (reset commun, body : voir css/global/reset.css et base.css ;
   ce fichier ne garde que ce qui est spécifique à la section)
   ------------------------------------------------------------------------- */

/* Indicateur de focus unique et cohérent pour tous les éléments
   interactifs de la section (boutons, lien produit, liste défilable). */
.testimonial-card__product:focus-visible,
.testimonials__list:focus-visible {
  outline: 2px solid var(--color-ember);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   4. SECTION & CONTENEUR
   ------------------------------------------------------------------------- */

.testimonials {
  background-color: var(--color-cream);
  padding-block: var(--space-section-y);
}

.testimonials__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);

  display: flex;
  flex-direction: column;
  gap: var(--space-header-to-list);
}

/* -------------------------------------------------------------------------
   5. EN-TÊTE (badge, titre, note, contrôles)
   Composition : un bloc de texte centré par rapport au conteneur. Les
   flèches de navigation ont été retirées : le carrousel se parcourt au
   balayage (mobile/tablette) et au clavier (liste focusable).
   ------------------------------------------------------------------------- */

.testimonials__header {
  position: relative;
  display: flex;
  justify-content: center;
}

.testimonials__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
}

.testimonials__badge {
  display: inline-flex;
  align-items: center;

  padding: clamp(8px, 0.6vw + 6px, 10px) clamp(16px, 2vw + 8px, 24px);
  border-radius: var(--r-badge);
  background-color: var(--color-ember);
  color: var(--color-paper);

  font-family: var(--font-sans);
  font-size: var(--text-badge);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;

  margin-bottom: var(--space-badge-to-title);
}

.testimonials__title {
  margin-bottom: var(--space-title-to-rating);

  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-heading);
  line-height: 1.15;
  color: var(--color-forest);
}

.testimonials__rating {
  display: flex;
  align-items: center;
  gap: 8px;

  font-family: var(--font-sans);
  font-size: var(--text-rating);
  font-weight: 600;
  flex-wrap: wrap;
  justify-content: center;
}

.testimonials__rating[hidden] { display: none; }

/* Phrase de transparence sous le titre. */
.testimonials__transparency {
  margin-bottom: var(--space-title-to-rating);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.testimonials__noscript {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  text-align: center;
  color: var(--color-text-muted);
}

.testimonials__rating-stars,
.testimonials__rating-score {
  color: var(--color-ember);
}

.testimonials__rating-stars {
  letter-spacing: 2px;
}

/* -------------------------------------------------------------------------
   6. LISTE & CARROUSEL
   Desktop/laptop (> 1024px) : rangée flex classique, 3 cartes à poids
   égal. En dessous (voir §8), la liste devient un carrousel à défilement
   tactile avec ancrage (scroll-snap).
   ------------------------------------------------------------------------- */

.testimonials__list {
  display: flex;
  align-items: stretch; /* les cartes partagent la même hauteur : le
                            footer de chaque carte reste aligné quelle
                            que soit la longueur du texte de l'avis. */
  flex-wrap: wrap;
  justify-content: center; /* dernière rangée incomplète : cartes centrées */
  gap: var(--space-card-gap);
}

.testimonials__list:empty { display: none; }

/* > 1024px : grille de 3 colonnes (9 avis = 3 rangées) ; en dessous, carrousel (voir §8). */
.testimonials__item {
  flex: 0 0 calc((100% - 2 * var(--space-card-gap)) / 3);
  min-width: var(--card-min-width);
  display: flex; /* transmet la hauteur à l'article qu'il contient */
}

/* -------------------------------------------------------------------------
   7. CARTE TÉMOIGNAGE
   ------------------------------------------------------------------------- */

.testimonial-card {
  position: relative; /* contient les éléments .visually-hidden : sans cela ils échappent au défilement du carrousel */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  padding: var(--space-card-padding);
  border-radius: var(--r-card);
  background-color: var(--color-paper);
  box-shadow: var(--shadow-card);

  transition: box-shadow var(--duration-state) var(--ease-standard);
}

/* La carte reste immobile : seules les étoiles réagissent (léger étirement). */
.testimonials__item:hover .testimonial-card,
.testimonials__item:focus-within .testimonial-card {
  box-shadow: var(--shadow-card-hover);
}

.testimonial-card__stars {
  display: inline-block;
  transition: letter-spacing var(--duration-state) var(--ease-standard);
}

.testimonials__item:hover .testimonial-card__stars,
.testimonials__item:focus-within .testimonial-card__stars {
  letter-spacing: 5px;
}

.testimonial-card__rating {
  margin-bottom: var(--space-badge-to-title);
  color: var(--color-ember);
}

.testimonial-card__stars {
  letter-spacing: 2px;
  font-size: 0.9375rem;
}

.testimonial-card__title {
  margin-bottom: var(--space-title-to-rating);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-card-title);
  color: var(--color-ink);
}

.testimonial-card__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-body);
}

.testimonial-card__text:not(.is-expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.testimonial-card__more {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.testimonial-card__more[hidden] { display: none; }

.testimonial-card__more:hover { color: var(--color-brand-green-strong); }

.testimonial-card__more:focus-visible {
  outline: 2px solid var(--color-ember);
  outline-offset: 2px;
}

.testimonial-card__reply {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.testimonial-card__reply-label {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-body);
}

.testimonial-card__meta {
  margin-top: auto; /* pousse le pied de carte vers le bas */
  padding-top: var(--space-card-gap);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.testimonial-card__author {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

.testimonial-card__product {
  align-self: flex-start;
  position: relative;
  /* Zone tactile >= 44 px de haut sans changer le rythme vertical :
     le padding agrandit la zone, les marges négatives compensent. */
  padding-block: 8px 16px;
  margin-block: -8px -14px;

  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-forest);
  text-decoration: none;

  transition: color var(--duration-hover) var(--ease-standard);
}

.testimonial-card__product::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 14px;
  width: 100%;
  height: 1px;
  background-color: currentColor;

  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--duration-hover) var(--ease-standard);
}

.testimonial-card__product:hover,
.testimonial-card__product:focus-visible {
  color: var(--color-brand-green-strong);
}

.testimonial-card__product:hover::after,
.testimonial-card__product:focus-visible::after {
  transform: scaleX(1.04) translateY(1px);
}

/* Bandeau d'appel discret sous le carrousel : texte + « Donner mon avis » / « Voir tous les avis ». */
.testimonials__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  margin-top: 32px;
  padding-block: 20px;
  border-block: 1px solid var(--color-border);
}

.testimonials__cta-text { margin: 0; text-align: center; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--color-text-muted); }
.testimonials__cta-text strong { color: var(--color-text, inherit); }

.testimonials__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.testimonials__actions .button { padding-inline: 28px; }

/* -------------------------------------------------------------------------
   8. MEDIA QUERIES
   ------------------------------------------------------------------------- */

/* ≤ 1024px - Petit laptop & tablettes : 3 cartes à poids égal deviennent
   trop étroites pour rester confortables. La liste devient un carrousel
   à défilement horizontal ancré (scroll-snap), 2 cartes visibles + un
   aperçu de la 3ᵉ pour inviter au balayage. */
@media (max-width: 1024px) {
  .testimonials__list {
    flex-wrap: nowrap;
    justify-content: flex-start; /* le centrage de la grille rendrait les premières cartes inaccessibles */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--container-padding-inline);

    padding-bottom: 4px;
    margin-bottom: -4px;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .testimonials__list::-webkit-scrollbar {
    display: none;
  }

  .testimonials__item {
    flex: 0 0 auto;
    width: clamp(320px, 58vw, 440px);
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* ≤ 768px - Tablette : en-tête empilé et centré. */
@media (max-width: 768px) {
  .testimonials__header {
    position: static;
    flex-direction: column;
    align-items: center;
    gap: var(--space-title-to-rating);
  }


  .testimonials__item {
    width: clamp(260px, 78vw, 400px);
  }
}

/* ≤ 480px - Smartphones : une carte occupe la quasi-totalité de la
   largeur, avec un aperçu de la suivante. Grand smartphone, standard et
   petit smartphone partagent cette logique ; seules les valeurs fluides
   ci-dessus varient déjà en continu entre ces tailles. */
@media (max-width: 480px) {
  .testimonials__item {
    width: 86vw;
  }

}

/* -------------------------------------------------------------------------
   9. ANIMATIONS D'ENTRÉE
   État initial masqué uniquement lorsque JavaScript est actif (classe
   .js posée sur <html> par testimonials-carousel.js avant le rendu) :
   sans JavaScript, le contenu reste visible par défaut.
   ------------------------------------------------------------------------- */

.js .testimonials__intro,
.js .testimonials__item,
.js .testimonials__actions {
  opacity: 0;
  transform: translateY(20px);
}

.js .testimonials.is-visible .testimonials__intro,
.js .testimonials.is-visible .testimonials__item,
.js .testimonials.is-visible .testimonials__actions {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--duration-enter) var(--ease-out),
    transform var(--duration-enter) var(--ease-out);
}

/* Stagger : chaque carte apparaît légèrement après la précédente, dans
   le sens de lecture. */
.js .testimonials.is-visible .testimonials__item:nth-child(1) { transition-delay: 120ms; }
.js .testimonials.is-visible .testimonials__item:nth-child(2) { transition-delay: 200ms; }
.js .testimonials.is-visible .testimonials__item:nth-child(n+3) { transition-delay: 280ms; }
.js .testimonials.is-visible .testimonials__actions { transition-delay: 320ms; }

/* -------------------------------------------------------------------------
   10. ACCESSIBILITÉ - prefers-reduced-motion
   Neutralise toute translation/échelle ; conserve uniquement les
   transitions de couleur. Le contenu reste immédiatement visible.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .testimonials__intro,
  .js .testimonials__item,
  .js .testimonials__actions {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .testimonial-card,
  .testimonial-card__product::after {
    transition-duration: 1ms;
  }

  .testimonials__item:hover .testimonial-card,
  .testimonials__item:focus-within .testimonial-card {
    transform: none;
  }
}