/* ═══════════════════════════════════════════════════════════════════════════
   Jarvis — l'assistant d'orientation, en bulle flottante.

   Volontairement plus sobre que la version installée dans le logiciel du
   cabinet : là-bas il s'adresse au praticien, qui le connaît ; ici il s'adresse
   à un visiteur qui, parfois, ne va pas bien. Le ton reste chaleureux, la mise
   en forme reste calme.
   ═══════════════════════════════════════════════════════════════════════════ */

.jvs-lanceur {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    display: flex; align-items: center; gap: 9px;
    padding: 11px 17px 11px 13px; border-radius: 999px;
    background: var(--vert); color: #fff; font-weight: 640; font-size: .9rem;
    box-shadow: 0 4px 14px rgba(40,80,20,.28);
    transition: transform .14s, filter .14s;
}
.jvs-lanceur:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.jvs-lanceur .rond  {
    width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22);
    display: grid; place-items: center; font-size: .82rem; font-weight: 700;
    overflow: hidden; flex-shrink: 0;
}
/* Le portrait remplit le médaillon ; s'il ne charge pas, le script le retire
   et le monogramme retrouve sa place au centre. */
.jvs-lanceur .rond img, .jvs-tete .rond img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 560px) { .jvs-lanceur { right: 14px; bottom: 14px; } }

.jvs-fenetre {
    position: fixed; right: 20px; bottom: 20px; z-index: 61;
    width: min(376px, calc(100vw - 28px)); max-height: min(600px, calc(100vh - 40px));
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(20,40,20,.22), 0 2px 8px rgba(20,40,20,.10);
    display: flex; flex-direction: column;
}
@media (max-width: 560px) { .jvs-fenetre { right: 14px; bottom: 14px; } }

.jvs-tete {
    display: flex; align-items: center; gap: 11px; padding: 13px 15px;
    background: var(--vert); color: #fff; flex-shrink: 0;
}
.jvs-tete .rond {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22);
    display: grid; place-items: center; font-weight: 700; font-size: .88rem;
    overflow: hidden; flex-shrink: 0;
}
.jvs-tete .nom  { font-weight: 660; font-size: .95rem; }
.jvs-tete .sous { font-size: .76rem; opacity: .85; }
.jvs-tete .fermer {
    margin-left: auto; width: 30px; height: 30px; border-radius: 8px; color: #fff;
    display: grid; place-items: center; font-size: 1.15rem; opacity: .85;
}
.jvs-tete .fermer:hover { background: rgba(255,255,255,.18); opacity: 1; }

.jvs-fil {
    flex: 1; overflow-y: auto; padding: 15px; display: flex;
    flex-direction: column; gap: 10px; background: var(--fond);
}
.jvs-bulle {
    max-width: 86%; padding: 10px 13px; border-radius: 13px;
    font-size: .89rem; line-height: 1.5;
}
.jvs-bulle.lui  { background: #fff; border: 1px solid var(--trait); border-bottom-left-radius: 4px; }
.jvs-bulle.moi  { background: var(--vert); color: #fff; align-self: flex-end;
                  border-bottom-right-radius: 4px; }
.jvs-bulle b    { font-weight: 650; }
.jvs-bulle .mini{ display: block; font-size: .8rem; color: var(--gris); margin-top: 4px; }
.jvs-bulle.moi .mini { color: rgba(255,255,255,.8); }

/* Message d'urgence : le seul endroit où l'assistant hausse le ton. */
.jvs-bulle.alerte {
    background: #fdf1f0; border: 1px solid #eccfcc; color: #8e2a22; max-width: 100%;
}
.jvs-bulle.alerte .num {
    display: block; font-size: 1.5rem; font-weight: 700; margin: 6px 0 2px; letter-spacing: 1px;
}

.jvs-liste { display: flex; flex-wrap: wrap; gap: 7px; }
.jvs-puce {
    padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--trait);
    background: #fff; font-size: .84rem; font-weight: 600; color: var(--vert-fonce);
    transition: all .13s;
}
.jvs-puce:hover { border-color: var(--vert); background: var(--vert-pale); }

.jvs-action {
    display: flex; width: fit-content; align-items: center; gap: 7px; margin-top: 10px;
    padding: 9px 15px; border-radius: 9px; background: var(--vert); color: #fff;
    font-size: .86rem; font-weight: 640; text-decoration: none;
}
.jvs-action:hover { filter: brightness(1.08); }
.jvs-action.tel   { background: #fff; color: var(--vert-fonce); border: 1.5px solid var(--vert); }

.jvs-tarifs { margin: 6px 0 0; padding: 0; list-style: none; font-size: .87rem; }
.jvs-tarifs li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.jvs-tarifs li span:last-child { font-weight: 640; white-space: nowrap; }

/* Le détail des séances : une carte par séance, sa description telle que le
   cabinet l'a écrite, et son propre bouton de réservation. La séparation par
   un trait plutôt que par un cadre — quatre cadres dans une bulle de chat
   font un tableau, et on ne lit plus rien. */
.jvs-seances { margin: 8px 0 0; padding: 0; list-style: none; }
.jvs-seances li { padding: 9px 0; border-top: 1px solid var(--trait); }
.jvs-seances li:first-child { border-top: 0; padding-top: 4px; }
.jvs-seances .tete {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.jvs-seances .nom  { font-weight: 640; font-size: .88rem; }
.jvs-seances .meta { font-size: .8rem; color: var(--gris); white-space: nowrap; }
.jvs-seances .desc {
    font-size: .83rem; color: var(--gris); line-height: 1.45; margin-top: 3px;
}

.jvs-lieux { margin: 8px 0 0; padding: 0; list-style: none; }
.jvs-lieux li { padding: 7px 0; border-top: 1px solid var(--trait); }
.jvs-lieux li:first-child { border-top: 0; padding-top: 3px; }
.jvs-lieux .nom { display: block; font-weight: 640; font-size: .87rem; }
.jvs-lieux .adr { display: block; font-size: .82rem; color: var(--gris); margin-top: 2px; }

/* Discret à côté de .jvs-action : ces liens se répètent une fois par séance,
   et quatre boutons pleins dans une bulle donnent l'air d'une réclame. */
.jvs-mini-action {
    display: inline-block; margin-top: 6px; font-size: .82rem; font-weight: 640;
    color: var(--vert-fonce); text-decoration: none;
    border-bottom: 1.5px solid var(--trait);
}
.jvs-mini-action:hover { border-bottom-color: var(--vert); }
/* Deux actions par séance : « Réserver » d'abord, la lecture ensuite. La
   seconde est volontairement plus discrète — c'est un détour, pas le but. */
.jvs-seances .actions { display: flex; flex-wrap: wrap; gap: 14px; }
.jvs-mini-action.doux { color: var(--gris); }
.jvs-mini-action.doux:hover { color: var(--vert-fonce); }

.jvs-saisie {
    display: flex; gap: 8px; padding: 11px 12px; background: #fff;
    border-top: 1px solid var(--trait); flex-shrink: 0;
}
.jvs-saisie input {
    flex: 1; min-width: 0; padding: 9px 13px; border: 1.5px solid var(--trait);
    border-radius: 999px; font-size: .88rem;
}
.jvs-saisie input:focus { outline: none; border-color: var(--vert); }
.jvs-saisie button {
    width: 38px; height: 38px; border-radius: 50%; background: var(--vert); color: #fff;
    display: grid; place-items: center; font-size: 1rem; flex-shrink: 0;
}
.jvs-saisie button:disabled { opacity: .5; cursor: default; }

.jvs-pied {
    padding: 7px 15px 10px; background: #fff; font-size: .72rem; color: var(--gris-pale);
    text-align: center; flex-shrink: 0;
}

/* ─── La carte, par-dessus la page ───────────────────────────────────────
   Au-dessus de la conversation (61) et de tout le reste : une carte à
   moitié cachée derrière la fenêtre de chat n'aurait aucun intérêt. */
.jvs-carte-fond {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(20, 34, 20, .55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* `max-height: 100%` : la boîte ne peut pas dépasser la fenêtre, moins la
   marge du fond. C'est elle qui garantit que l'en-tête et le pied restent
   atteignables — pas la hauteur du cadre, qui ne fait que s'y plier. */
.jvs-carte-boite {
    background: #fff; border-radius: 14px; overflow: hidden;
    width: min(720px, 100%); max-height: 100%;
    display: flex; flex-direction: column;
    box-shadow: 0 16px 50px rgba(10, 25, 10, .35);
}
.jvs-carte-tete {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--vert); color: #fff; flex-shrink: 0;
}
.jvs-carte-tete .adr { font-size: .89rem; font-weight: 640; }
.jvs-carte-tete .fermer {
    margin-left: auto; width: 30px; height: 30px; border-radius: 8px; color: #fff;
    display: grid; place-items: center; font-size: 1.15rem; opacity: .85; flex-shrink: 0;
}
.jvs-carte-tete .fermer:hover { background: rgba(255,255,255,.18); opacity: 1; }

/* Le cadre prend la hauteur voulue, mais CÈDE quand la fenêtre est courte —
   `flex: 0 1 auto` avec `min-height: 0`. Un téléphone couché fait 300 px de
   haut : sans cette souplesse, le pied de la boîte — donc l'itinéraire —
   passait sous le bord de l'écran, et une carte de 220 px valait mieux qu'un
   bouton perdu. Vérifié à 300 px, 360 px et 812 px de hauteur. */
.jvs-carte-cadre {
    display: block; width: 100%; height: min(58vh, 420px);
    flex: 0 1 auto; min-height: 0;
    border: 0; background: var(--fond);
}
.jvs-carte-pied {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 9px 14px 12px; background: #fff; flex-shrink: 0;
}
.jvs-carte-pied .jvs-mini-action { margin-top: 0; }

@media (max-width: 560px) {
    .jvs-carte-fond  { padding: 10px; }
    .jvs-carte-cadre { height: 62vh; }
}
@media (prefers-reduced-motion: no-preference) {
    .jvs-carte-boite { animation: jvs-monte .16s ease-out; }
}
@keyframes jvs-monte { from { opacity: 0; transform: translateY(8px); } }

.jvs-pense { display: flex; gap: 4px; padding: 12px 14px; }
.jvs-pense i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--gris-pale);
    animation: jvs-saute 1.1s infinite;
}
.jvs-pense i:nth-child(2) { animation-delay: .16s; }
.jvs-pense i:nth-child(3) { animation-delay: .32s; }
@keyframes jvs-saute { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jvs-pense i { animation: none; opacity: .55; } }