/* Chat en direct et demande de rappel, communs au site et au logiciel.
   Les couleurs viennent des variables déjà posées par chaque page, avec
   une valeur de repli : le composant se pose sans rien y ajouter, et
   suit le mode sombre là où il existe. Tous les noms de classes sont
   préfixés « pc- » pour ne heurter aucun style existant. Ce n'est pas
   une précaution théorique : « pastille » désignait déjà, dans le
   logiciel, les jetons d'indicateurs du rail, et les deux jeux de
   règles se sont mélangés, réduisant les boutons flottants à des
   rondelles tronquées. */

.pc-pastille {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: 0; border-radius: 999px;
  font: 600 13.5px/1.2 inherit; white-space: nowrap; cursor: pointer;
  transition: background 140ms, transform 140ms, box-shadow 140ms, border-color 140ms;
}
.pc-pastille svg {
  width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.pc-pastille:hover { transform: translateY(-1px); }

/* Le chat à gauche, le rappel à droite : la fenêtre du chat s'ouvre
   au-dessus de son propre déclencheur et ne recouvre pas l'autre. */
/* Blanche comme « Être rappelé », et non bleu nuit : le logiciel a une
   colonne de gauche de la même couleur, la pastille s'y évanouissait.
   Les deux pastilles se ressemblent désormais, ce qui est juste : elles
   offrent deux façons de joindre la même équipe. L'icône en bleu nuit
   suffit à les distinguer l'une de l'autre. */
.pc-pastille--chat {
  /* La marge de gauche est une variable : le logiciel a une colonne
     fixe de ce côté et la redéfinit, sans dépendre de l'ordre de
     chargement des feuilles. */
  position: fixed; left: var(--pc-gauche, 24px); bottom: 24px; z-index: 45; height: 46px;
  background: var(--carte, #fff); color: var(--encre, #16202B);
  border: 1px solid var(--traitf, #C3CEDA);
  box-shadow: 0 2px 6px rgba(12,39,66,.12), 0 12px 28px -14px rgba(12,39,66,.4);
}
.pc-pastille--chat svg { color: var(--nuit, #0C2742); }
.pc-pastille--chat:hover { border-color: var(--taupe, #A69060); background: var(--papier, #FBFAF8); }
.pc-flottante { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: flex; gap: 8px; }
.pc-pastille--rappel {
  background: var(--carte, #fff); color: var(--encre, #16202B);
  border: 1px solid var(--traitf, #C3CEDA);
  box-shadow: 0 2px 6px rgba(12,39,66,.12), 0 12px 28px -14px rgba(12,39,66,.4);
}
.pc-pastille--rappel:hover { border-color: var(--taupe, #A69060); background: var(--papier, #FBFAF8); }

/* ---- fenêtre de conversation ---- */
.panneau-chat {
  position: fixed; left: var(--pc-gauche-fenetre, 20px); bottom: 80px; z-index: 46;
  display: flex; flex-direction: column;
  width: min(390px, calc(100vw - 40px)); max-height: min(70vh, 560px); overflow: hidden;
  border: 1px solid var(--traitf, #C3CEDA); border-radius: 16px;
  background: var(--carte, #fff); color: var(--encre, #16202B);
  box-shadow: 0 22px 60px rgba(4,33,53,.22);
  animation: pc-entree 200ms cubic-bezier(.2,.7,.3,1);
}
/* Tout élément à qui la feuille de styles donne un display explicite
   ignore l'attribut hidden : sans cette ligne, le formulaire de départ
   resterait affiché par-dessus la conversation. */
.panneau-chat [hidden], .panneau-chat[hidden] { display: none !important; }
@keyframes pc-entree { from { opacity: 0; transform: translateY(12px) scale(.98) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .panneau-chat { animation: none } .pc-pastille:hover { transform: none } }

.pc-bandeau {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 15px 18px; background: var(--nuit, #0C2742); color: #fff;
}
.pc-surtitre { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-clair, #E9E0CB); }
.pc-bandeau h2 { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: #fff; }
.pc-masquer {
  flex: none; padding: 4px 9px; border: 0; border-radius: 6px; background: transparent;
  font: 700 12px inherit; color: rgba(255,255,255,.85); cursor: pointer;
}
.pc-masquer:hover { background: rgba(255,255,255,.12); color: #fff; }

.pc-depart { display: grid; gap: 11px; padding: 18px; overflow-y: auto; margin: 0; }
.pc-intro { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gris, #5C6B7A); }
.pc-horaires {
  margin: 0; padding: 8px 12px; border: 1px solid var(--taupe, #A69060); border-radius: 8px;
  background: var(--taupe-clair, #E9E0CB); font-size: 12px; line-height: 1.45; color: var(--encre, #16202B);
}
.pc-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pc-depart input[type=text], .pc-depart input[type=email], .pc-depart textarea,
.pc-ecrire textarea, .pc-rappel input, .pc-rappel select, .pc-rappel textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--traitf, #C3CEDA); border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--encre, #16202B); background: var(--carte, #fff);
  transition: border-color 120ms, box-shadow 120ms;
}
.pc-depart textarea { min-height: 104px; resize: vertical; }
.pc-ecrire textarea { min-height: 74px; resize: vertical; }
.pc-depart input:focus, .pc-depart textarea:focus, .pc-ecrire textarea:focus,
.pc-rappel input:focus, .pc-rappel select:focus, .pc-rappel textarea:focus {
  outline: none; border-color: var(--taupe, #A69060); box-shadow: 0 0 0 3px rgba(166,144,96,.22);
}
.pc-piege { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pc-consentement { display: flex; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--gris, #5C6B7A); }
.pc-consentement input { margin-top: 3px; width: 14px; height: 14px; flex: none; accent-color: var(--nuit, #0C2742); }

.pc-principal, .pc-secondaire {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
  font: 700 14px inherit; cursor: pointer; transition: background 140ms, border-color 140ms;
}
.pc-principal { background: var(--nuit, #0C2742); color: #fff; }
.pc-principal:hover { background: var(--nuit-2, #12345A); }
.pc-principal:disabled { opacity: .55; cursor: progress; }
.pc-large { width: 100%; }
.pc-principal svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-secondaire { border-color: var(--traitf, #C3CEDA); background: transparent; color: var(--gris, #5C6B7A); font-weight: 600; }
.pc-secondaire:hover { background: var(--papier, #FBFAF8); }

.pc-conversation { display: flex; flex-direction: column; min-height: 0; }
.pc-avis {
  flex: none; margin: 0; padding: 11px 18px; border-bottom: 1px solid var(--trait, #DCE3EA);
  background: var(--papier, #FBFAF8); font-size: 12px; line-height: 1.45; color: var(--gris, #5C6B7A);
}
.pc-fil { flex: 1; min-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; padding: 15px; }
.pc-chargement { margin: 0; font-size: 13.5px; color: var(--gris, #5C6B7A); }

/* Les bulles sont créées en JavaScript : elles n'existent pas dans le
   balisage servi, et c'est ici que se trouve leur seule définition. */
.pc-bulle { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.pc-bulle b { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; opacity: .75; }
.pc-bulle p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.pc-bulle--visiteur { margin-left: auto; background: var(--nuit, #0C2742); color: #fff; }
.pc-bulle--equipe { background: var(--taupe-clair, #E9E0CB); color: var(--encre, #16202B); }

.pc-ecrire { flex: none; padding: 11px; border-top: 1px solid var(--trait, #DCE3EA); margin: 0; }
.pc-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.pc-rangee .pc-principal { margin-left: auto; }

.pc-close { padding: 18px; }
.pc-close-avis { padding: 15px; border: 1px solid var(--vert, #2C6B4A); border-radius: 12px; background: var(--vertf, #E8F2EC); font-size: 13.5px; line-height: 1.55; color: var(--vert, #2C6B4A); }
.pc-close-avis p { margin: 0; }
.pc-close-avis p + p { margin-top: 4px; }
.pc-close .pc-principal { margin-top: 15px; }

.pc-alerte { margin: 0; padding: 11px; border: 1px solid var(--rouge, #8E332B); border-radius: 10px; background: rgba(142,51,43,.07); font-size: 13.5px; line-height: 1.45; color: var(--rouge, #8E332B); }
.pc-ok { margin: 0; padding: 11px; border: 1px solid var(--vert, #2C6B4A); border-radius: 10px; background: var(--vertf, #E8F2EC); font-size: 13.5px; line-height: 1.45; color: var(--vert, #2C6B4A); }
.pc-alerte[hidden], .pc-ok[hidden] { display: none !important; }

/* ---- boîtes de dialogue ---- */
.pc-demande {
  margin: auto; width: min(460px, calc(100vw - 32px)); padding: 22px;
  border: 0; border-radius: 14px; background: var(--carte, #fff); color: var(--encre, #16202B);
  box-shadow: 0 32px 80px -20px rgba(4,33,53,.45);
}
.pc-demande::backdrop { background: rgba(8,23,36,.55); }
.pc-demande h3 { margin: 0; font-size: 17px; font-weight: 700; }
.pc-demande > p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--gris, #5C6B7A); }
.pc-demande-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pc-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 16px; }
.pc-ch { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gris, #5C6B7A); }
.pc-ch2 { grid-column: span 1; }
.pc-ch-plein { grid-column: 1 / -1; }
.pc-rappel .pc-consentement { margin-top: 12px; }
.pc-rappel .pc-alerte, .pc-rappel .pc-ok { margin-top: 12px; }

@media (max-width: 620px) {
  /* Les deux pastilles partagent une rangée : deux ancrages opposés y
     laisseraient un vide au milieu. */
  .pc-pastille--chat { position: static; height: auto; flex: 1; justify-content: center; padding-inline: 12px; left: auto; }
  .pc-flottante { left: 12px; right: 12px; bottom: 12px; }
  .pc-pastille { flex: 1; justify-content: center; padding-inline: 12px; }
  .panneau-chat { left: 12px; right: 12px; bottom: 70px; width: auto; max-height: 72vh; }
  :root { --pc-gauche-fenetre: 12px; }
  .pc-paire, .pc-champs { grid-template-columns: 1fr; }
}
@media print { .pc-pastille, .pc-flottante, .panneau-chat, .pc-demande { display: none !important; } }