:root {
  --navy: #1f3a5f;
  --blue: #2f6db5;
  --green: #2e8b6f;
  --orange: #e8833a;
  --grey: #5b6573;
  --light: #f3f5f8;
  --line: #d5dae1;
  --ink: #1b2430;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fafbfc;
  color: var(--ink);
}

/* ---------- Barre laterale (menu de tout le site) ---------- */
:root { --barre-largeur: 240px; --barre-reduite: 72px; }
.logo { font-weight: 700; font-size: 18px; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.logo-sub { font-weight: 400; opacity: .75; margin-left: 2px; }
.logo-carre { width: 32px; height: 32px; border-radius: 8px; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.icone { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

body.avec-barre { padding-left: var(--barre-largeur); transition: padding-left .2s; }
.barre-laterale {
  position: fixed; inset: 0 auto 0 0; width: var(--barre-largeur); z-index: 40;
  background: var(--navy); color: #fff; display: flex; flex-direction: column;
  transition: width .2s, transform .25s;
}
.barre-profil { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px 18px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 8px; text-align: center; }
.barre-profil strong { font-size: 15px; margin-top: 6px; }
.barre-profil .barre-role { font-size: 12px; }
.avatar-grand { width: 62px; height: 62px; font-size: 22px; border: 3px solid rgba(255,255,255,.35); background: #fff; color: var(--navy); }
.barre-reduite .barre-profil { padding: 4px 0 12px; }
.barre-reduite .avatar-grand { width: 40px; height: 40px; font-size: 14px; border-width: 2px; }

/* Barre du haut (ordinateur) */
.entete-page {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border-bottom: 1px solid var(--line); padding: 10px 28px; box-shadow: 0 1px 3px rgba(27, 36, 48, .04);
}
.entete-recherche { display: flex; align-items: center; gap: 8px; background: var(--light); border-radius: 22px; padding: 0 14px; width: min(420px, 50vw); color: var(--grey); }
.entete-recherche input[type="search"] { border: none; background: transparent; padding: 9px 0; font-size: 14px; width: 100%; outline: none; margin: 0; }
.entete-droite { display: flex; align-items: center; gap: 14px; }
.entete-date { font-size: 13px; color: var(--grey); text-transform: capitalize; }
.entete-icone { color: var(--grey); display: inline-flex; padding: 6px; border-radius: 8px; }
.entete-icone:hover { background: var(--light); color: var(--blue); }
.entete-page .avatar { background: var(--blue); color: #fff; }
.barre-tete { display: flex; align-items: center; justify-content: space-between; padding: 18px 14px 14px 18px; }
.barre-reduire { background: none; border: none; color: #fff; opacity: .6; cursor: pointer; padding: 6px; border-radius: 6px; display: inline-flex; }
.barre-reduire:hover { opacity: 1; background: rgba(255,255,255,.1); }
.barre-nav { flex: 1; overflow-y: auto; padding: 6px 10px; }
.barre-groupe { margin-bottom: 14px; }
.barre-groupe-titre { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .5; padding: 6px 10px; white-space: nowrap; }
.barre-lien {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
  color: rgba(255,255,255,.82); text-decoration: none; font-size: 14px; white-space: nowrap; position: relative;
}
.barre-lien:hover { background: rgba(255,255,255,.08); color: #fff; }
.barre-lien.actif { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.barre-lien.actif::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #7fb2ff; }
.barre-pied { border-top: 1px solid rgba(255,255,255,.12); padding: 12px 10px 16px; }
.barre-utilisateur { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.barre-utilisateur .barre-libelle { display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; overflow: hidden; }
.barre-utilisateur strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-role { opacity: .6; font-size: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #7fb2ff; color: var(--navy); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; }
.avatar-petit { width: 30px; height: 30px; font-size: 12px; }
.barre-sortir { color: rgba(255,255,255,.65); }

/* Reduite : icones seules (le libelle reste en info-bulle via title) */
.barre-reduite body.avec-barre { padding-left: var(--barre-reduite); }
.barre-reduite .barre-laterale { width: var(--barre-reduite); }
.barre-reduite .barre-libelle, .barre-reduite .logo-texte, .barre-reduite .barre-groupe-titre { display: none; }
.barre-reduite .barre-tete { flex-direction: column; gap: 10px; padding: 16px 0 10px; }
.barre-reduite .barre-reduire { transform: rotate(180deg); }
.barre-reduite .barre-lien, .barre-reduite .barre-utilisateur { justify-content: center; padding-left: 0; padding-right: 0; }
.barre-reduite .barre-groupe { border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }

/* Petit ecran : barre du haut + menu qui glisse depuis la gauche */
.barre-mobile, .barre-voile { display: none; }
.barre-connexion { background: var(--navy); color: #fff; padding: 14px 20px; }

.container { max-width: 1180px; margin: 0 auto; padding: 28px 28px 60px; }

h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 17px; color: var(--blue); margin: 0 0 12px; }
.muted { color: var(--grey); font-size: 14px; }
.back-link { display: inline-block; margin-bottom: 12px; color: var(--blue); text-decoration: none; font-size: 14px; }

.btn {
  display: inline-block; background: var(--blue); color: #fff; padding: 9px 16px;
  border-radius: 6px; text-decoration: none; font-size: 14px; margin-bottom: 18px; border: none; cursor: pointer;
}
button[type="submit"] {
  background: var(--blue); color: #fff; border: none; padding: 10px 18px;
  border-radius: 6px; font-size: 14px; cursor: pointer; margin-top: 6px;
}

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin-bottom: 20px;
}
.card-narrow { max-width: 420px; }

.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

.card-affaire { display: block; text-decoration: none; color: inherit; }
.card-affaire-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.card-affaire-stats { display: flex; flex-direction: column; gap: 2px; font-size: 13px; margin-top: 10px; color: var(--ink); }

.badge { background: var(--light); border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; font-size: 12px; }
.badge-en_cours, .badge-a_faire { background: #fff3e8; border-color: var(--orange); color: #a85a1a; }
.badge-terminee, .badge-termine, .badge-validee { background: #e9f5f0; border-color: var(--green); color: #1e6b52; }
.badge-a_venir, .badge-en_attente { background: #eef2f7; border-color: var(--line); color: var(--grey); }

form label { display: block; font-size: 13px; color: var(--grey); margin-bottom: 12px; }
form input, form select {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 14px;
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }

.list-taches { list-style: none; margin: 0; padding: 0; }
.list-taches li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

.alert-erreur { background: #fdeceb; border: 1px solid #e8833a; color: #a5321f; padding: 8px 12px; border-radius: 6px; font-size: 13px; }

/* Acces direct (demo) sur la page de connexion */
.demo-titre { text-align: center; font-size: 13px; color: var(--grey); margin: 24px 0 10px; }
.demo-ligne { display: flex; gap: 8px; }
.demo-ligne form { flex: 1; }
.demo-ligne button[type="submit"] { width: 100%; }
.demo-ligne .demo-admin { background: var(--navy); }
.demo-ligne .demo-employe { background: var(--blue); }
.demo-ligne .demo-assistant { background: var(--green); }

/* ---------- Gestion des employes et des taches du jour ---------- */
.nav-jour { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
.nav-jour-fleche { font-size: 20px; text-decoration: none; color: var(--blue); padding: 2px 12px; border-radius: 6px; }
.nav-jour-fleche:hover { background: var(--light); }
.nav-jour-date { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; text-transform: capitalize; }
.nav-jour-retour { font-size: 13px; color: var(--blue); text-transform: none; }
.badge-aujourdhui { background: #e8f0fa; border-color: var(--blue); color: var(--blue); text-transform: none; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stat-valeur { font-size: 22px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.stat-libelle { font-size: 13px; color: var(--grey); }

.barre { height: 6px; background: var(--light); border-radius: 4px; overflow: hidden; margin: 6px 0 2px; }
.barre-remplie { height: 100%; background: var(--blue); border-radius: 4px; }
.barre-depasse { background: var(--orange); }
.texte-alerte { color: #a85a1a; font-weight: 600; }

.priorite { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--line); }
.priorite-haute { background: #d2462f; }
.priorite-normale { background: var(--blue); }
.priorite-basse { background: var(--line); }

.tache { padding: 16px 18px; margin-bottom: 12px; }
.tache-active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.tache-terminee { opacity: .7; }
.tache-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tache-description { font-size: 13px; margin-top: 4px; }
.tache-temps { margin-top: 12px; font-size: 14px; }
.tache-temps strong { font-size: 18px; font-variant-numeric: tabular-nums; margin: 0 4px; }
.tache-actions { display: flex; gap: 8px; margin-top: 12px; }
.tache-actions button[type="submit"] { margin-top: 0; min-width: 120px; }
button.btn-secondaire { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
button.btn-vert { background: var(--green); }

.planifier summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.form-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 14px; margin-top: 14px; }
.form-large { grid-column: 1 / -1; }

.grille-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.colonne-employe { margin-bottom: 0; padding: 16px; }
.colonne-tete { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.lien-employe { color: var(--navy); font-weight: 600; text-decoration: none; }
.lien-employe:hover { text-decoration: underline; }
.compteur { font-weight: 700; color: var(--navy); background: var(--light); border-radius: 20px; padding: 2px 10px; font-size: 13px; }
.en-direct { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green); margin-bottom: 8px; }
.point-direct { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: clignote 1.6s infinite; }
@keyframes clignote { 50% { opacity: .25; } }
.charge { display: flex; justify-content: space-between; font-size: 14px; }
.liste-mini { list-style: none; padding: 0; margin: 12px 0 0; }
.liste-mini li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.liste-mini-ligne, .liste-mini-info { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.liste-mini-info { margin-top: 2px; font-size: 12px; }
.barre-texte .liste-mini-ligne > span:first-child { text-decoration: line-through; color: var(--grey); }
.actions-mini { display: flex; gap: 4px; }
.actions-mini form { margin: 0; }
button.btn-mini { margin: 0; padding: 2px 8px; white-space: nowrap; font-size: 12px; background: #fff; color: var(--grey); border: 1px solid var(--line); }
button.btn-mini:hover { color: var(--blue); border-color: var(--blue); }
button.btn-mini-danger:hover { color: #a5321f; border-color: #a5321f; }

.fiche { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.fiche h1 { margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fiche-infos { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 24px; margin: 0; font-size: 14px; }
.fiche-infos dt { color: var(--grey); font-size: 12px; }
.fiche-infos dd { margin: 0; }
.table tfoot th { border-top: 2px solid var(--line); border-bottom: none; }
.ligne-active td { background: #f0f5fc; }
.ligne-inactive td { opacity: .55; }

/* ---------- Tableau de bord (style cartes + graphiques) ---------- */
body.avec-barre { background: #f2f4fa; }
.tdb-titre { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tdb-titre h1 { margin-bottom: 2px; }
.tdb-titre p { margin: 0; }
.tdb-bouton { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; text-decoration: none; color: var(--ink); font-size: 14px; }
.tdb-bouton:hover { border-color: var(--blue); color: var(--blue); }
.tdb-grille { display: grid; gap: 18px; margin-bottom: 18px; }
.tdb-ligne-1 { grid-template-columns: 2fr 1fr 1fr; }
.tdb-ligne-4 { grid-template-columns: repeat(4, 1fr); }
.tdb-ligne-3 { grid-template-columns: 1fr 1.1fr 2fr; }
.tdb-ligne-2 { grid-template-columns: 1.7fr 1fr; }
.tdb-ligne-2egal { grid-template-columns: 1fr 1fr; }
.tdb-carte { background: #fff; border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(27, 36, 48, .05), 0 4px 14px rgba(27, 36, 48, .05); color: inherit; text-decoration: none; min-width: 0; }
a.tdb-carte:hover { box-shadow: 0 0 0 2px #c6d8ef, 0 4px 14px rgba(27, 36, 48, .08); }
.tdb-carte-titre { font-size: 15px; color: var(--navy); margin: 0 0 14px; font-weight: 700; }
.tdb-carte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.tdb-note { font-size: 12px; color: var(--grey); margin: 12px 0 0; line-height: 1.5; }
.tdb-voir { font-size: 13px; color: var(--blue); text-decoration: none; }

.tdb-accueil { background: linear-gradient(135deg, #2f6db5 0%, #1f3a5f 100%); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tdb-accueil h2 { color: #fff; font-size: 24px; margin: 0 0 6px; }
.tdb-accueil p { margin: 0; opacity: .85; font-size: 14px; }
.tdb-accueil-chiffre { font-size: 46px; font-weight: 700; line-height: 1.1; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.tdb-accueil-chiffre span { font-size: 24px; opacity: .7; }
.tdb-accueil-detail { font-size: 13px !important; }
.tdb-accueil-lien { display: inline-block; margin-top: 12px; color: #fff; background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: 20px; font-size: 13px; text-decoration: none; }
.tdb-accueil-lien:hover { background: rgba(255,255,255,.28); }
.tdb-illustration { width: 120px; height: 120px; flex-shrink: 0; }
.tdb-logo { width: 150px; height: auto; opacity: .95; margin-right: 4px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .18)); }

.tdb-kpi-haut { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
.tdb-icone-rond, .tdb-icone-grand { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.tdb-icone-rond { width: 52px; height: 52px; margin-bottom: 6px; }
.tdb-icone-rond svg, .tdb-icone-grand svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tdb-icone-grand { width: 50px; height: 50px; flex-shrink: 0; }
.tdb-bleu { background: #eaf2fc; color: #2f6db5; }
.tdb-orange { background: #fdf0e9; color: #c45420; }
.tdb-vert { background: #e6f6ef; color: #12805a; }
.tdb-rouge { background: #fdecec; color: #c63636; }
.tdb-violet { background: #eeecf8; color: #4a3aa7; }
.tdb-kpi-libelle { font-size: 13px; color: var(--grey); display: block; }
.tdb-kpi-grand { font-size: 34px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tdb-kpi-sous { font-size: 12px; color: var(--grey); display: block; }
.tdb-kpi { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tdb-kpi-valeur { display: block; font-size: 26px; font-weight: 700; color: var(--ink); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.tdb-kpi-valeur small { font-size: 15px; color: var(--grey); font-weight: 600; }
.tdb-tendance { display: inline-block; font-size: 12px; font-weight: 700; text-decoration: none; }
.tdb-tendance.hausse { color: #12805a; }
.tdb-tendance.baisse { color: #c63636; }

.tdb-anneau { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.tdb-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau-fond { fill: none; stroke: #e8f0fa; stroke-width: 12; }
.anneau-valeur { fill: none; stroke: var(--blue); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.tdb-anneau-texte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tdb-anneau-texte strong { font-size: 30px; color: var(--ink); }
.tdb-anneau-texte span { font-size: 12px; color: var(--grey); }
.tdb-anneau-chiffre { text-align: center; font-size: 30px; font-weight: 700; margin-top: 10px; color: var(--ink); }
.tdb-anneau-chiffre small { font-size: 16px; color: var(--grey); }
.tdb-carte:has(.tdb-anneau) .tdb-note { text-align: center; }

.tdb-presence { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; }
.tdb-presence li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f2f7; font-size: 14px; }
.tdb-presence-nom { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tdb-presence-nom a { color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-presence-nom small, .tdb-lien-nom small, .tdb-sous-ligne { display: block; font-size: 12px; color: var(--grey); font-weight: 400; }
.tdb-voir-tout { display: block; text-align: center; margin-top: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 13px; }
.tdb-voir-tout:hover { border-color: var(--blue); color: var(--blue); }
.avatar-liste { width: 32px; height: 32px; font-size: 12px; background: #e8f0fa; color: var(--navy); }

.tdb-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--grey); }
.tdb-legende i, .tdb-legende-liste i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.tdb-graphique { position: relative; height: 290px; }

.tdb-table { font-size: 14px; }
.tdb-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--grey); font-weight: 600; background: #f7f8fc; }
.tdb-table td { vertical-align: middle; padding: 10px 6px; }
.tdb-lien-nom { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; }
.tdb-avancement { min-width: 120px; }
.tdb-avancement .barre { display: inline-block; width: 70px; vertical-align: middle; margin: 0 6px 0 0; }
.tdb-avancement span { font-size: 12px; color: var(--grey); }

.tdb-donut { position: relative; height: 210px; }
.tdb-donut-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.tdb-donut-centre strong { font-size: 20px; color: var(--ink); }
.tdb-donut-centre span { font-size: 12px; color: var(--grey); }
.tdb-legende-liste { list-style: none; padding: 0; margin: 14px 0 0; font-size: 13px; }
.tdb-legende-liste li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 5px 0; }
.tdb-legende-liste span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-legende-liste small { color: var(--grey); width: 38px; text-align: right; }

@media (max-width: 1200px) {
  .tdb-ligne-1 { grid-template-columns: 1fr 1fr; }
  .tdb-ligne-1 .tdb-accueil { grid-column: 1 / -1; }
  .tdb-ligne-4 { grid-template-columns: 1fr 1fr; }
  .tdb-ligne-3 { grid-template-columns: 1fr 1fr; }
  .tdb-ligne-3 > :last-child { grid-column: 1 / -1; }
  .tdb-ligne-2, .tdb-ligne-2egal { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tdb-ligne-1, .tdb-ligne-4, .tdb-ligne-3 { grid-template-columns: 1fr; }
  .tdb-illustration { display: none; }
  .tdb-table { display: block; overflow-x: auto; }
}

/* ---------- Tableau de bord et heures supplementaires ---------- */
.explication { background: #eef4fb; border-left: 3px solid var(--blue); padding: 10px 14px; border-radius: 6px; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.aide { font-size: 13px; color: var(--grey); line-height: 1.5; margin: 0 0 12px; }
.alert-succes { background: #e9f5f0; border: 1px solid var(--green); color: #1e6b52; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.texte-vert { color: #1e6b52; }
.tdb-section { font-size: 15px; color: var(--navy); margin: 26px 0 10px; text-transform: uppercase; letter-spacing: .03em; }
.card-titre { font-size: 15px; margin: 0 0 6px; color: var(--navy); }
.stat-aide { font-size: 12px; color: var(--grey); margin-top: 6px; line-height: 1.4; }
.stat-lien { text-decoration: none; color: inherit; }
.stat-lien:hover { border-color: var(--blue); }
.stat-alerte { border-color: var(--orange); background: #fffaf5; }
.stat-alerte .stat-valeur { color: #a85a1a; }

.sup-compteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.sup-compteurs > div { display: flex; flex-direction: column; font-size: 13px; }
.sup-chiffre { font-size: 22px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.liste-alertes { list-style: none; margin: 0; padding: 0; }
.liste-alertes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.liste-alertes li > :last-child { text-align: right; white-space: nowrap; }
.liste-alertes a { color: inherit; text-decoration: none; }
.liste-alertes a:hover { text-decoration: underline; }

.graphe-semaine { display: flex; flex-direction: column; gap: 10px; }
.graphe-ligne { display: grid; grid-template-columns: 220px 1fr 130px; align-items: center; gap: 12px; text-decoration: none; color: inherit; font-size: 14px; }
.graphe-ligne:hover .graphe-nom { text-decoration: underline; }
.graphe-piste { position: relative; height: 18px; background: var(--light); border-radius: 4px; display: flex; overflow: visible; }
.graphe-barre { height: 100%; background: var(--blue); }
.graphe-barre:first-child { border-radius: 4px 0 0 4px; }
.graphe-sup { background: var(--orange); border-radius: 0 4px 4px 0; }
.graphe-contrat { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--navy); }
.graphe-valeur { text-align: right; font-variant-numeric: tabular-nums; }
.legende { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.legende-sup { background: var(--orange); }

.badge-a_justifier { background: #fdeceb; border-color: #d2462f; color: #a5321f; }
.badge-refusee { background: #f3f5f8; border-color: var(--grey); color: var(--grey); }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.onglet { padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px; text-decoration: none; color: var(--ink); font-size: 14px; background: #fff; }
.onglet-actif { background: var(--navy); border-color: var(--navy); color: #fff; }
.onglet-nombre { font-weight: 700; margin-left: 4px; }
.journee-sup { border-left: 4px solid var(--line); }
.journee-a_justifier { border-left-color: #d2462f; }
.journee-en_attente { border-left-color: var(--orange); }
.journee-validee { border-left-color: var(--green); }
.journee-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.journee-date { text-transform: capitalize; }
.journee-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sup-valeur { font-size: 22px; font-weight: 700; color: #a85a1a; font-variant-numeric: tabular-nums; }
.journee-taches { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.puce-tache { background: var(--light); border-radius: 20px; padding: 2px 10px; }
.justification { margin-top: 14px; }
.justification blockquote { margin: 0 0 10px; padding: 8px 12px; background: #fafbfc; border-left: 3px solid var(--line); font-style: italic; }
.justification-medias { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.photo-mini { width: 140px; height: 105px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.vocal { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.decision { font-size: 13px; margin: 10px 0 0; }
.decision-validee { color: #1e6b52; }
.decision-refusee { color: #a5321f; }
.justifier { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.justifier summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.form-justifier { margin-top: 10px; }
.form-justifier textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 14px; }
.form-grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.enregistreur { font-size: 13px; color: var(--grey); }
.enregistreur-boutons { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.enregistreur audio { display: block; margin-bottom: 6px; max-width: 100%; }
.enregistreur audio[hidden] { display: none; }
button.btn-rouge { background: #fff; color: #a5321f; border: 1px solid #a5321f; }
.form-decision { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.form-decision input { flex: 1; min-width: 200px; margin: 0; }
.form-decision button[type="submit"] { margin-top: 0; }

/* ---------- Agenda ---------- */
.ag-barre { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-barre h1 { margin-bottom: 2px; }
.ag-periode { margin: 0; }
.ag-periode::first-letter { text-transform: uppercase; }
.ag-outils { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ag-bascule, .ag-nav { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.ag-bascule a, .ag-nav a { padding: 7px 14px; text-decoration: none; color: var(--ink); font-size: 14px; border-right: 1px solid var(--line); }
.ag-bascule a:last-child, .ag-nav a:last-child { border-right: none; }
.ag-bascule a.actif { background: var(--navy); color: #fff; }
.ag-nav a:hover, .ag-bascule a:not(.actif):hover { background: var(--light); }
button.ag-planifier { margin: 0; background: var(--green); color: #fff; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ag-filtre { margin-bottom: 12px; max-width: 280px; }

.ag-semaine { display: grid; grid-template-columns: 190px repeat(7, minmax(110px, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ag-semaine > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ag-coin, .ag-entete { background: var(--light); padding: 8px; font-size: 13px; font-weight: 600; color: var(--grey); text-align: center; }
.ag-coin { text-align: left; }
.ag-entete a { color: inherit; text-decoration: none; text-transform: capitalize; }
.ag-entete a:hover { text-decoration: underline; }
.ag-entete.ag-aujourdhui { background: var(--blue); color: #fff; }
.ag-employe { padding: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ag-employe .muted { font-size: 12px; }
.ag-total { font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ag-case { position: relative; padding: 6px 6px 26px; min-height: 96px; display: flex; flex-direction: column; gap: 4px; transition: background .15s; }
.ag-weekend { background: #fafafa; }
.ag-case.ag-aujourdhui, .ag-jour.ag-aujourdhui { background: #f3f8fe; }
.ag-survol { background: #e3eefb !important; outline: 2px dashed var(--blue); outline-offset: -3px; }

.ag-charge { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--grey); font-variant-numeric: tabular-nums; }
.ag-jauge { flex: 1; height: 4px; background: var(--light); border-radius: 2px; overflow: hidden; }
.ag-jauge span { display: block; height: 100%; background: var(--blue); }
.ag-charge-plein .ag-jauge span { background: var(--green); }
.ag-charge-surcharge { color: #a85a1a; font-weight: 600; }
.ag-charge-surcharge .ag-jauge span { background: var(--orange); }

.ag-tache { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--couleur); border-radius: 6px; padding: 4px 6px; font-size: 12px; line-height: 1.3; cursor: pointer; display: flex; flex-direction: column; }
.ag-tache[draggable="true"] { cursor: grab; }
.ag-tache:hover { box-shadow: 0 2px 6px rgba(27, 36, 48, .12); }
.ag-tache-titre { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ag-tache-info { color: var(--grey); font-size: 11px; }
.ag-termine { opacity: .55; }
.ag-termine .ag-tache-titre { text-decoration: line-through; }
.ag-en_cours { background: #f3f8fe; }
.ag-glisse { opacity: .4; }
.ag-ajouter { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px dashed var(--line); background: #fff; color: var(--grey); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.ag-case:hover .ag-ajouter, .ag-jour:hover .ag-ajouter, .ag-ajouter:focus { opacity: 1; }
.ag-ajouter:hover { border-color: var(--green); color: var(--green); }

.ag-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ag-mois > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ag-jour { position: relative; min-height: 118px; padding: 6px 6px 26px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-hors-mois { background: #f7f8fa; }
.ag-hors-mois .ag-num { color: #b0b7c1; }
.ag-jour-tete { display: flex; justify-content: space-between; align-items: center; }
.ag-num { font-weight: 700; color: var(--navy); text-decoration: none; font-size: 14px; }
.ag-aujourdhui .ag-num { background: var(--blue); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.ag-jour-total { font-size: 11px; color: var(--grey); }
.ag-plus { font-size: 12px; color: var(--blue); text-decoration: none; }

.ag-legende { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 12px; font-size: 13px; }
.ag-legende-item { display: inline-flex; align-items: center; gap: 6px; }
.ag-pastille { width: 12px; height: 12px; border-radius: 3px; }

.dialogue { border: none; border-radius: 12px; padding: 20px 22px; width: min(760px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(27, 36, 48, .3); }
.dialogue::backdrop { background: rgba(27, 36, 48, .45); }
.dialogue-petit { width: min(480px, calc(100vw - 32px)); }
.dialogue-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dialogue-tete h2 { margin: 0; color: var(--navy); }
.btn-fermer { background: none; border: none; font-size: 18px; color: var(--grey); cursor: pointer; }
.ag-quand { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 4px 0 10px; }
.ag-quand legend { font-size: 13px; font-weight: 600; color: var(--navy); padding: 0 4px; }
form label.ag-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; color: var(--ink); font-size: 14px; }
form .ag-radio input, form .ag-case-jour input { display: inline-block; width: auto; margin: 0; }
.ag-raccourcis { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; font-size: 13px; }
.ag-jours-semaine { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
form label.ag-case-jour { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); font-size: 13px; cursor: pointer; }
form label.ag-case-jour:has(input:checked) { background: #e8f0fa; border-color: var(--blue); }
.ag-apercu { font-size: 14px; font-weight: 600; color: var(--green); margin: 6px 0 0; }
.ag-detail { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 14px; margin: 8px 0 16px; }
.ag-detail dt { color: var(--grey); }
.ag-detail dd { margin: 0; }
.ag-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ag-actions form { margin: 0; }
.ag-actions button[type="submit"] { margin: 0; }
.btn-lien { color: var(--blue); text-decoration: none; font-size: 14px; margin-right: auto; }

/* ---------- Gestion des salaires ---------- */
.sal-mois { text-transform: capitalize; min-width: 150px; text-align: center; }
.sal-bloc { margin-bottom: 18px; }
.sal-tableau-zone { overflow-x: auto; }
.sal-tableau td, .sal-tableau th { white-space: nowrap; }
.sal-tableau tfoot th { background: #f7f8fc; }
.sal-details summary { cursor: pointer; color: var(--blue); font-size: 13px; }
.sal-details ul { margin: 6px 0 0; padding-left: 16px; font-size: 12px; white-space: normal; min-width: 240px; }
.sal-type { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 1px 9px; }
.sal-type-paye { background: #e9f5f0; color: #1e6b52; }
.sal-type-retenue { background: #fdecec; color: #a5321f; }
.sal-alerte { background: #fff8f0; border: 1px solid var(--orange); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.sal-alerte ul { list-style: none; padding: 0; margin: 8px 0 0; }
.sal-alerte li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid #f6e4d3; }
.sal-reglages-titre { margin-top: 22px; }
.sal-reglages { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sal-reglages label { margin: 0; flex: 1; min-width: 150px; }
.sal-reglages button[type="submit"] { margin: 0; }
.form-taux { display: inline-flex; align-items: center; gap: 6px; }
.form-taux input[type="number"] { display: inline-block; width: 90px; margin: 0; padding: 4px 6px; }
.form-taux button.btn-mini { margin: 0; }
.creation-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.creation-photo label { flex: 1; margin: 0; }
.creation-apercu { width: 72px; height: 72px; border-radius: 50%; background: var(--light) center / cover no-repeat; border: 2px dashed var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.employe-nom-avatar { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Photos de profil ---------- */
.profil-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--fond, var(--blue)); color: #fff; font-weight: 700; text-transform: uppercase; }
.profil-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil-avatar-petit { width: 26px; height: 26px; font-size: 11px; }
.profil-avatar-moyen { width: 40px; height: 40px; font-size: 14px; }
.profil-avatar-grand { width: 84px; height: 84px; font-size: 28px; box-shadow: 0 0 0 4px #fff, 0 2px 10px rgba(27, 36, 48, .15); }
.fiche-identite { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fiche-photo label.btn-mini { cursor: pointer; display: inline-block; font-size: 12px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 20px; color: var(--grey); background: #fff; margin: 0; }
.fiche-photo label.btn-mini:hover { color: var(--blue); border-color: var(--blue); }
.fiche-photo input[type="file"] { display: none; }
.lien-agenda { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--blue); text-decoration: none; font-weight: 600; }

/* ---------- Agenda : onglets, profils, agenda d'un employe ---------- */
.ag-onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 18px; }
.ag-onglets a { padding: 10px 16px; text-decoration: none; color: var(--grey); font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.ag-onglets a:hover { color: var(--blue); }
.ag-onglets a.actif { color: var(--blue); border-bottom-color: var(--blue); }
.ag-employe-lien { display: inline-flex; align-items: center; gap: 6px; }

.profils-filtres select { max-width: 220px; }
.profils-filtres button { margin: 0; }
.profils-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.profil-carte { position: relative; background: #fff; border-radius: 14px; padding: 22px 20px 18px; box-shadow: 0 1px 2px rgba(27, 36, 48, .05), 0 4px 14px rgba(27, 36, 48, .06); display: flex; flex-direction: column; gap: 14px; transition: transform .15s, box-shadow .15s; }
.profil-carte:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #c6d8ef, 0 8px 22px rgba(27, 36, 48, .1); }
.profil-lien-carte { position: absolute; inset: 0; border-radius: 14px; z-index: 1; }
.profil-carte a:not(.profil-lien-carte), .profil-carte button { position: relative; z-index: 2; }
.profil-tete { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.profil-avatar-zone { position: relative; margin-bottom: 6px; }
.profil-point { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; background: #b0b7c1; }
.profil-point-vert { background: var(--green); }
.profil-point-orange { background: var(--orange); }
.profil-point-rouge { background: #d2462f; }
.profil-point-bleu { background: var(--blue); }
.profil-nom { font-size: 17px; margin: 0; color: var(--ink); }
.profil-poste { font-size: 13px; color: var(--grey); }
.profil-statut { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 2px 10px; margin-top: 4px; background: #eef2f7; color: var(--grey); }
.profil-statut-vert { background: #e9f5f0; color: #1e6b52; }
.profil-statut-orange { background: #fff3e8; color: #a85a1a; }
.profil-statut-rouge { background: #fdeceb; color: #a5321f; }
.profil-statut-bleu { background: #e8f0fa; color: var(--blue); }
.profil-contact { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.profil-action { color: var(--ink); text-decoration: none; word-break: break-all; }
.profil-action:hover { color: var(--blue); text-decoration: underline; }
.profil-maintenant { background: var(--light); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.profil-etiquette { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); }
.profil-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; border-top: 1px solid #f0f2f7; border-bottom: 1px solid #f0f2f7; padding: 10px 0; }
.profil-chiffres strong { display: block; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.profil-chiffres span { font-size: 11px; color: var(--grey); }
.profil-charge-texte { display: flex; justify-content: space-between; font-size: 13px; color: var(--grey); }
.profil-charge-texte strong { color: var(--ink); }
.profil-actions { display: flex; gap: 8px; }
.profil-bouton { flex: 1; text-align: center; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--blue); color: var(--blue); background: #fff; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.profil-bouton:hover { background: #e8f0fa; }
button.profil-bouton-plein { background: var(--blue); color: #fff; flex: 0 0 auto; padding: 9px 14px; margin: 0; }
button.profil-bouton-plein:hover { background: var(--navy); }

.ag-profil-bandeau { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ag-profil-identite { flex: 1; min-width: 240px; }
.ag-profil-identite h1 { margin: 0 0 2px; }
.ag-profil-contact { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13px; }
.ag-profil-contact a { color: var(--blue); text-decoration: none; }
.ag-profil-contact span { color: var(--grey); }
.ag-periodes { flex-wrap: wrap; }
.ag-perso { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ag-perso label { margin: 0; font-size: 13px; }
.ag-perso input { display: inline-block; width: auto; }
.ag-perso button { margin: 0; }
.ag-titre-periode { font-size: 18px; color: var(--navy); margin: 0 0 14px; }
.ag-titre-periode::first-letter { text-transform: uppercase; }
.ag-aide { margin-top: 12px; }

.ag-emp-semaine { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ag-emp-colonne { position: relative; min-height: 340px; padding: 8px 8px 30px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.ag-emp-colonne:last-child { border-right: none; }
.ag-emp-colonne .ag-ajouter { opacity: .6; }
.ag-emp-jour { font-weight: 700; font-size: 13px; color: var(--navy); text-decoration: none; text-transform: capitalize; padding-bottom: 4px; border-bottom: 1px solid var(--light); }
.ag-emp-jour:hover { color: var(--blue); }
.ag-emp-colonne.ag-aujourdhui .ag-emp-jour { color: var(--blue); }

.ag-jour-detail { display: flex; flex-direction: column; gap: 10px; }
.ag-jour-ligne { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 14px; align-items: center; }
.ag-jour-infos { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ag-jour-total.ag-charge-surcharge { color: #a85a1a; font-weight: 700; }

@media (max-width: 960px) {
  .ag-emp-semaine { overflow-x: auto; grid-template-columns: repeat(7, 150px); }
  .ag-jour-ligne { grid-template-columns: 1fr; }
}

/* ---------- Filtres (planning, agenda) ---------- */
.filtres { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.filtres-actifs { border-color: var(--blue); box-shadow: 0 0 0 1px #e3eefb; }
.filtres-ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtres select, .filtres input[type="search"] { display: inline-block; width: auto; margin: 0; padding: 7px 10px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.filtres select { max-width: 240px; }
.filtre-recherche { flex: 1; min-width: 240px; margin: 0; }
.filtre-recherche input[type="search"] { width: 100%; }
.filtre-alertes { display: flex; gap: 4px; flex-wrap: wrap; }
form label.pastille-filtre { display: inline-flex; align-items: center; margin: 0; padding: 6px 11px; border: 1px solid var(--line); border-radius: 20px; font-size: 13px; color: var(--ink); cursor: pointer; background: #fff; }
form label.pastille-filtre input { display: none; }
form label.pastille-filtre.actif { background: var(--navy); border-color: var(--navy); color: #fff; }
form label.filtre-case { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 13px; color: var(--ink); cursor: pointer; }
form label.filtre-case input { display: inline-block; width: auto; margin: 0; }
.filtres-resume { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; border-top: 1px solid var(--light); padding-top: 8px; }
.puce-filtre { background: #e8f0fa; color: var(--blue); border-radius: 20px; padding: 3px 10px; text-decoration: none; font-weight: 600; }
.puce-filtre:hover { background: #d6e5f7; }
.filtres-reinit { color: #a5321f; text-decoration: none; margin-left: auto; }
.filtres-reinit:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 900px) {
  body.avec-barre, .barre-reduite body.avec-barre { padding-left: 0; }
  .barre-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 30; background: var(--blue); color: #fff; padding: 10px 14px;
  }
  .barre-bouton { background: none; border: none; color: #fff; padding: 6px; cursor: pointer; display: inline-flex; }
  .entete-page { display: none; }
  .barre-laterale, .barre-reduite .barre-laterale { width: 260px; transform: translateX(-100%); }
  .menu-ouvert .barre-laterale { box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .barre-reduite .barre-libelle, .barre-reduite .logo-texte, .barre-reduite .barre-groupe-titre { display: revert; }
  .barre-reduite .barre-utilisateur .barre-libelle { display: flex; }
  .barre-reduite .barre-lien, .barre-reduite .barre-utilisateur { justify-content: flex-start; padding-left: 12px; }
  .barre-reduite .barre-tete { flex-direction: row; padding: 18px 14px 14px 18px; }
  .barre-reduire { display: none; }
  .menu-ouvert .barre-laterale { transform: none; }
  .menu-ouvert .barre-voile { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(27, 36, 48, .45); }
}

/* ---------- Pointage ---------- */
.pt-etat { display: flex; flex-direction: column; gap: 10px; }
.pt-presence { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pt-chrono { font-size: 34px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.pt-horaires { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 4px 0 0; font-size: 14px; }
.pt-horaires dt { font-size: 12px; color: var(--grey); }
.pt-horaires dd { margin: 0; font-weight: 600; }
.pt-alertes { display: flex; gap: 6px; flex-wrap: wrap; }
.puce-alerte { display: inline-block; background: #fdeceb; color: #a5321f; border-radius: 20px; padding: 2px 9px; font-size: 12px; font-weight: 600; margin: 1px 0; }
.badge-pt-present { background: #e9f5f0; border-color: var(--green); color: #1e6b52; }
.badge-pt-en_pause { background: #fff3e8; border-color: var(--orange); color: #a85a1a; }
.badge-pt-parti, .badge-pt-repos, .badge-pt-non_planifie { background: #eef2f7; border-color: var(--line); color: var(--grey); }
.badge-pt-conges { background: #eef4fb; border-color: var(--blue); color: var(--blue); }
.badge-pt-pas_arrive, .badge-pt-oubli_depart, .badge-pt-absent { background: #fdeceb; border-color: #d2462f; color: #a5321f; }
.pt-form { display: flex; flex-direction: column; }
.pt-gps { font-size: 13px; color: var(--grey); background: var(--light); border-radius: 6px; padding: 8px 10px; margin: 0 0 12px; }
.pt-gps-ok { color: #1e6b52; background: #e9f5f0; }
.pt-gps-ko { color: #a85a1a; background: #fff3e8; }
.pt-apercu { max-width: 220px; border-radius: 8px; border: 1px solid var(--line); margin: -4px 0 12px; }
.pt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-actions button.pt-bouton { flex: 1; min-width: 180px; padding: 14px; font-size: 15px; font-weight: 700; margin: 0; }
.pt-frise { list-style: none; margin: 0; padding: 0; }
.pt-frise li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.pt-heure { font-size: 18px; font-weight: 700; color: var(--navy); width: 60px; font-variant-numeric: tabular-nums; }
.pt-detail { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pt-mini { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.pt-zone { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 1px 8px; text-decoration: none; width: fit-content; }
.pt-zone-ok { background: #e9f5f0; color: #1e6b52; }
.pt-zone-loin { background: #fdeceb; color: #a5321f; }
.pt-zone-sans { background: #fff3e8; color: #a85a1a; }
.pt-zone-inconnue { background: var(--light); color: var(--grey); }
.pt-cellule { display: flex; gap: 8px; align-items: center; }
.pt-cellule .pt-mini { width: 44px; height: 44px; }
.pt-cellule > div { display: flex; flex-direction: column; gap: 2px; }
.pt-tableau td { vertical-align: middle; }
.pt-tableau-carte { overflow-x: auto; }
.onglet-vide { opacity: .55; }

@media (max-width: 960px) {
  .ag-semaine { overflow-x: auto; grid-template-columns: 150px repeat(7, 120px); }
  .ag-jour { min-height: 90px; }
}

@media (max-width: 760px) {
  .form-grille-2, .sup-compteurs { grid-template-columns: 1fr; }
  .graphe-ligne { grid-template-columns: 1fr; gap: 4px; }
  .graphe-valeur { text-align: left; }
  .grid-2, .form-grille { grid-template-columns: 1fr; }
  .container { padding: 20px 16px 50px; }
  .table { font-size: 13px; }
}

/* ---------- Ma journee (pointage), A justifier, Heures a valider ---------- */
.barre-pastille { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e8833a; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.barre-reduite .barre-pastille { position: absolute; top: 4px; right: 12px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.mj-etiquette { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }
.jf-cache { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

/* Ma journee */
.mj { max-width: 980px; }
.mj-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.mj-tete h1 { margin: 0; font-size: 28px; color: var(--navy); }
.mj-date { margin: 0 0 2px; color: var(--grey); font-size: 14px; text-transform: capitalize; }
.mj-statut { font-size: 13px; padding: 4px 12px; font-weight: 600; }
.mj .alert-erreur, .mj .alert-succes { margin: 0 0 14px; }
.mj-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.mj-grille > .card { margin: 0; }
.mj-compteur { display: flex; flex-direction: column; gap: 6px; }
.mj-chrono { font-size: 48px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.05; }
.mj-barre { height: 10px; border-radius: 5px; }
.mj-reste { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.mj-action { display: flex; flex-direction: column; }
.mj-form { display: flex; flex-direction: column; gap: 12px; }
.mj-boutons { display: flex; flex-direction: column; gap: 10px; }
.mj-bouton, button.mj-bouton {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%;
  min-height: 72px; padding: 14px 16px; margin: 0; border: none; border-radius: 14px; cursor: pointer;
  color: #fff; font-size: 18px; font-weight: 700; text-align: center; font-family: inherit;
}
.mj-bouton:focus-visible { outline: 3px solid #7fb2ff; outline-offset: 2px; }
.mj-bouton-titre { display: inline-flex; align-items: center; gap: 10px; }
.mj-bouton-titre .icone { width: 22px; height: 22px; }
.mj-bouton-sous { font-size: 13px; font-weight: 500; opacity: .9; }
.mj-bouton-vert, button.mj-bouton-vert { background: #23775e; }
.mj-bouton-vert:hover { background: #1c6450; }
.mj-bouton-navy, button.mj-bouton-navy { background: var(--navy); }
.mj-bouton-navy:hover { background: #162b47; }
button.mj-bouton-pause { background: #fff; color: #9a4515; border: 2px solid #d9874f; min-height: 60px; }
button.mj-bouton-pause:hover { background: #fff6ef; }
/* Avec JavaScript : la confirmation n'apparait qu'apres la photo */
.mj-js .mj-confirmation { display: none; }
.mj-js.mj-confirmer .mj-confirmation { display: flex; }
.mj-js.mj-confirmer .mj-boutons { display: none; }
.mj-confirmation { flex-direction: column; gap: 12px; display: flex; }
.mj-apercu { width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.mj-verifs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; }
.mj-verifs li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.mj-verifs li:first-child { border-top: none; }
.mj-verif-titre { display: block; font-size: 12px; color: var(--grey); }
.mj-puce-etat { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--line); }
.mj-puce-etat.mj-ok { background: #23775e; }
.mj-puce-etat.mj-ko { background: #d9874f; }
.mj-puce-etat.mj-attente { background: #9aa5b4; animation: mj-clignote 1s infinite alternate; }
@keyframes mj-clignote { to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mj-puce-etat.mj-attente { animation: none; } }
form label.mj-chantier { flex: 1; margin: 0; color: var(--ink); }
form label.mj-chantier select { margin-top: 2px; }
form label.mj-commentaire { margin: 0; }
.mj-confirmation-liens { display: flex; justify-content: space-between; gap: 12px; }
.mj-lien, button.mj-lien { background: none; border: none; color: var(--blue); font-size: 14px; font-weight: 600; padding: 10px 0; cursor: pointer; margin: 0; }
.mj-aide { margin: 0; }
.mj-rappel { display: flex; align-items: center; gap: 12px; background: #fff1e6; border: 1px solid #f0b48a; border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; text-decoration: none; color: var(--ink); }
.mj-rappel > .icone { color: #b4501b; width: 22px; height: 22px; }
.mj-rappel > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.mj-rappel:hover { border-color: #d9874f; }
.mj-detection { background: #fff1e6; border: 2px solid #d9874f; border-radius: 16px; padding: 20px; margin-bottom: 20px; }
.mj-detection-tete { display: flex; align-items: center; gap: 8px; color: #9a4515; }
.mj-detection-tete h2 { margin: 0; color: #9a4515; font-size: 16px; }
.mj-detection-valeur { margin: 6px 0 2px; font-size: 44px; font-weight: 700; color: #9a4515; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mj-detection-texte { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.mj-plus-tard { display: inline-block; margin-top: 10px; color: var(--navy); font-size: 14px; font-weight: 600; }
.mj-frise-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mj-frise-tete h2 { margin: 0; }

/* Formulaire d'explication (motif en un appui) */
.jf { display: flex; flex-direction: column; gap: 12px; }
.jf-motifs { border: none; padding: 0; margin: 0; }
.jf-motifs legend { font-size: 15px; font-weight: 700; color: var(--navy); padding: 0; margin-bottom: 8px; }
.jf-motifs legend .muted { font-weight: 400; font-size: 13px; margin-left: 4px; }
.jf-puces { display: flex; flex-wrap: wrap; gap: 8px; }
form label.jf-puce { position: relative; margin: 0; }
form label.jf-puce input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.jf-puce span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #c3ccd8; border-radius: 20px; background: #fff; color: var(--ink); font-size: 14px; cursor: pointer; }
.jf-puce input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.jf-puce input:focus-visible + span { outline: 3px solid #7fb2ff; outline-offset: 2px; }
form label.jf-precision, form label.jf-heure { margin: 0; }
form label.jf-heure { color: var(--ink); font-weight: 600; font-size: 15px; }
form label.jf-heure input { max-width: 180px; font-size: 18px; font-variant-numeric: tabular-nums; }
.jf-preuves { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.jf-fichier, button.jf-fichier { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin: 0; border: 1px solid #c3ccd8; border-radius: 10px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 600; cursor: pointer; }
.jf-fichier:hover { border-color: var(--navy); }
button.jf-enregistre { background: #d2462f; border-color: #d2462f; color: #fff; }
.jf-vocal { display: flex; flex-direction: column; }
.jf-vocal .enregistreur-boutons { margin: 0; }
.jf-apercu { max-width: 220px; border-radius: 8px; border: 1px solid var(--line); }
button.jf-envoyer { align-self: flex-start; min-height: 48px; padding: 0 22px; font-size: 15px; font-weight: 700; margin: 4px 0 0; border-radius: 10px; }
button.jf-envoyer:disabled { opacity: .6; cursor: wait; }

/* A justifier (employe) */
.aj-tete { max-width: 760px; }
.aj-tete p { line-height: 1.5; margin: -6px 0 18px; }
.aj-onglets { display: inline-flex; background: #e3e8ef; border-radius: 12px; padding: 4px; margin-bottom: 18px; gap: 2px; flex-wrap: wrap; }
.aj-onglet { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 9px; text-decoration: none; color: var(--grey); font-size: 14px; font-weight: 500; }
.aj-onglet-actif { background: #fff; color: var(--navy); font-weight: 700; box-shadow: 0 1px 2px rgba(27, 36, 48, .08); }
.aj-onglet-nombre { font-weight: 700; }
.aj-onglet-alerte { background: #e8833a; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; line-height: 20px; }
.aj-liste { display: grid; gap: 14px; max-width: 760px; }
.aj-carte { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.aj-carte-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aj-jour { color: var(--grey); font-size: 14px; text-transform: capitalize; }
.aj-valeur { margin-left: auto; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--navy); }
.aj-valeur-heures_sup, .aj-valeur-retard { color: #9a4515; }
.aj-valeur-depart_anticipe, .aj-valeur-hors_zone { color: #a5321f; }
.aj-texte { margin: 0; font-size: 15px; }
.aj-type { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; border-radius: 20px; padding: 3px 10px; background: #eef2f7; color: #3d4856; white-space: nowrap; }
.aj-type-heures_sup, .aj-type-retard { background: #fff1e6; color: #9a4515; }
.aj-type-oubli_depart, .aj-type-depart_anticipe { background: #fce7e4; color: #a5321f; }
.aj-type-hors_zone { background: #e8f0fa; color: #1f4f8a; }
.aj-envoye { background: var(--light); border-radius: 10px; padding: 10px 12px; }
.aj-envoye p { margin: 0; }
.aj-motif { font-style: italic; }
.aj-preuves:empty { display: none; }
.aj-attente { font-size: 13px; color: #a85a1a; margin-top: 4px !important; }
.aj-modifier summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 14px; padding: 4px 0; }
.aj-modifier .jf { margin-top: 10px; }
.aj-vide p { margin: 0; font-size: 15px; }
.aj-expliquer > summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.aj-expliquer > summary::-webkit-details-marker { display: none; }
.aj-expliquer[open] > summary { display: none; }

/* Heures a valider (bureau) */
.hv-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hv-tete p { margin: -8px 0 18px; max-width: 760px; line-height: 1.5; }
.hv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.hv-kpi { margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.hv-kpi:hover { border-color: var(--blue); }
.hv-kpi strong { font-size: 28px; color: var(--navy); font-variant-numeric: tabular-nums; }
.hv-kpi .muted { font-size: 13px; }
.hv-rouge { color: #a5321f !important; }
.hv-orange { color: #9a4515 !important; }
.hv-vert { color: #1e6b52 !important; }
.hv-types { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 16px; }
.hv-type { font-size: 13px; padding: 5px 11px; border-radius: 20px; text-decoration: none; color: var(--grey); background: #eef2f7; }
.hv-type span { font-weight: 700; margin-left: 2px; }
.hv-type-actif { background: #dde6f2; color: var(--navy); font-weight: 600; box-shadow: inset 0 0 0 1px var(--navy); }
.hv-liste { padding: 0; overflow: hidden; }
.hv-barre { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fafbfc; flex-wrap: wrap; }
.hv-tout { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
button.hv-valider-lot { margin: 0 0 0 auto; }
.hv-vide { padding: 16px; margin: 0; }
.hv-ligne { display: flex; align-items: flex-start; border-bottom: 1px solid var(--line); }
.hv-ligne:last-child { border-bottom: none; }
.hv-case { width: 44px; flex-shrink: 0; display: flex; justify-content: center; padding-top: 16px; }
.hv-case input { width: 18px; height: 18px; cursor: pointer; }
.hv-details { flex: 1; min-width: 0; }
.hv-resume { display: grid; grid-template-columns: 150px 92px 140px 80px minmax(0, 1fr) 52px 100px; gap: 10px; align-items: center; padding: 12px 16px 12px 0; cursor: pointer; list-style: none; font-size: 14px; }
.hv-resume::-webkit-details-marker { display: none; }
.hv-resume:hover { background: #f7f9fc; }
.hv-details[open] .hv-resume { background: #eef3fa; }
.hv-qui { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-jour { color: var(--grey); text-transform: capitalize; }
.hv-valeur { font-weight: 700; font-variant-numeric: tabular-nums; }
.hv-motif { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-motif-vide { color: #a5321f; font-style: italic; }
.hv-preuves { display: inline-flex; gap: 4px; color: var(--grey); }
.hv-preuves .icone { width: 18px; height: 18px; }
.hv-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 6px 16px 18px 0; font-size: 14px; }
.hv-detail-col > p { margin: 0 0 10px; }
.hv-comparaison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: var(--light); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.hv-comparaison div { display: flex; flex-direction: column; }
.hv-comparaison strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.hv-citation { margin: 0 0 10px; padding: 10px 12px; background: #fafbfc; border-left: 3px solid var(--navy); border-radius: 4px; font-style: italic; }
.hv-ligne-a_justifier .hv-qui { color: var(--ink); }

@media (max-width: 960px) {
  .mj-grille { grid-template-columns: 1fr; gap: 14px; }
  .mj-action { order: -1; } /* sur telephone : le bouton de pointage d'abord */
  .hv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-resume { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "qui valeur" "jour statut" "type type" "motif motif"; gap: 4px 10px; }
  .hv-qui { grid-area: qui; } .hv-valeur { grid-area: valeur; text-align: right; } .hv-jour { grid-area: jour; }
  .hv-resume .badge { grid-area: statut; justify-self: end; } .hv-resume .aj-type { grid-area: type; justify-self: start; }
  .hv-motif { grid-area: motif; white-space: normal; } .hv-preuves { display: none; }
  .hv-detail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mj-tete h1 { font-size: 24px; }
  .mj-chrono { font-size: 40px; }
  .mj-detection-valeur { font-size: 36px; }
  .hv-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hv-kpi strong { font-size: 22px; }
}

/* =====================================================================
   Espace employe : style "calendrier" (cartes douces, couleurs de base AEP)
   navy #1f3a5f · bleu #2f6db5 · vert #2e8b6f · orange #e8833a
   ===================================================================== */
body.espace-employe { background: #eef3f8; }
.espace-employe .entete-page { background: transparent; border-bottom: none; box-shadow: none; }
.espace-employe .card { border: none; border-radius: 20px; box-shadow: 0 1px 2px rgba(31, 58, 95, .06); }

/* Barre laterale claire, element actif en pastille orange (comme le modele) */
.espace-employe .barre-laterale { background: #fff; color: var(--navy); border-right: 1px solid #e3e9f1; }
.espace-employe .barre-profil { border-bottom-color: #e8edf3; }
.espace-employe .avatar-grand { background: #dde8f5; border-color: #fff; color: var(--navy); }
.espace-employe .barre-lien { color: #4e5968; border-radius: 12px; }
.espace-employe .barre-lien:hover { background: #f1f5fa; color: var(--navy); }
.espace-employe .barre-lien.actif { background: #fde7d3; color: var(--navy); }
.espace-employe .barre-lien.actif::before { display: none; }
.espace-employe .barre-lien.actif .icone { color: #c4692a; }
.espace-employe .barre-reduire { color: var(--navy); }
.espace-employe .barre-reduire:hover { background: #f1f5fa; }
.espace-employe .barre-pied { border-top-color: #e8edf3; }
.espace-employe .barre-sortir { color: #6b7684; }
.espace-employe .barre-groupe-titre { color: #6b7684; opacity: 1; }
.espace-employe .barre-mobile { background: #fff; color: var(--navy); border-bottom: 1px solid #e3e9f1; }

.ej h2 { color: var(--navy); }
.ej-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ej-tete h1 { margin: 0; font-size: 28px; color: var(--navy); }
.ej-surtitre { margin: 0 0 2px; color: #5b6573; font-size: 14px; text-transform: capitalize; }
.ej-segment { display: inline-flex; background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 1px 2px rgba(31, 58, 95, .06); }
.ej-segment a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; color: #5b6573; text-decoration: none; font-size: 14px; font-weight: 600; }
.ej-segment a.actif { background: var(--navy); color: #fff; }
.ej .alert-erreur, .ej .alert-succes { margin: 0 0 14px; border-radius: 12px; }

.ej-grille { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.ej-gauche, .ej-droite { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ej-carte { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 1px 2px rgba(31, 58, 95, .06); }
.ej-carte h2, .ej-titre-carte { font-size: 17px; margin: 0 0 12px; color: var(--navy); }

/* Carte "Maintenant" (verte, comme le rappel du modele) */
.ej-maintenant { background: #23775e; color: #fff; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.ej-maintenant h2 { margin: 0 0 4px; font-size: 22px; color: #fff; }
.ej-maintenant-surtitre { margin: 0; font-size: 13px; opacity: .85; }
.ej-maintenant-ligne { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: .95; }
.ej-maintenant-ligne .icone { width: 16px; height: 16px; }
.ej-maintenant-compteur { background: rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px 14px; margin: 8px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.ej-chrono { font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.ej-chrono-sous { font-size: 13px; opacity: .9; }
.ej-barre { height: 8px; background: rgba(255, 255, 255, .22); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.ej-barre div { height: 100%; background: #fff; border-radius: 4px; }
.ej-barre div.ej-barre-depasse { background: #f6b26b; }
.ej-maintenant-fin { margin: 4px 0 0; font-size: 14px; }
.ej-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ej-boutons { display: flex; flex-direction: column; gap: 10px; }
.ej-bouton, button.ej-bouton {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%;
  min-height: 60px; padding: 12px 14px; margin: 0; border: none; border-radius: 14px; cursor: pointer;
  font-size: 17px; font-weight: 700; text-align: center; font-family: inherit;
}
.ej-bouton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ej-bouton-titre { display: inline-flex; align-items: center; gap: 8px; }
.ej-bouton-sous { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; opacity: .85; }
.ej-bouton-sous .icone { width: 14px; height: 14px; }
.ej-bouton-accent, button.ej-bouton-accent { background: #f6b26b; color: var(--navy); }
.ej-bouton-accent:hover { background: #f4a352; }
button.ej-bouton-clair { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6); min-height: 52px; font-size: 15px; }
button.ej-bouton-clair:hover { background: rgba(255, 255, 255, .1); }
button.ej-bouton-vert { background: #fff; color: #1c6450; }
/* Confirmation apres la photo : encart blanc dans la carte verte */
.mj-js .ej-confirmation { display: none; }
.mj-js.mj-confirmer .ej-confirmation { display: flex; }
.mj-js.mj-confirmer .ej-boutons { display: none; }
.ej-confirmation { flex-direction: column; gap: 10px; display: flex; background: #fff; color: var(--ink); border-radius: 14px; padding: 12px; }
.ej-confirmation button.ej-bouton-vert { background: #23775e; color: #fff; }
.ej-apercu { width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; }

.ej-rappel { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 14px 16px; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(31, 58, 95, .06); border: 2px solid #f6c9a0; }
.ej-rappel:hover { border-color: #e8833a; }
.ej-rappel > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-size: 15px; }
.ej-rappel .muted { font-size: 13px; }
.ej-rappel-nombre { width: 40px; height: 40px; border-radius: 50%; background: #e8833a; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ej-rappel > .icone { color: #c4692a; }

/* Petit calendrier */
.ej-mois-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ej-mois-tete h2 { margin: 0; text-transform: capitalize; }
.ej-fleches { display: flex; gap: 4px; }
.ej-fleches a, .ej-fleche { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--navy); }
.ej-fleches a:hover, .ej-fleche:hover { background: #eef3f8; }
.ej-mois-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 0; text-align: center; }
.ej-mois-jsem { font-size: 11px; color: #6b7684; padding: 4px 0; }
.ej-mois-jour { position: relative; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink); text-decoration: none; border-radius: 50%; width: 36px; margin: 0 auto; font-variant-numeric: tabular-nums; }
.ej-mois-jour:hover { background: #eef3f8; }
.ej-mois-jour::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: transparent; }
.ej-mois-jour.ej-etat-ok::after { background: #2e8b6f; }
.ej-mois-jour.ej-etat-a_expliquer::after { background: #e8833a; }
.ej-mois-jour.ej-etat-en_attente::after { background: #2f6db5; }
.ej-mois-jour.ej-etat-absent::after { background: #d2462f; }
.ej-hors-mois { color: #a5adb8; }
.ej-choisi { box-shadow: inset 0 0 0 2px var(--navy); font-weight: 700; }
.ej-aujourdhui, .ej-aujourdhui:hover { background: var(--navy); color: #fff; font-weight: 700; }
.ej-aujourdhui::after { bottom: 4px; }
.ej-legende { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid #eef1f5; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #5b6573; }
.ej-legende li { display: inline-flex; align-items: center; gap: 6px; }
.ej-point { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #c3ccd8; flex-shrink: 0; }
.ej-point.ej-etat-ok { background: #2e8b6f; }
.ej-point.ej-etat-a_expliquer { background: #e8833a; }
.ej-point.ej-etat-en_attente { background: #2f6db5; }
.ej-point.ej-etat-absent { background: #d2462f; }
.ej-point.ej-etat-a_venir, .ej-point.ej-etat-repos { background: transparent; }

/* "A expliquer" par type (comme les filtres du modele) */
.ej-types ul { list-style: none; margin: 0 0 10px; padding: 0; }
.ej-types li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.ej-types li strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.ej-type-vide { color: #8a94a3; }
.ej-carre { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex-shrink: 0; padding: 0; }
.ej-type-vide .ej-carre { opacity: .35; }
.ej-carre.aj-type-heures_sup { background: #e8833a; }
.ej-carre.aj-type-retard { background: #f6b26b; }
.ej-carre.aj-type-depart_anticipe { background: #d2462f; }
.ej-carre.aj-type-oubli_depart { background: #a5321f; }
.ej-carre.aj-type-hors_zone { background: #2f6db5; }
.ej-carre.aj-type-pause_non_prise { background: #8a94a3; }
.ej-sous-titre { font-size: 12px; font-weight: 500; color: #6b7684; margin-left: 4px; }
.ej-lien { font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; }

/* Planning (jour / semaine) */
.ej-planning { padding: 18px 20px 16px; }
.ej-planning-tete { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ej-planning-tete h2 { margin: 0 6px; font-size: 20px; }
.ej-planning-tete h2.ej-majuscule::first-letter { text-transform: uppercase; }
.ej-pilule { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--navy); background: #eef3f8; border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.ej-totaux { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ej-totaux span { display: flex; flex-direction: column; background: #f4f7fb; border-radius: 12px; padding: 6px 12px; min-width: 84px; }
.ej-totaux small { font-size: 11px; color: #5b6573; }
.ej-totaux strong { font-size: 16px; color: var(--navy); font-variant-numeric: tabular-nums; }
.ej-planning .mj-detection { margin-bottom: 16px; }

.ej-grille-horaire { display: grid; grid-template-columns: 56px repeat(var(--colonnes), minmax(0, 1fr)); gap: 8px; overflow-x: auto; }
.ej-vue-semaine { min-width: 640px; }
.ej-gh-coin { font-size: 11px; color: #8a94a3; align-self: end; padding-bottom: 6px; }
.ej-gh-jour { background: #f4f7fb; border-radius: 14px; padding: 10px 6px; text-align: center; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ej-gh-jour:hover { background: #e8eef6; }
.ej-gh-nom { font-size: 12px; color: #5b6573; text-transform: capitalize; }
.ej-gh-numero { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.ej-gh-total { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #3d4856; min-height: 16px; font-variant-numeric: tabular-nums; }
.ej-gh-jour.ej-gh-aujourdhui { background: #dde8f5; }
.ej-gh-jour.ej-gh-aujourdhui .ej-gh-numero { color: var(--blue); }
.ej-gh-jour.ej-gh-choisi { box-shadow: inset 0 0 0 2px var(--navy); }
.ej-gh-heures { display: flex; flex-direction: column; }
.ej-gh-heures span { font-size: 11px; color: #8a94a3; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.ej-gh-colonne { position: relative; border-radius: 12px; background-image: linear-gradient(to bottom, #e8edf3 1px, transparent 1px); }
.ej-gh-colonne.ej-gh-aujourdhui { background-color: #f7faff; }
.ej-gh-vide { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: 12px; color: #a5adb8; }
.ej-bloc { position: absolute; left: 3px; right: 3px; border-radius: 12px; padding: 7px 10px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.3; }
.ej-bloc strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ej-bloc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; font-variant-numeric: tabular-nums; }
.ej-bloc em { font-style: normal; font-weight: 700; font-size: 11px; color: #a5321f; }
.ej-bloc-travail { background: #dceaf8; color: #163a63; }
.ej-bloc-sup { background: #fde0c6; color: #7f3b10; }
.ej-bloc-pause { background: repeating-linear-gradient(135deg, #eef1f5 0 6px, #e5e9ef 6px 12px); color: #4e5968; }
.ej-bloc-oubli { background: #fce6e2; color: #a5321f; border: 2px dashed #e39a8f; }
.ej-carre.ej-bloc-travail, .ej-carre.ej-bloc-sup, .ej-carre.ej-bloc-pause, .ej-carre.ej-bloc-oubli { position: static; }
.ej-carre.ej-bloc-oubli { border-width: 1px; }
.ej-vue-semaine .ej-bloc { padding: 5px 7px; }
.ej-vue-semaine .ej-bloc span { display: none; }
.ej-legende-blocs { border-top: none; padding-top: 4px; }

/* Appareil photo dans la page (ordinateur) */
dialog.camera { border: none; border-radius: 20px; padding: 0; width: min(560px, 94vw); box-shadow: 0 20px 60px rgba(31, 58, 95, .35); }
dialog.camera::backdrop { background: rgba(20, 32, 50, .55); }
.camera-tete { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; color: var(--navy); }
.camera-fermer { background: none; border: none; font-size: 18px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: #5b6573; }
.camera-fermer:hover { background: #eef3f8; }
.camera-image { background: #0f1b2b; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.camera-image video { width: 100%; height: 100%; object-fit: cover; }
.camera-message { color: #fff; padding: 24px; text-align: center; font-size: 15px; line-height: 1.5; }
.camera-actions { display: flex; gap: 10px; padding: 14px 18px 18px; flex-wrap: wrap; }
.camera-prendre { flex: 1; min-height: 52px; border: none; border-radius: 14px; background: #23775e; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.camera-prendre:disabled { opacity: .5; cursor: wait; }
.camera-fichier { min-height: 52px; padding: 0 16px; border: 1px solid #c3ccd8; border-radius: 14px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 600; cursor: pointer; }

/* A justifier : meme style doux */
.espace-employe .aj-onglets { background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(31, 58, 95, .06); }
.espace-employe .aj-onglet { border-radius: 999px; }
.espace-employe .aj-onglet-actif { background: var(--navy); color: #fff; box-shadow: none; }
.espace-employe .aj-onglet-actif .aj-onglet-nombre:not(.aj-onglet-alerte) { color: #fff; }

@media (max-width: 1100px) {
  .ej-grille { grid-template-columns: 1fr; }
  .ej-gauche { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
  .ej-maintenant { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ej-tete h1 { font-size: 24px; }
  .ej-gauche { display: flex; }
  .ej-totaux { margin-left: 0; width: 100%; }
  .ej-planning-tete h2 { font-size: 17px; }
  .ej-carte, .ej-maintenant { padding: 16px; }
}
.espace-employe .barre-bouton { color: var(--navy); }

/* ---------- Gestion de stock (admin, assistant) ---------- */
/* Champ photo cache : on clique sur son bouton (label) ; "form input" ne doit pas le reafficher */
form input[type="file"][hidden] { display: none; }
.btn-contour { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn-contour:hover { background: #eef4fb; }
.st-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.st-tete h1 { margin-bottom: 6px; }
.st-tete p { margin: 0 0 14px; max-width: 640px; line-height: 1.5; }
.st-tete-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.st-tete-actions .btn { margin-bottom: 0; }
.st-filtres { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.st-filtres .aj-onglets { margin-bottom: 0; }
.st-filtres input[type="search"] { flex: 1; min-width: 220px; margin: 0; width: auto; }
.st-filtres-selects select { width: auto; min-width: 200px; margin: 0; }
.st-vide { text-align: center; color: var(--grey); }
.st-vide .btn { margin: 8px 0 0; }

.st-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.st-carte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.st-carte:hover { box-shadow: 0 6px 18px rgba(27, 36, 48, .1); transform: translateY(-1px); }
.st-carte-alerte { border-color: #e8a28f; }
.st-carte .st-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
.st-carte-corps { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.st-nom { font-size: 15px; line-height: 1.3; }
.st-info { font-size: 13px; }
.st-quantite-ligne { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.st-quantite { font-size: 26px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.st-carte-alerte .st-quantite { color: #b03a22; }
.st-badge-alerte { background: #fdeceb; color: #a5321f; border: 1px solid #e8a28f; border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 600; margin-left: auto; }
.st-badge-nouveau { background: var(--blue); color: #fff; border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 600; margin-right: 6px; }

/* Photo d'un article : carre gris avec l'image en "cover", ou une icone si pas de photo */
.st-photo { display: inline-flex; align-items: center; justify-content: center; background: #eef2f7 center / cover no-repeat; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.st-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-photo-vide { font-size: 30px; opacity: .55; }
.st-photo-mini { width: 44px; height: 44px; border-radius: 8px; }
.st-photo-mini .st-photo-vide { font-size: 20px; }
.st-photo-grande { width: 100%; aspect-ratio: 1; border-radius: 12px; }
.st-photo-grande .st-photo-vide { font-size: 56px; }

/* Fenetre "nouvel article" */
.st-form h2 { margin: 0; }
.st-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.st-photo-choix { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; }
.st-photo-choix label.btn { margin: 0; color: var(--blue); font-size: 14px; }
.st-apercu { width: 84px; height: 84px; border-radius: 12px; background: #eef2f7 center / cover no-repeat; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.st-form button[type="submit"] { width: 100%; padding: 12px; font-size: 15px; }

/* Fiche d'un article */
.st-fiche { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.st-fiche-gauche .card { padding: 16px; }
.st-fiche-titre { margin-top: 0; }
.st-fiche-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.st-fiche-photo-actions label.btn { margin: 0; color: var(--blue); font-size: 14px; }
.st-fiche-photo-actions button[type="submit"] { margin: 0; }
.st-stock { display: flex; flex-direction: column; gap: 4px; }
.st-stock-chiffre { font-size: 40px; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-stock-chiffre small { font-size: 16px; color: var(--grey); font-weight: 500; }
.st-stock-alerte { border-color: #e8a28f; background: #fffaf8; }
.st-stock-alerte .st-stock-chiffre { color: #b03a22; }
.st-stock .st-badge-alerte { margin-left: 0; align-self: flex-start; }
.st-etiquette-apercu { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.st-etiquette-apercu .btn { margin: 0; }
.st-etiquette { width: 100%; border: 1px dashed #9aa4b1; border-radius: 10px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.st-etiquette-photo { aspect-ratio: 1; border-radius: 8px; background: #eef2f7 center / cover no-repeat; }
.st-etiquette-qr svg { width: 100%; height: auto; display: block; }
.st-etiquette-nom { grid-column: 1 / -1; text-align: center; font-size: 14px; }
.st-ajustements { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-ajustement { margin-bottom: 20px; }
.st-ajustement h2 { margin-bottom: 4px; }
.st-ajustement button[type="submit"] { width: 100%; }
.st-retirer { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.st-historique .st-num { text-align: right; font-variant-numeric: tabular-nums; }
.st-type { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 2px 9px; background: var(--light); color: var(--grey); white-space: nowrap; }
.st-type-sortie { background: #fff3e8; color: #a85a1a; }
.st-type-entree, .st-type-creation { background: #e9f5f0; color: #1e6b52; }
.st-type-correction { background: #eef2f7; color: var(--navy); }

/* Reservations recues */
.st-reservations { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.st-reservation { margin: 0; padding: 16px; }
.st-reservation-nouvelle { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.st-reservation-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.st-reservation-tete .employe-nom-avatar { align-items: center; }
.st-reservation-date { font-size: 13px; color: var(--grey); text-align: right; white-space: nowrap; }
.st-lignes { list-style: none; margin: 0; padding: 0; }
.st-lignes li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--light); font-size: 14px; }
.st-lignes a { color: inherit; text-decoration: none; flex: 1; }
.st-lignes a:hover { color: var(--blue); }
.st-ligne-qte { font-size: 15px; }
.st-reservation-total { margin: 8px 0 0; font-size: 13px; }

@media (max-width: 900px) {
  .st-fiche { grid-template-columns: 1fr; }
  .st-ajustements { grid-template-columns: 1fr; }
  .st-fiche-gauche { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .st-fiche-gauche .card { margin-bottom: 0; }
  .st-etiquette-apercu { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .st-grille { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .st-quantite { font-size: 22px; }
  .st-reservations { grid-template-columns: 1fr; }
  .st-fiche-gauche { grid-template-columns: 1fr; }
  .st-historique { display: block; overflow-x: auto; }
}

/* ---------- Materiel : reservation par l'employe ---------- */
.mt-page { max-width: 640px; margin: 0 auto; padding-bottom: 90px; }
.mt-bloc { padding: 18px; }
.mt-etape { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.mt-affaire { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.mt-affaire-texte { flex: 1; font-weight: 600; color: var(--ink); font-size: 15px; }
.mt-page select, .mt-page input[type="search"] { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; background: #fff; color: var(--ink); }
.mt-a-remplir { box-shadow: 0 0 0 2px #e8833a; }
.mt-scan-zone { display: flex; gap: 12px; align-items: flex-start; }
.mt-scan-texte { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.mt-bouton-scan { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border: none; border-radius: 14px; background: var(--blue); color: #fff; font-size: 18px; font-weight: 600; cursor: pointer; }
.mt-bouton-scan .icone { width: 26px; height: 26px; }
.mt-bouton-scan:active { transform: scale(.99); }
.mt-recherche { margin-top: 12px; }
.mt-recherche summary { cursor: pointer; color: var(--blue); font-size: 14px; }
.mt-resultats { list-style: none; margin: 8px 0 0; padding: 0; }
.mt-resultat { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: none; border-bottom: 1px solid var(--light); background: none; text-align: left; font-size: 15px; cursor: pointer; color: var(--ink); }
.mt-resultat:hover { background: var(--light); }
.mt-liste-tete { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.mt-liste-tete .aj-onglet-nombre { background: var(--light); border-radius: 10px; padding: 0 8px; font-size: 13px; }
.mt-liste-vide { margin: 12px 0 0; }
.mt-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.mt-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--light); }
.mt-ligne-nom { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 15px; }
.mt-ligne-nom strong { overflow-wrap: anywhere; }
.mt-ligne-nom .muted { font-size: 12px; }
.mt-quantite { display: inline-flex; align-items: center; gap: 4px; background: var(--light); border-radius: 12px; padding: 4px; }
.mt-quantite output { min-width: 44px; text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-quantite-petite output { min-width: 28px; font-size: 16px; }
.mt-pas { width: 44px; height: 44px; border: none; border-radius: 10px; background: #fff; color: var(--navy); font-size: 22px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(27, 36, 48, .08); }
.mt-quantite-petite .mt-pas { width: 34px; height: 34px; font-size: 18px; }
.mt-pas:disabled { opacity: .35; cursor: default; }
.mt-retirer { border: none; background: none; color: var(--grey); font-size: 16px; padding: 8px; cursor: pointer; }
.mt-retirer:hover { color: #a5321f; }
.mt-barre-terminer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); }
body.avec-barre .mt-barre-terminer { left: var(--barre-largeur); }
.barre-reduite body.avec-barre .mt-barre-terminer { left: var(--barre-reduite); }
.mt-barre-terminer button { display: block; width: 100%; max-width: 640px; margin: 0 auto; padding: 15px; border: none; border-radius: 14px; background: var(--green); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.mt-barre-terminer button:disabled { background: #b9c2cd; cursor: default; }
.mt-titre-historique { margin-top: 28px; color: var(--navy); }
.mt-historique-carte { padding: 14px 16px; margin-bottom: 10px; }
.mt-historique-tete { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.mt-historique-lignes { margin: 6px 0 0; font-size: 14px; color: var(--ink); }

/* Fenetres de la reservation */
.mt-dialogue h2 { margin: 0; color: var(--navy); }
.mt-camera { position: relative; margin: 8px 0; border-radius: 14px; overflow: hidden; background: #111; aspect-ratio: 1; }
.mt-camera[hidden] { display: none; }
.mt-camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-viseur { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.mt-scan-message { text-align: center; margin: 8px 0 12px; }
.mt-photo-qr { display: block; text-align: center; margin: 0; }
.mt-article { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin: 6px 0 16px; }
.mt-article-photo { width: 180px; height: 180px; border-radius: 16px; }
.mt-article-photo .st-photo-vide { font-size: 60px; }
.mt-article-nom { font-size: 19px; line-height: 1.3; }
.mt-dialogue .mt-quantite { display: flex; justify-content: space-between; width: 220px; margin: 0 auto 16px; }
.mt-dialogue .alert-erreur { margin: 0 0 12px; }
.mt-bouton-principal { width: 100%; padding: 15px; border: none; border-radius: 12px; background: var(--blue); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.mt-bouton-principal:disabled { background: #b9c2cd; cursor: default; }
.mt-recap-affaire { margin: 4px 0 8px; font-size: 14px; color: var(--grey); }
.mt-recap-affaire strong { color: var(--ink); }
.mt-recap { list-style: none; margin: 0 0 14px; padding: 0; max-height: 50vh; overflow-y: auto; }
.mt-recap li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--light); }
.mt-recap-qte { font-size: 17px; }
.mt-recap-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.mt-recap-actions .btn-secondaire { border-radius: 12px; font-size: 16px; padding: 12px; cursor: pointer; }
.mt-ok { text-align: center; }
.mt-ok h2 { margin: 8px 0 6px; }
.mt-ok p { margin: 0 0 18px; }
.mt-ok-rond { width: 64px; height: 64px; border-radius: 50%; background: #e9f5f0; color: var(--green); font-size: 34px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 900px) {
  body.avec-barre .mt-barre-terminer, .barre-reduite body.avec-barre .mt-barre-terminer { left: 0; }
}

/* Historique des reservations : periode, filtres, total par article */
.st-periode { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.st-periode .aj-onglets { margin-bottom: 0; }
.st-periode-nav { display: flex; align-items: center; gap: 8px; }
.st-periode-libelle { min-width: 200px; text-align: center; color: var(--navy); }
.st-periode-libelle::first-letter { text-transform: uppercase; }
.st-aujourdhui { margin-left: 6px; margin-right: 0; }
.st-resume { margin-left: auto; }
.st-reference { font-size: 12px; color: var(--grey); font-variant-numeric: tabular-nums; }
.st-historique-grille { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
.st-historique-grille .st-reservations { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.st-totaux { position: sticky; top: 76px; }
@media (max-width: 1100px) {
  .st-historique-grille { grid-template-columns: 1fr; }
  .st-totaux { position: static; order: -1; }
}
@media (max-width: 640px) {
  .st-historique-grille .st-reservations { grid-template-columns: 1fr; }
  .st-periode-libelle { min-width: 0; }
  .st-resume { margin-left: 0; width: 100%; }
}

/* Stock : recherche (nom ou reference) + scan, onglets par type, barre de categories */
.st-recherche { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 14px; margin-bottom: 14px; color: var(--grey); box-shadow: 0 1px 2px rgba(27, 36, 48, .04); }
.st-recherche:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 109, 181, .15); }
form.st-recherche input[type="search"] { flex: 1; border: none; outline: none; margin: 0; padding: 10px 4px; font-size: 15px; background: transparent; }
form.st-recherche button { margin: 0; border-radius: 9px; padding: 10px 16px; font-size: 14px; cursor: pointer; }
.st-recherche-scan { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; border: none; }
.st-onglets { margin-bottom: 12px; }
.st-categories { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 14px; scrollbar-width: thin; }
.st-categorie { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap; }
.st-categorie span { font-size: 12px; color: var(--grey); }
.st-categorie:hover { border-color: var(--blue); color: var(--blue); }
.st-categorie-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.st-categorie-active span { color: rgba(255, 255, 255, .75); }
.st-resultat-recherche { margin: -4px 0 14px; }
.st-carte .st-photo { position: relative; }
.st-type-coin { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; background: rgba(255, 255, 255, .92); color: var(--grey); }
.st-type-coin.st-type-materiel { background: #eef2fb; color: #3b4fa0; }
.st-type-statique { position: static; align-self: flex-start; display: inline-block; margin-bottom: 4px; }
.mt-article .st-type-statique { align-self: center; }
.st-type-consommable.st-type-statique { background: var(--light); }
.st-badge-emprunt { background: #eef2fb; color: #3b4fa0; border: 1px solid #c9d3f0; border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.st-carte .st-badge-emprunt { margin-left: auto; }
.st-ref { font-size: 11.5px; color: var(--grey); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.st-choix-type { border: none; padding: 0; margin: 4px 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-choix-type legend { font-size: 13px; color: var(--grey); margin-bottom: 6px; padding: 0; }
form label.st-type-option { margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--ink); }
form label.st-type-option:has(input:checked) { border-color: var(--blue); background: #eef4fb; box-shadow: 0 0 0 1px var(--blue) inset; }
form label.st-type-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-type-option span { font-size: 12px; color: var(--grey); line-height: 1.35; }
.st-form label[hidden] { display: none; }

/* Emprunts de materiel */
.st-emprunts { list-style: none; margin: 0; padding: 0; }
.st-emprunt { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--light); }
.st-emprunt:first-child { border-top: none; }
.st-emprunt-corps { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.st-emprunt-corps a { color: inherit; text-decoration: none; }
.st-emprunt-corps a:hover { color: var(--blue); }
.st-emprunt-dates { font-size: 12.5px; }
.st-emprunt-echeance { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; font-size: 13px; }
.st-emprunt-echeance form { margin: 0; }
.st-emprunt-retard .st-emprunt-corps strong { color: #a5321f; }
.st-emprunt-rendu { opacity: .8; }
.st-bloc-retard { border-color: #e8a28f; background: #fffaf8; }
.st-bloc-retard .card-titre { color: #a5321f; }
.st-emprunts-rendus { margin-top: 10px; }
.st-emprunts-rendus summary { cursor: pointer; color: var(--blue); font-size: 14px; margin-bottom: 6px; }
@media (max-width: 640px) {
  .st-emprunt { flex-wrap: wrap; }
  .st-emprunt-echeance { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .st-choix-type { grid-template-columns: 1fr; }
  .st-recherche-scan span { display: none; }
  form.st-recherche .st-recherche-ok { display: none; }
}

/* Reservation (employe) : materiel a rendre, duree, disponibilite */
.mt-emprunts { border: 1px solid #c9d3f0; }
.mt-emprunts-aide { margin: 6px 0 0; font-size: 13px; }
.mt-a-rendre { font-size: 12px; color: #3b4fa0; font-weight: 600; }
.mt-duree { border: none; padding: 0; margin: 0 0 14px; }
.mt-duree legend { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 auto 8px; text-align: center; }
.mt-duree-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mt-duree-choix button { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 8px 13px; font-size: 14px; cursor: pointer; color: var(--ink); }
.mt-duree-choix button.actif { background: var(--navy); border-color: var(--navy); color: #fff; }
#mt-duree-date { display: block; margin: 10px auto 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }
#mt-duree-date[hidden] { display: none; }
.mt-rendre { background: #eef2fb; border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.mt-rendre-ligne { display: flex; flex-direction: column; gap: 10px; font-size: 14px; text-align: center; }
.mt-rendre-ligne + .mt-rendre-ligne { margin-top: 12px; padding-top: 12px; border-top: 1px solid #c9d3f0; }
.mt-bouton-rendre { background: var(--green); }
.mt-occupe { list-style: none; margin: 0 0 14px; padding: 10px 12px; background: var(--light); border-radius: 10px; font-size: 13px; color: var(--grey); }
.mt-occupe::before { content: "Emprunté par :"; display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.mt-occupe li + li { margin-top: 2px; }
.mt-lien-autre { display: block; margin: 12px auto 0; background: none; border: none; color: var(--blue); font-size: 14px; text-decoration: underline; cursor: pointer; }
form .st-filtre-recherche { width: auto; flex: 1; min-width: 180px; margin: 0; }
.st-periode-aide { font-size: 12.5px; }

/* ---------- Contrôle des achats (commande -> livraison -> facture) ---------- */
:root { --ach-ok: #2e8b6f; --ach-ok-fond: #e9f5f0; --ach-verif: #b8741a; --ach-verif-fond: #fff5e6; --ach-ano: #c0392b; --ach-ano-fond: #fdeceb; --ach-manuel: #6a4fb5; --ach-manuel-fond: #f1edfa; }
.btn-petit { padding: 6px 12px; margin: 0; font-size: 13px; white-space: nowrap; }

/* Schéma des étapes */
.ach-etapes { list-style: none; margin: 4px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: none; }
.ach-etape { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 6px; }
.ach-etape::before { content: ""; position: absolute; top: 22px; left: calc(-50% + 26px); right: calc(50% + 26px); height: 3px; border-radius: 2px; background: var(--line); }
.ach-etape:first-child::before { display: none; }
.ach-etape-rond { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--line); color: var(--grey); position: relative; z-index: 1; }
.ach-etape-texte { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--grey); }
.ach-etape-texte strong { color: var(--ink); font-size: 14px; }
.ach-etape-texte small { margin-top: 4px; font-size: 12px; line-height: 1.4; }
.ach-etape-fait .ach-etape-rond { background: var(--ach-ok); border-color: var(--ach-ok); color: #fff; }
.ach-etape-fait::before, .ach-etape-courant::before { background: var(--ach-ok); }
.ach-etape-courant .ach-etape-rond { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 5px #e3edf9; }
.ach-etape-courant .ach-etape-texte strong { color: var(--blue); }
.ach-etapes-detaille { margin-top: 18px; }
.ach-etapes-detaille .ach-etape-rond { border-color: var(--blue); color: var(--blue); }

.ach-explication summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; list-style: none; }
.ach-explication summary::-webkit-details-marker { display: none; }
.ach-explication summary::before { content: "▸"; color: var(--blue); }
.ach-explication[open] summary::before { content: "▾"; }
.ach-legende { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--grey); border-top: 1px solid var(--line); padding-top: 12px; }
.ach-legende span { display: inline-flex; align-items: center; gap: 7px; }

/* Pastilles d'état */
.ach-point { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.ach-point-conforme, .ach-point-ok { background: var(--ach-ok); }
.ach-point-a_verifier { background: #e8a33a; }
.ach-point-anomalie { background: var(--ach-ano); }
.ach-point-manuel { background: var(--ach-manuel); }
.ach-point-vide { background: #fff; border: 2px solid var(--line); }
.ach-mini { display: inline-flex; align-items: center; }
.ach-mini-trait { width: 18px; height: 2px; background: var(--line); }
.ach-mini-trait.fait { background: var(--ach-ok); }
.ach-badge { text-decoration: none; display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; margin: 2px 4px 2px 0; white-space: nowrap; border: 1px solid transparent; }
.ach-badge-a_traiter { background: #e8f0fa; color: var(--blue); border-color: #bcd2ee; }
.ach-badge-attente { background: #eef2f7; color: var(--grey); border-color: var(--line); }
.ach-badge-terminee { background: var(--ach-ok-fond); color: #1e6b52; border-color: #b9dccd; }
.ach-badge-a_verifier { background: var(--ach-verif-fond); color: var(--ach-verif); border-color: #f0d3a6; }
.ach-badge-anomalie { background: var(--ach-ano-fond); color: var(--ach-ano); border-color: #f1bdb6; }
.ach-badge-manuel { background: var(--ach-manuel-fond); color: var(--ach-manuel); border-color: #d6cbef; }

/* Liste par affaire */
.ach-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ach-barre .aj-onglets { margin: 0; }
form.ach-filtre select { margin: 0; min-width: 260px; }
.ach-affaire { padding: 0; overflow: hidden; }
.ach-affaire-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
.ach-affaire-tete h2 { margin: 0 0 2px; }
.ach-affaire-tete h2 a { color: var(--navy); text-decoration: none; }
.ach-affaire-tete h2 a:hover { text-decoration: underline; }
.ach-affaire-tete p { margin: 0; }
.ach-table-boite { overflow-x: auto; }
.ach-table th, .ach-table td { padding: 10px 12px; vertical-align: middle; }
.ach-table tr:last-child td { border-bottom: none; }
.ach-col-action { text-align: right; }
.ach-vide { text-align: center; padding: 34px 20px; }
.ach-vide .btn { margin: 8px 0 0; }

/* Import des documents */
.ach-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ach-zone h2, .ach-section h2 { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.ach-numero { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.ach-aide { margin: -4px 0 0; font-size: 13px; }
form label.ach-depot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 140px; margin: 0 0 10px; padding: 18px; border: 2px dashed #b9c6d6; border-radius: 12px; background: #f7f9fc; color: var(--ink); text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
form label.ach-depot .icone { width: 30px; height: 30px; color: var(--blue); }
form label.ach-depot:hover, form label.ach-depot.ach-depot-survol { border-color: var(--blue); background: #eef4fb; }
form label.ach-depot.ach-depot-plein { border-style: solid; border-color: var(--ach-ok); background: var(--ach-ok-fond); }
form label.ach-depot.ach-depot-plein .icone { color: var(--ach-ok); }
.ach-coller summary { cursor: pointer; color: var(--blue); font-size: 14px; }
.ach-coller textarea, .ach-decision textarea { display: block; width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; resize: vertical; }
.ach-envoi { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
button.ach-bouton-principal { margin: 0; padding: 12px 24px; font-size: 15px; font-weight: 600; border-radius: 8px; }
button.ach-bouton-principal:disabled { opacity: .6; cursor: wait; }

/* Écran d'attente */
.ach-attente { position: fixed; inset: 0; z-index: 100; background: rgba(27, 36, 48, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ach-attente[hidden] { display: none; }
.ach-attente-boite { background: #fff; border-radius: 14px; padding: 28px 30px; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: 0 20px 60px rgba(27, 36, 48, .3); }
.ach-roue { width: 42px; height: 42px; border-radius: 50%; border: 4px solid #dbe5f2; border-top-color: var(--blue); animation: ach-tourne 0.9s linear infinite; margin-bottom: 6px; }
@keyframes ach-tourne { to { transform: rotate(360deg); } }

/* Page d'une commande */
.ach-fournisseur { display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 600; background: var(--navy); color: #fff; border-radius: 6px; padding: 3px 9px; margin-left: 6px; }
.ach-documents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.ach-document { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ach-document-vide { border-top-color: var(--line); background: #fbfcfd; border-style: dashed; border-top-style: solid; }
.ach-document-type { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); font-weight: 600; }
.ach-document strong { font-size: 17px; color: var(--navy); }
.ach-document dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 6px 0; font-size: 13px; }
.ach-document dt { color: var(--grey); }
.ach-document dd { margin: 0; }
.ach-lien-fichier { font-size: 13px; color: var(--blue); text-decoration: none; margin-top: auto; }
.ach-lien-fichier:hover { text-decoration: underline; }
.ach-section-attente { opacity: .65; }
.ach-section h3 { font-size: 14px; margin: 0 0 8px; color: var(--ink); }

.ach-banniere { display: flex; align-items: center; gap: 14px; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid; }
.ach-banniere > div:nth-child(2) { display: flex; flex-direction: column; gap: 2px; font-size: 14px; flex: 1; }
.ach-banniere strong { font-size: 16px; }
.ach-banniere-icone { width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ach-banniere-conforme { background: var(--ach-ok-fond); border-color: #b9dccd; color: #1e6b52; }
.ach-banniere-conforme .ach-banniere-icone { background: var(--ach-ok); }
.ach-banniere-a_verifier { background: var(--ach-verif-fond); border-color: #f0d3a6; color: #8a560f; }
.ach-banniere-a_verifier .ach-banniere-icone { background: #e8a33a; }
.ach-banniere-anomalie { background: var(--ach-ano-fond); border-color: #f1bdb6; color: #962d21; }
.ach-banniere-anomalie .ach-banniere-icone { background: var(--ach-ano); }
.ach-compteurs { display: flex; gap: 14px; font-size: 13px; color: var(--ink); flex-wrap: wrap; }
.ach-compteurs b { font-size: 16px; }

.ach-anomalies { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ach-anomalies li { font-size: 14px; padding: 8px 10px; border-radius: 8px; background: #fbfcfd; border: 1px solid var(--line); display: flex; gap: 8px; align-items: baseline; }
.ach-pilule { display: inline-block; border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ach-pilule-ok { background: var(--ach-ok-fond); color: #1e6b52; }
.ach-pilule-a_verifier { background: var(--ach-verif-fond); color: var(--ach-verif); }
.ach-pilule-anomalie { background: var(--ach-ano-fond); color: var(--ach-ano); }
.ach-lignes th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--grey); }
.ach-lignes td { vertical-align: top; }
.ach-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ach-ecart { color: var(--ach-ano); font-weight: 700; }
.ach-designation { max-width: 320px; }
.ach-remarque { display: block; font-size: 12px; color: var(--grey); margin-top: 3px; }
.ach-ligne-anomalie td:first-child { box-shadow: inset 3px 0 0 var(--ach-ano); }
.ach-ligne-a_verifier td:first-child { box-shadow: inset 3px 0 0 #e8a33a; }
.ach-total { margin: 10px 0 0; }

.ach-decision { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ach-decision label { margin-bottom: 10px; }
.ach-decision-boutons { display: flex; gap: 10px; flex-wrap: wrap; }
.ach-decision-boutons button { margin: 0; padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: 8px; cursor: pointer; }
button.ach-bouton-valider { background: var(--ach-ok); }
button.ach-bouton-valider:hover { background: #24725a; }
button.ach-bouton-manuel { background: #fff; color: var(--ach-manuel); border: 1px solid var(--ach-manuel); }
button.ach-bouton-manuel:hover { background: var(--ach-manuel-fond); }
.ach-champ-requis { border-color: var(--ach-ano) !important; box-shadow: 0 0 0 3px var(--ach-ano-fond); }
.ach-decision-faite { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.ach-decision-faite p { margin: 4px 0 0; font-style: italic; }
.ach-decision-validee { background: var(--ach-ok-fond); color: #1e6b52; }
.ach-decision-a_corriger { background: var(--ach-manuel-fond); color: #4b3685; }
.ach-facture select { margin-top: 0; }
.ach-facture .ach-bouton-principal { margin-top: 14px; }
.ach-remplacer { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.ach-remplacer summary { cursor: pointer; color: var(--blue); font-size: 14px; margin-bottom: 10px; }

.ach-fin { display: flex; align-items: center; gap: 14px; background: var(--ach-ok); color: #fff; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.ach-fin > div { display: flex; flex-direction: column; gap: 2px; }
.ach-fin strong { font-size: 18px; }
.ach-fin-icone { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ach-ok); font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ach-supprimer { margin-top: 26px; text-align: right; }
.ach-supprimer button { margin: 0; padding: 7px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }

@media (max-width: 860px) {
  .ach-deux, .ach-documents { grid-template-columns: 1fr; }
  .ach-etapes { grid-template-columns: 1fr; gap: 10px; }
  .ach-etape { flex-direction: row; text-align: left; padding: 0; }
  .ach-etape::before { display: none; }
  .ach-banniere { flex-wrap: wrap; }
  form.ach-filtre, form.ach-filtre select { width: 100%; min-width: 0; }
}

/* ---------- Logo AEP (menu, barre mobile, onglet) ---------- */
.logo-barre { gap: 0; }
.logo-barre .logo-image { height: 84px; width: auto; display: block; }
.logo-barre .logo-carre { display: none; width: 44px; height: 32px; background: transparent; overflow: hidden; }
.logo-barre .logo-carre img { height: 32px; width: auto; }
.barre-reduite .logo-barre .logo-image { display: none; }
.barre-reduite .logo-barre .logo-carre { display: inline-flex; }
.logo-mobile { gap: 8px; }
.logo-mobile img { height: 30px; width: auto; display: block; }

/* ---------- Page de connexion ---------- */
body.page-connexion { background: #f3f5f8; }
.cx-main { padding: 0; }
.cx { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.cx-presentation {
  position: relative; overflow: hidden; color: #fff; padding: 56px 64px 32px;
  display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(circle at 85% 10%, rgba(47, 109, 181, .55), transparent 55%),
              linear-gradient(160deg, #1f3a5f 0%, #152a46 100%);
}
.cx-presentation::after { content: ""; position: absolute; right: -160px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; border: 2px solid rgba(255,255,255,.08); }
.cx-logo-blanc { width: 230px; height: auto; margin-bottom: 26px; }
.cx-presentation h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: -.01em; }
.cx-presentation > p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 460px; margin: 0 0 28px; }
.cx-atouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 470px; }
.cx-atouts li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.45; }
.cx-atouts .icone { width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; flex-shrink: 0; }
.cx-atouts strong { display: block; color: #fff; font-size: 15px; }
.cx-pied { margin-top: auto !important; padding-top: 36px; font-size: 12px !important; color: rgba(255,255,255,.5) !important; }

.cx-formulaire { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.cx-carte { width: 100%; max-width: 410px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 34px 34px 28px; box-shadow: 0 18px 50px rgba(27, 36, 48, .08); }
.cx-logo { display: none; width: 130px; margin: 0 auto 10px; }
.cx-carte h2 { font-size: 24px; color: var(--navy); margin: 0 0 4px; }
.cx-carte .muted { margin: 0 0 20px; }
.cx-carte .alert-erreur { margin: 0 0 16px; }
.cx-form label { color: var(--ink); font-weight: 600; margin-bottom: 14px; }
.cx-form input { padding: 11px 12px; border-radius: 8px; font-size: 15px; margin-top: 6px; transition: border-color .15s, box-shadow .15s; }
.cx-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px #e3edf9; }
button.cx-bouton { width: 100%; padding: 12px; font-size: 15px; font-weight: 600; border-radius: 8px; margin-top: 6px; }
button.cx-bouton:hover { background: var(--navy); }
.cx-demo-titre { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--grey); margin: 24px 0 12px; text-transform: uppercase; letter-spacing: .05em; }
.cx-demo-titre::before, .cx-demo-titre::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cx-demo .demo-ligne button[type="submit"] { margin: 0; border-radius: 8px; padding: 10px 6px; font-weight: 600; }

@media (max-width: 900px) {
  .cx { grid-template-columns: 1fr; min-height: auto; }
  .cx-presentation { display: none; }
  .cx-formulaire { min-height: 100vh; padding: 24px 16px; }
  .cx-logo { display: block; }
  .cx-carte { padding: 26px 22px 22px; text-align: left; }
}
.barre-tete:has(.logo-barre) { padding-top: 12px; padding-bottom: 6px; }

/* Données lues sur les documents d'achat */
.ach-lues { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.ach-lues summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 14px; background: #fbfcfd; }
.ach-lues summary .ach-lien-fichier { margin-left: auto; }
.ach-lues[open] summary { border-bottom: 1px solid var(--line); }
.ach-lues .ach-table-boite { padding: 0 6px; }
.ach-texte { background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px; padding: 16px; font-size: 12px; line-height: 1.45; overflow-x: auto; white-space: pre; max-height: 75vh; }

.ach-alerte-lecture { margin: 4px 0 6px; font-size: 12px; color: var(--ach-verif); background: var(--ach-verif-fond); border-radius: 6px; padding: 4px 8px; }

/* =====================================================================================
   Stock relie au planning et aux affaires : prendre / rapporter depuis une tache,
   historique du stock, rentabilite d'une affaire
   ===================================================================================== */

/* --- Mon planning : le materiel de chaque tache --- */
.tm-intro { margin: -6px 0 14px; }
.tm-materiel { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; }
.tm-pris { display: flex; flex-direction: column; gap: 6px; }
.tm-pris-titre { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); }
.tm-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tm-puce { display: inline-flex; align-items: center; gap: 6px; background: var(--light); border-radius: 20px; padding: 3px 10px 3px 3px; font-size: 13px; }
.tm-puce-materiel { background: #eef4fb; }
.tm-puce-photo { width: 24px; height: 24px; border-radius: 50%; }
.tm-puce-photo .st-photo-vide { font-size: 13px; }
.tm-boutons { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.tm-bouton { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; }
.tm-bouton-prendre { background: var(--navy); color: #fff; }
.tm-bouton-prendre:hover { background: var(--blue); }
.tm-bouton-rapporter { background: #fff; color: var(--green); border: 2px solid var(--green); }
.tm-bouton-rapporter:hover { background: #e9f5f0; }

/* --- Prendre / rapporter : la tache choisie dans le planning --- */
.mt-tache-choisie { display: flex; align-items: flex-start; gap: 12px; border-left: 4px solid var(--navy); }
.mt-tache-texte { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.mt-tache-texte .muted { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.mt-tache-texte strong { font-size: 17px; color: var(--navy); }
.mt-tache-affaire { color: var(--blue); font-size: 14px; }
.mt-astuce { margin: 10px 0 0 40px; font-size: 13px; }
.mt-astuce a { color: var(--blue); }
.mt-lien-historique { float: right; font-size: 13px; font-weight: 400; margin: 4px 0 0; }
.rt-intro { margin: -8px 0 16px; }
.rt-bureau { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0 40px; }
.rt-bureau label { font-size: 13px; color: var(--grey); margin: 0; }
.rt-bureau select, .rt-bureau input { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: #fff; }
.rt-aide { margin: 10px 0 0; }
.rt-scan { background: var(--green); }
.rt-ligne { transition: background .2s; border-radius: 10px; }
.rt-ligne-active { background: #f2faf6; }
.rt-mien { font-size: 12px; color: var(--blue); font-weight: 600; }
@media (max-width: 600px) { .rt-bureau { grid-template-columns: 1fr; margin-left: 0; } .mt-astuce { margin-left: 0; } }

/* --- Historique du stock --- */
.hs-page { max-width: 980px; }
.hs-tete, .af-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.hs-tete .btn, .af-tete .btn { margin-bottom: 0; }
.hs-tete { margin-bottom: 14px; }
.hs-periodes { display: inline-flex; background: var(--light); border-radius: 10px; padding: 3px; }
.hs-periode { padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--grey); text-decoration: none; }
.hs-periode.actif { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(27, 36, 48, .1); }
.hs-stats .stat-valeur { font-size: 20px; }
.hs-jour { margin-bottom: 14px; }
.hs-jour-titre { font-size: 13px; text-transform: capitalize; color: var(--grey); margin: 0 0 6px 4px; font-weight: 600; }
.hs-liste { list-style: none; margin: 0; padding: 4px 16px; }
.hs-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--light); }
.hs-ligne:last-child { border-bottom: none; }
.hs-heure { width: 46px; flex-shrink: 0; font-size: 13px; color: var(--grey); font-variant-numeric: tabular-nums; }
.hs-type { flex-shrink: 0; width: 112px; text-align: center; border-radius: 20px; padding: 3px 8px; font-size: 12px; font-weight: 600; }
.hs-type-prise { background: #fff3e8; color: #a85a1a; }
.hs-type-retour { background: #e9f5f0; color: #1e6b52; }
.hs-type-emprunt { background: #e8f0fa; color: var(--blue); }
.hs-type-rendu { background: #eef2f7; color: var(--navy); }
.hs-type-entree { background: #f1effa; color: #5b3fa6; }
.hs-type-correction { background: #fdeceb; color: #a5321f; }
.hs-quoi { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.hs-quoi .muted { font-size: 13px; }
.hs-qui { font-size: 13px; color: var(--ink); }
.hs-qte { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-qte small { font-size: 12px; font-weight: 400; color: var(--grey); }
.hs-qte-moins { color: #a85a1a; }
.hs-qte-plus { color: #1e6b52; }
@media (max-width: 640px) {
  .hs-ligne { flex-wrap: wrap; gap: 6px 10px; }
  .hs-type { width: auto; }
  .hs-quoi { flex-basis: calc(100% - 60px); order: 5; }
  .hs-qte { margin-left: auto; }
}

/* --- Affaire : rentabilite --- */
.af-sous-titre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -8px; }
.af-etat { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; border-radius: 12px; padding: 10px 16px; min-width: 150px; border: 1px solid; }
.af-etat strong { font-size: 24px; line-height: 1.1; }
.af-etat span:last-child { font-size: 12px; opacity: .8; }
.af-etat-libelle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.af-etat-rentable { background: #e9f5f0; border-color: #b9dccd; color: #1e6b52; }
.af-etat-fragile { background: #fff6ec; border-color: #f0d3a6; color: #a85a1a; }
.af-etat-non_rentable { background: #fdeceb; border-color: #f1bdb6; color: #a5321f; }
.af-etat-sans_prix { background: var(--light); border-color: var(--line); color: var(--grey); }
.af-section { scroll-margin-top: 80px; }
.af-section-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.af-section-tete .btn-lien { margin-right: 0; }
.af-stats { margin-top: 4px; }
.af-barre { margin-top: 8px; }
.af-stat-marge.af-stat-rentable { border-color: #b9dccd; background: #f5fbf8; }
.af-stat-marge.af-stat-rentable .stat-valeur { color: #1e6b52; }
.af-stat-marge.af-stat-fragile { border-color: #f0d3a6; background: #fffaf3; }
.af-stat-marge.af-stat-fragile .stat-valeur { color: #a85a1a; }
.af-stat-marge.af-stat-non_rentable { border-color: #f1bdb6; background: #fff7f6; }
.af-stat-marge.af-stat-non_rentable .stat-valeur { color: #a5321f; }
.af-grille { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
.af-grille > .card { margin-bottom: 20px; }
.af-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-petit { font-size: 12px; }
.af-couts th { font-weight: 600; }
.af-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 8px; }
.af-couts tfoot th { padding-top: 10px; }
.af-ligne-marge th { font-size: 16px; }
.af-marge-positive { color: #1e6b52; }
.af-marge-negative { color: #a5321f; }
.af-alertes { margin: 14px 0 0; padding: 10px 14px 10px 30px; background: #fffaf3; border: 1px solid #f0d3a6; border-radius: 8px; font-size: 13px; color: #8a4b14; }
.af-alertes li + li { margin-top: 4px; }
.af-graphique-zone { position: relative; height: 260px; }
.af-validation { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-left: 4px solid var(--orange); }
.af-validation-ok { border-left-color: var(--green); }
.af-validation-texte { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.af-modifie { color: #a85a1a; font-size: 13px; font-weight: 600; }
.af-validation-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.af-validation-form input { width: 240px; margin: 0; }
.af-validation-form button { margin: 0; white-space: nowrap; }
.af-historique-validations { margin: -10px 0 20px; font-size: 13px; color: var(--grey); }
.af-historique-validations summary { cursor: pointer; color: var(--blue); }
.af-historique-validations ul { margin: 6px 0 0; }
.af-tableau { overflow-x: auto; }
.af-article { display: flex; align-items: center; gap: 10px; }
.af-article a { color: var(--ink); font-weight: 600; text-decoration: none; }
.af-article a:hover { color: var(--blue); }
.af-sous-titre-section { font-size: 14px; color: var(--navy); margin: 16px 0 6px; }
.af-emprunts { margin: 0; padding-left: 18px; font-size: 14px; }
.af-emprunts li { margin: 4px 0; display: flex; gap: 6px; align-items: center; }
.af-equipe { list-style: none; margin: 0 0 10px; padding: 0; }
.af-equipe li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--light); }
.af-equipe-nom { display: flex; flex-direction: column; width: 150px; font-size: 14px; }
.af-equipe-barre { flex: 1; height: 8px; background: var(--light); border-radius: 4px; overflow: hidden; }
.af-equipe-barre span { display: block; height: 100%; background: var(--orange); border-radius: 4px; }
.af-mouvements { padding: 0; }
.af-taches li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 980px) { .af-grille { grid-template-columns: 1fr; } }

/* --- Liste des affaires : la rentabilite sur chaque carte --- */
.af-cartes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.af-carte { border-top: 4px solid var(--line); transition: box-shadow .15s, transform .15s; }
.af-carte:hover { box-shadow: 0 6px 18px rgba(27, 36, 48, .08); transform: translateY(-1px); }
.af-carte-rentable { border-top-color: var(--green); }
.af-carte-fragile { border-top-color: var(--orange); }
.af-carte-non_rentable { border-top-color: #d2462f; }
.af-carte-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.af-carte-chiffres > span { display: flex; flex-direction: column; font-size: 14px; }
.af-carte-chiffres .muted { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.af-carte-barre { height: 6px; background: var(--light); border-radius: 4px; overflow: hidden; margin: 10px 0 6px; }
.af-carte-barre span { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.af-carte-non_rentable .af-carte-barre span { background: #d2462f; }
.af-carte-fragile .af-carte-barre span { background: var(--orange); }
.af-carte-etat { font-size: 12px; font-weight: 700; }
.af-etat-texte-rentable { color: #1e6b52; }
.af-etat-texte-fragile { color: #a85a1a; }
.af-etat-texte-non_rentable { color: #a5321f; }
.af-etat-texte-sans_prix { color: var(--grey); }
.card-affaire-head { gap: 10px; align-items: flex-start; }
.card-affaire-head .badge { white-space: nowrap; flex-shrink: 0; }

/* ---------- Paramètres (admin) : clé API de l'IA, consommation, compte ---------- */
.par-section { font-size: 18px; color: var(--navy); margin: 26px 0 12px; scroll-margin-top: 80px; }
.par-section:first-of-type { margin-top: 6px; }
.par-jauge { height: 6px; background: var(--light); border-radius: 4px; overflow: hidden; margin: 6px 0 4px; }
.par-jauge span { display: block; height: 100%; border-radius: 4px; }
.par-vert { background: var(--green); }
.par-orange { background: var(--orange); }
.par-rouge { background: #c63636; }
.par-infos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.par-infos dt { color: var(--grey); }
.par-infos dd { margin: 0; overflow-wrap: anywhere; }
.par-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.par-actions form { margin: 0; }
.par-historique { margin-top: 14px; }
.par-modes { margin-bottom: 18px; }
.par-modes-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.par-mode { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 14px 42px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.par-mode:hover { border-color: var(--blue); }
.par-mode input { position: absolute; left: 14px; top: 16px; margin: 0; width: 18px; height: 18px; accent-color: var(--blue); }
.par-mode:has(input:checked) { border-color: var(--blue); background: #eef4fb; }
.par-mode-titre { font-weight: 600; color: var(--navy); }
.par-mode-titre em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--green); background: #e5f3ee; padding: 2px 7px; border-radius: 10px; margin-left: 4px; }
.par-mode-texte { font-size: 13px; color: var(--grey); line-height: 1.45; }
@media (max-width: 900px) { .par-modes-choix { grid-template-columns: 1fr; } }
.texte-ok { color: #12805a; font-weight: 600; }
@media (max-width: 640px) {
  .par-infos { grid-template-columns: 1fr; gap: 2px; }
  .par-infos dd { margin-bottom: 8px; }
}

/* ---------- Stock : cartes plus compactes, vue en liste, actions modifier / supprimer ---------- */
.st-grille { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.st-carte { border-radius: 10px; }
.st-carte-lien { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.st-carte .st-photo { aspect-ratio: auto; height: 108px; background-color: #f3f5f8; }
.st-carte .st-photo img { object-fit: contain; padding: 6px; }
.st-carte .st-photo-vide { font-size: 26px; }
.st-carte-corps { gap: 2px; padding: 8px 10px 6px; }
.st-carte .st-nom { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-carte .st-info { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-carte .st-quantite-ligne { margin-top: 2px; font-size: 12px; }
.st-carte .st-quantite { font-size: 20px; }
.st-carte .st-type-coin { top: 6px; left: 6px; font-size: 10px; padding: 1px 7px; }
.st-carte-actions { display: flex; border-top: 1px solid var(--line); }
.st-carte-actions > *, .st-carte-actions .st-action-form { flex: 1; }
.st-action-form { margin: 0; display: flex; }
.st-action, button.st-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 6px 4px; font-size: 12px; font-weight: 600; color: var(--grey); background: #fff; border: none; border-radius: 0; text-decoration: none; cursor: pointer; }
.st-carte-actions > a.st-action { border-right: 1px solid var(--line); }
.st-action:hover { color: var(--blue); background: #f5f8fc; }
button.st-action-danger:hover { color: #a5321f; background: #fdf3f1; }
.st-carte-actions .btn-mini { flex: 1; margin: 4px; }
.st-vues { display: flex; justify-content: flex-end; gap: 6px; margin: -4px 0 10px; }
.st-vue { font-size: 13px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--grey); text-decoration: none; background: #fff; }
.st-vue-active { color: #fff; background: var(--navy); border-color: var(--navy); }
.st-liste-boite { padding: 0; overflow-x: auto; }
.st-liste { margin: 0; font-size: 13.5px; }
.st-liste td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.st-liste .st-photo-mini { width: 40px; height: 40px; }
.st-liste .st-photo-mini img { object-fit: contain; }
.st-liste-nom { font-weight: 600; color: var(--ink); text-decoration: none; display: block; }
.st-liste-nom:hover { color: var(--blue); }
.st-type-texte { font-size: 11px; color: var(--grey); }
.st-type-texte.st-type-materiel { color: #3b4fa0; }
.st-num { text-align: right; white-space: nowrap; }
.st-ligne-alerte td:first-child { box-shadow: inset 3px 0 0 #e8a28f; }
.st-liste-actions { white-space: nowrap; text-align: right; }
.st-liste-actions .st-action, .st-liste-actions .st-action-form { display: inline-flex; flex: none; }
.st-liste-actions .st-action { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; margin-left: 4px; }
@media (max-width: 640px) {
  .st-grille { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .st-carte .st-photo { height: 92px; }
  .st-liste th:nth-child(3), .st-liste td:nth-child(3), .st-liste th:nth-child(5), .st-liste td:nth-child(5) { display: none; }
}
.st-action, button.st-action { white-space: nowrap; line-height: 1.2; width: auto; min-width: 0; }

/* ---------- Fenêtre de confirmation commune (remplace confirm / alert du navigateur) ---------- */
.cf { border: none; border-radius: 14px; padding: 0; width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(27, 36, 48, .28); color: var(--ink); animation: cf-entree .16s ease-out; }
.cf::backdrop { background: rgba(27, 36, 48, .42); backdrop-filter: blur(2px); animation: cf-fondu .16s ease-out; }
.cf.cf-sortie { animation: cf-sortie .12s ease-in forwards; }
.cf-corps { display: flex; gap: 14px; padding: 22px 22px 16px; align-items: flex-start; }
.cf-icone { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fdecec; color: #c63636; }
.cf-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf[data-type="attention"] .cf-icone { background: #fdf0e3; color: #c56a14; }
.cf[data-type="info"] .cf-icone { background: #eaf2fc; color: var(--blue); }
.cf[data-type="succes"] .cf-icone { background: #e6f6ef; color: #12805a; }
.cf-textes { min-width: 0; }
.cf-titre { margin: 2px 0 6px; font-size: 17px; line-height: 1.3; color: var(--navy); }
.cf-message { margin: 0; font-size: 14px; line-height: 1.5; color: var(--grey); overflow-wrap: anywhere; }
.cf-boutons { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px 18px; }
.cf-boutons button { margin: 0; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.cf-annuler { background: #fff; color: var(--ink); border-color: var(--line) !important; }
.cf-annuler:hover { background: var(--light); }
.cf-ok { background: #c63636; color: #fff; }
.cf-ok:hover { background: #a92b2b; }
.cf[data-type="attention"] .cf-ok { background: #c56a14; }
.cf[data-type="attention"] .cf-ok:hover { background: #a85a0f; }
.cf[data-type="info"] .cf-ok, .cf[data-type="succes"] .cf-ok { background: var(--blue); }
.cf[data-type="info"] .cf-ok:hover, .cf[data-type="succes"] .cf-ok:hover { background: var(--navy); }
.cf-boutons button:focus-visible { outline: 3px solid rgba(47, 109, 181, .35); outline-offset: 2px; }
@keyframes cf-entree { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cf-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-sortie { to { opacity: 0; transform: translateY(4px) scale(.98); } }
@media (max-width: 480px) {
  .cf-boutons { flex-direction: column-reverse; }
  .cf-boutons button { width: 100%; padding: 12px; }
}

/* Icones du site (a la place des emojis) : taille du texte, couleur du texte */
.ic { width: 1.1em; height: 1.1em; vertical-align: -0.2em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-plein { fill: currentColor; stroke: none; }
.st-photo-vide .ic { width: 1em; height: 1em; stroke-width: 1.6; }

/* Boutons et liens avec une icone : alignement propre */
.tdb-bouton, .lien-agenda, .profil-bouton, .profil-action, .pt-zone, .puce-filtre, .pastille-filtre, .st-action, .st-vue { display: inline-flex; align-items: center; gap: 6px; }
button .ic { margin-right: 2px; }
.btn-fermer .ic, .mt-retirer .ic, .camera-fermer .ic { width: 20px; height: 20px; margin: 0; }
.mt-ok-rond .ic { width: 34px; height: 34px; stroke-width: 2.5; }
.ach-fin-icone .ic, .ach-banniere-icone .ic { width: 60%; height: 60%; stroke-width: 2.6; }
.ag-tache-titre .ic { width: 11px; height: 11px; vertical-align: -1px; }
.ag-legende .ic { width: 12px; height: 12px; }
.sal-justif { color: var(--blue); display: inline-flex; }

/* =====================================================================================
   Messages du site (formulaire de contact de la page d'accueil) : espace de l'assistante
   ===================================================================================== */
.ms-tete { margin-bottom: 14px; }
.ms-tete a { color: var(--blue); }
.ms-barre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ms-onglets { display: inline-flex; background: var(--light); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.ms-onglets a { padding: 7px 14px; border-radius: 8px; font-size: 14px; color: var(--grey); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.ms-onglets a.actif { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(27, 36, 48, .1); }
.ms-nombre { font-size: 12px; background: rgba(91, 101, 115, .12); border-radius: 10px; padding: 0 7px; font-weight: 600; }
.ms-onglets a.actif .ms-nombre { background: var(--blue); color: #fff; }
.ms-recherche { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; color: var(--grey); width: min(340px, 100%); }
.ms-recherche input { border: none; outline: none; padding: 9px 0; font-size: 14px; width: 100%; margin: 0; background: transparent; }
.ms-vide { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 44px 20px; }
.ms-vide-icone { width: 54px; height: 54px; border-radius: 50%; background: var(--blue-clair, #e8f0fa); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.ms-vide-icone .ic { width: 26px; height: 26px; }
.ms-liste { display: flex; flex-direction: column; gap: 10px; }
.ms-message { padding: 0; margin: 0; overflow: hidden; border-left: 4px solid var(--line); }
.ms-message.ms-nouveau { border-left-color: var(--blue); }
.ms-message.ms-en_cours { border-left-color: var(--orange); }
.ms-message.ms-traite { border-left-color: var(--green); opacity: .85; }
.ms-message summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.ms-message summary::-webkit-details-marker { display: none; }
.ms-message summary:hover { background: #fafbfc; }
.ms-message[open] summary { border-bottom: 1px solid var(--light); }
.ms-avatar { width: 42px; height: 42px; border-radius: 50%; background: #e8f0fa; color: var(--navy); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.ms-nouveau .ms-avatar { background: var(--blue); color: #fff; }
.ms-resume { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-ligne-1 { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ms-nouveau .ms-ligne-1 strong::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-left: 8px; vertical-align: 2px; }
.ms-apercu { font-size: 14px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ms-date { font-size: 12px; }
.ms-sujet { font-size: 12px; font-weight: 600; color: var(--navy); background: var(--light); border-radius: 20px; padding: 2px 10px; }
.ms-sujet-devis { background: #e8f0fa; color: var(--blue); }
.ms-sujet-depannage { background: #fff3e8; color: #a85a1a; }
.ms-statut { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ms-statut-nouveau { color: var(--blue); }
.ms-statut-en_cours { color: #a85a1a; }
.ms-statut-traite { color: #1e6b52; }
.ms-corps { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; padding: 18px; }
.ms-texte p { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.6; }
.ms-cote { display: flex; flex-direction: column; gap: 14px; background: #fafbfc; border: 1px solid var(--light); border-radius: 10px; padding: 14px; }
.ms-coordonnees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ms-coordonnees li { display: flex; gap: 8px; align-items: center; }
.ms-coordonnees .ic { color: var(--grey); }
.ms-coordonnees a { color: var(--blue); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ms-note label { margin-bottom: 6px; }
.ms-note textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 14px; resize: vertical; }
.ms-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-actions form { margin: 0; }
.ms-actions button { margin: 0; display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 760px) {
  .ms-corps { grid-template-columns: 1fr; }
  .ms-message summary { flex-wrap: wrap; }
  .ms-meta { flex-direction: row; align-items: center; flex-wrap: wrap; width: 100%; padding-left: 56px; }
}
.cx-retour-site { color: #fff; font-weight: 600; text-decoration: none; } .cx-retour-site:hover { text-decoration: underline; }