@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400 800;font-display:swap;src:url('/ob-roboto-slab-var.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url('/ob-public-sans-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/ob-plex-mono-500.woff2') format('woff2')}

/* PEAU « The Overhead Bench » : le banc d'atelier de service. Rhabillage du socle, préfixe ob-.
   Matières : béton balayé (fond), acier galvanisé (fiches), apprêt graphite (encre), jaune de
   l'étiquette de sécurité (cartouche du numéro), bleu de tablier (liens), fil de cuivre (chiffres),
   gaine de câble (filets). Direction complète : research/brief-creation.md.
   RÈGLE NÉGATIVE : --securite ne porte jamais un texte courant ni un fond de section, uniquement le
   cartouche du numéro d'intervention, le sigle de la marque et le signal du mois courant.
   Aucune ressource externe : polices woff2 hébergées dans peau/ (Roboto Slab, Public Sans, IBM Plex Mono),
   ni script, ni image distante. 06/10/2026 : peau refaite (polices, relief, enseigne graphite). */
:root {
  --beton: #d9d7d2; --acier: #f2f1ee; --acier-creux: #e4e2dd;
  --graphite: #1c1f22; --graphite-doux: #5a6066;
  --securite: #e8b100; --securite-fonce: #6f5500;
  --atelier: #26506e; --atelier-sombre: #17334a;
  --cuivre: #9a5b2c; --cable: #c3c6c4;
  --titre-police: "Roboto Slab", Rockwell, "Bookman Old Style", "DejaVu Serif", Georgia, serif;
  --texte-police: "Public Sans", "Gill Sans", "Gill Sans MT", "Segoe UI", "Trebuchet MS", sans-serif;
  --chiffre-police: "IBM Plex Mono", "Courier New", Courier, ui-monospace, monospace;
  --travee: 76rem; --mesure: 68ch; --pas-grille: 21rem; --rythme: 1.5rem; --crant: 3px;
  --trait: 1px solid var(--cable); --rayon: 8px; --rayon-petit: 4px;
  --relief: 0 1px 2px rgba(28,31,34,.10), 0 6px 18px -6px rgba(28,31,34,.22);
  --relief-haut: 0 2px 4px rgba(28,31,34,.12), 0 18px 36px -12px rgba(28,31,34,.38);
  --relief-sec: 3px 3px 0 var(--graphite); --couture: repeating-linear-gradient(180deg, var(--cable) 0 1px, transparent 1px 9px);
  --ratio-carte: 4 / 3; --ratio-rond: 1 / 1; --ratio-large: 16 / 9;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--beton); color: var(--graphite); font-family: var(--texte-police); font-size: clamp(1rem, .98rem + .16vw, 1.0625rem); line-height: 1.6; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--titre-police); line-height: 1.16; margin: 0 0 .55em; font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem); }
h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); }
h3 { font-size: 1.05rem; }
p, ul, ol, dl, figure { margin: 0 0 var(--rythme); }
a { color: var(--atelier); text-decoration-thickness: 1px; text-underline-offset: .17em; }
a:hover { color: var(--atelier-sombre); }
:focus-visible { outline: 2px solid var(--atelier); outline-offset: 2px; }
.ob-travee { width: min(100% - 2rem, var(--travee)); margin-inline: auto; }
.ob-raccourci { position: absolute; left: -9999px; top: 0; background: var(--graphite); color: var(--acier); padding: .6rem 1rem; z-index: 20; }
.ob-raccourci:focus { left: .5rem; top: .5rem; }

/* SIGNATURE A, l'étiquette de sécurité du panneau bas : cartouche jaune, liseré noir, oeillet découpé. */
.ob-plaque { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; flex-wrap: wrap; }
.ob-plaque__numero { border-radius: var(--rayon-petit); box-shadow: 2px 2px 0 var(--graphite); display: inline-flex; align-items: center; gap: .4rem; font-family: var(--chiffre-police); font-weight: 500; font-size: .82rem; letter-spacing: .06em; color: var(--graphite); background: var(--securite); border: 1.5px solid var(--graphite); padding: .18rem .5rem .18rem .45rem; }
.ob-plaque__numero::before { content: ''; width: .42rem; height: .42rem; border-radius: 50%; background: var(--beton); border: 1.5px solid var(--graphite); flex: none; }
.ob-plaque__quoi { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--graphite-doux); }

/* SIGNATURE B, la couture de panneaux sectionnels : elle ouvre chaque section du banc. */
.ob-organe__tete { border-top: 1px solid var(--graphite); padding-top: .55rem; margin-bottom: .35rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.ob-organe__tete::before { content: ''; position: absolute; }
.ob-banc > .ob-organe__tete, .ob-organe .ob-organe__tete, .ob-voisinage .ob-organe__tete { position: relative; }
.ob-banc > .ob-organe__tete::after, .ob-organe .ob-organe__tete::after, .ob-voisinage .ob-organe__tete::after {
  content: ''; position: absolute; left: 0; right: 0; top: -.75rem; height: .6rem; background: var(--couture); opacity: .9; }
.ob-organe__tete h2 { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(.92rem, .88rem + .3vw, 1.12rem); }
.ob-organe__tete h2 a { color: inherit; text-decoration: none; }
.ob-organe__tete h2 a:hover { text-decoration: underline; }
.ob-organe__cote, .ob-organe__compte { font-family: var(--chiffre-police); font-size: .76rem; color: var(--graphite-doux); }
.ob-organe__cote { color: var(--cuivre); }
.ob-organe__phrase { color: var(--graphite-doux); max-width: var(--mesure); }

/* SIGNATURE C, la plaque de caractéristiques du motoréducteur : libellé, points de conduite, valeur. */
.ob-spec { margin: 0; border-top: var(--trait); }
.ob-spec dt, .ob-spec dd { display: flex; align-items: baseline; gap: .5rem; padding: .38rem 0; border-bottom: var(--trait); }
.ob-spec dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite-doux); }
.ob-spec dt::after { content: ''; flex: 1 1 auto; border-bottom: 2px dotted var(--cable); transform: translateY(-.22em); }
.ob-spec dd { margin: 0; font-family: var(--chiffre-police); font-size: .9rem; color: var(--cuivre); }

/* enseigne : le panneau graphite de l'atelier, sigle jaune, couture de panneaux sous le bord */
.ob-enseigne { background: var(--graphite); color: var(--acier); box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); position: relative; z-index: 2; }
.ob-enseigne__rangee { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; padding: .9rem 0 .85rem; }
.ob-marque { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; }
.ob-marque:hover { color: #fff; }
.ob-marque__sigle { font-family: var(--chiffre-police); font-weight: 500; font-size: .8rem; letter-spacing: .08em; color: var(--graphite); background: var(--securite); border: 1.5px solid #000; border-radius: var(--rayon-petit); padding: .2rem .45rem; box-shadow: 2px 2px 0 rgba(0,0,0,.55); }
.ob-marque__nom { font-family: var(--titre-police); font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em; }
.ob-enseigne__devise { margin: 0; color: #b9bec3; font-size: .82rem; line-height: 1.45; border-left: 1px solid #4a5157; padding-left: .9rem; max-width: 34ch; }
.ob-sommaires { margin-left: auto; }
.ob-sommaires ol { display: flex; flex-wrap: wrap; gap: .3rem .35rem; list-style: none; margin: 0; padding: 0; }
.ob-sommaires__lien { display: inline-flex; align-items: baseline; gap: .38rem; color: #dfe2e4; text-decoration: none; font-size: .86rem; font-weight: 500; padding: .3rem .6rem; border-radius: 999px; }
.ob-sommaires__cote { font-family: var(--chiffre-police); font-size: .66rem; color: var(--securite); }
.ob-sommaires__lien:hover { color: #fff; background: rgba(255,255,255,.08); }
.ob-sommaires__lien[aria-current] { color: var(--graphite); background: var(--acier); }
.ob-sommaires__lien[aria-current] .ob-sommaires__cote { color: var(--cuivre); }
.ob-enseigne__couture { height: .5rem; background: repeating-linear-gradient(180deg, #3a4146 0 1px, var(--graphite) 1px 4px); border-top: 1px solid #3a4146; }
@media (max-width: 42rem) { .ob-enseigne__devise { border-left: 0; padding-left: 0; flex-basis: 100%; max-width: none; } .ob-sommaires { margin-left: -.6rem; flex-basis: 100%; } }

/* guide (préambule) : la photo de l'atelier, le pupitre posé à cheval sur son bord bas */
.ob-guide { padding: calc(var(--rythme) * 1.4) 0 calc(var(--rythme) * 1.2); }
.ob-guide__planche { margin: 0; aspect-ratio: 21 / 9; overflow: hidden; background: var(--acier-creux); border-radius: var(--rayon); box-shadow: var(--relief-haut); }
.ob-guide__planche img { width: 100%; height: 100%; object-fit: cover; }
.ob-guide__planche figcaption { font-size: .76rem; color: var(--graphite-doux); padding: .45rem 0 0; }
.ob-guide__pupitre { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.2rem; margin: -4.5rem 2rem 0; align-items: start; }
.ob-guide__texte { background: var(--acier); border-radius: var(--rayon); box-shadow: var(--relief-haut); border-top: 4px solid var(--graphite); padding: 1.5rem 1.7rem .4rem; }
.ob-guide__texte p { max-width: var(--mesure); color: var(--graphite-doux); }
.ob-guide__texte h1 { max-width: 24ch; font-weight: 800; letter-spacing: -.02em; }
.ob-guide__dernier { margin-top: .4rem; }
.ob-guide__dernier a { font-weight: 600; color: var(--graphite); text-decoration: none; border-bottom: 3px solid var(--securite); }
.ob-guide__dernier a:hover { color: var(--atelier); }
.ob-guide__pupitre > .ob-spec { margin-top: 5.5rem; background: var(--acier); border-radius: var(--rayon); box-shadow: var(--relief); border-top: 0; padding: .5rem 1.1rem .7rem; }
.ob-guide__pupitre > .ob-spec dd:last-child { border-bottom: 0; }
.ob-guide--court { padding-bottom: .5rem; }
.ob-guide--court .ob-guide__planche { display: none; }
.ob-guide--court .ob-guide__texte { box-shadow: none; background: transparent; border-top: 0; padding: 0; }
@media (max-width: 52rem) { .ob-guide__pupitre { grid-template-columns: 1fr; margin: -2rem .6rem 0; } .ob-guide__pupitre > .ob-spec { margin-top: 0; } .ob-guide__texte { padding: 1.1rem 1.1rem .2rem; } }

/* le calendrier du banc : le tableau bleu de l'atelier, le mois courant sous l'étiquette jaune */
.ob-saison { background: var(--atelier); color: #eef3f7; border-radius: var(--rayon); box-shadow: var(--relief); padding: 1.2rem 1.4rem .8rem; margin-bottom: calc(var(--rythme) * 2); }
.ob-saison h2 { text-transform: uppercase; letter-spacing: .12em; font-size: .86rem; color: #fff; }
.ob-saison__chapeau { max-width: var(--mesure); font-size: .93rem; color: #d3e0ea; }
.ob-saison__mois { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .25rem .9rem; margin: 0; padding: 0; }
.ob-saison__item { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; border-bottom: 1px dotted rgba(255,255,255,.28); padding: .32rem .1rem; }
.ob-saison__nom { font-size: .84rem; color: #fff; }
.ob-saison__organe { font-family: var(--chiffre-police); font-size: .72rem; color: #bcd0de; text-align: right; }
.ob-saison__item--courant { background: var(--securite); padding-inline: .45rem; border-radius: var(--rayon-petit); border-bottom-color: transparent; box-shadow: var(--relief-sec); }
.ob-saison__item--courant .ob-saison__nom, .ob-saison__item--courant .ob-saison__organe { color: var(--graphite); font-weight: 700; }

/* listes d'interventions */
.ob-banc { padding-bottom: calc(var(--rythme) * 1.4); }
.ob-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--pas-grille), 1fr)); gap: 1rem; }
.ob-carte { display: flex; }
.ob-carte > article { display: flex; flex-direction: column; width: 100%; background: var(--acier); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--relief); transition: transform .18s ease, box-shadow .18s ease; }
.ob-carte > article:hover { transform: translateY(-3px); box-shadow: var(--relief-haut); }
.ob-carte__planche { margin: 0; aspect-ratio: var(--ratio-carte); overflow: hidden; background: var(--acier-creux); border-bottom: 3px solid var(--graphite); }
.ob-carte__planche img { width: 100%; height: 100%; object-fit: cover; }
.ob-carte__texte { padding: .8rem 1rem 1rem; }
.ob-carte__titre { margin: 0 0 .4rem; font-weight: 700; }
.ob-carte__titre a { color: var(--graphite); text-decoration: none; }
.ob-carte__titre a:hover { color: var(--atelier); text-decoration: underline; }
.ob-carte__usage { font-size: .9rem; color: var(--graphite-doux); margin: 0 0 .5rem; }
.ob-carte__date { font-family: var(--chiffre-police); font-size: .74rem; color: var(--graphite-doux); margin: 0; }
.ob-liste--rail { grid-template-columns: 1fr; }
.ob-carte--rail > article { flex-direction: row; align-items: stretch; }
.ob-carte--rail .ob-carte__planche { flex: 0 0 10rem; aspect-ratio: var(--ratio-rond); border-bottom: 0; border-right: 3px solid var(--graphite); }
.ob-carte--rail .ob-carte__texte { padding: .6rem .9rem; }
.ob-renvoi { text-align: right; margin: .8rem 0 0; }
.ob-renvoi a { font-size: .86rem; text-decoration: none; letter-spacing: .03em; }

/* onglets d'organe */
.ob-onglets { margin-bottom: var(--rythme); }
.ob-onglets ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.ob-onglets__item a { display: inline-block; padding: .36rem .9rem; background: var(--acier); border-radius: 999px; box-shadow: var(--relief); text-decoration: none; font-size: .86rem; font-weight: 500; }
.ob-onglets__item--courant a { background: var(--graphite); color: var(--acier); border-color: var(--graphite); }

/* remontée */
.ob-remontee ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 1rem 0 0; font-size: .79rem; color: var(--graphite-doux); }
.ob-remontee li + li::before { content: "\203A"; margin-right: .4rem; }

/* fiche d'intervention */
.ob-ordre__tete { padding: var(--rythme) 0 .6rem; }
.ob-ordre__tete h1 { max-width: 26ch; }
.ob-ordre__chapeau { font-size: 1.12rem; max-width: var(--mesure); color: var(--graphite-doux); }
.ob-ordre__date { font-family: var(--chiffre-police); font-size: .78rem; color: var(--graphite-doux); }
.ob-planche { margin: 0 auto var(--rythme); aspect-ratio: var(--ratio-large); overflow: hidden; background: var(--acier-creux); border-radius: var(--rayon); box-shadow: var(--relief-haut); width: min(100% - 2rem, var(--travee)); }
.ob-planche img { width: 100%; height: 100%; object-fit: cover; }
.ob-planche figcaption { font-size: .76rem; color: var(--graphite-doux); padding: .45rem 0 0; }
.ob-etabli { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2.4rem; align-items: start; padding-bottom: var(--rythme); }
@media (max-width: 62rem) { .ob-etabli { grid-template-columns: 1fr; } }
.ob-corps { max-width: var(--mesure); }
.ob-corps h2 { margin-top: calc(var(--rythme) * 1.4); }
.ob-corps h2::before { content: ''; display: block; height: .5rem; margin-bottom: .5rem; background: var(--couture); border-top: 1px solid var(--graphite); }
.ob-corps table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ob-corps th, .ob-corps td { border-bottom: var(--trait); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.ob-corps th { font-family: var(--texte-police); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite-doux); }
.ob-corps ul, .ob-corps ol { padding-left: 1.3rem; }
.ob-corps li { margin-bottom: .3rem; }
.ob-corps blockquote { margin: 0 0 var(--rythme); padding: .7rem 1.1rem; background: var(--acier); border-radius: 0 var(--rayon) var(--rayon) 0; border-left: 4px solid var(--securite); color: var(--graphite-doux); }
.ob-notes { position: sticky; top: 1rem; background: var(--acier); border-radius: var(--rayon); box-shadow: var(--relief); border-top: 4px solid var(--graphite); padding: 1rem 1.1rem; font-size: .9rem; }
.ob-notes h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .11em; color: var(--graphite-doux); margin: 0 0 .5rem; }
.ob-notes ol, .ob-notes ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.ob-notes__sommaire li { margin-bottom: .3rem; }
.ob-notes__sommaire a { text-decoration: none; }
.ob-notes__sources { font-family: var(--chiffre-police); font-size: .78rem; }
.ob-fiche { padding: var(--rythme) 0; }
.ob-ordre__tete--fiche { padding-top: 0; }

/* voisinage (section réseau) */
.ob-voisinage { border-top: 1px solid var(--graphite); padding-top: var(--rythme); }
.ob-voisinage__liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.ob-voisinage__item { background: var(--acier); border-radius: var(--rayon); box-shadow: var(--relief); border-left: 4px solid var(--atelier); padding: .8rem 1rem; font-size: .94rem; }
.ob-voisinage__item p { margin: 0; }

/* méthode (encart) */
.ob-methode { background: var(--acier); border-radius: var(--rayon); box-shadow: var(--relief); border-left: 5px solid var(--securite); padding: 1rem 1.2rem; margin: var(--rythme) auto calc(var(--rythme) * 1.6); width: min(100% - 2rem, 50rem); }
.ob-methode h2 { font-size: 1.08rem; }

/* pied */
.ob-pied { margin-top: calc(var(--rythme) * 2); background: var(--graphite); color: #c9ced2; font-size: .9rem; }
.ob-pied a { color: #fff; }
.ob-pied a:hover { color: var(--securite); }
.ob-pied__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; padding: 1.8rem 0 1rem; }
.ob-pied__colonne h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .11em; color: var(--securite); }
.ob-pied__colonne ul { list-style: none; padding: 0; margin: 0; }
.ob-pied__colonne li { margin-bottom: .3rem; }
.ob-pied__refus { color: #a9b0b6; font-size: .84rem; }
.ob-pied__ligne { width: min(100% - 2rem, var(--travee)); margin: 0 auto; padding: .8rem 0 1.6rem; border-top: 1px solid #3a4146; font-family: var(--chiffre-police); font-size: .74rem; color: #a9b0b6; }
@media print { .ob-enseigne, .ob-pied, .ob-notes, .ob-saison { display: none; } }