/* =========================================================================
   Propulseo — le strict minimum ajouté au gabarit Agenio.

   Tout le rendu vient de assets/css/style.css, inchangé. Ce fichier ne
   contient que ce que le gabarit ne fournissait pas, et rien d'autre :

     1. l'élargissement du menu déroulant Expertises en trois colonnes,
        construit UNIQUEMENT à partir des propriétés déjà posées par
        .main-nav-area .sub-menu — même fond, même ombre, même rayon, même
        style de lien. Seule la largeur et la répartition changent ;
     2. le champ piège anti-robots du formulaire, invisible par construction ;
     3. le respect de prefers-reduced-motion et un anneau de focus visible ;
     4. l'en-tête collant ;
     5. l'état du formulaire de contact (envoi, succès, erreur) ;
     6. les simulateurs de coût — le seul bloc du site sans équivalent dans le
        gabarit, qui n'a pas de calculateur. Ses classes portent toutes le
        préfixe `ps-sim-`, et ses couleurs sont celles des variables du
        gabarit : aucune teinte n'est inventée.

   Aucune règle ci-dessous ne surcharge une règle du gabarit.
   ========================================================================= */

/* ------------------------------------------- 1. MENU EXPERTISES, 3 COLONNES

   Le gabarit ne connaît qu'un niveau de sous-menu. Le markup émis reste donc
   exactement le sien — ul.sub-menu > li.sub-menu-item > a.item-link.link1 —
   avec une liste imbriquée pour les offres. Aucune classe n'est inventée :
   la mise en colonnes est déclenchée par l'attribut data-cols du ul, et les
   liens imbriqués héritent tels quels de la règle `.sub-menu li > a` du
   gabarit. Fond, ombre, rayon et couleurs restent ceux de style.css. */

/* Le panneau se cale sur la grille de la page, pas sur l'entrée survolée.
   Centré sur l'entrée, celui d'« Accueil » — la plus à gauche — sortait de
   l'écran à TOUTES les largeurs testées (1200 à 1600 px). L'entrée passe donc
   en position: static, ce qui fait porter le positionnement du panneau par
   .header-style-one-wrapper : le gabarit le déclare déjà position: relative
   (style.css:11416) et il est large comme le conteneur. Le :has() est
   nécessaire — les sous-menus simples, eux, doivent rester calés sur leur
   entrée. */
.main-nav-area ul li.has-dropdown:has(.sub-menu[data-cols]) {
  position: static;
}

.main-nav-area ul li.has-dropdown .sub-menu[data-cols] {
  left: 0;
  transform: translateY(10px);
  width: min(960px, 100%);
  padding: 26px 8px !important;
  display: grid;
  grid-template-columns: repeat(var(--ps-cols, 3), minmax(0, 1fr));
}

.main-nav-area ul li.has-dropdown .sub-menu[data-cols="2"] { --ps-cols: 2; }
.main-nav-area ul li.has-dropdown .sub-menu[data-cols="4"] { --ps-cols: 4; }

.main-nav-area ul li.has-dropdown:hover .sub-menu[data-cols] {
  transform: translateY(0);
}

.main-nav-area ul li.has-dropdown .sub-menu[data-cols] > .sub-menu-item + .sub-menu-item {
  border-left: 1px solid color-mix(in srgb, var(--encre) 10%, transparent);
}

.main-nav-area ul li.has-dropdown .sub-menu[data-cols] > .sub-menu-item > .item-link {
  font-weight: 600;
  color: var(--color-heading-1);
}

.main-nav-area ul li.has-dropdown .sub-menu[data-cols] > .sub-menu-item > ul {
  padding: 0;
  margin: 0;
  display: block;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--encre) 10%, transparent);
  margin-top: 4px;
  padding-top: 4px;
}

@media (max-width: 1199px) {
  .main-nav-area ul li.has-dropdown .sub-menu[data-cols] {
    display: none;
  }
}

/* ------------------------------------------------- 2. CHAMP PIÈGE DU FORMULAIRE */

.ps-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------- 3. ACCESSIBILITÉ */

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-heading-1);
  outline-offset: 2px;
}

/* --------------------------------------------------- 4. EN-TÊTE COLLANT

   Le gabarit livre le déclencheur mais pas la destination : main.js appelle
   stickyHeader(), qui pose la classe .sticky sur .header--sticky au-delà de
   150 px de défilement. Or aucune de ses 12 pages ne porte .header--sticky,
   et ni style.css ni ses variantes ne stylent l'une ou l'autre : le hook
   tourne à vide. On l'active, avec ses propres noms de classes.

   position: sticky et non fixed : l'en-tête reste dans le flux, il n'y a donc
   aucune hauteur à compenser et aucun saut au moment où il s'épingle.

   top négatif de la hauteur du bandeau d'annonce (40 px mesurés) : le bandeau
   sort de l'écran au défilement et seule la barre de navigation, 74 px, reste
   visible. Sous 576 px le gabarit masque déjà ce bandeau (style.css:18134),
   le décalage est donc annulé à ce palier.

   Le fond est posé en permanence, pas seulement à l'état .sticky : l'en-tête
   s'épingle dès 40 px alors que main.js n'ajoute .sticky qu'à 150 px, et le
   contenu défilerait sous un en-tête transparent entre les deux. Au repos ce
   fond est exactement celui de la page, donc invisible. Seule l'ombre, elle,
   attend l'état .sticky : c'est elle qui dit que la barre flotte. */

.header-style-one.header--sticky {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--color-bg-1);
}

@media (min-width: 577px) {
  .header-style-one.header--sticky {
    top: -40px;
  }
}

.header-style-one.header--sticky.sticky {
  box-shadow: 0 1px 0 var(--color-border);
}

/* Une barre épinglée recouvre la cible d'un lien d'ancre. Le site en a de
   vraies (page lexique), et main.js les fait défiler en douceur via .onepage :
   sans cette réserve, la définition visée se retrouve sous l'en-tête. */
html {
  scroll-padding-top: 106px;
  /* Le même raisonnement en bas : la barre de l'assistant est fixe et occupe
     les 75 derniers pixels de l'écran. Sans cette réserve, un défilement
     programmé — ancre du site, mais aussi le replacement d'un champ par le
     navigateur quand le clavier virtuel se referme — pouvait déposer sa cible
     exactement sous la barre. C'est ainsi que le bouton « Envoyer » du
     formulaire de contact se retrouvait sous le champ de l'assistant. */
  scroll-padding-bottom: 96px;
}

/* ------------------------------------------- 5. ÉTAT DU FORMULAIRE DE CONTACT

   Le gabarit émet <div id="form-messages"> et son script y écrit le résultat
   de l'envoi avec la classe .success ou .error — mais aucun de ses CSS ne
   style l'un ou l'autre : le message s'affichait en texte nu, à la même taille
   que le reste, sans couleur ni séparation. Ici la zone porte deux choses : la
   mention d'information RGPD au repos, puis le résultat de l'envoi.

   Aucune couleur inventée : le vert et le rouge viennent des variables du
   gabarit quand il en a, du reste on retombe sur ses couleurs de texte. */

#form-messages {
  margin-top: 16px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-body-1, var(--texte-2));
}

#form-messages a {
  color: inherit;
  text-decoration: underline;
}

/* Ce que le serveur accepte en piece jointe, dit sous le champ. Le texte vient
   de api/contact.mjs : le plafond et la liste d'extensions y sont declares une
   seule fois. La regle porte une classe pour battre la regle d'element de
   style.css, qui fixe la taille de tous les <p>. */

/* L'EXTRAIT D'UNE CARTE DE BLOG. Le gabarit n'en prevoyait pas : ses cartes
   portaient le genre, le titre et le bouton. La regle porte une classe pour
   battre `p { font-size: var(--font-size-b2) }` de style.css, qui bat
   l'heritage — une taille posee sur le parent n'aurait rien fait. */

.ps-blog-extrait {
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: var(--mesure);
}

.ps-champ-note {
  margin: 6px 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-body-1, var(--texte-2));
}

#form-messages.success,
#form-messages.error {
  padding: 12px 16px;
  border: 1px solid;
  font-weight: 500;
}

#form-messages.success {
  color: var(--ok);
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, white);
}

#form-messages.error {
  color: var(--erreur);
  border-color: var(--erreur);
  background: color-mix(in srgb, var(--erreur) 6%, white);
}

/* Le bouton reste cliquable à l'œil pendant l'envoi : on le dit. */
#contact-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ------------------------------------------------ 6. SIMULATEURS DE COÛT

   Le gabarit Agenio n'a pas de calculateur : il n'y avait rien à recopier.
   Ces règles sont donc les seules du site à habiller un bloc qui n'existe
   pas en amont. Elles s'en tiennent aux variables de couleur du gabarit
   (--color-primary, --color-secondary, --color-heading-1, --color-body-1,
   --color-bg-1, --color-border-dark) : rien n'est inventé côté palette.

   Le préfixe `ps-sim-` sur toutes les classes rend visible, à la lecture du
   HTML, ce qui vient du gabarit et ce qui n'en vient pas. */

.ps-sim-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 992px) {
  .ps-sim-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 40px;
  }
}

/* ------------------------------------------------------------ FORMULAIRE */

.ps-sim-formulaire {
  border: 1px solid var(--color-bg-1);
  padding: 28px;
}

.ps-sim-consigne {
  color: var(--color-body-1);
  margin-bottom: 24px;
}

.ps-sim-champ + .ps-sim-champ {
  margin-top: 24px;
}

.ps-sim-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
}

.ps-sim-label-texte {
  color: var(--color-heading-1);
  font-weight: 500;
}

.ps-sim-label-valeur {
  color: var(--color-heading-1);
  font-weight: 600;
  white-space: nowrap;
}

.ps-sim-unite {
  color: var(--color-body-1);
  font-weight: 400;
  margin-left: 4px;
}

/* `accent-color` habille le curseur natif dans la couleur du gabarit sans
   redéfinir la piste ni la poignée : c'est une ligne, et le comportement
   d'accessibilité du contrôle natif reste intact. */
.ps-sim-curseur {
  width: 100%;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* -------------------------------------------------------------- RÉSULTAT */

.ps-sim-resultat {
  /* Charte Propul : carte blanche au filet, le chiffre porte l'accent.
     (L'ancien panneau encre rendait le chiffre accent illisible.) */
  position: relative;
  background: var(--fond);
  color: var(--encre);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  padding: 32px;
}

.ps-sim-total {
  font-family: var(--font-display);
  color: var(--accent-display, var(--accent));
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  /* Le chiffre change sous le curseur : les chiffres tabulaires empêchent la
     largeur de sauter à chaque incrément. */
  font-variant-numeric: tabular-nums;
}

.ps-sim-unite-total {
  color: var(--color-body-dark);
  margin-bottom: 24px;
}

.ps-sim-calcul-titre {
  color: var(--encre);
  font-weight: 600;
  margin-bottom: 6px;
}

.ps-sim-calcul {
  color: var(--color-body-dark);
  font-variant-numeric: tabular-nums;
  /* La ligne de calcul est de l'arithmétique : elle se lit mieux à chasse
     fixe, et elle doit pouvoir passer à la ligne sur mobile. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

/* Comparaison : deux branches côte à côte. */

.ps-sim-branches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.ps-sim-branche + .ps-sim-branche {
  border-top: 1px solid var(--color-border-dark);
  padding-top: 20px;
}

.ps-sim-branche-label {
  color: var(--color-body-dark);
  margin-bottom: 4px;
}

.ps-sim-branche-total {
  color: var(--color-primary);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.ps-sim-verdict {
  color: var(--encre);
  font-weight: 600;
}

.ps-sim-bascule {
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 8px;
}

/* -------------------------------------------- AVERTISSEMENT ET APPEL */

/* La réserve n'est pas une petite ligne grise en bas de page : c'est un
   argument du site, et elle se lit à la même taille que le reste. */
.ps-sim-avertissement {
  border-left: 3px solid var(--color-primary);
  padding: 4px 0 4px 16px;
  margin-top: 32px;
  color: var(--color-body-1);
}

.ps-sim-avertissement strong {
  color: var(--color-heading-1);
}

.ps-sim-cta {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-bg-1);
}

.ps-sim-cta-amorce {
  color: var(--color-heading-1);
  font-weight: 500;
  margin-bottom: 8px;
}

.ps-sim-cta-chiffre {
  color: var(--color-body-1);
  margin-bottom: 20px;
}

.ps-sim-cta-chiffre strong {
  color: var(--color-heading-1);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- HYPOTHÈSES ET SOURCES */

.ps-sim-sources-intro {
  margin-bottom: 28px;
}

.ps-sim-sources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .ps-sim-sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ps-sim-source {
  border: 1px solid var(--color-bg-1);
  padding: 24px;
}

.ps-sim-source-valeur {
  color: var(--color-heading-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.ps-sim-source-quoi {
  color: var(--color-body-1);
  margin-bottom: 8px;
}

.ps-sim-source-origine {
  color: var(--color-heading-1);
  font-size: 0.9375rem;
  margin-bottom: 8px;
}

.ps-sim-source-origine a {
  color: inherit;
  text-decoration: underline;
}

/* La réserve d'une source dit ce que le chiffre ne prouve pas. Elle est
   marquée, pas atténuée : c'est elle qui rend les autres chiffres crédibles.
   Elle se lit donc à la taille du corps de texte, et pas en mention légale —
   la reléguer en petits caractères reviendrait à s'en excuser. */
.ps-sim-source-reserve {
  border-left: 2px solid var(--color-primary);
  padding-left: 12px;
  margin-top: 12px;
  color: var(--color-body-1);
}

/* ------------------------------------------------------------ COÛTS CACHÉS */

.ps-sim-couts-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .ps-sim-couts-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ps-sim-couts-cote {
  color: var(--color-heading-1);
  font-weight: 600;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-primary);
}

.ps-sim-couts-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ps-sim-couts-liste li + li {
  margin-top: 20px;
}

.ps-sim-couts-poste {
  color: var(--color-heading-1);
  font-weight: 500;
  margin-bottom: 4px;
}

.ps-sim-couts-detail {
  color: var(--color-body-1);
}

/* La légende nomme chaque facteur de la ligne de calcul, dans le même ordre.
   Sans elle, « 25 × 18,20 × 1 × 12 » est une suite de nombres, pas un calcul
   en toutes lettres. Elle ne bouge pas quand un curseur bouge : elle décrit la
   structure, pas les valeurs. */
.ps-sim-legende {
  color: var(--color-body-dark);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: 4px;
}

/* --------------------------------------------------- LISTE DÉROULANTE

   Les simulateurs de prix posent des questions qui n'ont pas de réponse
   numérique — un design n'est pas un nombre. Un `<select>` natif plutôt qu'un
   groupe de boutons : il porte son état sans JavaScript, il est navigable au
   clavier sans rien ajouter, et l'option retenue est lisible dans le HTML
   servi, donc extractible par un moteur qui n'exécute rien. */

.ps-sim-champ--choix .ps-sim-label {
  margin-bottom: 8px;
}

.ps-sim-liste {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--filet);
  border-radius: var(--r-champ, 6px);
  background: var(--fond);
  color: var(--encre);
  font: inherit;
  cursor: pointer;
}

.ps-sim-liste:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ps-sim-aide {
  color: var(--color-body-dark);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}

/* -------------------------------------------------- SORTIE RÉGLEMENTAIRE

   Le générateur de la facturation électronique ne rend pas un montant mais
   trois dates et une liste d'actions. La liste de définitions dit ce que la
   mise en page ne dit pas : chaque date EST la réponse à une obligation
   nommée, et un lecteur d'écran doit pouvoir les apparier. */

.ps-sim-qualif-intitule {
  color: var(--color-body-1);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ps-sim-dates {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.ps-sim-date {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  border-top: 1px solid var(--filet);
  padding-top: 12px;
}

.ps-sim-date dt {
  color: var(--color-body-1);
  font-weight: 400;
}

.ps-sim-date dd {
  color: var(--encre);
  font-weight: 600;
  margin: 0;
  text-align: right;
}

.ps-sim-actions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ps-sim-actions li + li {
  border-top: 1px solid var(--filet);
  margin-top: 16px;
  padding-top: 16px;
}

/* L'intitulé d'une démarche est un élément de liste, pas un titre de section :
   sans taille explicite il héritait du corps de la carte résultat et venait
   concurrencer « Ce que vous avez à faire » juste au-dessus. */
.ps-sim-action-quoi {
  color: var(--color-heading-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.ps-sim-action-detail {
  color: var(--color-body-1);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-top: 4px;
}

/* Le sur-titre de la carte résultat, à la même échelle que celui de la
   catégorie : deux intitulés à la taille du corps, dans une même carte, ne
   hiérarchisent rien. */
.ps-sim-resultat .ps-sim-calcul-titre {
  color: var(--color-body-1);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 28px;
  margin-bottom: 12px;
}

/* --------------------------------------------------- TABLEAU PRÉ-CALCULÉ

   Le bloc qui fait exister la page pour un moteur de réponse : le même calcul
   que les curseurs, déjà fait pour douze à vingt profils, en HTML statique.

   C'est un vrai `<table>` et il est habillé comme tel. Une grille en `<div>`
   aurait été plus simple à styler et n'aurait rien désigné : ni en-tête de
   colonne, ni en-tête de ligne, ni légende. Le cadre en `overflow-x: auto`
   laisse le tableau défiler dans sa propre boîte sur un petit écran, sans que
   la page entière se mette à défiler horizontalement. */

.ps-sim-tableau-intro {
  margin-bottom: 24px;
}

/* `tabindex="0"` et `role=region` sur le cadre : le tableau fait 720px de
   large minimum et defile horizontalement dans sa boite. Sans element
   focusable a l'interieur, un visiteur au clavier ne pouvait PAS le faire
   defiler — il voyait la moitie des colonnes et rien ne lui donnait acces au
   reste. Six lignes du cliquet d'accessibilite (axe `scrollable-region-
   focusable`, serious) tenaient a ce seul defaut, sur les six pages de
   simulateur. Le `aria-labelledby` pointe la legende du tableau, qui est deja
   son titre : la region est donc nommee sans qu'on repete son intitule. */
.ps-sim-tableau-cadre {
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
}

.ps-sim-tableau {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--fond);
  font-size: 15px;
}

/* La légende est le titre du tableau, pas une note de bas de page : elle est
   lue en premier par un lecteur d'écran, et elle doit donc dire ce que le
   tableau contient. */
.ps-sim-tableau caption {
  caption-side: top;
  text-align: left;
  color: var(--color-body-1);
  font-size: var(--fs-small);
  line-height: 1.6;
  padding: 16px 20px;
  border-bottom: 1px solid var(--filet);
}

.ps-sim-tableau th,
.ps-sim-tableau td {
  padding: 14px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--filet);
}

.ps-sim-tableau thead th {
  color: var(--color-heading-1);
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-bg-1);
}

.ps-sim-tableau tbody th {
  color: var(--color-heading-1);
  font-weight: 500;
}

.ps-sim-tableau tbody td {
  color: var(--color-body-1);
  line-height: 1.6;
}

.ps-sim-tableau tbody tr:last-child th,
.ps-sim-tableau tbody tr:last-child td {
  border-bottom: 0;
}

/* La colonne du résultat porte l'accent : c'est la seule que le lecteur
   cherche, et c'est elle que le moteur extrait. */
.ps-sim-tableau-resultat {
  color: var(--color-primary) !important;
  font-weight: 600;
  white-space: nowrap;
}

.ps-sim-tableau-note {
  color: var(--color-body-dark);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-top: 16px;
}

/* ---------------------------------------------------------- LA MÉTHODE

   La formule en toutes lettres et ce qui n'est pas compté, côte à côte. Les
   deux se lisent ensemble : un prix dont on ignore le périmètre exclu n'est
   pas un prix, c'est une accroche. */

.ps-sim-methode-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 992px) {
  .ps-sim-methode-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

.ps-sim-methode-ligne {
  color: var(--encre);
  font-family: var(--police-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: var(--fs-small);
  line-height: 1.7;
  background: var(--color-bg-1);
  border-left: 3px solid var(--color-primary);
  padding: 16px 20px;
  margin-bottom: 20px;
  /* Une formule ne se coupe pas au milieu d'un opérateur. */
  overflow-wrap: break-word;
}

.ps-sim-methode-etape {
  color: var(--color-body-1);
  line-height: 1.7;
}

.ps-sim-methode-etape + .ps-sim-methode-etape {
  margin-top: 14px;
}

.ps-sim-exclus {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ps-sim-exclus li + li {
  margin-top: 16px;
}

.ps-sim-exclus-poste {
  color: var(--color-heading-1);
  font-weight: 500;
}

.ps-sim-exclus-detail {
  color: var(--color-body-1);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 2px;
}

.ps-sim-methode-reserve {
  color: var(--color-body-dark);
  font-size: var(--fs-small);
  line-height: 1.7;
  border-top: 1px solid var(--filet);
  margin-top: 32px;
  padding-top: 20px;
}

/* ------------------------------------------------------------ CAS RÉELS */

.ps-sim-cas-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .ps-sim-cas-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ps-sim-cas {
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--fond);
  padding: 28px;
}

.ps-sim-cas-titre {
  color: var(--color-heading-1);
  font-size: 19px;
  line-height: 1.4;
  margin-bottom: 12px;
}

.ps-sim-cas-situation {
  color: var(--color-body-1);
  font-size: 15px;
  line-height: 1.7;
}

.ps-sim-cas-resultat,
.ps-sim-cas-livre {
  color: var(--color-body-1);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 16px;
}

.ps-sim-cas-resultat {
  color: var(--encre);
  font-weight: 600;
}

.ps-sim-cas-intitule {
  display: block;
  color: var(--color-body-dark);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------- RENVOI VERS LE CALCULATEUR

   Le lien que porte une page offre vers son calculateur. Il vit SOUS la
   fourchette, dans le bloc de prix, et pas dans un encart : il n'a de sens
   qu'au moment où le lecteur vient de lire une fourchette et se demande où il
   tombe dedans. */

.ps-renvoi-outil {
  text-align: center;
  color: var(--color-body-1);
  font-size: 15px;
  line-height: 1.7;
  margin: 24px auto 0;
  max-width: 68ch;
}

.ps-renvoi-outil a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------- ALLER PLUS LOIN */

.ps-sim-suite-texte {
  margin-bottom: 24px;
  max-width: 68ch;
}

/* ------------------------------------------ 7. ANNUAIRE DES INTÉGRATIONS

   La console de recherche de integrations.html, le sommaire des catégories, la
   grille repliable, les pages de catégorie et la fiche technique d'un outil.
   Habillage du bloc build/blocks/annuaire.mjs.

   Toutes les longueurs sont en px. La raison a changé en session 3 : elle était
   que `style.css` posait `html { font-size: 10px }` et faussait tous les `rem`.
   La racine est revenue à 16 px et l'échelle --fs-* est vivante — les tailles de
   TEXTE de ce fichier ont d'ailleurs rejoint leurs jetons. Les longueurs de
   géométrie, elles, restent au pixel : c'est la même règle que celle appliquée
   par la charte d'en-tête.

   Le fond reste blanc et la couleur reste un événement — les pastilles de
   niveau et le filtre actif sont les seules taches colorées, parce qu'elles
   portent la seule information que le visiteur ne doit pas manquer.

   Deux règles du gabarit traversent tout ce qui suit, et il faut les défaire
   là où elles passent :

     input, button, select, textarea { width: 100% }
     input[type=search]             { width: 270px }

   Sans un `width: auto` explicite, chaque bouton de filtre occupe toute la
   largeur et la rangée de filtres devient une pile. Et le sélecteur d'attribut
   de la seconde bat une simple classe : `.ps-ann-champ { width: 100% }` perd
   contre lui, et le champ de recherche reste figé à 270 px au milieu d'une
   ligne vide. Les règles du bloc sont donc écrites pour gagner, jamais pour
   espérer. */

.ps-ann-area {
  padding: 56px 0 40px;
}

/* Le titre du gabarit est calibré pour une page d'accroche. Ici il coiffe un
   outil de recherche : au-delà de cette taille il pousse la console sous la
   ligne de flottaison, ce qui est exactement l'inverse de ce qu'on veut.

   `min()` et non plus 44px sec : 44px est un PLAFOND, pas une taille. Sur une
   page d'annuaire à titre court, le H1 rend 32px à 390px de large et cette
   règle en rendait 34 — le titre de section passait devant le titre de page.
   L'échelle de rang (propul-charte.css §12bis) descend plus bas que 44 sur
   petit écran et sur les rangs longs ; la borne la laisse passer devant. La
   marche de 34px sous 991px disparaît avec : le clamp la remplace en continu. */
.ps-ann-area .section-title {
  font-size: min(44px, var(--h2));
  line-height: 1.14;
}

.ps-ann-area .section-top-area {
  margin-bottom: 16px;
}

.ps-ann-intro {
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-body);
  line-height: 1.65;
  margin: 0 auto 32px;
  max-width: 680px;
  text-align: center;
}

/* ---------------------------------------------------- CONSOLE DE RECHERCHE

   Le champ, le compteur vivant et les trois filtres tiennent dans un seul
   encadré. Trois commandes qui portent sur la même liste doivent se lire comme
   une seule, sinon le visiteur ne sait pas laquelle vient d'agir. */

.ps-ann-console {
  border: 1px solid var(--filet, #E4E1EC);
  border-radius: var(--r-carte);
  margin-bottom: 28px;
  padding: 24px;
}

.ps-ann-barre {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  justify-content: space-between;
}

.ps-ann-recherche {
  flex: 1 1 380px;
  min-width: 0;
}

/* Le libellé reste visible : un champ de recherche dont le seul intitulé est
   un texte de substitution perd son nom dès la première frappe. Le texte de
   substitution, lui, ne répète plus le libellé — il montre quoi taper. */
.ps-ann-label {
  color: var(--texte-2, #6A6478);
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.ps-ann-champ-boite {
  display: block;
  position: relative;
}

.ps-ann-loupe {
  color: var(--texte-2, #6A6478);
  left: 15px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Deux classes dans le sélecteur, pour passer devant `input[type=search]` du
   gabarit et sa largeur de 270 px. */
.ps-ann-console .ps-ann-champ {
  background: var(--fond, var(--fond));
  border: 1px solid var(--filet, #E4E1EC);
  border-radius: var(--r-champ, 6px);
  color: var(--encre, #211A33);
  font-size: var(--fs-body);
  padding: 13px 14px 13px 44px;
  width: 100%;
}

.ps-ann-console .ps-ann-champ::placeholder {
  color: var(--texte-2, #6A6478);
  opacity: 0.75;
}

.ps-ann-console .ps-ann-champ:focus {
  border-color: var(--violet, #7128D7);
  outline: 2px solid var(--violet, #7128D7);
  outline-offset: 1px;
}

/* Le compteur est le seul chiffre qui bouge sur la page : il est lu à voix
   haute (role="status") et cadré en chiffres tabulaires, pour qu'il ne
   sautille pas d'un caractère à l'autre entre deux frappes. */
.ps-ann-compte {
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-small);
  margin: 0;
  padding-bottom: 6px;
  white-space: nowrap;
}

.ps-ann-compte strong {
  color: var(--encre, #211A33);
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.1;
}

/* ------------------------------------------------------------- FILTRES */

.ps-ann-filtres {
  border-top: 1px solid var(--filet, #E4E1EC);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding-top: 20px;
}

.ps-ann-filtre {
  align-items: center;
  background: var(--fond, var(--fond));
  border: 1px solid var(--filet, #E4E1EC);
  border-radius: var(--r-bouton, 6px);
  color: var(--encre, #211A33);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-small);
  gap: 9px;
  padding: 8px 12px;
  width: auto;
}

.ps-ann-filtre-n {
  background: var(--grille, #ECEAF2);
  border-radius: var(--r-champ);
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
}

.ps-ann-filtre:hover {
  border-color: var(--violet, #7128D7);
  color: var(--violet, #7128D7);
}

.ps-ann-filtre.is-actif {
  background: var(--violet, #7128D7);
  border-color: var(--violet, #7128D7);
  color: var(--fond);
}

.ps-ann-filtre.is-actif .ps-ann-filtre-n {
  background: color-mix(in srgb, var(--fond) 22%, transparent);
  color: var(--fond);
}

/* -------------------------------------------------- LÉGENDE DES NIVEAUX

   Ce que l'annuaire affirme, et ce qu'il n'affirme pas. Trois colonnes contre
   les trois filtres qui portent les mêmes mots : la définition est lue à
   l'endroit où elle sert, plutôt que dans un bloc de page séparé. */

.ps-ann-legende {
  display: grid;
  gap: 20px 32px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
}

.ps-ann-legende-item {
  border-top: 1px solid var(--filet, #E4E1EC);
  padding-top: 14px;
}

.ps-ann-legende-tete {
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 0 0 8px;
}

.ps-ann-legende-n {
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}

.ps-ann-legende-desc {
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin: 0;
}

.ps-ann-legende-label {
  color: var(--encre, #211A33);
  font-size: var(--fs-small);
  font-weight: 500;
}

/* ------------------------------------------------------------ SOMMAIRE

   Quarante-huit familles. En pastilles elles occupaient un écran entier avant
   la première fiche ; en colonnes de sommaire elles en occupent le tiers, et
   elles se lisent en balayant une colonne plutôt qu'en cherchant dans un pavé.
   Les liens sont les mêmes : ils visent les pages de catégorie. */

.ps-ann-sommaire {
  margin-bottom: 48px;
}

.ps-ann-sommaire-titre {
  border-bottom: 1px solid var(--filet, #E4E1EC);
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  margin: 0 0 4px;
  padding-bottom: 12px;
  text-transform: uppercase;
}

.ps-ann-sommaire-liste {
  display: grid;
  gap: 0 36px;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-ann-sommaire-liste a {
  align-items: baseline;
  border-bottom: 1px solid var(--filet, #E4E1EC);
  color: var(--encre, #211A33);
  display: flex;
  font-size: var(--fs-small);
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
  text-decoration: none;
}

.ps-ann-sommaire-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-ann-sommaire-n {
  color: var(--texte-2, #6A6478);
  flex: none;
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}

.ps-ann-sommaire-liste a:hover {
  color: var(--violet, #7128D7);
}

.ps-ann-sommaire-liste a:hover .ps-ann-sommaire-n {
  color: var(--violet, #7128D7);
}

/* ------------------------------------------------- GROUPES, EN ACCORDÉON

   Une catégorie = un <details>. Tous les outils sont dans le document, tous
   les liens aussi ; ce qui change, c'est ce que le visiteur voit d'abord. Une
   liste de quarante-huit lignes, plutôt que vingt-cinq mille pixels de
   grilles. Le dépliage est natif : il fonctionne sans JavaScript. */

.ps-ann-groupes-tete {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ps-ann-groupes-titre {
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  margin: 0;
  text-transform: uppercase;
}

.ps-ann-deplier {
  background: none;
  border: 1px solid var(--filet, #E4E1EC);
  border-radius: var(--r-bouton, 6px);
  color: var(--texte-2, #6A6478);
  cursor: pointer;
  font-size: 13px;
  padding: 6px 12px;
  width: auto;
}

.ps-ann-deplier:hover {
  border-color: var(--violet, #7128D7);
  color: var(--violet, #7128D7);
}

.ps-ann-groupes {
  border-top: 1px solid var(--filet, #E4E1EC);
}

.ps-ann-groupe {
  border-bottom: 1px solid var(--filet, #E4E1EC);
}

.ps-ann-groupe[hidden] {
  display: none;
}

.ps-ann-groupe-tete {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  list-style: none;
  padding: 16px 40px 12px 0;
  position: relative;
}

.ps-ann-groupe-tete::-webkit-details-marker {
  display: none;
}

/* Le chevron : deux traits de bordure tournés, plutôt qu'une icône répétée
   quarante-huit fois dans le HTML. */
.ps-ann-groupe-tete::after {
  border-bottom: 1.5px solid var(--texte-2, #6A6478);
  border-right: 1.5px solid var(--texte-2, #6A6478);
  content: '';
  height: 8px;
  position: absolute;
  right: 6px;
  top: 22px;
  transform: rotate(45deg);
  transition: transform var(--dur-base, 180ms) var(--ease-out, ease);
  width: 8px;
}

.ps-ann-groupe[open] > .ps-ann-groupe-tete::after {
  transform: rotate(-135deg);
}

/* Le violet dit « survolé », pas « ouvert ». Les quarante-huit familles
   arrivent ouvertes : teindre l'état ouvert reviendrait à teindre la page
   entière, et une couleur que tout porte ne signale plus rien. */
.ps-ann-groupe-tete:hover .ps-ann-groupe-titre {
  color: var(--violet, #7128D7);
}

.ps-ann-groupe-tete:focus-visible {
  outline: 2px solid var(--violet, #7128D7);
  outline-offset: -2px;
}

/* LA CIBLE TACTILE DES QUARANTE-HUIT CATEGORIES.

   Le lien rendait 213,4 x 22,1px sur telephone — axe-core, regle `target-size`
   (WCAG 2.2 AA, serious), 38 noeuds sur integrations.html, derniere ligne du
   lot-06 au cliquet d'accessibilite. Le critere demande 24 x 24px, ou a defaut
   un cercle de 24px de diametre libre autour de la cible ; ici le cercle sur
   ne faisait que 22px, parce que le pas vertical du bloc est serre.

   `inline-flex` et non `inline` : une hauteur minimale ne s'applique pas a une
   boite en ligne. On garde la densite de l'annuaire — le rythme des 48 blocs
   est un acquis, il n'est pas question de l'aerer — et on ne gagne que les
   6px qui manquent a la cible. */
.ps-ann-groupe-titre {
  color: var(--encre, #211A33);
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

/* Le titre n'est plus un lien : il ne se souligne plus. Le violet du survol
   du <summary> suffit a dire que le bloc repond au clic, et ce qu'il fait est
   de replier, pas de naviguer. */

/* LA PAGE DE LA FAMILLE, atteinte depuis le bas du bloc. Elle etait atteinte
   depuis le titre, dans le <summary> : un controle dans un controle, 48 noeuds
   « nested-interactive » par ecran au releve axe-core. `inline-flex` et
   `min-height` pour la meme raison que le titre avant lui — une boite en
   ligne n'a pas de hauteur, et le critere `target-size` demande 24px. */
.ps-ann-groupe-lien {
  align-items: center;
  color: var(--violet, #7128D7);
  display: inline-flex;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 14px;
  min-height: 28px;
  text-decoration: none;
}

.ps-ann-groupe-lien:hover {
  text-decoration: underline;
}

.ps-ann-groupe-compte {
  color: var(--texte-2, #6A6478);
  flex: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ps-ann-groupe-corps {
  padding-bottom: 22px;
}

.ps-ann-groupe-desc {
  color: var(--texte-2, #6A6478);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 14px;
  /* 760px etait une largeur de conteneur deguisee en largeur de lecture : a
     15px de corps elle rendait 103 signes par ligne. La mesure de la charte
     est en `ch`, donc elle suit le corps du texte. */
  max-width: var(--mesure);
}

/* --------------------------------------------------------------- GRILLE */

.ps-ann-grille {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-ann-grille--seule {
  margin-top: 32px;
}

.ps-ann-carte[hidden] {
  display: none;
}

.ps-ann-lien {
  border: 1px solid var(--filet, #E4E1EC);
  border-radius: var(--r-carte, 10px);
  display: block;
  height: 100%;
  padding: 16px;
  text-decoration: none;
  transition: border-color var(--dur-rapide, 120ms) var(--ease-out, ease);
}

.ps-ann-lien:hover {
  border-color: var(--violet, #7128D7);
}

.ps-ann-tete {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ps-ann-nom {
  color: var(--encre, #211A33);
  font-size: 17px;
  font-weight: 600;
}

/* Trois lignes au plus : les descriptions du registre vont de vingt mots à
   quarante, et sans cette limite deux cartes d'une même rangée ne tiennent
   plus le même haut. Le texte entier est sur la fiche de l'outil. */
.ps-ann-desc {
  color: var(--texte-2, #6A6478);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: var(--fs-small);
  line-height: 1.55;
  overflow: hidden;
}


/* --------------------------------------------------- PASTILLES DE NIVEAU

   La seule couleur de la grille, et elle porte la seule information que le
   visiteur ne doit pas manquer : ce qui est déjà branché chez nous, et ce qui
   ne l'est pas encore. Angles presque droits, comme les boutons de la charte —
   une pastille ronde se lirait comme un ornement. */

.ps-ann-niveau {
  border: 1px solid;
  border-radius: var(--r-champ);
  flex: none;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  white-space: nowrap;
}

.ps-ann-niveau--production {
  background: var(--ok-fond);
  border-color: var(--ok-filet);
  color: var(--ok, #1F7A33);
}

.ps-ann-niveau--documentee {
  background: var(--violet-fond);
  border-color: var(--violet-filet);
  color: var(--violet, #7128D7);
}

.ps-ann-niveau--sur-etude {
  background: var(--attention-fond);
  border-color: var(--attention-filet);
  color: var(--attention, #8A5A00);
}

.ps-ann-vide {
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-body);
  padding: 48px 0;
  text-align: center;
}

/* ------------------------------------------------------- FICHE TECHNIQUE */

.ps-ann-fiche-area {
  padding: 40px 0;
}

.ps-ann-fiche {
  border-top: 1px solid var(--filet, #E4E1EC);
  margin: 24px 0 0;
}

.ps-ann-fiche-ligne {
  border-bottom: 1px solid var(--filet, #E4E1EC);
  display: grid;
  gap: 8px 24px;
  grid-template-columns: 220px 1fr;
  padding: 14px 0;
}

.ps-ann-fiche-ligne dt {
  color: var(--texte-2, #6A6478);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ps-ann-fiche-ligne dd {
  color: var(--encre, #211A33);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0;
}

.ps-ann-fiche-ligne dd a {
  color: var(--violet, #7128D7);
  word-break: break-word;
}

.ps-ann-fiche-note {
  color: var(--texte-2, #6A6478);
  font-size: var(--fs-small);
}

.ps-ann-objets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-ann-objets li {
  background: var(--grille, #ECEAF2);
  border-radius: var(--r-bouton, 6px);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  padding: 4px 9px;
}

@media (max-width: 767px) {
  .ps-ann-area {
    padding: 40px 0 32px;
  }

  .ps-ann-console {
    padding: 18px;
  }

  .ps-ann-barre {
    display: block;
  }

  .ps-ann-compte {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 14px;
    padding-bottom: 0;
  }

  .ps-ann-compte strong {
    display: inline;
    font-size: 22px;
  }

  .ps-ann-sommaire-liste {
    gap: 0;
  }

  .ps-ann-groupe-titre {
    font-size: 17px;
  }

  .ps-ann-fiche-ligne {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------- 7 bis. ANNUAIRE, FORME COMPACTE

   L'index porte 965 outils rangés en 48 familles, toutes ouvertes. C'est ce
   qu'il vend : en montrer vingt-quatre reviendrait à dire le contraire.

   La brièveté vient donc de la densité de l'entrée, pas d'un repli. Une entrée
   n'est plus une carte encadrée mais une puce : un point de couleur, un nom,
   rien d'autre. Les cartes encadrées faisaient six colonnes fixes et quatre
   rangées par famille ; les puces s'écoulent et en tiennent deux. Vingt-cinq
   mille pixels de grille en deviennent moins de la moitié, sans qu'une seule
   entrée disparaisse.

   La description de l'outil, elle, n'a jamais été ici : elle se lit sur la
   page de la catégorie et sur la fiche. */

.ps-ann-grille--compacte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ps-ann-carte--compacte .ps-ann-lien {
  align-items: center;
  display: flex;
  gap: 8px;
  height: auto;
  padding: 6px 11px 6px 9px;
}

.ps-ann-carte--compacte .ps-ann-nom {
  font-size: var(--fs-small);
  font-weight: 500;
}

/* --------------------------------------------------- POINTS DE NIVEAU

   Ce que la pastille en toutes lettres dit sur une fiche, le point le dit sur
   l'index : « API documentée » y doublerait la largeur de chaque puce. Le
   libellé reste écrit à côté, hors écran — un lecteur d'écran l'annonce, un
   moteur le lit, et l'information ne repose jamais sur la couleur seule. Les
   trois couleurs sont nommées dans la légende, en haut de la même page. */

.ps-ann-point {
  border: 1px solid;
  border-radius: 50%;
  flex: none;
  height: 9px;
  width: 9px;
}

.ps-ann-point--production {
  background: var(--ok, #1F7A33);
  border-color: var(--ok, #1F7A33);
}

.ps-ann-point--documentee {
  background: var(--violet, #7128D7);
  border-color: var(--violet, #7128D7);
}

.ps-ann-point--sur-etude {
  background: var(--attention-pastille);
  border-color: var(--attention, #8A5A00);
}

/* Le texte que seul un lecteur d'écran atteint. Retire du flux sans être
   masque : `display: none` et `visibility: hidden` le retireraient aussi de
   la restitution vocale, ce qui est exactement l'inverse du but. */
.ps-ann-vh {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ------------------------------------------------ 7. LES SIX ICÔNES INLINE

   Le site chargeait Font Awesome Pro — `plugins/fontawesome.min.css` (455 Ko)
   et `fonts/fa-regular-400.woff2` (350 Ko) — sur TOUTES les pages, dans les
   deux locales, pour dessiner SIX glyphes. 805 Ko par page pour six formes,
   et l'en-tête du fichier annonçait « Font Awesome Pro 6.0.0 — Commercial
   License » : un dépôt public redistribuait un produit sous licence.

   Les six formes sont désormais dessinées dans `build/icones.mjs` et émises en
   SVG inline. Le `<i>` porteur est conservé — le gabarit style ses icônes par
   le sélecteur d'élément (`.search-close-icon i` pose la couleur, la taille et
   le `::after` de la pastille de survol ; `#goTop .icon` pose la taille) et un
   `<svg>` nu aurait cassé ces règles sans qu'aucun test ne le dise.

   Cette classe rend donc au `<i>` les métriques d'une icône de fonte : un
   carré de 1em, aligné comme un glyphe sur la ligne de base. La couleur suit
   `currentColor`, donc toutes les règles de couleur du gabarit continuent de
   s'appliquer sans être touchées. */

.ps-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  /* Le décalage d'une fonte d'icônes : sans lui, le carré s'assoit sur la
     ligne de base et l'icône paraît remonter d'un huitième de cadratin. */
  vertical-align: -0.125em;
  flex: none;
}

.ps-ico > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------- 8. LA PISTE DES REFERENCES

   Les quatorze logos clients sont produits au double de leur taille
   d'affichage (`_charte/planches/logos.mjs`) pour rester nets sur un ecran a
   deux points par pixel. Sans plafond, le navigateur les rendrait a leur taille
   intrinseque — 296 px de large dans un creneau qui en fait 200 — et la piste
   se chevaucherait.

   Le gabarit ne pose aucune regle sur cette image : rien n'est surcharge ici,
   la contrainte est ajoutee. */

.wpr-brand-area .section-inner .right-marquee-area .brand-wrapper img {
  max-width: 148px;
  max-height: 64px;
  width: auto;
  height: auto;
  vertical-align: middle;
}