/* =====================================================================
   Haruba · le Poste
   Murs ocre, poutres de bois, banquettes olive, lampes au néon.
   Un tableau de liège central, des volets pour chaque section.
   ===================================================================== */
:root {
  --mur: #d6b25e;
  --mur-clair: #e9cf8b;
  --mur-ombre: #a8893f;
  --bois: #4a3721;
  --bois-fonce: #261b10;
  --bois-nuit: #1c140b;
  --bois-moyen: #6b5233;
  --bois-clair: #9c7b4e;
  --olive: #5a6a3e;
  --olive-fonce: #3e4a2a;
  --olive-clair: #8a9a64;
  --metal: #8d9297;
  --metal-fonce: #4f555b;
  --papier: #f2e7cc;
  --papier-2: #faf3e0;
  --papier-3: #e1d0a8;
  --encre: #2a1e12;
  --encre-douce: #5e4b33;
  --sceau: #a3302a;
  --sceau-clair: #c94a41;
  --lampe: #fff2c2;
  --texte: #f4ead3;
  --texte-doux: #cfbd98;
  --ombre: 0 14px 34px rgb(0 0 0 / 0.45);
  --ombre-papier: 0 1px 0 rgb(0 0 0 / 0.15), 0 6px 14px rgb(0 0 0 / 0.32);
  --rayon: 8px;
  --titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --corps: 'Barlow', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--texte);
  font: 16px/1.5 var(--corps);
  background: var(--bois-nuit);
}
/* Le poste en arrière-plan : la photo de la salle, nette, juste assombrie sur les bords */
.fond {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 50%, rgb(20 14 8 / 0.45) 100%),
    linear-gradient(180deg, rgb(20 14 8 / 0.0), rgb(20 14 8 / 0.30)),
    var(--photo, url('../assets/poste/dispatch.webp')) center / cover no-repeat,
    var(--bois-nuit);
}
img { max-width: 100%; }
a { color: var(--mur-clair); }
a:hover { color: var(--lampe); }
:focus-visible { outline: 3px solid var(--mur-clair); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); text-transform: uppercase; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 0.8em; }
.lien-evitement { position: absolute; left: -999px; top: 8px; background: var(--mur); color: var(--encre); padding: 8px 12px; z-index: 100; }
.lien-evitement:focus { left: 8px; }
[hidden] { display: none !important; }
.doux { color: var(--texte-doux); }
.chargement, .vide { color: var(--texte-doux); padding: 14px 0; }
.message-page { max-width: 640px; margin: 10vh auto; text-align: center; color: var(--texte-doux); }
main { display: block; outline: none; }
main:focus, main:focus-visible { outline: none; }

/* =====================================================================
   LE TABLEAU
   ===================================================================== */
.poste { max-width: 1440px; margin: 0 auto; padding: clamp(10px, 2vw, 22px); }

/* Plaque du haut : poutre de bois */
.plaque {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 10px 16px; margin-bottom: 14px; border-radius: 8px;
  background: linear-gradient(180deg, var(--bois-moyen), var(--bois) 55%, #3a2a18);
  border: 1px solid #2a1d10; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), var(--ombre);
}
.marque { display: flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; flex-shrink: 0; }
.marque img { width: auto; height: 42px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); }
.marque b { display: block; font: 700 1.45rem/1 var(--titre); letter-spacing: 0.16em; }
.marque small { display: block; font: 600 0.72rem/1.2 var(--titre); letter-spacing: 0.16em; color: var(--mur-clair); text-transform: uppercase; }
.insigne {
  display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border-radius: 30px;
  background: rgb(0 0 0 / 0.28); border: 1px solid rgb(233 207 139 / 0.35); color: var(--texte); text-decoration: none;
}
.insigne:hover { color: var(--texte); border-color: var(--mur-clair); }
.insigne b { display: block; font: 600 0.95rem/1.1 var(--corps); }
.insigne small { display: block; font-size: 0.75rem; color: var(--texte-doux); }
.horloge { font: 600 1.05rem/1 var(--mono); color: var(--lampe); letter-spacing: 0.04em; }
.horloge small { display: block; font: 500 0.72rem/1.2 var(--corps); color: var(--texte-doux); letter-spacing: 0; text-transform: capitalize; }
.actions-plaque { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.bouton-icone {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 8px; border: 1px solid rgb(233 207 139 / 0.3); background: rgb(0 0 0 / 0.25); color: var(--texte); text-decoration: none; cursor: pointer; padding: 0;
}
.bouton-icone:hover { border-color: var(--mur-clair); color: var(--lampe); background: rgb(0 0 0 / 0.35); }
.pastille {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--sceau-clair); color: #fff; font: 700 0.72rem/19px var(--corps); text-align: center;
}
.icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Recherche : une fiche bristol */
.recherche-globale { position: relative; flex: 1; min-width: 220px; max-width: 520px; }
.recherche-globale input[type='search'] {
  width: 100%; padding: 9px 40px 9px 38px; border-radius: 6px; font: inherit;
  border: 1px solid #b9a37a; background: var(--papier-2); color: var(--encre);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.15);
}
.recherche-globale input::placeholder { color: #8a7656; }
.recherche-globale::before { content: ''; position: absolute; z-index: 1; left: 13px; top: 50%; width: 11px; height: 11px; border: 2px solid var(--encre-douce); border-radius: 50%; transform: translateY(-62%); }
.recherche-globale::after { content: ''; position: absolute; z-index: 1; left: 23px; top: 57%; width: 6px; height: 2px; background: var(--encre-douce); transform: rotate(45deg); }
.recherche-globale kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--encre-douce); }
.resultats {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--papier-2); color: var(--encre); border-radius: 8px; box-shadow: var(--ombre);
  list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow: auto; z-index: 60; border: 1px solid #c9b48a;
}
.resultats li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.resultats li[aria-selected='true'], .resultats li:hover { background: var(--papier-3); }
.resultats .res-nom { font-weight: 600; flex: 1; }
.resultats .res-info { font-size: 0.85rem; color: var(--encre-douce); }

/* Le liège et son cadre */
.liege { position: relative; }
.grille-liege {
  position: relative; z-index: 2; display: grid; gap: clamp(14px, 2.2vw, 30px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    'fiche courante courante avis'
    'service cellules missives avis'
    'annonces annonces onglets onglets';
}
@media (max-width: 1150px) {
  .grille-liege { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas:
    'fiche cellules' 'courante courante' 'avis missives' 'service annonces' 'onglets onglets'; }
}
@media (max-width: 680px) {
  .actions-plaque { flex-wrap: wrap; justify-content: flex-end; }
  .grille-liege { grid-template-columns: minmax(0, 1fr); grid-template-areas:
    'fiche' 'courante' 'cellules' 'missives' 'avis' 'service' 'annonces' 'onglets'; }
}

/* Une feuille épinglée */
.zone {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--papier); color: var(--encre); border-radius: 3px;
  padding: 26px 16px 14px; box-shadow: var(--ombre-papier), 0 10px 28px rgb(0 0 0 / 0.35);
  background-image: repeating-linear-gradient(0deg, rgb(120 90 40 / 0.03) 0 2px, transparent 2px 4px);
  transform: rotate(var(--r, 0deg));
}
.zone::before {
  content: ''; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 35%, #ff9a8a, var(--sceau) 60%, #5e1612); box-shadow: 0 2px 2px rgb(0 0 0 / 0.45);
}
.zone.pins-coins::before { left: 18px; margin: 0; }
.zone.pins-coins::after {
  content: ''; position: absolute; top: 8px; right: 18px; width: 14px; height: 14px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 35%, #e8e2c8, var(--metal) 60%, var(--metal-fonce)); box-shadow: 0 2px 2px rgb(0 0 0 / 0.45);
}
.entete-zone {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--encre);
  color: var(--encre); text-decoration: none;
}
a.entete-zone:hover { color: var(--sceau); }
.entete-zone h2 { margin: 0; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.08em; }
.entete-zone .compte { font: 700 1.25rem/1 var(--titre); color: var(--sceau); white-space: nowrap; }
.entete-zone kbd { margin-left: 6px; }
.pied-zone { margin-top: auto; padding-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.9rem; }
.pied-zone a { color: var(--sceau); font-weight: 600; }
.zone .vide, .zone .chargement { color: var(--encre-douce); padding: 6px 0; }
.zone-fiche { grid-area: fiche; background-color: #f6edd2; border-top: 6px solid var(--sceau); }
.zone-fiche .titre-carnet { font: 700 1.25rem/1 var(--titre); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sceau); margin: 0 0 4px; }
.zone-fiche p { font-size: 0.9rem; color: var(--encre-douce); margin-bottom: 10px; }
.zone-fiche .autocomplete input { font-size: 1.05rem; padding: 11px 12px; }
.zone-courante { grid-area: courante; }
.zone-avis { grid-area: avis; background: #efdfba; }
.zone-service { grid-area: service; }
.zone-cellules { grid-area: cellules; background: #e7e3d6; }
.zone-missives { grid-area: missives; }
.zone-annonces { grid-area: annonces; }
.zone-onglets { grid-area: onglets; background: none; box-shadow: none; padding: 0; transform: none; }
.zone-onglets::before { display: none; }

/* Main courante */
.lignes { list-style: none; margin: 0; padding: 0; }
.lignes li + li { border-top: 1px dashed #c4ad83; }
.lignes a, .lignes button.ligne {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  width: 100%; padding: 7px 4px; color: var(--encre); text-decoration: none; font: inherit; text-align: left;
  background: none; border: none; border-radius: 4px; cursor: pointer;
}
.lignes a:hover, .lignes button.ligne:hover { background: rgb(214 178 94 / 0.25); color: var(--encre); }
.lignes .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lignes .montant { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.92rem; }

/* Mini-avis */
.mini-avis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-avis a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; text-align: center;
  background: #f5e7c6; border: 1px solid #c9b48a; color: var(--encre); text-decoration: none; transform: rotate(var(--r, 0deg));
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
}
.mini-avis a:hover { box-shadow: 0 0 0 2px var(--sceau); color: var(--encre); }
.mini-avis .bandeau { font: 700 0.8rem/1 var(--titre); letter-spacing: 0.22em; color: var(--sceau); }
.mini-avis .portrait { width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--encre); background: var(--papier-3); display: grid; place-items: center; font: 700 1.6rem var(--titre); filter: sepia(0.35); }
.mini-avis .nom { font: 700 0.92rem/1.1 var(--titre); text-transform: uppercase; }
.mini-avis .prime { font: 700 0.82rem var(--titre); color: var(--sceau); }

/* Cellules */
.rangee-cellules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cellule {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 92px; padding: 6px 4px 5px;
  border-radius: 3px; background: #d8cfb8; color: var(--encre); text-decoration: none; text-align: center; font-size: 0.78rem; overflow: hidden;
  /* Quatre barreaux également répartis, quelle que soit la largeur de la cellule */
  --barreau: rgb(80 85 90 / 0.6);
  background-image: linear-gradient(90deg,
    transparent calc(20% - 1.5px), var(--barreau) calc(20% - 1.5px) calc(20% + 1.5px), transparent calc(20% + 1.5px) calc(40% - 1.5px),
    var(--barreau) calc(40% - 1.5px) calc(40% + 1.5px), transparent calc(40% + 1.5px) calc(60% - 1.5px),
    var(--barreau) calc(60% - 1.5px) calc(60% + 1.5px), transparent calc(60% + 1.5px) calc(80% - 1.5px),
    var(--barreau) calc(80% - 1.5px) calc(80% + 1.5px), transparent calc(80% + 1.5px));
  border-top: 5px solid var(--metal-fonce);
  border-bottom: 3px solid var(--metal-fonce);
}
/* Le numéro sur une petite plaque, lisible par-dessus les barreaux */
.cellule .num { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 2px;
  background: var(--bois-clair); color: var(--encre); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  font: 700 0.72rem/1.2 var(--titre); letter-spacing: 0.06em; white-space: nowrap; }
.cellule.occupee { background-color: #e9c9a0; }
.cellule.occupee b { display: block; font-size: 0.8rem; line-height: 1.1; background: rgb(250 243 224 / 0.9); padding: 2px; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cellule .chrono.texte { font: 700 0.64rem/1.5 var(--titre); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cellule .chrono { display: block; font: 700 0.85rem/1.2 var(--mono); color: var(--sceau); background: rgb(250 243 224 / 0.9); border-radius: 2px; margin-top: 2px; }
.cellule.libre .etat { color: var(--olive-fonce); font-weight: 600; background: rgb(250 243 224 / 0.92); border-radius: 2px; padding: 1px 2px; }
a.cellule:hover { box-shadow: 0 0 0 2px var(--sceau); color: var(--encre); }

/* Enveloppes */
.enveloppes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.enveloppes a {
  display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 3px; text-decoration: none; color: var(--encre);
  background: #f7f0dc; border: 1px solid #d4c39d;
}
.enveloppes a:hover { border-color: var(--sceau); color: var(--encre); }
.enveloppes .objet { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.enveloppes .non-lu .objet { font-weight: 700; }
.cachet { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 35% 35%, #e0655b, var(--sceau)); }
.cachet.lu { background: #bfb196; }

/* Tableau de service */
.service-chiffres { display: flex; gap: 14px; margin-bottom: 8px; }
.service-chiffres div { flex: 1; text-align: center; padding: 6px 4px; background: var(--papier-2); border-radius: 3px; }
.service-chiffres b { display: block; font: 700 1.6rem/1 var(--titre); color: var(--olive-fonce); }
.service-chiffres span { font-size: 0.78rem; color: var(--encre-douce); }

/* Onglets d'index : chemises cartonnées */
.index { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; height: 100%; align-content: start; }
.chemise {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 62px; padding: 14px 12px 8px;
  border-radius: 2px 10px 3px 3px; text-decoration: none; color: var(--encre);
  background: var(--teinte, #d9c59a); box-shadow: 0 3px 8px rgb(0 0 0 / 0.3);
}
.chemise::before {
  content: ''; position: absolute; top: -9px; left: 10px; width: 46%; height: 12px; border-radius: 6px 6px 0 0; background: inherit;
}
.chemise:hover { transform: translateY(-3px); color: var(--encre); box-shadow: 0 0 0 2px var(--lampe), 0 6px 12px rgb(0 0 0 / 0.35); }
.chemise b { font: 700 1.05rem/1.1 var(--titre); letter-spacing: 0.06em; text-transform: uppercase; }
.chemise small { font-size: 0.78rem; color: var(--encre-douce); }
.chemise kbd { position: absolute; right: 8px; top: 8px; }
.chemise .pastille { top: -8px; right: -6px; }

/* =====================================================================
   VOLET : une section ouverte par-dessus le tableau
   ===================================================================== */
.volet { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; }
.volet-ombre { position: absolute; inset: 0; background: rgb(16 11 6 / 0.45); animation: apparait 0.15s ease; }
.volet-feuille {
  position: relative; display: flex; flex-direction: column; width: min(1180px, 100%); height: 100%;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.35), transparent 30px),
    linear-gradient(180deg, rgb(22 15 8 / 0.20) 0, rgb(22 15 8 / 0.62) 240px, rgb(22 15 8 / 0.80) 100%),
    var(--salle, none) center / cover no-repeat,
    var(--bois-fonce);
  box-shadow: -20px 0 40px rgb(0 0 0 / 0.5); animation: glisse 0.16s ease;
}
@keyframes glisse { from { transform: translateX(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
.volet-barre {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px clamp(14px, 2.4vw, 26px);
  background: linear-gradient(180deg, var(--bois-moyen), var(--bois) 60%, #3a2a18); border-bottom: 1px solid #1a120a;
}
.retour {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; text-decoration: none;
  color: var(--texte); background: rgb(0 0 0 / 0.25); border: 1px solid rgb(233 207 139 / 0.3); font: 600 0.95rem/1 var(--corps);
}
.retour:hover { color: var(--lampe); border-color: var(--mur-clair); }
.volet-titre { font: 700 1.25rem/1 var(--titre); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mur-clair); }
.volet-barre .recherche-globale { max-width: 380px; margin-left: auto; }
.volet-corps { flex: 1; overflow-y: auto; padding: clamp(40px, 9vh, 90px) clamp(14px, 2.4vw, 28px) 80px; position: relative; outline: none; }
.volet-corps:focus-visible { outline: none; }
@media (max-width: 700px) {
  .volet-feuille { width: 100%; }
  .volet-barre .recherche-globale { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .volet-corps { margin-top: -30px; }
}

/* En-têtes de section (dans un volet) */
.entete-page { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.entete-page h1 { margin: 0; color: var(--texte); text-shadow: 0 2px 6px rgb(0 0 0 / 0.6); }
.entete-page .sous-titre { color: var(--texte-doux); margin: 4px 0 0; }

/* Feuille de papier */
.panneau {
  position: relative; background: var(--papier); color: var(--encre);
  border-radius: var(--rayon); padding: clamp(16px, 2.2vw, 22px); box-shadow: var(--ombre-papier);
  background-image: radial-gradient(circle at 20% 10%, rgb(255 255 255 / 0.35), transparent 40%), repeating-linear-gradient(0deg, rgb(120 90 40 / 0.025) 0 2px, transparent 2px 4px);
}
.panneau + .panneau { margin-top: 16px; }
.panneau h2, .panneau h3 { color: var(--encre); }
.panneau a { color: var(--sceau); }
.panneau .aide, .panneau .doux { color: var(--encre-douce); }
.panneau .vide, .panneau .chargement { color: var(--encre-douce); }
.tampon {
  position: absolute; right: 18px; top: 14px; transform: rotate(-8deg); pointer-events: none;
  font: 700 0.95rem/1 var(--titre); letter-spacing: 0.2em; color: rgb(163 48 42 / 0.6);
  border: 2px solid rgb(163 48 42 / 0.5); padding: 4px 10px; border-radius: 4px;
}
.numero { white-space: nowrap; font-family: var(--mono); font-size: 0.9rem; }
.grille-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grille-2 > .panneau, .grille-3 > .panneau { margin-top: 0; }
.grille-2 + .panneau, .grille-2 + .grille-2, .panneau + .grille-2 { margin-top: 16px; }
.colonne-fiche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .grille-2, .grille-3, .colonne-fiche { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Boutons ---------- */
button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  background: var(--mur); color: var(--encre); font: 600 0.98rem/1.1 var(--corps); text-decoration: none;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.18);
}
button:hover, .bouton:hover { background: var(--mur-clair); color: var(--encre); }
button:disabled { opacity: 0.55; cursor: progress; }
button.secondaire, .bouton.secondaire { background: transparent; border-color: currentColor; color: inherit; box-shadow: none; }
button.secondaire:hover, .bouton.secondaire:hover { background: rgb(127 127 127 / 0.14); color: inherit; }
button.danger, .bouton.danger { background: var(--sceau); color: #fff; }
button.danger:hover, .bouton.danger:hover { background: var(--sceau-clair); color: #fff; }
button.olive, .bouton.olive { background: var(--olive); color: #fff; }
button.olive:hover, .bouton.olive:hover { background: var(--olive-clair); color: #fff; }
button.discret { background: none; border: none; padding: 6px 8px; color: inherit; text-decoration: underline; box-shadow: none; }
button.petit, .bouton.petit { padding: 6px 10px; font-size: 0.88rem; }
.bouton-fiche { font-family: var(--titre); letter-spacing: 0.08em; text-transform: uppercase; font-size: 1rem; }
.panneau a.bouton, .zone a.bouton { color: var(--encre); }
.panneau a.bouton.danger { color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 4px; text-align: center;
  border: 1px solid rgb(127 127 127 / 0.55); border-bottom-width: 2px; font: 600 0.75rem/1.4 var(--mono); color: inherit; opacity: 0.85;
}

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.champ > label, .etiquette { font-weight: 600; font-size: 0.92rem; }
input[type='text'], input[type='search'], input[type='url'], input[type='number'], input[type='date'], input[type='datetime-local'], select, textarea {
  width: 100%; padding: 9px 11px; border-radius: 6px; font: inherit;
  border: 1px solid #b9a37a; background: var(--papier-2); color: var(--encre);
}
textarea { min-height: 120px; resize: vertical; }
.aide { font-size: 0.85rem; }
.erreur-champ { color: var(--sceau); font-size: 0.86rem; font-weight: 600; }
[aria-invalid='true'] { border-color: var(--sceau) !important; }
.case { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--sceau); flex-shrink: 0; }
fieldset { border: none; padding: 0; margin: 0 0 14px; }
legend { font-weight: 600; font-size: 0.92rem; padding: 0; margin-bottom: 6px; }
.segments { display: flex; flex-wrap: wrap; gap: 6px; }
.segments button, .segments .bouton { background: var(--papier-2); color: var(--encre); border: 1px solid #b9a37a; padding: 7px 12px; font-weight: 500; box-shadow: none; }
.segments button[aria-pressed='true'], .segments .bouton[aria-current='true'] { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.sur-nuit .segments button, .segments.sur-nuit button, .segments.sur-nuit .bouton { background: rgb(0 0 0 / 0.3); color: var(--texte); border-color: rgb(233 207 139 / 0.3); }
.sur-nuit .segments button[aria-pressed='true'], .segments.sur-nuit .bouton[aria-current='true'] { background: var(--mur); color: var(--encre); border-color: var(--mur); }
.puces { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.puce { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 20px; background: var(--encre); color: var(--papier); font-size: 0.9rem; }
.puce .avatar { width: 22px; height: 22px; }
.puce button { background: none; color: var(--papier); padding: 0 4px; font-size: 1rem; line-height: 1; box-shadow: none; }
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; vertical-align: middle; }
.avatar-vide { display: inline-grid; place-items: center; background: var(--mur); color: var(--encre); font: 700 0.85rem/1 var(--titre); }
.autocomplete { position: relative; }
.autocomplete .resultats { top: calc(100% + 2px); }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font: 600 0.78rem/1.6 var(--corps); background: var(--papier-3); color: var(--encre); white-space: nowrap; }
.badge-grade { display: inline-block; padding: 1px 8px; border-radius: 3px; white-space: nowrap; font: 700 0.76rem/1.6 var(--titre); letter-spacing: 0.1em; text-transform: uppercase; background: var(--bois); color: var(--texte); }
.g-stagiaire { background: #6d6a62; color: #fff; }
.g-agent { background: var(--olive); color: #fff; }
.g-officier { background: #3f5a6e; color: #fff; }
.g-lieutenant { background: #66507e; color: #fff; }
.g-capitaine { background: #a07320; color: #fff; }
.g-commandant { background: var(--sceau); color: #fff; }
.fiche-enregistree { background: #f1d8a6; color: #6a4300; }
.fiche-payee { background: #cfdcb8; color: #2f3d1c; }
.fiche-contestee { background: #e3cde9; color: #4b2a58; }
.fiche-annulee { background: #ddd5c6; color: #6b6355; text-decoration: line-through; }
.plainte-recue { background: #f1d8a6; color: #6a4300; }
.plainte-en_cours { background: #cfe0ea; color: #1f3c4f; }
.plainte-transmise { background: var(--sceau); color: #fff; }
.plainte-classee { background: #ddd5c6; color: #6b6355; }
.plainte-aboutie { background: #cfdcb8; color: #2f3d1c; }
.dossier-libre { background: #cfdcb8; color: #2f3d1c; }
.dossier-surveille { background: #f1d8a6; color: #6a4300; }
.dossier-recherche { background: var(--sceau); color: #fff; }
.dossier-detenu { background: #3f5a6e; color: #fff; }
.dossier-decede { background: #2a2a2a; color: #ddd; }
.sanction-avertissement { background: #f1d8a6; color: #6a4300; }
.sanction-blame { background: #f0c09a; color: #6a2e00; }
.sanction-mise_a_pied { background: var(--sceau); color: #fff; }
.sanction-destitution { background: #2a1e12; color: #fff; }
.alerte { border-left: 5px solid var(--sceau); background: rgb(163 48 42 / 0.12); color: inherit; padding: 10px 14px; border-radius: 6px; margin: 10px 0; }
.alerte.info { border-left-color: var(--mur-ombre); background: rgb(214 178 94 / 0.2); }
.alerte.ok { border-left-color: var(--olive); background: rgb(90 106 62 / 0.18); }

/* ---------- Tableaux de données ---------- */
.tableau-donnees { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tableau-donnees th { text-align: left; font: 700 0.85rem/1.2 var(--titre); letter-spacing: 0.1em; text-transform: uppercase; padding: 10px; border-bottom: 2px solid var(--encre); color: var(--encre-douce); }
.tableau-donnees td { padding: 10px; border-bottom: 1px solid #cdbb95; vertical-align: top; }
.tableau-donnees tbody tr:nth-child(even) td { background: rgb(255 255 255 / 0.22); }
.tableau-donnees tr.cliquable { cursor: pointer; }
.tableau-donnees tr.cliquable:hover td { background: rgb(214 178 94 / 0.25); }
.tableau-donnees .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .tableau-donnees thead { display: none; }
  .tableau-donnees, .tableau-donnees tbody, .tableau-donnees tr, .tableau-donnees td { display: block; width: 100%; }
  .tableau-donnees tr { border-bottom: 1px solid #cdbb95; padding: 8px 0; }
  .tableau-donnees td { border: none; padding: 3px 4px; }
  .tableau-donnees td[data-label]::before { content: attr(data-label) ' : '; font-weight: 600; color: var(--encre-douce); }
  .tableau-donnees .nombre { text-align: left; }
}

/* ---------- Fiche d'intervention ---------- */
.articles-liste { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow: auto; padding-right: 4px; }
.titre-groupe { margin: 10px 0 4px; font: 700 0.85rem/1 var(--titre); letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-douce); }
.ligne-article { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.ligne-article:hover { background: rgb(255 255 255 / 0.35); }
.ligne-article input { width: 18px; height: 18px; accent-color: var(--sceau); }
.ligne-article.cochee { background: var(--encre); color: var(--papier); }
.ligne-article.cochee .peine { color: #f1d8a6; }
.ligne-article .num { font-family: var(--mono); font-weight: 700; }
.ligne-article .peine { font-size: 0.85rem; color: var(--encre-douce); text-align: right; white-space: nowrap; }
.ligne-article .marque-recidive { display: inline-block; margin-left: 6px; font-size: 0.72rem; padding: 0 6px; border-radius: 3px; background: var(--sceau); color: #fff; vertical-align: 1px; }
.total-fiche {
  position: sticky; bottom: 12px; z-index: 5; margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-radius: 8px; background: linear-gradient(180deg, var(--bois-moyen), var(--bois)); color: var(--papier);
  box-shadow: var(--ombre); border: 1px solid #1a120a;
}
.total-fiche .valeur { font: 700 1.7rem/1 var(--titre); color: var(--lampe); }
.total-fiche .lib { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mur-clair); }
.resultat-fiche { text-align: center; padding: 26px 18px; }
.resultat-fiche .numero { font-size: 1.3rem; display: block; margin: 6px 0 12px; }

/* ---------- Dossiers et avis ---------- */
.grille-dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.carte-dossier { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 6px; text-decoration: none; background: var(--papier); color: var(--encre); box-shadow: var(--ombre-papier); }
.carte-dossier:hover { color: var(--encre); box-shadow: 0 0 0 3px var(--mur), var(--ombre-papier); }
.carte-dossier .portrait { width: 52px; height: 52px; border-radius: 4px; object-fit: cover; background: var(--papier-3); flex-shrink: 0; display: grid; place-items: center; font: 700 1.2rem var(--titre); }
.carte-dossier b { display: block; }
.carte-dossier .doux { color: var(--encre-douce); font-size: 0.85rem; }
.avis-recherche { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 14px; background: #efe0bd; color: var(--encre); text-decoration: none; border-radius: 2px; box-shadow: var(--ombre-papier); border: 1px solid #c9b48a; transform: rotate(var(--r, 0.6deg)); }
.avis-recherche:hover { color: var(--encre); box-shadow: 0 0 0 3px var(--sceau), var(--ombre-papier); }
.avis-recherche .bandeau { font: 700 1.6rem/1 var(--titre); letter-spacing: 0.25em; color: var(--sceau); }
.avis-recherche .portrait { width: 120px; height: 120px; object-fit: cover; border: 3px solid var(--encre); background: var(--papier-3); display: grid; place-items: center; font: 700 2.4rem var(--titre); filter: sepia(0.35); }
.avis-recherche .nom { font: 700 1.25rem/1.1 var(--titre); text-transform: uppercase; }
.avis-recherche .prime { font: 700 1.1rem var(--titre); color: var(--sceau); }
.etoiles { color: var(--sceau); letter-spacing: 2px; }
.fiche-identite { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
.fiche-identite .portrait-grand { width: 150px; height: 170px; object-fit: cover; border-radius: 4px; border: 3px solid var(--encre); background: var(--papier-3); display: grid; place-items: center; font: 700 3rem var(--titre); }
.definitions { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 18px; margin: 0; }
.definitions div { min-width: 0; }
.definitions dt { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-douce); }
.definitions dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) { .fiche-identite { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cellules (section) ---------- */
.couloir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .couloir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grande-cellule {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 230px; padding: 34px 10px 12px;
  border-radius: 4px; background-color: #e2d5b6; color: var(--encre);
  background-image: repeating-linear-gradient(90deg, rgb(70 75 80 / 0.5) 0 4px, transparent 4px 22px);
  border-top: 8px solid var(--metal-fonce); box-shadow: var(--ombre-papier);
}
.grande-cellule .plaque-cellule { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 2px 10px; background: var(--bois-clair); color: var(--encre); font: 700 0.85rem/1.3 var(--titre); letter-spacing: 0.1em; border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); white-space: nowrap; }
.grande-cellule .carte-occupant { background: rgb(250 243 224 / 0.95); border-radius: 4px; padding: 8px; color: var(--encre); }
.grande-cellule .carte-occupant a { color: var(--encre); font-weight: 700; }
.grande-cellule .carte-occupant .numero, .grande-cellule .carte-occupant .doux, .grande-cellule .carte-occupant small { color: var(--encre-douce); }
.grande-cellule .chrono { font: 700 1.5rem/1 var(--mono); color: var(--sceau); }
.grande-cellule.libre .carte-occupant { text-align: center; color: var(--olive-fonce); font-weight: 600; }

/* ---------- Missives ---------- */
.liste-fils { list-style: none; padding: 0; margin: 0; }
.liste-fils li a { display: flex; gap: 12px; align-items: center; padding: 12px 8px; border-bottom: 1px solid #cdbb95; color: var(--encre); text-decoration: none; }
.liste-fils li a:hover { background: rgb(214 178 94 / 0.2); }
.liste-fils .non-lu b { color: var(--sceau); }
.message { padding: 12px 14px; border-radius: 6px; background: var(--papier-2); margin-bottom: 10px; }
.message.de-moi { background: #f1e2bf; border-left: 4px solid var(--mur); }
.message .meta { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--encre-douce); margin-bottom: 4px; }
.texte-long { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Effectifs ---------- */
.rang-effectif + .rang-effectif { margin-top: 16px; }
.liste-membres { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.membre { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 6px; background: var(--papier-2); }
.membre .doux { font-size: 0.82rem; }
.membre.absent { opacity: 0.6; }

/* ---------- Statistiques ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: rgb(0 0 0 / 0.28); border: 1px solid rgb(233 207 139 / 0.25); border-radius: 8px; padding: 14px 16px; }
.kpi .valeur { font: 700 1.9rem/1 var(--titre); color: var(--lampe); }
.kpi .lib { font-size: 0.82rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.1em; }
.barres { display: flex; flex-direction: column; gap: 8px; }
.barre-ligne { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 60px; gap: 10px; align-items: center; font-size: 0.92rem; }
.barre-ligne .piste { height: 14px; background: #d9caa8; border-radius: 7px; overflow: hidden; }
.barre-ligne .remplissage { height: 100%; background: var(--olive); border-radius: 7px; }
.barre-ligne .nb { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.barre-ligne .lib-barre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .barre-ligne { grid-template-columns: minmax(0, 1fr) 50px; } .barre-ligne .piste { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Règlement ---------- */
.texte-reglement h2 { font-size: 1.6rem; text-transform: uppercase; }
.texte-reglement h3 { margin-top: 1.2em; font-size: 1.25rem; text-transform: uppercase; color: var(--sceau); }
.texte-reglement li { margin-bottom: 6px; }

/* =====================================================================
   ENTRÉE DU POSTE (connexion) : la salle d'attente
   ===================================================================== */
.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.carte-connexion {
  display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 10px; align-items: end;
  max-width: 840px; width: 100%; padding: clamp(20px, 4vw, 36px); border-radius: 10px;
  background: linear-gradient(180deg, rgb(74 55 33 / 0.94), rgb(38 27 16 / 0.96));
  border: 1px solid rgb(233 207 139 / 0.35); box-shadow: 0 30px 80px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.1);
}
.carte-connexion .embleme { width: 84px; height: auto; }
.carte-connexion h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: 0.2em; margin: 10px 0 0; color: var(--texte); }
.carte-connexion .devise { font: italic 500 1.05rem/1.4 var(--corps); color: var(--mur-clair); margin-bottom: 18px; }
.carte-connexion .sous { font: 600 0.9rem/1.2 var(--titre); letter-spacing: 0.2em; text-transform: uppercase; color: var(--texte-doux); }
.carte-connexion .illustration { width: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.55)); margin-bottom: -10px; }
.bouton-discord { background: #5865f2; color: #fff; font-size: 1.05rem; padding: 13px 20px; }
.bouton-discord:hover { background: #6b77f5; color: #fff; }
.liens-publics { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-size: 0.95rem; }
@media (max-width: 700px) {
  .carte-connexion { grid-template-columns: minmax(0, 1fr); }
  .carte-connexion .illustration { max-height: 200px; order: -1; }
}

/* ---------- Divers ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: 6px; background: var(--papier-2); color: var(--encre); box-shadow: var(--ombre); border-left: 5px solid var(--mur); }
.toast.erreur { border-left-color: var(--sceau); }
.toast.ok { border-left-color: var(--olive); }
dialog { border: none; border-radius: 10px; padding: 22px; max-width: min(520px, calc(100vw - 32px)); width: 100%; background: var(--papier); color: var(--encre); box-shadow: var(--ombre); }
dialog::backdrop { background: rgb(16 11 6 / 0.65); }
.raccourcis { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.filtres .champ { margin: 0; min-width: 160px; flex: 1; }
.chronologie { list-style: none; padding: 0; margin: 0; }
.chronologie li { padding: 8px 0 8px 18px; border-left: 2px solid #cdbb95; position: relative; }
.chronologie li::before { content: ''; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--mur-ombre); }
.illustration-vide { display: block; max-width: 220px; margin: 0 auto 10px; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 640px) {
  .marque small, .horloge, .libelle-long { display: none; }
  .plaque .recherche-globale { order: 3; flex-basis: 100%; max-width: none; }
  .recherche-globale kbd, .chemise kbd, .entete-zone kbd { display: none; }
  .articles-liste { max-height: none; }
  .total-fiche { gap: 10px; padding: 12px 14px; }
  .total-fiche .valeur { font-size: 1.35rem; }
  .total-fiche button kbd { display: none; }
  .zone { transform: none; }
}

/* Suspects récents sur le carnet de fiches */
.recents { margin-top: 12px; }
.recents p { margin: 0 0 6px; font: 600 0.78rem/1 var(--titre); letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); }
.recents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.recents a { display: inline-block; padding: 5px 10px; border: 1px dashed #a88f63; border-radius: 3px; color: var(--encre); text-decoration: none; font-size: 0.9rem; background: rgb(255 250 235 / 0.6); }
.recents a:hover, .recents a:focus-visible { border-style: solid; border-color: var(--sceau); color: var(--sceau); }
.zone .doux { color: var(--encre-douce); }
.citation { margin: auto 0 0; padding: 8px 0 8px 12px; border-left: 3px solid var(--sceau); color: var(--encre); font-style: italic; font-size: 0.95rem; line-height: 1.4; }

/* Salaires */
.kpi-alerte { border-color: var(--sceau); background: rgb(163 48 42 / 0.35); }
.liste-paie { display: grid; gap: 8px; }
.paie-agent { border: 1px solid #cdbb95; border-radius: 6px; background: rgb(255 250 235 / 0.5); }
.paie-agent > summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.paie-agent > summary::-webkit-details-marker { display: none; }
.paie-agent > summary::before { content: '▸'; color: var(--encre-douce); transition: transform 0.15s; }
.paie-agent[open] > summary::before { transform: rotate(90deg); }
.paie-agent .qui { flex: 1; min-width: 160px; }
.paie-agent .montant { font: 700 1.2rem/1 var(--titre); color: var(--sceau); font-variant-numeric: tabular-nums; }
.paie-agent .tableau-donnees { margin: 0 12px 12px; width: calc(100% - 24px); }

/* Fenêtres de correction et guide des corrections */
dialog.dialogue-correction { max-width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog.dialogue-correction textarea { width: 100%; }
dialog .alerte { margin: 8px 0; }
.table-defilante { overflow-x: auto; }
.tableau-corrections { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tableau-corrections th, .tableau-corrections td { text-align: left; vertical-align: top; padding: 9px 10px; }
.tableau-corrections thead th { background: var(--encre); color: var(--papier); font: 700 0.78rem var(--titre); letter-spacing: 0.12em; text-transform: uppercase; }
.tableau-corrections tbody tr + tr { border-top: 1px solid var(--papier-3); }
.tableau-corrections tr.hors-droits { opacity: 0.6; }
@media (max-width: 700px) {
  .tableau-corrections thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-corrections, .tableau-corrections tbody, .tableau-corrections tr, .tableau-corrections td { display: block; width: 100%; }
  .tableau-corrections td { padding: 3px 4px; }
  .tableau-corrections td[data-label]::before { content: attr(data-label); display: block; font: 700 0.72rem var(--titre); letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-douce); }
  .tableau-corrections tbody tr { padding: 8px 0; }
}
/* Le tampon d'une feuille ne recouvre jamais la première ligne d'informations */
@media (min-width: 701px) { .panneau > .tampon + .definitions { padding-right: 120px; } }

/* =====================================================================
   Organigramme de Suna : Kazekage, Haruba et tribunal
   ===================================================================== */
.organi { --org-papier: var(--papier); max-width: 1180px; margin: 0 auto; }
.org-tete { text-align: center; max-width: 760px; margin: 0 auto 26px; }
.org-tete h1 { color: var(--texte); text-shadow: 0 2px 6px rgb(0 0 0 / 0.6); margin-bottom: 8px; }
.org-tete p { color: var(--texte-doux); font-size: 1.02rem; line-height: 1.6; }
.org-fonction { margin: 0 0 2px; font: 700 0.74rem/1.2 var(--titre); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sceau); }
.org-vacant { color: var(--encre-douce); font-style: italic; margin: 4px 0; }
.organi .doux { color: var(--encre-douce); }

.org-sommet { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: stretch; max-width: 920px; margin: 0 auto; }
.org-kage, .org-conseil, .org-pilier, .org-parcours, .org-pont {
  position: relative; background: var(--org-papier); color: var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre-papier);
  background-image: radial-gradient(circle at 20% 10%, rgb(255 255 255 / 0.35), transparent 40%), repeating-linear-gradient(0deg, rgb(120 90 40 / 0.025) 0 2px, transparent 2px 4px);
}
.org-kage { display: flex; gap: 20px; align-items: center; padding: 18px 22px; border-top: 5px solid var(--sceau); }
.org-kage h2 { font-size: 2rem; margin: 0 0 4px; color: var(--encre); }
.org-noms { font: 600 1.15rem var(--titre); margin: 0 0 6px; }
.org-medaillon { flex: none; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid var(--mur); box-shadow: inset 0 0 0 4px rgb(255 245 220 / 0.6), 0 4px 10px rgb(0 0 0 / 0.3);
  background: radial-gradient(circle at 50% 30%, #f3dcae, #c9a062); }
.org-medaillon img { width: 100%; height: 165%; object-fit: cover; object-position: 50% 4%; }
.org-conseil { padding: 16px 20px; border-top: 5px solid #7a6a4a; }
.org-conseil h3 { margin: 0 0 8px; color: var(--encre); }
.org-conseil ul, .org-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.org-tronc { display: flex; justify-content: center; height: 34px; }
.org-tronc span { width: 3px; background: linear-gradient(var(--mur-clair), var(--mur)); box-shadow: 0 0 6px rgb(0 0 0 / 0.4); }

.org-piliers { display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); gap: 18px; align-items: start; position: relative; }
.org-piliers::before { content: ''; position: absolute; top: -2px; left: 25%; right: 25%; height: 3px; background: var(--mur); border-radius: 2px; box-shadow: 0 0 6px rgb(0 0 0 / 0.4); }
.org-pilier { padding: 0 0 14px; overflow: hidden; }
.org-haruba { border-top: 6px solid #4a3721; }
.org-tribunal { border-top: 6px solid var(--sceau); }
.org-pilier > header { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; min-height: 120px; position: relative;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.06), transparent); border-bottom: 1px solid var(--papier-3); }
.org-pilier > header h2 { margin: 0; font-size: 1.7rem; color: var(--encre); }
.org-embleme { width: 58px; height: 58px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3)); }
.org-illus { position: absolute; right: 8px; bottom: 0; height: 118px; width: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.35)); pointer-events: none; }
.org-mission { margin: 10px 16px 4px; font-size: 0.95rem; color: var(--encre-douce); }
.org-groupe { margin: 12px 16px 0; padding-top: 10px; border-top: 1px dashed #c9b48a; }
.org-groupe h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 0.82rem var(--titre); letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-douce); }
.org-nb { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--encre); color: var(--papier); font-size: 0.75rem; text-align: center; letter-spacing: 0; }
.org-membre { display: flex; align-items: center; gap: 10px; }
.org-membre b { display: block; font: 600 1.02rem/1.2 var(--titre); }
.org-membre small { display: block; color: var(--encre-douce); font-size: 0.8rem; }
.org-pastille { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 0.95rem var(--titre); background: var(--encre); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.25); }

.org-pont { position: sticky; top: 12px; padding: 16px 14px; text-align: center; display: grid; gap: 12px; justify-items: center; border-top: 5px solid var(--mur-ombre); }
.org-sceau { width: 70px; height: 70px; opacity: 0.9; }
.org-fleche { position: relative; width: 100%; padding: 10px 12px; border-radius: 6px; color: #fff; font: 700 0.9rem/1.25 var(--titre); letter-spacing: 0.04em; display: grid; gap: 2px; }
.org-fleche-nb { font-size: 1.6rem; letter-spacing: 0; }
.org-aller { background: linear-gradient(90deg, #4a3721, #6b5233); clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); padding-right: 22px; }
.org-retour { background: linear-gradient(270deg, #8e1f1a, #a3302a); clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%); padding-left: 22px; }
.org-pont-texte { font-size: 0.88rem; color: var(--encre-douce); margin: 0; }

.org-parcours { margin-top: 26px; padding: 18px 20px 20px; }
.org-parcours h2 { color: var(--encre); margin-bottom: 14px; }
.org-parcours ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: etape; }
.org-parcours li { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 0.92rem; position: relative; }
.org-parcours li b { font: 700 1.02rem var(--titre); color: var(--encre); }
.org-parcours li span:last-child { color: var(--encre-douce); }
.org-etape-img { width: 86px; height: 86px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #f6e6c2, #d8b878); border: 3px solid var(--mur); }
.org-etape-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.org-parcours li:not(:last-child)::after { content: ''; position: absolute; top: 43px; right: -14px; width: 14px; height: 3px; background: var(--mur-ombre); }

@media (max-width: 980px) {
  .org-piliers { grid-template-columns: 1fr; }
  .org-piliers::before { display: none; }
  .org-pont { position: static; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .org-pont-texte { grid-column: 1 / -1; }
  .org-parcours ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-parcours li::after { display: none; }
}
@media (max-width: 640px) {
  .org-sommet { grid-template-columns: 1fr; }
  .org-kage { flex-direction: column; text-align: center; }
  .org-pont { grid-template-columns: 1fr; }
  .org-illus { height: 90px; opacity: 0.85; }
  .org-pilier > header { padding-right: 90px; }
  .org-parcours ol { grid-template-columns: 1fr; }
}

/* Affaires transmises au tribunal : affiches et liste sur le liège */
.affiches { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.affiche { position: relative; display: grid; gap: 4px; align-content: start; padding: 12px 12px 14px; text-decoration: none; color: var(--encre);
  background: #efe2bf; border: 1px solid #b89c69; border-radius: 3px; box-shadow: 0 2px 0 rgb(0 0 0 / 0.12), 0 6px 12px rgb(0 0 0 / 0.18);
  background-image: radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.4), transparent 45%); transform: rotate(var(--r, 0deg)); }
.affiche:nth-child(3n + 1) { --r: -0.8deg; } .affiche:nth-child(3n + 2) { --r: 0.6deg; } .affiche:nth-child(3n) { --r: -0.3deg; }
a.affiche:hover { box-shadow: 0 0 0 2px var(--sceau), 0 6px 12px rgb(0 0 0 / 0.2); color: var(--encre); }
.affiche::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e66, #8e1f1a); box-shadow: 0 2px 2px rgb(0 0 0 / 0.35); }
.affiche-bandeau { margin: 2px 0 4px; padding: 3px 0; text-align: center; background: var(--sceau); color: #fff; font: 700 0.72rem/1.2 var(--titre); letter-spacing: 0.16em; text-transform: uppercase; }
.affiche-nom { margin: 0; font: 700 1.25rem/1.15 var(--titre); text-transform: uppercase; overflow-wrap: anywhere; }
.affiche-nature { margin: 0; font-style: italic; color: var(--encre-douce); }
.affiche-detail { margin: 0; font-size: 0.86rem; }
.affiche-note { margin: 4px 0 0; font-size: 0.78rem; color: var(--encre-douce); }
.affiche.statut-verdict_rendu .affiche-bandeau { background: var(--olive-fonce); }
.au-tribunal { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #b9a37a; }
.au-tribunal .lignes .ligne-inerte { display: flex; gap: 8px; align-items: center; padding: 6px 8px; }
.au-tribunal .badge { margin-left: auto; }
/* Champ piège à robots du formulaire public : invisible pour les humains */
.piege { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }
.repartition { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.part-repartition { display: grid; gap: 2px; padding: 10px 12px; border-left: 5px solid var(--c); background: rgb(255 255 255 / 0.35); border-radius: 0 6px 6px 0; }
.part-repartition .lib { font-size: 0.85rem; color: var(--encre-douce); }
.part-repartition b { font: 700 1.35rem var(--titre); color: var(--encre); }
/* Aération des formulaires dans les feuilles du poste */
.panneau .grille-2, .panneau .grille-3 { gap: 4px 18px; }
.panneau h2 + .aide, .panneau h2 + p { margin-top: -4px; }
.form-prime { margin-top: 8px; }

/* Organigramme : troisième pilier, le Pôle Stratégie */
.org-strategie { border-top: 6px solid #9a5f0e; max-width: 920px; margin: 0 auto; }
.org-strategie .org-embleme { border-radius: 50%; background: #f6e6c2; mix-blend-mode: multiply; }
.org-strategie .org-illus { mix-blend-mode: multiply; }
.org-strategie-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 12px; }
@media (max-width: 520px) { .org-strategie .org-illus { display: none; } }

.chargement-accueil { text-align: center; margin-top: 30vh; }