@charset "utf-8";
/* Benchup — la page d'attente de benchup.fr (attente.py), en attendant le site.
   L'identité du site (style.css) : papier, encre, orange, laiton, nuit ; Bricolage
   Grotesque pour les titres, Instrument Sans pour le texte. Mêmes paires, déjà calculées
   et mesurées : encre sur papier 15,74:1, gris sur papier 6,29:1, encre sur orange 4,70:1,
   papier sur nuit 16,33:1, sable sur nuit 10,49:1, laiton sur nuit 7,66:1. */

@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/BricolageGrotesque-Bold.woff2) format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/InstrumentSans-Regular.woff2) format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/InstrumentSans-Bold.woff2) format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --papier: #F4F1EA; --carte: #FFFDF8; --encre: #16181D; --gris: #555862;
  --orange: #E4531B; --orange-vif: #FF7A3D; --laiton: #C9A15A;
  --nuit: #121419; --nuit2: #1C1F26; --sable: #C9C3B5; --vert-vif: #43C57A;
  --filet: #DDD6C8; --filet-nuit: #343844;
  --f-titre: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --f-corps: "Instrument Sans", "Segoe UI", Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papier); }
body { margin: 0; color: var(--encre); font-family: var(--f-corps); font-size: 1.0625rem; line-height: 1.6;
       -webkit-text-size-adjust: 100%; font-variant-numeric: lining-nums; }
@media (min-width: 48rem) { body { font-size: 1.125rem; } }
a { color: var(--encre); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; max-width: 76rem; margin: 0 auto;
        padding: 0 1.25rem; }
.tete { display: flex; align-items: center; padding: 1.2rem 0; }
.marque { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.5rem/1 var(--f-titre); letter-spacing: -.02em; }
.marque-dessin { width: 2.4rem; height: 2.4rem; flex: none; }
.m-cadran, .m-pieds { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.m-aiguille { fill: none; stroke: var(--orange); stroke-width: 3.2; stroke-linecap: round; }
.m-pivot { fill: var(--orange); }
.m-plateau { fill: currentColor; }

.scene { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 60rem) { .scene { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.surtitre { margin: 0 0 .9rem; color: #B43E0E; font-weight: 700; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font: 700 clamp(2.5rem, 6.4vw, 5rem)/.98 var(--f-titre); letter-spacing: -.015em; text-wrap: balance; max-width: 13ch; }
.chapo { max-width: 34em; margin: 1.4rem 0 1.8rem; color: var(--gris); font-size: clamp(1.1rem, 2vw, 1.25rem); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.bouton { display: inline-flex; align-items: center; min-height: 3rem; padding: .75rem 1.4rem; border-radius: 999px;
          background: var(--orange); color: var(--encre); font-weight: 700; text-decoration: none; }
.bouton:hover { background: var(--encre); color: var(--papier); }
.bouton-contour { background: transparent; box-shadow: inset 0 0 0 2px var(--encre); }

/* le banc d'essai : la page se mesure dans le navigateur qui l'affiche */
.banc { margin: 0; padding: clamp(1.3rem, 3vw, 2rem); border-radius: 18px; background: var(--nuit); color: var(--papier); }
.banc h2 { margin: 0 0 .2rem; font: 700 clamp(1.3rem, 2.4vw, 1.6rem)/1.15 var(--f-titre); }
.banc .sous { margin: 0 0 1rem; color: var(--sable); font-size: .95rem; }
.cadran { margin: 0 auto; max-width: 22rem; }
.cadran svg { display: block; width: 100%; height: auto; overflow: visible; }
.c-arc { fill: none; stroke: #3A3F4B; stroke-width: 10; stroke-linecap: round; }
.c-grad { fill: none; stroke: var(--sable); stroke-width: 1.6; opacity: .75; }
.c-ref { fill: none; stroke: var(--laiton); stroke-width: 4; stroke-linecap: round; }
.c-aiguille { transform-origin: 100px 96px; transform: rotate(calc(var(--a, -120) * 1deg)); }
.c-aiguille path { stroke: var(--orange-vif); stroke-width: 4; stroke-linecap: round; }
.c-aiguille circle { fill: var(--orange-vif); }
/* le banc s'allume : l'aiguille balaie tout le cadran, puis se pose sur la mesure */
.cadran.balaye .c-aiguille { transition: transform .7s cubic-bezier(.45, 0, .3, 1); }
.cadran.pose .c-aiguille { transition: transform 1.2s cubic-bezier(.34, 1.45, .64, 1); }
.cadran figcaption { display: grid; justify-items: center; text-align: center; margin-top: -.4rem; }
.c-titre { color: var(--sable); font-size: .9rem; font-weight: 700; }
.c-valeur { font: 700 clamp(2rem, 4vw, 2.6rem)/1.1 var(--f-titre); font-variant-numeric: tabular-nums; margin-top: .2rem; }
.c-unite { color: var(--sable); font-size: .9rem; }
.c-ref-texte { margin-top: .5rem; color: var(--laiton); font-size: .85rem; line-height: 1.35; }
.verdict { margin: 1rem 0 0; min-height: 3.2em; }
.verdict b { color: var(--vert-vif); }
.source { margin: .8rem 0 0; color: var(--sable); font-size: .82rem; }
.source a { color: var(--sable); }
.sans-js { margin: 1rem 0 0; color: var(--sable); font-size: .95rem; }
.js .sans-js { display: none; }

.pied { padding: 1.4rem 0 2rem; border-top: 1px solid var(--filet); color: var(--gris); font-size: .92rem; }
.pied p { margin: 0 0 .5rem; }
.pied a { color: var(--gris); }
.pied details { margin-top: .4rem; }
.pied summary { cursor: pointer; font-weight: 700; color: var(--encre); }
.pied dl { display: grid; gap: .2rem 1rem; margin: .7rem 0 0; }
@media (min-width: 40rem) { .pied dl { grid-template-columns: 9rem minmax(0, 1fr); } }
.pied dt { font-weight: 700; color: var(--encre); }
.pied dd { margin: 0 0 .4rem; }

/* apparitions : la classe `js` est posée par la page ; rien ne reste caché sans script */
@media (prefers-reduced-motion: no-preference) {
  .js .entre { animation: entre .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .js .tete .m-aiguille { transform-origin: 20px 23.5px; animation: aiguille-leve 1s .15s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes entre { from { opacity: 0; translate: 0 14px; } }
@keyframes aiguille-leve { from { transform: rotate(-95deg); } }
@media print {
  .banc { background: #fff; color: #000; }
  .actions { display: none; }
}