/* [C-4-224 2026-10-15] Section « Questions citoyennes et chatbot démocratique » de la fiche d'un élu
   (app/elected_member/sections/_questions-citoyennes.html.twig) : deux sortes de questions côte à côte (empilées sur mobile),
   mode d'emploi du chatbot, exemples en pastilles, parcours numéroté de la question publique, encart de connexion. */
.questions-citoyennes h3 { margin-top: 1.75rem; }
.questions-compteur { font-weight: 600; }
.questions-deux-sortes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.questions-sorte { border: 1px solid #adb5bd; border-radius: .5rem; padding: 1rem; background: #f8f9fa; }
.questions-sorte h3 { margin-top: 0; font-size: 1.1rem; }
.questions-sorte ul { padding-left: 1.2rem; margin-bottom: .75rem; }
.chatbot-mode-d-emploi dt { font-weight: 600; margin-top: .5rem; }
.chatbot-mode-d-emploi dd { margin-left: 0; }
.chatbot-formulaire { margin-top: 1rem; }
.chatbot-exemples-titre { margin-bottom: .25rem; font-weight: 600; }
.chatbot-exemples { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chatbot-exemple {
  border: 1px solid #0b3d91; border-radius: 1rem; background: #fff; color: #0b3d91;
  padding: .3rem .8rem; font-size: .95rem; text-align: left; cursor: pointer;
}
.chatbot-exemple:hover, .chatbot-exemple:focus-visible { background: #0b3d91; color: #fff; }
.chatbot-exemple:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.chatbot-reponse:not(:empty) { margin-top: 1rem; }
/* [ABC-4-236] Attente : message annoncé par role=status. [ABC-4-278] Pas de roue propre : celle du bouton suffit. */
.chatbot-attente { font-style: italic; }
[aria-busy="true"].chatbot-reponse { cursor: progress; }
.chatbot-explication { margin-top: .5rem; }
.chatbot-sources-titre { font-weight: 600; margin: .75rem 0 .25rem; }
.chatbot-repere { text-decoration: none; padding: 0 .1rem; }
.parcours-question { padding-left: 1.4rem; }
.parcours-question li { margin-bottom: .35rem; }
.encart-connexion { border-left: 4px solid #0b3d91; background: #eef3fb; padding: 1rem; border-radius: .25rem; }
.encart-connexion p:last-child { margin-bottom: 0; }
.question-publiee { margin-bottom: .875rem; }

/* [C-R-127] Deux bulles distinctes (fil du chatbot et questions publiées) : la réponse de « Assistant EPE » à gauche, la question de « Vous »
   (ou « Question d'un citoyen ») à droite en bleu de la charte ; auteur en gras, date « jj/mm/aaaa à HH:MM » sur UNE ligne (G14) ; « Sources » et
   l'explication d'un refus dans un bloc séparé sous un filet ; chaque échange séparé du suivant. */
/* Réouverture : texte 15 px, interligne 1,47 (le corps du site impose 17 px / 1,65), tout le reste du contenu ≥ 14 px ; le gain vient des marges. */
.echange.chatbot-bulle { display: block; max-width: 92%; margin: 0 0 .375rem; padding: .5rem .75rem; border-radius: .75rem; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.47; }
.echange.chatbot-bulle--assistant { margin-right: auto; background: #eef3fb; border: 1px solid #c9d8f0; border-top-left-radius: .125rem; color: #212529; }
.echange.chatbot-bulle--usager { margin-left: auto; margin-bottom: .875rem; background: #0b3d91; border: 1px solid #0b3d91; border-top-right-radius: .125rem; color: #fff; }
.echange.chatbot-bulle--erreur { background: #fff3cd; border-color: #e0c36a; margin-bottom: .875rem; }
.chatbot-bulle__entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; margin: 0 0 .125rem; font-size: .875rem; }
.chatbot-bulle__auteur { font-weight: 700; }
.chatbot-bulle__horodatage { white-space: nowrap; font-size: .875rem; }
.chatbot-bulle--assistant .chatbot-bulle__horodatage { color: #495057; }
.chatbot-bulle--usager .chatbot-bulle__horodatage, .chatbot-bulle--usager .chatbot-bulle__texte { color: #fff; }
.chatbot-bulle__texte { margin: 0 0 .25rem; }
/* Paragraphes en <p> (une ligne vide de « pre-line » coûtait une ligne pleine) : simple marge entre eux ; repères de source jamais sous 14 px. */
.chatbot-bulle__texte p { margin: 0 0 .375rem; white-space: pre-line; }
.chatbot-bulle__texte p:last-child { margin-bottom: 0; }
.chatbot-bulle sup, .chatbot-bulle .chatbot-repere { font-size: .875rem; line-height: 1.45; }
.chatbot-bulle--usager .chatbot-bulle__texte { margin: 0; }
.chatbot-bulle__complements { margin-top: .375rem; padding-top: .375rem; border-top: 1px solid #c9d8f0; }
.chatbot-bulle--assistant .disclaimer-ia { margin: 0 0 .375rem; font-size: .875rem; line-height: 1.45; }
.chatbot-bulle .chatbot-explication { margin: 0 0 .25rem; }
.chatbot-bulle .chatbot-sources-titre { margin: .25rem 0 .125rem; }
.chatbot-bulle .chatbot-sources { margin: 0; padding-left: 1.25rem; }
.chatbot-bulle .chatbot-sources li { margin: 0; }
.chatbot-bulle .barre-actions-ia { margin: 0 0 .25rem; }
.contraste-eleve .chatbot-bulle--usager { background: #000; border: 2px solid #fff; }
.contraste-eleve .chatbot-bulle--assistant { background: #fff; border: 2px solid #000; }