/* GUIZELLO — même famille que davyportela/ : une seule marge gauche, des
   blancs, la typo qui porte la page, du grain. Les jetons et la matière
   (le magnétoscope) sont en fin de fichier. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  --pad-x: clamp(1.25rem, 6vw, 6rem);
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--encre);
  font: 400 clamp(1rem, .94rem + .25vw, 1.125rem)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cadre { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--pad-x); }

/* Le grain : une seule couche fixe, la matière qui empêche les aplats d'être plats. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .08; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
}

/* ── La barre haute : le menu seul, fixe pendant le défilement ────────────── */
.barre {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: .6rem 0;
  background: var(--barre-fond);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
  font-size: .9375rem;
}
/* Trois zones : le logo à gauche, les sections AU CENTRE, l'action à droite.
   `1fr auto 1fr` centre les liens sur la page, que l'action existe ou non. */
.barre .cadre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.barre .liens { display: flex; gap: clamp(1rem, 4vw, 2.25rem); }
.barre .actions { justify-self: end; display: flex; gap: .5rem; }
.barre .accueil { display: block; padding: 0; justify-self: start; }
.barre .accueil { font: var(--logo-graisse, 800) 1.9rem/1 var(--display); font-stretch: var(--chasse, normal); color: var(--encre); }
.barre a { padding: .2rem 0; text-decoration: none; color: var(--discret); }
.barre a:hover, .barre a:focus-visible { color: var(--encre); }
.bloc { scroll-margin-top: 3rem; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(92dvh, 54rem);
  display: flex;
  align-items: flex-end;
  padding: 6rem 0 clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.hero .cadre { position: relative; z-index: 1; }
.nom { font-family: var(--display); font-stretch: var(--chasse, normal); }
.accroche {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  line-height: 1.35;
}

/* ── Les sections ─────────────────────────────────────────────────────────── */
.bloc { padding: clamp(3.5rem, 9vw, 7.5rem) 0; background: var(--fond); color: var(--encre); }
.bloc h2 {
  margin-bottom: 1.5rem;
  font: var(--h2-graisse, 800) clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.05 var(--display);
  letter-spacing: var(--h2-approche, -.02em);
  font-stretch: var(--chasse, normal);
}
.corps { max-width: 37rem; }
.corps p + p { margin-top: 1.1em; }
.chute { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); line-height: 1.35; font-weight: 500; }
.note { font-size: .9375rem; color: var(--discret); max-width: 37rem; }

@media (min-width: 900px) {
  .grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: 3rem; }
  .grille > .gzo { grid-column: 1 / -1; }
  .bloc h2 { margin-bottom: 0; }
}

.suite { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ecouter {
  display: inline-block;
  padding: .8em 1.4em;
  background: var(--encre);
  color: var(--fond);
  font-weight: 600;
  text-decoration: none;
}
.ecouter:hover { background: var(--accent); color: var(--sur-accent, var(--fond)); }

/* ── GZO : le board ───────────────────────────────────────────────────────── */
.gzo { margin-top: clamp(2rem, 5vw, 3.5rem); }
.sons { display: flex; gap: .5rem; margin: 1rem 0; }
.son {
  padding: .7em 1.5em;
  border: 1px solid var(--filet);
  background: none;
  color: inherit;
  font: 600 .9375rem/1 var(--sans);
  letter-spacing: .1em;
  cursor: pointer;
}
.son:hover { border-color: currentColor; }
.son[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent, var(--fond)); }

.board-sol { margin-bottom: 1rem; padding: clamp(1rem, 3vw, 2rem); background: var(--sol); }
.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.pedale { grid-column: span 2; }
.pedale:nth-child(4) { grid-column: 2 / span 2; }
@media (min-width: 640px) {
  .board { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.5rem, 1.5vw, 1rem); }
  .pedale, .pedale:nth-child(4) { grid-column: auto; }
}
.pedale {
  --coque: #cfc6b2;
  --sur: #17130f;
  position: relative;
  aspect-ratio: 5 / 7;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(.6rem, 1.4vw, 1rem);
  background: var(--coque);
  color: var(--sur);
  opacity: .32;
  transition: opacity .2s;
}
.pedale.allumee { opacity: 1; }
.pedale-comp { --coque: #d8cfb9; }
.pedale-ego { --coque: #e3b53a; }
.pedale-fuzz { --coque: #55633a; --sur: #f0e8d0; }
.pedale-reverb { --coque: #3d4a55; --sur: #f0e8d0; }
.pedale-double { --coque: #a3542f; --sur: #f6ecd6; }
.led {
  position: absolute; top: clamp(.6rem, 1.4vw, 1rem); left: clamp(.6rem, 1.4vw, 1rem);
  width: .55rem; height: .55rem; border-radius: 50%;
  background: currentColor; opacity: .35;
}
.pedale.allumee .led { background: #ff4a2e; opacity: 1; box-shadow: 0 0 10px 2px rgba(255, 74, 46, .8); }
.pedale-nom { font: 800 clamp(1rem, .5rem + 1.5vw, 1.5rem)/1 var(--display); letter-spacing: var(--pedale-approche, -.01em); font-stretch: var(--chasse, normal); }
.pedale-role { margin-top: .3em; font-size: clamp(.72rem, .5rem + .5vw, .8125rem); line-height: 1.2; opacity: .8; }
.etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Pied ─────────────────────────────────────────────────────────────────── */
.pied { margin-top: auto; padding: 3rem 0 1.5rem; text-align: center; background: var(--pied-fond, var(--fond)); color: var(--pied-encre, var(--encre)); }
.contact { font-size: 1.05rem; }
.seiyar {
  width: fit-content;
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--pied-filet, var(--filet));
  font-size: .8rem;
  opacity: .75;
}
.seiyar a { font-variant-caps: all-small-caps; letter-spacing: .18em; text-decoration: none; }
.seiyar a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ── La matière : VHS ─────────────────────────────────────────────────────────
   L'écran bleu du magnétoscope, les lignes de balayage, et les couleurs qui
   bavent : une frange cyan d'un côté, magenta de l'autre. */
:root {
  --fond: #0b0b12;
  --encre: #eceaf2;
  --discret: #8f8da3;
  --accent: #ff2e88;
  --sur-accent: #0b0b12;
  --filet: rgba(236, 234, 242, .2);
  --sol: #15151f;
  --barre-fond: rgba(11, 11, 18, .82);
  --display: Syne, 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --cyan: #22e3ff;
  --magenta: #ff2e88;
  --lignes: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
}
.barre .accueil { text-shadow: -.06em 0 var(--cyan), .06em 0 var(--magenta); }

.hero { background: var(--lignes), linear-gradient(#1c1ce0, #1414b4); }
/* L'affichage du magnétoscope, en haut à gauche de l'écran. */
.hero .cadre::before {
  content: '▶ PLAY';
  display: block;
  margin-bottom: clamp(2rem, 14dvh, 9rem);
  font: 400 clamp(1.5rem, 1rem + 1.6vw, 2.4rem)/1 VT323, monospace;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, .5);
}
/* La bande de bruit qui traverse l'image, comme un défaut de tracking. */
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 9%;
  background: linear-gradient(transparent, rgba(255, 255, 255, .13) 45%, rgba(255, 255, 255, .04) 55%, transparent);
  animation: tracking 7s linear infinite;
}
@keyframes tracking { from { transform: translateY(-100%); } to { transform: translateY(1200%); } }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; display: none; } }

.nom {
  font-size: clamp(2.6rem, 12vw, 10.8rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.055em;
  color: #fff;
  text-shadow: -.035em 0 var(--cyan), .035em 0 var(--magenta);
}
.accroche { color: #fff; }


.board-sol { background: var(--lignes), var(--sol); }

.pedale-nom { font-size: clamp(.68rem, .3rem + .95vw, 1.05rem); }

/* ── Le terminal ──────────────────────────────────────────────────────────────
   Sa remarque du 15/11 : « il y a aussi un côté terminal de dev que j'aime bien
   à travers la VHS ». Les deux se rejoignent dans la même police d'affichage
   (VT323) : le magnétoscope ET la console. Elle porte tout ce qui est interface
   — menu, titres de section, touches, notes — et laisse à Syne le nom et les
   groupes. ⚠️ VT323 a un petit œil : jamais sous 1.2rem. */
:root { --mono: VT323, 'Courier New', monospace; }

.barre { font: 400 1.3rem/1 var(--mono); letter-spacing: .03em; }
.barre .cadre a:not(.accueil) { white-space: nowrap; }
/* Le menu est un repère de position : le lien de la section en cours s'allume,
   et son invite `./` paraît. Elle est toujours là (transparente) pour que rien
   ne bouge quand elle s'allume. */
.barre .cadre a:not(.accueil):not(.action)::before { content: './'; color: transparent; }
.barre a[aria-current] { color: #fff; }
.barre .cadre a[aria-current]:not(.accueil):not(.action)::before { color: var(--cyan); }
/* Les actions, à droite : « contact » en contour, « télécharger » plein (c'est
   l'action principale de la page). Sur téléphone la barre n'a pas la place des
   quatre : « contact » s'efface (il est aussi dans le pied) et « télécharger »
   se réduit à « ↓ GZO ». */
.barre .action { padding: .3rem .7rem; border: 1px solid var(--filet); color: var(--encre); white-space: nowrap; }
.barre .action:hover { border-color: var(--cyan); }
.barre .principale { border-color: var(--magenta); background: var(--magenta); color: var(--fond); }
.barre .principale:hover { border-color: #fff; background: #fff; color: var(--fond); }
.barre .long { display: none; }
.barre .contact { display: none; }
@media (max-width: 699px) { .barre .cadre a:not(.accueil):not(.action)::before { content: none; } }
@media (min-width: 700px) {
  .barre .long { display: inline; }
  .barre .court { display: none; }
  .barre .contact { display: block; }
}

/* Le curseur, après l'accroche. */
.accroche::after {
  content: '';
  display: inline-block;
  width: .55em; height: 1em;
  margin-left: .25em;
  vertical-align: -.12em;
  background: #fff;
  animation: curseur 1.1s steps(1) infinite;
}
@keyframes curseur { 50% { opacity: 0; } }

/* Les titres de section : une ligne de console, avec son invite. */
.bloc h2 {
  font: 400 clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem)/1 var(--mono);
  letter-spacing: .02em;
}
.bloc h2::before { content: '> '; color: var(--magenta); }

.note { font: 400 1.25rem/1.3 var(--mono); letter-spacing: .02em; max-width: 44rem; }
.note::before { content: '# '; color: var(--cyan); }
.son { padding: .45em 1.1em; font: 400 1.4rem/1 var(--mono); letter-spacing: .08em; }
.pedale-role { font: 400 clamp(.95rem, .7rem + .6vw, 1.2rem)/1 var(--mono); }
.ecouter { font: 400 1.4rem/1 var(--mono); letter-spacing: .03em; }
.ecouter::before { content: '▶ '; }
.seiyar { font: 400 1.1rem/1.2 var(--mono); }

@media (prefers-reduced-motion: reduce) { .accroche::after { animation: none; } }

/* ── L'atelier : une session de terminal ──────────────────────────────────────
   Sa consigne du 15/11 : « geek à souhait, il doit sentir le code, la R&D et
   les prises de son ». Une fenêtre de console sur toute la largeur du cadre :
   des commandes (magenta), leurs sorties, des commentaires (# cyan). */
.terminal {
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--filet);
  background: var(--lignes), #07070c;
  font: 400 1.3rem/1.3 var(--mono);
  letter-spacing: .02em;
}
.term-titre {
  margin: 0 calc(-1 * clamp(1rem, 3vw, 2rem)) clamp(1rem, 3vw, 1.75rem);
  padding: .45rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--filet);
  color: var(--discret);
}
.term-bloc { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.cmd { margin-bottom: .6rem; color: #fff; overflow-wrap: anywhere; }
.invite { color: var(--magenta); }
.arg { color: var(--cyan); }
.terminal .note { margin-bottom: .35rem; color: var(--discret); }
.curseur { display: inline-block; width: .55em; height: 1em; vertical-align: -.15em; background: var(--encre); animation: curseur 1.1s steps(1) infinite; }

/* La chaîne du plugin : chaque étage, et s'il est codé ou capturé. */
.chaine { display: flex; flex-wrap: wrap; gap: .6rem 0; }
.chaine li { display: flex; flex-direction: column; }
.chaine li:not(:last-child) { margin-right: .5em; }
.chaine li:not(:last-child) b::after { content: ' →'; color: var(--discret); }
.chaine b { font-weight: 400; color: var(--encre); white-space: nowrap; }
.chaine i { font-style: normal; font-size: 1.1rem; }
.chaine .code { color: var(--cyan); }
.chaine .capture { color: var(--magenta); }

.terminal .sons { margin: .25rem 0 1rem; }
.terminal .son span { color: var(--discret); }
.terminal .son[aria-pressed='true'] span { color: inherit; }
.terminal .board-sol { margin-bottom: 0; padding: 0; background: none; }

.sortie { border-collapse: collapse; }
.sortie th, .sortie td { padding: 0 2.2em 0 0; font-weight: 400; text-align: left; white-space: nowrap; }
.sortie thead th { color: var(--discret); }
.sortie td { color: var(--cyan); }

.fiche { margin: 0; }
.fiche div { display: grid; grid-template-columns: 7.5em 1fr; }
.fiche dt { color: var(--discret); }
.fiche dd { margin: 0; }

.ecoutes { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.ecoutes li { display: grid; gap: .3rem; }
.ecoutes audio { width: 100%; max-width: 30rem; height: 2.25rem; }
@media (prefers-reduced-motion: reduce) { .curseur { animation: none; } }

/* L'atelier n'a plus de texte d'introduction : le titre, puis le terminal. */
#atelier h2, #guitare h2 { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.grille > .terminal { grid-column: 1 / -1; }
.terminal { margin-top: 0; }

/* La guitare : l'historique du son, en `git log`. La branche court à gauche,
   un point par étape ; le plus récent (HEAD) est en haut. */
.log { margin: .5rem 0 clamp(.5rem, 2vw, 1rem); padding: 0; list-style: none; }
.log li {
  position: relative;
  display: grid;
  gap: .1rem 1.5rem;
  padding: 0 0 1.4rem 1.6rem;
  border-left: 2px solid var(--filet);
  margin-left: .3rem;
}
.log li:last-child { padding-bottom: 0; }
.log li::before {
  content: '';
  position: absolute; left: -.42rem; top: .35rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--magenta);
}
.log li:first-child::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.log b { font-weight: 400; color: #fff; }
.log i { font-style: normal; color: var(--cyan); }
.log span { color: var(--discret); max-width: 46rem; }
@media (min-width: 760px) { .log li { grid-template-columns: 15rem 1fr; } }

/* « 21, par GZO » : le nom du plugin, toujours accolé à celui de sa marque
   (15/11 : guizello est la personne, GZO la marque de plugins, 21 ce plugin — ex-REWIND). */
.produit {
  grid-column: 1 / -1;
  margin: 0 0 1.5rem;
  font: 800 clamp(.8rem, .55rem + 1.3vw, 1.8rem)/1 var(--display);
  white-space: nowrap;
  letter-spacing: -.04em;
  color: var(--discret);
}
.produit strong {
  font-size: clamp(1.9rem, .6rem + 6.6vw, 6.2rem);
  letter-spacing: -.05em;
  color: #fff;
  text-shadow: -.035em 0 var(--cyan), .035em 0 var(--magenta);
}

/* ── La façade du plugin, dans l'atelier ──────────────────────────────────────
   Reprise de la vraie (plugin/gzo/Source/Facade.cpp, version « C ») : l'écran
   bleu, le logo à franges, les trois touches, les cinq jauges à segments, et
   le board en aplats dessous. ⛔ Façade de DÉMONSTRATION : les pédales portent
   leurs noms génériques, jamais les marques (BRIEF.md). */
.facade { max-width: 44rem; margin-top: .75rem; border: 1px solid #000; background: var(--lignes), var(--fond); font-family: var(--mono); }
.ecran { padding: clamp(1rem, 4vw, 1.9rem); background: var(--lignes), linear-gradient(#1c1ce0, #1414b4); color: #fff; }
.facade-logo { margin: 0 0 clamp(.75rem, 2.5vw, 1.25rem); font: 800 clamp(.62rem, .45rem + .9vw, .95rem)/1 var(--display); letter-spacing: -.04em; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.facade-logo strong { font-size: clamp(1.5rem, .5rem + 4.6vw, 3.1rem); letter-spacing: -.05em; color: #fff; text-shadow: -.03em 0 var(--cyan), .03em 0 var(--magenta); }

.facade .sons { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.4rem, 1.4vw, .65rem); margin: 0 0 clamp(.9rem, 3vw, 1.4rem); }
.facade .son { max-width: none; padding: .3em 0; border: 1px solid rgba(255, 255, 255, .3); background: rgba(11, 11, 18, .55); color: #fff; font: 400 clamp(1.25rem, .9rem + 1.6vw, 1.8rem)/1 var(--mono); letter-spacing: .06em; }
.facade .son:hover { border-color: rgba(255, 255, 255, .7); }
.facade .son[aria-pressed='true'] { border-color: #fff; background: #fff; color: #1414b4; }

.jauge { position: relative; display: grid; grid-template-columns: clamp(4.4rem, 17%, 6.4rem) 1fr; align-items: center; height: clamp(1.7rem, 5.4vw, 2.4rem); font-size: clamp(1.3rem, .9rem + 1.7vw, 1.95rem); line-height: 1; letter-spacing: .03em; cursor: ew-resize; }
.segments { display: grid; grid-template-columns: repeat(20, 1fr); height: 66%; }
.segments i { margin: 0 22%; border: 1.5px solid rgba(255, 255, 255, .38); }
.segments i.plein { border-color: #fff; background: #fff; }
.jauge:hover .segments i:not(.plein) { border-color: rgba(255, 255, 255, .6); }
/* Le vrai curseur est là, invisible, par-dessus les segments : clavier et lecteurs d'écran compris. */
.jauge input { position: absolute; left: clamp(4.4rem, 17%, 6.4rem); right: 0; top: 0; bottom: 0; width: auto; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.jauge:focus-within .segments { outline: 2px solid var(--cyan); outline-offset: 3px; }

.facade .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.4rem, 1.4vw, .75rem); padding: clamp(1rem, 4vw, 1.6rem) clamp(1rem, 4vw, 1.9rem); }
.facade .pedale, .facade .pedale:nth-child(4) { grid-column: auto; }
.facade .pedale { aspect-ratio: 4 / 5; opacity: 1; filter: saturate(.3) brightness(.4); transition: filter .2s; }
.facade .pedale.allumee { filter: none; }
.facade .pedale { padding: clamp(.4rem, 1.2vw, .6rem); overflow: hidden; }
.facade .pedale-nom { font: 800 .72rem/1.05 var(--display); letter-spacing: -.03em; }
.facade .pedale-role { order: -1; margin: 0 0 .15em; font: 400 .95rem/1 var(--mono); letter-spacing: 0; opacity: .8; }
.pedale-tuner { --coque: #2a2a36; --sur: var(--encre); }
.tuner-ecran { position: absolute; left: 12%; right: 12%; top: 22%; height: 22%; background: #07070c; }
@media (min-width: 640px) {
  .facade .board { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .facade .pedale { aspect-ratio: 3 / 4; }
  .facade .pedale-nom { font-size: .62rem; }
  .facade .pedale-role { font-size: .85rem; }
}

/* ── 15/11 (soir) : la façade suit celle du plugin, refaite ────────────────────
   Tout l'écran est bleu (plus de bande sombre sous les jauges) et le board est
   dessiné AU TRAIT blanc : voyant carré, nom, interrupteur rond, le fil qui
   relie les pédales. Allumée, la pédale est pleine ; éteinte, à moitié effacée.
   ⛔ Les aplats de couleur ont été refusés (« ne va pas avec le bleu du terminal »). */
.facade { background: var(--lignes), linear-gradient(#1c1ce0, #1414b4); }
.facade .ecran { background: none; padding-bottom: 0; }
.facade .board { position: relative; }
.facade .board::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(255, 255, 255, .45); }
.facade .pedale {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: .55rem .15rem .6rem; border: 2px solid currentColor; background: #1717c4; color: rgba(255, 255, 255, .45);
  text-align: center; opacity: 1; filter: none; transition: color .2s;
}
.facade .pedale.allumee { color: #fff; filter: none; }
.facade .pedale .led { position: static; width: .5rem; height: .5rem; border: 1px solid currentColor; border-radius: 0; background: none; opacity: 1; box-shadow: none; }
.facade .pedale.allumee .led { background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .7); }
.facade .pedale-nom { font: 400 clamp(.95rem, .6rem + 1vw, 1.2rem)/.95 var(--mono); letter-spacing: .04em; }
.facade .pedale-role { display: none; }
.facade .inter { width: 1.1rem; height: 1.1rem; border: 2px solid currentColor; border-radius: 50%; }