/* RingFollow — shared design tokens. Loaded FIRST by index.html, admin.html, breeder.html. */

@font-face {
  font-family: 'Archivo Black';
  src: url('/fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --forest: #1e2d24;
  --moss: #4c5a45;
  --mist: #eef1e8;
  --bone: #fbfaf6;
  --blaze: #ff5f00;
  /* blaze-dark/ok/danger servent de texte sur les fonds pastel (#ffe9d9,
     #e0f0e2, #f7e0e0) en petit gras : assombris pour tenir AA 4,5:1 là
     (les anciens #d94e00/#2f8a3c/#c22f2f plafonnaient à 3,5–4,4:1). */
  --blaze-dark: #b23e00;
  --line: #d8ddd0;
  --ok: #256e31;
  --danger: #b02a2a;
  --display: 'Archivo Black', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Listes déroulantes — une seule règle pour les trois surfaces.
   `appearance: auto` laissait le rendu natif du navigateur : chevron système,
   hauteur variable d'un OS à l'autre, et un gris qui jure avec le reste. Les
   règles existantes (.filters select, .site-form select…) posaient bordure et
   fond mais jamais l'apparence, et ne couvraient pas tous les selects.
   Le chevron est une donnée SVG inline : la CSP interdit une image tierce. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234c5a45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.72rem;
  padding-right: 2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest);
  font: inherit;
  /* 44 px : la cible tactile minimale, sur mobile comme au bureau */
  min-height: 44px;
  cursor: pointer;
}

select:hover { border-color: var(--moss); }
select:disabled { background-color: var(--mist); color: var(--moss); cursor: not-allowed; }
/* Le menu déroulant lui-même reste rendu par l'OS : on ne peut que lui donner
   des couleurs lisibles, pas une mise en page. */
select option { color: var(--forest); background: #fff; }