/*
Theme Name:   Rugby B.W.Est — Astra Child
Theme URI:    https://rugbybwest.be
Description:  Thème enfant Astra pour Rugby Brabant Wallon Est.
              Design system fidèle au fichier source : Venom maroon · Midnight navy · Post orange.
              Polices : Monolito Sans / Barlow Condensed (titres) + Outfit (corps).
Author:       Rugby B.W.Est
Version:      1.1.0
Template:     astra
Text Domain:  rugby-bwest-astra-child
*/

/* ============================================================
   0. IMPORT THÈME PARENT
   ============================================================ */
@import url("../astra/style.css");


/* ============================================================
   1. POLICES — Google Fonts (substituts Monolito Sans + Outfit)
      Barlow Condensed est le substitut le plus fidèle à
      Monolito Sans (condensé, athlétique, bold).
      Si vous avez le .otf Monolito Sans, uploadez-le dans /fonts/
      et décommentez le @font-face ci-dessous.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap');

/*
@font-face {
  font-family: "Monolito Sans";
  src: url("fonts/MonolitoSans-VF.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/


/* ============================================================
   2. DESIGN TOKENS — fidèles au fichier source
   ============================================================ */
:root {

  /* ---- Couleurs de marque (blason) ---- */
  --bw-venom:    #5d0733;   /* maroon foncé  — corps du frelon, primaire   */
  --bw-midnight: #211d70;   /* navy/indigo   — blason & lettrage            */
  --bw-post:     #f8971d;   /* orange        — poteaux de rugby, accent     */
  --bw-black:    #0a0a0c;
  --bw-white:    #ffffff;

  /* ---- Gamme maroon ---- */
  --venom-50:  #fbeef4;
  --venom-100: #f4d3e2;
  --venom-200: #e2a0bf;
  --venom-300: #cc6d97;
  --venom-400: #a83e6c;
  --venom-500: #5d0733;
  --venom-600: #4d0529;
  --venom-700: #3c041f;
  --venom-800: #2a0316;
  --venom-900: #19020d;

  /* ---- Gamme navy ---- */
  --midnight-50:  #ecedf6;
  --midnight-100: #d2d3ea;
  --midnight-200: #a4a6d3;
  --midnight-300: #7174ba;
  --midnight-400: #45489b;
  --midnight-500: #211d70;
  --midnight-600: #1b1860;
  --midnight-700: #14124a;
  --midnight-800: #0e0d33;
  --midnight-900: #08071f;

  /* ---- Gamme orange ---- */
  --post-50:  #fef3e3;
  --post-100: #fde0b9;
  --post-200: #fcc77f;
  --post-300: #faae46;
  --post-400: #f8971d;
  --post-500: #e07f08;
  --post-600: #b96706;
  --post-700: #8f4f06;
  --post-800: #653807;
  --post-900: #3f2305;

  /* ---- Gris neutres (teinte navy) ---- */
  --gray-0:   #ffffff;
  --gray-25:  #fafafc;
  --gray-50:  #f4f4f8;
  --gray-100: #e9e9f1;
  --gray-200: #d6d6e2;
  --gray-300: #b6b6c8;
  --gray-400: #8a8aa2;
  --gray-500: #686883;
  --gray-600: #4c4c64;
  --gray-700: #353548;
  --gray-800: #21212f;
  --gray-900: #121219;

  /* ---- Statuts match ---- */
  --status-win:  #1f8a4c;
  --status-draw: #f8971d;
  --status-loss: #c0392b;
  --status-info: #211d70;

  /* ---- Aliases sémantiques ---- */
  --color-bg:            var(--gray-25);
  --color-bg-pitch:      var(--midnight-700);
  --surface-card:        var(--bw-white);
  --surface-raised:      var(--bw-white);
  --surface-sunken:      var(--gray-50);
  --surface-inverse:     var(--midnight-600);

  --text-strong:         var(--midnight-700);
  --text-body:           var(--gray-700);
  --text-muted:          var(--gray-500);
  --text-on-dark:        var(--gray-50);
  --text-on-dark-muted:  var(--midnight-200);
  --text-brand:          var(--bw-venom);
  --text-link:           var(--bw-venom);

  --border-subtle:       var(--gray-200);
  --border-strong:       var(--midnight-500);
  --border-focus:        var(--post-400);

  --accent:              var(--bw-post);
  --accent-ink:          var(--bw-black);
  --primary:             var(--bw-venom);
  --primary-ink:         var(--bw-white);
  --secondary:           var(--bw-midnight);
  --secondary-ink:       var(--bw-white);

  /* ---- Typographie ---- */
  /* IMPORTANT: font-weight 400 (regular) pour les display — le style vient
     de la police condensée elle-même, pas du gras.
     Source : Hero h1 { font-weight: 400 } dans le design original */
  --font-display: "Barlow Condensed", "Arial Black", system-ui, sans-serif;
  --font-body:    "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Poids */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* Échelle typographique complète */
  --text-3xs: 0.6875rem; /* 11px — eyebrow / overline  */
  --text-2xs: 0.75rem;   /* 12px — captions, meta       */
  --text-xs:  0.8125rem; /* 13px                        */
  --text-sm:  0.875rem;  /* 14px — UI secondaire        */
  --text-md:  1rem;      /* 16px — corps de base        */
  --text-lg:  1.125rem;  /* 18px — corps lead           */
  --text-xl:  1.375rem;  /* 22px — sous-titres          */
  --text-2xl: 1.75rem;   /* 28px                        */
  --text-3xl: 2.25rem;   /* 36px                        */
  --text-4xl: 3rem;      /* 48px                        */
  --text-5xl: 4rem;      /* 64px — section heroes       */
  --text-6xl: 5.5rem;    /* 88px — page heroes          */
  --text-7xl: 7.5rem;    /* 120px — full-bleed hero     */

  /* Line-heights */
  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter-spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;
  --tracking-caps:   0.06em;

  /* Rôles typographiques composites */
  --font-eyebrow:   var(--weight-bold) var(--text-2xs)/1.1 var(--font-body);
  --font-headline:  var(--weight-regular) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --font-title:     var(--weight-regular) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --font-body-base: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-body);

  /* ---- Espacements (base 4px) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* ---- Rayons — style blason : coins nets et anguleux ---- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  /* ---- Bordures ---- */
  --border-hair: 1px;
  --border-base: 1.5px;
  --border-bold: 2.5px;

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 900px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  --gutter:       var(--space-5);

  /* ---- Z-index ---- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1500;

  /* ---- Ombres (teinte navy, jamais noir pur) ---- */
  --shadow-xs:    0 1px 2px rgba(33,29,112,0.08);
  --shadow-sm:    0 1px 3px rgba(33,29,112,0.10), 0 1px 2px rgba(33,29,112,0.06);
  --shadow-md:    0 4px 12px rgba(33,29,112,0.12), 0 2px 4px rgba(33,29,112,0.07);
  --shadow-lg:    0 12px 28px rgba(33,29,112,0.16), 0 4px 8px rgba(33,29,112,0.08);
  --shadow-xl:    0 24px 56px rgba(33,29,112,0.22);
  --shadow-venom: 0 6px 18px rgba(93,7,51,0.30);
  --shadow-post:  0 6px 18px rgba(248,151,29,0.34);

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(248,151,29,0.45);

  /* ---- Transitions ---- */
  --ease-standard: cubic-bezier(0.2,0,0,1);
  --ease-out:      cubic-bezier(0.16,1,0.3,1);
  --ease-spring:   cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* ---- Overlays signatures ---- */
  --tint-venom-overlay:    linear-gradient(180deg,rgba(93,7,51,0.0) 0%,rgba(25,2,13,0.78) 100%);
  --tint-midnight-overlay: linear-gradient(180deg,rgba(20,18,74,0.0) 0%,rgba(8,7,31,0.85) 100%);
}


/* ============================================================
   3. BASE — surcharges Astra
   ============================================================ */
body {
  font-family: var(--font-body) !important;
  font-size:   var(--text-md) !important;
  color:       var(--text-body) !important;
  background:  var(--color-bg) !important;
  line-height: var(--leading-normal) !important;
}

/* Titres display — IMPORTANT: font-weight 400 (regular) !
   Le style "athlétique" vient de la police condensée elle-même.
   Source: Hero h1 { fontWeight: 400 } dans le composant original */
h1, h2, h3, h4 {
  font-family:    var(--font-display) !important;
  font-weight:    400 !important;            /* Regular — fidèle à l'original */
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  line-height:    var(--leading-tight) !important;
  color:          var(--text-strong) !important;
}

/* H5/H6 restent en Outfit (corps) */
h5, h6 {
  font-family:    var(--font-body) !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wider) !important;
  color:          var(--text-strong) !important;
}

a {
  color:      var(--text-link) !important;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--venom-600) !important; }

*:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}


/* ============================================================
   4. HEADER — translucide navy (effet verre — fidèle à l'original)
      Source : SiteHeader { background: "rgba(20,18,74,0.82)",
               backdropFilter: "blur(10px)" }
   ============================================================ */
.site-header,
.main-header-bar {
  background:     rgba(20,18,74,0.82) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom:  1px solid rgba(255,255,255,0.10) !important;
  box-shadow:     var(--shadow-md) !important;
  position:       sticky !important;
  top:            0 !important;
  z-index:        var(--z-sticky) !important;
}

/* Hauteur du header : 74px comme dans l'original */
.main-header-bar .ast-container,
.main-header-bar > .site-header-inner-wrap {
  height:      74px !important;
  display:     flex !important;
  align-items: center !important;
}

/* Nom du site */
.ast-site-identity .site-title a,
.ast-site-identity .site-title {
  color:          var(--bw-white) !important;
  font-family:    var(--font-display) !important;
  font-weight:    700 !important;
  font-size:      1.25rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.ast-site-identity .site-description {
  color:          rgba(255,255,255,0.55) !important;
  font-size:      var(--text-3xs) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
}

/* Liens navigation */
.main-header-bar .main-navigation ul > li > a,
.ast-header-break-point .main-header-bar .main-navigation ul > li > a {
  color:          rgba(255,255,255,0.66) !important;
  font-family:    var(--font-body) !important;
  font-weight:    700 !important;
  font-size:      13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding:        4px 0 !important;
  position:       relative !important;
  /* Indicateur actif : border-bottom orange (fidèle à l'original) */
  border-bottom:  2.5px solid transparent !important;
  transition:     color var(--dur-fast) var(--ease-standard),
                  border-color var(--dur-fast) var(--ease-standard) !important;
}

.main-header-bar .main-navigation ul > li > a:hover {
  color:         #fff !important;
}

/* Lien actif — border-bottom orange comme dans l'original */
.main-header-bar .main-navigation ul > li.current-menu-item > a,
.main-header-bar .main-navigation ul > li.current-menu-ancestor > a {
  color:         #fff !important;
  border-bottom-color: var(--bw-post) !important;
}

/* Espacement entre liens nav (gap: 28px dans l'original) */
.main-header-bar .main-navigation ul {
  gap: 28px !important;
}

/* Sous-menus */
.main-navigation ul ul {
  background:    rgba(20,18,74,0.96) !important;
  border-top:    2px solid var(--bw-venom) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  box-shadow:    var(--shadow-lg) !important;
  backdrop-filter: blur(8px) !important;
}

.main-navigation ul ul li a {
  color:     rgba(255,255,255,0.75) !important;
  font-size: var(--text-sm) !important;
}

.main-navigation ul ul li a:hover {
  color:      #fff !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Hamburger mobile */
.ast-mobile-menu-trigger span,
.ast-mobile-menu-trigger span::before,
.ast-mobile-menu-trigger span::after,
.ast-mobile-menu-trigger svg {
  background: var(--bw-white) !important;
  color:      var(--bw-white) !important;
}


/* ============================================================
   5. BOUTONS — 5 variantes fidèles à l'original
      primary (maroon) | secondary (navy) | accent (orange) |
      outline | ghost
   ============================================================ */

/* --- Bouton primaire (maroon) — défaut Gutenberg + Astra --- */
.wp-block-button__link,
.ast-btn,
.button,
input[type="submit"],
button[type="submit"] {
  background:     var(--bw-venom) !important;
  color:          var(--bw-white) !important;
  font-family:    var(--font-body) !important;
  font-weight:    var(--weight-semibold) !important;
  font-size:      var(--text-sm) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  border:         2.5px solid transparent !important;
  border-radius:  var(--radius-sm) !important;
  padding:        0 20px !important;
  height:         44px !important;
  display:        inline-flex !important;
  align-items:    center !important;
  box-shadow:     var(--shadow-venom) !important;
  transition:     background var(--dur-base) var(--ease-standard),
                  transform  var(--dur-fast) var(--ease-standard),
                  box-shadow var(--dur-base) var(--ease-standard) !important;
  cursor: pointer !important;
}

.wp-block-button__link:hover,
.ast-btn:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background:  var(--venom-600) !important;
  color:       var(--bw-white) !important;
  box-shadow:  var(--shadow-md) !important;
  transform:   scale(0.97) !important;
}

.wp-block-button__link:active,
input[type="submit"]:active {
  transform: scale(0.95) !important;
}

.wp-block-button__link:focus-visible,
input[type="submit"]:focus-visible {
  outline:    none !important;
  box-shadow: var(--focus-ring) !important;
}

/* --- Bouton secondaire navy — .is-style-secondary --- */
.wp-block-button.is-style-secondary .wp-block-button__link {
  background:  var(--bw-midnight) !important;
  color:       var(--bw-white) !important;
  box-shadow:  var(--shadow-sm) !important;
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background: var(--midnight-600) !important;
}

/* --- Bouton accent orange — .is-style-accent --- */
.wp-block-button.is-style-accent .wp-block-button__link {
  background:  var(--bw-post) !important;
  color:       var(--bw-black) !important;
  box-shadow:  var(--shadow-post) !important;
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
  background: var(--post-500) !important;
  color:      var(--bw-black) !important;
}

/* --- Bouton outline — .is-style-outline --- */
.wp-block-button.is-style-outline .wp-block-button__link {
  background:   transparent !important;
  color:        var(--bw-midnight) !important;
  border-color: var(--bw-midnight) !important;
  box-shadow:   none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--midnight-50) !important;
  transform:  scale(0.97) !important;
}

/* --- Bouton ghost — .is-style-ghost --- */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background:   transparent !important;
  color:        var(--bw-venom) !important;
  border-color: transparent !important;
  box-shadow:   none !important;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--venom-50) !important;
}

/* --- Grand bouton (lg) — .is-style-lg --- */
.wp-block-button.is-style-lg .wp-block-button__link {
  padding:   0 28px !important;
  height:    54px !important;
  font-size: var(--text-md) !important;
}

/* --- Petit bouton (sm) --- */
.wp-block-button.is-style-sm .wp-block-button__link {
  padding:   0 14px !important;
  height:    34px !important;
  font-size: var(--text-2xs) !important;
}


/* ============================================================
   6. HERO — gradient radial + bande diagonale orange
      Fidèle au composant Hero.jsx original :
      radial-gradient + bande clipPath + lignes terrain
   ============================================================ */

/* Bloc Cover Gutenberg utilisé comme Hero */
.wp-block-cover.bwest-hero,
.bwest-hero {
  position:   relative !important;
  background: var(--midnight-700) !important;
  overflow:   hidden !important;
  min-height: 90vh !important;
}

/* Gradient radial de fond (pitch) */
.bwest-hero::before {
  content:    '' !important;
  position:   absolute !important;
  inset:      0 !important;
  background: radial-gradient(120% 90% at 80% -10%, #3c041f 0%, #211d70 48%, #08071f 100%) !important;
  pointer-events: none !important;
  z-index:    0 !important;
}

/* Bande diagonale orange (poteaux) — clipPath identique à l'original */
.bwest-hero::after {
  content:     '' !important;
  position:    absolute !important;
  top:         0 !important;
  right:       0 !important;
  width:       38% !important;
  height:      100% !important;
  background:  var(--bw-post) !important;
  opacity:     0.10 !important;
  clip-path:   polygon(38% 0, 100% 0, 100% 100%, 0 100%) !important;
  pointer-events: none !important;
  z-index:     0 !important;
}

/* Filigrane lignes terrain */
.bwest-hero .wp-block-cover__image-background,
.bwest-hero .bwest-hero__pitch-lines {
  position:          absolute !important;
  inset:             0 !important;
  opacity:           0.06 !important;
  background-image:  repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 120px) !important;
  pointer-events:    none !important;
}

/* Contenu hero au-dessus des overlays */
.bwest-hero .wp-block-cover__inner-container,
.bwest-hero > * {
  position: relative !important;
  z-index:  2 !important;
}

/* H1 du hero — font-weight 400, taille fluide clamp */
.bwest-hero h1,
.bwest-hero .wp-block-heading {
  font-family:    var(--font-display) !important;
  font-weight:    400 !important;
  font-size:      clamp(3.5rem, 9vw, 7.5rem) !important;
  line-height:    0.92 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color:          #fff !important;
  margin-top:     22px !important;
}

/* Mot en orange dans le hero */
.bwest-hero .bwest-hero__accent,
.bwest-hero h1 em,
.bwest-hero h1 strong {
  color:          var(--bw-post) !important;
  font-style:     normal !important;
  font-weight:    inherit !important;
}

/* Lead text du hero */
.bwest-hero p.bwest-hero__lead,
.bwest-hero .wp-block-paragraph {
  font-family: var(--font-body) !important;
  font-size:   19px !important;
  line-height: 1.55 !important;
  color:       rgba(255,255,255,0.80) !important;
  max-width:   560px !important;
  margin-top:  26px !important;
}


/* ============================================================
   7. SECTION HEADING — eyebrow + titre display
      Fidèle à SectionHeading.jsx :
      eyebrow: barre orange + texte orange uppercase tracked
      titre: font-display, weight 400, uppercase
   ============================================================ */
.bwest-section-heading {
  text-align: left;
}

.bwest-section-heading--center {
  text-align:    center;
  max-width:     720px;
  margin-inline: auto;
}

/* Eyebrow : barre orange 22px + texte orange uppercase 12px tracked */
.bwest-eyebrow,
.bwest-section-heading__eyebrow {
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            8px !important;
  font-family:    var(--font-body) !important;
  font-weight:    var(--weight-bold) !important;
  font-size:      var(--text-2xs) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  color:          var(--bw-post) !important;
  margin-bottom:  12px !important;
}

/* Barre orange devant l'eyebrow (width:22px height:2.5px) */
.bwest-eyebrow::before,
.bwest-section-heading__eyebrow::before {
  content:       '' !important;
  display:       block !important;
  width:         22px !important;
  height:        2.5px !important;
  background:    var(--bw-post) !important;
  flex-shrink:   0 !important;
}

/* Titre de section — weight 400 fidèle à l'original */
.bwest-section-heading h2,
.bwest-section-heading .bwest-section-heading__title {
  font-family:    var(--font-display) !important;
  font-weight:    400 !important;
  font-size:      clamp(2rem, 5vw, var(--text-4xl)) !important;
  line-height:    var(--leading-tight) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  color:          var(--text-strong) !important;
  margin:         0 0 var(--space-3) !important;
}

/* Version on-dark */
.bwest-section-heading--on-dark h2,
.bwest-section-heading--on-dark .bwest-section-heading__title {
  color: var(--bw-white) !important;
}

/* Sous-titre de section */
.bwest-section-heading p,
.bwest-section-heading .bwest-section-heading__sub {
  font-family: var(--font-body) !important;
  font-size:   var(--text-lg) !important;
  color:       var(--text-muted) !important;
  margin-top:  var(--space-3) !important;
  max-width:   640px !important;
}


/* ============================================================
   8. CARDS — 3 variantes fidèles à Card.jsx
   ============================================================ */

/* Card light (défaut) */
.bwest-card {
  position:      relative;
  background:    var(--surface-card);
  border:        var(--border-hair) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
  padding:       var(--space-5);
  transition:    box-shadow var(--dur-base) var(--ease-standard),
                 transform  var(--dur-base) var(--ease-out);
}

.bwest-card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-2px);
}

/* Card pitch (fond navy) */
.bwest-card--pitch {
  background: var(--surface-inverse);
  color:      var(--text-on-dark);
  border:     none;
  box-shadow: var(--shadow-lg);
}

/* Card outline (contour navy) */
.bwest-card--outline {
  background: var(--surface-card);
  border:     var(--border-bold) solid var(--bw-midnight);
  box-shadow: none;
}

/* Accent stripe orange en haut de la card (accentStripe: true) */
.bwest-card--accented::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     4px;
  background: var(--bw-post);
}

/* MatchCard — bande diagonale orange en haut à droite */
.bwest-match-card {
  position:      relative;
  background:    var(--surface-card);
  border:        var(--border-hair) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
}

.bwest-match-card::after {
  content:     '';
  position:    absolute;
  top:         0;
  right:       0;
  width:       64px;
  height:      100%;
  background:  var(--bw-post);
  clip-path:   polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  opacity:     0.14;
  pointer-events: none;
}


/* ============================================================
   9. BADGES & TAGS
   ============================================================ */

/* Badge (statut match / catégorie) */
.bwest-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        0 8px;
  height:         22px;
  border-radius:  var(--radius-pill);
  font-family:    var(--font-body);
  font-size:      var(--text-3xs);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space:    nowrap;
}

.bwest-badge--venom    { background: var(--bw-venom);    color: #fff; }
.bwest-badge--midnight { background: var(--bw-midnight);  color: #fff; }
.bwest-badge--post     { background: var(--bw-post);     color: var(--bw-black); }
.bwest-badge--win      { background: var(--status-win);  color: #fff; }
.bwest-badge--loss     { background: var(--status-loss); color: #fff; }
.bwest-badge--draw     { background: var(--status-draw); color: var(--bw-black); }
.bwest-badge--neutral  { background: var(--gray-700);    color: #fff; }

/* Soft (fond pâle) */
.bwest-badge--soft.bwest-badge--venom    { background: var(--venom-50);    color: var(--venom-600); }
.bwest-badge--soft.bwest-badge--midnight { background: var(--midnight-50); color: var(--midnight-600); }
.bwest-badge--soft.bwest-badge--post     { background: var(--post-50);     color: var(--post-700); }

/* Tag (étiquette contour) */
.bwest-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  padding:        3px 10px;
  border:         1px solid var(--border-subtle);
  border-radius:  var(--radius-pill);
  font-family:    var(--font-body);
  font-size:      var(--text-2xs);
  font-weight:    var(--weight-semibold);
  color:          var(--text-muted);
  background:     var(--gray-50);
  transition:     border-color var(--dur-fast) var(--ease-standard);
}

.bwest-tag:hover {
  border-color: var(--bw-midnight);
}


/* ============================================================
   10. FORMULAIRES
   ============================================================ */
.wpcf7-form-control,
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  font-family:   var(--font-body) !important;
  font-size:     var(--text-md) !important;
  border:        1.5px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  padding:       0.625rem 0.875rem !important;
  background:    var(--surface-raised) !important;
  color:         var(--text-strong) !important;
  transition:    border-color var(--dur-fast) var(--ease-standard),
                 box-shadow   var(--dur-fast) var(--ease-standard) !important;
  width:         100% !important;
  outline:       none !important;
}

.wpcf7-form-control:focus,
.wp-block-search__input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--bw-midnight) !important;
  box-shadow:   var(--focus-ring) !important;
}


/* ============================================================
   11. FOOTER — fond midnight-900, 4 colonnes
       Fidèle à SiteFooter.jsx
   ============================================================ */
.site-footer,
.footer-widget-area {
  background:  var(--midnight-900) !important;
  color:       rgba(255,255,255,0.66) !important;
  padding-top: var(--space-9) !important;
}

.site-footer a,
.footer-widget-area a {
  color:           rgba(255,255,255,0.66) !important;
  text-decoration: none !important;
  font-family:     var(--font-body) !important;
  font-size:       var(--text-sm) !important;
  transition:      color var(--dur-fast) var(--ease-standard) !important;
}

.site-footer a:hover,
.footer-widget-area a:hover {
  color: var(--bw-post) !important;
}

/* Titres des colonnes footer */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.footer-widget-area h2,
.footer-widget-area h3,
.footer-widget-area h4,
.widget-title {
  font-family:    var(--font-body) !important;
  font-weight:    700 !important;
  font-size:      var(--text-2xs) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color:          #fff !important;
  margin-bottom:  var(--space-4) !important;
}

/* Listes footer */
.footer-widget-area ul {
  list-style:  none !important;
  padding:     0 !important;
  margin:      0 !important;
  display:     grid !important;
  gap:         11px !important;
}

/* Barre de copyright */
.ast-footer-copyright,
.footer-bar {
  background:     var(--midnight-900) !important;
  color:          var(--gray-500) !important;
  font-size:      var(--text-xs) !important;
  border-top:     1px solid rgba(255,255,255,0.06) !important;
  padding-top:    var(--space-4) !important;
  padding-bottom: var(--space-4) !important;
  margin-top:     var(--space-9) !important;
}

.ast-footer-copyright a {
  color: var(--midnight-300) !important;
}

/* Icônes réseaux sociaux dans le footer */
.bwest-social-btn {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  border:          1px solid rgba(255,255,255,0.20);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  transition:      border-color var(--dur-fast) var(--ease-standard),
                   background   var(--dur-fast) var(--ease-standard);
}

.bwest-social-btn:hover {
  border-color: var(--bw-post) !important;
  background:   rgba(248,151,29,0.12) !important;
  color:        var(--bw-post) !important;
}


/* ============================================================
   12. BLOCS GUTENBERG — COULEURS & STYLES PERSONNALISÉS
   ============================================================ */

/* Couleurs de fond enregistrées dans theme.json */
.has-venom-background-color    { background-color: var(--bw-venom) !important; }
.has-midnight-background-color { background-color: var(--bw-midnight) !important; }
.has-post-background-color     { background-color: var(--bw-post) !important; }
.has-midnight-dark-background-color { background-color: var(--midnight-700) !important; }

/* Couleurs de texte */
.has-venom-color    { color: var(--bw-venom) !important; }
.has-midnight-color { color: var(--bw-midnight) !important; }
.has-post-color     { color: var(--bw-post) !important; }

/* Section sombre générique */
.bwest-section--dark {
  background: var(--midnight-700);
  color:      var(--text-on-dark);
  padding:    var(--space-11) 0;
}

.bwest-section--dark h1,
.bwest-section--dark h2,
.bwest-section--dark h3,
.bwest-section--dark h4,
.has-midnight-background-color h2,
.has-midnight-background-color h3 {
  color: var(--bw-white) !important;
}

/* Séparateur orange */
.wp-block-separator {
  border-color:  var(--bw-post) !important;
  border-width:  2px !important;
  border-radius: var(--radius-pill) !important;
  width:         48px !important;
  margin:        var(--space-6) 0 !important;
}

.wp-block-separator.aligncenter {
  margin: var(--space-6) auto !important;
}

/* Tables (résultats de matchs) */
.wp-block-table table {
  font-family:     var(--font-body) !important;
  border-collapse: collapse !important;
  width:           100% !important;
}

.wp-block-table th {
  background:     var(--midnight-600) !important;
  color:          var(--bw-white) !important;
  font-weight:    700 !important;
  font-size:      var(--text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding:        0.625rem 1rem !important;
}

.wp-block-table td {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding:       0.625rem 1rem !important;
  color:         var(--text-body) !important;
}

.wp-block-table tr:hover td {
  background: var(--gray-50) !important;
}

/* Style "Card B.W.Est" sur bloc Groupe */
.wp-block-group.is-style-bwest-card {
  background:    var(--surface-card);
  border:        var(--border-hair) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow:    var(--shadow-sm);
  padding:       var(--space-5) !important;
  position:      relative;
  overflow:      hidden;
  transition:    box-shadow var(--dur-base) var(--ease-standard);
}

.wp-block-group.is-style-bwest-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     4px;
  background: var(--bw-post);
}

/* Style "Section sombre" sur bloc Groupe */
.wp-block-group.is-style-bwest-section-dark {
  background: var(--midnight-700);
  color:      var(--text-on-dark);
  padding:    var(--space-10) var(--space-5) !important;
}

.wp-block-group.is-style-bwest-section-dark h2,
.wp-block-group.is-style-bwest-section-dark h3 {
  color: var(--bw-white) !important;
}

/* Tabs (navigation par onglets) */
.bwest-tabs {
  display:     flex;
  gap:         4px;
  border-bottom: 1.5px solid var(--border-subtle);
  margin-bottom: var(--space-5);
}

.bwest-tab {
  font-family:    var(--font-body);
  font-weight:    600;
  font-size:      var(--text-sm);
  padding:        0.625rem var(--space-4);
  border:         none;
  background:     transparent;
  color:          var(--text-muted);
  cursor:         pointer;
  border-bottom:  2.5px solid transparent;
  margin-bottom:  -1.5px;
  transition:     color var(--dur-base) var(--ease-standard),
                  border-color var(--dur-base) var(--ease-standard);
}

.bwest-tab:hover {
  color: var(--bw-venom);
}

.bwest-tab.is-active {
  color:              var(--bw-venom);
  border-bottom-color: var(--bw-venom);
}


/* ============================================================
   13. INTERACTIONS — États boutons & icônes (fidèles au DS)
   ============================================================ */
.bw-btn:not(:disabled):hover { box-shadow: var(--shadow-md); }
.bw-btn:not(:disabled):active { transform: scale(0.97); }
.bw-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bw-btn--primary:not(:disabled):hover    { background: var(--venom-600); }
.bw-btn--secondary:not(:disabled):hover  { background: var(--midnight-600); }
.bw-btn--accent:not(:disabled):hover     { background: var(--post-500); }
.bw-btn--outline:not(:disabled):hover    { background: var(--midnight-50); }
.bw-btn--ghost:not(:disabled):hover      { background: var(--venom-50); }

.bw-iconbtn:not(:disabled):active        { transform: scale(0.92); }
.bw-iconbtn:focus-visible                { outline: none; box-shadow: var(--focus-ring); }
.bw-iconbtn--ghost:not(:disabled):hover  { background: var(--midnight-50); }
.bw-iconbtn--primary:not(:disabled):hover { background: var(--venom-600); }
.bw-iconbtn--secondary:not(:disabled):hover { background: var(--midnight-600); }
.bw-iconbtn--accent:not(:disabled):hover  { background: var(--post-500); }

.bw-tag:hover    { border-color: var(--bw-midnight); }
.bw-link         { color: var(--text-link); text-decoration: none; }
.bw-link:hover   { text-decoration: underline; }
.bw-tab          { transition: color var(--dur-base) var(--ease-standard); }
.bw-tab:hover    { color: var(--bw-venom); }


/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {

  .bwest-hero {
    min-height: 70vh !important;
    padding: 80px var(--gutter) 60px !important;
  }

  .bwest-hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
  }

  .main-header-bar {
    height: auto !important;
  }

  .wp-block-cover {
    min-height: 60vh !important;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 1rem;
  }

  .bwest-hero h1 {
    font-size: clamp(2rem, 14vw, 3rem) !important;
    line-height: 1 !important;
  }
}