:root {
  --turquoise: #14c8b4;
  --bleu: #1b8bc2;
  --bleu-fonce: #0b4aa0;
  --marine: #1a2b4c;
  --fond: #f3f7fa;
  --blanc: #ffffff;
  --bord: #dbe5ec;
  --erreur: #c0392b;
  --degrade: linear-gradient(135deg, var(--turquoise), var(--bleu-fonce));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--marine);
  background: var(--fond);
}

/* ---------- Écran de connexion ---------- */
.ecran {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.carte {
  width: 100%;
  max-width: 400px;
  background: var(--blanc);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 8px 30px rgba(11, 74, 160, 0.12);
}
.logo-auth { display: block; width: 220px; max-width: 80%; height: auto; margin: 0 auto 4px; }
.slogan { text-align: center; font-size: 0.85rem; margin: 0 0 20px; color: #52627f; }

.onglets { display: flex; gap: 6px; margin-bottom: 16px; background: var(--fond); padding: 4px; border-radius: 10px; }
.onglet {
  flex: 1; border: 0; background: transparent; padding: 9px; border-radius: 8px;
  font: inherit; font-weight: 600; color: #52627f; cursor: pointer;
}
.onglet.actif { background: var(--blanc); color: var(--bleu-fonce); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }

.formulaire { display: flex; flex-direction: column; gap: 6px; }
.formulaire label { font-size: 0.85rem; font-weight: 600; margin-top: 8px; }
input, textarea {
  font: inherit; padding: 10px 12px; border: 1px solid var(--bord);
  border-radius: 10px; color: var(--marine); background: var(--blanc);
}
input:focus, textarea:focus { outline: 2px solid var(--bleu); border-color: transparent; }
.aide { font-size: 0.78rem; color: #6b7a96; margin: 0; }

.bouton {
  margin-top: 14px; border: 0; border-radius: 10px; padding: 11px 16px;
  font: inherit; font-weight: 600; color: #fff; background: var(--degrade); cursor: pointer;
}
.bouton:hover { filter: brightness(1.08); }
.bouton:disabled { opacity: 0.6; cursor: default; }
.message-erreur { min-height: 1.2em; margin: 12px 0 0; color: var(--erreur); font-size: 0.88rem; text-align: center; }
.message-info { margin: 12px 0 0; color: #0f7a6e; font-size: 0.88rem; text-align: center; }
.message-info:empty { display: none; }

.titre-form { margin: 0 0 4px; font-size: 1.1rem; color: var(--bleu-fonce); }
.lien {
  align-self: center; margin-top: 8px; border: 0; background: transparent; padding: 4px;
  font: inherit; font-size: 0.85rem; color: var(--bleu); text-decoration: underline; cursor: pointer;
}
.lien:hover { color: var(--bleu-fonce); }

/* ---------- Écran de chat ---------- */
.ecran-chat { display: flex; height: 100%; height: 100dvh; }

.barre-laterale {
  width: 280px; flex-shrink: 0; background: var(--blanc); border-right: 1px solid var(--bord);
  display: flex; flex-direction: column; padding: 14px; gap: 10px;
}
.logo-barre { width: 100%; max-width: 150px; height: auto; display: block; margin: 0 auto; }
.barre-laterale .bouton { margin-top: 0; }

.liste-conversations {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.conv { display: flex; align-items: center; border-radius: 10px; }
.conv.actif { background: var(--fond); }
.conv-titre {
  flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; font: inherit;
  font-size: 0.9rem; padding: 9px 10px; color: var(--marine); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-suppr { border: 0; background: transparent; color: #8896ad; font-size: 1.2rem; padding: 4px 10px; cursor: pointer; border-radius: 8px; }
.conv-suppr:hover { color: var(--erreur); }

.pied-barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--bord); padding-top: 10px; font-size: 0.88rem; font-weight: 600;
}
.bouton-discret {
  border: 1px solid var(--bord); background: var(--blanc); color: var(--marine);
  border-radius: 8px; padding: 7px 11px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.bouton-discret:hover { background: var(--fond); }

.zone-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.entete-chat { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--blanc); border-bottom: 1px solid var(--bord); }
.entete-chat h1 {
  margin: 0; font-size: 1.1rem; background: var(--degrade);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#btn-menu { display: none; }
.btn-entete { margin-left: auto; }
@media (max-width: 480px) {
  .texte-bouton { display: none; } /* sur petit écran, seulement les icônes */
}

/* ---------- Fenêtre « Mon assistant » ---------- */
.dialogue {
  width: min(440px, calc(100% - 32px)); border: 0; border-radius: 16px; padding: 24px;
  color: var(--marine); box-shadow: 0 8px 30px rgba(11, 74, 160, 0.2);
}
.dialogue::backdrop { background: rgba(26, 43, 76, 0.45); }
select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--bord);
  border-radius: 10px; color: var(--marine); background: var(--blanc);
}
select:focus { outline: 2px solid var(--bleu); border-color: transparent; }
.dialogue textarea { resize: vertical; }
.actions-dialogue { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.actions-dialogue .bouton { margin-top: 0; }
.dialogue { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* ---------- Fenêtre « Ma mémoire » ---------- */
.sous-titre { margin: 14px 0 2px; font-size: 0.95rem; }
.liste-consentements, .liste-souvenirs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.consentement {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px;
  border: 1px solid var(--bord); border-radius: 10px; cursor: pointer;
}
.consentement input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bleu); flex-shrink: 0; }
.consentement strong { display: block; font-size: 0.9rem; }
.consentement span { font-size: 0.8rem; color: #6b7a96; }
.formulaire .consentement { margin-top: 0; font-weight: normal; }

.souvenir { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--fond); border-radius: 10px; }
.souvenir-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.souvenir-categorie { display: block; font-size: 0.75rem; color: #6b7a96; }
.souvenir button { border: 0; background: transparent; cursor: pointer; font-size: 1rem; padding: 4px 6px; border-radius: 6px; color: #52627f; }
.souvenir button:hover { background: var(--blanc); }
.souvenir .suppr:hover { color: var(--erreur); }
.vide { font-size: 0.85rem; color: #6b7a96; font-style: italic; }

.ajout-souvenir { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ajout-souvenir label { width: 100%; }
.ajout-souvenir select { flex: 1 1 140px; }
.ajout-souvenir input { flex: 2 1 200px; }
.ajout-souvenir .bouton { margin-top: 0; }

.bouton-danger {
  margin-right: auto; border: 1px solid var(--erreur); background: var(--blanc); color: var(--erreur);
  border-radius: 8px; padding: 7px 11px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.bouton-danger:hover { background: #fdecea; }

.messages { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.accueil { margin: auto; text-align: center; color: #6b7a96; }
.message {
  max-width: min(640px, 85%); padding: 10px 14px; border-radius: 16px;
  line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.message.utilisateur { align-self: flex-end; background: var(--degrade); color: #fff; border-bottom-right-radius: 4px; }
.message.assistant { align-self: flex-start; background: var(--blanc); border: 1px solid var(--bord); border-bottom-left-radius: 4px; }
.message.attente { color: #6b7a96; font-style: italic; }
.message.erreur { align-self: center; background: #fdecea; color: var(--erreur); }

/* Notifications */
.btn-cloche { position: relative; }
.badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--erreur); color: #fff; font-size: 0.7rem; font-weight: 700;
  line-height: 18px; text-align: center;
}
.souvenir.non-lue { background: #e3f6f3; border-left: 3px solid var(--turquoise); }
.souvenir-texte strong { display: block; }
.ajout-souvenir input[type="datetime-local"] { flex: 1 1 180px; }
.toast {
  position: fixed; right: 16px; bottom: 90px; z-index: 20; max-width: min(360px, calc(100% - 32px));
  padding: 12px 16px; border-radius: 12px; background: var(--marine); color: #fff;
  box-shadow: 0 8px 30px rgba(11, 74, 160, 0.3); font-size: 0.9rem; overflow-wrap: anywhere;
}

/* Mon offre */
.bandeau-test { margin: 0; padding: 8px 10px; border-radius: 10px; background: #fff7e0; color: #7a5a00; font-size: 0.82rem; }
.offre-actuelle { margin: 6px 0 0; font-weight: 600; }
.utilisation { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; }
.utilisation progress { display: block; width: 100%; height: 8px; accent-color: var(--bleu); }
.table-offres { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table-offres th, .table-offres td { padding: 6px 8px; border-bottom: 1px solid var(--bord); text-align: left; }
.table-offres thead th:last-child, .table-offres td:last-child { background: #eef7fc; font-weight: 600; }
.actions-offre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.actions-offre .bouton { margin-top: 0; }
.actions-offre .bouton-danger { margin-right: 0; }
.zone-paiement { margin-top: 10px; padding: 12px; border: 2px dashed var(--bleu); border-radius: 12px; }
.zone-paiement .aide { margin-top: 4px; }

/* Fichiers dans les bulles */
.message span { display: block; }
.image-jointe { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; margin-bottom: 6px; }
.fichier-joint { display: block; margin-bottom: 6px; color: inherit; font-weight: 600; text-decoration: underline; }
.message > :last-child { margin-bottom: 0; }

/* Fichier choisi, en attente d'envoi */
.piece-jointe {
  display: flex; align-items: center; gap: 6px; margin: 0 16px; padding: 6px 10px;
  background: var(--blanc); border: 1px solid var(--bord); border-bottom: 0; border-radius: 10px 10px 0 0;
  font-size: 0.85rem; overflow-wrap: anywhere;
}
.piece-jointe span { flex: 1; min-width: 0; }
.piece-jointe button { border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: #8896ad; padding: 2px 6px; }
.piece-jointe button:hover { color: var(--erreur); }
.btn-joindre { font-size: 1.1rem; padding: 8px 10px; }
.espace { margin: 4px 0; font-size: 0.85rem; font-weight: 600; }

.saisie { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px; background: var(--blanc); border-top: 1px solid var(--bord); }
.saisie textarea { flex: 1; resize: none; max-height: 140px; }
.saisie .bouton { margin-top: 0; }

#lien-admin { text-decoration: none; }

/* Mon compte */
.btn-compte { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-align: left; } /* le nom sur sa propre ligne */
.infos-compte { margin: 0; font-size: 0.9rem; color: #52627f; overflow-wrap: anywhere; }
.bouton-lien { display: block; text-align: center; text-decoration: none; margin-top: 6px; }
.zone-danger-titre { color: var(--erreur); }
.zone-danger { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid #f3c4bf; border-radius: 12px; background: #fff8f7; }
.zone-danger .bouton-danger { margin: 8px 0 0; align-self: flex-start; }
.aide.centre { text-align: center; margin-top: 8px; }
.aide a { color: var(--bleu); }

/* Politique de confidentialité */
.texte-legal { line-height: 1.55; }
.texte-legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.texte-legal p { margin: 0; }
.texte-legal .table-admin td { vertical-align: top; }

/* ---------- Page d'administration ---------- */
.page-admin { height: auto; min-height: 100%; }
.entete-admin {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  background: var(--blanc); border-bottom: 1px solid var(--bord);
}
.entete-admin h1 { margin: 0; font-size: 1.15rem; flex: 1; color: var(--bleu-fonce); }
.entete-admin a { text-decoration: none; }
.logo-admin { height: 40px; width: auto; }
.contenu-admin { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.bandeau-confidentialite { margin: 0; padding: 10px 12px; border-radius: 10px; background: #e3f6f3; color: #0f5c53; font-size: 0.88rem; }
.bloc-admin { background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px; padding: 16px; min-width: 0; }
.bloc-admin h2 { margin: 0 0 12px; font-size: 1rem; }
.titre-bloc { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.titre-bloc h2 { margin-bottom: 0; }
#zone-admin { display: flex; flex-direction: column; gap: 16px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.tuile { background: var(--fond); border-radius: 12px; padding: 12px; }
.tuile strong { display: block; font-size: 1.4rem; color: var(--bleu-fonce); }
.tuile span { font-size: 0.8rem; color: #52627f; }
.graphique { display: flex; align-items: flex-end; gap: 8px; height: 180px; }
.colonne { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.colonne .barre { width: 100%; max-width: 48px; min-height: 2px; background: var(--degrade); border-radius: 6px 6px 0 0; }
.colonne .valeur { font-size: 0.8rem; font-weight: 600; }
.colonne .jour { font-size: 0.72rem; color: #6b7a96; white-space: nowrap; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.table-admin { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table-admin th, .table-admin td { padding: 8px; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
.table-admin th { font-size: 0.78rem; color: #52627f; }
.table-admin td { overflow-wrap: anywhere; }
.table-admin .bouton-danger, .table-admin .bouton-discret { margin: 0; white-space: nowrap; }
.statut-suspendu { color: var(--erreur); }
.defilement { overflow-x: auto; }
.defilement .table-admin { min-width: 760px; }
.liste-chiffres { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.recherche-admin { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.recherche-admin input { flex: 1 1 220px; }
.recherche-admin .bouton { margin-top: 0; }

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  .barre-laterale {
    position: fixed; inset: 0 auto 0 0; z-index: 10; width: 82%; max-width: 300px;
    transform: translateX(-100%); transition: transform 0.2s; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }
  .barre-laterale.ouverte { transform: none; }
  #btn-menu { display: inline-block; }
}