:root {
  /* ---- Identite visuelle "ARP" (bleu marine / or institutionnel) ----
     Memes NOMS de variables qu'avant : toute la plateforme herite du
     nouveau style sans qu'aucun autre fichier n'ait besoin d'etre touche. */
  --paper: #FAF9F6;
  --paper-alt: #F1EFE9;
  --ink: #1B1E24;
  --navy: #0E3B2D;
  --navy-dark: #082419;
  --teal: #1D5C43;
  --teal-dark: #143F2F;
  --gold: #A9791F;
  --gold-light: #D9BD7F;
  --amber: #8A6B22;
  --green: #2E6B45;
  --red: #A3312A;
  --line: #DCD8CC;
  --muted: #5B6270;
  --radius: 2px;
  --shadow: 0 2px 14px rgba(14, 59, 45, 0.08);
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
h2 { color: var(--navy); margin-top: 0; }

a { color: var(--teal-dark); }

/* ---------------------------------------------------------------------- */
/* En-tête / navigation                                                   */
/* ---------------------------------------------------------------------- */
.site-header {
  background: var(--navy);
  color: #EAF1EE;
  padding: 16px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 3px solid var(--gold);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-seal {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gold-light);
  background: var(--navy-dark);
  flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #fff; }
.brand-name .brand-accent { color: var(--gold-light); }
.brand-tagline {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A9C0BA;
}

.site-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-nav a {
  color: #CBDAD4;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: #fff; border-bottom-color: var(--gold-light); }
.site-nav .user-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #8FA69F;
  margin-right: 4px;
}

/* ---------------------------------------------------------------------- */
/* Structure générale                                                     */
/* ---------------------------------------------------------------------- */
.container { max-width: 920px; margin: 0 auto; padding: 0 20px; }

.hero {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #EAF1EE;
  padding: 46px 20px 58px;
  text-align: center;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 10px;
}
.hero h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 10px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hero p {
  color: #C3D3CD;
  max-width: 520px;
  margin: 0 auto;
  font-size: 0.98rem;
  line-height: 1.5;
}

.page-body { margin-top: -32px; padding-bottom: 50px; }

.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

/* ---------------------------------------------------------------------- */
/* Sections numérotées du dossier (formulaire public)                     */
/* ---------------------------------------------------------------------- */
.dossier-section { margin-bottom: 30px; }
.dossier-section:last-of-type { margin-bottom: 0; }

.dossier-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.dossier-number {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dossier-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy);
  font-weight: 600;
}

label {
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.87rem;
  color: var(--navy);
}

input[type=text], input[type=email], input[type=tel], select, textarea, input[type=file] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.94rem;
  background: #fff;
  font-family: var(--font-body);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
textarea { resize: vertical; min-height: 90px; }

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 220px; }

button, .btn {
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 11px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--teal);
  color: #fff;
  margin-top: 20px;
  font-family: var(--font-body);
}
button:hover, .btn:hover { background: var(--teal-dark); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary { background: #5C6B65; }
.btn-secondary:hover { background: #47534E; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #7E2321; }
.btn-success { background: var(--green); }
.btn-success:hover { background: #155C35; }
.btn-small { padding: 6px 12px; font-size: 0.8rem; margin-top: 0; }

.alert {
  padding: 14px 16px;
  border-radius: 5px;
  margin-top: 18px;
  font-size: 0.92rem;
}
.alert-success { background: #E4F2E9; color: var(--green); border: 1px solid #BEE0CA; }
.alert-error { background: #FBE9E8; color: var(--red); border: 1px solid #F0C4C1; }

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.badge-en_attente { background: #FBEDD6; color: var(--amber); }
.badge-en_verification { background: #E6EEE7; color: var(--teal-dark); }
.badge-validee { background: #DDEEE2; color: var(--green); }
.badge-rejetee { background: #F6DBDA; color: var(--red); }

footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 30px 10px;
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------------- */
/* Élément signature : carte "ticket" (numéro de suivi / certificat)      */
/* ---------------------------------------------------------------------- */
.ticket {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px dashed var(--gold);
  border-radius: 5px;
  padding: 26px 26px 22px;
  margin-top: 20px;
  animation: ticket-in 0.35s ease-out;
}
@keyframes ticket-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ticket-seal {
  position: absolute;
  top: -14px; right: 22px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--gold-light);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  transform: rotate(-8deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ticket-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.ticket-number {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.ticket-body { margin-top: 12px; font-size: 0.9rem; color: var(--ink); }
.ticket-body p { margin: 4px 0; }
.ticket-body strong { color: var(--navy); }

/* ---------------------------------------------------------------------- */
/* Zone de dépôt de fichiers (drag & drop)                                */
/* ---------------------------------------------------------------------- */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--paper-alt);
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover { border-color: var(--teal); }
.dropzone.dragover { border-color: var(--gold); background: #FBF3E1; }
.dropzone-icon-svg { color: var(--teal); margin-bottom: 6px; }
.dropzone-text { margin: 4px 0 2px; font-size: 0.95rem; color: var(--ink); }
.dropzone-text strong { color: var(--navy); }
.dropzone-hint { margin: 0; font-size: 0.8rem; color: var(--muted); }

.file-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}
.file-item-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.file-item-badge {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.badge-pdf { background: var(--red); }
.badge-img { background: #1C5F8A; }
.badge-doc { background: var(--teal); }
.badge-autre { background: #6c757d; }
.file-item-text { min-width: 0; }
.file-item-name { font-size: 0.87rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.file-item-size { font-size: 0.77rem; color: var(--muted); }
.file-item-remove { background: none; border: none; color: var(--red); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 8px; margin-top: 0; flex-shrink: 0; }
.file-item-remove:hover { color: #7E2321; background: none; }
.file-count { font-size: 0.83rem; color: var(--muted); margin-top: 10px; font-family: var(--font-mono); }

/* ---------------------------------------------------------------------- */
/* Espace de validation (back-office)                                     */
/* ---------------------------------------------------------------------- */
.admin-wrap { max-width: 1120px; margin: 30px auto; padding: 0 20px; }
.login-wrap { max-width: 400px; margin: 70px auto; padding: 0 20px; }

.login-card-header { text-align: center; margin-bottom: 22px; }
.login-card-header .brand-seal { margin: 0 auto 14px; width: 52px; height: 52px; font-size: 1.15rem; }
.login-card-header h2 { margin-bottom: 2px; }
.login-card-header p { color: var(--muted); font-size: 0.85rem; margin: 0; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
}
.stat-card .value {
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 4vw, 2rem);
  font-weight: 600;
  color: var(--navy);
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.15;
}
.stat-card .label { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
.stat-card.clickable { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.stat-card.clickable:hover { box-shadow: 0 4px 14px rgba(11, 36, 24, 0.12); transform: translateY(-1px); }

#statsGrid { display: block; }

.stats-section { margin-bottom: 26px; }
.stats-section:last-child { margin-bottom: 0; }
.stats-section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.stats-row-featured { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.stat-ring-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 22px;
  box-shadow: var(--shadow);
  min-width: 230px;
}
.stat-ring-title { font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: 0.95rem; }
.stat-ring-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  flex: 1;
  min-width: 260px;
}
.stat-card-v2 {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, var(--teal));
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-card-v2 .value {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
  word-break: break-word;
}
.stat-card-v2 .label { font-size: 0.76rem; color: var(--muted); margin-top: 5px; line-height: 1.3; }
.stat-card-v2.clickable { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.stat-card-v2.clickable:hover { box-shadow: 0 4px 14px rgba(11, 36, 24, 0.12); transform: translateY(-1px); }

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.87rem; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
th { background: var(--paper-alt); color: var(--navy); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover { background: #F8FAF9; }
td:first-child, th:first-child { font-family: var(--font-mono); }

.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filters select, .filters input { width: auto; }

.pagination { display: flex; gap: 8px; margin-top: 14px; align-items: center; }

.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(11, 36, 24, 0.55);
  align-items: center; justify-content: center;
  z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff;
  border-radius: var(--radius);
  border-top: 4px solid var(--gold);
  padding: 30px 36px;
  width: 94%;
  max-width: 1180px;
  max-height: 92vh;
  overflow-y: auto;
}
.modal-box h3 { margin-top: 0; font-family: var(--font-mono); color: var(--navy); font-size: 1.1rem; }
.doc-list { list-style: none; padding: 0; }
.doc-list li { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 0.88rem; }
.doc-list a { color: var(--teal-dark); cursor: pointer; }

/* ---- Bandeau d'en-tête des pages de l'espace de validation ---- */
.page-header {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #EAF1EE;
  padding: 26px 30px 36px;
}
.page-header-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.page-header h2 { color: #fff; margin: 0 0 4px; font-size: 1.5rem; }
.page-header p { color: #C3D3CD; margin: 0; font-size: 0.88rem; max-width: 560px; }

.admin-wrap { margin-top: -20px; }

/* ---- Fiche de demande en grille de champs (détail) ---- */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin: 14px 0 18px;
}
.field-grid .field-full { grid-column: 1 / -1; }
.field-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 2px;
}
.field-value { font-size: 0.92rem; color: var(--ink); }
.field-value.empty { color: var(--muted); font-style: italic; }

/* ---- Encart certificat de validation (mini-tampon) ---- */
.cert-box {
  border: 1px dashed var(--gold);
  border-radius: 5px;
  padding: 10px 14px;
  background: #FBF6EA;
  margin-top: 8px;
  font-size: 0.85rem;
}
.cert-box a { color: var(--teal-dark); cursor: pointer; font-weight: 600; }
.cert-box .cert-meta { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }

/* ---- Badges de rôle utilisateur ---- */
.badge-admin { background: var(--navy); color: var(--gold-light); }
.badge-validateur { background: #DDEEE2; color: var(--teal-dark); }

/* ---- Badges de type d'action (journal d'audit) ---- */
.badge-connexion { background: #E3ECEF; color: #2C5F73; }
.badge-validation { background: #DDEEE2; color: var(--green); }
.badge-rejet { background: #F6DBDA; color: var(--red); }
.badge-creation_utilisateur { background: #FBEDD6; color: var(--amber); }
.badge-suppression_utilisateur { background: #F0E3EC; color: #7A3B63; }

/* ---- Logo personnalisé dans le sceau de marque ---- */
.brand-seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.logo-preview {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--paper-alt);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}
.logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.badge-modification_parametres { background: #E3ECEF; color: #2C5F73; }

/* ---- Badge action "resoumission" (journal d'audit) ---- */
.badge-resoumission { background: #FBEDD6; color: var(--amber); }

/* ---- Badge action "consultation_document" (journal d'audit) ---- */
.badge-consultation_document { background: #E6EEE7; color: var(--teal-dark); }

/* ---- Badge action "suppression_demande" (journal d'audit) ---- */
.badge-suppression_demande { background: #F6DBDA; color: var(--red); }

/* ---- Badges actions "archivage" / "desarchivage" (journal d'audit) ---- */
.badge-archivage { background: #E6EEE7; color: var(--muted); }
.badge-desarchivage { background: #DDEEE2; color: var(--teal-dark); }

/* ---- Badges actions de messagerie (journal d'audit) ---- */
.badge-message_demandeur { background: #FBEDD6; color: var(--amber); }
.badge-reponse_message { background: #DDEEE2; color: var(--teal-dark); }

/* ---- Badge action "nouvelle_demande" (journal d'audit) ---- */
.badge-nouvelle_demande { background: #E6EEE7; color: var(--teal-dark); }

/* ---- Bannieres de verdict (espace douane) ---- */
.verdict { padding: 26px; border-radius: 8px; text-align: center; }
.verdict-icone { font-size: 2.4rem; margin-bottom: 6px; line-height: 1; }
.verdict-titre { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; }
.verdict-ok { background: #DDEEE2; color: var(--green); border: 2px solid var(--green); }
.verdict-attente { background: #FBEDD6; color: var(--amber); border: 2px solid var(--amber); }
.verdict-rejet { background: #F6DBDA; color: var(--red); border: 2px solid var(--red); }

/* ---- Badge action "verification_douane" (journal d'audit) ---- */
.badge-verification_douane { background: #E3ECEF; color: #2C5F73; }

/* ---- Badges actions du catalogue produits (journal d'audit) ---- */
.badge-ajout_produit_catalogue { background: #DDEEE2; color: var(--teal-dark); }
.badge-suppression_produit_catalogue { background: #F6DBDA; color: var(--red); }

/* ---- Badge action "import_catalogue" (journal d'audit) ---- */
.badge-import_catalogue { background: #E6EEE7; color: var(--teal-dark); }

/* ---- Badge action "modification_utilisateur" (journal d'audit) ---- */
.badge-modification_utilisateur { background: #E6EEE7; color: var(--teal-dark); }

/* ---- Badge statut "en_examen_technique" ---- */
.badge-en_examen_technique { background: #FBEDD6; color: var(--amber); }

/* ---------------------------------------------------------------------- */
/* Barre laterale de navigation (espace de validation)                    */
/* ---------------------------------------------------------------------- */
.app-layout {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--navy);
  color: #EAF1EE;
  display: flex;
  flex-direction: column;
  border-right: 3px solid var(--gold);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  flex: 1;
}

.sidebar-nav a {
  color: #CBDAD4;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 11px 20px;
  border-left: 3px solid transparent;
}

.sidebar-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-left-color: var(--gold-light);
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-footer .user-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8FA69F;
  word-break: break-word;
}

.sidebar-footer a {
  color: #CBDAD4;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}
.sidebar-footer a:hover { color: #fff; }

.main-content {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

@media (max-width: 900px) {
  .app-layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .sidebar-brand { border-bottom: none; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; padding: 8px 12px; }
  .sidebar-nav a { border-left: none; border-bottom: 3px solid transparent; padding: 8px 10px; }
  .sidebar-nav a:hover { border-left: none; border-bottom-color: var(--gold-light); }
  .sidebar-footer { border-top: none; flex-direction: row; align-items: center; padding: 8px 20px 14px; }
}

/* ---- Badge statut "rejetee_definitive" ---- */
.badge-rejetee_definitive { background: #F6DBDA; color: var(--red); }

/* ---- Badge action "ecart_reception" (journal d'audit) ---- */
.badge-ecart_reception { background: #FBEDD6; color: var(--amber); }

/* ---- Badges des nouveaux statuts du workflow de paiement ---- */
.badge-en_attente_paiement { background: #FBEDD6; color: var(--amber); }
.badge-quittance_a_verifier { background: #FBEDD6; color: var(--amber); }
.badge-en_attente_validation_finale { background: #DDEEE2; color: var(--teal-dark); }

/* ======================================================================
   PATCH RESPONSIVE PLATEFORME -- adaptation mobile / tablette
   ====================================================================== */

/* Tableaux : defilement horizontal dans leur encadre plutot que
   compression illisible ou debordement de page. S'applique a tous les
   tableaux, quelle que soit la page, sans changement de HTML.
   overflow-x:auto sur .card est sans effet indesirable pour les cartes
   qui ne contiennent pas de tableau (les graphiques ne debordent pas),
   et n'a aucun effet visuel tant que le contenu ne deborde pas. */
.card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  /* Conteneur principal : moins de marge laterale perdue */
  .admin-wrap { padding: 0 14px; margin: 20px auto; }
  .card { padding: 20px; }
  .page-header { padding: 20px; }
  .page-header h2 { font-size: 1.25rem; }

  /* Les tableaux gardent une largeur minimale lisible et defilent
     horizontalement dans leur encadre plutot que de se compresser */
  table { min-width: 560px; }
}

@media (max-width: 640px) {
  /* Grilles de statistiques : cartes plus etroites sur telephone */
  .stats-row, .stats-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .stats-row-featured { flex-direction: column; }
  .stat-ring-card { width: 100%; box-sizing: border-box; }

  /* Formulaires : un seul champ par ligne des que l'espace se resserre */
  .row > div { min-width: 100%; }

  /* Modales : moins de marge interne, plus proche des bords sur petit
     ecran, tout en restant lisible */
  .modal-box { padding: 18px; width: 94%; max-height: 90vh; }

  /* Cartes generiques */
  .card { padding: 16px; }

  /* En-tete de page (site-header / page-header) : empilement propre */
  .site-header { padding: 14px 16px; }
  .brand-tagline { display: none; }

  /* Boutons pleine largeur dans les listes d'actions etroites, pour
     eviter des rangees de boutons trop serrees */
  .cert-box button, .cert-box .btn { margin-top: 8px; }
}

@media (max-width: 420px) {
  /* Tres petits telephones : dernier ajustement pour eviter tout
     debordement horizontal residuel */
  body { font-size: 0.94rem; }
  .stats-row, .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Onglets du detail d'un dossier (entreprise + admin) ---- */
.detail-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 14px 0 18px; overflow-x: auto; }
.detail-tab-btn {
  padding: 9px 15px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 0;
  border-radius: 0;
}
.detail-tab-btn:hover { color: var(--navy); background: var(--paper-alt); }
.detail-tab-btn.active { color: var(--navy); border-bottom-color: var(--gold); background: none; }
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }

/* ---- Presentation en cartes des documents (icones par type) ---- */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.doc-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.doc-card .doc-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
}
.doc-icon.pdf { background: var(--red); }
.doc-icon.img { background: var(--teal); }
.doc-icon.doc { background: var(--gold); }
.doc-icon.xls { background: var(--green); }
.doc-icon.other { background: var(--muted); }
.doc-card .doc-info { min-width: 0; flex: 1; }
.doc-card .doc-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-card .doc-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.doc-card .doc-actions { display: flex; gap: 8px; margin-top: 5px; font-size: 0.78rem; flex-wrap: wrap; }
.doc-card .doc-actions a { cursor: pointer; }

/* ---- Badge de statut d'assignation ---- */
.badge-assigne-oui { background: #DDEEE2; color: var(--teal-dark); }
.badge-assigne-non { background: #F6DBDA; color: var(--red); }

/* ---- Formulaire par etapes (enrolement) ---- */
.wizard-steps { display: flex; gap: 2px; margin-bottom: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.wizard-step-indicator {
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.wizard-step-indicator.active { color: var(--navy); border-bottom-color: var(--gold); }
.wizard-step-indicator.complete { color: var(--teal-dark); }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }
.wizard-actions { display: flex; justify-content: space-between; margin-top: 18px; gap: 10px; }

/* ---- Texte explicatif du parcours d'enrolement ---- */
.parcours-explication {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.82rem;
  color: var(--muted);
}
.parcours-explication strong { color: var(--navy); }
.parcours-explication ol { margin: 8px 0 0; padding-left: 18px; }
.parcours-explication li { margin-bottom: 4px; }

/* ---- Conteneur elargi pour la liste des demandes (tableau a 11
   colonnes, beneficie de plus d'espace horizontal) ---- */
.admin-wrap-large { max-width: 1500px; }

/* ---- Guide des etapes et de la prochaine action ---- */
.etapes-guide { margin-bottom: 16px; }
.etapes-stepper { display: flex; align-items: flex-start; margin-bottom: 12px; overflow-x: auto; }
.etape-item { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 92px; }
.etape-item .etape-cercle {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper-alt); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  border: 1px solid var(--line);
}
.etape-item.complete .etape-cercle { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }
.etape-item.active .etape-cercle { background: var(--gold); color: #fff; border-color: var(--gold); }
.etape-item.rejetee .etape-cercle { background: var(--red); color: #fff; border-color: var(--red); }
.etape-item .etape-label { font-size: 0.68rem; color: var(--muted); text-align: center; margin-top: 4px; line-height: 1.2; }
.etape-item.active .etape-label, .etape-item.complete .etape-label { color: var(--navy); font-weight: 600; }
.etape-connecteur { flex: 1; height: 1px; background: var(--line); margin-top: 13px; min-width: 12px; }
.etape-connecteur.complete { background: var(--teal-dark); }
.etape-guide-texte {
  background: var(--paper-alt);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.85rem;
}
.etape-guide-texte strong { color: var(--navy); }

/* ---- Styles du mockup (tableau de bord entreprise) ---- */
.mockup-welcome-bar{background:var(--navy);color:#fff;padding:26px 28px 24px;margin:-30px -30px 24px;}
.mockup-welcome-inner{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;}
.mockup-welcome-title{font-family:'Newsreader',serif;font-size:24px;font-weight:600;margin:0 0 6px;}
.mockup-welcome-sub{font-size:12.5px;color:#C9D2E3;}
.mockup-kpi-row{display:flex;gap:14px;flex-wrap:wrap;}
.mockup-kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:12px 18px;min-width:120px;}
.mockup-kpi .n{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;line-height:1;}
.mockup-kpi .l{font-size:10.5px;color:#C9D2E3;text-transform:uppercase;letter-spacing:.06em;margin-top:6px;}

.mockup-body-grid{display:grid;grid-template-columns:1fr 300px;gap:28px;}
.mockup-cta-strip{display:flex;justify-content:space-between;align-items:center;background:var(--gold-light);border:1px solid #E4D2A0;padding:16px 20px;margin-bottom:24px;}
.mockup-cta-strip .t{font-size:13px;font-weight:600;color:#7A5A14;}
.mockup-cta-strip .s{font-size:11.5px;color:#8A6B22;margin-top:2px;}

.mockup-filter-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.mockup-filter-tab{font-size:12px;font-weight:600;padding:7px 13px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;border-radius:2px;}
.mockup-filter-tab.active{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;}

.mockup-dossier-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--line);}
.mockup-dossier-table th{text-align:left;background:var(--paper-alt);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:11px 14px;font-weight:700;border-bottom:1px solid var(--line);}
.mockup-dossier-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
.mockup-dossier-table tr:last-child td{border-bottom:none;}
.mockup-dossier-table tr:hover td{background:#FAFAF8;cursor:pointer;}
.mockup-dref{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal-dark);font-weight:600;}
.mockup-prog-mini{width:90px;height:5px;background:var(--paper-alt);border-radius:3px;overflow:hidden;}
.mockup-prog-mini span{display:block;height:100%;background:var(--teal-dark);}
.mockup-link-action{font-size:12px;color:var(--teal-dark);font-weight:600;text-decoration:none;}
.mockup-link-action:hover{text-decoration:underline;}
.mockup-empty-note{font-size:12px;color:var(--muted);text-align:center;padding:30px;}

.mockup-side-block{margin-bottom:28px;}
.mockup-side-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:12px;}
.mockup-checklist{list-style:none;margin:0;padding:0;}
.mockup-checklist li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:11px;line-height:1.4;}
.mockup-checklist li .mark{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;}
.mockup-checklist li.active .mark{border-color:var(--teal-dark);}
.mockup-checklist li.active{color:var(--ink);font-weight:500;}
.mockup-info-card{background:#fff;border:1px solid var(--line);padding:16px;border-radius:2px;font-size:12px;color:var(--muted);line-height:1.6;}
.mockup-info-card strong{color:var(--ink);display:block;font-size:14.5px;margin-bottom:6px;font-family:'Newsreader',serif;font-weight:600;}

.mockup-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:2px;}
.mockup-badge-blue{background:var(--gold-light);color:#7A5A14;}
.mockup-badge-green{background:#E5F0E7;color:#2E6B45;}
.mockup-badge-red{background:#F6E7E5;color:var(--red);}
.mockup-badge-grey{background:var(--paper-alt);color:var(--muted);border:1px solid var(--line);}

@media (max-width:860px){ .mockup-body-grid{grid-template-columns:1fr;} }

/* ---- Styles du mockup (liste des demandes, espace validation) ---- */
.mockup-filter-tabs2{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.mockup-filter-tab2{font-size:12px;font-weight:600;padding:7px 13px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;border-radius:2px;}
.mockup-filter-tab2.active{background:var(--navy);border-color:var(--navy);color:#fff;}

.mockup-dtable{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--line);}
.mockup-dtable th{text-align:left;background:var(--paper-alt);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:11px 14px;font-weight:700;border-bottom:1px solid var(--line);}
.mockup-dtable td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
.mockup-dtable tr:last-child td{border-bottom:none;}
.mockup-dref{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal-dark);font-weight:600;}
.mockup-avatar{width:22px;height:22px;border-radius:50%;background:var(--teal-dark);color:#fff;font-size:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-right:6px;}
.mockup-delay-ok{color:var(--teal-dark);font-weight:600;font-size:12px;}
.mockup-delay-warn{color:var(--red);font-weight:600;font-size:12px;}

.mockup-etape-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:2px;}
.mockup-etape-gold{background:var(--gold-light);color:#7A5A14;}
.mockup-etape-amber{background:#FBE9C6;color:#8A6B22;}
.mockup-etape-green{background:#E5F0E7;color:#2E6B45;}
.mockup-etape-red{background:#F6E7E5;color:var(--red);}
.mockup-etape-grey{background:var(--paper-alt);color:var(--muted);border:1px solid var(--line);}

/* ---- Tableau de bord de pilotage (Direction Generale) ---- */
.pilotage-kpi-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.pilotage-kpi{background:#fff;border:1px solid var(--line);padding:16px 20px;flex:1;min-width:170px;}
.pilotage-kpi .n{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;color:var(--teal-dark);line-height:1;}
.pilotage-kpi .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:8px;}

.pilotage-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.pilotage-section-title{font-family:'Newsreader',serif;font-size:16px;font-weight:600;margin:0 0 16px;color:var(--navy);}

.pilotage-barre-ligne{display:grid;grid-template-columns:150px 1fr 50px;align-items:center;gap:12px;margin-bottom:14px;font-size:12.5px;}
.pilotage-barre-label{color:var(--ink,#1B1E24);}
.pilotage-barre-piste{height:8px;background:var(--paper-alt);border-radius:4px;overflow:hidden;}
.pilotage-barre-remplie{height:100%;background:var(--teal-dark);border-radius:4px;}
.pilotage-barre-valeur{text-align:right;font-weight:600;color:var(--navy);}

@media (max-width:860px){ .pilotage-grid-2{grid-template-columns:1fr;} }