/* N-82 */

/* =====================================================================
   QUI DÉTIENT QUOI — le tableau des compétences
   =====================================================================

   Cent soixante-douze lignes et six colonnes. Le défi n'est pas de les
   afficher, c'est de les rendre lisibles.

   TROIS PARTIS PRIS :

   Les colonnes hors GEMAPI se distinguent — fond ambré, filet à gauche.
   C'est la frontière que le tableau doit rendre visible.

   Les noms de syndicats sont abrégés dans les cases, entiers dans les
   infobulles. Sans cela, une colonne fait la largeur d'un paragraphe.

   L'en-tête reste collé au défilement : passé la vingtième ligne, on ne
   sait plus quelle colonne on lit.
   ===================================================================== */

.vqf {
  margin: 30px 0;
  font-family: inherit;
}

.vqf-tete { margin-bottom: 22px; }
.vqf-tete__titre {
  margin: 0 0 4px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: #1A2E4A;
}
/* Le sous-titre dit ce qu'on trouve, sous la question qu'on se pose. */
.vqf-tete__sous {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #3B6CB7;
  font-size: 15px;
  font-weight: 600;
  color: #3B6CB7;
}
.vqf-tete__mot {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #5F6B7A;
}

/* ─── LES CONSTATS ─────────────────────────────────────────────────

   Trois chiffres avant le tableau. Le lecteur qui s'arrête là aura
   compris le principal. */
.vqf-constats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.vqf-constat {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #E3ECF5;
  border-left: 4px solid #3B6CB7;
  border-radius: 12px;
}
.vqf-constat--vide  { border-left-color: #E07A4F; }
.vqf-constat--smage { border-left-color: #016AB1; }
.vqf-constat--amont { border-left-color: #3BBFB0; }
.vqf-constat--aval  { border-left-color: #C94F7E; }
.vqf-constat--autre { border-left-color: #8A4FBF; }
.vqf-constat--epci  { border-left-color: #E07A4F; }
.vqf-constat__nombre {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #3B6CB7;
}
.vqf-constat--vide  .vqf-constat__nombre { color: #C4622A; }
.vqf-constat--smage .vqf-constat__nombre { color: #016AB1; }
.vqf-constat--amont .vqf-constat__nombre { color: #2A9A8D; }
.vqf-constat--aval  .vqf-constat__nombre { color: #C94F7E; }
.vqf-constat--autre .vqf-constat__nombre { color: #8A4FBF; }
.vqf-constat--epci  .vqf-constat__nombre { color: #C4622A; }
.vqf-constat__quoi {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #8A93A0;
}
.vqf-constat__qui {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #1A2E4A;
}

/* ─── LA BARRE ─────────────────────────────────────────────────────── */
.vqf-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #F7FAFD;
  border: 1px solid #D6EAF8;
  border-radius: 12px;
}
.vqf-cherche {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #D6EAF8;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #1A2E4A;
}
.vqf-select {
  padding: 7px 10px;
  max-width: 230px;
  border: 1px solid #D6EAF8;
  border-left: 3px solid #6B9FCC;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: #1A2E4A;
}
.vqf-compte { font-size: 13.5px; color: #5F6B7A; }
.vqf-compte strong { font-size: 17px; color: #3B6CB7; }
.vqf-imprimer {
  margin-left: auto;
  padding: 7px 15px;
  border: 1px solid #D6EAF8;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #3B6CB7;
  cursor: pointer;
}
.vqf-imprimer:hover { background: #EEF4FB; }

/* ─── LE TABLEAU ───────────────────────────────────────────────────── */
/* ─── L'EN-TÊTE RESTE VISIBLE ──────────────────────────────────────

   Cent soixante-douze lignes : passé la vingtième, on ne sait plus
   quelle colonne on lit.

   POURQUOI LA PREMIÈRE VERSION NE TENAIT PAS : « position: sticky » ne
   fonctionne pas à l'intérieur d'un conteneur qui défile en overflow.
   L'en-tête était bien déclaré collant, il n'avait simplement rien à
   quoi s'accrocher.

   ON DÉFILE DONC AVEC LA PAGE, non dans une boîte. Le tableau prend
   toute la largeur qu'il lui faut, et l'en-tête se colle au haut de la
   fenêtre — c'est ce qu'on veut. */
.vqf-defile {
  border: 1px solid #E3ECF5;
  border-radius: 12px;
  background: #fff;
}
@media (max-width: 1000px) {
  /* Sur écran étroit, le défilement horizontal redevient nécessaire :
     l'en-tête ne collera plus, mais le tableau restera lisible. */
  .vqf-defile { overflow-x: auto; }
}
.vqf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
/* Sans cela, le navigateur répartit l'espace à sa guise et ignore les
   largeurs demandées sur les colonnes étroites. */
.vqf-th--bassin { box-sizing: border-box; }

.vqf-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px 10px;
  background: #1A2E4A;
  color: #fff;
  text-align: left;
  vertical-align: bottom;
  font-weight: 600;
}
.vqf-th__court {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.vqf-th__quoi {
  display: block;
  margin-top: 3px;
  max-width: 150px;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.35;
  opacity: .78;
}
/* ─── LA COLONNE DES COMMUNES RESTE VISIBLE ────────────────────────

   Six colonnes ne tiennent pas sur un écran étroit : on fait défiler
   horizontalement, et l'on perd le nom de la commune qu'on lisait.

   Elle reste donc collée à gauche. Le fond doit être opaque, sinon les
   autres colonnes défilent au travers. */
.vqf-th--nom {
  position: sticky;
  left: 0;
  z-index: 6;
  min-width: 180px;
  background: #1A2E4A;
}

.vqf-td--nom {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}
/* Le fond suit celui de sa ligne : sans cela, une ligne paire garderait
   une première case blanche au milieu du gris. */
.vqf-table tbody tr:nth-child(even) .vqf-td--nom { background: #FBFCFD; }
.vqf-table tbody tr:hover .vqf-td--nom { background: #EEF4FB; }

/* Un filet marque la limite de la partie fixe. */
.vqf-td--nom::after,
.vqf-th--nom::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: #E3ECF5;
}

/* Les deux colonnes hors GEMAPI : c'est la frontière que le tableau doit
   rendre visible. */
.vqf-th--hors { background: #7A4A28; }

.vqf-table tbody tr { border-top: 1px solid #F0F5FA; }
.vqf-table tbody tr:nth-child(even) { background: #FBFCFD; }
.vqf-table tbody tr:hover { background: #EEF4FB; }
.vqf-table tbody tr[hidden] { display: none; }

.vqf-table td { padding: 9px 10px; vertical-align: middle; }
.vqf-td--nom { font-weight: 600; color: #1A2E4A; }
.vqf-td--nom a { color: #1A2E4A; text-decoration: none; }
.vqf-td--nom a:hover { color: #016AB1; }
/* LE DÉPARTEMENT PASSE SOUS LE NOM, sur sa propre ligne.

   Posé à côté, il sortait de la colonne collée et disparaissait sous les
   suivantes. Dessous, il tient dans la largeur. */
.vqf-dept {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #8A93A0;
}

.vqf-td--hors { background: #FDFAF6; }
.vqf-table tbody tr:hover .vqf-td--hors { background: #FBF2E8; }

/* ─── UNE COULEUR PAR DÉTENTEUR ────────────────────────────────────

   AU REPOS : fond blanc, trait et texte à la couleur de l'acteur.

   Une première version remplissait la pastille d'un dégradé. Sur cent
   soixante-douze lignes et six colonnes, cela faisait mille pastilles
   pleines : la page devenait un damier, et plus rien ne ressortait.

   Le fond blanc laisse respirer. La couleur reste dans le trait, et se
   lit tout aussi bien.

   AU SURVOL : le dégradé revient sur la ligne qu'on regarde. C'est là
   qu'il sert — pour suivre une ligne du regard, non pour peindre le
   tableau.

   Ce sont les couleurs de la carte et des étiquettes de villages : un
   même acteur se reconnaît d'un bout à l'autre du site. */
/* Les noms sont écrits en clair : la pastille s'adapte, sur deux lignes
   s'il le faut. */
.vqf-qui {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--vqf-teinte, #8A4FBF);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vqf-teinte, #8A4FBF);
  transition: background .15s, color .15s;
}
.vqf-table td { min-width: 118px; }
/* La rivière et le nom échappent à cette largeur minimale. */
.vqf-table td.vqf-td--bassin { min-width: 0; }

.vqf-qui--smage   { --vqf-teinte: #016AB1; --vqf-fondu: linear-gradient(135deg, #016AB1, #4AB8E8); }
.vqf-qui--amont   { --vqf-teinte: #2A9A8D; --vqf-fondu: linear-gradient(135deg, #3BBFB0, #8FE2D8); }
.vqf-qui--aval    { --vqf-teinte: #C94F7E; --vqf-fondu: linear-gradient(135deg, #C94F7E, #F0A8C4); }
.vqf-qui--commune { --vqf-teinte: #8A4FBF; --vqf-fondu: linear-gradient(135deg, #8A4FBF, #C49DE8); }
.vqf-qui--epci    { --vqf-teinte: #C4622A; --vqf-fondu: linear-gradient(135deg, #E07A4F, #F5B48E); }
.vqf-qui--autre   { --vqf-teinte: #8A4FBF; --vqf-fondu: linear-gradient(135deg, #8A4FBF, #C49DE8); }

/* Le dégradé revient sur la ligne survolée : il aide à la suivre du
   regard, sans peindre toute la page. */
.vqf-table tbody tr:hover .vqf-qui {
  background: var(--vqf-fondu, #EEF4FB);
  border-color: transparent;
  color: #fff;
}

/* ─── PLEIN OU CREUX : CONSTAT OU PRINCIPE ─────────────────────────

   Un trait continu dit qu'un groupement exerce la compétence et l'a
   déclaré.

   Un trait pointillé dit que la commune la garde, faute de transfert.
   C'est le droit commun, et non un constat : la nuance doit se voir. */
.vqf-qui--principe { border-style: dashed; }
.vqf-table tbody tr:hover .vqf-qui--principe { border-color: transparent; }

.vqf-rien {
  color: #C4CDD8;
  font-weight: 700;
  cursor: help;
}

.vqf-vide {
  padding: 34px;
  text-align: center;
  font-style: italic;
  color: #8A93A0;
}

/* ─── LA LÉGENDE ───────────────────────────────────────────────────── */
.vqf-legende {
  margin-top: 22px;
  padding: 22px 24px;
  background: #F7FAFD;
  border: 1px solid #E3ECF5;
  border-radius: 12px;
}
.vqf-legende__titre {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A93A0;
}
.vqf-legende p {
  margin: 0 0 11px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #2B3A47;
}
.vqf-legende__note {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px solid #E3ECF5;
  font-size: 13px !important;
  color: #5F5E5A !important;
}

/* ─── À L'IMPRESSION ───────────────────────────────────────────────── */
@media print {
  .vqf-barre,
  .vqf-constats { display: none; }

  .vqf-defile { overflow: visible; border: 0; }
  .vqf-table { font-size: 8.5pt; }
  .vqf-table thead { display: table-header-group; }
  .vqf-table thead th { position: static; background: #1A2E4A !important; }
  .vqf-th--nom, .vqf-td--nom { position: static; }

  /* Les dégradés ne s'impriment pas : la pastille redevient du texte
     encadré, lisible en noir et blanc. */
  .vqf-qui {
    background: none !important;
    padding: 0;
    color: #1A2E4A !important;
    font-weight: 600;
  }
  .vqf-table tr { page-break-inside: avoid; }
  .vqf-th__quoi { display: none; }
}

@media (max-width: 700px) {
  .vqf-select { max-width: none; flex: 1 1 100%; }
  .vqf-imprimer { margin-left: 0; }
  .vqf-th__quoi { display: none; }
}

/* N-83 */

/* ─── LA RIVIÈRE, JUSTE APRÈS LE NOM ───────────────────────────────

   Elle permet de voir d'un coup si le syndicat correspond au bassin :
   un syndicat du Petit Morin sur une commune du Grand Morin serait une
   anomalie visible sans lire.

   Les couleurs sont celles de la carte et des étiquettes de villages. */
/* ─── LA COLONNE DE LA RIVIÈRE ─────────────────────────────────────

   Elle est aussi étroite que son titre le permet : « Rivière » sur une
   ligne, la pastille dessous, et rien de plus.

   Le rembourrage tombe à trois pixels de chaque côté — c'est là qu'on
   gagne, sans toucher ni au titre ni au sigle. */
.vqf-th--bassin,
.vqf-td--bassin {
  width: 1%;
  padding-left: 3px !important;
  padding-right: 3px !important;
  text-align: center;
}
.vqf-th--bassin { white-space: nowrap; }

.vqf-bassin {
  display: inline-block;
  min-width: 30px;
  padding: 2px 5px;
  border-radius: 9px;
  border: 1px solid var(--vqf-riv, #8A4FBF);
  background: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--vqf-riv, #8A4FBF);
}
.vqf-bassin--gm     { --vqf-riv: #016AB1; }
.vqf-bassin--pm     { --vqf-riv: #2A9A8D; }
.vqf-bassin--aub    { --vqf-riv: #C94F7E; }
.vqf-bassin--autres { --vqf-riv: #8A4FBF; }

/* Sur la ligne survolée, la pastille se remplit — comme les détenteurs. */
.vqf-table tbody tr:hover .vqf-bassin--gm     { background: #016AB1; color: #fff; border-color: transparent; }
.vqf-table tbody tr:hover .vqf-bassin--pm     { background: #2A9A8D; color: #fff; border-color: transparent; }
.vqf-table tbody tr:hover .vqf-bassin--aub    { background: #C94F7E; color: #fff; border-color: transparent; }
.vqf-table tbody tr:hover .vqf-bassin--autres { background: #8A4FBF; color: #fff; border-color: transparent; }

.vqf-legende__rivieres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 16px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid #E3ECF5;
  font-size: 13px !important;
  color: #5F6B7A !important;
}