/* ==========================================================
   Flute Boxing — corrections responsive (mobile / tablette)
   Chargee en DERNIER sur toutes les pages publiques.
   ========================================================== */

/* ── Bases ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Garde-fou anti-debordement horizontal.
   `clip` (et non `hidden`) : `hidden` sur <body> transforme le body en
   conteneur de defilement, ce qui casse le repli de la barre d'adresse
   sur iOS et le calcul de hauteur du document. */
html, body {
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}
img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* ── Scroll : on rend le scroll au document sur mobile ──
   L'accueil enfermait toute la page dans un conteneur h-screen +
   overflow-y-auto. Sur telephone ca coupait le bas de page (100vh >
   zone visible sur iOS), empechait la barre d'adresse de se replier
   et cassait le header sticky ainsi que les effets au scroll. */
@media (max-width: 1023px) {
  .page-shell {
    display: block !important;
    height: auto !important;
  }
  .page-main {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* ── Filet de securite ── */
/* Aucun element du tiroir mobile ne doit rester invisible une fois ouvert,
   quelle que soit sa position dans la liste. */
.mobile-menu.open > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Confort tactile ── */
@media (max-width: 1024px) {
  a, button, summary, .btn {
    -webkit-tap-highlight-color: rgba(254, 140, 227, 0.25);
  }
  summary { min-height: 44px; }
  .site-header .btn-toggle,
  .btn-burger { touch-action: manipulation; }
}

/* ══════════════ ACCUEIL ══════════════ */
@media (max-width: 767px) {
  /* Hero : py-40 (=10rem haut et bas) etait enorme sur telephone */
  [data-hero-parallax-container] {
    padding: 4.5rem 1.25rem 3.5rem !important;
  }
  .plute-title { font-size: 3rem !important; }

  /* Titres Tailwind : on redescend d'un cran */
  .text-4xl { font-size: 2rem  !important; line-height: 1.12 !important; }
  .text-3xl { font-size: 1.65rem !important; line-height: 1.18 !important; }

  /* Interlettrage des sur-titres en capitales : evite le debordement */
  [class*="tracking-["] { letter-spacing: 0.14em !important; }

  /* Cartes « Comment ca marche » */
  .rounded-3xl.p-8  { padding: 1.35rem !important; }
  .rounded-3xl.p-10 { padding: 1.35rem !important; }
  .rounded-2xl.p-5  { padding: 1rem !important; }
  .gap-8 { gap: 1.25rem !important; }
  details summary.px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  details .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  details .ml-12 { margin-left: 0 !important; }

  /* Badge « +5 ans d'experience » : autorise le retour a la ligne */
  .inline-flex.items-center.gap-3.rounded-full {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.35rem;
  }

  /* Bouton hero pleine largeur : cible beaucoup plus facile au doigt */
  .group > a.h-14 {
    width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: 1.05rem !important;
  }
  .relative.inline-block.group { width: 100%; }

  /* Pastilles de stats : libelle un peu plus gros mais MOINS espace,
     donc au final plus lisible ET moins large qu'avant. */
  .sw-pill { padding: 0.55rem 0.85rem !important; }
  .sw-pill .pw-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.3 !important;
    white-space: nowrap;
  }
  .sw-pill .pw-num { font-size: 1.05rem !important; }
  .sw-pill-2 { right: 2px !important; }
  .sw-pill-4 { left: 2px !important; }

  /* Transporteurs */
  .carriers-grid { gap: 0.6rem; padding: 0 1rem; }
  .carrier-pill { font-size: 0.82rem; padding: 0.4rem 0.9rem 0.4rem 0.4rem; }
  .carrier-pill img { width: 24px; height: 24px; }
}

@media (max-width: 639px) {
  /* borne a 639px : au-dela, le palier Tailwind sm: reprend la main */
  .text-5xl { font-size: 2.5rem !important; line-height: 1.08 !important; }
}

@media (max-width: 430px) {
  .plute-title { font-size: 2.6rem !important; }
  .text-5xl { font-size: 2.15rem !important; }
}

@media (max-width: 360px) {
  .plute-title { font-size: 2.3rem !important; }
  .text-5xl { font-size: 1.95rem !important; }
}

/* ══════════════ COMMANDER ══════════════ */
@media (max-width: 560px) {
  /* Champs empiles : deux inputs cote a cote deviennent illisibles */
  .wrap .row > * { min-width: 100% !important; }
  .cta-bar { padding: 0.85rem 1rem; font-size: 0.9rem; }
  .cta-bar a { margin-left: 0; margin-top: 0.5rem; }
}

/* ══════════════ TARIFS / COMMUNAUTE ══════════════ */
@media (max-width: 1024px) {
  .carriers { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .method-row { font-size: 0.82rem; gap: 0.5rem; }
  .method-name { min-width: 0; }
  .tarifs-footer, .commu-grid { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Respect de la preference « moins d'animations » ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}