/* Correctifs responsive, MOBILE UNIQUEMENT (≤ 640 px). Le rendu ordinateur n'est pas touché.
   Causes traitées :
   - .btn est en white-space: nowrap avec un grand espacement de lettres : un libellé long (« Lire les avis sur Tripadvisor »)
     dépasse l'écran sur les téléphones étroits ou quand la taille de texte du système est agrandie ;
   - les enfants d'une grille (.bo-reviews__box) ne peuvent pas rétrécir sous leur contenu (min-width: auto) ;
   - en-tête légèrement transparent : le titre qui passe dessous reste visible en fantôme ;
   - boutons flottants un peu gros par rapport à l'écran. */
@media (max-width: 640px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.35; }
  .bo-actions { width: 100%; justify-content: center; }
  .bo-actions .btn { padding: 16px 24px; letter-spacing: .18em; }

  .bo-reviews__box { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bo-reviews__box > * { min-width: 0; max-width: 100%; }
  .bo-score { width: 100%; max-width: 340px; padding: 22px 20px; gap: 4px 14px; border-radius: 24px; }
  .bo-lead { font-size: 1.02rem; line-height: 1.65; max-width: 34ch; }

  /* l'en-tête devient opaque quand la page défile : plus de texte fantôme derrière le logo et le menu */
  .site-header.is-scrolled { background: rgb(21, 42, 37); }
  /* les ancres (liens vers #avis, #faq…) s'arrêtent sous l'en-tête et non dessous */
  [id] { scroll-margin-top: 96px; }

  .bo-fab { gap: 7px; }
  .bo-fab a, .bo-fab button { height: 38px; min-width: 38px; }
  .bo-fab svg { width: 18px; height: 18px; }
}

@media (max-width: 640px) {
  /* grilles : les blocs peuvent rétrécir sous la largeur de leur contenu (évite le débordement avec un texte agrandi) */
  .bo-wrap > * { min-width: 0; max-width: 100%; }
  .bo-steps li { padding: 18px 18px; gap: 14px; }
  .bo-steps span { min-width: 0; overflow-wrap: anywhere; }
}