/* ===========================================================================
   ARMELEC RH — Feuille de style du module
   ---------------------------------------------------------------------------
   Base reprise de l'ERP (variables, DM Sans, boutons, cartes, alertes,
   formulaires, tableaux) puis couche propre au module :
     Gabarit UNIQUE depuis la revue du 07.08.2026 : même header (logo + menu
     du général + prénom) et même barre du bas partout. La seule différence
     entre pages est la largeur du contenu : body.page-etroite = colonne
     640 px pour les écrans personnels (pointage, heures…).
   Duplication volontaire depuis l'ERP : aucun fichier partagé (étanchéité).
   =========================================================================== */

:root {
  --bg:           #f4f3ef;
  --bg-card:      #ffffff;
  --text:         #1a1a1a;
  --text-muted:   #6b6b6b;
  --border:       #e0ddd5;
  --accent:       #313294;
  --accent-dark:  #262470;
  --success:      #2e7d3a;
  --warning:      #d97706;
  --error:        #c8402a;
  --radius:       6px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.04);
  --shadow:       0 2px 8px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
/* La barre du bas est partout : le body lui réserve sa hauteur (+ encoche
   iOS). Les pages d'auth n'ont pas de barre. */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
body.page-auth { padding-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 700; }

/* ===========================================================================
   1. SOCLE COMMUN (cartes, formulaires, boutons, alertes, tableaux)
   =========================================================================== */

/* === CARTES ============================================================== */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.card > h2 {
  font-size: 17px;
  margin: 0 0 16px 0;
}
.card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
}

/* === FORMULAIRES ======================================================== */

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text);
}
.field .req { color: var(--accent); font-weight: 700; }
.field-aide {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.field-cle {
  margin: 4px 0 0 0;
  font-size: 11px;
  color: var(--text-muted);
}
.field-cle code {
  font-family: 'DM Mono', monospace;
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
}

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(49,50,148,0.12);
}

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  cursor: pointer;
}
.check-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grid-filtres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.grid-fiche {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  align-items: start;
}

.form-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.inline-form { display: inline; }

.sr-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* === BOUTONS ============================================================ */

.btn {
  display: inline-block;
  padding: 10px 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-secondary {
  background: white;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--text-muted); background: #fafaf8; }

.btn-block { display: block; width: 100%; text-align: center; }

/* Bouton qui se comporte comme un lien (actions en ligne dans les tableaux) */
.btn-lien {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.btn-lien:hover { text-decoration: underline; }
.btn-lien-danger { color: var(--error); }

/* === ALERTES ============================================================ */

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid;
}
.alert-error   { background: #fdf0ed; border-color: #f4cabf; color: #8a2b1c; }
.alert-success { background: #e8f4ea; border-color: #b8d9be; color: #1f5128; }
.alert-info    { background: #eef3fa; border-color: #c5d5ec; color: #1d3a6b; }
.alert-warning { background: #fef6e7; border-color: #f5d9a0; color: #7a4a0a; }

/* === TABLEAUX =========================================================== */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fafaf8; }
.row-inactif { opacity: 0.55; }
.col-actions { white-space: nowrap; text-align: right; }
.col-actions > * + * { margin-left: 12px; }

.table-audit td { font-size: 12px; }
.audit-kv { line-height: 1.4; }
.audit-k {
  color: var(--text-muted);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
}

.pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

/* === BADGES ============================================================= */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-gris   { background: #f0efeb; border-color: var(--border); color: var(--text-muted); }
.badge-vert   { background: #e8f4ea; border-color: #b8d9be; color: #1f5128; }
.badge-orange { background: #fef6e7; border-color: #f5d9a0; color: #7a4a0a; }

/* === MÉTA (paires libellé / valeur) ===================================== */

.meta-grid { display: flex; flex-direction: column; gap: 10px; }
.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.meta-row:last-child { border-bottom: none; }
.meta-label { font-size: 13px; color: var(--text-muted); }
.meta-value { font-size: 13px; font-weight: 500; text-align: right; }
.meta-value code {
  font-family: 'DM Mono', monospace;
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}

/* === UTILITAIRES ======================================================== */

.text-muted  { color: var(--text-muted); }
.text-small  { font-size: 12px; }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }  .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }

/* ===========================================================================
   2. GABARIT DESKTOP (gestion — valideur / admin)
   =========================================================================== */

.armelec-header {
  background: var(--bg-card);
  border-bottom: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-suffix {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.main-nav { display: flex; gap: 24px; flex: 1; }
.main-nav a {
  color: #475467;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.main-nav a:hover {
  color: var(--accent);
  text-decoration: none;
  border-bottom-color: var(--accent);
}
.main-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.header-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.user-menu { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.user-name { color: var(--text); font-weight: 600; }

.armelec-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
  min-height: calc(100vh - 160px);
}
/* Écrans personnels : colonne étroite — un gros bouton de pointage sur
   1400 px serait ridicule. Un drapeau, pas un gabarit. */
body.page-etroite .armelec-main { max-width: 640px; padding: 16px; }
body.page-etroite .card { padding: 18px; }


.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 26px; margin: 0 0 4px 0; }
.page-header p { margin: 0; max-width: 70ch; }
.page-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.page-header-flex h1, .page-header-flex h2 { margin: 0; }

/* === PAGES AUTH (login, activation, reset) ============================== */

body.page-auth { display: flex; flex-direction: column; min-height: 100vh; }
body.page-auth .armelec-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow);
}
.auth-logo { height: 38px; width: auto; display: block; margin: 0 auto 22px auto; }
.auth-logo img { height: 100%; width: auto; display: block; margin: 0 auto; }
.auth-title { font-size: 22px; font-weight: 700; margin: 0 0 6px 0; text-align: center; }
.auth-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px 0;
  text-align: center;
}
.auth-actions { margin-top: 22px; }
.auth-extra { text-align: center; margin-top: 18px; font-size: 13px; }
.account-form .grid-2 { gap: 14px; }

/* ===========================================================================
   3. ÉLÉMENTS DES ÉCRANS PERSONNELS (préfixe m-)
   ---------------------------------------------------------------------------
   Le header/menu mobile dédié a disparu à la revue du 07.08.2026 (gabarit
   unique) ; restent les composants propres aux écrans personnels : barre du
   bas, cartes d'état, gros boutons, listes de timbrages…
   =========================================================================== */

.m-date {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: capitalize;
}
.m-titre { font-size: 20px; margin: 0 0 14px 0; }

.m-etat-titre { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.m-etat-texte { margin: 0; color: var(--text-muted); }

.m-lien-gestion {
  display: block;
  text-align: center;
  font-weight: 600;
  color: var(--accent);
}
.m-lien-gestion:hover { text-decoration: none; border-color: var(--accent); }

/* Barre d'onglets fixée en bas — zone du pouce (avant-projet §5.1) */
.m-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 6px rgba(0,0,0,0.05);
}
.m-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  min-height: 60px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-top: 3px solid transparent;
}
.m-nav-item:hover { text-decoration: none; }
.m-nav-ico { font-size: 20px; line-height: 1; }
.m-nav-item.is-active { color: var(--accent); border-top-color: var(--accent); }
.m-nav-item.is-disabled { opacity: 0.35; cursor: default; }

/* ===========================================================================
   4. RESPONSIVE (gabarit desktop sur petit écran)
   =========================================================================== */

@media (max-width: 900px) {
  .grid-fiche { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .header-inner { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .user-menu { font-size: 12px; }
  .armelec-main { padding: 20px 16px; }
  .grid-2, .account-form .grid-2 { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; text-align: center; }
  /* Tableaux larges : défilement horizontal plutôt que colonnes écrasées */
  .card > .table { display: block; overflow-x: auto; white-space: nowrap; }
  .table-audit td { white-space: normal; }
}

/* ===========================================================================
   5. LOT A — POINTAGE, HEURES, MAJORATIONS
   =========================================================================== */

/* ─── Écran Pointage : le bouton doit être atteignable au pouce, sans viser ── */

.m-etat { text-align: center; }
.m-etat-chiffre {
  font-size: 30px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.5px;
  margin-top: 4px;
}
.m-etat-sous { color: var(--text-muted); margin-top: 4px; }

.m-pointer-form { margin: 20px 0; }
.m-btn-pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 120px;
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
.m-btn-pointer:active { transform: scale(0.985); }
.m-btn-entree { background: var(--success); }
.m-btn-sortie { background: var(--error); }
.m-btn-texte  { font-size: 27px; font-weight: 700; }
.m-btn-heure  { font-size: 15px; opacity: 0.85; font-variant-numeric: tabular-nums; }

.m-titre-sm { font-size: 15px; font-weight: 600; margin: 0 0 12px 0; }

.m-liste-timb { list-style: none; margin: 0; padding: 0; }
.m-timb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.m-timb:last-child { border-bottom: none; }
.m-timb-heure {
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  min-width: 62px;
}
.m-timb-sens { font-size: 13px; color: var(--text-muted); }
.m-timb-entree { color: var(--success); }
.m-timb-sortie { color: var(--error); }
.m-timb-motif { font-size: 12px; color: var(--text-muted); flex-basis: 100%; }

.m-note {
  font-size: 12px;
  margin: 12px 0 0 0;
  padding: 9px 11px;
  border-radius: var(--radius);
  border-left: 3px solid var(--border);
  background: #fafaf8;
}
.m-note-pause    { border-left-color: var(--warning); background: #fef6e7; }
.m-note-anomalie { border-left-color: var(--error);   background: #fdf0ed; }
.m-sous-note { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }

.m-lien-signaler {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--accent);
}

/* ─── Écran Heures ─────────────────────────────────────────────────────────── */

.m-cartes { display: flex; gap: 12px; margin-bottom: 16px; }
.m-carte-chiffre { flex: 1; text-align: center; }
.m-carte-label  { font-size: 12px; color: var(--text-muted); }
.m-carte-valeur {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 4px 0 2px 0;
  font-variant-numeric: tabular-nums;
}
.m-carte-note   { font-size: 11px; color: var(--text-muted); }
.is-positif { color: var(--success); }
.is-negatif { color: var(--error); }

.m-nav-mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.m-nav-mois-titre { font-weight: 600; font-size: 15px; }
.m-nav-mois-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 17px;
}
.m-nav-mois-btn:hover { text-decoration: none; border-color: var(--accent); }
/* n° 15 : deux dates sous les flèches — le mois par défaut, la période choisie sinon. */
.m-nav-dates { display: flex; gap: 10px; margin-bottom: 10px; }
.m-nav-dates label { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.m-nav-dates input[type=date] { flex: 1; min-width: 0; }

.m-card-jours { padding: 4px 14px !important; }

.m-jour {
  display: grid;
  grid-template-columns: 82px 1fr auto 34px;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
}
.m-jour:last-of-type { border-bottom: none; }
.m-jour:hover { text-decoration: none; }
.m-jour.is-weekend    { background: #fbfaf7; }
.m-jour.is-ferie      { background: #eef3fa; }
.m-jour.is-aujourdhui { box-shadow: inset 3px 0 0 var(--accent); padding-left: 8px; }
.m-jour.is-futur      { opacity: 0.45; }

.m-jour-date     { font-variant-numeric: tabular-nums; }
.m-jour-chiffres { font-variant-numeric: tabular-nums; }
.m-jour-fait     { font-weight: 600; }
.m-jour-du       { color: var(--text-muted); font-size: 12px; }
.m-jour-solde    { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.m-jour-pastilles { display: flex; gap: 3px; justify-content: flex-end; }
.m-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.m-pastille-ferie    { background: var(--accent); }
.m-pastille-pause    { background: var(--warning); }
.m-pastille-maj      { background: var(--success); }
.m-pastille-anomalie { background: var(--error); }

.m-recap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin: 2px 0 6px 0;
  background: #f0efeb;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
}
.m-recap-detail { color: var(--text-muted); font-weight: 400; flex: 1; text-align: right; }
.m-recap-solde  { font-variant-numeric: tabular-nums; }
/* Le total de la période Du → Au, sous le dernier récap de semaine (D4-B). */
.m-recap-periode { background: #e6e4dc; font-weight: 700; margin-top: 8px; }

/* ─── Gestion (desktop) ───────────────────────────────────────────────────── */

.sous-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sous-nav a { font-size: 13px; color: var(--text-muted); }
.sous-nav a:hover { color: var(--accent); text-decoration: none; }
.sous-nav a.is-active { color: var(--accent); font-weight: 600; }

.nav-pastille {
  display: inline-block;
  min-width: 17px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--error);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 17px;
}

.fieldset-maj {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 4px 16px;
  margin: 0 0 16px 0;
}
.fieldset-maj legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.jours-check { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.check-inline { margin: 0; }

.input-inline {
  width: 92px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
}

@media (max-width: 768px) {
  .m-cartes { flex-direction: column; }
  .sous-nav { overflow-x: auto; white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOT B — ABSENCES, VACANCES, CALENDRIER D'ÉQUIPE
   ══════════════════════════════════════════════════════════════════════════ */

/* Pastille du jour (liste des heures) : une absence sur la journée. */
.m-pastille-abs { background: #6a4c93; }

/* Pastille de couleur d'un type d'absence (légendes, tableaux). */
.badge-couleur {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: baseline;
}

/* ── Liste « Mes demandes » (mobile) ────────────────────────────────────── */
.m-abs {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.m-abs:last-child { border-bottom: 0; }
.m-abs-pastille {
  flex: 0 0 auto;
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
}
.m-abs-corps  { flex: 1 1 auto; min-width: 0; }
.m-abs-titre  { font-weight: 600; display: flex; align-items: center; gap: 7px; }
.m-abs-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
}
.m-abs-ico .cal-abs-ico { color: #fff; }
.m-abs-periode{ font-size: 13px; color: var(--text-muted); }
.m-abs-note   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.m-abs-droite {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ── Calendrier d'équipe ────────────────────────────────────────────────── */
/* Beaucoup de colonnes : le tableau défile horizontalement plutôt que de
   comprimer les noms jusqu'à l'illisible. */
.calendrier-scroll { overflow-x: auto; }

.table-calendrier { min-width: 880px; }
.table-calendrier th,
.table-calendrier td {
  padding: 2px;
  text-align: center;
  font-size: 11px;
}
.table-calendrier .cal-nom {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
  text-align: left;
  white-space: nowrap;
  padding-right: 10px;
  font-size: 13px;
}
.cal-jour-nom {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 9px;
}
.cal-weekend { background: #f2f1ec; }
.cal-ferie   { background: #e7e6f2; }
.cal-case    { height: 26px; }

.cal-abs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 22px;
  border-radius: 3px;
}
/* Le glyphe blanc dans la barre colorée : la couleur pour le coup d'œil, la
   forme pour distinguer deux types de même teinte. */
.cal-abs-ico { color: #fff; display: block; }
.cal-abs-demi    { height: 11px; margin-top: 5px; }
.cal-abs-demi .cal-abs-ico { width: 9px; height: 9px; }
.cal-abs-attente { opacity: 0.5; }

/* Icône blanche dans la pastille de légende (badge-couleur agrandi). */
.cal-legende .badge-couleur {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.cal-legende .badge-couleur .cal-abs-ico { color: #fff; }
.badge-couleur-attente { background: #d3d1c7; opacity: 0.6; }
.cal-legende-attente { color: var(--text-muted); }

.cal-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.cal-legende-item { white-space: nowrap; }

/* ===========================================================================
   5. VENTILATION (Lot C)
   ---------------------------------------------------------------------------
   Sélecteurs tâche + n° de fabrication (pointage, écran Tâches, gestion) et
   déroulé de la journée. Mobile d'abord : cibles larges, sélection toujours
   visible, liste des tableaux défilable sans manger l'écran.
   =========================================================================== */

/* — Carte des sélecteurs, au-dessus du bouton de pointage — */
.vs-carte { margin-bottom: 16px; }

/* — Résumé de la sélection : ce qu'on a coché, sans dérouler la liste — */
.vs-resume {
  margin: 0 0 8px 0;
  padding: 8px 10px;
  background: #f7f6f2;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.vs-recherche {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;          /* 16px min sur iOS : évite le zoom au focus */
  background: var(--bg-card);
  color: var(--text);
}
.vs-recherche:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* — Liste des tableaux : défilable, jamais plus de la moitié de l'écran — */
.vs-liste {
  margin-top: 8px;
  max-height: 42vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  -webkit-overflow-scrolling: touch;
}

.vs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;       /* cible confortable au pouce */
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.vs-item:last-child { border-bottom: none; }
.vs-item:hover      { background: #fafaf8; }
.vs-item input      { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent); }
.vs-item input:checked ~ .vs-no { color: var(--accent); }

.vs-no {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 500;
  flex-shrink: 0;
}
.vs-info {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-item-termine .vs-no { color: var(--text-muted); }

.vs-aide { margin: 8px 0 0 0; }

/* — Tâche en cours, sur la carte d'état du pointage — */
.m-etat-tache {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

/* — Déroulé de la journée (écran Tâches) — */
.vs-segment {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.vs-segment:last-child { border-bottom: none; }
.vs-segment-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vs-segment-tache { flex: 1; font-size: 14px; }

.vs-edit summary {
  margin-top: 8px;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
}
.vs-edit[open] summary { margin-bottom: 12px; }

.vs-incomplet { color: var(--warning); }

/* — Pastille V (présence sans tâche) sur l'écran Heures — */
.m-pastille-vent { background: #fef6e7; border-color: #f5d9a0; color: #7a4a0a; }

/* — Cinq onglets dans la barre du bas : un peu plus serré — */
@media (max-width: 480px) {
  .m-nav-item { font-size: 10px; }     /* cinq onglets sur petit écran */
}

/* — V2 après premier essai réel : pastilles de tâches + bouton bleu — */

/* Le gros bouton bleu : même gabarit que le bouton de pointage. */
.m-btn-tache {
  background: var(--accent);
  margin-top: 12px;
}
.m-btn-tache:hover { text-decoration: none; color: #fff; }
a.m-btn-tache { display: flex; }        /* le lien de index.php se comporte
                                           comme le <button> de tache.php */

.m-carte-tache { text-align: center; }
.m-carte-tache .m-titre-sm { margin-bottom: 6px; }
.m-tache-actuelle { font-size: 16px; }
.m-tache-actuelle .m-sous-note { margin-top: 2px; }

/* Pastilles de tâches (tache.php) : tout visible, un seul tap. */
.vs-pilules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vs-pilule {
  cursor: pointer;
}
.vs-pilule input {                       /* la radio pilote, la pastille habille */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vs-pilule span {
  display: inline-block;
  padding: 11px 16px;                    /* cible confortable au pouce */
  border: 1.5px solid var(--border);
  border-radius: 22px;
  background: var(--bg-card);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
.vs-pilule-generale span { background: #f0efeb; color: var(--text-muted); }
.vs-pilule input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.vs-pilule-generale input:checked + span {
  background: var(--text-muted);
  border-color: var(--text-muted);
  color: #fff;
}

/* Valider fixé en bas, au-dessus de la barre d'onglets. */
.vs-plein-ecran { padding-bottom: 86px; }
.vs-valider-fixe {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(63px + env(safe-area-inset-bottom, 0px));  /* .m-nav : 60px min + bordure */
  padding: 10px 16px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  z-index: 5;
}
.vs-valider-fixe .m-btn-pointer { margin: 0 auto; max-width: 608px; }


/* — Écart Réel/Prévu par tableau (écran Ventilation, 07.08.2026) — */
.vent-depasse { color: var(--error); }
.vent-dessous { color: #1d7a33; }


/* ── Pointages bruts affichés en ligne (heures.php et admin/heures.php) ──
   Ce qui est lu doit se retrouver tel quel en base : aucune heure retouchée,
   les pointages ignorés par l'appariement restent visibles, barrés. */
.ptg         { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptg-ouverte { color: var(--accent); font-weight: 500; }
.ptg-ignore  { text-decoration: line-through; color: var(--error); }
.ptg-sep     { color: var(--text-muted); }

/* Sous-ligne de l'écran personnel : occupe toute la largeur de la grille. */
.m-jour-pointages {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Écran Heures employé (gestion, pleine largeur) ── */
.hp-nav-mois { display: flex; align-items: center; gap: 10px; }
.hp-nav-mois .btn { padding: 6px 12px; }
.hp-nav-mois-titre { font-weight: 600; min-width: 130px; text-align: center; }

.hp-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.hp-carte {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: #fafaf8;
}
.hp-carte-label  { font-size: 12px; color: var(--text-muted); }
.hp-carte-valeur { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-carte-note   { font-size: 12px; color: var(--text-muted); }

.table-heures td { vertical-align: middle; }
.table-heures .hp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-heures th.hp-num { text-align: right; }
.table-heures td.hp-num:not(:first-child) { text-align: right; }
.table-heures .hp-ptg { line-height: 1.6; }
.table-heures .hp-abs { font-size: 12px; }
.table-heures .hp-pastilles { white-space: nowrap; text-align: right; }
.table-heures .hp-pastilles .m-pastille { display: inline-flex; vertical-align: middle; }

.table-heures tr.hp-we    td { background: #fbfaf7; }
.table-heures tr.hp-ferie td { background: #eef3fa; }
.table-heures tr.hp-futur    { opacity: 0.45; }
.table-heures tr.hp-aujourdhui td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.table-heures tr.hp-recap td {
  background: #f4f3ef;
  font-weight: 600;
  border-top: 1px solid var(--border);
}
.table-heures tbody tr.hp-recap:hover td { background: #f4f3ef; }
/* Le total de la période Du → Au, dernière ligne du tableau (D4-B). */
.table-heures tr.hp-total td {
  background: #e6e4dc;
  font-weight: 700;
  border-top: 2px solid var(--text-muted);
}
.table-heures tbody tr.hp-total:hover td { background: #e6e4dc; }

.m-pastille-ajust { background: var(--text-muted); }


/* Écran Réglages → Types d'absence : aperçu de l'icône + sélecteur. */
.at-ico-apercu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 6px;
}
.at-ico-apercu .cal-abs-ico { color: #fff; }
.at-ico-select { max-width: 200px; vertical-align: middle; }