/* =========================================================================
   SIGEL — Feuille de style
   Palette inspirée des couleurs nationales : vert (#006233), rouge (#C1272D).
   Thèmes clair et sombre, aucune ressource externe (conformité CSP stricte).
   ========================================================================= */

:root {
  --vert:            #006233;
  --vert-clair:      #0a7d45;
  --vert-pale:       #e6f2ec;
  --rouge:           #c1272d;
  --rouge-pale:      #fdeaea;
  --or:              #b8860b;

  --fond:            #f4f6f5;
  --fond-carte:      #ffffff;
  --fond-doux:       #eef1f0;
  --fond-survol:     #f7f9f8;
  --bordure:         #dde3e0;
  --bordure-forte:   #c3ccc7;

  --texte:           #16211c;
  --texte-doux:      #5b6a63;
  --texte-faible:    #8a978f;

  --ombre-1: 0 1px 2px rgba(16, 32, 24, .06), 0 1px 3px rgba(16, 32, 24, .04);
  --ombre-2: 0 4px 12px rgba(16, 32, 24, .08), 0 2px 4px rgba(16, 32, 24, .04);
  --ombre-3: 0 16px 48px rgba(16, 32, 24, .18);

  --rayon:    10px;
  --rayon-sm: 7px;
  --rayon-lg: 16px;

  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

[data-theme="sombre"] {
  --vert:            #2ea56c;
  --vert-clair:      #3fbd80;
  --vert-pale:       #10281d;
  --rouge:           #e8595e;
  --rouge-pale:      #2c1416;

  --fond:            #0e1512;
  --fond-carte:      #16201b;
  --fond-doux:       #1c2822;
  --fond-survol:     #202d26;
  --bordure:         #2a3830;
  --bordure-forte:   #3b4d43;

  --texte:           #e8efea;
  --texte-doux:      #a3b3aa;
  --texte-faible:    #74857b;

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombre-2: 0 4px 12px rgba(0, 0, 0, .45);
  --ombre-3: 0 16px 48px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--police);
  background: var(--fond);
  color: var(--texte);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.masque { display: none !important; }

/* ---------------------------------------------------- Marque ------------- */
.marque { display: flex; align-items: center; gap: 12px; }
.marque strong {
  display: block; font-size: 17px; letter-spacing: .13em; font-weight: 700;
}
.marque span { display: block; font-size: 11.5px; color: var(--texte-doux); letter-spacing: .04em; }

.marque-etoile {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--vert);
  position: relative;
}
.marque-etoile::after {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  clip-path: polygon(50% 12%, 61% 38%, 89% 38%, 66% 56%, 75% 84%, 50% 67%, 25% 84%, 34% 56%, 11% 38%, 39% 38%);
  opacity: .95;
  transform: scale(.62);
}

/* ================================================ ÉCRAN DE CONNEXION ====== */
.ecran-connexion { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }

.connexion-visuel {
  background: linear-gradient(155deg, #007a3f 0%, #005c30 42%, #00341c 100%);
  color: #fff;
  padding: 56px 60px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.connexion-visuel::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.10) 0 42%, transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(255,255,255,.07) 0 34%, transparent 34%);
}
.connexion-visuel > * { position: relative; }
.connexion-visuel .marque span { color: rgba(255,255,255,.72); }
.connexion-visuel .marque-etoile { background: rgba(255,255,255,.16); }
.connexion-visuel .marque-etoile::after { background: #fff; }

.connexion-visuel-contenu h1 {
  font-size: 33px; line-height: 1.24; font-weight: 700; margin: 46px 0 18px; max-width: 15ch;
}
.connexion-visuel-contenu > p { font-size: 15.5px; color: rgba(255,255,255,.82); max-width: 42ch; }

.visuel-points { list-style: none; margin-top: 34px; display: grid; gap: 13px; }
.visuel-points li {
  position: relative; padding-inline-start: 27px; font-size: 14px; color: rgba(255,255,255,.9);
}
.visuel-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 7px;
  width: 15px; height: 8px; border-inline-start: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85); transform: rotate(-45deg);
}
.visuel-pied { font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .05em; }

.connexion-panneau {
  display: flex; align-items: center; justify-content: center;
  padding: 40px; background: var(--fond-carte);
}
.carte-connexion { width: 100%; max-width: 372px; }
.carte-connexion h2 { font-size: 25px; font-weight: 700; }
.carte-connexion .sous-titre { color: var(--texte-doux); margin: 6px 0 30px; font-size: 14px; }

/* ---------------------------------------------------- Formulaires -------- */
label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--texte-doux);
  margin: 16px 0 6px; letter-spacing: .015em;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-sm);
  background: var(--fond-carte); color: var(--texte);
  font-family: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--vert);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 18%, transparent);
}
input::placeholder { color: var(--texte-faible); }
textarea { resize: vertical; min-height: 74px; }
select { cursor: pointer; }
input:disabled, select:disabled { background: var(--fond-doux); cursor: not-allowed; opacity: .7; }

/* ---------------------------------------------------- Boutons ------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-sm);
  background: var(--fond-carte); color: var(--texte);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s;
  white-space: nowrap;
}
.bouton:hover:not(:disabled) { background: var(--fond-survol); border-color: var(--vert); }
.bouton:active:not(:disabled) { transform: translateY(1px); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }

.bouton-principal { background: var(--vert); border-color: var(--vert); color: #fff; }
.bouton-principal:hover:not(:disabled) { background: var(--vert-clair); border-color: var(--vert-clair); }

.bouton-danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bouton-danger:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--rouge); }

.bouton-large { width: 100%; padding: 12px; margin-top: 26px; font-size: 14.5px; }
.bouton-petit { padding: 5px 11px; font-size: 12.5px; }

.bouton-icone {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--rayon-sm);
  background: transparent; color: var(--texte-doux);
  font-size: 15px; cursor: pointer; transition: background .15s, color .15s;
}
.bouton-icone:hover { background: var(--fond-doux); color: var(--texte); }

/* ---------------------------------------------------- Alertes ------------ */
.alerte {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: var(--rayon-sm); font-size: 13.5px;
  border: 1px solid transparent; margin-top: 18px;
}
.alerte-erreur { background: var(--rouge-pale); color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 28%, transparent); }
.alerte-avertissement { background: #fff8e6; color: #8a6100; border-color: #f0dca8; margin: 0 0 20px; }
[data-theme="sombre"] .alerte-avertissement { background: #2a2210; color: #e8c46a; border-color: #4a3d18; }
.alerte-succes { background: var(--vert-pale); color: var(--vert); border-color: color-mix(in srgb, var(--vert) 25%, transparent); }

.mention-legale {
  margin-top: 22px; font-size: 11.5px; color: var(--texte-faible); line-height: 1.5;
  padding-top: 16px; border-top: 1px solid var(--bordure);
}

/* ================================================ APPLICATION ============= */
.application { display: grid; grid-template-columns: 246px 1fr; min-height: 100vh; }

.barre-laterale {
  background: var(--fond-carte); border-inline-end: 1px solid var(--bordure);
  display: flex; flex-direction: column; padding: 20px 14px;
  position: sticky; top: 0; height: 100vh;
}
.marque-compacte { padding: 0 8px 22px; }

.navigation { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lien-nav {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border: none; border-radius: var(--rayon-sm);
  background: transparent; color: var(--texte-doux);
  font-family: inherit; font-size: 13.7px; font-weight: 550; text-align: left;
  cursor: pointer; transition: background .13s, color .13s;
}
.lien-nav:hover { background: var(--fond-doux); color: var(--texte); }
.lien-nav.actif { background: var(--vert-pale); color: var(--vert); font-weight: 650; }
.lien-nav .icone { font-size: 13px; width: 15px; text-align: center; opacity: .85; }
.separateur-nav { height: 1px; background: var(--bordure); margin: 11px 6px; }

.bloc-utilisateur {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 8px 2px; border-top: 1px solid var(--bordure); margin-top: 12px;
}
.avatar {
  width: 35px; height: 35px; flex: none; border-radius: 50%;
  background: var(--vert); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.identite { flex: 1; min-width: 0; }
.identite strong {
  display: block; font-size: 13px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etiquette-role { font-size: 11px; color: var(--texte-doux); text-transform: capitalize; }

/* ---------------------------------------------------- Zone principale ---- */
.zone-principale { padding: 26px 32px 46px; min-width: 0; }

.entete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 24px;
}
.entete h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.sous-titre-vue { color: var(--texte-doux); font-size: 13.5px; margin-top: 3px; }
.actions-entete { display: flex; align-items: center; gap: 9px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 100px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
}
.badge-perimetre { background: var(--vert-pale); color: var(--vert); }

/* ---------------------------------------------------- Cartes ------------- */
.carte {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre-1);
}
.carte + .carte { margin-top: 18px; }
.entete-carte {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--bordure);
}
.entete-carte h2 { font-size: 15px; font-weight: 650; }
.entete-carte p { font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; }

/* ---------------------------------------------------- Indicateurs -------- */
.grille-indicateurs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.indicateur {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 17px 18px; box-shadow: var(--ombre-1);
  position: relative; overflow: hidden;
}
.indicateur::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--vert);
}
.indicateur.accent-rouge::before { background: var(--rouge); }
.indicateur.accent-or::before { background: var(--or); }
.indicateur.accent-vert::before { background: var(--vert); }

/*
 * Un CIN absent n'est pas une donnee vide : c'est une tache a faire.
 * Le tiret muet des autres colonnes le ferait passer pour une information
 * manquante et sans suite ; l'etiquette dit qu'elle est attendue.
 */
.etiquette-manquant {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #fff3d6;
  color: #8a6100;
  border: 1px solid #f0dca8;
  white-space: nowrap;
}
[data-theme="sombre"] .etiquette-manquant {
  background: #2a2210; color: #e8c46a; border-color: #4a3d18;
}
.indicateur-valeur { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.indicateur-libelle { font-size: 12.5px; color: var(--texte-doux); margin-top: 3px; }
.indicateur-detail { font-size: 11.5px; color: var(--texte-faible); margin-top: 7px; }

/* ---------------------------------------------------- Filtres ------------ */
.bascule-filtres { display: none; }
.barre-filtres { padding: 16px 18px; display: grid; gap: 13px; }
.ligne-filtres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 11px;
}
.ligne-filtres label { margin: 0 0 5px; }
.champ-recherche { position: relative; }
.champ-recherche input { padding-inline-start: 34px; }
.champ-recherche::before {
  content: "⌕"; position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-52%);
  color: var(--texte-faible); font-size: 16px; pointer-events: none;
}
.actions-filtres { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.compteur-resultats { font-size: 13px; color: var(--texte-doux); margin-inline-end: auto; }
.compteur-resultats strong { color: var(--texte); font-weight: 650; }

/* ---------------------------------------------------- Tableaux ----------- */
.enveloppe-tableau { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
thead th {
  text-align: start; padding: 10px 16px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--texte-doux); background: var(--fond-doux);
  border-bottom: 2px solid var(--bordure); white-space: nowrap;
}

/* --- Filets entre les colonnes ---------------------------------------------
   Sur une liste electorale, l'oeil suit une ligne de gauche a droite pour
   rapprocher un nom d'un numero de bureau : sans separation verticale, deux
   colonnes voisines se confondent des que l'une est courte. Le filet est pose
   en fin de cellule (border-inline-end) et non en debut, pour qu'il suive le
   sens de lecture et disparaisse au dernier bord.

   border-collapse est en « separate » (necessaire a la colonne d'actions
   collante) : chaque bordure est donc tracee une seule fois, sans doublon. */
thead th:not(:last-child),
tbody td:not(:last-child) { border-inline-end: 1px solid var(--bordure); }
/* L'arabe est une ecriture cursive : l'interlettrage, qui aere une petite
   capitale latine, y disjoint des lettres censees rester liees. On le neutralise
   des que l'interface passe en arabe — en-tetes de tableau comme intitules de
   fiches. La capitalisation, elle, n'a aucun effet sur l'arabe. */
html[lang="ar"] thead th,
html[lang="ar"] .tableau-fiches tbody td::before { letter-spacing: normal; }

thead th.triable { cursor: pointer; user-select: none; }
thead th.triable:hover { color: var(--texte); }
thead th .fleche-tri { opacity: .45; font-size: 9px; margin-inline-start: 3px; }
tbody td { padding: 11px 16px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--fond-survol); }
tbody tr.cliquable { cursor: pointer; }
.cellule-principale { font-weight: 600; }
.cellule-secondaire { font-size: 12px; color: var(--texte-doux); margin-top: 1px; }
.cellule-mono { font-family: var(--police-mono); font-size: 12px; }
.cellule-arabe { font-size: 14px; direction: rtl; }
.cellule-actions { text-align: end; white-space: nowrap; }
.cellule-actions .bouton-icone { width: 30px; height: 30px; font-size: 13px; }

.pastille {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2.5px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 600;
  background: var(--fond-doux); color: var(--texte-doux); white-space: nowrap;
}
.pastille::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pastille-actif    { background: var(--vert-pale); color: var(--vert); }
.pastille-suspendu { background: #fff4e0; color: #a8690a; }
[data-theme="sombre"] .pastille-suspendu { background: #2e2410; color: #dfa445; }
.pastille-archive  { background: var(--fond-doux); color: var(--texte-faible); }
.pastille-president { background: var(--vert-pale); color: var(--vert); }
.pastille-president::before { display: none; }

.etat-vide { padding: 54px 24px; text-align: center; color: var(--texte-doux); }
.etat-vide-icone { font-size: 30px; opacity: .3; display: block; margin-bottom: 12px; }
.etat-vide strong { display: block; font-size: 15px; color: var(--texte); margin-bottom: 5px; }

.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px; border-top: 1px solid var(--bordure);
}
.pagination-info { font-size: 12.5px; color: var(--texte-doux); }
.pagination-boutons { display: flex; gap: 7px; }

/* ---------------------------------------------------- Barres régionales -- */
.liste-regions { padding: 8px 18px 16px; display: grid; gap: 11px; }
.ligne-region { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; }
.ligne-region-nom { font-size: 13px; font-weight: 550; }
.ligne-region-valeur { font-size: 12.5px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.jauge { grid-column: 1 / -1; height: 6px; background: var(--fond-doux); border-radius: 100px; overflow: hidden; }
.jauge-remplissage { height: 100%; background: var(--vert); border-radius: 100px; transition: width .4s ease; }

/* ---------------------------------------------------- Modale ------------- */
.fond-modale {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 20, 15, .5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modale {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg); box-shadow: var(--ombre-3);
  width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column;
}
.modale-large { max-width: 880px; }
.entete-modale {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 22px; border-bottom: 1px solid var(--bordure);
}
.entete-modale h2 { font-size: 16.5px; font-weight: 650; }
.corps-modale { padding: 20px 22px; overflow-y: auto; }
.pied-modale {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 15px 22px; border-top: 1px solid var(--bordure);
}
.grille-formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grille-formulaire .pleine-largeur { grid-column: 1 / -1; }
.aide-champ { font-size: 11.5px; color: var(--texte-faible); margin-top: 5px; }

.liste-details { display: grid; gap: 0; }
.ligne-detail {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--bordure); font-size: 13.5px;
}
.ligne-detail:last-child { border-bottom: none; }
.ligne-detail dt { color: var(--texte-doux); font-size: 12.5px; }
.ligne-detail dd { font-weight: 550; }

.bloc-secret {
  background: var(--fond-doux); border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm); padding: 14px; margin-top: 14px;
  font-family: var(--police-mono); font-size: 13px; word-break: break-all;
}
.qr-mfa { display: block; margin: 16px auto; width: 190px; height: 190px; border-radius: var(--rayon-sm); }

.bloc-json {
  background: var(--fond-doux); border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm); padding: 11px 13px; margin-top: 7px;
  font-family: var(--police-mono); font-size: 11.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; max-height: 230px; overflow: auto;
}

/* ---------------------------------------------------- Notifications ------ */
.notifications {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 9px; max-width: 380px;
}
.notification {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; border-radius: var(--rayon-sm);
  background: var(--fond-carte); border: 1px solid var(--bordure);
  box-shadow: var(--ombre-2); font-size: 13.5px;
  animation: entree-notification .22s ease;
}
.notification-succes { border-inline-start: 3px solid var(--vert); }
.notification-erreur { border-inline-start: 3px solid var(--rouge); }
.notification-info   { border-inline-start: 3px solid var(--or); }
@keyframes entree-notification {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.chargement { padding: 46px; text-align: center; color: var(--texte-doux); font-size: 13.5px; }

/* ---------------------------------------------------- Responsive --------- */
@media (max-width: 1000px) {
  .ecran-connexion { grid-template-columns: 1fr; }
  .connexion-visuel { display: none; }
  .connexion-panneau { min-height: 100vh; }
}
@media (max-width: 860px) {
  .application { grid-template-columns: 1fr; }
  .barre-laterale {
    position: static; height: auto; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: 10px; border-inline-end: none; border-bottom: 1px solid var(--bordure);
  }
  .marque-compacte { padding: 0; }
  .navigation { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; }
  .bloc-utilisateur { border-top: none; margin: 0; padding: 0; }
  .zone-principale { padding: 20px 16px 40px; }
  .grille-formulaire { grid-template-columns: 1fr; }
  .ligne-detail { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================================
   BILINGUE — bascule français / arabe
   La mise en page utilise des propriétés logiques (inline-start/end), donc
   elle se retourne d'elle-même quand <html dir="rtl"> est posé. Ce bloc ne
   traite que ce qui ne peut pas l'être automatiquement : la typographie
   arabe, et les fragments qui doivent rester en lecture latine.
   ========================================================================= */

:root {
  --police-ar: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI",
               Tahoma, Arial, sans-serif;
}

/* --- Bouton de bascule de langue ------------------------------------------ */
.bouton-langue { gap: 6px; font-weight: 650; }
.bouton-langue .icone-globe { font-size: 12px; opacity: .7; }

.entete-connexion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 2px;
}

/* --- Typographie arabe ---------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
  font-family: var(--police-ar);
}

/* L'arabe est cursif : l'interlettrage casse les ligatures, la casse n'existe
   pas. On neutralise donc espacement et transformation de casse. */
[dir="rtl"] .marque strong,
[dir="rtl"] thead th,
[dir="rtl"] .badge,
[dir="rtl"] .visuel-pied,
[dir="rtl"] .etiquette-role {
  letter-spacing: 0;
  text-transform: none;
}

/* L'arabe a besoin d'un peu plus d'interligne et de corps pour rester lisible */
[dir="rtl"] body { font-size: 15px; line-height: 1.7; }
[dir="rtl"] .connexion-visuel-contenu h1 { line-height: 1.4; }
[dir="rtl"] .entete h1 { letter-spacing: 0; }

/* --- Fragments qui restent en lecture latine ------------------------------ */
/* Références, CIN, adresses électroniques, IP, empreintes, JSON : ces contenus
   sont latins par nature et doivent garder leur sens de lecture, même au sein
   d'une page en arabe. isolate évite qu'ils perturbent le texte alentour. */
[dir="rtl"] .cellule-mono,
[dir="rtl"] .cellule-latine,
[dir="rtl"] .bloc-secret,
[dir="rtl"] .bloc-json,
[dir="rtl"] input[dir="ltr"] {
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
}

/* --- Colonnes alignees a droite en arabe ------------------------------------
   Le sens de lecture d'une valeur et son alignement dans la cellule sont deux
   choses distinctes. « 23600 » ou « SJ21880 » doivent garder l'ordre latin de
   leurs caracteres — direction: ltr s'en charge — mais se ranger contre le
   bord droit comme le reste du tableau, sinon les colonnes numeriques flottent
   a gauche au milieu d'une page qui se lit a droite.

   On force donc l'alignement APRES la regle ci-dessus, sans toucher a
   direction ni a unicode-bidi. */
[dir="rtl"] thead th,
[dir="rtl"] tbody td,
[dir="rtl"] tbody td.cellule-mono,
[dir="rtl"] tbody td .donnee,
[dir="rtl"] tbody td .cellule-adresse,
[dir="rtl"] .cellule-adresse { text-align: right; }

/* Y compris les colonnes courtes, centrees en francais : en arabe, toute la
   ligne se lit depuis la droite, et une valeur centree y rompt l'alignement
   des colonnes voisines. C'est particulierement vrai des colonnes numeriques
   — circonscription, bureau, numero d'ordre — que l'oeil parcourt en pile. */
[dir="rtl"] thead th.cellule-centre,
[dir="rtl"] tbody td.cellule-centre { text-align: right; }

/* La colonne d'actions se range du cote ou elle est collee. */
[dir="rtl"] tbody td.cellule-actions { text-align: left; }

/* Le nom arabe d'une personne ou d'une commune, affiché dans une page
   française : sens de lecture inversé, isolé du reste de la ligne. */
.cellule-arabe {
  font-family: var(--police-ar);
  direction: rtl;
  unicode-bidi: isolate;
}
.cellule-latine { direction: ltr; unicode-bidi: isolate; }

/* --- Ajustements de disposition en RTL ------------------------------------ */
/* La coche des arguments de la page de connexion pointe dans l'autre sens. */
[dir="rtl"] .visuel-points li::before { transform: rotate(-45deg) scaleX(-1); }

/* Le dégradé de la colonne visuelle suit le sens de lecture. */
[dir="rtl"] .connexion-visuel {
  background: linear-gradient(205deg, #007a3f 0%, #005c30 42%, #00341c 100%);
}

/* Les champs numériques et de date restent alignés à gauche : les navigateurs
   affichent leur gabarit interne en latin. */
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="number"] { direction: ltr; text-align: start; }

/* Adresse precise : colonne large, coupure propre des longues adresses arabes.
   unicode-bidi: plaintext fait deduire le sens de lecture du contenu lui-meme
   (premier caractere fort). Une adresse arabe s'affiche donc en RTL et une
   adresse latine en LTR, sans avoir a etiqueter chaque enregistrement. */
.cellule-adresse {
  max-width: 260px;
  font-size: 13px;
  line-height: 1.45;
  unicode-bidi: plaintext;
  text-align: start;
}
.cellule-centre { text-align: center; }

/* Données du référentiel — toujours en arabe.
   Le sens de lecture est déduit du contenu (premier caractère fort), ce qui
   rend l'affichage correct aussi bien dans l'interface française que dans
   l'interface arabe, sans étiqueter chaque champ. */
.donnee {
  font-family: var(--police-ar);
  unicode-bidi: plaintext;
  text-align: start;
}
[dir="rtl"] .donnee { font-family: inherit; }

/* =========================================================================
   Telephone (< 600 px)
   ------------------------------------------------------------------------
   Sous cette largeur, la mise en page de bureau ne se contente plus de
   retrecir : elle change de nature.

     - la navigation passe en barre basse fixe, la ou se pose le pouce,
       au lieu d'un pave de six liens replies qui mangeait un tiers de
       l'ecran avant tout contenu ;
     - les tableaux deviennent des fiches empilees : huit colonnes sur
       375 px imposaient un defilement lateral de plus de trois largeurs
       d'ecran, pendant lequel le nom sortait du champ de vision et la
       ligne perdait son identite ;
     - les cibles tactiles atteignent 44 px, le minimum lisible au doigt.
   ========================================================================= */
@media (max-width: 600px) {

  /* --- Navigation en barre basse --- */
  .application { grid-template-columns: 1fr; }
  .barre-laterale {
    position: fixed; inset: auto 0 0 0; top: auto;
    height: auto; padding: 0; z-index: 40;
    flex-direction: row; border-bottom: none;
    border-top: 1px solid var(--bordure);
    box-shadow: 0 -2px 14px rgb(0 0 0 / .07);
    /* Sur iOS, la barre systeme mord le bas de l'ecran. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .barre-laterale .marque-compacte,
  .barre-laterale .separateur-nav { display: none; }

  .navigation {
    flex-direction: row; flex: 1; gap: 0;
    /* Le palier 860 px autorisait le repli sur plusieurs rangs ; ici la barre
       doit rester sur une seule ligne, quitte a defiler. */
    flex-wrap: nowrap;
    /* Six entrees pour l'administrateur : on autorise le debordement plutot
       que de comprimer les libelles jusqu'a l'illisible. */
    overflow-x: auto; scrollbar-width: none;
  }
  .navigation::-webkit-scrollbar { display: none; }
  .lien-nav {
    flex: 1 0 auto; min-width: 68px; max-width: 110px;
    flex-direction: column; gap: 3px;
    padding: 8px 6px; min-height: 56px;
    justify-content: center; text-align: center;
    font-size: 10.5px; line-height: 1.25; border-radius: 0;
  }
  .lien-nav.actif { background: transparent; box-shadow: inset 0 2px 0 var(--vert); }
  .lien-nav .icone { font-size: 15px; width: auto; }

  /* Identite et deconnexion : sorties de la barre, ramenees en haut d'ecran. */
  .bloc-utilisateur {
    position: fixed; top: 8px; inset-inline-end: 12px;
    z-index: 41; margin: 0; padding: 0; border-top: none; gap: 6px;
  }
  .bloc-utilisateur .identite { display: none; }
  .avatar { width: 30px; height: 30px; font-size: 11px; }

  /* En haut, une bande libre pour l'identite ; en bas, la place de la barre. */
  .zone-principale { padding: 48px 14px calc(78px + env(safe-area-inset-bottom, 0)); }

  /* Titre et commandes l'un sous l'autre : sur une seule ligne, le titre etait
     comprime au point de se briser en quatre lignes. */
  .entete {
    flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 16px;
  }
  .actions-entete { flex-wrap: wrap; justify-content: flex-start; }

  /* --- Tableaux en fiches --- */
  .enveloppe-tableau { overflow-x: visible; }
  .tableau-fiches,
  .tableau-fiches tbody,
  .tableau-fiches tr,
  .tableau-fiches td { display: block; width: auto; }
  .tableau-fiches thead { display: none; }

  .tableau-fiches tbody tr {
    border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
    padding: 4px 12px; margin-bottom: 10px; background: var(--fond-carte);
  }
  .tableau-fiches tbody tr:hover { background: var(--fond-carte); }

  .tableau-fiches tbody td {
    display: grid; grid-template-columns: 38% 1fr; gap: 10px;
    align-items: baseline; padding: 7px 0; white-space: normal;
  }
  .tableau-fiches tbody td::before {
    content: attr(data-libelle);
    /* L'intitule appartient a l'interface, pas a la donnee : il ne doit pas
       heriter du chasse-fixe de .cellule-mono, qui disloque l'arabe. */
    font-family: var(--police);
    font-size: 11px; font-weight: 650; letter-spacing: .03em;
    color: var(--texte-doux); text-transform: uppercase;
    /* L'intitule est en langue d'interface, la valeur souvent en arabe :
       chacun garde son sens de lecture. */
    unicode-bidi: plaintext;
  }
  /* Une cellule sans intitule (colonne d'actions) occupe toute la largeur. */
  .tableau-fiches tbody td:not([data-libelle]) { display: block; }
  .tableau-fiches tbody td.cellule-actions { text-align: start; padding-top: 4px; }
  .tableau-fiches tbody tr:last-child td { border-bottom: none; }
  .tableau-fiches .cellule-centre { text-align: start; }

  /* --- Filtres replies par defaut ---
     Douze champs empiles repoussaient les donnees a deux ecrans de haut.
     Seule la recherche libre reste visible ; le reste s'ouvre a la demande. */
  .bascule-filtres { display: flex; }
  .barre-filtres:not(.filtres-ouverts) .ligne-filtres { display: none; }
  /* ...sauf la bascule elle-meme, sans quoi rien ne rouvrirait les filtres. */
  .barre-filtres:not(.filtres-ouverts) .actions-filtres .bouton:not(.bascule-filtres) { display: none; }

  /* --- Confort tactile --- */
  .barre-filtres input,
  .barre-filtres select,
  .bouton { min-height: 44px; }
  .bouton-icone { min-width: 40px; min-height: 40px; }
  .bouton-langue { min-height: 36px; }

  /* --- Respiration --- */
  .entete h1 { font-size: 21px; }
  .grille-indicateurs { grid-template-columns: 1fr; }
  .modale { max-height: 88vh; }
}


/* La colonne d'actions reste visible quand le tableau defile lateralement.
   Sans cela, ses boutons se retrouvent hors de l'ecran sur un tableau large,
   et rien n'indique qu'il faut defiler pour les atteindre. */
.enveloppe-tableau { position: relative; }
tbody td.cellule-actions,
thead th:last-child {
  position: sticky;
  inset-inline-end: 0;
  background: var(--fond-carte);
  box-shadow: -6px 0 8px -6px rgb(0 0 0 / .18);
}
thead th:last-child { background: var(--fond-doux); }
tbody tr:hover td.cellule-actions { background: var(--fond-survol); }

/* --------------------------------------------------- Rapports d'affectation */
.onglets-rapport { display: flex; gap: 8px; margin-bottom: 4px; }
.tableau-rapport tbody tr.ligne-superviseur td {
  background: var(--fond-doux); padding: 9px 16px;
  border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure);
}
.compte-superviseur { margin-inline-start: 10px; font-size: 12px; color: var(--texte-doux); }
.cellule-total { font-weight: 700; background: var(--fond-doux); }
/* Le zero reste lisible mais s'efface : l'oeil doit accrocher les effectifs. */
.valeur-nulle { color: var(--texte-doux); opacity: .5; }
.tableau-rapport tfoot td {
  padding: 10px 16px; font-weight: 650;
  border-top: 2px solid var(--bordure); background: var(--fond-doux);
}
/* L'entete officiel n'existe que sur le papier. */
.entete-impression { display: none; }


/* --- Arbre superviseur -> مكتب -> دائرة --- */
.arbre-resume {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--bordure);
}
.jeton-resume {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 11px; border: 1px solid var(--bordure); border-radius: 999px;
  font-size: 12.5px; background: var(--fond-doux);
}
.jeton-resume strong { font-size: 13px; color: var(--vert); }

.arbre { padding-top: 4px; }
.arbre-bureau { margin-bottom: 16px; }
.arbre-bureau-entete {
  display: flex; align-items: baseline; gap: 9px;
  padding: 8px 0 6px; font-size: 14px;
}
.arbre-puce { color: var(--texte-doux); font-family: var(--police-mono); }
.arbre-compte { font-size: 12.5px; color: var(--texte-doux); }
.arbre-compte-fort { color: var(--vert); font-weight: 650; }
/* Le retrait dit la subordination : la دائرة appartient au مكتب. */
.arbre-dairas { padding-inline-start: 22px; }
.arbre-daira { margin-bottom: 10px; }
.arbre-daira-entete {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0 5px; font-size: 13px;
}
.tableau-arbre { font-size: 13px; }
.tableau-arbre thead th { padding: 6px 12px; }
.tableau-arbre tbody td { padding: 6px 12px; }

/* =========================================================================
   Impression
   ------------------------------------------------------------------------
   La feuille qui sort de l'imprimante doit se suffire a elle-meme : elle est
   detachee de l'ecran, circule dans les bureaux, et doit porter son propre
   entete, ses criteres et sa date. Tout le reste de l'interface disparait.
   ========================================================================= */
/* Le tableau complet n'existe que pour le papier. */
.zone-impression { display: none; }

@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }

  /* Impression du resultat complet : la liste ecran s'efface, sinon les
     vingt-cinq lignes affichees sortiraient en plus des trente mille. */
  .zone-impression { display: block; }
  body.impression-complete #tableau-registre,
  body.impression-complete #criteres-registre { display: none !important; }
  .zone-impression .entete-impression-titre {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid #000; padding-bottom: 3mm; margin-bottom: 2mm;
    font-size: 11pt;
  }
  .zone-impression h2 { font-size: 15pt; margin: 0; }
  .zone-impression .entete-impression-criteres {
    font-size: 9pt; color: #333; margin: 0 0 4mm;
  }

  .barre-laterale, .entete, .banniere-mfa, .notifications,
  .sans-impression, .bouton, .bouton-icone, #banniere-mfa { display: none !important; }

  .application { display: block; }
  .zone-principale { padding: 0; }
  body { background: #fff; }

  .entete-impression { display: block; margin-bottom: 10mm; }
  .entete-impression-titre {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid #000; padding-bottom: 3mm; margin-bottom: 4mm;
    font-size: 11pt;
  }
  .entete-impression h2 { font-size: 15pt; margin: 0 0 2mm; }
  .entete-impression-criteres { font-size: 9pt; color: #333; margin: 0; }

  .carte {
    border: none; box-shadow: none; padding: 0; margin: 0 0 6mm;
    /* Un superviseur et ses personnes ne doivent pas etre coupes en deux. */
    break-inside: avoid;
  }
  .enveloppe-tableau { overflow: visible; }

  table { font-size: 9pt; width: 100%; }
  thead { display: table-header-group; }   /* l'entete se repete a chaque page */
  tfoot { display: table-footer-group; }
  tbody tr { break-inside: avoid; }
  /* Sur le papier, la grille est complete : pas de survol, pas de zoom pour
     rattraper une colonne mal identifiee. Le filet remplace ces secours. */
  table { border: 1px solid #666; }
  thead th {
    background: #eee !important; color: #000 !important;
    border: 1px solid #666; padding: 2mm 3mm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  tbody td { padding: 1.6mm 3mm; border: 1px solid #999; }

  /* Le tableau imprime se lit du meme cote que la langue. */
  [dir="rtl"] thead th, [dir="rtl"] tbody td { text-align: right; }
  [dir="rtl"] thead th.cellule-centre,
  [dir="rtl"] tbody td.cellule-centre { text-align: right; }
  .ligne-superviseur td, .cellule-total, tfoot td {
    background: #f2f2f2 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .entete-carte h2 { font-size: 12pt; margin: 0 0 1mm; }

  /* L'arbre : un superviseur par page, ses branches jamais coupees. */
  .bloc-imprimable { break-after: page; }
  .bloc-imprimable:last-child { break-after: auto; }
  .arbre-bureau, .arbre-daira { break-inside: avoid; }
  .arbre-resume { border-bottom: 1px solid #000; padding-bottom: 3mm; }
  .jeton-resume { border: 1px solid #999; background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .arbre-dairas { padding-inline-start: 8mm; }
  .tableau-arbre { font-size: 8.5pt; }
  .entete-carte p { font-size: 9pt; color: #444; margin: 0 0 2mm; }

  /* Les fiches empilees sont une reponse au petit ecran, pas au papier. */
  .tableau-fiches, .tableau-fiches tbody, .tableau-fiches tr, .tableau-fiches td {
    display: revert;
  }
  .tableau-fiches thead { display: table-header-group; }
  .tableau-fiches tbody td::before { content: none; }
}