/* N-73 */

.vcom-wrap--liste { max-width: 1320px; }

/* LE CHAPEAU PREND TOUTE LA LARGEUR DE LA PAGE, colonne de droite
   comprise : c'est une phrase d'accueil, elle ne s'arrête pas au bord des
   tuiles. */
.vcl-tete { margin-bottom: 22px; }

/* LA COLONNE DE DROITE DÉMARRE AU NIVEAU DU CADRE GRIS. Le chapeau étant
   hors du plan, les deux colonnes commencent ensemble : rien à
   rattraper. */
.vcl-cote { padding-top: 0; }
/* Le chapeau prend toute la largeur : c'est une phrase d'accueil, pas
   une colonne de texte. */
.vcl-tete__mot {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: #5F6B7A;
}

/* ─── LA BARRE DE FILTRES, AU-DESSUS DES TUILES ────────────────────

   Elle était dans une colonne latérale : il fallait descendre pour voir,
   remonter pour filtrer, redescendre pour vérifier.

   Ici, on choisit et le résultat commence aussitôt sous la barre. */
.vcl { display: block; }

/* LA GRILLE À GAUCHE, LA COLONNE À DROITE.

   Les filtres sont en haut, dans leur barre : la colonne porte ce qui
   accompagne — les recherches gardées, les partenaires. */
.vcl-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 26px;
  align-items: start;
}
.vcl-corps { min-width: 0; }

.vcl-filtres {
  margin-bottom: 20px;
  padding: 14px 16px;
  background: #F7FAFD;
  border: 1px solid #D6EAF8;
  border-radius: 14px;
}
.vcl-filtres__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.vcl-filtres__ligne--selects {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E3ECF5;
}

.vcl-champ--cherche { flex: 1 1 280px; min-width: 0; }
.vcl-cherche {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid #D6EAF8;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #1A2E4A;
  box-sizing: border-box;
}

.vcl-bassins { display: flex; gap: 5px; flex-wrap: wrap; }
/* ─── LES BOUTONS DE BASSIN ────────────────────────────────────────

   AU REPOS : fond blanc, texte et bordure à la couleur de la rivière. On
   voit d'un coup les quatre familles sans qu'aucune ne domine.

   AU CLIC : le dégradé plein et le texte blanc. Le choix se lit sans
   hésitation.

   C'est le traitement des étiquettes de villages, où la couleur porte le
   sens et le fond blanc laisse respirer. */
.vcl-bouton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1.5px solid var(--vcl-teinte, #5F6B7A);
  border-radius: 18px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--vcl-teinte, #5F6B7A);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s;
}
.vcl-bouton:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .10); }

.vcl-bouton--tous   { --vcl-teinte: #0098D4; }
.vcl-bouton--gm     { --vcl-teinte: #016AB1; }
.vcl-bouton--pm     { --vcl-teinte: #3BBFB0; }
.vcl-bouton--aub    { --vcl-teinte: #C94F7E; }
.vcl-bouton--autres { --vcl-teinte: #8A4FBF; }

.vcl-bouton__compte {
  font-size: 11.5px;
  font-weight: 600;
  opacity: .7;
}
.vcl-bouton--actif { color: #fff; }
.vcl-bouton--actif .vcl-bouton__compte { opacity: .85; }
/* ─── LES COULEURS DES BASSINS ─────────────────────────────────────

   Celles des villages, pour qu'une rivière se reconnaisse d'un bout à
   l'autre du site :

     Grand Morin  #016AB1  bleu
     Petit Morin  #3BBFB0  turquoise
     Aubetin      #C94F7E  framboise
     Nos voisins  #8A4FBF  violet

   Le dégradé va de la couleur vers un ton clair, à cent trente-cinq
   degrés — celui des étiquettes de villages. Celui du Petit Morin a été
   reconstitué : le vert des villages ne convenait pas. */
.vcl-bouton--tous.vcl-bouton--actif   { background: linear-gradient(135deg, #0098D4, #5FC4EC); }
.vcl-bouton--gm.vcl-bouton--actif     { background: linear-gradient(135deg, #016AB1, #4AB8E8); }
.vcl-bouton--pm.vcl-bouton--actif     { background: linear-gradient(135deg, #3BBFB0, #8FE2D8); }
.vcl-bouton--aub.vcl-bouton--actif    { background: linear-gradient(135deg, #C94F7E, #F0A8C4); }
.vcl-bouton--autres.vcl-bouton--actif { background: linear-gradient(135deg, #8A4FBF, #C49DE8); }

/* UN FILET DE COULEUR À GAUCHE des déroulants : sans lui, sept boîtes
   grises à la file font une rangée sans relief. */
.vcl-select {
  padding: 7px 10px;
  max-width: 210px;
  border: 1px solid #D6EAF8;
  border-left: 3px solid #6B9FCC;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: #1A2E4A;
  transition: border-left-color .15s, box-shadow .15s;
}
.vcl-select:hover { box-shadow: 0 2px 8px rgba(1, 74, 133, .10); }

/* Le filet passe au marine quand le filtre retient quelque chose : on voit
   d'un coup d'œil ce qui est en jeu. */
.vcl-select--pose { border-left-color: #3B6CB7; font-weight: 600; }

.vcl-select--tri {
  border-left-color: #3BBFB0;
  font-weight: 600;
  color: #3B6CB7;
}

.vcl-separateur {
  flex: 1 1 auto;
  min-width: 0;
}

.vcl-sens,
.vcl-remise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 1px solid #D6EAF8;
  border-radius: 8px;
  background: #fff;
  color: #3B6CB7;
  cursor: pointer;
  transition: transform .2s, background .15s, color .15s;
}
.vcl-sens:hover,
.vcl-remise:not(:disabled):hover { background: #EEF4FB; }
.vcl-sens--bas { transform: rotate(180deg); }

/* La remise à zéro s'éteint quand il n'y a rien à effacer. */
.vcl-remise:disabled {
  color: #C4CDD8;
  cursor: default;
}
.vcl-remise:not(:disabled) {
  border-color: #F0D5C4;
  color: #C4622A;
}
.vcl-remise:not(:disabled):hover { background: #FBEDE4; }

/* ─── LA COLONNE DE DROITE ─────────────────────────────────────────

   Elle accompagne sans encombrer : les recherches gardées, et de la
   place pour ce qui viendra. */
.vcl-cote__bloc {
  margin-bottom: 18px;
  padding: 15px 17px;
  background: #FEFAF3;
  border: 1px solid #F0E3CC;
  border-left: 4px solid #D9A03F;
  border-radius: 14px;
}
/* Le bloc de l'affichage prend les couleurs de la charte, non celles des
   recherches gardées : ce n'est pas la même chose. */
.vcl-cote__bloc--vues {
  background: #F7FAFD;
  border-color: #D6EAF8;
  border-left-color: #3B6CB7;
}
.vcl-cote__bloc--vues .vcl-cote__titre { color: #5F6B7A; }
.vcl-cote__bloc[hidden] { display: none; }
.vcl-cote__titre {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A7452;
}
.vcl-modeles { list-style: none; margin: 0; padding: 0; }
.vcl-modeles li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #F0E3CC;
  font-size: 12.5px;
}
.vcl-modeles button {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  color: #1A2E4A;
  text-align: left;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.vcl-modeles button:hover { color: #C4622A; }
.vcl-modeles .vcl-modele__ote {
  flex: 0 0 auto;
  color: #C4CDD8;
  font-size: 15px;
  line-height: 1;
}
.vcl-modeles .vcl-modele__ote:hover { color: #B03A3A; }

/* ─── LA BARRE ─────────────────────────────────────────────────────── */
.vcl-barre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.vcl-compte { margin: 0; font-size: 14px; color: #5F6B7A; }
.vcl-compte strong { font-size: 20px; color: #3B6CB7; }

.vcl-outils { display: flex; align-items: center; gap: 8px; }
.vcl-outil {
  padding: 7px 14px;
  border: 1px solid #D6EAF8;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #3B6CB7;
  cursor: pointer;
}
.vcl-outil:hover { background: #EEF4FB; }

/* Le sélecteur vit en tête de la colonne de droite : c'est sa place sur
   tout le site. */
.vcl-colonnes { display: flex; gap: 3px; }
.vcl-colonnes__btn {
  flex: 1;
  height: 34px;
  border: 1px solid #D6EAF8;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #8A93A0;
  cursor: pointer;
}
.vcl-colonnes__btn { border-radius: 8px; }
.vcl-colonnes__btn--actif { background: #3B6CB7; border-color: #3B6CB7; color: #fff; }

/* ─── LES CARTES ───────────────────────────────────────────────────── */
.vcl-grille { display: grid; gap: 18px; }
.vcl-grille--2 { grid-template-columns: repeat(2, 1fr); }
.vcl-grille--3 { grid-template-columns: repeat(3, 1fr); }
.vcl-grille--4 { grid-template-columns: repeat(4, 1fr); }

.vcl-carte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  transition: transform .2s, box-shadow .2s;
}
.vcl-carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(1, 106, 177, .18);
}
.vcl-carte[hidden] { display: none; }

.vcl-carte__photo {
  position: relative;
  display: block;
  overflow: hidden;
}
.vcl-carte__photo img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.vcl-carte:hover .vcl-carte__photo img { transform: scale(1.05); }
.vcl-carte__sans {
  display: block;
  height: 150px;
  background: linear-gradient(135deg, #EEF4FB, #D6EAF8);
}
/* L'ÉTIQUETTE DE LA RIVIÈRE porte le même dégradé que le bouton du
   bassin : on la reconnaît sans lire. */
.vcl-carte__riviere {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 11px;
  border-radius: 11px;
  background: linear-gradient(135deg, #8A4FBF, #C49DE8);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.vcl-carte__riviere--gm  { background: linear-gradient(135deg, #016AB1, #4AB8E8); }
.vcl-carte__riviere--pm  { background: linear-gradient(135deg, #3BBFB0, #8FE2D8); }
.vcl-carte__riviere--aub { background: linear-gradient(135deg, #C94F7E, #F0A8C4); }

.vcl-carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
}
.vcl-carte__nom { margin: 0; font-size: 15.5px; line-height: 1.25; }
.vcl-carte__nom a { color: #1A2E4A; text-decoration: none; }
.vcl-carte__nom a:hover { color: #016AB1; }
.vcl-carte__gentile {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #8A93A0;
}

.vcl-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.vcl-chiffres li { display: flex; align-items: baseline; gap: 4px; }
.vcl-chiffre { font-size: 15px; font-weight: 700; color: #3B6CB7; }
.vcl-chiffre__quoi { font-size: 11px; color: #8A93A0; }

.vcl-carte__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid #F0F5FA;
}
.vcl-carte__epci {
  font-size: 11px;
  line-height: 1.4;
  color: #8A93A0;
}
.vcl-carte__alerte {
  padding: 1px 8px;
  border-radius: 9px;
  background: #FBEDE4;
  color: #C4622A;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.vcl-vide {
  padding: 50px 20px;
  text-align: center;
  font-style: italic;
  color: #8A93A0;
}
.vcl-source { margin-top: 26px; }

/* ─── LE TABLEAU, POUR L'IMPRESSION ────────────────────────────────── */
.vcl-tableau { margin-top: 24px; }
.vcl-tableau__titre {
  margin: 0 0 14px;
  font-size: 17px;
  color: #1A2E4A;
}
.vcl-tableau table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.vcl-tableau th {
  padding: 7px 9px;
  border-bottom: 2px solid #1A2E4A;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1A2E4A;
}
.vcl-tableau td {
  padding: 6px 9px;
  border-bottom: 1px solid #E3ECF5;
  line-height: 1.4;
  vertical-align: top;
}
.vcl-tableau .vcl-nombre { text-align: right; white-space: nowrap; }
.vcl-tableau__source {
  margin-top: 14px;
  font-size: 10.5px;
  color: #8A93A0;
}

/* ─── À L'IMPRESSION ───────────────────────────────────────────────── */
@media print {
  .vcl-cote,
  .vcl-filtres,
  .vcl-barre,
  .vcl-grille,
  .vcl-tete__mot,
  .vcl-source,
  .vcl-vide { display: none !important; }

  .vcl-tableau { display: block !important; }
  .vcl-tableau[hidden] { display: block !important; }

  .vcl-tableau table { font-size: 9.5pt; }
  .vcl-tableau tr { page-break-inside: avoid; }
  .vcl-tableau thead { display: table-header-group; }
}

@media (max-width: 1100px) {
  .vcl-plan { grid-template-columns: 1fr; }
  .vcl-cote { margin-top: 22px; }
  .vcl-grille--4 { grid-template-columns: repeat(3, 1fr); }
  .vcl-select { max-width: 170px; }
}
@media (max-width: 760px) {
  .vcl-grille--3, .vcl-grille--4 { grid-template-columns: repeat(2, 1fr); }
  .vcl-outils { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
  .vcl-grille { grid-template-columns: 1fr !important; }
}

/* N-74 */

/* ─── LES RECHERCHES TOUTES FAITES ──────────────────────────────────

   Des questions qu'on repose : les communes d'un syndicat, celles sans
   cours d'eau, celles dont le plan est ancien.

   Chaque pavé porte la couleur de son sujet — turquoise pour le Petit
   Morin, violet pour les communes sans rivière, orange pour ce qui
   alerte. */
.vcl-cote__bloc--faites {
  background: #fff;
  border-color: #D6EAF8;
  border-left-color: #3B6CB7;
}
.vcl-cote__bloc--faites .vcl-cote__titre { color: #5F6B7A; }

.vcl-faites {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vcl-faites li { margin-bottom: 6px; }
.vcl-faites li:last-child { margin-bottom: 0; }

.vcl-faite {
  display: block;
  width: 100%;
  padding: 9px 11px 9px 13px;
  border: 1px solid #E3ECF5;
  border-left: 3px solid var(--vcl-teinte, #3B6CB7);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.vcl-faite:hover {
  background: #F7FAFD;
  box-shadow: 0 2px 10px rgba(1, 74, 133, .10);
  transform: translateX(2px);
}
.vcl-faite__nom {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vcl-teinte, #1A2E4A);
}
.vcl-faite__mot {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: #8A93A0;
}