:root {
  --fond: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #efede8;
  --texte: #1d1c1a;
  --doux: #6b6862;
  --bord: #dedbd3;
  --accent: #c2410c;
  --accent-texte: #ffffff;
  --auto: #e7eef7;
  --auto-texte: #2b4a6f;
  --perso: #fde9dc;
  --perso-texte: #8a3a12;
  --plateforme: #e6f2e9;
  --plateforme-texte: #2c5d3a;
  --actif: #fff3c4;
  --danger: #b42318;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #151412;
    --surface: #1e1d1a;
    --surface-2: #2a2824;
    --texte: #ece9e2;
    --doux: #a29e95;
    --bord: #36332e;
    --accent: #f97316;
    --accent-texte: #1a1009;
    --auto: #1f2c3b;
    --auto-texte: #b9d1ec;
    --perso: #3a2417;
    --perso-texte: #f7c3a2;
    --plateforme: #1d2e22;
    --plateforme-texte: #b7e0c3;
    --actif: #3d3415;
    --danger: #f97066;
    --ombre: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; }
h1 { font-size: 1.35rem; margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
h2 { font-size: 1rem; margin: 1.4rem 0 .5rem; display: flex; align-items: baseline; gap: .4rem; }
h2:first-child { margin-top: 0; }
kbd { border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; font-size: .8rem; background: var(--surface); }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; padding: .45rem .6rem; min-width: 0;
}
textarea { width: 100%; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, .carte:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* --- En-tête --- */
.entete {
  display: flex; align-items: center; gap: 1.5rem; padding: .7rem 1.25rem;
  background: var(--surface); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 10;
}
.marque { font-weight: 700; text-decoration: none; letter-spacing: -.01em; }
.onglets { display: flex; gap: .25rem; }
.onglets a { text-decoration: none; padding: .35rem .7rem; border-radius: 8px; color: var(--doux); }
.onglets a.actif { background: var(--surface-2); color: var(--texte); font-weight: 600; }
.deconnexion { margin-left: auto; }
main { padding: 1.25rem; max-width: 1500px; margin: 0 auto; }
.message { margin: 1rem 1.25rem 0; padding: .7rem 1rem; border-radius: var(--rayon); background: var(--perso); color: var(--perso-texte); }

/* --- Boutons --- */
.bouton {
  border: 1px solid var(--bord); background: var(--surface); border-radius: 8px; padding: .4rem .8rem;
  cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap;
}
.bouton:hover { background: var(--surface-2); }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 600; }
.bouton.principal:hover { filter: brightness(1.05); }
.bouton.danger { color: var(--danger); }
.lien { background: none; border: 0; padding: 0; color: var(--doux); text-decoration: underline; cursor: pointer; }
.retirer { background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; padding: 0 .15rem; }
.retirer:hover { opacity: 1; }
form.inline { display: inline; }

/* --- Barres, filtres --- */
.barre { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.compte { font-size: .85rem; font-weight: 500; color: var(--doux); }
.filtres { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; flex: 1; }
.filtres input[type=search] { flex: 1 1 260px; }
.aide { color: var(--doux); font-size: .88rem; margin: .25rem 0 1rem; }
.vide { color: var(--doux); padding: 3rem 0; text-align: center; }
.alerte { color: var(--danger); }

/* --- Grille de cartes --- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.carte {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--ombre); transition: transform .15s, opacity .2s;
}
.carte.selection { outline: 3px solid var(--accent); outline-offset: 1px; }
.carte.sortie { opacity: 0; transform: scale(.96); }
.vignette { display: block; position: relative; aspect-ratio: 4 / 5; background: var(--surface-2); }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sans-image { position: absolute; inset: 0; display: grid; place-items: center; color: var(--doux); }
.badges { position: absolute; left: .5rem; bottom: .5rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.badge { background: rgba(0, 0, 0, .66); color: #fff; font-size: .75rem; padding: .1rem .4rem; border-radius: 5px; }
.badge.fort { background: var(--accent); color: var(--accent-texte); }
.corps { padding: .65rem .75rem 0; flex: 1; }
.annonceur { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hook {
  margin: .3rem 0 .5rem; color: var(--doux); font-size: .86rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag { font-size: .74rem; padding: .1rem .45rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .1rem; }
.tag.auto { background: var(--auto); color: var(--auto-texte); }
.tag.perso { background: var(--perso); color: var(--perso-texte); font-weight: 600; }
.tag.plateforme { background: var(--plateforme); color: var(--plateforme-texte); }
.carte .actions { display: flex; gap: .4rem; padding: .65rem .75rem .75rem; align-items: center; }
.carte .actions .bouton { flex: 1; }
.vers-dossier { flex: 1; min-width: 0; padding: .4rem; font-size: .85rem; }

/* --- Bibliothèque --- */
.deux-colonnes { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
.dossiers { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .75rem; position: sticky; top: 4.2rem; }
.dossiers ul { list-style: none; margin: 0; padding: 0 0 0 .8rem; }
.dossiers > ul { padding-left: 0; }
.dossiers a { display: flex; justify-content: space-between; gap: .5rem; text-decoration: none; padding: .3rem .5rem; border-radius: 6px; }
.dossiers a:hover { background: var(--surface-2); }
.dossiers a.actif { background: var(--actif); font-weight: 600; }
.dossiers .tout { margin-bottom: .3rem; }
.dossiers .nb { color: var(--doux); font-size: .8rem; }
.dossiers .nouveau { display: flex; gap: .3rem; margin-top: .7rem; }
.dossiers .nouveau input { flex: 1; }
.outils-dossier { margin-bottom: 1rem; }
.outils-dossier summary { cursor: pointer; color: var(--doux); margin-bottom: .5rem; }
.outils-dossier form { display: flex; gap: .4rem; margin: .4rem 0; flex-wrap: wrap; }

/* --- Fiche --- */
.fiche-entete { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1rem; }
.fiche-entete .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sous-titre { margin: .2rem 0 0; color: var(--doux); }
.lecteur-transcription { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 1.25rem; align-items: start; }
.lecteur video, .lecteur img { width: 100%; max-height: 78vh; border-radius: var(--rayon); background: #000; display: block; }
.note-lecteur { font-size: .82rem; color: var(--doux); }
.transcription {
  list-style: none; margin: 0; padding: .4rem; background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); max-height: 78vh; overflow-y: auto;
}
.transcription li { display: flex; gap: .7rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; }
.transcription li:hover { background: var(--surface-2); }
.transcription li.actif { background: var(--actif); }
.transcription .temps { color: var(--doux); font-variant-numeric: tabular-nums; font-size: .82rem; padding-top: .1rem; min-width: 2.6rem; }
.transcription.vide { padding: 2rem; color: var(--doux); }
.fiche-blocs { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; margin-top: 1.5rem; align-items: start; }
.bloc { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem; }
.variante { border-top: 1px solid var(--bord); padding: .75rem 0; }
.variante:first-of-type { border-top: 0; }
.variante .meta { font-size: .82rem; color: var(--doux); display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.variante .badge { background: var(--surface-2); color: var(--texte); }
.variante .badge.fort { background: var(--accent); color: var(--accent-texte); }
.titre-variante { font-weight: 600; margin: .4rem 0 0; }
.texte-variante { white-space: pre-line; margin: .4rem 0 0; }
.cta { font-size: .85rem; color: var(--doux); margin: .3rem 0 0; }
.ligne { display: flex; gap: .4rem; margin: .5rem 0; }
.ligne input, .ligne select { flex: 1; }
.liste-simple { list-style: none; padding: 0; margin: 0; }
.liste-simple li { padding: .15rem 0; }
.note { border-top: 1px solid var(--bord); padding: .5rem 0; }
.note p { margin: 0 0 .2rem; white-space: pre-line; }

/* --- Connexion --- */
.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.carte-connexion {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 2rem;
  width: min(360px, 100%); display: flex; flex-direction: column; gap: .6rem; box-shadow: var(--ombre);
}
.carte-connexion h1 { margin-bottom: .5rem; }
.erreur { color: var(--danger); margin: 0; }

/* --- Téléphone --- */
@media (max-width: 860px) {
  main { padding: 1rem; }
  .entete { gap: .75rem; padding: .6rem 1rem; flex-wrap: wrap; }
  .deux-colonnes, .lecteur-transcription, .fiche-blocs { grid-template-columns: 1fr; }
  .dossiers { position: static; }
  .transcription { max-height: 50vh; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
  .carte .actions { flex-wrap: wrap; }
  .page-pool .aide kbd { display: none; }
}