:root {
  --fond: #f6f7f9; --carte: #fff; --texte: #1d2430; --doux: #5d6878; --ligne: #dfe3ea;
  --accent: #2f6f8f; --accent-fonce: #245670; --alerte: #b05a00; --danger: #b3261e; --ok: #2e7d4f;
  --suspect: #fff4e5; --lecture: #e8f3f8;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #14171c; --carte: #1c2027; --texte: #e6e9ee; --doux: #9aa4b2; --ligne: #2c323c;
    --accent: #6fb3d2; --accent-fonce: #8cc6e0; --suspect: #3a2c17; --lecture: #183140; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
  background: var(--fond); color: var(--texte); }
a { color: var(--accent); }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
h1 small, h2 small { color: var(--doux); font-weight: normal; font-size: .7em; }
.entete { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 10px 16px;
  background: var(--carte); border-bottom: 1px solid var(--ligne); }
.marque { font-weight: 700; text-decoration: none; color: var(--texte); font-size: 1.1em; }
.entete nav { display: flex; flex-wrap: wrap; gap: 4px; }
.entete nav a { padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--texte); }
.entete nav a.actif, .entete nav a:hover { background: var(--lecture); }
.pastille { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 7px; font-size: .8em; }
.pastille.alerte { background: var(--alerte); }
.pied { text-align: center; color: var(--doux); font-size: .85em; padding: 24px 16px; }
.aide { color: var(--doux); }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; padding: 14px; margin: 12px 0; }
.ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.pile { display: flex; flex-direction: column; gap: 8px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .9em; color: var(--doux); }
label.bloc { width: 100%; }
label.case { flex-direction: row; align-items: center; color: var(--texte); }
input, select, textarea, button { font: inherit; color: var(--texte); background: var(--carte);
  border: 1px solid var(--ligne); border-radius: 6px; padding: 6px 8px; }
textarea { width: 100%; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.principal { background: var(--accent); color: #fff; border-color: var(--accent); margin-top: 10px; }
button.danger { color: var(--danger); }
.message { background: var(--lecture); border-radius: 8px; padding: 10px 14px; }
.message.alerte { background: var(--suspect); border-left: 4px solid var(--alerte); }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtres input[type=search] { flex: 1 1 280px; }
.export-filtre { color: var(--doux); font-size: .9em; }
.export-filtre a, .liens-export a { margin-left: 6px; }
.actions-groupees { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions-groupees details { position: relative; }
.actions-groupees summary { cursor: pointer; padding: 6px 10px; border: 1px solid var(--ligne); border-radius: 6px; }
.actions-groupees details[open] > div { position: absolute; z-index: 5; background: var(--carte); padding: 10px;
  border: 1px solid var(--ligne); border-radius: 8px; margin-top: 4px; min-width: 320px; }
.tableau { width: 100%; border-collapse: collapse; background: var(--carte); border-radius: 10px; overflow: hidden; }
.tableau th, .tableau td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau th { font-size: .85em; color: var(--doux); font-weight: 600; }
.tableau .vide { text-align: center; color: var(--doux); padding: 30px; }
.video .titre { font-weight: 600; text-decoration: none; display: block; max-width: 520px; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--doux); font-size: .85em; align-items: center; }
.extrait { display: block; font-size: .85em; color: var(--texte); background: var(--lecture); padding: 2px 6px;
  border-radius: 4px; margin-top: 3px; text-decoration: none; }
.plateforme { text-transform: uppercase; font-size: .75em; letter-spacing: .03em; }
.statut { font-size: .8em; padding: 2px 8px; border-radius: 10px; background: var(--ligne); white-space: nowrap; }
.s-fait { background: #dff1e6; color: var(--ok); }
.s-en_cours { background: #e2eef8; color: var(--accent-fonce); }
.s-acces_refuse, .s-echec, .s-source_invalide { background: #fbe4e2; color: var(--danger); }
.erreur { color: var(--danger); font-size: .8em; overflow-wrap: anywhere; }
.etiquette { border-left: 4px solid var(--c, var(--accent)); padding: 1px 6px; background: var(--fond); border-radius: 4px; font-size: .85em; }
.etiquette.sans { color: var(--doux); border-color: var(--ligne); }
.drapeau { color: var(--alerte); font-size: .8em; }
.drapeau.neutre { color: var(--doux); }
.pagination { display: flex; gap: 6px; margin: 12px 0; }
.pagination a { padding: 4px 9px; border: 1px solid var(--ligne); border-radius: 6px; text-decoration: none; }
.pagination a.actif { background: var(--accent); color: #fff; }
.grille-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
@media (max-width: 860px) { .grille-detail { grid-template-columns: 1fr; } }
.lecteur { position: sticky; top: 0; z-index: 3; background: var(--fond); padding-bottom: 8px; }
.lecteur iframe, #lecteur-youtube { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; }
.barre-transcription { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 8px 0; font-size: .9em; }
.mention { color: var(--alerte); font-weight: 600; }
.segments { list-style: none; padding: 0; margin: 0; }
.segment { background: var(--carte); border: 1px solid var(--ligne); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.segment.suspect { background: var(--suspect); }
.segment.valide { border-left: 4px solid var(--ok); }
.segment.lecture { outline: 2px solid var(--accent); background: var(--lecture); }
.entete-seg { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .85em; }
.temps { font-family: ui-monospace, monospace; padding: 2px 6px; }
.etat { color: var(--doux); margin-left: auto; }
.segment.valide .etat { color: var(--ok); }
.texte { font-size: 1.05em; margin: 6px 0; unicode-bidi: plaintext; }
.origine { font-size: .85em; color: var(--doux); text-decoration: line-through; }
.outils { display: flex; gap: 8px; }
.outils button { font-size: .85em; padding: 3px 8px; }
.edition { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.details { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: .9em; margin: 0; }
.details dt { color: var(--doux); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, monospace; font-size: .85em; overflow-wrap: anywhere; }
.theme { border-left: 6px solid var(--c); }
.entete-theme { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.entete-theme h2 { margin: 0; }
.sujets { padding-left: 18px; }
.sujets li { margin: 4px 0; }
details.enligne { display: inline-block; margin-left: 8px; font-size: .85em; }
.discret { text-decoration: none; color: var(--doux); }
progress { width: 90px; vertical-align: middle; }
.compte { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: .9em; }
.compte form { margin: 0; }
button.lien { border: 0; background: none; color: var(--accent); padding: 0; text-decoration: underline; }
.connexion { max-width: 380px; margin: 40px auto; }
.onglets { display: flex; gap: 4px; margin-bottom: -4px; }
.onglets a { padding: 6px 12px; border-radius: 8px 8px 0 0; text-decoration: none; color: var(--texte); }
.onglets a.actif { background: var(--carte); border: 1px solid var(--ligne); border-bottom: 0; font-weight: 600; }
.partage { font-size: .8em; color: var(--accent-fonce); }
.partage.prive { color: var(--doux); }
.portee { font-size: .5em; font-weight: normal; color: var(--doux); border: 1px solid var(--ligne); border-radius: 8px; padding: 1px 6px; vertical-align: middle; }
.assistant h2 { margin-top: 0; }
.analyse { border-top: 1px solid var(--ligne); padding: 10px 0; }
.entete-analyse { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.entete-analyse small { color: var(--doux); }
.citation { font-family: ui-monospace, monospace; font-size: .8em; margin-left: 4px; padding: 0 4px; border: 1px solid var(--ligne); border-radius: 4px; text-decoration: none; }
.extrait-cite { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--accent); background: var(--fond); unicode-bidi: plaintext; }
.extrait-cite a { font-family: ui-monospace, monospace; font-size: .85em; margin-right: 6px; }
.nv { color: var(--alerte); }
.verdict { font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--ligne); margin-right: 6px; }
.v-oui { background: #dff1e6; color: var(--ok); }
.v-non { background: #fbe4e2; color: var(--danger); }
.v-partiellement, .v-incertain { background: var(--suspect); color: var(--alerte); }
.mention-ia { font-size: .8em; color: var(--alerte); font-style: italic; }
ul.entites { margin-top: 2px; }