/* ── Filtres ── */
.filtres {
  display: flex;
  gap: var(--espace-12);
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--espace-10) var(--espace-12);
  margin-bottom: var(--espace-12);
  box-shadow: var(--shadow);
}
.filtre-group { display: flex; flex-direction: column; gap: var(--espace-2); }
.filtres label { font-size: var(--texte-2xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.filtres select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--espace-4) var(--espace-8);
  font-size: var(--texte-s);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  height: 28px;
}
.filtres select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.filtre-sep { width: 1px; background: var(--border); align-self: stretch; margin: var(--espace-4) 0; }
.amalg-chip.ok   { background: var(--green-light); color: var(--green); border: 1px solid var(--green-bord); }
.amalg-chip.warn { background: var(--orange-light); color: var(--orange); border: 1px solid var(--orange-bord); }


/* ── Boutons ── */
.btn-outline {
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: var(--espace-5) var(--espace-11);
  font-size: var(--texte-s);
  cursor: pointer;
  transition: all .15s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.btn-primary {
  background: var(--accent);
  color: var(--sur-accent);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--espace-8) var(--espace-15);
  font-size: var(--texte-m);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover { background: var(--accent-hover); }


/* ── Table wrapper ── */
.table-wrapper-outer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  box-shadow: var(--shadow);
}


/* ── Table planning ── */
.planning-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.planning-table thead th {
  background: var(--surface2);
  border-bottom: 2px solid var(--border);
  padding: var(--espace-7) var(--espace-10);
  text-align: left;
  font-size: var(--texte-2xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}


/* ── Ligne mois ── */
.month-row td {
  background: var(--month-bg);
  color: var(--month-text);
  padding: var(--espace-5) var(--espace-11);
  font-size: var(--texte-s);
  border-top: 2px solid var(--accent-bord);
  border-bottom: 1px solid var(--accent-bord);
}
.month-label { font-weight: 700; margin-right: var(--espace-8); }
.month-count {
  background: var(--compteur-bg);
  color: var(--compteur-txt);
  border-radius: var(--radius-md);
  padding: var(--espace-1) var(--espace-7);
  font-size: var(--texte-2xs);
  font-weight: 700;
  margin-right: var(--espace-10);
}
.month-count.warn { background: var(--orange-light); color: var(--orange); }


/* ── Lignes titres ── */
.livre-row td {
  padding: var(--espace-7) var(--espace-10);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.livre-row:last-child td { border-bottom: none; }
.livre-row { cursor: pointer; transition: background .1s; }
.livre-row:hover td { background: var(--accent-light); }
.livre-row.titre-prov .titre-text { font-style: italic; color: var(--muted); }
/* Ligne estompée : compte ou prestataire inactif, fiche archivée (≠ titre provisoire) */
tr.ligne-estompee > td { color: var(--muted); font-style: italic; }
.titre-text { font-weight: 500; }
.muted { color: var(--muted); }
.texte-petit { font-size: var(--texte-xs); }
.texte-tronque { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-cell { font-size: var(--texte-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }


/* ── Badges ── */
.badge {
  display: inline-block;
  padding: var(--espace-2) var(--espace-8);
  border-radius: var(--radius-lg);
  font-size: var(--texte-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge-signe    { background: var(--green-light);  color: var(--green); }
.badge-nego     { background: var(--yellow-light); color: var(--yellow); }
.badge-proposer { background: var(--orange-light); color: var(--orange); }
.badge-valider  { background: var(--accent-light); color: var(--accent); }
.badge-definir  { background: var(--gray-light);   color: var(--muted); }
.badge-erreur   { background: var(--red-light);    color: var(--red); }


/* ── Tiroir ── */
.drawer-overlay {
  position: fixed; inset: 0;
  background: var(--voile);
  z-index: 300;
  display: none;
}
.drawer-overlay.open { display: block; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--drawer-w);
  background: var(--surface);
  z-index: 400;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-tiroir);
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  padding: var(--espace-13) var(--espace-14) var(--espace-11);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--surface2);
}
.drawer-titre { font-size: var(--texte-2xl); font-weight: 700; line-height: 1.3; }
.drawer-serie { font-size: var(--texte-s); color: var(--muted); margin-top: var(--espace-2); }
.drawer-close {
  background: none; border: none;
  font-size: var(--texte-3xl); color: var(--muted);
  cursor: pointer; padding: 0 var(--espace-4);
  line-height: 1;
}
.drawer-close:hover { color: var(--text); }
.dtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--espace-14); }
.tab-pane.active { display: block; }
.drawer-footer {
  padding: var(--espace-11) var(--espace-14);
  border-top: 1px solid var(--border);
  background: var(--surface2);
  display: flex;
  align-items: center;
  gap: var(--espace-11);
}
.save-status { font-size: var(--texte-s); color: var(--muted); }
.save-status.ok  { color: var(--green); }
.save-status.err { color: var(--red); }


/* ── Formulaire dans le tiroir ── */
.form-section {
  margin-bottom: var(--espace-15);
}
.form-section-title {
  font-size: var(--texte-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: var(--espace-10);
  padding-bottom: var(--espace-4);
  border-bottom: 1px solid var(--border);
}
.form-row {
  display: flex;
  gap: var(--espace-10);
  margin-bottom: var(--espace-8);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  flex: 1;
}
.form-field label {
  font-size: var(--texte-xs);
  font-weight: 600;
  color: var(--muted);
}
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--espace-6) var(--espace-8);
  font-size: var(--texte-m);
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  transition: border .15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.form-field textarea { resize: vertical; min-height: 60px; }
.form-field.full { flex: 0 0 100%; }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--espace-8);
  margin-bottom: var(--espace-8);
}
.checkbox-row input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; }
.checkbox-row label { font-size: var(--texte-m); color: var(--text); cursor: pointer; }


/* ── CEP ── */
.ligne-liste {
  display: flex;
  gap: var(--espace-6);
  align-items: center;
  margin-bottom: var(--espace-5);
}
.ligne-liste input { flex: 1; }
.ligne-liste input.champ-montant { width: 90px; flex: 0 0 90px; text-align: right; }
.btn-rm {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  width: 24px; height: 24px;
  cursor: pointer;
  font-size: var(--texte-l);
  display: flex; align-items: center; justify-content: center;
}
.btn-rm:hover { border-color: var(--red); color: var(--red); }
.btn-ajout {
  background: none;
  border: 1px dashed var(--border2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: var(--espace-4) var(--espace-10);
  font-size: var(--texte-s);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all .15s;
}
.btn-ajout:hover { border-color: var(--accent); color: var(--accent); }


/* ── Modal config ── */
.config-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, 94vw);
  max-height: 84vh;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.config-body { flex: 1; overflow-y: auto; padding: var(--espace-14); }
.config-rc-row .btn-rm { margin-bottom: var(--espace-4); }


/* ── Calendrier des offices ── */
.cal-case:not(.vide):hover { background: var(--accent-light); border-color: var(--accent); }
.cal-case.vide { cursor: default; }


/* ── Contributeurs (onglet Description) ──
   Une ligne = une personne : son nom, puis ses rôles en cases à cocher. Les
   rôles passent à la ligne quand la place manque — le tiroir est étroit, et
   une personne peut en porter plusieurs. */
.contributeur-roles .puce-choix { font-size: var(--texte-s); }


/* ── Bibliographie interne (fiche auteur) ── */
.biblio-liste { display: flex; flex-direction: column; gap: var(--espace-3); }
.biblio-item { font-size: var(--texte-m); padding: var(--espace-3) 0; border-bottom: 1px solid var(--border); }
.biblio-item:last-child { border-bottom: none; }


/* ── Visuels / uploads ── */
.upload-zone {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 90px; height: 120px; padding: var(--espace-6);
  border: 1px dashed var(--border2); border-radius: var(--radius-sm);
  color: var(--muted); font-size: var(--texte-s); cursor: pointer; transition: all .15s;
}
.upload-zone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.upload-zone.petite { width: 90px; }


/* ── ISBN ── */
.isbn-check.ok { color: var(--green); }


/* ── Validation du CEP ── */
.cep-validation.valide {
  border-style: solid;
  border-color: var(--green);
  background: var(--green-light);
}


/* ── Jalons « Fait ! » ── */
.puce-choix {
  display: flex; align-items: center; gap: var(--espace-4);
  font-size: var(--texte-s); font-weight: 600; color: var(--muted);
  white-space: nowrap; cursor: pointer;
}
.puce-choix.fait { color: var(--green); }
.puce-choix input { cursor: pointer; }


/* ── Coefficient (4 niveaux de couleur) ── */
.coef-rouge      { color: var(--coef-rouge); }
.coef-orange     { color: var(--coef-orange); }
.coef-vert       { color: var(--coef-vert); }
.coef-vert-fonce { color: var(--coef-vert-fonce); }
.cep-coef.coef-rouge      { color: var(--coef-rouge); }
.cep-coef.coef-orange     { color: var(--coef-orange); }
.cep-coef.coef-vert       { color: var(--coef-vert); }
.cep-coef.coef-vert-fonce { color: var(--coef-vert-fonce); }


/* ── Amalgame : édition inline ── */
.livre-row:hover .amalg-vide { color: var(--accent); }

/* ── Texte d'aide (sous un titre de section, dans les formulaires) ── */
.aide { font-size: var(--texte-xs); color: var(--muted); margin-bottom: var(--espace-10); }


/* ── Statut calculé du livre ── */
.statut-idee      { background: var(--gray-light);   color: var(--muted); }
.statut-dev       { background: var(--accent-light); color: var(--accent); }
.statut-finaliser { background: var(--yellow-light); color: var(--yellow); }
.statut-valide    { background: var(--statut-valide-bg); color: var(--statut-valide-txt); }
.statut-fab       { background: var(--orange-light); color: var(--orange); }
.statut-dispo     { background: var(--green-light);  color: var(--green); }
.statut-paru      { background: var(--green);        color: var(--sur-accent); }
.statut-termine   { background: var(--statut-termine-bg); color: var(--statut-termine-txt); text-decoration: line-through; }


/* ── Badges d'état (Entrée Kiosque / Fiche produit) ── */
.etat-brouillon { background: var(--yellow-light); color: var(--yellow); }
.etat-validée   { background: var(--green-light);  color: var(--green); }


/* ── Alertes ── */
.alerte-ligne { font-size: var(--texte-s); color: var(--orange); padding: var(--espace-1) 0; }
/* Fiche sautée à l'affichage : un titre qui disparaît sans bruit serait pire
   qu'une erreur. Jetons existants, déclarés dans les trois thèmes. */
.bandeau-illisible {
  background: var(--red-light);
  color: var(--red);
  border: 1px solid var(--red-bord);
  border-radius: var(--radius);
  padding: var(--espace-10) var(--espace-12);
  margin-bottom: var(--espace-11);
  font-size: var(--texte-m);
}
.bandeau-illisible code { background: none; color: inherit; font-weight: 700; }


/* ── Échéances ── */
.echeance-retard td { background: var(--red-light); }
.echeance-retard:hover td { background: var(--red-survol); }
.echeance-retard .date-cell { color: var(--red); font-weight: 700; }
.badge-ech-diffuseur { background: var(--orange-light); color: var(--orange); }
.badge-ech-stock     { background: var(--accent-light); color: var(--accent); }
.badge-ech-parution  { background: var(--green-light);  color: var(--green); }
.badge-ech-reunion   { background: var(--yellow-light); color: var(--yellow); }


/* ── Archives ── */
.btn-annuler.actif { border-color: var(--orange); color: var(--orange); background: var(--orange-light); }


/* ── Accueil (tableau de bord) ── */
.accueil-bloc { margin-bottom: var(--espace-16); }
.accueil-titre {
  font-size: var(--texte-s); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 var(--espace-8);
}
.accueil-compteur.warn { background: var(--orange-light); border-color: var(--orange-bord); color: var(--orange); }
.carte-legende .badge { font-size: var(--texte-2xs); padding: var(--espace-1) var(--espace-6); }
.carte-indics {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--espace-3) var(--espace-11);
  margin: 0; font-size: var(--texte-s);
}
.carte-indics dt { color: var(--muted); }
.carte-indics dd { margin: 0; }
.carte-indics a { color: var(--accent); text-decoration: none; }
.carte-indics a.muted { color: var(--muted); }
/* Filtre venu de l'accueil, rappelé en tête du planning / des documents */
.filtre-actif {
  display: inline-flex; align-items: center; gap: var(--espace-8); font-size: var(--texte-s);
  background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-bord);
  border-radius: var(--radius-xl); padding: var(--espace-3) var(--espace-10); margin: 0 0 var(--espace-10);
}
.filtre-actif a { color: var(--accent); text-decoration: none; font-weight: 700; }


/* ── Vue d'ensemble (lecture seule) et titre de maison au planning ── */
.planning-maison { font-size: var(--texte-3xl); font-weight: 700; margin: var(--espace-4) 0 var(--espace-10); color: var(--text); }
.badge-lecture {
  display: inline-block; font-size: var(--texte-xs); font-weight: 600;
  padding: var(--espace-2) var(--espace-8); border-radius: var(--radius-lg);
  background: var(--gray-light); color: var(--muted); border: 1px solid var(--border);
}
/* Rien n'est cliquable dans le tableau en lecture seule : ne pas le promettre */
.planning-lecture .livre-row { cursor: default; }
.planning-lecture .livre-row:hover td { background: transparent; }


/* ── Connexion et compte (C1) ── */
.connexion { max-width: 380px; margin: var(--espace-19) auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--espace-17) var(--espace-18); }
.connexion-form .form-field input { width: 100%; }
.connexion-erreur { background: var(--red-light); color: var(--red); border: 1px solid var(--red-bord);
  border-radius: var(--radius-sm); padding: var(--espace-8) var(--espace-10); font-size: var(--texte-m); }
.mon-compte .form-section { margin-bottom: var(--espace-14); }
.nav-compte { display: flex; align-items: center; gap: var(--espace-4); margin-left: var(--espace-8); }
.nav-compte a { color: var(--nav-txt-attenue); text-decoration: none; padding: var(--espace-5) var(--espace-10);
  border-radius: var(--radius-sm); font-size: var(--texte-m); white-space: nowrap; }
.nav-compte a:hover, .nav-compte a.active { background: var(--nav-survol); color: var(--nav-txt); }
.nav-compte form { margin: 0; }
.nav-deconnexion { background: transparent; border: none; color: var(--nav-txt-attenue);
  font-size: var(--texte-xl); cursor: pointer; padding: var(--espace-4) var(--espace-8); border-radius: var(--radius-sm); }
.nav-deconnexion:hover { background: var(--nav-survol); color: var(--nav-txt); }


/* ── Comptes et droits (C1, U5) ── */
.admin-table tr.ligne-estompee input:not([type=checkbox]), .admin-table tr.ligne-estompee select { color: var(--muted); }


/* ── Page d'aide ── */
.aide .form-section { margin-bottom: var(--espace-14); line-height: 1.5; }

/* ── Mises en page ponctuelles (lot P4) ──
   Anciens `style="…"` des gabarits et du JavaScript. Les composants
   nommés (barre-actions, encadre-alerte…) sont à garder ; les utilitaires
   nommés par leur valeur (largeur-90, champ-110…) passeront en jetons (P2)
   ou céderont la place à des classes de page à la passe de design. */
.aligne-bas { align-self: end; }
.aligne-centre { align-items: center; }
.ancre { position: relative; }
.barre-actions { margin-left: auto; display: flex; gap: var(--espace-8); }
.barre-actions-bas { align-items: flex-end; }
.barre-droite { display: flex; justify-content: flex-end; margin-bottom: var(--espace-6); }
.btn-envoi-image { width: auto; height: auto; padding: var(--espace-10) var(--espace-12); }
.cellule-vide { padding: var(--espace-17); }
.champ-100 { flex: 0 0 100px; }
.champ-110 { flex: 0 0 110px; }
.champ-130 { flex: 0 0 130px; }
.champ-140 { flex: 0 0 140px; }
.champ-145 { flex: 0 0 145px; }
.champ-150 { flex: 0 0 150px; }
.champ-70 { flex: 0 0 70px; }
.champ-78 { flex: 0 0 78px; }
.champ-80 { flex: 0 0 80px; }
.champ-90 { flex: 0 0 90px; }
input.champ-9em { flex: 0 0 9em; }
.champ-auto { flex: 0 0 auto; }
.champ-souple-34 { flex: 1 1 34%; }
.champ-souple-46 { flex: 1 1 46%; }
.chargement { color: var(--muted); padding: var(--espace-15); }
.cliquable { cursor: pointer; }
.encadre-alerte { border-left: 3px solid var(--warn); padding-left: var(--espace-10); }
.encadre-ok { border-left: 3px solid var(--green); padding-left: var(--espace-10); }
.largeur-100 { width: 100px; }
.largeur-110 { width: 110px; }
.largeur-120 { width: 120px; }
.largeur-130 { width: 130px; }
.largeur-140 { width: 140px; }
.largeur-150 { width: 150px; }
.largeur-200 { width: 200px; }
.largeur-220 { width: 220px; }
.largeur-240 { width: 240px; }
.largeur-260 { width: 260px; }
.largeur-28 { width: 28px; }
.largeur-330 { width: 330px; }
.largeur-34pc { width: 34%; }
.largeur-40 { width: 40px; }
.largeur-60 { width: 60px; }
.largeur-64 { width: 64px; }
.largeur-70 { width: 70px; }
.largeur-80 { width: 80px; }
.largeur-90 { width: 90px; }
.largeur-max-110 { max-width: 110px; }
.largeur-max-120 { max-width: 120px; }
.largeur-max-340 { max-width: 340px; }
.largeur-max-80 { max-width: 80px; }
.liste-jetons { font-size: var(--texte-code); padding: var(--espace-4) 0; max-width: 420px; }
.marge-bas-14 { margin-bottom: var(--espace-12); }
.marge-gauche-8 { margin-left: var(--espace-8); }
.marge-haut-10 { margin-top: var(--espace-10); }
.marge-haut-12 { margin-top: var(--espace-11); }
.marge-haut-28 { margin-top: var(--espace-18); }
.marge-haut-8 { margin-top: var(--espace-8); }
.menu-resume { list-style: none; cursor: pointer; }
.modale-etroite { width: min(460px, 94vw); }
.modale-large { width: min(680px, 94vw); }
.modale-tres-large { width: min(720px, 94vw); }
.non-cliquable { cursor: default; }
.note-vide { padding: var(--espace-13); color: var(--muted); }
.pied-modale { display: flex; justify-content: flex-end; gap: var(--espace-8); margin-top: var(--espace-11); }
.pousse-droite { margin-left: auto; }
.puces-roles { display: flex; flex-wrap: wrap; gap: var(--espace-10); padding: var(--espace-4) 0; }
.rangee { display: flex; align-items: center; gap: var(--espace-11); }
.rangee-serree { gap: var(--espace-4); }
.rangee-titre { display: flex; align-items: baseline; gap: var(--espace-12); }
.retrait-14 { padding: var(--espace-12); }
.sans-marge { margin: 0; }
.sans-retour { white-space: nowrap; }
.texte-danger { color: var(--danger); }
.titre-page { margin: 0; font-size: var(--texte-titre-page); }
textarea.zone-100 { min-height: 100px; }
textarea.zone-50 { min-height: 50px; }
textarea.zone-60 { min-height: 60px; }
textarea.zone-70 { min-height: 70px; }
textarea.zone-80 { min-height: 80px; }
textarea.zone-90 { min-height: 90px; }
textarea.zone-texte-haute { min-height: 260px; font-family: inherit; }