/*
Theme Name: Promévil
Theme URI: https://promevil.org
Author: Metagora
Description: Thème bloc de Promévil, association de médiation sociale. Direction
 « Chevauchement » : une photographie en pleine largeur, puis une carte blanche
 qui mord dessus. Charte des supports commerciaux 2026, Inter hébergée
 localement, écrit pour le téléphone d'abord.
Version: 4.23.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: promevil
*/

/* ==========================================================================
   PRINCIPES

   1 · Mobile d'abord. Ce qui est écrit sans condition décrit le téléphone.
       Tout `min-width` est un enrichissement, jamais un rattrapage. Les deux
       points de rupture sont ceux du noyau : 600 px, où la navigation bascule
       en voile, et 782 px, où les colonnes cessent de s'empiler.

   2 · Le motif de la page. Une photographie pleine largeur, puis une carte
       blanche qui la chevauche, alternativement à gauche et à droite. Le fond
       de page est le vert très pâle de la charte ; les contenus sont des
       surfaces blanches posées dessus.

   3 · Un seul bord gauche. Le gabarit contraint de WordPress recentre en
       `!important` tout enfant à qui l'on donne une largeur maximale. Sans
       contre-mesure, une simple mesure de lecture fait danser le bord gauche
       d'un bloc à l'autre. La règle qui l'annule est en tête de section
       « Gabarit », et rien ne doit la contourner.

   4 · Le vert vif ne porte jamais de texte : 2,53:1 sur blanc. Il travaille en
       aplat, avec de l'encre par-dessus. Pour un texte vert sur fond clair,
       c'est `vert-texte` qui prend le relais, à 5,81:1.
   ========================================================================== */


/* ==========================================================================
   1 · Base
   ========================================================================== */

:root {
  --pv-manque: #6B21A8;
  --pv-rayon: 14px;
  --pv-rayon-petit: 10px;
  --pv-ombre: 0 18px 44px rgba(43, 48, 59, .11);
  --pv-ombre-douce: 0 8px 22px rgba(43, 48, 59, .07);
  --pv-transition: .25s cubic-bezier(.16, 1, .3, 1);
  --pv-colonne: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--wp--preset--color--fond);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--wp--preset--color--vert-texte);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Le voile de navigation bloque le défilement du fond, comme dans le noyau. */
html.has-modal-open { overflow: hidden; }

/* Chiffres alignés dès qu'ils sont mis en colonne. */
.promevil-chiffre,
.wp-block-table td:first-child {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Les portraits sont cadrés à mi-corps : dans un cadre qui les recadre en
   paysage, le point d'ancrage doit remonter, sinon il ne reste qu'un buste. */
img[src*="portrait-"] { object-position: 50% 15%; }
.wp-block-cover img[src*="portrait-"] { object-position: 50% 20%; }


/* ==========================================================================
   2 · Gabarit — les quatre pièges du modèle contraint
   ========================================================================== */

/* (a) Une bande pleine largeur sort de la gouttière du site : sans marge
   propre, son texte vient toucher le bord de l'écran dès que la fenêtre passe
   sous la largeur de contenu. Ne se voit pas au-dessus de 1 180 px. */
.entry-content > .alignfull,
.entry-content > .alignfull.wp-block-cover {
  padding-inline: var(--wp--preset--spacing--30);
}
@media (min-width: 900px) {
  .entry-content > .alignfull,
  .entry-content > .alignfull.wp-block-cover {
    padding-inline: var(--wp--preset--spacing--40);
  }
}

/* (b) Le gabarit recentre tout enfant borné en largeur. On rend la marge de
   gauche à zéro pour le contenu courant, en laissant les conteneurs alignés
   larges se centrer, eux. Grilles et boîtes flexibles restent hors du champ :
   leurs enfants ne doivent pas recevoir de marge automatique. */
.entry-content :where(.is-layout-constrained, .is-layout-flow):not(.alignfull)
  > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure,
           .wp-block-buttons, .wp-block-quote, .wp-block-table,
           .wp-block-group):not(.alignwide):not(.alignfull) {
  margin-inline: 0 auto !important;
}

/* (c) Le contenu d'une page se lit sur une colonne unique. La mesure varie,
   jamais la position. */
.promevil-colonne > * { max-width: none; }
@media (min-width: 782px) {
  .promevil-colonne > :where(p, ul, ol, blockquote, .wp-block-list) { max-width: 68ch; }
  .promevil-colonne > :where(h2) { max-width: 24ch; }
  .promevil-colonne > :where(h3, h4) { max-width: 34ch; }
}

/* (d) L'ecart entre deux mouvements est une constante, pas une negociation.

   Il valait autrefois quatre valeurs differentes selon les voisins — et, comme
   le rembourrage voyageait en style en ligne, aucune ne s'appliquait : on
   mesurait de 45 a 242 px pour la meme couture. Desormais **chaque section
   porte la moitie de l'ecart en haut et en bas** ; deux sections voisines en
   font un, entier, et il vaut le meme partout. Une seule valeur a retenir,
   96 px sur grand ecran, un multiple de huit comme tout le reste. */
.promevil-section { padding-block: clamp(1.75rem, 3.75vw, 3rem); }

/* Le noyau pose son propre ecart entre blocs freres — vingt-huit pixels — qui
   s'ajoutait au rembourrage et faisait de 96 un 124. Entre deux mouvements, la
   respiration est le rembourrage et rien d'autre. */
.promevil-section + .promevil-section,
.promevil-section + .promevil-ancre,
.promevil-ancre + .promevil-section,
.promevil-ancre + .promevil-ancre { margin-block-start: 0 !important; }


/* Une section sur aplat est une surface : son texte ne peut pas venir toucher
   le bord de la couleur. Elle garde donc un rembourrage plus genereux, et
   c'est l'aplat lui-meme qui fait alors la separation. */
.promevil-section.has-background,
.promevil-section.has-fond-background-color {
  padding-block: clamp(2.75rem, 5.5vw, 4.25rem);
}



/* ==========================================================================
   3 · En-tête
   ========================================================================== */

/* Le contenu vient au contact de l'en-tête : sans cela, l'écart entre blocs
   du gabarit laisse une bande de fond visible au-dessus de la photographie
   d'ancre. */
.wp-site-blocks > main { margin-top: 0 !important; }
.entry-content > .promevil-ancre:first-child { margin-top: 0 !important; }

/* Le collant doit porter sur le `header` du gabarit, pas sur le groupe qu'il
   contient : le bloc conteneur d'un `sticky` est son parent, et ce parent
   faisait exactement la hauteur de l'en-tête. Il collait donc dans une boîte
   de sa propre taille, c'est-à-dire jamais. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 40;
}

.promevil-entete {
  z-index: 40;
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--bordure);
}

/* Le logo : la marque et le mot dessinés, en couleur, tels qu'ils sont dans le
   fichier d'origine. Aucun filtre, jamais, sur aucune page. */
.promevil-logo a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.promevil-logo img { display: block; width: auto; height: 34px; filter: none; }
@media (min-width: 600px) { .promevil-logo img { height: 42px; } }
@media (min-width: 1024px) { .promevil-logo img { height: 46px; } }

/* La signature « Les professionnels de la médiation » ne tient pas dans une
   barre de menu : sous 30 px de haut elle n'est plus lisible. Elle vit dans le
   pied de page, où le logo complet a la place de respirer. */
.promevil-logo__signature { display: none; }

/* La barre tient sur une seule ligne, de 320 px à 1440. Sans `nowrap`, le
   menu et l'appel à l'action passent à la ligne dès 390 px et l'en-tête double
   de hauteur. */
.promevil-entete > .alignwide { flex-wrap: nowrap; gap: .6rem; }
.promevil-entete > .alignwide > .wp-block-group:last-child { flex-wrap: nowrap; gap: .5rem; }
@media (min-width: 600px) {
  .promevil-entete > .alignwide { gap: 1rem; }
  .promevil-entete > .alignwide > .wp-block-group:last-child { gap: .9rem; }
}

/* Le voile de navigation du noyau bascule à 600 px. Or sept entrées, dont
   deux sous-menus, plus le logo et un bouton, ne tiennent sur une ligne qu'à
   partir de 1 120 px : en deçà, la barre passait à deux étages. On garde donc
   le menu replié jusque-là. Un menu replié à 1 000 px n'a rien d'anormal pour
   une navigation de cette densité. */
@media (max-width: 1119px) {
  .promevil-entete .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .promevil-entete .wp-block-navigation__responsive-container-open { display: flex; }
}

/* Sur téléphone, l'appel à l'action de l'en-tête s'efface : celui de
   l'accroche est à un demi-écran de là, et la barre reste lisible. */
@media (max-width: 599px) { .promevil-entete .promevil-cta-entete { display: none; } }

@media (min-width: 1120px) {
  .promevil-entete .wp-block-navigation { gap: 1.15rem; }
  .promevil-entete .wp-block-navigation .wp-block-navigation__container { gap: 1.15rem; }
}

.promevil-entete .wp-block-navigation a { font-weight: 600; text-decoration: none; }
/* Le survol prend le vert du site — demande du 24 août ; les boutons
   « Parlons de vos enjeux » gardent leurs propres états. */
.promevil-entete .wp-block-navigation a:hover,
.promevil-entete .wp-block-navigation a:focus-visible {
  color: var(--wp--preset--color--vert-texte);
}
.promevil-entete .wp-block-navigation__container > li > a { padding-block: .35rem; }
/* Le chevron de sous-menu du noyau fait 10 px : sous le seuil de 24 px de la
   norme. On lui donne la taille d'une cible. */
/* La règle du noyau porte deux classes : il faut au moins autant de poids. */
.promevil-entete .wp-block-navigation .wp-block-navigation__submenu-icon {
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Cibles tactiles : quarante-quatre pixels, y compris pour un lien de menu. */
.wp-block-navigation__container a { min-height: 44px; display: flex; align-items: center; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Le menu replié -----------------------------------------------------
   Refait entièrement. Le voile du noyau hérite de la barre : alignement à
   droite, écart entre blocs de 28 px répété à chaque niveau, et un rembourrage
   de 56 px en tête du contenu qui s'ajoutait à la marge du dialogue. Résultat,
   trois espaces fantômes et des entrées qui tombaient hors de l'écran.

   Le parti pris ici est celui d'une feuille pleine page : une barre de
   fermeture fixée en haut, des rangées de 56 px alignées sur un bord gauche
   unique, les sous-menus dépliés et indentés, un filet entre les groupes.
   Aucun écart flottant : le rythme vient de la hauteur des rangées. */

.wp-block-navigation__responsive-container.is-menu-open {
  padding: 0 !important;
  background: var(--wp--preset--color--base);
  gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close {
  max-width: none;
  padding: 0;
  gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog {
  margin-top: 0 !important;
  gap: 0 !important;
}

/* La barre de fermeture : une hauteur connue, un filet dessous, et le contenu
   qui commence exactement en dessous. C'est ce qui supprime le grand vide. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  top: 12px;
  right: 14px;
  color: var(--wp--preset--color--encre);
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  width: 100%;
  padding-top: 68px !important;
  gap: 0 !important;
  border-top: 0;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 68px;
  border-top: 1px solid var(--wp--preset--color--bordure);
}

/* La liste : un bloc, sans écart, avec une gouttière de page. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  display: block !important;
  width: 100%;
  gap: 0 !important;
  padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Une entrée de premier niveau : une rangée pleine largeur, un filet dessous. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item {
  display: block !important;
  width: 100%;
  gap: 0 !important;
  border-bottom: 1px solid var(--wp--preset--color--bordure);
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:last-child {
  border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item > a {
  display: flex !important;
  width: 100% !important;
  min-height: 56px;
  padding: 0 !important;
  justify-content: flex-start !important;
  text-align: left !important;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--wp--preset--color--encre);
}

/* Un sous-menu : toujours déplié, indenté, sans le moindre rembourrage
   hérité. Replier un second niveau sur un téléphone n'aide personne. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  position: static !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  min-width: 0 !important;
  border: 0;
  border-left: 2px solid var(--wp--preset--color--vert-pale);
  border-radius: 0;
  margin: 0 0 .7rem !important;
  padding: 0 0 0 .95rem !important;
  background: transparent;
  box-shadow: none;
  gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block !important;
  width: 100% !important;
  border: 0;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
  display: flex !important;
  width: 100% !important;
  min-height: 48px;
  padding: 0 !important;
  justify-content: flex-start !important;
  text-align: left !important;
  font-size: .98rem;
  font-weight: 500;
  color: var(--wp--preset--color--gris);
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
  color: var(--wp--preset--color--vert-texte);
}

/* Le bouton de dépliage n'a plus d'objet quand tout est déplié, et il tenait
   une rangée entière de 56 px entre chaque parent et ses enfants. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle { display: none !important; }


@media (max-width: 479px) { .promevil-cta-entete .wp-block-button__link { padding: .58rem .85rem; } }


/* ==========================================================================
   4 · Boutons
   ========================================================================== */

/* Le bouton plein garde son vert au repos, et prend le bordeaux au survol —
   le même geste que le bouton à contour et que les liens du texte. Seul l'état
   survolé change de couleur. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bordeaux);
  color: #fff;
}

.wp-block-button__link {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--pv-transition), color var(--pv-transition);
}

/* Sur un téléphone, deux boutons de largeurs différentes empilés font
   désordre, et la cible est moins sûre. */
.wp-block-buttons .wp-block-button,
.wp-block-buttons .wp-block-button__link { width: 100%; }
@media (min-width: 480px) {
  .wp-block-buttons .wp-block-button,
  .wp-block-buttons .wp-block-button__link { width: auto; }
}

/* L'en-tête fait exception : son bouton garde sa largeur naturelle. */
.promevil-entete .promevil-cta-entete .wp-block-button,
.promevil-entete .promevil-cta-entete .wp-block-button__link { width: auto; }
.promevil-entete .promevil-cta-entete .wp-block-button__link {
  font-size: .875rem; padding: .62rem 1.05rem;
}
@media (max-width: 419px) {
  .promevil-entete .promevil-cta-entete .wp-block-button__link {
    font-size: .8rem; padding: .58rem .78rem;
  }
}

/* Le style « contour ». Sans cette règle, la couleur de fond déclarée dans
   theme.json l'emporte et les deux boutons d'un appel à l'action se
   ressemblent. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--encre);
  border: 1.5px solid var(--wp--preset--color--bordure);
  box-shadow: none;
}
/* Au survol, le contour prend le bordeaux plutôt que l'encre : c'est la
   couleur que les liens du texte prennent déjà, le geste est le même. */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wp--preset--color--bordeaux);
  color: #fff;
  border-color: var(--wp--preset--color--bordeaux);
}
/* Sur une photographie ou un aplat sombre, le contour passe en blanc. */
.promevil-sur-photo .wp-block-button.is-style-outline > .wp-block-button__link,
.has-encre-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
  color: #fff; border-color: rgba(255, 255, 255, .45);
}
.promevil-sur-photo .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-encre-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: #fff; color: var(--wp--preset--color--encre); border-color: #fff;
}


/* ==========================================================================
   5 · Le motif : ancre photographique et carte chevauchante
   ========================================================================== */

/* Pas de rembourrage haut : la photographie touche le bord, c'est la figure
   meme. En bas, l'ancre porte sa moitie de l'ecart comme les sections, sinon
   celle qui la suit se retrouve deux fois plus pres qu'ailleurs. */
.promevil-ancre {
  padding-inline: 0 !important;
  padding-block: 0 clamp(1.75rem, 3.75vw, 3rem);
}
/* Une ancre qui ouvre la page colle a l'en-tete : sa photographie est la
   premiere chose qu'on voit. Une ancre qui suit un mouvement porte, elle, sa
   moitie d'ecart en haut comme les autres. */
:where(.promevil-section, .promevil-ancre) + .promevil-ancre {
  padding-top: clamp(1.75rem, 3.75vw, 3rem);
}

.promevil-ancre__vue { padding: 0; }
.promevil-ancre__vue img,
.promevil-ancre__vue .wp-block-image {
  margin: 0; width: 100%; display: block;
}
.promevil-ancre__vue img {
  height: clamp(200px, 34vh, 300px);
  object-fit: cover;
}

/* ---- Le credit photographique -----------------------------------------
   Promevil a acquis les droits du reportage, pas sa paternite : le nom du
   photographe doit suivre chaque image, en metadonnee et en legende. On le
   pose en filigrane dans l'angle de la photographie, a la maniere de la
   presse : lisible pour qui le cherche, muet pour qui lit la page.

   Le voile derriere le texte n'est pas decoratif : sans lui, un credit blanc
   tombe a moins de 3:1 des qu'il croise un ciel ou un mur clair. */
.promevil-ancre__vue { position: relative; }
.promevil-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: .3rem .7rem;
  background: rgba(43, 48, 59, .62);
  color: rgba(255, 255, 255, .92);
  /* Douze pixels au minimum, seuil de lisibilite retenu pour tout le site :
     un credit illisible ne credite personne. */
  font-size: .78rem;
  letter-spacing: .01em;
  border-top-left-radius: var(--pv-rayon-petit);
}
@media (max-width: 599px) { .promevil-credit { padding: .25rem .55rem; } }
/* A l'impression, la photographie disparait : le credit avec elle. */
@media print { .promevil-credit { display: none; } }

.promevil-carte {
  position: relative;
  z-index: 5;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: var(--pv-rayon);
  padding: 1.4rem 1.25rem;
  margin-top: -38px;
  margin-inline: var(--wp--preset--spacing--30) !important;
  box-shadow: var(--pv-ombre);
}
@media (min-width: 782px) {
  .promevil-ancre__vue img { height: clamp(340px, 52vh, 540px); }
  .promevil-carte {
    padding: clamp(1.8rem, 3.4vw, 2.8rem);
    margin-top: -92px;
    max-width: 820px;
  }
  .promevil-carte--gauche { margin-inline: 0 auto !important; }
  .promevil-carte--droite { margin-inline: auto 0 !important; }
}
/* La carte et la feuille sont deux surfaces de même famille : elles se calent
   sur le bord de la grille et rentrent leur texte du même rembourrage, si bien
   que le chapô de l'accroche tombe exactement au-dessus du corps des feuilles
   qui suivent. */
@media (min-width: 1240px) {
  .promevil-carte--gauche { margin-inline: max(0px, calc((100% - var(--pv-colonne)) / 2)) auto !important; }
  .promevil-carte--droite { margin-inline: auto max(0px, calc((100% - var(--pv-colonne)) / 2)) !important; }
}

.promevil-carte > :first-child { margin-top: 0; }
.promevil-carte h1 { margin-bottom: .6rem; }
.promevil-carte h2 { margin-bottom: .5rem; }

/* Rail de légende : la note reste collée pendant que le contenu défile. */
.promevil-avec-legende { align-items: flex-start; }
.promevil-legende-rail {
  font-size: .8rem; line-height: 1.6;
  color: var(--wp--preset--color--gris);
  border-top: 2px solid var(--wp--preset--color--vert);
  padding-top: .6rem;
}
.promevil-legende-rail strong {
  display: block;
  color: var(--wp--preset--color--encre);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .3rem;
}
@media (min-width: 782px) {
  .promevil-legende-rail { position: sticky; top: 92px; }
}


/* ==========================================================================
   6 · Accroche des pages intérieures
   ========================================================================== */

.promevil-hero {
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--bordure);
  padding-block: clamp(2.2rem, 7vw, 4rem);
}
.promevil-hero__inner > * { margin-inline: 0 !important; }
.promevil-hero h1 { margin-block: .7rem .8rem; }
@media (min-width: 782px) { .promevil-hero h1 { max-width: 18ch; } }
.promevil-hero__lede {
  font-size: 1.06rem;
  color: var(--wp--preset--color--gris);
}
@media (min-width: 782px) {
  .promevil-hero__lede { font-size: 1.15rem; max-width: 62ch; }
}

/* Variante illustrée : la même accroche, posée sur une photographie. */
.promevil-hero--photo { position: relative; overflow: hidden; border-bottom: 0; }
.promevil-hero--photo img.promevil-hero__fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; margin: 0;
}
.promevil-hero--photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43, 48, 59, .58), rgba(43, 48, 59, .82));
}
.promevil-hero--photo .promevil-hero__inner { position: relative; z-index: 3; }
.promevil-hero--photo h1 { color: #fff; }
.promevil-hero--photo .promevil-hero__lede { color: rgba(255, 255, 255, .88); }
.promevil-hero--photo .promevil-eyebrow { color: var(--wp--preset--color--vert); }


/* ==========================================================================
   7 · Sections et surtitres
   ========================================================================== */

/* Le rembourrage vertical est fixe plus haut, avec les regles de couture. */
.promevil-section.has-background { background-color: var(--wp--preset--color--base); }
.promevil-section.has-fond-background-color { background-color: var(--wp--preset--color--vert-pale); }

.promevil-eyebrow {
  font-size: .75rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; line-height: 1.45;
  color: var(--wp--preset--color--vert);
  margin-bottom: .5rem;
}
.promevil-eyebrow--sombre { color: var(--wp--preset--color--vert-texte); }

.promevil-colonne > h2 { margin-bottom: .7rem; }
.promevil-colonne > h2 + p { margin-top: 0; }
.promevil-colonne > * + :where(.promevil-cartes, .wp-block-columns, .promevil-metiers) {
  margin-top: var(--wp--preset--spacing--40);
}

/* Un titre qui porte un lien est la cible de sa carte, au meme titre que le
   titre d'une porte : il lui faut les quarante-quatre pixels de la norme, meme
   si le trait de texte n'en fait que vingt. Les liens poses en pleine phrase
   n'ont pas cette contrainte : la norme les dispense, leur taille etant fixee
   par l'interligne du texte qui les entoure. */
.entry-content :where(h1, h2, h3, h4) > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}
.entry-content :where(h1, h2, h3, h4) > a:only-child:hover,
.entry-content :where(h1, h2, h3, h4) > a:only-child:focus-visible {
  color: var(--wp--preset--color--vert-texte);
}

.promevil-lien {
  font-weight: 700;
  font-size: .95rem;
}
/* Un paragraphe qui ne contient qu'un lien est un bouton déguisé : c'est une
   cible autonome, pas un lien en ligne, et la norme lui demande 24 px au
   minimum. On lui en donne 44. */
.entry-content p > a:only-child:not(.promevil-a-en-ligne) {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Une cible de pointeur fait au moins 44 px de haut, y compris quand c'est un
   simple lien de fin de carte. */
.promevil-lien a {
  text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.promevil-lien a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Les liens ------------------------------------------------------------

   Un seul dessin de lien sur tout le site : bordeaux au repos, encre et
   souligne au survol. Le soulignement au survol seul est un choix assume — il
   dit que la cible repond, la ou une couleur seule ne dit rien de tel — et la
   couleur suffit au repos parce qu'aucun autre texte du site n'est bordeaux
   depuis que le gras est passe au vert. */
.entry-content a,
.promevil-lien a,
.promevil-porte p.promevil-porte__fleche a {
  color: var(--wp--preset--color--vert-texte);
  text-decoration: none;
}
.entry-content a:hover,
.entry-content a:focus-visible,
.promevil-lien a:hover,
.promevil-lien a:focus-visible,
.promevil-porte p.promevil-porte__fleche a:hover,
.promevil-porte p.promevil-porte__fleche a:focus-visible {
  color: var(--wp--preset--color--encre);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Les boutons ne sont pas des liens : la couleur des liens ne les traverse
   pas. Leurs propres etats — vert au repos, bordeaux au survol — sont regles
   plus haut, et le soulignement n'y entre jamais. */
a.wp-block-button__link {
  color: var(--wp--preset--color--encre);
  text-decoration: none !important;
}

/* La fleche marque le lien qui **mene ailleurs** : celui qui occupe son
   paragraphe a lui seul, comme « Voir notre offre → ». Un lien pris au fil
   d'une phrase n'en prend pas : elle couperait la ligne. Posee en pseudo, elle
   ne s'ajoute jamais deux fois, meme si le texte la porte deja. */
/* La fleche est posee hors flux : le soulignement du survol ne se propage
   jamais aux boites en absolu — seul le texte se souligne, dans tous les
   navigateurs (l'inline-block ne suffisait pas sur un lien en flex). Le
   retrait droit du lien lui reserve sa place, avec un peu d'air. */
.entry-content p > a:only-child:not([href^="#"]):not(.promevil-a-en-ligne),
.promevil-lien a,
.promevil-porte p.promevil-porte__fleche a {
  position: relative;
  padding-right: 1.35em;
}
.entry-content p > a:only-child:not([href^="#"]):not(.promevil-a-en-ligne)::after,
.promevil-lien a::after,
.promevil-porte p.promevil-porte__fleche a::after {
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* ==========================================================================
   7 bis · La feuille
   ==========================================================================
   Le défaut mesuré sur les pages de prose : vingt-trois éléments de texte sur
   trente-quatre tenaient dans 729 px au milieu d'une colonne de 1 180, soit
   451 px de vide à droite sur toute la hauteur de la page. Le contenu était une
   bande étroite collée à gauche. Les titres, bornés à 24 caractères, étaient
   **plus étroits que leurs propres paragraphes**, ce qui rend tout bloc bancal.
   Et rien n'était posé sur une surface, alors que le principe 2 en tête de
   cette feuille demande des surfaces blanches sur le fond vert pâle.

   La feuille corrige les trois d'un coup. Elle occupe la grille entière, elle
   est blanche, et à l'intérieur elle sépare le titre du corps : le titre passe
   en marge et suit le défilement, le corps garde sa mesure de lecture. Le vide
   qui traînait dehors devient la respiration intérieure d'une page posée sur
   la table.

   C'est le rail de l'accueil, promu au rang de figure principale de lecture. */

.promevil-feuille {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: var(--pv-rayon);
  box-shadow: var(--pv-ombre-douce);
  padding: 1.4rem 1.25rem;
}
/* Le même rembourrage que la carte chevauchante, au pixel : les deux surfaces
   rentrent leur texte d'autant, et tout ce que la page écrit tombe sur un seul
   bord gauche. */
@media (min-width: 782px) {
  .promevil-feuille { padding: clamp(1.8rem, 3.4vw, 2.8rem); }
}
.promevil-feuille + .promevil-feuille { margin-top: var(--wp--preset--spacing--30); }

/* Le filet vert du rail, repris tel quel : c'est la signature de la marge. */
.promevil-feuille__tete > :where(h2, h3) {
  margin: 0;
  max-width: none;
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.2;
}
/* La mesure de lecture est portee par la colonne, a toutes les largeurs :
   sans elle, entre la bascule des colonnes du noyau et celle de la feuille,
   le paragraphe montait a quatre-vingts caracteres par ligne. */
.promevil-feuille__corps { max-width: 44rem; }
.promevil-feuille__corps > :first-child { margin-top: 0; }
.promevil-feuille__corps > :last-child { margin-bottom: 0; }
.promevil-feuille__corps > * + * { margin-top: 1.05em; }

/* Sous 1 080 px, le titre reprend sa place et sa taille au-dessus du texte :
   une marge de 260 px n'a pas de sens sur une tablette. */
@media (max-width: 1079px) {
  .promevil-feuille__tete { margin-bottom: 1rem; }
  .promevil-feuille__tete > :where(h2, h3) {
    font-size: var(--wp--preset--font-size--xx-large);
    line-height: 1.14;
  }
}

@media (min-width: 1080px) {
  .promevil-feuille {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    column-gap: clamp(2rem, 3.6vw, 3.25rem);
    align-items: start;
  }
  .promevil-feuille__tete {
    position: sticky;
    top: 104px;
    /* Le filet d'un titre appartient a la voix du site, comme celui du rail :
       le vert reste aux surfaces. */
    border-top: 2px solid var(--wp--preset--color--bordeaux);
    padding-top: .75rem;
  }
  /* La mesure de lecture est portée par la colonne, plus par chaque bloc :
     un seul bord droit pour tout le corps, listes et encadrés compris. */
  .promevil-feuille__corps > * { max-width: none; }
}

/* Une grille de cartes réclame toute la largeur : la feuille pleine renonce à
   sa colonne de marge et pose son titre au-dessus. */
.promevil-feuille--pleine { display: block; }
.promevil-feuille--pleine .promevil-feuille__tete {
  position: static;
  border-top: 0;
  padding-top: 0;
  margin-bottom: 1.1rem;
}
.promevil-feuille--pleine .promevil-feuille__tete > :where(h2, h3) {
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.14;
}
.promevil-feuille--pleine .promevil-feuille__corps { max-width: none; }

/* Posées dans une feuille, les cartes se distinguent du blanc par le vert
   pâle : un cadre blanc sur fond blanc ne se voit pas. */
.promevil-feuille .promevil-card {
  background: var(--wp--preset--color--fond);
  border-color: var(--wp--preset--color--bordure);
}

/* Une bande qui ne porte que des feuilles n'a plus besoin de son propre
   aplat : ce sont les feuilles qui font les surfaces, et le fond vert pâle de
   la page fait la respiration entre elles. */
.promevil-section.promevil-section--feuilles { background-color: transparent; }
.promevil-section--feuilles > .promevil-colonne > * { max-width: none; }


/* ==========================================================================
   8 · Cartes
   ==========================================================================

   La règle de proximité : ce qui appartient au même objet se touche plus que
   les objets entre eux. Un titre et le texte qu'il annonce sont un seul objet ;
   ils se serrent à huit pixels, quand la carte qui les contient se rembourre à
   vingt-quatre et que deux cartes s'écartent d'autant.
   ========================================================================== */

/* Le bloc de WordPress pose son écart de vingt-quatre pixels entre tous les
   frères d'une carte, titre compris : la carte se lisait comme une liste de
   morceaux au lieu d'un bloc. */
/* `!important` a contrecoeur, comme deux fois deja dans cette feuille : les
   styles globaux de WordPress posent leur ecart de bloc avec une specificite
   que rien de raisonnable ne depasse. Envelopper les classes dans `:where()`
   annulerait la notre. */
/* Un titre appartient au texte qu'il annonce. L'ecart sous lui vaut la moitie
   de son corps — seize pixels sous un titre de section, huit sous un titre de
   carte — et reste donc toujours plus petit que les vingt-quatre pixels qui le
   separent de ce qui precede. La proximite se lit alors sans effort : le titre
   va avec ce qui suit, pas avec ce qui precede. */
.entry-content :where(h1, h2, h3, h4, h5, h6) { margin-bottom: .5em; }
.entry-content :where(h1, h2, h3, h4, h5, h6) + * {
  margin-block-start: 0 !important;
}
/* Deux paragraphes d'un meme bloc restent plus proches que deux blocs. */
.promevil-card > :where(p, ul, ol) + :where(p, ul, ol),
.promevil-porte > :where(p, ul, ol) + :where(p, ul, ol),
.promevil-metier > :where(p, ul, ol) + :where(p, ul, ol),
.promevil-chiffre-case > :where(p) + :where(p) {
  margin-block-start: 16px !important;
}
/* La fleche fait exception : elle se cale au bas de la porte pour que les
   quatre s'alignent, quel que soit le nombre de lignes au-dessus. L'ecart
   fixe ci-dessus annulait son `auto` et les laissait flotter. Le rembourrage
   tient lieu de plancher quand il n'y a pas d'espace libre a distribuer. */
.promevil-porte > .promevil-porte__fleche {
  margin-block-start: auto !important;
  padding-top: 1rem;
}

/* `auto-fill` ouvre toutes les pistes que la largeur permet, garnies ou non :
   trois cartes dans une colonne de 1 180 px se calaient sur trois pistes de
   quatre et laissaient un vide de 325 px à droite. `auto-fit` replie les
   pistes vides, et les cartes présentes prennent toute la mesure. */
.promevil-cartes {
  /* Les cartes interrogent la largeur de leur grille pour savoir combien de
     colonnes elles forment : c'est ce qui rend le damier juste, qu'elle soit
     en pleine page ou serree dans une carte d'ancre. Le conteneur interroge
     est le PARENT de la grille, pas la grille (voir plus bas) : WebKit, donc
     Safari sur iPhone et sur Mac, posait toutes les cartes a zero de large
     des que la grille etait a la fois conteneur de taille et en `auto-fit`
     (constate le 3 septembre 2026, reproduit avec le WebKit de Playwright). */
  display: grid;
  /* La gouttière vaut le
     rembourrage : deux cartes s'écartent autant qu'une carte respire
     dedans, jamais moins. */
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Sous 600 px, une seule colonne, meme dans une carte d'ancre plus etroite
   que 280 px : la borne `min(100%, 280px)` qui le faisait est retiree, WebKit
   ne la resout pas dans un conteneur. */
@media (max-width: 599px) { .promevil-cartes { grid-template-columns: 1fr; } }
/* Le parent de la grille — colonne de rail, colonne de section ou carte
   d'ancre — porte le conteneur que les regles `@container` du damier
   interrogent. Sa boite de contenu a la largeur de la grille. */
:has(> .promevil-cartes) { container-type: inline-size; }

/* Le remplissage automatique laisse une carte orpheline dès que le nombre de
   cartes n'est pas un multiple du nombre de pistes : cinq cartes dans quatre
   pistes, trois dans deux. Ces deux variantes fixent le nombre de colonnes là
   où le compte est connu au montage. */
.promevil-cartes--trio { grid-template-columns: 1fr; }
@media (min-width: 600px) { .promevil-cartes--trio { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .promevil-cartes--trio { grid-template-columns: repeat(3, 1fr); } }

.promevil-cartes--duo { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .promevil-cartes--duo { grid-template-columns: 1fr 1fr; }
  /* Une carte seule sur sa rangée prend les deux colonnes : sinon elle laisse
     un demi-vide qui se lit comme un oubli. */
  .promevil-cartes--duo > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* La carte d'appel vit desormais au fil de la grille (position 5, demande
   du 25 aout) : plus d'ordre force. */

/* Cas d'usage : le lien de chaque carte se cale en bas a droite, a la meme
   hauteur sur toute la rangee. Le `!important` répond a celui des regles de
   disposition du noyau, qui ecrasent les marges des enfants. Le texte du
   lien s'aligne au bas de sa cible de 44 px : la marge sous le lien vaut
   ainsi le padding de la carte, comme au-dessus du titre. */
.page-id-17 .promevil-cartes > .promevil-card { display: flex; flex-direction: column; }
/* La classe doublee : la contre-mesure du gabarit (« le bord gauche unique »)
   cale les enfants a gauche par `margin-inline !important` avec quatre
   classes de poids — il en faut cinq pour la depasser et pousser a droite. */
.page-id-17 .promevil-cartes .promevil-card .promevil-lien.promevil-lien {
  margin-block-start: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-top: .5rem;
  align-self: flex-end;
  text-align: right;
}
/* Dans toutes les cartes, le texte du lien se cale au bas de sa cible de
   44 px : le vide sous le lien devient previsible, et la fleche — centree
   par la regle commune, donc trop haute — descend a la ligne du texte. */
.promevil-card .promevil-lien a,
.promevil-metier .promevil-lien a {
  align-items: flex-end;
}
.promevil-card .promevil-lien a::after,
.promevil-metier .promevil-lien a::after {
  top: auto !important;
  /* cale optique : la ligne de base de la fleche rejoint celle du texte */
  bottom: .45em !important;
  transform: none !important;
}

/* Le noyau pose sa marge de flux (`:root :where(.is-layout-flow) > *`) sur
   les enfants des groupes, grilles comprises : dans une rangee, les cartes
   deux et suivantes descendaient de 28 px et perdaient autant de hauteur —
   trois cartes cote a cote n'avaient pas la meme taille. La classe doublee
   passe devant la regle du noyau quelle que soit l'ordre des feuilles. */
.promevil-cartes.promevil-cartes > *,
.promevil-metiers.promevil-metiers > * {
  margin-block-start: 0;
}
/* Le bouton respire sous le titre qui interpelle. En padding : la marge
   serait annulée par les règles de disposition du noyau, posées en
   !important sur les enfants du groupe. */
.promevil-card--appel .wp-block-buttons { padding-top: 1.25rem; }

.promevil-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: var(--pv-rayon);
  padding: 24px;
  transition: border-color var(--pv-transition), box-shadow var(--pv-transition);
}
.promevil-card:hover { border-color: var(--wp--preset--color--vert); box-shadow: var(--pv-ombre-douce); }
.promevil-card > :first-child { margin-top: 0; }
.promevil-card > :last-child { margin-bottom: 0; }
.promevil-card :where(h2, h3) { font-size: 1.06rem; margin-bottom: .4rem; }
.promevil-card p { color: var(--wp--preset--color--gris); font-size: .96rem; }
/* Le lien d'action qui clot une carte — « Voir la page collectivites » — se
   distingue du corps. Mais il doit etre **seul** dans son paragraphe : ecrite
   sans cette condition, la regle prenait aussi un paragraphe de texte dont la
   derniere phrase citait un partenaire en lien, et passait le pave entier en
   gras vert. C'est ce qu'on voyait sur deux cartes d'Entreprises. */
.promevil-card p:last-child:has(> a:only-child) {
  font-weight: 700;
  color: var(--wp--preset--color--vert-texte);
}
/* --- Le damier ------------------------------------------------------------

   Une carte prend l'aplat quand la somme de sa ligne et de sa colonne est
   paire. Traduit en `nth-child`, cela fait une formule par nombre de colonnes ;
   les seuils sont ceux de `auto-fit` sur des pistes de 280 px separees de 24.

     1 colonne  : 1, 3, 5...     une sur deux
     2 colonnes : 1, 4, 5, 8...  la diagonale
     3 colonnes : 1, 3, 5...     une sur deux
     4 colonnes : 1, 3, 6, 8...  la diagonale a quatre pistes

   Chaque grille declare sa famille ; la carte ne fait que choisir entre
   l'aplat de cette famille et le blanc. */
.promevil-cartes {
  --pv-aplat: var(--wp--preset--color--vert-pale);
  --pv-aplat-bord: #DCEBDA;
  --pv-aplat-titre: var(--wp--preset--color--encre);
}
.promevil-cartes--bordeaux {
  --pv-aplat: var(--wp--preset--color--bordeaux-pale);
  --pv-aplat-bord: #E8D3D7;
  /* Un titre est toujours noir. La couleur y aurait fait un troisieme signal,
     apres le vert de l'appui et le bordeaux du lien, et un titre n'est ni l'un
     ni l'autre : c'est une entree, et sa taille suffit a le dire. */
  --pv-aplat-titre: var(--wp--preset--color--encre);
}

.promevil-cartes > .promevil-card {
  background: var(--pv-fond, var(--wp--preset--color--base));
  border-color: var(--pv-filet, var(--wp--preset--color--bordure));
}
.promevil-cartes > .promevil-card :where(h2, h3, h4) {
  color: var(--pv-titre-carte, var(--wp--preset--color--encre));
}

/* --- une colonne ---------------------------------------------------------- */
.promevil-cartes > .promevil-card:nth-child(2n + 1 of .promevil-card) {
  --pv-fond: var(--pv-aplat);
  --pv-filet: var(--pv-aplat-bord);
  --pv-titre-carte: var(--pv-aplat-titre);
}

/* --- deux colonnes -------------------------------------------------------- */
@container (min-width: 584px) {
  .promevil-cartes > .promevil-card:nth-child(n of .promevil-card) {
    /* `initial` rend la variable « invalide garantie » : le `var()` retombe
       alors sur sa valeur de repli. Une valeur vide, elle, ferait tomber la
       declaration entiere. */
    --pv-fond: initial; --pv-filet: initial; --pv-titre-carte: initial;
  }
  .promevil-cartes > .promevil-card:nth-child(4n + 1 of .promevil-card),
  .promevil-cartes > .promevil-card:nth-child(4n + 4 of .promevil-card) {
  --pv-fond: var(--pv-aplat);
  --pv-filet: var(--pv-aplat-bord);
  --pv-titre-carte: var(--pv-aplat-titre);
  }
}

/* --- trois colonnes ------------------------------------------------------- */
@container (min-width: 888px) {
  .promevil-cartes > .promevil-card:nth-child(n of .promevil-card) {
    /* `initial` rend la variable « invalide garantie » : le `var()` retombe
       alors sur sa valeur de repli. Une valeur vide, elle, ferait tomber la
       declaration entiere. */
    --pv-fond: initial; --pv-filet: initial; --pv-titre-carte: initial;
  }
  .promevil-cartes > .promevil-card:nth-child(2n + 1 of .promevil-card) {
  --pv-fond: var(--pv-aplat);
  --pv-filet: var(--pv-aplat-bord);
  --pv-titre-carte: var(--pv-aplat-titre);
  }
}

/* --- quatre colonnes ------------------------------------------------------ */
@container (min-width: 1192px) {
  .promevil-cartes > .promevil-card:nth-child(n of .promevil-card) {
    /* `initial` rend la variable « invalide garantie » : le `var()` retombe
       alors sur sa valeur de repli. Une valeur vide, elle, ferait tomber la
       declaration entiere. */
    --pv-fond: initial; --pv-filet: initial; --pv-titre-carte: initial;
  }
  .promevil-cartes > .promevil-card:nth-child(8n + 1 of .promevil-card),
  .promevil-cartes > .promevil-card:nth-child(8n + 3 of .promevil-card),
  .promevil-cartes > .promevil-card:nth-child(8n + 6 of .promevil-card),
  .promevil-cartes > .promevil-card:nth-child(8n + 8 of .promevil-card) {
  --pv-fond: var(--pv-aplat);
  --pv-filet: var(--pv-aplat-bord);
  --pv-titre-carte: var(--pv-aplat-titre);
  }
}

/* Les deux variantes a nombre de colonnes fixe se reglent a la fenetre et non
   au conteneur : leur compte est decide au montage. */
@media (min-width: 600px) {
  .promevil-cartes--duo > .promevil-card:nth-child(n of .promevil-card),
  .promevil-cartes--trio > .promevil-card:nth-child(n of .promevil-card) {
    /* `initial` rend la variable « invalide garantie » : le `var()` retombe
       alors sur sa valeur de repli. Une valeur vide, elle, ferait tomber la
       declaration entiere. */
    --pv-fond: initial; --pv-filet: initial; --pv-titre-carte: initial;
  }
  .promevil-cartes--duo > .promevil-card:nth-child(4n + 1 of .promevil-card),
  .promevil-cartes--duo > .promevil-card:nth-child(4n + 4 of .promevil-card),
  .promevil-cartes--trio > .promevil-card:nth-child(4n + 1 of .promevil-card),
  .promevil-cartes--trio > .promevil-card:nth-child(4n + 4 of .promevil-card) {
  --pv-fond: var(--pv-aplat);
  --pv-filet: var(--pv-aplat-bord);
  --pv-titre-carte: var(--pv-aplat-titre);
  }
}
@media (min-width: 900px) {
  .promevil-cartes--trio > .promevil-card:nth-child(n of .promevil-card) {
    /* `initial` rend la variable « invalide garantie » : le `var()` retombe
       alors sur sa valeur de repli. Une valeur vide, elle, ferait tomber la
       declaration entiere. */
    --pv-fond: initial; --pv-filet: initial; --pv-titre-carte: initial;
  }
  .promevil-cartes--trio > .promevil-card:nth-child(2n + 1 of .promevil-card) {
  --pv-fond: var(--pv-aplat);
  --pv-filet: var(--pv-aplat-bord);
  --pv-titre-carte: var(--pv-aplat-titre);
  }
}


/* La grille dit la teinte de ses cartes fortes. Deux familles seulement, et
   jamais deux grilles de suite dans la même : une page qui alterne se lit
   comme une page rythmée, une page qui répète se lit comme une page unie.
   Les grilles à images gardent le blanc — une photographie apporte déjà sa
   couleur, un aplat sous elle en ferait deux. */


/* Une carte dans une colonne du noyau doit occuper toute la hauteur, sinon la
   rangée se déséquilibre dès que les textes ont des longueurs différentes. */
.wp-block-column > .promevil-card { height: 100%; }


/* Les portraits de la gouvernance. Une grille de carrés, `auto-fill` et non
   `auto-fit` : à deux portraits, `auto-fit` étirerait chaque visage sur une
   demi-largeur. Les pistes vides gardent les carrés à leur taille. */
.promevil-portraits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 1.1rem;
  margin-top: .9rem;
}
.promevil-portraits > * { margin-block-start: 0; }

.promevil-portrait { margin: 0; }
.promevil-portrait figure { margin: 0; }
.promevil-portrait img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--pv-rayon);
}
.promevil-portrait img {
  display: block;
  object-fit: cover;
  border: 1px solid var(--wp--preset--color--bordure);
}


.promevil-portrait__qui {
  margin: .5rem 0 0;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--wp--preset--color--gris);
}
/* Le nom reste dans le fil de la phrase : le passer en bloc rejetait la
   virgule en tete de la ligne suivante, ou elle se lisait comme une coquille. */
/* Le nom du portrait suit la règle du nom du témoignage, section 12. */

/* Une prestation, c'est un intitulé puis son explication. Les mettre à la
   suite sur la même ligne donnait un pavé où l'œil ne trouvait plus les
   intitulés : l'intitulé prend donc sa ligne.

   Le marqueur natif de la liste est retiré. Sans cela il s'ajoutait à la puce
   verte et l'on voyait deux points de couleurs différentes côte à côte. */
.promevil-liste {
  list-style: none;
  margin-top: .9rem;
  padding-left: 0;
}
.promevil-liste li {
  position: relative;
  padding-left: 1.25rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--wp--preset--color--gris);
}
.promevil-liste li + li {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--wp--preset--color--bordure);
}
.promevil-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  /* La puce prend la couleur de l'aplat qui la porte : verte dans une grille
     verte, bordeaux dans une grille bordeaux. Elle appartient a la surface,
     pas a la voix — sur une grille ou deux cartes sur trois sont vertes, une
     puce bordeaux se lisait comme un lien. */
  background: var(--pv-puce, var(--wp--preset--color--vert-texte));
}
.promevil-cartes--bordeaux { --pv-puce: var(--wp--preset--color--bordeaux); }
/* La liste de personnes : des puces noires, sobres — ce sont des noms, pas
   une offre. */
.promevil-liste--encre { --pv-puce: var(--wp--preset--color--encre); }
.promevil-liste--bordeaux { --pv-puce: var(--wp--preset--color--bordeaux); }
/* La bande claire du recit des chantiers : le sombre est reserve au pied. */
.promevil-section--pale { background: var(--wp--preset--color--vert-pale); }
/* Rapprocher un element du titre qui le precede (numero de telephone). */
.promevil-serre { margin-block-start: .35rem !important; }
.promevil-liste li + li::before { top: calc(.6rem + .55em + 1px); }
.promevil-liste li strong {
  display: block;
  color: var(--wp--preset--color--encre);
  font-weight: 700;
  margin-bottom: .15rem;
}

/* Blanc sur le fond de page, filet bordeaux : l'encadré cite une norme, il
   parle au nom du site et non de l'offre. Le vert pâle le confondait avec les
   cartes teintées qui l'entourent. */
/* L'encadre est une surface, pas une voix : aplat vert pale et filet vert.
   Blanc sur un fond presque blanc, il ne se detachait pas ; et son filet
   bordeaux le faisait passer pour une cible. */
.promevil-encadre {
  background: var(--wp--preset--color--vert-pale);
  border: 1px solid #DCEBDA;
  border-left: 3px solid var(--wp--preset--color--vert);
  border-radius: 0 var(--pv-rayon-petit) var(--pv-rayon-petit) 0;
  padding: 1.2rem 1.3rem;
}
/* Posé en fille directe d'une colonne de section, l'encadré prend les
   1 180 px de la bande : la mesure de lecture du thème ne s'applique qu'aux
   paragraphes nus, et celui-ci est enveloppé. On borne donc la boîte. */
@media (min-width: 782px) { .promevil-encadre { max-width: 74ch; } }
.promevil-encadre > :first-child { margin-top: 0; }
.promevil-encadre > :last-child { margin-bottom: 0; }
/* La variante blanche a lisere bordeaux — revue de Thierry du 25 aout
   (encadre AFNOR de l'accueil, references de Transport public). */
.promevil-encadre--blanc {
  background: var(--wp--preset--color--base);
  border-color: #E8D3D7;
  border-left-color: var(--wp--preset--color--bordeaux);
}


/* ---- Les quatre portes -------------------------------------------------
   Le motif « Vous êtes » existait dans le thème depuis le début et n'avait
   jamais été posé sur une page : il n'avait donc pas de règle, et sortait en
   quatre blocs empilés sur 1 180 px.

   Aucune porte n'est mise en avant : c'est au visiteur de se reconnaître. Pas
   de boîte, pas d'ombre, pas de couleur d'accent — un simple filet, comme la
   suite de constats juste en dessous, dont ce motif est le frère. */
.promevil-portes {
  display: grid;
  gap: 0 var(--wp--preset--spacing--30);
}
@media (min-width: 600px) { .promevil-portes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .promevil-portes { grid-template-columns: repeat(4, 1fr); } }

/* Le groupe est en disposition libre : le noyau y pose un ecart entre freres,
   qui en grille devient une marge haute sur toutes les portes sauf la
   premiere. Les trois dernieres descendaient de 24 px et leurs filets ne
   s'alignaient plus. */
.promevil-portes > * { margin-block-start: 0; }

.promevil-porte {
  display: flex;
  flex-direction: column;
  padding-block: 1.2rem;
  border-top: 1px solid var(--wp--preset--color--bordure);
}
.promevil-porte > :first-child { margin-top: 0; }
.promevil-porte__titre { font-size: 1.06rem; margin-bottom: .45rem; }
/* La cible de la porte, c'est « Voir notre offre » et rien d'autre. Le titre
   n'est plus un lien : deux liens vers la meme page, c'est une destination
   annoncee deux fois. Le lien restant prend la hauteur de doigt de la norme,
   quarante-quatre pixels, meme si le trait de texte n'en fait que vingt. */
.promevil-porte__fleche a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}
.promevil-porte__fleche a:hover,
.promevil-porte__fleche a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.promevil-porte p { color: var(--wp--preset--color--gris); font-size: .95rem; }

/* La flèche est la cible : elle prend la hauteur de doigt et vient se coller
   en bas de la porte, pour que les quatre s'alignent quel que soit le nombre
   de lignes de leur description. */
.promevil-porte__fleche {
  margin-top: auto;
  padding-top: .7rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--wp--preset--color--vert-texte);
}


/* ---- Suite de constats, sans encadré -----------------------------------
   Sur des points courts, ce sont les bordures, les angles et les ombres qui
   font le pavé, pas les mots. Un filet suffit à séparer, et rien n'est
   caché : ni dépli, ni carrousel, qui ajouteraient un geste sans alléger. */
.promevil-defis {
  display: grid;
  gap: 0;
  margin-top: 1.4rem;
  border-top: 1px solid var(--wp--preset--color--bordure);
}
@media (min-width: 782px) {
  .promevil-defis { grid-template-columns: 1fr 1fr; column-gap: 2.4rem; }
}
.promevil-defi {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  column-gap: .6rem;
  align-items: baseline;
  /* Le constat s'etire a la hauteur du plus grand de sa rangee. Sans cette
     ligne, ses deux rangees se repartissaient l'espace en trop et le texte
     decrochait du titre de vingt-quatre pixels — sur trois constats de cinq,
     et pas sur les autres. */
  align-content: start;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--wp--preset--color--bordure);
}
.promevil-defi__num {
  grid-row: 1 / span 2;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--wp--preset--color--vert-texte);
  font-variant-numeric: tabular-nums;
}

/* La marque d'un constat : un dessin la ou le numero se tenait, dans la meme
   colonne et sur la meme ligne de base que le titre. Un numero range, un
   dessin designe — et sur une suite qui n'est pas une sequence, l'ordre ne
   voulait rien dire. */
.promevil-defi__marque {
  grid-row: 1 / span 2;
  display: flex;
  justify-content: center;
  /* Cale sur la premiere ligne du titre, pas sur le haut de la rangee : un
     bloc qui ne contient qu'un dessin prend pour ligne de base le bas du
     dessin, et il remontait d'un demi-cran. */
  align-self: start;
  margin-top: .12em;
}
.promevil-defi__marque .promevil-picto {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--wp--preset--color--vert-texte);
}
.promevil-defi h3 { font-size: 1.02rem; margin: 0; }
.promevil-defi__txt {
  grid-column: 2;
  margin-top: .25rem;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--wp--preset--color--gris);
}


/* ---- Dépli natif ------------------------------------------------------
   Le bloc « Détails » du noyau, c'est-à-dire l'élément `<details>` : il
   s'ouvre au clavier, fonctionne sans script, et son contenu reste dans le
   document, donc lisible par un moteur de recherche et trouvable avec la
   recherche du navigateur. Réservé aux listes longues. */
.promevil-depli { margin-top: .9rem; }
.promevil-depli > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
  font-weight: 700;
  /* « Voir les prestations » ouvre quelque chose : c'est une cible, elle
     prend le vert comme les liens. */
  color: var(--wp--preset--color--vert-texte);
}
.promevil-depli > summary:hover,
.promevil-depli > summary:focus-visible {
  color: var(--wp--preset--color--encre);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.promevil-depli > summary::-webkit-details-marker { display: none; }
.promevil-depli > summary::before {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--pv-transition);
  flex: none;
}
.promevil-depli[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.promevil-depli > summary:hover { color: var(--wp--preset--color--encre); }
.promevil-depli[open] > summary {
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--wp--preset--color--bordure);
}


/* ==========================================================================
   9 · Chiffres
   ========================================================================== */

.promevil-chiffres {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  margin-top: var(--wp--preset--spacing--30);
}
.promevil-chiffres > * { margin: 0; }

/* Un chiffre et sa note forment un couple : ils vivent dans la même case. */
.promevil-chiffre-case {
  background: var(--wp--preset--color--vert-pale);
  border-radius: var(--pv-rayon-petit);
  padding: 1.1rem;
}
.promevil-chiffre {
  font-size: clamp(2rem, 8vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--wp--preset--color--vert-texte);
  margin-bottom: .5rem;
}
.promevil-chiffre__note {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--wp--preset--color--gris);
}

/* Sur une bande sombre, le vert vif redevient lisible : 5,22:1 sur l'encre. */
.promevil-bande .promevil-chiffre-case { background: transparent; padding: 0; }
.promevil-bande .promevil-chiffre { color: var(--wp--preset--color--vert); }
.promevil-bande .promevil-chiffre__note { color: rgba(255, 255, 255, .76); }


/* ==========================================================================
   10 · Bandes photographiques
   ========================================================================== */

.promevil-bande {
  position: relative;
  overflow: hidden;
  background-color: var(--wp--preset--color--encre);
  padding-block: clamp(2.6rem, 7vw, 4.2rem);
  background-size: cover;
  background-position: center;
}
.promevil-bande::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43, 48, 59, .78), rgba(43, 48, 59, .9));
}
.promevil-bande > * { position: relative; z-index: 2; }
.promevil-bande :where(h2, h3, p) { color: #fff; }
.promevil-bande .promevil-eyebrow { color: var(--wp--preset--color--vert); }
/* Une liste sur la bande : le gris de la puce tombe à 2,4:1 sur l'encre. */
.promevil-bande .promevil-liste li { color: rgba(255, 255, 255, .82); }
.promevil-bande .promevil-liste li + li { border-top-color: rgba(255, 255, 255, .18); }
.promevil-bande .promevil-liste li strong { color: #fff; }
.promevil-bande .promevil-depli > summary { color: var(--wp--preset--color--vert); }
/* Le vert vif redevient lisible sur l'encre : 5,22:1. */
.promevil-bande a { color: var(--wp--preset--color--vert); }
/* Une carte reste une surface claire : le blanc général de la bande ne doit
   pas la traverser, sinon son texte disparaît sur son propre fond. */
.promevil-bande .promevil-card :where(h2, h3) { color: var(--wp--preset--color--encre); }
.promevil-bande .promevil-card :where(p, li) { color: var(--wp--preset--color--gris); }
.promevil-bande .promevil-card a { color: var(--wp--preset--color--vert-texte); }
/* ---- L'appel à l'action de clôture ------------------------------------
   Il était une bande sombre sur photographie, posée juste au-dessus du pied de
   page, qui est sombre lui aussi : **exactement la même couleur**, `#2B303B`,
   sur 562 puis 614 px. Onze cent soixante-seize pixels d'un seul gris, sans
   respiration ni rupture. Et la photographie, enterrée sous un voile de 78 à
   90 % de cette même couleur, n'apportait rien : on ne la voyait pas.

   Le remède est écrit dans le principe 4, en tête de cette feuille : le vert
   vif ne porte jamais de texte, il travaille **en aplat, avec de l'encre
   par-dessus**. C'est la seule surface du site où la couleur de la marque
   s'étale, et elle tombe au bon endroit : le dernier geste avant le pied.
   L'encre sur le vert donne 5,22:1, et le bouton s'inverse pour ressortir. */
.promevil-cta {
  background-color: var(--wp--preset--color--vert);
  padding-block: clamp(2.8rem, 7vw, 4.4rem);
}
.promevil-cta :where(h2, p) { color: var(--wp--preset--color--encre); }
.promevil-cta .promevil-eyebrow { color: var(--wp--preset--color--encre); }
/* Le motif declare son bouton en vert, et les classes de prereglage du noyau
   sont en `!important` : sans autant de poids, le bouton restait vert sur
   vert et disparaissait dans l'aplat. */
.promevil-cta .wp-block-button__link {
  background-color: var(--wp--preset--color--encre) !important;
  color: var(--wp--preset--color--base) !important;
}
.promevil-cta .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--base) !important;
  color: var(--wp--preset--color--encre) !important;
}

/* Sa mesure de lecture : le texte courait sur les 1 180 px de la bande, soit
   près de cent cinquante signes par ligne. À cette longueur, l'œil ne retrouve
   plus le début de la ligne suivante.

   La marge nulle va avec la mesure. La contre-mesure du gabarit ne couvre que
   `entry-content` ; or dans le gabarit « page interlocuteur » l'appel à
   l'action est posé après le contenu, donc en dehors. La disposition contrainte
   du noyau y recentre tout enfant borné, et le titre partait au milieu pendant
   que son surtitre restait à gauche. */
@media (min-width: 782px) {
  .promevil-cta :where(h2) { max-width: 24ch; }
  .promevil-cta :where(p):not(.promevil-eyebrow) { max-width: 62ch; }
  /* Le recentrage du noyau est en `!important` : il faut au moins autant. */
  .promevil-cta :where(h2, p) { margin-inline: 0 auto !important; }
}

.promevil-bande--transport { background-image: url('assets/images/bande-transport.jpg'); }
.promevil-bande--hall { background-image: url('assets/images/hall-immeuble.jpg'); }


/* ==========================================================================
   11 · Métiers
   ========================================================================== */

.promevil-metiers {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.promevil-metier {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: var(--pv-rayon);
  overflow: hidden;
  padding: 0;
  display: flex; flex-direction: column;
  transition: border-color var(--pv-transition), box-shadow var(--pv-transition);
}
.promevil-metier:hover { border-color: var(--wp--preset--color--vert); box-shadow: var(--pv-ombre-douce); }
.promevil-metier__img { margin: 0; }
.promevil-metier__img img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.promevil-metier:hover .promevil-metier__img img { transform: scale(1.04); }
.promevil-metier > :not(.promevil-metier__img) { padding-inline: 1.2rem; }
.promevil-metier > :not(.promevil-metier__img):first-of-type { padding-top: 1.1rem; }
.promevil-metier > :last-child { padding-bottom: 1.2rem; margin-top: auto; }
.promevil-metier h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.promevil-metier p { color: var(--wp--preset--color--gris); font-size: .96rem; }

/* Une carte de métier sans image garde le même gabarit, sans trou en tête. */
.promevil-metier:not(:has(.promevil-metier__img)) > :first-child { padding-top: 1.2rem; }


/* ==========================================================================
   11 bis · Ce qui manque
   ========================================================================== */

/* Une pièce non livrée laisse un encart, pas un trou. Il occupe à peu près la
   place que prendra le contenu attendu, de sorte que la page se lise déjà dans
   ses proportions définitives, et il porte en quelques mots ce qu'on attend.

   Le violet ne sert qu'a ca. Il n'appartient a aucune palette du site, ne se
   confond avec aucun etat, et se repere d'un bout a l'autre d'une page. Le
   bordeaux tenait ce role jusqu'au 21 aout ; il redevient une couleur de mise
   en valeur, et un signal ne peut pas etre en meme temps une decoration. */
.promevil-manque {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  padding: .9rem 1rem;
  background: #F8F4FC;
  border: 1px dashed #D3BEE6;
  border-radius: var(--pv-rayon);
  text-align: center;
}
.promevil-manque > * { margin-block-start: 0; }

.promevil-manque__etiquette {
  margin: 0;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pv-manque);
}
.promevil-manque__quoi {
  margin: 0;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--wp--preset--color--gris);
}

/* Les quatre encombrements. Le carré du visage, le seize-neuvième de la
   séquence, le pavé d'un paragraphe, la bande d'une section entière. */
.promevil-manque--portrait { aspect-ratio: 1; padding: .6rem; }
.promevil-manque--portrait .promevil-manque__etiquette { letter-spacing: .03em; }
.promevil-manque--portrait .promevil-manque__quoi { font-size: .78rem; }
/* Le seize-neuvieme sur toute la largeur donnait un rectangle de six cent
   soixante pixels de haut : plus grand que la video ne le sera. Il tient dans
   la mesure de lecture, comme un lecteur poserait la sienne. */
.promevil-manque--video {
  aspect-ratio: 16 / 9;
  max-width: 44rem;
  margin-inline: auto;
}
.promevil-manque--bloc { min-height: 7.5rem; }
.promevil-manque--large { min-height: 11rem; }

/* Au fil d'une phrase, l'encart devient une incise : une mention légale
   trouée doit se lire, pas se casser en deux. */
.promevil-manque--ligne {
  display: inline;
  padding: .1rem .4rem;
  border-radius: 3px;
  text-align: left;
  font-size: .94em;
  color: var(--wp--preset--color--gris);
}
.promevil-manque--ligne .promevil-manque__etiquette {
  margin-right: .2rem;
}

/* Un témoignage qui attend son visage, ou qui l'a reçu : la colonne de gauche
   tient le carré, la parole occupe le reste. Sous six cents pixels les deux
   s'empilent, un carré de cinq rem et demie n'a plus de place à côté du texte. */
.promevil-temoignage--avec-visage { display: flex; flex-direction: column; gap: .9rem; }
.promevil-temoignage__visage { flex: 0 0 auto; max-width: 8rem; }
.promevil-temoignage__visage img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--pv-rayon); border: 1px solid var(--wp--preset--color--bordure); }
.promevil-temoignage__dit > :first-child { margin-top: 0; }
.promevil-temoignage__dit > :last-child { margin-bottom: 0; }
@media (min-width: 600px) {
  .promevil-temoignage--avec-visage { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
  .promevil-temoignage__visage { flex: 0 0 6.5rem; }
}

/* ==========================================================================
   12 · Témoignages
   ========================================================================== */

.promevil-temoignage {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--bordure);
  border-left: 3px solid var(--wp--preset--color--bordeaux);
  border-radius: 0 var(--pv-rayon) var(--pv-rayon) 0;
  padding: 1.3rem 1.3rem 1.2rem;
}
/* La hauteur pleine n'a de sens que lorsque le témoignage est seul dans sa
   colonne, pour égaliser une rangée de deux. Empilé avec d'autres blocs dans
   la colonne d'un rail, il s'étirait à la hauteur de la section entière et
   laissait cinq cents pixels de vide sous le verbatim. */
.wp-block-column > .promevil-temoignage:only-child { height: 100%; }
.promevil-temoignage + .promevil-temoignage { margin-top: 1rem; }
.promevil-temoignage__verbatim {
  font-size: 1.02rem;
  line-height: 1.6;
  font-weight: 500;
  /* Le guillemet fermant se retrouvait seul sur sa ligne. */
  text-wrap: pretty;
}
@media (min-width: 782px) { .promevil-temoignage__verbatim { font-size: 1.08rem; } }
.promevil-temoignage__verbatim + .promevil-temoignage__verbatim { margin-top: .7rem; }
/* L'attribution se lit comme une légende de portrait : le nom d'abord, à la
   taille du verbatim qu'il signe, en gras et en bordeaux ; la fonction ensuite,
   en petit et en gris. En petites capitales serrées, le nom d'une personne se
   lisait comme une étiquette de rubrique — or c'est quelqu'un qui parle. */
.promevil-temoignage__qui {
  margin-top: .9rem;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--gris);
}
.promevil-temoignage__qui strong,
.promevil-portrait__qui strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wp--preset--color--bordeaux);
}
@media (min-width: 782px) {
  .promevil-temoignage__qui strong,
  .promevil-portrait__qui strong { font-size: 1.08rem; }
}
/* Les temoignages prennent l'aplat bordeaux. Ils forment une famille, les
   quatre ensemble : c'est le bloc entier qui change de fond, pas une carte
   sur deux — un damier a l'interieur d'un damier ne se lit plus. */
.promevil-temoignage {
  background: var(--wp--preset--color--bordeaux-pale);
  border-color: #E8D3D7;
  border-left-color: var(--wp--preset--color--bordeaux);
}

/* Le gras du corps de la maquette ramenait la graisse du nom a 650. */
.promevil-temoignage__qui strong,
.promevil-portrait__qui strong { font-weight: 700; }


/* ==========================================================================
   13 · Références, contact, candidature
   ========================================================================== */

/* Une grille de noms, groupée par segment. Pas de mur de logos : la décision
   du 11/08 est écrite, les références se citent en toutes lettres. */
.promevil-refs { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.promevil-refs h3 {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--vert-texte);
}
.promevil-refs p { margin-top: .5rem; line-height: 1.85; }

.promevil-contact .wp-block-column,
.promevil-candidature .wp-block-column {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: var(--pv-rayon);
  padding: 1.4rem;
}


/* ==========================================================================
   13 bis · Formulaires
   ==========================================================================
   Contact Form 7 ne fournit aucune apparence : sans cette section, les deux
   formulaires sortent en champs de navigateur bruts. */

.wpcf7 { margin-top: var(--wp--preset--spacing--30); }
.wpcf7 form.wpcf7-form { display: grid; gap: 1rem; }
/* Filet de sécurité si l'autop de l'extension revenait : ses <p> et <br>
   n'apportent que du vide dans une grille qui espace déjà. */
.wpcf7 form p { margin: 0; }
.wpcf7 form p > br { display: none; }
.wpcf7 form label { display: block; }

.promevil-champ { display: grid; gap: .35rem; }
.promevil-champ label {
  font-size: .9rem; font-weight: 600; color: var(--wp--preset--color--encre);
}
.pv-req {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--vert-texte); margin-left: .35rem;
}
.promevil-aide { font-size: .82rem; color: var(--wp--preset--color--gris); }

/* Deux champs par rangée à partir de la tablette, un seul sur téléphone. */
.promevil-duo { display: grid; gap: 1rem; }
@media (min-width: 600px) { .promevil-duo { grid-template-columns: 1fr 1fr; } }

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 input[type="url"], .wpcf7 input[type="date"], .wpcf7 select, .wpcf7 textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  font: inherit;
  font-size: 1rem;                 /* 16 px : en deçà, iOS zoome au focus */
  color: var(--wp--preset--color--encre);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: var(--pv-rayon-petit);
  transition: border-color var(--pv-transition), box-shadow var(--pv-transition);
}
.wpcf7 textarea { min-height: 7rem; resize: vertical; }

/* La page contact tenait plus d'air que de contenu : ses surfaces se
   resserrent, sans toucher au rythme du reste du site. */
.page-id-19 .promevil-section { padding-block: 30px; }
.page-id-19 .promevil-feuille--pleine { padding-block: 26px; }
.page-id-19 .wpcf7 { margin-top: 0; }
.wpcf7 select { appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23676F7E' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; }
.wpcf7 :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--wp--preset--color--vert-texte);
  box-shadow: 0 0 0 3px var(--wp--preset--color--vert-pale);
}
.wpcf7 input[type="file"] {
  width: 100%; padding: .8rem;
  border: 1px dashed var(--wp--preset--color--bordure);
  border-radius: var(--pv-rayon-petit);
  background: var(--wp--preset--color--fond);
  font-size: .92rem;
}

.promevil-consentement {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--wp--preset--color--fond);
  border-radius: var(--pv-rayon-petit);
  padding: .9rem 1rem;
  font-size: .9rem; line-height: 1.55;
}
.promevil-consentement .wpcf7-list-item { margin: 0; }
.promevil-consentement input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--wp--preset--color--vert-texte);
}

.wpcf7 .wpcf7-submit {
  justify-self: start;
  min-height: 48px;
  padding: .85rem 1.6rem;
  font: inherit; font-weight: 700; font-size: .95rem;
  color: var(--wp--preset--color--encre);
  background: var(--wp--preset--color--vert);
  border: 0; border-radius: 8px; cursor: pointer;
  transition: background-color var(--pv-transition), color var(--pv-transition);
}
.wpcf7 .wpcf7-submit:hover {
  background: var(--wp--preset--color--vert-sombre); color: var(--wp--preset--color--base);
}
@media (max-width: 479px) { .wpcf7 .wpcf7-submit { justify-self: stretch; width: 100%; } }

/* Les retours de validation : lisibles, et rattachés au champ fautif. */
.wpcf7 .wpcf7-not-valid { border-color: var(--wp--preset--color--bordeaux); }
.wpcf7 .wpcf7-not-valid-tip {
  color: var(--wp--preset--color--bordeaux); font-size: .85rem; font-weight: 600;
}
.wpcf7 .wpcf7-response-output {
  margin: 0; padding: .9rem 1.1rem;
  border: 0; border-left: 3px solid var(--wp--preset--color--vert);
  border-radius: 0 var(--pv-rayon-petit) var(--pv-rayon-petit) 0;
  background: var(--wp--preset--color--vert-pale);
  font-size: .95rem;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-left-color: var(--wp--preset--color--bordeaux);
  background: var(--wp--preset--color--bordeaux-pale);
}
.wpcf7 .wpcf7-spinner { margin-left: .6rem; }


/* ---- Information encore manquante --------------------------------------
   Sur une page réglementaire, une donnée absente ne peut pas être inventée et
   ne doit pas être masquée : elle se signale, pour que personne ne publie en
   croyant la page complète. */
.promevil-a-venir {
  display: inline;
  padding: .12rem .45rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 4px;
  background: var(--wp--preset--color--bordeaux-pale);
  color: var(--wp--preset--color--bordeaux);
  font-weight: 700;
  font-size: .92em;
}


/* ==========================================================================
   14 · Articles
   ========================================================================== */

.promevil-article .entry-content > :where(p, ul, ol, h2, h3, blockquote) { max-width: 68ch; }
.promevil-article h2 { margin-top: 2.2rem; }
.promevil-article h3 { margin-top: 1.6rem; }
.wp-block-post-title { margin-bottom: .6rem; }


/* ==========================================================================
   15 · Pied de page
   ========================================================================== */

/* L'écart entre blocs du gabarit s'applique au `footer` qui enveloppe le pied,
   pas au groupe qui porte l'aplat : la règle posée sur `.promevil-pied` ne
   l'atteignait pas. Vingt-huit pixels de fond de page restaient donc visibles
   entre l'appel à l'action, sombre, et le pied, sombre lui aussi — un liseré
   clair en travers du bas de page. Même geste que pour l'en-tête, plus haut. */
.wp-site-blocks > footer.wp-block-template-part { margin-top: 0 !important; }

/* L'écart supprimé plus haut valait contre une bande sombre : deux aplats
   sombres à la suite montraient un liseré clair. La dernière section est
   aujourd'hui une carte blanche, et elle touchait le pied. Le blanc de la page
   revient donc sous elle, porté par le contenu et non par le pied. */
.wp-site-blocks > main { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.promevil-pied {
  background-color: var(--wp--preset--color--encre);
  color: rgba(255, 255, 255, .74);
  margin-top: 0;
}
.promevil-pied :where(h2, h3, h4, h5, h6) { color: #fff; }
.promevil-pied p { color: rgba(255, 255, 255, .74); }
/* Les colonnes de liens du pied sont des listes de cibles : chacune fait sa
   hauteur de doigt, sinon elles sont inatteignables au pouce. */
.promevil-pied a {
  color: rgba(255, 255, 255, .88); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.promevil-pied .has-tiny-font-size a { min-height: 32px; }
.promevil-pied a:hover { color: var(--wp--preset--color--vert); text-decoration: underline; text-underline-offset: 4px; }
.promevil-pied .wp-block-separator { border-color: rgba(255, 255, 255, .16); opacity: 1; }

/* Le logo sur fond sombre. Le bordeaux du logotype tombe à 1,4:1 sur l'encre :
   il devient illisible et l'ensemble se brouille. La pastille blanche est le
   traitement de marque habituel dans ce cas, et elle rend au dessin son fond
   d'origine. La signature n'est pas dans l'image : elle est écrite juste
   dessous, en Inter, à une taille lisible. */
.promevil-logo__complet {
  display: inline-block;
  background: var(--wp--preset--color--base);
  border-radius: var(--pv-rayon-petit);
  padding: .7rem .9rem;
}
.promevil-logo__complet img { display: block; max-width: 127px; height: auto; }


/* ==========================================================================
   16 · Mouvement
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   17 · Impression
   ========================================================================== */

@media print {
  .promevil-entete, .promevil-pied, .wp-block-navigation, .wp-block-buttons { display: none !important; }
  body { background: #fff; }
  .promevil-carte { box-shadow: none; border: 1px solid #ccc; margin-top: 0; }
  .promevil-ancre__vue { display: none; }
}


/* ==========================================================================
   17 · La voix du site
   ==========================================================================

   Ce qui suit a ete essaye sur une copie de l'accueil, puis valide le 22/08 et
   applique partout. Deux couleurs, deux fonctions ; un gras qui colore au lieu
   d'epaissir ; une attribution qui se lit comme une legende de portrait.
   ========================================================================== */

/* --- T-01 · le bordeaux de la charte sort de sa réserve ------------------- */
/* Il prend la voix du site : les surtitres, les chiffres, les mots que le
   texte appuie. Le vert garde l'offre : les aplats, les cartes, les liens.
   Deux couleurs, deux fonctions, aucune ne marche sur les plates-bandes de
   l'autre. */
/* Le surtitre reprend le bordeaux de T-01 : le vert dit desormais le lien,
   et un surtitre n'est pas cliquable. */
.promevil-eyebrow,
.promevil-eyebrow--sombre {
  color: var(--wp--preset--color--bordeaux);
}
.promevil-chiffre { color: var(--wp--preset--color--bordeaux); }
.promevil-chiffre-case {
  background: var(--wp--preset--color--base);
  border-top: 2px solid var(--wp--preset--color--bordeaux);
  border-radius: 0 0 var(--pv-rayon-petit) var(--pv-rayon-petit);
}
.promevil-legende-rail {
  border-top-color: var(--wp--preset--color--bordeaux);
}

/* --- T-02 · le gras dans le corps du texte -------------------------------- */
/* Un seul fragment par paragraphe, sur le groupe de mots qui porte la
   promesse. Le gras ne double pas la graisse : il change la couleur et pousse
   la graisse d'un demi-cran, ce qui suffit à accrocher l'œil sans hacher la
   ligne. */
/* Deux couleurs, deux roles : **le bordeaux appuie, le vert mene quelque
   part**. Un mot en bordeaux dit « lisez celui-ci » ; un mot en vert dit
   « cliquez ici ». Arbitrage du 24/08, apres essai de l'inverse. */
.entry-content p > strong,
.promevil-encadre strong {
  font-weight: 650;
  color: var(--wp--preset--color--bordeaux);
}
/* Sur les surfaces inversees — la bande photographique, le heros en pleine
   image — le bordeaux tombe sous deux contre un : la couleur n'y est plus
   disponible. L'appui s'y fait donc sur la graisse seule, pleine, ce qui est
   la reponse classique quand la couleur ne peut pas porter l'accent.
   Les cartes posees sur la bande sont blanches : elles gardent la regle. */
.promevil-bande p > strong,
.promevil-hero--photo p > strong {
  color: inherit;
  font-weight: 700;
}
.promevil-bande .promevil-card p > strong {
  color: var(--wp--preset--color--bordeaux);
  font-weight: 650;
}

/* Les attributions et les surtitres portent déjà leur propre graisse : le
   gras du corps ne doit pas les recolorer. */
.entry-content :where(.promevil-legende-rail,
  .promevil-eyebrow, .promevil-chiffre) strong {
  font-weight: inherit;
  color: inherit;
}

/* --- T-03 · le défilement des références ---------------------------------- */
.promevil-references {
  background: var(--wp--preset--color--base);
  border-block: 1px solid var(--wp--preset--color--bordure);
  padding-block: clamp(1.6rem, 3.4vw, 2.4rem);
}
.promevil-references .promevil-colonne > * { max-width: none; }
.promevil-references .promevil-eyebrow { margin-bottom: 1rem; text-align: center; }

/* Le voile de chaque côté évite la coupe nette : les logos entrent et sortent
   au lieu d'apparaître. */
.promevil-defile {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* La piste porte deux fois la même série : à mi-course, la seconde occupe
   exactement la place de la première, et la boucle ne se voit pas. */
.promevil-defile__piste {
  display: flex;
  width: max-content;
  gap: 1.1rem;
  animation: pv-defile 105s linear infinite;
  /* La piste est déplacée par `transform` : le prévenir évite au navigateur
     de repeindre la bande entière à chaque image. */
  will-change: transform;
}
.promevil-defile:hover .promevil-defile__piste,
.promevil-defile:focus-within .promevil-defile__piste { animation-play-state: paused; }
@keyframes pv-defile { to { transform: translateX(calc(-50% - .55rem)); } }

/* Le mouvement n'est jamais imposé : sans lui, la série se replie en grille. */
@media (prefers-reduced-motion: reduce) {
  .promevil-defile { -webkit-mask-image: none; mask-image: none; }
  .promevil-defile__piste {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .promevil-defile__piste > :nth-child(n + 9) { display: none; }
}

/* --- Le mur de logos ------------------------------------------------------

   La frise etait une preuve qui passe : elle grisait les marques, les faisait
   defiler, et on n'en retenait rien. Le mur les pose — en couleur, a leur
   taille, rangees par famille sous un intitule. On les lit, on cherche la
   sienne, on la trouve.

   La grille se remplit d'elle-meme : `auto-fill` ouvre autant de pistes que la
   largeur permet, et les logos s'y calent au centre. Quatre par ligne sur
   telephone, sept sur grand ecran, sans qu'aucun chiffre soit ecrit ici. */
.promevil-mur__titre {
  margin: 0 0 .6rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--wp--preset--color--vert);
  font-size: .95rem;
  font-weight: 700;
  color: var(--wp--preset--color--encre);
}
.promevil-mur > * + .promevil-mur__titre {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.promevil-mur__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(50%, 9rem), 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
}
/* Les logos du mur gardent leur couleur : c'est une page de references, pas un
   bandeau d'ambiance. Ils se calent sur une hauteur commune — une plaque de
   mairie de mille pixels de large et un ecusson carre ne s'accordent que par
   la hauteur. */
.promevil-mur .promevil-reference {
  height: 3.6rem;
  padding: 0;
}
.promevil-mur .promevil-reference img {
  filter: none;
  opacity: 1;
  max-width: 100%;
}

/* La case d'un logo de référence : hauteur commune, largeur libre. Une plaque
   de mairie de mille pixels de large et un écusson carré ne s'accordent que par
   la hauteur ; les caler sur la largeur ferait des uns des timbres et des
   autres des affiches.

   Le nom ne peut pas être `promevil-logo` : c'est celui du logo Promévil dans
   l'en-tête et le pied de page. Écrite plus bas à spécificité égale, la règle
   l'emportait et grisait la marque sur tout le site. */
.promevil-reference {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  height: 3.4rem;
  padding-inline: .2rem;
}
.promevil-reference figure { margin: 0; }
/* Vingt-quatre chartes graphiques dans la même bande se battent. Le gris les
   met au même rang, la couleur revient quand on s'y arrête. */
.promevil-reference img {
  display: block;
  width: auto;
  height: 3.4rem;
  max-width: 11rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.promevil-defile:hover .promevil-reference img { filter: none; opacity: 1; }

/* --- La grille des références, en fin de page interlocuteur -------------- */
/* Elle ne défile pas : c'est une preuve, et une preuve se lit d'un bloc. Les
   logos gardent leur hauteur commune et se répartissent en lignes libres. */
.promevil-references__grille {
  /* La colonne de prose borne ses enfants a la mesure de lecture. Une grille
     de logos n'est pas de la prose : elle prend la largeur de la section. */
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.4rem 2rem;
  margin-top: 1.2rem;
}
.promevil-references__grille > * { margin-block-start: 0; }
.promevil-references__grille .promevil-reference img { filter: grayscale(1); opacity: .72; }
.promevil-references__grille:hover .promevil-reference img { filter: none; opacity: 1; }

/* Chaque famille est annoncée, sinon vingt-quatre marques se lisent comme une
   pile. Le trait la sépare de la précédente sans ajouter de titre. */
.promevil-references__groupe {
  max-width: none;
  margin: var(--wp--preset--spacing--40) 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--wp--preset--color--bordure);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--vert-texte);
  text-align: center;
}
.promevil-references__groupe:first-of-type { margin-top: 1.2rem; }

/* --- T-05 · l'attribution passe sous le visage ---------------------------- */
/* Le nom se lit avant la parole, comme une légende de portrait. La colonne
   s'élargit d'autant : à six rem et demie, une fonction de trois mots tombait
   sur cinq lignes. */
@media (min-width: 600px) {
  /* Le plafond de huit rem de la regle generale annulait cet elargissement :
     la colonne restait a 128 px et la fonction tombait sur cinq lignes. */
  .promevil-temoignage__visage {
    flex: 0 0 10.5rem;
    max-width: 10.5rem;
  }
}
.promevil-temoignage__visage .promevil-temoignage__qui {
  margin-top: .55rem;
}

.promevil-temoignage__dit > :first-child { margin-top: 0; }


/* ==========================================================================
   18 · Pictogrammes
   ==========================================================================

   Un dessin par titre de carte, sur la ligne du titre. Choix arrete le 22/08
   apres essai de cinq jeux, quatre tailles, quatre couleurs et cinq
   dispositions : bordeaux, aplat plein, taille affirmee, devant le titre.

   Jeu : Phosphor Fill, licence MIT.
   ========================================================================== */

.promevil-titre-picto {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.promevil-picto {
  display: inline-flex;
  flex: 0 0 auto;
  /* 1,15 em de base, au facteur « affirme » de 1,3. */
  width: 1.495em;
  height: 1.495em;
  /* Passe la hauteur d'une ligne : le dessin se cale sur la premiere ligne du
     titre plutot que de flotter au-dessus. */
  margin-top: .062em;
  color: var(--wp--preset--color--bordeaux);
}
.promevil-picto svg { display: block; width: 100%; height: 100%; }

/* Le dessin parle de la voix de son bloc. Une grille verte porte des dessins
   verts, une grille bordeaux des dessins bordeaux : le pictogramme appartient
   au bloc, pas a la carte — sur une grille ou une carte sur deux est teintee,
   suivre la carte donnerait vert, bordeaux, bordeaux, vert, et le bloc perdrait
   son unite. Les portes et les metiers n'ont pas de grille teintee : ils
   gardent le bordeaux de leur filet. */
.promevil-cartes .promevil-picto {
  color: var(--wp--preset--color--vert-texte);
}
.promevil-cartes--bordeaux .promevil-picto {
  color: var(--wp--preset--color--bordeaux);
}
/* Un titre qui est un lien garde sa ligne : le dessin n'entre pas dans la
   zone cliquable, il annonce. Sortie du flux par le conteneur souple, cette
   zone retombait a la hauteur du texte, vingt pixels — sous le plancher de
   vingt-quatre de la norme AA. */
.promevil-titre-picto__mots > a {
  display: inline-block;
  min-height: 28px;
}

/* Un titre de carte qui mene quelque part reste un titre : il garde la couleur
   et la graisse de son rang, sans soulignement. Le soulignement revient au
   survol, ou il ne decrit plus l'element mais repond au geste. Les portes
   avaient deja cette regle ; elle vaut pour toutes les figures a carte. */
.promevil-card :where(h2, h3, h4) a,
.promevil-porte :where(h2, h3, h4) a,
.promevil-metier :where(h2, h3, h4) a {
  color: inherit;
  text-decoration: none;
}
.promevil-card :where(h2, h3, h4) a:hover,
.promevil-card :where(h2, h3, h4) a:focus-visible,
.promevil-porte :where(h2, h3, h4) a:hover,
.promevil-porte :where(h2, h3, h4) a:focus-visible,
.promevil-metier :where(h2, h3, h4) a:hover,
.promevil-metier :where(h2, h3, h4) a:focus-visible {
  color: var(--wp--preset--color--encre);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   20 · Les portes et les repères
   ========================================================================== */

/* Les quatre portes prennent la case des repères, au trait près : surface
   blanche, filet de deux pixels en tête, rien sur les trois autres côtés, pas
   d'ombre. Seule la couleur du filet les distingue — bordeaux ici, vert
   là-bas.

   Ni contour gris ni ombre : ils posaient un second dessin par-dessus le
   filet, et la case cessait d'être celle des repères. Pas d'effet au survol
   non plus : la carte n'est pas la cible, « Voir notre offre » l'est, et c'est
   ce lien-là qui répond. */
.promevil-porte {
  background: var(--wp--preset--color--base);
  border: 0;
  border-top: 2px solid var(--wp--preset--color--bordeaux);
  border-radius: 0 0 var(--pv-rayon-petit) var(--pv-rayon-petit);
  box-shadow: none;
  padding: 1.1rem;
}
/* `.promevil-porte p` est plus specifique que `.promevil-porte__fleche` : la
   fleche heritait du gris du corps malgre la regle posee ici. */
.promevil-porte p.promevil-porte__fleche,
.promevil-porte p.promevil-porte__fleche a {
  color: var(--wp--preset--color--vert-texte);
}

.promevil-portes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 600px) {
  .promevil-portes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .promevil-portes { grid-template-columns: repeat(4, 1fr); }
}
.promevil-porte > :first-child { margin-top: 0; }
.promevil-porte > :last-child { margin-bottom: 0; }

/* Les repères passent au vert, filet, intitulé et chiffres compris. Le
   bordeaux reste la voix du site partout ailleurs ; ce bloc-là est le seul à
   parler de l'association elle-même, et le vert est sa couleur. */
.promevil-avec-legende:has(.promevil-chiffres) .promevil-legende-rail {
  border-top-color: var(--wp--preset--color--vert) !important;
}
.promevil-avec-legende:has(.promevil-chiffres) .promevil-legende-rail strong {
  color: var(--wp--preset--color--vert-texte);
}
.promevil-chiffres .promevil-chiffre-case {
  border-top-color: var(--wp--preset--color--vert) !important;
}
.promevil-chiffres .promevil-chiffre {
  color: var(--wp--preset--color--vert-texte) !important;
}

/* --- Réunion du 3 septembre · les logos composés ------------------------
   Transilien et ses lignes forment un seul logo, les pictogrammes sous la
   marque : il prend une fois et demie la hauteur commune, sans quoi les
   lettres des lignes ne se lisent plus. Dans la frise, les cases se centrent
   sur la plus haute. */
.promevil-reference--haut,
.promevil-mur .promevil-reference--haut { height: 5.2rem; }
.promevil-reference--haut img { height: 5.2rem; max-width: 12rem; }
.promevil-defile__piste { align-items: center; }

/* --- L'encart partenaire Questions à domicile (3 septembre) --------------
   Fond vert pâle où qu'il soit : dans une grille bordeaux, dans une grille
   verte à n'importe quel rang du damier, ou seul dans une colonne de texte.
   La classe triplée passe devant les formules du damier. */
.promevil-card--partenaire.promevil-card--partenaire.promevil-card--partenaire {
  background: var(--wp--preset--color--vert-pale);
  border-color: #DCEBDA;
}
.promevil-card--partenaire p { max-width: 70ch; }
/* Le logo illustre le paragraphe, pas trop grand : la hauteur d'une ligne et
   demie de titre. */
.promevil-card--partenaire .promevil-partenaire__logo { margin: 1rem 0 0; }
.promevil-partenaire__logo img { display: block; width: auto; height: 3.5rem; }
/* Posé après la dernière carte de « Nos dispositifs », il prend la rangée. */
.promevil-cartes > .promevil-card--pleine { grid-column: 1 / -1; }
/* Seul dans la colonne d'un rail, il garde sa hauteur : la règle qui étire les
   cartes posées côte à côte dans des colonnes ne vaut pas pour lui. */
.wp-block-column > .promevil-card--partenaire { height: auto; }