/* ============================================================
   MARQUE SHIROI : le seul fichier à modifier quand la DA évolue.
   Couleurs, typos et emblème viennent de la planche DA v1
   (identite/planche-da-shiroi.html). Le reste du site ne lit
   que ces variables.

   Logos : SVG vectorisés du fil DA, copiés depuis
   identite/logo-shiroi/svg/ (version encre). Ils sont utilisés en
   masque CSS : ils prennent la couleur du texte (color: ...), donc une
   seule version suffit pour tous les fonds.
     marque/fleur.svg       emblème seul          (.fleur)
     marque/logo.svg        horizontal complet    (.logo)
     marque/logo-court.svg  fleur + shiroi        (.logo.court)
   Pour mettre à jour : recopier les SVG encre sous ces noms.

   Animation du logo (ident 4 s) : marque/ident-anim.js, copie de
   identite/logo-shiroi/source/anim.js. Le site la pilote via
   assets/ident.js.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Palette validée */
  --blanc: #FAFAF7;        /* Blanc papier : fond, respiration */
  --encre: #141416;        /* Encre : texte, fonds sombres */
  --orange: #FF5A1F;       /* Orange Shiroi : aplats, fleur, grands titres */
  --brume: #E4E3DE;        /* Brume : cartes, séparateurs */
  --orange-texte: #C2410C; /* Orange texte : liens et petit texte sur blanc */
  --gris: #5E5E63;         /* texte secondaire */
  --filet: #D9D8D2;        /* lignes fines */
  --carte: #FFFFFF;
  --sur-orange: #FFFFFF;

  /* Typographies validées (licence OFL) */
  --f-titre: "Syne", "Archivo Black", system-ui, sans-serif;
  --f-texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Logos vectoriels */
  --fleur: url("marque/fleur.svg");
  --logo: url("marque/logo.svg");             /* ratio 1651 / 364 */
  --logo-court: url("marque/logo-court.svg"); /* ratio 1267 / 364 */

  --rayon: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blanc: #121214; --encre: #F3F2EE; --orange: #FF6A33; --brume: #232327;
    --orange-texte: #FF8A5C; --gris: #A3A3A8; --filet: #2E2E33; --carte: #1A1A1D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --blanc: #121214; --encre: #F3F2EE; --orange: #FF6A33; --brume: #232327;
  --orange-texte: #FF8A5C; --gris: #A3A3A8; --filet: #2E2E33; --carte: #1A1A1D;
  color-scheme: dark;
}

/* Emblème : prend la couleur courante (color: ...) */
.fleur {
  display: inline-block;
  aspect-ratio: 1;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--fleur) center / contain no-repeat;
          mask: var(--fleur) center / contain no-repeat;
}

/* Logotype vectoriel. La hauteur se règle avec height ; le texte reste
   lisible par les lecteurs d'écran mais n'est pas affiché. */
.logo {
  position: relative;
  display: inline-block;
  height: 1em;
  aspect-ratio: 1651 / 364;
  background: currentColor;
  color: inherit;
  -webkit-mask: var(--logo) left center / contain no-repeat;
          mask: var(--logo) left center / contain no-repeat;
  flex: none;
}
.logo.court {
  aspect-ratio: 1267 / 364;
  -webkit-mask-image: var(--logo-court);
          mask-image: var(--logo-court);
}
.logo > * {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}