/* ===== Assistant IA UN-CHK — jetons de design ===== */
:root {
    --atlantique: #0F3550;      /* marque, encre forte */
    --atlantique-2: #164a6e;
    --fond: #F2F5F7;            /* blanc bleuté */
    --surface: #FFFFFF;
    --encre: #14212B;
    --encre-douce: #51606C;
    --trait: #DCE3E8;
    --mil: #E5A21A;             /* action */
    --mil-fonce: #B97F08;
    --baobab: #1E6B5C;          /* local, vérifié */
    --baobab-clair: #E3F1ED;
    --alerte: #B4372B;
    --titres: 'Bricolage Grotesque', 'Source Sans 3', system-ui, sans-serif;
    --texte: 'Source Sans 3', system-ui, sans-serif;
    --r-petit: 8px;
    --r-moyen: 14px;
    --r-grand: 22px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--texte); font-size: 16.5px; line-height: 1.55; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
a { color: var(--atlantique-2); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--mil); outline-offset: 2px; }
[x-cloak] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid transparent; background: var(--atlantique); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; font-size: 15px; }
.btn:hover { background: var(--atlantique-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-mil { background: var(--mil); color: var(--atlantique); }
.btn-mil:hover { background: #f0b232; }
.btn-secondaire { background: transparent; color: var(--atlantique); border-color: var(--trait); }
.btn-secondaire:hover { background: #fff; border-color: var(--atlantique); }
.btn-danger { background: transparent; color: var(--alerte); border-color: #ecc9c4; }
.btn-danger:hover { background: #fbefed; }
.btn-petit { padding: 6px 13px; font-size: 14px; }

/* ===== Chat (partagé) ===== */
.fil { overflow-y: auto; overscroll-behavior: contain; }
.fil-interieur { padding: 22px 22px 8px; }
.fil-vide-titre { margin: 0 0 12px; color: var(--encre-douce); font-size: 15px; }
.suggestions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.suggestion { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--fond); border: 1.5px solid transparent; border-radius: var(--r-moyen); padding: 12px 14px; cursor: pointer; font-size: 15px; line-height: 1.4; }
.suggestion:hover { border-color: var(--atlantique); background: #fff; }
.suggestion-cat { font-size: 13px; font-weight: 600; color: var(--baobab); }

.msg { margin-bottom: 20px; display: flex; gap: 11px; }
.msg-user { justify-content: flex-end; }
.msg-user .bulle { background: var(--atlantique); color: #fff; border-radius: 18px 18px 5px 18px; padding: 10px 16px; max-width: 82%; white-space: pre-wrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--mil); color: var(--atlantique); display: grid; place-items: center; font-family: var(--titres); font-weight: 800; font-size: 12px; flex-shrink: 0; }
.msg-ia .corps { flex: 1; min-width: 0; }
.contenu-ia { padding: 2px 0 0; }
.contenu-ia p { margin: 0 0 10px; } .contenu-ia p:last-child { margin-bottom: 0; }
.contenu-ia ul, .contenu-ia ol { margin: 0 0 10px; padding-left: 22px; }
.contenu-ia li { margin-bottom: 4px; }
.contenu-ia code { background: var(--fond); padding: 1px 6px; border-radius: 5px; font-size: 14px; }
.contenu-ia pre { background: var(--atlantique); color: #e8f0f5; padding: 12px 14px; border-radius: var(--r-petit); overflow-x: auto; }
.contenu-ia pre code { background: none; color: inherit; }
.contenu-ia.absent, .contenu-ia.erreur { background: #FFF6E3; border-left: 3px solid var(--mil); padding: 10px 14px; border-radius: 0 var(--r-petit) var(--r-petit) 0; }
.cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--baobab-clair); color: var(--baobab); border-radius: 5px; font-size: 11.5px; font-weight: 700; vertical-align: 2px; margin: 0 1px; }
.curseur::after { content: ''; display: inline-block; width: 8px; height: 16px; background: var(--mil); margin-left: 3px; vertical-align: -2px; animation: clignote 1s steps(2) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.reflexion { color: var(--encre-douce); font-size: 15px; display: flex; gap: 10px; align-items: center; }
.points span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--baobab); margin-right: 3px; animation: saut 1.2s infinite; }
.points span:nth-child(2) { animation-delay: .15s; } .points span:nth-child(3) { animation-delay: .3s; }
@keyframes saut { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.sources { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.source { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; background: #fff; border: 1px solid var(--trait); border-radius: 999px; padding: 3px 11px 3px 4px; cursor: pointer; color: var(--encre-douce); max-width: 100%; }
.source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--baobab-clair); color: var(--baobab); font-size: 11.5px; flex-shrink: 0; }
.source em { font-style: normal; font-size: 11.5px; color: var(--mil-fonce); }
.source:hover, .source.ouverte { border-color: var(--baobab); color: var(--encre); }
.extrait { margin-top: 8px; font-size: 14.5px; background: var(--fond); border-left: 3px solid var(--baobab); padding: 9px 13px; border-radius: 0 var(--r-petit) var(--r-petit) 0; color: var(--encre-douce); }
.extrait a { display: inline-block; margin-top: 4px; font-weight: 600; font-size: 14px; }
.actions-msg { margin-top: 8px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.lien-action { background: none; border: 0; color: var(--encre-douce); cursor: pointer; padding: 2px 0; font-size: 14px; text-decoration: none; }
.lien-action:hover { color: var(--atlantique); text-decoration: underline; }
.form-sms { display: flex; gap: 6px; align-items: center; }
.form-sms input { width: 160px; padding: 6px 10px; font-size: 14px; border: 1px solid var(--trait); border-radius: var(--r-petit); }
.retour-ok { color: var(--baobab); } .retour-ko { color: var(--alerte); }

.saisie { display: flex; gap: 8px; align-items: flex-end; background: #fff; border: 1.5px solid var(--trait); border-radius: var(--r-grand); padding: 7px 7px 7px 18px; margin: 10px 16px 16px; }
.saisie:focus-within { border-color: var(--atlantique); }
.saisie textarea { flex: 1; border: 0; padding: 9px 0; resize: none; max-height: 160px; outline: none; background: transparent; line-height: 1.4; }
.btn-envoyer { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--mil); color: var(--atlantique); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.btn-envoyer:hover { background: #f0b232; }
.btn-envoyer:disabled { background: var(--trait); color: #fff; cursor: not-allowed; }