/* =====================================================================
   WS COMPONENT — TESTIMONIAL QUOTE
   =====================================================================

   Composant :
   - Bloc témoignage avec étoiles + citation + signature

   Usage :
   - Avis client
   - Citation inspirante
   - Bloc de réassurance élégant
   - Hero / section / colonne Gutenberg

   Structure HTML attendue :
   <div class="ws-testimonial">
     <div class="ws-testimonial__stars" aria-label="5 étoiles">
       <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
     </div>
     <blockquote class="ws-testimonial__quote">
       Votre citation...
     </blockquote>
     <p class="ws-testimonial__author">— Nom</p>
   </div>

   Philosophie :
   - Composant autonome
   - Variables CSS pour personnalisation rapide
   - Style doux, éditorial, facile à réutiliser
   ===================================================================== */

.ws-testimonial{
  --ws-testimonial-max-width: 560px;
  --ws-testimonial-padding: 1em 1.5em;
  --ws-testimonial-bg: rgba(255, 255, 255, 0.2);
  --ws-testimonial-radius: 0px;
  --ws-testimonial-text: #043a57;
  --ws-testimonial-star: #d7ad2f;
  --ws-testimonial-quote-size: 1rem;
  --ws-testimonial-author-size: 0.8rem;
  --ws-testimonial-line-height: 1.8;
  --ws-testimonial-stars-size: 1.5rem;
  --ws-testimonial-stars-gap: 0.8rem;
  --ws-testimonial-space-1: 0 0 14px 0;
  --ws-testimonial-space-2: 0 0 10px 0;
  --ws-testimonial-font-quote: "dum1", "Palatino Linotype", "Book Antiqua", serif;
  --ws-testimonial-font-author: "dum1", "Palatino Linotype", "Book Antiqua", serif;

  max-width: var(--ws-testimonial-max-width);
  margin: 0 auto;
  margin-top: 70px;
  padding: var(--ws-testimonial-padding);
  background: var(--ws-testimonial-bg);
  border-radius: var(--ws-testimonial-radius);
  text-align: center;
  color: var(--ws-testimonial-text);
  box-sizing: border-box;
}

/* Étoiles */
.ws-testimonial__stars{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ws-testimonial-stars-gap);
  margin: var(--ws-testimonial-space-1);
  line-height: 1;
}

.ws-testimonial__stars span{
  color: var(--ws-testimonial-star);
  font-size: var(--ws-testimonial-stars-size);
  display: inline-block;
}

/* Citation */
.ws-testimonial__quote{
  position: relative;
  margin: var(--ws-testimonial-space-2);
  padding: 0 2.5em;
  border: 0;
  font-family: var(--ws-testimonial-font-quote);
  font-size: var(--ws-testimonial-quote-size);
  line-height: var(--ws-testimonial-line-height);
  font-style: italic;
  font-weight: 400;
  text-wrap: pretty;
  letter-spacing: 0.4px;
  text-align: justify;
}

/* Guillemet gauche */
.ws-testimonial__quote::before{
  content: "❝";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 3.5em;
  line-height: 0.2;
  opacity: 0.7;
}

/* Guillemet droit */
.ws-testimonial__quote::after{
  content: "❞";
  position: absolute;
  right:0.8rem;
  bottom: -0.8rem;
  font-size: 3.5em;
  line-height: 0.2;
  opacity: 0.7;
}

/* Signature */
.ws-testimonial__author{
  margin: 0;
  font-family: var(--ws-testimonial-font-author);
  font-size: var(--ws-testimonial-author-size);
  line-height: 1.4;
  font-style: normal;
  font-weight: 400;
}

/* Variante plus compacte */
.ws-testimonial--sm{
  --ws-testimonial-padding: 22px 18px;
  --ws-testimonial-quote-size: 17px;
  --ws-testimonial-author-size: 16px;
  --ws-testimonial-stars-size: 14px;
}

/* Variante plus grande */
.ws-testimonial--lg{
  --ws-testimonial-padding: 36px 30px;
  --ws-testimonial-quote-size: 24px;
  --ws-testimonial-author-size: 21px;
  --ws-testimonial-stars-size: 18px;
}

/* Variante avec coins arrondis */
.ws-testimonial--rounded{
  --ws-testimonial-radius: 18px;
}

/* Variante sans fond */
.ws-testimonial--plain{
  --ws-testimonial-bg: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* =====================================================================
   TESTIMONIAL LINK
   ===================================================================== */

.ws-testimonial-link{
  display: block;
  text-decoration: none;
  color: inherit;
}


/* =====================================================================
   TESTIMONIAL
   ===================================================================== */

.ws-testimonial{
  cursor: pointer;
}


/* =====================================================================
   HEARTS / STARS HOVER ONLY
   ===================================================================== */

.ws-testimonial__stars{
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.ws-testimonial-link:hover .ws-testimonial__stars{
  transform: scale(1.12);
}