:root {
  --fond: #faf8f3;
  --carte: #ffffff;
  --texte: #2b2620;
  --doux: #6f675c;
  --bord: #e7e1d6;
  --accent: #b45309;
  --accent-clair: #fdf1dc;
  --vert: #15803d;
  --vert-clair: #e8f6ec;
  --conge: #d3f2dc;
  --conge-fonce: #15803d;
  --recup: #4ade80;
  --rouge: #b91c1c;
  --rouge-clair: #fdecec;
  --gris: #f1eee8;
  --rayon: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
header.barre {
  background: var(--carte); border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 10;
}
.barre-int { max-width: 900px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { font-weight: 700; color: var(--texte); text-decoration: none; font-size: 1.05rem; }
.logo span { color: var(--accent); }
.logo span.doux { color: var(--doux); }
nav.menu { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
nav.menu a, nav.menu button {
  text-decoration: none; color: var(--doux); padding: 6px 10px; border-radius: 8px;
  font: inherit; font-size: .92rem; background: none; border: 0; cursor: pointer;
}
nav.menu a.actif { background: var(--accent-clair); color: var(--accent); font-weight: 600; }
nav.menu a:hover, nav.menu button:hover { background: var(--gris); }
main { max-width: 900px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.35rem; margin: 4px 0 14px; }
h2 { font-size: 1.1rem; margin: 22px 0 10px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; margin-bottom: 14px; }
.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; border: 1px solid; }
.flash.ok { background: var(--vert-clair); border-color: #b7e2c4; color: #14532d; }
.flash.erreur { background: var(--rouge-clair); border-color: #f5c2c2; color: #7f1d1d; }
.flash.info { background: var(--gris); border-color: var(--bord); }
label { display: block; font-size: .9rem; color: var(--doux); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=time], input[type=number], select {
  width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--bord); border-radius: 10px;
  background: #fff; color: var(--texte);
}
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn.second { background: #fff; color: var(--accent); }
.btn.discret { background: #fff; color: var(--doux); border-color: var(--bord); font-weight: 500; }
.btn.danger { background: #fff; color: var(--rouge); border-color: #f0c4c4; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.champ { margin-bottom: 12px; }
.heure { display: flex; gap: 6px; }
.heure input { flex: 1; }
.heure .btn { padding: 10px; font-size: .85rem; white-space: nowrap; }
.plage-titre { font-weight: 600; margin: 4px 0 8px; }
.nav-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.nav-date .titre { text-align: center; font-weight: 600; }
.nav-date .titre small { display: block; color: var(--doux); font-weight: 400; }
.resume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.resume div { background: var(--gris); border-radius: 10px; padding: 10px 4px; }
.resume b { display: block; font-size: 1.15rem; }
.resume small { color: var(--doux); font-size: .78rem; }
.pos { color: var(--vert); }
.neg { color: var(--rouge); }
.doux { color: var(--doux); }
.petit { font-size: .85rem; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; background: var(--gris); color: var(--doux); }
.badge.encours { background: var(--accent-clair); color: var(--accent); }

table.mois { width: 100%; border-collapse: collapse; background: var(--carte); font-size: .9rem; }
table.mois th { text-align: left; font-size: .78rem; color: var(--doux); font-weight: 600; padding: 8px 6px; border-bottom: 2px solid var(--bord); }
table.mois td { padding: 7px 6px; border-bottom: 1px solid var(--bord); vertical-align: top; }
table.mois td.n, table.mois th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.mois tr.ferme td { background: var(--gris); color: var(--doux); }
table.mois tr.auj td { background: var(--accent-clair); }
table.mois tr.cliquable { cursor: pointer; }
table.mois tr.cliquable:hover td { background: #fbf6ec; }
table.mois td.date { white-space: nowrap; }
table.mois td.date a { color: inherit; text-decoration: none; }
table.mois .plages { font-variant-numeric: tabular-nums; }
table.mois tfoot td { font-weight: 700; border-top: 2px solid var(--texte); border-bottom: 0; }
.table-scroll { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--rayon); }
.totaux { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.totaux div { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; }
.totaux small { color: var(--doux); display: block; font-size: .8rem; }
.totaux b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .totaux { grid-template-columns: repeat(4, 1fr); } }

table.liste { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td { padding: 8px 6px; border-bottom: 1px solid var(--bord); text-align: left; }
table.liste th { font-size: .8rem; color: var(--doux); }
table.liste td.n, table.liste th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.inactif td { color: var(--doux); text-decoration: line-through; }

.jours-reglage { display: grid; grid-template-columns: auto 1fr 110px; gap: 8px 12px; align-items: center; }
.jours-reglage label { margin: 0; color: var(--texte); font-size: 1rem; }
.mdp-temp { font-family: ui-monospace, monospace; font-size: 1.3rem; background: var(--accent-clair); padding: 10px 14px; border-radius: 10px; display: inline-block; letter-spacing: 1px; }
.journal td { font-size: .82rem; vertical-align: top; }
.login { max-width: 380px; margin: 8vh auto 0; }
.login h1 { text-align: center; }
.login .logo-grand { text-align: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.login .logo-grand span { color: var(--accent); }
footer { text-align: center; color: var(--doux); font-size: .78rem; padding: 24px 16px; }

@media (max-width: 480px) {
  table.mois { font-size: .82rem; }
  table.mois td, table.mois th { padding: 6px 4px; }
  .grille2 { grid-template-columns: 1fr; }
}
table.planning { border-collapse: collapse; background: var(--carte); font-size: .85rem; min-width: 100%; }
table.planning th, table.planning td { border-bottom: 1px solid var(--bord); border-left: 1px solid var(--bord); padding: 0; text-align: center; }
table.planning th { padding: 6px 4px; font-size: .8rem; font-weight: 600; }
table.planning th.nom, table.planning td.nom { text-align: left; padding: 6px 8px; position: sticky; left: 0; background: var(--carte); border-left: 0; min-width: 84px; z-index: 1; }
table.planning td.n { padding: 6px 8px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.planning td.case a { display: block; padding: 6px 4px; min-width: 52px; min-height: 44px; color: var(--texte); text-decoration: none; font-variant-numeric: tabular-nums; line-height: 1.25; }
table.planning td.case a:hover { background: var(--accent-clair); }
table.planning td.case hr { border: 0; border-top: 1px dashed var(--bord); margin: 3px 4px; }
table.planning .ferme { background: var(--gris); }
table.planning th.auj { background: var(--accent-clair); color: var(--accent); }
table.planning td.repos a { color: var(--doux); font-style: italic; }
table.planning td.vide .plus { color: var(--bord); font-size: 1.2rem; font-weight: 700; }
.prevu { background: var(--accent-clair); border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.sem-titre { font-weight: 600; padding: 4px 0 6px; }
table.planning-moi td { padding: 6px 4px; }
table.planning-moi tr.auj td { background: var(--accent-clair); }
table.planning-moi tr.ferme td { color: var(--doux); }
@media print {
  header.barre, .actions, footer, .pas-imprimer { display: none !important; }
  body { background: #fff; }
  main { padding: 0; }
}

/* pointeuse */
.pointeuse-tete { text-align: center; margin: 4px 0 14px; }
.horloge { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.etapes { padding: 4px 16px; }
.etape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--bord); min-height: 64px; }
.etape:last-of-type { border-bottom: 0; }
.etape-lib { font-weight: 600; }
.etape-lib small { display: block; font-weight: 400; color: var(--doux); font-size: .8rem; }
.etape:not(.faite):not(.prochaine) .etape-lib { color: var(--doux); font-weight: 500; }
.etape-heure { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.etape.faite .etape-heure { color: var(--vert); }
.btn.maintenant { padding: 14px 22px; font-size: 1.05rem; min-width: 140px; }
.fin-journee { text-align: center; color: var(--vert); font-weight: 600; margin: 8px 0 12px; }
table.mois tr.ligne-semaine td { background: var(--accent-clair); font-weight: 600; font-size: .85rem; border-bottom: 2px solid var(--bord); }

/* jours de repos : jaune ; repos travaillé : moitié jaune */
:root { --jaune: #fde68a; }
.jours-repos { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.jours-repos label { color: var(--texte); margin: 0; font-size: .95rem; }
table.mois tr.repos td { background: var(--jaune); }
table.mois tr.repos-travaille td.date, table.mois tr.repos-travaille td.plages { background: var(--jaune); }
table.planning td.repos { background: var(--jaune); }
table.planning td.repos a { color: var(--texte); }
table.planning-moi tr.repos td { background: var(--jaune); }
@media print { table.mois tr.repos td, table.mois tr.repos-travaille td.date, table.mois tr.repos-travaille td.plages { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* jours fériés légaux : bleu ; férié travaillé : moitié bleu */
:root { --bleu: #bfdbfe; --bleu-fonce: #1e40af; }
table.mois tr.ferie td { background: var(--bleu); color: var(--texte); }
table.mois tr.ferie-travaille td.date, table.mois tr.ferie-travaille td.plages { background: var(--bleu); }
.nom-ferie { color: var(--bleu-fonce); font-weight: 600; }
table.planning th.ferie { background: var(--bleu); color: var(--texte); }
table.planning-moi tr.ferie td { background: var(--bleu); color: var(--texte); }
.badge-ferie { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--bleu); color: var(--bleu-fonce); font-weight: 600; font-size: .85rem; }
@media print { table.mois tr.ferie td, table.mois tr.ferie-travaille td.date, table.mois tr.ferie-travaille td.plages { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* colonne Code */
table.mois th.code, table.mois td.code { text-align: center; width: 1%; white-space: nowrap; padding-left: 2px; padding-right: 2px; }
.code-jf { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--bleu-fonce); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .5px; }
table.mois tr.ferme-travaille td.date, table.mois tr.ferme-travaille td.plages { background: var(--gris); }

/* congés : vert ; congé travaillé : moitié verte */
table.mois tr.conge td { background: var(--conge); color: var(--texte); }
table.mois tr.conge-travaille td.date, table.mois tr.conge-travaille td.plages { background: var(--conge); }
.code-cg { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--conge-fonce); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .5px; }
@media print { table.mois tr.conge td, table.mois tr.conge-travaille td.date, table.mois tr.conge-travaille td.plages, .code-cg { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.code-rc { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--conge-fonce); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .5px; margin-left: 2px; }
@media print { .code-rc { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* récupération d'heures supp : vrai vert (choix de Ben) ; récup travaillée : moitié */
table.mois tr.recup td { background: var(--recup); color: var(--texte); }
table.mois tr.recup-travaille td.date, table.mois tr.recup-travaille td.plages { background: var(--recup); }
@media print { table.mois tr.recup td, table.mois tr.recup-travaille td.date, table.mois tr.recup-travaille td.plages { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }