/* ============================================================
   Boussole IA — styles dédiés (Phase 1)
   Réutilise les variables de palette définies dans /style.css
   (--cmq-principal, --cmq-fonce, --cmq-teinte, --cmq-clair, --cmq-bg, etc.)
   Mobile-first ; breakpoint hamburger 900px comme le reste du site.
   ============================================================ */

.boussole-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ---- Hero ------------------------------------------------- */
.boussole-hero { text-align: center; margin-bottom: 18px; }
.boussole-hero h1 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  color: var(--cmq-fonce, #3A8A85);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: 8px 0 6px;
}
.boussole-hero .sous-titre {
  color: var(--gris-texte, #2C3E3E);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.45;
}

/* ---- Bandeau IA permanent (AI Act art. 50) ---------------- */
.boussole-bandeau-ia {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  background: #FFF6E0;
  border: 1px solid #F0D98C;
  color: #6b5a16;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.9rem;
  margin: 14px auto 0;
  text-align: center;
  line-height: 1.35;
}

/* ---- Container chat --------------------------------------- */
.boussole-chat-wrap {
  border: 1px solid var(--cmq-teinte, #AAD9DB);
  border-radius: 16px;
  background: #fff;
  margin-top: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.boussole-chat {
  height: 62vh;
  min-height: 340px;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

/* ---- Bulles ----------------------------------------------- */
.bulle { max-width: 88%; padding: 11px 15px; border-radius: 16px; line-height: 1.5; font-size: 0.98rem; white-space: pre-wrap; word-wrap: break-word; }
.bulle-user { align-self: flex-end; background: var(--cmq-principal, #5BB9B3); color: #fff; border-bottom-right-radius: 5px; }
.bulle-bot { align-self: flex-start; background: var(--cmq-bg, #EEF8F8); color: var(--gris-texte, #2C3E3E); border-bottom-left-radius: 5px; }

/* ---- Indicateur de frappe --------------------------------- */
.bulle-typing { align-self: flex-start; background: var(--cmq-bg, #EEF8F8); padding: 14px 18px; border-radius: 16px; border-bottom-left-radius: 5px; }
.typing-dots { display: inline-flex; gap: 5px; }
.typing-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--cmq-fonce, #3A8A85); opacity: .4; animation: typing 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* ---- Cartes de suggestions -------------------------------- */
.suggestions { align-self: flex-start; max-width: 92%; display: flex; flex-direction: column; gap: 8px; margin-top: -2px; }
.suggestion-carte {
  display: block;
  text-decoration: none;
  border: 1px solid var(--cmq-teinte, #AAD9DB);
  background: #fff;
  border-radius: 12px;
  padding: 10px 13px;
  transition: background .15s, border-color .15s, transform .1s;
}
.suggestion-carte:hover { background: var(--cmq-clair, #C5E8EA); border-color: var(--cmq-principal, #5BB9B3); transform: translateY(-1px); }
.suggestion-type { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cmq-fonce, #3A8A85); font-weight: 600; }
.suggestion-titre { font-weight: 600; color: var(--gris-texte, #2C3E3E); margin: 2px 0; }
.suggestion-raison { font-size: 0.86rem; color: var(--gris-moyen, #6B8A8A); }

/* ---- Note hors-domaine ------------------------------------ */
.note-hors-domaine { align-self: flex-start; font-size: 0.82rem; color: var(--gris-moyen, #6B8A8A); font-style: italic; padding: 0 4px; }

/* ---- Encart détresse -------------------------------------- */
.encart-detresse {
  align-self: stretch;
  background: #FDF1F1;
  border: 1px solid #E7B7B7;
  border-radius: 12px;
  padding: 14px 16px;
  color: #6e2b2b;
  font-size: 0.92rem;
  line-height: 1.5;
}
.encart-detresse h4 { margin: 0 0 8px; font-size: 1rem; }
.encart-detresse ul { margin: 6px 0; padding-left: 18px; }
.encart-detresse a { color: #a23a3a; font-weight: 600; }

/* ---- Encart dégradé (erreurs réseau / budget) ------------- */
.encart-degrade { align-self: stretch; background: var(--cmq-bg, #EEF8F8); border: 1px dashed var(--cmq-teinte, #AAD9DB); border-radius: 12px; padding: 14px 16px; color: var(--gris-texte, #2C3E3E); }
.encart-degrade .liens-fiches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.encart-degrade .liens-fiches a, .btn-reessayer {
  display: inline-block; background: var(--cmq-principal, #5BB9B3); color: #fff;
  text-decoration: none; padding: 7px 14px; border-radius: 8px; font-size: 0.88rem;
  border: none; cursor: pointer; font-family: inherit;
}
.encart-degrade .liens-fiches a:hover, .btn-reessayer:hover { background: var(--cmq-fonce, #3A8A85); }

/* ---- Zone de saisie --------------------------------------- */
.boussole-saisie { border-top: 1px solid var(--cmq-teinte, #AAD9DB); padding: 12px; background: #fff; }
.saisie-row { display: flex; gap: 8px; align-items: flex-end; }
.boussole-saisie textarea {
  flex: 1; resize: none; border: 1px solid var(--cmq-teinte, #AAD9DB);
  border-radius: 12px; padding: 11px 13px; font-family: inherit; font-size: 1rem;
  line-height: 1.4; max-height: 140px; color: var(--gris-texte, #2C3E3E);
}
.boussole-saisie textarea:focus { outline: 2px solid var(--cmq-principal, #5BB9B3); outline-offset: -1px; }
.btn-envoyer {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; border: none;
  background: var(--cmq-principal, #5BB9B3); color: #fff; font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.btn-envoyer:hover:not(:disabled) { background: var(--cmq-fonce, #3A8A85); }
.btn-envoyer:disabled { opacity: .5; cursor: not-allowed; }
.compteur-chars { text-align: right; font-size: 0.72rem; color: var(--gris-moyen, #6B8A8A); margin-top: 4px; min-height: 14px; }
.compteur-chars.limite { color: #c0392b; }

/* ---- Barre d'actions permanente --------------------------- */
.boussole-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.boussole-actions button {
  background: #fff; border: 1px solid var(--cmq-teinte, #AAD9DB); color: var(--cmq-fonce, #3A8A85);
  border-radius: 999px; padding: 8px 16px; font-size: 0.88rem; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.boussole-actions button:hover { background: var(--cmq-clair, #C5E8EA); border-color: var(--cmq-principal, #5BB9B3); }

/* ============================================================
   Modals (onboarding, feedback, info)
   ============================================================ */
.boussole-modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 40, 40, .55);
  display: none; align-items: center; justify-content: center; padding: 18px; z-index: 1000;
}
.boussole-modal-overlay.actif { display: flex; }
.boussole-modal {
  background: #fff; border-radius: 18px; max-width: 560px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 26px 26px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.boussole-modal h2 { font-family: 'Ubuntu', sans-serif; color: var(--cmq-fonce, #3A8A85); margin: 0 0 14px; }
.boussole-modal h3 { color: var(--cmq-fonce, #3A8A85); margin: 16px 0 4px; font-size: 1rem; }
.boussole-modal p { line-height: 1.55; color: var(--gris-texte, #2C3E3E); margin: 8px 0; }
.boussole-modal .modal-note { font-size: 0.82rem; color: var(--gris-moyen, #6B8A8A); display: flex; align-items: center; gap: 6px; margin-top: 14px; }

.onboarding-check { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 16px; cursor: pointer; }
.onboarding-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }

.modal-btn-primary {
  background: var(--cmq-principal, #5BB9B3); color: #fff; border: none; border-radius: 10px;
  padding: 12px 22px; font-size: 1rem; cursor: pointer; font-family: inherit; font-weight: 500;
}
.modal-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.modal-btn-secondary {
  background: transparent; color: var(--gris-moyen, #6B8A8A); border: 1px solid var(--cmq-teinte, #AAD9DB);
  border-radius: 10px; padding: 12px 20px; font-size: 1rem; cursor: pointer; font-family: inherit; margin-left: 8px;
}
.modal-actions { display: flex; flex-wrap: wrap; align-items: center; margin-top: 8px; }

/* feedback */
.fb-ressenti { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.fb-ressenti label { flex: 1; min-width: 90px; border: 1px solid var(--cmq-teinte, #AAD9DB); border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; }
.fb-ressenti input { display: none; }
.fb-ressenti input:checked + span { font-weight: 700; color: var(--cmq-fonce, #3A8A85); }
.fb-ressenti label:has(input:checked) { background: var(--cmq-clair, #C5E8EA); border-color: var(--cmq-principal, #5BB9B3); }
.boussole-modal textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--cmq-teinte, #AAD9DB); border-radius: 10px; padding: 10px; font-family: inherit; font-size: 0.95rem; resize: vertical; min-height: 60px; }
.boussole-modal label.champ-libre { display: block; font-size: 0.9rem; color: var(--gris-texte); margin: 10px 0 4px; }
.fb-merci { text-align: center; color: var(--cmq-fonce, #3A8A85); font-weight: 600; padding: 20px 0; }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 900px) {
  .boussole-main { padding: 16px 10px 36px; }
  .boussole-chat { height: 58vh; }
  .bulle { max-width: 94%; }
}