/* CTA MOBILE 2 - BARRE D'ACTIONS : RENDEZ-VOUS + APPEL
   ---------------------------------------------------------------------------
   Sur mobile, l'essentiel tient en un pouce : prendre rendez-vous, appeler.
   La barre est collee au bas de l'ecran, toujours a portee, et s'efface quand
   le menu s'ouvre (le menu porte deja les deux actions).

   Pas de `.cta-mobile` ici : ce conteneur partage pose un bouton flottant en
   bas a droite, en `fit-content`. La barre est pleine largeur, elle a donc sa
   propre geometrie. Seul le seuil d'affichage (1024 px) est repris.

   PRIORITE (§4.12) : regles prefixees par `[data-header] .cta-mobile-2`. */

[data-header] .cta-mobile-2 {
  display: none;
}

@media (max-width: 1024px) {
  [data-header] .cta-mobile-2 {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    display: grid;
    /* Le rendez-vous prend la place qui reste, l'appel garde sa largeur utile :
       aucune des deux ne peut pousser l'autre hors de l'ecran. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    padding: 0.65rem clamp(0.9rem, 4vw, 1.5rem) calc(0.65rem + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
  }

  [data-header] .cta-mobile-2.cta-mobile-2--seul {
    grid-template-columns: 1fr;
  }

  /* La barre recouvre le bas de page : on rend au document la hauteur qu'elle
     occupe, sinon la derniere ligne du pied de page passe dessous. Seule regle
     qui sorte du composant, et elle ne vise que le <body> qui l'accueille. */
  body:has(.cta-mobile-2) {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Le menu ouvert porte deja les deux actions. */
  [data-header] [data-mobile-menu].is-active ~ .cta-mobile-2 {
    display: none;
  }
}

[data-header] .cta-mobile-2 .cta-mobile-2__rdv,
[data-header] .cta-mobile-2 .cta-mobile-2__appel {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.01em;
  min-width: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

[data-header] .cta-mobile-2 .cta-mobile-2__rdv,
[data-header] .cta-mobile-2 .cta-mobile-2__rdv:hover {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
}
[data-header] .cta-mobile-2 .cta-mobile-2__rdv:hover {
  background: var(--secondary);
  color: var(--on-secondary);
}
[data-header] .cta-mobile-2 .cta-mobile-2__rdv:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

[data-header] .cta-mobile-2 .cta-mobile-2__appel,
[data-header] .cta-mobile-2 .cta-mobile-2__appel:hover {
  border: 1px solid color-mix(in srgb, var(--black) 18%, transparent);
  background: var(--white);
  color: var(--black);
}
[data-header] .cta-mobile-2 .cta-mobile-2__appel:hover {
  border-color: var(--black);
}
[data-header] .cta-mobile-2 .cta-mobile-2__appel:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

[data-header] .cta-mobile-2 .cta-mobile-2__libelle {
  overflow: hidden;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-overflow: ellipsis;
}

[data-header] .cta-mobile-2 .cta-mobile-2__rdv svg,
[data-header] .cta-mobile-2 .cta-mobile-2__appel svg {
  flex: none;
  width: 18px;
  height: 18px;
}