:root {
  --fond: #f7f3ee;
  --carte: #ffffff;
  --encre: #1f1a17;
  --doux: #5f564e;
  --filet: #e4dcd2;
  --bordeaux: #8e2144;
  --bordeaux-fond: #f6e6ea;
  --or: #a9852e;
  --or-fond: #f5ecd8;
  --ok: #1f5e3a;
  --alerte: #9a3412;
  --sur-bordeaux: #ffffff;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #16120f; --carte: #211b17; --encre: #f2ebe3; --doux: #b8ada2; --filet: #3a312a;
    --bordeaux: #e58aa3; --bordeaux-fond: #3a1c25; --or: #e0bd6a; --or-fond: #3a2f17; --ok: #8fd3a8; --alerte: #f0a37a; --sur-bordeaux: #1a1012;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #16120f; --carte: #211b17; --encre: #f2ebe3; --doux: #b8ada2; --filet: #3a312a;
  --bordeaux: #e58aa3; --bordeaux-fond: #3a1c25; --or: #e0bd6a; --or-fond: #3a2f17; --ok: #8fd3a8; --alerte: #f0a37a; --sur-bordeaux: #1a1012;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.55 var(--sans); }
[hidden] { display: none !important; }

.haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 18px 16px 6px; }
.marque { display: flex; align-items: baseline; gap: 10px; }
.marque .nom { font: 700 clamp(24px, 7vw, 30px)/1 var(--serif); color: var(--bordeaux); letter-spacing: .2px; }
.marque .sous { font: 600 12px/1 var(--sans); color: var(--or); text-transform: uppercase; letter-spacing: 1.6px; }
.haut-actions { display: flex; gap: 14px; white-space: nowrap; margin-left: auto; }

main { max-width: 1180px; margin: 0 auto; padding: 8px 16px 64px; }
h1, h2 { font-family: var(--serif); font-weight: 600; color: var(--encre); }
h1 { font-size: 34px; margin: 0 0 6px; }
h2 { font-size: 24px; margin: 0 0 12px; }
.accroche { color: var(--doux); margin: 4px 0 18px; max-width: 70ch; }

.grille { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.colonne { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 860px) { .grille { grid-template-columns: 1fr; } }

.carte { background: var(--carte); border: 1px solid var(--filet); border-radius: 18px; padding: 20px; min-width: 0; }
.carte.etroite { max-width: 460px; margin: 40px auto; }
#cites { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
@media (max-width: 860px) { #cites { position: static; max-height: none; } }

label, legend { font-weight: 600; font-size: 14px; }
.champ { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; }
.ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ligne > input, .ligne > select { flex: 1 1 200px; min-width: 0; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .deux { grid-template-columns: 1fr; } }

input, select, textarea { font: inherit; color: var(--encre); background: var(--fond); border: 1px solid var(--filet); border-radius: 12px; padding: 10px 12px; width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
input[type="file"] { padding: 8px; }

fieldset { border: 0; padding: 0; margin: 0 0 6px; }
fieldset.pilules { display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.pilules legend { width: 100%; margin-bottom: 6px; }
fieldset.pilules label { position: relative; font-weight: 500; }
fieldset.pilules input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
fieldset.pilules span { display: inline-flex; flex-direction: column; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--filet); background: var(--fond); cursor: pointer; line-height: 1.25; }
fieldset.pilules span small { font-weight: 400; color: var(--doux); font-size: 12px; }
fieldset.pilules input:checked + span { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--sur-bordeaux); }
fieldset.pilules input:checked + span small { color: var(--sur-bordeaux); opacity: .85; }
fieldset.pilules input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; }
fieldset.petites span { padding: 5px 12px; font-size: 14px; }

.aide { color: var(--doux); font-size: 14px; margin: 2px 0 14px; }
.case { display: flex; gap: 8px; align-items: center; font-weight: 500; margin: 6px 0 12px; }
.case input { width: auto; }
.contexte { font-size: 14px; color: var(--doux); background: var(--or-fond); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.contexte:empty { display: none; }
.contexte strong { color: var(--encre); }
.message { min-height: 1.2em; font-size: 14px; color: var(--alerte); margin: 8px 0 0; }
.message.ok { color: var(--ok); }
.encadre { border: 1px dashed var(--filet); border-radius: 14px; padding: 14px; margin: 0 0 14px; display: grid; gap: 10px; }

.pilule { font: 600 15px/1 var(--sans); border-radius: 999px; padding: 11px 20px; border: 1px solid var(--bordeaux); background: transparent; color: var(--bordeaux); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.pilule.principale { background: var(--bordeaux); color: var(--sur-bordeaux); }
.pilule:disabled { opacity: .55; cursor: progress; }
.lien { font: inherit; font-size: 14px; background: none; border: 0; padding: 4px 0; color: var(--doux); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien:hover { color: var(--bordeaux); }

.docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.docs li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.docs .titre-doc { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: var(--or-fond); color: var(--encre); }
.badge.interne { background: var(--bordeaux-fond); color: var(--bordeaux); }

.etat-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.etat { font-weight: 600; font-size: 14px; padding: 4px 12px; border-radius: 999px; background: var(--or-fond); }
.etat[data-etat="ecoute"] { background: var(--bordeaux-fond); color: var(--bordeaux); }
.etat[data-etat="parle"] { background: var(--bordeaux); color: var(--sur-bordeaux); }
.total { font-size: 14px; color: var(--doux); }

.zone-micro { display: grid; justify-items: center; gap: 4px; margin: 18px 0 10px; }
.micro { width: 168px; height: 168px; border-radius: 50%; border: 0; background: var(--bordeaux); color: var(--sur-bordeaux); font: 600 17px/1.25 var(--sans); padding: 18px; cursor: pointer; box-shadow: 0 10px 30px rgba(142, 33, 68, .28); touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .12s ease; }
.micro.actif { transform: scale(1.06); box-shadow: 0 0 0 10px var(--bordeaux-fond), 0 10px 30px rgba(142, 33, 68, .35); }
.micro:disabled { opacity: .6; }

.fil { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.fil li { border-top: 1px solid var(--filet); padding-top: 12px; }
.fil .q { font-weight: 600; margin: 0 0 4px; }
.fil .q::before { content: attr(data-qui) " · "; color: var(--doux); font-weight: 500; }
.fil .r { margin: 0; }
.fil .r::before { content: attr(data-qui) " · "; color: var(--bordeaux); font-weight: 600; }
.fil .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--doux); margin-top: 6px; }
.puce-bloc { font: 600 12px/1 var(--sans); border-radius: 999px; padding: 5px 10px; border: 1px solid var(--or); background: var(--or-fond); color: var(--encre); cursor: pointer; }
.score { background: var(--or-fond); border-radius: 12px; padding: 10px 12px; font-weight: 600; }

.actions-seance { display: flex; justify-content: flex-end; gap: 18px; margin-top: 14px; }

#liste-cites { display: grid; gap: 12px; }
.bloc-cite { border: 1px solid var(--filet); border-radius: 14px; padding: 12px; }
.bloc-cite.vient { border-color: var(--or); box-shadow: 0 0 0 3px var(--or-fond); }
.bloc-cite h3 { font: 600 19px/1.2 var(--serif); margin: 0 0 4px; }
.bloc-cite .doc { font-size: 12px; color: var(--doux); margin: 0 0 8px; }
.bloc-cite pre { white-space: pre-wrap; font: 14px/1.5 var(--sans); margin: 0; overflow-wrap: anywhere; }

.seances { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.seances button { width: 100%; text-align: left; font: inherit; font-size: 14px; background: var(--fond); color: var(--encre); border: 1px solid var(--filet); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.seances button[aria-pressed="true"] { border-color: var(--bordeaux); box-shadow: 0 0 0 2px var(--bordeaux-fond); }
.compte-rendu { border-top: 1px solid var(--filet); margin-top: 12px; padding-top: 12px; }
.compte-rendu h3 { font: 600 22px/1.2 var(--serif); margin: 0 0 6px; }
.compte-rendu h4 { margin: 14px 0 4px; font-size: 15px; }
.compte-rendu table { border-collapse: collapse; width: 100%; font-size: 14px; }
.compte-rendu td, .compte-rendu th { border-bottom: 1px solid var(--filet); padding: 6px; text-align: left; vertical-align: top; }
textarea { resize: vertical; margin: 6px 0; }