/* ============================================================
   TULIPE PALETTES - ÉCHELLE TYPOGRAPHIQUE, RAYONS, BOUTONS
   Couche d'harmonisation (chargée après rhythm.css). Corrige les
   tailles hétérogènes héritées des feuilles de section (dont
   beaucoup exprimées en rem, or 1rem = 12px sur ce site) :
   texte courant 16px, secondaire 14px, plus aucun texte < 13px.
   ============================================================ */

/* --- 1. Rayons : voir css/global/tokens.css (--r-*). Chaque composant les lit
   directement ; plus de rustine ici. --- */

/* --- 2. Boutons : même hauteur, même corps de texte --- */
body .button,
body .product-card__button,
body .winter-cta__button {
  min-height: var(--btn-height);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
}
body .product-card__button { min-height: var(--btn-height); }

/* --- 3. Texte courant & chapeaux --- */
body .hero__description,
body .brand-story__paragraph,
body .winter-cta__description {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.6;
}
body .hero__description { max-width: 520px; }

body .testimonial-card__text,
body .faq__answer {
  font-size: var(--fs-base);
  line-height: 1.65;
}

/* --- 4. Titres de cartes --- */
body .category-card__title,
body .testimonial-card__title,
body .product-card__title { font-size: var(--fs-card-title); line-height: 1.3; }

/* --- 5. Texte secondaire (jamais sous 13px) --- */
body .product-card__category,
body .product-card__badge { font-size: var(--fs-xs); }
body .product-card__spec,
body .testimonial-card__author,
body .testimonial-card__product,
body .reassurance__subtitle,
body .stats-list__label,
body .brand-story__link,
body .featured-products__link { font-size: var(--fs-sm); }
body .testimonial-card__author { font-weight: 600; }
body .reassurance__title { font-size: var(--fs-base); }
body .brand-story__link { font-family: var(--font-sans); }

/* --- 6. Chiffres clés : plus lisibles, colonnes plus larges --- */
body .engagement__container { max-width: 960px; }
body .stats-list__value { font-size: clamp(32px, 2vw + 20px, 44px); }

/* --- 7. FAQ : densité et lisibilité --- */
body .faq__question { font-size: clamp(17px, 0.5vw + 13px, 20px); }
@media (min-width: 1024px) {
  body .faq__trigger { padding: 28px 36px; }
  body .faq__panel-inner { padding: 0 36px 32px; }
}

/* --- 8. Derniers textes trop petits --- */
body .hero__eyebrow,
body .testimonials__badge {
  font-size: var(--fs-xs);
  letter-spacing: var(--eyebrow-tracking);
}
body .info-badge__text,
body .testimonials__rating-score,

body .testimonials__rating-stars { font-size: var(--fs-base); }
body .testimonial-card__stars { font-size: var(--fs-sm); }
body .topbar__shipping-text--full,
body .topbar__shipping-text--short,
body .topbar__lang-code,
body .header__nav-utility-link,
body .site-footer__copyright,
body .site-footer__legal-note { font-size: var(--fs-xs); }

/* --- 9. Liens à flèche : soulignement continu ---------------------
   Cause du trait « coupé » : ces liens sont en flex (display: inline-flex
   + gap). Un text-decoration ne traverse ni l'espace (gap) ni l'élément
   flèche, qui est un item flex à part : le trait s'arrêtait donc au bout
   du texte, avec un trou avant la flèche. On dessine désormais le trait
   avec un border-bottom sur le lien lui-même : une seule ligne continue
   sous le texte, l'espace et la flèche. */
body .link-arrow,
body .link--arrow,
body .featured-products__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid currentColor;
  transition: color 200ms ease;
}
/* Au survol : le trait reste exactement à sa place (aucun écart texte ↔ soulignement).
   Seule la flèche bouge (translateX sur l'icône, voir produits-vedettes.css / storytelling.css). */
body .link-arrow:hover,
body .link-arrow:focus-visible,
body .link--arrow:hover,
body .link--arrow:focus-visible,
body .featured-products__link:hover,
body .featured-products__link:focus-visible {
  text-decoration: none;
}