/* Camabe — « Discutez avec Camabe », le chat des vitrines (24/09/2026).
   Variables du socle seulement : l'accent suit la vitrine (vert pour les
   avocats, ardoise pour les clients), jour et nuit. */

.discuter { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-family: var(--sans); }
.discuter__masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Le bouton ------------------------------------------------------------- */
.discuter__bouton { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--sur-accent); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 38%, transparent), var(--ombre); transition: transform .2s ease, background .2s ease; }
.discuter__bouton:hover { background: var(--accent-vif); transform: translateY(-2px); }
.discuter__bouton:focus-visible { outline: 3px solid var(--accent-pale); outline-offset: 3px; }
.discuter__bouton svg { width: 22px; height: 22px; flex: none; }
.discuter--ouvert .discuter__bouton { display: none; }

/* ---- Le panneau ------------------------------------------------------------ */
.discuter__panneau { display: flex; flex-direction: column; width: min(390px, calc(100vw - 40px)); height: min(600px, calc(100vh - 40px)); height: min(600px, calc(100dvh - 40px)); border: 1px solid var(--trait); border-radius: 20px; background: var(--carte); color: var(--encre); box-shadow: 0 24px 60px rgba(13,18,24,.22), var(--ombre); overflow: hidden; }
.discuter__panneau[hidden] { display: none; }
.discuter__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 20px; background: var(--accent); color: var(--sur-accent); }
.discuter__tete strong { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.1; }
.discuter__tete small { display: block; margin-top: 2px; font-size: .78rem; opacity: .82; }
.discuter__fermer { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.discuter__fermer:hover { background: color-mix(in srgb, var(--sur-accent) 16%, transparent); }
.discuter__fermer svg { width: 20px; height: 20px; }

.discuter__fil { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; background: var(--papier); overscroll-behavior: contain; }
.discuter__bulle { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.discuter__bulle p { margin: 0 0 .5em; }
.discuter__bulle p:last-child, .discuter__bulle ul:last-child { margin-bottom: 0; }
.discuter__bulle ul { margin: 0 0 .5em; padding-left: 1.1em; }
.discuter__bulle--assistant { align-self: flex-start; background: var(--carte); border: 1px solid var(--trait); border-bottom-left-radius: 6px; }
.discuter__bulle--visiteur { align-self: flex-end; background: var(--accent); color: var(--sur-accent); border-bottom-right-radius: 6px; }
.discuter__bulle--erreur { align-self: stretch; max-width: none; background: var(--alerte-pale); color: var(--encre); border: 1px solid var(--alerte-trait); font-size: .86rem; }
.discuter__attente { display: inline-flex; gap: 4px; padding: 14px 16px; }
.discuter__attente i { width: 7px; height: 7px; border-radius: 50%; background: var(--encre-douce); opacity: .5; animation: discuterPoint 1.2s ease-in-out infinite; }
.discuter__attente i:nth-child(2) { animation-delay: .15s; }
.discuter__attente i:nth-child(3) { animation-delay: .3s; }
@keyframes discuterPoint { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: .9; } }

.discuter__suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 4px; }
.discuter__suggestion { max-width: 100%; padding: 8px 13px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; background: var(--carte); color: var(--accent); font: inherit; font-size: .85rem; font-weight: 500; text-align: left; cursor: pointer; }
.discuter__suggestion:hover { background: var(--accent-pale); }

.discuter__saisie { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--trait); background: var(--carte); }
.discuter__saisie textarea { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 14px; border: 1px solid var(--trait-fort); border-radius: 14px; background: var(--papier); color: var(--encre); font: inherit; font-size: .95rem; line-height: 1.4; resize: none; overflow-y: hidden; scrollbar-width: thin; }
.discuter__saisie textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); background: var(--carte); }
/* Le mot de passe de l'inscription en dialogue : un champ masque a la place de la zone de texte (25/09). */
.discuter__saisie .discuter__secret { flex: 1; min-width: 0; min-height: 44px; padding: 11px 14px; border: 1px solid var(--trait-fort); border-radius: 14px; background: var(--papier); color: var(--encre); font: inherit; font-size: .95rem; letter-spacing: .08em; }
.discuter__saisie .discuter__secret:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); background: var(--carte); }
.discuter__saisie [hidden] { display: none; }
.discuter__conditions { align-self: flex-start; max-width: 92%; padding: 0 4px; }
.discuter__conditions a { color: var(--accent); }
.discuter__envoyer { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--accent); color: var(--sur-accent); cursor: pointer; }
.discuter__envoyer:hover { background: var(--accent-vif); }
.discuter__envoyer:disabled { opacity: .5; cursor: default; }
.discuter__envoyer svg { width: 20px; height: 20px; }
.discuter__mention { margin: 0; padding: 4px 16px 12px; background: var(--carte); color: var(--encre-douce); font-size: .72rem; line-height: 1.4; }

/* ---- Telephone : le panneau prend l'ecran ---------------------------------- */
@media (max-width: 560px) {
  .discuter { right: 14px; bottom: 14px; }
  .discuter__bouton { height: 50px; padding: 0 18px 0 14px; font-size: .9rem; }
  .discuter--ouvert { inset: 0; right: 0; bottom: 0; }
  .discuter--ouvert .discuter__panneau { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
}
/* ---- L'ouverture d'un cabinet a l'essai, dans le chat ------------------------- */
.discuter__suggestion--essai { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); }
.discuter__suggestion--essai:hover { background: var(--accent-vif); }
.discuter__carte { align-self: stretch; display: grid; gap: 9px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px; background: var(--carte); font-size: .86rem; }
.discuter__carte-titre { margin: 0; font-family: var(--serif); font-size: 1.08rem; }
.discuter__carte--assistant p { margin: 0; line-height: 1.5; }
.discuter__avocat { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--trait); border-radius: 11px; background: var(--papier); }
.discuter__consentement { display: flex; gap: 6px; align-items: flex-start; color: var(--encre-douce); font-size: .8rem; line-height: 1.4; cursor: pointer; }
.discuter__consentement input { flex: none; margin-top: 2px; accent-color: var(--accent); }
.discuter__avocat-nom { font-size: .92rem; }
.discuter__avocat-qui { color: var(--encre-douce); font-size: .8rem; }
.discuter__avocat-domaines { display: flex; flex-wrap: wrap; gap: 4px; }
.discuter__avocat-domaines span { padding: 1px 8px; border-radius: 99px; background: var(--accent-pale); color: var(--accent); font-size: .72rem; font-weight: 600; }
.discuter__avocat-texte { margin: 0; color: var(--encre-douce); font-size: .8rem; line-height: 1.45; }
.discuter__avocat .discuter__carte-bouton { margin-top: 3px; border: 0; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.discuter__avocat-tous { justify-self: start; color: var(--accent); font-size: .84rem; font-weight: 600; }
.discuter__carte--assistant .discuter__carte-bouton, .discuter__avocat .discuter__carte-bouton { justify-self: start; }
.discuter__carte-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.discuter__carte-bouton { display: inline-flex; justify-content: center; align-items: center; min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: var(--sur-accent); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.discuter__carte-bouton:hover { background: var(--accent-vif); }
.discuter__carte-bouton:disabled { opacity: .55; cursor: default; }
.discuter__carte-note { margin: 0; color: var(--encre-douce); font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.discuter__carte--ouverte { border-color: var(--accent); background: var(--accent-pale); }

/* ---- Le chat pose dans la page (la page Demonstration) ----------------------- */
.discuter--integre { position: static; z-index: auto; }
.discuter--integre .discuter__panneau { width: 100%; height: auto; min-height: 360px; max-height: min(640px, 82vh); box-shadow: var(--ombre); }
@media (max-width: 560px) { .discuter--integre .discuter__panneau { border-radius: 16px; } }

@media (prefers-reduced-motion: reduce) { .discuter__bouton, .discuter__attente i { transition: none; animation: none; } }
@media print { .discuter { display: none; } }