/* Intranet MaxoPièces — charte : bleu marine et jaune du logo, typographie arrondie.
   Mise en page : en-tête blanc avec le logo, barre d'onglets marine soulignée de jaune,
   une colonne de travail de 1120 px. */
:root {
  --marine: #1A2E73;
  --marine-fonce: #121F52;
  --marine-clair: #3A55A8;
  --jaune: #F5C94C;
  --jaune-fonce: #D9A520;
  --jaune-pale: #FDF4D8;
  --noir: #0D1226;
  --texte: #1B2240;
  --gris: #5C6585;
  --trait: #E3E6F0;
  --fond: #F6F7FB;
  --surface: #FFFFFF;
  --surface-2: #E9ECF5;
  --ok: #1D7F52; --ok-pale: #DFF2E8;
  --attention: #A2650B; --attention-pale: #FCEFD6;
  --critique: #BC2F2A; --critique-pale: #FBE3E1;
  --info: #1A2E73; --info-pale: #E3E8F7;
  --f-titre: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-texte: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rayon: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
body { background: var(--fond); color: var(--texte); font-family: var(--f-texte); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-titre); margin: 0; color: var(--noir); text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
img { max-width: 100%; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 8px 18px; font-family: var(--f-titre); font-weight: 700; font-size: 14px; cursor: pointer; color: var(--marine); white-space: nowrap; }
.btn:hover { border-color: var(--marine); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.jaune { background: var(--jaune); border-color: var(--jaune); color: var(--marine-fonce); }
.btn.jaune:hover:not(:disabled) { background: var(--jaune-fonce); border-color: var(--jaune-fonce); }
.btn.bleu { background: var(--marine); border-color: var(--marine); color: #fff; }
.btn.bleu:hover:not(:disabled) { background: var(--marine-fonce); }
.btn.petit { padding: 4px 12px; font-size: 13px; }
.btn.large { width: 100%; padding: 12px 18px; font-size: 15px; }
.btn.danger { color: var(--critique); }
.btn.danger.arme { background: var(--critique); border-color: var(--critique); color: #fff; }
.lien { background: none; border: 0; padding: 0; color: var(--marine); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; }

/* ---------- champs ---------- */
.champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; border: 0; margin: 0; padding: 0; }
.champ label, .champ legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); padding: 0; }
.champ input:not([type=checkbox]), .champ select, .champ textarea { width: 100%; background: var(--surface); border: 1.5px solid var(--trait); border-radius: 8px; padding: 9px 11px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--marine); outline: none; box-shadow: 0 0 0 3px var(--jaune-pale); }
.champ textarea { min-height: 96px; resize: vertical; }
.champ.plein { grid-column: 1 / -1; }
.champ.bas { justify-content: flex-end; }
.case { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; text-transform: none !important; letter-spacing: 0 !important; color: var(--texte) !important; font-weight: 600 !important; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--marine); }
.cases { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 4px; }
.erreur { margin: 0; background: var(--critique-pale); color: var(--critique); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.aide { margin: 0; color: var(--gris); font-size: 14px; }

/* ---------- écran de connexion ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.auth-marque { background: linear-gradient(180deg, #023A6C, #05457B); display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 100vh; }
.auth-marque img { display: block; width: 100%; height: 100vh; object-fit: contain; }
.auth-zone { background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth-carte { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.auth-logo { width: 220px; height: auto; align-self: flex-start; }
.auth-carte form { display: flex; flex-direction: column; gap: 14px; }
.auth-carte h1 { font-size: 28px; font-weight: 700; }
@media (max-width: 760px) {
  .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-marque { min-height: 0; }
  .auth-marque img { height: 210px; object-fit: cover; object-position: 50% 42%; }
}

/* ---------- en-tête ---------- */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); box-shadow: 0 1px 0 var(--trait); }
.entete-in { max-width: 1120px; margin: 0 auto; padding-inline: 16px; padding-block: 8px; display: flex; align-items: center; gap: 16px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marque img { width: 110px; height: auto; display: block; }
.marque span { font-family: var(--f-titre); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--marine); border-left: 2px solid var(--jaune); padding-left: 12px; }
.profil { display: flex; align-items: center; gap: 10px; }
.profil-texte { display: flex; flex-direction: column; line-height: 1.2; text-align: right; margin-right: 4px; }
.profil-texte b { font-family: var(--f-titre); font-weight: 700; color: var(--noir); }
.profil-texte span { font-size: 12px; color: var(--gris); }
.onglets { background: var(--marine); }
.onglets-in { max-width: 1120px; margin: 0 auto; padding-inline: 16px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.onglet { background: none; border: 0; border-bottom: 4px solid transparent; color: #C9D1F0; padding: 11px 14px 9px; font-family: var(--f-titre); font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.onglet:hover { color: #fff; }
.onglet[aria-current="page"] { color: #fff; border-bottom-color: var(--jaune); }
.nb:empty { display: none; }
.nb { background: var(--jaune); color: var(--marine-fonce); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .profil-texte { display: none; } .marque img { width: 92px; } .marque span { display: none; } .entete-in { gap: 8px; } .profil { gap: 6px; } }

/* ---------- contenu ---------- */
main { max-width: 1120px; margin: 0 auto; padding-inline: 16px; padding-block: 24px 72px; }
.vue { display: flex; flex-direction: column; gap: 18px; }
.vue-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vue-tete h1 { font-size: 32px; font-weight: 700; }
.vue-tete p { margin: 2px 0 0; color: var(--gris); max-width: 62ch; }
.bandeau-erreur { background: var(--critique-pale); color: var(--critique); border-radius: var(--rayon); padding: 10px 14px; margin: 0 0 16px; font-weight: 600; }

.bienvenue { background: var(--marine) linear-gradient(112deg, transparent 0 74%, var(--jaune) 74% 75.5%, transparent 75.5% 78%, #6F84C9 78% 78.8%, transparent 78.8%); color: #fff; border-radius: 14px; padding: 26px 28px; }
.bienvenue h1 { color: #fff; font-size: clamp(26px, 4vw, 36px); font-weight: 700; }
.bienvenue p { margin: 4px 0 0; color: #C9D1F0; }

.synthese { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.colonne { background: var(--surface); border-radius: var(--rayon); border: 1px solid var(--trait); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.col-tete { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 8px; }
.col-tete h2 { font-size: 17px; font-weight: 700; color: var(--marine); }
.chiffre { font-family: var(--f-titre); font-size: 30px; font-weight: 700; line-height: 1; color: var(--marine); font-variant-numeric: tabular-nums; }
.mini { padding: 11px 16px; border-top: 1px solid var(--trait); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mini:first-child { border-top: 0; }
.mini b { font-weight: 700; overflow-wrap: anywhere; }
.col-pied { padding: 11px 16px; border-top: 1px solid var(--trait); background: var(--fond); }

/* ---------- formulaires en panneau ---------- */
.panneau { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 22px 24px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.panneau.etroit { max-width: 520px; }
.panneau-titre { grid-column: 1 / -1; font-size: 19px; font-weight: 700; color: var(--marine); }
.actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) { .panneau { grid-template-columns: minmax(0, 1fr); } }

.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre { border: 1.5px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 4px 13px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--gris); }
.filtre[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }

/* ---------- listes ---------- */
.liste { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.element { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; border-top: 1px solid var(--trait); }
.element:first-child { border-top: 0; }
.bande { background: var(--trait); }
.bande.critique { background: var(--critique); } .bande.attention { background: var(--attention); } .bande.ok { background: var(--ok); } .bande.info { background: var(--marine); } .bande.jaune { background: var(--jaune); }
.corps { padding: 14px 18px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ligne-titre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ligne-titre h3 { font-size: 18px; font-weight: 700; }
.ref { font-family: var(--f-titre); font-weight: 700; font-size: 13px; color: var(--marine); background: var(--jaune-pale); border-radius: 5px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 78ch; }
.meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--gris); }
.cote { padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cote select { border: 1.5px solid var(--trait); border-radius: 8px; padding: 4px 8px; font-size: 13px; background: var(--surface); max-width: 190px; }
@media (max-width: 640px) { .element { grid-template-columns: 5px minmax(0, 1fr); } .cote { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; padding-top: 0; } }

.pastille { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.pastille.critique { background: var(--critique-pale); color: var(--critique); }
.pastille.attention { background: var(--attention-pale); color: var(--attention); }
.pastille.ok { background: var(--ok-pale); color: var(--ok); }
.pastille.info { background: var(--info-pale); color: var(--info); }
.pastille.neutre { background: var(--surface-2); color: var(--gris); }
.pastille.jaune { background: var(--jaune); color: var(--marine-fonce); }

.code-promo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; background: var(--jaune-pale); border: 1.5px dashed var(--jaune-fonce); color: var(--marine-fonce); border-radius: 6px; padding: 2px 9px; font-size: 13px; cursor: pointer; }
.remise { font-family: var(--f-titre); font-size: 28px; font-weight: 700; color: var(--marine); line-height: 1; background: var(--jaune); border-radius: 8px; padding: 6px 10px; }

/* suivi des tickets */
.suivi { border-top: 1px dashed var(--trait); margin-top: 6px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.message { background: var(--fond); border-radius: 8px; padding: 8px 12px; max-width: 78ch; }
.message.moi { background: var(--jaune-pale); }
.message.systeme { background: none; padding: 0 2px; font-size: 13px; color: var(--gris); font-style: italic; }
.message .meta { font-size: 12px; }
.message p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.repondre { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.repondre textarea { flex: 1 1 260px; min-height: 60px; border: 1.5px solid var(--trait); border-radius: 8px; padding: 8px 10px; resize: vertical; }

.vide { padding: 30px 20px; text-align: center; color: var(--gris); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.vide strong { color: var(--noir); font-family: var(--f-titre); font-weight: 700; }

/* ---------- tableaux (comptes, droits) ---------- */
.tableau-defile { overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); padding: 10px 14px; background: var(--fond); border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 10px 14px; border-top: 1px solid var(--trait); vertical-align: middle; }
.tableau tr.inactif td { color: var(--gris); }
.tableau .boutons { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; min-width: 260px; }
.tableau td:first-child, .tableau .boutons .btn { white-space: nowrap; }
.matrice th:not(:first-child), .matrice td:not(:first-child) { text-align: center; }
.matrice td:first-child { min-width: 260px; }
.matrice tr.rubrique td { background: var(--jaune-pale); font-family: var(--f-titre); font-weight: 700; color: var(--marine); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.matrice input { width: 20px; height: 20px; accent-color: var(--marine); cursor: pointer; }

.encadre { background: var(--jaune-pale); border: 2px solid var(--jaune); border-radius: var(--rayon); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.encadre p { margin: 0; }
.mdp-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mdp-ligne code { font-size: 20px; font-weight: 700; background: var(--surface); border-radius: 6px; padding: 4px 12px; letter-spacing: .05em; user-select: all; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--marine-fonce); color: #fff; border-left: 5px solid var(--jaune); padding: 11px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; z-index: 30; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(13,18,38,.25); }

@keyframes apparition { from { opacity: .4; transform: translateY(4px); } }

/* ---------- images ---------- */
.etiquette { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.zone-images { display: flex; flex-direction: column; gap: 10px; border: 1.5px dashed var(--trait); border-radius: 8px; padding: 10px 12px; background: var(--fond); }
.zone-images.survol { border-color: var(--marine); background: var(--jaune-pale); }
.zone-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aide-images { font-size: 13px; color: var(--gris); }
.cache-fichier { display: none; }
.vignettes { display: flex; gap: 8px; flex-wrap: wrap; }
.vignettes:empty { display: none; }
.vignette { position: relative; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--trait); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--gris); }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette .retirer { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--marine-fonce); color: #fff; font-weight: 700; cursor: pointer; line-height: 1; }
.galerie { display: flex; gap: 8px; flex-wrap: wrap; }
.galerie button { padding: 0; border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; width: 120px; height: 90px; }
.galerie button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie.grande button { width: min(260px, 100%); height: auto; aspect-ratio: 4 / 3; max-width: 100%; }
.message .galerie { margin-top: 6px; }
.message .galerie button { width: 96px; height: 72px; }
.visionneuse { position: fixed; inset: 0; z-index: 40; background: rgba(13, 18, 38, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; cursor: zoom-out; }
.visionneuse img { max-width: 100%; max-height: calc(100% - 70px); border-radius: 8px; background: #fff; }
.concernes { font-size: 13px; font-weight: 700; color: var(--marine); background: var(--jaune-pale); border-radius: 5px; padding: 2px 8px; }
.repondre-bloc { display: flex; flex-direction: column; gap: 8px; }
.champ input:disabled { opacity: .45; background: var(--surface-2); cursor: not-allowed; }

/* ---------- clients ---------- */
.boutons-tete { display: flex; gap: 8px; flex-wrap: wrap; }
.aide.plein, .encadre.plein { grid-column: 1 / -1; }
.barre-outils { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.barre-outils .champ input, .barre-outils .champ select { width: 100%; background: var(--surface); border: 1.5px solid var(--trait); border-radius: 8px; padding: 9px 11px; }
@media (max-width: 760px) { .barre-outils { grid-template-columns: minmax(0, 1fr); } }
.ligne-client { cursor: pointer; }
.ligne-client:hover .corps h3 { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.titre-bouton { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.chiffre-client { font-family: var(--f-titre); font-weight: 700; color: var(--marine); font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; }
.chiffre-client small { display: block; font-family: var(--f-texte); font-weight: 600; font-size: 11px; color: var(--gris); }
.fiche { border-top: 1px dashed var(--trait); margin-top: 8px; padding-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; cursor: default; }
@media (max-width: 760px) { .fiche { grid-template-columns: minmax(0, 1fr); } }
.fiche h4 { margin: 0 0 6px; font-family: var(--f-titre); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--marine); }
.fiche .bloc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fiche .plein { grid-column: 1 / -1; }
.infos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 14px; margin: 0; }
.infos dt { color: var(--gris); font-weight: 600; }
.infos dd { margin: 0; overflow-wrap: anywhere; }
.infos a { color: var(--marine); font-weight: 700; }
.table-chiffres { border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.table-chiffres td { padding: 3px 14px 3px 0; }
.table-chiffres td:last-child { text-align: right; font-weight: 700; }
.positif { color: var(--ok); } .negatif { color: var(--critique); }
.form-visite { background: var(--jaune-pale); border-radius: 10px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.form-visite .plein { grid-column: 1 / -1; }
.form-visite textarea, .form-visite input, .form-visite select { width: 100%; background: var(--surface); border: 1.5px solid var(--trait); border-radius: 8px; padding: 8px 10px; }
.form-visite textarea { min-height: 90px; resize: vertical; }
@media (max-width: 640px) { .form-visite { grid-template-columns: minmax(0, 1fr); } }
.visite { border-left: 3px solid var(--jaune); padding: 6px 0 6px 12px; display: flex; flex-direction: column; gap: 3px; }
.visite p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.visite .prochaine { font-size: 13px; font-weight: 700; color: var(--marine); }

/* ---------- dictée ---------- */
.dictee svg { flex: none; }
.dictee.ecoute { background: var(--critique); border-color: var(--critique); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .dictee.ecoute { animation: ecoute 1.4s ease-in-out infinite; } }
@keyframes ecoute { 50% { box-shadow: 0 0 0 6px var(--critique-pale); } }
.ligne-etiquette { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ligne-dictee { display: flex; justify-content: flex-end; }
.repondre .dictee { align-self: flex-end; }

/* ---------- bandeau d'alerte ---------- */
.bandeau-alerte { background: var(--critique); color: #fff; padding: 10px 16px; display: flex; gap: 10px; align-items: baseline; justify-content: center; flex-wrap: wrap; font-weight: 700; text-align: center; font-size: 15px; }
.bandeau-alerte b { background: #fff; color: var(--critique); border-radius: 4px; padding: 1px 8px; font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.bandeau-alerte .alerte-texte { white-space: pre-wrap; }
.bandeau-alerte .alerte-fin { font-weight: 600; opacity: .9; }
.panneau-alerte { border-top-color: var(--critique); }
.panneau-alerte .ligne-titre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grille-alerte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .grille-alerte { grid-template-columns: minmax(0, 1fr); } }
.btn.rouge { background: var(--critique); border-color: var(--critique); color: #fff; }

/* ---------- planning ---------- */
.barre-mois { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.barre-mois h2 { font-size: 22px; font-weight: 700; color: var(--marine); min-width: 180px; text-align: center; }
.sous-titre { font-size: 22px; font-weight: 700; margin-top: 10px; }
.planning-defile { max-height: 70vh; }
.planning { border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.planning th, .planning td { border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); padding: 0; height: 30px; }
.planning thead th { position: sticky; top: 0; background: var(--fond); z-index: 2; font-weight: 700; color: var(--gris); text-align: center; min-width: 30px; line-height: 1.15; padding: 4px 2px; }
.planning thead th small { display: block; font-weight: 600; font-size: 10px; text-transform: uppercase; }
.planning .nom { position: sticky; left: 0; background: var(--surface); z-index: 1; text-align: left; padding: 0 12px; white-space: nowrap; font-weight: 700; font-size: 13px; color: var(--texte); min-width: 170px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.planning thead .nom { z-index: 3; background: var(--fond); }
.planning tr.moi .nom { color: var(--marine); background: var(--jaune-pale); }
.planning .we { background: var(--surface-2); }
.planning thead th.auj { background: var(--marine); color: #fff; }
.planning td.auj { box-shadow: inset 2px 0 0 var(--marine), inset -2px 0 0 var(--marine); }
.cel { position: relative; }
.t-conges { --c: var(--jaune); } .t-rtt { --c: #E9963A; } .t-deplacement { --c: var(--marine-clair); }
.t-formation { --c: var(--ok); } .t-absence { --c: #8E97B8; } .t-autre { --c: #C3C9DD; }
.cel.journee { background: var(--c); }
.cel.matin { background: linear-gradient(90deg, var(--c) 50%, transparent 50%); }
.cel.apresmidi { background: linear-gradient(90deg, transparent 50%, var(--c) 50%); }
.cel.attente::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.65) 0 3px, transparent 3px 7px); }
.legende { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--gris); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 18px; height: 14px; border-radius: 3px; display: inline-block; position: relative; }
.legende i.journee { background: var(--c); }
.a-valider { border: 2px solid var(--jaune); border-radius: var(--rayon); background: var(--surface); }
.a-valider > h2 { font-size: 17px; font-weight: 700; color: var(--marine); padding: 12px 16px 0; }
.motif { border: 1.5px solid var(--trait); border-radius: 8px; padding: 4px 8px; font-size: 13px; max-width: 200px; }
.cel .lieu { position: relative; z-index: 1; display: block; text-align: center; font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .02em; }
@media (max-width: 640px) { .planning .nom { min-width: 110px; max-width: 130px; padding: 0 8px; font-size: 12px; } }
.t-sans_solde { --c: #C9645F; } .t-plage { --c: #8E6CC7; }
.visas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.visa { font-size: 12px; font-weight: 600; border-radius: 5px; padding: 2px 8px; }
.visa.oui { background: var(--ok-pale); color: var(--ok); }
.visa.non { background: var(--critique-pale); color: var(--critique); }
.visa.attendu { background: var(--surface-2); color: var(--gris); }
.cote .boutons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cote .etiquette { margin-top: 2px; }
.a-valider-corps { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- impression de la demande d'absence ---------- */
#impression { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body.en-impression > *:not(#impression) { display: none !important; }
  body.en-impression { background: #fff; }
  body.en-impression #impression { display: block; }
}
.imp-page { font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.imp-entete { display: flex; align-items: flex-end; gap: 30px; }
.imp-logo { width: 150px; height: auto; }
.imp-ident { flex: 1; display: flex; justify-content: space-between; gap: 20px; font-size: 15px; border-bottom: 1px solid #000; padding-bottom: 4px; }
.imp-date-demande { font-size: 15px; }
.imp-titre { background: #222; color: #fff; text-align: center; font-weight: 700; font-size: 18px; padding: 5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.imp-types { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px; font-size: 15px; border: 1px solid #000; padding: 8px 12px; }
.imp-case { display: inline-flex; align-items: center; gap: 8px; }
.imp-carre { width: 14px; height: 14px; border: 1.5px solid #000; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; }
.imp-ligne { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.imp-dates { border: 1px solid #000; padding: 12px; display: flex; flex-direction: column; justify-content: space-around; gap: 18px; font-size: 16px; }
.imp-droite { display: flex; flex-direction: column; gap: 10px; }
.imp-recup, .imp-obs { border: 1px solid #000; padding: 8px 10px; min-height: 50px; font-size: 14px; }
.imp-obs { min-height: 70px; }
.imp-visas { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid #000; }
.imp-visa + .imp-visa { border-left: 1px solid #000; }
.imp-visa-titre { background: #222; color: #fff; font-weight: 700; padding: 4px 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.imp-visa-corps { padding: 8px; min-height: 80px; display: flex; flex-direction: column; gap: 6px; }
.imp-cases { display: flex; gap: 24px; }
.imp-signe { font-style: italic; }
.imp-petit { font-size: 11px; }
.imp-admin { border: 1px solid #000; padding: 6px 10px; font-size: 14px; }
.imp-nota { font-size: 11px; font-style: italic; margin: 0; }
.imp-pied { font-size: 10px; color: #555; margin: 0; text-align: right; }

/* ---------- droits d'une personne ---------- */
.droits-perso { display: flex; flex-direction: column; gap: 16px; }
.dp-rubrique { display: flex; flex-direction: column; gap: 6px; }
.dp-rubrique h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--marine); font-weight: 700; }
.dp-ligne { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.dp-ligne:hover { background: var(--fond); }
.dp-ligne .pastille { flex: none; }
.dp-ligne input { width: 18px; height: 18px; accent-color: var(--marine); flex: none; }
.dp-ligne span:first-of-type { flex: 1; min-width: 0; }



/* ---------- paramètres et journal ---------- */
.sous-onglets { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--trait); padding-bottom: 8px; }
.sous-onglets button { border: 0; background: none; font-family: var(--f-titre); font-weight: 700; font-size: 15px; color: var(--gris); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.sous-onglets button:hover { color: var(--marine); background: var(--surface-2); }
.sous-onglets button[aria-current="page"] { background: var(--marine); color: #fff; }
#btn-parametres[aria-current="page"] { background: var(--marine); border-color: var(--marine); color: #fff; }
.barre-journal { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .barre-journal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.journal td { vertical-align: top; }
.journal td.date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--gris); font-size: 13px; }
.journal .petit-gris { display: block; font-size: 12px; color: var(--gris); }
.journal tr.important td:first-child { box-shadow: inset 4px 0 0 var(--attention); }
.journal tr.echec td:first-child { box-shadow: inset 4px 0 0 var(--critique); }
.journal .action { font-weight: 700; }
.comparaison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.comparaison.seul { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .comparaison { grid-template-columns: minmax(0, 1fr); } }
.copie { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--surface); min-width: 0; }
.copie h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; padding: 8px 12px; margin: 0; background: var(--fond); color: var(--marine); font-weight: 700; }
.copie.avant h3 { background: var(--critique-pale); color: var(--critique); }
.copie.apres h3 { background: var(--ok-pale); color: var(--ok); }
.copie dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 10px 12px; font-size: 14px; }
.copie dt { color: var(--gris); font-weight: 600; }
.copie dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.copie .change { background: var(--jaune-pale); border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
.copie .galerie { margin-top: 2px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; margin-bottom: 12px; }
.detail-meta b { font-weight: 700; }
#jo-detail-corps { grid-column: 1 / -1; min-width: 0; }

/* ---------- installation discrète (écran de connexion) ---------- */
.auth-logo { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.installer-auth { display: flex; flex-direction: column; gap: 14px; }
.installer-auth h1 { font-size: 28px; font-weight: 700; }
.aide-details { font-size: 14px; color: var(--gris); }
.aide-details summary { cursor: pointer; font-weight: 700; color: var(--marine); }
.aide-details ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- lien vers l'espace Livraisons ---------- */
a.btn { text-decoration: none; }
a.onglet { text-decoration: none; }

/* ---------- bandeaux : version de test, mode test, rubrique désactivée ---------- */
.bandeau-test, .bandeau-coupe { padding: 8px 16px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-weight: 700; text-align: center; font-size: 14px; }
.bandeau-test { background: #6B3FA0; color: #fff; }
.bandeau-test.mode { background: var(--jaune); color: var(--marine-fonce); }
.bandeau-test b { background: #fff; color: #6B3FA0; border-radius: 4px; padding: 1px 8px; font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.bandeau-test.mode b { color: var(--marine-fonce); }
.bandeau-coupe { background: var(--attention-pale); color: var(--attention); border-bottom: 1px solid var(--trait); }
.m-rubrique .corps { gap: 8px; }
.m-message { border: 1.5px solid var(--trait); border-radius: 8px; padding: 7px 10px; width: 100%; max-width: 560px; }
.m-rubrique.coupee { background: var(--critique-pale); }
.m-historique { background: var(--fond); border-radius: 8px; padding: 10px 12px; font-size: 12px; white-space: pre-wrap; overflow-x: auto; margin: 8px 0 0; }
.aide-details summary { cursor: pointer; font-weight: 700; color: var(--marine); }

/* ---------- accueil : bandeau des informations ---------- */
.bande-infos, .bande-tickets { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.bande-tete { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 18px; }
.bande-tete h2 { font-size: 17px; font-weight: 700; color: var(--marine); }
.bande-tete .lien, .bande-tete .btn { margin-left: auto; }
.bi-position { font-size: 13px; font-weight: 700; color: var(--gris); font-variant-numeric: tabular-nums; }
.bi-corps { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: stretch; min-height: 118px; }
.bi-fleche { border: 0; background: var(--fond); color: var(--marine); font-size: 34px; font-weight: 700; line-height: 1; cursor: pointer; font-family: var(--f-titre); }
.bi-fleche:hover:not(:disabled) { background: var(--jaune-pale); }
.bi-fleche:disabled { color: var(--trait); cursor: default; }
.bi-info { padding: 14px 20px; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; border-left: 5px solid var(--trait); }
.bi-info.critique { border-left-color: var(--critique); } .bi-info.attention { border-left-color: var(--attention); } .bi-info.info { border-left-color: var(--marine); }
.bi-info h3 { font-size: 19px; font-weight: 700; }
.bi-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 90ch; }
.bi-vide { margin: 0; color: var(--gris); font-weight: 600; }
.bi-points { display: flex; justify-content: center; gap: 6px; padding: 0 0 10px; }
.bi-points:empty { display: none; }
.bi-point { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: var(--trait); cursor: pointer; }
.bi-point.actif { background: var(--marine); }
@media (prefers-reduced-motion: no-preference) { .bi-info > * { animation: apparition .25s ease-out; } }
@media (max-width: 640px) { .bi-corps { grid-template-columns: 38px minmax(0, 1fr) 38px; } .bi-fleche { font-size: 28px; } .bi-info { padding: 12px 14px; } }

/* ---------- accueil : bandeau des tickets ---------- */
.bt-compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bt-compteur { border: 0; border-right: 1px solid var(--trait); background: var(--surface); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.bt-compteur:last-child { border-right: 0; }
.bt-compteur:hover { background: var(--fond); }
.bt-nombre { font-family: var(--f-titre); font-weight: 700; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.bt-libelle { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.bt-compteur.nouveau .bt-nombre { color: var(--critique); }
.bt-compteur.encours .bt-nombre { color: var(--attention); }
.bt-compteur.resolu .bt-nombre { color: var(--ok); }
.bt-form { border-top: 1px dashed var(--trait); padding: 16px 18px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; background: var(--jaune-pale); }
@media (max-width: 640px) { .bt-form { grid-template-columns: minmax(0, 1fr); } .bt-nombre { font-size: 28px; } }
.bt-delai { margin: 0; padding: 10px 18px; border-top: 1px solid var(--trait); background: var(--fond); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.bt-delai b { color: var(--marine); font-family: var(--f-titre); font-weight: 700; font-size: 16px; }
.bt-delai small { color: var(--gris); font-size: 12px; }
.bt-file { color: var(--attention); font-weight: 700; }
.bt-file.ok { color: var(--ok); }
.bt-absent { flex-basis: 100%; color: var(--critique); font-weight: 700; }
.gt-titre { font-size: 15px; font-weight: 700; color: var(--marine); margin-top: 6px; }
.gt-corr { border: 1.5px solid var(--trait); border-radius: 8px; padding: 5px 8px; max-width: 280px; }
#f-geotab .encadre, #f-geotab .erreur { margin: 0 0 6px; }
.cases-col { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }

/* ---------- proposition d'activer les notifications ---------- */
.notifs-fond { position: fixed; inset: 0; z-index: 60; background: rgba(13, 18, 38, .55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
@media (min-width: 640px) { .notifs-fond { align-items: center; } }
.notifs-boite { background: var(--surface); border-radius: 16px; border-top: 6px solid var(--jaune); max-width: 420px; width: 100%; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.notifs-cloche { font-size: 40px; line-height: 1; }
.notifs-boite h2 { font-size: 21px; font-weight: 700; color: var(--marine); }
.notifs-boite p { margin: 0; color: var(--texte); }
.notifs-erreur { color: var(--critique) !important; font-weight: 600; font-size: 14px; }
.notifs-boutons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Cloche 🔔 : notifications reçues ---------- */
.cloche-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; padding: 0; }
.cloche-btn:hover { border-color: var(--marine); }
.cloche-btn[aria-expanded="true"] { border-color: var(--marine); box-shadow: 0 0 0 2px var(--jaune-pale); }
.cloche-compte { position: absolute; top: -6px; right: -8px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--critique); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid var(--surface); box-sizing: content-box; }
#ancre-cloche { display: none; }
.cloche-panneau { position: absolute; z-index: 55; width: 380px; max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; box-shadow: 0 12px 40px rgba(13, 18, 38, .28); overflow: hidden; }
@media (max-width: 640px) { .cloche-panneau { position: fixed; left: 8px; right: 8px; top: 8px; width: auto; max-height: calc(100vh - 16px); } }
.cloche-tete { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--trait); }
.cloche-tete b { font-family: var(--f-titre); font-weight: 700; color: var(--marine); font-size: 17px; }
.cloche-fermer { font-size: 18px; padding: 4px 8px; }
.cloche-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.cloche-vide { padding: 22px 16px; color: var(--gris); text-align: center; }
.cloche-item { display: flex; align-items: flex-start; border-bottom: 1px solid var(--trait); }
.cloche-item.non-lue { background: var(--jaune-pale); }
.cloche-item.urgente .cloche-lien b { color: var(--critique); }
.cloche-lien { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 6px 10px 14px; color: var(--texte); text-decoration: none; min-width: 0; }
a.cloche-lien:hover b { text-decoration: underline; }
.cloche-lien b { color: var(--marine); font-weight: 700; }
.cloche-msg { font-size: 14px; overflow-wrap: anywhere; }
.cloche-date { font-size: 12px; color: var(--gris); }
.cloche-suppr { background: none; border: 0; color: var(--gris); cursor: pointer; padding: 10px 12px; font-size: 14px; }
.cloche-suppr:hover { color: var(--critique); }
.cloche-pied { padding: 8px 14px; text-align: right; border-top: 1px solid var(--trait); }

/* ---------- Demande de compte ---------- */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demande-lien { margin: 0; color: var(--gris); }
#f-demande textarea { resize: vertical; }
#f-demande-ok { display: flex; flex-direction: column; gap: 14px; }
.demandes { border-left: 5px solid var(--jaune); }
.demandes-liste { display: flex; flex-direction: column; gap: 12px; }
.demande { border: 1px solid var(--trait); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--fond); }
.demande-tete input { font-weight: 700; font-size: 17px; color: var(--marine); border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; margin-left: -6px; background: transparent; width: 100%; max-width: 360px; }
.demande-tete input:hover, .demande-tete input:focus { border-color: var(--trait); background: var(--surface); }
.demande-tete .aide { margin: 2px 0 0; }
.demande-message { margin: 6px 0 0; font-style: italic; }
.demande .boutons { justify-content: flex-end; }

/* ---------- Nouveautés ---------- */
.nb.nouveau { background: var(--critique); color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.nouveautes { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.nouveaute { display: block; }
.nouveaute.recente { border-top: 5px solid var(--jaune); }
.nouveaute-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.nouveaute .panneau-titre { margin-bottom: 8px; }
.nouveaute-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Menu du compte ---------- */
.menu-compte { position: relative; }
.moi-btn { position: relative; display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 10px 3px 3px; cursor: pointer; font: inherit; color: inherit; }
.moi-btn:hover, .moi-btn[aria-expanded="true"] { border-color: var(--trait); background: var(--fond); }
.moi-initiales { width: 34px; height: 34px; border-radius: 50%; background: var(--marine); color: #fff; font-family: var(--f-titre); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.moi-btn .profil-texte { text-align: left; margin: 0; }
.moi-fleche { color: var(--gris); font-size: 12px; }
.moi-point { position: absolute; top: 1px; left: 27px; width: 10px; height: 10px; border-radius: 50%; background: var(--critique); border: 2px solid var(--surface); }
.menu-moi { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 230px; background: var(--surface); border-radius: 12px; box-shadow: 0 12px 36px rgba(13, 18, 38, .22); border: 1px solid var(--trait); padding: 6px; display: flex; flex-direction: column; }
.menu-moi[hidden] { display: none; }
.menu-moi button, .menu-moi a { background: none; text-decoration: none; border: 0; text-align: left; padding: 10px 12px; border-radius: 8px; font: inherit; font-weight: 700; color: var(--texte); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-moi button[hidden] { display: none; }
.menu-moi .menu-jaune { background: var(--jaune); color: var(--marine-fonce); margin-bottom: 4px; }
.menu-moi button:hover, .menu-moi button:focus-visible, .menu-moi a:hover, .menu-moi a:focus-visible { background: var(--fond); color: var(--marine); outline: none; }
.menu-moi button[aria-current="page"] { color: var(--marine); background: var(--jaune-pale); }
.menu-moi hr { border: 0; border-top: 1px solid var(--trait); margin: 4px 0; }
.menu-moi .menu-sortie { color: var(--critique); }
@media (max-width: 640px) { .moi-fleche { display: none; } .moi-btn { padding: 3px; } }

/* ---------- Feuilles d'heures ---------- */
#v-heures .vue-tete { margin-bottom: 4px; }
.hr-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.hr-select { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gris); }
.hr-select select { border: 1.5px solid var(--trait); border-radius: 8px; padding: 6px 10px; background: var(--surface); font: inherit; color: var(--texte); font-weight: 600; }
.hr-mois { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; flex: 1; min-width: 0; }
.hr-onglet { position: relative; border: 1.5px solid var(--trait); background: var(--surface); border-radius: 8px; padding: 6px 10px 6px 10px; font: inherit; font-size: 13px; font-weight: 700; color: var(--gris); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.hr-onglet[aria-selected="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }
.hr-point { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.hr-onglet.st-valide .hr-point { background: var(--ok); }
.hr-onglet.st-envoye .hr-point { background: var(--attention); }
.hr-onglet.st-a_corriger .hr-point { background: var(--critique); }
.hr-etat { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--surface); margin-bottom: 10px; }
.hr-etat.ok { background: var(--ok-pale); border-color: transparent; }
.hr-etat.attention { background: var(--attention-pale); border-color: transparent; }
.hr-etat.critique { background: var(--critique-pale); border-color: transparent; }
.hr-etat .boutons { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hr-renvoi { display: inline-flex; gap: 6px; align-items: center; }
.hr-motif { border: 1.5px solid var(--trait); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 13px; min-width: 200px; }
.hr-outils { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.hr-outils .case { color: var(--gris); }
#hr-reglages { margin-bottom: 10px; }

.hr-grille-cadre { max-height: 70vh; overflow: auto; }
.hr-grille { border-collapse: separate; border-spacing: 0; font-size: 13px; width: 100%; }
.hr-grille th, .hr-grille td { border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); padding: 0; text-align: center; white-space: nowrap; }
.hr-grille thead th { position: sticky; background: var(--fond); color: var(--gris); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 6px 6px; z-index: 2; }
.hr-grille thead tr:first-child th { top: 0; }
.hr-grille thead tr:nth-child(2) th { top: 27px; }
.hr-grille thead th.grp { color: var(--marine); }
.hr-grille tfoot th { position: sticky; bottom: 0; background: var(--fond); padding: 7px 6px; font-weight: 700; color: var(--marine); z-index: 2; }
.hr-grille .fige { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding: 0 8px; min-width: 76px; font-weight: 600; }
.hr-grille .fige2 { position: sticky; left: 76px; z-index: 1; background: var(--surface); padding: 0 6px; color: var(--gris); min-width: 28px; }
.hr-grille thead .fige, .hr-grille thead .fige2, .hr-grille tfoot .fige { z-index: 3; background: var(--fond); }
.hr-grille td.total { background: #FFF6BF; font-weight: 700; padding: 0 8px; min-width: 52px; text-align: right; }
.hr-grille tfoot .total { background: #FFEFA0; }
.hr-c { width: 100%; min-width: 50px; border: 0; background: transparent; text-align: right; padding: 7px 8px; font: inherit; font-variant-numeric: tabular-nums; }
.hr-c:focus, .hr-com:focus { outline: 2px solid var(--marine); outline-offset: -2px; background: #fff; }
.hr-c.auto { color: var(--info); font-style: italic; }
.hr-c.enreg { background: var(--jaune-pale); }
.hr-c.erreur { background: var(--critique-pale); }
.hr-c:disabled, .hr-com:disabled { color: var(--texte); cursor: default; }
.hr-grille td.com { min-width: 150px; }
.hr-com { width: 100%; border: 0; background: transparent; padding: 7px 8px; font: inherit; }
.hr-com::placeholder { color: var(--attention); font-style: italic; }
.hr-grille td.c-cp { background: #E6F2FF; } .hr-grille td.c-hs { background: #EEEEFF; } .hr-grille td.c-at { background: #FFFFE0; }
.hr-grille td.c-maladie, .hr-grille td.c-autre, .hr-grille td.c-retH { background: #EEFFEE; } .hr-grille td.c-rtt { background: #EAFFFF; }
.hr-grille tr.samedi td { border-bottom-color: #c9cfdf; }
.hr-grille tr.dimanche td, .hr-grille tr.dimanche .fige, .hr-grille tr.dimanche .fige2 { background: #E2E4EA; color: var(--gris); }
.hr-grille tr.ferie .fige::after { content: " · férié"; color: var(--attention); font-size: 11px; font-weight: 700; }
.hr-grille tr.aujourdhui .fige { box-shadow: inset 4px 0 0 var(--jaune); }
.hr-grille .opt { display: none; }
.hr-grille.toutes .opt { display: table-cell; }
.hr-grille .abs-court { display: none; }

.hr-recaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.hr-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.hr-carte h3 { font-size: 15px; font-weight: 700; color: var(--marine); margin: 0 0 6px; }
.hr-ligne { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 3px 0; border-bottom: 1px dashed var(--trait); }
.hr-ligne b { font-variant-numeric: tabular-nums; font-weight: 700; }
.hr-ligne.fort { border-bottom: 0; margin-top: 4px; font-weight: 700; color: var(--marine); }
.hr-ligne.fort b { font-size: 17px; font-weight: 700; }
.hr-ligne.jaune b { background: #FFF6BF; padding: 0 6px; border-radius: 4px; }
.hr-supp { align-items: center; }
.hr-supp input { width: 80px; text-align: right; border: 1.5px solid var(--trait); border-radius: 6px; padding: 3px 6px; font: inherit; }
.hr-carte textarea { width: 100%; border: 1.5px solid var(--trait); border-radius: 8px; padding: 8px 10px; font: inherit; resize: vertical; }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .hr-grille .fige { min-width: 64px; padding: 0 6px; }
  .hr-grille .fige2 { left: 64px; }
  .hr-c { min-width: 44px; padding: 8px 6px; }
  .hr-etat .boutons, .hr-renvoi { width: 100%; }
  .hr-motif { flex: 1; min-width: 0; }
}
.hr-alerte { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--attention); background: var(--attention-pale); border-radius: 6px; padding: 6px 8px; }
#t-heures-equipe th { white-space: normal; }
#t-heures-equipe .boutons { min-width: 0; }
#t-heures-equipe td, #t-heures-equipe th { padding-inline: 10px; }
@media (max-width: 760px) { .hr-mois { flex-basis: 100%; } }

/* Encart rouge : feuille d'heures à envoyer */
.encart-heures { display: flex; gap: 16px; align-items: flex-start; background: var(--critique); color: #fff; border-radius: var(--rayon); padding: 18px 20px; box-shadow: 0 6px 20px rgba(200, 30, 30, .25); }
.encart-heures[hidden] { display: none; }
.encart-icone { font-size: 34px; line-height: 1; }
.encart-corps { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.encart-ligne { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.encart-ligne strong { font-family: var(--f-titre); font-size: 20px; font-weight: 700; display: block; }
.encart-ligne p { margin: 2px 0 0; opacity: .95; }
.encart-ligne .btn { background: #fff; color: var(--critique); border-color: #fff; font-weight: 700; }
@media (max-width: 640px) { .encart-heures { padding: 14px; gap: 10px; } .encart-icone { font-size: 26px; } .encart-ligne strong { font-size: 17px; } .encart-ligne .btn { width: 100%; } }
.hr-import-btn { margin-left: auto; }
.hr-import { margin-bottom: 12px; }
#t-import-groupe select { border: 1.5px solid var(--trait); border-radius: 8px; padding: 5px 8px; font: inherit; max-width: 220px; }
#t-import-groupe td { padding: 8px 10px; }
.hr-import { display: flex; flex-direction: column; }
.hr-import .tableau-defile { width: 100%; }
#t-import-groupe td:nth-child(3) { white-space: nowrap; color: var(--gris); font-size: 13px; }
.erp-sous-titre { font-size: 15px; font-weight: 700; color: var(--marine); margin: 8px 0 0; border-top: 1px solid var(--trait); padding-top: 12px; }
.erp-apercu { max-height: 360px; overflow: auto; margin-top: 8px; }
.erp-apercu .tableau td, .erp-apercu .tableau th { padding: 6px 10px; white-space: nowrap; font-size: 12.5px; }
.erp-brut { max-height: 300px; overflow: auto; background: var(--fond); border: 1px solid var(--trait); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
#f-erp > .plein, #f-erp > h3 { grid-column: 1 / -1; }
#p-erp-copie > .plein { grid-column: 1 / -1; }
.ec-ajout { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 8px 0; }
#t-erp-copie td { vertical-align: top; }
#t-erp-copie .boutons { min-width: 0; }
#t-erp-copie .boutons { flex-direction: column; align-items: stretch; }
#t-erp-copie th { white-space: normal; }
#t-erp-copie td:nth-child(3) { min-width: 90px; }
#t-erp-copie td:first-child { white-space: normal; max-width: 340px; }
#t-erp-copie td:first-child .erreur { font-size: 12.5px; }

/* ---- 3.13 : Demandes (travaux, EPI), Procédures, Annuaire ---- */
.boutons-tete { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.epi-lignes { display: flex; flex-direction: column; gap: 8px; }
.epi-ligne { display: grid; grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr) auto 70px auto; gap: 8px; align-items: center; }
.epi-ligne select, .epi-ligne input { min-width: 0; border: 1.5px solid var(--trait); border-radius: 8px; padding: 8px 10px; font: inherit; background: var(--surface); }
.epi-ligne select[hidden] { display: block; visibility: hidden; }
.epi-x { color: var(--gris); }
.epi-articles { margin: 6px 0; padding-left: 18px; }
.epi-articles li { margin: 2px 0; }
.epi-articles .pastille { margin-left: 6px; }
.epi-note { min-width: 180px; border: 1.5px solid var(--trait); border-radius: 8px; padding: 6px 8px; font: inherit; }
.epi-note-aff { margin: 4px 0; padding: 6px 10px; border-left: 3px solid var(--jaune); background: var(--jaune-pale); border-radius: 4px; font-size: 14px; }
#t-epi-catalogue input, #t-epi-catalogue select { width: 100%; min-width: 90px; border: 1.5px solid var(--trait); border-radius: 6px; padding: 6px 8px; font: inherit; }
#t-epi-catalogue .boutons { display: flex; gap: 6px; flex-wrap: wrap; }
#t-epi-catalogue tr.inactif td { opacity: .55; }
@media (max-width: 640px) {
  .epi-ligne { grid-template-columns: minmax(0, 1fr) 70px auto; padding-bottom: 8px; border-bottom: 1px dashed var(--trait); }
  .epi-ligne .epi-art { grid-column: 1 / -1; }
  .epi-ligne .epi-x { display: none; }
}
/* Procédures */
.pc-barre, .an-barre { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.pc-barre input[type=search], .an-barre input[type=search], .an-barre select { border: 1.5px solid var(--trait); border-radius: 999px; padding: 9px 14px; font: inherit; background: var(--surface); }
.pc-barre input[type=search] { flex: 1 1 260px; }
.an-barre input[type=search] { flex: 1 1 240px; }
.pc-barre .filtres, .an-barre .filtres { margin: 0; }
.pc-theme { font-size: 17px; margin: 18px 0 8px; color: var(--marine); }
.pc-contenu { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--trait); }
.texte-riche { max-width: 80ch; line-height: 1.55; overflow-wrap: anywhere; }
.texte-riche h3 { font-size: 17px; margin: 14px 0 6px; color: var(--marine); }
.texte-riche h4 { font-size: 15px; margin: 12px 0 4px; }
.texte-riche p { margin: 6px 0; }
.texte-riche ul, .texte-riche ol { margin: 6px 0; padding-left: 22px; }
.texte-riche li { margin: 3px 0; }
.pc-docs { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 6px; }
.pc-doc-ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pc-doc { display: inline-flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--texte); text-decoration: none; max-width: 100%; }
.pc-doc:hover { border-color: var(--marine); }
.pc-doc > span:nth-child(2) { overflow-wrap: anywhere; font-weight: 600; }
.pc-doc-ext { flex: none; font-size: 11px; font-weight: 700; color: #fff; background: var(--marine); border-radius: 4px; padding: 2px 6px; }
.element.pc-ouverte .titre-bouton h3 { color: var(--marine); }
/* Annuaire */
.an-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.an-grille > .vide { grid-column: 1 / -1; }
.an-carte { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; min-width: 0; }
.an-tete { display: flex; gap: 12px; align-items: flex-start; }
.an-tete > div { min-width: 0; }
.an-tete b { display: block; overflow-wrap: anywhere; }
.an-av { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--marine); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.an-av.ext { background: var(--jaune); color: var(--noir); }
.an-coord { display: flex; flex-direction: column; gap: 4px; }
.an-lien { display: flex; gap: 8px; align-items: baseline; color: var(--texte); text-decoration: none; overflow-wrap: anywhere; font-size: 14px; }
a.an-lien { color: var(--marine); font-weight: 600; }
a.an-lien:hover { text-decoration: underline; }
.an-lib { flex: none; width: 92px; color: var(--gris); font-size: 12px; font-weight: 400; }
.an-notes { white-space: pre-wrap; margin: 4px 0 0; }
.an-modif, .an-actions { align-self: flex-start; margin-top: auto; }
.an-actions { display: flex; gap: 12px; align-items: center; }
@media (max-width: 640px) { .an-grille { grid-template-columns: minmax(0, 1fr); } .an-lien { padding: 4px 0; } }

/* ---- 3.13.1 : animations (désactivées si l'appareil demande moins d'animations) ---- */
@media (prefers-reduced-motion: no-preference) {
  .anim-entree { animation: entree .55s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
  @keyframes entree { from { opacity: 0; transform: translateY(16px) scale(.985); } }
  form.panneau:not([hidden]) { animation: deplier .3s cubic-bezier(.2, .75, .25, 1); transform-origin: top center; }
  @keyframes deplier { from { opacity: 0; transform: translateY(-8px) scale(.99); } }
  .toast:not([hidden]) { animation: toast-monte .35s cubic-bezier(.2, .8, .25, 1.15); }
  @keyframes toast-monte { from { opacity: 0; transform: translate(-50%, 18px); } }
  .nb:not(:empty) { animation: pastille-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes pastille-pop { from { transform: scale(.3); opacity: 0; } }
  .an-carte, .colonne, .bande-infos, .bande-tickets, .hr-carte { transition: transform .2s ease, box-shadow .2s ease; }
  .an-carte:hover, .colonne:hover, .hr-carte:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(13, 18, 38, .09); }
  .bt-compteur { transition: background .15s ease; }
  .bt-compteur .bt-nombre { transition: transform .2s ease; }
  .bt-compteur:hover .bt-nombre { transform: scale(1.08); }
  .element { transition: background .15s ease; }
  .sous-onglets button, .filtres button, .onglet { transition: background .2s ease, color .2s ease; }
  .btn { transition: transform .12s ease, filter .15s ease, background .15s ease; }
  .btn:active { transform: scale(.97); }
}

/* ---- 3.14 : tableau de bord informatique ---- */
.tb-barre { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tb-barre .filtres { margin: 0; }
#tb-historique .tb-barre { justify-content: flex-start; }
#tb-historique input[type=search], #tb-historique select { border: 1.5px solid var(--trait); border-radius: 999px; padding: 9px 14px; font: inherit; background: var(--surface); }
#th-recherche { flex: 1 1 280px; }
.tb-statuts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.tb-tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border-radius: var(--rayon); border: 1px solid var(--trait); border-top: 4px solid var(--gris); background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: var(--texte); min-width: 0; transition: transform .2s ease, box-shadow .2s ease; }
.tb-tuile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13, 18, 38, .08); }
.tb-tuile .tb-n { font-size: 32px; }
.tb-tuile .tb-l { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.tb-tuile .tb-a { font-size: 12px; color: var(--gris); }
.tb-tuile.critique { border-top-color: var(--critique); } .tb-tuile.critique .tb-n { color: var(--critique); }
.tb-tuile.attention { border-top-color: var(--attention); } .tb-tuile.attention .tb-n { color: var(--attention); }
.tb-tuile.neutre { border-top-color: var(--marine-clair); } .tb-tuile.neutre .tb-n { color: var(--marine); }
.tb-tuile.ok { border-top-color: var(--ok); } .tb-tuile.ok .tb-n { color: var(--ok); }
.tb-tuile.gris .tb-n { color: var(--gris); }
.tb-tuile.critique .tb-a { color: var(--critique); font-weight: 700; }
.tb-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.tb-kpi { padding: 14px 16px; border-left: 1px solid var(--trait); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-kpi:first-child { border-left: 0; }
.tb-kpi-l { font-size: 13px; font-weight: 700; color: var(--gris); }
.tb-kpi-v { font-family: var(--f-titre); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--marine); font-variant-numeric: tabular-nums; }
.tb-kpi-v.bt-nombre { font-size: 26px; }
.tb-kpi-p { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.tb-evol { font-weight: 700; font-size: 12px; }
.tb-evol.bien { color: var(--ok); } .tb-evol.mal { color: var(--critique); } .tb-evol.neutre { color: var(--gris); }
.tb-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tb-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px 18px; min-width: 0; margin-bottom: 12px; }
.tb-grille .tb-carte { margin-bottom: 0; }
.tb-carte.tb-large { grid-column: 1 / -1; }
.tb-carte h2 { font-size: 16px; margin: 0 0 4px; color: var(--marine); }
.tb-carte > .aide { margin: 0 0 10px; font-size: 12px; }
.tb-carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tb-legende { display: flex; gap: 14px; font-size: 13px; color: var(--texte); }
.tb-leg { display: inline-flex; align-items: center; gap: 6px; }
.tb-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tb-leg.crees i { background: #3A55A8; } .tb-leg.resolus i { background: #C9921A; }
#tb-courbe { width: 100%; overflow: hidden; }
.tb-svg { display: block; max-width: 100%; height: auto; }
.tb-grille-l { stroke: var(--trait); stroke-width: 1; }
.tb-grille-l.base { stroke: #C3C8DA; }
.tb-axe { font-size: 11px; fill: var(--gris); font-family: var(--f-texte); }
.tb-b.crees { fill: #3A55A8; } .tb-b.resolus { fill: #C9921A; }
.tb-hit { fill: transparent; }
.tb-grp:hover .tb-hit { fill: rgba(26, 46, 115, .05); }
.tb-ligne { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr) 34px auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.tb-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-piste { height: 10px; background: var(--fond); border-radius: 5px; overflow: hidden; }
.tb-remp { display: block; height: 100%; background: var(--marine-clair); border-radius: 5px; }
.tb-val { text-align: right; font-variant-numeric: tabular-nums; }
.tb-sec { font-size: 12px; color: var(--gris); min-width: 52px; text-align: right; white-space: nowrap; }
.tb-file td { vertical-align: middle; }
.tb-cliquable { cursor: pointer; }
.tb-cliquable:hover td, .tb-cliquable:focus td { background: var(--jaune-pale); }
.tb-objet { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-dem { white-space: nowrap; } .tb-dem .aide { display: block; font-size: 12px; }
.tb-cat { white-space: nowrap; }
.tb-age { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-age.ancien { color: var(--attention); } .tb-age.vieux { color: var(--critique); }
.tb-arch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.tb-arch input { width: 80px; border: 1.5px solid var(--trait); border-radius: 8px; padding: 6px 8px; font: inherit; }
.tb-date { white-space: nowrap; }
.tb-com { max-width: 380px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ref-lien { font-weight: 700; }
.tb-plus { text-align: center; margin-top: 10px; }
.statut-com { display: flex; flex-direction: column; gap: 6px; }
.statut-com textarea { border: 1.5px solid var(--trait); border-radius: 8px; padding: 6px 8px; font: inherit; min-width: 200px; }
.statut-com .boutons { display: flex; gap: 6px; }
.element.surligne { background: var(--jaune-pale); transition: background .6s ease; }
.meta .duree { color: var(--ok); font-weight: 600; }
@media (max-width: 1000px) { .tb-statuts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tb-kpi:nth-child(4) { border-left: 0; } .tb-kpi:nth-child(n+4) { border-top: 1px solid var(--trait); } }
@media (max-width: 760px) { .tb-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .tb-statuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-kpi { border-left: 0 !important; border-top: 1px solid var(--trait); } .tb-kpi:first-child, .tb-kpi:nth-child(2) { border-top: 0; } .tb-kpi:nth-child(even) { border-left: 1px solid var(--trait) !important; }
  .tb-ligne { grid-template-columns: minmax(80px, 34%) minmax(0, 1fr) 28px auto; gap: 8px; font-size: 13px; }
  .tb-carte { padding: 14px; }
  /* File d'attente en cartes sur téléphone */
  .tb-file thead { display: none; }
  .tb-file, .tb-file tbody { display: block; }
  .tb-file tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ref objet age" "dem dem dem" "prio statut statut"; gap: 4px 8px; padding: 10px 12px; border-top: 1px solid var(--trait); }
  .tb-file td { display: block; padding: 0; border: 0; }
  .tb-file td:nth-child(1) { grid-area: ref; } .tb-file td:nth-child(2) { grid-area: objet; white-space: normal; max-width: none; font-weight: 700; }
  .tb-file td:nth-child(3) { grid-area: dem; font-size: 13px; color: var(--gris); } .tb-file td:nth-child(3) .aide { display: inline; } .tb-file td:nth-child(3) .aide::before { content: " · "; }
  .tb-file td:nth-child(5) { grid-area: prio; } .tb-file td:nth-child(6) { grid-area: statut; }
  .tb-file td:nth-child(4), .tb-file td:nth-child(7) { display: none; }
  .tb-file td:nth-child(8) { grid-area: age; }
  .tb-carte .tableau-defile:has(.tb-file) { border: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .tb-anime .tb-remp { animation: tb-pousse .8s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(200ms + var(--i, 0) * 60ms); transform-origin: left center; }
  @keyframes tb-pousse { from { transform: scaleX(0); } }
  .tb-svg.anime .tb-b { animation: tb-monte .7s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(150ms + var(--i, 0) * 35ms); transform-box: fill-box; transform-origin: center bottom; }
  @keyframes tb-monte { from { transform: scaleY(0); } }
}


/* =====================================================================
   3.16 : direction artistique « Comptoir »
   Menu latéral blanc rangé par groupes (ordinateur), barre du bas + panneau « Tout » (téléphone),
   police Onest, cartes blanches aux coins arrondis, marine pour le texte et les éléments forts,
   jaune réservé aux actions principales et à la rubrique active du téléphone.
   ===================================================================== */
body { font-size: 15px; }
h1, h2, h3 { letter-spacing: -0.01em; }
.coquille { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--surface) 251px, var(--trait) 251px 252px, transparent 252px); }
.app-corps { min-width: 0; display: flex; flex-direction: column; }

/* ----- menu latéral ----- */
.nav-lat { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 0; padding: 20px 14px 18px; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; scrollbar-width: thin; }
.nav-haut { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.nav-logo img { width: 128px; height: auto; display: block; }
.nav-fermer { display: none; }
.nav-liste { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.nav-groupe { display: flex; flex-direction: column; gap: 2px; }
.nav-titre { font-size: 13px; font-weight: 600; color: #6B7392; padding: 0 12px 6px; }
.nav-bas { margin-top: auto; border-top: 1px solid var(--trait); padding-top: 14px; }
.nav-lat .onglet { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: none; color: #2B3354; font-family: var(--f-texte); font-weight: 500; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav-lat .onglet .nav-lib { flex: 1; min-width: 0; white-space: normal; line-height: 1.25; }
.nav-lat .onglet .ico { flex: none; color: #5C6585; }
.nav-lat .onglet .ico.ext { width: 14px; height: 14px; }
.nav-lat .onglet:hover { background: var(--fond); color: var(--marine); }
.nav-lat .onglet[aria-current="page"] { background: var(--marine); color: #fff; font-weight: 600; }
.nav-lat .onglet[aria-current="page"] .ico { color: #fff; }
.nav-lat .nb { font-size: 12px; padding: 1px 8px; }
.nav-lat .nb.nouveau { font-size: 10px; }
.nav-voile { display: none; }

/* ----- en-tête (cloche, compte) ----- */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(246, 247, 251, .92); backdrop-filter: blur(8px); box-shadow: none; }
.entete-in { max-width: none; padding: 12px 32px; justify-content: flex-end; }
.entete-in .marque { display: none; }
.profil { gap: 10px; }
.moi-btn { border-radius: 999px; }
.coquille main { max-width: 1140px; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 32px 64px; }
.vue { gap: 22px; }
.vue-tete h1 { font-size: 34px; letter-spacing: -0.02em; color: #121A3D; }
.vue-tete p { font-size: 16px; }

/* Sous-onglets des demandes : inutiles sur ordinateur (le menu les montre déjà) */
@media (min-width: 1000px) { #v-tickets > .sous-onglets, #v-itbord > .sous-onglets, #v-travaux > .sous-onglets, #v-epi > .sous-onglets { display: none; } }

/* ----- barre du bas (téléphone) ----- */
.barre-bas { display: none; }

/* ----- cartes et listes ----- */
.liste, .colonne, .panneau, .tb-carte, .an-carte, .hr-carte, .carte { border-radius: var(--rayon); border-color: var(--trait); }
.carte { background: var(--surface); border: 1px solid var(--trait); }
.element { grid-template-columns: 4px minmax(0, 1fr) auto; }
.corps { padding: 16px 20px; }
.btn { font-family: var(--f-texte); font-weight: 600; border-width: 1px; }
.btn.jaune { color: #121F52; }
.filtre { font-weight: 600; border-width: 1px; padding: 5px 14px; }
.panneau-titre { font-size: 20px; color: #121A3D; }
.pastille { font-weight: 600; }
input, select, textarea { border-radius: 10px; }

/* ----- accueil ----- */
.bienvenue { background: none; color: var(--texte); border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bienvenue h1 { color: #121A3D; font-size: clamp(30px, 4vw, 38px); letter-spacing: -0.02em; }
.bienvenue p { margin: 0; color: var(--gris); font-size: 17px; }
.acc-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.acc-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.acc-auj { padding: 24px 26px; }
.acc-auj h2 { font-size: 19px; color: #121A3D; margin-bottom: 16px; }
.fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fil-item { display: grid; grid-template-columns: 84px 16px minmax(0, 1fr); gap: 0 14px; position: relative; }
.fil-quand { font-size: 14px; font-weight: 600; color: var(--gris); padding-top: 10px; }
.fil-point { position: relative; display: flex; justify-content: center; }
.fil-point::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--marine); box-sizing: border-box; background: var(--surface); margin-top: 12px; position: relative; z-index: 1; }
.fil-point::after { content: ""; position: absolute; top: 12px; bottom: -12px; width: 2px; background: var(--trait); }
.fil-item:last-child .fil-point::after { display: none; }
.fil-item.rouge .fil-point::before { background: var(--critique); border-color: var(--critique); }
.fil-corps { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; padding: 8px 10px 14px; margin-left: -10px; border-radius: 12px; cursor: pointer; color: inherit; font: inherit; }
@media (hover: hover) { .fil-corps:hover { background: var(--fond); } }
.fil-corps b { font-size: 16px; font-weight: 600; color: #121A3D; }
.fil-corps span { font-size: 14px; color: var(--gris); }
.fil-vide { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.fil-vide span { color: var(--gris); font-size: 14px; }

/* Support informatique en carte marine */
.bande-tickets { background: var(--marine); border: 0; border-radius: var(--rayon); color: #fff; overflow: hidden; }
.bande-tickets .bande-tete { border: 0; padding: 20px 22px 6px; }
.bande-tickets .bande-tete h2 { color: #fff; font-size: 19px; }
.bande-tickets .bande-tete .aide { color: #C9D1F0; }
.bande-tickets .bt-compteurs { background: none; border: 0; gap: 0; padding: 4px 10px 6px; }
.bande-tickets .bt-compteur { background: none; border: 0; align-items: flex-start; padding: 10px 12px; border-radius: 12px; }
.bande-tickets .bt-compteur:hover { background: rgba(255, 255, 255, .08); }
.bande-tickets .bt-compteur .bt-nombre { color: #fff; font-size: 34px; }
.bande-tickets .bt-compteur.nouveau .bt-nombre { color: #FFB4AE; }
.bande-tickets .bt-libelle { color: #C9D1F0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }
.bande-tickets .bt-delai { background: none; color: #C9D1F0; border-top: 1px solid #34488F; margin: 0 22px; padding: 12px 0 18px; font-size: 14px; }
.bande-tickets .bt-delai b { color: #fff; }
.bande-tickets .bt-file { color: #C9D1F0; }
.bande-tickets .bt-file.ok { color: #9FE0BF; }
.bande-tickets .bt-form { background: var(--surface); color: var(--texte); margin: 0 12px 12px; border-radius: 12px; }

/* Informations */
.bande-infos { border-radius: var(--rayon); border: 1px solid var(--trait); }
.bande-infos .bande-tete { border-bottom: 0; padding: 20px 22px 4px; }
.bande-infos .bande-tete h2 { font-size: 19px; color: #121A3D; }

/* Colonnes du bas */
.synthese { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.colonne .col-tete h2 { color: #121A3D; font-size: 17px; }
.colonne .col-tete .lien { font-size: 14px; font-weight: 600; }
.colonne .mini { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; border-top: 0; }
.colonne .mini + .mini { border-top: 1px solid #EEF0F6; }
.colonne > div:last-child { padding-bottom: 10px; }
.mini-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mini-txt b { font-weight: 600; font-size: 15px; }
.mini-det { font-size: 13px; color: var(--gris); }
.mini-clic { background: none; border: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mini-clic:hover { background: var(--fond); }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #E8ECF8; color: var(--marine); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; order: -1; }
.colonne .vide { padding: 8px 20px 12px; }
.encart-heures { border-radius: var(--rayon); }

/* ----- tablette et téléphone ----- */
@media (max-width: 999px) {
  .coquille { display: block; background: none; }
  .nav-lat { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); height: 100%; z-index: 60; transform: translateX(-104%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(13, 18, 38, .25); padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  body.nav-ouverte .nav-lat { transform: none; }
  .nav-fermer { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface); color: var(--marine); cursor: pointer; }
  .nav-voile:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(13, 18, 38, .35); }
  .entete { background: var(--surface); border-bottom: 1px solid var(--trait); }
  .entete-in { padding: 8px 16px; justify-content: space-between; }
  .entete-in .marque { display: flex; margin-right: auto; }
  .entete-in .marque img { width: 96px; }
  .coquille main { padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; }
  .barre-bas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--trait); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .barre-bas > button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; color: var(--gris); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; min-height: 48px; }
  .barre-bas > button[hidden] { display: none; }
  .barre-bas .ico { width: 44px; height: 28px; padding: 4px 12px; box-sizing: border-box; border-radius: 999px; }
  .barre-bas > button[aria-current="page"] { color: var(--marine); font-weight: 700; }
  .barre-bas > button[aria-current="page"] .ico { background: var(--jaune); }
  .barre-bas .nb { position: absolute; top: 0; left: calc(50% + 6px); font-size: 10px; padding: 0 5px; }
  .acc-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) and (min-width: 641px) { .barre-bas { grid-template-columns: repeat(5, minmax(0, 120px)); justify-content: center; } }
@media (max-width: 640px) {
  .vue-tete h1 { font-size: 28px; }
  .acc-auj { padding: 18px; }
  .fil-item { grid-template-columns: 70px 14px minmax(0, 1fr); gap: 0 10px; }
  .fil-quand { font-size: 13px; }
  .synthese { grid-template-columns: minmax(0, 1fr); }
  .profil-texte { display: none; }
}
@media print { .nav-lat, .barre-bas, .entete { display: none !important; } .coquille { display: block; } }

/* Ajustements accueil */
.nb.nouveau { text-transform: none; letter-spacing: 0; }
.bande-tickets #bt-portee, .bande-tickets .bt-delai-ico, .bande-tickets .bt-delai small { display: none; }
.bande-tickets .bande-tete { justify-content: space-between; }
.bande-tickets .bt-delai { display: block; }
.bande-tickets .bt-delai > span { margin-right: 6px; }
.bande-infos .bi-corps { grid-template-columns: minmax(0, 1fr); min-height: 0; position: relative; }
.bande-infos .bi-fleche { position: absolute; top: -40px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface); font-size: 20px; display: flex; align-items: center; justify-content: center; padding: 0 0 2px; }
.bande-infos #bi-prec { right: 60px; } .bande-infos #bi-suiv { right: 22px; }
.bande-infos .bande-tete { padding-right: 106px; }
.bi-pied { padding: 0 22px 18px; font-size: 14px; font-weight: 600; }
.bande-infos .bi-info { border-left: 0; padding: 4px 22px 18px; }
.bande-infos .bi-info h3 { font-size: 17px; }
.bande-infos .bi-points { justify-content: flex-start; padding: 0 22px 18px; }
.colonne .vide { align-items: flex-start; text-align: left; padding: 6px 20px 14px; }
.colonne .vide strong { font-weight: 500; color: var(--gris); font-size: 15px; }
.colonne .vide span { font-size: 13px; }
.fil-item.suite .fil-quand { visibility: hidden; }
.tb-tuile .tb-l { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* 3.17 : affectation au magasin dans le planning (couleur claire, code du magasin) */
.t-affectation { --c: #DCE3F5; }
.cel.t-affectation .lieu { color: var(--marine); font-size: 9px; }
.pl-ia .tableau td { vertical-align: middle; }
#pl-ia-resultat { display: flex; flex-direction: column; gap: 12px; }
#pl-ia-resultat:empty { display: none; }
#pl-ia-resultat .tableau-defile, #pl-ia-resultat .tableau { width: 100%; }
#pl-ia-resultat .actions { justify-content: flex-end; }
/* 3.17.1 : une couleur claire par magasin d'affectation (le code reste écrit dans la case) */
.aff-chauny { --c: #D6E4FF; --t: #1A2E73; }
.aff-jaux { --c: #CFF0E8; --t: #0F5E52; }
.aff-hirson { --c: #F9D9E6; --t: #8A1F4F; }
.aff-chateau-thierry { --c: #E6DCFA; --t: #4B2A8C; }
.aff-lagny { --c: #E2F2CC; --t: #3D6115; }
.aff-autre { --c: #E6E8EF; --t: #3B4466; }
.cel.t-affectation .lieu { color: var(--t, var(--marine)); }
.pl-code { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 30px; padding: 0 4px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--t); background: var(--c); }

/* 3.18 : horaires dans la grille (arrivée en haut, départ en bas), ouverture du centre d'appel, repos, télétravail */
.planning thead th { min-width: 36px; }
.cel .hz { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: 9.5px; font-weight: 700; color: var(--t, var(--marine)); }
.cel.hz-seul { background: var(--surface); }
.cel .hz.ouv { color: #121F52; }
.cel .hz.ouv span:first-child { background: var(--jaune); border-radius: 3px; padding: 0 2px; }
.code-r { --c: #ECEDF2; --t: #4F587A; } .code-tt { --c: #D4F1F7; --t: #0B5C70; }
.cel.code-r .lieu, .cel.code-tt .lieu { color: var(--t); }
.hz-leg { background: var(--surface); color: var(--marine); border: 1px solid var(--trait); }
.hz-leg.ouv { background: var(--jaune); color: #121F52; border-color: var(--jaune); }
.planning td.hz-editable { cursor: pointer; }
.planning td.hz-editable:hover { outline: 2px solid var(--marine-clair); outline-offset: -2px; }
.hz-editeur { position: fixed; z-index: 70; width: 340px; background: var(--surface); border-radius: 16px; box-shadow: 0 16px 48px rgba(13, 18, 38, .28); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.hz-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hz-tete h2 { font-size: 16px; }
.hz-x { display: inline-flex !important; width: 32px; height: 32px; }
.hz-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hz-ligne label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--gris); }
.hz-ligne input { border: 1px solid var(--trait); border-radius: 10px; padding: 7px 8px; font: inherit; color: var(--texte); }
.hz-jours { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.hz-jour { font-size: 13px; }
.hz-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .hz-editeur { left: 8px !important; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); top: auto !important; width: auto; } }
.fil-item.jaune .fil-point::before { background: var(--jaune); border-color: var(--jaune-fonce); }
.planning tbody .nom { z-index: 3; }
.planning thead .nom { z-index: 4; }

/* 3.18.1 : l'IA du planning en bouton flottant (en bas à droite) avec une petite fenêtre */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ia-bouton { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--marine); color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: 0 10px 28px rgba(13, 18, 38, .3); }
.ia-bouton svg { color: var(--jaune); }
.ia-bouton:hover { background: var(--marine-fonce); }
.ia-bouton.actif { background: var(--marine-fonce); }
.ia-fenetre { position: fixed; right: 24px; bottom: 92px; z-index: 46; width: min(460px, calc(100vw - 32px)); max-height: min(72vh, 680px); display: flex; flex-direction: column; background: var(--surface); border-radius: 18px; box-shadow: 0 18px 50px rgba(13, 18, 38, .3); overflow: hidden; }
.ia-fenetre[hidden] { display: none; }
.ia-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--marine); color: #fff; }
.ia-tete h2 { color: #fff; font-size: 16px; }
.ia-fermer { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ia-corps { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ia-corps .aide { font-size: 13px; }
.ia-saisie { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--trait); background: var(--fond); }
.ia-saisie textarea { flex: 1; resize: none; border: 1px solid var(--trait); border-radius: 12px; padding: 9px 11px; font: inherit; min-height: 44px; max-height: 140px; }
.ia-fenetre .tableau { font-size: 13px; }
.ia-fenetre .tableau th, .ia-fenetre .tableau td { padding: 6px 8px; }
@media (max-width: 999px) {
  .ia-bouton { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); height: 52px; width: 52px; padding: 0; justify-content: center; }
  .ia-bouton-txt { display: none; }
  .ia-fenetre { right: 8px; left: 8px; width: auto; bottom: calc(146px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 220px); }
}
@media print { .ia-bouton, .ia-fenetre { display: none !important; } }

/* 3.19 : maintenance sur le serveur VPS */
.m-archives { margin: 4px 0 8px; padding-left: 18px; }
.m-archives li { margin: 3px 0; }
.m-lien-nas { font-size: 12px !important; letter-spacing: 0 !important; overflow-wrap: anywhere; user-select: all; }
#m-version .boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }