/* ===========================================
   ACTIONS MOBILE — boutons « Devis » / « Appeler » toujours à portée de pouce,
   sur toutes les pages commerciales : accueil, hubs particulier et
   professionnel, pages-ville, remise en état locative. Pas sur la page devis
   (c'est la destination), ni sur les pages légales et la 404.

   Conçu dans Claude Design le 06/10/2026 pour le trafic payant sur téléphone :
   avant, le premier écran mobile n'était que la photo, le premier bouton
   tombait sous le bandeau cookies, puis plus aucun bouton pendant ~6 écrans.
   L'en-tête compact (72 px) vit dans variables.css / navbar.css /
   breadcrumb.css : il vaut pour tout le site.

   À charger APRÈS les autres feuilles. Portée : < 768 px uniquement ;
   au-delà, les nouveaux blocs sont masqués et rien d'autre ne change.
   Une page qui charge cette feuille DOIT avoir les boutons du haut
   (.quick-actions--hero) : le bouton fantôme du hero y est masqué.

   Blocs :
     .quick-actions   paire Devis / Appeler (haut de page, rappels, barre)
     .proof-line      ligne d'avis Google (source unique : partials/preuve.mjs)
     .reminder        rappel d'action en fin de section
     .sticky-actions  barre fixe en bas d'écran (js/actions-mobile.js)
   =========================================== */

.quick-actions,
.proof-line,
.reminder,
.sticky-actions {
  display: none;
}

@media (max-width: 767.98px) {
  /* 1. Haut de page : texte et boutons d'abord, photo en dessous */
  .hero__image-wrapper { order: 1; }
  .hero__inner { padding: 30px 20px 28px; gap: 16px; }
  .hero__heading-group { gap: 6px; }
  .hero__location { font-size: 15px; line-height: 22px; }
  .hero__title { font-size: clamp(30px, 8.5vw, 34px); line-height: 1.12; }
  .hero__description { font-size: 15px; line-height: 1.5; }
  .hero__button { display: none; }
  .hero__trust { margin-top: -8px; }

  /* 2. Paire de boutons Devis / Appeler */
  .quick-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
  }
  .quick-actions__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 10px;
    border: 2px solid var(--color-text);
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  .quick-actions__btn--quote {
    background: var(--color-accent);
    color: var(--color-text);
    box-shadow: 4px 4px 0 var(--color-text);
  }
  .quick-actions__btn--quote:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 var(--color-text);
  }
  .quick-actions__btn--phone {
    background: var(--color-text);
    color: var(--color-white);
    padding-inline: 18px;
  }
  .quick-actions__btn--phone:active { opacity: .85; }
  .quick-actions__btn:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
  .quick-actions__btn--phone:focus-visible { outline-color: var(--color-accent); }

  /* 3. Ligne de preuve (avis Google) */
  .proof-line {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-text);
  }
  .proof-line strong { font-weight: 700; }

  /* 4. Rappels en fin de section */
  .reminder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }
  .engage .reminder { margin-top: 6px; }

  /* 5. Barre fixe : cachée en haut de page, visible dès que les boutons du
        haut sont sortis de l'écran (js/actions-mobile.js) */
  .sticky-actions {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80; /* sous le menu mobile (90) */
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
    border-top: 2px solid var(--color-text);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }
  .sticky-actions.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 200ms ease;
  }
  .quick-actions--bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
  .quick-actions--bar .quick-actions__btn { min-height: 48px; padding-inline: 10px; }
  .quick-actions--bar .quick-actions__btn--quote { box-shadow: none; }

  /* Espace sous le pied de page : la barre ne cache jamais le bas de page */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .sticky-actions,
  .sticky-actions.is-visible,
  .quick-actions__btn { transition: none; }
}