/* 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;
}

/* ── TELEPHONE (<= 768 px) : PILULE FLOTTANTE ──
   Sous 768 px la barre se detache des bords : une pilule de verre depoli,
   flottant a 12 px du bas et des cotes. Le rendez-vous, discret, a gauche ;
   l'appel, en aplat fonce, prend le reste et vit (halo, combine qui fremit,
   point « disponible » qui clignote). Entre 769 et 1024 px, la barre pleine
   largeur ci-dessus ne change pas. */
@media (max-width: 768px) {
  [data-header] .cta-mobile-2 {
    /* Vert de statut : ne suit pas la charte, un « disponible » est vert
       (composants.md §4.1, couleur de sens). */
    --cta-mobile-2-dispo: #22c55e;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: color-mix(in srgb, var(--white) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
    border-radius: 999px;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.4);
    animation: ctaMobile2Entree 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  /* Meme specificite que l'affichage ci-dessus et posee apres lui : le menu
     ouvert efface toujours la pilule. */
  [data-header] [data-mobile-menu].is-active ~ .cta-mobile-2 {
    display: none;
  }

  body:has(.cta-mobile-2) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  [data-header] .cta-mobile-2 .cta-mobile-2__rdv,
  [data-header] .cta-mobile-2 .cta-mobile-2__appel {
    gap: 8px;
    height: 48px;
    min-height: 0;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background-color 0.2s ease;
  }
  [data-header] .cta-mobile-2 .cta-mobile-2__rdv:active,
  [data-header] .cta-mobile-2 .cta-mobile-2__appel:active {
    transform: scale(0.96);
  }

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

  /* Rendez-vous / devis : texte sur la pilule, sans aplat. */
  [data-header] .cta-mobile-2 .cta-mobile-2__rdv,
  [data-header] .cta-mobile-2 .cta-mobile-2__rdv:hover {
    flex: 0 0 auto;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--black);
    font-size: 14px;
  }
  [data-header] .cta-mobile-2 .cta-mobile-2__rdv:active {
    background: color-mix(in srgb, var(--black) 6%, transparent);
  }
  /* Sans telephone, le rendez-vous est seul : il occupe la pilule. */
  [data-header] .cta-mobile-2.cta-mobile-2--seul .cta-mobile-2__rdv {
    flex: 1 1 auto;
  }

  /* Appel : l'action principale, en aplat fonce de la charte. */
  [data-header] .cta-mobile-2 .cta-mobile-2__appel,
  [data-header] .cta-mobile-2 .cta-mobile-2__appel:hover {
    position: relative;
    flex: 1 1 auto;
    margin-left: auto;
    padding: 0 22px;
    border: 0;
    background: var(--primary);
    color: var(--on-primary);
    animation: ctaMobile2Halo 2.4s ease-out infinite;
  }
  [data-header] .cta-mobile-2 .cta-mobile-2__appel:focus-visible {
    outline-color: var(--primary);
  }

  [data-header] .cta-mobile-2 .cta-mobile-2__appel svg {
    transform-origin: 50% 50%;
    animation: ctaMobile2Fremit 4s ease-in-out infinite;
  }

  /* Le libelle porte le point : il ne coupe plus (le halo du point deborde). */
  [data-header] .cta-mobile-2 .cta-mobile-2__appel .cta-mobile-2__libelle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
    color: inherit;
  }
  [data-header] .cta-mobile-2 .cta-mobile-2__appel .cta-mobile-2__libelle::before {
    content: "";
    display: block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cta-mobile-2-dispo);
    animation: ctaMobile2Dispo 1.4s ease-in-out infinite;
  }
}

/* Aucun keyframe du plugin ne fait la meme chose : ils sont tous propres a
   leur variante (§5 etape 5), d'ou ces quatre-ci, prefixes. */
@keyframes ctaMobile2Entree {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ctaMobile2Halo {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 0%, transparent);
  }
}
@keyframes ctaMobile2Fremit {
  0%,
  82%,
  97%,
  100% {
    transform: rotate(0);
  }
  85% {
    transform: rotate(-14deg);
  }
  88% {
    transform: rotate(12deg);
  }
  91% {
    transform: rotate(-10deg);
  }
  94% {
    transform: rotate(6deg);
  }
}
@keyframes ctaMobile2Dispo {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta-mobile-2-dispo) 70%, transparent);
  }
  50% {
    opacity: 0.35;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cta-mobile-2-dispo) 0%, transparent);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  [data-header] .cta-mobile-2,
  [data-header] .cta-mobile-2 .cta-mobile-2__appel,
  [data-header] .cta-mobile-2 .cta-mobile-2__appel svg,
  [data-header] .cta-mobile-2 .cta-mobile-2__appel .cta-mobile-2__libelle::before {
    animation: none;
  }
}