/* B2A — global tokens */
:root {
  --violet: #6B21A8;
  --violet-deep: #581C87;
  --violet-soft: #C084FC;
  --motifs: 1; /* 0 off, 0.5 discret, 1 marqué */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: #ece9e2;
}

/* ─── DIRECTION A — Le Journal ─────────────────────────────── */
.da {
  --bg: #FAF8F4;
  --ink: #0E0E10;
  --ink-2: #3A3A3F;
  --ink-3: #6B6B72;
  --rule: #E2DED5;
  --rule-strong: #C9C3B5;
  --paper: #FFFFFF;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.da .display { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 0.9; text-transform: uppercase; }
.da .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.da .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; line-height: 1; font-feature-settings: "tnum"; }
.da .rule { border-top: 1px solid var(--rule); }
.da .rule-ink { border-top: 1.5px solid var(--ink); }

/* ─── DIRECTION B — Court Side ─────────────────────────────── */
.db {
  --bg: #0A0A0F;
  --bg-2: #131319;
  --bg-3: #1C1C24;
  --ink: #FFFFFF;
  --ink-2: #B8B8C0;
  --ink-3: #6E6E78;
  --rule: rgba(255,255,255,0.10);
  --rule-strong: rgba(255,255,255,0.22);
  background: var(--bg);
  color: var(--ink);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 14px;
}
.db .display { font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0; line-height: 0.95; text-transform: uppercase; }
.db .meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.db .num { font-family: 'Oswald', sans-serif; font-weight: 600; line-height: 1; font-feature-settings: "tnum"; }
.db .rule { border-top: 1px solid var(--rule); }

/* Logo treatment for dark direction */
.logo-img-light { filter: invert(1); }

/* Buttons — shared. text-decoration: none nécessaire : ces classes sont aussi
   utilisées sur des <a> (liens-boutons Thymeleaf), pas seulement des <button>
   comme dans la maquette React d'origine. */
.btn-violet {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--violet); color: #fff;
  border: none; cursor: pointer; text-decoration: none;
  font-family: inherit; font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 0;
  transition: background .15s, transform .15s;
}
.btn-violet:hover { background: var(--violet-deep); }

.btn-ghost-a {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); text-decoration: none;
  font-family: inherit; font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 12.5px 22px; cursor: pointer;
}
.btn-ghost-a:hover { background: var(--ink); color: var(--bg); }

.btn-ghost-b {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule-strong);
  font-family: inherit; font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 20px; cursor: pointer;
}
.btn-ghost-b:hover { border-color: var(--ink); }

/* Image placeholders — striped, monospace label */
.imgph {
  background: repeating-linear-gradient(45deg, var(--ph-1, #DAD4C7) 0 8px, var(--ph-2, #E7E2D6) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  position: relative; overflow: hidden;
}
.imgph.dark {
  --ph-1: #1A1A22; --ph-2: #23232D;
  color: rgba(255,255,255,0.4);
}
.imgph.violet {
  background: repeating-linear-gradient(45deg, #5B21B6 0 8px, #6D28D9 8px 16px);
  color: rgba(255,255,255,0.55);
}

/* Shuttle trajectory — decorative curve + shuttlecocks at each end (cf. hero
   accueil et en-têtes de page /creneaux, /partenaires, /inscription). */
.shuttle-path { stroke-dasharray: 6 6; opacity: var(--motifs); }
.shuttle-icon { opacity: var(--motifs); }

/* Pill / tags */
.tag-a {
  display: inline-block; padding: 5px 10px;
  font: 500 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
}
.tag-a.violet { background: var(--violet); color: #fff; }
.tag-a.outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

.tag-b {
  display: inline-block; padding: 5px 10px;
  font: 500 10.5px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(124,58,237,0.18); color: var(--violet-soft);
  border: 1px solid rgba(124,58,237,0.35);
}
.tag-b.neutral { background: rgba(255,255,255,0.06); color: var(--ink-2); border-color: var(--rule); }

/* Court lines — for Direction B layout decoration */
.court-line { stroke: var(--rule); stroke-width: 1; fill: none; }
.court-line-strong { stroke: var(--rule-strong); }

/* Inline nav links */
.nav-link {
  font: 500 13px/1 'Inter', sans-serif;
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
  position: relative;
}
.db .nav-link {
  font-family: 'Barlow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}

/* No selection for decorative numbers */
.deco { user-select: none; pointer-events: none; }

/* Conteneur de page partagé — mêmes marges que le header/nav/footer
   (fragments/layout.html, cf. layout.css) sur toutes les pages Thymeleaf. */
.page-section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-16) var(--space-6);
}

/* En-tête de page (Créneaux, Partenaires, Inscription…) : grand titre bicolore
   (noir + violet) + trajectoire décorative, cf. maquettes direction-a-*.jsx.
   Partagé pour éviter de dupliquer ce motif par page. */
.page-hero {
    position: relative;
    overflow: hidden;
}
.page-hero__eyebrow {
    display: block;
    margin-bottom: var(--space-6);
}
.page-hero__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-10);
    align-items: end;
}
.page-hero__title {
    font-size: var(--text-hero);
    margin: 0;
}
.page-hero__title-accent {
    color: var(--violet);
}
.page-hero__lead {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--ink-2);
    margin: 0 0 var(--space-6);
}
.page-hero__stats {
    display: flex;
    gap: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1.5px solid var(--ink);
}
.page-hero__stat-value {
    font-size: var(--text-2xl);
}
.page-hero__trajectory {
    position: absolute;
    right: var(--space-16);
    top: var(--space-8);
    pointer-events: none;
}

@media (max-width: 768px) {
    .page-hero__grid {
        grid-template-columns: 1fr;
    }
    .page-hero__title {
        font-size: var(--text-2xl);
    }
    .page-hero__trajectory {
        display: none;
    }
}