/* Dos Droit — univers « le poste en coupe » : la planche d'ergonome.
   Tête de page : béton ciré quadrillé façon papier millimétré, ligne d'aplomb orange, puis une règle en bois clair graduée en centimètres.
   Fond : papier calque gris clair au quadrillage fin. Plateaux en bois clair, verdict en vert sauge, repères orange sécurité.
   Titres Space Grotesk, texte Source Serif 4, cotes et chiffres JetBrains Mono (Bunny Fonts). Boutons jaunes « acheter ». */
:root {
  --calque: #eef0ee;
  --calque-2: #dfe3df;
  --papier: #fafbf8;
  --encre: #22252a;
  --gris: #4f5559;
  --beton: #565c5f;
  --beton-fonce: #2f3437;
  --bois: #d9b98a;
  --sauge: #8fa894;
  --sauge-fonce: #3d5c46;
  --orange: #f06a1d;
  --orange-texte: #b0430b;
  --jaune: #ffcf33;
  --titre: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --millimetre: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}

body { font-size: 19px; background-color: var(--calque); color: var(--encre);
  background-image: linear-gradient(rgba(34,37,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(34,37,42,.045) 1px, transparent 1px);
  background-size: 24px 24px; }
a { color: var(--sauge-fonce); text-underline-offset: 3px; }
h1, h2, h3, .logo, .produit-nom, .choix-nom, .quiz-titre, .quiz-verdict, .carte-nom, .proches h2, .groupe h2, .faq summary, .cartes a { font-family: var(--titre); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: 29px; line-height: 1.18; }
h3, .faq summary, .cartes a { font-weight: 500; }
.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, .cote { font-family: var(--mono); }
.cartes p, .produit-source { color: var(--gris); }

/* En-tête : béton foncé, logo en équerre (angle droit orange) */
.entete { background: var(--beton-fonce); border: 0; padding: 14px 0; }
.entete .conteneur, main.conteneur, .pied .conteneur { max-width: 1120px; }
.entete .logo { color: var(--papier); font-size: 22px; }
.logo::before { content: ""; display: inline-block; width: 14px; height: 18px; margin-right: 10px; vertical-align: -2px;
  border-left: 4px solid var(--orange); border-bottom: 4px solid var(--orange); box-sizing: border-box; }
.entete nav a { color: #d3d9d4; font-family: var(--mono); font-size: 14px; }
.entete nav a:hover { color: var(--jaune); }

/* Tête de page : la planche sur béton ciré, quadrillage millimétré et ligne d'aplomb */
.hero { position: relative; color: #fff; background-color: var(--beton);
  background-image: var(--millimetre); background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; }
.hero::after { content: ""; position: absolute; top: 0; bottom: 36px; right: max(20px, calc(50% - 540px)); width: 0;
  border-left: 1.5px dashed rgba(240,106,29,.8); pointer-events: none; display: none; }
@media (min-width: 900px) { .hero::after { display: block; } }
.hero-in { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 20px 16px 32px; }
.hero h1 { font-size: clamp(31px, 5.4vw, 52px); line-height: 1.06; max-width: 20ch; margin: 18px 0; }
.hero .ariane ol { margin: 0; color: #eef1ee; }
.hero .ariane a, .hero .meta a { color: inherit; }
.hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: #eef1ee; }
.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: 20px; max-width: 46ch; }
.hero-intro a { color: var(--jaune); }

/* Règle en bois clair graduée en centimètres, avec une ligne de cote fléchée */
.cote { --x: max(16px, calc(50% - 544px)); position: relative; height: 36px; background-color: var(--bois);
  background-image: repeating-linear-gradient(90deg, rgba(34,37,42,.55) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, var(--encre) 0 1.5px, transparent 1.5px 50px);
  background-size: 100% 6px, 100% 11px; background-repeat: no-repeat; border-bottom: 1.5px solid var(--encre); color: var(--encre); font-size: 12px; }
.cote .echelle { position: absolute; left: var(--x); top: 17px; width: 150px; height: 0; border-top: 1.5px solid var(--encre); }
.cote .echelle::before, .cote .echelle::after { content: ""; position: absolute; top: -5px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.cote .echelle::before { left: 0; border-right: 7px solid var(--encre); }
.cote .echelle::after { right: 0; border-left: 7px solid var(--encre); }
.cote span:not(.echelle) { position: absolute; top: 19px; transform: translateX(-50%); }
.cote span:nth-child(2) { left: calc(var(--x) + 4px); }
.cote span:nth-child(3) { left: calc(var(--x) + 75px); }
.cote span:nth-child(4) { left: calc(var(--x) + 150px); }

/* Accueil et rubriques : le poste en coupe, la silhouette passe d'assise à debout */
.hero-grille { display: grid; gap: 24px; align-items: center; }
.plan { width: 100%; max-width: 340px; justify-self: center; filter: drop-shadow(5px 6px 0 rgba(0,0,0,.25)); transform: rotate(-1deg); }
.pl-feuille { fill: var(--papier); stroke: var(--encre); stroke-width: 1.5; }
.pl-grille { stroke: #d3d9d4; stroke-width: .6; }
.pl-sol { stroke: var(--encre); stroke-width: 2; }
.pl-hachure { stroke: var(--gris); stroke-width: 1; }
.pl-plateau { fill: var(--bois); stroke: var(--encre); stroke-width: 1.5; }
.pl-pied { fill: var(--beton); stroke: var(--encre); stroke-width: 1.2; }
.pl-ecran { fill: var(--beton-fonce); stroke: var(--encre); stroke-width: 1.2; }
.pl-chaise { fill: none; stroke: var(--sauge-fonce); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-corps { fill: none; stroke: var(--encre); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.pl-tete { fill: var(--encre); }
.pl-aplomb { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pl-plomb { fill: var(--orange); }
.pl-angle { fill: none; stroke: var(--orange); stroke-width: 1.5; }
.pl-ligne-cote { stroke: var(--gris); stroke-width: 1; }
.pl-fleche { fill: var(--gris); }
.pl-cote { font-family: var(--mono); font-size: 10px; fill: var(--encre); }
.pl-cartouche rect { fill: none; stroke: var(--encre); stroke-width: 1; }
.pl-cartouche text { font-family: var(--mono); font-size: 8px; fill: var(--gris); }
.pl-debout { opacity: 0; }
.plan .pl-assis, .plan .pl-debout { animation: 14s ease-in-out infinite; }
.plan .pl-assis { animation-name: assis; }
.plan .pl-debout { animation-name: debout; }
@keyframes assis { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes debout { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .plan .pl-assis, .plan .pl-debout { animation: none; } }
@media (min-width: 900px) { .hero-grille { grid-template-columns: 1fr 340px; } }

/* 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(--sauge); }
.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: 23px; line-height: 1.12; }
.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: 3px; box-shadow: 3px 3px 0 var(--encre);
  font-family: var(--titre); font-weight: 700; transition: transform .08s, box-shadow .08s; }
.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(--gris); border-radius: 2px; color: var(--gris); }
.sommaire { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px; }

/* Choix rapide : des cartouches de plan */
.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; }
.choix-label { color: var(--orange-texte); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.choix-nom { font-size: 19px; line-height: 1.15; }
.choix-nom a { color: var(--encre); }
.choix-pourqui { font-size: 15px; color: var(--gris); }

/* Fiches produit : un cartouche de plan, numéro dans une équerre orange */
.produit { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px; padding: 30px 20px 18px; margin: 48px 0; box-shadow: 6px 6px 0 var(--calque-2); }
.produit-rang { top: -20px; left: 18px; width: 42px; height: 40px; padding: 0; display: grid; place-items: center; box-sizing: border-box;
  background: var(--papier); color: var(--encre); border: 1.5px solid var(--encre); border-left: 5px solid var(--orange); border-bottom: 5px solid var(--orange); border-radius: 0;
  font-family: var(--mono); font-weight: 500; font-size: 16px; }
.produit-choix { color: var(--orange-texte); font-size: 12px; letter-spacing: .1em; }
.produit-nom { font-size: 27px; line-height: 1.12; }
.produit-cat { background: var(--calque-2); 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(--calque-2); border: 1px solid var(--encre); }
.jauge-barre span { background: var(--sauge-fonce); background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.45) 9px 10px); }
.produit-specs { gap: 0; background: transparent; margin: 14px 0; border-top: 1.5px solid var(--encre); }
.produit-specs div { padding: 8px 10px; border-bottom: 1px solid var(--calque-2); }
.produit-specs dd { font-family: var(--mono); font-size: 16px; }
.produit-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.plus li::marker { color: var(--sauge-fonce); }
.moins li::marker { color: var(--orange-texte); }

/* L'avis de Gabin : une annotation au crayon dans la marge du plan */
blockquote { position: relative; background-color: var(--papier); border: 0; border-left: 1.5px solid var(--gris); border-radius: 0;
  padding: 16px 20px 14px 26px; margin: 32px 0 32px 12px; font-style: italic; font-size: 19px;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(79,85,89,.12) 31px 32px); }
blockquote::before { content: "✎"; position: absolute; left: -12px; top: 12px; width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--orange); color: var(--encre); font-style: normal; font-size: 13px; border-radius: 50%; }
blockquote strong:first-child { font-family: var(--titre); font-style: normal; font-weight: 700; color: var(--sauge-fonce); }

/* Quiz : sur la planche en béton, une question à la fois */
.quiz { color: #fff; border: 1.5px solid var(--encre); border-radius: 2px; padding: 22px; background-color: var(--beton);
  background-image: var(--millimetre); background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; }
.quiz-titre { font-size: 24px; }
.quiz-progres { background: rgba(255,255,255,.25); 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,.2); 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: 22px; }
.quiz-resultat a:not(.bouton) { color: var(--jaune); }

/* Tableau et filtres : la nomenclature du plan */
.tableau { border: 1.5px solid var(--encre); border-radius: 2px; background: var(--papier); }
thead th { background: var(--beton-fonce); color: #eef1ee; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
tbody tr { border-color: var(--calque-2); }
tbody tr:hover { background: var(--calque); }
tbody td { font-family: var(--mono); font-size: 15px; }
tbody th a { color: var(--encre); font-family: var(--titre); font-weight: 500; }
.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 papier calque millimétré */
.volumes { background-color: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px; padding: 16px;
  background-image: linear-gradient(rgba(34,37,42,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,37,42,.07) 1px, transparent 1px);
  background-size: 10px 10px; }

.faq details { border-bottom: 1px dashed var(--gris); }
.proches, .cartes li { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 2px; }
.cartes li { box-shadow: 4px 4px 0 var(--calque-2); }
.cartes a { color: var(--encre); }
.groupe h2 a { color: var(--encre); text-decoration-color: var(--orange); }
.barre-choix { background: var(--beton-fonce); color: #fff; border: 0; }
.pied { background: var(--beton-fonce); color: #cfd5d0; border: 0; }
.pied .mention { color: #fff; }
.pied a { color: #fff; }

/* Outils « hauteurs » et « chaise » : planche d'ergonome (cotes en mono, silhouette au trait) */
.outil-hauteurs, .outil-chaise { background: var(--papier); border: 1px solid var(--calque-2); border-top: 4px solid var(--orange); padding: 20px; margin: 24px 0; }
.oh-champs, .oc-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.oh-champ, .oc-champ { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 15px; }
.oh-champ input, .oc-champ input, .oc-champ select { font: inherit; font-size: 18px; padding: 8px 10px; border: 2px solid var(--beton); background: #fff; color: var(--encre); min-width: 0; }
.outil-chaise fieldset { border: 1px solid var(--calque-2); margin: 14px 0 0; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.outil-chaise legend { font-family: var(--mono); font-size: 15px; }
.outil-chaise fieldset label { font-size: 17px; }
.oh-cotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.oh-cotes div { background: var(--calque); padding: 10px 12px; border-left: 3px solid var(--sauge-fonce); }
.oh-cotes dt { font-family: var(--mono); font-size: 14px; color: var(--gris); }
.oh-cotes dd { margin: 4px 0 0; font-family: var(--mono); font-size: 20px; }
.oh-precision, .oc-exclus, .oh-exclus { font-size: 16px; color: var(--gris); }
.oh-dessin { display: block; width: 100%; max-width: 560px; height: auto; margin: 10px auto; background: var(--calque); }
.oh-sol { stroke: var(--beton-fonce); stroke-width: 1.5; }
.oh-meuble { fill: none; stroke: #8a6a3c; stroke-width: 3; stroke-linecap: round; }
.oh-ecran { fill: var(--beton-fonce); }
.oh-corps { fill: none; stroke: var(--sauge-fonce); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.oh-vue { stroke: var(--orange-texte); stroke-width: 1; stroke-dasharray: 3 3; }
.oh-cote { font-family: var(--mono); font-size: 9px; fill: var(--orange-texte); }
.oh-legende { font-family: var(--mono); font-size: 9px; fill: var(--gris); }
.oh-titre { font-size: 20px; margin: 20px 0 8px; }
.oh-liste, .oc-liste { list-style: none; padding: 0; margin: 0; }
.oc-liste { counter-reset: oc; }
.oh-produit, .oc-chaise { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--calque-2); }
.oc-chaise { counter-increment: oc; }
.oc-chaise::before { content: counter(oc); font-family: var(--mono); font-weight: 700; color: #fff; background: var(--sauge-fonce); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.oh-nom, .oc-nom { font-family: var(--titre); font-weight: 700; }
.oh-infos, .oc-infos { font-family: var(--mono); font-size: 14px; color: var(--gris); flex: 1 1 200px; }
.oc-pour { flex: 1 1 100%; font-size: 16px; }
.oh-produit .bouton, .oc-chaise .bouton { margin-left: auto; }
.oh-note, .oc-note { margin-top: 16px; font-size: 16px; color: var(--gris); border-top: 1px dashed var(--calque-2); padding-top: 12px; }
@media (prefers-reduced-motion: reduce) { .outil-hauteurs *, .outil-chaise * { transition: none !important; animation: none !important; } }