:root {
  --bleu-950: #030b1c;
  --bleu-900: #071938;
  --bleu-800: #0b234f;
  --bleu-700: #123a7a;
  --bleu-600: #1a4fa0;
  --bleu-500: #2563c9;
  --bleu-400: #4a8ce8;
  --bleu-300: #86b6f2;
  --bleu-200: #c2dcfb;
  --bleu-100: #e8f1fd;
  --blanc: #ffffff;
  --gris-texte: #4a5b78;
  --radius: 14px;
  --ombre: 0 10px 30px rgba(11, 35, 79, 0.15);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  color: var(--bleu-900);
  background: radial-gradient(circle at top left, var(--bleu-700), var(--bleu-950) 65%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--bleu-400);
  text-decoration: none;
}

/* ---------- Barre de navigation ---------- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(3, 11, 28, 0.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(134, 182, 242, 0.2);
}

.navbar .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--blanc);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.navbar .brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bleu-400), var(--bleu-600));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--blanc);
  box-shadow: 0 4px 14px rgba(37, 99, 201, 0.5);
}

.navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.navbar .nav-links span {
  color: var(--bleu-200);
  font-size: 0.92rem;
}

.navbar .nav-link {
  display: inline-block;
  color: var(--bleu-100);
  font-size: 0.92rem;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(134, 182, 242, 0.35);
  background: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.navbar .nav-link:hover {
  background: rgba(74, 140, 232, 0.2);
  transform: translateY(-1px);
}

/* ---------- Menu déroulant (compte), ancré en haut à droite ---------- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-dropdown-chevron {
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.nav-dropdown.ouvert .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 220px;
  padding: 0.4rem;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--bleu-900);
  border: 1px solid rgba(134, 182, 242, 0.35);
  border-radius: 10px;
  box-shadow: var(--ombre);
  z-index: 20;
}

.nav-dropdown.ouvert .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--bleu-100);
  font-size: 0.9rem;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

.nav-dropdown-item:hover {
  background: rgba(74, 140, 232, 0.2);
}

.nav-dropdown-item-button {
  color: var(--bleu-100);
}

/* ---------- Conteneur principal ---------- */
.page {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.5rem 4rem;
}

.container {
  width: 100%;
  max-width: 900px;
}

/* Conteneur élargi pour les pages dont le contenu ne tient pas dans 900px
   (ex. le tableau de résultats de la recherche par fichier, dont les noms
   ne doivent jamais être coupés — cf. templates/deces/lot_resultats.html) —
   appliqué via {% block container_class %}. */
.container-large {
  max-width: 1400px;
}

.hero {
  text-align: center;
  color: var(--blanc);
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: 2.1rem;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.hero p {
  color: var(--bleu-200);
  margin: 0;
  font-size: 1rem;
}

/* ---------- Cartes ---------- */
.card {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  padding: 2rem;
  border: 1px solid var(--bleu-100);
}

.card + .card {
  margin-top: 1.6rem;
}

/* ---------- Formulaires ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.4rem;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.date-inline {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 0.5rem;
}

.autocomplete-wrapper {
  position: relative;
}

.autocomplete-list {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--blanc);
  border: 1.5px solid var(--bleu-200);
  border-radius: 10px;
  box-shadow: var(--ombre);
  max-height: 220px;
  overflow-y: auto;
}

.autocomplete-list.ouvert {
  display: block;
}

.autocomplete-list li {
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--bleu-900);
  font-size: 0.92rem;
}

.autocomplete-list li:hover,
.autocomplete-list li.actif {
  background: var(--bleu-100);
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bleu-700);
  margin-bottom: 0.35rem;
}

.form-control, input[type="text"], input[type="password"], input[type="date"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1.5px solid var(--bleu-200);
  background: var(--bleu-100);
  font-size: 0.95rem;
  color: var(--bleu-900);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus, input:focus {
  outline: none;
  border-color: var(--bleu-500);
  box-shadow: 0 0 0 4px rgba(37, 99, 201, 0.15);
  background: var(--blanc);
}

/* Menu déroulant "joli" : flèche personnalisée (SVG intégré) à la place de
   la flèche native du navigateur, cohérente avec le reste du design —
   utilisé par templates/deces/lot_mapping.html, dans la même grille
   .form-grid/.form-group (label au-dessus du champ) que la page de
   recherche unitaire (templates/deces/recherche.html). */
.select-joli {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4fa0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.4rem;
  cursor: pointer;
}

.select-joli:hover {
  border-color: var(--bleu-400);
}

/* ---------- Zone de dépôt de fichier ---------- */
/* Sélecteur label.file-dropzone (pas juste .file-dropzone) : cette zone EST
   un <label> (cf. templates/deces/lot_upload.html), et .form-group label
   (display: block) a une spécificité plus élevée qu'une simple classe —
   sans l'élément "label" ici, cette règle display: flex serait ignorée. */
label.file-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 2.2rem 1.2rem;
  border: 2px dashed var(--bleu-300);
  border-radius: 12px;
  background: var(--bleu-100);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.file-dropzone:hover,
.file-dropzone.survole {
  border-color: var(--bleu-500);
  background: var(--bleu-200);
}

.file-dropzone.avec-fichier {
  border-style: solid;
  border-color: var(--bleu-500);
  background: var(--blanc);
}

.file-dropzone-icon {
  font-size: 2rem;
  line-height: 1;
}

.file-dropzone-text {
  font-weight: 600;
  color: var(--bleu-800);
  font-size: 0.95rem;
}

.file-dropzone-hint {
  color: var(--gris-texte);
  font-size: 0.8rem;
}

.file-dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.errorlist {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0;
  color: #c0392b;
  font-size: 0.82rem;
}

/* ---------- Tableau de résultats de la recherche par fichier ---------- */
/* Colonnes dimensionnées au contenu (pas de table-layout: fixed) : les
   noms/prénoms ne doivent JAMAIS être coupés par un retour à la ligne (cf.
   demande utilisateur) — impose donc white-space: nowrap partout, quitte à
   ce que le tableau dépasse la largeur de la carte ; le conteneur parent
   (overflow-x: auto, cf. template) prend le relais avec un défilement
   horizontal dans ce cas plutôt que de casser les noms. */
.tableau-resultats-lot {
  border-collapse: collapse;
  font-size: 0.78rem;
}

.tableau-resultats-lot th,
.tableau-resultats-lot td {
  padding: 0.35rem 0.55rem;
  text-align: left;
  white-space: nowrap;
}

.tableau-resultats-lot thead tr:first-child th {
  background: var(--bleu-100);
  color: var(--bleu-800);
  text-align: center;
  border-bottom: 1px solid var(--bleu-200);
}

.tableau-resultats-lot thead tr:last-child th {
  background: var(--bleu-100);
  color: var(--bleu-700);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-bottom: 3px solid var(--bleu-300);
  line-height: 1.25;
}

/* En-têtes triables (cf. base.js-like script dans lot_resultats.html) :
   curseur + surbrillance au survol, petite flèche indiquant la colonne et
   le sens de tri actifs. */
.tableau-resultats-lot th.triable {
  cursor: pointer;
  user-select: none;
}

.tableau-resultats-lot th.triable:hover {
  background: var(--bleu-200);
}

.tableau-resultats-lot th.tri-croissant::after {
  content: " \25B2";
  color: var(--bleu-600);
}

.tableau-resultats-lot th.tri-decroissant::after {
  content: " \25BC";
  color: var(--bleu-600);
}

.tableau-resultats-lot tbody tr:nth-child(odd) {
  background: var(--blanc);
}

.tableau-resultats-lot tbody tr:nth-child(even) {
  background: var(--bleu-100);
}

.tableau-resultats-lot tbody td {
  border-bottom: 1px solid var(--bleu-100);
}

.tableau-resultats-lot .debut-groupe {
  border-left: 3px solid var(--bleu-300);
}

.tableau-resultats-lot .cellule-identifiant {
  font-weight: 600;
  color: var(--bleu-800);
}

.tableau-resultats-lot .cellule-score {
  font-weight: 700;
  color: var(--bleu-700);
}

.tableau-resultats-lot .cellule-centree {
  text-align: center;
}

.tableau-resultats-lot .cellule-vide {
  color: var(--gris-texte);
  font-style: italic;
  white-space: normal;
}

/* Correspondance client/RNIPP (nom, prénoms, date nais. — par composante,
   code naiss., proximité résidence/décès) : vert si ça concorde, rouge sinon
   — pas de couleur si l'un des deux champs est absent (rien à comparer).
   Appliqué à un <span> autour du seul texte (pas au <td>), pour que seul le
   caractère soit surligné et non le remplissage/espacement de la cellule,
   cf. demande utilisateur. AUCUN padding/border-radius ici (contrairement à
   un badge classique) : un mot peut être découpé en plusieurs <span>
   adjacents (ex. "AIME" vert + "A" rouge pour un écart d'1 caractère, cf.
   _diff_mot dans deces/views.py) — un padding par <span> les aurait
   affichés comme des pastilles séparées par un espace visuel, alors qu'ils
   doivent rester collés comme un mot normal. Mêmes teintes que les badges
   de statut de compte (cf. administration_comptes.html) pour rester
   cohérent avec le reste de l'application. */
.tableau-resultats-lot .cellule-vert {
  background: #e7f7ed;
  color: #1e7a42;
}

.tableau-resultats-lot .cellule-rouge {
  background: #fdeaea;
  color: #b3261e;
}

.form-actions {
  margin-top: 1.6rem;
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--bleu-500), var(--bleu-700));
  color: var(--blanc);
  box-shadow: 0 6px 16px rgba(37, 99, 201, 0.35);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37, 99, 201, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--bleu-700);
  border: 1.5px solid var(--bleu-300);
}

.btn-ghost:hover {
  background: var(--bleu-100);
}

/* ---------- Résultats de recherche ---------- */
.result-card {
  border-left: 5px solid var(--bleu-500);
  border-radius: 10px;
  background: var(--bleu-100);
  padding: 1.1rem 1.3rem;
  margin-bottom: 0.9rem;
}

.result-card h3 {
  margin: 0 0 0.5rem;
  color: var(--bleu-800);
  font-size: 1.05rem;
}

.result-card .badge-deces {
  display: inline-block;
  background: var(--bleu-700);
  color: var(--blanc);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-left: 0.6rem;
  vertical-align: middle;
}

.result-card .badge-score {
  display: inline-block;
  background: var(--bleu-100);
  color: var(--bleu-700);
  border: 1px solid var(--bleu-300);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.result-card .badge-score-bayes {
  background: var(--blanc);
  color: var(--gris-texte);
  border: 1px dashed var(--bleu-300);
  font-weight: 600;
}

.result-card .badge-score-bayes-bis {
  background: var(--blanc);
  color: var(--gris-texte);
  border: 1px dotted var(--bleu-500);
  font-weight: 600;
}

.result-card .badge-agira {
  background: var(--bleu-700);
  color: var(--blanc);
  border: none;
}

.note-prenom {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--bleu-700);
}

.result-lines {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--gris-texte);
  font-size: 0.9rem;
}

.result-lines strong {
  color: var(--bleu-800);
}

.result-dates {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  column-gap: 0.5rem;
  row-gap: 0.35rem;
  align-items: baseline;
}

.result-dates .label {
  font-weight: 600;
  color: var(--bleu-800);
}

.code-insee {
  color: var(--bleu-500);
  font-size: 0.85rem;
}

.ville-mairie {
  position: relative;
  border-bottom: 1px dotted var(--bleu-400);
  cursor: help;
}

.ville-mairie .tooltip-mairie {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: 280px;
  background: var(--bleu-900);
  color: var(--bleu-100);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  white-space: normal;
}

.ville-mairie:hover .tooltip-mairie {
  display: block;
}

.tooltip-mairie strong {
  color: var(--blanc);
}

.alert {
  padding: 1rem 1.2rem;
  border-radius: 10px;
  font-size: 0.92rem;
  margin-bottom: 1.4rem;
}

.alert-info {
  background: var(--bleu-100);
  color: var(--bleu-700);
  border: 1px solid var(--bleu-200);
}

.alert-warning {
  background: #fff4e5;
  color: #92590a;
  border: 1px solid #ffdca3;
}

.alert-error {
  background: #fdeaea;
  color: #b3261e;
  border: 1px solid #f6c2c0;
}

.alert-success {
  background: #e7f7ed;
  color: #1e7a42;
  border: 1px solid #b8e6c9;
}

.section-title {
  color: var(--bleu-800);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Login ---------- */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.login-card {
  width: 100%;
  max-width: 380px;
}

footer {
  text-align: center;
  color: var(--bleu-300);
  font-size: 0.8rem;
  padding: 1.2rem;
}

footer a {
  margin-left: 0.6rem;
  color: var(--bleu-300);
  text-decoration: underline;
}