.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: var(--t-m);
  line-height: 1.2;
  padding: var(--e3) var(--e5);
  min-height: var(--hauteur-champ);
  border-radius: var(--rayon-m);
  border: var(--filet) solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--texte);
  transition: transform var(--duree-1) var(--transition),
              background-color var(--duree-1) var(--transition),
              border-color var(--duree-1) var(--transition);
}

.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: none; }
.bouton svg { width: 17px; height: 17px; flex: none; }

.bouton--primaire {
  background: var(--accent);
  color: var(--sur-accent);
  border-color: var(--accent);
}

.bouton--primaire:hover {
  background: var(--accent-texte);
  color: var(--sur-accent);
  border-color: var(--accent-texte);
}

.bouton--contour {
  background: transparent;
  color: var(--texte);
  border-color: var(--trait-marque);
}

.bouton--contour:hover {
  background: var(--surface);
  color: var(--texte);
  border-color: var(--texte-doux);
}

.bouton--sur-primaire {
  background: transparent;
  color: var(--sur-primaire);
  border-color: var(--sur-primaire-doux);
}

.bouton--sur-primaire:hover {
  background: var(--primaire-clair);
  color: var(--sur-primaire-clair);
  border-color: var(--sur-primaire);
}

.bouton--plein {
  background: var(--surface);
  color: var(--texte);
  border-color: var(--surface);
}

.bouton--bloc { width: 100%; }
.bouton--petit { font-size: var(--t-s); padding: var(--e2) var(--e4); min-height: 36px; }

.heros {
  background: var(--primaire);
  color: var(--sur-primaire);
  position: relative;
  overflow: hidden;
}

.heros__interieur {
  position: relative;
  z-index: 1;
  padding-block: var(--rythme-ouvert);
}

.heros h1 { margin-block: var(--e4) var(--e4); max-width: 18ch; }

/* **18ch est la largeur d'une colonne, pas d'une page.** Elle est juste quand
   le heros porte une fiche ou une image a cote ; seule, elle laisse le titre
   dans un tiers de la largeur et le reste vide. Mesure le 2026-09-21 sur
   /contact/ en 1440 x 900 : h1 de 702 px dans un contenant de 1200, soit 498 px
   de vide a droite, et le juge visuel a repondu -- une large zone vide a droite
   du texte, le desequilibre laisse une impression d'inacheve. */
.heros__interieur:not(.heros__grille) h1 { max-width: 26ch; }
.heros .chapo { color: var(--sur-primaire-doux); max-width: 56ch; }

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}

.heros__grille {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 920px) {
  .heros__grille { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); }
}

/* Sur un telephone, la photographie passe devant le discours.

   Mesure du 2026-09-22 en 390x844 : le titre prenait 138 px, le chapo 136, les
   boutons tombaient a 530 et l'image a 666 — hors du premier ecran. Le juge
   visuel : « le texte mange la moitie de la hauteur avant qu'on voie autre
   chose que du discours ». Une promesse se lit, une installation se montre.

   Au-dessus de 920 px la grille reprend ses deux colonnes, et l'ordre du
   document — texte puis image — redevient celui du rendu. */
@media (max-width: 919px) {
  .heros__grille > .media { order: -1; }
  /* Une bande, pas un bloc. En 4/3 la photographie prenait 264 px des 844 de
     l'ecran, et les deux boutons tombaient a 828 — hors de vue. L'appel a
     l'action d'un artisan ne descend pas sous la ligne de flottaison pour une
     image : on garde les deux, en couchant l'image. */
  .heros__grille > .media { aspect-ratio: 16 / 9; }
}

.fiche {
  background: var(--primaire-clair);
  color: var(--sur-primaire-clair);
  border: var(--filet) solid var(--primaire-clair);
  border-radius: var(--rayon-l);
  padding: var(--e2);
}

.fiche__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--e4) var(--e3);
}

.fiche__titre {
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--accent-sur-primaire);
}

.fiche__reference {
  font-family: var(--police-donnee);
  font-size: var(--t-2xs);
  color: var(--sur-primaire-doux);
}

.fiche__lignes {
  background: var(--primaire);
  color: var(--sur-primaire);
  border-radius: var(--rayon-s);
  padding: 4px var(--e4);
}

.fiche__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: 1px dashed var(--primaire-clair);
}

.fiche__ligne:last-child { border-bottom: 0; }
.fiche__cle { font-size: var(--t-s); color: var(--sur-primaire-doux); }

.fiche__valeur {
  font-family: var(--police-donnee);
  font-size: var(--t-m);
  color: var(--sur-primaire);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fiche__valeur em { font-style: normal; color: var(--accent-sur-primaire); }
.fiche__pied { padding: var(--e3) var(--e4); font-size: var(--t-xs); color: var(--sur-primaire-doux); }

.carte {
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-l);
  padding: var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  transition: border-color var(--duree-2) var(--transition),
              transform var(--duree-2) var(--transition),
              box-shadow var(--duree-2) var(--transition);
}

.carte > p { font-size: var(--t-m); color: var(--texte-doux); }
.carte--media { padding: 0; overflow: hidden; }

.carte--media .carte__corps {
  padding: var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.carte--lien:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-2);
  border-color: var(--trait-marque);
}

.carte__suite {
  margin-top: auto;
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--accent-texte);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.carte__suite::after { content: "→"; transition: transform var(--duree-2) var(--transition); }
.carte--lien:hover .carte__suite::after { transform: translateX(4px); }

.picto {
  width: 46px;
  height: 46px;
  border-radius: var(--rayon-m);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--accent-doux);
  color: var(--sur-accent-doux);
}

.picto svg { width: 24px; height: 24px; display: block; }

.filets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--filet) solid var(--trait);
}

.filets li {
  display: flex;
  gap: var(--e3);
  align-items: baseline;
  padding: var(--e3) 0;
  border-bottom: var(--filet) solid var(--trait);
  font-size: var(--t-m);
  /* Une ligne se lit jusqu'a une certaine longueur, pas jusqu'au bord de
     l'ecran. Mesure du 2026-09-22 : 149 caracteres par ligne sur 24 elements
     de sanitherm28-fr, 23 sur smb13-com. La liste occupait toute la largeur
     parce que rien ne la bornait, alors que la prose des autres rubriques
     l'etait deja. La valeur de droite s'arrete avec la ligne : mieux vaut un
     prix au bout de son libelle qu'un prix echoue a mille pixels de lui.

     68ch et non 78 : la sonde compte un caractere pour un demi-cadratin, la
     police en fait 0,6 — 78ch rendait 94 caracteres mesures, juste sous le
     seuil de 95, donc un correctif qui ne corrigeait rien. Meme unite que la
     prose du socle, dont les 62ch et 70ch passent depuis toujours. */
  max-width: 68ch;
}

.filets li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 1px;
  transform: rotate(45deg);
  margin-top: 7px;
  background: var(--accent);
  color: var(--sur-accent);
}

.filets__valeur {
  margin-left: auto;
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  color: var(--texte-discret);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rubrique--primaire .filets { border-top-color: var(--primaire-clair); }
.rubrique--primaire .filets li { border-bottom-color: var(--primaire-clair); }
.rubrique--primaire .filets__valeur { color: var(--sur-primaire-doux); }

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--filet) solid var(--trait);
}

@media (min-width: 760px) { .chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.chiffre {
  padding: var(--e5) var(--e5) var(--e5) 0;
  border-bottom: var(--filet) solid var(--trait);
}

@media (min-width: 760px) { .chiffre { border-bottom: 0; } }

.chiffre__valeur {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -.03em;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.chiffre__unite { color: var(--accent-texte); font-size: .62em; }
.chiffre__libelle { font-size: var(--t-s); color: var(--texte-doux); margin-top: 4px; }

.etapes { counter-reset: etape; display: grid; }

.etape {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e5);
  align-items: start;
  padding: var(--e5) 0;
  border-bottom: var(--filet) solid var(--trait);
}

.etape:last-child { border-bottom: 0; }

.etape__numero {
  counter-increment: etape;
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  color: var(--accent-texte);
  padding-top: 3px;
}

.etape__numero::before { content: counter(etape, decimal-leading-zero); }
.etape h3 { margin-bottom: 5px; font-size: var(--t-l); }
.etape p { font-size: var(--t-m); color: var(--texte-doux); }

.labels { display: grid; gap: var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 880px) { .labels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.label {
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-m);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.label__marque { width: 38px; height: 38px; color: var(--accent-texte); }

.label__nom {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-size: var(--t-m);
  letter-spacing: -.01em;
}

.label p { font-size: var(--t-s); color: var(--texte-doux); line-height: 1.45; }

.media {
  position: relative;
  display: block;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--rayon-m);
  background: var(--surface-creuse);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
}

.media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--portrait { aspect-ratio: 3 / 4; }

.media__legende {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
  padding-top: var(--e3);
  font-size: var(--t-s);
  color: var(--texte-doux);
}

.media__legende span { font-family: var(--police-donnee); font-size: var(--t-2xs); color: var(--texte-discret); }

.galerie { display: grid; gap: var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 880px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie--mosaique > *:first-child { grid-column: span 2; }

.vignette {
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-m);
  overflow: hidden;
  background: var(--surface);
  color: var(--texte);
  display: flex;
  flex-direction: column;
  margin: 0;
}

.vignette .media { border: 0; border-radius: 0; }

.vignette figcaption {
  padding: var(--e3) var(--e4);
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
}

.vignette figcaption strong { font-weight: 600; font-size: var(--t-m); }
.vignette figcaption span { font-family: var(--police-donnee); font-size: var(--t-2xs); color: var(--texte-discret); }

.cadre-tableau {
  overflow-x: auto;
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-m);
  background: var(--surface);
  color: var(--texte);
}

table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: var(--t-m); }
caption { text-align: left; padding: var(--e4) var(--e5) 0; font-size: var(--t-xs); color: var(--texte-discret); }
th, td { text-align: left; padding: var(--e4) var(--e5); border-bottom: var(--filet) solid var(--trait); }

th {
  font-family: var(--police-donnee);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--texte-discret);
  font-weight: 500;
}

tbody tr:last-child td { border-bottom: 0; }
td.nombre { font-family: var(--police-donnee); font-variant-numeric: tabular-nums; white-space: nowrap; }

.faq { border-top: var(--filet) solid var(--trait); }
.faq details { border-bottom: var(--filet) solid var(--trait); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--e4) var(--e8) var(--e4) 0;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-l);
  letter-spacing: var(--approche-titre);
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--police-donnee);
  font-size: 20px;
  color: var(--accent-texte);
}

.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: var(--e5); color: var(--texte-doux); font-size: var(--t-m); max-width: var(--mesure); }

.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e4); }
.champ label { font-size: var(--t-s); font-weight: 500; color: var(--texte-doux); }

.champ input, .champ select, .champ textarea {
  font-size: var(--t-m);
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait-marque);
  border-radius: var(--rayon-m);
  padding: 0 var(--e4);
  height: var(--hauteur-champ);
  width: 100%;
}

.champ textarea { min-height: 120px; resize: vertical; padding-block: var(--e3); height: auto; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--accent); }
.champ[data-invalide="oui"] input,
.champ[data-invalide="oui"] textarea { border-color: var(--alerte); }
.champ__erreur { font-size: var(--t-xs); color: var(--alerte); }

.duo-champs { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .duo-champs { grid-template-columns: 1fr 1fr; } }

.coordonnees {
  background: var(--primaire);
  color: var(--sur-primaire);
  border-radius: var(--rayon-l);
  padding: var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}

/* **Un bouton garde son encre.** `.coordonnees a` pèse (0,1,1) et
   `.bouton--primaire` (0,1,0) : le lien de contact rendu en bouton plein
   recevait donc `accent-sur-primaire` sur un fond `accent`, soit **2,17:1**,
   et la porte de contraste refusait d'installer le site entier — mesuré sur
   sanitherm28-fr le 2026-09-21. Le `:not` rend la regle au bouton. */
.coordonnees a:not(.bouton) { color: var(--accent-sur-primaire); }
.coordonnees address { font-style: normal; }
.coordonnee { display: flex; gap: var(--e3); align-items: flex-start; }
.coordonnee svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--accent-sur-primaire); }

.coordonnee strong {
  display: block;
  font-family: var(--police-donnee);
  font-size: var(--t-2xs);
  letter-spacing: .06em;
  color: var(--sur-primaire-doux);
  font-weight: 500;
  margin-bottom: 3px;
}

.appel {
  background: var(--accent);
  color: var(--sur-accent);
  border-radius: var(--rayon-l);
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5);
  align-items: center;
  justify-content: space-between;
}

.appel h2 { color: var(--sur-accent); font-size: clamp(24px, 3vw, 34px); max-width: 18ch; }
.appel p { color: var(--sur-accent); font-size: var(--t-m); margin-top: var(--e2); max-width: 48ch; }
.appel .bouton--plein { background: var(--sur-accent); color: var(--accent-texte); border-color: var(--sur-accent); }
.appel .bouton--contour { color: var(--sur-accent); border-color: var(--sur-accent); }
.appel .bouton--contour:hover { background: var(--accent-texte); color: var(--sur-accent); border-color: var(--sur-accent); }

.urgence {
  background: var(--alerte);
  color: var(--sur-alerte);
  border-radius: var(--rayon-l);
  padding: var(--e6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  align-items: center;
  justify-content: space-between;
}

.urgence h2 { color: var(--sur-alerte); font-size: var(--t-2xl); }
.urgence p { color: var(--sur-alerte); font-size: var(--t-m); max-width: 52ch; }
.urgence .bouton { background: var(--sur-alerte); color: var(--alerte); border-color: var(--sur-alerte); }

.annonce {
  background: var(--accent-doux);
  color: var(--sur-accent-doux);
  border-left: var(--filet-accent) solid var(--accent);
  border-radius: var(--rayon-m);
  padding: var(--e5);
  display: flex;
  gap: var(--e4);
  align-items: flex-start;
}

.annonce svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.annonce h2 { color: var(--sur-accent-doux); font-size: var(--t-l); margin-bottom: 4px; }
.annonce p { font-size: var(--t-m); max-width: 62ch; }

.engagements { display: grid; gap: var(--e6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.engagement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e4);
  align-items: start;
}

.engagement h3 { font-size: var(--t-l); margin-bottom: 4px; }
.engagement p { font-size: var(--t-m); color: var(--texte-doux); }
.rubrique--primaire .engagement p { color: var(--sur-primaire-doux); }
.rubrique--primaire .picto { background: var(--primaire-clair); color: var(--accent-sur-primaire); }

.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }

.agenda__entree {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-left: var(--filet-accent) solid var(--accent);
  border-radius: var(--rayon-m);
  padding: var(--e4) var(--e5);
}

@media (min-width: 680px) { .agenda__entree { grid-template-columns: 200px 1fr; gap: var(--e5); align-items: baseline; } }

.agenda__periode { font-family: var(--police-donnee); font-size: var(--t-s); color: var(--accent-texte); }
.agenda__objet strong { display: block; font-size: var(--t-m); }
/* Bornee sur le span et non sur son parent : la mesure se calcule avec la
   taille de police de l'element qui porte le texte, et le parent est d'un cran
   au-dessus — 70ch pose sur lui rendait encore 679 px de ligne. */
.agenda__objet span { font-size: var(--t-s); color: var(--texte-doux); display: block; max-width: 62ch; }

.calendrier { display: grid; gap: var(--e2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 680px) { .calendrier { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.mois {
  background: var(--surface);
  color: var(--texte-doux);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-s);
  padding: var(--e3);
  text-align: center;
  font-size: var(--t-s);
}

.mois strong { display: block; font-family: var(--police-donnee); font-size: var(--t-m); color: var(--texte); }

.mois[data-charge="forte"] {
  background: var(--accent-doux);
  color: var(--sur-accent-doux);
  border-color: var(--accent);
}

.mois[data-charge="forte"] strong { color: var(--sur-accent-doux); }

.horaires { list-style: none; margin: 0; padding: 0; border-top: var(--filet) solid var(--trait); }

.horaires li {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: var(--filet) solid var(--trait);
  font-size: var(--t-m);
}

.horaires li[data-ferme="oui"] { color: var(--texte-discret); }
.horaires time { font-family: var(--police-donnee); font-variant-numeric: tabular-nums; }

.plan {
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-l);
  overflow: hidden;
  background: var(--surface-creuse);
  color: var(--texte);
}

.plan img { width: 100%; display: block; }

.pastilles { display: flex; flex-wrap: wrap; gap: var(--e2); }

.pastille {
  font-size: var(--t-s);
  padding: 6px var(--e3);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-pastille);
  background: var(--surface);
  color: var(--texte-doux);
}

.pastille--principale { border-color: var(--accent); color: var(--accent-texte); font-weight: 600; }

.rubrique--primaire .pastille {
  background: var(--primaire-clair);
  color: var(--sur-primaire-clair);
  border-color: var(--primaire-clair);
}

.rubrique--primaire .pastille--principale {
  background: var(--primaire-clair);
  color: var(--accent-sur-primaire);
  border-color: var(--accent-sur-primaire);
}

.temoignage {
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-left: var(--filet-accent) solid var(--accent);
  border-radius: var(--rayon-m);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin: 0;
}

.temoignage p { font-size: var(--t-m); }
.temoignage footer { font-size: var(--t-s); color: var(--texte-discret); }

.avis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e6);
  background: var(--surface);
  color: var(--texte);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-l);
  padding: var(--e5);
}

.avis__note { font-family: var(--police-titre); font-size: var(--t-3xl); font-weight: var(--graisse-titre); }
.avis__source { font-size: var(--t-s); color: var(--texte-doux); }

.tarif {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  align-items: baseline;
  padding: var(--e4) 0;
  border-bottom: var(--filet) solid var(--trait);
}

.tarif:last-child { border-bottom: 0; }
.tarif__objet strong { display: block; font-size: var(--t-m); }
.tarif__objet span { font-size: var(--t-s); color: var(--texte-doux); }

.tarif__valeur {
  font-family: var(--police-donnee);
  font-size: var(--t-l);
  color: var(--accent-texte);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.duo { display: grid; gap: var(--e8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .duo--inverse .duo__texte { order: 2; } }

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: var(--plan-panneau);
  background: rgba(0, 0, 0, .9);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  padding: var(--gouttiere);
  border: 0;
}

.visionneuse[hidden] { display: none; }
.visionneuse img { max-height: 76vh; border-radius: var(--rayon-m); }
.visionneuse figcaption { color: #FFFFFF; font-size: var(--t-s); padding-top: var(--e3); text-align: center; }