/* N-37 */
.vcom-rubrique {
  --vcom-couleur: #3B6CB7;
  --vcom-claire:  #6B9FCC;
}
/* N-47 — la fiche s'élargit pour porter sa colonne latérale. Le corps
   de texte, lui, reste étroit : c'est la grille qui le borne, pas
   l'enveloppe. */
.vcom-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px 22px 60px;
  font-family: Montserrat, sans-serif;
  color: #1A2E4A;
}
.vcom-retour {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--vcom-couleur);
  text-decoration: none;
}
.vcom-retour:hover { text-decoration: underline; }

.vcom-surtitre {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vcom-couleur);
}
.vcom-titre {
  margin: 0 0 4px;
  font-size: 34px;
  line-height: 1.15;
  color: #1A2E4A;
}
.vcom-gentile {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  color: #5F6B7A;
}

/* N-38 */
/* N-38 — repris le 03/09 : voir N-44, les deux grilles partagent
   désormais les mêmes colonnes et le même écart. */
.vcom-chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 30px;
}
.vcom-chiffre {
  padding: 18px 16px;
  background: #EEF4FB;
  border-radius: 10px;
  text-align: center;
}
.vcom-chiffre__valeur {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--vcom-couleur);
}
.vcom-chiffre__mot {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #5F6B7A;
}

/* LA MÊME RECETTE QUE LES PAGES — repris le 03/09/2026.

   Le site a son habillage de carte, constant d'un bout à l'autre :
   fond blanc, contour #D6EAF8, angles à 14 pixels, ombre portée douce,
   et un filet de couleur à gauche.

   Les fiches commune s'en étaient écartées. Elles y reviennent : il n'y
   a aucune raison qu'une carte se présente autrement ici qu'ailleurs, et
   c'est cet habillage qui fait reconnaître le site. */
.vcom-bloc {
  position: relative;
  margin: 0 0 24px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid #D6EAF8;
  border-left: 4px solid var(--vcom-accent, #3B6CB7);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(1, 74, 133, .10);
}
.vcom-bloc__titre {
  margin: 0 0 14px;
  font-size: 17px;
  color: var(--vcom-accent, #3B6CB7);
}
.vcom-faits { list-style: none; margin: 0; padding: 0; }
.vcom-faits li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #F0F5FA;
}
.vcom-faits li:last-child { border-bottom: 0; }
.vcom-quoi {
  flex: 0 0 190px;
  font-size: 14px;
  font-weight: 600;
  color: #5F6B7A;
}
.vcom-detail { flex: 1 1 200px; font-size: 15px; }
.vcom-texte { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.vcom-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5F6B7A;
}
/* Les sources ferment la fiche sur un fond très léger : elles ne sont pas
   du contenu, mais elles disent d'où il vient — et cela mérite d'être
   distingué du reste sans être mis en avant. */
.vcom-sources {
  margin-top: 26px;
  padding: 18px 20px;
  background: #FBFCFD;
  border-radius: 12px;
}
.vcom-sources__titre {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A93A0;
}
.vcom-sources__ligne {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8A93A0;
}
.vcom-sources__ligne:last-child { margin-bottom: 0; }
.vcom-lien { color: var(--vcom-couleur); }
.vcom-actions { margin: 16px 0 0; }
.vcom-bouton {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 24px;
  background: var(--vcom-couleur);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.vcom-bouton:hover { background: #1A2E4A; color: #fff; }

.vcom-articles { list-style: none; margin: 0; padding: 0; }
.vcom-articles li { padding: 9px 0; border-bottom: 1px solid #F0F5FA; }
.vcom-articles li:last-child { border-bottom: 0; }
.vcom-articles a { text-decoration: none; color: #1A2E4A; }
.vcom-articles a:hover .vcom-articles__titre { color: var(--vcom-couleur); }
.vcom-articles__date {
  display: block;
  font-size: 12px;
  color: #8A93A0;
}
.vcom-articles__titre { display: block; font-size: 15px; font-weight: 600; }

@media (max-width: 600px) {
  .vcom-titre { font-size: 26px; }
  .vcom-quoi  { flex: 1 1 100%; }
  .vcom-wrap  { padding: 24px 16px 44px; }
}

/* N-41 */
.vcom-bloc--note {
  background: #EEF4FB;
  border-color: #D6EAF8;
}
.vcom-texte-long { font-size: 15px; line-height: 1.7; text-align: justify; }
.vcom-texte-long p  { margin: 0 0 12px; }
.vcom-texte-long ul { margin: 0 0 12px; padding-left: 20px; }
.vcom-texte-long li { margin-bottom: 4px; }
.vcom-texte-long strong { color: #1A2E4A; }
.vcom-credit {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #F0F5FA;
  font-size: 12.5px;
}

/* N-42 */
.vcom-tableau {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14px;
}
.vcom-tableau th,
.vcom-tableau td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #F0F5FA;
  vertical-align: top;
}
.vcom-tableau thead th {
  background: #EEF4FB;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5F6B7A;
  border-bottom: 1px solid #D6EAF8;
}
.vcom-tableau tbody tr:last-child td { border-bottom: 0; }
.vcom-tableau__mesure { white-space: nowrap; }
@media (max-width: 560px) {
  .vcom-tableau { font-size: 13px; }
  .vcom-tableau th:nth-child(3),
  .vcom-tableau td:nth-child(3) { display: none; }
}

/* N-43 */
.vcom-texte-long .vcom-soustitre {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #3B6CB7;
  text-align: left;
}
.vcom-texte-long .vcom-soustitre:first-child { margin-top: 0; }

/* N-44 */
.vcom-entete {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
  margin: 0 0 30px;
}
.vcom-entete__gauche {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* LES DEUX COLONNES S'ÉTIRENT À LA MÊME HAUTEUR.

   « align-self: start » laissait la photographie à sa hauteur naturelle,
   d'où un décalage avec la tuile du blason — et surtout aucun cadre dans
   lequel la déplacer. C'est la colonne de gauche qui donne la hauteur. */
.vcom-entete__droite {
  grid-column: 2 / span 2;
  position: relative;
  margin: 0;
  min-width: 0;
  align-self: stretch;
}
.vcom-entete--sans-photo .vcom-entete__gauche { grid-column: 1 / -1; }

/* LA PHOTOGRAPHIE EST UN FOND DE TUILE, pas une balise image.

   C'est ce que font les bandeaux d'article, et c'est ce qui rend le
   cadrage possible : le conteneur impose sa hauteur, l'image le remplit
   en débordant, et c'est ce débordement qu'on déplace.

   LA HAUTEUR VIENT DE LA COLONNE DE GAUCHE. Les deux colonnes de
   l'en-tête s'étirent à la même hauteur, et la photographie occupe la
   sienne entièrement. C'est la règle d'or, dans le bon sens. */
.vcom-photo__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 10px;
}
.vcom-photo__credit {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8A93A0;
}

.vcom-blason {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 16px 0 0;
  padding: 14px;
  background: #F3F5F7;
  border-radius: 10px;
  min-height: 0;
  overflow: hidden;
}
.vcom-blason img {
  display: block;
  width: 66%;
  max-width: 66%;
  min-height: 0;
  height: auto;
  object-fit: contain;
}
.vcom-blason__texte {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: #5F6B7A;
  text-align: center;
}

/* N-45 */
.vcom-outils {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.vcom-entete__droite:hover .vcom-outils,
.vcom-outils:focus-within { opacity: 1; }
.vcom-outils__bouton {
  pointer-events: auto;
  padding: 5px 12px;
  border: 0;
  border-radius: 14px;
  background: rgba(26, 46, 74, .82);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.vcom-outils__bouton:hover { background: rgba(26, 46, 74, .95); }
.vcom-outils__bouton--droite { margin-left: auto; }
.vcom-outils__mot {
  position: absolute;
  left: 0;
  top: 34px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(26, 46, 74, .82);
  color: #fff;
  font-size: 11.5px;
}
.vcom-outils__mot:empty { display: none; }

/* N-46 */
.vcom-choix--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 22px;
  background: #F3F5F7;
  border-radius: 10px;
}
.vcom-choix__bouton {
  padding: 6px 14px;
  border: 1px solid #D6EAF8;
  border-radius: 16px;
  background: #EEF4FB;
  color: #3B6CB7;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.vcom-choix__bouton:hover { background: #D6EAF8; }
.vcom-choix__mot { font-size: 12px; color: #8A93A0; margin-left: 8px; }

@media (max-width: 720px) {
  .vcom-entete,
  .vcom-chiffres { grid-template-columns: 1fr; }
  .vcom-entete__gauche,
  .vcom-entete__droite { grid-column: 1; }
  .vcom-entete__gauche { display: block; }
  .vcom-blason { min-height: 0; }
  .vcom-blason img { width: 150px; max-width: 150px; }
  .vcom-photo__credit { position: static; }
  .vcom-outils { opacity: 1; }
}
@media (hover: none) {
  .vcom-outils { opacity: 1; }
}

/* N-47 */
.vcom-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 34px;
  align-items: start;
}
.vcom-corps { min-width: 0; }
.vcom-cote {
  min-width: 0;
  position: sticky;
  top: 90px;
}
.vcom-cote:empty { display: none; }
@media (max-width: 900px) {
  .vcom-grille { grid-template-columns: 1fr; gap: 26px; }
  .vcom-cote { position: static; }
}

/* N-48 */
.vcom-banniere {
  margin: 0 0 22px;
  padding: 20px 18px;
  background: #EEF4FB;
  border: 1px dashed #B9D4EC;
  border-radius: 10px;
  text-align: center;
}
.vcom-banniere__texte {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3B6CB7;
  font-weight: 600;
}
.vcom-banniere__lien {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 16px;
  background: #3B6CB7;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.vcom-banniere__lien:hover { background: #1A2E4A; color: #fff; }

.vcom-com {
  margin: 0 0 22px;
  padding: 18px;
  background: #fff;
  border: 1px solid #E3ECF5;
  border-left: 3px solid #3B6CB7;
  border-radius: 10px;
}
.vcom-com__coiffe {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3B6CB7;
}
.vcom-com__titre {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.3;
  color: #1A2E4A;
}
.vcom-com__texte {
  font-size: 13.5px;
  line-height: 1.6;
  color: #1A2E4A;
}
.vcom-com__texte p { margin: 0 0 8px; }
.vcom-com__texte p:last-child { margin-bottom: 0; }

/* N-49 */
.vcom-com__editer {
  margin-top: 12px;
  padding: 5px 12px;
  border: 1px solid #D6EAF8;
  border-radius: 14px;
  background: #fff;
  color: #3B6CB7;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.vcom-com__editer:hover { background: #EEF4FB; }
.vcom-saisie {
  margin: 0 0 22px;
  padding: 16px;
  background: #fff;
  border: 1px solid #3B6CB7;
  border-radius: 10px;
}
.vcom-saisie__champ { display: block; margin-bottom: 12px; }
.vcom-saisie__champ span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5F6B7A;
}
.vcom-saisie__champ input,
.vcom-saisie__champ textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #D6EAF8;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: #1A2E4A;
  box-sizing: border-box;
}
.vcom-saisie__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* N-50 */
.vcom-encarts {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vcom-encart__coiffe {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A93A0;
}
.vcom-encart__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* N-53 */
.vcom-wrap--liste { max-width: 1160px; }
.vcom-liste__tete { margin-bottom: 26px; }
.vcom-liste__chapeau {
  margin: 10px 0 0;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.65;
  color: #5F6B7A;
}
.vcom-filtres {
  margin: 0 0 26px;
  padding: 18px;
  background: #EEF4FB;
  border-radius: 10px;
}
.vcom-filtres__ligne {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 14px;
}
.vcom-filtres__champ { display: block; min-width: 0; }
.vcom-filtres__mot {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5F6B7A;
}
.vcom-filtres__champ input,
.vcom-filtres__champ select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #D6EAF8;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #1A2E4A;
  box-sizing: border-box;
}
.vcom-filtres__compte {
  margin: 14px 0 0;
  font-size: 13px;
  color: #5F6B7A;
}
.vcom-filtres__compte span { font-weight: 700; color: #3B6CB7; }
.vcom-filtres__vider {
  margin-left: 12px;
  padding: 3px 12px;
  border: 1px solid #D6EAF8;
  border-radius: 12px;
  background: #fff;
  color: #3B6CB7;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.vcom-filtres__vider:hover { background: #D6EAF8; }

.vcom-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
}
.vcom-carte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 96px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #D6EAF8;
  border-top: 3px solid #3B6CB7;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(1, 74, 133, .10);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vcom-carte:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(1, 74, 133, .18);
}
.vcom-carte[hidden] { display: none; }
.vcom-carte__nom {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: #1A2E4A;
}
.vcom-carte__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.vcom-carte__riviere {
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #6B9FCC;
}
/* Les couleurs des bassins, celles des villages : Grand Morin en bleu,
   Petit Morin en turquoise, Aubetin en framboise. */
.vcom-carte__riviere--gm  { background: linear-gradient(135deg, #016AB1, #4AB8E8); }
.vcom-carte__riviere--pm  { background: linear-gradient(135deg, #3BBFB0, #8FE2D8); }
.vcom-carte__riviere--aub { background: linear-gradient(135deg, #C94F7E, #F0A8C4); }
.vcom-carte__hab { font-size: 11.5px; color: #8A93A0; }
.vcom-liste__vide {
  padding: 40px 20px;
  text-align: center;
  font-style: italic;
  color: #8A93A0;
}
@media (max-width: 760px) {
  .vcom-filtres__ligne { grid-template-columns: 1fr; }
  .vcom-cartes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* N-54 */
.vcom-filtres__ligne--seconde {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
}
@media (max-width: 760px) {
  .vcom-filtres__ligne--seconde { grid-template-columns: 1fr; }
}

/* N-55 */
.vcom-ouvrages {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.vcom-ouvrage {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #E3ECF5;
  border-left: 3px solid var(--vcom-teinte, #3B6CB7);
  border-radius: 8px;
}
.vcom-ouvrage__picto {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.vcom-ouvrage__corps { flex: 1 1 auto; min-width: 0; }
.vcom-ouvrage__nom {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #1A2E4A;
}
.vcom-ouvrage__detail {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #5F6B7A;
}
.vcom-ouvrage__passe {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 9px;
  border-radius: 10px;
  background: #E6F4EE;
  color: #2e9e6e;
  font-size: 11px;
  font-weight: 600;
}
.vcom-ouvrage__code {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: #A8B2BE;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .vcom-ouvrage__code { display: none; }
}

/* N-57 */
/* L'ENVELOPPE DE LA CARTE DE SITUATION.

   Elle s'appelait vcom-carte, comme les cartes de la liste des communes,
   et héritait donc de leur liseré bleu. Renommée le 04/09/2026. */
.vcom-situ {
  margin: 18px 0 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #D6EAF8;
  border-top: 3px solid #21CDC0;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(1, 74, 133, .10);
}
.vcom-carte__toile {
  width: 100%;
  height: 340px;
  border-radius: 10px;
  border: 0;
  background: #F3F5F7;
  z-index: 1;
}
.vcom-carte__note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #8A93A0;
}
.vcom-carte__note span { display: inline-flex; align-items: center; }
.vcom-carte__note span + span::before {
  content: '·';
  margin-right: 14px;
  color: #C4CDD8;
}
.vcom-popup-gps .leaflet-popup-content-wrapper { padding: 6px 4px !important; }
.vcom-popup-gps .leaflet-popup-content { margin: 6px 12px !important; }
@media (max-width: 600px) {
  .vcom-carte__toile { height: 260px; }
}

/* N-52 */
/* LES CARTES DU SITE SONT BLANCHES, toutes. Ce qui les distingue est le
   filet de gauche, pas le fond. Sept blocs, sept teintes prises dans les
   rubriques du site — on ne crée pas de couleur nouvelle. */
/* LE RELIEF TRANCHE — vidéo inverse.

   C'est le bloc qui explique le ruissellement, et le ruissellement est
   notre sujet. Sur une fiche où tous les blocs se ressemblent, celui-ci
   doit arrêter l'œil.

   Le dégradé est celui de la charte, dans sa variante foncée. */
/* LE FOND DU RELIEF PORTE « !important » — corrigé le 08/09/2026.

   Une règle ajoutée dans accueil-institutionnel.css pour les pages
   rédigées, « .vcom-corps .vcom-bloc », porte deux sélecteurs : elle
   l'emporte donc sur celle-ci, qui n'en a qu'un.

   Son fond blanc écrasait ce dégradé, et le texte blanc du bloc devenait
   invisible — blanc sur blanc, sur toutes les fiches.

   La marque forcée règle le cas sans toucher à la feuille des pages
   rédigées, qui a ses raisons d'être écrite ainsi. */
.vcom-bloc--relief {
  --vcom-accent: #3B6CB7;
  background: radial-gradient(ellipse at top right, #1486CC 0%, #3B6CB7 45%, #1A2E4A 100%) !important;
  border: 0 !important;
  color: #fff;
}
.vcom-bloc--relief .vcom-bloc__titre { color: #fff; }
.vcom-bloc--situation { --vcom-accent: #6B9FCC; }
/* LE BLOC DE L'EAU NE PORTE AUCUN HABILLAGE.

   Il contient une tuile de carte, qui a déjà son cadre, son liseré et son
   ombre. Un cadre autour d'un cadre n'apporte rien.

   Fond blanc à plat, sans contour, sans liseré, sans ombre. */
.vcom-bloc--eau {
  --vcom-accent: #3BBFB0;
  border: 0 !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.vcom-bloc--territoire{ --vcom-accent: #5D7099; }
.vcom-bloc--mairie    { --vcom-accent: #C04A78; }
.vcom-bloc--articles  { --vcom-accent: #E07A4F; }
.vcom-bloc--note      { --vcom-accent: #D9A03F; }



/* N-58 */
.vcom-texte-long .vcom-mention {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: #8A93A0;
  text-align: left;
}

/* N-59 */
.vcom-bloc--territoire + .vcom-bloc--territoire { margin-top: -6px; }
.vcom-bloc--territoire .vcom-texte-long > p:last-child,
.vcom-bloc--territoire .vcom-texte-long > ul:last-child,
.vcom-bloc--territoire .vcom-texte-long > table:last-child { margin-bottom: 0; }
.vcom-bloc--territoire .vcom-soustitre { display: none; }

/* N-60 */
.vcom-mesures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 0 0 4px;
}
.vcom-mesure {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
}
.vcom-mesure__quoi {
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}
.vcom-mesure__valeur {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.vcom-relief__mot {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.65;
  text-align: justify;
  color: rgba(255, 255, 255, .92);
}
@media (max-width: 560px) {
  .vcom-mesures { grid-template-columns: 1fr; }
}

/* N-61 */
.vcom-situation {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 2px 18px;
}
.vcom-situation__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vcom-donnee {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 13px;
  border-radius: 6px;
  background: #F7FAFD;
}
.vcom-donnee__quoi {
  font-size: 13px;
  color: #5F6B7A;
  white-space: nowrap;
}
.vcom-donnee__valeur {
  font-size: 14.5px;
  font-weight: 600;
  color: #1A2E4A;
  text-align: right;
  min-width: 0;
}
@media (max-width: 620px) {
  .vcom-situation { grid-template-columns: 1fr; }
}

/* N-62 */
.vcom-halo-commune {
  transform-box: fill-box;
  transform-origin: center;
  animation: vcom-onde 2.2s ease-out infinite;
}
@keyframes vcom-onde {
  0%   { transform: scale(1);   opacity: .9; }
  60%  { transform: scale(2.6); opacity: .35; }
  100% { transform: scale(3.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vcom-halo-commune { animation: none; opacity: .4; }
}

/* N-63 */
.vcom-territoire {
  margin: 0 0 24px;
  padding: 22px;
  /* Un gris très léger : il rassemble les quatre blocs sans écraser le
     texte. Le #F3F5F7 des tuiles était trop soutenu pour un fond qui
     porte six cents mots. */
  background: #FBFCFD;
  border-radius: 14px;
}
.vcom-territoire .vcom-bloc {
  margin: 0 0 14px;
}
.vcom-territoire .vcom-bloc:last-child { margin-bottom: 0; }

/* Un bloc sur deux se pose à même le gris : pas de carte, pas de liseré,
   pas d'ombre. Deux liserés ne se suivent donc jamais. */
.vcom-bloc--nu {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 4px 12px 10px;
}

/* N-64 */
.vcom-carrousel { position: relative; }
.vcom-carrousel__piste {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.vcom-carrousel__piste::-webkit-scrollbar { display: none; }

.vcom-carrousel__fleche {
  position: absolute;
  top: 78px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(8px);
  color: #1A2E4A;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(1, 74, 133, .18);
  transition: background .2s ease, opacity .25s ease;
}
.vcom-carrousel__fleche:hover { background: rgba(255, 255, 255, .88); }
.vcom-carrousel__fleche--avant { left: -8px; }
.vcom-carrousel__fleche--apres { right: -8px; }

/* La carte reprend l'habillage des cartes du site : mêmes angles, même
   ombre, même soulèvement au survol, même agrandissement de la vignette. */
.vcom-fiche {
  flex: 0 0 260px;
  scroll-snap-align: start;
  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;
}
.vcom-fiche:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(1, 106, 177, .18);
}
.vcom-fiche__vignette { display: block; overflow: hidden; }
.vcom-fiche__vignette img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.vcom-fiche:hover .vcom-fiche__vignette img { transform: scale(1.05); }
.vcom-fiche__corps {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vcom-fiche__titre {
  margin: 0 0 6px;
  font-size: 14.5px;
  line-height: 1.3;
}
.vcom-fiche__titre a { color: #1A2E4A; text-decoration: none; }
.vcom-fiche__titre a:hover { color: #016AB1; }
.vcom-fiche__extrait {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #555;
  flex: 1;
}
.vcom-fiche__pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.vcom-fiche__lire {
  font-size: 12.5px;
  color: #016AB1;
  font-weight: 600;
  text-decoration: none;
}
.vcom-fiche__lire:hover { color: #06D9FA; }
.vcom-fiche__date { font-size: 11px; color: #AAA; }

@media (max-width: 600px) {
  .vcom-fiche { flex: 0 0 220px; }
  .vcom-carrousel__fleche { display: none; }
}

/* N-65 */
.vcom-bloc--admin { --vcom-accent: #5D7099; }

/* N-66 */
.vcom-donnee__age {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: 9px;
  background: #EEF4FB;
  color: #5F6B7A;
  font-size: 11px;
  font-weight: 600;
}
/* Un plan de quinze ans ou plus se signale : c'est lui qui sera révisé le
   premier, et la révision change ce qui est constructible. */
.vcom-donnee--alerte .vcom-donnee__age {
  background: #FBEDE4;
  color: #C4622A;
}

/* N-67 */
.vcom-competences {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.vcom-competence {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 13px;
  margin-bottom: 2px;
  border-radius: 6px;
  background: #F7FAFD;
}
/* Ce qui n'est PAS de la GEMAPI se distingue : c'est la frontière la plus
   mal comprise du sujet, et elle doit se voir. */
.vcom-competence--hors {
  background: #FBFCFD;
  border-left: 2px solid #E07A4F;
}
.vcom-competence__quoi {
  font-size: 13px;
  color: #5F6B7A;
}
.vcom-competence__qui {
  font-size: 13.5px;
  font-weight: 600;
  color: #1A2E4A;
  text-align: right;
}
.vcom-competence__qui em { font-weight: 400; color: #A8B2BE; }
@media (max-width: 560px) {
  .vcom-competence { flex-direction: column; gap: 3px; }
  .vcom-competence__qui { text-align: left; }
}

/* N-70 */
.vcom-photo__credit--editable {
  cursor: text;
  border-radius: 4px;
  transition: background .15s;
}
.vcom-photo__credit--editable:hover { background: #F3F5F7; }
.vcom-photo__credit-vide {
  font-style: italic;
  color: #C4CDD8;
}
.vcom-photo__credit-champ {
  width: 100%;
  padding: 3px 7px;
  border: 1px solid #D6EAF8;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  color: #1A2E4A;
  box-sizing: border-box;
}

/* N-71 */
.vcom-bloc--conseil { --vcom-accent: #7A6EA8; }

.vcom-elus {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.vcom-elu {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 13px;
  margin-bottom: 2px;
  border-radius: 6px;
  background: #F7FAFD;
}
.vcom-elu__nom {
  font-size: 14.5px;
  font-weight: 600;
  color: #1A2E4A;
}
.vcom-elu__quoi {
  font-size: 12.5px;
  color: #5F6B7A;
  text-align: right;
}

/* Les conseillers sont rangés, pas cachés : un clic les déplie. */
.vcom-conseillers { margin: 0 0 12px; }
.vcom-conseillers summary {
  cursor: pointer;
  padding: 9px 13px;
  border-radius: 6px;
  background: #FBFCFD;
  font-size: 13px;
  font-weight: 600;
  color: #7A6EA8;
  list-style: none;
}
.vcom-conseillers summary::-webkit-details-marker { display: none; }
.vcom-conseillers summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform .15s ease;
}
.vcom-conseillers[open] summary::before { transform: rotate(90deg); }
.vcom-conseillers summary:hover { background: #F3F5F7; }
.vcom-conseillers__liste {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 13px;
  columns: 2;
  column-gap: 26px;
}
.vcom-conseillers__liste li {
  break-inside: avoid;
  margin-bottom: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: #1A2E4A;
}
.vcom-conseillers__quoi {
  display: block;
  font-size: 11.5px;
  color: #8A93A0;
}
@media (max-width: 620px) {
  .vcom-elu { flex-direction: column; gap: 2px; }
  .vcom-elu__quoi { text-align: left; }
  .vcom-conseillers__liste { columns: 1; }
}

/* N-72 */
.vcom-bloc--contact { --vcom-accent: #3BBFB0; }

.vcom-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
}
.vcom-contact__col { min-width: 0; }
.vcom-contact__quoi {
  margin: 12px 0 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A93A0;
}
.vcom-contact__col > .vcom-contact__quoi:first-child { margin-top: 0; }
.vcom-contact__adresse {
  margin: 0;
  font-size: 14px;
  font-style: normal;
  line-height: 1.55;
  color: #1A2E4A;
}
.vcom-contact__valeur {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #1A2E4A;
}
/* L'arobase est remplacée par un mot : les moissonneurs d'adresses
   ramassent le texte affiché, jamais l'attribut du lien. */
.vcom-arobase {
  font-size: 12px;
  color: #8A93A0;
}
.vcom-horaires {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vcom-horaires li {
  padding: 7px 12px;
  margin-bottom: 3px;
  border-radius: 6px;
  background: #F5FCFB;
  font-size: 13.5px;
  line-height: 1.45;
  color: #1A2E4A;
}
@media (max-width: 640px) {
  .vcom-contact { grid-template-columns: 1fr; }
  .vcom-contact__col + .vcom-contact__col { margin-top: 14px; }
}

/* N-91 */
.vcom-grille > .vcom-corps {
  grid-column: 1;
  justify-self: stretch;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
}
.vcom-grille > .vcom-cote { grid-column: 2; }
.vcom-carrousel { min-width: 0; max-width: 100%; }
@media (max-width: 900px) {
  .vcom-grille > .vcom-cote { grid-column: 1; }
}