/* VSF Football — variables CSS v5 (2026-11-11) — valeurs identiques à la V4 (charte V5, décisions A1 à A14) */
/* Polices : chargées localement par css/fonts.css (site autonome, sans Google Fonts) */

:root {
  /* Rouges */
  --vsf-red-vif: #F80203;      /* graphique uniquement */
  --vsf-red-action: #C00000;   /* interaction, texte */
  --vsf-red-medium: #D30600;
  --vsf-red-terra: #B23A28;
  --vsf-red-deep: #631214;

  /* Neutres */
  --vsf-ink: #0E0E0E;
  --vsf-ink-soft: #404040;
  --vsf-gray: #777777;
  --vsf-gray-line: #E0E0E0;
  --vsf-gray-bg: #F5F5F5;
  --vsf-white: #FFFFFF;

  /* États */
  --vsf-success: #1B7A4B; --vsf-success-bg: #EAF3ED;
  --vsf-warning: #8A5A00; --vsf-warning-bg: #FBF3E0;
  --vsf-error: #7A1720;   --vsf-error-bg: #F7EAEA;
  --vsf-info: #1F4E6B;    --vsf-info-bg: #EAF1F6;

  /* Dégradés */
  --vsf-grad-cover: linear-gradient(135deg, #631214 0%, #D30600 100%);
  --vsf-grad-editorial: linear-gradient(135deg, #8E2A1C 0%, #B23A28 100%);
  --vsf-grad-overlay: linear-gradient(180deg, rgba(14,14,14,0) 0%, rgba(14,14,14,.85) 100%);

  /* Fond texturé (charte §5.5) — valeurs mesurées */
  --vsf-fond-centre: #E31E24; --vsf-fond-bord: #AF1319; --vsf-fond-coin: #91060C;
  --vsf-grad-fond: radial-gradient(ellipse at center, #E31E24 0%, #AF1319 70%, #91060C 100%);

  /* Typographie */
  --vsf-font-display: 'Anton', Impact, Haettenschweiler, sans-serif;
  --vsf-font-body: 'Barlow', Arial, sans-serif;
  --vsf-font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --vsf-font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Espacements (base 8) */
  --vsf-space-1: 4px;  --vsf-space-2: 8px;  --vsf-space-3: 16px; --vsf-space-4: 24px;
  --vsf-space-5: 32px; --vsf-space-6: 48px; --vsf-space-7: 64px; --vsf-space-8: 96px;

  /* Rayons */
  --vsf-radius-sm: 4px; --vsf-radius-md: 8px; --vsf-radius-pill: 999px;

  /* Ombres */
  --vsf-shadow-1: 0 1px 3px rgba(14,14,14,.10);
  --vsf-shadow-2: 0 4px 12px rgba(14,14,14,.10);
  --vsf-shadow-3: 0 8px 20px rgba(14,14,14,.14);
  --vsf-shadow-4: 0 16px 40px rgba(14,14,14,.20);

  /* Mouvement */
  --vsf-dur-fast: 150ms; --vsf-dur-normal: 200ms; --vsf-dur-slow: 300ms;
  --vsf-ease: cubic-bezier(.4,0,.2,1);

  /* Sémantique clair */
  --vsf-bg: #FFFFFF;
  --vsf-surface: #FFFFFF;
  --vsf-text: #0E0E0E;
  --vsf-text-soft: #404040;
  --vsf-line: #E0E0E0;
  --vsf-accent: #C00000;
}

[data-theme="dark"] {
  --vsf-bg: #0E0E0E;
  --vsf-surface: #1A1A1A;
  --vsf-raised: #242424;
  --vsf-text: #F2F2F2;
  --vsf-text-soft: #A8A8A8;
  --vsf-line: #333333;
  --vsf-accent: #FF6B5B;
}

/* Motif signature : trame chevron */
.vsf-chevron {
  --vsf-dot: rgba(255,255,255,.9);
  --vsf-dot-size: 14px;
  background-image: radial-gradient(circle, var(--vsf-dot) 1.6px, transparent 1.7px);
  background-size: var(--vsf-dot-size) var(--vsf-dot-size);
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 50% 58%, 0 100%, 0 42%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.15) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.15) 100%);
  pointer-events: none;
}

/* Variante applicative VSF PHARM : trame croix de pharmacie (charte §5.1b)
   Côté = 21 pas de points (3 blocs de 7) ; bras égaux = 1/3 du côté. */
.vsf-croix {
  --vsf-dot: rgba(255,255,255,.9);   /* rouge vif #F80203 sur fond blanc */
  --vsf-dot-size: 14px;
  width: calc(var(--vsf-dot-size) * 21);
  height: calc(var(--vsf-dot-size) * 21);
  background-image: radial-gradient(circle, var(--vsf-dot) 1.6px, transparent 1.7px);
  background-size: var(--vsf-dot-size) var(--vsf-dot-size);
  clip-path: polygon(33.333% 0, 66.667% 0, 66.667% 33.333%, 100% 33.333%, 100% 66.667%, 66.667% 66.667%,
                     66.667% 100%, 33.333% 100%, 33.333% 66.667%, 0 66.667%, 0 33.333%, 33.333% 33.333%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.15) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.15) 100%);
  pointer-events: none;
}

/* Fond texturé rouge : définir --vsf-fond-url: url(assets/fonds/fond-strie-rouge-16x9.png) ; sans image, le dégradé de secours s'applique */
.vsf-fond { background: var(--vsf-fond-url, none) center / cover no-repeat, var(--vsf-grad-fond); color: #fff; }

/* Géométrie hexagonale */
.vsf-hex { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.vsf-cut { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }

/* Focus — ne jamais supprimer sans remplacement */
.vsf-focusable:focus-visible { outline: 3px solid var(--vsf-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}