/* ------------------------------------------------------------------ *
 * Références : le voile blanc sur les vignettes
 * ------------------------------------------------------------------ *
 * Le module de grille du thème est réglé sur « dynamic » : à chaque clic
 * sur un filtre, il posait `pp-is-filtering` sur la grille — ce qui vaut
 * `opacity: .5` dans sa feuille — le temps d'attendre la liste que lui
 * renvoyait WordPress. WordPress n'existe plus : la réponse n'arrivait
 * jamais, la classe n'était jamais retirée, et les 27 vignettes restaient
 * à moitié effacées.
 *
 * La cause est traitée dans outils/filtres.mjs, qui débranche les
 * écouteurs du module. Cette règle est le filet : le jour où la classe
 * reparaîtrait par un autre chemin, la page ne s'effacerait pas à moitié
 * sans que rien ne le dise. Le voile n'a plus de sens ici de toute façon,
 * puisque le filtrage est instantané et ne fait attendre personne. */
.pp-content-post-grid.pp-is-filtering .pp-content-post {
  opacity: 1 !important;
}

/* ------------------------------------------------------------------ *
 * Ce que les feuilles de l'éditeur de blocs faisaient encore
 * ------------------------------------------------------------------ *
 * WordPress écrivait dans chaque page deux feuilles de son éditeur de
 * blocs, global-styles (19 Ko) et wp-block-library (4 Ko), soit 1,1 Mo
 * sur les 47 pages, pour un site bâti par le constructeur du thème et non
 * par cet éditeur. nettoyerWordPress les retire. Sur leurs 200 règles,
 * quatre trouvaient un élément (test/reliquats.test.mjs le prouve et le
 * garde) : les voici, telles quelles.
 *
 * Toutes ont une force nulle ou minime (:where), et le thème pose déjà
 * `img{max-width:100% !important}`, `body{margin:0}`, `body{padding:0}`
 * et `figure{margin:0}` : les garder ici, en dernière feuille lue, ne
 * change rien à la cascade — c'est ce qu'on veut. La seule qui apporte
 * quelque chose est la première, `height:auto` sur les images des blocs
 * de texte, qui garde leurs proportions quand la largeur se replie. */
html :where(img[class*="wp-image-"]) {
  height: auto;
  max-width: 100%;
}

:where(figure) {
  margin: 0 0 1em;
}

:where(body) {
  margin: 0;
}

body {
  padding: 0;
}

/* La cinquième vient d'une feuille de trois lignes que WordPress 6.7 pose
   pour ses images à `sizes="auto"` — les neuf vignettes des « Derniers
   articles » en portent. Elle ne fait quelque chose qu'avec un confinement
   de taille que rien ne pose ici ; recopiée telle quelle par fidélité. */
img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain-intrinsic-size: 3000px 1500px;
}

/* ------------------------------------------------------------------ *
 * Les images en WebP, le JPEG en repli
 * ------------------------------------------------------------------ *
 * La génération enveloppe chaque photo dans un <picture> qui propose le
 * WebP avant le JPEG (outils/images-webp.mjs). Un <picture> est une boîte
 * en ligne de plus entre l'image et sa colonne ; avec « contents », il
 * n'a pas de boîte du tout et la mise en page voit l'img exactement comme
 * avant, enfant direct de ce qui la contenait. */
picture {
  display: contents;
}

/* ------------------------------------------------------------------ *
 * En-tête : « Contact » passait à la ligne
 * ------------------------------------------------------------------ *
 * ATTENTION — ma première explication était fausse. J'avais cru qu'une
 * règle annulant la marge latérale de cette rangée s'était perdue à
 * l'aspiration : la mesure avait été prise avant que le navigateur ait
 * appliqué la nouvelle largeur de fenêtre, et comparait donc 1280 px chez
 * l'un à 1120 chez l'autre.
 *
 * Vérification faite : le site d'origine A la même marge de 20 px, et son
 * menu passe LUI AUSSI sur deux lignes sous 1140 px. Rendre la marge à la
 * rangée nous éloignait donc de l'original sur toutes les rangées à
 * largeur fixe, pas seulement l'en-tête. Cette règle est retirée.
 *
 * Reste ce seul resserrement des entrées du menu, qui suffit à les tenir
 * sur une ligne sans toucher à la largeur des rangées. Il éloigne malgré
 * tout la hauteur de l'en-tête de celle de l'original dans la bande
 * 1140–1240 px : 133 px au lieu de 186, ce qui étale autrement le
 * dégradé. À retirer si la fidélité prime. */
@media (min-width: 992px) and (max-width: 1260px) {
  header .fl-menu .menu > li > a,
  header ul.menu > li > a {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* ------------------------------------------------------------------ *
 * Fiches de l'équipe (page À propos)
 * ------------------------------------------------------------------ *
 * Le rôle tient sur une ou deux lignes selon la personne : « Directeur »
 * contre « Chef de projet senior, Responsable technique ». Les téléphones
 * et les adresses se retrouvaient donc à des hauteurs différentes d'une
 * fiche à l'autre. On réserve à toutes la hauteur de deux lignes.
 *
 * La réserve porte sur le titre lui-même, pas sur son enveloppe : celle-ci
 * a une autre taille de police, et un « em » y vaut nettement moins qu'une
 * ligne de titre. Mesuré dans le navigateur : ligne de 34 px, donc 68 px
 * pour deux. « lh » dit la même chose sans figer la valeur, on l'utilise
 * partout où il est reconnu. */
.equipe .pp-infobox-title {
  min-height: 68px;
}

@supports (min-height: 2lh) {
  .equipe .pp-infobox-title {
    min-height: 2lh;
  }
}

@media (max-width: 767px) {
  .equipe .pp-infobox-title {
    min-height: 0;
  }
}

/* ------------------------------------------------------------------ *
 * Cartes de prestations de la page d'accueil
 * ------------------------------------------------------------------ *
 * Elles sont réparties en deux colonnes qui empilent leurs cartes
 * indépendamment. Les hauteurs allaient de 224 à 433 px, si bien que rien
 * ne s'alignait d'une colonne à l'autre, et le texte commençait tantôt à
 * 64 px du haut, tantôt à 132.
 *
 * On réserve trois lignes de titre — c'est ce que réclame « Modes
 * opératoires, Sécurité, Organisation et suivi des travaux (DLT) » — et on
 * donne la même hauteur à toutes les cartes. Les colonnes retombent alors
 * naturellement en face l'une de l'autre. Vérifié dans le navigateur :
 * même hauteur de départ pour chaque ligne, texte à 132 px partout. */
/* Les cartes formaient deux colonnes qui s'empilaient chacune de leur côté :
   rien ne s'alignait, et il fallait imposer une hauteur à toutes pour y
   remédier — hauteur qu'il fallait revoir à chaque largeur d'écran.
   Elles sont maintenant une vraie grille : chaque rangée s'aligne d'elle-même
   sur sa carte la plus haute, quelle que soit la largeur, et le nombre de
   cartes peut changer sans que rien ne casse. */
.prestations-accueil {
  display: grid;
  gap: 30px;
}

/* Le thème pose un ::before et un ::after sur chaque groupe de colonnes —
   le vieux procédé pour refermer des flottants. Dans une grille, chacun
   occupe une case : la première carte se retrouvait poussée en deuxième
   position, laissant un trou en haut à gauche. */
.prestations-accueil::before,
.prestations-accueil::after {
  display: none;
}

@media (min-width: 768px) {
  .prestations-accueil {
    grid-template-columns: 1fr 1fr;
  }
}

/* Les cartes remplissent la hauteur de leur rangée. */
.prestations-accueil .pp-infobox-wrap,
.prestations-accueil .pp-infobox-link,
.prestations-accueil .pp-infobox.layout-3 {
  height: 100%;
}

/* Le titre tient sur une à trois lignes selon la prestation ; on réserve la
   place du plus long pour que le texte commence toujours au même endroit. */
@media (min-width: 992px) {
  .pp-infobox.layout-3 .pp-infobox-title {
    min-height: 136px;
  }
}

@media (min-width: 1200px) {
  .pp-infobox.layout-3 .pp-infobox-title {
    /* Trois lignes de 29 px : « Gestion de projets (PAP, SIA), Planification
       et direction des travaux » en fait trois à 1 280 comme à 1 900 px, et
       avec deux lignes réservées son texte commençait 21 px plus bas que
       celui des autres cartes (mesuré le 21.09 : 123 contre 102 ; Victor :
       « le texte regular n'est pas toujours à la même hauteur »). */
    min-height: 87px;
  }
}

/* La flèche de la carte s'aligne sur la première ligne du titre : l'icône
   fait 32 px pour une ligne de 29, on la remonte de la différence. */
.pp-infobox.layout-3 .pp-icon-wrapper {
  margin-top: -2px;
}

/* La carte de Contact : l'infobulle d'un repère ne dit que la ville, centrée
   (Victor, 21.09) ; les adresses complètes sont sous la carte, en liens
   vers le plan. */
.tooltipster-content p,
.pp-tooltip-container p {
  text-align: center !important;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * Étiquette de thème sur les fiches de références
 * ------------------------------------------------------------------ *
 * On y écrit une forme courte de l'intitulé, mais un thème renommé depuis
 * l'administration peut redevenir long : on s'assure qu'il se replie dans
 * la carte au lieu d'en sortir. */
.pp-content-grid-post-categories .fl-category span {
  white-space: normal;
  overflow-wrap: anywhere;
}

.pp-content-grid-post-categories {
  max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * Les photos remplissent leur colonne — photo-remplit-sa-colonne
 * ------------------------------------------------------------------ *
 * Le thème laisse les photos à leur largeur naturelle, plafonnée à celle
 * de la colonne. Une image un peu plus étroite que sa colonne s'affichait
 * donc plus petite qu'elle n'aurait pu, avec du vide de part et d'autre :
 * 473 px dans une colonne de 533. */
.fl-photo-content .fl-photo-img {
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------ *
 * Colonne « Derniers articles » (pages d'actualité)
 * ------------------------------------------------------------------ *
 * Les titres se suivaient sans repère et très espacés. On les resserre,
 * on les sépare d'un filet et on pose une puce discrète. Le thème les
 * écrivait par ailleurs en Capitales De Chaque Mot, ce qui se lit mal en
 * français : on rend la casse d'origine. */
.pp-content-post-grid .pp-content-grid-post-title,
.pp-content-post-grid .pp-content-grid-post-title a {
  text-transform: none;
}

.fl-col-small .pp-content-post-grid .pp-content-post {
  padding: 0 0 14px 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(74, 88, 95, .12);
  position: relative;
}

.fl-col-small .pp-content-post-grid .pp-content-post:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.fl-col-small .pp-content-post-grid .pp-content-post::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2b8ca6;
}

.fl-col-small .pp-content-post-grid .pp-content-grid-post-title {
  margin: 0;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ *
 * Postes à pourvoir (page Emploi)
 * ------------------------------------------------------------------ *
 * Le gabarit prévoyait une liste vide et un message de repli. On garnit la
 * liste depuis l'administration ; il ne restait qu'à l'habiller, dans le
 * même esprit que les cartes du site. */
.fl-loop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.fl-loop-grid .poste {
  background: #fff;
  border: 1px solid rgba(74, 88, 95, .12);
  box-shadow: 0 2px 10px rgba(74, 88, 95, .07);
  padding: 26px 30px;
}

.poste-titre {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  color: #22313a;
}

.poste-details {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7a82;
}

.poste-details:empty {
  display: none;
}

.poste-description {
  margin-top: 14px;
  line-height: 1.7;
  white-space: pre-line;
}

.poste-candidature {
  margin: 18px 0 0;
}

.poste-candidature a {
  display: inline-block;
  background: #004c67;
  color: #fff;
  text-decoration: none;
  padding: 10px 22px;
  font-size: 14px;
  letter-spacing: .3px;
}

.poste-candidature a:hover {
  background: #2b8ca6;
}

/* ------------------------------------------------------------------ *
 * Les rubriques de la page News
 * ------------------------------------------------------------------ *
 * Cinq sections depuis le 20.09.2026 (réponse 16 de Maxime), toutes sur la
 * classe `coulisses` de la première : deux d'actualités du site (les
 * reportages, vignette avec photo, balisage de la grille d'origine) et
 * trois de publications LinkedIn (les posts, un bloc de texte avec le lien
 * et le logo LinkedIn). Une barre en tête de page mène à chacune.
 *
 * La barre : des boutons en ligne, dans le bleu de marque, qui passent à
 * la ligne sur téléphone. Le défilement vers la section est celui du thème :
 * `FLBuilderLayout._scrollToElement` anime `scrollTop` par jQuery sur
 * tout lien en `#`. Une règle de défilement doux en CSS sur `html`, posée
 * ici le 20.09.2026, l'annulait : le navigateur et jQuery se disputaient le
 * défilement, l'adresse prenait bien le `#rubrique-…` mais la page ne
 * bougeait pas d'un pixel (vu à l'écran, `scrollY` restait à 0). Pas de
 * défilement en CSS, donc ; l'essai des rubriques y veille.
 * `scroll-margin-top` laisse la place de
 * l'en-tête collant, sans quoi le titre de la rubrique arrivait dessous. */
.rubriques-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 6px;
}

.rubriques-barre a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid #2b7bb9;
  border-radius: 999px;
  color: #2b7bb9;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.rubriques-barre a:hover,
.rubriques-barre a:focus-visible {
  background: #2b7bb9;
  color: #fff;
}

.coulisses[data-rubrique] {
  scroll-margin-top: 110px;
}

/* La grille des actualités d'une rubrique reprend le balisage du site
   d'origine ; elle a seulement besoin d'un peu d'air sous l'introduction. */
.coulisses .fl-module-pp-content-grid {
  margin-top: 26px;
}

/* Les posts : un par publication LinkedIn, ajoutés depuis
   l'administration. Le style reprend celui des cartes du site : fond
   blanc, ombre discrète, flèche à gauche du titre — et, depuis le
   20.09.2026, le logo LinkedIn en haut à droite et la mention de la source
   en pied, pour qu'un post se distingue d'un reportage sans avoir à lire. */
.coulisses .coulisses-liens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.coulisses-lien {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid rgba(74, 88, 95, .12);
  box-shadow: 0 2px 10px rgba(74, 88, 95, .07);
  padding: 22px 60px 22px 24px;
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}

.coulisses-logo {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a66c2;
  color: #fff;
}

.coulisses-logo svg {
  width: 18px;
  height: 18px;
  display: block;
}

.coulisses-source {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #0a66c2;
}

.coulisses-lien:hover {
  box-shadow: 0 6px 20px rgba(74, 88, 95, .14);
  transform: translateY(-2px);
}

.coulisses-titre {
  display: block;
  font-weight: 600;
  color: #22313a;
  line-height: 1.4;
}

.coulisses-titre::before {
  content: "→";
  color: #2b8ca6;
  margin-right: 10px;
}

/* La date d'une publication était à 4,44:1 sur blanc en 15 px — juste sous le
   seuil de 4,5 de la WCAG. Un ton plus sombre : 5,28:1, et le gris reste un
   gris (mesuré le 21.09.2026). */
.coulisses-note {
  display: block;
  margin-top: 8px;
  color: #5f6e76;
  font-size: 15px;
  line-height: 1.6;
}

.coulisses-note:empty {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Fiches PDF de l'équipe (page À propos)
 * ------------------------------------------------------------------ *
 * Une pastille posée sur la photo du collaborateur, qui ouvre sa fiche
 * PDF dans un nouvel onglet. Elle n'existe que si la boîte a une fiche :
 * le générateur retire le lien quand le bloc est vide. Visible sans
 * survol, pour que le téléphone la voie aussi ; le bleu est celui des
 * cartes ajoutées ailleurs sur le site (rubrique des coulisses, postes). */
.equipe .pp-infobox-image {
  position: relative;
}

/* Les adresses e-mail des cartes de l'équipe débordaient de leur colonne à
   1 100 px et se coupaient au milieu d'un mot : une adresse peut se couper,
   mais à un endroit choisi par le navigateur.

   Leur couleur, elle, était le vert de la marque #95c11f sur blanc : 2,12:1,
   moins de la moitié du seuil de 4,5 — le texte le moins lisible du site,
   sur la page où l'on vient chercher une adresse. Le bleu de marque donne
   4,53:1 et se lit comme un lien, ce qu'il est (mesuré le 21.09.2026). */
.equipe .pp-infobox a[href^="mailto:"] {
  overflow-wrap: anywhere;
  color: #2b7bb9;
}

.equipe .selx-fiche {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b8ca6;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  text-decoration: none;
  transition: background .15s, transform .15s;
}

.equipe .selx-fiche:hover,
.equipe .selx-fiche:focus-visible {
  background: #22313a;
  color: #fff;
  transform: translateY(-2px);
}

.equipe .selx-fiche svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* La seconde pastille : le profil LinkedIn du collaborateur, à gauche de
 * la fiche, dans le bleu de LinkedIn pour être reconnue au premier regard.
 * Même règle : sans adresse, le générateur la retire. */
.equipe .selx-linkedin-profil {
  position: absolute;
  right: 64px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a66c2;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  text-decoration: none;
  transition: background .15s, transform .15s;
}

.equipe .selx-linkedin-profil:hover,
.equipe .selx-linkedin-profil:focus-visible {
  background: #004182;
  color: #fff;
  transform: translateY(-2px);
}

.equipe .selx-linkedin-profil svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ------------------------------------------------------------------ *
 * Cartes de la page Prestations
 * ------------------------------------------------------------------ *
 * Les lignes avaient déjà la même hauteur, mais le texte démarrait 68 px
 * plus bas quand le titre tenait sur trois lignes au lieu d'une. Même
 * remède : on réserve la hauteur du plus long titre, et on aère un peu. */
/* Uniquement les cartes de la page Prestations : la même classe sert aux
   références, où le titre est en surimpression sur la photo et n'a pas à
   réserver de hauteur. */
@media (min-width: 992px) {
  .prestation-carte .pp-content-grid-post-title {
    min-height: 102px;
  }
}

.pp-content-grid-post-description {
  margin-top: 4px;
  line-height: 1.65;
}

.pp-content-grid-post-text {
  padding-bottom: 6px;
}

/* Le titre principal de la page, promu de h2 en h1 par outils/seo.mjs.
   Le WordPress n'en posait aucun ; le promouvoir n'était pas gratuit pour
   autant. Le thème habille chaque niveau de titre par sa balise, pas par sa
   classe, et il a prévu une taille réduite sur téléphone pour les h2 mais
   pas pour les h1 : mesuré sur le site, un titre passait de 28 à 51 pixels
   sous 768 px, soit trois lignes au lieu d'une. On rend donc au h1 ce que le
   h2 avait exactement — 50/65 en large, 28/30 en étroit. Une page dont le
   titre porte un réglage propre garde le sien : sa règle est plus forte que
   celle-ci. */
h1.fl-heading-text,
h1.fl-heading .fl-heading-text {
  font-size: 42px;
  line-height: 55px;
}

@media (max-width: 768px) {
  h1.fl-heading-text,
  h1.fl-heading .fl-heading-text {
    font-size: 24px;
    line-height: 26px;
  }
}

/* Le titre de l'en-tête de l'accueil (bloc t1, nœud v41oec0u7btr). Le thème
   le règle à 56/71 px, pour « Tous les services d'ingénierie pour les lignes
   de transport », deux lignes. Le 20.09.2026, Maxime y met sa phrase de
   positionnement, trente mots : à 56 px elle faisait cinq lignes qui
   couvraient l'illustration entière (« c'est quoi cette horreur », Victor).
   Trois lignes à 32 px (34 en faisait quatre, avec un mot seul sur la
   dernière), en gardant le blanc et la graisse du thème. La règle du thème
   porte deux classes, celle-ci trois : elle l'emporte sans !important.
   Sous 768 px, le thème passe à 30/34 : on descend d'un cran de plus. */
h1.fl-node-v41oec0u7btr.fl-module-heading.fl-heading-text {
  font-size: 32px;
  line-height: 42px;
}

@media (max-width: 768px) {
  h1.fl-node-v41oec0u7btr.fl-module-heading.fl-heading-text {
    font-size: 24px;
    line-height: 30px;
  }
}

/* ------------------------------------------------------------------ *
 * Passe visuelle du 21.09.2026 — demande de Victor : « réduire les
 * espaces inutiles, justifier les textes, vérifier les tailles »
 * ------------------------------------------------------------------ *
 * Relevé fait page par page à 1 280 px, rangée par rangée, avec les
 * hauteurs et les marges calculées par le navigateur. Ce qui suit
 * s'écarte volontairement du site d'origine ; chaque règle dit ce
 * qu'elle a mesuré. */

/* 1. Les rangées du thème aux marges de 100 à 150 px. Treize rangées, sur
   l'accueil, les prestations, les références, l'équipe, les articles :
   120 px de vide sous la dernière carte avant la bande des standards, 150 px
   au-dessus des filtres des références. Ramenées à 60 px, ce qui reste
   plus que les 40 px des autres rangées. L'en-tête de l'accueil
   (uwhqypk3f5xc, 100 px en haut) n'est pas touché : ce vide-là est
   l'illustration. */
.fl-node-fuaordx230tl > .fl-row-content-wrap,
.fl-node-h4qcmgn0ltx3 > .fl-row-content-wrap,
.fl-node-okhwaz4cgq8f > .fl-row-content-wrap,
.fl-node-ov6lhxyksumq > .fl-row-content-wrap,
.fl-node-puxnzqj7gwms > .fl-row-content-wrap,
.fl-node-q24bznjp6fmh > .fl-row-content-wrap,
.fl-node-q53z1ny46wti > .fl-row-content-wrap,
.fl-node-sdvq7bkh8u5t > .fl-row-content-wrap,
.fl-node-ui3phgkjrmb2 > .fl-row-content-wrap,
.fl-node-w3xi9lnum8cv > .fl-row-content-wrap,
.fl-node-z86nxpmo2g9c > .fl-row-content-wrap,
.fl-node-emzf9ws7cqa1 > .fl-row-content-wrap {
  padding-bottom: 60px !important;
}

/* Le haut de la rangée des références (150 px) reste : son titre
   « Sélectionner les références individuellement » est remonté dans cette
   marge par le thème, et à 40 px il passait sous l'en-tête. */

/* 2. L'en-tête de l'accueil : la phrase de positionnement en blanc sur une
   illustration claire et chargée se lisait mal. Un voile dégradé sur toute
   la largeur a été essayé le 21.09 : Victor l'a entouré en rouge. À la
   place, un cartouche translucide bleu nuit derrière le texte seul, aux
   dimensions du texte : l'illustration reste intacte autour, et les
   lettres sont sur un fond uni. */
/* Depuis le 21.09.2026 au soir, le cartouche est une enveloppe
   « .selx-cartouche » qui tient le titre ET l'appel à l'action (bloc cta1,
   règle A11) ; elle reprend les marges que le thème donnait au titre
   (400 px puis 120 px en haut, 120 puis 20 px en bas sous 768 px), et le
   titre y perd les siennes. */
.selx-cartouche {
  display: inline-block;
  margin: 400px 20px 120px;
  background: rgba(0, 40, 60, 0.58);
  padding: 18px 26px 22px;
  border-radius: 4px;
  box-decoration-break: clone;
}
.selx-cartouche h1.fl-node-v41oec0u7btr.fl-module-heading.fl-heading-text {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
}
@media (max-width: 768px) {
  .selx-cartouche { margin: 120px 20px 20px; padding: 14px 18px 18px; }
}

/* 3. La largeur de lecture : la limite de 880 px essayée le 21.09 laissait
   un vide à droite des introductions, que Victor a marqué d'un « X ? ».
   Retirée : un paragraphe prend la largeur de sa colonne, comme sur le
   site d'origine. */

/* 3 bis. Le retrait des introductions. Le thème pose 120 px de marge à
   gauche du paragraphe d'introduction sous le titre de chaque page (News,
   Prestations, Contact, Équipe, les sections de l'accueil), pour un effet
   de retrait que Victor a entouré comme un défaut : le titre à gauche, le
   texte décalé. Tout module de texte repart à la marge ordinaire de 20 px,
   alignée sur le titre. */
.fl-col-content > .fl-module-rich-text {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

/* 4. Les paragraphes justifiés, avec la coupure des mots que le navigateur
   sait faire en français (la page porte lang="fr"). Demande de Victor.
   Les textes centrés, les cartes, les listes de l'équipe et les
   introductions en grand corps (27 px, trop peu de mots par ligne pour
   justifier sans trous) gardent leur alignement. Sur téléphone, les lignes
   sont trop courtes pour la justification : on la retire sous 768 px. */
/* La justification ne vaut que sur une colonne assez large : dans une
   colonne de 300 px (les textes à côté de la photo d'Équipe, les trois
   colonnes de « Qui nous sommes »), elle creuse des blancs entre les mots.
   Le module de texte devient un conteneur interrogeable, et la règle ne
   s'applique qu'à partir de 560 px — la largeur à partir de laquelle une
   ligne de 18 px porte plus de 60 caractères. ATTENTION : le conteneur va
   sur le module, pas sur la colonne. Posé sur .fl-col-content, il
   retirait à la colonne sa largeur (containment en ligne sur un élément
   flexible) et « Qui nous sommes » s'affichait en une colonne d'une
   lettre de large — vu le 21.09.2026. Posé sur tout module de texte, il
   empilait les lettres de « PHASE 1 » dans l'accordéon des phases SIA,
   dont l'étiquette est un module de texte dans une boîte flexible. Seuls
   les modules enfants directs d'une colonne sont des blocs en flux
   normal, dont la largeur vient de la colonne : le containment n'y change
   rien, et ce sont eux qui portent les paragraphes. */
/* Justifié partout, colonnes étroites comprises : Victor a marqué d'un
   « J » les colonnes de 490 px de l'accueil et de l'équipe, et d'un trait
   ondulé le bord droit d'une colonne de 330 px laissée en drapeau. La
   coupure des mots (hyphens) est ce qui tient les blancs dans une colonne
   étroite. Les listes à puces restent à gauche : une puce justifiée est une
   puce à trous, et personne ne l'a demandée. Le seuil par requête de
   conteneur essayé le 21.09 est retiré ; le conteneur avec lui. */
/* 4 bis. Et la limite de 768 px, reposée le 21.09.2026 après mesure.
   Justifié partout voulait dire justifié aussi sur téléphone, où la colonne
   fait 295 px : « 1052   Le   Mont-sur-Lausanne, » étirée sur toute la
   largeur, trois espaces entre chaque mot, des rivières visibles à l'œil nu
   sur 76 paragraphes de l'accueil. Le site d'origine ne justifie rien du
   tout. On garde la justification là où elle a été demandée — les colonnes
   de bureau — et le drapeau là où la ligne est trop courte pour elle.
   `hyphens: auto` reste en dehors de la requête : la coupure des mots sert
   autant en drapeau, elle évite les bords en dents de scie. */
.fl-rich-text p:not([style*="center"]) {
  hyphens: auto;
}

@media (min-width: 768px) {
  .fl-rich-text p:not([style*="center"]) {
    text-align: justify;
  }
}

/* Le pied de page reste en drapeau à TOUTES les largeurs : ses colonnes font
   235 px, et « SwissELIX SA / En Budron H9 / 1052 Le Mont-sur-Lausanne » n'y
   tient jamais assez de mots par ligne pour être justifiée sans trous. */
.fl-builder-content[data-type="footer"] .fl-rich-text p {
  text-align: left;
}

.fl-rich-text li {
  text-align: left;
}

/* Le bouton « Justifier » de l'atelier (21.09.2026) pose l'alignement sur
   le paragraphe visé ; quand le bloc EST le paragraphe, sur une enveloppe
   span.selx-aligne à l'intérieur, la seule chose qui parte en base. Elle
   se comporte en bloc pour que l'alignement ait prise. */
.selx-aligne {
  display: block;
}

/* 5. Les cartes de prestations de l'accueil. Mesuré à 1 280 px : une case de
   grille de 419 px ne laissait que 250 px au texte, parce que le module
   garde ses marges latérales de 20 px à l'intérieur d'une case qui a déjà
   son écart, et que la carte y ajoute 20 px de chaque côté. Trois colonnes
   ont été essayées : 153 px de texte, pire. On garde deux colonnes, on
   retire les marges du module dans la grille (l'écart de la grille suffit),
   et la cinquième carte, seule sur sa rangée, se centre à la largeur d'une
   colonne au lieu de rester collée à gauche. */
.prestations-accueil > .fl-module > .fl-module-content {
  margin-left: 0;
  margin-right: 0;
}

.prestations-accueil .pp-infobox.layout-3 {
  padding: 26px 28px;
}

.prestations-accueil .pp-infobox-description,
.prestations-accueil .pp-infobox-description p {
  font-size: 16px;
  line-height: 25px;
}

@media (min-width: 768px) {
  .prestations-accueil > *:nth-child(5):last-child {
    grid-column: 1 / -1;
    width: calc(50% - 15px);
    justify-self: center;
  }
}

/* 6. Les vignettes de références : plusieurs photos sont à dominante
   blanche (ciel, neige), et sur le fond blanc de la page la vignette
   semblait vide, « en attente de contenu » (Nicolas Ecknauer, 18.09). Un
   contour d'un pixel et une ombre légère lui rendent ses bords. */
.pp-content-post-grid .pp-content-post,
.pp-content-grid-post {
  border: 1px solid #e3e8ea;
  box-shadow: 0 1px 3px rgba(34, 49, 58, 0.06);
}

/* 6 bis. La photo de la vignette suit la largeur de sa colonne. Le thème
   la fige à 387 × 191 px (feuille 41-layout), mesure prise dans une grille
   plus large que la nôtre : dans une colonne de 333 px, le tiers droit de
   la photo ET du titre posé dessus partait sous le bord (Victor, 21.09 :
   « cut des textes dans les Références »). Même remède que le thème
   applique lui-même sous 420 px. */
.pp-content-post-grid .pp-content-grid-post-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 387 / 191;
}

/* 7. Le titre « Références » des pages de prestations et d'articles :
   80 px de marge au-dessus, pour un titre de 27 px. 40 suffisent. */
.fl-module-heading h2.fl-heading-text[data-bloc="t10"],
h2[data-bloc="t10"] {
  margin-top: 40px !important;
}

/* 8. La page News, mesurée le 21.09 après les captures de Victor : 186 px
   entre la barre des rubriques et le premier titre de section, 96 px entre
   l'introduction d'une rubrique et sa première carte, les cartes de posts
   sur 745 px de large parce que le thème donne 68 % à la colonne des
   sections. Chaque section perd les marges que sa rangée, son titre et
   son module empilaient ; la colonne prend toute la largeur, et les cartes
   se rangent sur trois colonnes. */
.rubriques-barre {
  margin-bottom: 0;
}

.coulisses[data-rubrique] > .fl-row-content-wrap {
  padding-top: 0 !important;
  padding-bottom: 8px !important;
}

.coulisses[data-rubrique] .fl-col-group > .fl-col {
  width: 100% !important;
  max-width: none;
}

.coulisses[data-rubrique] h2.fl-heading-text {
  margin: 18px 0 6px !important;
}

.coulisses[data-rubrique] .fl-module-rich-text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.coulisses[data-rubrique] .fl-module-pp-content-grid {
  margin-top: 0;
}

.coulisses .coulisses-liens {
  margin-top: 14px;
}

/* 9. Les logos des certificats (SCL, ISO 9001), sur l'accueil et les
   prestations : la galerie du thème les empilait ou les décalait, et le
   logo SCL, livré avec une marge blanche dans son image, paraissait plus
   petit que l'ISO. Côte à côte, centrés, même hauteur, et le SCL agrandi
   d'un cinquième dans son cadre pour compenser sa marge. */
.fl-gallery {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.fl-gallery .fl-gallery-item {
  width: auto;
  margin: 0;
}

.fl-gallery .fl-gallery-item figure {
  overflow: hidden;
}

/* Trois classes : la règle « photo-remplit-sa-colonne » plus haut en a deux
   et donnerait sinon la largeur de la colonne aux logos. */
.fl-gallery .fl-photo-content img.fl-photo-img {
  height: 140px;
  width: auto;
}

/* L'agrandissement d'un cinquième a été retiré le 21.09.2026 : la figure est
   en `overflow: hidden`, et 168 px d'image dans un cadre de 140 coupaient
   14 px de chaque côté — la lettre « n » de « nen » et le « S » de « SCL
   Stufe 3 » tranchés sur téléphone. Un logo de certification ne se tronque
   pas. La marge blanche du fichier reste, le logo paraît un peu plus petit
   que l'ISO : c'est ce que le fichier contient, et cela se corrige en
   recadrant l'image, pas en la débordant de son cadre. */
.fl-gallery .fl-photo-content img.fl-photo-img[src*="Certificat-SCL"] {
  object-fit: contain;
  object-position: center;
}

/* 10. La colonne « Activités principales » des prestations : ses puces à
   18 px la faisaient dépasser de 340 px le texte de gauche, qui finissait
   sur du vide. À 16 px, la liste est plus courte ; l'encadré des bénéfices,
   passé sous le texte, comble le reste. */
.fl-col-small .fl-rich-text li {
  font-size: 16px;
  line-height: 24px;
}

/* Les titres de section remontés de h3 à h2 pour que le sommaire de la page
   ne saute pas de chapitre. Ils portent une classe témoin : sans elle, ils
   prendraient la taille des h2 — 50 px au lieu de 32 — alors que les vrais h2
   de la page, eux, doivent garder la leur. */
h2.selx-titre-3.fl-heading-text,
h2.selx-titre-3 .fl-heading-text {
  font-size: 27px;
  line-height: 35px;
}

@media (max-width: 768px) {
  h2.selx-titre-3.fl-heading-text,
  h2.selx-titre-3 .fl-heading-text {
    font-size: 21px;
    line-height: 29px;
  }
}

/* « Derniers articles », le titre de la colonne latérale des actualités :
   remonté de h4 à h2, puisqu'il ouvre une section de la page au même titre
   que « Références » juste en dessous. Le thème ne lui donne pas de taille
   réduite sur téléphone : une seule règle suffit. */
h2.selx-titre-4.fl-heading-text,
h2.selx-titre-4 .fl-heading-text,
h3.selx-titre-4 {
  font-weight: 600;
  font-size: 23px;
  line-height: 29px;
}

/* ------------------------------------------------------------------ *
 * Les titres en semi-gras
 * ------------------------------------------------------------------ *
 * Le site posait ses titres en graisse normale. Jost a un regular bien plus
 * léger qu'Inter et la hiérarchie ne tenait plus ; on est d'abord passé au
 * gras. Diane l'a trouvé trop épais — « cela a tendance à écraser notre
 * logo » — et demande un semi-gras. C'est le 600.
 *
 * Le « !important » n'est pas un raccourci. Le constructeur de pages écrit
 * la graisse dans une règle par bloc (.fl-node-xxxx .fl-heading-text), plus
 * spécifique que tout sélecteur raisonnable ; sans lui, la règle ci-dessous
 * ne s'appliquerait qu'aux titres qu'aucun bloc ne réglait. */
h1,
h2,
h3,
h4,
h5,
h6,
.fl-heading-text,
.pp-infobox-title {
  font-weight: 600 !important;
}

/* Exception : les boîtes où un préfixe en gras précède le titre, celles de
 * l'équipe. Là, le titre est le RÔLE de la personne et le préfixe son NOM,
 * et le thème d'origine les distingue par la graisse seule, 700 contre 400,
 * à taille égale. Passer le rôle en semi-gras effaçait la distinction : nom
 * et rôle se lisaient pareil. Le rôle reprend sa graisse normale.
 *
 * Ce qui fait gagner cette exception, c'est son poids et non sa place : les
 * deux sélecteurs ci-dessous comptent trois et deux classes contre une seule
 * à la règle générale. La remonter plus haut ne casserait rien — et c'est
 * pourquoi le garde-fou de test/styles.test.mjs résout la cascade au lieu
 * de comparer deux positions dans le source. */
.pp-infobox-title-prefix ~ .pp-infobox-title-wrapper .pp-infobox-title,
.equipe .pp-infobox-title {
  font-weight: 400 !important;
}

/* ------------------------------------------------------------------ *
 * Le pied de page : verrou du groupe et lien LinkedIn
 * ------------------------------------------------------------------ *
 * Repris de idgo.ch, l'autre société du groupe : le logo porte lui-même la
 * mention « une société du groupe Romande Energie » et mène chez Romande
 * Energie ; le lien LinkedIn est une icône, sous le logo, plutôt qu'un mot
 * glissé entre deux liens légaux. */
.fl-photo-img-svg a {
  display: inline-block;
  line-height: 0;
}

.selx-social {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* La colonne du pied s'aligne à droite sur grand écran et se centre une fois
   les colonnes empilées : l'icône suit le logo au lieu de rester seule dans
   son coin. */
@media (max-width: 767px) {
  .selx-social {
    justify-content: center;
  }
}

.selx-linkedin {
  /* Le pied est peint en #004C67 : l'icône se lit en blanc, et prend le vert
     de la marque au survol. */
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px de zone tactile : la cible reste atteignable au doigt même si le
     dessin n'en occupe que la moitié. */
  width: 44px;
  height: 44px;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.selx-linkedin:hover,
.selx-linkedin:focus-visible {
  color: #95c11f;
}

.selx-linkedin svg {
  display: block;
}

/* ------------------------------------------------------------------ *
 * Les coordonnées des deux sites (page Contact)
 * ------------------------------------------------------------------ *
 * La page d'origine ne donnait les adresses que dans les bulles de la
 * carte, au survol : une adresse complète pour Le Mont-sur-Lausanne, le
 * seul mot « Faoug » pour l'autre, et aucun téléphone. Les bulles restent
 * telles quelles ; les coordonnées sont écrites sous la carte, en blocs
 * modifiables depuis l'atelier.
 *
 * Une colonne, et non deux : la colonne de gauche est étroite
 * (fl-col-small), et deux sites côte à côte y tiendraient mal. Surtout, un
 * site dont on viderait les deux blocs laisserait une colonne vide qui
 * garderait sa place ; ici, les blocs vidés disparaissent et le reste
 * remonte, ce que fait déjà le retrait des blocs vides. */
.selx-coordonnees {
  margin-top: 28px;
}

.selx-coordonnees h3 {
  margin: 0 0 4px;
  font-size: 17px;
  color: #22313a;
}

.selx-coordonnees p {
  margin: 0 0 20px;
  color: #4a585f;
  line-height: 1.6;
}

/* L'adresse d'un site ouvre le plan (Victor, 21.09) : le lien, posé dans le
   texte du bloc (migration 0144, bouton « Lien » de l'atelier), se lit comme
   un lien, bleu de marque et souligné, sinon rien ne dit qu'il mène quelque
   part. */
.selx-coordonnees a {
  color: #2b7bb9;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(43, 123, 185, 0.45);
}

.selx-coordonnees a:hover,
.selx-coordonnees a:focus-visible {
  color: #1f5f91;
  text-decoration-color: currentColor;
}

.selx-coordonnees p:last-child {
  margin-bottom: 0;
}

.selx-telephone {
  font-size: 18px;
  /* Le numéro se lit par groupes : un peu d'air entre les caractères
     évite de le relire deux fois. */
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ *
 * Le champ « Motif » du formulaire de contact
 * ------------------------------------------------------------------ *
 * Le champ est un <select> et non des cases à cocher : réponse 15 de
 * Maxime, un seul motif à la fois — un menu déroulant l'assure par
 * construction. Il reprend le balisage des cinq autres champs, et la
 * feuille du thème habille déjà les menus à côté des champs de saisie et
 * des zones de texte, même taille et même remplissage.
 *
 * Une seule chose manque : la largeur. Les champs texte la tiennent de leur
 * classe « large », qui ne vise que les champs de saisie. Sans cette règle,
 * le menu
 * s'afficherait à la largeur de son option la plus longue, seul champ
 * étroit au milieu d'un formulaire pleine largeur.
 *
 * ERRATUM du 21.09.2026 : la feuille du greffon n'habille PAS le menu comme
 * les champs. Mesuré à l'écran : bordure `1px #767676` à angles droits sur
 * fond blanc, 42 px de haut, contre `1px #e6e6e6` au rayon de 4 px sur fond
 * `#fcfcfc` et 39 px pour les cinq autres champs. Le seul champ ajouté par
 * l'équipe était donc le seul à ne pas ressembler au formulaire. On reprend
 * les valeurs des champs de saisie, mesurées sur eux. */
.gform_wrapper .ginput_container_select select {
  width: 100%;
  height: 39px;
  padding: 0 12px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fcfcfc;
  font: inherit;
  color: #4a585f;
}

/* Les champs passent à 48 px sous 768 px dans la feuille du greffon : le
   menu les suit, sans quoi il ferait un creux dans la colonne. */
@media (max-width: 767px) {
  .gform_wrapper .ginput_container_select select {
    height: 48px;
  }
}

/* ------------------------------------------------------------------ *
 * « Ce que vous y gagnez » (pages de prestation)
 * ------------------------------------------------------------------ *
 * Sylvain demande de traduire les expertises en bénéfices client : trois
 * bénéfices concrets en tête de chaque prestation. L'encadré se pose entre
 * la photo d'ouverture et la première section, pour que le titre et sa
 * photo restent ensemble et que le premier texte lu soit le bénéfice.
 *
 * Quatre pages sur cinq le reçoivent. Planification de lignes aériennes a
 * déjà un paragraphe libre sous son titre, son bloc t2 : le texte s'y pose
 * depuis l'atelier, sans rien ajouter au gabarit.
 *
 * Le titre naît écrit, le paragraphe naît vide — les cinq textes n'existent
 * pas encore. Même règle qu'aux fiches de référence : tant que le
 * paragraphe n'est pas écrit, l'encadré s'efface en entier, titre compris.
 * Sans cela, quatre pages afficheraient « Ce que vous y gagnez » suivi de
 * rien. */
.selx-benefices:not(:has(p)) {
  display: none;
}

.selx-benefices {
  /* Depuis le 21.09.2026 l'encadré vit sous le texte de la prestation,
     dans la colonne de gauche, et non plus sous la photo en pleine largeur :
     il remplit le vide que la colonne des activités laissait sous le texte,
     et les 110 px entre la photo et lui ont disparu. */
  margin: 22px 0 0;
  padding: 18px 22px;
  background: rgba(221, 233, 183, .3);
  border-left: 3px solid #95c11f;
}

.selx-benefices h3 {
  margin: 0 0 10px;
  font-size: 21px;
  color: #22313a;
}

.selx-benefices p {
  margin: 0;
  line-height: 1.7;
  color: #4a585f;
}

/* ------------------------------------------------------------------ *
 * Le récit d'une fiche de référence, et son témoignage
 * ------------------------------------------------------------------ *
 * Sylvain demande une structure commune aux fiches de projet : Le projet,
 * Le défi, La solution, Le résultat, et un témoignage de l'ingénieur. Le
 * gabarit générique — celui des fiches créées depuis l'administration —
 * porte les quatre sections et les deux blocs de citation.
 *
 * Les quatre titres naissent écrits, les quatre paragraphes naissent
 * vides. Un paragraphe vide est retiré de la page, mais son titre, lui,
 * n'est pas vide et resterait : quatre titres orphelins sur une fiche à
 * peine créée. La règle ci-dessous efface la section entière tant que son
 * paragraphe n'existe pas — la structure est donc proposée dans l'atelier
 * sans rien imposer à la page. Écrire un paragraphe fait paraître sa
 * section, et elle seule. */
.selx-fiche-recit {
  margin-top: 34px;
}

.selx-fiche-section:not(:has(p)) {
  display: none;
}

.selx-fiche-section + .selx-fiche-section {
  margin-top: 26px;
}

.selx-fiche-section h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: #22313a;
}

.selx-fiche-section p {
  margin: 0;
  line-height: 1.7;
  color: #4a585f;
}

/* Le témoignage : les deux blocs naissent vides et sont retirés vides.
   Le cadre qui les porte disparaît avec eux, faute d'enfant — sinon il
   resterait un filet vert au milieu de la fiche. */
.selx-citation-bloc:not(:has(> *)) {
  display: none;
}

.selx-citation-bloc {
  margin-top: 34px;
  padding: 22px 26px;
  border-left: 3px solid #dde9b7;
  background: rgba(221, 233, 183, .18);
}

.selx-citation {
  margin: 0;
  font-size: 19px;
  font-style: italic;
  line-height: 1.6;
  color: #22313a;
}

.selx-citation-auteur {
  margin: 12px 0 0;
  font-size: 15px;
  color: #6b7a82;
}

/* ------------------------------------------------------------------ *
 * La spécialité et la phrase d'un collaborateur (page Équipe)
 * ------------------------------------------------------------------ *
 * Sylvain demande d'humaniser le discours : deux lignes de plus par
 * collaborateur, sa spécialité et un mot de lui. Les deux blocs naissent
 * vides et le générateur retire un paragraphe vide : tant que personne n'a
 * rien écrit, la boîte garde exactement l'allure d'aujourd'hui, et le
 * premier texte posé depuis l'atelier apparaît seul, sans attendre les
 * vingt-trois autres.
 *
 * La spécialité se lit sous le rôle, avant les coordonnées ; la phrase
 * ferme la boîte, en retrait et en italique, pour qu'on la lise comme une
 * parole et non comme une ligne de plus de la fiche. */
.equipe .selx-specialite {
  margin: 6px 0 10px;
  font-size: 15px;
  color: #2b7bb9;
}

.equipe .selx-phrase {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid #dde9b7;
  font-style: italic;
  line-height: 1.6;
  color: #6b7a82;
  text-align: left;
}

/* ------------------------------------------------------------------ *
 * La bande d'indicateurs (accueil)
 * ------------------------------------------------------------------ *
 * Quatre chiffres sous l'ouverture, demandés par Sylvain : des repères dès
 * l'arrivée. Chaque nombre et chaque libellé est un bloc, pour que Maxime
 * les tienne à jour depuis l'atelier sans personne.
 *
 * Les valeurs posées sont des EXEMPLES — la question 13 est sans réponse —
 * et la bande le dit à l'écran, dans un bloc de note. Vider ce bloc depuis
 * l'atelier fait disparaître la phrase : c'est le geste qui clôt la tâche
 * le jour où les vrais chiffres sont posés.
 *
 * Même raison qu'à la section voisine pour ne pas prendre les colonnes du
 * thème : elles tiennent leur largeur d'une règle par nœud, et un nœud
 * neuf n'en a pas. */
.selx-indicateurs {
  padding: 10px 0 0;
}

.selx-indicateurs-bande {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  text-align: center;
}

.selx-indicateur {
  padding: 22px 16px;
  background: #fff;
  border: 1px solid rgba(74, 88, 95, .12);
  box-shadow: 0 2px 10px rgba(74, 88, 95, .07);
}

/* Un indicateur dont le chiffre et le libellé ont été vidés : les deux
   paragraphes sont retirés de la page, la carte resterait vide. */
.selx-indicateur:not(:has(> *)) {
  display: none;
}

.selx-indicateur-chiffre {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  color: #2b7bb9;
}

.selx-indicateur-libelle {
  margin: 8px 0 0;
  color: #4a585f;
  line-height: 1.4;
}

.selx-indicateurs-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: #6b7a82;
}

/* ------------------------------------------------------------------ *
 * « Qui nous sommes » (accueil)
 * ------------------------------------------------------------------ *
 * Les quatre paragraphes de présentation de la page Équipe, remontés sur
 * l'accueil : l'introduction, puis les trois volets — Notre approche,
 * Innovation et numérisation, Organisation et partenariats.
 *
 * Les colonnes sont les nôtres et non celles du thème. Le constructeur de
 * pages d'origine ne donne pas de largeur à .fl-col : elle est écrite dans
 * une règle par nœud, sur la classe .fl-node-xxxx, engendrée au moment où
 * la page était bâtie dans WordPress. Une colonne neuve n'a pas
 * de nœud, donc pas de largeur : elle se serait empilée. Une grille
 * évite d'inventer un identifiant de nœud auquel rien ne répondrait. */
.selx-qui-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 30px;
}

/* Un volet dont on a vidé le titre et le texte depuis l'atelier : les deux
   éléments sont retirés de la page, mais leur conteneur resterait et
   garderait sa colonne. Sans enfant, il s'efface — et les deux autres se
   répartissent la largeur. */
.selx-qui-volet:not(:has(> *)) {
  display: none;
}

.selx-qui-volet h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #22313a;
}

.selx-qui-volet p {
  margin: 0;
  color: #4a585f;
  line-height: 1.7;
  /* Les trois volets ne sont pas des modules de texte du thème : la règle
     « justifié partout » ne les atteignait pas (Victor, 21.09 : « les 3
     blocs ne sont pas justifiés »). Même limite de 768 px que les modules de
     texte : empilés sur téléphone, ils font 295 px de large. */
  hyphens: auto;
}

@media (min-width: 768px) {
  .selx-qui-volet p {
    text-align: justify;
  }
}

/* ------------------------------------------------------------------ *
 * Passe d'accessibilité et de finition du 21.09.2026
 * ------------------------------------------------------------------ *
 * Ce qui suit répond aux deux audits du 21.09.2026 (interface et
 * ergonomie), relevé dans le navigateur à 1 280 et à 375 px. Chaque règle
 * dit ce qu'elle a mesuré et ce qu'elle corrige. Rien ici ne change un
 * texte : ce sont des couleurs, des tailles de cible et des états. */

/* A1. Le focus clavier, visible.
   Mesuré : `outline: none` calculé sur les liens du menu, les liens du
   contenu et les sept champs du formulaire ; la bordure d'un champ ne
   bougeait pas au focus. Qui navigue au clavier ne savait jamais où il
   était (WCAG 2.4.7, en échec). `:focus-visible` et non `:focus` : la
   souris ne déclenche pas le contour, seul le clavier le fait. Le bleu est
   celui de la marque, et `outline-offset` le détache du trait du champ. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #2b7bb9;
  outline-offset: 2px;
}

/* Le thème écrit `outline: none` sur les liens du menu avec une règle plus
   spécifique que la précédente : il faut la nommer pour la reprendre. */
ul#menu-home a:focus-visible,
.fl-page-nav a:focus-visible,
.fl-menu a:focus-visible {
  outline: 3px solid #2b7bb9;
  outline-offset: 2px;
}

/* A2. Les déroulants du menu s'ouvrent au clavier.
   Mesuré : au focus sur « Prestations », `#sub-menu-1` restait
   `display: none; visibility: hidden; opacity: 0` — les cinq prestations
   étaient inatteignables autrement que par la page /prestations. Le thème
   n'ouvre le sous-menu qu'au survol. `:focus-within` fait au clavier ce que
   `:hover` fait à la souris ; l'état annoncé (`aria-expanded`) est tenu par
   le script de `outils/analytique.mjs`.

   Le « !important » n'est pas un raccourci, mesuré le 21.09.2026 : le
   constructeur de pages écrit le masquage dans une règle par nœud,
   .fl-node-n27e9cdbqi3r .menu .fl-has-submenu .sub-menu, qui compte quatre
   classes. Aucun sélecteur raisonnable ne la dépasse sans nommer un
   identifiant de nœud, lequel changerait à la prochaine extraction. */
.fl-has-submenu:focus-within > .sub-menu,
.fl-has-submenu:focus-within > ul.sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* A3. Le mouvement, pour qui n'en veut pas.
   Le carrousel de l'accueil défile seul (transform de −994 à −1491 px en
   quatre secondes) et le thème anime ses blocs à l'apparition. Aucune règle
   `prefers-reduced-motion` n'existait côté site (seule celle de FontAwesome
   était chargée). Ceci respecte le réglage du système : les animations
   s'arrêtent, et `opacity: 1` garantit qu'un bloc animé à l'apparition reste
   visible au lieu de rester transparent faute d'animation pour le révéler. */
@media (prefers-reduced-motion: reduce) {
  .bx-viewport ul,
  .bx-viewport li,
  .fl-post-carousel * {
    transition: none !important;
    animation: none !important;
  }

  .fl-animation {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* A4. Les pastilles du carrousel : 10 × 10 px mesurés, soit un quart de la
   cible de 24 px que demande la WCAG 2.5.8. Le dessin garde sa taille ; le
   remplissage porte la zone cliquable à 24 px, et le nom accessible est posé
   par le script (« Diapositive 1 », « Diapositive 2 »…). */
.bx-pager :is(a, button),
.bx-pager-item :is(a, button) {
  position: relative;
}

.bx-pager :is(a, button)::after,
.bx-pager-item :is(a, button)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* A5. Les boutons de la barre des rubriques : 40 px mesurés, 44 demandés au
   doigt. Deux pixels de remplissage de chaque côté suffisent. */
.rubriques-barre a {
  padding-top: 11px;
  padding-bottom: 11px;
}

/* A6. Les liens du pied de page faisaient 16 px de haut — la hauteur de
   leur texte, sans un pixel autour. Une cible de 44 px sans rien changer à
   ce qui se voit : le remplissage est en `inline-block` et les liens
   restent sur leur ligne. */
.fl-builder-content[data-type="footer"] a {
  display: inline-block;
  padding: 14px 0;
}

/* Sauf le logo et l'icône LinkedIn, qui ont déjà leur cible et que ce
   remplissage décalerait de leur colonne. */
.fl-builder-content[data-type="footer"] .fl-photo-img-svg a,
.fl-builder-content[data-type="footer"] .selx-linkedin {
  padding: 0;
}

/* A7. Sous 768 px, 16 px de corps : en dessous, iOS agrandit la page au
   moment où l'on touche un champ, et l'on se retrouve à faire glisser la
   mise en page pour lire ce qu'on écrit. Mesuré : `body` à 14 px, les
   champs à 15. */
@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  .gform_wrapper input,
  .gform_wrapper textarea,
  .gform_wrapper select {
    /* Mesuré à 15 px malgré la règle sans poids : le thème nomme le champ. */
    font-size: 16px !important;
  }
}

/* A8. L'interligne de la bande « standards » et de l'appel à l'action sur
   téléphone : 40 px pour un corps de 16, soit un double interligne, parce
   que le thème réduit la taille sous 768 px mais garde l'interligne fixe
   écrit dans la feuille du nœud. Les deux nœuds sont nommés plutôt que tous
   les paragraphes : l'accordéon des phases SIA et les cartes dépendent,
   eux, de l'interligne qu'on leur a donné. */
@media (max-width: 767px) {
  .fl-node-7fscal6mxwnp p,
  .fl-node-eibkmrv651tg p {
    line-height: 1.6 !important;
  }
}

/* A11. Un appel à l'action dans le premier écran de l'accueil. Les deux
   audits UX du 21.09.2026 le demandaient : rien à cliquer avant 2 971 px,
   le seul endroit où tous les visiteurs passent. Un bloc « cta1 » sous le
   h1, dans le même cartouche, en bouton bordé blanc comme « Contactez-nous »
   du pied de page ; vide, blocs-vides.mjs retire le lien entier. */
.selx-cartouche .selx-accueil-cta { margin: 20px 0 0; line-height: 1; }
.fl-row .fl-col .selx-cartouche .selx-accueil-cta a,
.selx-cartouche .selx-accueil-cta a {
  display: inline-block; padding: 13px 26px; border: 2px solid #fff; border-radius: 3px;
  color: #fff !important; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; line-height: 1.2; transition: background-color .2s, color .2s;
}
.fl-row .fl-col .selx-cartouche .selx-accueil-cta a:hover,
.fl-row .fl-col .selx-cartouche .selx-accueil-cta a:focus-visible { background: #fff; color: #004c67 !important; }
@media (max-width: 767px) {
  .selx-cartouche .selx-accueil-cta { margin-top: 14px; }
  .selx-cartouche .selx-accueil-cta a { padding: 12px 18px; font-size: 12.5px; }
}

/* A12. Contact : les horaires sous le téléphone, le délai de réponse avant
   le bouton, la mention de confidentialité sous le formulaire — trois blocs
   demandés par les audits UX du 21.09.2026 (« pas d'horaires, pas de délai,
   pas de mention »). Vides, blocs-vides.mjs les retire. */
.selx-coordonnees .selx-horaires { margin: -6px 0 18px; font-size: 15px; color: #5f6e76; }
.gform_wrapper .selx-delai { margin: 6px 0 4px; font-size: 15px; color: #5f6e76; }
.gform_wrapper .selx-confidentialite { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: #5f6e76; }
.gform_wrapper .selx-confidentialite a { color: #2b7bb9; }

/* A9. Les filtres de la page Références : blanc sur le bleu clair du thème,
   3,02:1 mesuré, pour du 16 px semi-gras qui en demande 4,5. Un ton plus
   sombre de la même famille : 4,64:1, et le filtre actif garde son bleu
   nuit, donc la distinction reste. */
ul.pp-post-filters li:not(.pp-filter-active):not(:hover):not(:focus) {
  /* Le constructeur écrit la sienne sous le nœud (« .fl-node-… ul.pp-post-filters li »),
     quatre classes qu'aucun sélecteur raisonnable ne dépasse : mesuré à 3,02:1
     après une première règle sans poids, le 21.09.2026 au soir. Le filtre actif,
     le survol et le focus gardent le bleu nuit du thème. */
  background: #4a7b8f !important;
}

/* Le carrousel : le thème pose « .bx-wrapper a:focus { outline: -webkit-focus-ring-color auto 5px } »,
   plus lourd que la règle générale ; le même anneau de marque, ici aussi. */
.bx-wrapper a:focus-visible,
.bx-wrapper button:focus-visible {
  outline: 3px solid #2b7bb9 !important;
  outline-offset: 2px;
}

/* A10. La page News sur une seule marge.
   Mesuré à 1 280 px : titre de page 103, introduction 103, barre des
   rubriques 83, titres de rubrique 83, introductions de rubrique 103,
   vignettes 103, cartes de posts 83 — un zigzag de 20 px sur toute la
   hauteur de la page. Sur 375 px : 20, 20, 0, 20, 40, 40, 20. Tout est
   ramené sur la marge du titre, 103 en bureau et 20 sur téléphone. */
.rubriques-barre {
  margin-left: 20px;
  margin-right: 20px;
}

@media (min-width: 768px) {
  .coulisses[data-rubrique] h2.fl-heading-text {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .coulisses .coulisses-liens {
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* Sur téléphone, c'est l'inverse : la rangée porte déjà ses 20 px et le
   module en ajoute 20, ce qui met l'introduction et les vignettes à 40 quand
   le titre est à 20. */
@media (max-width: 767px) {
  .coulisses[data-rubrique] .fl-col-content > .fl-module-rich-text,
  .coulisses[data-rubrique] .fl-col-content > .fl-module-pp-content-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* La grille d'actualités porte sa marge un cran plus bas, sur le contenu
     du module et non sur le module : sans cette seconde règle, les vignettes
     restaient seules à 40 px quand tout le reste était revenu à 20. */
  .coulisses[data-rubrique] .fl-module-pp-content-grid > .fl-module-content {
    margin-left: 0;
    margin-right: 0;
  }
}

/* A11. « EN SAVOIR PLUS » calé en bas des cartes.
   Mesuré sur une page de prestation : trois cartes d'une même rangée
   portaient leur lien à 226, 214 et 202 px — l'œil lit trois hauteurs pour
   une seule rangée. Le texte de la carte devient une colonne dont le lien
   est le dernier élément, poussé en bas par la marge automatique. Rien
   n'est réservé : une carte au titre court ne creuse pas de trou. */
.pp-content-post-grid .pp-content-post,
.pp-content-post-grid .pp-content-grid-post {
  display: flex;
  flex-direction: column;
}

.pp-content-post-grid .pp-content-grid-post-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pp-content-post-grid .pp-content-grid-post-more-link {
  margin-top: auto;
}

/* La grille des références garde sa carte d'un bloc : son titre est en
   surimpression sur la photo, il n'y a pas de colonne à caler. */
.pp-content-post-grid .pp-content-grid-post .custom-post-grid-container {
  display: block;
}

/* A12. L'organigramme de la page Équipe : 1 151 px d'image réduits à 335 sur
   téléphone, texte de 2 à 3 px. Le générateur l'enveloppe désormais d'un
   lien vers le fichier pleine taille (outils/styles.mjs) ; la phrase qui le
   dit ne paraît que là où l'image devient illisible. */
.selx-organigramme {
  display: block;
}

.selx-organigramme-ouvrir {
  display: none;
  margin: 8px 0 0;
  text-align: center;
  font-size: 15px;
}

.selx-organigramme-ouvrir a {
  color: #2b7bb9;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .selx-organigramme-ouvrir {
    display: block;
  }
}

/* A12 bis. La date d'une actualité sur sa vignette, dans la même forme et la
   même couleur que celle des cartes de publications LinkedIn juste à côté :
   « Publication du 16 juillet 2026 ». Elle vient de la fiche de l'article et
   part avec elle quand il n'y en a pas. */
.selx-date-article {
  margin: 6px 0 0;
  color: #5f6e76;
  font-size: 15px;
  line-height: 1.6;
}

/* A13. Le pied de page sur téléphone : l'icône LinkedIn se centrait sous un
   logo resté aligné à droite, et flottait donc au milieu de rien. Les deux
   se centrent. */
@media (max-width: 767px) {
  .fl-builder-content[data-type="footer"] .fl-photo-align-right {
    text-align: center;
  }

  .fl-builder-content[data-type="footer"] .fl-photo-align-right .fl-photo-content {
    margin: 0 auto;
  }
}

/* A14. Le menu de l'en-tête tient sur une ligne quand on lui ajoute une
   entrée.

   Le thème donne 14 px de part et d'autre de chaque lien et laisse le menu
   revenir à la ligne (flex-wrap: wrap). Six entrées occupaient 688 px dans
   les 785 px utiles de la colonne ; la septième — « Accueil », ajoutée depuis
   l'écran Menu le 24.09.2026 — portait le total à 795 px, et « Contact »
   partait seul sur une deuxième ligne, sous un en-tête qui doublait de
   hauteur.

   Deux leviers, dans cet ordre.

   Les marges latérales d'abord : 9 px au plus, jamais moins de 4, contre les
   14 px du thème. Le plafond est 9 et non 14, et c'est le point que la
   première version de cette règle a manqué : la colonne du menu est plafonnée
   à 785 px dès 1 150 px de fenêtre, alors qu'une marge en vw, elle, continue
   de grossir. À 2 560 px elle revenait à 14 px et le menu repassait sur deux
   lignes — le défaut réapparaissait précisément sur les grands écrans, les
   seuls que l'on n'avait pas mesurés. Le vw ne sert donc qu'à RÉTRÉCIR.

   La taille du texte ensuite, pour les écrans étroits. La colonne du menu
   vaut 75 % d'une rangée à largeur fixe : elle cesse de grandir vers
   1 150 px, et rétrécit en dessous. À 820 px elle n'offre plus que 534 px,
   et le menu passait déjà à deux lignes AVANT cette correction, avec six
   entrées seulement — un défaut de la tranche tablette que personne n'avait
   relevé. D'où 2.17vw : la police atteint les 25 px du thème à 1 150 px,
   exactement là où la colonne atteint sa largeur maximale, et pas avant.
   Mesuré : 25 px à 1 150, 19,5 à 900, 16,9 à 780 — une seule ligne partout.

   Seulement au-dessus de 768 px : en dessous, le menu n'est plus horizontal,
   c'est le tiroir du hamburger, où ces marges font la surface de frappe et
   où la police doit rester lisible au doigt.

   Le remède ne fait pas de miracle : au-delà de huit entrées courtes, le
   menu reviendra à la ligne. La réponse est alors un libellé plus court ou
   un déroulant, pas une police plus petite. */
/* A15. Les ancres de section : la place de l'en-tete collant.

   Chaque titre de section porte desormais id="section-<cle>", pose a la
   generation depuis le data-bloc qui le rend deja modifiable (ancres.mjs).
   Sans cette marge, le titre vise arrive SOUS l'en-tete et l'on croit que le
   lien a manque sa cible. Meme valeur que pour les rubriques de News, dont
   c'est le meme en-tete.

   Pas de scroll-behavior ici : le theme anime le defilement par jQuery, et
   les deux se disputaient la page -- l'adresse prenait bien le diese mais
   rien ne bougeait. L'essai des rubriques l'interdit deja. */
[id^="section-"] {
  scroll-margin-top: 110px;
}

@media (min-width: 769px) {
  ul#menu-home.fl-menu-horizontal > li > a,
  ul#menu-home.fl-menu-horizontal > li > .fl-has-submenu-container > a {
    padding-left: clamp(4px, 0.62vw, 9px);
    padding-right: clamp(4px, 0.62vw, 9px);
    font-size: clamp(16px, 2.17vw, 25px);
  }
}

/* A16. La fiche d'une reference creee : la vignette a cote de la
   description, les donnees du projet dans la colonne de droite.

   Les references reprises des fiches Word du 24.09.2026 portent deux images :
   la photo d'en-tete (2:1, aussi celle de la grille) et une vignette, souvent
   un schema, en 4:5, 1:1 ou 2:1. La vignette prend 40 % de la colonne a
   cote du texte, et passe dessous sur telephone. Une vignette retiree ne
   laisse pas son cadre : sans image, la figure disparait. La liste des
   autres specifications suit la meme regle que les sections du recit. */
.selx-ref-corps {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.selx-ref-texte {
  flex: 1 1 auto;
  min-width: 0;
}

.selx-ref-chapo {
  font-weight: 600;
}

.selx-ref-description p {
  margin: 0 0 14px;
}

/* Le theme donne 20 px de marge laterale a chaque module ; la figure n'en
   est pas un, elle les prend ici pour s'aligner sur le texte. */
.selx-ref-vignette {
  flex: 0 0 40%;
  margin: 6px 20px 0 0;
}

.selx-ref-vignette:not(:has(img)) {
  display: none;
}

/* Une vignette en 2:1 serait illisible a 40 % : elle passe sous le texte,
   en pleine largeur. Le format se lit dans le nom du fichier, pose par la
   preparation des images (<nom>_vignette_LxH, a cote de _portrait_ et
   _carre_). Une image deposee depuis l'atelier reste a cote du texte. */
.selx-ref-corps:has(img[src*="_vignette_"]) {
  flex-direction: column;
}

.selx-ref-corps:has(img[src*="_vignette_"]) .selx-ref-vignette {
  flex-basis: auto;
  align-self: stretch;
  width: auto;
  margin: 0 20px;
}

/* La colonne des donnees est etroite : justifiee comme le reste du texte
   (.fl-rich-text p:not([style*="center"]), plus haut), elle ouvrait des
   trous entre l'etiquette et sa valeur. Le double nom de classe est la
   pour l'emporter sur cette regle-la. */
.selx-ref-donnees.fl-rich-text p,
.selx-ref-donnees.fl-rich-text li {
  text-align: left;
}

.selx-ref-vignette img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e3e8ea;
}

.selx-ref-vignette figcaption p {
  margin: 8px 0 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.4;
  color: #4a585f;
}

.selx-ref-donnees p,
.selx-ref-chiffres p {
  margin: 0 0 6px;
  line-height: 1.45;
}

.selx-ref-autres:not(:has(li)) {
  display: none;
}

.selx-ref-autres h4 {
  margin: 22px 0 8px;
  font-size: 17px;
  color: #22313a;
}

.selx-ref-autres ul {
  margin: 0;
  padding-left: 18px;
}

.selx-ref-autres li {
  margin: 0 0 5px;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .selx-ref-corps {
    flex-direction: column;
    gap: 18px;
  }

  .selx-ref-corps .selx-ref-vignette,
  .selx-ref-corps:has(img[src*="_vignette_"]) .selx-ref-vignette {
    flex-basis: auto;
    width: auto;
    max-width: 480px;
    margin: 0 20px;
  }
}

/* A17. Le titre d'une reference : un titre court, un sous-titre fin.

   Les titres des fiches Word faisaient jusqu'a 140 signes, poses en 42 px
   dans une colonne de 660 px a cote d'une colonne vide : quatre lignes de
   gras. Le gabarit generique porte maintenant le projet seul en titre et,
   dessous, « Client · ligne » en Jost 300 (bloc t2_sous). La colonne du
   titre prend toute la largeur, celle de la photo qui suit.

   Sur les cartes, le titre de la fiche (« Client: Projet ») est coupe par
   partagerTitre (blocs-engendres.mjs) : le client passe au-dessus en petites
   capitales, le projet reste seul en titre. */
.fl-col-group:has(.selx-ref-titre) > .fl-col {
  width: 100%;
  max-width: none;
}

h1.selx-ref-titre {
  font-size: clamp(30px, 3.1vw, 40px);
  line-height: 1.2;
  margin-bottom: 10px;
}

.selx-ref-soustitre {
  margin: 0 20px 26px;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .01em;
  color: #4a585f;
}

.selx-carte-client {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #2b7bb9;
}

/* Sur la grille, le titre est en surimpression blanche sur la photo. */
.pp-content-grid-overlay-text .selx-carte-client {
  color: #fff;
  opacity: .9;
}

.selx-carte-client:empty {
  display: none;
}

@media (max-width: 768px) {
  h1.selx-ref-titre {
    margin-bottom: 6px;
  }

  .selx-ref-soustitre {
    margin-bottom: 18px;
  }
}

/* A18. Le fond du premier ecran de l'accueil, en WebP.
   Le constructeur le pose en JPEG dans sa feuille ; le WebP de meme nom
   existe (npm run images) et pese 18 % de moins. Le navigateur qui sait le
   lire le prend, les autres gardent le JPEG. Il est en plus precharge dans
   l'en-tete (prechargerLeFondDeLAccueil) : c'est l'element qui decide du
   premier affichage sur telephone, et il n'etait decouvert qu'apres la
   feuille du constructeur -- 3,3 s en 4G lente (constat P8 de l'audit du
   25.09.2026). */
.fl-node-uwhqypk3f5xc > .fl-row-content-wrap {
  background-image: image-set(
    url(/app/uploads/2026/02/SwissElix-Header-home.webp) type("image/webp"),
    url(/app/uploads/2026/02/SwissElix-Header-home.jpg) type("image/jpeg")
  );
}

/* A19. Les liens dans le texte se voient sans la couleur.
   Le bleu des liens (#2b7bb9) ne se distingue du texte ardoise (#4a585f) qu'a
   1,62:1 : sans soulignement, un lien ne se voyait qu'a qui percoit bien les
   couleurs (constat P6 de l'audit du 25.09.2026, WCAG 1.4.1). Les boutons et
   les cartes, qui ont leur propre forme, ne sont pas touches. */
.fl-rich-text p a:not(.fl-button):not(.pp-button),
.fl-rich-text li a:not(.fl-button):not(.pp-button) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A20. « Phase 1 » a « Phase 10 » : le gris du theme (#BCBCBC) etait a
   1,65:1 sur blanc. #767676 passe le seuil (4,54:1), en restant un gris
   clair a cote du titre de la phase. */
body .fl-builder-content .zone-cliquable .fl-module-rich-text.fl-rich-text:first-child,
body .fl-builder-content .zone-cliquable .fl-module-rich-text.fl-rich-text:first-child * {
  color: #767676;
}

/* A21. Un deroulant referme par Echap reste ferme tant que le focus est
   dans son entree (script d'accessibilite, outils/analytique.mjs). */
/* Plus fort que la regle A2 (:focus-within), qui ouvre au focus. */
.fl-has-submenu.selx-ferme:focus-within > ul.sub-menu,
.fl-has-submenu.selx-ferme > ul.sub-menu {
  display: none !important;
}