/* Accueil institutionnel — VigiCrecy(R)
   Explications : voir notes-techniques.md, notes N-13, N-22, N-23, N-24, N-82, N-83, N-84, N-85 et N-86
   OU LA POSER : nulle part a la main. Le plugin vigicrecy-widgets la
   charge lui-meme. */

/* =====================================================================
   COULEUR PAR RUBRIQUE — note N-22, 26/08/2026
   =====================================================================

   CE QUI ETAIT DECIDE. Chaque grand menu porte sa couleur, et cette
   couleur se retrouve dans les tuiles et les cartes de la page. Six
   rubriques, six teintes, plus Contact.

   CE QUI SE PASSAIT. Toutes les pages sortaient en marine, quelle que
   soit la rubrique : la couleur etait ecrite en dur, une trentaine de
   fois, dans cette feuille.

   COMMENT CELA MARCHE MAINTENANT. Trois variables portent la couleur de
   la rubrique, et TOUT le reste de la feuille les emploie. Il suffit
   alors de poser UNE classe sur la page pour que tout suive : liserés
   des cartes, surtitres, boutons, liens, puces, fleches du carrousel.

   COMMENT S'EN SERVIR. Sur la page, enveloppez le contenu dans un bloc
   qui porte la classe de sa rubrique :

       <div class="vci-rubrique--alerte">
         ... tout le contenu de la page ...
       </div>

   Sans cette classe, la page prend le marine par defaut — celui de
   l'accueil et de Prevention. Rien ne casse si on l'oublie.

   AJOUTER UNE RUBRIQUE plus tard : trois lignes de plus dans le bloc
   ci-dessous, et rien d'autre a toucher dans la feuille.

   NE PLUS ECRIRE DE COULEUR EN DUR ailleurs dans ce fichier. C'est
   exactement ce qui avait fige tout le site en marine.
   ===================================================================== */

:root,
.vci-rubrique--prevention {
  --vci-couleur:        #3B6CB7;   /* Marine — teinte par defaut */
  --vci-couleur-claire: #6B9FCC;
  --vci-degrade:        linear-gradient(135deg, #3B6CB7, #5AADCF);
}

.vci-rubrique--alerte {
  --vci-couleur:        #D95F5F;   /* Rouge */
  --vci-couleur-claire: #E89A9A;
  --vci-degrade:        linear-gradient(135deg, #D95F5F, #E88A7A);
}

.vci-rubrique--solutions {
  --vci-couleur:        #5D7099;   /* Bleu ardoise */
  --vci-couleur-claire: #97A6C2;
  --vci-degrade:        linear-gradient(135deg, #5D7099, #8B9BBE);
}

.vci-rubrique--solidarite {
  --vci-couleur:        #C04A78;   /* Framboise */
  --vci-couleur-claire: #DA92AF;
  --vci-degrade:        linear-gradient(135deg, #C04A78, #D97BA0);
}

.vci-rubrique--ressources {
  --vci-couleur:        #E07A4F;   /* Orange */
  --vci-couleur-claire: #EFAE92;
  --vci-degrade:        linear-gradient(135deg, #E07A4F, #EFA173);
}

.vci-rubrique--engagement {
  --vci-couleur:        #D9A03F;   /* Jaune */
  --vci-couleur-claire: #E8C583;
  --vci-degrade:        linear-gradient(135deg, #D9A03F, #E8BC6B);
}

.vci-rubrique--contact {
  --vci-couleur:        #3BBFB0;   /* Turquoise */
  --vci-couleur-claire: #86D7CD;
  --vci-degrade:        linear-gradient(135deg, #3BBFB0, #6FD3C6);
}

/* N-35 */
.vci-rubrique--carte {
  --vci-couleur:        #21CDC0;   /* Cyan */
  --vci-couleur-claire: #7CE0D8;
  --vci-degrade:        linear-gradient(135deg, #21CDC0, #5FD9CF);
}

/* LE BLOC DE RUBRIQUE N'EXISTE PAS DANS LA MISE EN PAGE.
   Note N-23, 27/08/2026.

   LE DEFAUT. Les pages Alerte et Solutions affichaient leur contenu
   decale vers la droite, a l'interieur d'une zone pourtant bien
   centree. Prevention, elle, se centrait normalement. La seule
   difference entre les deux : ce bloc enveloppant, ajoute la veille
   pour porter la couleur de la rubrique.

   PREMIERE TENTATIVE, INSUFFISANTE. On lui avait impose une largeur
   pleine, aucune marge et le calcul de largeur bordures comprises. Le
   decalage est reste. Donner une largeur ne suffit pas : il aurait
   fallu deviner LAQUELLE des regles du theme s'appliquait a ce div —
   marge, flottement, positionnement, alignement — et les neutraliser
   une par une, sans jamais etre sur de les avoir toutes.

   CE QU'ON FAIT A LA PLACE. display: contents retire purement et
   simplement le bloc de la mise en page. Il ne forme plus de boite :
   ses enfants se comportent comme s'ils etaient poses directement dans
   le conteneur, exactement comme sur Prevention. Aucune regle du theme
   ne peut plus s'y appliquer, puisqu'il n'y a plus rien a mettre en
   page.

   ET LA COULEUR PASSE QUAND MEME. L'heritage des variables n'a rien a
   voir avec la mise en page : un element retire du flux transmet ses
   variables a ses enfants comme n'importe quel autre. Le bloc redevient
   ce qu'il aurait toujours du etre — un porteur de couleur, sans
   existence visuelle.

   NE PAS y ajouter de bordure, de fond ou de marge : elles ne
   s'afficheraient pas. Si un jour la rubrique doit porter un habillage,
   ce sera sur un autre bloc. */
[class*="vci-rubrique--"] {
  display: contents;
}

.vci-sec { padding: 44px 0; }
/* N-82 */
.vci-sec--pale:not(.vci-sec--carte) > .vci-inner {
  background: #F8FBFE;
  padding-bottom: 30px;
}
.vci-sec--pale.vci-sec--carte {
  background: #F8FBFE;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* MARGE INTERIEURE PERMANENTE — corrigee le 25/08/2026.
   Le retrait de 18 px n'existait qu'en dessous de 1236 px de large. Au
   dela, le texte touchait le bord de sa section : sur les sections a
   fond pale, cela donnait l'impression qu'il manquait un bout de CSS.
   Les sections en carte, elles, ont leur propre retrait, plus genereux :
   la regle ci-dessous ne les concerne pas. */
.vci-inner {
  max-width: 1200px; margin: 0 auto;
  box-sizing: border-box;
  padding: 0 22px;
}
@media (max-width: 700px) { .vci-inner { padding: 0 16px; } }
.vci-surtitre {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vci-couleur-claire); margin: 0 0 10px; text-align: left;
}
.vci-titre {
  font-size: 27px; font-weight: 700; line-height: 1.2; color: #1A2E4A;
  margin: 0 0 14px; text-align: left; letter-spacing: -.3px;
}
/* N-83 */
.vci-page-titre {
  font-size: 34px; font-weight: 700; line-height: 1.15; color: #1A2E4A;
  margin: 0; text-align: left; letter-spacing: -.5px;
}
.vci-sec--tete { padding-bottom: 0; }
@media (max-width: 700px) { .vci-page-titre { font-size: 26px; } }
/* PLUS DE LIMITE DE LARGEUR SUR LES TEXTES — note N-24, 27/08/2026.

   CE QUI EXISTAIT. Les chapeaux etaient brides a 62 caracteres, les
   textes a 68. La regle classique du confort de lecture : au-dela, l'oeil
   peine a retrouver le debut de la ligne suivante.

   POURQUOI ELLE SAUTE. Cette limite n'a jamais ete demandee. Et sur une
   page dont le contenu est deja tenu par la carte qui l'entoure et par
   le retrait de la colonne, elle se cumule avec eux : le texte se
   coupait vers la moitie de son contenant, laissant un vide a droite qui
   ressemblait a un defaut plutot qu'a un choix.

   Un modificateur --large existait pour la lever au cas par cas. Il
   fallait donc y penser a chaque paragraphe, et l'oubli se voyait.
   L'exception etait devenue la regle : autant supprimer la regle.

   CE QUI RESTE. Les modificateurs --large sont conserves pour ne rien
   casser dans les pages deja en ligne, mais ils ne servent plus qu'a une
   chose : la justification des chapeaux. Ils peuvent disparaitre du HTML
   au fil des reprises, sans urgence.

   LA CESURE RESTE INTERDITE avec la justification : le navigateur
   recoupe les mots deja composes et la ligne finit sur deux tirets. */
.vci-chapeau {
  font-size: 17px; line-height: 1.65; color: #2B3A47;
  margin: 0 0 22px;
  text-align: justify;
  hyphens: none;
}
.vci-texte {
  font-size: 16px; line-height: 1.7; color: #2B3A47; margin: 0 0 16px;
  text-align: justify;
  hyphens: none;
}
/* JUSTIFICATION DES BLOCS QUI ONT LEUR PROPRE REGLE — 27/08/2026.
   Colibri, encadre et methode habillent leurs paragraphes eux-memes.
   Ces paragraphes ne portent donc ni la classe chapeau ni la classe
   texte, et restaient cales a gauche : dans une carte large, la ligne
   s'arretait bien avant le bord droit, ce qui se voyait aussitot.
   Les listes de la methode suivent la meme regle : ce sont des phrases
   entieres, pas des etiquettes. */
.vci-colibri p,
.vci-encadre p,
.vci-methode p,
.vci-methode li {
  text-align: justify;
  hyphens: none;
}
/* Les modificateurs ne servent plus a rien : ils sont conserves pour ne
   rien casser dans les pages en ligne, et disparaitront du HTML au fil
   des reprises. */
.vci-chapeau--large,
.vci-texte--large { max-width: none; }
/* N-84 */
.vci-faits {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px;
}
.vci-faits li {
  background: #fff; border: 1px solid #D6EAF8; border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 4px 18px rgba(1,74,133,.10);
  border-top: 3px solid var(--vci-couleur);
}
.vci-nombre {
  display: block; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.8px;
  background: var(--vci-degrade);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* LES TITRES NE SE JUSTIFIENT PAS — 29/08/2026.
   La justification posee sur les paragraphes se transmettait aux titres
   de tuile, qui sont courts : « Administratif et redactionnel » tenait
   sur deux lignes, et la premiere se retrouvait etiree d'un bord a
   l'autre. On aligne a gauche, ici comme dans les autres titres. */
.vci-quoi { display: block; font-size: 15px; font-weight: 600; color: #1A2E4A; margin-top: 6px; text-align: left; }
.vci-detail { display: block; font-size: 13.5px; line-height: 1.5; color: #5F5E5A; margin-top: 4px; }
.vci-methode {
  background: #fff; border: 1px solid #D6EAF8; border-left: 4px solid var(--vci-couleur);
  border-radius: 14px; padding: 26px 28px;
  box-shadow: 0 4px 18px rgba(1,74,133,.10);
}
/* MARGE QUAND LE BLOC SUIT UNE GRILLE — 26/08/2026.
   Les grilles de tuiles, de faits et de roles n'ont pas de marge basse :
   c'est ce qui suit qui doit s'en charger. Un bloc methode pose juste
   apres venait donc se coller a la derniere carte, au point de sembler
   la chevaucher. Constate sur la page Alerte, section « Etre prevenu ».
   La regle vaut pour toutes les pages : on n'ajoute plus de <br> a la
   main dans le contenu. */
.vci-tuiles + .vci-methode,
.vci-faits  + .vci-methode,
.vci-roles  + .vci-methode,
.vci-tuiles + .vci-encadre,
.vci-faits  + .vci-encadre,
.vci-roles  + .vci-encadre { margin-top: 26px; }
/* DEUX BLOCS QUI SE SUIVENT — 27/08/2026.
   La regle ci-dessus ne separait un bloc que de la GRILLE qui le
   precede. Deux blocs methode poses l'un apres l'autre restaient donc
   colles, bord contre bord : on ne voyait plus ou finissait le premier.
   Constate sur la page Solidarite, avec les trois blocs securite,
   trier et aerer.
   La regle vaut pour toutes les combinaisons, dans les deux sens. */
.vci-methode + .vci-methode,
.vci-methode + .vci-encadre,
.vci-encadre + .vci-methode,
.vci-encadre + .vci-encadre { margin-top: 20px; }
.vci-methode ul { margin: 14px 0 18px; padding-left: 20px; }
.vci-methode li { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: #2B3A47; }
.vci-tuiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px;
}
.vci-tuiles a {
  display: block; height: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #D6EAF8; border-radius: 14px;
  padding: 22px 24px; text-decoration: none;
  box-shadow: 0 4px 18px rgba(1,74,133,.10);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vci-tuiles a:hover {
  transform: translateY(-3px); border-color: var(--vci-couleur-claire);
  box-shadow: 0 10px 28px rgba(1,74,133,.18);
}
/* LIBELLE DE NATURE dans une tuile — 27/08/2026.
   Sur la page Ressources, neuf tuiles se suivent et disent toutes la
   meme chose au premier regard : des documents. Ce petit libelle place
   au-dessus du titre dit ce qu'on va en FAIRE — consulter, envoyer,
   remplir, comprendre. Cinq valeurs pour neuf tuiles, ce qui permet de
   reperer d'un coup d'oeil celles qui se ressemblent.
   Facultatif : une tuile sans libelle s'affiche comme avant. */
.vci-tuiles .vci-tuile__nature {
  display: inline-block;
  font-style: normal;
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  /* POURQUOI !important ICI. Le theme applique sa propre couleur aux
     balises em, avec une priorite superieure a la notre : le libelle
     sortait en bleu quelle que soit la rubrique. Meme cas que les
     largeurs de paragraphe, constate le 25/08/2026. */
  color: var(--vci-couleur) !important;
  background: #F8FBFE;
  border: 1px solid #E3ECF5;
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 9px;
}
/* BADGE D'ACCES, a droite de la tuile — 29/08/2026.
   Sur la page Ressources, huit rubriques sur neuf sont reservees aux
   adherents et une ne l'est pas. Le dire tuile par tuile evite qu'on
   clique huit fois avant de comprendre, et evite surtout qu'on croie
   tout ferme alors qu'une porte est ouverte.
   Le badge flotte a droite, sur la meme ligne que le libelle de nature.
   Il est facultatif : une tuile sans badge s'affiche comme avant. */
.vci-tuiles .vci-tuile__acces {
  float: right;
  font-style: normal;
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 9px;
}
.vci-tuiles .vci-tuile__acces--libre {
  color: #1F7A6E;
  background: #E8F7F4;
  border: 1px solid #B7E5DC;
}
.vci-tuiles .vci-tuile__acces--reserve {
  color: #5F5E5A;
  background: #F2F3F5;
  border: 1px solid #E0E2E6;
}
.vci-tuiles strong { display: block; clear: both; font-size: 17px; color: #1A2E4A; margin-bottom: 5px; }
.vci-tuiles span { display: block; font-size: 14.5px; line-height: 1.5; color: #5F5E5A; }
.vci-roles {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}
.vci-roles li {
  background: #fff; border: 1px solid #D6EAF8; border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 4px 18px rgba(1,74,133,.10);
}
.vci-roles strong { display: block; font-size: 16px; color: #1A2E4A; margin-bottom: 5px; }
.vci-roles span  { display: block; font-size: 14px; line-height: 1.55; color: #5F5E5A; }
.vci-roles em {
  display: block; font-size: 12.5px; color: var(--vci-couleur); font-style: normal;
  font-weight: 600; margin-top: 8px;
}
.vci-colibri {
  margin: 26px 0 0; padding: 22px 26px; border-radius: 12px;
  background: linear-gradient(135deg,#EEF4FB,#F6FAFE); border: 1px solid #D6EAF8;
}
.vci-colibri p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: #1A2E4A; }
.vci-colibri p:last-child { margin: 0; }
.vci-bouton {
  display: inline-block; background: var(--vci-degrade);
  color: #fff; border-radius: 24px; padding: 13px 30px;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 3px 12px rgba(26,46,74,.22);
}
.vci-bouton:hover { color: #fff; filter: brightness(1.06); }
.vci-lien {
  display: inline-block; margin-left: 16px; font-size: 14.5px; font-weight: 600;
  color: var(--vci-couleur); text-decoration: none; border-bottom: 1px solid #D6EAF8;
}
.vci-lien:hover { border-bottom-color: var(--vci-couleur); }
.vci-note { margin: 18px 0 0; font-size: 13.5px; line-height: 1.6; color: #5F5E5A; }
@media (max-width: 700px) {
  .vci-sec    { padding: 32px 0; }
  .vci-titre  { font-size: 22px; }
  .vci-chapeau{ font-size: 16px; }
  .vci-lien   { display: block; margin: 14px 0 0; }
}
.vci-temoins {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.vci-temoins li {
  background: #fff; border: 1px solid #D6EAF8; border-radius: 14px;
  padding: 24px 26px; box-shadow: 0 4px 18px rgba(1,74,133,.10);
  display: flex; flex-direction: column;
}
.vci-temoins blockquote {
  margin: 0 0 14px; padding: 0; border: none;
  font-size: 15.5px; line-height: 1.65; color: #2B3A47; font-style: normal; flex: 1;
}
.vci-temoins blockquote::before { content: '\201C'; color: var(--vci-couleur-claire); font-weight: 700; }
.vci-temoins blockquote::after  { content: '\201D'; color: var(--vci-couleur-claire); font-weight: 700; }
.vci-temoins cite {
  font-style: normal; font-size: 13.5px; color: #5F5E5A;
  padding-top: 12px; border-top: 1px solid #E3ECF5;
}
.vci-temoins cite strong { display: block; color: #1A2E4A; font-size: 14.5px; }
.vci-rencontres {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
/* --- Carrousel des rencontres ---
   Remplace la liste figee : la liste s'allonge, et sept cartes ne tiennent
   pas de front. Defilement natif, sans bibliotheque. */
.vci-carrousel { position: relative; margin: 0 0 18px; }
.vci-carrousel__piste {
  list-style: none; margin: 0; padding: 6px 2px 14px;
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--vci-couleur-claire) transparent;
}
.vci-carrousel__piste::-webkit-scrollbar { height: 6px; }
.vci-carrousel__piste::-webkit-scrollbar-thumb {
  background: var(--vci-couleur-claire); border-radius: 3px;
}
/* LARGEUR DES CARTES — reprise le 25/08/2026.
   La premiere version employait clamp(240px, 30%, 300px) : une largeur
   fixe en pixels au-dela d'une certaine taille d'ecran, donc un nombre
   de cartes visibles qui tombait rarement juste. Une quatrieme carte
   apparaissait coupee sur le bord droit.
   On calcule desormais la largeur POUR QU'UN NOMBRE ENTIER TIENNE :
   QUATRE cartes plus leurs trois gouttieres de 16 px occupent exactement
   la piste. Les cartes restent entieres, et ce sont les fleches qui
   disent qu'il y a une suite. */
.vci-carrousel__piste li {
  flex: 0 0 calc((100% - 48px) / 4); box-sizing: border-box;
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .vci-carrousel__piste li { flex: 0 0 calc((100% - 32px) / 3); }
}
@media (max-width: 900px) {
  .vci-carrousel__piste li { flex: 0 0 calc((100% - 16px) / 2); }
}
/* La carte entiere est cliquable : le lien porte donc la mise en forme,
   pas le <li>. Une carte sans article garde un href="#" — elle reste
   affichee mais ne bouge pas au survol, ce qui evite de promettre un
   contenu qui n'existe pas. */
.vci-carrousel__piste a {
  display: block; height: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #D6EAF8; border-radius: 14px;
  padding: 20px 22px; border-top: 3px solid var(--vci-couleur);
  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;
}
.vci-carrousel__piste a:not([href="#"]):hover {
  transform: translateY(-3px); border-color: var(--vci-couleur-claire);
  box-shadow: 0 10px 28px rgba(1,74,133,.18);
}
/* CARTE SANS ARTICLE : le clic est NEUTRALISE, pas seulement le curseur.
   Une premiere version se contentait de cursor: default. Le lien restait
   actif : cliquer rechargeait la page — un effet de bord desagreable et
   incomprehensible pour le visiteur.
   pointer-events: none rend la carte inerte. Elle reste lisible et garde
   sa mise en forme ; elle ne fait simplement plus rien.
   Des qu'on remplace le # par l'adresse d'un article, la carte redevient
   cliquable d'elle-meme, sans rien changer ici. */
.vci-carrousel__piste a[href="#"] {
  cursor: default;
  pointer-events: none;
}
.vci-carrousel__piste strong {
  display: block; font-size: 16px; color: #1A2E4A; line-height: 1.3;
}
.vci-carrousel__piste em {
  display: block; font-style: normal; font-size: 12.5px; font-weight: 600;
  color: var(--vci-couleur); margin: 5px 0 8px;
}
.vci-carrousel__piste span {
  display: block; font-size: 13.5px; line-height: 1.55; color: #5F5E5A;
}
.vci-carrousel__fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; z-index: 2;
  background: #fff; border: 1px solid #D6EAF8; color: var(--vci-couleur);
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 14px rgba(1,74,133,.16);
  transition: background .15s ease, opacity .15s ease;
}
.vci-carrousel__fleche:hover:not(:disabled) { background: #EEF4FB; }
.vci-carrousel__fleche:disabled { opacity: .3; cursor: default; }
.vci-carrousel__fleche--avant { left: -14px; }
.vci-carrousel__fleche--apres { right: -14px; }
/* Tout tient a l'ecran : les fleches n'ont plus lieu d'etre. */
.vci-carrousel--fixe .vci-carrousel__fleche { display: none; }
@media (max-width: 700px) {
  /* Une seule carte de front : sur telephone, deux cartes seraient
     illisibles, et une carte pleine largeur se lit bien. */
  .vci-carrousel__piste li      { flex: 0 0 100%; }
  .vci-carrousel__fleche--avant { left: -6px; }
  .vci-carrousel__fleche--apres { right: -6px; }
}
.vci-rencontres strong { display: block; font-size: 15.5px; color: #1A2E4A; }
.vci-rencontres span   { display: block; font-size: 13.5px; color: #5F5E5A; margin-top: 3px; line-height: 1.5; }
/* =====================================================================
   SONDAGE POSÉ SUR L'ACCUEIL
   Le plugin des sondages a son propre habillage, écrit pour la page
   dédiée /sondages/ : bandeau en dégradé, coins peu arrondis, et deux
   boutons de navigation en pied.
   Posé sur l'accueil, cet habillage jure avec les autres widgets, et
   sa navigation n'a plus de sens — « Retour à l'accueil » s'affiche
   alors qu'on y est déjà.
   On le réaligne ici, SANS TOUCHER AU PLUGIN : la page dédiée garde son
   apparence d'origine, seul l'accueil est repris. Il suffit d'envelopper
   le code court dans un bloc portant la classe vci-sondage.
   ===================================================================== */
.vci-sondage .vcsond-sondage {
  border: 1px solid #D6EAF8;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(1, 74, 133, .10);
  margin: 0;
}
/* Le bandeau en dégradé cède la place au surtitre discret des widgets. */
.vci-sondage .vcsond-sondage__header {
  background: #fff;
  padding: 20px 24px 0;
}
.vci-sondage .vcsond-sondage__pretitle {
  color: var(--vci-couleur-claire);
  letter-spacing: .14em;
}
.vci-sondage .vcsond-sondage__main-title {
  color: #1A2E4A;
  font-size: 20px;
  line-height: 1.25;
}
.vci-sondage .vcsond-sondage__body {
  background: #fff;
  padding: 18px 24px 24px;
}
/* Les questions reprennent le fond très clair des tuiles. */
.vci-sondage .vcsond-question,
.vci-sondage .vcsond-commune,
.vci-sondage .vcsond-description {
  background: #F8FBFE;
  border-radius: 12px;
  box-shadow: none;
  border: 1px solid #E3ECF5;
}
.vci-sondage .vcsond-question,
.vci-sondage .vcsond-commune {
  border-left: 3px solid var(--vci-couleur);
}
.vci-sondage .vcsond-submit {
  background: var(--vci-degrade);
  border-radius: 24px;
  padding: 13px 30px;
  box-shadow: 0 3px 12px rgba(26, 46, 74, .22);
}
.vci-sondage .vcsond-submit:hover {
  background: var(--vci-degrade);
  filter: brightness(1.06);
  transform: none;
}
/* NAVIGATION MASQUÉE. Les deux boutons de pied renvoient à l'accueil et
   à la page des sondages — inutiles quand le bloc EST sur l'accueil. */
.vci-sondage .vcsond-back-buttons,
.vci-sondage .vcsond-archive-link { display: none; }
/* Message d'absence : même carte que le reste, sans le liseré gris. */
.vci-sondage .vcsond-no-active {
  margin: 0;
  border-left: 4px solid var(--vci-couleur);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(1, 74, 133, .10);
}
/* --- Résultats repliés sur l'accueil ---
   Cinq questions en graphiques allongent la page bien au-delà de ce
   qu'un accueil supporte. On les replie derrière une ligne à cliquer :
   celui qui a voté sait qu'il peut regarder, et la page reste courte.
   Le repli est porté par la classe vci-replie, posée par le petit script
   qui accompagne le bloc dans la page. */
.vci-sondage .vci-replie-bouton {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; box-sizing: border-box;
  margin: 16px 0 0; padding: 14px 20px;
  background: #F8FBFE; border: 1px solid #E3ECF5; border-radius: 12px;
  border-left: 3px solid var(--vci-couleur);
  font-size: 15px; font-weight: 600; color: #1A2E4A;
  cursor: pointer; text-align: left;
  transition: background .15s ease;
}
.vci-sondage .vci-replie-bouton:hover { background: #EEF4FB; }
.vci-sondage .vci-replie-bouton::after {
  content: '\25BE'; color: var(--vci-couleur); font-size: 14px;
  transition: transform .2s ease;
}
.vci-sondage .vci-replie .vci-replie-bouton::after { transform: rotate(-90deg); }
.vci-sondage .vci-replie .vci-replie-corps { display: none; }
/* =====================================================================
   SECTION EN CARTE
   Sur l'accueil, les sections alternent avec des blocs bleus et des
   widgets : le contenu posé a meme le fond de page passe tres bien.
   Sur une page qui n'a que du texte, il paraît nu — « brut bord de
   page ». Cette variante l'enveloppe dans la meme carte blanche que les
   widgets : bordure bleu clair, coins arrondis, ombre franche.
   A poser sur les sections de texte, PAS sur celles qui contiennent
   deja des tuiles ou des cartes — on aurait alors une carte dans une
   carte.
   ===================================================================== */
.vci-sec--carte > .vci-inner {
  background: #fff;
  border: 1px solid #D6EAF8;
  border-radius: 16px;
  padding: 30px 34px;
  box-shadow: 0 4px 20px rgba(1, 74, 133, .08);
}
@media (max-width: 700px) {
  .vci-sec--carte > .vci-inner { padding: 22px 18px; border-radius: 14px; }
}
/* =====================================================================
   VISUELS — bande pleine largeur entre deux sections
   Une photo de crue ou une video de ruissellement ne s'illustre pas en
   vignette : elle a besoin de la largeur pour dire ce qu'elle montre.
   La legende et le credit vivent SOUS le visuel, jamais dessus : un
   texte pose sur une image de crue se lit mal, et la date compte autant
   que l'image.
   ===================================================================== */
.vci-visuel {
  margin: 0 auto 30px;
  max-width: 1200px;
  box-sizing: border-box;
}
@media (max-width: 1236px) { .vci-visuel { padding: 0 18px; } }
.vci-visuel figure { margin: 0; }
/* HAUTEUR PLAFONNEE — corrige le 25/08/2026.
   Une video verticale de telephone posee sur 1200 px de large occupait
   plus que la hauteur de l'ecran : on ne voyait ni le debut ni la fin de
   la section, et la page devenait un mur.
   On plafonne donc a 60 % de la hauteur de la fenetre. Le visuel garde
   ses proportions.
   Le cadre porte desormais la bordure et l'ombre : c'est lui qui a la
   bonne taille, pas le media. */
/* FOND DES VISUELS — GRIS CLAIR, ET NON PLUS BLEU NUIT.
   Corrige le 26/08/2026, apres plusieurs rappels.
   Une video verticale de telephone posee dans un cadre large laisse
   forcement deux bandes de chaque cote. Ces bandes etaient en bleu nuit,
   et le resultat ressemblait a un bloc noir autour de l'image : l'oeil
   allait sur le vide au lieu d'aller sur le contenu.
   #F3F5F7 est le gris des tuiles de triptyque. Les bandes s'effacent
   dans la page au lieu de la trouer.
   REGLE : PLUS AUCUN FOND SOMBRE derriere une photo ou une video, nulle
   part. Si un besoin de contraste se presente un jour, il se traitera
   par une bordure, pas par un aplat noir. */
.vci-visuel__cadre {
  display: flex; align-items: center; justify-content: center;
  background: #F3F5F7;
  border: 1px solid #D6EAF8;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(1, 74, 133, .12);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.vci-visuel__cadre img,
.vci-visuel__cadre video {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto; height: auto;
}
/* N-17 */
.vci-visuel--nu .vci-visuel__cadre {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
/* Pastille d'agrandissement, discrete, en bas a droite. */
.vci-visuel__loupe {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(26, 46, 74, .82); color: #fff;
  border-radius: 20px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 600;
  pointer-events: none;
}
/* --- Fenetre d'agrandissement ---
   Le meme visuel, en grand, sur fond sombre. On y arrive au clic sur le
   cadre, on en sort par la croix, par la touche d'echappement ou en
   cliquant a cote.
   Elle reprend l'habillage des modales du site : voile bleu nuit
   translucide, flou d'arriere-plan, carte blanche a coins arrondis. */
.vci-loupe {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(26, 46, 74, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 32px 24px;
}
.vci-loupe.est-ouverte { display: flex; }
.vci-loupe__media {
  max-width: 92vw; max-height: 82vh;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 20px 60px rgba(10, 22, 38, .45);
}
.vci-loupe__media img,
.vci-loupe__media video {
  display: block; max-width: calc(92vw - 20px); max-height: calc(82vh - 20px);
  width: auto; height: auto; border-radius: 10px;
}
/* N-17 */
.vci-loupe.est-nue .vci-loupe__media {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.vci-loupe.est-nue .vci-loupe__media img {
  max-width: 92vw; max-height: 82vh;
}
.vci-loupe__fermer {
  position: absolute; top: 20px; right: 24px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0;
  transition: background .15s ease;
}
.vci-loupe__fermer:hover { background: rgba(255, 255, 255, .24); }
.vci-loupe__legende {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; color: #EEF4FB;
  font-size: 14px; line-height: 1.5; padding: 0 32px;
  max-width: 800px; margin: 0 auto;
  text-shadow: 0 1px 3px rgba(10, 22, 38, .6);
}
.vci-visuel figcaption {
  margin-top: 12px;
  font-size: 14.5px; line-height: 1.55; color: #2B3A47;
  text-align: left;
}
.vci-visuel figcaption strong { color: #1A2E4A; }
/* LE CREDIT SUIT LE TEXTE, DANS LA MEME PHRASE.
   Trois versions ont echoue avant celle-ci, faute d'avoir compris la
   demande :
     - empecher la cesure : le credit passait quand meme a la ligne ;
     - souder la date : le reste se renvoyait toujours ;
     - interdire tout retour : le credit devenait une ligne a part,
       tronquee par des points de suspension.
   CE QU'IL FALLAIT. Le credit se lit A LA SUITE de la legende, comme la
   fin de la phrase. Il peut se renvoyer a la ligne si la place manque —
   ce n'est pas un probleme. SEULE LA DATE ne doit jamais se couper.
   D'ou : display inline (et non block), pas de saut de ligne avant, et
   la date protegee par sa propre regle. */
.vci-visuel__credit {
  display: inline;
  font-size: 12.5px; color: #5F5E5A;
  hyphens: none;
}
/* Le mois et l'annee restent ensemble, quoi qu'il arrive. */
.vci-visuel__credit .vci-date { white-space: nowrap; }
/* Deux visuels cote a cote, quand la place le permet.
   HAUTEUR EGALE — corrige le 25/08/2026. Deux photos de proportions
   differentes s'alignaient sur leur bord haut et se decalaient en bas :
   l'oeil voit aussitot le desequilibre. Les cadres ont desormais la meme
   hauteur, et l'image la remplit en se recadrant par le centre.
   La legende est poussee en bas de sa colonne, pour que les deux
   commencent a la meme ligne meme si l'une est plus longue. */
.vci-visuels-paire {
  margin: 0 auto 30px;
  max-width: 1200px;
  box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  align-items: stretch;
}
@media (max-width: 1236px) { .vci-visuels-paire { padding: 0 18px; } }
@media (max-width: 800px)  { .vci-visuels-paire { grid-template-columns: 1fr; } }
.vci-visuels-paire .vci-visuel { margin: 0; max-width: none; padding: 0; }
.vci-visuels-paire figure {
  display: flex; flex-direction: column; height: 100%;
}
/* Le cadre prend une hauteur fixe : les deux colonnes s'alignent. */
.vci-visuels-paire .vci-visuel__cadre {
  height: 46vh; min-height: 280px; max-height: 460px;
}
/* L'image REMPLIT le cadre en se recadrant par le centre — c'est ce qui
   permet a deux photos de proportions differentes de s'aligner. Les
   videos, elles, gardent leurs proportions : les recadrer couperait ce
   qu'on veut montrer. */
.vci-visuels-paire .vci-visuel__cadre img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; object-position: center;
}
.vci-visuels-paire .vci-visuel__cadre video {
  max-height: 100%;
}
/* La legende occupe le reste de la colonne, et ne coupe pas les mots. */
.vci-visuels-paire figcaption {
  flex: 1;
  hyphens: none;
  text-wrap: pretty;
}
/* =====================================================================
   TRIPTYQUE — un texte, puis deux videos
   LE PROBLEME. Une video verticale de telephone, posee dans un cadre
   large, laisse deux grandes bandes de chaque cote. Cela donne
   l'impression d'un format inadapte, alors que la video est tres bien :
   c'est le cadre qui est trop large pour elle.
   LA SOLUTION. Les videos remplissent leur colonne, et la TUILE DE
   TEXTE occupe le troisieme tiers. La place perdue devient un slogan.
   ===================================================================== */
/* TROIS COLONNES EGALES — repris le 25/08/2026 apres essai.
   La version precedente laissait les videos prendre la largeur que leur
   hauteur leur donnait, et le texte occupait le reste. Sur ecran large,
   les videos devenaient minuscules et la tuile de texte demesuree.
   Trois tiers egaux : les videos remplissent leur colonne, gagnent en
   hauteur, et la carte respire. */
.vci-triptyque {
  margin: 0 auto 30px;
  max-width: 1200px;
  box-sizing: border-box;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 20px;
}
@media (max-width: 700px) { .vci-triptyque { padding: 0 16px; } }
/* La tuile de texte prend tout l'espace disponible. */
.vci-triptyque__mot {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: #F3F5F7;
  border: 1px solid #E3ECF5;
  border-radius: 16px;
  padding: 26px 30px;
  box-sizing: border-box;
}
.vci-triptyque__mot p {
  margin: 0;
  font-size: 18px; line-height: 1.5; color: #1A2E4A;
  text-align: center; text-wrap: balance;
  hyphens: none;
}
.vci-triptyque__mot em {
  display: block; margin-top: 10px;
  font-style: normal; font-size: 13.5px; color: #5F5E5A;
}
.vci-triptyque .vci-visuel {
  margin: 0; max-width: none; padding: 0;
  display: flex; flex-direction: column;
  min-width: 0;
}
/* La video remplit sa colonne : c'est elle qui donne la hauteur, et le
   cadre s'y adapte. Plus de fond a masquer. */
.vci-triptyque .vci-visuel__cadre {
  height: auto; min-height: 0; max-height: none;
  background: transparent;
  width: 100%;
}
.vci-triptyque .vci-visuel__cadre video {
  width: 100%; height: auto;
  max-width: 100%; max-height: none;
}
.vci-triptyque figure {
  display: flex; flex-direction: column; height: 100%;
}
.vci-triptyque figcaption {
  flex: 1;
  hyphens: none; text-wrap: pretty;
}
/* Sur telephone, les trois se suivent. */
@media (max-width: 900px) {
  .vci-triptyque { grid-template-columns: 1fr; }
}
/* =====================================================================
   SECTION A DEUX COLONNES — le texte explique, le visuel montre
   POURQUOI. Sur la page des quatre types, chaque type a SON visuel : on
   ne peut pas les apparier comme ailleurs. Une video verticale posee en
   pleine largeur retrouvait alors ses bandes de chaque cote.
   Ici, la video occupe une demi-largeur, a cote du texte qu'elle
   illustre. Elle y tient sans qu'on ait rien a masquer, et le lecteur
   voit l'explication et l'image d'un seul regard.
   La colonne du visuel se place a droite par defaut, a gauche avec la
   variante --inverse : alterner evite la monotonie sur une page qui
   enchaine quatre sections de meme forme.
   ===================================================================== */
.vci-sec--duo > .vci-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}
.vci-sec--duo.vci-sec--carte > .vci-inner { padding: 30px 34px; }
.vci-sec--duo .vci-duo__texte { min-width: 0; }
.vci-sec--duo .vci-duo__texte .vci-texte { max-width: none; }
.vci-sec--duo .vci-visuel {
  margin: 0; max-width: none; padding: 0; min-width: 0;
}
.vci-sec--duo .vci-visuel__cadre {
  height: auto; min-height: 0; max-height: none;
  width: 100%; background: transparent;
}
.vci-sec--duo .vci-visuel__cadre img,
.vci-sec--duo .vci-visuel__cadre video {
  width: 100%; height: auto;
  max-width: 100%; max-height: none;
  object-fit: initial;
}
/* Le visuel passe a gauche : on alterne d'une section a l'autre. */
.vci-sec--duo--inverse .vci-duo__texte { order: 2; }
.vci-sec--duo--inverse .vci-visuel      { order: 1; }
@media (max-width: 900px) {
  .vci-sec--duo > .vci-inner { grid-template-columns: 1fr; gap: 22px; }
  /* Sur telephone, le texte passe toujours devant : on lit avant de voir. */
  .vci-sec--duo--inverse .vci-duo__texte { order: 0; }
  .vci-sec--duo--inverse .vci-visuel      { order: 0; }
}
/* --- Listes de kit --- */
.vci-kit {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 0 0 18px;
}
@media (max-width: 800px) { .vci-kit { grid-template-columns: 1fr; } }
.vci-kit__groupe {
  background: #fff; border: 1px solid #D6EAF8; border-radius: 14px;
  padding: 22px 24px; border-top: 3px solid var(--vci-couleur);
  box-shadow: 0 4px 18px rgba(1, 74, 133, .10);
}
.vci-kit__groupe h3 {
  margin: 0 0 14px; font-size: 17px; color: #1A2E4A; line-height: 1.3;
}
.vci-kit__groupe ul { list-style: none; margin: 0; padding: 0; }
.vci-kit__groupe li {
  position: relative;
  padding: 0 0 0 20px; margin: 0 0 9px;
  font-size: 15px; line-height: 1.55; color: #2B3A47;
}
.vci-kit__groupe li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vci-couleur);
}
.vci-kit__groupe li strong { color: #1A2E4A; }
/* L'affiche du kit, dans la meme carte que les deux listes.
   Elle est verticale : on la bride en largeur et on la centre, plutot
   que de l'etaler sur toute la carte. */
.vci-kit__affiche {
  margin: 24px 0 0;
  padding: 22px 24px;
  background: #F8FBFE;
  border: 1px solid #E3ECF5;
  border-radius: 14px;
  display: grid; grid-template-columns: auto 1fr; gap: 30px;
  align-items: center;
}
@media (max-width: 800px) {
  .vci-kit__affiche { grid-template-columns: 1fr; padding: 18px; }
}
.vci-kit__affiche-texte { min-width: 0; }
.vci-kit__affiche-titre {
  margin: 0 0 12px; font-size: 19px; line-height: 1.3; color: #1A2E4A;
}
.vci-kit__affiche .vci-visuel { margin: 0; max-width: 340px; padding: 0; }
.vci-kit__affiche .vci-visuel__cadre {
  height: auto; min-height: 0; max-height: none;
  width: 100%; background: transparent;
}
.vci-kit__affiche .vci-visuel__cadre img {
  width: 100%; height: auto; max-width: 100%; max-height: none;
  object-fit: initial;
}
/* --- Encadre a liseré, pour une remarque de fin de section --- */
.vci-encadre {
  margin: 26px 0 0;
  padding: 20px 24px;
  background: #F8FBFE;
  border: 1px solid #E3ECF5;
  border-left: 4px solid var(--vci-couleur);
  border-radius: 12px;
}
.vci-encadre__titre {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vci-couleur-claire);
}
.vci-encadre p:last-child {
  margin: 0; font-size: 16px; line-height: 1.65; color: #1A2E4A;
}

.vcw-ag { position: relative; }
.vcw-ag__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.vcw-ag__fleche--avant { left: 4px; }
.vcw-ag__fleche--apres { right: 4px; }
.vcw-ag:hover .vcw-ag__fleche { opacity: 1; }
.vcw-ag__fleche:hover { background: rgba(255,255,255,.34); }
@media (hover: none) {
  .vcw-ag__fleche { opacity: .8; }
}
/* N-75 */

/* =====================================================================
   LES PAVÉS DES PAGES RÉDIGÉES
   =====================================================================

   C'est la signature du site : une carte blanche, un liseré à gauche de
   la couleur du sujet, une ombre portée. Les fiches commune les emploient
   déjà — ces règles les rendent disponibles partout.

   ILS ALTERNENT. Un pavé sur deux porte « vcom-bloc--nu » : il perd son
   relief et se pose à même le fond. Deux liserés ne se suivent jamais,
   et la page respire.

   LA COULEUR VIENT DE --vcom-accent, posé sur le pavé. Marine par
   défaut. C'est ainsi qu'un bloc peut porter la teinte de son sujet — le
   turquoise du Petit Morin, la framboise de l'Aubetin — sans qu'on
   écrive une classe par couleur.
   ===================================================================== */

.vcom-corps {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
  box-sizing: border-box;
}
@media (max-width: 700px) { .vcom-corps { padding: 0 16px; } }

.vcom-corps .vcom-entete { margin-bottom: 26px; }
.vcom-corps .vcom-surtitre {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vci-couleur-claire, #6B9FCC);
}
.vcom-corps .vcom-titre {
  margin: 0 0 14px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: #1A2E4A;
}

.vcom-corps .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);
}

/* Un pavé sur deux peut perdre son relief, quand la page a beaucoup de
   sections. Sur une suite courte — les trois rivières, par exemple — on
   garde le relief partout : chacune doit avoir le même traitement. */
.vcom-corps .vcom-bloc--nu {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 4px 12px 10px;
}

/* ─── LA BANDE, QUI REGROUPE PLUSIEURS PAVÉS ──────────────────────

   Un gris très pâle derrière une suite de pavés : ils forment alors un
   ensemble, et l'on voit d'un coup d'œil que ces sections se répondent.

   ELLE NE DÉPASSE JAMAIS SON CONTENEUR. Un premier essai employait
   calc(50% - 50vw) pour aller d'un bord à l'autre de l'écran : dans un
   conteneur Elementor, cela ne déborde pas — ou déborde mal.

   Elle prend donc toute la largeur qu'on lui donne, et rien de plus. */
.vcom-corps .vcom-bande {
  margin: 30px 0;
  padding: 26px 22px 4px;
  background: #F7FAFD;
  border: 1px solid #EDF3F9;
  border-radius: 16px;
}

@media (max-width: 700px) {
  .vcom-corps .vcom-bande { padding: 20px 14px 2px; }
}

/* Un titre au-dessus de la bande dit ce qui la rassemble. Facultatif. */
.vcom-corps .vcom-bande__titre {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A93A0;
}

@media (max-width: 700px) {
  .vcom-corps .vcom-bande {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

.vcom-corps .vcom-bloc__titre {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--vcom-accent, #3B6CB7);
}

.vcom-corps .vcom-soustitre {
  margin: 24px 0 10px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #1A2E4A;
}
.vcom-corps .vcom-soustitre:first-child { margin-top: 0; }

/* LA CÉSURE RESTE INTERDITE avec la justification : le navigateur
   recoupe les mots déjà composés et la ligne finit sur deux tirets. */
.vcom-corps .vcom-texte-long p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: #2B3A47;
  text-align: justify;
  hyphens: none;
}
.vcom-corps .vcom-texte-long p:last-child { margin-bottom: 0; }

.vcom-corps .vcom-texte-long ul,
.vcom-corps .vcom-texte-long ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.vcom-corps .vcom-texte-long li {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.65;
  color: #2B3A47;
}

.vcom-corps .vcom-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5F5E5A;
}

.vcom-corps .vcom-lien {
  color: var(--vcom-accent, #3B6CB7);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.vcom-corps .vcom-lien:hover { color: #016AB1; }

/* ─── LE BLOC DES SOURCES ─────────────────────────────────────────

   Il ferme la page sans la charger : fond très pâle, texte discret. Ce
   qui compte, c'est qu'il soit là — pas qu'il se voie. */
.vcom-corps .vcom-sources {
  margin: 30px 0 0;
  padding: 20px 24px;
  background: #F8FBFE;
  border: 1px solid #E3ECF5;
  border-radius: 12px;
}
.vcom-corps .vcom-sources__titre {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A93A0;
}
.vcom-corps .vcom-sources__ligne {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #5F5E5A;
}
.vcom-corps .vcom-sources__ligne:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .vcom-corps .vcom-bloc { padding: 20px 18px; }
  .vcom-corps .vcom-titre { font-size: 23px; }
  .vcom-corps .vcom-texte-long p { text-align: left; }
}

/* N-76 */

/* =====================================================================
   LA RUPTURE — un chapitre qui ne se lit pas comme les autres
   =====================================================================

   Après une suite de pavés blancs bien découpés, une page qui respire.

   ON SORT DES CARTES. Les points se posent à même la bande grise,
   séparés par un simple filet. Ce n'est plus une liste de sujets, c'est
   un texte suivi — et cela s'entend à la lecture.

   POURQUOI ICI. Le chapitre « ce qu'elles ont en commun » ne parle plus
   d'une rivière mais des trois. Il change de sujet, il doit changer de
   forme.

   LE TITRE PASSE EN TÊTE DE BANDE, en grand, avec son filet de couleur
   dessous. Il annonce l'ensemble au lieu de coiffer une carte.
   ===================================================================== */

.vcom-corps .vcom-bande--suite {
  padding: 30px 30px 26px;
}

.vcom-corps .vcom-bande--suite .vcom-bande__titre {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.2px;
  text-transform: none;
  color: #1A2E4A;
}
.vcom-corps .vcom-bande--suite .vcom-bande__mot {
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--vcom-accent, #3B6CB7);
  font-size: 15px;
  line-height: 1.6;
  color: #5F6B7A;
}

/* Chaque point se pose sans cadre, séparé du suivant par un filet. */
.vcom-corps .vcom-point {
  padding: 0 0 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid #E3ECF5;
}
.vcom-corps .vcom-point:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* Le titre du point porte une pastille de couleur : elle rattache le
   chapitre au reste sans redessiner une carte. */
.vcom-corps .vcom-point__titre {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #1A2E4A;
}
.vcom-corps .vcom-point__titre::before {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vcom-accent, #3B6CB7);
}

.vcom-corps .vcom-point p {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: #2B3A47;
  text-align: justify;
  hyphens: none;
}
.vcom-corps .vcom-point p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .vcom-corps .vcom-bande--suite { padding: 22px 16px 20px; }
  .vcom-corps .vcom-point p { padding-left: 0; text-align: left; }
}

/* N-78 */

/* =====================================================================
   LE STYLE DES WIDGETS, SORTI DU COMPOSANT TEXTE — 06/09/2026
   =====================================================================

   Il vivait dans un bloc <style> à l'intérieur d'un composant Texte
   d'Elementor. L'éditeur visuel l'a enveloppé dans un <p> en réécrivant
   le widget : la feuille n'était plus lue, les textes passaient en bleu
   et les cadres perdaient leur habillage.

   ICI, IL EST HORS D'ATTEINTE. Elementor ne réécrit pas les fichiers.
   ===================================================================== */

/* ─── La méthode ─────────────────────────────────────────────────── */
.vci-methode ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.vci-methode li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.65;
  color: #2B3A47;
}
.vci-methode li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3B6CB7;
}

.vci-lien {
  font-size: 15px;
  font-weight: 600;
  color: #3B6CB7;
  text-decoration: none;
  border-bottom: 1px solid #D6EAF8;
}
.vci-lien:hover { border-bottom-color: #3B6CB7; }

/* ─── Les rubriques ──────────────────────────────────────────────── */
.vci-tuiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.vci-tuiles a {
  display: block;
  height: 100%;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #E3ECF5;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(1, 74, 133, .06);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.55;
  color: #5F5E5A;
  box-sizing: border-box;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vci-tuiles a:hover {
  transform: translateY(-3px);
  border-color: #B5D4F4;
  box-shadow: 0 6px 20px rgba(1, 74, 133, .10);
}
.vci-tuiles strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  color: #1A2E4A;
}

/* ─── Nous rejoindre ─────────────────────────────────────────────── */
/* N-86 */
.vci-etapes { list-style: none; margin: 24px 0 0; padding: 0; }
.vci-etapes li {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 10px;
  background: #fff; border: 1px solid #E3ECF5; border-radius: 12px;
  padding: 16px 20px;
}
.vci-etapes__num {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #3B6CB7, #5AADCF); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.vci-etapes__lib {
  font-size: 16px; font-weight: 500; color: #1A2E4A;
  line-height: 1.45; text-align: left; min-width: 0;
}
.vci-etapes__lib strong { font-weight: 700; }

/* N-85 */
.vci-roles {
  list-style: none;
  margin: 24px 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.vci-roles li {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #E3ECF5;
  border-top: 3px solid #3B6CB7;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5F5E5A;
  box-shadow: 0 3px 14px rgba(1, 74, 133, .06);
}
.vci-roles strong {
  display: block;
  margin-bottom: 7px;
  font-size: 17px;
  color: #1A2E4A;
}
.vci-roles em {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: #3B6CB7;
}

/* Le colibri : ce que finance l'adhésion, dit sans emphase. */
.vci-colibri {
  margin-top: 24px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid #E3ECF5;
  border-left: 4px solid #3BBFB0;
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(1, 74, 133, .06);
}
.vci-colibri p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #2B3A47;
}
.vci-colibri p:last-child { margin-bottom: 0; }

.vci-bouton {
  display: inline-block;
  margin-right: 16px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #3B6CB7, #5AADCF);
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(59, 108, 183, .28);
}
.vci-bouton:hover { color: #fff; filter: brightness(1.06); }

/* ─── Les témoignages ────────────────────────────────────────────── */
.vci-temoins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.vci-temoins li {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #E3ECF5;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(1, 74, 133, .06);
}
.vci-temoins blockquote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.65;
  font-style: italic;
  color: #2B3A47;
}
.vci-temoins blockquote::before {
  content: '\201C';
  display: block;
  margin-bottom: -8px;
  font-size: 34px;
  line-height: 1;
  color: #B5D4F4;
  font-style: normal;
}
.vci-temoins cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  color: #8A93A0;
}
.vci-temoins cite strong {
  display: block;
  font-size: 14.5px;
  color: #1A2E4A;
}

/* ─── Le carrousel des rencontres ────────────────────────────────── */
.vci-chapeau--large { max-width: none; }

.vci-carrousel { position: relative; }
.vci-carrousel__piste {
  list-style: none;
  margin: 0;
  padding: 4px 0 10px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.vci-carrousel__piste::-webkit-scrollbar { display: none; }

.vci-carrousel__piste li {
  flex: 0 0 300px;
  min-width: 0;
}
.vci-carrousel__piste a {
  display: block;
  height: 100%;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #E3ECF5;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(1, 74, 133, .06);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5F5E5A;
  box-sizing: border-box;
  transition: transform .15s ease, border-color .15s ease;
}
.vci-carrousel__piste a:hover {
  transform: translateY(-3px);
  border-color: #B5D4F4;
}
.vci-carrousel__piste strong {
  display: block;
  font-size: 16px;
  color: #1A2E4A;
}
.vci-carrousel__piste em {
  display: block;
  margin: 2px 0 10px;
  font-size: 12.5px;
  font-style: normal;
  color: #6B9FCC;
}

.vci-carrousel__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid #D6EAF8;
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  color: #3B6CB7;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(1, 74, 133, .12);
}
.vci-carrousel__fleche--avant { left: -14px; }
.vci-carrousel__fleche--apres { right: -14px; }
.vci-carrousel__fleche:disabled { opacity: 0; pointer-events: none; }

/* Quand tout tient à l'écran, les flèches n'ont plus lieu d'être. */
.vci-carrousel--fixe .vci-carrousel__fleche { display: none; }

@media (max-width: 700px) {
  .vci-carrousel__piste li { flex: 0 0 84%; }
  .vci-carrousel__fleche { display: none; }
}

/* N-79 */

/* LES CHAPEAUX ET LES TEXTES PRENNENT TOUTE LA LARGEUR.

   Le style des widgets les borne à 62 et 68 caractères : les lignes
   s'arrêtent court, et le texte paraît coupé au milieu. Cette limite
   avait du sens sur une colonne étroite ; dans une enveloppe de 1200
   pixels, elle laisse un tiers de la largeur vide.

   IL FAUT « !important » ICI, et ce n'est pas de la paresse.

   Les widgets posent leur style dans un bloc <style> à l'intérieur de la
   page. Il vient donc APRÈS cette feuille dans le document, et à
   spécificité égale c'est le dernier qui gagne.

   Sans « !important », notre règle est lue puis écrasée. */
.vci-chapeau,
.vci-chapeau--large,
.vci-texte,
.vci-methode p,
.vci-colibri p { max-width: none !important; }


/* N-80 */

/* ─── LE CARROUSEL CALE SES TUILES ────────────────────────────────

   Une tuile coupée au bord droit donne l'impression d'un défilement
   inachevé : on ne sait pas s'il reste une carte ou un morceau de
   carte.

   Avec l'accrochage, le défilement s'arrête toujours sur le début d'une
   tuile. On voit des cartes entières, et le geste a un terme net. */
.vci-carrousel__piste {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
}
.vci-carrousel__piste li { scroll-snap-align: start; }

/* Les flèches glissent d'une tuile exactement : le script mesure la
   première carte et ajoute l'écart. */

/* N-81 */

/* ─── « NOUS REJOINDRE » : CHAQUE PART SUR SA LIGNE ────────────────

   Le titre, la description et la condition se collaient les uns aux
   autres : « Devenir bénévoleVous donnez du temps… »

   Le style du widget ne les mettait pas en bloc, et le nôtre était lu
   avant lui. D'où « !important » ici, comme pour les chapeaux. */
.vci-roles strong {
  display: block !important;
  margin-bottom: 7px;
  font-size: 17px;
  color: #1A2E4A;
}
.vci-roles span {
  display: block !important;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5F5E5A;
}
.vci-roles em {
  display: block !important;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #E3ECF5;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: #3B6CB7;
}

/* Même chose pour les rubriques et le carrousel, où le titre se collait
   à sa description. */
.vci-tuiles strong,
.vci-carrousel__piste strong,
.vci-carrousel__piste em { display: block !important; }