@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+2192, U+2116; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/Satoshi-400.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+2192, U+2116; }
:root {
  color-scheme: dark;
  --vide: #030304;
  --encre: #edebe7;
  --encre-2: rgba(237, 235, 231, .68);
  --encre-3: rgba(237, 235, 231, .52);
  --trait: rgba(237, 235, 231, .12);
  --trait-2: rgba(237, 235, 231, .24);
  --signal: #ff3b2e;
  --plaque: #0b0b0e;
  --plaque-2: #0b0b0e;
  --ombre-dialog: 0 40px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(237, 235, 231, .08);
  --display: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --serif: "EB Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --t-nom: clamp(64px, 12.4vw, 196px);
  --t-1: clamp(40px, 5vw, 72px);
  --t-2: clamp(22px, 2.1vw, 30px);
  --t-3: 19px;
  --t-4: 16px;
  --t-5: 14px;
  --t-date: 13px;
  --marge: clamp(16px, 3.4vw, 48px);
  --max: 1440px;
  --entete-h: 64px;
  --sur-haut: env(safe-area-inset-top, 0px);
  --sur-bas: env(safe-area-inset-bottom, 0px);
  --sur-g: env(safe-area-inset-left, 0px);
  --sur-d: env(safe-area-inset-right, 0px);
  --ease: cubic-bezier(.2, .7, 0, 1);
  --encre-4: rgba(237, 235, 231, .16);
  --signal-lavis: rgba(255, 59, 46, .08);
  --signal-trait: rgba(255, 59, 46, .7);
  --plaque-1: #16161a;
  --plaque-3: #07070a;
  --voile-dialog: rgba(3, 3, 4, .6);
  --ombre-pan: 0 70px 120px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(237, 235, 231, .07);
  --ombre-pan-survol: 0 70px 120px -30px rgba(0, 0, 0, .95), 0 0 0 1px var(--signal-trait);
  --ombre-cadre: 0 100px 160px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(237, 235, 231, .08);
  --reflet: linear-gradient(118deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .28) 100%);
  --ecl-x: 72vw;
  --ecl-y: 46vh;
  --ecl-r: 32vh;
}
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  :root { --ecl-x: 66vw; --ecl-y: 23vh; --ecl-r: 25vw; --ecl-r: min(25vw, 8svh); }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  :root { --entete-h: 56px; --t-3: 18px; --t-4: 16px; --t-5: 14px; }
}