/* ANATEX — feuille de style unique. Couleurs et tailles en variables pour être modifiées facilement. */
:root {
  --fond: #f4f6fb;
  --carte: #ffffff;
  /* Couleurs du logo ANATEX : bleu (actions, liens) et bleu nuit (textes, titres) */
  --texte: #13213f;
  --texte-doux: #4d5670;
  --bordure: #e3e7ef;
  --primaire: #1565e0;
  --primaire-fonce: #0b4fb8;
  --primaire-pale: #e8f1fd;
  --ligne-paire: #f8f9fc;
  --vert: #22b07d;   --vert-pale: #e6f7f0;
  --orange: #f59e0b; --orange-pale: #fff4e0;
  --violet: #8b5cf6; --violet-pale: #f1ebff;
  --rouge: #e5484d;  --rouge-pale: #fdecec;
  --gris-pale: #f0f2f7;
  --rayon: 16px;
  --rayon-petit: 10px;
  --ombre: 0 1px 2px rgba(23, 31, 64, .04), 0 4px 16px rgba(23, 31, 64, .05);
  --barre: 248px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--primaire); text-decoration: none; }
a:hover { color: var(--primaire-fonce); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.05rem; font-weight: 600; }
small, .doux { color: var(--texte-doux); }
svg.icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---------- Structure : barre latérale + contenu ---------- */
.app { display: flex; min-height: 100vh; }
.barre { width: var(--barre); background: var(--carte); border-right: 1px solid var(--bordure);
  position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; padding: 20px 14px; z-index: 30; transition: transform .2s; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--texte); padding: 4px 10px 20px; letter-spacing: .02em; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); padding: 16px 12px 6px; }
.menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--rayon-petit); color: var(--texte-doux); font-weight: 500; }
.menu a:hover { background: var(--gris-pale); color: var(--texte); }
.menu a.actif { background: var(--primaire-pale); color: var(--primaire); }
.barre-pied { margin-top: auto; background: linear-gradient(140deg, var(--primaire-fonce), var(--primaire)); color: #fff; border-radius: var(--rayon); padding: 18px; font-size: .85rem; }
.barre-pied strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.barre-pied p { margin: 0; opacity: .85; }
.contenu { flex: 1; margin-left: var(--barre); min-width: 0; display: flex; flex-direction: column; }
.entete { height: 68px; display: flex; align-items: center; gap: 16px; padding: 0 28px; background: var(--carte); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 20; }
.recherche { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; background: var(--fond); border-radius: 999px; padding: 0 14px; color: var(--texte-doux); }
.recherche input { border: 0; background: transparent; padding: 10px 0; width: 100%; font: inherit; outline: none; }
.entete-droite { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.cloche { position: relative; color: var(--texte-doux); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.cloche:hover { background: var(--gris-pale); }
.cloche .pastille { position: absolute; top: 2px; right: 2px; background: var(--rouge); color: #fff; border-radius: 999px; font-size: .68rem; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--carte); }
.profil { position: relative; }
.profil summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.profil summary::-webkit-details-marker { display: none; }
.profil-texte { line-height: 1.2; } .profil-texte strong { display: block; font-size: .9rem; } .profil-texte small { font-size: .78rem; }
.profil-menu { position: absolute; right: 0; top: 50px; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); box-shadow: var(--ombre); padding: 6px; min-width: 190px; }
.profil-menu button { width: 100%; justify-content: flex-start; }
.bouton-menu { display: none; background: none; border: 0; color: var(--texte); padding: 6px; cursor: pointer; }
main { padding: 28px; max-width: 1280px; width: 100%; }
.voile { display: none; }

/* ---------- Avatars ---------- */
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; display: inline-grid; place-items: center;
  font-weight: 600; font-size: .85rem; color: var(--primaire); background: var(--primaire-pale); }
.avatar-grand { width: 96px; height: 96px; font-size: 1.8rem; border: 4px solid var(--carte); box-shadow: var(--ombre); }
.avatar-moyen { width: 44px; height: 44px; }
.avatar.c1 { color: var(--vert); background: var(--vert-pale); } .avatar.c2 { color: var(--orange); background: var(--orange-pale); }
.avatar.c3 { color: var(--violet); background: var(--violet-pale); } .avatar.c4 { color: var(--rouge); background: var(--rouge-pale); }
.personne { display: flex; align-items: center; gap: 12px; min-width: 0; }
.personne strong { display: block; font-weight: 600; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.personne small { display: block; }

/* ---------- Titre de page ---------- */
.titre-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.titre-page p { margin: 4px 0 0; color: var(--texte-doux); }
.retour { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-doux); font-size: .9rem; margin-bottom: 12px; }

/* ---------- Cartes ---------- */
.carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 22px; min-width: 0; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.carte-tete a { font-size: .85rem; display: inline-flex; align-items: center; gap: 4px; }
.grille { display: grid; gap: 20px; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: 2fr 1fr; }
.pile { display: flex; flex-direction: column; gap: 20px; }

/* Chiffres-clés */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.chiffre { display: flex; align-items: center; gap: 16px; }
.chiffre-icone { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.chiffre-icone svg.icone { width: 24px; height: 24px; }
.chiffre-icone.bleu { background: var(--primaire); box-shadow: 0 6px 14px rgba(21, 101, 224, .3); }
.chiffre-icone.vert { background: var(--vert); box-shadow: 0 6px 14px rgba(34, 176, 125, .3); }
.chiffre-icone.orange { background: var(--orange); box-shadow: 0 6px 14px rgba(245, 158, 11, .3); }
.chiffre-icone.violet { background: var(--violet); box-shadow: 0 6px 14px rgba(139, 92, 246, .3); }
.chiffre small { display: block; font-size: .82rem; }
.chiffre b { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }

/* Barres de progression */
.barres { display: flex; flex-direction: column; gap: 16px; }
.barre-ligne { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: .9rem; }
.jauge { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--gris-pale); overflow: hidden; }
.jauge span { display: block; height: 100%; border-radius: inherit; background: var(--primaire); }
.jauge.vert span { background: var(--vert); } .jauge.orange span { background: var(--orange); } .jauge.violet span { background: var(--violet); }

/* Listes simples (équipe, événements) */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bordure); }
.liste li:last-child { border-bottom: 0; }

/* ---------- Pastilles ---------- */
.pastille-statut { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 500; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pastille-statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pastille-statut.vert { color: #138a5f; background: var(--vert-pale); }
.pastille-statut.gris { color: var(--texte-doux); background: var(--gris-pale); }
.pastille-statut.orange { color: #b26b00; background: var(--orange-pale); }
.pastille-statut.rouge { color: #c22d32; background: var(--rouge-pale); }
.pastille-statut.bleu { color: var(--primaire); background: var(--primaire-pale); }
.etiquette { display: inline-block; font-size: .78rem; padding: 2px 9px; border-radius: 6px; background: var(--gris-pale); color: var(--texte-doux); white-space: nowrap; }
.etiquette.bleu { background: var(--primaire-pale); color: var(--primaire); }
.etiquette.vert { background: var(--vert-pale); color: #138a5f; }
.etiquette.orange { background: var(--orange-pale); color: #b26b00; }
.etiquette.violet { background: var(--violet-pale); color: #6d3fd8; }

/* ---------- Tableaux ---------- */
.tableau { overflow-x: auto; margin: 0 -22px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); padding: 10px 22px; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
td { padding: 12px 22px; border-bottom: 1px solid var(--bordure); vertical-align: middle; line-height: 1.45; }
/* Une ligne sur deux légèrement teintée (les couleurs propres à certaines lignes restent prioritaires) */
:where(.tableau table:not(.table-bon) > tbody > tr:nth-child(even)) > td { background: var(--ligne-paire); }
tr:last-child td { border-bottom: 0; }
tbody tr.cliquable { cursor: pointer; } tbody tr:hover td { background: #eef4fe; }
tr.inactif td { opacity: .6; }
td.diff div { margin-bottom: 2px; } td.diff del { color: var(--rouge); } td.diff ins { color: #138a5f; text-decoration: none; }

/* ---------- Boutons ---------- */
.bouton, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--rayon-petit);
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; background: var(--primaire); color: #fff; white-space: nowrap; }
.bouton:hover, button:hover { background: var(--primaire-fonce); color: #fff; }
.bouton.secondaire, button.secondaire { background: var(--carte); color: var(--texte); border: 1px solid var(--bordure); }
.bouton.secondaire:hover, button.secondaire:hover { background: var(--gris-pale); color: var(--texte); }
.bouton.danger { background: var(--rouge-pale); color: #c22d32; } .bouton.danger:hover { background: #fbd9da; }
.bouton.petit, button.petit { padding: 6px 12px; font-size: .82rem; }
button.lien { background: none; color: var(--texte); padding: 8px 10px; font-weight: 500; }
button.lien:hover { background: var(--gris-pale); color: var(--texte); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Formulaires ---------- */
.filtres { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: 6px; color: var(--texte); }
label.required::after { content: " *"; color: var(--rouge); }
input[type=text], input[type=search], input[type=password], input[type=email], input[type=date], input[type=number], input[type=file], select, textarea {
  width: 100%; font: inherit; color: var(--texte); background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px var(--primaire-pale); }
textarea { min-height: 90px; }
.champ { margin-bottom: 18px; }
.champ-erreur input, .champ-erreur select { border-color: var(--rouge); }
.aide { font-size: .85rem; color: var(--texte-doux); margin-top: 4px; }
.erreurs { list-style: none; padding: 0; margin: 6px 0 0; color: var(--rouge); font-size: .82rem; }
.champ-case { display: flex; align-items: center; gap: 10px; } .champ-case label { margin: 0; }
.champ-case .aide { flex-basis: 100%; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cases label.case { display: flex; align-items: center; gap: 8px; font-weight: 400; padding: 8px 10px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); margin: 0; cursor: pointer; }
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--primaire); }
.colonnes-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.colonnes-form .large { grid-column: 1 / -1; }
.photo-saisie { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }

/* ---------- Messages ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.messages li { padding: 12px 16px; border-radius: var(--rayon-petit); margin-bottom: 8px; background: var(--carte); box-shadow: var(--ombre); border-left: 4px solid var(--primaire); }
.messages li.succes { border-left-color: var(--vert); } .messages li.erreur { border-left-color: var(--rouge); }

/* ---------- Fiche employé ---------- */
.fiche-tete { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin: 0; }
.infos dt { font-size: .78rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .04em; }
.infos dd { margin: 4px 0 0; font-weight: 500; }
.chronologie { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--bordure); }
.chronologie li { position: relative; padding: 0 0 18px 14px; }
.chronologie li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primaire); border: 3px solid var(--primaire-pale); }
.chronologie li:not(:first-child)::before { background: var(--bordure); border-color: var(--gris-pale); }

/* ---------- Page de connexion ---------- */
.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 20% 10%, #e3e8ff 0, transparent 45%), radial-gradient(circle at 90% 90%, #f1ebff 0, transparent 40%), var(--fond); }
.boite-connexion { width: 100%; max-width: 400px; }
.logo-marque { width: 34px; height: 34px; object-fit: contain; }
.logo-connexion { margin: 0 0 22px; text-align: center; line-height: 0; }
.logo-connexion img { width: 260px; max-width: 80%; height: auto; }
.boite-connexion .logo { justify-content: center; padding-bottom: 8px; font-size: 1.4rem; }
.boite-connexion button { width: 100%; padding: 12px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; font-size: .9rem; }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 1100px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .barre { transform: translateX(-100%); box-shadow: var(--ombre); }
  body.menu-ouvert .barre { transform: none; }
  body.menu-ouvert .voile { display: block; position: fixed; inset: 0; background: rgba(20, 24, 40, .35); z-index: 25; }
  .contenu { margin-left: 0; }
  .bouton-menu { display: inline-flex; }
  .entete { padding: 0 16px; gap: 10px; }
  .recherche { display: none; }
  .profil-texte { display: none; }
  main { padding: 20px 16px; }
  .grille-2, .colonnes-form, .filtres { grid-template-columns: 1fr; }
  .tableau { margin: 0 -16px; } th, td { padding-left: 16px; padding-right: 16px; }
  .carte { padding: 18px 16px; }
  .masquer-mobile { display: none; }
}
@media (max-width: 480px) {
  .chiffres { gap: 12px; }
  .chiffre { flex-direction: column; align-items: flex-start; gap: 10px; }
  .chiffre-icone { width: 42px; height: 42px; }
  h1 { font-size: 1.35rem; }
}

/* ---------- Retouches ---------- */
.recherche input[type=search] { border: 0; background: transparent; box-shadow: none; padding: 10px 0; }
button.bouton-menu { background: none; color: var(--texte); padding: 6px; }
button.bouton-menu:hover { background: var(--gris-pale); color: var(--texte); }
input[type=file] { padding: 8px; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; border: 0; border-radius: 8px; padding: 6px 14px; margin-right: 12px;
  background: var(--primaire-pale); color: var(--primaire); cursor: pointer; }
.seulement-mobile { display: none; }
@media (max-width: 860px) { .seulement-mobile { display: inline; } }

/* ---------- Sprint 2 : modèles, matières, versions ---------- */
.grille-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.carte-modele { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: inherit; transition: transform .15s, box-shadow .15s; }
.carte-modele:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(23, 31, 64, .1); color: inherit; }
.carte-modele .vignette { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-bottom: 1px solid var(--bordure); }
.vignette.vide { display: grid; place-items: center; color: #c3c9da; background: var(--gris-pale); }
.vignette.vide svg.icone { width: 56px; height: 56px; stroke-width: 1.4; }
.carte-modele-corps { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.carte-modele-corps .ligne { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.photo-produit { width: 160px; height: 160px; border-radius: var(--rayon); object-fit: contain; background: #fff; border: 1px solid var(--bordure); flex: none; }
.photo-produit.vide { display: grid; place-items: center; color: #c3c9da; background: var(--gris-pale); }
.photo-produit.vide svg.icone { width: 56px; height: 56px; stroke-width: 1.4; }
.vt { display: flex; align-items: baseline; gap: 6px; }
.vt b { font-size: 2rem; line-height: 1; }
.versions { display: flex; gap: 8px; flex-wrap: wrap; }
.versions a { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--bordure); font-size: .82rem; color: var(--texte-doux); }
.versions a.courante { background: var(--primaire-pale); border-color: transparent; color: var(--primaire); font-weight: 600; }
.bandeau { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--rayon-petit); margin-bottom: 16px; font-size: .9rem; }
.bandeau.info { background: var(--primaire-pale); color: var(--primaire-fonce); }
.bandeau.fige { background: var(--vert-pale); color: #138a5f; }
.bandeau.attention { background: var(--orange-pale); color: #9a5c00; }
.ajout-ligne { background: var(--fond); border-radius: var(--rayon-petit); padding: 16px; margin-top: 16px; }
.ajout-ligne .colonnes-ligne { display: grid; grid-template-columns: 80px 2fr 1fr 1.4fr; gap: 0 12px; }
.ajout-ligne .colonnes-nomenclature { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
td.nombre, th.nombre { text-align: right; white-space: nowrap; }
.petites-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sous-minimum { color: var(--rouge); font-weight: 600; }
@media (max-width: 860px) {
  .ajout-ligne .colonnes-ligne, .ajout-ligne .colonnes-nomenclature { grid-template-columns: 1fr; }
  .grille-modeles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .photo-produit { width: 110px; height: 110px; }
}
.barre { overflow-y: auto; }
.barre-pied { flex: none; margin-top: 24px; }
.barre > .menu + .barre-pied { margin-top: auto; }

/* ---------- Phase 2 : pointage et efficience ---------- */
.taux { font-weight: 600; }
.taux.bon { color: #138a5f; } .taux.moyen { color: #b26b00; } .taux.faible { color: var(--rouge); }
.indicateurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.indicateur { background: var(--fond); border-radius: var(--rayon-petit); padding: 12px 14px; }
.indicateur small { display: block; font-size: .78rem; }
.indicateur b { font-size: 1.35rem; }
.indicateur.mis-en-avant { background: var(--primaire-pale); }
.indicateur.ecart-negatif { background: var(--rouge-pale); } .indicateur.ecart-negatif b { color: #c22d32; }
.indicateur.ecart-positif { background: var(--vert-pale); } .indicateur.ecart-positif b { color: #138a5f; }
table.efficience td, table.efficience th { padding-left: 12px; padding-right: 12px; text-align: right; }
table.efficience td:first-child, table.efficience th:first-child { text-align: left; padding-left: 22px; }
table.efficience td.texte, table.efficience th.texte { text-align: left; }
table.efficience tfoot td { font-weight: 700; border-top: 2px solid var(--bordure); }
td.groupe-chaine { background: #f3fbf7; }
.alerte-ligne { color: var(--rouge); cursor: help; }
.marque { font-size: .7rem; padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.marque.estime { background: var(--orange-pale); color: #9a5c00; }
.marque.a-valider { background: var(--primaire-pale); color: var(--primaire); }
table.pointage input, table.pointage select { padding: 6px 8px; font-size: .88rem; }
table.pointage input { width: 80px; }
tr.ligne-absente td { background: #fff8f8; }
.liste-effectif .cases { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-height: 420px; overflow-y: auto; padding: 4px; }
.liste-effectif fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.liste-effectif legend { font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
.case.absent-ce-jour { border-color: var(--rouge); background: var(--rouge-pale); }
.case.ailleurs { border-color: var(--orange); }
.compteur-effectif { position: sticky; top: 68px; z-index: 5; }
.actions-cases { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lien-cases { background: none; border: 0; padding: 0; color: var(--primaire); font-weight: 400; font-size: .8rem; cursor: pointer; }
.lien-cases:hover { text-decoration: underline; background: none; color: var(--primaire-fonce); }
@media (max-width: 860px) { .indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
table.pointage form.actions { flex-wrap: nowrap; }
table.pointage select { width: auto; min-width: 130px; }
@media (max-width: 860px) { table.pointage form.actions { flex-wrap: wrap; } }
.taux { white-space: nowrap; }

/* ---------- Phase 3 : graphiques et pilotage ---------- */
.graphe-colonnes { position: relative; height: 220px; margin: 8px 0 4px 44px; }
.graphe-grille { position: absolute; inset: 0 0 22px 0; }
.repere { position: absolute; left: 0; right: 0; border-top: 1px solid var(--bordure); }
.repere span { position: absolute; left: -44px; top: -9px; font-size: .72rem; color: var(--texte-doux); width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.graphe-barres { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 2px; }
.colonne { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 22px; position: relative; border-radius: 6px; outline: none; }
.colonne .barre-graphe { width: min(24px, 70%); background: var(--primaire); border-radius: 4px 4px 0 0; min-height: 2px; }
.colonne small { position: absolute; bottom: 2px; font-size: .7rem; color: var(--texte-doux); }
.colonne:hover, .colonne:focus-visible { background: var(--primaire-pale); }
.graphe-lignes { display: flex; flex-direction: column; gap: 10px; }
.graphe-ligne { display: grid; grid-template-columns: minmax(150px, 38%) 1fr auto; gap: 12px; align-items: center; border-radius: 6px; padding: 2px 4px; outline: none; }
.graphe-ligne:hover, .graphe-ligne:focus-visible { background: var(--primaire-pale); }
.graphe-libelle { font-size: .88rem; }
.graphe-piste { height: 14px; }
.graphe-piste .barre-graphe { display: block; height: 100%; max-height: 24px; background: var(--primaire); border-radius: 0 4px 4px 0; min-width: 2px; }
.graphe-valeur { font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.info-bulle { position: fixed; z-index: 100; pointer-events: none; background: var(--texte); color: #fff; font-size: .8rem; padding: 6px 10px; border-radius: 8px; white-space: pre-line; box-shadow: var(--ombre); max-width: 260px; }
.chiffre-vedette { font-size: 3rem; font-weight: 700; line-height: 1; }
.filtres-mois { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.filtres-mois select { width: auto; }
.voir-tableau summary { cursor: pointer; font-size: .85rem; color: var(--primaire); margin-top: 12px; }
.alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.alertes a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--rayon-petit); color: var(--texte); background: var(--fond); }
.alertes a:hover { background: var(--primaire-pale); }
.saisie-charges input { text-align: right; max-width: 180px; }
@media (max-width: 860px) { .graphe-ligne { grid-template-columns: 1fr auto; } .graphe-piste { grid-column: 1 / -1; grid-row: 2; } .chiffre-vedette { font-size: 2.4rem; } }
.colonne .barre-graphe, .graphe-piste, .graphe-piste .barre-graphe { display: block; }
.colonne .barre-graphe { flex: none; }

/* ---------- Phase 4 : planning (frise) ---------- */
.legende { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--texte-doux); margin-left: auto; }
.legende .cle { width: 14px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.cle.stock, .frise-barre.stock { background: var(--primaire); }
.cle.sur_mesure, .frise-barre.sur_mesure { background: #e8590c; }
.frise-defilement { overflow-x: auto; }
.frise { min-width: calc(190px + var(--jours) * 26px); font-size: .8rem; }
.frise-entete, .frise-ligne { display: grid; grid-template-columns: 190px repeat(var(--jours), minmax(26px, 1fr)); }
.frise-ligne > * { grid-row: 1; }
.frise-titre { padding: 8px 12px 8px 22px; position: sticky; left: 0; background: var(--carte); z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--bordure); }
.frise-titre small { color: var(--texte-doux); }
.frise-jour { text-align: center; color: var(--texte-doux); padding: 18px 0 6px; position: relative; border-bottom: 1px solid var(--bordure); text-transform: uppercase; font-size: .7rem; }
.frise-jour .semaine { position: absolute; top: 2px; left: 2px; white-space: nowrap; font-weight: 600; color: var(--texte); text-transform: none; }
.frise-jour.lundi, .frise-case.lundi { border-left: 1px solid var(--bordure); }
.frise-jour.repos, .frise-case.repos { background: var(--gris-pale); }
.frise-jour.aujourdhui { color: var(--primaire); font-weight: 700; }
.frise-case { border-bottom: 1px solid var(--bordure); }
.frise-case.aujourdhui { background: var(--primaire-pale); }
.frise-chaine { padding: 12px 22px 6px; font-weight: 600; color: var(--texte); background: var(--fond); }
.frise-ligne > .frise-titre { grid-column: 1; }
.frise-barre { position: relative; z-index: 1; align-self: center; height: 22px; border-radius: 4px; margin: 0 1px; color: #fff; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; font-weight: 600; font-size: .75rem; text-decoration: none; }
.frise-barre:hover, .frise-barre:focus-visible { filter: brightness(1.1); color: #fff; outline: 2px solid var(--carte); }
.frise-barre.en_production { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.frise-barre.terminee { opacity: .45; }
.frise-barre.alerte::after { content: "!"; margin-left: auto; padding-left: 6px; font-weight: 800; }

/* ---------- Ordre de coupe et fiche de coupe ---------- */
.photo-matiere { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #fff; border: 1px solid var(--bordure); flex: none; }
.photo-matiere.grande { width: 72px; height: 72px; border-radius: 12px; }
.photo-matiere.vide { display: inline-grid; place-items: center; color: #c3c9da; background: var(--gris-pale); }
.photo-matiere.vide svg.icone { width: 22px; height: 22px; }
.fiche-coupe { margin-bottom: 20px; }
.fiche-coupe .tableau td, .fiche-coupe .tableau th { vertical-align: middle; }
.fiche-coupe tfoot td { font-weight: 700; border-top: 2px solid var(--bordure); }
.colonne-stock, .tableau td.colonne-stock, .tableau th.colonne-stock, .tableau tr:hover td.colonne-stock { background: #1d2333; color: #fff; text-align: center; font-weight: 700; }
.ligne-ajout { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; align-items: end; }
.ecart-mauvais { color: #c92a2a; font-weight: 700; }
.ecart-bon { color: #2b8a3e; font-weight: 700; }

/* ---------- OF ---------- */
.etapes-of { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.etapes-of li { border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; color: var(--texte-doux); }
.etapes-of li b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gris-pale); font-size: .8rem; margin-bottom: 4px; }
.etapes-of li.en-cours { border-color: var(--primaire); color: var(--texte); }
.etapes-of li.en-cours b { background: var(--primaire); color: #fff; }
.etapes-of li.fait { color: var(--texte); }
.etapes-of li.fait b { background: #138a5f; color: #fff; }
.etapes-of small { font-size: .78rem; color: var(--texte-doux); }
.vignette-decli { display: flex; gap: 8px; align-items: center; margin-right: 12px; }
.vignette-decli small { line-height: 1.3; }
.texte-bleu { color: var(--primaire); }
@media (max-width: 720px) { .etapes-of { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.table-bon tr.sous-ligne td { border-top: none; padding-top: 2px; padding-bottom: 6px; background: transparent; }
.sortie-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sortie-ligne select { width: auto; max-width: 340px; }
.sortie-ligne input[type=text] { width: 120px; }

/* ---------- Import des charges ---------- */
.table-import-charges td, .table-import-charges th { font-size: .78rem; padding: 6px 8px; white-space: nowrap; }
.case-nouveau { background: var(--vert-pale); }
.case-identique { background: var(--primaire-pale); }
.case-different { background: var(--orange-pale); font-weight: 700; }
.case-prevision { color: var(--texte-doux); background: var(--gris-pale); font-style: italic; }

/* ---------- Situation des dossiers (planning) ---------- */
.point-etape { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; flex: none; }
.point-etape.vert { background: #2f9e44; }
.point-etape.orange { background: #f59f00; }
.point-etape.rouge { background: #e03131; }
.point-etape.gris { background: #ced4da; }
.point-etape.retard { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e03131; }
.legende .point-etape { width: 10px; height: 10px; margin: 0 4px 0 10px; }
.legende .point-etape.retard { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e03131; }
.table-situation td.centre, .table-situation th.centre { text-align: center; }
.table-situation th.centre { font-size: .72rem; white-space: normal; max-width: 90px; }
.situation-dossier { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.situation-dossier li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 10px 12px; }
.situation-dossier li .point-etape { margin-top: 3px; }
.situation-dossier small { display: block; color: var(--texte-doux); font-size: .78rem; margin-top: 2px; }
.table-situation td:nth-child(-n+4) { white-space: nowrap; }
.table-situation th, .table-situation td { padding-left: 8px; padding-right: 8px; }
.filtres.filtres-of { grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .filtres.filtres-of { grid-template-columns: 1fr 1fr; } }
#resultats td:first-child, #resultats td:nth-child(3) { white-space: nowrap; }
/* Fin de chaîne : qualité, emballage, produits finis */
.filtres.filtres-fin { grid-template-columns: 2fr 1fr 1fr; }
table.defauts input { width: 110px; text-align: right; }
table.suivi-of td.ecart { white-space: nowrap; }
td.sans-coupure { white-space: nowrap; }
.tableau table.defauts { width: auto; min-width: 420px; }
/* Tampons : vert ≥ cible, orange entre minimum et cible, rouge < minimum */
.tampons { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tampon { border-radius: var(--rayon-petit); padding: 12px 14px; border: 1px solid var(--bordure); display: flex; flex-direction: column; gap: 2px; }
.tampon small { color: var(--texte-doux); font-size: .78rem; }
.tampon b { font-size: 1.35rem; }
.tampon span { font-size: .75rem; }
.tampon-vert { background: var(--vert-pale); border-color: #bfe8d6; } .tampon-vert b { color: #138a5f; }
.tampon-orange { background: var(--orange-pale); border-color: #fbd9a0; } .tampon-orange b { color: #b26b00; }
.tampon-rouge { background: var(--rouge-pale); border-color: #f7c5c7; } .tampon-rouge b { color: #c22d32; }
.tampon-inconnu { background: var(--gris-pale); } .tampon-inconnu b { color: var(--texte-doux); }
/* Prix de revient et coût réel */
.prix-revient { font-size: 1.15rem; color: var(--primaire); }
tr.total td { background: var(--gris-pale); }
.saisie-transport { display: inline-flex; gap: 8px; align-items: center; margin-left: 12px; }
.saisie-transport input { width: 110px; }
.indicateurs-cout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.indicateurs-cout > div { background: var(--gris-pale); border-radius: var(--rayon-petit); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.indicateurs-cout b { font-size: 1.2rem; }
@media (max-width: 860px) { .indicateurs-cout { grid-template-columns: 1fr; } }
.tables-cout { display: flex; flex-direction: column; gap: 16px; }
/* Cartes repliables (bouton ajouté par base.html.twig, choix gardé dans le navigateur) */
.carte-tete .replier { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--texte-doux); border: 1px solid transparent; margin-left: 4px; cursor: pointer; }
.carte-tete .replier:hover { background: var(--gris-pale); color: var(--texte); }
.carte-tete .replier svg { transition: transform .15s ease; }
section.carte.repliee > :not(.carte-tete) { display: none; }
section.carte.repliee > .carte-tete { margin-bottom: 0; }
section.carte.repliee .replier svg { transform: rotate(-90deg); }
@media print { .carte-tete .replier { display: none; } section.carte.repliee > :not(.carte-tete) { display: revert; } }
.carte-tete:has(> .replier) { justify-content: flex-start; }
.carte-tete:has(> .replier) > h2 { margin-right: auto; }
/* Analyse produit */
.filtres.filtres-analyse { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .filtres.filtres-analyse { grid-template-columns: 1fr 1fr; } }
.hypotheses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.hypotheses small { display: block; margin-top: 4px; font-size: .75rem; }
@media (max-width: 760px) { .hypotheses { grid-template-columns: 1fr 1fr; } }
.indicateurs-analyse { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tuile { background: var(--gris-pale); border-radius: var(--rayon-petit); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tuile small { color: var(--texte-doux); font-size: .78rem; } .tuile b { font-size: 1.25rem; } .tuile > span { font-size: .78rem; }
.tuile-vert { background: var(--vert-pale); } .tuile-orange { background: var(--orange-pale); } .tuile-rouge { background: var(--rouge-pale); }
tr.ligne-verte td:first-child { box-shadow: inset 4px 0 0 var(--vert); }
tr.ligne-rouge td:first-child { box-shadow: inset 4px 0 0 var(--rouge); }
details.incompletes { margin-top: 14px; } details.incompletes summary { cursor: pointer; font-weight: 600; color: #b26b00; }
.graphe-projection { width: 100%; height: auto; display: block; }
.graphe-projection .grille { stroke: var(--bordure); stroke-width: 1; }
.graphe-projection .axe { fill: var(--texte-doux); font-size: 11px; }
.graphe-projection .ligne-charges { stroke: var(--texte-doux); stroke-width: 1.5; stroke-dasharray: 6 4; }
.graphe-projection .etiquette-charges { fill: var(--texte-doux); font-size: 11px; }
.graphe-projection .trace-realise { fill: none; stroke: var(--primaire); stroke-width: 2; stroke-linejoin: round; }
.graphe-projection .trace-projection { stroke: var(--primaire); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.graphe-projection .cible { fill: transparent; } .graphe-projection .cible:hover, .graphe-projection .cible:focus { fill: var(--primaire); fill-opacity: .25; outline: none; }
.legende-projection { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .82rem; color: var(--texte-doux); }
.legende-projection span { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--primaire); vertical-align: middle; }
.legende-projection .cle-projection { border-top-style: dotted; } .legende-projection .cle-charges { border-top: 2px dashed var(--texte-doux); }
/* Photo de la matière dans les tableaux */
th.colonne-photo, td.colonne-photo { width: 56px; padding-right: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-reserve { font-weight: 600; }
/* Recherche dans les longues listes (modèles, matières, OF…) */
input.recherche-liste { margin-bottom: 6px; }
select.liste-ouverte { height: auto; padding: 4px; }
select.liste-ouverte option { padding: 6px 8px; border-radius: 6px; }
/* Tableau de bord de la modéliste */
.liste li.tache { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.liste li.tache .actions { flex-wrap: nowrap; }
.lien-pdf { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.documents-services td { vertical-align: top; }
/* Repère de cible sur une colonne (trait foncé), indicateurs de la chaîne */
.colonne .repere-cible { position: absolute; left: 50%; transform: translateX(-50%); width: min(34px, 92%); height: 0; border-top: 2px solid var(--texte); }
.legende-graphe { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--texte-doux); margin-top: 4px; }
.legende-graphe .cle-barre { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--primaire); vertical-align: -2px; margin-right: 4px; }
.legende-graphe .cle-cible { display: inline-block; width: 16px; border-top: 2px solid var(--texte); vertical-align: middle; margin-right: 4px; }
.indicateurs-chaine .grille-2 { margin-bottom: 20px; }

/* Trésorerie */
.negatif { color: var(--rouge); font-weight: 600; }
.positif { color: #138a5f; }
.filtres.filtres-tresorerie { grid-template-columns: repeat(4, 1fr); }
.prevision td.negatif { background: var(--rouge-pale); }
.decision { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.decision input[type=text], .decision input[type=date] { width: auto; min-width: 0; padding: 6px 8px; font-size: .85rem; }

/* Circuit de la production (tableau de bord) */
.circuit-production.compact th, .circuit-production.compact td { padding-left: 8px; padding-right: 8px; }
.position-banque tr.passee td { color: var(--texte-doux); }
.position-banque tr.previsionnelle td { font-style: italic; color: var(--rouge); }

/* Notifications : thèmes, urgentes, filtres */
.cloche .pastille.calme { background: var(--primaire); }
.themes-notifications { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.themes-notifications .etiquette { text-decoration: none; padding: 6px 12px; }
.themes-notifications .etiquette.choisie { background: var(--primaire); color: #fff; }
.filtres.filtres-notifications { grid-template-columns: 2fr 1.5fr 1fr 1fr 1.4fr; align-items: end; }
.filtres-notifications .cases { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.filtres-notifications .cases label { display: flex; gap: 6px; align-items: center; font-weight: 400; }
.carte-urgente { border-left: 4px solid var(--rouge); }
li.notif-urgente { background: var(--rouge-pale); }
/* Une notification : le message passe à la ligne au lieu de déborder ; les boutons restent à droite */
li.notification .personne { flex: 1; align-items: flex-start; }
li.notification .personne > span:last-child { min-width: 0; flex: 1; }
li.notification .personne strong { white-space: normal; overflow-wrap: anywhere; }
li.notification .pastille-statut { flex: none; margin-top: 2px; min-width: 175px; }
li.notification > .actions { flex: none; display: flex; gap: 8px; align-items: center; }
li.notif-urgente { padding-left: 10px; padding-right: 10px; border-radius: var(--rayon-petit); }
@media (max-width: 700px) { li.notification { flex-direction: column; align-items: stretch; } li.notification .personne { flex-direction: column; gap: 6px; } li.notification .pastille-statut { min-width: 0; } }
.cases-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; margin-bottom: 8px; }
.cases-roles label { display: flex; gap: 6px; align-items: center; font-weight: 400; }

/* Animation d'ouverture de page : le contenu apparaît en fondu en montant légèrement (le menu reste fixe).
   Les navigateurs récents enchaînent aussi les pages en fondu (View Transitions). Désactivée si l'utilisateur a demandé moins d'animations. */
@view-transition { navigation: auto; }
@keyframes ouverture-page { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main { animation: ouverture-page .25s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  main { animation: none; }
}

/* Bandeau du support ANATEX quand il travaille dans une société (accès autorisé par celle-ci) */
.bandeau-support { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
  padding: 10px 16px; border-radius: var(--rayon-petit); background: var(--orange-pale); color: #8a5300; font-size: .9rem; }
.bandeau-support span { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 300px; min-width: 0; }
.console-editeur { min-height: 100vh; }
.console-tete { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: var(--carte); border-bottom: 1px solid var(--bordure); }
.console-tete .logo { padding: 0; }
.console-editeur main { margin: 0 auto; }

/* Colonnes empilées (analyse des charges) : séries validées pour la lecture des daltoniens */
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; padding: 0; font-size: .82rem; color: var(--texte-doux); }
.legende li { display: flex; align-items: center; gap: 6px; }
.pastille-serie { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.colonne .pile { width: min(24px, 70%); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.colonne .pile .segment { display: block; width: 100%; min-height: 2px; }
.colonne .pile .segment:first-child { border-radius: 4px 4px 0 0; }