:root {
  --bleu-nuit: #14120F;
  --bleu-nuit-clair: #26221C;
  --rouille: #A9832E;
  --rouille-fonce: #8C6D26;
  --sable: #F3F2EE;
  --encre: #14181F;
  --gris-texte: #5B5F68;
  --bordure: #E2E0D9;
  --blanc: #FFFFFF;
  --vert-ok: #2E7D5B;
  --rouge-erreur: #B3402D;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--sable);
  color: var(--encre);
}

h1, .marque-texte, .entete, .titre-legal {
  font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.page-centre {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
}

.carte h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.carte p.sous-titre {
  color: var(--gris-texte);
  font-size: 14px;
  margin: 0 0 24px;
}

label {
  display: block;
  font-size: 13px;
  color: var(--gris-texte);
  margin-bottom: 6px;
}

input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], textarea, select {
  width: 100%;
  min-width: 0; /* empêche un champ dans un flex/grid de forcer la page à déborder sur petit écran */
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  /* 16px minimum : en dessous, Safari sur iPhone zoome automatiquement la page au focus du champ. */
  font-size: 16px;
  margin-bottom: 16px;
}

#champMessage {
  font-size: 16px; /* même raison : évite le zoom automatique iOS quand on tape dans le chat */
}

html, body { overflow-x: hidden; max-width: 100%; }

input:focus {
  outline: none;
  border-color: var(--bleu-nuit);
}

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 16px;
}

.bouton-principal {
  background: var(--bleu-nuit);
  color: var(--blanc);
  width: 100%;
}

.bouton-principal:hover { background: var(--bleu-nuit-clair); }

.bouton-rouille {
  background: var(--rouille);
  color: var(--blanc);
}

.bouton-rouille:hover { background: var(--rouille-fonce); }

.lien-bas {
  text-align: center;
  font-size: 13px;
  color: var(--gris-texte);
  margin-top: 16px;
}

.lien-bas a { color: var(--bleu-nuit); text-decoration: none; font-weight: 600; }

.erreur {
  background: #FBEAE6;
  color: var(--rouge-erreur);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

/* ---------- Application (chat) ---------- */

.appli {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100vh;
  height: 100dvh; /* unité qui s'adapte au clavier/à la barre du navigateur sur mobile, évite que tout "saute" */
}

body.page-app { overflow: hidden; }
html:has(> body.page-app) { overflow: hidden; height: 100%; }

.barre-laterale {
  background: var(--bleu-nuit);
  color: var(--blanc);
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0; /* essentiel : sans ça, la barre grandit avec son contenu au lieu de défiler toute seule, et fait défiler toute la page (donc "monter" avec la discussion) */
}

.barre-laterale .marque {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.barre-laterale .marque img {
  width: 30px;
  height: 30px;
  flex: none;
}

.barre-laterale .marque .marque-texte {
  font-size: 15px;
  line-height: 1.25;
  color: var(--blanc);
}

.marque-page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.marque-page img { width: 34px; height: 34px; }

.marque-page .marque-texte {
  font-size: 17px;
  color: var(--bleu-nuit);
}

.pied-legal {
  text-align: center;
  font-size: 12px;
  color: var(--gris-texte);
  margin-top: 20px;
}

.pied-legal a {
  color: var(--gris-texte);
  text-decoration: underline;
  margin: 0 6px;
}

.pied-legal a:hover { color: var(--bleu-nuit); }

.liens-legal-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  padding: 10px 12px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 8px;
}

.liens-legal-barre a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}

.liens-legal-barre a:hover { color: rgba(255,255,255,0.85); }

/* ---------- Pages légales ---------- */

.page-legale {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.page-legale .retour {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--bleu-nuit);
  text-decoration: none;
  font-weight: 600;
}

.page-legale h1 {
  font-size: 26px;
  margin-bottom: 4px;
}

.page-legale .maj {
  color: var(--gris-texte);
  font-size: 13px;
  margin-bottom: 32px;
}

.page-legale h2 {
  font-size: 16px;
  margin-top: 32px;
  margin-bottom: 10px;
  color: var(--bleu-nuit);
}

.page-legale p, .page-legale li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--encre);
}

.page-legale .a-completer {
  background: #FBF3E3;
  border: 1px solid #E9D9AF;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: #6B4E14;
  margin-bottom: 28px;
  line-height: 1.6;
}

.champ-case {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--gris-texte);
  line-height: 1.5;
  margin: -6px 0 16px;
}

.champ-case input {
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: none;
  margin: 0;
  accent-color: var(--bleu-nuit);
  cursor: pointer;
}
.champ-case a { color: var(--bleu-nuit); font-weight: 600; }

.agent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}

.agent-item:hover { background: rgba(255,255,255,0.08); }
.agent-item.actif { background: var(--rouille); color: var(--blanc); }

.onglet-agent-chine { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bordure); background: white; cursor: pointer; font-size: 13px; color: var(--encre); }
.onglet-agent-chine.actif { background: var(--bleu-nuit); color: white; border-color: var(--bleu-nuit); }

/* Surbrillance de la section actuellement affichée dans le menu (Découvrir, Vidéos,
   Livres, Projet sur mesure, Création de société, Accompagnement en Chine, Réserver un
   appel...). Sans ça, rien n'indiquait quelle section était ouverte. */
.bouton-menu-section.actif-menu { background: var(--rouille) !important; color: var(--blanc) !important; }

.agent-item .titre { font-size: 14px; font-weight: 600; }
.agent-item .desc { font-size: 12px; opacity: 0.8; }

.deconnexion {
  margin-top: auto;
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);
}

.zone-chat {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  min-height: 0; /* idem : sinon le contenu pousse la page entière au lieu de défiler dans son propre cadre */
}

.zone-chat .entete {
  padding: 16px 24px;
  background: var(--bleu-nuit);
  color: var(--blanc);
  border-bottom: 2px solid var(--rouille);
  font-weight: 600;
}

.messages {
  flex: 1;
  min-height: 0; /* LE point clé : permet enfin à cette zone de défiler toute seule sans entraîner le reste de la page */
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.msg {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.msg.utilisateur {
  align-self: flex-end;
  background: var(--bleu-nuit);
  color: var(--blanc);
}

.msg.assistant {
  align-self: flex-start;
  background: var(--sable);
  border: 1px solid var(--bordure);
}

.msg a { color: var(--bleu-nuit); text-decoration: underline; word-break: break-word; }
.msg.utilisateur a { color: var(--blanc); }

.source-badge {
  align-self: flex-start;
  font-size: 12px;
  color: var(--gris-texte);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -8px;
}

/* ---------- Cartes de l'écran "Découvrir le site" ---------- */

.grille-agents-presentation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

@media (min-width: 700px) {
  .grille-agents-presentation {
    grid-template-columns: repeat(4, 1fr);
  }
}

.carte-agent-presentation {
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1c1a16, var(--bleu-nuit));
  border: 1px solid var(--rouille);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.carte-agent-presentation:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(169, 131, 46, 0.25);
}

.carte-agent-presentation .icone {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(169, 131, 46, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rouille);
  font-size: 16px;
  margin-bottom: 10px;
}

.carte-agent-presentation .nom { color: var(--blanc); font-weight: 700; font-size: 13px; line-height: 1.3; }
.carte-agent-presentation .desc { color: rgba(255,255,255,0.65); font-size: 11.5px; margin-top: 4px; line-height: 1.3; }

.section-titre-presentation {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--rouille);
  font-weight: 700;
  margin: 24px 0 12px;
}

.carte-feature-presentation {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--sable);
  border: 1px solid var(--bordure);
  margin-bottom: 10px;
}

.carte-feature-presentation .icone { color: var(--rouille); font-size: 20px; flex: none; }
.carte-feature-presentation .nom { font-weight: 700; font-size: 13px; color: var(--encre); }
.carte-feature-presentation .desc { font-size: 12px; color: var(--gris-texte); margin-top: 2px; }

.zone-saisie {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--bordure);
}

.zone-saisie input {
  flex: 1;
  margin-bottom: 0;
}

.zone-saisie .bouton-principal {
  width: 44px;
  min-width: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bandeau-abonnement {
  background: #FAEEDA;
  color: #633806;
  padding: 16px 24px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------- Message de confirmation des formulaires (toujours bien centré) ---------- */

.message-formulaire {
  text-align: center;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Indicateur "l'agent est en train de répondre" ---------- */

.indicateur-frappe {
  color: var(--gris-texte);
  font-style: italic;
}

.indicateur-frappe .points span {
  animation: clignoter-point 1.2s infinite;
  opacity: 0;
}
.indicateur-frappe .points span:nth-child(2) { animation-delay: 0.2s; }
.indicateur-frappe .points span:nth-child(3) { animation-delay: 0.4s; }

@keyframes clignoter-point {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* ---------- Menu mobile (barre latérale repliable) ---------- */

.bouton-menu-mobile {
  display: none;
  background: none;
  border: none;
  color: var(--blanc);
  font-size: 20px;
  padding: 4px 8px 4px 0;
  cursor: pointer;
  vertical-align: middle;
}

.voile-menu-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 58;
}

/* Barre de navigation du bas (mobile uniquement) : deux boutons, "Menu" pour choisir
   un agent ou naviguer, "Ex questions" pour voir des exemples de questions pour
   l'agent en cours. Cachée par défaut, réactivée dans la media query ci-dessous. */
.barre-navigation-basse {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--bleu-nuit);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-bottom: env(safe-area-inset-bottom);
}

.barre-navigation-basse button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0 6px;
  background: none;
  border: none;
  color: var(--blanc);
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
}

.barre-navigation-basse button i { font-size: 19px; }

.barre-navigation-basse button:active { background: rgba(255,255,255,0.08); }

.barre-navigation-basse .separateur-bas {
  width: 1px;
  background: rgba(255,255,255,0.15);
  margin: 8px 0;
}

/* Voile + fiche pour les exemples de questions (bouton "Ex questions" sur mobile) */
.voile-questions {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 56;
}

.feuille-questions {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(90px + env(safe-area-inset-bottom) + 10px);
  background: var(--blanc);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
  border: 1px solid var(--bordure);
  z-index: 57;
  max-height: 50vh;
  overflow-y: auto;
}

.feuille-questions.ouverte, .voile-questions.ouverte { display: block; }

.feuille-questions .titre {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--encre);
}

.feuille-questions .question {
  background: var(--sable);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--encre);
  cursor: pointer;
}

.feuille-questions .question:active { opacity: 0.6; }

@media (max-width: 860px) {
  .appli {
    grid-template-columns: 1fr;
  }

  /* La liste des agents (et le reste du menu) devient une fiche qui remonte du bas
     de l'écran, plutôt qu'un panneau qui glisse depuis la gauche. */
  .barre-laterale {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    max-height: 75vh;
    width: auto;
    max-width: none;
    border-radius: 20px 20px 0 0;
    z-index: 60;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .barre-laterale.ouverte {
    transform: translateY(0);
  }

  /* L'ancien bouton en haut à gauche est remplacé par la barre du bas (voir plus loin) */
  .bouton-menu-mobile {
    display: none;
  }

  .zone-chat .entete {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Sur mobile, les questions suggérées ne s'affichent plus épinglées en permanence
     (ça prenait trop de place) : elles passent par le bouton "Ex questions" du bas. */
  #zoneSuggestions {
    display: none !important;
  }

  .barre-navigation-basse {
    display: flex;
  }

  /* Remonte très légèrement "Menu" et "Questions" et agrandit légèrement leur texte
     (demande explicite du client) — ne touche à rien d'autre dans la barre. */
  .barre-navigation-basse button {
    transform: translateY(-6px);
    font-size: 13px;
  }

  /* On laisse de la place en bas de la conversation et de la saisie pour que la
     barre de navigation ne cache jamais rien. */
  .zone-chat, #zoneVideos, #zoneFormationGratuite, #zoneLivres, #zoneProjetSurMesure,
  #zoneCreationSociete, #zoneReservationAppel, #zonePresentation {
    padding-bottom: 90px;
  }
}