/*
 * Apparence de l'ERP Holding — reprise de la refonte commune des ERP du groupe (ERP Nael Sakan) :
 * bleu nuit et cuivre, police Manrope, menu latéral bleu nuit, cartes à ombre douce, boutons en pilule,
 * tableaux à en-tête coloré et lignes alternées, apparence sombre par défaut (bouton Clair / Sombre).
 */
:root {
  --marque-50: #f0f4f8; --marque-100: #dde6ef; --marque-200: #b9cadc; --marque-300: #8aa5c1; --marque-400: #5f82a8;
  --marque-500: #3f6590; --marque-600: #2b4d74; --marque-700: #1d3a5c; --marque-800: #142b45; --marque-900: #0b1d2e;
  --cuivre-100: #f3e7dc; --cuivre-500: #9a6b47; --cuivre-600: #835a3b; --cuivre-clair: #d9b99b;
  --fond: #f4f6f8; --feuille: #ffffff; --encre: #0f172a; --doux: #64748b; --trait: #e2e8f0; --trait-fort: #cbd5e1;
  --champ: #ffffff; --champ-trait: #cbd5e1;
  --entete-tableau: var(--marque-100); --entete-texte: var(--marque-900); --ligne-paire: #edf2f8; --ligne-survol: #dde8f4; --trait-tableau: #cfd9e5;
  --ok: #047857; --ok-fond: #d1fae5; --attente: #b45309; --attente-fond: #fef3c7; --rejet: #be123c; --rejet-fond: #ffe4e6; --info: #0369a1; --info-fond: #e0f2fe; --gris-fond: #f1f5f9;
  --ombre: 0 1px 2px rgb(15 23 42 / .04), 0 4px 16px -4px rgb(15 23 42 / .08);
  --barre-haut: rgb(255 255 255 / .9);
  --police: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
html.erp-sombre {
  --fond: #0b1220; --feuille: #131d2e; --encre: #e6ecf4; --doux: #94a3b8; --trait: #273349; --trait-fort: #36445c;
  --champ: #101a2a; --champ-trait: #36445c;
  --entete-tableau: #1a2e4b; --entete-texte: #dde8f6; --ligne-paire: #172236; --ligne-survol: #1f2e47; --trait-tableau: #2a3750;
  --ok: #4fd99b; --ok-fond: #10382d; --attente: #f8b84e; --attente-fond: #3a2b12; --rejet: #fb8aa5; --rejet-fond: #3d1622; --info: #6ccaf3; --info-fond: #0f3045; --gris-fond: #1a2538;
  --ombre: 0 1px 2px rgb(0 0 0 / .35), 0 6px 20px -6px rgb(0 0 0 / .5);
  --barre-haut: rgb(11 18 32 / .88);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 14.5px/1.5 var(--police); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a { color: var(--marque-500); font-weight: 500; }
html.erp-sombre a { color: #6f99cc; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--marque-500); outline-offset: 2px; }

/* ───────────── Menu latéral ───────────── */
.menu { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 16rem; display: flex; flex-direction: column;
  background: linear-gradient(to bottom, var(--marque-900), var(--marque-900) 60%, #081624); border-right: 1px solid rgb(255 255 255 / .05); box-shadow: 0 20px 25px -5px rgb(11 29 46 / .1); }
.menu .marque { display: flex; align-items: center; gap: 12px; padding: 20px 16px 12px; color: #fff; text-decoration: none; }
.menu .tuile-marque { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: linear-gradient(135deg, var(--cuivre-500), #c99a72); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 4px 6px rgb(0 0 0 / .2); }
.menu .marque b { display: block; font-weight: 600; line-height: 1.2; }
.menu .marque small { display: block; font-size: 12px; color: var(--marque-300); }
.menu nav { flex: 1; overflow-y: auto; padding: 4px 12px 16px; font-size: 13.5px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .15) transparent; }
.menu .famille { margin-top: 16px; }
.menu .famille:first-child { margin-top: 4px; }
.menu .famille-titre { margin: 0 0 6px; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(138 165 193 / .8); }
.menu nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; color: rgb(221 230 239 / .85); text-decoration: none; font-weight: 500; transition: background .15s, color .15s; }
.menu nav a:hover { background: rgb(255 255 255 / .05); color: #fff; }
.menu nav a[aria-current="page"] { background: rgb(255 255 255 / .1); color: #fff; }
.menu nav a[aria-current="page"]::before { content: ""; position: absolute; inset: 6px auto 6px 0; width: 4px; border-radius: 99px; background: var(--cuivre-500); }
.menu nav a svg { width: 18px; height: 18px; flex: none; color: var(--marque-300); }
.menu nav a[aria-current="page"] svg { color: var(--cuivre-clair); }
.menu nav a .compteur { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--cuivre-500); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.menu .compte { margin: 12px; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.menu .avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 99px; background: var(--marque-600); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 0 0 2px rgb(255 255 255 / .1); }
.menu .compte .qui { min-width: 0; flex: 1; }
.menu .compte .qui b { display: block; font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .compte .qui small { display: block; font-size: 12px; color: var(--marque-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .icone-bouton { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--marque-200); cursor: pointer; }
.menu .icone-bouton:hover { background: rgb(255 255 255 / .1); color: #fff; }
.menu .icone-bouton svg { width: 16px; height: 16px; }

/* ───────────── Barre du haut et contenu ───────────── */
.barre-haut { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 24px 8px calc(16rem + 24px);
  border-bottom: 1px solid var(--trait); background: var(--barre-haut); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.barre-haut .fil { min-width: 0; flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-haut .fil span { color: var(--doux); }
.barre-haut .fil b { font-weight: 600; }
.ouvrir-menu { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--encre); font: 500 14px var(--police); cursor: pointer; }
.ouvrir-menu svg { width: 20px; height: 20px; }
.contenu { padding-left: 16rem; }
.page { max-width: 80rem; margin: 0 auto; padding: 24px 24px 64px; }
.voile { position: fixed; inset: 0; z-index: 25; background: rgb(15 23 42 / .5); }
@media (max-width: 1023px) {
  .menu { transform: translateX(-100%); transition: transform .2s; width: min(18rem, 85vw); z-index: 50; }
  .menu.ouvert { transform: none; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .5); }
  .voile { z-index: 45; }
  .contenu { padding-left: 0; }
  .barre-haut { padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .ouvrir-menu { display: inline-flex; }
  .page { padding: 16px 16px 48px; }
}

/* ───────────── Titres, cartes, chiffres clés ───────────── */
h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
h2 { margin: 24px 0 8px; font-size: 16.5px; font-weight: 600; }
.sous { margin: 0 0 16px; max-width: 80ch; color: var(--doux); font-size: 14px; }
.bloc { background: var(--feuille); border: 1px solid var(--trait); border-radius: 16px; padding: 18px 20px; box-shadow: var(--ombre); min-width: 0; }
.bloc + .bloc { margin-top: 16px; }
.grille { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grille { grid-template-columns: minmax(0, 1fr); } }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; }
.tuile { position: relative; overflow: hidden; background: var(--feuille); border: 1px solid var(--trait); border-radius: 16px; padding: 16px 18px 14px; box-shadow: var(--ombre); }
.tuile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent, var(--marque-600)); }
.tuile .libelle { font-size: 12.5px; color: var(--doux); font-weight: 500; }
.tuile .valeur { margin-top: 4px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tuile .detail { font-size: 12px; color: var(--doux); }
@media (max-width: 640px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tuile { padding: 12px 14px 10px; } .tuile .valeur { font-size: 17px; } h1 { font-size: 21px; } .bloc { padding: 14px; } }
.tuile.vert { --accent: #10b981; } .tuile.ambre { --accent: #f59e0b; } .tuile.rouge { --accent: #e11d48; } .tuile.cuivre { --accent: var(--cuivre-500); } .tuile.bleu { --accent: #0ea5e9; }

/* ───────────── Tableaux ───────────── */
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; }
thead th { background: var(--entete-tableau); color: var(--entete-texte); font-size: 12.5px; font-weight: 600; white-space: nowrap; border-bottom: 2px solid var(--marque-300); }
html.erp-sombre thead th { border-bottom-color: #34598a; }
thead th:first-child { border-top-left-radius: 10px; } thead th:last-child { border-top-right-radius: 10px; }
tbody td { border-top: 1px solid var(--trait-tableau); }
tbody tr:first-child > td { border-top: 0; }
:is(th, td) + :is(th, td) { border-left: 1px solid var(--trait-tableau); }
tbody tr:nth-child(even) > td { background: var(--ligne-paire); }
tbody tr:hover > td { background: var(--ligne-survol); }
td.m, th.m { text-align: right; white-space: nowrap; }
code, .code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }

/* ───────────── Étiquettes d'état ───────────── */
.puce { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 2px 9px; white-space: nowrap; background: var(--gris-fond); color: var(--doux); }
.puce.acceptee, .puce.transmise, .puce.intact { background: var(--ok-fond); color: var(--ok); }
.puce.en_attente { background: var(--attente-fond); color: var(--attente); }
.puce.rejetee, .puce.illisible, .puce.casse { background: var(--rejet-fond); color: var(--rejet); }
.puce.doublon { background: var(--info-fond); color: var(--info); }

/* ───────────── Boutons et champs ───────────── */
.barre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
button, .bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 18px; font: 500 14px var(--police);
  border: 1px solid var(--champ-trait); background: var(--feuille); color: var(--encre); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s; text-decoration: none; }
button:hover, .bouton:hover { background: var(--gris-fond); }
button.principal, .bouton.principal { background: var(--marque-700); border-color: var(--marque-700); color: #fff; box-shadow: 0 1px 2px rgb(11 29 46 / .2); }
button.principal:hover, .bouton.principal:hover { background: var(--marque-600); }
html.erp-sombre button.principal, html.erp-sombre .bouton.principal { background: #3d6eae; border-color: #3d6eae; }
button.succes { background: #059669; border-color: #059669; color: #fff; } button.succes:hover { background: #047857; }
button.danger { border-color: #fda4af; color: var(--rejet); background: var(--feuille); }
button.lien { min-height: 0; border: 0; background: none; color: var(--marque-500); padding: 0; font-weight: 500; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { font: 14px var(--police); color: var(--encre); background: var(--champ); border: 1px solid var(--champ-trait); border-radius: 8px; padding: 8px 11px; min-width: 0; min-height: 38px; }
input:focus, select:focus, textarea:focus { border-color: var(--marque-500); outline: none; }
label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--doux); }
form.champs { display: grid; gap: 12px; }
.erreur { color: var(--rejet); }
.compte-rendu { font-size: 13px; color: var(--doux); }
.connexion { max-width: 400px; margin: 10vh auto; }
.connexion .tuile-marque { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--cuivre-500), #c99a72); color: #fff; font-weight: 700; margin-bottom: 8px; }
.avis { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--marque-900); color: #fff; padding: 11px 18px; border-radius: 12px; max-width: 92vw; z-index: 60; box-shadow: 0 10px 30px rgb(0 0 0 / .3); }
.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--info-fond); color: var(--encre); font-size: 14px; }

/* ───────────── Arbre de l'organigramme ───────────── */
.arbre, .arbre ul { list-style: none; margin: 0; padding: 0; }
.arbre ul { margin-left: 12px; padding-left: 14px; border-left: 1px dashed var(--trait-fort); }
.noeud { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.noeud:hover { background: var(--gris-fond); }
.noeud.choisi { background: var(--entete-tableau); }
.noeud.ferme { opacity: .55; text-decoration: line-through; }
.noeud .plier { width: 16px; min-height: 0; border: 0; background: none; padding: 0; color: var(--doux); }
.noeud .type { font-size: 11px; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.noeud .chiffres { margin-left: auto; font-size: 12.5px; color: var(--doux); font-variant-numeric: tabular-nums; }
.noeud.presidence > .nom, .noeud.cellule > .nom { font-weight: 700; } .noeud.site > .nom { font-weight: 600; }
dl.fiche { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 10px; margin: 8px 0; font-size: 13.5px; }
dl.fiche dt { color: var(--doux); } dl.fiche dd { margin: 0; overflow-wrap: anywhere; }
.jeton { background: var(--attente-fond); padding: 12px; border-radius: 10px; overflow-wrap: anywhere; }

/* ───────────── Application mobile ───────────── */
.etapes-install { margin: 8px 0 0; padding-left: 20px; } .etapes-install li { margin: 4px 0; }
.etat-ok { color: var(--ok); font-weight: 600; } .etat-non { color: var(--attente); font-weight: 600; }

@media print { .menu, .barre-haut, .avis { display: none !important; } .contenu { padding: 0; } body { background: #fff; color: #000; } }

/* ───────────── Téléphone : champs et boutons en pleine largeur, rien ne déborde ───────────── */
select, input, textarea { max-width: 100%; }
html, body { overflow-x: hidden; }
@media (max-width: 640px) {
  form :is(input:not([type=checkbox]):not([type=radio]), select, textarea), form label, form .barre > button, .bloc > .barre > :is(select, input) { width: 100%; }
  form label input, form label select { width: 100%; }
  button, .bouton { white-space: normal; text-align: center; line-height: 1.3; }
  .barre-haut .fil span { display: none; }
  dl.fiche { grid-template-columns: 110px minmax(0, 1fr); }
  .noeud .chiffres { margin-left: 26px; width: 100%; }
}
/* Logigramme d'une procédure : étapes reliées l'une sous l'autre. */
.logigramme { list-style: none; padding: 0; margin: 8px 0; }
.logigramme li { position: relative; padding-bottom: 14px; }
.logigramme li:not(:last-child)::after { content: '↓'; position: absolute; left: 18px; bottom: -2px; color: var(--doux); }
.logigramme .etape { border: 1px solid var(--trait-fort); border-radius: 10px; padding: 8px 12px; background: var(--feuille); }
.procedure { margin: 6px 0; } .procedure summary { cursor: pointer; padding: 4px 0; }
/* Parcours guidé : logigramme à gauche (position surlignée), étape à droite ; empilés sur téléphone. */
.parcours { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .parcours { grid-template-columns: 1fr; } .parcours .logigramme { order: 2; } }
.logigramme li.courante .etape { border-color: var(--marque-500, #3b82f6); box-shadow: 0 0 0 2px var(--marque-500, #3b82f6); }
.logigramme li.faite .etape { opacity: .6; }
.logigramme li.faite .etape strong::after { content: ' ✓'; }

/* ───────────── Apparence sombre retenue (15/11/2026) : menu latéral bleu nuit, zone de travail bordeaux sombre ───────────── */
html.erp-sombre {
  --fond: #170a10; --feuille: #2a131c; --gris-fond: #211017; --trait: #44222f; --trait-fort: #5a2e3e;
  --champ: #211017; --champ-trait: #5a2e3e;
  --ligne-paire: #331722; --ligne-survol: #42202d; --trait-tableau: #4a2734;
  --barre-haut: rgb(23 10 16 / .88);
}

/* ───────────── Pages d'accès : écrin (photo et accueil, formulaire sur fond sable) ───────────── */
.ecrin { display: grid; min-height: 100dvh; background: #faf8f5; color: #1c1917; color-scheme: light; }
@media (min-width: 1024px) { .ecrin { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.ecrin-photo { position: relative; height: 15rem; overflow: hidden; }
@media (min-width: 640px) { .ecrin-photo { height: 18rem; } }
@media (min-width: 1024px) { .ecrin-photo { height: auto; } }
.ecrin-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecrin-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgb(42 12 23 / .9), rgb(59 16 32 / .45), rgb(11 29 46 / .3)); }
.ecrin-texte { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: #fff; }
@media (min-width: 640px) { .ecrin-texte { padding: 40px; } }
.ecrin-logo { width: 13rem; height: auto; padding: 4px; }
@media (min-width: 640px) { .ecrin-logo { width: 16rem; } }
@media (min-width: 1024px) { .ecrin-logo { width: 20rem; } }
.ecrin-salut { margin: 0; max-width: 28rem; font-family: "Instrument Serif", Georgia, serif; font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 640px) { .ecrin-salut { font-size: 3rem; } }
.ecrin-salut em { color: #ecd3bd; }
.ecrin-intro { display: none; margin: 12px 0 0; max-width: 28rem; font-size: 14px; line-height: 1.6; color: rgb(255 255 255 / .8); }
.ecrin-legende { display: none; margin: 16px 0 0; font-size: 12px; color: rgb(255 255 255 / .6); }
@media (min-width: 640px) { .ecrin-intro { display: block; } }
@media (min-width: 1024px) { .ecrin-legende { display: block; } }
.ecrin-formulaire { display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px; }
@media (min-width: 640px) { .ecrin-formulaire { padding: 32px 40px; } }
@media (min-width: 1024px) { .ecrin-formulaire { align-items: center; padding: 48px 40px; } }
.ecrin-carte { width: 100%; max-width: 24rem; }
.ecrin-carte h1 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; color: #2a0c17; }
.ecrin-sous { margin-top: 6px; font-size: 14px; color: #57534e; }
.ecrin-pied { margin-top: 32px; padding-top: 20px; border-top: 1px solid #e7e5e4; font-size: 14px; color: #57534e; }
.ecrin .champs { display: grid; gap: 20px; margin-top: 28px; }
.ecrin .champs label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: #44403c; }
.ecrin .champs input:not([type=checkbox]) { width: 100%; border-radius: 12px; border: 1px solid #d6d3d1; background: #fff; color: #1c1917; padding: 10px 14px; font: inherit; font-size: 14px; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.ecrin .champs input:not([type=checkbox]):focus { border-color: #9a6b47; outline: none; box-shadow: 0 0 0 3px rgb(154 107 71 / .25); }
html .ecrin button.principal { width: 100%; border: 0; border-radius: 9999px; background: #6b1d33; color: #fff; padding: 12px 20px; font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 4px 6px rgb(107 29 51 / .25); cursor: pointer; }
html .ecrin button.principal:hover { background: #82263f; }
.ecrin button:not(.principal):not(.oeil) { border-radius: 9999px; border: 1px solid #d6d3d1; background: #fff; color: #44403c; padding: 10px 16px; font: inherit; font-size: 14px; cursor: pointer; }
.ecrin button.lien:not(.principal):not(.oeil) { border: 0; background: none; color: #6b1d33; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ecrin .erreur:empty { display: none; }
.ecrin .erreur { color: #be123c; margin: 0; }
.ecrin .compte-rendu { color: #78716c; }
.mdp { position: relative; display: block; }
.mdp input { padding-right: 84px !important; }
.mdp .oeil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: #57534e; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.mdp .oeil:hover { background: #f5f5f4; color: #1c1917; }
.note-texte { max-height: 45vh; overflow: auto; font-size: 14px; color: #44403c; border: 1px solid #e7e5e4; border-radius: 12px; background: #fff; padding: 4px 16px; }
.menu .tuile-marque img { width: 26px; height: 26px; }
/* Pages d'accès : pleine largeur, sans marge de page. */
body.acces { background: #faf8f5; }
body.acces .page { max-width: none; padding: 0; }

/* ───────────── Logigramme dessiné (couloirs par acteur) ───────────── */
.fc-cadre { margin: 8px 0; }
.fc-defile { overflow-x: auto; border: 1px solid var(--trait); border-radius: 12px; background: var(--feuille); padding: 6px; }
.fc { display: block; font-family: var(--police); max-width: none; }
.fc .fc-impair { fill: var(--feuille); }
.fc .fc-pair { fill: var(--gris-fond); }
.fc .fc-entete { fill: var(--entete-tableau); }
.fc .fc-couloir rect { stroke: var(--trait); stroke-width: 1; }
.fc .fc-txt { fill: var(--encre); }
.fc .fc-gras { font-weight: 600; }
.fc .fc-doux { fill: var(--doux); }
.fc .fc-etiq { fill: var(--doux); font-weight: 600; }
.fc .fc-etape rect { fill: var(--feuille); stroke: var(--marque-500); stroke-width: 1.5; }
.fc .fc-etape.courante rect { fill: var(--info-fond); stroke: var(--cuivre-500); stroke-width: 3; }
.fc .fc-etape.faite rect { fill: var(--ok-fond); stroke: var(--ok); }
.fc .fc-decision polygon { fill: var(--attente-fond); stroke: var(--attente); stroke-width: 1.5; }
.fc .fc-borne rect { fill: var(--marque-700); }
.fc .fc-borne .fc-txt { fill: #fff; font-weight: 600; }
.fc .fc-blocage rect { fill: var(--rejet-fond); stroke: var(--rejet); stroke-dasharray: 4 3; }
.fc .fc-fleche { fill: none; stroke: var(--doux); stroke-width: 1.5; }
.fc .fc-pointille { stroke: var(--rejet); stroke-dasharray: 5 4; }
.fc .fc-retour { stroke: var(--attente); stroke-dasharray: 3 3; }
.fc .fc-tete { fill: var(--doux); }
.fc-texte { margin-top: 6px; font-size: 13px; }
/* Parcours : l'étape en haut, le logigramme dessous, sur toute la largeur. */
.parcours { grid-template-columns: 1fr !important; }
.parcours .parcours-dessin { order: 2; }
@media print { .fc-defile { overflow: visible; border: 0; } .fc-texte { display: none; } }

/* ───────────── Organigramme en arbre ───────────── */
.organigramme-grille { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1100px) { .organigramme-grille { grid-template-columns: 1fr; } }
.arb-defile { overflow: auto; max-height: 78vh; border-radius: 10px; }
.arb { display: block; font-family: var(--police); }
.arb .arb-lien { fill: none; stroke: var(--trait-fort); stroke-width: 1.5; }
.arb .arb-case { cursor: pointer; }
.arb .arb-case rect { fill: var(--feuille); stroke: var(--trait-fort); stroke-width: 1.2; }
.arb .arb-case:hover rect, .arb .arb-case:focus-visible rect { stroke: var(--marque-500); stroke-width: 2; }
.arb .arb-case:focus { outline: none; }
.arb .arb-nom { fill: var(--encre); font-size: 13px; font-weight: 600; }
.arb .arb-detail { fill: var(--doux); font-size: 11px; }
.arb .arb-presidence rect { fill: var(--marque-700); stroke: var(--marque-700); }
.arb .arb-presidence .arb-nom, .arb .arb-presidence .arb-detail { fill: #fff; }
.arb .arb-fonction rect { fill: var(--cuivre-100); stroke: var(--cuivre-500); }
.arb .arb-fonction .arb-nom { fill: #4a2f1c; }
.arb .arb-fonction .arb-detail { fill: #7a5236; }
.arb .arb-cellule rect { fill: var(--entete-tableau); stroke: var(--marque-500); }
.arb .arb-cellule .arb-nom { fill: var(--entete-texte); }
.arb .arb-site rect { stroke: var(--marque-400); stroke-width: 1.6; }
.arb .arb-case.ferme { opacity: .5; }
.arb .arb-case.choisi rect { stroke: var(--cuivre-500); stroke-width: 3; }
.arb .arb-plier { cursor: pointer; }
.arb .arb-plier circle { fill: var(--marque-500); stroke: var(--feuille); stroke-width: 2; }
.arb .arb-plier text { fill: #fff; font-size: 11px; font-weight: 700; }
.bascule-vue { display: inline-flex; gap: 4px; }
/* ERP des filiales */
.cartes-erp { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.carte-erp { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.carte-erp .bouton.principal { align-self: flex-start; text-decoration: none; }
/* Pièces jointes */
.pj { margin-top: 4px; font-size: 13px; }
.pj > summary { color: var(--marque-500); font-weight: 500; list-style: none; }
html.erp-sombre .pj > summary { color: #8fb3df; }
.pj > summary::-webkit-details-marker { display: none; }
.pj[open] { background: var(--gris-fond); border: 1px solid var(--trait); border-radius: 10px; padding: 6px 10px; min-width: 260px; }
.pj-liste { margin: 4px 0; padding-left: 18px; }
.pj-ancienne { opacity: .7; }
.pj-ajout { margin-top: 6px; }
.pj-ajout input[type=file] { max-width: 220px; font-size: 12px; }
/* Fiche salarié */
.sal-entete { display: flex; gap: 16px; align-items: center; margin: 8px 0 16px; }
.sal-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--feuille); box-shadow: var(--ombre); }
.sal-initiales { display: grid; place-items: center; background: linear-gradient(135deg, var(--cuivre-500), #c99a72); color: #fff; font-size: 28px; font-weight: 700; }
.sal-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sal-grille label { display: grid; gap: 4px; font-size: 13px; color: var(--doux); }
.sal-champ { display: grid; gap: 2px; }
.fc .fc-etape.moi rect { stroke: var(--cuivre-500); stroke-width: 3; fill: var(--cuivre-100); }
html.erp-sombre .fc .fc-etape.moi rect { fill: #3a2418; }
.arb .arb-poste rect { fill: var(--gris-fond); stroke: var(--cuivre-500); stroke-dasharray: 4 3; }
.arb .arb-salarie rect { fill: var(--ok-fond); stroke: var(--ok); }
/* Messagerie */
.msg-grille { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .msg-grille { grid-template-columns: 1fr; } }
.msg-liste { display: grid; gap: 6px; background: var(--feuille); border: 1px solid var(--trait); border-radius: 14px; padding: 10px; max-height: 78vh; overflow: auto; }
.msg-groupe { margin: 10px 4px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
.msg-fil { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; width: 100%; text-align: left; border: 0; border-radius: 10px; background: transparent; color: inherit; padding: 8px 10px; cursor: pointer; font: inherit; }
.msg-fil:hover { background: var(--ligne-survol); }
.msg-fil.actif { background: var(--entete-tableau); }
.msg-titre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-apercu { grid-column: 1 / -1; font-size: 12px; color: var(--doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-vue { background: var(--feuille); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; min-height: 50vh; }
.msg-messages { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; max-height: 55vh; overflow: auto; }
.msg-messages li { background: var(--gris-fond); border-radius: 12px; padding: 10px 12px; max-width: 85%; }
.msg-messages li.moi { margin-left: auto; background: var(--entete-tableau); }
.msg-texte { white-space: pre-wrap; margin-top: 4px; }
.msg-cite { font-size: 12px; color: var(--doux); border-left: 3px solid var(--trait-fort); padding-left: 8px; margin-top: 4px; }
.msg-actions { display: flex; gap: 10px; margin-top: 4px; font-size: 12px; }
.msg-saisie textarea { width: 100%; }
.msg-resume { white-space: pre-wrap; font-family: inherit; font-size: 13px; }
.pj-bloc { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: flex-start; }
.pj-discussion { font-size: 13px; margin-top: 4px; text-decoration: none; }

/* ───────────── Version arabe : de droite à gauche ───────────── */
html[dir=rtl] { --police: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Manrope", system-ui, sans-serif; }
html[dir=rtl] .menu { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid rgb(255 255 255 / .05); }
html[dir=rtl] .contenu { padding-left: 0; padding-right: 16rem; }
@media (max-width: 1023px) {
  html[dir=rtl] .menu { transform: translateX(100%); }
  html[dir=rtl] .menu.ouvert { transform: none; }
  html[dir=rtl] .contenu { padding-right: 0; }
}
html[dir=rtl] thead th:first-child { border-top-left-radius: 0; border-top-right-radius: 10px; }
html[dir=rtl] thead th:last-child { border-top-right-radius: 0; border-top-left-radius: 10px; }
html[dir=rtl] :is(th, td) + :is(th, td) { border-left: 0; border-right: 1px solid var(--trait-tableau); }
html[dir=rtl] .arbre ul { margin-left: 0; padding-left: 0; border-left: 0; margin-right: 12px; padding-right: 14px; border-right: 1px dashed var(--trait-fort); }
html[dir=rtl] .noeud .chiffres { margin-left: 0; margin-right: 26px; }
html[dir=rtl] .logigramme li:not(:last-child)::after { left: auto; right: 18px; }
html[dir=rtl] .mdp input { padding-right: 14px !important; padding-left: 84px !important; }
html[dir=rtl] .mdp .oeil { right: auto; left: 6px; }
html[dir=rtl] .pj-liste, html[dir=rtl] .etapes-install { padding-left: 0; padding-right: 18px; }
html[dir=rtl] .msg-cite { border-left: 0; padding-left: 0; border-right: 3px solid var(--trait-fort); padding-right: 8px; }
html[dir=rtl] .msg-messages li.moi { margin-left: 0; margin-right: auto; }
html[dir=rtl] .ecrin-salut { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; }
/* Les dessins (logigrammes, organigramme en arbre) gardent leur sens de lecture ; les montants et codes restent de gauche à droite. */
html[dir=rtl] .fc-defile, html[dir=rtl] .arb-defile { direction: ltr; }
html[dir=rtl] td.m, html[dir=rtl] code { direction: ltr; unicode-bidi: isolate; }
.bascule-langue { font-weight: 700; min-width: 32px; }
/* Accueil : photos du groupe qui se succèdent en fondu. */
.ecrin-fond { opacity: 0; transition: opacity 1.2s ease; }
.ecrin-fond.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ecrin-fond { transition: none; } }

/* ───────────── Assistant IA : bulle flottante déplaçable, fenêtre de dialogue, grande vue ───────────── */
.ia-bulle-flottante { position: fixed; z-index: 60; padding: 0; border: 0; background: none; border-radius: 50%; cursor: grab; touch-action: none; user-select: none;
  box-shadow: 0 8px 22px -6px rgb(11 29 46 / .55); transition: transform .2s; animation: ia-apparait .5s cubic-bezier(.2,.9,.3,1.3); }
.ia-bulle-flottante:hover { transform: scale(1.08); }
.ia-bulle-flottante:active { cursor: grabbing; }
.ia-pastille { position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; background: #e11d48; border: 2px solid #fff; }
.ia-visage { position: relative; display: inline-block; flex: none; }
.ia-visage svg { position: relative; display: block; }
.ia-repos svg { animation: ia-flotte 3.2s ease-in-out infinite; }
.ia-cligne { transform-box: fill-box; transform-origin: center; animation: ia-cligne 4.5s infinite; }
.ia-parle .ia-parle, rect.ia-parle { transform-box: fill-box; transform-origin: center; animation: ia-bouche .35s ease-in-out infinite alternate; }
.ia-orbite { transform-origin: 32px 32px; animation: ia-tourne 1.4s linear infinite; }
.ia-onde { position: absolute; inset: 0; border-radius: 50%; background: #c8102e; animation: ia-onde 1.4s ease-out infinite; }
@keyframes ia-flotte { 50% { transform: translateY(-3px); } }
@keyframes ia-cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ia-bouche { from { transform: scaleY(.4); } to { transform: scaleY(1.1); } }
@keyframes ia-tourne { to { transform: rotate(360deg); } }
@keyframes ia-onde { from { transform: scale(1); opacity: .45; } to { transform: scale(1.7); opacity: 0; } }
@keyframes ia-apparait { from { transform: scale(.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ia-visage *, .ia-bulle-flottante, .ia-fenetre { animation: none !important; transition: none !important; } }

.ia-fenetre { position: fixed; z-index: 59; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--trait);
  background: var(--feuille); box-shadow: 0 24px 60px -12px rgb(11 29 46 / .45); visibility: hidden; opacity: 0; transform: scale(.92); pointer-events: none;
  transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.2), visibility .3s; }
.ia-fenetre.ouvert { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.ia-entete { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: #fff; cursor: grab; touch-action: none; user-select: none;
  background: linear-gradient(100deg, var(--marque-800), var(--marque-600) 70%, var(--cuivre-500)); }
.ia-entete-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ia-entete-titre small { color: #dbe6f2; font-size: 11px; }
.ia-entete button, .ia-entete a { background: none; border: 0; color: #e7eef6; font-size: 12px; padding: 4px 8px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.ia-entete button:hover, .ia-entete a:hover { background: rgb(255 255 255 / .15); }
.ia-entete button[aria-label] { font-size: 20px; line-height: 1; }

.ia-dialogue { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ia-dialogue.grand { min-height: 60vh; max-height: 75vh; border: 1px solid var(--trait); border-radius: 16px; background: var(--feuille); box-shadow: var(--ombre); margin: 14px 0; }
.ia-fil { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ia-accueil p { margin: 0 0 8px; }
.ia-sujets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ia-puce { display: inline-block; border: 1px solid var(--trait-fort); background: var(--gris-fond); color: var(--encre); border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; text-decoration: none; text-align: start; }
.ia-puce:hover { border-color: var(--marque-500); }
.ia-bulle { max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ia-bulle p { margin: 0 0 6px; } .ia-bulle p:last-child { margin-bottom: 0; }
.ia-bulle ul, .ia-bulle ol { margin: 4px 0 6px; padding-inline-start: 20px; }
.ia-moi { align-self: flex-end; background: var(--marque-600); color: #fff; border-end-end-radius: 4px; white-space: pre-wrap; }
.ia-lui { align-self: flex-start; background: var(--gris-fond); border: 1px solid var(--trait); border-end-start-radius: 4px; }
.ia-lui.erreur { background: var(--rejet-fond); color: var(--rejet); }
.ia-titre { font-weight: 700; }
.ia-tableau { overflow-x: auto; margin: 6px 0; } .ia-tableau table { font-size: 13px; }
.ia-carte { margin-top: 8px; padding: 10px; border: 1px dashed var(--cuivre-500); border-radius: 12px; background: var(--feuille); display: flex; flex-direction: column; gap: 6px; }
.ia-citation { white-space: pre-wrap; padding: 6px 10px; border-inline-start: 3px solid var(--cuivre-500); background: var(--gris-fond); border-radius: 6px; }
.ia-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--doux); }
.ia-outils button.lien { font-size: 12px; padding: 0; }
.ia-points { letter-spacing: 3px; animation: ia-clignote 1s infinite; } @keyframes ia-clignote { 50% { opacity: .3; } }
.ia-saisie { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--trait); align-items: flex-end; }
.ia-saisie textarea { flex: 1; resize: none; min-height: 42px; }
.ia-boutons { display: flex; flex-direction: column; gap: 6px; }
.ia-boutons button { min-width: 42px; padding: 8px; }
.ia-grand-entete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ia-grand-entete > div { flex: 1; }
@media (max-width: 700px) { .ia-fenetre { inset: 8px 8px 82px 8px !important; width: auto !important; height: auto !important; } }

/* ───────────── Départements Comptabilité, Commercial, Marketing ───────────── */
.onglets-dept { margin: 6px 0 12px; }
.grille-etats { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.etat-synthese table { width: 100%; }
.etat-synthese td { padding: 5px 8px; border-bottom: 1px solid var(--trait); }
.etat-synthese tr.total td { font-weight: 700; background: var(--gris-fond); border-top: 1px solid var(--trait-fort); }
.graphe { width: 100%; height: auto; color: var(--doux); }
.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--doux); }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.base-decl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 13px; margin: 6px 0; }
.base-decl dt { color: var(--doux); } .base-decl dd { margin: 0; text-align: end; }
@media print {
  .menu, .barre-haut, .onglets-dept, .barre, .ia-bulle-flottante, .ia-fenetre, .avis, #voile { display: none !important; }
  .contenu { margin: 0 !important; padding: 0 !important; }
  .bloc { box-shadow: none !important; break-inside: avoid; }
  body { background: #fff; color: #000; }
}

/* Envois mensuels : détail compact dans un tableau */
.liste-courte { margin: 0; padding-left: 1.1em; font-size: .92em; }

/* Affaire personnelle : rappel des honoraires */
.avertissement { border-left: 3px solid var(--ambre, #c9892b); padding: 6px 10px; margin: 8px 0; }