/* 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;
  /* Couleurs de texte (plus claires en mode sombre) et surfaces translucides */
  --marine-txt: var(--marine); --critique-txt: var(--critique); --ok-txt: var(--ok); --attention-txt: var(--attention);
  --nav-txt: #2B3354; --nav-ico: #5C6585; --nav-titre: #6B7392; --fin-trait: #EEF0F6; --avatar: #E8ECF8;
  --fond-verre: rgba(246, 247, 251, .92); --ombre: rgba(13, 18, 38, .09); --survol: rgba(26, 46, 115, .05);
  --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-txt); 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-txt); }
.btn.danger.arme { background: var(--critique); border-color: var(--critique); color: #fff; }
.lien { background: none; border: 0; padding: 0; color: var(--marine-txt); 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-txt); 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-txt); 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-txt); 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-txt); }
.chiffre { font-family: var(--f-titre); font-size: 30px; font-weight: 700; line-height: 1; color: var(--marine-txt); 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-txt); }
.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-txt); 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-txt); }
.pastille.attention { background: var(--attention-pale); color: var(--attention-txt); }
.pastille.ok { background: var(--ok-pale); color: var(--ok-txt); }
.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: #121F52; 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; max-width: 460px; }
.matrice th:not(:first-child) { white-space: normal; min-width: 88px; line-height: 1.25; }
.matrice tr.rubrique td { background: var(--jaune-pale); font-family: var(--f-titre); font-weight: 700; color: var(--marine-txt); 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-txt); 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-txt); 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-txt); }
.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-txt); 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-txt); } .negatif { color: var(--critique-txt); }
.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-txt); }

/* ---------- 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-txt); 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-txt); 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-txt); 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-txt); 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-txt); }
.visa.non { background: var(--critique-pale); color: var(--critique-txt); }
.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-txt); 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-txt); 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-txt); font-weight: 700; }
.copie.avant h3 { background: var(--critique-pale); color: var(--critique-txt); }
.copie.apres h3 { background: var(--ok-pale); color: var(--ok-txt); }
.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-txt); }
.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-txt); 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-txt); }

/* ---------- 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-txt); }
.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-txt); 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-txt); }
.bt-compteur.encours .bt-nombre { color: var(--attention-txt); }
.bt-compteur.resolu .bt-nombre { color: var(--ok-txt); }
.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-txt); 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-txt); font-weight: 700; }
.bt-file.ok { color: var(--ok-txt); }
.bt-absent { flex-basis: 100%; color: var(--critique-txt); font-weight: 700; }
.gt-titre { font-size: 15px; font-weight: 700; color: var(--marine-txt); 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-txt); }
.notifs-boite p { margin: 0; color: var(--texte); }
.notifs-erreur { color: var(--critique-txt) !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-txt); 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-txt); }
.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-txt); 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-txt); }
.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-txt); 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-txt); outline: none; }
.menu-moi button[aria-current="page"] { color: var(--marine-txt); 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-txt); }
@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-txt); }
.hr-grille tfoot th { position: sticky; bottom: 0; background: var(--fond); padding: 7px 6px; font-weight: 700; color: var(--marine-txt); 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: var(--surface); }
.hr-c.auto { color: var(--info); font-style: italic; }
.hr-c.reserve:disabled { opacity: 1; color: var(--texte); cursor: not-allowed; -webkit-text-fill-color: currentColor; }
.hr-c.reserve.auto:disabled { color: var(--info); }
.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-txt); 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-txt); 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-txt); 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-txt); }
.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-txt); 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-txt); 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-txt); 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; }
.erp-champs { width: 100%; box-sizing: border-box; font: 13px/1.5 ui-monospace, Consolas, monospace; padding: 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--fond); resize: vertical; }
.erp-champs-bloc { display: grid; gap: 8px; }
#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-txt); }
.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-txt); }
.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-txt); }
/* 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-txt); 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-txt); }
.tb-tuile.attention { border-top-color: var(--attention); } .tb-tuile.attention .tb-n { color: var(--attention-txt); }
.tb-tuile.neutre { border-top-color: var(--marine-clair); } .tb-tuile.neutre .tb-n { color: var(--marine-txt); }
.tb-tuile.ok { border-top-color: var(--ok); } .tb-tuile.ok .tb-n { color: var(--ok-txt); }
.tb-tuile.gris .tb-n { color: var(--gris); }
.tb-tuile.critique .tb-a { color: var(--critique-txt); 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-txt); 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-txt); } .tb-evol.mal { color: var(--critique-txt); } .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-txt); }
.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-txt); } .tb-age.vieux { color: var(--critique-txt); }
.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-txt); 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: var(--nav-titre); 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: var(--nav-txt); 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: var(--nav-ico); }
.nav-lat .onglet .ico.ext { width: 14px; height: 14px; }
.nav-lat .onglet:hover { background: var(--fond); color: var(--marine-txt); }
.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: var(--fond-verre); 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: var(--noir); }
.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: var(--noir); }
.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: var(--noir); 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: var(--noir); 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: var(--noir); }
.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: var(--noir); }

/* Colonnes du bas */
.synthese { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.colonne .col-tete h2 { color: var(--noir); 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 var(--fin-trait); }
.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: var(--avatar); color: var(--marine-txt); 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-txt); 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-txt); 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-txt); 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-txt); 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; }

/* Maintenance et tests : catégories repliables */
.panneau.repliable > .panneau-titre { margin: 0; }
.panneau.repliable.replie > :not(.panneau-titre) { display: none !important; }
.titre-repli { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font: inherit; color: inherit; border-radius: 8px; }
.titre-repli:focus-visible { outline: 3px solid var(--marine, #1A2E73); outline-offset: 4px; }
.titre-repli .chevron { flex: none; transition: transform .2s ease; }
.panneau.repliable:not(.replie) .titre-repli .chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .titre-repli .chevron { transition: none; } }

/* Choix du thème (Mon compte) */
.choix-theme { grid-column: 1 / -1; display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; width: 100%; max-width: 440px; box-sizing: border-box; }
.vue > .panneau, .vue > section, .vue > form { scroll-margin-top: 84px; }
.choix-theme button { flex: 1; min-width: 0; border: 0; background: none; color: var(--gris); font: inherit; font-weight: 600; font-size: 14px; padding: 8px 6px; border-radius: 999px; cursor: pointer; }
.choix-theme button:hover { color: var(--marine-txt); }
.choix-theme button[aria-checked="true"] { background: var(--surface); color: var(--noir); box-shadow: 0 1px 4px var(--ombre); }

/* ----- Recherche (Ctrl+K) ----- */
.rech-ouvrir { margin-right: auto; display: inline-flex; align-items: center; gap: 10px; width: min(380px, 42vw); height: 42px; padding: 0 10px 0 14px; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); color: var(--gris); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.rech-ouvrir:hover { border-color: var(--marine-clair); box-shadow: 0 2px 10px var(--ombre); }
.rech-ouvrir-txt { flex: 1; text-align: left; }
.rech-kbd, .rech-pied kbd { font: 600 11px/1 var(--f-texte); color: var(--gris); background: var(--surface-2); border: 1px solid var(--trait); border-radius: 6px; padding: 4px 6px; }
.rech-fond { position: fixed; inset: 0; z-index: 80; background: rgba(13, 18, 38, .45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.rech-boite { width: min(640px, 100%); max-height: min(70vh, 620px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; box-shadow: 0 24px 60px rgba(13, 18, 38, .35); overflow: hidden; }
.rech-champ { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--trait); color: var(--gris); }
.rech-champ input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17px; color: var(--texte); padding: 4px 0; }
.rech-champ input::-webkit-search-cancel-button { display: none; }
.rech-fermer { border: 1px solid var(--trait); background: var(--surface-2); color: var(--gris); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.rech-res { overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.rech-groupe { font-size: 12px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; padding: 12px 10px 6px; }
.rech-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.rech-item[aria-selected="true"] { background: var(--info-pale); }
.rech-item[aria-selected="true"] .rech-txt b { color: var(--marine-txt); }
.rech-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--marine-txt); }
.rech-ico.rech-ticket { background: var(--info-pale); } .rech-ico.rech-travaux, .rech-ico.rech-epi { background: var(--attention-pale); color: var(--attention-txt); }
.rech-ico.rech-personne, .rech-ico.rech-contact { background: var(--ok-pale); color: var(--ok-txt); } .rech-ico.rech-promo, .rech-ico.rech-annonce { background: var(--jaune-pale); color: var(--attention-txt); }
.rech-txt { display: flex; flex-direction: column; min-width: 0; }
.rech-txt b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rech-txt span { font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rech-vide { display: flex; flex-direction: column; gap: 4px; padding: 28px 16px; text-align: center; font-weight: 600; margin: 0; }
.rech-vide span { font-weight: 400; color: var(--gris); font-size: 14px; }
.rech-pied { display: flex; gap: 16px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--trait); font-size: 12px; color: var(--gris); }
.rech-pied kbd { margin-right: 3px; }
body.rech-ouverte { overflow: hidden; }
@media (max-width: 999px) {
  .rech-ouvrir { width: 42px; padding: 0; justify-content: center; margin-right: 0; flex: none; }
  .rech-ouvrir-txt, .rech-kbd { display: none; }
  .entete-in .marque { margin-right: auto; }
  .rech-fond { padding: 0; }
  .rech-boite { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .rech-pied { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .rech-boite { animation: rech-entree .16s ease-out; } }
@keyframes rech-entree { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* ----- 3.20 : chargement ----- */
.barre-chargement { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .2s ease; overflow: hidden; }
.barre-chargement::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--jaune), var(--jaune-fonce), transparent); border-radius: 3px; }
body.en-chargement .barre-chargement { opacity: 1; }
body.en-chargement .barre-chargement::before { animation: barre-va .9s ease-in-out infinite; }
@keyframes barre-va { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
/* Premier affichage : blocs grisés à la place des listes encore vides */
body.premier-chargement :is(#o-fil, #o-absents, #o-livraisons, #o-promos, .liste, #l-annuaire, #l-procedures):empty { display: block; min-height: 96px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--fond) 45%, var(--surface-2) 65%) 0 0 / 220% 100%; }
@media (prefers-reduced-motion: no-preference) {
  body.premier-chargement :is(#o-fil, #o-absents, #o-livraisons, #o-promos, .liste, #l-annuaire, #l-procedures):empty { animation: chatoiement 1.3s linear infinite; }
}
@keyframes chatoiement { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { body.en-chargement .barre-chargement::before { animation: none; width: 100%; } }

/* ----- 3.20 : effets au survol (souris seulement) ----- */
@media (hover: hover) {
  .element:hover { background: var(--survol); }
  .btn:hover:not(:disabled) { box-shadow: 0 4px 14px var(--ombre); }
  .btn.bleu:hover:not(:disabled), .btn.jaune:hover:not(:disabled), .btn.rouge:hover:not(:disabled) { box-shadow: 0 6px 18px var(--ombre); }
  .filtre:hover:not([aria-pressed="true"]) { border-color: var(--marine-clair); color: var(--marine-txt); }
  .lien:hover { text-decoration-thickness: 3px; }
  .nav-lat .onglet .ico { transition: transform .2s ease; }
  .nav-lat .onglet:hover:not([aria-current="page"]) .ico { transform: translateX(2px); color: var(--marine-txt); }
  .tb-tuile, .mini-clic, .rech-item { transition: background .15s ease, transform .2s ease, box-shadow .2s ease; }
  .moi-btn:hover .moi-initiales { box-shadow: 0 0 0 3px var(--jaune); }
  .moi-initiales { transition: box-shadow .2s ease; }
  .remise { transition: transform .2s ease; }
  .element:hover .remise { transform: rotate(-3deg) scale(1.05); }
  .an-av { transition: transform .2s ease; }
  .an-carte:hover .an-av { transform: scale(1.08); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
  .carte, .bande-infos, .acc-auj { transition: box-shadow .2s ease; }
  .carte:hover, .bande-infos:hover, .acc-auj:hover { box-shadow: 0 10px 26px var(--ombre); }
  .bande-tickets:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(26, 46, 115, .28); }
}

/* ----- 3.21 : parc informatique ----- */
.actions-tete { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-resume { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-puce { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; color: var(--gris); cursor: pointer; }
.pa-puce b { font-size: 17px; color: var(--noir); }
.pa-puce.critique:not(.zero) { border-color: var(--critique); } .pa-puce.critique:not(.zero) b { color: var(--critique-txt); }
.pa-puce.attention:not(.zero) { border-color: var(--attention); } .pa-puce.attention:not(.zero) b { color: var(--attention-txt); }
.pa-puce.ok b { color: var(--ok-txt); }
.pa-puce.zero { opacity: .65; }
.pa-outils { display: flex; gap: 10px; flex-wrap: wrap; }
.pa-outils input { flex: 1 1 280px; }
.pa-outils input, .pa-outils select { border: 1px solid var(--trait); border-radius: 999px; padding: 9px 14px; font: inherit; background: var(--surface); color: var(--texte); }
.pa-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pa-poste { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--trait); border-left: 5px solid var(--ok); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.pa-poste.completer { border-left-color: var(--jaune-fonce); background: linear-gradient(90deg, var(--attention-pale), var(--surface) 40%); }
.pa-poste.hs { border-left-color: var(--critique); background: linear-gradient(90deg, var(--critique-pale), var(--surface) 40%); }
.pa-poste.inactif { border-left-color: var(--gris); opacity: .8; }
.pa-poste-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pa-nom { font-family: var(--f-titre); font-size: 18px; font-weight: 700; color: var(--noir); letter-spacing: .01em; }
.pa-util { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-det { font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-bas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--fin-trait); font-size: 12px; color: var(--gris); }
.pa-cadenas { margin-left: auto; }
@media (hover: hover) { .pa-poste { transition: transform .2s ease, box-shadow .2s ease; } .pa-poste:hover { box-shadow: 0 8px 22px var(--ombre); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pa-poste:hover { transform: translateY(-2px); } }
.pa-qte-zone { flex-direction: row !important; align-items: center; gap: 10px; }
.pa-qte { display: flex; flex-direction: column; align-items: center; min-width: 64px; line-height: 1.1; }
.pa-qte b { font-size: 26px; font-family: var(--f-titre); color: var(--noir); }
.pa-qte span { font-size: 12px; color: var(--gris); }
.pa-conso.bas .pa-qte b { color: var(--critique-txt); }
.pa-qte-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface); color: var(--marine-txt); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; }
.pa-qte-btn:hover { border-color: var(--marine-clair); }
.pa-plus { color: var(--ok-txt); } .pa-moins { color: var(--critique-txt); }
/* Fenêtre */
.pa-fond { position: fixed; inset: 0; z-index: 75; background: rgba(13, 18, 38, .45); display: flex; justify-content: center; align-items: flex-start; padding: 5vh 16px 16px; overflow-y: auto; }
.pa-boite { width: min(760px, 100%); background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; box-shadow: 0 24px 60px rgba(13, 18, 38, .35); display: flex; flex-direction: column; max-height: 90vh; }
.pa-f-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--trait); }
.pa-f-tete h2 { font-size: 22px; }
.pa-f-corps { padding: 18px 22px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
@media (prefers-reduced-motion: no-preference) { .pa-boite { animation: rech-entree .16s ease-out; } }
.pa-form { display: flex; flex-direction: column; gap: 12px; }
.pa-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pa-champs .champ.plein { grid-column: 1 / -1; }
.pa-sous { font-size: 15px; font-weight: 700; color: var(--marine-txt); margin-top: 6px; }
.pa-logiciels { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-log { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--trait); border-radius: 999px; padding: 5px 12px; font-size: 14px; cursor: pointer; background: var(--surface); }
.pa-log:has(input:checked) { background: var(--ok-pale); border-color: var(--ok); color: var(--ok-txt); font-weight: 600; }
.pa-logiciels.lecture .pa-log { cursor: default; }
.pa-log.oui { background: var(--ok-pale); border-color: transparent; color: var(--ok-txt); font-weight: 600; }
.pa-log.non { color: var(--gris); text-decoration: line-through; opacity: .75; }
.pa-case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.pa-case input { margin-top: 3px; }
.pa-fiche-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pa-fiche-tete .btn { margin-left: auto; }
.pa-manque { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--attention-pale); color: var(--attention-txt); font-weight: 600; font-size: 14px; }
.pa-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.pa-info { min-width: 0; }
.pa-info dt { font-size: 12px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.pa-info dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.pa-notes { margin: 0; white-space: pre-wrap; }
.pa-lies { margin: 0; padding-left: 18px; }
.pa-histo { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pa-histo li { display: flex; flex-direction: column; }
.pa-etapes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
/* Coffre */
.pa-coffre { border: 1px dashed var(--jaune-fonce); background: var(--jaune-pale); border-radius: 14px; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.pa-coffre-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-coffre-tete .pa-sous { margin: 0; }
.pa-coffre-tete .btn { margin-left: auto; }
.pa-coffre-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pa-coffre-liste li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--surface); border-radius: 10px; padding: 8px 12px; }
.pa-c-lib { display: flex; flex-direction: column; min-width: 0; }
.pa-c-lib span { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.pa-c-val { font-family: ui-monospace, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; user-select: all; }
.pa-mdp { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-mdp input { flex: 1 1 220px; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 12px; font: inherit; background: var(--surface); color: var(--texte); }
.pa-attente { display: flex; flex-direction: column; gap: 6px; }
.pa-c-edit { display: flex; flex-direction: column; gap: 8px; }
.pa-c-ligne { display: grid; grid-template-columns: 1fr 1fr 1fr auto auto; gap: 6px; align-items: center; }
.pa-c-ligne input { min-width: 0; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--surface); color: var(--texte); }
@media (max-width: 700px) {
  .pa-fond { padding: 0; }
  .pa-boite { border-radius: 0; max-height: none; min-height: 100%; border: 0; }
  .pa-champs, .pa-infos { grid-template-columns: minmax(0, 1fr); }
  .pa-coffre-liste li { grid-template-columns: minmax(0, 1fr) auto; }
  .pa-c-val { grid-column: 1 / -1; order: 3; }
  .pa-c-ligne { grid-template-columns: 1fr 1fr; }
  .pa-c-ligne input:nth-child(3) { grid-column: 1 / -1; }
  .pa-qte-zone { width: 100%; justify-content: flex-end; }
}

.pa-hs { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--critique-pale); color: var(--critique-txt); font-weight: 600; font-size: 14px; }
.pa-choix { display: flex; flex-direction: column; gap: 8px; }
.pa-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.pa-option:has(input:checked) { border-color: var(--marine-clair); background: var(--info-pale); }
.pa-option input { margin-top: 4px; }
.pa-option > span { display: flex; flex-direction: column; }

/* ----- 3.23 : tickets carte bancaire ----- */
.fr-contenu { display: flex; flex-direction: column; gap: 16px; }
.fr-depot { max-width: 760px; }
.fr-depot .zone-images { border: 2px dashed var(--jaune-fonce); background: var(--jaune-pale); border-radius: 14px; padding: 16px; }
.fr-depot .zone-images .btn { background: var(--jaune); border-color: var(--jaune); color: #121F52; font-size: 15px; padding: 10px 20px; }
.fr-details summary { cursor: pointer; font-weight: 600; color: var(--marine-txt); padding: 4px 0; }
.fr-details[open] summary { margin-bottom: 10px; }
.fr-titre { font-size: 20px; margin-top: 8px; }
.fr-ia { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.fr-ia.en-cours { background: var(--info-pale); color: var(--marine-txt); }
.fr-ia.en-cours::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; }
@media (prefers-reduced-motion: no-preference) { .fr-ia.en-cours::before { animation: tourne .8s linear infinite; } }
@keyframes tourne { to { transform: rotate(360deg); } }
.fr-ia.ok { background: var(--ok-pale); color: var(--ok-txt); }
.fr-ia.attention { background: var(--attention-pale); color: var(--attention-txt); }
.fr-lu { font-size: 12px; font-weight: 600; color: var(--marine-txt); background: var(--info-pale); border-radius: 5px; padding: 1px 7px; }
.fr-mois { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.fr-mois h3 { font-size: 16px; color: var(--marine-txt); }
.element .corps.fr-corps { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; }
.fr-coche { width: 20px; height: 20px; margin-top: 18px; flex: none; accent-color: var(--marine); }
.fr-mini { flex: none; position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); background: var(--surface-2); padding: 0; cursor: zoom-in; display: grid; place-items: center; font-size: 11px; color: var(--gris); text-align: center; }
.fr-mini img { width: 100%; height: 100%; object-fit: cover; }
.fr-mini span { position: absolute; right: 3px; bottom: 3px; background: rgba(13, 18, 38, .75); color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 0 5px; }
.fr-mini.vide { cursor: default; background: var(--attention-pale); color: var(--attention-txt); font-weight: 600; }
.fr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fr-montant { color: var(--noir); font-size: 15px; }
.fr-barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fr-total { margin: 0; font-size: 16px; }
.fr-manquants { border-left: 5px solid var(--attention); }
.fr-liste-manq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fr-liste-manq li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--attention-pale); flex-wrap: wrap; }
.fr-liste-manq li > span { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 700px) { .fr-ligne .cote { flex-direction: row; flex-wrap: wrap; } .fr-mini { width: 54px; height: 54px; } }

/* ----- 3.24 : copie de l'ERP ----- */
.ec-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.ec-table { border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.ec-table.erreur { border-color: var(--critique); }
.ec-tete { display: flex; flex-direction: column; gap: 2px; }
.ec-tete h3 { font-size: 17px; }
.ec-progres { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ec-barre { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--marine-clair), var(--jaune)); transition: width .6s ease; }
.ec-ligne { margin: 0; font-size: 14px; }
.ec-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ec-jour { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ec-jour input { border: 1px solid var(--trait); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 13px; background: var(--surface); color: var(--texte); }
.ec-champ { width: 160px; }
.ec-encours::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; }
@media (prefers-reduced-motion: no-preference) { .ec-encours::before { animation: tourne .8s linear infinite; } }

/* Couleur de chaque rôle (liste des comptes) */
.pastille.role { background: var(--rc, var(--surface-2)); color: var(--rt, var(--texte)); }
.role-admin { --rc: #F5C94C; --rt: #121F52; }
.role-direction { --rc: #1A2E73; --rt: #FFFFFF; }
.role-chef_service { --rc: #E6DCFA; --rt: #4B2A8C; }
.role-informatique { --rc: #D4F1F7; --rt: #0B5C70; }
.role-commercial { --rc: #DFF2E8; --rt: #17663F; }
.role-comptabilite { --rc: #F9D9E6; --rt: #8A1F4F; }
.role-magasinier { --rc: #FDE5CC; --rt: #8A4A0B; }
.role-livreur { --rc: #E6E8EF; --rt: #3B4466; }

/* Bouton soleil / lune de l'en-tête */
.btn-theme { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface); color: var(--marine-txt); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.btn-theme svg { display: block; }
.btn-theme .ico-soleil { display: none; }
:root[data-theme="sombre"] .btn-theme .ico-soleil { display: block; color: var(--jaune); }
:root[data-theme="sombre"] .btn-theme .ico-lune { display: none; }
@media (hover: hover) { .btn-theme:hover { border-color: var(--marine-clair); box-shadow: 0 2px 10px var(--ombre); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .btn-theme svg { transition: transform .35s ease; } .btn-theme:hover svg { transform: rotate(-20deg); } }

/* ================= MODE SOMBRE (3.20) =================
   theme.js pose data-theme="sombre" ou "clair" sur <html> avant l'affichage : réglage de l'appareil
   par défaut, ou choix de la personne dans Mon compte (gardé sur ce navigateur). */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --marine: #3550B0; --marine-fonce: #26398A; --marine-clair: #6F88DA; --marine-txt: #A8B8F0;
  --jaune: #F5C94C; --jaune-fonce: #E0B040; --jaune-pale: #352D17;
  --noir: #F2F4FB; --texte: #E4E8F5; --gris: #9AA3C2; --trait: #2C3352;
  --fond: #0E1222; --surface: #171C30; --surface-2: #222842;
  --ok: #2F9B68; --ok-pale: #12301F; --ok-txt: #5FD39B;
  --attention: #B9801C; --attention-pale: #3A2B10; --attention-txt: #F0BE5C;
  --critique: #D4433C; --critique-pale: #3D1716; --critique-txt: #F48A84;
  --info: #A8B8F0; --info-pale: #1E2A52;
  --nav-txt: #C9CFE4; --nav-ico: #8E97B8; --nav-titre: #8890AE; --fin-trait: #232945; --avatar: #26315E;
  --fond-verre: rgba(14, 18, 34, .88); --ombre: rgba(0, 0, 0, .35); --survol: rgba(168, 184, 240, .07);
}

/* Couleurs fixes adaptées au mode sombre */
:root[data-theme="sombre"] .nav-logo img, :root[data-theme="sombre"] .auth-logo, :root[data-theme="sombre"] .marque img { background: #fff; border-radius: 10px; padding: 4px 6px; }
:root[data-theme="sombre"] .code-promo { color: var(--jaune); border-color: var(--jaune-fonce); }
:root[data-theme="sombre"] .hr-grille td.total, :root[data-theme="sombre"] .hr-ligne.jaune b { background: rgba(245, 201, 76, .16); }
:root[data-theme="sombre"] .hr-grille tfoot .total { background: rgba(245, 201, 76, .26); }
:root[data-theme="sombre"] .hr-grille td.c-cp { background: rgba(90, 150, 255, .12); }
:root[data-theme="sombre"] .hr-grille td.c-hs { background: rgba(140, 130, 255, .12); }
:root[data-theme="sombre"] .hr-grille td.c-at { background: rgba(240, 220, 90, .10); }
:root[data-theme="sombre"] .hr-grille td.c-maladie, :root[data-theme="sombre"] .hr-grille td.c-autre, :root[data-theme="sombre"] .hr-grille td.c-retH { background: rgba(90, 210, 120, .10); }
:root[data-theme="sombre"] .hr-grille td.c-rtt { background: rgba(80, 210, 230, .10); }
:root[data-theme="sombre"] .hr-grille tr.samedi td { border-bottom-color: #3A4266; }
:root[data-theme="sombre"] .hr-grille tr.dimanche td, :root[data-theme="sombre"] .hr-grille tr.dimanche .fige, :root[data-theme="sombre"] .hr-grille tr.dimanche .fige2 { background: #1D2238; }
:root[data-theme="sombre"] .tb-grille-l.base { stroke: #4A5378; }
:root[data-theme="sombre"] .tb-b.crees { fill: #6F88DA; } :root[data-theme="sombre"] .tb-leg.crees i { background: #6F88DA; }
:root[data-theme="sombre"] .visionneuse { background: rgba(0, 0, 0, .9); }

:root[data-theme="sombre"] .role-direction { --rc: #3550B0; --rt: #FFFFFF; }
:root[data-theme="sombre"] .role-chef_service { --rc: #33265A; --rt: #CDB8F5; }
:root[data-theme="sombre"] .role-informatique { --rc: #123C47; --rt: #8FDDEE; }
:root[data-theme="sombre"] .role-commercial { --rc: #12301F; --rt: #7FD9A8; }
:root[data-theme="sombre"] .role-comptabilite { --rc: #3D1A2A; --rt: #F2A7C6; }
:root[data-theme="sombre"] .role-magasinier { --rc: #3A2610; --rt: #F5BE82; }
:root[data-theme="sombre"] .role-livreur { --rc: #2A3048; --rt: #C3C9DD; }
:root[data-theme="sombre"] .rech-fond { background: rgba(0, 0, 0, .6); }
:root[data-theme="sombre"] .pa-fond { background: rgba(0, 0, 0, .6); }

/* ---------- 3.25 : catalogues ---------- */
.pa-boite.large { width: min(1180px, 100%); height: 92vh; max-height: 92vh; }
.pa-boite.large #pa-f-corps { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.ct-recherche input { width: 100%; font-size: 16px; padding: 13px 16px; border-radius: 12px; }
.ct-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ct-carte { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 14px; background: var(--surface); border: 1px solid var(--trait); border-top: 4px solid var(--info); border-radius: var(--rayon); cursor: pointer; font: inherit; color: var(--texte); min-height: 150px; transition: transform .15s, box-shadow .15s; }
.ct-carte.maxo { border-top-color: var(--jaune); }
.ct-carte:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.ct-carte:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.ct-type { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 700; }
.ct-nom { font-family: var(--f-titre); font-size: 18px; line-height: 1.25; }
.ct-desc { font-size: 14px; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-pied { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 6px; }
.ct-res { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
.ct-res-liste { display: flex; flex-direction: column; max-height: 420px; overflow: auto; }
.ct-res-ligne { text-align: left; display: flex; gap: 12px; align-items: baseline; padding: 9px 6px; border: 0; border-top: 1px solid var(--trait); background: none; font: inherit; color: var(--texte); cursor: pointer; }
.ct-res-ligne:hover { background: var(--survol); }
.ct-res-cat { flex: 0 0 150px; font-size: 13px; font-weight: 700; color: var(--marine-txt); }
.ct-res-cellules { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 14px; }
.ct-res-cellules i { font-style: normal; color: var(--gris); font-size: 12px; margin-right: 4px; }
.ct-fichiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ct-fichiers li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--trait); }
.ct-fichiers li .lien { flex: 1; min-width: 160px; text-align: left; overflow-wrap: anywhere; }
.ct-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ct-vignette { position: relative; padding: 0; border: 1px solid var(--trait); border-radius: 8px; background: var(--fond); cursor: pointer; aspect-ratio: 3 / 4; overflow: hidden; }
.ct-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-vignette > span:not(.ct-suppr) { position: absolute; left: 6px; bottom: 6px; background: var(--surface); border-radius: 6px; font-size: 12px; font-weight: 700; padding: 1px 6px; }
.ct-suppr { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--critique-txt); font-weight: 700; display: grid; place-items: center; }
.ct-suppr.arme { background: var(--critique); color: #fff; }
.ct-ajout { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--trait); margin-top: 6px; }
.ct-pdf-barre { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ct-pdf { flex: 1; width: 100%; min-height: 60vh; border: 1px solid var(--trait); border-radius: 10px; background: #fff; }
.ct-feuille { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; outline: none; }
.ct-page { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: var(--fond); border-radius: 10px; touch-action: pan-x pan-y pinch-zoom; }
.ct-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-nav { display: flex; gap: 8px; justify-content: center; padding-top: 8px; }
.ct-tableau { flex: 1; min-height: 0; overflow: auto; }
.ct-tableau .tableau td { white-space: nowrap; }

/* ---------- 3.25 : tableaux de bord ---------- */
:root { --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #6250d6; --serie-8: #e34948; }
:root[data-theme="sombre"] { --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767; }
.tb2-titre-groupe { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin: 22px 0 10px; }
.tb2-grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tb2-carte { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); font: inherit; color: var(--texte); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tb2-carte:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.tb2-carte b { font-family: var(--f-titre); font-size: 17px; }
.tb2-carte-pied { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 6px; }
.tb2-mini { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-bottom: 4px; }
.tb2-mini i { width: 12px; border-radius: 3px 3px 0 0; background: var(--serie-1); }
.tb2-mini-0 { height: 40%; } .tb2-mini-1 { height: 70%; } .tb2-mini-2 { height: 55%; } .tb2-mini-3 { height: 100%; }
.tb2-tete { display: flex; gap: 12px 16px; align-items: flex-start; flex-wrap: wrap; }
.tb2-tete > .btn { margin-top: 6px; }
.tb2-tete-titre { flex: 1; min-width: 220px; }
.tb2-tete-titre h1 { margin: 0; }
.tb2-tete-titre p { margin: 4px 0 0; color: var(--gris); }
.tb2-filtres { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 14px 16px; margin: 16px 0; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); position: sticky; top: 64px; z-index: 5; }
.tb2-filtre { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris); font-weight: 600; }
.tb2-filtre select, .tb2-filtre input { min-width: 180px; }
.tb2-filtre.actif select, .tb2-filtre.actif input { border-color: var(--marine-txt); box-shadow: 0 0 0 1px var(--marine-txt); }
.tb2-filtre-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tb2-dates { display: flex; gap: 6px; align-items: center; }
.tb2-dates[hidden] { display: none; }
.tb2-dates input { min-width: 0; }
.tb2-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tb2-bloc { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tb2-bloc.l2 { grid-column: span 2; } .tb2-bloc.l3 { grid-column: 1 / -1; }
.tb2-bloc header h3 { margin: 0; font-size: 15px; }
.tb2-bloc header p { margin: 2px 0 0; font-size: 12.5px; }
.tb2-chiffre { display: flex; flex-direction: column; gap: 4px; }
.tb2-chiffre b { font-family: var(--f-titre); font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--texte); }
.tb2-ecart { font-size: 13.5px; font-weight: 700; color: var(--gris); }
.tb2-ecart.hausse { color: var(--ok-txt); } .tb2-ecart.baisse { color: var(--critique-txt); }
.tb2-svg { width: 100%; height: auto; display: block; overflow: visible; }
.tb2-grille-l { stroke: var(--trait); stroke-width: 1; }
.tb2-axe { fill: var(--gris); font-size: 11px; font-family: var(--f-texte); }
.tb2-ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tb2-ligne.prec { stroke-dasharray: 5 4; stroke-width: 1.5; }
.tb2-point { stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.tb2-point-actif { stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.tb2-reticule { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.tb2-zone { cursor: crosshair; }
.tb2-barre { stroke: none; }
.tb2-barre.prec { fill: var(--gris); opacity: .45; }
.tb2-cible.cliquable, .tb2-part.cliquable { cursor: pointer; }
.tb2-groupe-barre:hover .tb2-barre { filter: brightness(1.08); }
.tb2-part { stroke: var(--surface); stroke-width: 2; transition: opacity .15s; }
.tb2-anneau svg:hover .tb2-part:not(:hover) { opacity: .55; }
.tb2-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--texte); }
.tb2-legende span { display: inline-flex; align-items: center; gap: 6px; }
.tb2-legende i, .tb2-leg-l i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tb2-legende i.pointille { height: 0; width: 16px; border-top: 2px dashed; border-radius: 0; }
.tb2-hbarres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tb2-hligne { display: grid; grid-template-columns: minmax(80px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 5px 6px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--texte); text-align: left; border-radius: 6px; }
.tb2-hligne.cliquable { cursor: pointer; }
.tb2-hligne.cliquable:hover { background: var(--survol); }
.tb2-hlib { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb2-piste { display: flex; gap: 2px; height: 14px; }
.tb2-piste i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.tb2-hligne b { font-variant-numeric: tabular-nums; font-size: 13px; }
.tb2-anneau { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.tb2-anneau-svg { width: 170px; flex: none; }
.tb2-anneau-total { fill: var(--texte); font-size: 20px; font-weight: 700; font-family: var(--f-titre); }
.tb2-anneau-leg { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.tb2-anneau-leg li { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.tb2-leg-l { display: inline-flex; gap: 8px; align-items: center; }
.lien-neutre { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.lien-neutre:hover { text-decoration: underline; }
.tb2-chiffres summary { font-size: 12.5px; color: var(--gris); cursor: pointer; }
.tb2-chiffres .tableau-defile { margin-top: 8px; max-height: 280px; overflow: auto; }
.tb2-tab { max-height: 360px; overflow: auto; }
.tb2-tab .tableau th { position: sticky; top: 0; }
.tb2-vide, .tb2-erreur { color: var(--gris); font-size: 14px; margin: 18px 0; text-align: center; }
.tb2-erreur { color: var(--critique-txt); }
.tb2-bulle { position: fixed; z-index: 200; pointer-events: none; background: var(--surface); color: var(--texte); border: 1px solid var(--trait); border-radius: 10px; box-shadow: var(--ombre); padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; max-width: 280px; }
.tb2-bulle[hidden] { display: none; }
.tb2-bulle-l { display: flex; gap: 8px; align-items: center; }
.tb2-bulle-l:first-child span { font-weight: 700; }
.tb2-bulle-l i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tb2-bulle-l b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.tb2-ia { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.tb2-ia.attente { position: relative; overflow: hidden; }
.tb2-ia.attente::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--jaune), transparent); animation: tb2-onde 1.4s linear infinite; }
@keyframes tb2-onde { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tb2-demande { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tb2-demande textarea { flex: 1; min-width: 240px; font-size: 15px; }
.tb2-titre-input { width: 100%; font-size: 17px; font-weight: 700; }
.tb2-exemples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.puce-ex { border: 1px dashed var(--trait); background: var(--fond); color: var(--texte); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.puce-ex:hover { border-color: var(--marine-txt); background: var(--survol); }
.tb2-explication { background: var(--info-pale); border-radius: 10px; padding: 10px 14px; margin: 0; }
.note-attention { background: var(--attention-pale); color: var(--texte); border-radius: 10px; padding: 10px 14px 10px 30px; margin: 0; font-size: 14px; }
p.note-attention { padding-left: 14px; margin: 12px 0; }
.tb2-bas { display: flex; justify-content: flex-end; margin-top: 18px; }
.tb2-personnes { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; border: 1px solid var(--trait); border-radius: 10px; }
.tb2-personne { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--trait); cursor: pointer; }
.tb2-personne:first-child { border-top: 0; }
.tb2-personne[hidden] { display: none; }
@media (max-width: 1000px) { .tb2-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb2-bloc.l3, .tb2-bloc.l2 { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .tb2-grille { grid-template-columns: minmax(0, 1fr); } .tb2-bloc.l2, .tb2-bloc.l3 { grid-column: auto; }
  .tb2-filtres { position: static; } .tb2-filtre, .tb2-filtre select, .tb2-filtre input { width: 100%; min-width: 0; }
  .tb2-chiffre b { font-size: 28px; } .ct-res-cat { flex-basis: 100px; }
  .pa-boite.large { height: 100%; max-height: none; }
}
.tb2-filtre select, .tb2-filtre input, .ct-recherche input, .tb2-demande textarea, .tb2-titre-input, #pa-f-corps .pa-form > input[type=search] { background: var(--surface); border: 1.5px solid var(--trait); border-radius: 8px; padding: 8px 11px; font: inherit; color: var(--texte); }
.ct-recherche input { padding: 13px 16px; border-radius: 12px; font-size: 16px; }
.tb2-filtre select, .tb2-filtre input { font-weight: 600; font-size: 14px; }
.tb2-demande textarea:focus, .tb2-filtre select:focus, .tb2-filtre input:focus, .ct-recherche input:focus { outline: none; border-color: var(--marine-txt); box-shadow: 0 0 0 3px var(--info-pale); }
.tb2-reticule.cache { visibility: hidden; }
.tb2-bloc .tableau td.num, .tb2-bloc .tableau th.num { white-space: nowrap; }
.tb2-hligne { grid-template-columns: minmax(90px, 42%) minmax(0, 1fr) auto; }
.tb2-piste { overflow: hidden; }
.tb2-svg { max-width: 100%; }

/* ---------- 3.25.1 : couvertures des catalogues ---------- */
.ct-carte { overflow: hidden; }
.ct-couv { display: block; margin: -18px -18px 8px; height: 170px; background: var(--fond); border-bottom: 1px solid var(--trait); overflow: hidden; }
.ct-couv img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .25s; }
.ct-carte:hover .ct-couv img { transform: scale(1.03); }
.ct-couv.sans { display: grid; place-items: center; background: linear-gradient(135deg, var(--info-pale), var(--fond)); }
.ct-carte.maxo .ct-couv.sans { background: linear-gradient(135deg, var(--jaune-pale), var(--fond)); }
.ct-couv.sans span { font-family: var(--f-titre); font-size: 40px; font-weight: 800; color: var(--marine-txt); opacity: .35; letter-spacing: .04em; }
.ct-couv-zone { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--trait); }
.ct-couv-apercu { flex: none; width: 110px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; border: 1px solid var(--trait); background: var(--fond); }
.ct-couv-apercu img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ct-couv-apercu.sans { display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--gris); padding: 8px; }
.ct-couv-texte { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ct-couv-boutons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
@media (max-width: 640px) { .ct-couv { height: 140px; } .ct-couv-apercu { width: 84px; } }
.ct-envoi { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; }
.ct-barre { width: 100%; height: 8px; accent-color: var(--marine-txt); }
.ct-barre[hidden] { display: none; }

/* ---------- 3.25.3 : lecture des catalogues en plein écran ---------- */
.pa-fond:has(.pa-boite.large) { padding: 0; overflow: hidden; }
.pa-boite.large { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: 0; box-shadow: none; }
.pa-boite.large .pa-f-tete { padding: 8px 16px; }
.pa-boite.large .pa-f-tete h2 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-boite.large .pa-f-corps { padding: 8px 12px 12px; gap: 8px; }
.ct-pdf { min-height: 0; border-radius: 6px; }
.ct-pdf-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ct-page-zone { flex: 1; min-height: 0; overflow: auto; background: var(--fond); border-radius: 6px; display: flex; justify-content: center; align-items: center; }
.ct-page-zone .ct-page { width: 100%; height: 100%; object-fit: contain; border-radius: 0; cursor: zoom-in; }
.ct-page-zone.zoom { display: block; }
.ct-page-zone.zoom .ct-page { height: auto; max-width: none; object-fit: unset; cursor: zoom-out; touch-action: auto; }
.ct-zoom-niv { min-width: 48px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-nav { padding-top: 0; }
.ct-astuce { text-align: center; margin: 0; font-size: 12px; }
@media (max-width: 640px) { .ct-astuce { display: none; } .ct-nav .btn { flex: 1; } }

/* 3.26.4 : table de l'ERP non copiée */
.ec-table.inactive { opacity: .7; }
.ec-tete h3 .pastille { font-size: 11px; vertical-align: middle; }

/* 3.26.5 : tickets CB pendant un congé ou un repos */
.fr-indispo { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: var(--rayon); background: var(--critique-pale); border: 1.5px solid var(--critique); color: var(--critique-txt); }
.fr-indispo b { font-size: 16px; }
.fr-indispo span { color: var(--texte); font-size: 14px; }
.fr-ia.erreur { background: var(--critique-pale); color: var(--critique-txt); font-weight: 700; }

/* 3.26.5 : images des tableaux de bord */
.tb2-images { display: flex; flex-direction: column; gap: 8px; border: 1.5px dashed var(--trait); border-radius: 10px; padding: 12px; background: var(--fond); }
.tb2-images.survol { border-color: var(--marine-txt); background: var(--jaune-pale); }
.tb2-images-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tb2-images-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tb2-images-liste li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--trait); border-radius: 8px; padding: 8px; }
.tb2-images-liste img { width: 84px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait); }
.tb2-images-role { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.tb2-role { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--trait); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.tb2-role.actif { border-color: var(--marine-txt); background: var(--info-pale); color: var(--marine-txt); font-weight: 700; }
.tb2-role input { margin: 0; }
.tb2-image { flex: 1; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.tb2-image img { max-width: 100%; max-height: 260px; display: block; border-radius: 8px; }
.tb2-image.remplir img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; }
.tb2-bloc.t-image { padding: 12px; }

/* 3.26.6 : fichiers Excel pour l'IA des tableaux de bord */
.tb2-fichier-ico { width: 56px; height: 44px; border-radius: 6px; background: #1d7044; color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; letter-spacing: .04em; }
.tb2-fichier-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; overflow-wrap: anywhere; }
/* 3.34.1 : rubriques en pleine largeur sur les grands écrans ; les formulaires gardent une largeur lisible */
.coquille main.large { max-width: 1840px; }
.coquille main.large .panneau { max-width: 1120px; }
.mini-lien { color: inherit; text-decoration: none; } .mini-lien:hover { background: var(--fond); }

/* Historique des alertes clients (3.37.14) */
.filtres-ligne { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.filtres-ligne select, .filtres-ligne input { flex: 1 1 200px; min-width: 0; }
#pa-f-corps .tableau-defile { max-height: 60vh; overflow: auto; }

/* ---------- 3.43 : pied de page et lien vers les mentions légales ---------- */
.pied-intranet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; margin: 40px 0 8px; padding: 16px 0 4px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--gris); }
.pied-intranet a, .pied-intranet .lien { color: var(--gris); font-size: 13px; text-decoration: none; }
.pied-intranet a:hover, .pied-intranet .lien:hover { color: var(--texte); text-decoration: underline; }
.auth-legal { margin: 0; text-align: center; font-size: 12.5px; color: var(--gris); }
.auth-legal a { color: var(--gris); }

/* ---------- 3.45 : garanties clients ---------- */
.ga-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ga-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); font: inherit; color: var(--texte); text-align: left; }
.ga-kpi:not(:disabled) { cursor: pointer; } .ga-kpi:not(:disabled):hover { border-color: var(--marine); }
.ga-kpi:disabled { opacity: 1; cursor: default; }
.ga-kpi span { font-size: 13px; color: var(--gris); } .ga-kpi b { font-size: 22px; font-variant-numeric: tabular-nums; } .ga-kpi em { font-style: normal; font-size: 12px; color: var(--gris); }
.ga-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ga-filtres input { flex: 1 1 260px; } .ga-filtres select { flex: 0 1 200px; }
.ga-table th.ga-th { cursor: pointer; user-select: none; } .ga-table th.ga-th:hover { color: var(--texte); }
.ga-table td.num, .ga-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ga-ligne { cursor: pointer; } .ga-ligne:hover td { background: var(--survol, rgba(0,0,0,.03)); }
.ga-sous { display: block; font-size: 12px; }
.ga-bloc { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 14px 14px; margin: 0 0 12px; }
.ga-bloc legend { font-weight: 600; padding: 0 6px; }
.ga-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.ga-grille .plein { grid-column: 1 / -1; }
.ga-cases { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-top: 18px; }
.ga-case { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.ga-pied { font-size: 15px; } .ga-total { font-size: 18px; }
.ga-filtres input, .ga-filtres select { min-height: 40px; padding: 6px 12px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); color: var(--texte); font: inherit; }
.ga-table td.ga-date { white-space: nowrap; }
.ga-case { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--texte); }
/* 3.45.1 : tableau des garanties plus complet */
.ga-table { font-size: 13px; }
.ga-table th, .ga-table td { padding: 8px 10px; }
.ga-table td.ga-fort { font-weight: 700; }
.ga-table td.ga-vide { color: var(--gris); }
.ga-table tfoot td { background: var(--fond); font-weight: 700; border-top: 2px solid var(--trait); white-space: nowrap; }
.ga-table th, .ga-table td { padding: 8px 8px; }
.ga-table th { letter-spacing: .02em; }
.ga-table td.ga-client { min-width: 150px; max-width: 220px; }
.ga-table td.ga-piece { min-width: 150px; max-width: 240px; }
.ga-table td.num { white-space: nowrap; }
.ga-table td .pastille { white-space: nowrap; }
/* 3.45.5 : Direction commerciale (vue de l'application Commerce intégrée) */
.vue-dircom { }
#dircom-cadre { display: block; width: 100%; height: calc(100vh - 90px); min-height: 600px; border: 0; border-radius: var(--rayon); background: transparent; }
.stat-onglets { display: flex; gap: 24px; border-bottom: 1px solid var(--trait); margin: 4px 0 14px; overflow-x: auto; }
.stat-onglets button { border: 0; background: none; padding: 10px 0 11px; font: inherit; font-weight: 600; color: var(--gris); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.stat-onglets button[aria-current="page"] { color: var(--texte); border-bottom-color: var(--accent, #F5C33B); }
.m-etapes { margin: 8px 0 12px; padding-left: 22px; } .m-etapes li { margin: 4px 0; }