/* ============================================================
   « BESOIN D'AIDE ? » (retour client du 21/09/2026)
   Avant : sur téléphone, les boutons se rangeaient EN LIGNE hors de l'écran (x = 209 → 694 px sur 390 px) et leur
   texte se coupait sur 4 lignes (« Location / & billets / — / WhatsApp », numéros chiffre par chiffre).
   Maintenant : deux blocs (Location & billets / Colis & courriers), chacun avec un bouton WhatsApp et un bouton
   d'appel, une seule ligne par bouton, pleine largeur sur téléphone ; + un bouton flottant « Aide » (téléphone).
   ============================================================ */
.cta{gap:32px}
.cta-copy{flex:1 1 300px;min-width:0}
.cta-actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  flex:1 1 560px;min-width:0;margin-top:0;align-items:stretch;
}
.help-line{display:grid;gap:10px;padding:16px;border:1px solid #ffffff2e;border-radius:18px;background:#ffffff12;min-width:0}
.help-title{font-size:13px;font-weight:800;color:#ffffffe6}
.help-line .btn{width:100%;min-width:0;min-height:46px;padding:12px 14px;gap:10px;font-size:14px;line-height:1.2;white-space:nowrap}
.help-line .btn span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.help-line .ico{width:18px;height:18px;flex:none}
.cta-actions .agent-access-link{grid-column:1/-1;justify-self:end;margin-top:0}

@media (max-width:1024px){
  .cta{flex-direction:column;align-items:stretch;gap:22px;padding:40px clamp(20px,5vw,48px)}
  .cta-copy,.cta-actions{flex:0 0 auto}
}
@media (max-width:640px){
  .cta{padding:32px 16px 26px;text-align:center}
  .cta-copy h2{font-size:clamp(28px,8.4vw,36px);margin:10px 0}
  .cta-actions{grid-template-columns:1fr;gap:12px}
  .help-line{text-align:left;padding:14px}
  .help-line .btn{min-height:50px;font-size:15px}
  .cta-actions .agent-access-link{justify-self:center}
}

/* Bouton flottant « Aide » : accès direct depuis n'importe où sur la page (téléphone / tablette tactile). */
.aide-flottante{
  position:fixed;z-index:40;display:none;flex-direction:column;align-items:flex-end;gap:10px;
  right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));
  transition:opacity .2s,transform .2s;
}
@media (max-width:760px),(pointer:coarse){.aide-flottante{display:flex}}
.aide-flottante.is-hidden{opacity:0;transform:translateY(12px);pointer-events:none}
.aide-bouton{
  display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border:0;border-radius:999px;
  background:#25d366;color:#062f21;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 8px 22px #0000004d;
}
.aide-bouton .ico{width:22px;height:22px}
.aide-bouton:focus-visible{outline:3px solid #fff;outline-offset:2px}
.aide-panel{
  width:min(330px,calc(100vw - 28px));max-height:calc(100vh - 120px);overflow:auto;display:grid;gap:10px;
  padding:14px;border-radius:20px;background:#073f3e;color:#fff;box-shadow:0 18px 44px #0006;
}
.aide-panel[hidden]{display:none}
.aide-panel>strong{font-size:16px}
.aide-panel .help-line{padding:12px;background:#ffffff10}
.aide-panel .help-line .btn{min-height:46px;font-size:14px}
@media (orientation:landscape) and (max-height:520px){
  .aide-panel{grid-template-columns:1fr 1fr;width:min(640px,calc(100vw - 28px))}
  .aide-panel>strong{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.aide-flottante{transition:none}}
