/* Booba : bandeau nuit, contenu clair. Accent indigo ; couleurs des natures reprises de la Console GRP (CourrierSortantVue.cs). */
:root {
  --b-nuit: #14183A;
  --b-nuit-2: #20265A;
  --b-encre: #1B1F3B;
  --b-gris: #5B6180;
  --b-trait: #DCDFEC;
  --b-fond: #F4F5FA;
  --b-carte: #FFFFFF;
  --b-accent: #3B44C4;
  --b-accent-doux: #E6E8FB;
  --b-ok: #2F8F5B;
  --b-surveiller: #C7811A;
  --b-traiter: #C63E4A;
  --b-clos: #8A90A8;
  --civ-homme: #1d5fb3; --civ-homme-fond: #dbe8fb;
  --civ-femme: #c0357f; --civ-femme-fond: #fbe0ee;
  --civ-couple: #6d3fb5; --civ-couple-fond: #ebe1fa;
  --civ-morale: #9a6208; --civ-morale-fond: #fbecd2;
  --civ-inconnu: #5f697c; --civ-inconnu-fond: #e9edf4;
}

body { background: var(--b-fond); color: var(--b-encre); font-size: 15px; }
.ico { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; flex: none; }
[hidden] { display: none !important; }

/* Bandeau */
.b-bandeau { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  background: var(--b-nuit); color: #E9ECFF; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.b-marque { font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; color: #fff; text-decoration: none; }
.b-recherche { position: relative; flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; margin: 0; }
.b-recherche input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-size: 1rem; }
.b-recherche input::placeholder { color: #A9AFD6; }
.b-recherche:focus-within { border-color: #8C93FF; box-shadow: 0 0 0 3px rgba(140,147,255,.25); }
.b-resultats { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--b-carte); color: var(--b-encre);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(20,24,58,.25); overflow: hidden; max-height: 70vh; overflow-y: auto; }
.b-resultat { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--b-trait); }
.b-resultat:last-child { border-bottom: 0; }
.b-resultat[aria-selected="true"], .b-resultat:hover { background: var(--b-accent-doux); }
.b-resultat .b-r-nom { font-weight: 600; }
.b-resultat .b-r-cpl { color: var(--b-gris); font-size: .85rem; }
.b-resultat .b-r-roles { margin-left: auto; color: var(--b-gris); font-size: .8rem; text-align: right; }
.b-resultats .b-r-vide { padding: 12px 14px; color: var(--b-gris); }
.b-resultats .b-r-duree { padding: 4px 14px; font-size: .72rem; color: var(--b-clos); text-align: right; }
.b-actions { display: flex; align-items: center; gap: 6px; }
.b-actions > a, .b-societes > summary { display: inline-flex; align-items: center; gap: 6px; color: #E9ECFF; text-decoration: none; padding: 6px 10px; border-radius: 8px; cursor: pointer; list-style: none; }
.b-actions > a:hover, .b-societes > summary:hover { background: rgba(255,255,255,.1); }
.b-societes { position: relative; }
.b-societes-liste { position: absolute; right: 0; top: calc(100% + 6px); background: var(--b-carte); color: var(--b-encre); border-radius: 10px; padding: 12px; min-width: 220px; display: grid; gap: 6px; box-shadow: 0 12px 32px rgba(20,24,58,.25); z-index: 60; }
.b-utilisateur { display: flex; align-items: center; gap: 8px; }
.b-qui { display: grid; line-height: 1.1; color: #fff; text-decoration: none; }
.b-qui small { color: #A9AFD6; }
.b-sortir { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #E9ECFF; border-radius: 8px; padding: 5px 10px; display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 760px) {
  .b-actions span, .b-sortir span, .b-qui small { display: none; }
  .b-recherche { order: 5; flex-basis: 100%; }
}

.b-contenu { max-width: 1180px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
.b-contenu-seul { max-width: 520px; padding-top: 48px; }
.b-logo-seul { font-weight: 800; font-size: 2rem; color: var(--b-nuit); text-align: center; margin-bottom: 18px; letter-spacing: .02em; }

/* Cartes génériques (pages de compte reprises de SIBIS) */
.carte { background: var(--b-carte); border: 1px solid var(--b-trait); border-radius: 12px; padding: 20px; }
.tuile { background: var(--b-carte); border: 1px solid var(--b-trait); border-radius: 12px; padding: 16px; }
.tuile-tete { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 8px; }
.tuile-ico { color: var(--b-accent); }
.etat { font-size: .85rem; color: var(--b-gris); }
.prete { color: var(--b-ok); }

/* Petits hommes */
.civ { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; }
.civ img { width: 22px; height: 22px; }
.civ-homme { background: var(--civ-homme-fond); color: var(--civ-homme); }
.civ-femme { background: var(--civ-femme-fond); color: var(--civ-femme); }
.civ-couple, .civ-messieurs, .civ-mesdames { background: var(--civ-couple-fond); color: var(--civ-couple); }
.civ-morale, .civ-indivision, .civ-succession { background: var(--civ-morale-fond); color: var(--civ-morale); }
.civ-inconnu { background: var(--civ-inconnu-fond); color: var(--civ-inconnu); }

/* Accueil : fil de décisions */
.d-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 14px; }
.d-tete h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.d-compteurs { display: flex; flex-wrap: wrap; gap: 6px; }
.d-compteur { border: 1px solid var(--b-trait); background: var(--b-carte); border-radius: 999px; padding: 3px 12px; font-size: .85rem; cursor: pointer; color: var(--b-encre); }
.d-compteur[aria-pressed="true"] { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }
.d-fil { display: grid; gap: 10px; }
.d-carte { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--b-carte); border: 1px solid var(--b-trait); border-left: 4px solid var(--b-clos); border-radius: 10px; padding: 12px 14px; }
.d-carte.urgent { border-left-color: var(--b-traiter); }
.d-carte.normal { border-left-color: var(--b-surveiller); }
.d-carte.info { border-left-color: var(--b-accent); }
.d-carte:focus-within, .d-carte.focus { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.d-titre { font-weight: 600; }
.d-detail { color: var(--b-gris); font-size: .88rem; }
.d-source { color: var(--b-clos); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.d-boutons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.d-boutons .btn-link { font-size: .85rem; padding: 2px 6px; text-decoration: none; }
.d-vide { text-align: center; color: var(--b-gris); padding: 48px 16px; background: var(--b-carte); border: 1px dashed var(--b-trait); border-radius: 12px; }
.d-annuler { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--b-nuit); color: #fff; border-radius: 10px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; z-index: 80; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.d-annuler button { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 6px; padding: 3px 10px; }
@media (max-width: 640px) {
  .d-carte { grid-template-columns: auto 1fr; }
  .d-boutons { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Constellation */
.c-scene { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; }
.c-ciel { position: relative; background: radial-gradient(ellipse at center, #1E2452 0%, var(--b-nuit) 70%); border-radius: 14px; min-height: 560px; overflow: hidden; }
#c-graphe { position: absolute; inset: 0; }
.c-outils { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 5; }
.c-outils button { background: rgba(255,255,255,.1); color: #E9ECFF; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 3px 10px; font-size: .8rem; }
.c-outils button[aria-pressed="false"] { opacity: .45; }
.c-panneau { background: var(--b-carte); border: 1px solid var(--b-trait); border-radius: 14px; padding: 16px; align-self: start; }
.c-panneau h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 4px; }
.c-champ { display: grid; gap: 2px; margin-bottom: 10px; }
.c-champ label { font-size: .75rem; color: var(--b-gris); text-transform: uppercase; letter-spacing: .04em; }
.c-champ input { border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; background: var(--b-fond); }
.c-champ input:focus { border-color: var(--b-accent); background: #fff; outline: 0; }
@media (max-width: 900px) {
  .c-scene { grid-template-columns: 1fr; }
  .c-ciel { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Fiche nouvelle */
.n-natures { display: flex; flex-wrap: wrap; gap: 8px; }
.n-nature { display: grid; justify-items: center; gap: 4px; padding: 10px 8px; min-width: 96px; border: 2px solid var(--b-trait); border-radius: 12px; background: var(--b-carte); cursor: pointer; font-size: .85rem; }
.n-nature img { width: 36px; height: 36px; }
.n-nature[aria-pressed="true"] { border-color: var(--b-accent); background: var(--b-accent-doux); }
.n-propositions { border: 1px solid var(--b-trait); border-radius: 8px; margin-top: 4px; background: #fff; max-height: 260px; overflow-y: auto; }
.n-propositions button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--b-trait); background: transparent; padding: 7px 10px; }
.n-propositions button:hover, .n-propositions button:focus { background: var(--b-accent-doux); }
.n-alerte { border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: .9rem; }
.n-alerte.fort { background: #fde7e9; color: #8c1d27; }
.n-alerte.simple { background: #fff4e0; color: #7a4d00; }
.n-apercu { background: var(--b-fond); border-radius: 8px; padding: 10px 12px; font-size: .9rem; }

table.b-grille { width: 100%; background: var(--b-carte); border-collapse: collapse; }
table.b-grille th, table.b-grille td { padding: 7px 10px; border-bottom: 1px solid var(--b-trait); vertical-align: top; }
table.b-grille tr:nth-child(even) td { background: #F8F9FD; }
table.b-grille th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--b-gris); }

/* Boutons et tuiles des pages de compte (reprises de SIBIS) */
.btn-booba { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }
.btn-booba:hover, .btn-booba:focus { background: #2F37A8; border-color: #2F37A8; color: #fff; }
a.tuile { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.tuile:hover, a.tuile:focus { border-color: var(--b-accent); box-shadow: 0 0 0 3px rgba(59,68,196,.15); }
a.tuile .etat { color: var(--b-accent); font-weight: 600; }
.tuile-ico .ico { width: 1.6em; height: 1.6em; }

.c-outils { background: rgba(20,24,58,.75); border-radius: 12px; padding: 4px; }
#c-graphe { width: 100%; height: 100%; }

/* Civilité : le petit homme devant le nom est un bouton ; vide en pointillés quand elle est à compléter */
.p-civ { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; background: var(--b-fond); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; cursor: pointer; }
.p-civ img { width: 28px; height: 28px; }
.p-civ:hover, .p-civ:focus-visible { border-color: var(--b-accent); outline: 0; }
.p-civ.vide { border: 2px dashed var(--b-surveiller); background: #fff8ec; position: relative; }
.p-civ-a-faire { width: 18px; height: 18px; border-radius: 50%; background: var(--b-surveiller); color: #fff; font-weight: 800; font-size: 12px; line-height: 18px; text-align: center; }
.p-civ-menu { position: absolute; top: 46px; left: 0; z-index: 30; background: var(--b-carte); border: 1px solid var(--b-trait); border-radius: 12px; box-shadow: 0 12px 28px rgba(20,24,58,.18); padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 300px; }
.c-nature { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: 8px; padding: 5px 8px; text-align: left; font-size: .9rem; }
.c-nature img, .c-nature .ico { width: 24px; height: 24px; flex: none; }
.c-nature:hover, .c-nature:focus-visible { background: var(--b-accent-doux); outline: 0; }
.c-nature[aria-checked="true"] { background: var(--b-accent-doux); font-weight: 600; }
.n-usage { max-width: 90px; }