/* Polices officielles (charte graphique de l'État) : LouguiyaFR pour le français, Louguiya pour l'arabe.
   Le navigateur choisit la police selon les caractères (unicode-range). */
@font-face { font-family: "SIR Officielle"; src: url("polices/LouguiyaFR-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; unicode-range: U+0000-05FF, U+2000-206F, U+20AC; }
@font-face { font-family: "SIR Officielle"; src: url("polices/LouguiyaFR-Bold.ttf") format("truetype"); font-weight: 600 900; font-display: swap; unicode-range: U+0000-05FF, U+2000-206F, U+20AC; }
@font-face { font-family: "SIR Officielle"; src: url("polices/Louguiya-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "SIR Officielle"; src: url("polices/Louguiya-Bold.ttf") format("truetype"); font-weight: 600 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  /* Charte graphique officielle (Premier Ministère, kennach.gov.mr/couleurs) :
     vert #00A95C, jaune #FFD700, rouge #D01C1F. Les nuances plus sombres du vert
     officiel servent aux textes et boutons, pour garder un contraste lisible. */
  --vert: #00834a;          /* vert officiel assombri : liens et boutons (contraste AA) */
  --vert-fonce: #006b3a;
  --vert-nuit: #004a28;
  --vert-pale: #e2f5ea;
  --vert-drapeau: #00a95c;  /* vert officiel */
  --or: #ffd700;            /* jaune officiel */
  --or-texte: #7a6000;      /* jaune officiel assombri, lisible sur fond clair */
  --or-pale: #fff8db;
  --rouge: #d01c1f;         /* rouge officiel */
  --fond: #f4f5f1;
  --surface: #ffffff;
  --texte: #1a1f1c;
  --texte-doux: #56605a;
  --bordure: #e2e6e0;
  --danger: #b4171a;
  --ok: #00834a;
  --attention: #8a6a00;
  --rayon: 12px;
  --ombre: 0 1px 2px rgba(0,40,20,.05), 0 2px 10px rgba(0,40,20,.05);
  --police: "SIR Officielle", "Segoe UI", system-ui, -apple-system, sans-serif;
  --police-ar: "SIR Officielle", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--police); background: var(--fond); color: var(--texte); font-size: 15px; line-height: 1.5; }
html[dir="rtl"] body { font-family: var(--police-ar); font-size: 16px; }
a { color: var(--vert); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .3rem; letter-spacing: -.01em; color: var(--vert-nuit); }
.titre-page h1::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; margin-top: .45rem; background: linear-gradient(90deg, var(--vert) 0 60%, var(--or) 60% 100%); }
h2 { font-size: 1.12rem; margin: 0 0 .8rem; color: var(--vert-nuit); }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
.doux { color: var(--texte-doux); }
.petit { font-size: .85rem; }

/* En-tête — charte graphique de l'État (2020), « Le site Internet » : fond vert officiel bordé en haut
   et en bas d'un filet rouge ; à côté du sceau, « République Islamique de Mauritanie » et la devise en
   blanc, puis le nom de l'organisme en blanc. */
.entete { position: sticky; top: 0; z-index: 1100; box-shadow: 0 2px 8px rgba(0,40,20,.18); }
.entete-interieur { display: flex; align-items: center; gap: 1.25rem; padding: .55rem 1.5rem; min-height: 78px;
  background: var(--vert-drapeau); color: #fff; border-top: 3px solid var(--rouge); border-bottom: 3px solid var(--rouge); }
.marque { display: flex; align-items: center; gap: .85rem; color: #fff; min-width: 0; }
.marque:hover { text-decoration: none; }
.marque .sceau { flex: none; filter: drop-shadow(0 1px 2px rgba(0,40,20,.35)); }
.marque-textes { display: flex; flex-direction: column; line-height: 1.2; text-shadow: 0 1px 1px rgba(0,50,25,.45); min-width: 0; }
.marque .republique { font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
html[dir="rtl"] .marque .republique { text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.marque .devise { font-size: .76rem; font-weight: 600; opacity: .95; }
.marque .organisme { font-size: 1.3rem; font-weight: 800; margin-top: .1rem; }
.marque abbr { text-decoration: none; font-weight: 700; color: var(--or); }
.compte { display: flex; gap: .85rem; align-items: center; font-size: .85rem; margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end; }
.compte form { display: inline; margin: 0; }
.compte a, .compte button { color: #fff; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; padding: .25rem .1rem; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,50,25,.4); }
.compte a:hover, .compte button:hover { text-decoration: underline; }
.compte .utilisateur { display: flex; flex-direction: column; line-height: 1.15; padding-inline-start: .85rem; border-inline-start: 1px solid rgba(255,255,255,.45); text-shadow: 0 1px 1px rgba(0,50,25,.4); }
.compte .utilisateur small { font-size: .72rem; opacity: .95; }
.compte .deconnexion { background: rgba(0,60,30,.25) !important; border: 1px solid rgba(255,255,255,.6) !important; border-radius: 6px; padding: .3rem .7rem !important; }
.compte .deconnexion:hover { background: rgba(0,60,30,.4) !important; text-decoration: none; }

/* Barre de navigation : blanche, liens verts, onglet actif souligné de jaune officiel */
.barre-nav { background: #fff; border-bottom: 1px solid var(--bordure); padding: 0 1.25rem; display: flex; align-items: center; }
.nav { display: flex; gap: .1rem; flex-wrap: wrap; }
.nav a { color: var(--vert-fonce); padding: .7rem .75rem .6rem; font-size: .9rem; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav a:hover { background: var(--vert-pale); text-decoration: none; }
.nav a.actif { color: var(--vert-nuit); border-bottom-color: var(--or); background: linear-gradient(180deg, transparent 60%, rgba(255,215,0,.12)); }
.menu-bouton { display: none; background: none; border: 1px solid var(--vert); color: var(--vert-fonce); font-weight: 700; border-radius: 6px; padding: .35rem .8rem; margin: .45rem 0; font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

body { min-height: 100vh; display: flex; flex-direction: column; }
main { padding: 1.25rem; max-width: 1400px; margin: 0 auto; width: 100%; flex: 1 0 auto; }
main.plein { max-width: none; padding: 0; display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
body:has(main.plein) { height: 100vh; height: 100dvh; overflow: hidden; }
body:has(main.plein) .pied { display: none; }
main.plein > .carte-page { flex: 1; min-height: 0; }

/* Cartes et grilles */
.grille { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte-bloc { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem 1.1rem; box-shadow: var(--ombre); min-width: 0; }
.chiffre { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--vert); }
.g4 > .carte-bloc:has(.chiffre) { border-top: 4px solid var(--vert); }
.g4 > .carte-bloc:has(.chiffre):nth-child(2) { border-top-color: var(--or); }
.g4 > .carte-bloc:has(.chiffre):nth-child(3) { border-top-color: var(--vert-drapeau); }
.g4 > .carte-bloc:has(.chiffre):nth-child(4) { border-top-color: var(--rouge); }
.g4 > .carte-bloc:has(.chiffre):nth-child(4) .chiffre { color: var(--rouge); }
.chiffre-libelle { color: var(--texte-doux); font-size: .85rem; }
.titre-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.section { margin-top: 1.25rem; }

/* Tableaux */
.tableau-conteneur { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: start; padding: .5rem .6rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vert-fonce); background: var(--vert-pale); position: sticky; top: 0; }
td.n, th.n { text-align: end; font-variant-numeric: tabular-nums; }
tr:hover td { background: #f1f7f3; }

/* Pastilles */
.pastille { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.s-realisee { background: #dcfce7; color: #166534; }
.s-en_cours, .s-remise_site { background: #dbeafe; color: #1e40af; }
.s-non_entamee { background: #fef3c7; color: #92400e; }
.s-proposee { background: #ede9fe; color: #5b21b6; }
.s-suspendue, .s-inconnu { background: #f5f5f4; color: #57534e; }
.s-soumis { background: #fef3c7; color: #92400e; }
.s-valide { background: #dcfce7; color: #166534; }
.s-rejete { background: #fee2e2; color: #991b1b; }
.provisoire { background: #fff7ed; color: #9a3412; }

/* Formulaires */
form.filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; }
label { display: block; font-size: .82rem; color: var(--texte-doux); margin-bottom: .2rem; }
input, select, textarea { font: inherit; padding: .45rem .55rem; border: 1px solid #d6d3d1; border-radius: 7px; background: #fff; color: var(--texte); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(0,169,92,.22); border-color: var(--vert); }
.champ { margin-bottom: .75rem; }
.champ input, .champ select, .champ textarea { width: 100%; }
.champ .aide { font-size: .78rem; color: var(--texte-doux); }
.erreur { color: var(--danger); font-size: .85rem; }
.bouton { display: inline-block; background: var(--vert); color: #fff; border: 0; border-radius: 8px; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0,40,20,.15); transition: background .15s; }
.bouton:hover { background: var(--vert-fonce); text-decoration: none; }
.bouton.secondaire { background: #fff; color: var(--vert); border: 1px solid var(--vert); box-shadow: none; }
.bouton.secondaire:hover { background: var(--vert-pale); }
.bouton.danger { background: var(--danger); }
.bouton.petit { padding: .25rem .6rem; font-size: .82rem; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: .65rem .9rem; border-radius: 8px; background: var(--vert-pale); border-inline-start: 4px solid var(--vert); margin-bottom: .4rem; }
.messages li.error { background: #fdecec; border-color: var(--rouge); }
.alerte { background: var(--or-pale); border: 1px solid #f0dc8a; border-inline-start: 4px solid var(--or); padding: .7rem .9rem; border-radius: 8px; font-size: .9rem; }

/* Barres de progression */
.barre { height: 8px; background: #e7e5e4; border-radius: 999px; overflow: hidden; display: flex; }
.barre span { display: block; height: 100%; }

/* Carte */
.carte-page { display: grid; grid-template-columns: 320px 1fr; }
.panneau form .bouton.petit { margin: 0 .3rem .4rem 0; }
.panneau h2 { font-size: 1.05rem; padding-bottom: .5rem; border-bottom: 2px solid var(--vert-pale); }
.panneau { background: var(--surface); border-inline-end: 1px solid var(--bordure); padding: 1rem; overflow-y: auto; }
.panneau .champ select { width: 100%; }
#carte { height: 100%; width: 100%; }
.mini-carte { height: 320px; border-radius: var(--rayon); border: 1px solid var(--bordure); }
.legende span { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .6rem .3rem 0; font-size: .82rem; }
.legende i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.leaflet-popup-content { font-family: var(--police); font-size: .85rem; }
.bulle { background: rgba(0,131,74,.62); font-size: .78rem; color: #fff; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.3); }

.pagination { display: flex; gap: .4rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
dl.fiche { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.fiche dt { color: var(--texte-doux); font-size: .85rem; }
dl.fiche dd { margin: 0; }
.onglets { display: flex; gap: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bordure); }
.onglets a { border-bottom: 3px solid transparent; padding: .5rem .8rem; color: var(--texte-doux); margin-bottom: -1px; }
.onglets a:hover { color: var(--texte); text-decoration: none; }
.onglets a.actif { border-color: var(--vert); color: var(--texte); font-weight: 600; }
.onglets button { background: none; border: 0; border-bottom: 3px solid transparent; padding: .5rem .8rem; font: inherit; cursor: pointer; color: var(--texte-doux); }
.onglets button.actif { border-color: var(--vert); color: var(--texte); font-weight: 600; }
.file-attente { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1rem; display: none; }
.hors-ligne { background: #fee2e2; color: #991b1b; padding: .3rem .8rem; text-align: center; font-size: .85rem; display: none; }

/* Pied de page */
.pied { background: var(--vert-nuit); border-bottom: 4px solid var(--rouge); color: #cfe3d6; font-size: .8rem; border-top: 3px solid var(--or); margin-top: 2rem; }
.pied-interieur { max-width: 1400px; margin: 0 auto; padding: .9rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pied strong { color: #fff; }

/* Connexion, pages d'erreur, recherche dans les listes */
.connexion { max-width: 420px; margin: 3rem auto; }
.connexion .carte-bloc { padding: 2rem 1.9rem; border-top: 5px solid var(--vert); }
.connexion h1 { margin-bottom: .4rem; }
.connexion-logo { display: block; margin: 0 auto 1rem; }
.connexion h1, .connexion > .carte-bloc > p { text-align: center; }
.bouton.large { width: 100%; padding: .65rem; }
.centre { text-align: center; }
.page-erreur { max-width: 560px; margin: 3rem auto; text-align: center; padding: 2rem; }
.code-erreur { font-size: 3.4rem; font-weight: 800; color: var(--rouge); line-height: 1; margin-bottom: .5rem; }
.recherche-liste { width: 100%; margin-bottom: .35rem; }
tbody tr:nth-child(even) td { background: #fafbf9; }

pre.json { background: #1c1917; color: #e7e5e4; padding: 1rem; border-radius: 8px; overflow-x: auto; font-size: .8rem; }

@media (max-width: 1100px) {
  .menu-bouton { display: inline-block; }
  .barre-nav { flex-direction: column; align-items: stretch; }
  .nav { display: none; flex-direction: column; padding-bottom: .5rem; }
  .nav.ouvert { display: flex; }
  .nav a { border-bottom: 0; border-inline-start: 3px solid transparent; }
  .nav a.actif { border-inline-start-color: var(--or); }
}
@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(main.plein) { height: auto; overflow: visible; }
  main.plein { flex: 1 0 auto; }
  .carte-page { grid-template-columns: 1fr; grid-template-rows: 70vh auto; height: auto; }
  .carte-page .panneau { order: 2; border-inline-end: 0; border-top: 1px solid var(--bordure); }
}
@media (max-width: 700px) {
  .entete { position: static; }
  .entete-interieur { flex-wrap: wrap; padding: .5rem 1rem; min-height: 0; gap: .5rem; }
  .marque .sceau { width: 44px; height: 44px; }
  .marque .republique { font-size: .72rem; }
  .marque .devise { display: none; }
  .marque .organisme { font-size: 1.05rem; }
  .compte { width: 100%; justify-content: flex-start; font-size: .8rem; }
  main { padding: 1rem; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}