/* =========================================================================
   CCMESD — BANDE D'ANNONCE DÉFILANTE
   Placée tout en haut de chaque page, avant l'en-tête. Elle défile puis
   disparaît au scroll : visible dès l'arrivée, sans occuper l'écran ensuite.
   Rouge repris du logo CCMESD. La teinte dominante mesurée sur le fichier est
   #E01018 ; elle est légèrement assombrie en #C8101B pour porter du texte blanc
   avec de la marge : 5,92:1, au-delà du seuil AA de 4,5:1.
   ========================================================================= */
.annonce {
  position: relative;
  background: #C8101B;
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}

.annonce-piste {
  display: flex;
  width: max-content;
  animation: annonceDefile 38s linear infinite;
}
.annonce:hover .annonce-piste,
.annonce:focus-within .annonce-piste { animation-play-state: paused; }

.annonce-piste > span {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 11px var(--s5);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.annonce-piste b { font-weight: 700; }
.annonce-piste .sep { opacity: .55; padding-inline: var(--s2); }
.annonce-piste svg { flex-shrink: 0; }

.annonce a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  white-space: nowrap;
}
.annonce a:hover { color: #fff; text-decoration-thickness: 2.5px; }

@keyframes annonceDefile { to { transform: translateX(-50%); } }

/* Écrans étroits : moins de rembourrage, défilement plus rapide */
@media (max-width: 720px) {
  .annonce-piste > span { padding-inline: var(--s4); font-size: var(--fs-xs); }
  .annonce-piste { animation-duration: 26s; }
}

/* Mouvement réduit : le message reste, le défilement disparaît.
   La piste est repliée sur un seul exemplaire, centré. */
@media (prefers-reduced-motion: reduce) {
  .annonce-piste {
    animation: none !important;
    width: 100%;
    justify-content: center;
  }
  .annonce-piste > span:nth-child(n + 2) { display: none; }
  .annonce-piste > span { white-space: normal; text-align: center; }
}

/* =========================================================================
   CARTE « CONSEILLER WHATSAPP »
   La page intermédiaire de WhatsApp n'affiche ni photo ni nom : elle ne montre
   qu'un numéro. L'identité du correspondant est donc présentée ici, AVANT le
   clic, sur une page que nous maîtrisons.
   ========================================================================= */
.wa-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
  padding: var(--s5);
  border: 1px solid var(--border);
  border-left: 3px solid #1FA855;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.wa-card-photo {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  border: 2px solid #1FA855;
  background: var(--bg-sunken);
}
.wa-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.wa-card .k {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #158043;
}
.wa-card h3 { font-size: var(--fs-md); margin-block: 3px 2px; }
.wa-card p { font-size: var(--fs-sm); color: var(--text-muted); }
.wa-card .num {
  font-variant-numeric: tabular-nums; font-size: var(--fs-sm);
  color: var(--text-faint); margin-top: 2px;
}
.wa-card .btn { grid-column: 1 / -1; margin-top: var(--s2); }
@media (max-width: 420px) {
  .wa-card { grid-template-columns: 1fr; justify-items: start; }
}

/* =========================================================================
   BOUTON FLOTTANT WHATSAPP — pastille compacte
   L'ancienne pilule verte de ~200 px recouvrait le visuel de la page d'accueil.
   Ici : une pastille de 56 px portant le portrait du conseiller, qui ne se
   déplie au survol que sur les écrans où il y a la place.
   ========================================================================= */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 0;
  padding: 6px; border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 22px rgba(10, 24, 38, .18);
  text-decoration: none; color: var(--text);
  transition: gap .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo),
              border-color .3s var(--ease-out-expo);
}
.wa-fab:hover, .wa-fab:focus-visible {
  gap: var(--s3); color: var(--text);
  border-color: #1FA855;
  box-shadow: 0 10px 30px rgba(10, 24, 38, .24);
}

.wa-fab-av {
  position: relative; display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: #1FA855; color: #fff;
}
.wa-fab-av svg { width: 24px; height: 24px; }

/* Libellé replié par défaut : il ne prend aucune place tant qu'on ne survole pas */
.wa-fab-txt {
  display: grid; overflow: hidden; white-space: nowrap;
  max-width: 0; opacity: 0;
  transition: max-width .34s var(--ease-out-expo), opacity .24s var(--ease-out-expo),
              padding-right .34s var(--ease-out-expo);
}
.wa-fab:hover .wa-fab-txt, .wa-fab:focus-visible .wa-fab-txt {
  max-width: 200px; opacity: 1; padding-right: var(--s3);
}
.wa-fab-txt b { font-size: var(--fs-sm); font-weight: 650; line-height: 1.25; }

/* Le pouce couvre le bas de l'écran : on remonte le bouton sur mobile pour
   ne pas masquer le contenu ni les boutons de bas de page. */
@media (max-width: 720px) {
  .wa-fab { right: 14px; bottom: 14px; padding: 5px; }
  .wa-fab-av { width: 40px; height: 40px; }
  /* Pas de dépliement au toucher : il n'y a pas de survol. */
  .wa-fab:hover .wa-fab-txt, .wa-fab:focus-visible .wa-fab-txt { max-width: 0; opacity: 0; padding-right: 0; }
}

/* Pulsation discrète, portée par la pastille verte et non plus par tout le bouton */
.wa-fab::before { content: none; }
.wa-fab-av::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(31, 168, 85, .5);
  animation: waPulse 7s var(--ease-soft) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab-av::after { animation: none; }
  .wa-fab, .wa-fab-txt { transition: none; }
}