/* Ajouts d'un EXEMPLE fictif (MAYN-1289) : feuille de Sally, docs/design/mayn-1289/mayna-sites-exemple.css,
   reprise telle quelle ; seul le symbole est servi par le site (mayna-symbole.svg). */
/* ==========================================================================
   MAYN-1289 — ce qui s'ajoute au modèle de site dans un EXEMPLE fictif :
   bandeau « Exemple », lien discret vers Mayna Pilot dans le pied de page,
   fin de la prise de rendez-vous, bouton « Appeler ».
   Le reste de l'exemple est le modèle de site existant (prototype,
   modele/site.mjs) ; la maquette n'en montre qu'un schéma.
   ========================================================================== */
.mx-bandeau { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 12px 0 18px; background: #071923; color: #fff; font: 400 14px/1.3 Manrope, system-ui, sans-serif; }
.mx-bandeau .g { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mx-bandeau .g i { width: 26px; height: 19px; flex: 0 0 26px; background: url(mayna-symbole.svg) center / contain no-repeat; }
.mx-bandeau .g b { font-weight: 600; white-space: nowrap; }
.mx-bandeau .g span { color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-bandeau a.mx-cta { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px; background: #ffbd55; color: #071923; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) {
  .mx-bandeau { height: 48px; padding: 0 8px 0 12px; font-size: 13px; }
  .mx-bandeau .g .pc { display: none; }
  .mx-bandeau a.mx-cta { min-height: 36px; padding: 0 14px; }
}

/* Pied de l'exemple : une ligne sobre, sous le pied du modèle. */
.mx-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 14px 24px; background: #0b0f0c; color: rgba(255,255,255,.55); font: 400 12.5px/1.5 Manrope, system-ui, sans-serif; }
.mx-pied a { color: rgba(255,255,255,.78); text-decoration: underline; text-underline-offset: 3px; }

/* Fin de la prise de rendez-vous dans un exemple : rien n'est envoyé. */
.mx-fin { text-align: center; padding: 22px 6px 6px; }
.mx-fin .pastille { display: inline-block; font: 600 12px/1 Manrope, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: #071923; color: #6de2d7; }
.mx-fin h3 { margin: 14px 0 8px; }
.mx-fin p { color: #58625a; max-width: 440px; margin: 0 auto; }
.mx-courriel { max-width: 400px; margin: 18px auto 0; text-align: left; border: 1px solid #e3e0d8; border-radius: 14px; background: #fff; padding: 12px 14px; font: 400 13.5px/1.5 Manrope, system-ui, sans-serif; box-shadow: 0 12px 30px -18px rgba(0,0,0,.35); }
.mx-courriel .de { color: #60717e; font-size: 12px; }
.mx-courriel b { display: block; color: #10212c; }
.mx-fin .mx-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.mx-fin .mx-actions a.mx-cta { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px; background: #ffbd55; color: #071923; font: 600 16px Manrope, system-ui, sans-serif; text-decoration: none; }
.mx-fin .mx-actions button { background: none; border: 0; color: #58625a; text-decoration: underline; font-size: 14px; cursor: pointer; }

/* « Appeler » dans un exemple : feuille du bas (téléphone) / bulle (ordinateur). */
.mx-voile { position: fixed; inset: 0; background: rgba(5,10,8,.55); z-index: 70; }
.mx-feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: #fff; border-radius: 22px 22px 0 0; padding: 10px 20px 26px; font: 400 15px/1.5 Manrope, system-ui, sans-serif; color: #10212c; }
.mx-feuille .poignee { width: 40px; height: 5px; border-radius: 3px; background: #d9dde2; margin: 0 auto 16px; }
.mx-feuille h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.mx-feuille p { margin: 0 0 16px; color: #60717e; }
.mx-feuille a.mx-cta { display: flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 999px; background: #ffbd55; color: #071923; font-weight: 600; text-decoration: none; }
.mx-feuille button { display: block; width: 100%; margin-top: 8px; min-height: 46px; background: none; border: 0; font: inherit; color: #60717e; }
@media (min-width: 641px) {
  .mx-voile { background: transparent; }
  .mx-feuille { left: auto; right: 24px; bottom: 96px; width: 340px; border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); padding: 18px 20px 14px; }
  .mx-feuille .poignee { display: none; }
}

/* Mise en place dans le modèle (Amelia) : bandeau au-dessus de l'entête fixe, feuille masquée par défaut. */
.mx-bandeau { position: fixed; left: 0; right: 0; }
.mx-bandeau .g span .pc { white-space: nowrap; }
.mx-voile[hidden], .mx-feuille[hidden] { display: none; }
.mx-feuille button { cursor: pointer; }
.mx-fin .mx-actions button { min-height: 44px; }
.mx-pied span:last-child { text-align: right; }
@media (max-width: 620px) { .mx-pied { padding-bottom: 96px; } .mx-pied span:last-child { text-align: left; } }