/* Composants réutilisés par toutes les pages : carte, tableau, statut, étiquette,
   formulaires, messages. */

/* Carte : un panneau translucide */
.carte {
  padding: 16px 18px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--panneau);
}
/* Carte à la teinte d'un type de données : liseré et halo (accueil, onglet Base). Une carte qui
   mène quelque part s'éclaire au survol (carte-lien). Son pied : deux mentions, aux bords. */
.carte-teintee { border-top: 3px solid var(--teinte); box-shadow: 0 -12px 40px -24px var(--teinte); }
.carte-lien:hover { border-color: color-mix(in srgb, var(--teinte) 45%, var(--bordure)); background: var(--panneau-survol); }
.pied-de-carte {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.chiffre { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tableau */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top; }
th {
  color: var(--texte-doux);
  background: var(--entete-tableau);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
tbody tr:hover { background: var(--panneau-survol); }
th.nombre, td.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Statut : une pastille de couleur et son libellé */
.statut { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.statut::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--couleur-statut, var(--neutre));
  box-shadow: 0 0 8px var(--couleur-statut, transparent);
}
.statut.vert { --couleur-statut: var(--bon); }
.statut.jaune { --couleur-statut: var(--alerte); }
.statut.rouge { --couleur-statut: var(--critique); }
.statut.gris { --couleur-statut: var(--neutre); }

/* Pilule : un état court, neutre ; l'étiquette d'un type de données en est une, à sa
   teinte (classe teinte-…). */
.pilule, .etiquette {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  color: var(--texte-doux);
  font-size: 11.5px;
  white-space: nowrap;
}
.etiquette {
  border-color: color-mix(in srgb, var(--teinte, var(--neutre)) 45%, transparent);
  color: var(--teinte, var(--neutre));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Liste courte des derniers lots */
.derniers { table-layout: fixed; margin: 8px 0 4px; }
.derniers td { padding: 3px 6px 3px 0; border: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.derniers tr:hover { background: transparent; }
/* La pastille a un halo de 8 px : sa cellule lui laisse la place (la cellule masque ce qui
   déborde, pour couper un texte trop long), et la liste se décale d'autant pour rester alignée. */
.derniers { width: calc(100% + 10px); margin-left: -10px; }
.derniers .col-statut { width: 50%; padding-left: 10px; }
.derniers .col-date, .derniers .col-nombre { width: 25%; }
.derniers a { color: inherit; text-decoration: none; }
.voir-plus { font-size: 13px; text-decoration: none; }
.code { color: var(--texte-pale); font-size: 12px; font-weight: 400; }

/* Formulaires et boutons */
.filtres { display: flex; gap: 12px; align-items: center; margin: 12px 0 16px; }
select, button, input {
  font: inherit;
  color: var(--texte);
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 4px 10px;
}
button { cursor: pointer; }
/* Un champ actif : à la couleur de l'accent, pas au bleu du navigateur. */
input:focus, select:focus {
  outline: none;
  border-color: var(--lien);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lien) 22%, transparent);
}
button:hover { background: var(--panneau-survol); }
button.danger { color: var(--critique); }
/* Le bouton principal d'un formulaire (connexion) : à la couleur des liens. */
button.principal {
  margin-top: 4px;
  padding: 9px 14px;
  border-color: transparent;
  color: var(--fond);
  background: var(--lien);
  font-weight: 650;
}
button.principal:hover { background: color-mix(in srgb, var(--lien) 85%, white); }
form.action { display: inline-flex; gap: 6px; align-items: center; margin: 2px 0; }
form.action input { width: 14em; }

/* Définitions (page d'un lot) */
dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0; }
dt { color: var(--texte-doux); }
dd { margin: 0; }

/* Messages : retour d'une action, refus, bandeau d'alerte */
.message, .erreur { margin: 0 0 16px; }
.message { border-left: 3px solid var(--bon); }
.erreur, .bandeau { border-left: 3px solid var(--critique); }

/* Bandeau d'actualisation, sous l'en-tête */
.actualisation { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.actualisation p { margin: 0; }

/* Décision sur des lots retenus (une cause, un lot) : le motif, puis valider ou écarter. */
.decision {
  display: grid;
  gap: 10px;
  margin: 4px 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--entete-tableau);
}
.decision-motif { display: grid; gap: 4px; font-weight: 600; }
.decision-motif .muet { font-size: 12.5px; font-weight: 400; }
.decision-motif input { max-width: 560px; padding: 7px 10px; }
.decision-choix { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.decision-choix .muet { font-size: 12.5px; }

/* La mini-courbe : trait de 2 px à la teinte de la carte ou de la table, aire très pâle, aujourd'hui pointé.
   Chaque jour est une colonne de survol, plus large que le trait. */
.etincelle { position: relative; display: block; height: 44px; margin-top: 6px; }
.etincelle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.etincelle-ligne { fill: none; stroke: var(--teinte); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.etincelle-aire { fill: color-mix(in srgb, var(--teinte) 13%, transparent); }
/* Aucune ligne sur la période : un zéro discret, pas un trait qui passerait pour de l'activité. */
.etincelle.vide .etincelle-ligne { stroke: var(--bordure); stroke-dasharray: 3 4; }
/* Survol : un repère vertical au jour le plus proche, et sa bulle au-dessus de la courbe. */
.etincelle svg { cursor: crosshair; }
.etincelle-repere { stroke: var(--texte-pale); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.etincelle.survolee .etincelle-repere { opacity: 1; }
.etincelle-bulle {
  position: absolute;
  bottom: calc(100% + 6px);
  z-index: 1;
  padding: 3px 8px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  color: var(--texte);
  background: var(--fond);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}
.etincelle-bulle[data-cote="gauche"] { transform: translateX(-8px); }
.etincelle-bulle[data-cote="droite"] { transform: translateX(calc(-100% + 8px)); }
.etincelle-point, .etincelle-anneau { fill: none; stroke-linecap: round; pointer-events: none; }
.etincelle-point { stroke: var(--teinte); stroke-width: 8; }
.etincelle-anneau { stroke: var(--fond); stroke-width: 12; }
/* La grande courbe : dans un détail. */
.etincelle.grande { height: 56px; }

/* Le drapeau du pays d'où viennent des données : trois bandes, dessinées ici (les émojis de
   drapeau ne s'affichent pas partout). Un pays sans drapeau dessiné montre son code. */
.drapeaux { display: inline-flex; gap: 4px; align-items: center; }
.pied-de-carte .drapeaux { margin-right: 4px; }
h1 .drapeaux { vertical-align: middle; }
h1 .drapeau { width: 27px; height: 18px; border-radius: 3px; }
.drapeau {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18);
  background: var(--panneau-survol);
  color: var(--texte-doux);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  vertical-align: -1px;
}
.drapeau-be { background: linear-gradient(90deg, #111 0 33.4%, #fdda24 33.4% 66.7%, #ef3340 66.7%); }
.drapeau-fr { background: linear-gradient(90deg, #002395 0 33.4%, #fff 33.4% 66.7%, #ed2939 66.7%); }
.drapeau-nl { background: linear-gradient(180deg, #ae1c28 0 33.4%, #fff 33.4% 66.7%, #21468b 66.7%); }
.drapeau-lu { background: linear-gradient(180deg, #ed2939 0 33.4%, #fff 33.4% 66.7%, #00a1de 66.7%); }
.drapeau-de { background: linear-gradient(180deg, #111 0 33.4%, #dd0000 33.4% 66.7%, #ffce00 66.7%); }