/* 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 : ni police distante, ni script, ni image distante. */
: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: Rockwell, "Bookman Old Style", "Roboto Slab", "DejaVu Serif", Georgia, serif;
  --texte-police: "Gill Sans", "Gill Sans MT", "Segoe UI", "Trebuchet MS", sans-serif;
  --chiffre-police: "Courier New", Courier, ui-monospace, monospace;
  --travee: 76rem; --mesure: 68ch; --pas-grille: 21rem; --rythme: 1.5rem; --crant: 3px;
  --trait: 1px solid var(--cable); --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 { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--chiffre-police); font-weight: 700; 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); }

/* bandeau */
.ob-bandeau { background: var(--acier); border-bottom: 1px solid var(--graphite); }
.ob-bandeau__rangee { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; padding: 1.05rem 0 .95rem; }
.ob-marque { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--graphite); }
.ob-marque__sigle { font-family: var(--chiffre-police); font-weight: 700; font-size: .78rem; letter-spacing: .08em; background: var(--securite); border: 1.5px solid var(--graphite); padding: .16rem .4rem; }
.ob-marque__nom { font-family: var(--titre-police); font-size: 1.2rem; font-weight: 600; }
.ob-bandeau__devise { margin: 0; color: var(--graphite-doux); font-size: .84rem; border-left: var(--trait); padding-left: .9rem; max-width: 34ch; }
.ob-sommaires { margin-left: auto; }
.ob-sommaires ol { display: flex; flex-wrap: wrap; gap: .3rem 1.05rem; list-style: none; margin: 0; padding: 0; }
.ob-sommaires__lien { display: inline-flex; align-items: baseline; gap: .38rem; color: var(--graphite-doux); text-decoration: none; font-size: .84rem; }
.ob-sommaires__cote { font-family: var(--chiffre-police); font-size: .68rem; color: var(--cuivre); }
.ob-sommaires__lien:hover, .ob-sommaires__lien[aria-current] { color: var(--atelier); }
.ob-sommaires__lien[aria-current] { box-shadow: inset 0 -2px 0 var(--atelier); }
.ob-bandeau__couture { height: .45rem; background: var(--couture); border-top: var(--trait); }
@media (max-width: 42rem) { .ob-bandeau__devise { border-left: 0; padding-left: 0; flex-basis: 100%; max-width: none; } .ob-sommaires { margin-left: 0; flex-basis: 100%; } }

/* guide (préambule) */
.ob-guide { padding: calc(var(--rythme) * 1.6) 0 var(--rythme); }
.ob-guide__planche { margin: 0 0 var(--rythme); aspect-ratio: var(--ratio-large); overflow: hidden; background: var(--acier-creux); border: var(--trait); }
.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__texte p { max-width: var(--mesure); color: var(--graphite-doux); }
.ob-guide__texte h1 { max-width: 24ch; }
.ob-guide--court { padding-bottom: .5rem; }
.ob-guide--court .ob-guide__planche { display: none; }

/* le calendrier du banc */
.ob-saison { background: var(--acier); border: var(--trait); border-left: var(--crant) solid var(--graphite); padding: 1rem 1.2rem .6rem; margin-bottom: calc(var(--rythme) * 1.6); }
.ob-saison h2 { text-transform: uppercase; letter-spacing: .12em; font-size: .84rem; color: var(--graphite-doux); }
.ob-saison__chapeau { max-width: var(--mesure); font-size: .92rem; color: var(--graphite-doux); }
.ob-saison__mois { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .15rem .9rem; margin: 0; padding: 0; }
.ob-saison__item { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; border-bottom: 1px dotted var(--cable); padding: .3rem 0; }
.ob-saison__nom { font-size: .82rem; }
.ob-saison__organe { font-family: var(--chiffre-police); font-size: .72rem; color: var(--graphite-doux); text-align: right; }
.ob-saison__item--courant { background: var(--securite); padding-inline: .35rem; }
.ob-saison__item--courant .ob-saison__nom, .ob-saison__item--courant .ob-saison__organe { color: var(--securite-fonce); 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: var(--trait); border-top: var(--crant) solid var(--graphite-doux); }
.ob-carte__planche { margin: 0; aspect-ratio: var(--ratio-carte); overflow: hidden; background: var(--acier-creux); border-bottom: var(--trait); }
.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; }
.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; border-top-width: 1px; }
.ob-carte--rail .ob-carte__planche { flex: 0 0 10rem; aspect-ratio: var(--ratio-rond); border-bottom: 0; border-right: var(--trait); }
.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: .32rem .8rem; background: var(--acier); border: var(--trait); text-decoration: none; font-size: .85rem; }
.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: var(--trait); 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: .3rem 1rem; border-left: var(--crant) solid var(--securite); color: var(--graphite-doux); }
.ob-notes { position: sticky; top: 1rem; background: var(--acier); border: var(--trait); border-top: var(--crant) 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: var(--trait); border-left: var(--crant) solid var(--atelier); padding: .8rem 1rem; font-size: .94rem; }
.ob-voisinage__item p { margin: 0; }

/* méthode (encart) */
.ob-methode { background: var(--acier); border: var(--trait); border-left: var(--crant) 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(--acier); border-top: 1px solid var(--graphite); font-size: .9rem; }
.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(--graphite-doux); }
.ob-pied__colonne ul { list-style: none; padding: 0; margin: 0; }
.ob-pied__colonne li { margin-bottom: .3rem; }
.ob-pied__refus { color: var(--graphite-doux); font-size: .84rem; }
.ob-pied__ligne { width: min(100% - 2rem, var(--travee)); margin: 0 auto; padding: .8rem 0 1.6rem; border-top: 1px solid var(--graphite); font-family: var(--chiffre-police); font-size: .74rem; color: var(--graphite-doux); }
@media print { .ob-bandeau, .ob-pied, .ob-notes, .ob-saison { display: none; } }