/* Le PANNEAU du widget (tchat, rappel), côté page hôte (tunnel, espace client) — docs/tchat.md.
   Bureau : ancré en bas à droite, au-dessus du launcher, SANS voile : la page reste lisible, défile et
   se clique ; réduire ne perd rien. C'est la forme de tous les widgets du marché (Crisp, Intercom,
   Zendesk…) ; la modal centrée sous voile a été abandonnée le 07/09/2026 (le CTO : « on ne voit plus la
   page, impossible de continuer sans fermer »). Téléphone (≤ 600 px) : plein écran, comme eux.
   Valeurs de la boîte reprises de la modal du site (gf-cms app.css) : fond #fafafa, rayon 20. */

/* Le panneau prend la hauteur de son contenu (la modal l'annonce), bornée à l'écran — et le fil du tchat, lui,
   demande toute la place et défile en interne. Au-dessus de TOUT ce que la page hôte empile (sa barre de bouton, le bouton Crisp z 1 000 000), et
   rattaché au <body> par le JS : inclus dans un ancêtre qui crée un contexte d'empilement, un z-index ne
   sort pas du contexte. 88 px du bas = 20 (marge) + 56 (launcher) + 12 d'air : le launcher reste visible,
   et bascule. `top/right/bottom/left` plutôt que `inset` : Chrome < 87 et Safari < 14.1 l'ignorent et
   n'affichaient rien du tout. */
.rappel-overlay {
    position: fixed; right: 20px; bottom: 88px; z-index: 2147483000;
    display: block; width: 25rem; max-width: calc(100vw - 40px); max-height: calc(100vh - 108px);
    padding: 0;
}
.rappel-overlay[hidden] { display: none; }
.rappel-overlay-boite {
    position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; max-height: 100%;
    background: #fafafa; border: 0; border-radius: 20px;
    box-shadow: 0 12px 40px 0 rgba(24, 21, 47, .18);
    overflow: hidden;
    animation: rappel-boite .3s ease-out both;
}
/* La réouverture automatique (page suivante du tunnel, panneau laissé ouvert) n'entre pas en glissant. */
.rappel-overlay[data-auto] .rappel-overlay-boite { animation: none; }
@keyframes rappel-boite { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* La croix RÉDUIT. Glyphe de 18 px (celui de la modal du site), zone cliquable de 44 px : le centre
   du glyphe reste à 29 px des bords, comme avant. */
.rappel-overlay-fermer {
    position: absolute; top: 7px; right: 7px; z-index: 1;
    display: grid; place-items: center; width: 44px; height: 44px;
    padding: 0; border: 0; background: transparent; color: #18152f; cursor: pointer;
    transition: color .15s ease-in-out;
}
.rappel-overlay-fermer svg { display: block; width: 18px; height: 18px; }
.rappel-overlay-fermer:hover { color: #ff6666; }
.rappel-overlay-fermer:focus-visible { outline: 2px solid #18152f; outline-offset: -6px; border-radius: 10px; }

/* La hauteur est posée par le JS (celle du contenu, bornée) ; la transition ne joue qu'entre deux écrans. */
.rappel-overlay-frame { display: block; flex: none; width: 100%; height: 380px; max-height: 100%; border: 0; transition: height .3s ease-out; }
.rappel-overlay[data-auto] .rappel-overlay-frame { transition: none; }


/* ——— Le launcher, la pastille, l'aperçu (docs/tchat.md) ———
   La bulle corail du site en bas à droite. Panneau ouvert (bureau), elle devient un chevron et le referme
   (`aria-expanded`). La pastille (encre sur liseré blanc) se pose sur la bulle ET sur tout
   « Rappelez-moi » de la page ; l'aperçu du dernier message non lu s'affiche au-dessus de la bulle. */
.rappel-launcher {
    position: fixed; right: 20px; bottom: 20px; z-index: 2147482000;
    display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
    border: 0; border-radius: 50%; background: #ff6666; color: #fff;
    box-shadow: 0 8px 24px rgba(24, 21, 47, .18); cursor: pointer;
    transition: background-color .15s ease-in-out, transform .15s ease-in-out;
}
.rappel-launcher svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.rappel-launcher .rappel-launcher-chevron { display: none; }
.rappel-launcher[aria-expanded="true"] .rappel-launcher-bulle { display: none; }
.rappel-launcher[aria-expanded="true"] .rappel-launcher-chevron { display: block; }
.rappel-launcher:hover { background: #ff7d7d; transform: translateY(-1px); }
.rappel-launcher:focus-visible { outline: 2px solid #18152f; outline-offset: 3px; }
/* La pastille se pose dans le balisage de la page hôte (« Rappelez-moi » du tunnel) : ses règles
   priment sur celles de l'hôte (`.rappelez span` y colore et masque les spans). Le launcher, lui,
   reste fixé. */
.rappel-a-pastille:not(.rappel-launcher) { position: relative; }
.rappel-pastille {
    position: absolute !important; top: -6px !important; right: -6px !important; left: auto !important; z-index: 1;
    display: block !important; min-width: 22px; height: 22px; padding: 0 6px; margin: 0; border-radius: 11px;
    background: #18152f !important; color: #fff !important; font: 700 13px/22px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    text-align: center; box-shadow: 0 0 0 2px #fff;
}
.rappel-pastille[hidden] { display: none !important; }

/* L'aperçu : « Mégane · Bonjour, la franchise… », cliquable (ouvre le panneau), une croix l'efface. */
.rappel-apercu { position: fixed; right: 20px; bottom: 88px; z-index: 2147482000; width: 22rem; max-width: calc(100vw - 40px); }
.rappel-apercu[hidden] { display: none; }
.rappel-apercu-ouvrir {
    display: block; width: 100%; padding: .8rem 1rem; border: 0; border-radius: 14px; background: #fff;
    box-shadow: 0 8px 24px rgba(24, 21, 47, .18); color: #18152f; text-align: left; cursor: pointer;
    font: 400 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    animation: rappel-boite .3s ease-out both;
}
.rappel-apercu-ouvrir:hover { box-shadow: 0 10px 28px rgba(24, 21, 47, .24); }
.rappel-apercu-ouvrir:focus-visible { outline: 2px solid #18152f; outline-offset: 2px; }
.rappel-apercu-qui { display: block; margin-bottom: .1rem; font-weight: 700; }
.rappel-apercu-texte { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(24, 21, 47, .78); overflow-wrap: anywhere; }
.rappel-apercu-fermer {
    position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 24px; height: 24px;
    padding: 0; border: 0; border-radius: 50%; background: #18152f; color: #fff; box-shadow: 0 0 0 2px #fff; cursor: pointer;
}
.rappel-apercu-fermer svg { width: 10px; height: 10px; }
.rappel-apercu-fermer:focus-visible { outline: 2px solid #18152f; outline-offset: 2px; }
/* Ce que le lecteur d'écran entend (« Nouveau message dans le tchat. »), sans rien à l'écran. */
.rappel-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Téléphone : le panneau prend TOUT l'écran, la page hôte ne défile pas derrière (sans quoi iOS la fait
   glisser sous le panneau au focus du composeur) ; le launcher est caché, la croix suffit. */
@media (max-width: 600px) {
    html.rappel-overlay-ouvert { overflow: hidden; }
    .rappel-overlay { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; max-width: none; max-height: none; }
    /* Plein écran : la boîte prend tout, et l'iframe — à la hauteur de son contenu — s'y centre quand elle est plus courte (le CTO, 03/09). */
    .rappel-overlay-boite { height: 100%; border-radius: 0; animation-name: rappel-boite-bas; }
    html.rappel-overlay-ouvert .rappel-launcher { display: none; }
    @keyframes rappel-boite-bas { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
    .rappel-launcher { right: 16px; bottom: 16px; }
    .rappel-apercu { right: 16px; bottom: 84px; max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
    .rappel-overlay-boite, .rappel-apercu-ouvrir { animation: none; }
    .rappel-overlay-frame { transition: none; }
}