/* Pression Juste — univers « le mur de garage ».
   Tête de page : mur de béton banché encrassé (joints de coffrage, trous de banche, coulures) et une bande propre tracée par le jet,
   puis une règle graduée en bar. Logo et accueil : le manomètre à aiguille. Accueil : une lance qui nettoie le mur.
   Titres Barlow Condensed, texte IBM Plex Sans, valeurs et étiquettes IBM Plex Mono (Bunny Fonts).
   Gris béton, blanc, bleu eau, orange sécurité ; boutons jaunes « acheter ». */
:root {
  --fond-clair: #f1efea;
  --beton: #dedbd4;
  --beton-fonce: #b3aea4;
  --papier: #fbfaf7;
  --encre: #24272b;
  --gris: #575a5e;
  --mur: #46443f;
  --mur-propre: #716e67;
  --eau: #0d5c8c;
  --eau-vif: #3aa0d8;
  --orange: #ff6a13;
  --orange-texte: #b0420a;
  --jaune: #ffd23f;
  --titre: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%2346443f' fill-opacity='.07'%3E%3Ccircle cx='12' cy='30' r='1.4'/%3E%3Ccircle cx='70' cy='12' r='1'/%3E%3Ccircle cx='140' cy='44' r='1.6'/%3E%3Ccircle cx='196' cy='20' r='1'/%3E%3Ccircle cx='40' cy='96' r='1'/%3E%3Ccircle cx='110' cy='120' r='1.8'/%3E%3Ccircle cx='180' cy='100' r='1.2'/%3E%3Ccircle cx='24' cy='170' r='1.6'/%3E%3Ccircle cx='88' cy='196' r='1'/%3E%3Ccircle cx='160' cy='180' r='1.4'/%3E%3Ccircle cx='206' cy='150' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --banches: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Crect y='118' width='180' height='2' fill='%23000' fill-opacity='.3'/%3E%3Crect y='117' width='180' height='1' fill='%23fff' fill-opacity='.06'/%3E%3Cg%3E%3Ccircle cx='45' cy='58' r='7' fill='%23fff' fill-opacity='.07'/%3E%3Ccircle cx='45' cy='58' r='4.5' fill='%231f1e1b'/%3E%3Ccircle cx='135' cy='58' r='7' fill='%23fff' fill-opacity='.07'/%3E%3Ccircle cx='135' cy='58' r='4.5' fill='%231f1e1b'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.18'%3E%3Ccircle cx='20' cy='20' r='1.2'/%3E%3Ccircle cx='96' cy='34' r='1.6'/%3E%3Ccircle cx='160' cy='90' r='1.2'/%3E%3Ccircle cx='70' cy='100' r='1'/%3E%3Ccircle cx='110' cy='80' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  --coulures: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='240' viewBox='0 0 420 240'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.13' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M40 0c6 50-6 90 2 150'/%3E%3Cpath d='M170 0c-4 40 6 60-1 110'/%3E%3Cpath d='M300 0c5 30-5 70 3 96'/%3E%3C/g%3E%3Cellipse cx='260' cy='200' rx='120' ry='34' fill='%23000' fill-opacity='.08'/%3E%3C/svg%3E");
  --jet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='600' viewBox='0 0 520 600'%3E%3Cpath d='M250 0H470L380 600H150Z' fill='%23716e67'/%3E%3Cg fill='%23716e67'%3E%3Ccircle cx='246' cy='40' r='6'/%3E%3Ccircle cx='236' cy='110' r='4'/%3E%3Ccircle cx='222' cy='190' r='7'/%3E%3Ccircle cx='206' cy='290' r='5'/%3E%3Ccircle cx='190' cy='380' r='6'/%3E%3Ccircle cx='170' cy='470' r='4'/%3E%3Ccircle cx='158' cy='540' r='6'/%3E%3Ccircle cx='474' cy='60' r='5'/%3E%3Ccircle cx='462' cy='150' r='7'/%3E%3Ccircle cx='448' cy='250' r='4'/%3E%3Ccircle cx='430' cy='340' r='6'/%3E%3Ccircle cx='412' cy='440' r='5'/%3E%3Ccircle cx='394' cy='520' r='7'/%3E%3C/g%3E%3Cg fill='%233aa0d8' fill-opacity='.55'%3E%3Ccircle cx='478' cy='96' r='2'/%3E%3Ccircle cx='488' cy='210' r='1.6'/%3E%3Ccircle cx='470' cy='300' r='2.2'/%3E%3Ccircle cx='452' cy='400' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --manometre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='11' fill='%23fbfaf7' stroke='%23ff6a13' stroke-width='2.5'/%3E%3Cpath d='M6.6 19.4L8 18M5 13H7M6.6 6.6L8 8M13 5V7M19.4 6.6L18 8M21 13H19' stroke='%2324272b' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M13 13L18.5 8.5' stroke='%23b0420a' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='13' r='2' fill='%2324272b'/%3E%3C/svg%3E");
}

body { font-size: 18px; background-color: var(--fond-clair); background-image: var(--grain); color: var(--encre); }
a { color: var(--eau); text-underline-offset: 3px; }
h1, h2, h3, .logo, .produit-nom, .choix-nom, .quiz-titre, .quiz-verdict, .carte-nom, .proches h2, .groupe h2, .cartes a { font-family: var(--titre); font-weight: 600; }
h1 { font-weight: 700; }
h2 { font-size: 32px; line-height: 1.12; letter-spacing: .005em; }
h3 { font-size: 23px; line-height: 1.2; }
.faq summary { font-weight: 600; }
.meta, .ariane, .produit-cat, .produit-choix, .choix-label, .produit-specs dt, .quiz legend, .carte-label, .sommaire-lateral p,
.avertissement, .produit-source, .barre-choix span, .filtres button, thead th, .volumes-legende, .jauge > span:first-child, .jauge strong, .graduation, .largeurs figcaption { font-family: var(--mono); }
.cartes p, .produit-source { color: var(--gris); }

/* En-tête : anthracite, logo précédé d'un manomètre */
.entete { background: var(--encre); border: 0; padding: 12px 0; }
.entete .conteneur, main.conteneur, .pied .conteneur { max-width: 1120px; }
.entete .logo { color: var(--papier); font-size: 26px; letter-spacing: .02em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.logo::before { content: ""; width: 26px; height: 26px; flex-shrink: 0; background: var(--manometre) center / contain no-repeat; }
.entete nav a { color: #d9dbde; font-family: var(--mono); font-size: 14px; }
.entete nav a:hover { color: var(--jaune); }

/* Tête de page : le mur banché encrassé, et la bande propre laissée par le jet */
.hero { color: #fff; background-color: var(--mur);
  background-image: var(--banches), var(--jet), var(--coulures);
  background-position: 0 0, right -60px center, 0 0; background-size: auto, auto 100%, auto; background-repeat: repeat, no-repeat, repeat; }
.hero-in { max-width: 1120px; margin: 0 auto; padding: 20px 16px 32px; }
.hero h1 { font-size: clamp(36px, 6.4vw, 62px); line-height: 1.02; max-width: 20ch; margin: 18px 0; letter-spacing: .005em; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.hero .ariane ol { margin: 0; color: #eceae5; }
.hero .ariane a, .hero .meta a { color: inherit; }
.hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: #eceae5; }
.auteur { display: inline-flex; align-items: center; gap: 8px; }
.auteur img { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--papier); }
.hero-intro p { font-size: 19px; max-width: 48ch; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.hero-intro a { color: var(--jaune); }
@media (max-width: 699px) { .hero { background-image: var(--banches), var(--coulures); background-position: 0 0; background-size: auto; background-repeat: repeat; } }

/* Règle graduée en bar sous la tête de page, sur le béton propre ; filet d'eau en haut */
.graduation { --x: max(16px, calc(50% - 544px)); position: relative; height: 38px; background: var(--beton);
  border-top: 3px solid var(--eau-vif); border-bottom: 2px solid var(--encre); color: var(--encre); font-size: 12px; }
.graduation .echelle { position: absolute; left: var(--x); top: 0; width: 151px; height: 12px;
  background: repeating-linear-gradient(90deg, var(--encre) 0 2px, transparent 2px 50px) 0 0 / 151px 12px no-repeat,
              repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 10px) 0 0 / 151px 6px no-repeat; }
.graduation .echelle::after { content: ""; position: absolute; left: 128px; top: -3px; border: 6px solid transparent; border-top: 9px solid var(--orange-texte); }
.graduation span:not(.echelle) { position: absolute; top: 15px; transform: translateX(-50%); white-space: nowrap; }
.graduation span:nth-child(2) { left: calc(var(--x) + 1px); }
.graduation span:nth-child(3) { left: calc(var(--x) + 51px); }
.graduation span:nth-child(4) { left: calc(var(--x) + 101px); }
.graduation span:nth-child(5) { left: calc(var(--x) + 151px); transform: translateX(-14%); }

/* Accueil et rubriques : le panneau de béton nettoyé par la lance, et le manomètre */
.hero-grille { display: grid; gap: 24px; align-items: center; }
.chantier { width: 100%; max-width: 340px; justify-self: center; filter: drop-shadow(5px 6px 0 rgba(0,0,0,.35)); }
.nj-mur { fill: #8d8981; }
.nj-coulure { fill: none; stroke: #000; stroke-opacity: .16; stroke-width: 8; stroke-linecap: round; }
.nj-tache { fill: #000; fill-opacity: .12; }
.nj-joint { fill: none; stroke: #000; stroke-opacity: .35; stroke-width: 2; }
.nj-joint-propre { stroke-opacity: .18; }
.nj-trou circle:first-child { fill: #fff; fill-opacity: .08; }
.nj-trou circle:last-child { fill: #1f1e1b; }
.nj-propre { fill: #dad6cd; transform-box: fill-box; transform-origin: left center; transform: scaleX(.74); animation: lavage 12s ease-in-out infinite; }
.nj-lance { transform: translateX(230px); animation: lance 12s ease-in-out infinite; }
.nj-jet { fill: #e9f6fd; fill-opacity: .9; stroke: var(--eau-vif); stroke-width: 1; }
.nj-goutte { fill: var(--eau-vif); }
.nj-tube { fill: none; stroke: var(--encre); stroke-width: 5; stroke-linecap: round; }
.nj-buse { fill: var(--orange); stroke: var(--encre); stroke-width: 1.2; }
.nj-cadre { fill: none; stroke: var(--encre); stroke-width: 2; }
.nj-etiquette { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; fill: var(--encre); font-weight: 500; }
.nj-tuyau { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; }
.nj-cadran { fill: var(--papier); stroke: var(--encre); stroke-width: 4; }
.nj-zone { fill: none; stroke: var(--orange); stroke-width: 4; }
.nj-grad { fill: none; stroke: var(--encre); stroke-width: 1.4; stroke-linecap: round; }
.nj-chiffre, .nj-unite { font-family: var(--mono); font-size: 9px; fill: var(--encre); }
.nj-unite { fill: var(--gris); }
.nj-aiguille { stroke: var(--orange-texte); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 268px 236px; transform: rotate(56deg);
  animation: aiguille 12s ease-in-out infinite; }
.nj-axe { fill: var(--encre); }
@keyframes lavage { 0%, 6% { transform: scaleX(0); } 80%, 100% { transform: scaleX(.74); } }
@keyframes lance { 0%, 6% { transform: translateX(-16px); } 80%, 100% { transform: translateX(230px); } }
@keyframes aiguille { 0%, 3% { transform: rotate(-135deg); } 8% { transform: rotate(60deg); } 30% { transform: rotate(54deg); } 55% { transform: rotate(59deg); } 80% { transform: rotate(56deg); } 92%, 100% { transform: rotate(-135deg); } }
@media (prefers-reduced-motion: reduce) { .nj-propre, .nj-lance, .nj-aiguille { animation: none; } }
@media (min-width: 900px) { .hero-grille { grid-template-columns: 1fr 340px; } }

/* Accueil : les questions sous la tête de page */
.questions { max-width: 760px; margin: 8px 0 24px; }
.questions h2 { display: flex; align-items: baseline; gap: 12px; }
.questions h2::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; align-self: center; background: var(--manometre) center / contain no-repeat; }

/* Mise en page : lecture + colonne collante sur grand écran */
.mise-en-page { display: grid; gap: 48px; margin-top: 8px; }
.mise-en-page > article { min-width: 0; }
.colonne { display: none; }
@media (min-width: 1040px) {
  .mise-en-page { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; }
  .colonne { display: block; }
  .colonne-in { position: sticky; top: 24px; display: grid; gap: 24px; padding-top: 24px; }
  .mobile-seul { display: none; }
}
.carte-choix { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px; padding: 16px; box-shadow: 5px 5px 0 var(--mur); }
.carte-choix p { margin: 0 0 8px; }
.carte-label { display: inline-block; color: var(--orange-texte); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.carte-nom { font-size: 27px; line-height: 1.05; }
.carte-pourqui { font-size: 16px; color: var(--gris); }
.carte-choix .bouton { display: block; text-align: center; }
.sommaire-lateral p { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin: 0 0 8px; }
.sommaire-lateral ol { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.sommaire-lateral li { margin-bottom: 6px; }

/* Boutons jaunes : bordure d'encre, ombre décalée qui s'enfonce au clic */
.bouton { background: var(--jaune); color: var(--encre); border: 2px solid var(--encre); border-radius: 4px; box-shadow: 3px 3px 0 var(--encre);
  font-family: var(--titre); font-weight: 700; font-size: 19px; letter-spacing: .03em; text-transform: uppercase; transition: transform .08s, box-shadow .08s; }
.bouton.petit { font-size: 16px; }
.bouton:hover { filter: none; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--encre); }
.bouton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } }

.avertissement { font-size: 13px; background: transparent; border: 1px dashed var(--beton-fonce); border-radius: 2px; color: var(--gris); }
.sommaire { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px; }

/* Choix rapide : des plaques de béton */
.choix { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-carte { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px; padding: 14px; box-shadow: 4px 4px 0 var(--beton-fonce); }
.choix-label { color: var(--orange-texte); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.choix-nom { font-size: 22px; line-height: 1.05; }
.choix-nom a { color: var(--encre); }
.choix-pourqui { font-size: 15px; color: var(--gris); }

/* Fiches produit : numéro sur un écrou, bande de signalisation à la couleur du produit */
.produit { border: 1.5px solid var(--encre); border-radius: 2px; padding: 34px 20px 18px; margin: 48px 0; box-shadow: 6px 6px 0 var(--beton);
  background: repeating-linear-gradient(-45deg, var(--couleur, var(--orange)) 0 12px, var(--encre) 12px 24px) top / 100% 8px no-repeat, var(--papier); }
.produit-rang { top: -20px; left: 18px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: var(--encre); color: var(--jaune);
  border-radius: 0; font-family: var(--mono); font-weight: 500; font-size: 17px; }
.produit-choix { color: var(--orange-texte); font-size: 12px; letter-spacing: .1em; }
.produit-nom { font-size: 32px; line-height: 1.04; }
.produit-cat { background: var(--beton); color: var(--encre); font-size: 11px; padding: 3px 9px; border-radius: 2px; letter-spacing: .06em; }
.jauge > span:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.jauge-barre { background: var(--beton); border: 1px solid var(--encre); border-radius: 2px; }
.jauge-barre span { background: repeating-linear-gradient(90deg, var(--eau) 0 7px, #1b74a8 7px 9px); }
.produit-specs { gap: 0; background: transparent; margin: 14px 0; border-top: 1px solid var(--encre); }
.produit-specs div { padding: 8px 10px; border-bottom: 1px dashed var(--beton-fonce); }
.produit-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.produit-specs dd { font-family: var(--mono); }
.plus li::marker { color: #1d6b34; }
.moins li::marker { color: var(--orange-texte); }

/* L'avis de Lucien : une étiquette de contrôle accrochée à la machine */
blockquote { position: relative; background: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px 14px 14px 2px;
  padding: 18px 20px 14px 56px; margin: 32px 0; font-size: 18px; box-shadow: 4px 4px 0 var(--beton); }
blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38px; background: var(--orange); border-right: 1.5px solid var(--encre); }
blockquote::after { content: ""; position: absolute; left: 11px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--fond-clair); border: 2px solid var(--encre); }
blockquote strong:first-child { font-family: var(--titre); font-size: 21px; font-weight: 700; color: var(--encre); letter-spacing: .02em; }

/* Quiz : sur le mur de béton, une question à la fois */
.quiz { color: #fff; border: 1.5px solid var(--encre); border-radius: 2px; padding: 22px; background-color: var(--mur); background-image: var(--banches); }
.quiz-titre { font-size: 28px; }
.quiz-progres { background: rgba(255,255,255,.22); height: 6px; }
.quiz-progres span { background: var(--jaune); }
.quiz legend { color: var(--jaune); font-size: 13px; margin-bottom: 10px; }
.quiz label { display: flex; gap: 12px; align-items: center; background: rgba(0,0,0,.25); border: 1.5px solid rgba(255,255,255,.45); border-radius: 2px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 17px; }
.quiz label:hover { border-color: var(--jaune); }
.quiz input { accent-color: var(--jaune); width: 18px; height: 18px; flex-shrink: 0; }
.quiz-resultat { border-top: 0; margin-top: 0; padding-top: 0; }
.quiz-verdict { font-size: 26px; }
.quiz-resultat a:not(.bouton) { color: var(--jaune); }

/* Tableau et filtres : la fiche technique */
.tableau { border: 1.5px solid var(--encre); border-radius: 2px; background: var(--papier); }
thead th { background: var(--encre); color: #eceae5; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
tbody td { font-variant-numeric: tabular-nums; }
tbody tr { border-color: var(--beton); }
tbody tr:hover { background: var(--fond-clair); }
tbody th a { color: var(--encre); font-family: var(--titre); font-weight: 600; font-size: 19px; }
.filtres button { background: var(--papier); border: 1.5px solid var(--encre); color: var(--encre); font-size: 13px; border-radius: 2px; }
.filtres button[aria-pressed="true"] { background: var(--jaune); color: var(--encre); }

/* Schémas à l'échelle : sur un plan quadrillé */
.volumes, .largeurs { background-color: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px; padding: 16px;
  background-image: linear-gradient(rgba(13,92,140,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(13,92,140,.07) 1px, transparent 1px);
  background-size: 16px 16px; }

.faq details { border-bottom: 1px dashed var(--beton-fonce); }
.faq summary { font-family: var(--titre); font-size: 21px; }
.proches, .cartes li { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px; }
.cartes li { box-shadow: 4px 4px 0 var(--beton); }
.cartes a { color: var(--encre); font-size: 22px; line-height: 1.1; }
.groupe h2 a { color: var(--encre); text-decoration-color: var(--orange); }
.barre-choix { background: var(--encre); color: #fff; border: 0; }
.pied { background: var(--encre); color: #cfd2d6; border: 0; border-top: 6px solid var(--orange); }
.pied .mention { color: #fff; }
.pied a { color: #fff; }

/* Outil « manomètre » : tâche + surface → plage bar / l/h, cadran, grille, machines compatibles (agent outil) */
.outil-manometre { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 4px; padding: 18px; margin: 32px 0;
  box-shadow: 6px 6px 0 var(--mur); display: grid; gap: 18px; min-width: 0; }
@media (min-width: 760px) { .outil-manometre { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .om-note { grid-column: 1 / -1; } }
.outil-manometre fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.outil-manometre legend, .om-champ > span { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.outil-manometre legend { margin-bottom: 6px; }
.outil-manometre fieldset label { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--encre); border-radius: 4px;
  padding: 5px 9px; margin: 0 4px 6px 0; font-size: 15px; cursor: pointer; background: #fff; }
.outil-manometre fieldset label:has(input:checked) { background: var(--jaune); }
.outil-manometre input[type="radio"] { accent-color: var(--encre); margin: 0; }
.om-champ { display: grid; gap: 4px; }
.om-champ input { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 18px; padding: 8px 10px; border: 1.5px solid var(--encre);
  border-radius: 4px; color: var(--encre); background: #fff; }
.om-champ input:disabled { background: var(--beton); color: var(--gris); }
.om-aide { font-size: 14px; color: var(--gris); margin: 6px 0 0; }
.om-aide:empty { display: none; }
.om-resultat { min-width: 0; }
.om-plage { margin: 0 0 8px; font-size: 18px; }
.om-plage strong { font-family: var(--mono); white-space: nowrap; }
.om-repere { font-size: 14px; color: var(--gris); }
.om-dessins { display: grid; gap: 10px; }
.om-cadran, .om-grille { display: block; width: 100%; height: auto; }
.om-cadran { max-width: 240px; margin: 0 auto; }
.om-fond-arc { fill: none; stroke: var(--beton); stroke-width: 14; }
.om-zone { fill: none; stroke: var(--orange); stroke-width: 14; }
.om-trait { stroke: var(--gris); stroke-width: 1.2; }
.om-trait-fort { stroke: var(--encre); stroke-width: 2; }
.om-graduation, .om-axe-texte { font-family: var(--mono); font-size: 11px; fill: var(--encre); }
.om-graduation { paint-order: stroke; stroke: var(--papier); stroke-width: 4px; stroke-linejoin: round; }
.om-aiguille { stroke: var(--orange-texte); stroke-width: 4; stroke-linecap: round; }
.om-axe { fill: var(--encre); }
.om-unite { font-family: var(--mono); font-size: 12px; fill: var(--gris); }
.om-lecture { font-family: var(--titre); font-weight: 600; font-size: 22px; fill: var(--encre); }
.om-grille { background: #fff; border: 1px solid var(--beton-fonce); }
.om-ligne { stroke: var(--beton); stroke-width: 1; }
.om-zone-grille { fill: var(--orange); fill-opacity: .2; stroke: var(--orange-texte); stroke-width: 1.5; stroke-dasharray: 5 3; }
.om-point { fill: #fff; stroke: var(--beton-fonce); stroke-width: 1.5; }
.om-point-ok { fill: var(--eau); stroke: var(--encre); }
.om-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--mono); font-size: 12px; color: var(--gris); margin: 8px 0; }
.om-pastille { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--encre); }
.om-pastille-zone { background: rgba(255, 106, 19, .2); border: 1.5px dashed var(--orange-texte); }
.om-pastille-ok { background: var(--eau); border-radius: 50%; }
.om-pastille-non { background: #fff; border-color: var(--beton-fonce); border-radius: 50%; }
.om-conseil { font-size: 16px; margin: 0 0 8px; }
.om-bilan { font-weight: 600; margin: 8px 0 6px; }
.om-machines { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.om-machine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; border: 1.5px solid var(--encre);
  border-radius: 4px; padding: 8px 10px; background: #fff; }
.om-machine[hidden] { display: none; }
.om-nom { font-family: var(--titre); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.om-infos { grid-column: 1; font-family: var(--mono); font-size: 12px; color: var(--gris); overflow-wrap: anywhere; }
.om-regler { color: var(--orange-texte); }
.om-machine .bouton { grid-column: 2; grid-row: 1 / span 2; }
.om-plus, .om-exclus { font-size: 14px; color: var(--gris); margin: 8px 0 0; }
.om-plus:empty, .om-exclus:empty { display: none; }
.om-note { font-size: 15px; line-height: 1.55; color: var(--gris); border-top: 1px dashed var(--beton-fonce); padding-top: 12px; }
.om-note strong { color: var(--encre); }