/* ==========================================================================
   À LA PELLE — CSS spécifique au site.

   Complète assets/vignelli.css, ne le remplace pas et ne le contredit pas.
   Toute valeur sort des variables de la charte : aucune couleur, aucune taille
   et aucune marge écrite en dur.

   Claude (Opus 5) — 15/08/2026.
   ========================================================================== */

/* --- 1. EN-TÊTE --------------------------------------------------------- */

/* La navigation passe à la ligne sur petit écran plutôt que de déborder. */
.vg-entete {
  flex-wrap: wrap;
}

.pelle-marque {
  display: block;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* Le logo est vectoriel : une seule largeur suffit, il reste net partout. */
.pelle-marque img {
  display: block;
  width: 240px;
  height: auto;
}

@media (max-width: 600px) {
  .pelle-marque img {
    width: 190px;
  }
}

.vg-nav {
  flex-wrap: wrap;
  gap: var(--vg-e3);
}

/* Repère de page courante : filet bleu sous l'intitulé actif. Le vert reste
   réservé à l'action principale — il n'a pas à servir aussi de repère. */
.vg-nav a[aria-current="page"]:not(.vg-bouton) {
  padding-bottom: var(--vg-e1);
  border-bottom: 3px solid var(--vg-bleu);
}

/* --- 2. RYTHME VERTICAL ------------------------------------------------- */

/* Écart entre deux grilles d'une même section. */
.pelle-bloc {
  margin-top: var(--vg-e6);
}

.pelle-bloc-court {
  margin-top: var(--vg-e4);
}

/* Un paragraphe de tête de section ne dépasse pas la mesure de lecture. */
.pelle-intro {
  max-width: var(--vg-mesure);
}

/* --- 3. LISTES ---------------------------------------------------------- */

/* Liste technique : puce remplacée par un filet, aligné sur la grille. */
.pelle-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--vg-mesure);
}

.pelle-liste li {
  padding: var(--vg-e2) 0;
  border-top: 1px solid var(--vg-filet);
}

.pelle-liste li:last-child {
  border-bottom: 1px solid var(--vg-filet);
}
/* ⚠ Le premier <strong> d'un <li> sert de titre : lui seul passe en bloc.
   Sans le `:first-child`, TOUT mot mis en valeur au milieu d'une phrase
   partait à la ligne — 88 items sur 16 pages étaient dans ce cas. */
.pelle-liste > li > strong:first-child {
  display: block;
}

/* Sur aplat bleu, le filet doit rester visible. */
.vg-section--fonce .pelle-liste li,
.vg-pied .pelle-liste li {
  border-color: rgba(255, 255, 255, 0.24);
}

/* --- 3 bis. FICHES EN GRILLE -------------------------------------------- */

/* Une fiche occupe toute la hauteur de sa ligne de grille, et son tableau de
   caractéristiques est plaqué en bas. C'est ce qui les aligne d'une fiche à
   l'autre malgré des titres de longueur inégale — la raison d'être du format. */
.vg-grid > .vg-carte {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.vg-grid > .vg-carte > .vg-caracteristiques {
  margin-top: auto;
}

/* --- 3 ter. SCHEMAS TECHNIQUES ------------------------------------------ */

/* Les schémas sont des fichiers SVG de assets/. Ils ne sont pas décoratifs :
   ils portent une information que le texte seul rend mal. Fond neutre, cadrage
   constant, filet 1px — jamais d'ombre. */
.pelle-schema {
  margin: var(--vg-e4) 0 0;
  padding: var(--vg-e4);
  border: 1px solid var(--vg-filet);
  background: var(--vg-blanc);
}

.vg-section--clair .pelle-schema {
  background: var(--vg-blanc);
}

.pelle-schema img {
  width: 100%;
  height: auto;
}

/* Deux figures côte à côte s'alignent : même hauteur de bloc, légende plaquée
   en bas. Sans cela, deux photos de proportions différentes décalent tout.

   ⚠ `:only-child` ajouté le 02/09/2026 à 17h48, sur défaut mesuré.
   Sans lui, la règle s'appliquait AUSSI à une figure posée au milieu d'une
   colonne de texte : `height: 100%` la faisait alors occuper toute la hauteur
   de la ligne de grille, et le texte qui la suit sortait de sa colonne.
   Mesuré sur pic-de-brh : colonne haute de 1279 px, contenu allant jusqu'à
   3008 px, soit 608 px de texte débordant par-dessus la section suivante.
   63 pages étaient dans ce cas, contre 20 dans le cas prévu par la règle.
   La condition juste n'est pas « c'est une photo » mais « la figure est seule
   dans sa colonne » : c'est précisément ce que cet alignement suppose. */
.vg-grid > div > .pelle-schema:only-child {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 0;
}

/* Photographie de produit : cadrage constant d'une image à l'autre, fond
   neutre pour les visuels détourés. */
/* ⛔ 15/09/2026 (4.07) — LES PHOTOS EN PORTRAIT NE RÉSERVAIENT AUCUNE HAUTEUR
   AVANT LEUR CHARGEMENT. Mesuré sur « Qui est Arnaud Dufour » : à l'arrivée
   sur une ancre (#fidele-nimbi), le nom se trouvait 1 072 px plus bas que la
   position où le navigateur avait fait défiler — 18 portraits, chargés
   paresseusement, passaient de 0 px à leur hauteur réelle APRÈS le défilement.
   Cause : la règle `--portrait img { aspect-ratio: auto }` ci-dessous annulait
   le ratio que le navigateur tire lui-même des attributs width et height.
   ⭐ Le cadre 4/3 ne s'applique plus qu'aux photos qui ne sont pas en portrait,
   et les portraits gardent le ratio de leurs attributs : la place est réservée
   avant le chargement, une ancre arrive sur le nom. */
.pelle-schema--photo:not(.pelle-schema--portrait) img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--vg-clair);
}

/* ⭐ POUR UNE IMAGE EN HAUTEUR, et il n'y en a qu'une pour l'instant.
   Le cadre 4/3 ci-dessus convient a tout ce que le site porte — sauf a un
   dessin en portrait, qui s'y reduit a une bande etroite entre deux vides.
   ⛔ Ce n'est pas une deformation : `object-fit: contain` protege le ratio.
   C'est un gachis : le 04/09/2026, le descriptif de bout de bras (900 x 1612)
   s'affichait en 198 x 149, soit un dessin riche en details reduit a un timbre.
   ⭐ Cette classe s'AJOUTE, elle ne modifie rien : aucune figure existante ne
   la porte, donc rien de ce qui marche ne bouge. */
.pelle-schema--portrait img {
  /* ⛔ 4.07 (15/09/2026) : `height: 620px` réservait bien la place avant le
     chargement, mais laissait des bandes claires dès que la colonne était plus
     étroite que la photo — mesuré le 15/09 à 12h50 : 92 px sur téléphone, et
     dans les galeries à trois colonnes de Compiègne sur ordinateur.
     ⭐ 4.08 : la LARGEUR maximale de chaque image est portée par la variable
     --pelle-largeur-max, que `poser_reseaux_4_08.pl` calcule dans la page à
     partir de ses attributs width et height (hauteur maximale × largeur ÷
     hauteur : 620 px ici, 440 px pour les photographies, 387 et 427 px dans
     le quinconce). La hauteur suit le ratio des attributs : la place est
     réservée avant le chargement, sans bande, et rien n'est agrandi. */
  width: min(100%, var(--pelle-largeur-max, 100%));
  height: auto;
  display: block;
  margin: 0 auto;
}


/* ⭐ PORTRAITS PHOTOGRAPHIQUES — ajoutés le 09/09/2026 à 22h39, sur demande
   d'Arnaud : « les 2 photos de moi côte à côte sont trop grandes ».
   Mesuré avant : 465 × 620 px chacune, soit 954 px sur les 1 152 px de
   contenu — 83 % de la largeur.
   ⛔ La règle `--portrait` ci-dessus RESTE à 620 px, et c'est délibéré : elle
   sert aussi le dessin technique du bout de bras sur accouplons-nous.html,
   que réduire rendrait illisible — c'est précisément le gâchis que le
   commentaire précédent décrit. D'où une classe distincte, réservée aux
   photographies. Elle s'AJOUTE : rien de ce qui marche ne bouge. */
/* 4.08 (15/09/2026) : la hauteur maximale de 440 px des photographies en portrait
   est portée par --pelle-largeur-max, calculée dans la page (voir --portrait). */

/* Les deux portraits d'ouverture de « Qui est Arnaud Dufour », en quinconce :
   la seconde descend d'un cran et se fait plus petite. L'œil lit la première,
   puis la seconde, au lieu de peser les deux d'un coup.
   Mesuré après : 320 × 427 et 290 × 387, soit 642 px occupés au lieu de 954. */
.pelle-quinconce {
  display: flex;
  align-items: flex-start;
  gap: var(--vg-e4);
}

/* ⚠ Ces marges sont écrites sur la classe de la figure, pas sur `figure` :
   `.pelle-schema` pose déjà `margin: var(--vg-e4) 0 0`, et une règle plus
   spécifique posée sur l'élément écraserait le décalage. Défaut mesuré le
   09/09/2026 en éprouvant l'aperçu : le quinconce sortait à plat. */
.pelle-quinconce .pelle-quinconce--premiere { margin: 0; }
.pelle-quinconce .pelle-quinconce--seconde { margin: 104px 0 0; }

.pelle-quinconce .pelle-quinconce--premiere img { max-height: 427px; }
.pelle-quinconce .pelle-quinconce--seconde img { max-height: 387px; }

/* Sous 900 px, les colonnes du site repassent déjà l'une sous l'autre : le
   quinconce n'a plus de sens et son décalage doit tomber. */
@media (max-width: 900px) {
  .pelle-quinconce {
    flex-direction: column;
    align-items: center;
  }

  .pelle-quinconce .pelle-quinconce--seconde {
    margin-top: 0;
  }
}


/* Un schéma dense ne se laisse pas réduire indéfiniment. Le schéma des classes
   porte quinze intitulés sur 960 unités de large : ramené à la largeur d'un
   téléphone, son texte tombe sous 6 px et le dessin ne dit plus rien. Il défile
   donc dans son cadre, comme un tableau large, plutôt que de devenir illisible.
   `contain` empêche ce défilement de gagner la page entière — c'est la même
   correction que pour les tableaux, mesurée le 27/08/2026 à 02h50. */
.pelle-schema-cadre {
  overflow-x: auto;
  contain: paint;
}

.pelle-schema-cadre img {
  min-width: 780px;
}

.pelle-schema figcaption {
  margin-top: var(--vg-e3);
  padding-top: var(--vg-e2);
  border-top: 1px solid var(--vg-filet);
  font-size: 0.875rem;
  color: var(--vg-attenue);
}

/* Même condition que ci-dessus : la légende ne se plaque au bas du bloc que
   si la figure est seule dans sa colonne. Ailleurs elle suit son image. */
.vg-grid > div > .pelle-schema:only-child figcaption {
  margin-top: auto;
}

/* --- 3 quater. CREDIT PHOTOGRAPHIQUE ------------------------------------ */

/* Mention de source des visuels constructeur. Discrète mais présente :
   c'est une condition de leur mise à disposition, pas une note de bas de page
   facultative. */
.pelle-credit {
  margin-top: var(--vg-e5);
  padding-top: var(--vg-e2);
  border-top: 1px solid var(--vg-filet);
  font-size: 0.875rem;
  color: var(--vg-attenue);
  max-width: var(--vg-mesure);
}

/* --- 3 quinquies. BANDE DE COUVERTURE ------------------------------------ */

/* Photo de chantier en pleine largeur. La charte l'autorise en couverture de
   section ; aucun texte n'est posé dessus, donc pas d'aplat de protection. */
.pelle-couverture {
  margin: 0;
  background: var(--vg-clair);
}

.pelle-couverture img {
  display: block;
  width: 100%;
  height: clamp(260px, 38vw, 520px);
  object-fit: cover;
}

.pelle-couverture figcaption {
  padding: var(--vg-e3) var(--vg-marge);
  background: var(--vg-bleu);
  color: var(--vg-blanc);
  font-size: 0.9375rem;
}

.pelle-couverture figcaption strong {
  font-weight: 700;
}

/* --- 3 sexies. FIL D'ARIANE -------------------------------------------- */

/* Sur un site de 61 pages, le visiteur doit savoir où il est. Le fil d'Ariane
   n'est pas décoratif : c'est la seule indication de profondeur. */
.pelle-ariane {
  padding-block: var(--vg-e3);
  border-bottom: 1px solid var(--vg-filet);
  font-size: 0.875rem;
}

.pelle-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vg-e1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pelle-ariane li::after {
  content: "›";
  margin-left: var(--vg-e1);
  color: var(--vg-attenue);
}

.pelle-ariane li:last-child::after {
  content: "";
}

.pelle-ariane [aria-current="page"] {
  font-weight: 500;
}

/* --- 3 septies. SYNONYMES ET LIENS CONNEXES ---------------------------- */

/* Les autres noms du produit. Ce n'est pas du remplissage : la moitié des
   visiteurs cherche l'outil sous un autre nom que le nôtre. */
.pelle-synonymes {
  margin: var(--vg-e3) 0 0;
  padding: var(--vg-e2) var(--vg-e3);
  border-left: 3px solid var(--vg-vert);
  background: var(--vg-clair);
  font-size: 0.9375rem;
  max-width: var(--vg-mesure);
}

.pelle-synonymes :last-child {
  margin-bottom: 0;
}

/* Bandeau de navigation transverse en pied de page produit. */
.pelle-connexes {
  padding-block: var(--vg-e5);
  border-top: 1px solid var(--vg-filet);
}

/* --- 4. TABLEAU TECHNIQUE ----------------------------------------------- */

/* Un tableau large défile dans son propre cadre : la page, elle, ne défile
   jamais horizontalement. */
.pelle-tableau-cadre {
  overflow-x: auto;
  margin-top: var(--vg-e4);
  border: 1px solid var(--vg-filet);
  /* `overflow-x: auto` fait bien défiler le tableau dans son cadre, mais ne
     l'empêche pas de gonfler la zone défilable de la page : mesuré le
     27/08/2026 à 02h50, sur un écran de 489 px, la page brise-roche défilait
     de 80 px à l'horizontale et la page compatibilité de 29 px. `contain`
     coupe cette propagation sans rien changer au défilement interne — vérifié,
     le cadre continue d'offrir ses 215 px de course. */
  contain: paint;
}

.pelle-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--vg-blanc);
}

.pelle-tableau caption {
  padding: var(--vg-e2);
  border-bottom: 1px solid var(--vg-filet);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pelle-tableau th,
.pelle-tableau td {
  padding: var(--vg-e2);
  border-bottom: 1px solid var(--vg-filet);
  text-align: left;
  white-space: nowrap;
}

.pelle-tableau thead th {
  border-bottom: 3px solid var(--vg-bleu);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pelle-tableau tbody th {
  font-weight: 700;
}

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

/* Valeur non confirmée : elle reste vide, et elle le dit. */
.pelle-vide {
  color: var(--vg-attenue);
}

/* --- 5. BLOC À COMPLÉTER ------------------------------------------------ */

/* Ce qui manque doit se voir. Filet épais à gauche, aucune couleur inventée. */
.pelle-acompleter {
  margin: var(--vg-e4) 0;
  padding: var(--vg-e3);
  border-left: 8px solid var(--vg-bleu);
  background: var(--vg-clair);
  max-width: var(--vg-mesure);
}

.pelle-acompleter :last-child {
  margin-bottom: 0;
}

.pelle-acompleter-titre {
  display: block;
  margin-bottom: var(--vg-e1);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Dans le pied de page, le bloc s'inverse pour rester lisible sur l'aplat. */
.vg-pied .pelle-acompleter {
  border-left-color: var(--vg-blanc);
  background: rgba(255, 255, 255, 0.08);
}

/* --- 6. AVERTISSEMENT TECHNIQUE ----------------------------------------- */

/* Une valeur indicative doit être signalée comme telle, à côté de la valeur.
   Filet bleu épais et texte explicite : aucune couleur d'alerte inventée. */

/* Mention de source, en fin de paragraphe ou d'item : on cite d'où vient
   l'information et à quelle date on l'a relevée. Volontairement en retrait —
   c'est une note de bas de page, pas un argument. Le domaine est écrit en
   toutes lettres et jamais lié : le site n'appelle aucune ressource externe et
   ne renvoie vers aucun tiers sans que le lecteur le décide. */
.pelle-source {
  display: block;
  margin-top: var(--vg-e2);
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--vg-attenue);
}
.pelle-avertissement {
  margin-top: var(--vg-e3);
  padding: var(--vg-e3);
  border: 1px solid var(--vg-filet);
  border-top: 3px solid var(--vg-bleu);
  font-size: 0.9375rem;
}

.pelle-avertissement :last-child {
  margin-bottom: 0;
}

/* --- 7. FORMULAIRE ------------------------------------------------------ */

/* Un fieldset sans bordure par défaut : le regroupement se lit par le titre
   et l'espace, pas par un cadre supplémentaire. */
.pelle-groupe {
  margin: 0 0 var(--vg-e6);
  padding: 0;
  border: 0;
}

.pelle-groupe > legend {
  padding: 0;
  margin-bottom: var(--vg-e3);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Sous-groupe : un ensemble de boutons radio. Sa légende se lit comme une
   étiquette de champ, pour ne pas concurrencer le titre du groupe. */
.pelle-sous-groupe {
  margin: 0 0 var(--vg-e3);
  padding: 0;
  border: 0;
}

.pelle-sous-groupe > legend {
  padding: 0;
  margin-bottom: var(--vg-e1);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Deux champs côte à côte doivent s'aligner par le bas, même quand l'un porte
   une aide de saisie et pas l'autre : sans cela, la ligne de grille se casse. */
.vg-grid > .vg-champ-groupe {
  display: flex;
  flex-direction: column;
}

.vg-grid > .vg-champ-groupe > .vg-champ {
  margin-top: auto;
}

/* Aide de saisie sous l'étiquette : ce qu'il faut regarder sur la machine. */
.pelle-aide {
  display: block;
  margin-bottom: var(--vg-e1);
  font-size: 0.875rem;
  color: var(--vg-attenue);
  max-width: var(--vg-mesure);
}

/* Choix multiples : cases à cocher et boutons radio, zone cliquable 44px. */
.pelle-choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vg-e3);
}

.pelle-choix label {
  display: flex;
  align-items: center;
  gap: var(--vg-e1);
  min-height: 44px;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.pelle-choix input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--vg-bleu);
}

/* Consentement : case seule, étiquette longue, alignée en haut. */
.pelle-consentement {
  display: flex;
  align-items: flex-start;
  gap: var(--vg-e2);
  padding: var(--vg-e3);
  border: 1px solid var(--vg-bleu);
  background: var(--vg-blanc);
  max-width: var(--vg-mesure);
}

.pelle-consentement input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: var(--vg-e1);
  accent-color: var(--vg-bleu);
}

.pelle-consentement label {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  text-transform: none;
  letter-spacing: 0;
}

/* Champ obligatoire : marque discrète, expliquée une fois en tête de formulaire. */
.pelle-requis {
  font-weight: 400;
}

/* --- 8. PIED DE PAGE ---------------------------------------------------- */

.vg-pied p {
  max-width: var(--vg-mesure);
}

.pelle-pied-bas {
  margin-top: var(--vg-e5);
  padding-top: var(--vg-e3);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.875rem;
}

/* --- 9. IMPRESSION ------------------------------------------------------ */

/* Une page de compatibilité s'imprime et part sur le chantier. */
@media print {
  .vg-entete,
  .vg-evitement,
  .vg-bouton {
    display: none;
  }

  .vg-section {
    padding-block: var(--vg-e3);
  }

  .vg-section--fonce,
  .vg-bande,
  .vg-pied {
    background: var(--vg-blanc);
    color: var(--vg-bleu);
  }
}

/* --- 12. PIÈGE À ROBOTS ------------------------------------------------- */

/* Le champ est sorti de l'écran plutôt que masqué par `display: none` : certains
   robots ignorent les champs déclarés invisibles, et le piège ne prendrait plus.
   Il est par ailleurs `aria-hidden` et hors tabulation, donc invisible aussi
   pour un lecteur d'écran et pour la navigation au clavier. */
.pelle-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- 13. LES MOTS QUI NE SE COUPENT PAS --------------------------------- */

/* Les mentions légales citent des adresses de pages sources en toutes lettres.
   Une URL est un mot unique de quatre-vingts caractères : sur un téléphone,
   elle pousse la colonne et c'est la page entière qui défile à l'horizontale.
   Mesuré le 27/08/2026 à 05h52 : 136 px de débordement sur les mentions
   légales.

   ⚠ `anywhere` avait été posé d'abord, et c'était une erreur : il réduit aussi la
   largeur minimale d'un bloc, si bien qu'un mot court se coupait dans une colonne
   étroite — « Hydraulique » devenait « Hydrauliqu / e » dans un encadré de l'accueil.
   `break-word` coupe quand il le faut sans toucher au calcul de largeur. */
body {
  overflow-wrap: break-word;
}

/* Sauf dans les tableaux techniques, où couper une désignation d'attache au
   milieu — « S6/0 » devenant « S6 » puis « /0 » — la rendrait illisible. Ces
   tableaux ont déjà leur propre cadre défilant. */
.pelle-tableau th,
.pelle-tableau td {
  overflow-wrap: normal;
}

/* --- 14. LE NUMÉRO DANS L'EN-TÊTE --------------------------------------- */

/* Sur ce métier on appelle avant de remplir huit champs : un conducteur de
   travaux a la machine sous les yeux et deux minutes. Le numéro doit être là
   où l'œil va, pas seulement en pied de page. Il est traité comme un élément
   de navigation, pas comme un bouton : le bouton d'étude reste l'action
   principale, et deux boutons côte à côte n'en font plus aucun. */
.pelle-tel {
  font-weight: 700;
  white-space: nowrap;
}

.pelle-tel::before {
  content: "☎ ";
  font-weight: 400;
}

/* --- 15. L'AIGUILLAGE DU FORMULAIRE, SANS UNE LIGNE DE SCRIPT ----------- */

/* Un particulier et une entreprise n'ont pas les mêmes questions. Le
   formulaire les sépare — et il le fait en CSS, sans une ligne de script.
   ⚠ Le site en exécute un depuis le 27/08 — le menu et la loupe — mais il
   n'entre pas ici : un formulaire doit marcher même quand le script est
   bloqué, et celui-ci marche.

   ⚠ Le repli est volontairement dans ce sens : le masquage n'existe QUE si le
   navigateur sait faire `:has()`. Un navigateur qui ne le sait pas affiche
   TOUT le formulaire — c'est exactement son état d'avant, personne ne perd
   rien. L'inverse — masquer par défaut et révéler par script — laisserait un
   visiteur devant un formulaire amputé sans qu'il le sache. */

@supports selector(:has(*)) {
  .pelle-branche {
    display: none;
  }

  .pelle-formulaire:has(#profil-part:checked) .pelle-branche--particulier,
  .pelle-formulaire:has(#profil-pro:checked) .pelle-branche--pro {
    display: block;
  }

  /* Le rappel « vous nous avez déjà écrit ? » n'a de sens qu'avant le choix :
     une fois la branche ouverte, il encombre. */
  .pelle-formulaire:has(#profil-part:checked) .pelle-avant-choix,
  .pelle-formulaire:has(#profil-pro:checked) .pelle-avant-choix {
    display: none;
  }
}

/* Le rappel au client qui revient : présenté comme une aide, pas comme un
   champ de plus. */
.pelle-avant-choix {
  margin-top: var(--vg-e3);
  padding: var(--vg-e3);
  background: var(--vg-clair);
  border-left: 3px solid var(--vg-vert);
}

.pelle-avant-choix p {
  margin: 0;
  font-size: 0.9375rem;
}

/* Quatre réponses longues ne tiennent pas sur une ligne : elles s'empilent,
   et chacune reste cliquable sur toute sa largeur. */
.pelle-choix--colonne {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vg-e2);
}

/* --- 16. L'EN-TÊTE SUR TÉLÉPHONE --------------------------------------- */

/* Mesuré le 27/08/2026 à 08h20, sur un écran de 390 × 844 px : l'en-tête
   occupait 30 % du premier écran sur l'accueil et 40 % sur la page actualités.
   Un visiteur qui arrive par une recherche voit donc d'abord la navigation,
   pas ce qu'il est venu lire.

   ⚠ Aucun menu à dérouler : il faudrait un script, et le site n'en exécute
   aucun. On resserre, on ne cache pas — un menu replié qu'on oublie d'ouvrir
   est pire qu'un menu visible qui prend un peu de place. */

@media (max-width: 600px) {
  /* Le logo passe de 190 à 150 px : il reste lisible, il tient sur une ligne
     avec le reste. */
  .pelle-marque img {
    width: 150px;
  }

  .vg-entete {
    gap: var(--vg-e2);
    padding-block: var(--vg-e2);
  }

  .vg-nav {
    gap: var(--vg-e2) var(--vg-e3);
    font-size: 0.875rem;
  }

  /* Le bouton d'étude reste l'action principale, mais il n'a pas besoin de la
     même respiration que sur un écran large. */
  .vg-nav .vg-bouton {
    padding: var(--vg-e2) var(--vg-e3);
    font-size: 0.875rem;
  }

  /* Le fil d'Ariane garde sa fonction — dire où l'on est — en prenant deux
     fois moins de hauteur. */
  .pelle-ariane {
    padding-block: var(--vg-e2);
    font-size: 0.8125rem;
  }
}

/* --- 17. LE SOMMAIRE DES PAGES LONGUES --------------------------------- */

/* Deux pages dépassent 17 000 px de haut : une trentaine d'écrans de
   téléphone. Sans sommaire, on ne sait ni ce qu'il y a plus bas, ni combien il
   en reste — et on remonte au menu plutôt que de descendre.
   Mesuré le 27/08/2026 : familles 22 176 px, actualités 17 027 px. */
.pelle-sommaire {
  margin-top: var(--vg-e5);
  padding: var(--vg-e4);
  border: 1px solid var(--vg-filet);
  background: var(--vg-blanc);
}

.pelle-sommaire ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vg-e2) var(--vg-e4);
  margin: var(--vg-e3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: sommaire;
}

.pelle-sommaire li {
  counter-increment: sommaire;
}

/* Le numéro reprend celui de la section, pour qu'on retrouve du regard où
   l'on a atterri. */
.pelle-sommaire li::before {
  content: "0" counter(sommaire) " ";
  color: var(--vg-attenue);
  font-size: 0.8125rem;
}

/* --- 18. IDENTITÉ DE L'ÉDITEUR ----------------------------------------- */

/* La mention légale du pied de page. Elle doit être lisible sans attirer
   l'œil : c'est une obligation, pas un argument. Mesure élargie parce
   qu'une seule phrase longue vaut mieux que quatre lignes hachées. */
.pelle-pied-legal {
  max-width: 78ch;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Une donnée affichée mais non encore confirmée. Elle se signale à côté de
   la valeur, jamais à la place : le visiteur voit ce qu'on sait ET ce qu'on
   ne garantit pas encore. */
.pelle-indicatif {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vg-attenue);
  white-space: nowrap;
}

/* --- 19. LE MENU À QUATRE AXES ------------------------------------------ */

/* ⚠ Ce menu doit marcher SANS JavaScript. Sans lui, la barre reste dépliée et
   passe simplement à la ligne quand elle manque de place : plus haute, mais
   complète et navigable, et les déroulants fonctionnent quand même — ce sont
   des `details` natifs. Le script n'ajoute que le repli. C'est pour ça que
   tout ce qui suit part de l'état déplié, et que le repli est conditionné à
   `.avec-js`. */

.vg-nav {
  flex-wrap: wrap;
  gap: var(--vg-e2) var(--vg-e3);
  row-gap: var(--vg-e2);
}

/* Le bouton qui replie la barre. Invisible tant que le script n'a pas
   confirmé sa présence, et inutile au-delà de 1080 px. */
.pelle-bascule {
  display: none;
  align-items: center;
  gap: var(--vg-e2);
  padding: var(--vg-e2) var(--vg-e3);
  border: 1px solid var(--vg-bleu);
  border-radius: 0;
  background: transparent;
  color: var(--vg-bleu);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

/* Trois barres dessinées en dégradé : aucune image, aucun caractère
   emprunté à une police qui pourrait manquer. */
.pelle-bascule-barres {
  display: block;
  width: 20px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}

/* --- les déroulants ----------------------------------------------------- */

.pelle-menu {
  position: relative;
}

.pelle-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 2px 0;
  color: var(--vg-bleu);
  font-weight: 400;
  white-space: nowrap;
}

.pelle-menu > summary::-webkit-details-marker {
  display: none;
}

/* Le chevron est dessiné, pas écrit : un caractère « ▾ » manque dans
   certaines polices système et s'affiche en carré. */
.pelle-menu > summary::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: 2px;
  border-inline: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.pelle-menu[open] > summary::after {
  border-top: 0;
  border-bottom: 5px solid currentColor;
}

.pelle-menu > summary:hover,
.pelle-menu[open] > summary {
  text-decoration: underline;
}

.pelle-menu > summary:focus-visible {
  outline: 2px solid var(--vg-vert);
  outline-offset: 3px;
}

.pelle-menu-panneau {
  display: flex;
  flex-direction: column;
  gap: var(--vg-e2);
  padding: var(--vg-e3);
  border: 1px solid var(--vg-bleu);
  background: var(--vg-blanc);
  font-size: 0.9375rem;

  /* ⛔ POSÉ LE 04/09/2026 À 00h24, ET C'EST INDISPENSABLE.
     Le menu « Machine » est passé de 6 à 42 entrées le même soir, à la
     demande d'Arnaud : les 35 engins du parc y sont désormais listés.
     Sans limite de hauteur, 42 liens dépassent l'écran d'un portable et
     le bas du menu devient inatteignable — il sort de la fenêtre, et rien
     ne permet de le faire défiler.
     ⭐ La limite suit la fenêtre (70 vh) et plafonne à 560 px : les menus
     courts — Famille (13 entrées), Métier (12) — ne la rencontrent jamais
     et ne changent pas d'un pixel. */
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

/* Le premier lien du panneau est la page d'ensemble : il se distingue des
   sept entrées qui la découpent. */
.pelle-menu-panneau a:first-child {
  padding-bottom: var(--vg-e2);
  border-bottom: 1px solid var(--vg-filet);
  font-weight: 700;
}

.pelle-menu-panneau a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
}

/* --- la loupe ----------------------------------------------------------- */

.pelle-loupe {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--vg-bleu);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  white-space: nowrap;
}

.pelle-loupe:hover {
  text-decoration: underline;
}

.pelle-loupe:focus-visible {
  outline: 2px solid var(--vg-vert);
  outline-offset: 3px;
}

.pelle-loupe-signe {
  font-size: 1.15em;
  font-weight: 700;
}

/* --- la boîte de recherche ---------------------------------------------- */

.pelle-recherche {
  padding: var(--vg-e3) 0 var(--vg-e4);
  border-bottom: 1px solid var(--vg-bleu);
}

.pelle-recherche-etiquette {
  display: block;
  margin-bottom: var(--vg-e2);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vg-attenue);
}

.pelle-recherche-champ {
  width: 100%;
  max-width: var(--vg-mesure);
  padding: var(--vg-e2) var(--vg-e3);
  border: 1px solid var(--vg-bleu);
  border-radius: 0;
  background: var(--vg-blanc);
  color: inherit;
  font: inherit;
  font-size: 1.0625rem;
}

.pelle-recherche-champ:focus-visible {
  outline: 2px solid var(--vg-vert);
  outline-offset: 2px;
}

.pelle-recherche-sortie {
  max-width: var(--vg-mesure);
  margin-top: var(--vg-e3);
}

.pelle-recherche-compte {
  margin: 0 0 var(--vg-e2);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vg-attenue);
}

.pelle-recherche-sortie ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--vg-filet);
}

.pelle-recherche-sortie li {
  border-bottom: 1px solid var(--vg-filet);
}

.pelle-recherche-sortie a {
  display: block;
  padding: var(--vg-e3) 0;
  text-decoration: none;
}

.pelle-recherche-sortie a:hover .pelle-recherche-titre,
.pelle-recherche-sortie a:focus-visible .pelle-recherche-titre {
  text-decoration: underline;
}

/* ⭐ De quelle famille vient ce résultat : sans ça, douze résultats se
   ressemblent tous. */
.pelle-recherche-axe {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vg-vert);
}

.pelle-recherche-titre {
  display: block;
  margin: 3px 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--vg-bleu);
}

.pelle-recherche-extrait {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--vg-attenue);
}

.pelle-recherche-vide {
  margin: 0;
  padding: var(--vg-e3);
  border-left: 8px solid var(--vg-bleu);
  background: var(--vg-clair);
}

/* --- ce qui n'existe que si le script est là ---------------------------- */

.sans-js .pelle-recherche,
.sans-js .pelle-bascule {
  display: none !important;
}

/* --- le repli, sous 1080 px et seulement avec le script ----------------- */

@media (max-width: 1080px) {
  .avec-js .pelle-bascule {
    display: flex;
  }

  .avec-js .vg-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--vg-e2);
  }

  .avec-js .vg-nav--ouvert {
    display: flex;
  }

  .vg-entete {
    flex-wrap: wrap;
  }

  .avec-js .vg-nav > a,
  .avec-js .pelle-menu > summary,
  .avec-js .pelle-loupe {
    display: block;
    padding: var(--vg-e3) 0;
    border-bottom: 1px solid var(--vg-filet);
    text-align: left;
    white-space: normal;
  }

  .avec-js .vg-nav > .vg-bouton {
    margin-top: var(--vg-e3);
    border-bottom: 0;
    text-align: center;
  }

  /* Sur téléphone le panneau pousse le contenu au lieu de le recouvrir :
     un panneau flottant sortirait de l'écran. */
  .pelle-menu-panneau {
    border-inline: 0;
    border-top: 0;
    background: var(--vg-clair);
  }
}

/* --- au-delà, les panneaux flottent ------------------------------------- */

@media (min-width: 1081px) {
  .pelle-menu-panneau {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    box-shadow: 0 10px 28px rgba(14, 58, 84, 0.16);
  }

  /* Le dernier déroulant s'ouvre vers la gauche, sinon il sort de la page. */
  .pelle-menu:nth-of-type(4) .pelle-menu-panneau {
    left: auto;
    right: 0;
  }
}

/* Sans le script, la barre reste dépliée : elle passe simplement à la ligne. */
.sans-js .vg-nav {
  flex-wrap: wrap;
}

/* --- 20. L'EN-TÊTE SUR DEUX LIGNES -------------------------------------- */

/* ⚠ Mesuré avant de trancher : logo, 8 entrées, téléphone et bouton d'appel
   demandent 1 423 px pour tenir sur une ligne, et le conteneur du site en
   fait 1 330 au plus large. La barre se pliait donc TOUJOURS, à toutes les
   largeurs, et elle se pliait mal — le bouton se retrouvait seul sous les
   liens.
   ⭐ Deux lignes assumées valent mieux qu'une ligne qui déborde :
   ligne 1, qui on est et comment nous joindre ; ligne 2, où aller. */

.vg-entete {
  flex-wrap: wrap;
  row-gap: var(--vg-e2);
}

.pelle-entete-actions {
  display: flex;
  align-items: center;
  gap: var(--vg-e3);
  margin-left: auto;
}

/* La navigation prend toute la deuxième ligne. */
.vg-nav {
  flex-basis: 100%;
  padding-top: var(--vg-e2);
  border-top: 1px solid var(--vg-filet);
}

/* ⚠ Sous 900 px, les quatre blocs ne tiennent plus côte à côte : mesuré,
   logo + téléphone + bouton + Menu demandent 660 px. On passe donc à trois
   lignes — identité et Menu, puis contact, puis navigation — plutôt que de
   laisser le bouton d'appel sortir de l'écran. */
@media (max-width: 900px) {
  .pelle-marque {
    max-width: 62%;
  }

  .avec-js .pelle-bascule {
    margin-left: auto;
  }

  .pelle-entete-actions {
    flex-basis: 100%;
    justify-content: flex-start;
    gap: var(--vg-e3);
  }
}

@media (max-width: 520px) {
  .pelle-entete-actions {
    flex-wrap: wrap;
    gap: var(--vg-e2);
  }

  .pelle-entete-actions .vg-bouton {
    flex-basis: 100%;
    text-align: center;
  }
}

/* Le compteur d'outils d'une famille, dans le titre du catalogue. Il informe,
   il ne crie pas : même ligne, plus petit, atténué. */
.pelle-compte {
  margin-left: var(--vg-e2);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vg-attenue);
  white-space: nowrap;
}

/* --- 21. LE BANDEAU DES MÉTIERS ---------------------------------------- */

/* La page courante y figure, mais sans lien : un lien vers la page qu'on lit
   déjà est une fausse porte. Elle reste visible pour qu'on sache où l'on est
   dans la série. */
.pelle-metiers [aria-current="page"] {
  color: var(--vg-attenue);
}

.pelle-ici {
  display: inline-block;
  margin-right: var(--vg-e2);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vg-vert);
}

/* --- La mention BÊTA a été RETIRÉE le 05/09/2026 à 13h58 -----------------
   Demandée par Arnaud le 28/08/2026 — « le dire vaut mieux que le taire » —
   retirée par lui le 05/09/2026, des 227 pages et d'ici.

   ⚠ CE RETRAIT A ÉTÉ FAIT CONTRE UNE RÈGLE QU'IL AVAIT VALIDÉE LE MATIN MÊME,
     et il l'a décidé en connaissance de cause, deux fois, après qu'on lui ait
     remis le texte de sa règle sous les yeux. La règle du projet 11 a été
     réécrite en conséquence : on ne laisse pas une consigne dire le contraire
     de ce que fait le site.

   ⛔ SI ELLE DOIT REVENIR, elle revient d'ici et du même endroit dans l'en-tête
     — juste après `.pelle-marque`, avant `.pelle-bascule`. Le bloc était un
     `span` de classe `pelle-beta`, et ses règles sont dans l'archive du
     05/09/2026 à 13h56, dont le registre du projet donne le chemin.
   ⚠ AUCUN CHEMIN DE DOSSIER INTERNE DANS CE FICHIER, ET C'EST VOULU : il est
     servi publiquement, et la première version de ce commentaire y écrivait
     l'arborescence des archives en clair. Ce n'est pas une faille, c'est de
     l'organisation interne exposée sans raison. Relevé le 05/09/2026 après la
     mise en ligne.
   ⭐ On garde cette trace plutôt que rien : une classe qui disparaît sans un
     mot laisse le suivant se demander si elle a existé. */

/* --- Barre de contact permanente ----------------------------------------
   Demandée par Arnaud le 28/08/2026 : « quand on clique, peu importe où,
   nos informations ». L'en-tête n'est pas collante et les pages montent à
   22 963 px : au milieu d'une page, le visiteur n'avait aucun moyen de
   joindre sans faire défiler.
   ⛔ Aplat, bords nets, aucune ombre, aucun arrondi — la charte tient.
   ⭐ Sans JavaScript elle reste affichée : le contact ne dépend pas d'un
      programme. */
.pelle-joindre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vg-e2) var(--vg-e4);
  padding: var(--vg-e2) var(--vg-e3);
  border-top: 3px solid var(--vg-vert);
  background: var(--vg-bleu);
  color: var(--vg-blanc);
  font-size: 0.9375rem;
  transition: transform var(--vg-transition);
}

/* Repliée en haut de page : l'en-tête y porte déjà le téléphone. */
.pelle-joindre[data-repliee="oui"] {
  transform: translateY(100%);
}

.pelle-joindre-dit {
  font-weight: 500;
}

.pelle-joindre-tel {
  color: var(--vg-blanc);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--vg-blanc);
  padding-bottom: 2px;
  white-space: nowrap;
}

.pelle-joindre-etude {
  display: inline-block;
  padding: 10px var(--vg-e3);
  min-height: 44px;
  line-height: 24px;
  border: 1px solid var(--vg-vert);
  background: var(--vg-vert);
  color: var(--vg-blanc);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.pelle-joindre-etude:hover {
  background: var(--vg-vert-fonce);
  border-color: var(--vg-vert-fonce);
}

/* ⚠ Sans cette réserve, la barre masquerait la fin du pied de page. */
body {
  padding-bottom: 84px;
}

@media (max-width: 560px) {
  .pelle-joindre-dit { display: none; }
  .pelle-joindre { gap: var(--vg-e2); }
  body { padding-bottom: 112px; }
}

/* --- Vignettes du menu Métier -------------------------------------------
   Demandées par Arnaud le 01/09 : une petite photo par métier dans le
   déroulant, « ça doit être parlant ». Bords nets, pas d'ombre. Les métiers
   sans photo portent un carré d'attente discret, remplacé quand l'image
   arrive. */
.pelle-menu-lien-vignette {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pelle-menu-vignette {
  flex: none;
  width: 48px;
  height: 36px;
  object-fit: cover;
  border: 1px solid var(--vg-filet);
}
.pelle-menu-vignette--attente {
  display: inline-block;
  background: var(--vg-clair);
}

/* --- Le champ « Autre marque » du formulaire -----------------------------
   Posé le 02/09/2026 avec le menu déroulant des marques. Il ne s'affiche que
   si le visiteur choisit « Autre » : sans ça, on lui demande deux fois la même
   chose. ⛔ Le masquage est ici, pas en JavaScript inaccessible : si le script
   ne s'exécute pas, le champ RESTE visible et utilisable — jamais l'inverse. */
.pelle-champ-autre {
  margin-top: 8px;
}
.pelle-champ-autre[hidden] {
  display: none;
}

/* --- Les questions propres au produit choisi -------------------------------
   Posé le 04/09/2026. Quand le client sélectionne un accessoire, le formulaire
   déplie les questions de SA fiche — largeur, type de lame, profil de fond.
   ⭐ Le filet vert à gauche dit que ce bloc appartient au champ du dessus :
   ce ne sont pas des questions de plus, c'est le détail de celle qu'on vient
   de poser. */
.pelle-options {
  border-left: 3px solid var(--vg-vert);
  padding-left: var(--vg-e3);
  margin-top: var(--vg-e3);
}

.pelle-options-titre {
  margin: 0 0 var(--vg-e3) 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ⛔ Les étiquettes de ces questions ne crient pas : le bloc en compte jusqu'à
   quatre, et quatre libellés en capitales espacées feraient un mur. */
.pelle-options label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
}

.pelle-options .vg-champ {
  margin-bottom: var(--vg-e3);
}

.pelle-options[hidden] {
  display: none;
}

/* --- 27. VIDÉO, GALERIE ET PARCOURS ------------------------------------ */
/* Écrit par la session du projet 19 pour la page « Qui est Arnaud Dufour »,
   déplacé ici à l'intégration du 05/09/2026 à 13h30.
   ⚠ Ces règles vivaient dans un bloc `<style>` du `<head>` de cette page.
     Un style propre à une page dans son `<head>` échappe à toute relecture de
     la feuille commune : personne ne le voit, personne ne le maintient.
   ⭐ Vérifié avant reprise : aucune couleur en dur, aucune variable hors
     charte, et aucune de ces classes ne redéfinit une règle existante. */

.pelle-video {
  margin: var(--vg-e4) 0 0;
  padding: var(--vg-e4);
  border: 1px solid var(--vg-filet);
  background: var(--vg-blanc);
}

.pelle-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--vg-clair);
}

.pelle-video figcaption {
  margin-top: var(--vg-e3);
  padding-top: var(--vg-e2);
  border-top: 1px solid var(--vg-filet);
  font-size: 0.875rem;
  color: var(--vg-attenue);
}

.pelle-video-attente {
  color: var(--vg-vert);
}

/* La galerie de photos personnelles : trois ou deux figures côte à côte. */
.pelle-galerie {
  margin-top: var(--vg-e4);
}

.pelle-galerie .pelle-schema {
  margin-top: 0;
}

/* Le parcours : une date à gauche, un paragraphe à droite. */
.pelle-parcours {
  margin: var(--vg-e4) 0 0;
  padding: 0;
}

.pelle-parcours > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--vg-e3);
  padding: var(--vg-e3) 0;
  border-top: 1px solid var(--vg-filet);
}

.pelle-parcours > div:last-child {
  border-bottom: 1px solid var(--vg-filet);
}

.pelle-parcours dt {
  font-weight: 700;
  color: var(--vg-bleu);
}

.pelle-parcours dd {
  margin: 0;
}

@media (max-width: 640px) {
  .pelle-parcours > div {
    grid-template-columns: 1fr;
    gap: var(--vg-e1);
  }
}

/* --- 26. UNE REMARQUE PUBLIÉE ------------------------------------------ */
/* Écrite par `publier.php` quand Arnaud clique sur le lien de son courriel.
   ⚠ Ces trois classes ne sont posées par aucune page à la main : si elles
     disparaissent de cette feuille, les remarques publiées s'afficheront en
     texte nu, sans que rien ne le signale. */

.pelle-remarque {
  border-top: 1px solid var(--vg-filet);
  padding: var(--vg-e3) 0;
}

.pelle-remarque-dit {
  margin: 0 0 var(--vg-e2);
}

.pelle-remarque-qui,
.pelle-remarque-fait {
  margin: 0 0 var(--vg-e1);
  color: var(--vg-attenue);
  font-size: 0.875rem;
}

.pelle-remarque-fait {
  color: var(--vg-vert-fonce);
}

/* --- 24 bis. LES SYMBOLES DES RÉSEAUX SOCIAUX (4.08) --------------------
   Arnaud, 15/09/2026 : « des petits symboles pour chaque réseau social »,
   dans le pied de page et sur « Nous suivre », en une seule couleur de la
   charte (décisions 2/4 et 3/4).
   ⭐ Dessinés dans la page (SVG en ligne, Bootstrap Icons, licence MIT) :
      aucune ressource externe, aucune couleur de marque. `currentColor` :
      blanc sur l'aplat bleu du pied, bleu dans les titres.
   ⭐ Formes officielles gardées ; le texte du lien reste à côté, le symbole
      est masqué aux lecteurs d'écran (aria-hidden).
   ⛔ Remplace la consigne du 09/09 « pas de logo de réseau » (poser_nous_suivre.pl),
      sur décision d'Arnaud du 15/09. */
.pelle-reseau {
  display: inline-block;
  width: var(--vg-e2);
  height: var(--vg-e2);
  margin-right: var(--vg-e1);
  vertical-align: -0.125em;
  fill: currentColor;
}

.pelle-reseau--titre {
  width: var(--vg-e4);
  height: var(--vg-e4);
  margin-right: var(--vg-e2);
  vertical-align: -0.1em;
}

/* --- 25. LA VIGNETTE DEVANT CHAQUE FICHE, DANS LES LISTES --------------- */
/* Arnaud, 05/09/2026 : « tu les poses devant chaque page produit, en face du
   titre ou en dessous, tranche ce qui est le mieux ».
   ⭐ EN FACE DU TITRE. C'est déjà la convention des menus déroulants : une
      vignette, puis le libellé, sur la même ligne. Deux conventions pour la
      même chose dans un même site, c'est ce qui fait qu'on ne sait plus
      laquelle est la bonne six mois après.
   ⚠ 72 × 54 affichés pour une source de 96 × 72 : on reste sous la définition
     native, l'image ne peut pas être floue. */

.pelle-liste-vignettee {
  display: flex;
  gap: var(--vg-e2);
  align-items: flex-start;
}

.pelle-catalogue-vignette {
  flex: 0 0 auto;
  width: 72px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--vg-filet);
}

/* ⚠ Sans cette ligne, le texte d'une entrée longue déborde de la colonne :
   un enfant de `flex` refuse de se rétrécir sous sa largeur de contenu tant
   qu'on ne le lui autorise pas. */
.pelle-liste-vignettee > *:not(.pelle-catalogue-vignette) {
  min-width: 0;
}

/* --- 24. CROQUIS À REPÈRES ---------------------------------------------- */
/* Un dessin NU, des pastilles numérotées posées en pourcentage, et une légende
   en vrai texte HTML sous l'image.

   ⛔ POURQUOI AUCUN MOT N'EST DANS L'IMAGE. Les générateurs d'images écrivent
      le français avec des fautes, et une faute dans un JPEG ne se corrige pas :
      il faut refaire l'image. Ici, le dessin ne porte que des traits ; les
      numéros et les libellés sont du texte, donc corrigeables, sélectionnables,
      lus par les lecteurs d'écran et trouvés par les moteurs.

   ⚠ LES POSITIONS SONT EN POURCENTAGE, ET C'EST INDISPENSABLE : l'image est
     fluide, une pastille en pixels se décrocherait de sa pièce dès que la
     largeur change. Elles se règlent dans le `style` de chaque pastille.

   ⛔ SI LE DESSIN EST REMPLACÉ, LES POURCENTAGES SONT À REVOIR. Rien ne le
      signalera : les pastilles resteront affichées, simplement à côté. */

.pelle-croquis-reperes {
  position: relative;
  display: block;
  line-height: 0;
}

.pelle-croquis-reperes img {
  display: block;
  width: 100%;
  height: auto;
}

.pelle-croquis-repere {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--vg-e3);
  height: var(--vg-e3);
  border-radius: 50%;
  background: var(--vg-bleu);
  color: var(--vg-blanc);
  font-family: var(--vg-police);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: var(--vg-e3);
  text-align: center;
  /* ⚠ Le liseré blanc n'est pas décoratif : sans lui, une pastille posée sur un
     trait du dessin devient illisible. */
  box-shadow: 0 0 0 2px var(--vg-blanc);
}

.pelle-croquis-legende {
  list-style: none;
  margin: var(--vg-e2) 0 0;
  padding: 0;
}

.pelle-croquis-legende li {
  position: relative;
  padding-left: var(--vg-e4);
  margin-bottom: var(--vg-e1);
  line-height: 1.5;
}

.pelle-croquis-legende li:last-child {
  margin-bottom: 0;
}

.pelle-croquis-legende b {
  position: absolute;
  left: 0;
  top: 0.1em;
  width: var(--vg-e3);
  height: var(--vg-e3);
  border-radius: 50%;
  background: var(--vg-bleu);
  color: var(--vg-blanc);
  font-size: 0.8125rem;
  line-height: var(--vg-e3);
  text-align: center;
}

/* --- 28. LIEN « QUI EST ARNAUD DUFOUR » DANS L'EN-TÊTE ------------------- */
/* Arnaud, 05/09/2026 à 15h44 : « ma page perso est pas publiée ». Elle l'était
   depuis la 3.10 — mais liée NULLE PART ailleurs qu'au pied de page, ligne 621
   sur 655. Le menu ne parle que du catalogue : Famille, Métier, Machine,
   Produit. Un visiteur qui se demande à qui il a affaire n'avait nulle part où
   cliquer.
   ⭐ Il a tranché à 15h47 : lien direct dans l'en-tête, à côté du numéro,
   plutôt qu'un cinquième menu déroulant « La maison ».
   ⚠ Même graisse que le téléphone, mais SANS pictogramme : le ☎ du numéro dit
   qu'on appelle. Un nom, on le lit. */
.pelle-entete-qui {
  font-weight: 700;
  white-space: nowrap;
}

/* --- 29. CLIPS D'AMBIANCE ------------------------------------------------ */
/* Posés le 05/09/2026 à 18h. Gemini ne rend que trois vidéos par jour ;
   ces sept-là sont fabriquées à ffmpeg à partir d'images du site — un lent
   mouvement de caméra sur une image fixe, 10 s, sans son.
   ⛔ La légende le dit : « Image de synthèse animée. » On ne fait pas passer
      un travelling sur une photo pour une prise de vue.
   ⚠ NI autoplay NI src dans le HTML : site.js pose la source quand le bloc
     entre dans l'écran. Sans JavaScript, le visiteur voit l'image d'attente,
     qui est l'image d'origine de la page — rien n'est perdu. */
.pelle-video-ambiance {
  margin: var(--vg-e6) 0;
}

.pelle-video-ambiance video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--vg-clair);
}

.pelle-video-ambiance figcaption {
  margin-top: var(--vg-e2);
  color: var(--vg-attenue);
  font-size: 0.875rem;
  line-height: var(--vg-e4);
}

/* --- 30. PHOTO CLIQUABLE, PAGE « QUI EST ARNAUD DUFOUR » ------------------ */
/* Demandé par le projet 19 le 05/09/2026 à 18h14 : chaque photo des galeries
   devient un lien vers son fichier plein format, pour qu'on puisse l'agrandir
   sans visionneuse ni script.
   ⚠ `line-height: 0` n'est pas cosmétique : sans lui, la ligne de base du lien
   ajoute quelques pixels blancs sous l'image, et vingt-cinq photos alignées
   en deux colonnes ne s'alignent plus. */
.pelle-agrandir {
  display: block;
  line-height: 0;
}

/* --- 31. CHOIX DE LANGUE -------------------------------------------------- */
/* Posé le 05/09/2026 à 19h30, sur la méthode arbitrée par Arnaud à 17h05 :
   dix langues destinées à devenir réelles sous /ru/, /en/… — indexées, donc
   elles ramènent des visiteurs — et quinze de plus par le proxy de Google,
   pour la traîne. Vingt-cinq entrées au total.
   ⚠ Aucune version réelle n'existe encore : tous les liens passent aujourd'hui
     par le proxy. L'outil bascule une langue vers /xx/ le jour où ses 230
     pages existent, et pas avant — trois pages russes ne font pas une version
     russe.

   ⛔ LE PANNEAU N'EST PAS DANS LE <nav>, ET C'EST VOULU. Le site porte quatre
      menus déroulants, et `.pelle-menu:nth-of-type(4)` ouvre le dernier vers
      la gauche pour qu'il ne sorte pas de la page. Un cinquième <details> dans
      le même <nav> aurait laissé cette règle sur le quatrième et fait déborder
      le nouveau. Il vit donc dans `.pelle-entete-actions`. */
.pelle-langue > summary {
  padding: 2px var(--vg-e2);
  border: 1px solid var(--vg-filet);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ⚠ Vingt-cinq entrées en une colonne feraient une bande de 900 px de haut.
   Deux colonnes, et la limite de hauteur héritée de `.pelle-menu-panneau`
   (70 vh, défilement) prend le relais sur un petit écran. */
.pelle-langue-panneau {
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
  gap: var(--vg-e1) var(--vg-e3);
  right: 0;
  left: auto;
}

/* La note occupe les deux colonnes : elle dit ce que valent ces traductions,
   et c'est la première chose à lire. */
.pelle-langue-note {
  grid-column: 1 / -1;
  margin: 0 0 var(--vg-e2);
  padding-bottom: var(--vg-e2);
  border-bottom: 1px solid var(--vg-filet);
  font-size: 0.8125rem;
  color: var(--vg-attenue);
  max-width: 22rem;
}

/* ⛔ DEUX COLONNES AUSSI SUR TÉLÉPHONE, ET C'EST MESURÉ.
   Premier réglage : une colonne sous 480 px. Le projet 11 l'a servi et
   regardé à 375 x 812 — le panneau est plafonné à 560 px de haut et défile,
   donc 14 LANGUES SUR 25 ÉTAIENT HORS VUE À L'OUVERTURE. Quelqu'un qui
   cherche le turc ne le voyait pas.
   ⭐ Deux colonnes de 140 px tiennent dans les 327 px du panneau, et la
      hauteur tombe de moitié. */
@media (max-width: 480px) {
  .pelle-langue-panneau {
    grid-template-columns: repeat(2, minmax(7rem, 1fr));
    gap: var(--vg-e1) var(--vg-e2);
  }
}


/* ⭐ LE POUCE ET LE CŒUR sous les photographies de « Qui est Arnaud Dufour ».
   Posés le 10/09/2026 à la demande d'Arnaud. La barre est ajoutée par
   site.js et seulement si le serveur répond : sans elle, la figure reste
   exactement ce qu'elle était. */
.pelle-reaction-barre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vg-e1);
  align-items: center;
  margin: var(--vg-e2) 0 0;
}

.pelle-reaction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  color: var(--vg-bleu);
  background: var(--vg-blanc);
  border: 1px solid var(--vg-filet);
  padding: 7px 12px;
  transition: border-color var(--vg-transition), background var(--vg-transition);
}

.pelle-reaction:hover {
  border-color: var(--vg-vert);
}

.pelle-reaction:focus-visible {
  outline: 2px solid var(--vg-vert);
  outline-offset: 2px;
}

.pelle-reaction-signe {
  font-size: 1.05rem;
}

/* Les chiffres s'alignent d'une ligne à l'autre : sans cela, un 9 et un 11
   font sauter le bouton d'un pixel à chaque clic. */
.pelle-reaction-nombre {
  font-variant-numeric: tabular-nums;
  min-width: 1.2em;
  text-align: left;
}

.pelle-reaction--mot {
  color: var(--vg-attenue);
}

/* ⛔ LE PIÈGE À ROBOTS. Il doit rester dans le flux et rester focalisable pour
   les robots qui remplissent tout — donc pas de `display: none`, qui le rendrait
   invisible AUSSI pour eux. On le sort de l'écran. */
.pelle-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pelle-reaction-boite {
  margin: var(--vg-e2) 0 0;
  padding: var(--vg-e2);
  border: 1px solid var(--vg-filet);
  background: var(--vg-clair);
  display: flex;
  flex-direction: column;
  gap: var(--vg-e1);
}

.pelle-reaction-champ {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.8125rem;
  color: var(--vg-attenue);
}

.pelle-reaction-champ input,
.pelle-reaction-champ textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--vg-bleu);
  background: var(--vg-blanc);
  border: 1px solid var(--vg-filet);
  padding: 7px 9px;
  width: 100%;
}

.pelle-reaction-champ input:focus-visible,
.pelle-reaction-champ textarea:focus-visible {
  outline: 2px solid var(--vg-vert);
  outline-offset: 1px;
}

.pelle-reaction-vie {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--vg-attenue);
}

.pelle-reaction-actions {
  display: flex;
  gap: var(--vg-e1);
  align-items: center;
  margin: 0;
}

.pelle-reaction-annuler {
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 7px 4px;
  color: var(--vg-attenue);
  text-decoration: underline;
}

.pelle-reaction-annuler:focus-visible {
  outline: 2px solid var(--vg-vert);
  outline-offset: 2px;
}

/* Vide au repos : le lecteur d'écran l'annonce dès qu'un texte y arrive. */
.pelle-reaction-etat {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--vg-vert);
  min-height: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
  .pelle-reaction {
    transition: none;
  }
}

/* === Bandeau de mesure d'audience (consent.js) — ajouté en 5.00 === */
.pelle-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--vg-e3) var(--vg-marge);
  background: var(--vg-blanc);
  color: var(--vg-bleu);
  border-top: 4px solid var(--vg-bleu);
  font-family: var(--vg-police);
  line-height: 1.5;
}
.pelle-consent:focus { outline: none; }
.pelle-consent-titre {
  margin: 0 0 var(--vg-e1);
  font-weight: 700;
  font-size: 1.125rem;
}
.pelle-consent-texte { margin: 0 0 var(--vg-e2); max-width: var(--vg-mesure); }
.pelle-consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vg-e2);
}
.pelle-consent-btn {
  min-height: 44px;
  padding: 10px var(--vg-e4);
  background: var(--vg-blanc);
  color: var(--vg-bleu);
  border: 2px solid var(--vg-bleu);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pelle-consent-btn:hover { background: var(--vg-bleu); color: var(--vg-blanc); }
.pelle-consent-btn:focus-visible,
.pelle-consent-plus:focus-visible { outline: 3px solid var(--vg-bleu-fonce); outline-offset: 3px; }
.pelle-consent-plus { color: var(--vg-bleu); text-decoration: underline; }
@media (max-width: 600px) {
  .pelle-consent { padding: var(--vg-e2); }
  .pelle-consent-btn { flex: 1 1 40%; padding: 10px var(--vg-e2); }
}
@media print { .pelle-consent { display: none; } }

/* =====================================================================================================
   6.00 — Repères techniques refondus (§ 3-A de la demande du 11 du 01/10/2026)
   Règles à AJOUTER à la fin de 02_SITE/assets/site.css (rien n'est retiré de vignelli.css ni de site.css).
   Produit par refondre_reperes_6_00.php ; écrit le 01/10/2026 par Claude (Opus 5.5), session 06.

   Structure posée par l'outil, dans la colonne vg-col-8 du bloc « Repères techniques » :
     div.pelle-reperes
       p.pelle-reperes-titre            « Le porteur », « L'outil », « L'énergie »
       dl.vg-caracteristiques.pelle-reperes-liste
         div.pelle-repere[.pelle-repere--socle][data-statut][data-unite]
           dt  grandeur + span.pelle-repere-unite « (kg) »
           dd  span.pelle-repere-valeur · span.pelle-repere-condition · span.pelle-repere-variante · span.pelle-repere-statut
     p.pelle-bloc-court                 mention inchangée « Exemple fabricant, valeurs indicatives »
     p.pelle-reperes-lire               lien « Comment lire ces valeurs »

   Charte Vignelli : bleu dominant, vert réservé à l'action (il ne passe pas sur fond clair) ; filets 1 px,
   aucune ombre ; le statut se lit au texte, la forme du cadre ne fait que le doubler.
   À 375 px : une colonne, le libellé au-dessus de la valeur ; aucun défilement horizontal.
   ===================================================================================================== */

.pelle-reperes-titre {
  margin: var(--vg-e4) 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--vg-bleu);
}

.pelle-reperes-titre:first-child {
  margin-top: 0;
}

/* La liste garde le filet de .vg-caracteristiques, mais pas son alignement à droite :
   six colonnes ne tiennent pas sur une ligne, la valeur et ses précisions se lisent de gauche à droite. */
.vg-caracteristiques.pelle-reperes-liste {
  margin-top: var(--vg-e1);
}

.pelle-reperes-liste .pelle-repere {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--vg-e1) var(--vg-e2);
  align-items: baseline;
  justify-content: stretch;
}

.pelle-reperes-liste .pelle-repere dt {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pelle-reperes-liste .pelle-repere dd {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--vg-e1);
  text-align: left;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.pelle-repere-unite {
  white-space: nowrap;
}

.pelle-repere-valeur {
  font-weight: 600;
  color: var(--vg-bleu);
}

/* Une valeur courte (« 1 090–3 040 ») ne se coupe pas ; une liste longue revient à la ligne sur « ; ». */
.pelle-repere-valeur--nombre {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pelle-repere-valeur--vide {
  font-weight: 400;
  color: var(--vg-attenue);
}

.pelle-repere-condition,
.pelle-repere-variante {
  font-size: 0.875rem;
  color: var(--vg-attenue);
}

.pelle-repere-variante {
  font-style: italic;
}

.pelle-repere-statut {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--vg-filet);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--vg-bleu);
}

.pelle-repere[data-statut="a-confirmer"] .pelle-repere-statut {
  border-color: var(--vg-attenue);
}

.pelle-repere[data-statut="donnee-a-obtenir"] .pelle-repere-statut {
  border-style: dashed;
  border-color: var(--vg-attenue);
  color: var(--vg-attenue);
}

.pelle-reperes-lire {
  margin-top: var(--vg-e2);
  font-size: 0.875rem;
}

/* Petit écran : le libellé passe au-dessus de sa valeur. */
@media (max-width: 600px) {
  .pelle-reperes-liste .pelle-repere {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

@media print {
  .pelle-repere-statut {
    border-color: #000;
  }
}

/* ==========================================================================
   6.00 — LA FEUILLE DE LA MAQUETTE (§ 3-N), recopiée sans changement
   (05_FABRIQUE/APERCU_AVANT_POSE/6.00/maquette/assets/maquette-6.00.css,
   validée dans ses grandes lignes par Arnaud le 01/10/2026).
   ⭐ Préfixe `m6-` GARDÉ : on retrouve d'un coup d'œil ce qui vient de la 6.00,
      et la page posée reste comparable, classe pour classe, à la maquette.
   ========================================================================== */

/* --- 1. L'EN-TÊTE RÉDUIT (P1) ----------------------------------------------
   Mesuré sur le site en ligne à 375 px : 457 px d'en-tête, H1 à 615 px.
   Cause : le bouton vert de l'en-tête (152 px de haut, délai compris) et trois
   lignes empilées — logo, contact, bouton.
   ⭐ Ici : ligne 1 = logo, langue, Menu ; ligne 2 = le téléphone en lien texte.
      Le bouton d'étude quitte l'en-tête et entre dans le menu : la barre de
      contact du bas et les boutons de la page le portent déjà.
   ⭐ Grille à zones nommées : l'ordre visuel suit la largeur, l'ordre du code
      (donc du clavier) reste logo → téléphone → qui → langue → Menu → menu. */

.vg-entete.m6-entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "logo tel qui langue"
    "nav  nav nav nav";
  align-items: center;
  column-gap: var(--vg-e3);
  row-gap: var(--vg-e2);
  padding-block: var(--vg-e2);
}

.m6-entete .pelle-marque { grid-area: logo; max-width: none; }
.m6-entete .m6-tel { grid-area: tel; }
.m6-entete .m6-qui { grid-area: qui; }
.m6-entete .m6-langue { grid-area: langue; }
.m6-entete .pelle-bascule { grid-area: menu; }
.m6-entete .vg-nav { grid-area: nav; }

/* Le téléphone : un lien texte, troisième dans la hiérarchie, jamais un bouton.
   Zone tactile de 44 px sans changer son allure. */
.m6-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.m6-tel:hover .m6-tel-numero {
  text-decoration: underline;
}

.m6-tel-heures {
  font-weight: 400;
  white-space: nowrap;
}

/* 6.30 (11/10/2026, décision d'Arnaud) : les deux lignes OVH en haut de page, l'une sous l'autre,
   dans la place « tel » de la grille ; chaque lien garde sa zone tactile. */
.m6-entete .m6-tels {
  grid-area: tel;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0;
}

.m6-tels .m6-tel {
  min-height: 36px;
}

/* Sur un écran étroit, le rôle passe sous le numéro plutôt que de sortir de la marge (mesuré à 375 px le 11/10). */
@media (max-width: 30em) {
  .m6-tels .m6-tel {
    flex-wrap: wrap;
  }

  .m6-tels .m6-tel-heures {
    white-space: normal;
  }
}

.m6-qui {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.m6-langue > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

/* Le menu porte, sous 1081 px, le lien « Qui est Arnaud Dufour » et le bouton
   d'étude que l'en-tête ne porte plus. Au-delà, le lien reste dans l'en-tête. */
.m6-nav-qui { display: none; }

.vg-nav .m6-nav-etude {
  padding: var(--vg-e1) var(--vg-e3);
}

.pelle-bascule {
  min-height: 44px;
}

/* Entre 901 et 1080 px, avec le script : le bouton Menu prend la place du
   lien « Qui est Arnaud Dufour », qui passe dans le menu. */
@media (max-width: 1080px) {
  .vg-entete.m6-entete {
    grid-template-areas:
      "logo tel langue menu"
      "nav  nav nav    nav";
  }

  .m6-entete .m6-qui { display: none; }
  .m6-nav-qui { display: block; }

  .sans-js .vg-entete.m6-entete {
    grid-template-areas:
      "logo tel langue langue"
      "nav  nav nav    nav";
  }
}

/* Sous 900 px : le téléphone descend seul sur la deuxième ligne. */
@media (max-width: 900px) {
  .vg-entete.m6-entete {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "logo langue menu"
      "tel  tel    tel"
      "nav  nav    nav";
    row-gap: 0;
  }

  .sans-js .vg-entete.m6-entete {
    grid-template-areas:
      "logo langue langue"
      "tel  tel    tel"
      "nav  nav    nav";
  }

  .m6-entete .m6-tel {
    justify-self: start;
    font-size: 0.9375rem;
  }

  .m6-entete .vg-nav {
    padding-top: 0;
  }
}

/* --- 2. LES TROIS NIVEAUX DE CONTACT (P2) -----------------------------------
   1. bouton plein « Envoyer mes photos » — l'action principale, une par écran ;
   2. bouton contour « Prendre rendez-vous avec le spécialiste » ;
   3. le téléphone, lien texte discret.
   ⭐ Le délai sort du bouton et se pose dessous, en une ligne. */

.m6-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vg-e2);
  margin: var(--vg-e4) 0 0;
}

.m6-actions .vg-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 1rem;
  text-align: center;
}

.m6-bouton-bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vg-e1);
}

.m6-sous-ligne {
  margin: 0;
  font-size: 0.9375rem;
}

.m6-sous-ligne a,
.m6-tel-discret a {
  display: inline-block;
  padding-block: 10px;
}

.m6-tel-discret {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--vg-attenue);
}

.m6-tel-discret a {
  color: var(--vg-bleu);
}

.m6-engagement {
  margin: var(--vg-e1) 0 0;
  padding-top: var(--vg-e2);
  border-top: 1px solid var(--vg-filet);
  font-size: 0.9375rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  .m6-actions,
  .m6-bouton-bloc {
    align-items: stretch;
  }

  .m6-actions .vg-bouton {
    width: 100%;
  }
}

/* --- 3. LE PREMIER ÉCRAN DE L'ACCUEIL (P1) ---------------------------------- */

.m6-ouverture {
  padding-block: var(--vg-e5) var(--vg-e6);
}

.m6-ouverture-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "texte texte texte texte texte texte photo photo photo photo photo photo"
    "actions actions actions actions actions actions photo photo photo photo photo photo";
  grid-template-rows: auto 1fr;
  column-gap: var(--vg-gouttiere);
}

.m6-ouverture-texte { grid-area: texte; }
.m6-ouverture-photo { grid-area: photo; align-self: start; }
.m6-ouverture-actions { grid-area: actions; }

/* Le H1 de l'accueil garde son texte ; il perd de la taille : au premier écran
   d'un téléphone, chaque ligne de titre repousse le bouton d'autant. */
.m6-ouverture h1 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  margin-bottom: var(--vg-e2);
}

.m6-promesse {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 500;
  max-width: 40ch;
}

.m6-ouverture-photo {
  margin: 0;
}

.m6-ouverture-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Le jeu d'accessoires posé au sol est dans le tiers gauche de la photo. */
  object-position: 22% 40%;
  background: var(--vg-clair);
}

.m6-ouverture-photo figcaption {
  margin-top: var(--vg-e1);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--vg-attenue);
}

@media (max-width: 900px) {
  .m6-ouverture {
    padding-block: var(--vg-e3) var(--vg-e5);
  }

  .m6-ouverture-grille {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "texte"
      "photo"
      "actions";
    grid-template-rows: auto;
  }

  .m6-ouverture-photo {
    margin-top: var(--vg-e3);
  }

  .m6-ouverture-photo img {
    aspect-ratio: 16 / 9;
  }

  .m6-ouverture .vg-filet-accent {
    margin-bottom: var(--vg-e2);
  }

  .m6-ouverture .vg-etiquette {
    margin-bottom: var(--vg-e1);
  }

  .m6-ouverture-actions .m6-actions {
    margin-top: var(--vg-e3);
  }
}

/* --- 4. LES TROIS ENTRÉES ---------------------------------------------------- */

.m6-entrees {
  padding-block: var(--vg-e5) var(--vg-e6);
}

.m6-entrees h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.m6-entree {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--vg-e3);
  border: 1px solid var(--vg-filet);
  border-top: 3px solid var(--vg-bleu);
  background: var(--vg-blanc);
}

.m6-entree h3 {
  margin-bottom: var(--vg-e1);
}

.m6-entree p {
  margin-bottom: var(--vg-e2);
}

.m6-entree ul {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--vg-filet);
}

.m6-entree li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--vg-filet);
  text-decoration: none;
  font-weight: 500;
}

.m6-entree li a:hover {
  text-decoration: underline;
}

/* --- 5. LA FICHE : LE CROQUIS QUI TIENT DANS SON CADRE (P3) -----------------
   ⛔ AVANT : `.pelle-schema-cadre img { min-width: 780px }` — un dessin de
      960 unités dans un cadre de 261 px, défilement horizontal interne.
   ⭐ ICI : le SVG prend 100 % du cadre (il porte déjà son viewBox 0 0 960 546).
      Géométrie et fichier inchangés.
   ⭐ Sous 600 px, la comparaison s'empile : les deux panneaux du MÊME fichier,
      découpés par fragment `#svgView(viewBox(...))`, l'un sous l'autre. La
      bande du bas (la conclusion) est déjà écrite en texte sous le dessin. */

.m6-croquis {
  margin: var(--vg-e4) 0 0;
  padding: var(--vg-e3);
  border: 1px solid var(--vg-filet);
  background: var(--vg-blanc);
}

.m6-croquis img {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
}

.m6-croquis-empile { display: none; }

.m6-croquis-empile img + img {
  margin-top: var(--vg-e2);
}

.m6-croquis figcaption {
  margin-top: var(--vg-e2);
  padding-top: var(--vg-e2);
  border-top: 1px solid var(--vg-filet);
  font-size: 0.875rem;
  color: var(--vg-attenue);
}

.m6-croquis-agrandir {
  display: inline-block;
  padding-block: 10px;
  color: var(--vg-bleu);
}

@media (max-width: 600px) {
  .m6-croquis {
    padding: var(--vg-e1);
  }

  .m6-croquis-entier { display: none; }
  .m6-croquis-empile { display: block; }
}

/* --- 6. LA FICHE : LES REPÈRES EN LIGNES À SIX COLONNES (§ 3-A) ------------
   grandeur · valeur · unité · condition · variante · statut ;
   trois sous-blocs : Le porteur / L'outil / L'énergie.
   ⭐ Un vrai <table> par sous-bloc : la ligne se lit, se compare, s'annonce.
   ⭐ Sous 700 px, chaque ligne devient une fiche empilée : rien ne défile. */

.m6-reperes-table {
  width: 100%;
  margin: 0 0 var(--vg-e4);
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.m6-reperes-table caption {
  padding: 0 0 var(--vg-e1);
  border-bottom: 3px solid var(--vg-bleu);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: left;
}

.m6-reperes-table thead th {
  padding: var(--vg-e1);
  border-bottom: 1px solid var(--vg-bleu);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  color: var(--vg-attenue);
}

.m6-reperes-table tbody th,
.m6-reperes-table td {
  padding: var(--vg-e1);
  border-bottom: 1px solid var(--vg-filet);
  text-align: left;
  vertical-align: top;
}

.m6-reperes-table tbody th {
  font-weight: 700;
}

.m6-valeur {
  font-weight: 700;
  white-space: nowrap;
}

.m6-statut {
  display: inline-block;
  padding: 2px var(--vg-e1);
  border: 1px solid var(--vg-filet);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

/* « donnée à obtenir » : la ligne existe, la valeur est vide — et elle le dit. */
.m6-statut--obtenir {
  border-style: dashed;
  border-color: var(--vg-bleu);
}

.m6-statut--confirmer {
  border-color: var(--vg-bleu);
}

/* Replié : seul le socle (quatre lignes) reste visible. Le repli n'existe
   qu'avec le script : sans lui, tout est déplié, rien n'est perdu. */
.m6-reperes--replie .m6-detail {
  display: none;
}

.m6-voir-tout {
  min-height: 44px;
}

.m6-reperes-mention {
  margin-top: var(--vg-e3);
  font-size: 0.9375rem;
}

@media (max-width: 700px) {
  .m6-reperes-table,
  .m6-reperes-table tbody,
  .m6-reperes-table tr,
  .m6-reperes-table th,
  .m6-reperes-table td {
    display: block;
  }

  .m6-reperes-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .m6-reperes-table caption {
    display: block;
  }

  .m6-reperes-table tr {
    padding: var(--vg-e2) 0;
    border-bottom: 1px solid var(--vg-filet);
  }

  .m6-reperes--replie tr.m6-detail {
    display: none;
  }

  .m6-reperes-table tbody th,
  .m6-reperes-table td {
    padding: 0;
    border: 0;
  }

  .m6-reperes-table tbody th {
    margin-bottom: var(--vg-e1);
  }

  .m6-reperes-table td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--vg-e1);
  }

  .m6-reperes-table td::before {
    content: attr(data-colonne);
    font-size: 0.8125rem;
    color: var(--vg-attenue);
  }

  .m6-valeur {
    white-space: normal;
  }
}

/* --- 7. UN SEUL STYLE D'ENCADRÉ ---------------------------------------------
   « Ce qu'il nous faut pour vous répondre », « Se monte sur » : le même filet
   haut bleu de 3 px que `.pelle-avertissement`, pour ne pas inventer un
   quatrième style d'encadré. */

.m6-encadre {
  padding: var(--vg-e3);
  border: 1px solid var(--vg-filet);
  border-top: 3px solid var(--vg-bleu);
  background: var(--vg-blanc);
  max-width: var(--vg-mesure);
}

.m6-encadre h2,
.m6-encadre h3 {
  font-size: 1.375rem;
  margin-bottom: var(--vg-e2);
}

.m6-encadre ol {
  margin: 0;
  padding-left: var(--vg-e3);
}

.m6-encadre li {
  margin-bottom: var(--vg-e1);
}

.m6-encadre :last-child {
  margin-bottom: 0;
}

.m6-se-monte-sur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--vg-e1);
  margin: 0;
}

.m6-se-monte-sur a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* --- 8. LE FORMULAIRE EN QUATRE TEMPS (P2) ----------------------------------
   besoin → photos → où vous répondre → précisions.
   ⭐ La branche « rendez-vous » s'ouvre en CSS (`:has`), comme les branches
      particulier / professionnel existantes : pas de script pour afficher. */

.m6-etape-numero {
  display: block;
  margin-bottom: var(--vg-e1);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--vg-attenue);
}

.m6-choix-demande {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vg-e2);
}

.m6-choix-demande label {
  display: flex;
  align-items: flex-start;
  gap: var(--vg-e2);
  min-height: 44px;
  margin: 0;
  padding: var(--vg-e2);
  border: 1px solid var(--vg-bleu);
  background: var(--vg-blanc);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.m6-choix-demande label:has(input:checked) {
  border-width: 3px;
  padding: calc(var(--vg-e2) - 2px);
}

.m6-choix-demande input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 4px 0 0;
  accent-color: var(--vg-bleu);
}

.m6-choix-demande strong {
  display: block;
}

@media (max-width: 560px) {
  .m6-choix-demande {
    grid-template-columns: minmax(0, 1fr);
  }
}

.m6-pour-rdv,
.m6-branche-rdv {
  display: none;
}

@supports selector(:has(*)) {
  .pelle-formulaire:has(#demande-rdv:checked) .m6-pour-etude { display: none; }
  .pelle-formulaire:has(#demande-rdv:checked) .m6-pour-rdv { display: inline; }
  .pelle-formulaire:has(#demande-rdv:checked) .m6-branche-rdv { display: block; }
  .pelle-formulaire:has(#demande-rdv:checked) .m6-precisions { display: none; }
}

/* Sans `:has`, le visiteur voit tout : la branche rendez-vous reste affichée
   sous le besoin, c'est l'état sûr. */
@supports not selector(:has(*)) {
  .m6-branche-rdv { display: block; }
  .m6-pour-rdv { display: inline; }
}

/* Les trois photos utiles. */
.m6-photos-utiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vg-e2);
  margin: 0 0 var(--vg-e3);
  padding: 0;
  list-style: none;
}

.m6-photos-utiles li {
  padding: var(--vg-e2);
  border: 1px solid var(--vg-filet);
  border-top: 3px solid var(--vg-bleu);
  background: var(--vg-blanc);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.m6-photos-utiles strong {
  display: block;
  margin-bottom: var(--vg-e1);
}

@media (max-width: 700px) {
  .m6-photos-utiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.m6-limite {
  margin: 0 0 var(--vg-e3);
  font-size: 0.9375rem;
}

/* Le choix des fichiers : le champ natif reste, il est simplement agrandi. */
.m6-fichiers-champ {
  padding: var(--vg-e2);
  border: 1px dashed var(--vg-bleu);
  background: var(--vg-blanc);
}

.m6-fichiers-champ input[type="file"] {
  width: 100%;
  min-height: 44px;
  font: inherit;
}

.m6-fichiers-champ input[type="file"]::file-selector-button {
  min-height: 44px;
  margin-right: var(--vg-e2);
  padding: 0 var(--vg-e3);
  border: 1px solid var(--vg-bleu);
  background: var(--vg-bleu);
  color: var(--vg-blanc);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.m6-apercu {
  margin: var(--vg-e2) 0 0;
  padding: 0;
  list-style: none;
}

.m6-apercu li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--vg-e2);
  padding: var(--vg-e1) 0;
  border-bottom: 1px solid var(--vg-filet);
}

.m6-apercu-vignette {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--vg-filet);
  background: var(--vg-clair);
}

.m6-apercu-sans-image {
  display: grid;
  place-items: center;
  width: 72px;
  height: 54px;
  border: 1px solid var(--vg-filet);
  background: var(--vg-clair);
  font-size: 0.8125rem;
  font-weight: 700;
}

.m6-apercu-nom {
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.m6-apercu-taille {
  display: block;
  font-size: 0.8125rem;
  color: var(--vg-attenue);
}

.m6-retirer {
  min-height: 44px;
  padding: 0 var(--vg-e2);
  border: 1px solid var(--vg-bleu);
  background: var(--vg-blanc);
  color: var(--vg-bleu);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.m6-retirer:hover {
  background: var(--vg-bleu);
  color: var(--vg-blanc);
}

.m6-fichiers-total {
  margin: var(--vg-e1) 0 0;
  font-size: 0.875rem;
  color: var(--vg-attenue);
}

/* Les erreurs : filet bleu épais et texte explicite — jamais de rouge
   (charte, § « Pas de couleur de statut inventée »). */
.m6-erreurs:empty {
  display: none;
}

.m6-erreurs {
  margin: var(--vg-e2) 0 0;
  padding: var(--vg-e2) var(--vg-e3);
  border-left: 8px solid var(--vg-bleu);
  background: var(--vg-clair);
  font-size: 0.9375rem;
  font-weight: 500;
}

.m6-erreurs ul {
  margin: 0;
  padding-left: var(--vg-e2);
}

.m6-progression[hidden] {
  display: none;
}

.m6-progression {
  margin: var(--vg-e2) 0 0;
}

.m6-progression progress {
  width: 100%;
  height: var(--vg-e1);
  accent-color: var(--vg-bleu);
}

.m6-moments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vg-e3);
}

@media (max-width: 700px) {
  .m6-moments {
    grid-template-columns: minmax(0, 1fr);
  }
}

.m6-sans-engagement {
  margin: 0 0 var(--vg-e2);
  font-weight: 700;
}

.m6-envoi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vg-e2);
}

.m6-envoi .vg-bouton {
  min-height: 48px;
  font-size: 1rem;
}

@media (max-width: 560px) {
  .m6-envoi { align-items: stretch; }
}

.m6-retour-maquette[hidden] {
  display: none;
}

.m6-retour-maquette {
  margin: var(--vg-e3) 0 0;
  padding: var(--vg-e3);
  border-left: 8px solid var(--vg-bleu);
  background: var(--vg-blanc);
}

/* Les explications longues de l'ouverture : repliées, pas retirées. */
.m6-detail-plie {
  margin: var(--vg-e3) 0 0;
  border-top: 1px solid var(--vg-filet);
  border-bottom: 1px solid var(--vg-filet);
}

.m6-detail-plie > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}

.m6-detail-plie[open] > summary {
  margin-bottom: var(--vg-e2);
}

/* La marque « maquette » du pied de page. */
.m6-maquette-note {
  font-weight: 700;
}

/* Section courte (« Se monte sur ») : une ligne ne demande pas 96 px d'air. */
.vg-section--compacte {
  padding-block: var(--vg-e5);
}

/* En rendez-vous, les numéros d'étape de l'étude n'ont plus de sens. */
@supports selector(:has(*)) {
  .pelle-formulaire:has(#demande-rdv:checked) .m6-etape-numero { display: none; }
}

.m6-precisions > h3 {
  margin-bottom: var(--vg-e1);
}

/* ⛔ CORRECTIF MESURÉ le 01/10 à 08h45, à 375 px : sous 1081 px, la règle
   `.avec-js .pelle-menu > summary` de site.css (pensée pour les entrées du
   menu replié : 24 px de marge haute et basse) touchait AUSSI le sélecteur de
   langue — 78 px de haut — et le bouton Menu (125 px de large) écrasait le
   logo à 111 px. On rend au sélecteur sa forme de pastille, 44 px. */
.avec-js .m6-entete .m6-langue > summary,
.m6-entete .m6-langue > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--vg-e1);
  border: 1px solid var(--vg-filet);
  white-space: nowrap;
}

.m6-entete .pelle-bascule {
  min-height: 44px;
  padding: 0 var(--vg-e2);
}

.m6-entete .pelle-marque {
  display: flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 600px) {
  .vg-entete.m6-entete {
    column-gap: var(--vg-e2);
  }

  .m6-entete .pelle-marque img {
    width: 140px;
    min-width: 140px;
  }

  .m6-entete .pelle-bascule {
    gap: var(--vg-e1);
    padding: 0 var(--vg-e1);
  }

  /* Le bouton principal doit tenir dans le premier écran d'un téléphone :
     la photo passe en 2/1, cadrée sur le jeu d'accessoires. */
  .m6-ouverture-photo img {
    aspect-ratio: 2 / 1;
  }
}

/* Mesuré à 1 200 px : avec le bouton d'étude, la navigation passait sur deux
   lignes (107 px). Au-delà de 1080 px, la barre de contact du bas et les
   boutons de la page portent déjà l'étude : le bouton reste dans le menu
   replié seulement. */
@media (min-width: 1081px) {
  .vg-nav .m6-nav-etude { display: none; }
}

/* Mesuré à 375 px : `.m6-croquis img { display: block }` battait
   `.m6-croquis-entier { display: none }` — le dessin entier restait affiché
   au-dessus des deux panneaux empilés. Spécificité relevée. */
@media (max-width: 600px) {
  .m6-croquis .m6-croquis-entier { display: none; }
}

/* Empilé, l'étiquette de statut ne s'étire pas sur la largeur de la cellule. */
@media (max-width: 700px) {
  .m6-reperes-table td > * { justify-self: start; }
}

/* Le texte qui suit le croquis s'y collait (capture du 01/10, 375 px). */
.m6-croquis {
  margin-bottom: var(--vg-e4);
}

/* === 6.00 — GÉNÉRALISATION DE LA MAQUETTE (generaliser_maquette_6_00.pl) ===================
   Écrit le 01/10/2026 par Claude (Opus 5.5, sous-agent du 06). Ce qui suit complète la feuille
   de la maquette pour les 192 fiches : les classes posées par les outils 6.00 du contenu, qui
   n'avaient pas encore de style, et le repli des repères refondus.
   ⭐ UN SEUL STYLE D'ENCADRÉ : .pelle-encadre est le .m6-encadre de la maquette (filet haut bleu
      de 3 px, fond blanc), pour « Ce qu'il nous faut » comme pour « À ne pas confondre ».
   ⛔ Le vert ne sert à aucun texte ici ; zones tactiles de 44 px ; aucune couleur en dur.
   ============================================================================================ */

/* Repères refondus (refondre_reperes_6_00.php) : le socle reste visible, le reste se replie.
   Le repli n'existe qu'avec le script : sans lui, tout est déplié. */
.m6-reperes--replie .pelle-repere:not(.pelle-repere--socle) {
  display: none;
}

.m6-voir-tout {
  margin-top: var(--vg-e3);
}

/* « Ce que l'étude établit » (poser_bloc_etude_etablit_6_00.php) : même forme que les repères. */
.vg-caracteristiques.vg-reperes {
  margin-top: var(--vg-e1);
}

.vg-caracteristiques.vg-reperes > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--vg-e1) var(--vg-e2);
  align-items: baseline;
}

.vg-reperes dt {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vg-reperes dd {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--vg-e1);
  text-align: left;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.pelle-valeur {
  font-weight: 400;
  color: var(--vg-attenue);
}

.pelle-condition {
  font-size: 0.875rem;
  color: var(--vg-attenue);
}

/* « à établir à l'étude » : la valeur est vide, et le statut le dit (cadre en tirets). */
.pelle-statut {
  display: inline-block;
  padding: 0 6px;
  border: 1px dashed var(--vg-attenue);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--vg-bleu);
}

@media (max-width: 600px) {
  .vg-caracteristiques.vg-reperes > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Un seul style d'encadré. */
.pelle-encadre {
  margin: var(--vg-e3) 0 0;
  padding: var(--vg-e3);
  border: 1px solid var(--vg-filet);
  border-top: 3px solid var(--vg-bleu);
  background: var(--vg-blanc);
  max-width: var(--vg-mesure);
}

.pelle-encadre > .vg-etiquette {
  display: block;
  margin-bottom: var(--vg-e2);
}

.pelle-encadre > p {
  margin: var(--vg-e2) 0 0;
  font-size: 0.9375rem;
}

.pelle-encadre .pelle-liste li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* « À ne pas confondre » : le lien vers l'autre fiche fait 44 px de haut. */
.pelle-ne-pas-confondre .pelle-liste > li > strong:first-child > a {
  display: inline-block;
  padding-block: 10px;
}

/* « Se monte sur » (poser_se_monte_sur_6_00.php) : une ligne de liens, 44 px chacun. */
.pelle-se-monte-sur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--vg-e1);
  margin: 0;
}

.pelle-se-monte-sur a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* La barre de contact est sur aplat bleu : l'anneau de focus y passe en blanc
   (même défaut que celui corrigé le 28/08 sur le pied de page). */
.pelle-joindre :focus-visible {
  outline-color: var(--vg-blanc);
}

/* La photo du Salonvert au premier écran (16/9 d'origine) : le cadrage garde la mini-pelle
   et son tiltrotateur, dans le tiers gauche et le bas de l'image, quel que soit le format
   (4/3 au-dessus de 900 px, 16/9 en dessous, 2/1 sous 600 px). */
.m6-ouverture-photo--salonvert img {
  object-position: 35% 72%;
}

/* Le lien « Agrandir le croquis » : 44 px. */
.m6-croquis-agrandir {
  min-height: 44px;
}

/* Les tableaux comparatifs des fiches : sous 600 px, une ligne devient une fiche empilée,
   chaque valeur précédée du nom de sa colonne (posé dans la page, data-colonne) :
   plus de défilement horizontal dans le cadre. Au-dessus, le tableau est inchangé. */
@media (max-width: 600px) {
  .pelle-tableau-cadre:has(.pelle-tableau--empile) {
    overflow-x: visible;
  }

  .pelle-tableau--empile,
  .pelle-tableau--empile tbody,
  .pelle-tableau--empile tr,
  .pelle-tableau--empile th,
  .pelle-tableau--empile td {
    display: block;
    width: auto;
  }

  .pelle-tableau--empile caption {
    display: block;
  }

  .pelle-tableau--empile thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .pelle-tableau--empile tbody tr {
    padding: var(--vg-e2);
    border-bottom: 1px solid var(--vg-filet);
  }

  .pelle-tableau--empile tbody th,
  .pelle-tableau--empile tbody td {
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .pelle-tableau--empile tbody th {
    margin-bottom: var(--vg-e1);
  }

  .pelle-tableau--empile tbody td {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--vg-e1);
  }

  .pelle-tableau--empile tbody td::before {
    content: attr(data-colonne);
    font-size: 0.8125rem;
    color: var(--vg-attenue);
  }
}

/* L'en-tête réduit à 375 px : quand le fil d'Ariane passe sur deux lignes (nom de fiche
   long), ses 16 px de marge haute et basse portaient l'en-tête à 208 px (mesuré le 01/10
   à 10h28 sur 4 fiches sur 10). 8 px suffisent sous l'en-tête réduit. */
@media (max-width: 600px) {
  .vg-conteneur > .pelle-ariane {
    padding-block: var(--vg-e1);
  }
}

/* === 6.01 — LE CROQUIS DEVIENT UNE PHOTO EN DEUX VOLETS (« forme A ») ======================
   Décision d'Arnaud du 02/10/2026 à 08h57.
   Écrit le 02/10/2026 à 09h04 par Claude (Opus 5.5, sous-agent du 06), À AJOUTER EN FIN de
   02_SITE/assets/site.css — ce fichier ne modifie pas site.css.
   Posé par 05_FABRIQUE/OUTILS/poser_photos_emplois_6_01.pl : la figure devient
     <figure class="m6-croquis m6-croquis--photo">
       <img …emplois-<slug>.jpg 1400×788>            ← l'image entière, grand écran
       <div class="m6-croquis-empile">
         <img class="m6-volet m6-volet--gauche" …>   ← le même fichier, volet gauche
         <img class="m6-volet m6-volet--droite" …>   ← le même fichier, volet droit
       </div>
       <figcaption> À gauche : … / À droite : … / Ce qui le distingue … / Image de synthèse.
   Le cadre (filet, fond blanc, marges) reste celui de `.m6-croquis` : la photo prend la
   place du dessin dans le même encadré, sans nouvelle couleur.

   ⭐ LE CALCUL DES VOLETS — pourquoi `aspect-ratio: 6 / 7` et pas 8 / 9.
   L'image fait 1400 × 788 (rapport 1,7766). Deux volets séparés par une fine bande blanche,
   MESURÉE au pixel sur godet-lisse (essai Gemini n° 1, ramené en 1400 × 788) :
     bande blanche = colonnes 689 à 710 (22 px, 1,6 % de la largeur) ;
     volet gauche  = colonnes 0 à 688 (689 px, 49,2 %) ; volet droit = 711 à 1399 (689 px).
   Avec `object-fit: cover`, l'image est mise à la HAUTEUR du cadre ; la part de sa largeur
   visible vaut donc  f = (rapport du cadre) / 1,7766.
     - cadre 8 / 9 (0,889) : f = 50,0 % = 700 px  → le gauche montre 0 à 700, soit 12 px
       de la bande blanche (689 à 700) : REFUSÉ, la bande se verrait au bord du volet ;
     - pour ne garder que 49 % (686 px), il faut un cadre de 0,49 × 1,7766 = 0,871 au plus ;
       mais 686 px ne laisse que 3 px avant la bande, moins que le flou JPEG du bord ;
     - cadre 6 / 7 (0,857) : f = 48,2 % = 675 px → gauche 0 à 675, droit 725 à 1399.
       ⭐ 14 px de marge de chaque côté de la bande, soit environ 6 px d'écran à 375 px de
       large ; le cadre est 4 % plus haut qu'en 8 / 9, la perte d'image est de 0,9 % par
       volet, côté centre.
   `object-position: 0% 50%` cale le volet gauche sur le bord GAUCHE de l'image (on perd
   le côté de la bande) ; `100% 50%` cale le droit sur le bord DROIT. Verticalement, toute
   la hauteur de l'image est visible (cover se règle sur la hauteur) : 50 % est sans effet,
   il est écrit pour être explicite.
   ⚠ Ce calcul suppose une bande CENTRÉE et de moins de 50 px (3,6 %) de large : chaque
   image doit être mesurée avant la pose, une bande décalée se verrait au bord d'un volet.

   ⭐ Spécificités, mesurées sur le site 6.00 : `.m6-croquis img` (0,1,1) donne déjà
   display:block, width:100 %, height:auto à toutes les images de la figure. Les règles
   ci-dessous sont à (0,2,0) ou (0,2,1) pour gagner sans dépendre de l'ordre de la feuille —
   le défaut du 01/10 (« le dessin entier restait affiché au-dessus des deux panneaux »,
   site.css ligne 3075) ne doit pas se reproduire. */

/* Grand écran : l'image entière, l'empilé reste caché (règle `.m6-croquis-empile` de la 6.00). */
.m6-croquis.m6-croquis--photo > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Les deux étiquettes « À gauche : » et « À droite : » de la légende. */
.m6-croquis--photo .m6-volet-legende strong {
  font-weight: 600;
  color: var(--vg-bleu-fonce);
}

/* Téléphone : même point de rupture que `.m6-croquis-empile` (600 px). */
@media (max-width: 600px) {
  .m6-croquis.m6-croquis--photo > img { display: none; }
  .m6-croquis--photo .m6-croquis-empile { display: block; }

  .m6-croquis--photo .m6-volet {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 7;
    object-fit: cover;
  }

  .m6-croquis--photo .m6-volet--gauche { object-position: 0% 50%; }
  .m6-croquis--photo .m6-volet--droite { object-position: 100% 50%; }

  /* Entre les deux volets : l'écart de l'empilé 6.00, plus un filet, pour qu'on ne lise
     pas une seule photo coupée en deux. */
  .m6-croquis--photo .m6-volet + .m6-volet {
    margin-top: var(--vg-e2);
    padding-top: var(--vg-e2);
    border-top: 1px solid var(--vg-filet);
    box-sizing: content-box;
  }
}

/* --- 6.02 — précisions repliées ---------------------------------------------
   Posé le 02/10/2026 par Claude (Opus 5.5, sous-agent de la session 06), sur
   le GO d'Arnaud du 02/10 à 13h20.
   ⭐ Deux plis natifs du formulaire « Demander une étude », sans script :
      - `.pelle-precisions` : tout ce qui suit les coordonnées et précède le
        consentement (aucun champ obligatoire dedans) ;
      - `.pelle-aide-photos` : l'illustration « Voilà ce qu'il nous faut voir »,
        qui passe sous le champ de fichiers.
   ⛔ Le pli des précisions garde la classe `m6-precisions` : c'est elle qui le
      masque en rendez-vous (bloc 8 plus haut).
   Le résumé est un bouton discret : un filet dessus et dessous, le texte en
   bleu, un chevron dessiné en CSS (un caractère « ▸ » manque dans certaines
   polices système et s'affiche en carré). Aucune couleur nouvelle. */

.pelle-precisions {
  margin: 0 0 var(--vg-e6);
  border-top: 1px solid var(--vg-filet);
  border-bottom: 1px solid var(--vg-filet);
}

.pelle-aide-photos {
  margin: 0 0 var(--vg-e3);
  border-top: 1px solid var(--vg-filet);
  border-bottom: 1px solid var(--vg-filet);
}

.pelle-precisions > summary,
.pelle-aide-photos > summary {
  display: flex;
  align-items: center;
  gap: var(--vg-e2);
  min-height: 44px;
  padding: var(--vg-e2) 0;
  list-style: none;
  color: var(--vg-bleu);
  font-weight: 700;
  cursor: pointer;
}

.pelle-aide-photos > summary {
  font-weight: 500;
}

.pelle-precisions > summary::-webkit-details-marker,
.pelle-aide-photos > summary::-webkit-details-marker {
  display: none;
}

/* Le chevron : un carré dont on ne garde que deux côtés, tourné.
   Fermé, il pointe à droite ; ouvert, vers le bas. */
.pelle-precisions > summary::before,
.pelle-aide-photos > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.pelle-precisions[open] > summary::before,
.pelle-aide-photos[open] > summary::before {
  transform: rotate(45deg);
}

.pelle-precisions > summary:hover,
.pelle-aide-photos > summary:hover {
  text-decoration: underline;
}

.pelle-precisions > summary:focus-visible,
.pelle-aide-photos > summary:focus-visible {
  outline: 2px solid var(--vg-vert);
  outline-offset: 3px;
}

.pelle-precisions[open] > summary {
  margin-bottom: var(--vg-e3);
}

.pelle-aide-photos[open] > summary {
  margin-bottom: var(--vg-e2);
}

/* Le dernier groupe du pli ne double pas sa marge avec le filet du bas. */
.pelle-precisions > :last-child {
  margin-bottom: var(--vg-e3);
}

.pelle-aide-photos > figure {
  margin-top: 0;
  margin-bottom: var(--vg-e3);
}

/* === 6.02 — LE VISUEL EN TÊTE DE FICHE (poser_visuel_en_tete_6_02.pl) =======================
   Écrit le 02/10/2026 à 13h36 par Claude (Opus 5.5, sous-agent du 06) — audit GPT du 02/10,
   point 5, GO d'Arnaud : la photo d'ouverture monte sous le titre, les grands blancs du haut
   de page se réduisent. À AJOUTER À LA FIN de 02_SITE/assets/site.css.

   ⭐ MESURÉ AVANT (Edge sans fenêtre, godet-lisse) :
     1 200 px : section de tête padding 128 / 128 px (vignelli.css, `.vg-section`, ≥ 1100 px),
                section 01 padding-top 128 px, h2 puis figure : 358 px de vide entre la fin
                de « Autres noms » (852 px) et la première image (1 210 px).
       504 px : 96 / 96 px, puis 96 px : première image à 1 340 px.
   ⚠ Il n'existe ni `.pelle-fiche-tete` ni `.m6-section` : la tête de fiche est
     `main > section.vg-section.vg-conteneur`. On la vise par `:has(.pelle-visuel-tete)`,
     donc SEULEMENT sur les pages qui portent le visuel — aucune autre page ne bouge.
     Un navigateur sans `:has` garde les marges d'avant : rien ne casse.

   RÉDUCTION PROPOSÉE (échelle de 8 de la charte, aucune valeur hors échelle) :
     ≥ 601 px : tête 128 → 48 px en haut (l'en-tête du site respire déjà), 128 → 64 px en bas ;
                section 01 : 128 → 96 px en haut (96 px reste la respiration de la charte).
     ≤ 600 px : tête 96 → 32 px en haut, 96 → 48 px en bas ; section 01 : 96 → 64 px en haut.
   ⛔ Le vert ne sert à rien ici ; aucune couleur en dur ; bords nets.
   ============================================================================================ */

/* La figure : dans la colonne de l'intro (vg-col-8), sous le h1, toute la largeur des
   8 colonnes. Ratio d'origine gardé : width et height de la balise réservent la place. */
.pelle-visuel-tete {
  margin: 0 0 var(--vg-e4);
  padding: 0;
  border: 0;
  background: none;
}

.pelle-visuel-tete > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: var(--vg-clair);
}

.pelle-visuel-tete figcaption {
  margin-top: var(--vg-e1);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--vg-attenue);
}

/* Légende courte des deux volets : chaque « À gauche : » / « À droite : » sur sa ligne,
   sans <br /> (les deux spans sont recopiés à l'octet, aucun segment neuf). */
.pelle-visuel-tete .m6-volet-legende {
  display: block;
}

.pelle-visuel-tete .m6-volet-legende + br {
  display: none;
}

.pelle-visuel-tete .m6-volet-legende strong {
  font-weight: 600;
  color: var(--vg-bleu-fonce);
}

/* --retirer-doublon, deux volets : la figure m6 entière monte avec ses classes ; elle garde
   son cadre et son empilé du téléphone, on ne lui retire que la marge haute. */
.m6-croquis.pelle-visuel-tete {
  margin: 0 0 var(--vg-e4);
}

/* Les blancs du haut de fiche. Spécificité (0,2,1) : passe devant `.vg-section` (0,1,0)
   de vignelli.css, y compris dans son @media (min-width: 1100px). */
main > .vg-section:has(.pelle-visuel-tete) {
  padding-top: var(--vg-e5);
  padding-bottom: var(--vg-e6);
}

main > .vg-section:has(.pelle-visuel-tete) + .vg-section {
  padding-top: var(--vg-e7);
}

/* Téléphone : la grille est déjà empilée (< 900 px) dans l'ordre du HTML — h1, PHOTO,
   chapô, autres noms, puis « L'essentiel » : la photo sous le titre, avant l'aside. */
@media (max-width: 600px) {
  main > .vg-section:has(.pelle-visuel-tete) {
    padding-top: var(--vg-e4);
    padding-bottom: var(--vg-e5);
  }

  main > .vg-section:has(.pelle-visuel-tete) + .vg-section {
    padding-top: var(--vg-e6);
  }

  .pelle-visuel-tete {
    margin-bottom: var(--vg-e3);
  }
}


/* ======================================================================
   6.19 — pilote « conseil humain, photos, trois critères »
   Posé le 08/10/2026 (session projet 11, rôle du 06 sur le GO d'Arnaud).
   Trois composants neufs, aucune règle existante modifiée.
   ====================================================================== */

/* 1. Le conseiller : qui lit vos photos, et qui répond. */
.m6-conseiller {
  display: flex;
  align-items: flex-start;
  gap: var(--vg-e2);
  margin: var(--vg-e3) 0 0;
  padding: var(--vg-e2);
  border: 1px solid var(--vg-filet);
  border-left: 3px solid var(--vg-bleu);
  background: var(--vg-blanc);
  max-width: var(--vg-mesure);
}

.m6-conseiller-photo {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--vg-bleu);
}

.m6-conseiller-texte p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.m6-conseiller-nom {
  margin-bottom: var(--vg-e1) !important;
}

.m6-conseiller-lien {
  margin-top: var(--vg-e1) !important;
}

.m6-conseiller-lien a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--vg-bleu);
  text-decoration: underline;
}

/* 2. Les trois critères qui décident, sous « L'essentiel ». */
.m6-criteres-cles {
  margin: var(--vg-e2) 0 0;
  border: 1px solid var(--vg-filet);
  border-top: 3px solid var(--vg-bleu);
  background: var(--vg-blanc);
  padding: var(--vg-e2) var(--vg-e3);
}

.m6-criteres-cles .vg-etiquette {
  display: block;
  margin-bottom: var(--vg-e1);
}

.m6-criteres-cles dl {
  margin: 0;
}

.m6-criteres-cles dl > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--vg-e1) 0;
  border-top: 1px solid var(--vg-filet);
}

.m6-criteres-cles dl > div:first-child {
  border-top: 0;
}

.m6-criteres-cles dt {
  font-size: 0.875rem;
  color: var(--vg-attenue);
}

.m6-criteres-cles dd {
  margin: 0;
  font-weight: 700;
  line-height: 1.45;
}

.m6-criteres-cles dd .pelle-repere-condition,
.m6-criteres-cles dd .pelle-repere-variante {
  font-weight: 400;
  color: var(--vg-attenue);
}

.m6-criteres-cles dd .pelle-repere-statut {
  display: inline-block;
  margin-left: var(--vg-e1);
  font-weight: 400;
}

.m6-criteres-cles .pelle-bloc-court {
  margin: var(--vg-e1) 0 0;
}

.m6-criteres-cles .pelle-bloc-court a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 3. Les conseils photo en une ligne, sous le bouton d'ajout. */
.m6-photos-utiles--ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vg-e1) var(--vg-e3);
  margin: var(--vg-e2) 0 var(--vg-e3);
  padding: 0;
  list-style: none;
}

.m6-photos-utiles--ligne li {
  padding: 0;
  border: 0;
  border-left: 3px solid var(--vg-bleu);
  padding-left: var(--vg-e1);
  background: transparent;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.m6-photos-utiles--ligne strong {
  display: inline;
  margin: 0 var(--vg-e1) 0 0;
}

@media (max-width: 700px) {
  .m6-photos-utiles--ligne {
    grid-template-columns: none;
    flex-direction: column;
    gap: var(--vg-e1);
  }
}

/* --- 10/10/2026, lot A1 de l'audit -----------------------------------------
   1. Le premier écran des fiches (G05) : trois lignes sous le titre, puis
      « Envoyer mes photos » et « Décrire mon besoin ». Mêmes boutons que le
      bloc « Votre étude » (m6-actions, m6-bouton-bloc, m6-sous-ligne).
   2. Les champs du circuit masqués pour un outil passif (G06) : la règle
      .vg-grid > .vg-champ-groupe pose display: flex, qui l'emporterait sur
      l'attribut hidden. */
.m6-premier-ecran {
  margin: var(--vg-e2) 0 var(--vg-e3);
}

.m6-premier-ecran-texte {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.m6-premier-ecran .m6-actions {
  margin-top: var(--vg-e2);
}

.vg-champ-groupe[hidden],
fieldset.pelle-sous-groupe[hidden] {
  display: none;
}

/* ==========================================================================
   6.36 (13/10/2026) — LES FICHES PARLENT AU CLIENT
   Demande d'Arnaud : « quelque chose de plus humain », plus de rectangles.
   Plus aucun cadre de statut : une valeur sans mention est un ordre de grandeur ;
   le doute s'écrit en clair, en petit italique (« à vérifier avec vous »).
   L'unité suit la valeur ; une ligne « par classe » apparie chaque nombre à son mot,
   et ne se coupe qu'entre deux couples.
   ========================================================================== */
.pelle-note {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--vg-attenue);
}

.pelle-repere-statut,
.pelle-statut {
  border: 0;
  padding: 0;
}

dd > .pelle-repere-unite {
  font-weight: 600;
  color: var(--vg-bleu);
}

.pelle-repere-valeur--classe {
  white-space: normal;
}

.pelle-repere-paire {
  white-space: nowrap;
}

.pelle-repere-part {
  font-weight: 400;
  color: var(--vg-attenue);
}

.pelle-reperes-intro {
  margin: 0 0 var(--vg-e2);
}

dd > .pelle-valeur {
  font-weight: 600;
  color: var(--vg-bleu);
}

/* 6.36 — décision d'Arnaud du 13/10 : un chiffre absent se dit « on le calcule avec vous pour votre machine ». */
.pelle-a-calculer {
  color: var(--vg-bleu);
}

/* ==========================================================================
   6.37 (13/10/2026) — LES REPÈRES EN TROIS BLOCS DE PHRASES
   Décisions d'Arnaud : « Sur quelle machine ? », « Ce que fait l'outil »,
   « Ce qu'il faut côté hydraulique », la provenance dite une fois en bas ;
   le tableau détaillé reste dans la page, replié (<details>, sans script).
   ========================================================================== */
.pelle-phrases {
  margin: 0 0 var(--vg-e3);
}

.pelle-phrases-titre {
  margin: var(--vg-e3) 0 var(--vg-e1);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vg-bleu);
}

.pelle-phrases-titre:first-child {
  margin-top: 0;
}

.pelle-phrases p {
  margin: 0;
  max-width: 62ch;
}

.pelle-phrases .pelle-phrases-source {
  margin-top: var(--vg-e3);
  font-size: 0.875rem;
  color: var(--vg-attenue);
}

.pelle-detail-chiffre {
  margin: 0 0 var(--vg-e2);
  border-top: 1px solid var(--vg-filet);
}

.pelle-detail-chiffre > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--vg-bleu);
}

.pelle-detail-chiffre[open] > summary {
  margin-bottom: var(--vg-e2);
}

/* ==========================================================================
   6.38 (14/10/2026) — UN EXEMPLE SUR LA FICHE, LE DÉTAIL SUR UNE PAGE
   Arnaud : « on donne un exemple et un clic nous emmène sur une page avec
   tous ces détails selon le matériel consulté ». Les pages « Mesures
   constatées » reprennent les tableaux de la charte ; le schéma « sans /
   avec » du tiltrotateur est un dessin vectoriel, ses textes se traduisent.
   ========================================================================== */
.pelle-phrases .pelle-phrases-lien {
  margin-top: var(--vg-e2);
  font-weight: 600;
}

.pelle-phrases-lien a,
.pelle-retour a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--vg-bleu);
}

.pelle-retour {
  margin: var(--vg-e2) 0 0;
}

.pelle-couverture--schema {
  background: var(--vg-blanc);
}

.pelle-schema-svg {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
}

/* 6.38 — le schéma du tiltrotateur en deux dessins : côte à côte sur un écran large, l'un sous l'autre sur un téléphone
   (d'un seul tenant, ses textes tombaient à environ 6 px sur 375 px, mesuré le 14/10/2026). */
.pelle-schema-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--vg-blanc);
}

.pelle-schema-duo .pelle-schema-svg {
  max-width: none;
}

.pelle-schema-duo .pelle-schema-svg + .pelle-schema-svg {
  border-left: 1px solid var(--vg-filet);
}

@media (max-width: 700px) {
  .pelle-schema-duo {
    grid-template-columns: 1fr;
  }

  .pelle-schema-duo .pelle-schema-svg + .pelle-schema-svg {
    border-left: 0;
    border-top: 1px solid var(--vg-filet);
  }
}

/* ==========================================================================
   6.39 (14/10/2026) — LA TAILLE D'ATTACHE PRESCRITE POUR LE TONNAGE
   Arnaud : « avec la possibilité de cocher ne respecte pas les prescriptions
   constructeur ». La case n'apparaît, sous le menu des tailles, que lorsqu'une
   taille est prescrite pour le tonnage choisi (assets/site.js, section 4).
   ========================================================================== */
.pelle-hors-prescription {
  margin-top: var(--vg-e2);
}