/* ══════════════════════════════════════════════════════════════════════════
   wr-mobile.css — Renforcement responsive mobile

   Chargée EN DERNIER, cette feuille corrige de façon centralisée les points
   qui cassent sur petit écran, sans toucher au desktop :
     · protections anti-débordement horizontal globales
     · réduction des gros paddings de blocs sur mobile
     · cas particuliers (header/footer, cartes larges, hero, tableaux)

   Objectif : aucune page ne déborde horizontalement, tout reste lisible et
   tapable sur un écran de ~360 px.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Garde-fou global : rien ne dépasse la largeur de l'écran ──
   NB : on n'applique PAS `overflow-x:hidden` sur html/body — cela casserait
   `position:sticky` (sidebar, rail). On borne la largeur et on coupe les
   débordements au niveau des conteneurs plutôt que globalement. */
html, body { max-width: 100%; }

/* Coupe les débordements horizontaux au niveau du conteneur de contenu
   (pas du body, pour préserver position:sticky de la sidebar/rail). */
.wr-shell__main { overflow-x: hidden; }

/* Les médias ne débordent jamais leur conteneur. */
img, svg, video, canvas, iframe { max-width: 100%; }

/* Les mots très longs (URLs, emails, tokens) se coupent au lieu de pousser
   la largeur de la page. */
p, li, dd, dt, span, a, h1, h2, h3, h4, blockquote, td, th {
  overflow-wrap: break-word;
}

/* ════════════════════════════════════════════════════════════════════════
   ≤ 768 px — tablettes en portrait et téléphones
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header & footer : ne pas coller aux bords. */
  .wr-header .wr-container,
  .wr-footer .wr-container { padding-inline: 20px; }

  /* Cartes d'auth larges : padding raisonnable. */
  .wr-auth__card--wide { padding: 32px 24px; }

  /* Tableaux éventuels : défilement horizontal plutôt que débordement. */
  .wr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ════════════════════════════════════════════════════════════════════════
   ≤ 600 px — téléphones
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Blocs à fort padding : on récupère de l'espace utile. */
  .wr-how,
  .wr-final,
  .wr-promo,
  .wr-cta-band,
  .wr-city-pricing,
  .wr-city-cta { padding-left: 22px; padding-right: 22px; }

  /* Titres géants : bornés pour ne jamais déborder. */
  .wr-hero__title,
  .wr-page-head__title { font-size: clamp(28px, 8vw, 40px); }

  /* Boutons pleine largeur quand ils sont seuls dans une pile. */
  .wr-hero__cta .wr-btn,
  .wr-final .wr-btn { width: 100%; text-align: center; justify-content: center; }

  /* Les rangées d'actions passent en colonne. */
  .wr-hero__cta,
  .wr-final__actions { flex-direction: column; align-items: stretch; }

  /* Chips/filtres : ne pas forcer une largeur, se replier. */
  .wr-hero-search__pills,
  .wr-hero-search__chips,
  .wr-filters__chips { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════════════════
   ≤ 400 px — petits téléphones
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  /* Padding des conteneurs encore réduit. */
  .wr-container { padding-inline: 16px; }

  /* Cartes génériques : padding compact. */
  .wr-card__body { padding: 18px 16px; }

  /* Stats/KPI en une seule colonne. */
  .wr-stats,
  .wr-kpis { grid-template-columns: 1fr; }
}