/* Kumo · base : polices auto-hébergées, remise à zéro, typographie, sections et utilitaires. */

/* Polices (latin + latin-ext uniquement, plus une micro-police pour 雲 et 一 二 三 四 五) */
@font-face {
  font-family: "Zen Antique";
  src: url("../fonts/zen-antique-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Zen Antique";
  src: url("../fonts/zen-antique-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Zen Antique";
  src: url("../fonts/zen-antique-kanji.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00, U+4E09, U+4E8C, U+4E94, U+56DB, U+96F2;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Polices de secours ajustées sur les métriques des Zen (évite le saut de mise en page au chargement) */
@font-face {
  font-family: "Zen Antique Secours";
  src: local("Times New Roman"), local("TimesNewRomanPSMT");
  size-adjust: 120.58%;
  ascent-override: 96.2%;
  descent-override: 23.88%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Zen Kaku Secours";
  src: local("Arial"), local("ArialMT");
  size-adjust: 98.7%;
  ascent-override: 117.53%;
  descent-override: 29.18%;
  line-gap-override: 0%;
}

/* Remise à zéro ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--noir);
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--noir);
  color: var(--texte-nuit);
  font-family: var(--font-texte);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* :where() : spécificité nulle, les composants gardent la main sur leurs marges */
:where(ul, ol)[role="list"] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-titre);
  font-weight: 400;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

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

/* Focus : contour simple pour les liens dans le texte ; les boutons ont leur anneau animé */
:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Mise en page ---------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--night {
  background: var(--noir);
  color: var(--texte-nuit);
}

.section--paper {
  background-color: var(--washi);
  background-image: url("../assets/motifs/washi.webp");
  background-size: 240px;
  color: var(--texte-papier);
  color-scheme: light;
}

/* Utilitaires ----------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--z-intro) + 1);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--washi);
  color: var(--noir);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.accent {
  color: var(--rose);
  font-style: normal;
}

/* Le texte reste masqué le temps d'appliquer une autre langue que le français (1 s max, voir boot.js) */
.i18n-pending [data-i18n] {
  visibility: hidden;
}