:root {
  --bleu: #4472c4;
  --bleu-fonce: #2f5597;
  --vert: #c6efce;
  --gris-clair: #f4f5f7;
  --bordure: #d7dbe0;
  --texte: #222;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texte);
  background: var(--gris-clair);
  font-size: 14px;
}

/* En-tête */
.barre {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bleu-fonce);
  color: #fff;
  padding: 0.6rem 1rem;
}
.barre .logo { color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.barre nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.barre nav a { color: #fff; text-decoration: none; }
.barre nav a:hover { text-decoration: underline; }
.barre .qui { opacity: 0.85; font-style: italic; }
.barre .deco { border: 1px solid rgba(255,255,255,0.5); padding: 0.2rem 0.6rem; border-radius: 4px; }

main { padding: 1rem; }

/* Messages flash */
.flash { padding: 0.6rem 1rem; border-radius: 4px; margin-bottom: 0.8rem; }
.flash.ok { background: #d4edda; color: #155724; }
.flash.erreur { background: #f8d7da; color: #721c24; }

/* Connexion */
.login-box {
  max-width: 320px; margin: 4rem auto; background: #fff;
  padding: 2rem; border-radius: 8px; border: 1px solid var(--bordure);
}
.login-box h1 { margin-top: 0; }
.login-box label { display: block; margin-bottom: 1rem; }
.login-box input { width: 100%; padding: 0.5rem; margin-top: 0.3rem; border: 1px solid var(--bordure); border-radius: 4px; }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
.filtres input[type=search] { flex: 1 1 240px; min-width: 200px; }
.filtres input, .filtres select { padding: 0.45rem; border: 1px solid var(--bordure); border-radius: 4px; }
/* Filtre actif (valeur renseignée) : fond bleu pâle + bordure dans la charte. */
.filtres input.actif, .filtres select.actif {
  background: #eaf0fb;
  border-color: var(--bleu);
  box-shadow: inset 0 0 0 1px var(--bleu);
}

button, .bouton-clair {
  padding: 0.45rem 0.9rem; border: none; border-radius: 4px;
  background: var(--bleu); color: #fff; cursor: pointer; text-decoration: none;
  font-size: 0.9rem;
}
button:hover, .bouton-clair:hover { background: var(--bleu-fonce); }
.bouton-clair { background: #6c757d; }
button.danger { background: #c0392b; }

/* Onglets Films / Séries */
.onglets { display: flex; gap: 0.3rem; margin-bottom: 0.8rem; border-bottom: 2px solid var(--bleu); }
.onglets a {
  padding: 0.5rem 1.2rem; text-decoration: none; color: var(--bleu-fonce);
  background: #e3e8f0; border-radius: 6px 6px 0 0; font-weight: 600;
}
.onglets a.actif { background: var(--bleu); color: #fff; }
.onglets a:hover:not(.actif) { background: #d0d8e6; }

.compteur { color: #555; margin: 0.3rem 0 0.6rem; }

/* Tableau */
.tableau-wrap { overflow-x: auto; }
table.resultats { width: 100%; border-collapse: collapse; background: #fff; }
table.resultats th, table.resultats td {
  padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--bordure); text-align: left;
  white-space: nowrap;
}
table.resultats thead th { background: var(--bleu); color: #fff; position: sticky; top: 0; }
table.resultats thead th a { color: #fff; text-decoration: none; display: block; }
table.resultats td.titre { white-space: normal; min-width: 220px; }
/* Titre d'épisode : peut être long (parfois un nom de release brut). On le laisse
   passer à la ligne avec une largeur plafonnée pour ne pas élargir toute la table
   et pousser la colonne « Sous-dossier » hors de l'écran. */
table.resultats td.titre-ep { white-space: normal; max-width: 320px; }
table.resultats td.centre, th { text-align: center; }
table.resultats td.droite { text-align: right; }
table.resultats tr:hover { background: #eef3fb; }
table.resultats tr.inactif { opacity: 0.5; }
/* Connexions : ligne d'échec (mauvais mot de passe) signalée en rouge discret. */
table.resultats tr.echec td { color: #c0392b; }
.vide { text-align: center; color: #888; padding: 1.5rem; }

td.actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
td.actions a { text-decoration: none; color: var(--bleu); }
td.actions a:hover { text-decoration: underline; }

/* Colonne "Dossier" : chemin tel que vu dans FileZilla */
td.dossier { font-family: Consolas, "Courier New", monospace; font-size: 0.85rem; color: #444; white-space: normal; }

/* Admin */
.carte { background: #fff; border: 1px solid var(--bordure); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.carte h2 { margin-top: 0; }
.ligne-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ligne-form input { padding: 0.45rem; border: 1px solid var(--bordure); border-radius: 4px; }
.case { display: flex; align-items: center; gap: 0.3rem; }
.actions-admin { flex-direction: column; align-items: stretch; }
.actions-admin form { display: flex; gap: 0.3rem; }
.actions-admin input[type=password] { padding: 0.3rem; border: 1px solid var(--bordure); border-radius: 4px; width: 120px; }