/* Mini design system BSTP (repris de l'observatoire) */
:root {
  --primaire: #1e2a78;
  --accent: #f7711c;
  --fond: #f6f7fb;
  --fond-doux: #ffffff;
  --texte: #21283b;
  --attenue: #5b6577;
  --ligne: #e4e8f0;
  --ok: #16a34a;
  --danger: #e11d48;
  --rayon: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Segoe UI", system-ui, sans-serif; background: var(--fond);
       color: var(--texte); font-size: 15px; line-height: 1.5;
       display: flex; flex-direction: column; min-height: 100vh; }
.conteneur { width: min(1080px, 92%); margin: 0 auto; }

.entete { background: var(--primaire); color: #fff; padding: 14px 0; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; }
.marque { display: inline-flex; align-items: center; text-decoration: none; }
/* Logo sur cartouche blanc : le texte bleu du logo resterait illisible sur navy */
.marque img { height: 44px; width: auto; display: block;
  background: #fff; border-radius: 9px; padding: 3px 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .15s; }
.marque:hover img { transform: scale(1.04); }
.entete nav { display: flex; gap: 16px; align-items: center; }
.entete nav a { color: rgba(255,255,255,.9); text-decoration: none; font-size: 14px; }
.entete nav > a:hover, .menu-titre:hover { color: #fff; }
.nav-utilisateur { color: var(--accent); font-weight: 600; font-size: 14px; }

/* Menus déroulants (structure Entreprises / Adhésion / Courrier / Paramètres) */
.menu { position: relative; }
.menu-titre {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px;
  color: rgba(255,255,255,.9); padding: 6px 0; display: inline-flex;
  align-items: center; gap: 4px;
}
/* pont invisible : évite la fermeture du survol en passant sur l'espace */
.menu::after { content: ""; position: absolute; left: 0; right: -8px; top: 100%; height: 10px; }
.sous-menu {
  position: absolute; top: 100%; left: 0; margin-top: 8px; min-width: 220px;
  background: #fff; border: 1px solid var(--ligne); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(30,42,120,.18); padding: 6px; z-index: 60;
  display: none;
}
.menu:hover .sous-menu, .menu:focus-within .sous-menu { display: block; }
/* .entete nav (préfixe) : bat la spécificité de « .entete nav a » (texte blanc)
   qui rendait sinon les liens de sous-menu invisibles (blanc sur blanc). */
.entete nav .sous-menu a {
  display: block; color: var(--texte); font-size: 14px; padding: 8px 12px;
  border-radius: 7px; white-space: nowrap;
}
.entete nav .sous-menu a:hover { background: rgba(247,113,28,.14); color: var(--primaire); }
.menu-titre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Menu utilisateur : icône initiales à droite, allège la barre de menus */
.menu-user { margin-left: auto; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.35); background: var(--accent); color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: .3px;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s;
}
.menu-user:hover .avatar, .menu-user:focus-within .avatar { border-color: #fff; }
.avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sous-menu-droite { left: auto; right: 0; }
.user-info { padding: 4px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ligne); }
.user-info b { display: block; color: var(--texte); font-size: 14px; }
.user-role { color: var(--attenue); font-size: 12px; text-transform: capitalize; }
.entete nav .sous-menu a.lien-deconnexion { color: var(--danger); font-weight: 600; }
.entete nav .sous-menu a.lien-deconnexion:hover { background: #fdeaea; color: var(--danger); }

/* Étiquettes (chips) du tableau de bord */
.etiquettes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.etiquette {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--fond-doux); border: 1px solid var(--ligne); border-radius: 999px;
  padding: 7px 8px 7px 14px; font-size: 13px; color: var(--texte); transition: .15s;
}
.etiquette:hover { border-color: var(--accent); box-shadow: 0 3px 10px rgba(30,42,120,.10); }
.etiquette .compte {
  background: var(--primaire); color: #fff; font-weight: 700; font-size: 12px;
  min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.etiquette-ent { padding: 7px 14px; font-weight: 600; }
.etiquette-ent .code { color: var(--attenue); font-weight: 400; font-size: 11.5px; }
.pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pastille-do { background: var(--accent); }
.pastille-st { background: var(--primaire); }

/* Rail de navigation des 20 blocs de la fiche : numéros fixes à droite ;
   le libellé se déroule vers la gauche au survol/focus, clic = défilement. */
html { scroll-behavior: smooth; }
.carte[id] { scroll-margin-top: 16px; }
.rail-blocs { position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  pointer-events: none; }
.rail-blocs a { pointer-events: auto; display: flex; align-items: center;
  justify-content: flex-end; text-decoration: none; outline: none; }
.rail-blocs .num { width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--fond-doux); border: 1px solid var(--ligne); color: var(--attenue);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 6px rgba(30,42,120,.10);
  transition: background .15s, color .15s, border-color .15s; }
.rail-blocs a:hover .num, .rail-blocs a:focus-visible .num {
  background: var(--accent); color: #fff; border-color: var(--accent); }
.rail-blocs .lib { min-width: 0; max-width: 0; overflow: hidden; opacity: 0;
  white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--primaire);
  background: var(--fond-doux); border: 1px solid var(--ligne); border-radius: 999px;
  padding: 6px 0; margin-right: 8px; box-shadow: 0 8px 22px rgba(30,42,120,.16);
  transition: max-width .28s ease, padding .28s ease, opacity .18s ease; }
.rail-blocs a:hover .lib, .rail-blocs a:focus-visible .lib {
  max-width: 250px; padding: 6px 13px; opacity: 1; }
/* Pas de place pour le rail à côté du contenu en dessous de ~1180 px */
@media (max-width: 1180px) { .rail-blocs { display: none; } }

/* En-tête d'amorce + info-bulle (texte explicatif au survol / focus) */
.entete-amorce { display: flex; align-items: center; gap: 10px; }
.info-bulle { position: relative; flex: none; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ligne); color: var(--attenue);
  font-size: 12px; font-weight: 700; font-style: italic; cursor: help;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none; transition: background .15s, color .15s; }
.info-bulle:hover, .info-bulle:focus-visible { background: var(--accent); color: #fff; outline: none; }
.info-bulle::after { content: attr(data-info);
  position: absolute; top: 140%; left: 0; width: 320px; max-width: 72vw;
  background: var(--texte); color: #fff; font: 400 12.5px/1.45 inherit;
  text-align: left; padding: 10px 12px; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(30,42,120,.28); z-index: 70;
  opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.info-bulle:hover::after, .info-bulle:focus-visible::after { opacity: 1; visibility: visible; }

/* Écran d'amorce : formulaire à gauche, indicateur d'étapes vertical à droite */
.layout-amorce { display: grid; grid-template-columns: minmax(0,1fr) 300px;
  gap: 28px; align-items: start; margin-top: 24px; }
@media (max-width: 860px) { .layout-amorce { grid-template-columns: 1fr; } }

/* Indicateur d'étapes du processus d'ajout (amorce → fiche) */
.etapes-amorce { list-style: none; display: flex; flex-direction: column; gap: 22px;
  margin: 6px 0 0; padding: 0; }
@media (max-width: 860px) { .etapes-amorce { flex-direction: row; flex-wrap: wrap; gap: 10px; } }
.etapes-amorce li { display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--attenue);
  background: var(--fond-doux); border: 1px solid var(--ligne);
  border-radius: 999px; padding: 6px 16px 6px 6px; }
.etapes-amorce li span { width: 22px; height: 22px; border-radius: 50%;
  background: var(--ligne); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; }
.etapes-amorce li.active { color: var(--primaire); border-color: var(--accent); }
.etapes-amorce li.active span { background: var(--accent); }

/* Paramètres : barre latérale gauche + contenu */
.layout-parametres { display: grid; grid-template-columns: 226px 1fr; gap: 28px;
  margin-top: 24px; align-items: start; }
.barre-laterale { position: sticky; top: 20px; }
.barre-laterale-titre { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--attenue); margin: 0 0 10px 12px; }
.menu-lateral { display: flex; flex-direction: column; gap: 2px;
  background: var(--fond-doux); border: 1px solid var(--ligne);
  border-radius: 12px; padding: 8px; }
.menu-lateral a { display: block; padding: 8px 12px; border-radius: 8px;
  color: var(--texte); text-decoration: none; font-size: 14px; transition: background .12s; }
.menu-lateral a:hover { background: rgba(247,113,28,.12); }
.menu-lateral a.actif { background: var(--primaire); color: #fff; font-weight: 600; }
.menu-lateral-groupe { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--attenue); margin: 14px 0 4px; padding: 0 12px; }
.parametres-contenu { min-width: 0; }
.parametres-contenu > :first-child { margin-top: 0; }
@media (max-width: 800px) {
  .layout-parametres { grid-template-columns: 1fr; }
  .barre-laterale { position: static; }
}

/* Annuaire sectoriel : grille des secteurs (niveau 1) */
.annuaire-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
@media (max-width: 900px) { .annuaire-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .annuaire-grille { grid-template-columns: 1fr; } }
.annuaire-secteur .lien { font-size: 13.5px; }
.annuaire-secteur .attenue { font-size: 12.5px; margin: 2px 0 0 24px; }

/* Demandes : légende du workflow + matrice compacte */
.btn-etape { background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 14px; color: #2563eb; padding: 0 2px; }
.btn-etape:hover { transform: scale(1.25); }
.legende-demandes { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px;
  color: var(--attenue); font-size: 12px; }
.tableau-demandes { font-size: 12.5px; }
.tableau-demandes th { font-size: 10.5px; padding: 6px 6px; line-height: 1.25; }
.tableau-demandes th small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.tableau-demandes td { padding: 7px 6px; }

/* Courrier : dossiers + filtres à gauche, table des archives à droite */
.layout-courrier { display: grid; grid-template-columns: 230px 1fr; gap: 20px;
  align-items: start; }
.layout-courrier aside { display: flex; flex-direction: column; gap: 14px; }
.compte-dossier { float: right; background: var(--primaire); color: #fff;
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 9px; }
.menu-lateral a.actif .compte-dossier { background: var(--accent); }
.filtre-courrier { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.filtre-courrier label { display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px; font-weight: 600; color: var(--attenue); }
.filtre-courrier input, .filtre-courrier select {
  border: 1px solid var(--ligne); border-radius: 8px; padding: 7px 9px; font: inherit; }
.filtre-courrier .ligne-check { flex-direction: row; align-items: center; }
.filtre-courrier .bouton { padding: 9px 14px; margin-top: 2px; }
@media (max-width: 800px) { .layout-courrier { grid-template-columns: 1fr; } }

main { flex: 1; }
.carte { background: var(--fond-doux); border: 1px solid var(--ligne);
         border-radius: var(--rayon); padding: 28px; }
.carte-etroite { max-width: 420px; margin-left: auto; margin-right: auto; }
h1 { font-size: 24px; color: var(--primaire); margin-bottom: 8px; }
.sous-titre { color: var(--attenue); margin-bottom: 16px; }

.formulaire { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.titre-groupe { font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--primaire); margin: 10px 0 -2px; padding-top: 12px;
  border-top: 1px solid var(--ligne); }
.formulaire label { display: flex; flex-direction: column; gap: 6px;
                    font-size: 13px; font-weight: 600; color: var(--attenue); }
.formulaire input, .formulaire select, .formulaire textarea {
  border: 1px solid var(--ligne); border-radius: 10px; padding: 11px 13px;
  font: inherit; max-width: 100%; }
/* Un libellé long dans un <select> ne doit pas élargir sa colonne de grille */
.grille-2 > label { min-width: 0; }
.grille-2 select { width: 100%; }
.formulaire input:focus { outline: 2px solid var(--primaire); border-color: transparent; }

.bouton { display: inline-block; background: var(--accent); color: #fff; border: 0;
          border-radius: 10px; padding: 11px 20px; font: inherit; font-weight: 700;
          cursor: pointer; text-decoration: none; }
.bouton:hover { filter: brightness(1.05); }

.message { border-radius: 10px; padding: 12px 16px; margin: 16px 0; font-size: 14px; }
.message-succes { background: #e8f7ee; color: #15803d; }
.message-erreur { background: #fde8ed; color: #be123c; }

.pied { border-top: 1px solid var(--ligne); color: var(--attenue);
        font-size: 13px; padding: 16px 0; margin-top: 40px; }

/* ── Compléments BSTP-ENTREPRISE ── */
.barre-outils { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.filtres { display:flex; gap:10px; margin:0 0 16px; flex-wrap:wrap; }
.filtres input, .filtres select { border:1px solid var(--ligne); border-radius:10px; padding:10px 13px; font:inherit; }
.filtres input[type=text] { flex:1; min-width:180px; }
.grille-kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
/* Cartes indicateurs compactes (padding réduit vs .carte, chiffres resserrés) */
.kpi { display:flex; flex-direction:column; gap:2px; align-items:flex-start;
       padding:12px 16px; }
.kpi b { font-size:21px; color:var(--primaire); line-height:1.2; }
.kpi .attenue { line-height:1.3; }
.grille-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:800px){ .grille-2{ grid-template-columns:1fr; } }
.tableau { width:100%; border-collapse:collapse; font-size:14px; }
.tableau th { text-align:left; color:var(--attenue); font-size:12px; text-transform:uppercase; letter-spacing:.4px; padding:8px 10px; border-bottom:2px solid var(--ligne); }
.tableau td { padding:10px; border-bottom:1px solid var(--ligne); vertical-align:top; }
.attenue { color:var(--attenue); font-size:12px; }
.lien { color:var(--primaire); font-weight:600; font-size:13px; text-decoration:none; }
.lien:hover { color:var(--accent); }
.pager { display:flex; align-items:center; gap:16px; justify-content:center; margin-top:16px; }
.bouton-plat { color:var(--primaire); font-weight:600; text-decoration:none; font-size:14px; }
.badge { display:inline-block; border-radius:999px; padding:3px 12px; font-size:12px; font-weight:700; }
.badge-reporte { background:#fdf3e0; color:#b45309; }
.ligne-check { display:flex; align-items:center; gap:8px; font-size:14px; }
/* Dans .formulaire, `.formulaire label` (0,1,1) force flex-direction:column ;
   on le neutralise ici avec une spécificité supérieure (0,2,1). */
.formulaire label.ligne-check { flex-direction:row; }

.lien-danger{color:#be123c}
.actions{display:flex;gap:12px;align-items:center}
.actions form{display:inline}
.badge-ok{background:#e8f7ee;color:#15803d;display:inline-block;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}
.jauge{display:inline-block;width:100%;max-width:220px;height:9px;background:#eef1f6;border-radius:999px;overflow:hidden;vertical-align:middle;margin-right:8px}
.jauge-barre{height:100%;background:var(--primaire);border-radius:999px}
.recherche-avancee{border-top:1px solid #e4e8f0;padding-top:10px}
.grille-avancee{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.grille-avancee label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--attenue)}
.grille-avancee input,.grille-avancee select{padding:7px 9px}
.bandeau-fusion{background:#fdf3e0;border:1px solid #f0c98a;color:#8a5a12;border-radius:10px;padding:12px 16px;margin-top:14px}
.badge-impaye{background:#fdeaea;color:#be123c;display:inline-block;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}