@font-face {
  font-family: "what-titre";
  src: url(fonts/heroscn-bold.woff) format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "what-texte";
  src: url(fonts/heros-regular.woff) format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "what-texte";
  src: url(fonts/heros-bold.woff) format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "what-mono";
  src: url(fonts/mono.woff) format("woff");
  font-weight: 400;
  font-display: swap;
}

:root {
  --noir: rgb(0, 0, 0);
  --encre: rgb(230, 232, 235);
  --doux: rgb(176, 181, 188);
  --gris: rgb(140, 145, 152);
  --trace: rgb(44, 47, 52);
  --filet: rgb(58, 61, 67);
  --mono: "what-mono", ui-monospace, Consolas, monospace;
  --titre: "what-titre", "Arial Narrow", sans-serif;
  --texte: "what-texte", Arial, sans-serif;
  --marge: clamp(20px, 5vw, 72px);
  --entete: 56px;
}

*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0;
}

html {
  background: var(--noir);
  color: var(--encre);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.55;
  font-kerning: normal;
}

::selection {
  background: var(--encre);
  color: var(--noir);
}

a {
  color: inherit;
}

button, input {
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--entete);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--marge);
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.entete .nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
}

.entete .lien {
  font-family: var(--mono);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.entete .lien[aria-disabled="true"] {
  color: var(--gris);
}

.hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--entete));
  padding: var(--entete) var(--marge) clamp(56px, 8vw, 104px);
}

.champ {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 14px;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.champ-fond {
  color: rgb(38, 41, 46);
}

.champ-marque {
  color: rgb(236, 238, 241);
}

.zone-marque {
  position: relative;
  height: clamp(150px, 27vw, 410px);
  margin-top: clamp(28px, 4vw, 56px);
}

.hero-bas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 56px);
}

.hero-texte {
  max-width: 34rem;
}

h1 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(36px, 3.2vw, 50px);
  line-height: 1;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
}

.intro {
  color: var(--doux);
  margin: 0 0 30px;
  max-width: 31em;
}

.bouton {
  display: inline-block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  padding: 17px 24px 15px;
  background: var(--encre);
  color: var(--noir);
  border: 1px solid var(--encre);
  text-decoration: none;
}

.bouton[aria-disabled="true"] {
  background: transparent;
  color: var(--gris);
  border-color: var(--filet);
  cursor: default;
}

.meta {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris);
  margin: 16px 0 0;
}

.demo-bloc {
  margin-top: calc(-1 * clamp(40px, 8vw, 150px));
}

.legende {
  display: table;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gris);
  background: var(--noir);
  padding: 3px 10px 3px 0;
  margin: 10px 0 0;
}

.fenetre {
  --a-chrome: rgba(0, 0, 0, 0.72);
  --a-fond: rgb(0, 0, 0);
  --a-fond-reg: rgb(22, 22, 25);
  --a-carte: rgb(38, 38, 42);
  --a-trait: rgba(255, 255, 255, 0.11);
  --a-texte: rgb(236, 236, 239);
  --a-sec: rgb(150, 150, 158);
  --a-sel: rgb(232, 232, 235);
  --a-sel-texte: rgb(12, 12, 14);
  --a-champ: rgba(255, 255, 255, 0.04);
  --a-contour: rgba(255, 255, 255, 0.6);
  --r: 7px;
  position: relative;
  isolation: isolate;
  color: var(--a-texte);
  font-family: var(--texte);
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.36);
  border-left-color: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(10px) saturate(1.3) brightness(1.1);
  backdrop-filter: blur(10px) saturate(1.3) brightness(1.1);
}

.fenetre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(116deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 100%);
}

.theme-graphite {
  --a-chrome: rgba(26, 26, 29, 0.82);
  --a-fond: rgb(30, 30, 33);
  --a-fond-reg: rgb(30, 30, 33);
  --a-carte: rgb(48, 48, 53);
}

.theme-minuit {
  --a-chrome: rgba(7, 12, 26, 0.82);
  --a-fond: rgb(8, 13, 28);
  --a-fond-reg: rgb(12, 19, 38);
  --a-carte: rgb(26, 36, 62);
  --a-sec: rgb(140, 156, 192);
  --a-texte: rgb(214, 226, 255);
}

.theme-rose {
  --a-chrome: rgba(24, 9, 18, 0.82);
  --a-fond: rgb(22, 8, 16);
  --a-fond-reg: rgb(28, 12, 21);
  --a-carte: rgb(52, 26, 40);
  --a-sec: rgb(184, 142, 162);
  --a-texte: rgb(250, 214, 230);
}

.theme-papier {
  --a-chrome: rgba(232, 229, 222, 0.9);
  --a-fond: rgb(244, 241, 234);
  --a-fond-reg: rgb(238, 235, 228);
  --a-carte: rgb(222, 218, 210);
  --a-trait: rgba(0, 0, 0, 0.12);
  --a-texte: rgb(24, 24, 26);
  --a-sec: rgb(100, 98, 94);
  --a-sel: rgb(26, 26, 28);
  --a-sel-texte: rgb(244, 241, 234);
  --a-champ: rgba(0, 0, 0, 0.03);
  --a-contour: rgba(0, 0, 0, 0.55);
}

.fenetre button,
.fenetre input {
  font-family: var(--texte);
}

.ico {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
}

.ico svg {
  width: 100%;
  height: 100%;
}

.ico.petit {
  width: 14px;
  height: 14px;
}

.app {
  display: flex;
  flex-direction: column;
  height: 560px;
}

.app-titre {
  display: flex;
  align-items: center;
  height: 30px;
  padding-left: 10px;
  font-size: 12px;
  background: var(--a-chrome);
}

.app-titre-nom {
  display: flex;
  align-items: center;
  gap: 7px;
}

.app-fenetre {
  margin-left: auto;
  display: flex;
  gap: 28px;
  padding-right: 18px;
  color: var(--a-sec);
}

.app-x {
  width: 44px;
  height: 30px;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app-onglets {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 8px;
  background: var(--a-chrome);
  overflow: hidden;
}

.app-logo {
  display: inline-flex;
  width: 30px;
  height: 28px;
  padding: 6px 7px;
  border-radius: var(--r);
  background: var(--a-carte);
  flex: none;
}

.onglet {
  display: flex;
  align-items: center;
  height: 28px;
  min-width: 0;
  max-width: 168px;
  flex: 0 1 168px;
  border-radius: var(--r);
  color: var(--a-sec);
}

.onglet.actif {
  background: var(--a-carte);
  color: var(--a-texte);
}

.onglet-nom {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 4px 0 10px;
  border: 0;
  background: none;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}

.onglet-nom span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onglet-croix {
  width: 22px;
  height: 22px;
  margin-right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: 5px;
  cursor: pointer;
  flex: none;
  padding: 4px;
}

.onglet-croix .ico {
  width: 13px;
  height: 13px;
}

.app-outils {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 8px;
  background: var(--a-chrome);
  border-bottom: 1px solid var(--a-trait);
}

.btn-ico {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: none;
  color: var(--a-texte);
  border-radius: var(--r);
  cursor: pointer;
  flex: none;
}

.btn-ico .ico {
  width: 17px;
  height: 17px;
}

.btn-ico.actif {
  background: var(--a-sel);
  color: var(--a-sel-texte);
}

.btn-ico.rouge {
  color: rgb(190, 32, 44);
}

.app-adresse {
  flex: 1;
  min-width: 0;
  margin: 0 8px 0 4px;
}

.app-adresse input {
  display: block;
  width: 100%;
  height: 30px;
  padding: 0 12px;
  background: var(--a-champ);
  border: 1px solid var(--a-trait);
  border-radius: var(--r);
  font-size: 13px;
}

.fenetre input::placeholder {
  color: var(--a-sec);
  opacity: 1;
}

.app-corps {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  background: var(--a-fond);
}

.app-corps.sans-rail {
  grid-template-columns: minmax(0, 1fr);
}

.app-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-right: 1px solid var(--a-trait);
  background: var(--a-fond);
}

.rail-haut,
.rail-bas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rail-bas {
  border-top: 1px solid var(--a-trait);
  padding-top: 10px;
}

.rail-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--a-carte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tuile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 700;
  font-size: 12px;
  flex: none;
}

.theme-papier .tuile {
  background: rgba(0, 0, 0, 0.1);
}

.app-contenu {
  min-height: 0;
  overflow: auto;
  position: relative;
}

.accueil,
.page-site,
.fermeture,
.fermee {
  min-height: 100%;
  background: var(--a-fond);
}

.accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px 50px;
}

.accueil-logo {
  display: inline-flex;
  width: 48px;
  height: 48px;
}

.accueil-logo svg,
.logo-carre svg,
.app-logo svg {
  width: 100%;
  height: 100%;
}

.accueil-nom {
  margin: 10px 0 24px;
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--a-sec);
}

.accueil-recherche {
  width: min(440px, 100%);
}

.accueil-recherche input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: var(--a-champ);
  font-size: 14px;
}

.theme-papier .accueil-recherche input {
  border-color: rgba(0, 0, 0, 0.2);
}

.accueil-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
}

.accueil-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  font-size: 12px;
  cursor: pointer;
}

.accueil-lien .tuile {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  font-size: 18px;
  background: var(--a-carte);
}

.tuile.tuile-vide {
  background: none;
  border: 1px dashed var(--a-trait);
  color: var(--a-sec);
}

.reglages {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: var(--a-fond-reg);
}

.reg-nav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 10px 14px;
  border-right: 1px solid var(--a-trait);
}

.reg-titre {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 8px 16px;
  font-size: 15px;
  font-weight: 700;
}

.reg-liens {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reg-lien {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r);
  background: none;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.reg-lien .ico {
  width: 16px;
  height: 16px;
  color: var(--a-sec);
}

.reg-lien[aria-pressed="true"] {
  background: var(--a-carte);
}

.reg-compte {
  margin-left: auto;
  font-size: 11px;
  color: var(--a-sec);
}

.reg-version {
  margin: auto 10px 0;
  padding-top: 16px;
  white-space: pre-line;
  font-size: 11px;
  line-height: 1.5;
  color: var(--a-sec);
}

.reg-panneau {
  padding: 22px 26px 36px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.reg-interieur {
  max-width: 520px;
  margin: 0 auto;
}

.reg-interieur h3 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
}

.etiquette {
  margin: 20px 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--a-sec);
}

.desc {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--a-sec);
}

.sous-titre {
  margin: 0 0 8px;
  font-size: 13px;
}

.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.pastille {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--a-trait);
  border-radius: 999px;
  background: none;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}

.pastille[aria-pressed="true"] {
  background: var(--a-sel);
  color: var(--a-sel-texte);
  border-color: var(--a-sel);
}

.sorties {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 12px;
}

.sortie {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.sortie[aria-pressed="true"] {
  border-color: var(--a-contour);
}

.sortie-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--a-carte);
  flex: none;
}

.sortie-ico .ico {
  width: 15px;
  height: 15px;
}

.deux {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.deux-a {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deux-b {
  font-size: 11.5px;
  color: var(--a-sec);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.volume {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
  font-size: 12px;
  color: var(--a-sec);
}

.volume input {
  appearance: auto;
  -webkit-appearance: auto;
  width: 100%;
  accent-color: var(--a-sel);
}

.volume-pct {
  text-align: right;
  color: var(--a-texte);
}

.inter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.inter-piste {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--a-trait);
  background: var(--a-carte);
  flex: none;
}

.inter-bille {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--a-sec);
}

.inter[aria-pressed="true"] .inter-piste {
  background: var(--a-sel);
  border-color: var(--a-sel);
}

.inter[aria-pressed="true"] .inter-bille {
  left: 16px;
  background: var(--a-sel-texte);
}

.liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 10px;
}

.rangee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 5px 8px;
  border-radius: var(--r);
}

.rangee[hidden] {
  display: none;
}

.rangee-g {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.rangee-d {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.rangee .tuile {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--a-carte);
}

.rangee .pastille {
  height: 26px;
  padding: 0 11px;
}

.btn {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r);
  background: var(--a-carte);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}

.btn.clair {
  background: var(--a-sel);
  color: var(--a-sel-texte);
}

.btn.large {
  width: 100%;
}

.ligne-champ {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
}

.pile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.pile .ligne-champ {
  margin: 0;
}

.ligne-champ input {
  flex: 1;
}

.ligne-champ input,
.pile > input {
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--a-trait);
  border-radius: var(--r);
  background: var(--a-champ);
  font-size: 13px;
}

.themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.theme-tuile {
  height: 46px;
  display: flex;
  align-items: flex-end;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}

.theme-tuile[aria-pressed="true"] {
  outline: 2px solid var(--a-texte);
  outline-offset: 1px;
}

.tuile-noir {
  background: rgb(0, 0, 0);
  color: rgb(236, 236, 239);
}

.tuile-graphite {
  background: rgb(32, 32, 36);
  color: rgb(236, 236, 239);
}

.tuile-minuit {
  background: rgb(9, 14, 30);
  color: rgb(150, 180, 240);
}

.tuile-rose {
  background: rgb(28, 12, 21);
  color: rgb(240, 160, 196);
}

.tuile-papier {
  background: rgb(244, 241, 234);
  color: rgb(24, 24, 26);
  border-color: rgba(0, 0, 0, 0.15);
}

.tuile-perso {
  background: none;
  border-style: dashed;
  border-color: var(--a-sec);
  color: var(--a-texte);
}

.logo-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-carre {
  display: inline-flex;
  width: 46px;
  height: 46px;
  padding: 11px;
  border: 1px solid var(--a-trait);
  border-radius: 9px;
}

.chemin {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--a-sec);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
}

.discret {
  font-size: 12px;
  color: var(--a-sec);
}

.garde {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--a-sel);
  color: var(--a-sel-texte);
}

.page-site,
.fermeture {
  padding: 26px 30px;
}

.page-titre {
  margin: 0 0 12px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
}

.squelette {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  color: var(--a-sec);
  white-space: pre;
  overflow: hidden;
}

.brouille {
  font-family: var(--mono);
}

.fermee {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  text-align: center;
}

.fermee .page-titre {
  margin-top: 12px;
}

.bilan {
  text-align: left;
  white-space: pre-wrap;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 5;
  transform: translateX(-50%);
  width: max-content;
  max-width: 82%;
  padding: 9px 14px;
  border-radius: var(--r);
  background: var(--a-sel);
  color: var(--a-sel-texte);
  font-size: 12.5px;
}

.demo-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gris);
}

.demo-etat {
  background: var(--noir);
  padding: 3px 10px 3px 0;
}

.demo-fermer {
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 14px;
  border: 0;
  background: var(--encre);
  color: var(--noir);
  cursor: pointer;
  white-space: nowrap;
}

.demo-fermer:disabled {
  opacity: 0.5;
  cursor: default;
}

.section {
  max-width: 1180px;
  padding: clamp(64px, 9vw, 128px) var(--marge) 0;
}

h2 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.02;
  margin: 0 0 32px;
}

.colonnes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(28px, 3.5vw, 56px);
}

.colonne::before {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  color: rgb(92, 97, 104);
  margin: 0 0 22px;
}

.colonne-oublie::before {
  content: "░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░";
}

.colonne-garde::before {
  content: "▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓";
}

.colonne-plus::before {
  content: "████████████████████████████████████████████████████████████████████████████████";
  color: rgb(150, 155, 162);
}

.colonne-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
  margin: 0 0 6px;
}

.colonne-sous {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gris);
  margin: 0 0 26px;
}

.colonne dl {
  margin: 0;
}

.colonne dt {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 4px;
}

.colonne dd {
  margin: 0 0 22px;
  color: var(--doux);
  font-size: 16px;
  line-height: 1.55;
}

.journal-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 60rem;
}

.journal-liste li {
  display: grid;
  grid-template-columns: 7em 9em minmax(0, 1fr);
  gap: 0 20px;
  padding: 12px 0;
  border-top: 1px dashed var(--filet);
}

.journal-liste li:last-child {
  border-bottom: 1px dashed var(--filet);
}

.journal-version {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--encre);
}

.journal-date {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--gris);
}

.journal-notes {
  color: var(--doux);
  font-size: 16px;
}

.journal-liste li:first-child .journal-version::after {
  content: "  en ligne";
  white-space: pre;
  font-size: 12px;
  color: var(--gris);
}

.installer-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.cadre {
  position: relative;
  border: 1px solid var(--filet);
  padding: 26px 22px 6px;
  margin-top: 10px;
}

.cadre-titre {
  position: absolute;
  top: -11px;
  left: 14px;
  margin: 0;
  padding: 0 8px;
  background: var(--noir);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--encre);
}

.cadre-titre::before {
  content: "┤ ";
  color: var(--filet);
}

.cadre-titre::after {
  content: " ├";
  color: var(--filet);
}

.cadre-texte {
  color: var(--doux);
  font-size: 16px;
  margin: 0 0 14px;
}

.fin {
  padding-top: clamp(96px, 13vw, 180px);
}

.fin-lien {
  display: inline-block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(52px, 9vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.fin-lien[aria-disabled="true"] {
  color: var(--gris);
  text-decoration: none;
}

.fin-meta {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--gris);
  margin: 36px 0 0;
}

.etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
  max-width: 46rem;
}

.etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  gap: 0 10px;
  margin: 0 0 22px;
  color: var(--doux);
}

.etapes li::before {
  content: "[" counter(etape) "]";
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.8;
  color: var(--encre);
}

.etapes strong {
  color: var(--encre);
}

.texte-section {
  color: var(--doux);
  max-width: 40em;
  margin: 0 0 16px;
}

.code {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--encre);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--filet);
  padding: 14px 16px;
  margin: 0 0 22px;
  max-width: 46rem;
  overflow-x: auto;
}

.empreinte {
  white-space: pre-wrap;
  word-break: break-all;
}

.pied {
  padding: clamp(80px, 11vw, 150px) var(--marge) 44px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--gris);
}

.pied p {
  margin: 0;
}

@media (max-width: 1100px) {
  .reglages {
    grid-template-columns: 158px minmax(0, 1fr);
  }
  .reg-panneau {
    padding: 20px 18px 30px;
  }
}

@media (max-width: 900px) {
  .hero-bas {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-bloc {
    margin-top: 8px;
  }
  .colonnes,
  .installer-grille {
    grid-template-columns: minmax(0, 1fr);
  }
  .colonne {
    margin-bottom: 18px;
  }
}

@media (max-width: 700px) {
  .app {
    height: 600px;
  }
  .app-corps {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-rail,
  .app-fenetre,
  .app-logo,
  .btn-ico[data-cle="precedent"],
  .btn-ico[data-cle="suivant"],
  .btn-ico[data-cle="recharger"],
  .btn-ico[data-cle="extensions"] {
    display: none;
  }
  .reglages {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .reg-nav {
    border-right: 0;
    border-bottom: 1px solid var(--a-trait);
    padding: 8px;
    overflow-x: auto;
  }
  .reg-titre,
  .reg-version {
    display: none;
  }
  .reg-liens {
    flex-direction: row;
  }
  .reg-lien {
    width: auto;
  }
  .themes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rangee {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 17px;
  }
  .champ {
    font-size: 8px;
    line-height: 9px;
  }
  .zone-marque {
    height: 44vw;
  }
  .demo-barre {
    flex-wrap: wrap;
  }
  .journal-liste li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .journal-notes {
    grid-column: 1 / -1;
  }
}

.notes {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--doux);
  margin: 8px 0 0;
  max-width: 34em;
}

.demo-sans-js {
  margin: 0;
  padding: 40px 24px;
  font-family: var(--mono);
  color: var(--gris);
}

.introuvable {
  padding: clamp(64px, 12vw, 160px) var(--marge) 96px;
  max-width: 46rem;
}

.introuvable-ascii {
  font-family: var(--mono);
  font-size: clamp(16px, 2.6vw, 26px);
  line-height: 1.05;
  color: rgb(120, 125, 132);
  margin: 0 0 40px;
}

.tuile {
  position: relative;
  overflow: hidden;
}

.tuile-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tuile.avec-image {
  background: transparent;
}

.tuile.avec-image .tuile-lettre {
  visibility: hidden;
}