/* =====================================================================
   LSPD — Mission Row Division

   Direction artistique reprise du sceau du Los Santos Police Department :
   le bleu marine du fond, le sable des lettres et des statues, le blanc des
   balances, et le rouge du drapeau réservé aux alertes. Tout le site tient
   dans ces quatre couleurs.

   Les deux premières sont réglables depuis le menu F1 : `--accent` et
   `--encre` sont réécrites en ligne dans `partials/head.ejs`, et toutes les
   nuances en découlent.
   ===================================================================== */

:root {
  /* Le bleu du sceau, et ses deux dégradés pour les fonds superposés. */
  --encre: #1b2456;
  --encre-2: #232d66;
  --encre-3: #2e3878;

  /* Le sable des lettres et des figures du sceau. */
  --accent: #c3b393;
  --accent-clair: #e4dac4;
  --accent-sombre: #726753;

  --ivoire: #f1ece1;
  --pierre: #8d94ad;
  --pierre-clair: #cbd1e2;
  --papier: #f5f5f2;
  --blanc: #ffffff;
  --rouge: #c1272d;   /* le rouge du drapeau, pour les seules alertes */
  --vert: #3f7a52;

  --ombre: 0 2px 10px rgba(27, 36, 86, .08);
  --ombre-forte: 0 12px 34px rgba(27, 36, 86, .22);
  --rayon: 6px;
  /* Typographie par défaut — la paire « Officiel ». Elle est réécrite en ligne
     par `partials/head.ejs` selon le choix fait dans le menu du site. */
  --titre: 'Bahnschrift', 'Franklin Gothic Medium', 'Segoe UI Semibold', 'Arial Narrow', sans-serif;
  --texte: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.65;
  color: var(--encre-2);
  background: var(--papier);
}

img { max-width: 100%; }
a { color: var(--accent-sombre); }
a:hover { color: var(--encre); }

/* Filet de sécurité sur tout ce qu'un tiers saisit : une suite de caractères
   sans espace — « testtesttest… », une URL, un matricule à rallonge — se coupe
   en bout de ligne au lieu d'élargir la carte, puis la page entière.
   `anywhere` plutôt que `break-word` : lui seul est pris en compte dans le
   calcul de largeur minimale, donc dans les grilles et les boîtes flexibles. */
p, li, dd, dt, td, th, h1, h2, h3, h4, summary, blockquote, figcaption,
.bloc p, .diapo-texte, .vide, .tag, .mat {
  overflow-wrap: anywhere;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.15;
  margin: 0 0 .6rem;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
.mb0 { margin-bottom: 0; }
.small { font-size: .86rem; }
.muted { color: var(--pierre); }
.center { text-align: center; }

.wrap { width: min(1180px, 92vw); margin: 0 auto; }

.ico { vertical-align: -.2em; }

/* ------------------------------------------------------------ bandeau */
.topbar {
  background: var(--encre);
  color: var(--ivoire);
  border-bottom: 3px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 60;
}
/* Le bandeau respire plus large que le corps des pages : le conteneur de
   lecture est calé sur 1180 px, mais la navigation du personnel y tiendrait à
   l'étroit et passerait à la ligne dès qu'un compte a plusieurs entrées. */
.topbar .wrap {
  display: flex; align-items: center; gap: 1.4rem; min-height: 74px;
  width: min(1400px, 96vw);
}

/* Le bloc de marque ne se comprime jamais : c'est la navigation qui cède. */
.marque {
  display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit;
  flex: 0 0 auto;
}
.marque img { height: 48px; width: auto; }
.marque b {
  font-family: var(--titre); text-transform: uppercase; font-size: 1.05rem;
  letter-spacing: .07em; display: block; color: var(--ivoire); white-space: nowrap;
}
.marque span { display: block; font-size: .68rem; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; }

.topbar nav {
  margin-left: auto; display: flex; align-items: center;
  gap: .2rem; flex-wrap: wrap; justify-content: flex-end;
}
.topbar nav a {
  color: var(--pierre-clair); text-decoration: none; padding: .5rem .7rem;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px;
  white-space: nowrap;
}

/* Les entrées du personnel : un groupe à part, séparé du menu public. */
.nav-membre {
  display: flex; align-items: center; gap: .2rem;
  margin-left: .5rem; padding-left: .6rem;
  border-left: 1px solid rgba(195, 179, 147, .3);
}
.nav-membre a { color: var(--accent-clair); }

/* La cloche des demandes : une icône, et une pastille rouge quand il y a du
   travail. Elle ne s'affiche qu'aux comptes qui traitent des demandes. */
.cloche { position: relative; display: inline-flex; align-items: center; padding: .5rem .6rem; }
.cloche-nb {
  position: absolute; top: .1rem; right: .05rem;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--rouge); color: #fff; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: 0; line-height: 1;
}
.cloche-nb[hidden] { display: none; }
/* Une demande vient d'arriver : la cloche se signale une fois, puis se tait. */
.cloche.sonne { animation: sonne 1.1s ease 2; }
@keyframes sonne {
  0%, 100% { transform: none; }
  20% { transform: rotate(-11deg) scale(1.12); }
  45% { transform: rotate(9deg) scale(1.12); }
  70% { transform: rotate(-5deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .cloche.sonne { animation: none; } }
.topbar nav a:hover { color: var(--accent-clair); background: rgba(195, 179, 147, .1); }
.topbar nav a.actif { color: var(--encre); background: var(--accent); }

.burger {
  display: none; margin-left: auto; background: none; border: 1px solid var(--pierre);
  color: var(--ivoire); border-radius: 4px; padding: .45rem .7rem; cursor: pointer;
}

/* --------------------------------------------------------------- héros */
.hero {
  background:
    linear-gradient(180deg, rgba(27, 36, 86, .93), rgba(27, 36, 86, .97)),
    radial-gradient(circle at 78% 40%, rgba(195, 179, 147, .22), transparent 55%);
  background-color: var(--encre);
  color: var(--ivoire);
  padding: 4.5rem 0 4rem;
  border-bottom: 3px solid var(--accent);
}
.hero .wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: center; }
.hero h1 { color: var(--blanc); }
.hero p { color: var(--pierre-clair); font-size: 1.05rem; max-width: 56ch; }
.hero-sceau { text-align: center; }
.hero-sceau img { max-height: 300px; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); }

/* Sur fond clair, l'accent passe en version foncée : le sable pur ne se lit
   pas sur du blanc. Sur fond bleu, on reprend le sable du sceau. */
.eyebrow {
  display: inline-block; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent-sombre); margin-bottom: .7rem; font-weight: 700;
}
.devise {
  font-family: var(--titre); letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent-sombre); font-size: .8rem;
}
.hero .eyebrow, .hero .devise,
section.sombre .eyebrow, section.sombre .devise,
.app-bandeau .eyebrow, .fiche-id .eyebrow, footer .devise { color: var(--accent); }

/* ------------------------------------------------------------ sections */
section { padding: 3.4rem 0; }
section.alt { background: var(--blanc); }
section.sombre { background: var(--encre); color: var(--ivoire); }
section.sombre h1, section.sombre h2, section.sombre h3 { color: var(--blanc); }
section.sombre p { color: var(--pierre-clair); }

.sec-head { max-width: 62ch; margin-bottom: 2rem; }
.sec-head p { color: var(--pierre); }
section.sombre .sec-head p { color: var(--pierre-clair); }

.grid { display: grid; gap: 1.4rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: flex; flex-direction: column; gap: 1rem; }

/* --------------------------------------------------------------- cartes */
.card {
  background: var(--blanc);
  border: 1px solid rgba(27, 36, 86, .1);
  border-top: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1.4rem;
  box-shadow: var(--ombre);
}
section.alt .card { background: var(--papier); }
section.sombre .card { background: var(--encre-2); border-color: rgba(195, 179, 147, .25); color: var(--ivoire); }
section.sombre .card h3 { color: var(--accent-clair); }
section.sombre .card p { color: var(--pierre-clair); }
.card p:last-child { margin-bottom: 0; }
.card-lien { text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; }
.card-lien:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); color: inherit; }

.card-media { text-align: center; padding-top: 1.8rem; }
.card-media img { height: 108px; width: auto; object-fit: contain; }

/* ---------------------------------------------------------- tuiles (portail) */
/* Les grandes tuiles du portail interne : une action = une tuile lisible. */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1.2rem; }
.tuile {
  display: flex; gap: 1rem; align-items: flex-start; text-decoration: none;
  background: var(--blanc); border: 1px solid rgba(27, 36, 86, .1);
  border-left: 4px solid var(--accent); border-radius: var(--rayon);
  padding: 1.2rem; color: inherit; box-shadow: var(--ombre);
  transition: transform .15s, box-shadow .15s;
}
.tuile:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); color: inherit; }
.tuile-ico {
  flex: 0 0 42px; height: 42px; display: grid; place-items: center;
  background: var(--encre); color: var(--accent); border-radius: 50%;
}
.tuile b { font-family: var(--titre); text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
.tuile p { margin: .2rem 0 0; font-size: .85rem; color: var(--pierre); }
.tuile .compteur {
  margin-left: auto; background: var(--encre-3); color: var(--accent-clair);
  border-radius: 999px; padding: .1rem .55rem; font-size: .76rem; font-weight: 700;
}
.tuile .compteur.alerte { background: var(--rouge); color: #fff; }
/* Une tuile qui a du travail en attente se distingue au premier coup d'œil. */
.tuile-chaude { border-left-color: var(--rouge); }

/* Les cartes de la boîte de réception, même logique en plus large. */
.alerte-carte { display: block; }
.alerte-carte.chaude { border-left: 4px solid var(--rouge); }
.alerte-nb {
  flex: 0 0 auto; min-width: 34px; text-align: center;
  background: var(--rouge); color: #fff; border-radius: 999px;
  padding: .2rem .6rem; font-family: var(--titre); font-size: 1.05rem; line-height: 1.3;
}
.alerte-nb.vide { background: var(--encre-3); color: var(--accent-clair); }

/* ----------------------------------------------- bandeau d'application */
.app-bandeau {
  background: var(--encre); color: var(--ivoire); border-bottom: 3px solid var(--accent);
  padding: 1.6rem 0 0;
}
.app-bandeau.sable { border-color: var(--accent); }
.app-bandeau.rouge { border-color: var(--rouge); }
.app-bandeau .tete { display: flex; align-items: center; gap: 1.1rem; }
.app-bandeau .tete img { height: 62px; }
.app-bandeau h1 { font-size: 1.7rem; margin: 0; color: var(--blanc); }
.app-bandeau .tete p { margin: 0; color: var(--pierre-clair); font-size: .9rem; }
/* Les onglets d'une application se lisent sous son titre, donc à gauche comme
   lui. (Ils étaient jusqu'ici alignés à droite, par contagion des règles du
   bandeau qui visaient toutes les balises <nav> du site.) */
.app-nav {
  display: flex; gap: .2rem; flex-wrap: wrap; margin-top: 1.2rem;
  justify-content: flex-start;
}
.app-nav a {
  color: var(--pierre-clair); text-decoration: none; padding: .6rem .9rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 3px solid transparent;
}
.app-nav a:hover { color: var(--accent-clair); }
.app-nav a.actif { color: var(--accent); border-bottom-color: var(--accent); }
.app-corps { padding-top: 2.4rem; }

.fil { margin-bottom: 1.2rem; font-size: .85rem; }
.fil a { color: var(--pierre); text-decoration: none; }
.fil a:hover { color: var(--encre); }

/* -------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font-family: var(--titre); text-transform: uppercase; letter-spacing: .09em;
  font-size: .85rem; padding: .75rem 1.5rem; border-radius: 4px;
  border: 2px solid var(--accent); background: none; color: var(--accent-sombre);
  text-decoration: none; cursor: pointer; transition: .15s;
}
.btn:hover { background: var(--accent); color: var(--encre); }
.btn-accent { background: var(--accent); color: var(--encre); }
.btn-accent:hover { background: var(--accent-clair); border-color: var(--accent-clair); }
.btn-encre { background: var(--encre); border-color: var(--encre); color: var(--ivoire); }
.btn-encre:hover { background: var(--encre-3); border-color: var(--encre-3); color: var(--accent-clair); }
.btn-rouge { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.btn-rouge:hover { background: #8d2a23; border-color: #8d2a23; color: #fff; }
.btn-sm { padding: .38rem .8rem; font-size: .74rem; }
.btn[disabled], .btn.off { opacity: .45; pointer-events: none; }
.actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; }

/* ------------------------------------------------------------ étiquettes */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.tag {
  display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  padding: .2rem .6rem; border-radius: 3px; font-weight: 700;
  background: rgba(195, 179, 147, .18); color: var(--accent-sombre); border: 1px solid rgba(195, 179, 147, .4);
}
.tag-accent { background: var(--accent); color: var(--encre); border-color: var(--accent); }
.tag-encre { background: var(--encre); color: var(--accent-clair); border-color: var(--encre); }
.tag-vert { background: rgba(63, 122, 82, .15); color: var(--vert); border-color: rgba(63, 122, 82, .4); }
.tag-rouge { background: rgba(168, 52, 44, .13); color: var(--rouge); border-color: rgba(168, 52, 44, .4); }
.tag-gris { background: rgba(138, 143, 152, .16); color: var(--pierre); border-color: rgba(138, 143, 152, .35); }
.mat {
  font-family: 'Consolas', 'SF Mono', monospace; font-size: .78rem; letter-spacing: .06em;
  background: var(--encre); color: var(--accent-clair); padding: .16rem .5rem; border-radius: 3px;
}

/* ---------------------------------------------------------------- notes */
.notice {
  background: var(--blanc); border-left: 4px solid var(--accent);
  padding: 1rem 1.2rem; border-radius: 0 var(--rayon) var(--rayon) 0;
  box-shadow: var(--ombre); font-size: .92rem;
}
.notice strong { display: block; font-family: var(--titre); text-transform: uppercase; letter-spacing: .05em; }
.notice.ok { border-left-color: var(--vert); }
.notice.stop { border-left-color: var(--rouge); }
.erreurs { list-style: none; margin: 0 0 1.2rem; padding: 1rem 1.2rem; background: rgba(168, 52, 44, .08);
  border-left: 4px solid var(--rouge); border-radius: 0 var(--rayon) var(--rayon) 0; }
.erreurs li { color: var(--rouge); font-size: .9rem; }

/* ------------------------------------------------------------ formulaires */
form .champ { margin-bottom: 1.1rem; }
label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 700; color: var(--encre-3); margin-bottom: .35rem; }
label .aide { display: block; text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--pierre); font-size: .82rem; margin-top: .1rem; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search],
input[type=url], select, textarea {
  width: 100%; padding: .7rem .85rem; border: 1px solid rgba(27, 36, 86, .2);
  border-radius: 4px; font-family: var(--texte); font-size: .95rem; background: var(--blanc);
  color: var(--encre);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(195, 179, 147, .22);
}
textarea { min-height: 130px; resize: vertical; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.champ-triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.coche { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; }
.coche input { margin-top: .3rem; }
.coche label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .92rem; margin: 0; }
fieldset { border: 1px solid rgba(27, 36, 86, .15); border-radius: var(--rayon); padding: 1.2rem; margin: 0 0 1.4rem; }
legend { font-family: var(--titre); text-transform: uppercase; letter-spacing: .08em; padding: 0 .5rem; font-size: .9rem; }

.encadre {
  background: var(--blanc); border: 1px solid rgba(27, 36, 86, .1);
  border-radius: var(--rayon); padding: 1.6rem; box-shadow: var(--ombre);
}
.filtres { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.filtres input[type=search] { max-width: 320px; }

/* -------------------------------------------------------------- tableaux */
.table-scroll { overflow-x: auto; border-radius: var(--rayon); box-shadow: var(--ombre); background: var(--blanc); }
table.datatable { width: 100%; border-collapse: collapse; min-width: 640px; }
table.datatable th {
  background: var(--encre); color: var(--accent); text-align: left; padding: .7rem .9rem;
  font-family: var(--titre); text-transform: uppercase; letter-spacing: .08em; font-size: .76rem;
  white-space: nowrap;
}
table.datatable td { padding: .7rem .9rem; border-bottom: 1px solid rgba(27, 36, 86, .08); vertical-align: middle; }
table.datatable tr:last-child td { border-bottom: none; }
table.datatable tbody tr:hover { background: rgba(195, 179, 147, .07); }

/* ------------------------------------------------------------- personnel */
.galon { height: 34px; width: auto; vertical-align: middle; }
.galon-lg { height: 90px; }

.fiche-id {
  display: grid; grid-template-columns: 120px 1fr; gap: 1.6rem; align-items: center;
  background: var(--encre); color: var(--ivoire); border-radius: var(--rayon);
  padding: 1.6rem; border-left: 5px solid var(--accent);
}
.fiche-id h2 { color: var(--blanc); margin: 0; }
.fiche-id .galon-cadre { display: grid; place-items: center; background: var(--encre-2); border-radius: var(--rayon); padding: .8rem; }
.lignes { list-style: none; margin: .8rem 0 0; padding: 0; }
.lignes li { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0;
  border-bottom: 1px dashed rgba(195, 179, 147, .22); font-size: .9rem; }
.lignes li:last-child { border-bottom: none; }
.lignes li span:first-child { color: var(--pierre); text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; }
.lignes li span:last-child { font-weight: 600; }

.portrait {
  width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent); background: var(--encre-3);
}
.initiales {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--encre); color: var(--accent); font-family: var(--titre); font-size: 1.3rem;
  border: 2px solid var(--accent);
}
.membre { display: flex; gap: 1rem; align-items: center; }
.membre b { display: block; font-family: var(--titre); text-transform: uppercase; letter-spacing: .03em; }
.membre span { font-size: .84rem; color: var(--pierre); }

/* ------------------------------------------------------------- dossiers */
.dossier {
  background: var(--blanc); border: 1px solid rgba(27, 36, 86, .1);
  border-left: 4px solid var(--encre); border-radius: var(--rayon);
  padding: 1.3rem; box-shadow: var(--ombre);
}
.dossier.sable { border-left-color: var(--accent); }
.dossier.rouge { border-left-color: var(--rouge); }
.dossier.vert { border-left-color: var(--vert); }
.bloc { margin-top: .9rem; }
.bloc .lbl { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--pierre); font-weight: 700; margin-bottom: .2rem; }
.bloc p { margin: 0; white-space: pre-wrap; }

.qual {
  display: inline-flex; flex-direction: column; background: var(--encre); color: var(--accent-clair);
  padding: .35rem .7rem; border-radius: 4px; font-size: .82rem; font-weight: 600;
}
.qual small { color: var(--pierre); font-weight: 400; font-size: .7rem; }

.ligne-etat { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem;
  background: var(--blanc); border: 1px solid rgba(27, 36, 86, .1); border-radius: var(--rayon); }
.ligne-etat .pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--pierre); flex: 0 0 auto; }
.ligne-etat.on .pastille { background: var(--vert); }
.ligne-etat > div { flex: 1; }

/* --------------------------------------------------------------- examen */
.question { background: var(--blanc); border: 1px solid rgba(27, 36, 86, .1);
  border-radius: var(--rayon); padding: 1.2rem; margin-bottom: 1rem; }
.question > p { font-weight: 600; }
.question .coche label { cursor: pointer; }

/* ------------------------------------------------------------ connexion */
.page-connexion { min-height: calc(100vh - 74px); display: grid; place-items: center;
  background: var(--encre); padding: 3rem 1rem; }
.boite-connexion { width: min(430px, 100%); background: var(--blanc); border-radius: var(--rayon);
  padding: 2.2rem; box-shadow: var(--ombre-forte); border-top: 4px solid var(--accent); }
.boite-connexion .sceau { text-align: center; margin-bottom: 1.2rem; }
.boite-connexion .sceau img { height: 96px; }

/* ---------------------------------------------------------------- pied */
footer {
  background: var(--encre); color: var(--pierre); padding: 3rem 0 2rem;
  border-top: 3px solid var(--accent); font-size: .88rem;
}
footer h4 { color: var(--accent); font-size: .82rem; letter-spacing: .16em; }
footer a { color: var(--pierre-clair); text-decoration: none; display: block; padding: .15rem 0; }
footer a:hover { color: var(--accent-clair); }
.footer-bas { border-top: 1px solid rgba(195, 179, 147, .2); margin-top: 2rem; padding-top: 1.2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; }

/* --------------------------------------------------------------- divers */
.ruban {
  background: var(--accent); color: var(--encre); text-align: center; padding: .5rem 1rem;
  font-size: .82rem; font-weight: 600;
}
.ruban-alerte { background: var(--rouge); color: #fff; }
.compteurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.compteurs .n { font-family: var(--titre); font-size: 2.4rem; color: var(--accent); line-height: 1; }
.compteurs span { font-size: .76rem; text-transform: uppercase; letter-spacing: .13em; color: var(--pierre); }

.vide { text-align: center; padding: 2.6rem 1rem; color: var(--pierre); }

/* --------------------------------------------------- parc automobile */
/* Un véhicule accessible se repère au premier coup d'œil : liseré vert. */
.vehicule {
  background: var(--blanc); border: 1px solid rgba(27, 36, 86, .1);
  border-top: 3px solid var(--pierre); border-radius: var(--rayon);
  overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column;
}
.vehicule.ouvert { border-top-color: var(--vert); }
.vehicule img { width: 100%; height: 170px; object-fit: cover; display: block; }
.vehicule-sans-image {
  height: 170px; display: grid; place-items: center;
  background: var(--encre); color: var(--accent);
}
.vehicule-corps { padding: 1.1rem; flex: 1; }
.vehicule-corps h3 { margin-bottom: .3rem; }
.vehicule-corps .lignes { margin-top: .8rem; }

/* ------------------------------------------ documents du département */
/* Une diapositive importée : l'image telle qu'elle est, et son texte sous
   la main pour qui préfère lire ou chercher un mot. */
.diapo { margin: 0 0 1.6rem; }
.diapo img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(27, 36, 86, .15); border-radius: var(--rayon);
  box-shadow: var(--ombre); background: var(--blanc);
}
.diapo figcaption { margin-top: .5rem; }
.diapo-num {
  display: inline-block; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pierre); font-weight: 700;
}
.diapo details { margin-top: .4rem; }
.diapo summary {
  cursor: pointer; font-size: .82rem; color: var(--accent-sombre);
  text-transform: uppercase; letter-spacing: .08em;
}
.diapo-texte {
  white-space: pre-wrap; font-size: .9rem; margin-top: .6rem;
  padding: .9rem 1.1rem; background: var(--blanc);
  border-left: 3px solid var(--accent); border-radius: 0 var(--rayon) var(--rayon) 0;
}

/* ------------------------------------------ livrets rédigés pour le site */
/* Un livret se lit : sommaire cliquable en tête, puis des chapitres qui
   alternent texte, listes, tableaux et les seules illustrations qui portent
   une information — carte des secteurs, schéma de procédure. */
.doc-sommaire {
  background: var(--blanc); border: 1px solid rgba(27, 36, 86, .1);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.1rem 1.3rem; margin-bottom: 1.4rem;
}
.doc-sommaire .lbl {
  display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--pierre); font-weight: 700; margin-bottom: .5rem;
}
/* Sur deux colonnes dès qu'il y a de la place : un sommaire de sept chapitres
   tient alors sous les yeux sans faire défiler. */
.doc-sommaire ol {
  margin: 0; padding-left: 1.2rem;
  columns: 2; column-gap: 2rem;
}
.doc-sommaire li { margin: .15rem 0; break-inside: avoid; }
.doc-sommaire a { text-decoration: none; color: var(--encre-2); }
.doc-sommaire a:hover { text-decoration: underline; color: var(--encre); }
@media (max-width: 620px) { .doc-sommaire ol { columns: 1; } }

.doc-chapitre { margin-bottom: 1.2rem; scroll-margin-top: 90px; }
.doc-soustitre {
  margin: 1.4rem 0 .2rem; font-size: .96rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--encre);
  padding-bottom: .3rem; border-bottom: 1px solid rgba(27, 36, 86, .12);
}
.doc-legende { margin: 1rem 0 0; font-size: .86rem; color: var(--pierre); }

.doc-liste, .doc-etapes { margin: .7rem 0 0; padding-left: 1.3rem; }
.doc-liste li, .doc-etapes li { margin: .3rem 0; }
.doc-liste { list-style: none; padding-left: 1.1rem; }
.doc-liste li { position: relative; }
.doc-liste li::before {
  content: '▸'; position: absolute; left: -1.1rem; color: var(--accent-sombre);
}

.doc-defs { margin: .8rem 0 0; }
.doc-defs dt {
  font-family: var(--titre); text-transform: uppercase; letter-spacing: .04em;
  color: var(--encre); margin-top: .6rem;
}
.doc-defs dd { margin: .1rem 0 0; }

.doc-formats { margin-top: .8rem; display: grid; gap: .6rem; }
.doc-format {
  background: var(--papier); border-left: 3px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0; padding: .7rem .9rem;
}
.doc-format b {
  display: block; font-family: var(--titre); text-transform: uppercase;
  letter-spacing: .04em; color: var(--encre); font-size: .88rem;
}
.doc-format code {
  display: block; margin-top: .25rem; font-size: .88rem; color: var(--encre-2);
  word-break: break-word;
}
.doc-format em { display: block; margin-top: .25rem; font-size: .86rem; color: var(--pierre); }

table.doc-table { min-width: 0; }
table.doc-table td { vertical-align: top; }

.doc-codes {
  list-style: none; margin: .8rem 0 0; padding: 0;
  display: grid; gap: .3rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.doc-codes li {
  display: flex; gap: .5rem; align-items: baseline;
  padding: .25rem .5rem; border-radius: 4px; font-size: .9rem;
}
.doc-codes li b { flex: 0 0 auto; font-family: var(--titre); color: var(--encre); }
.doc-codes li span { color: var(--encre-2); }
/* Les codes surlignés en rouge dans le manuel d'origine : ceux qu'on doit
   reconnaître à l'oreille sans réfléchir. */
.doc-codes li.cle { background: rgba(193, 39, 45, .07); }
.doc-codes li.cle b { color: var(--rouge); }

.doc-figure { margin: 1rem 0 0; }
/* Carte et schémas sont affichés au plus à leur taille réelle : agrandis, ils
   deviennent illisibles là où le texte du schéma est déjà petit. */
.doc-figure img {
  display: block; margin: 0 auto; max-width: 100%; height: auto;
  border: 1px solid rgba(27, 36, 86, .15); border-radius: var(--rayon);
  box-shadow: var(--ombre); background: var(--blanc);
}
.doc-figure figcaption {
  margin-top: .45rem; font-size: .8rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pierre); font-weight: 700;
}

/* ------------------------------------- victimes d'un rapport d'opération */
.victime-bloc {
  background: var(--papier); border: 1px solid rgba(27, 36, 86, .14);
  border-left: 4px solid var(--accent); border-radius: var(--rayon);
  padding: 1.1rem; margin-bottom: 1rem;
}
.victime-tete {
  display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem;
  padding-bottom: .6rem; border-bottom: 1px dashed rgba(27, 36, 86, .15);
}
.victime-tete strong {
  font-family: var(--titre); text-transform: uppercase; letter-spacing: .06em;
  font-size: .85rem; flex: 1;
}
.victime-blessures {
  border-top: 2px solid rgba(168, 52, 44, .25); margin-top: .8rem; padding-top: .9rem;
}
.victime-blessures[hidden] { display: none; }

/* ------------------------------------------- menu F1 (superadministrateur) */
.pan-bouton {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: .5rem .9rem; border-radius: var(--rayon);
  background: var(--encre); color: var(--accent); border: 2px solid var(--accent);
  font-family: var(--titre); cursor: pointer; box-shadow: var(--ombre-forte);
}
.pan-bouton span { font-size: .82rem; letter-spacing: .12em; line-height: 1; }
.pan-bouton small { font-size: .62rem; letter-spacing: .18em; opacity: .75; line-height: 1.4; }
.pan-bouton:hover { background: var(--accent); color: var(--encre); }

.pan-couche {
  position: fixed; inset: 0; z-index: 120; background: rgba(12, 16, 40, .72);
  display: none; padding: 3vh 1rem; overflow-y: auto;
}
.pan-couche.ouvert { display: block; }
body.pan-ouvert { overflow: hidden; }

.pan-boite {
  width: min(940px, 100%); margin: 0 auto; background: var(--papier);
  border-radius: var(--rayon); box-shadow: var(--ombre-forte);
  border-top: 4px solid var(--accent); padding: 1.6rem;
}
.pan-tete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.pan-tete > div { flex: 1; }

.pan-onglets { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 2px solid rgba(27, 36, 86, .12);
  margin-bottom: 1.4rem; }
.pan-onglets button {
  background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer;
  font-family: var(--titre); text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; padding: .6rem .9rem; color: var(--pierre);
}
.pan-onglets button:hover { color: var(--encre); }
.pan-onglets button.actif { color: var(--accent-sombre); border-bottom-color: var(--accent); }

.pan-panneau { display: none; }
.pan-panneau.actif { display: block; }

.pan-bloc {
  background: var(--blanc); border: 1px solid rgba(27, 36, 86, .1);
  border-radius: var(--rayon); padding: 1.1rem; margin-bottom: 1rem;
}

.pan-police {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--blanc); border: 1px solid rgba(27, 36, 86, .14);
  border-left: 4px solid transparent; border-radius: var(--rayon);
  padding: .9rem 1.1rem; margin-bottom: .6rem;
}
.pan-police:hover { border-color: var(--accent); }
.pan-police.actif { border-left-color: var(--accent); background: var(--papier); }
.pan-police-nom {
  display: block; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--encre); line-height: 1.15;
}
.pan-police-corps { display: block; font-size: .88rem; color: var(--encre-2); margin-top: .25rem; }
.pan-police-cle {
  display: block; margin-top: .4rem; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-sombre); font-weight: 700;
}

.pan-themes { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .8rem; }
.pan-theme {
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
  background: var(--papier); border: 1px solid rgba(27, 36, 86, .15);
  border-radius: 4px; padding: .4rem .7rem; font-size: .8rem;
}
.pan-theme:hover { border-color: var(--accent); }
.pan-theme span { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.pan-theme b { font-family: var(--titre); text-transform: uppercase; letter-spacing: .04em; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-sceau { display: none; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .compteurs { grid-template-columns: repeat(2, 1fr); }
}
/* Entre 1100 et 760 px, la navigation se resserre plutôt que de passer à la
   ligne : le bandeau garde une seule rangée. */
/* L'entrée « Academy » et la cloche allongent le bandeau. Sur les écrans de
   portable (1500 px et en dessous), on resserre les liens avant qu'ils ne
   passent à la ligne : la devise, elle, reste jusqu'à 1100 px. */
@media (max-width: 1500px) {
  .topbar .wrap { gap: .8rem; }
  .topbar nav a { padding: .45rem .5rem; font-size: .74rem; letter-spacing: .04em; }
  .cloche { padding: .45rem .4rem; }
}

/* Entre 760 px (où le menu bascule sur le bouton « Menu ») et 1200 px, la place
   manque vraiment : on rétrécit le titre de la marque et on serre les liens
   d'un cran de plus, plutôt que de laisser la navigation passer à deux lignes. */
@media (max-width: 1200px) {
  .marque b { font-size: .82rem; letter-spacing: .04em; }
  .marque span { display: none; }
  .topbar nav a { padding: .4rem .38rem; font-size: .7rem; letter-spacing: .02em; }
  .cloche { padding: .4rem .3rem; }
}

@media (max-width: 760px) {
  .burger { display: block; }
  .topbar nav { display: none; width: 100%; flex-direction: column; align-items: stretch;
    padding-bottom: 1rem; margin-left: 0; }
  .topbar nav.ouvert { display: flex; }
  .nav-membre {
    flex-direction: column; align-items: stretch;
    margin: .6rem 0 0; padding: .6rem 0 0;
    border-left: none; border-top: 1px solid rgba(195, 179, 147, .3);
  }
  .topbar .wrap { flex-wrap: wrap; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .champ-double, .champ-triple { grid-template-columns: 1fr; }
  .fiche-id { grid-template-columns: 1fr; text-align: center; }
  .lignes li { flex-direction: column; gap: 0; }
}

@media print {
  .topbar, footer, .app-nav, .actions, .btn { display: none !important; }
  body { background: #fff; }
}