:root {
  --turquoise: #35aab9;
  --bleu: #2b74a8;
  --bleu-fonce: #234f74;
  --gris-bg: #eef3f6;
  --gris-bord: #d3dce4;
  --vert: #1f8a4c;
  --rouge: #c0392b;
  --texte: #1c2733;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  color: var(--texte);
  background: var(--gris-bg);
}

header {
  background: #fff;
  color: var(--texte);
  padding: 16px 32px 14px;
  border-bottom: 3px solid var(--turquoise);
}
.entete-haut { display: flex; align-items: center; gap: 16px; }
.logo {
  height: 64px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
header h1 { margin: 0; font-size: 1.4rem; color: var(--bleu-fonce); }
.sous-titre { margin: 4px 0 0; font-size: .9rem; color: #5a6b78; }

main {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  padding: 24px 32px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  .panneau-calculs { position: static; }
}
@media (max-width: 640px) {
  header { padding: 12px 16px; }
  .logo { height: 46px; }
  header h1 { font-size: 1.1rem; line-height: 1.2; }
  .sous-titre { font-size: .8rem; }
  .entete-haut { gap: 10px; }
  main { padding: 14px; gap: 16px; }
  .carte { padding: 14px 15px; }
  .barre-salaries { flex-direction: column; align-items: stretch; }
  .bouton-export { text-align: center; }
}

/* Tableaux : défilement horizontal sur petit écran plutôt que de déborder */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .tableau { min-width: 560px; }

.carte {
  background: #fff;
  border: 1px solid var(--gris-bord);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.carte h2 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: var(--bleu-fonce);
  border-bottom: 2px solid var(--gris-bg);
  padding-bottom: 8px;
}

.grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: end; /* les champs s'alignent par le bas, même si un libellé passe sur 2 lignes */
}
/* Un élément de grille ne descend pas sous la largeur de son contenu tant qu'on ne l'y
   autorise pas. Or un `<select>` réclame la largeur de son option la plus longue
   (« Agent de Maîtrise Administratif ») : il débordait donc sur la colonne voisine, et le
   libellé « Échelon » se retrouvait par-dessus le champ « Qualification » dans la fenêtre
   d'embauche, dont les colonnes ne font que 180 px (constaté le 29/07/2026).
   Même remède que `.piece-lien` (§17.6) : on autorise le rétrécissement, et on plafonne les
   champs à la largeur de leur cellule. */
.grille-champs > label { min-width: 0; }
.grille-champs input, .grille-champs select, .grille-champs textarea { max-width: 100%; }
/* Filet de sécurité : aucune image ne peut élargir la page au-delà de l'écran. Les vignettes
   ont toutes une taille fixe aujourd'hui, mais une image ajoutée plus tard y échapperait. */
img { max-width: 100%; height: auto; }

label {
  display: flex;
  flex-direction: column;
  font-size: .82rem;
  font-weight: 600;
  color: #45525f;
  gap: 5px;
}
input, select {
  font-size: .95rem;
  padding: 8px 10px;
  border: 1px solid var(--gris-bord);
  border-radius: 6px;
  font-family: inherit;
  background: #fff;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(27,94,156,.15);
}
.lecture-seule { background: #f3f6f9; color: #555; }
.aide-champ { font-weight: 400; font-size: .74rem; color: #6a7883; font-style: italic; margin-top: 3px; }
.obligatoire { color: var(--rouge); font-weight: 700; }
.dossier-complet { color: var(--vert); font-weight: 600; font-size: .85em; }
.dossier-incomplet { color: #c77700; font-weight: 600; font-size: .85em; }
.apres-generation { margin-top: 16px; padding: 14px; border: 1px solid var(--vert); border-radius: 8px; background: rgba(31, 138, 76, .08); }
.apres-generation .apres-titre { margin: 0 0 4px; font-weight: 600; }
.apres-generation .apres-sous { margin: 0 0 10px; opacity: .8; font-size: .9em; }
.apres-generation .bouton-principal, .apres-generation .bouton-secondaire { display: block; width: 100%; margin: 6px 0; text-align: center; text-decoration: none; box-sizing: border-box; }

/* Appareil photo intégré (avec cadre guide) pour scanner un document */
.overlay-camera { position: fixed; inset: 0; z-index: 10000; background: #000; }
.overlay-camera[hidden] { display: none; }
#cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cam-cadre {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, .95); border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); pointer-events: none;
}
.cam-cadre.paysage { width: 94vw; max-width: 680px; aspect-ratio: 1.585; }
.cam-cadre.portrait { height: 60vh; max-height: 620px; aspect-ratio: 0.707; }
.cam-hint {
  position: absolute; top: 18px; left: 12px; right: 12px; z-index: 2; margin: 0; text-align: center;
  color: #fff; font-size: .92rem; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}
.cam-actions {
  position: absolute; bottom: 22px; left: 0; right: 0; z-index: 2; padding: 0 12px;
  display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cam-btn {
  padding: 12px 16px; border-radius: 10px; border: none; cursor: pointer;
  font-size: .9rem; font-weight: 700; background: rgba(255, 255, 255, .92); color: #1c2733;
}
.cam-capture { background: var(--turquoise); color: #fff; padding: 14px 22px; }

/* Overlay de progression pendant l'envoi + traitement (recadrage/OCR) d'un document */
.overlay-traitement {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
}
.overlay-traitement[hidden] { display: none; }
.boite-traitement {
  background: #fff; padding: 24px 26px; border-radius: 12px; max-width: 350px; width: 86%;
  text-align: center; box-shadow: 0 14px 44px rgba(0, 0, 0, .32);
}
.boite-traitement p { margin: 12px 0 14px; font-size: .95rem; color: var(--texte); white-space: pre-line; }
.boite-traitement progress { width: 100%; height: 14px; }
.spin-doc {
  width: 40px; height: 40px; margin: 0 auto; border-radius: 50%;
  border: 4px solid var(--gris-bord); border-top-color: var(--turquoise);
  animation: spin-doc 0.9s linear infinite;
}
@keyframes spin-doc { to { transform: rotate(360deg); } }
[data-theme="dark"] .boite-traitement { background: #1c2733; color: #e0e8f0; }
.lien-orig { font-size: .72rem; color: #6a7883; text-decoration: none; margin-left: 2px; }
.lien-orig:hover { color: var(--bleu); text-decoration: underline; }
[data-theme="dark"] .aide-champ { color: #8798a6; }

/* Autocomplétion d'adresse */
.adresse-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--gris-bord);
  border-radius: 0 0 7px 7px;
  max-height: 230px;
  overflow-y: auto;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
}
.adresse-item { padding: 8px 11px; font-size: .85rem; cursor: pointer; }
.adresse-item:hover { background: #eef3f7; }
[data-theme="dark"] .adresse-suggestions { background: #26343f; border-color: #3a4b5b; }
[data-theme="dark"] .adresse-item:hover { background: #2f4150; }

.panneau-calculs { position: sticky; top: 20px; }
.calculs { margin: 0 0 16px; }
.ligne-calcul {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--gris-bord);
}
.ligne-calcul span { font-size: .82rem; color: #566; }
.ligne-calcul b { color: var(--bleu-fonce); text-align: right; }

.apercu {
  background: #f3f6f9;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.apercu h3 { margin: 0 0 6px; font-size: .85rem; color: var(--bleu-fonce); }
.apercu p { margin: 4px 0; font-size: .82rem; line-height: 1.35; }
.apercu em { color: #566; font-style: normal; font-weight: 600; }

.bouton-principal {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 13px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--vert);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.bouton-principal:hover { background: #176b3a; }
.bouton-principal:disabled { background: #9bb0a3; cursor: not-allowed; }

.bouton-secondaire {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--bleu-fonce);
  background: #eef3f7;
  border: 1px solid var(--gris-bord);
  border-radius: 8px;
  cursor: pointer;
}
.bouton-secondaire:hover { background: #e2eaf1; }

.message { margin: 12px 0 0; font-size: .85rem; min-height: 1.2em; }
.message:not(:empty) { padding: 9px 12px; border-radius: 7px; }
.message.ok { color: #14663a; background: #e7f2ea; border: 1px solid #bfe0cb; }
.message.erreur { color: #8a231a; background: #fbe7e4; border: 1px solid #f0c4bd; }

/* Finitions générales : transitions douces */
.bouton-principal, .bouton-mini, .bouton-danger, .bouton-export,
.nav a, .filtres button, .langues button, input, select {
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.bouton-principal:active, .bouton-mini:active, .bouton-export:active { transform: translateY(1px); }
.tableau tbody tr:hover { background: #f6f9fb; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.masque { display: none !important; }
/* Éléments réservés aux administrateurs : masqués pour les gestionnaires */
body.non-admin .admin-only { display: none !important; }

/* --- Navigation & mise en page secondaire --- */
.nav {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.nav a {
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--bleu);
  border: none;
  padding: 6px 13px;
  border-radius: 6px;
  transition: background .15s;
}
.nav a:hover { background: var(--bleu-fonce); }
/* Bouton « Déconnexion » distinct (teinte rouge douce) */
.nav a[href="/logout"] { background: #f3ddd9; color: #a5291c; }
.nav a[href="/logout"]:hover { background: #ecccc6; }

main.colonne-unique { grid-template-columns: 1fr; max-width: 900px; }

.banniere {
  margin: 0;
  padding: 12px 32px;
  background: #e7f2ea;
  color: #14663a;
  border-bottom: 1px solid #bfe0cb;
  font-size: .9rem;
}

/* Bandeau tableau de bord (accueil) */
.bandeau-bord {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  background: #f4f8fb;
  border-bottom: 1px solid var(--gris-bord);
  font-size: .88rem;
  color: #45525f;
}
.tb-item { color: #45525f; text-decoration: none; }
a.tb-item:hover { color: var(--bleu-fonce); text-decoration: underline; }
.tb-item b { color: var(--bleu-fonce); }
.tb-passe { color: var(--rouge) !important; }
.tb-urgent { color: #a5591a !important; }
.tb-proche { color: #8a6d1a !important; }
@media (max-width: 640px) { .bandeau-bord { padding: 10px 16px; } }

/* --- Tableau des fiches candidat --- */
.tableau { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tableau th, .tableau td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--gris-bord);
  vertical-align: middle;
}
.tableau th { color: #566; font-weight: 600; background: #f7fafc; }
.tableau th.triable { cursor: pointer; user-select: none; white-space: nowrap; }
.tableau th.triable:hover { background: #eef3f7; color: var(--bleu-fonce); }
.cellule-lien .lien-col { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lien-input {
  flex: 1;
  min-width: 180px;
  font-size: .78rem;
  padding: 5px 7px;
  color: #445;
  background: #f3f6f9;
}
.bouton-mini {
  padding: 6px 10px;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  background: var(--bleu);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.bouton-mini:hover { background: var(--bleu-fonce); }
.discret { color: #8a97a3; font-size: .82rem; }

/* Cellule « Action » : boutons empilés proprement (Voir / Reprendre / Dossier PDF / Envoyer / ✕).
   Le flex est sur un <div> INTERNE (jamais sur le <td>, sinon la table se décale). */
.actions-col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 140px; }
.actions-col .bouton-mini { display: block; text-align: center; text-decoration: none; }
.actions-col .piece-suppr { align-self: center; margin-top: 2px; }
.bouton-embaucher { background: var(--vert); }
.bouton-embaucher:hover { background: #17663c; }
/* Aligner en haut le contenu des lignes (fiche candidat = ligne haute à cause des pièces). */
#tableau td { vertical-align: top; }
.vide { color: #8a97a3; font-size: .9rem; padding: 8px 0; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
}
.badge-attente { background: #fdf0d5; color: #8a6d1a; }
.badge-soumis { background: #d7e9fb; color: #14568c; }
.badge-repris { background: #dfeee4; color: #1f7a45; }
.badge-langue {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  background: #e7ecf1;
  color: #4a5a6a;
  vertical-align: middle;
}

/* Sélecteur de langue (page candidat) */
.langues { margin-top: 10px; display: flex; gap: 6px; }
.langues button {
  padding: 4px 10px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--bleu-fonce);
  background: #eef3f7;
  border: 1px solid var(--turquoise);
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.langues button:hover { background: #dfeaf1; }
.langues button.actif {
  background: var(--bleu);
  color: #fff;
  border-color: var(--bleu);
  box-shadow: 0 1px 4px rgba(43, 116, 168, .4);
}
[data-theme="dark"] .langues button { background: #26343f; color: #b3c2cf; border-color: #3a4b5b; }
[data-theme="dark"] .langues button.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }

/* Écran Salariés */
.bouton-danger {
  padding: 13px 18px;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  background: var(--rouge);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.bouton-danger:hover { background: #a5291c; }
.actions-fiche { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.liste-docs { margin: 0; padding-left: 18px; font-size: .85rem; }
.liste-docs li { margin: 3px 0; }
.pastille {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 700;
}
.pastille.ok { background: #dfeee4; color: #1f7a45; }
.pastille.proche { background: #fff2cf; color: #8a6d1a; }
.pastille.urgent { background: #fde6cf; color: #a5591a; }
.pastille.passe { background: #f5d9d5; color: #a5291c; }
#fiche h3 { color: #45525f; font-size: .95rem; margin: 16px 0 8px; }
.barre-salaries {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.champ-recherche { flex: 1; min-width: 200px; }
.bouton-export {
  padding: 9px 16px;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  background: var(--vert);
  border: none;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
}
.bouton-export:hover { background: #176b3a; }

/* Tableau de bord de suivi */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.tuile {
  background: #fff;
  border: 1px solid var(--gris-bord);
  border-left: 5px solid var(--bleu);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.tuile.passe { border-left-color: var(--rouge); }
.tuile.urgent { border-left-color: #d98a2b; }
.tuile.proche { border-left-color: #c9a227; }
.tuile-val { font-size: 1.8rem; font-weight: 800; color: var(--bleu-fonce); }
.tuile-lib { font-size: .8rem; color: #566; margin-top: 2px; }

/* Graphiques en barres */
.graph { display: flex; flex-direction: column; gap: 10px; }
.barre-ligne { display: flex; align-items: center; gap: 10px; }
.barre-lab { width: 38%; max-width: 240px; font-size: .85rem; color: #45525f; text-align: right; }
.barre-piste { flex: 1; height: 20px; background: #eef2f6; border-radius: 5px; overflow: hidden; }
.barre-rempli { display: block; height: 100%; border-radius: 5px; min-width: 3px; transition: width .4s; }
.barre-val { width: 34px; text-align: right; font-weight: 700; color: var(--bleu-fonce); }

.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtres button {
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 600;
  color: #45525f;
  background: #eef2f6;
  border: 1px solid var(--gris-bord);
  border-radius: 6px;
  cursor: pointer;
}
.filtres button.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }

/* Page de connexion */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, var(--bleu), var(--bleu-fonce));
  padding: 20px;
}
.login-carte { width: 100%; max-width: 360px; margin: 0; text-align: center; }
.login-logo { height: 92px; width: auto; display: block; margin: 0 auto 6px; }
.login-titre { margin: 0; font-size: 1.5rem; color: var(--bleu-fonce); text-align: center; }
.login-sous { margin: 4px 0 18px; text-align: center; color: #667; font-size: .9rem; }
.login-carte label { margin-bottom: 14px; }
.login-carte .bouton-principal { margin-top: 4px; }

/* Pièces jointes (scans / documents uploadés) */
.bouton-doc {
  padding: 9px 15px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--bleu);
  background: #eaf1f7;
  border: 1px dashed var(--bleu);
  border-radius: 7px;
  cursor: pointer;
}
.bouton-doc:hover { background: #dfeaf3; }
.pad-signature {
  width: 100%;
  max-width: 520px;
  height: 190px;
  border: 2px dashed var(--gris-bord);
  border-radius: 8px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
  display: block;
}
.sign-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sign-actions .bouton-secondaire,
.sign-actions .bouton-principal { width: auto; margin-top: 0; }
[data-theme="dark"] .pad-signature { background: #eef3f6; }
.doc-hint { font-size: .85rem; color: #5a6b78; margin: 0 0 10px; }
.liste-pieces { list-style: none; padding: 0; margin: 12px 0 0; }
.liste-pieces li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  background: #f5f8fa;
  border: 1px solid var(--gris-bord);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: .88rem;
}
.liste-pieces a { color: var(--bleu); text-decoration: none; }
.liste-pieces a:hover { text-decoration: underline; }
.piece-nom { word-break: break-all; }
.piece-suppr {
  border: none;
  background: transparent;
  color: var(--rouge);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
.piece-suppr:hover { color: #7d1f14; }
.mini-pieces { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.mini-pieces a { font-size: .78rem; color: var(--bleu); text-decoration: none; display: flex; align-items: center; gap: 5px; }
.mini-pieces a:hover { text-decoration: underline; }

/* Vignettes des scans */
.vignette {
  height: 46px; width: 46px; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--gris-bord); vertical-align: middle;
}
.vignette-pdf { font-size: 1.5rem; width: 46px; text-align: center; flex-shrink: 0; }
/* `flex: 1` seul ne suffit pas : un élément flex ne descend pas sous la largeur de son
   contenu (`min-width: auto`), donc un nom de fichier long et sans espace élargissait la
   ligne et faisait déborder la page sur petit écran. */
.piece-lien { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mini-vignette {
  height: 26px; width: 26px; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--gris-bord); flex-shrink: 0;
}

.bouton-sauvegarde {
  padding: 9px 16px; font-size: .88rem; font-weight: 700;
  color: var(--bleu-fonce); background: #e7eef4;
  border: 1px solid var(--gris-bord); border-radius: 7px;
  text-decoration: none; white-space: nowrap;
}
.bouton-sauvegarde:hover { background: #dce6ef; }

/* ===================== MODE SOMBRE ===================== */
.theme-toggle {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gris-bord);
  background: #fff;
  cursor: pointer;
  font-size: 1.15rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.theme-toggle:hover { transform: scale(1.06); }

:root[data-theme="dark"] {
  --gris-bg: #16202b;
  --gris-bord: #2c3b4a;
  --texte: #dce4ec;
  --bleu-fonce: #7fc4d6;
}
[data-theme="dark"] body { background: var(--gris-bg); color: var(--texte); }
[data-theme="dark"] .carte,
[data-theme="dark"] .tuile { background: #1e2a37; border-color: #2c3b4a; box-shadow: none; }
[data-theme="dark"] header { background: #111a23; border-bottom-color: var(--turquoise); }
[data-theme="dark"] header h1 { color: #eaf3f7; }
[data-theme="dark"] .sous-titre { color: #9fb0be; }
[data-theme="dark"] .carte h2 { color: #8fd0e0; border-bottom-color: #2c3b4a; }
[data-theme="dark"] #fiche h3,
[data-theme="dark"] label { color: #b3c2cf; }
[data-theme="dark"] input,
[data-theme="dark"] select {
  background: #26343f; color: var(--texte); border-color: #3a4b5b;
}
[data-theme="dark"] .lecture-seule { background: #2c3b4a; color: #b8c6d2; }
[data-theme="dark"] .lien-input { background: #26343f; color: #b8c6d2; }
[data-theme="dark"] .tableau th { background: #26343f; color: #b3c2cf; }
[data-theme="dark"] .tableau th.triable:hover { background: #2f4150; }
[data-theme="dark"] .tableau td,
[data-theme="dark"] .tableau th { border-bottom-color: #2c3b4a; }
[data-theme="dark"] .tableau tbody tr:hover { background: #26343f; }
[data-theme="dark"] .bandeau-bord { background: #1a2632; border-bottom-color: #2c3b4a; color: #b3c2cf; }
[data-theme="dark"] .ligne-calcul { border-bottom-color: #2c3b4a; }
[data-theme="dark"] .apercu,
[data-theme="dark"] .barre-piste,
[data-theme="dark"] .liste-pieces li,
[data-theme="dark"] pre,
[data-theme="dark"] .codeblock { background: #26343f; border-color: #2c3b4a; }
[data-theme="dark"] .bouton-secondaire,
[data-theme="dark"] .bouton-sauvegarde { background: #26343f; color: #cfe6ee; border-color: #3a4b5b; }
[data-theme="dark"] .bouton-doc { background: #223442; color: #8fd0e0; }
[data-theme="dark"] .filtres button { background: #26343f; color: #b3c2cf; border-color: #3a4b5b; }
[data-theme="dark"] .discret,
[data-theme="dark"] .vide,
[data-theme="dark"] .tuile-lib,
[data-theme="dark"] .barre-lab { color: #8798a6; }
[data-theme="dark"] .theme-toggle { background: #26343f; border-color: #3a4b5b; }

/* Pastille de notification (fiches candidat reçues) sur les liens de navigation */
.pastille-notif {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: #e5484d; color: #fff; font-size: .72rem; font-weight: 700;
  line-height: 18px; text-align: center; vertical-align: middle;
}

/* Sélecteur de type de document (candidat + fiche salarié) */
.champ-type-doc { display: block; margin: .4rem 0 .6rem; font-weight: 600; }
.champ-type-doc select { display: block; margin-top: .25rem; max-width: 340px; width: 100%; }

/* Drapeau dans les boutons de langue */
.drapeau { font-size: 1.05em; margin-right: 2px; }

/* Mention « lien envoyé au candidat » */
.lien-envoye { margin-top: 4px; font-size: .78rem; color: #1a7f4b; font-weight: 600; }
/* Rappel des relances sous le titre du dossier ouvert (poids normal : c'est une info, pas un titre). */
.detail-relances { margin-top: 6px; font-weight: 400; }
.detail-relances .lien-envoye { margin-top: 2px; }
[data-theme="dark"] .lien-envoye { color: #4ecb82; }

/* Compte et historique des relances (§72). Le compte est neutre jusqu'à 3, puis se colore :
   c'est le seuil à partir duquel la question « faut-il arrêter ? » se pose. Il ALERTE sans
   rien interdire — un seuil qui bloquerait déciderait à la place de la direction. */
.relances-compte { margin-top: 4px; font-size: .78rem; font-weight: 600; color: #5a6572; }
.relances-beaucoup { color: #b8600f; }
[data-theme="dark"] .relances-compte { color: #9aa4b2; }
[data-theme="dark"] .relances-beaucoup { color: #f0a44a; }
.relances-historique { margin-top: 8px; font-size: .8rem; font-weight: 400; }
.relances-historique ul { margin: 4px 0 0; padding-left: 1.2rem; }
.relances-historique li { margin: 2px 0; }

/* Messagerie qui refuse nos envois (§53). Volontairement de la même famille visuelle que
   « ✉ Envoyé le … », mais en rouge : les deux se lisent au même endroit et disent le sort du
   lien. Un candidat concerné ne doit JAMAIS afficher les deux à la fois. */
.lien-bloque { margin-top: 4px; font-size: .78rem; color: #b3261e; font-weight: 600; }
[data-theme="dark"] .lien-bloque { color: #ff8a80; }

/* Déconnexion automatique pour inactivité (fenêtre d'avertissement) */
.overlay-inactivite {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.overlay-inactivite[hidden] { display: none; }
.boite-inactivite {
  background: #fff; padding: 24px 28px; border-radius: 12px; max-width: 400px;
  text-align: center; box-shadow: 0 12px 44px rgba(0, 0, 0, .35);
}
.boite-inactivite h3 { margin: 0 0 8px; color: var(--bleu-fonce); }
.boite-inactivite p { margin: 0 0 16px; }
.boite-inactivite #inact-compte { font-size: 1.1em; font-weight: 700; }
[data-theme="dark"] .boite-inactivite { background: #1c2733; color: #e0e8f0; }
[data-theme="dark"] .boite-inactivite h3 { color: #cfe0f0; }

/* Statut d'expiration du lien candidat (côté administration) */
.lien-valide { margin-top: 4px; font-size: .78rem; color: #8a6d00; }
.lien-expire { margin-top: 4px; font-size: .78rem; color: #c0392b; font-weight: 600; }
[data-theme="dark"] .lien-valide { color: #d4b25a; }
[data-theme="dark"] .lien-expire { color: #ff8a8a; }
.ligne-expiree { opacity: .55; }

/* Bannière de notification (fiches candidat reçues) + surlignage des lignes reçues */
.banniere-notif {
  margin: 0 0 14px; padding: 12px 16px; border-radius: 8px;
  background: #fff4e5; border: 1px solid #ffb84d; color: #8a4b00; font-weight: 600;
}
[data-theme="dark"] .banniere-notif { background: #3a2e1a; border-color: #7a5a20; color: #ffcf8a; }
.ligne-soumis { background: #eafaf1; }
.ligne-soumis:hover { background: #dff5e9; }
[data-theme="dark"] .ligne-soumis { background: #1c3327; }

/* Checklist des documents à fournir (formulaire candidat) */
.docs-groupe {
  margin: 18px 0 10px; font-size: .98rem; color: var(--bleu-fonce);
  border-bottom: 2px solid var(--gris-bg); padding-bottom: 6px;
}
.doc-item {
  border: 1px solid var(--gris-bord); border-radius: 9px; padding: 10px 12px; margin-bottom: 10px;
  background: #fff;
}
.doc-item.doc-ok { border-color: #b7e0c6; background: #f4fbf6; }
/* Portail salarié uniquement (`#liste-fournir`) : libellé et boutons d'envoi sur une même
   ligne, espacés et repliables. Sans cela le texte touchait le bouton, et un libellé long
   — fréquent hors français : « Um documento de identidade (cartão…) » — passait dessous.
   La règle est volontairement limitée à cette liste : `.doc-item` sert aussi à la checklist
   du candidat, dont le gabarit interne est différent. */
#liste-fournir .doc-item {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
}
.doc-entete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.doc-etat {
  flex-shrink: 0; width: 20px; height: 20px; line-height: 20px; text-align: center;
  border-radius: 50%; background: var(--gris-bg); color: #8a97a3; font-weight: 700; font-size: .8rem;
}
.doc-ok .doc-etat { background: #1f8a4c; color: #fff; }
.doc-titre { font-weight: 700; font-size: .9rem; color: #374856; }
.doc-note { font-size: .78rem; color: #6a7883; font-style: italic; }
.doc-slots { display: flex; flex-wrap: wrap; gap: 14px; }
.doc-slot { display: flex; align-items: center; gap: 8px; }
.doc-slot.doc-multi { flex-wrap: wrap; }
.doc-face { font-size: .72rem; font-weight: 700; color: #45525f; text-transform: uppercase; letter-spacing: .4px; }
.doc-apercu { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.doc-pdf-btn {
  border: 1px solid var(--gris-bord); background: #eef3f7; color: var(--bleu-fonce);
  font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 5px; cursor: pointer;
}
.doc-pdf-btn:hover { background: #dfeaf1; border-color: var(--bleu); }
[data-theme="dark"] .doc-pdf-btn { background: #26343f; color: #b3c2cf; border-color: #3a4b5b; }
.doc-vignette {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--gris-bord); display: block;
}
.doc-pdf {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 6px; border: 1px solid var(--gris-bord); background: var(--gris-bg); font-size: 1.4rem;
}
.doc-suppr {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: var(--rouge); color: #fff; font-size: .75rem; line-height: 20px;
  cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .doc-item { background: #1e2a37; border-color: #2c3b4a; }
[data-theme="dark"] .doc-item.doc-ok { background: #16281d; border-color: #2c5a3c; }
[data-theme="dark"] .doc-titre { color: #cdd9e3; }
[data-theme="dark"] .doc-etat { background: #2c3b4a; color: #9fb0be; }
[data-theme="dark"] .doc-pdf { background: #26343f; border-color: #3a4b5b; }
[data-theme="dark"] .docs-groupe { color: #8fd0e0; border-bottom-color: #2c3b4a; }

/* Champ en erreur (N° Sécu, date incomplète) + message sous le champ */
.champ-invalide { border-color: #e5484d !important; box-shadow: 0 0 0 2px rgba(229, 72, 77, .18); }
.erreur-inline { display: block; margin-top: 4px; color: #c8102e; font-size: .78rem; font-weight: 600; }
.message-champ { display: block; margin-top: 4px; font-size: .8rem; }
.message-champ.erreur { color: #c0392b; }
[data-theme="dark"] .message-champ.erreur { color: #ff8a8a; }

/* Date de naissance : saisie masquée + bouton calendrier */
.champ-date { position: relative; display: flex; gap: 6px; align-items: center; }
.champ-date input[type="text"] { flex: 1; min-width: 0; }
.btn-cal {
  padding: 5px 9px; cursor: pointer; font-size: 1rem; line-height: 1;
  border: 1px solid var(--turquoise); background: #eef3f7; border-radius: 5px; color: var(--bleu-fonce);
}
.btn-cal:hover { background: #dfeaf1; }
[data-theme="dark"] .btn-cal { background: #26343f; color: #b3c2cf; border-color: #3a4b5b; }
.date-cachee { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Case « pas encore de n° de Sécu » — occupe toute la largeur de la grille */
.case-sans-secu { display: flex; align-items: center; gap: .5rem; font-weight: 500; grid-column: 1 / -1; }
/* Champ occupant toute la largeur de la grille (motif de rupture : phrase longue) */
.champ-plein { grid-column: 1 / -1; }
.case-sans-secu input[type="checkbox"] { width: auto; margin: 0; }
input.desactive { background: #eceff2; color: #8a97a3; cursor: not-allowed; }
[data-theme="dark"] input.desactive { background: #26343f; color: #6b7a88; }

/* =========================================================================
   Présentation « FICHE DE CANDIDATURE » calquée sur le document papier.
   Utilisée par le formulaire candidat ET la fiche détaillée côté direction.
   ========================================================================= */
.fiche-papier {
  background: #fff;
  border: 2px solid var(--bleu-fonce);
  border-radius: 6px;
  max-width: 920px;
  margin: 0 auto 20px;
  overflow: hidden;
}
.fp-entete {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 16px 20px; border-bottom: 2px solid var(--bleu-fonce);
}
.fp-societe { font-size: .8rem; color: #45525f; line-height: 1.5; }
.fp-societe .fp-nom {
  font-size: 1.15rem; font-weight: 800; color: var(--bleu-fonce);
  letter-spacing: .5px; display: block; margin-bottom: 2px;
}
.fp-titre-doc {
  font-size: 1.2rem; font-weight: 700; color: var(--turquoise);
  text-align: right; text-transform: uppercase; letter-spacing: .5px; line-height: 1.15;
}
.fp-photo {
  width: 108px; height: 128px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--gris-bord); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  color: #8a99a6; font-size: .78rem; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(#eef3f6, #dbe6ee); background-size: cover; background-position: center;
}
.fp-date {
  font-size: .82rem; color: #45525f; font-weight: 600;
}
/* Ligne « Paris, le … » + repères (permis/compétences) en rouge à droite. */
.fp-date-ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  flex-wrap: wrap; padding: 8px 20px; border-bottom: 1px solid var(--gris-bord);
}
.fp-reperes { color: #c8102e; font-weight: 700; font-size: .8rem; text-align: right; }
/* Cadre PHOTO cliquable (prise de selfie côté candidat) */
label.fp-photo { cursor: pointer; position: relative; transition: border-color .15s; }
label.fp-photo:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.fp-photo.a-photo #fp-photo-txt {
  position: absolute; bottom: 4px; left: 4px; right: 4px; text-align: center;
  background: rgba(20, 30, 40, .62); color: #fff; font-size: .62rem; font-weight: 700;
  padding: 2px 4px; border-radius: 4px;
}
.fp-section { border-bottom: 1px solid var(--bleu-fonce); }
.fp-section:last-child { border-bottom: none; }
.fp-section-titre {
  background: var(--gris-bg); text-align: center; text-transform: uppercase;
  font-weight: 700; color: var(--bleu-fonce); letter-spacing: .6px;
  font-size: .9rem; padding: 7px 10px; border-bottom: 1px solid var(--gris-bord);
}
.fp-section-hint {
  font-size: .76rem; color: #6a7883; padding: 6px 12px 0; font-style: italic; margin: 0;
}
/* Grille 2 colonnes : les lignes internes sont dessinées par le fond via un gap de 1px */
.fp-grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--gris-bord);
}
.fp-cellule {
  background: #fff; padding: 8px 12px; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: .76rem; font-weight: 700; color: #45525f;
}
.fp-cellule.fp-pleine { grid-column: 1 / -1; }
/* Âge des enfants : une petite case par enfant, sur plusieurs lignes si la famille est grande. */
.ages-enfants { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
.age-enfant { display: flex; align-items: center; gap: 5px; font-size: .8rem; }
.age-enfant input { width: 3.4rem; text-align: center; }
.fp-cellule input, .fp-cellule select { font-weight: 500; }
.fp-cellule .message-champ, .fp-cellule .case-sans-secu { font-weight: 500; }
.fp-cellule .case-sans-secu { grid-column: auto; margin-top: 4px; }
@media (max-width: 640px) {
  .fp-grille { grid-template-columns: 1fr; }
  .fp-entete { flex-wrap: wrap; }
  .fp-titre-doc { text-align: left; }
}
/* Lecture seule (fiche vue côté direction) : cellules non éditables, aspect « rempli » */
.fiche-papier.lecture .fp-valeur {
  font-weight: 500; color: var(--texte); font-size: .92rem;
  min-height: 1.1em; padding: 2px 0; word-break: break-word;
}
.fiche-papier.lecture .fp-valeur:empty::after { content: "—"; color: #aab4bd; }
/* Thème sombre */
[data-theme="dark"] .fiche-papier { background: #1e2a37; border-color: #3a6d86; }
[data-theme="dark"] .fp-entete, [data-theme="dark"] .fp-section { border-color: #3a6d86; }
[data-theme="dark"] .fp-grille { background: #2c3b4a; }
[data-theme="dark"] .fp-cellule { background: #1e2a37; color: #b3c2cf; }
[data-theme="dark"] .fp-section-titre { background: #26343f; color: #8fd0e0; border-bottom-color: #2c3b4a; }
[data-theme="dark"] .fp-date { color: #9fb0be; border-bottom-color: #2c3b4a; }
[data-theme="dark"] .fp-photo { background: linear-gradient(#26343f, #1a242e); color: #7d8b98; border-color: #3a4b5b; }
[data-theme="dark"] .fiche-papier.lecture .fp-valeur { color: #dce4ec; }

/* Modale générique (ex. saisie des horaires CDD) */
.overlay-modale {
  position: fixed; inset: 0; background: rgba(15, 25, 35, .55); z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.overlay-modale[hidden] { display: none; }
.overlay-modale .modale {
  background: var(--carte, #fff); border-radius: 12px; padding: 22px; max-width: 480px; width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
.overlay-modale .modale h3 { margin: 0 0 8px; color: var(--bleu-fonce); }
.overlay-modale .modale label { display: block; font-weight: 600; margin-top: 10px; }
.overlay-modale .modale textarea {
  width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--gris-bord);
  border-radius: 8px; font: inherit; resize: vertical;
}
.modale-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
[data-theme="dark"] .overlay-modale .modale { background: #1e2a37; }

/* IMPRESSION : on n'imprime QUE la fiche de candidature, compactée pour tenir sur UNE page A4. */
@media print {
  @page { size: A4 portrait; margin: 8mm; }
  body { background: #fff !important; }
  header, #banniere-notif, .carte:not(#zone-detail),
  .barre-detail, #detail-actions, #detail-contact, #detail-message,
  .theme-toggle, .pastille-notif { display: none !important; }
  #detail-contenu > :not(.fiche-papier) { display: none !important; }   /* pièces, compétences, vérifs OCR */
  #zone-detail { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  .fiche-papier {
    box-shadow: none !important; border: 1px solid #444 !important;
    max-width: none !important; margin: 0 !important; font-size: 9px;
  }
  .fiche-papier.lecture .fp-valeur { font-size: 9px; min-height: 1em; padding: 0; }
  .fp-cellule { padding: 2px 6px !important; }
  .fp-section-titre { padding: 2px 6px !important; font-size: 8.5px; }
  .fp-entete, .fp-date-ligne { padding: 4px 8px !important; }
  .fp-reperes { color: #c8102e !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  label.fp-photo, .fp-photo { width: 66px !important; height: 84px !important; }
}

/* Badges de statut candidat (vivier) + filtres + fiche détaillée direction */
.badge-statut {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.st-en_attente { background: #eef3f6; color: #5a6b78; }
.st-soumis     { background: #e3f6ec; color: #1a7f4b; }
.st-repris     { background: #e6eefb; color: #2b5fb0; }
.st-embauche   { background: #dcefff; color: #1c5a99; }
.st-a_recontacter { background: #fff2d6; color: #8a5a00; }
.st-non_retenu { background: #f3e0e0; color: #a23b2f; }
[data-theme="dark"] .st-en_attente { background: #2c3b4a; color: #9fb0be; }
[data-theme="dark"] .st-soumis { background: #163a2a; color: #5fd39a; }
[data-theme="dark"] .st-repris { background: #1d3355; color: #8fb6f0; }
[data-theme="dark"] .st-embauche { background: #163149; color: #6bb6ee; }
[data-theme="dark"] .st-a_recontacter { background: #3a2e15; color: #e6bd6a; }
[data-theme="dark"] .st-non_retenu { background: #3a2020; color: #f19c92; }
.contact-liens { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.contact-liens a {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 7px;
  background: var(--bleu); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none;
}
.contact-liens a:hover { background: var(--bleu-fonce); }
.contact-liens a.secondaire { background: #eef3f7; color: var(--bleu-fonce); border: 1px solid var(--gris-bord); }
/* Verdict de vérification OCR (pièce d'identité ↔ saisie) */
.verif { margin: 14px auto 0; max-width: 920px; border-radius: 9px; padding: 12px 14px; border: 1px solid; font-size: .9rem; }
.verif-ok { background: #f0faf4; border-color: #b7e0c6; color: #17663c; }
.verif-ecart { background: #fff4e5; border-color: #ffb84d; color: #8a4b00; }
.verif-tete { font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.verif-src { font-weight: 500; font-size: .74rem; opacity: .8; }
.verif-liste { margin: 8px 0 0; padding-left: 18px; }
.verif-liste li { margin: 2px 0; }
.verif-exp { margin-top: 6px; font-size: .82rem; font-weight: 600; }
.verif-indic { opacity: .82; }
.verif-note { font-size: .74rem; font-style: italic; opacity: .8; }
[data-theme="dark"] .verif-ok { background: #16281d; border-color: #2c5a3c; color: #7fd6a2; }
[data-theme="dark"] .verif-ecart { background: #3a2e1a; border-color: #7a5a20; color: #ffcf8a; }
/* Compétences (cases à cocher) dans le panneau détail */
.bloc-competences { max-width: 920px; margin: 18px auto 4px; }
.bloc-competences h4 { margin: 0 0 8px; color: var(--bleu-fonce); }
.comp-cases { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.comp-case { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; padding: 6px 12px;
  border: 1px solid var(--gris-bord); border-radius: 8px; cursor: pointer; background: #fff; }
.comp-case input { width: 17px; height: 17px; cursor: pointer; }
.comp-etat { font-size: .78rem; font-weight: 600; margin-left: 8px; }
.comp-etat.ok { color: #1f7a3d; }
.comp-etat.erreur { color: #b3261e; }
/* Thème sombre : #b3261e sur la carte sombre tombe à ~2,2:1, très en dessous du minimum
   lisible de 4,5:1. Or cette classe porte exactement ce qu'il ne faut pas rater — « à appeler
   (aucun e-mail) » dans le vivier, et le motif d'échec sous un convoqué. Même remarque pour
   le vert, moins critique mais aussi peu lisible. */
[data-theme="dark"] .comp-etat.erreur { color: #ff8b80; }
[data-theme="dark"] .comp-etat.ok { color: #6ddc95; }
[data-theme="dark"] .comp-case { background: #22303c; border-color: #3a4a58; }

/* Raccourcis « + <document manquant> » (fiches candidat et salarié) */
.manquants-rappel { flex-basis: 100%; margin: 0 0 6px; font-size: .82rem; font-weight: 600;
  color: var(--bleu-fonce); }
.manquants-boutons { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.manquant-ajout { background: #fff6e5; border-color: #e0a800; }
[data-theme="dark"] .manquant-ajout { background: #3a3218; border-color: #b8860b; }

/* Ajout d'un document par la direction sur une fiche candidat (scan ou photo sur place) */
.ajout-piece { max-width: 920px; margin: 10px auto 4px; display: flex; flex-wrap: wrap;
  align-items: flex-end; gap: 10px 14px; padding: 12px 14px;
  border: 1px dashed var(--gris-bord); border-radius: 10px; }
.ajout-piece label { font-weight: 600; font-size: .85rem; }
.ajout-piece select { display: block; margin-top: .25rem; min-width: 180px; }
.ajout-piece .message { flex-basis: 100%; margin: 0; }
[data-theme="dark"] .ajout-piece { border-color: #3a4a58; }

/* Rappel « votre dossier n'est pas encore envoyé » (formulaire candidat).
   Volontairement voyant : la confusion avec le bouton de signature faisait repartir des
   candidats sans avoir transmis leur dossier. */
.rappel-envoi { margin: 0 0 14px; padding: 12px 16px; border-radius: 10px;
  border: 2px solid #e0a800; background: #fff8e1; color: #6b4e00;
  font-weight: 600; line-height: 1.5; }
[data-theme="dark"] .rappel-envoi { background: #3a3218; border-color: #b8860b; color: #ffe9a8; }

/* Notes internes de la direction sur une fiche candidat (jamais vues par le candidat) */
.bloc-notes { max-width: 920px; margin: 18px auto 4px; }
.bloc-notes h4 { margin: 0 0 4px; color: var(--bleu-fonce); }
.notes-aide { margin: 0 0 8px; font-size: .8rem; color: var(--gris-texte, #667); }
.notes-zone { width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--gris-bord); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: .92rem; line-height: 1.45; resize: vertical; }
[data-theme="dark"] .notes-zone { background: #22303c; border-color: #3a4a58; color: inherit; }

/* Filtre « Compétences » (multi-sélection par cases) sur les listes candidats/salariés */
.filtre-competences { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  border: 1px solid var(--gris-bord); border-radius: 8px; padding: 8px 14px; margin: 10px 0 4px; }
.filtre-competences legend { font-size: .82rem; font-weight: 600; color: var(--bleu-fonce); padding: 0 6px; }
.filtre-competences label { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }
.filtre-competences input { width: 16px; height: 16px; cursor: pointer; }
[data-theme="dark"] .filtre-competences { border-color: #3a4a58; }

/* Documents dans le panneau détail (vignettes) */
.pieces-detail { max-width: 920px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px; }
.piece-item { text-align: center; font-size: .74rem; width: 96px; }
.piece-item > a { display: block; text-decoration: none; color: var(--bleu-fonce); font-weight: 600; }
.piece-item .mini-vignette { width: 96px; height: 96px; object-fit: cover; border-radius: 7px; border: 1px solid var(--gris-bord); display: block; }
.doc-pdf-mini { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 7px; border: 1px solid var(--gris-bord); background: var(--gris-bg); font-size: 2rem; }
.piece-cat { display: block; margin-top: 4px; line-height: 1.2; }
/* `flex-wrap` : la vignette fait 96 px et la ligne peut porter ✂️orig. + 📄PDF + ✕ — sans
   retour à la ligne, une pièce détourée déborde de sa cellule. */
.piece-liens { margin-top: 2px; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
/* Le ✕ de suppression est plus gros par défaut (fiche salarié) : on l'aligne sur les liens ✂️/📄. */
.piece-liens .piece-suppr { font-size: .8rem; padding: 0 2px; line-height: 1; }
.barre-detail { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.barre-detail h2 { margin: 0; }
#detail-message code { background: var(--gris-bg); padding: 2px 6px; border-radius: 4px; word-break: break-all; }
[data-theme="dark"] #detail-message code { background: #26343f; }

/* ⚠️ RÈGLE GLOBALE — l'attribut `hidden` doit TOUJOURS l'emporter.
   Toute règle d'auteur qui pose un `display` (flex, block…) écrase le `display: none` que le
   navigateur applique à `[hidden]` : l'origine « auteur » prime sur l'origine « navigateur ».
   Le bandeau « sorti des effectifs » s'affichait ainsi sur TOUTES les fiches salarié, avec son
   bouton « Réintégrer » (audit du 29/07). Le dépôt contenait déjà quatre contournements au cas
   par cas ; cette règle unique les rend inutiles et évite d'oublier le suivant.
   `.erreur-inline` et `.message-champ` en souffraient aussi, depuis plus longtemps. */
[hidden] { display: none !important; }

/* Salarié sorti des effectifs (rupture de période d'essai) : fiche conservée, plus suivie */
.bandeau-sortie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  border: 2px solid #b3261e; background: #fdecea; color: #7a1c14; font-weight: 600; }
[data-theme="dark"] .bandeau-sortie { background: #3a1f1c; border-color: #b3261e; color: #ffb4ab; }

/* Fenêtre d'embauche : plus large que les autres (grille de conditions de contrat) */
/* Choix des horaires à transmettre (§75). Trois options lisibles d'un coup d'œil : on doit
   voir ce que le planning donnerait AVANT de le choisir, sinon le choix est aveugle. */
.ch-choix { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ch-option { display: flex; gap: 10px; align-items: flex-start; font-weight: 400;
             border: 1px solid var(--bordure, #d7dee6); border-radius: 8px; padding: 10px; }
.ch-option:hover { border-color: var(--bleu-fonce); }
.ch-option input { margin-top: 3px; }
.ch-indispo { opacity: .65; }
.ch-apercu { margin: 6px 0 0; padding: 8px; border-radius: 6px; font-size: .8rem;
             white-space: pre-wrap; background: rgba(0, 0, 0, .04); max-height: 190px;
             overflow: auto; }
[data-theme="dark"] .ch-apercu { background: rgba(255, 255, 255, .07); }
.ch-option .ch-txt { width: 100%; margin-top: 6px; }

.modale-large { max-width: 620px; width: 94vw; }
.modale-large .grille-champs { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* --- Planning de travail d'un CDD (sites × semaine × tranches horaires) ------------------
   Éditeur partagé par la fiche salarié, la fenêtre d'embauche et l'écran de génération
   (`static/planning_cdd.js`). Réservé au CDD : le CDI énonce une clause de mobilité. */
.pl-site {
  border: 1px solid var(--gris-bord);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fbfcfd;
}
.pl-site-tete { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.pl-site-nom { flex: 1; min-width: 0; }          /* min-width:0 : voir §17.6 n°1 */
.pl-site-nom input { width: 100%; max-width: 100%; }
.pl-suppr-site {
  background: none; border: 1px solid var(--gris-bord); border-radius: 6px;
  padding: 6px 10px; cursor: pointer; color: #a33; font-size: .8rem;
}
.pl-semaine { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.pl-jour {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 0; border-top: 1px solid #eef1f4;
}
.pl-jour-nom { min-width: 84px; font-size: .82rem; font-weight: 600; color: #45525f; }
.pl-tranches { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* `flex-wrap` + `min-width: 0` : un champ d'heure a une largeur intrinsèque imposée par le
   navigateur (~90 à 125 px selon les plateformes). Sans ces deux réglages, deux tranches sur
   une même journée débordaient de la page sur un écran de 360 px — c'est le garde §17.6 n°1,
   qui manquait ici alors qu'il est bien posé sur `.pl-site-nom`. */
.pl-tranche { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.pl-tranche input[type="time"] { padding: 4px 6px; font-size: .88rem; max-width: 100%; min-width: 0; }
.pl-sep { color: #8a97a3; font-size: .8rem; }
.pl-suppr-tranche {
  background: none; border: none; cursor: pointer; color: #a33; font-size: .85rem; padding: 0 2px;
}
.pl-ajout-tranche {
  background: none; border: 1px dashed var(--gris-bord); border-radius: 6px;
  padding: 3px 8px; cursor: pointer; font-size: .78rem; color: var(--bleu);
}
/* Jour de repos : pas de drapeau stocké, c'est l'absence de tranche qui fait foi. */
.pl-repos { display: none; font-size: .8rem; color: #8a97a3; font-style: italic; }
.pl-jour-repos .pl-repos { display: inline; }
.pl-jour-repos .pl-jour-nom { color: #8a97a3; font-weight: 500; }
.pl-pied { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.pl-ajout-site {
  background: var(--bleu); color: #fff; border: none; border-radius: 6px;
  padding: 7px 12px; cursor: pointer; font-size: .85rem;
}
.pl-total { font-size: .85rem; color: #45525f; }
.pl-ecart { color: #b45309; font-weight: 600; }
/* Thème sombre : sans ces surcharges, le nom du jour et le total tombaient à un contraste de
   1,8 (illisibles), et l'avertissement d'écart — la seule alerte métier du composant — à 2,9. */
[data-theme="dark"] .pl-site { background: #26343f; }
[data-theme="dark"] .pl-jour { border-top-color: #2b3a4a; }
[data-theme="dark"] .pl-jour-nom,
[data-theme="dark"] .pl-total { color: #c8d4de; }
[data-theme="dark"] .pl-ecart { color: #f0b357; }
[data-theme="dark"] .pl-suppr-site,
[data-theme="dark"] .pl-suppr-tranche { color: #ef8a80; }
[data-theme="dark"] .pl-sep,
[data-theme="dark"] .pl-repos { color: #9fb0bd; }
@media (max-width: 640px) {
  /* Sur téléphone, le nom du jour prend sa propre ligne et CHAQUE tranche la sienne. Vérifié
     par capture à 360 px : sans cela, deux tranches sur une même journée se plaçaient côte à
     côte (≈ 440 px de contenu pour ≈ 274 px utiles) et sortaient de l'écran, entraînant toute
     la carte avec elles — nom de site coupé, avertissement de durée tronqué. */
  .pl-jour-nom { min-width: 100%; }
  .pl-tranches { flex-basis: 100%; }
  .pl-tranche { flex-basis: 100%; }
  .pl-tranche input[type="time"] { flex: 1; }
  .pl-jour { align-items: flex-start; }
}

/* --- Sessions de recrutement ------------------------------------------------------
   Un bouton « actif » existait déjà pour les filtres et le choix de langue, mais scopé à
   leurs conteneurs. Les boutons présent/absent et le choix de langue de l'aperçu en ont
   besoin ailleurs : la règle est donc portée par `.bouton-mini` lui-même. */
.bouton-mini.actif { background: var(--bleu-fonce); box-shadow: inset 0 0 0 2px var(--bleu); }
.bouton-mini[disabled] { opacity: .45; cursor: not-allowed; }

.langues-apercu { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }

/* Le texte du message est affiché tel qu'il partira : espaces et retours à la ligne
   compris, sinon la relecture ne prouverait rien sur la mise en forme réelle. */
.apercu-message {
  white-space: pre-wrap;
  font-family: inherit;
  background: var(--gris-bg);
  border: 1px solid var(--gris-bord);
  border-radius: 6px;
  padding: .8rem 1rem;
  margin: 0 0 .6rem;
  max-height: 45vh;
  overflow-y: auto;
}

/* États d'une session, mêmes teintes que les badges du vivier. */
.badge-statut.st-brouillon { background: #eef1f4; color: #55606b; }
.badge-statut.st-convoquee { background: #e3f0ff; color: #17518c; }
.badge-statut.st-terminee  { background: #e7f6ec; color: #1d6b39; }
.badge-statut.st-annulee   { background: #f6e7e7; color: #8c2626; }
[data-theme="dark"] .badge-statut.st-brouillon { background: #33383d; color: #c7ced5; }
[data-theme="dark"] .badge-statut.st-convoquee { background: #1c3a58; color: #cfe4ff; }
[data-theme="dark"] .badge-statut.st-terminee  { background: #1e4630; color: #cdeeda; }
[data-theme="dark"] .badge-statut.st-annulee   { background: #4a2020; color: #f2cccc; }

/* --- Bandeau et page « Nouveautés » ----------------------------------------------- */
.bandeau-nouveautes { border-left: 4px solid var(--turquoise); }
.bandeau-nouveautes h2 { margin-top: 0; }
.nouveaute { margin: 0 0 18px; }
.nouveaute:last-of-type { margin-bottom: 8px; }
.nouveaute h3 { margin: 0 0 2px; font-size: 1rem; color: var(--bleu-fonce); }
.nouveaute ul { margin: 6px 0 10px; padding-left: 20px; }
.nouveaute li { margin: 4px 0; }
.nouveaute .bouton-secondaire { display: inline-block; width: auto; padding: 6px 14px; }
/* Chaque nouveauté non lue se démarque dans l'historique, sans crier. */
.nouveaute.non-lue { border-left: 3px solid var(--turquoise); padding-left: 12px; }
.pastille-nouveau {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 10px; font-size: .7rem; font-weight: 700;
  background: var(--turquoise); color: #fff; vertical-align: middle;
}
[data-theme="dark"] .nouveaute h3 { color: #8fc7e8; }

/* Fenêtre « Convoquer » : libellé AU-DESSUS du champ, et champ pleine largeur.
   La règle générale des modales (`.overlay-modale .modale label { display: block }`) laisse
   le libellé et le champ s'enchaîner en ligne : l'adresse « 90 rue des Pyrénées, 75020 Paris »
   s'y retrouvait tronquée à mi-mot. Portée limitée à cette fenêtre — les modales d'embauche
   et d'horaires gardent leur mise en page actuelle, qu'on ne change pas au passage. */
#modale-convoc label { display: flex; flex-direction: column; }
#modale-convoc .grille-champs { display: block; }
#modale-convoc input, #modale-convoc select {
  width: 100%; margin-top: 4px; box-sizing: border-box;
}

/* Version en service — discrètement en bas de chaque écran de la direction.
   C'est la première question posée au téléphone quand quelque chose ne va pas, et la
   réponse la plus difficile à obtenir si elle n'est écrite nulle part. */
.pied-version {
  margin: 28px 0 14px; text-align: center;
  font-size: .78rem; color: #7b8894;
}
.pied-version a { color: inherit; text-decoration: underline; }
[data-theme="dark"] .pied-version { color: #8a97a3; }

.etiquette-version {
  display: inline-block; padding: 0 7px; border-radius: 9px;
  font-size: .72rem; font-weight: 700;
  background: var(--gris-bg); color: var(--bleu-fonce);
}
[data-theme="dark"] .etiquette-version { background: #2b3947; color: #9fd0ec; }