*,
:before,
:after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: #080807;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font:
    400 17px/1.65 Roboto,
    Arial,
    sans-serif;
  /* Transparent : le décor est le calque fixe ci-dessous (la couleur de fond est celle de html) */
  background: transparent;
}
/* Le décor du site : un calque fixé à l'écran, composé une fois par le navigateur. Un fond « background-attachment:
   fixed » le ferait repeindre à chaque image du défilement (micro-saccades). Les pages laissent leur fond transparent
   pour le laisser voir. Le même sur toutes les pages : le voile, l'ombre des bords, le métal rouillé. Une image changée
   prend un nom neuf (les images sont gardées 30 jours par le navigateur). */
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(#0b0a0985, #09090894),
    linear-gradient(90deg, #050504a8, transparent 25%, transparent 75%, #050504a8),
    url("/theme/images/site-background-rouille.webp") center top / cover no-repeat;
  transform: translateZ(0);
}
/* Pas de mot seul sur la dernière ligne d'un paragraphe */
p,
li {
  text-wrap: pretty;
}
/* La fin du rang Lèche-Ruche (layout/rank-ending.js), en tête de Ma ruche et de Mes dons */
.rank-ending {
  margin-bottom: 18px;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
.container {
  width: min(calc(100% - 64px), var(--max));
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 900px) {
  .container {
    width: min(calc(100% - 36px), var(--max));
  }
}

@media (max-width: 620px) {
  body {
    font-size: 15px;
  }
  .container {
    width: calc(100% - 28px);
  }
}

/* Page masquée le temps de charger les traductions (main.js retire .i18n-pending).
   Si le script échoue, l'animation la rend visible au bout de 2 s.
   On joue sur l'opacité du seul <body> : une propriété héritée (visibility) resterait figée
   sur les blocs qui ont une transition « all ». */
.i18n-pending body {
  opacity: 0;
  animation: i18n-reveal 0s 2s forwards;
}

@keyframes i18n-reveal {
  to {
    opacity: 1;
  }
}

/* Un lien sans destination (ex. invitation Discord absente du profil) : visible, grisé, inerte. */
.is-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
  filter: grayscale(0.6);
}

/* Navigation au clavier (A3) : on voit toujours où l'on est en tabulant (menu, boutons, cartes, liens).
   Seulement au clavier : un clic de souris ne dessine pas de contour. */
:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 3px;
}

/* Les barres de défilement, partout : fines, curseur doré sur fond transparent (listes, menus, panneaux, page) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gold-rgb), 0.45) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 0;
  background: rgba(var(--gold-rgb), 0.45) padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--gold-rgb), 0.7);
}

/* La liste ouverte d'un menu déroulant : sur fond sombre, comme le site (sans quoi le navigateur la peint en blanc,
   et le texte crème hérité y devient illisible) */
select option,
select optgroup {
  background-color: #1d1914;
  color: #e8dcc6;
}
/* Le titre d'un groupe d'options : en miel, pour le distinguer des choix */
select optgroup {
  color: var(--gold);
  font-style: normal;
}

/* Le grain de la ruche, par-dessus toute la page sauf les en-têtes (le menu, le paysage météo : au-dessus de lui) : une texture de bruit à nous
   (packages/theme/images/grain.webp, raccordable), éclaircie en « color-dodge » ; fixe, elle ne capte aucun clic et
   disparaît à l'impression. Son intensité : l'opacité. Posée sur son propre calque (translateZ) : le mélange est fait par la
   carte graphique ; sans lui, chaque survol refaisait le mélange de tout l'écran (blocages de 100 à 230 ms, 6 oct.). */
body::after {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: url("/theme/images/grain.webp") 0 0 / 256px;
  opacity: 0.135;
  mix-blend-mode: color-dodge;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
  content: "";
}
@media print {
  body::after {
    display: none;
  }
}

/* Les préférences de l'appareil (Paramètres → Affichage et accessibilité, core/prefs.js), posées sur <html> */
/* Moins d'animations, choisi sur le site : comme le réglage du système */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html[data-motion="reduce"] .reveal {
  opacity: 1;
  transform: none;
}
/* Le décor qui bouge coupé : braises, lueurs, abeilles */
html:is([data-ambient="off"], [data-motion="reduce"]) :is(.bee-flight, .hero-bee, .section-wander-bee),
html:is([data-ambient="off"], [data-motion="reduce"]) .ambient-glow::before {
  display: none !important;
}
/* Le texte plus grand (ce qui est écrit en rem suit) */
html[data-text="large"] {
  font-size: 112.5%;
}
html[data-text="larger"] {
  font-size: 125%;
}
/* Le contraste renforcé : les textes secondaires et les filets plus clairs */
html[data-contrast="high"] {
  --text: #ece4d4;
  --text-soft: #cfc4b2;
  --muted: #d2c6b2;
  --cream: #efe6d4;
  --line-gold: rgba(var(--gold-rgb), 0.55);
  /* Les jetons du 20 oct. suivent (26 oct.) : les transparences crème avec le crème du mode, les états un cran plus clairs */
  --cream-rgb: 239, 230, 212;
  --state-ok: #b4e09c;
  --state-wait: #f0b85a;
  --state-target: #f09682;
  --value-strong: #ffd27a;
}
/* Le contraste atténué (un écran ou un gamma trop clair) : les crèmes et l'or adoucis, les images un peu assombries */
html[data-contrast="low"] {
  --parchment: #cbbfa5;
  --cream: #bdb29d;
  --text: #b7ad9e;
  --text-soft: #8c8274;
  --gold: #b9893f;
  /* Les jetons du 20 oct. suivent (26 oct.) : les transparences avec les teintes adoucies, les états un cran plus doux */
  --parchment-rgb: 203, 191, 165;
  --cream-rgb: 189, 178, 157;
  --gold-rgb: 185, 137, 63;
  --state-ok: #8fb57a;
  --state-wait: #c49040;
  --state-target: #c4705f;
  --value-strong: #d0a452;
}
html[data-contrast="low"] :is(img, .page-hero__landscape) {
  filter: brightness(0.82);
}
/* Un <small> sans taille à lui (la taille par défaut du navigateur : un cran sous le texte autour) ne passe jamais sous
   le minimum du site, 12,8 px (contrôle final, 10 oct.) */
small {
  font-size: max(0.8rem, 0.85em);
}

/* D'une page à l'autre, un fondu (Chrome, Edge, Safari récents ; ailleurs, rien ne change). Le paysage météo de
   l'en-tête est repris tel quel par la page suivante (layout/sky.js) : le fondu passe d'un même ciel au même ciel.
   Rien avec les animations réduites (de l'appareil, ou de Paramètres). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
}
html[data-motion="reduce"]::view-transition-group(*),
html[data-motion="reduce"]::view-transition-old(*),
html[data-motion="reduce"]::view-transition-new(*) {
  animation: none !important;
}