:root {
  --fond: #F6F4EF;
  --surface: #FFFFFF;
  --encre: #22201C;
  --doux: #6B655C;
  --trait: #E4DFD6;
  --accent: #9A3B2E;
  --accent-clair: #F6E6E2;
  --alerte: #9A5B2E;
  --alerte-clair: #F6ECE1;
  --titre: "Fraunces", Georgia, serif;
  --texte: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.6 var(--texte);
  display: flex;
  justify-content: center;
}
main {
  width: 100%;
  max-width: 720px;
  padding: 56px 24px 80px;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.tete { margin-bottom: 32px; }
.eyebrow {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
h1 {
  margin: 0 0 12px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.7rem);
  letter-spacing: -0.01em;
}
.sous { margin: 0; color: var(--doux); max-width: 56ch; }

.chercher {
  display: flex;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 1px 2px rgba(34, 32, 28, 0.04);
}
.chercher input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 10px 12px;
  min-width: 0;
}
.chercher input:focus { outline: none; }
.chercher button {
  flex: none;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: 600 0.98rem var(--texte);
  padding: 11px 20px;
  border-radius: 10px;
  cursor: pointer;
}
.chercher button:hover { background: #7C2E24; }
.chercher button:disabled { background: var(--doux); cursor: wait; }

.exemples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.exemples button {
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--doux);
  font: 0.9rem var(--texte);
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
}
.exemples button:hover { border-color: var(--accent); color: var(--accent); }

#zone { margin-top: 28px; }
.attente { color: var(--doux); }
.attente.pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 1px 2px rgba(34, 32, 28, 0.04);
}
.pose {
  font-family: var(--titre);
  font-size: 1.25rem;
  margin: 0 0 16px;
}
.reponse { margin: 0 0 20px; white-space: pre-wrap; }

.badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.badge.oui { background: var(--accent-clair); color: var(--accent); }
.badge.non { background: var(--alerte-clair); color: var(--alerte); }

.citations { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.citations li {
  border-left: 3px solid var(--accent);
  background: var(--fond);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  color: var(--encre);
  font-size: 0.94rem;
}
.citations-titre {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--doux);
  font-weight: 600;
  margin: 0 0 10px;
}
.erreur { color: var(--alerte); background: var(--alerte-clair); padding: 12px 16px; border-radius: 10px; }

@media (max-width: 520px) {
  main { padding: 36px 16px 60px; }
  .chercher { flex-direction: column; }
  .chercher button { width: 100%; }
}




/* ---------- Navigation entre les onglets ---------- */
.onglets { display: flex; gap: 6px; margin-bottom: 28px; }
.onglets a {
  text-decoration: none; color: var(--doux); font-weight: 600; font-size: 0.95rem;
  padding: 8px 14px; border-radius: 999px;
}
.onglets a:hover { background: var(--surface); }
.onglets a.actif { background: var(--accent); color: #fff; }

/* ---------- Onglet documents ---------- */
.doc-liste { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.doc-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 14px 18px;
}
.doc-nom { font-weight: 600; }
.doc-nom small { display: block; font-weight: 400; color: var(--doux); font-size: 0.85rem; }
.doc-suppr {
  border: 1px solid var(--trait); background: none; color: var(--accent);
  border-radius: 8px; padding: 6px 12px; font: 600 0.88rem var(--texte); cursor: pointer;
}
.doc-suppr:hover { border-color: var(--accent); background: var(--accent-clair); }
.ajout { background: var(--surface); border: 1px dashed var(--trait); border-radius: 12px; padding: 20px; }
.ajout p { margin: 0 0 14px; color: var(--doux); }
.ajout .ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ajout input[type=file] { flex: 1; min-width: 0; font: inherit; }
.ajout button {
  border: 0; background: var(--accent); color: #fff; border-radius: 10px;
  padding: 10px 18px; font: 600 0.95rem var(--texte); cursor: pointer;
}
.ajout button:hover { background: #7C2E24; }
.ajout button:disabled { background: var(--doux); cursor: wait; }
.statut { margin-top: 14px; font-size: 0.92rem; }
.statut.ok { color: var(--accent); }
.statut.ko { color: var(--alerte); }








/* ---------- Onglet statistiques ---------- */
.resume { margin-bottom: 8px; }
.resume p { margin: 0 0 6px; }
.bouton-csv {
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre);
  border-radius: 8px; padding: 8px 14px; font: 600 0.9rem var(--texte); cursor: pointer; margin-bottom: 18px;
}
.bouton-csv:hover { border-color: var(--accent); color: var(--accent); }
.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.journal li {
  display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; padding: 10px 14px;
}
.j-badge { font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; text-align: center; }
.j-badge.oui { background: var(--accent-clair); color: var(--accent); }
.j-badge.non { background: var(--alerte-clair); color: var(--alerte); }
.j-date { color: var(--doux); font-size: 0.82rem; white-space: nowrap; }
@media (max-width: 520px) {
  .journal li { grid-template-columns: 1fr; gap: 4px; }
}





/* ---------- Onglets réservés à l'admin ---------- */
.admin-seul { display: none; }
.onglets.deverrouille .admin-seul { display: inline-block; }
.lien-admin {
  margin-left: auto; border: 0; background: none; color: var(--doux);
  font: 0.85rem var(--texte); cursor: pointer; text-decoration: underline;
}
.onglets.deverrouille .lien-admin { color: var(--accent); }


.journal li { display: block; }                      /* empile la tête + la réponse */
.j-tete { display: flex; align-items: center; gap: .6rem; }
.j-tete .j-q { flex: 1; }                             /* la question pousse date + poubelle à droite */
.j-rep { margin: .4rem 0 .2rem; }
.j-rep summary { cursor: pointer; color: #1F5C73; font-size: .9em; }
.j-rep p { margin: .35rem 0 0; white-space: pre-wrap; line-height: 1.45; }
.j-rep-vide { margin: .35rem 0 .2rem; color: #8a8a8a; font-style: italic; font-size: .85em; }




.modale-fond { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex;
  align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.modale { background: #fff; border-radius: 10px; max-width: 760px; width: 100%;
  max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.modale-tete { display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; border-bottom: 1px solid #e3e9ec; }
.modale-fermer { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: #5B6B75; }
.modale-corps { margin: 0; padding: 1rem; overflow: auto; white-space: pre-wrap;
  word-break: break-word; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: #22303A; }