/* Charte « Observatoire du roller hockey » v1.0.0
   Charte propre au projet, inspirée des tons de la fédération (charbon, bleu, indigo)
   sans reprendre son logo ni ses éléments déposés. Plateforme non officielle.
   Partagée par le dashboard, la vue joueurs et le rapport PDF. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Fonds et encres */
  --orh-nuit: #14163A;          /* indigo de nuit, bandeaux et titres */
  --orh-nuit-2: #22265C;        /* dégradé des bandeaux */
  --orh-glace: #F4F6FA;         /* fond de page, blanc de piste */
  --orh-carte: #FFFFFF;         /* cartes et panneaux */
  --orh-ligne: #DCE1EB;         /* filets et grilles */
  --orh-encre: #161A2E;         /* texte principal */
  --orh-encre-2: #4D5570;       /* texte secondaire */
  --orh-encre-3: #7A8199;       /* notes, légendes */

  /* Marque */
  --orh-bleu: #1F5FAE;          /* couleur de donnée principale et liens */
  --orh-orange: #E2621B;        /* accent : mise en avant, sélection, sanction */
  --orh-teal: #13907E;
  --orh-violet: #8A4FC4;
  --orh-bleu-clair: #DCE8F7;    /* fonds de mise en avant */
  --orh-orange-clair: #FCE6D9;

  /* Palette catégorielle, ordre fixe, validée (contrôles CVD et contraste) */
  --cat-1: var(--orh-bleu);
  --cat-2: var(--orh-orange);
  --cat-3: var(--orh-teal);
  --cat-4: var(--orh-violet);

  --rayon: 10px;
  --ombre: 0 1px 2px rgba(20,22,58,.06), 0 6px 20px rgba(20,22,58,.07);
  --police-titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --police-texte: 'Inter', 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --orh-glace: #0E1024; --orh-carte: #171A36; --orh-ligne: #2B3058;
    --orh-encre: #EEF0F8; --orh-encre-2: #B5BAD2; --orh-encre-3: #8C92B0;
    --orh-bleu: #3F82D6; --orh-orange: #D9631F; --orh-teal: #1C9E8A; --orh-violet: #9A6AD6;
    --orh-bleu-clair: #1E2E52; --orh-orange-clair: #3A2418;
    --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --orh-glace: #0E1024; --orh-carte: #171A36; --orh-ligne: #2B3058;
  --orh-encre: #EEF0F8; --orh-encre-2: #B5BAD2; --orh-encre-3: #8C92B0;
  --orh-bleu: #3F82D6; --orh-orange: #D9631F; --orh-teal: #1C9E8A; --orh-violet: #9A6AD6;
  --orh-bleu-clair: #1E2E52; --orh-orange-clair: #3A2418;
  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* Bandeau : dégradé de nuit, grain léger et tracé de piste (rond d'engagement) pour la matière */
.orh-bandeau {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(63,130,214,.45), transparent 55%),
    radial-gradient(80% 120% at 0% 120%, rgba(226,98,27,.22), transparent 60%),
    linear-gradient(135deg, var(--orh-nuit) 0%, var(--orh-nuit-2) 100%);
}
.orh-bandeau::before { /* rond d'engagement et ligne médiane en filigrane */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background:
    radial-gradient(circle at 88% 50%, transparent 0 86px, #fff 86px 88px, transparent 88px),
    radial-gradient(circle at 88% 50%, #fff 0 6px, transparent 6px),
    linear-gradient(90deg, transparent calc(88% - 1px), #fff calc(88% - 1px) calc(88% + 1px), transparent calc(88% + 1px));
}
.orh-bandeau::after { /* grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orh-bandeau > * { position: relative; z-index: 1; }

.orh-surtitre { font: 600 12px/1.2 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.orh-titre { font: 800 40px/1 var(--police-titre); letter-spacing: .01em; text-transform: uppercase; margin: 6px 0 4px; }
.orh-titre em { font-style: normal; color: #FFB48A; }
.orh-h2 { font: 700 22px/1.15 var(--police-titre); text-transform: uppercase; letter-spacing: .02em; color: var(--orh-encre); margin: 0 0 8px; }
.orh-h2::before { content: ""; display: inline-block; width: 4px; height: .9em; background: var(--orh-orange); border-radius: 2px; margin-right: 8px; vertical-align: -2px; }

.orh-badge-version { display: inline-block; font: 600 11px/1 var(--police-texte); padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.orh-mention { font: 500 11px/1.4 var(--police-texte); color: var(--orh-encre-3); }

.orh-carte { background: var(--orh-carte); border: 1px solid var(--orh-ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.orh-chiffre { font: 800 34px/1 var(--police-titre); color: var(--orh-encre); font-variant-numeric: tabular-nums; }
.orh-chiffre-label { font: 500 12px/1.3 var(--police-texte); color: var(--orh-encre-2); }