/* Chat en direct : entrée dans la zappette, lien de contact.php, panneau visiteur. */
.zappette__chat { display: flex; align-items: center; justify-content: center; gap: .35rem; width: calc(100% - .8rem); margin: .35rem .4rem 0; padding: .4rem .45rem; background: rgba(31,110,105,.08); border: 1px solid rgba(31,110,105,.45); border-radius: 12px; font: inherit; font-weight: 400; color: #1F6E69; cursor: pointer; text-align: left; }
.zappette__chat:hover, .zappette__chat:focus-visible { filter: brightness(1.08); }
.zappette__chat-ico { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zappette__chat-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.zappette__chat-titre { font-size: .84rem; }
.zappette__chat-sous { font-size: .68rem; opacity: .85; white-space: nowrap; }
.chat-point { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #B9B2AA; flex: none; }
[data-chat-en-ligne="1"] .chat-point, .chat-point--vert { background: #3FA66B; box-shadow: 0 0 0 3px rgba(63,166,107,.22); }
.chat-lien { background: none; border: 0; padding: 0; font: inherit; color: #1F6E69; text-decoration: underline; cursor: pointer; }
.chat-etat { color: #6b6058; font-size: .9em; }

.chat { position: fixed; left: 7.4rem; bottom: 1rem; width: min(22rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100vh - 2rem)); display: flex; flex-direction: column; background: #fff; border: 1px solid #E7DED3; border-radius: 4px 22px 4px 22px; box-shadow: 0 10px 34px rgba(0,0,0,.16); z-index: 1300; overflow: hidden; font-size: .9rem; color: #2b2b2b; }
.chat[hidden] { display: none; }
.chat__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; padding: .8rem 1rem; background: #1F6E69; color: #fff; }
.chat__titre { display: block; font-weight: 600; }
.chat__etat { display: block; font-size: .78rem; opacity: .9; }
.chat__fermer { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.chat__accueil, .chat__conversation { padding: .9rem 1rem 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
.chat__conversation[hidden], .chat__accueil[hidden] { display: none; }
.chat label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: #4a4038; }
.chat input[type=text], .chat input[type=email], .chat textarea { font: inherit; font-size: .9rem; padding: .5rem .6rem; border: 1px solid #D8CEC2; border-radius: 8px; background: #fff; color: #2b2b2b; width: 100%; box-sizing: border-box; }
.chat textarea { resize: vertical; }
.chat__oblig, .chat__facultatif { color: #8a7f74; font-size: .75rem; }
.chat__avertissement { margin: 0; padding: .6rem .7rem; background: #FBF3EA; border-left: 3px solid #B8573B; border-radius: 4px; font-size: .78rem; line-height: 1.45; }
.chat__rgpd { margin: 0; font-size: .72rem; color: #6b6058; line-height: 1.4; }
.chat__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chat__erreur { margin: 0; padding: .45rem .6rem; background: #F6DDD6; color: #7a2a15; border-radius: 6px; font-size: .8rem; }
.chat__erreur[hidden], .chat__note[hidden], .chat__nouvelle[hidden] { display: none; }
.chat__envoyer { align-self: flex-start; padding: .5rem 1.2rem; border: 0; border-radius: 999px; background: #1F6E69; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.chat__envoyer:hover, .chat__envoyer:focus-visible { background: #124B47; }
.chat__envoyer[disabled] { opacity: .6; cursor: wait; }
.chat__fil { display: flex; flex-direction: column; gap: .45rem; min-height: 8rem; max-height: 17rem; overflow-y: auto; padding: .2rem; }
.chat__bulle { max-width: 86%; padding: .45rem .7rem; border-radius: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .86rem; }
.chat__bulle--visiteur { align-self: flex-end; background: #E3F0EE; border-bottom-right-radius: 4px; }
.chat__bulle--franck { align-self: flex-start; background: #F3ECE3; border-bottom-left-radius: 4px; }
.chat__heure { display: block; font-size: .66rem; color: #8a7f74; margin-top: .1rem; }
.chat__note { margin: 0; font-size: .78rem; color: #6b6058; }
.chat__saisie { display: flex; flex-direction: column; gap: .4rem; }
.chat__nouvelle { align-self: flex-start; background: none; border: 0; padding: 0; color: #1F6E69; text-decoration: underline; font: inherit; font-size: .85rem; cursor: pointer; }

@media (max-width: 1100px) {
  .chat { left: .6rem; right: .6rem; width: auto; bottom: .6rem; max-height: calc(100vh - 1.2rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .chat { animation: chat-entree .18s ease-out; }
  @keyframes chat-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.chat__chemin { margin: 0; padding: .45rem .65rem; background: #E4F1F0; border-radius: 8px; font-size: .78rem; line-height: 1.4; color: #124B47; }
.chat__chemin a { color: #1F6E69; font-weight: 600; }
[data-chat-en-ligne="1"] .chat-point { animation: chat-point-pulse 1.8s ease-out infinite; }
@keyframes chat-point-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,166,107,.55); } 100% { box-shadow: 0 0 0 7px rgba(63,166,107,0); } }
@media (prefers-reduced-motion: reduce) { [data-chat-en-ligne="1"] .chat-point { animation: none; } }
.chat__son { background: none; border: 0; color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .2rem; margin-left: auto; }
.chat__tete { align-items: center; }
.chat__bulle--nouveau { animation: chat-bulle-nouvelle 1.6s ease-out 1; }
@keyframes chat-bulle-nouvelle { 0% { box-shadow: 0 0 0 0 rgba(31,110,105,.55); background: #FFE9B8; transform: scale(1.04); } 100% { box-shadow: 0 0 0 10px rgba(31,110,105,0); transform: none; } }
.zappette__chat[data-chat-nouveau="1"] { background: #1F6E69; color: #fff; border-color: #1F6E69; animation: chat-bouton-appel 1.2s ease-in-out infinite; }
.zappette__chat[data-chat-nouveau="1"] .chat-point { background: #FFD27A; }
.chat-lien[data-chat-nouveau="1"] { color: #C4452B; font-weight: 600; animation: chat-bouton-appel 1.2s ease-in-out infinite; }
@keyframes chat-bouton-appel { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .chat__bulle--nouveau, .zappette__chat[data-chat-nouveau="1"], .chat-lien[data-chat-nouveau="1"] { animation: none; } }
.chat__son svg { display: block; }
/* Fond de l'entrée « Chat en direct » : vert quand Franck est en ligne, gris quand il est absent. */
.zappette__chat { background: #7D766F; border-color: #7D766F; color: #fff; }
.zappette__chat[data-chat-en-ligne="1"] { background: #4A8530; border-color: #4A8530; }
.zappette__chat .chat-point { background: #D9D4CE; box-shadow: none; }
.zappette__chat[data-chat-en-ligne="1"] .chat-point { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.zappette__chat[data-chat-nouveau="1"] { background: #C4452B; border-color: #C4452B; color: #fff; }
.zappette__chat[data-chat-nouveau="1"] .chat-point { background: #FFD27A; }
/* Pastille « Chat en direct » : texte seul sur fond de couleur, sans icône ni aspect de bouton. */
.zappette__chat { border: 0; border-radius: 8px; padding: .4rem .5rem; justify-content: center; text-align: center; }
.zappette__chat-txt { align-items: center; }