/* ============================================================
   AFRICA2KBALL — CSS GLOBAL v2
   Direction artistique : noir / marron / orange / beige
   ============================================================ */

/* --- VARIABLES --- */
:root {
  --black:       #080604;
  --black-soft:  #120d09;
  --brown:       #2a170d;
  --brown-light: #4a2a17;
  --orange:      #d95722;
  --orange-dark: #b94317;
  --sand:        #efe0c8;
  --beige:       #c9a77a;
  --white:       #f8f1e7;
  --muted:       #a89b8f;
  --border:      rgba(239, 224, 200, 0.18);

  --font-title: Impact, "Arial Black", "Franklin Gothic Medium", sans-serif;
  --font-body:  Arial, Helvetica, sans-serif;
  --radius:     8px;
  --radius-lg:  12px;
  --ease:       0.25s ease;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, select, textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  border: none;
  outline: none;
  background: none;
}

/* ============================================================
   FOND TEXTURE GLOBALE (lignes diagonales discrètes)
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent, transparent 80px,
      rgba(42,23,13,.1) 80px, rgba(42,23,13,.1) 81px),
    repeating-linear-gradient(-45deg,
      transparent, transparent 80px,
      rgba(42,23,13,.07) 80px, rgba(42,23,13,.07) 81px);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ============================================================
   SITE ICONS (SVG inline via background-image data URI)
   Utilisés via classe .icon-*
   ============================================================ */
.site-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
}
.section    { padding: 80px 0; }
.section-sm { padding: 48px 0; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(8,6,4,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 48px;
  gap: 24px;
}
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header-logo img {
  height: 52px;
  width: auto;
}
.header-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.header-nav a {
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(248,241,231,.75);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  white-space: nowrap;
}
.header-nav a:hover,
.header-nav a.active {
  color: var(--white);
  border-bottom-color: var(--orange);
}
.header-cta-wrap { flex-shrink: 0; }

/* BURGER */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
  margin-left: auto;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--ease);
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* MOBILE NAV */
.mobile-nav {
  display: none;
  position: fixed;
  top: 80px;
  left: 0; right: 0;
  background: rgba(12,8,4,.98);
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  padding: 24px 32px;
  gap: 0;
  z-index: 999;
}
.mobile-nav.open,
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  letter-spacing: .03em;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a.active { color: var(--orange); }
.mobile-nav .btn-primary { margin-top: 20px; justify-content: center; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
  white-space: nowrap;
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 11px 24px;
  border-radius: var(--radius);
  border: 2px solid rgba(248,241,231,.4);
  cursor: pointer;
  transition: var(--ease);
  white-space: nowrap;
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.07); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: var(--ease);
  background: none;
}
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

/* ============================================================
   SECTION LABELS & TITLES
   ============================================================ */
.section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-title);
  font-size: clamp(32px, 4vw, 56px);
  text-transform: uppercase;
  color: var(--sand);
  line-height: 1;
  letter-spacing: -.01em;
}
.accent-bar {
  display: flex;
  gap: 6px;
  margin: 14px 0 24px;
}
.accent-bar span {
  display: block;
  height: 3px;
  border-radius: 2px;
}
.accent-bar .c-red    { width: 28px; background: #c0392b; }
.accent-bar .c-yellow { width: 28px; background: #f1c40f; }
.accent-bar .c-green  { width: 28px; background: #27ae60; }

/* ============================================================
   PAGE HERO (générique)
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(8,6,4,.92) 0%,
    rgba(42,23,13,.65) 55%,
    rgba(8,6,4,.5) 100%
  );
}
.page-hero-content {
  position: relative;
  z-index: 2;
  padding: 60px 80px;
  width: 100%;
}
.page-title {
  font-family: var(--font-title);
  font-size: clamp(52px, 8vw, 100px);
  text-transform: uppercase;
  color: var(--sand);
  line-height: .9;
  letter-spacing: -.01em;
  text-shadow: 0 4px 30px rgba(0,0,0,.7);
}
.page-subtitle {
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  color: var(--muted);
  margin-top: 12px;
  max-width: 600px;
  line-height: 1.55;
}
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
}
.event-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--beige);
}
.event-meta-item svg { color: var(--orange); flex-shrink: 0; }

/* ============================================================
   ACCUEIL HERO (plein écran)
   ============================================================ */
.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.home-hero .page-hero-bg {
  background-image: url('../images/hero-africa2kball.PNG');
  background-position: center top;
}
.home-hero .page-hero-overlay {
  background: linear-gradient(
    105deg,
    rgba(8,6,4,.94) 0%,
    rgba(42,23,13,.72) 55%,
    rgba(8,6,4,.35) 100%
  );
}
.home-hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 80px;
  max-width: 680px;
}
.home-hero-title {
  font-family: var(--font-title);
  font-size: clamp(52px, 8.5vw, 108px);
  line-height: .85;
  text-transform: uppercase;
  color: var(--sand);
  text-shadow: 0 4px 32px rgba(0,0,0,.8);
  margin-bottom: 4px;
}
.home-hero-sub {
  font-family: var(--font-title);
  font-size: clamp(20px, 3.5vw, 44px);
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.home-hero-desc {
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 28px;
  max-width: 460px;
}
.home-hero-meta { margin-bottom: 36px; display: flex; flex-direction: column; gap: 6px; }
.home-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   TRIO (bande 3 blocs)
   ============================================================ */
.home-trio {
  background: var(--brown);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.home-trio-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 36px 40px;
  border-right: 1px solid var(--border);
}
.home-trio-item:last-child { border-right: none; }
.trio-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(217,87,34,.13);
  border: 1.5px solid rgba(217,87,34,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trio-icon-wrap svg { width: 24px; height: 24px; }
.trio-text h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.trio-text p  { font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* ============================================================
   NATIONS PREVIEW (accueil)
   ============================================================ */
.nations-preview { background: var(--sand); padding-top: 96px; padding-bottom: 96px; }
.nations-preview .section-label { color: var(--orange); }
.nations-preview-header { margin-bottom: 40px; }
.nations-cards-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.nation-card-home {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 118px;
  border: 2px solid transparent;
  transition: var(--ease);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.nation-card-home:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}
.nation-card-home .shield { width: 44px; height: 50px; border-radius: 4px 4px 24px 24px; overflow: hidden; }
.nation-card-home .shield img { width: 100%; height: 100%; object-fit: cover; }
.nation-card-home .shield-placeholder {
  width: 44px; height: 50px;
  border-radius: 4px 4px 24px 24px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid currentColor;
}
.nation-card-home .shield-placeholder svg { width: 20px; height: 20px; }
.nation-card-home span {
  font-size: .72rem;
  font-weight: 700;
  color: var(--black);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================================================
   NATIONS PAGE — grille
   ============================================================ */
.nations-hero-bg { background-image: url('../images/hero-africa2kball.PNG'); }
.nations-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.nations-hero-aside {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
}
.nations-hero-aside strong {
  display: block;
  margin-top: 16px;
  color: var(--beige);
  font-weight: 700;
  font-size: 1.05rem;
}
.nations-breadcrumb {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}

/* Grille nations */
.nations-grid-section { background: var(--black-soft); }
.nations-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.nation-card {
  background: var(--brown);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: var(--ease);
}
.nation-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.45); }

/* Accent tops */
.nation-card.caraibes  { border-top: 3px solid #00b4d8; }
.nation-card.senegal   { border-top: 3px solid #00a86b; }
.nation-card.kongo     { border-top: 3px solid #e63946; }
.nation-card.cdi       { border-top: 3px solid #f4a261; }
.nation-card.cameroun  { border-top: 3px solid #2dc653; }
.nation-card.mali      { border-top: 3px solid #f9c74f; }
.nation-card.maghreb   { border-top: 3px solid #e63946; }
.nation-card.diaspora  { border-top: 3px solid var(--beige); }

.nation-card-photo {
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  position: relative;
  background: rgba(42,23,13,.5);
}
.nation-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .4s ease;
  filter: brightness(.85) contrast(1.05);
}
.nation-card:hover .nation-card-photo img { transform: scale(1.04); }

.nation-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 32px;
  border-radius: 3px 3px 14px 14px;
  background: rgba(0,0,0,.5);
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nation-card-badge svg { width: 14px; height: 14px; }

.nation-card-name {
  padding: 8px 8px 2px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--beige);
  text-align: center;
}
.nation-card-btn {
  margin: 4px 8px 10px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  transition: var(--ease);
}
.nation-card:hover .nation-card-btn { border-color: var(--orange); color: var(--orange); }

/* ============================================================
   ROSTER
   ============================================================ */
.roster-section { background: var(--black); border-top: 1px solid var(--border); }
.roster-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}
.roster-header-left { display: flex; align-items: center; gap: 18px; }
.roster-nation-shield {
  width: 54px; height: 62px;
  border-radius: 5px 5px 28px 28px;
  border: 2px solid #00a86b;
  background: rgba(0,168,107,.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.roster-nation-shield img { width: 100%; height: 100%; object-fit: cover; }
.roster-title {
  font-family: var(--font-title);
  font-size: clamp(20px, 2.5vw, 32px);
  text-transform: uppercase;
  color: var(--sand);
  display: flex;
  align-items: center;
  gap: 12px;
}
.roster-title-sep { color: var(--orange); }
.roster-subtitle { font-size: .82rem; color: var(--muted); margin-top: 3px; }
.roster-aside { font-size: .8rem; color: var(--muted); max-width: 220px; line-height: 1.5; text-align: right; }

.roster-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
/* Roster card */
.roster-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.roster-card-num {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--font-title);
  font-size: 1.6rem;
  color: rgba(0,0,0,.1);
  line-height: 1;
  z-index: 1;
}
.roster-card-photo {
  width: 100%;
  aspect-ratio: 2/3;
  background: linear-gradient(180deg, #b8d4b6 0%, #7aaa76 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.roster-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Silhouette SVG joueur (placeholder premium) */
.player-silhouette {
  width: 60%;
  height: 60%;
  opacity: .25;
}

.roster-card-info { padding: 10px 10px 12px; background: var(--white); }
.roster-card-name {
  font-size: .68rem; font-weight: 700; color: var(--black);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.2;
}
.roster-card-pos  { font-size: .68rem; color: var(--orange); font-weight: 700; margin: 2px 0; }
.roster-card-size { font-size: .68rem; color: #888; }
.roster-card-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.badge-cap  { background: var(--orange); color: var(--white); }
.badge-play { background: #133d23; color: #5dbb7a; }

/* ============================================================
   HISTOIRE
   ============================================================ */
.histoire-hero-bg { background-image: url('../images/hero-africa2kball.PNG'); }
.histoire-hero .page-hero-overlay {
  background: linear-gradient(to bottom, rgba(8,6,4,.65) 0%, rgba(8,6,4,.92) 100%);
}
.histoire-hero .page-hero-content { text-align: center; padding: 100px 40px 80px; }
.histoire-hero .page-title { font-size: clamp(40px,7vw,86px); }

.histoire-editorial { background: var(--black-soft); }
.histoire-editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.histoire-editorial-text p {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--white);
  font-weight: 500;
  line-height: 1.65;
}
.histoire-editorial-img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brown);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.histoire-editorial-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88) contrast(1.05); }

/* TIMELINE */
.histoire-timeline { background: var(--black); }
.timeline-track {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  position: relative;
  padding: 40px 0;
}
.timeline-track::before {
  content: '';
  position: absolute;
  top: 62px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brown-light), var(--orange), var(--brown-light));
}
.timeline-item {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0 20px; position: relative;
}
.timeline-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange); color: var(--white);
  font-family: var(--font-title); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; margin-bottom: 20px;
  box-shadow: 0 0 0 4px var(--black), 0 0 0 7px rgba(217,87,34,.25);
}
.timeline-item-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.timeline-item-desc  { font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* CITATION */
.histoire-quote { background: var(--sand); padding: 64px 40px; text-align: center; }
.histoire-quote blockquote {
  font-family: var(--font-title);
  font-size: clamp(26px, 4vw, 52px);
  text-transform: uppercase;
  color: var(--black);
  position: relative;
  display: inline-block;
  padding: 0 60px;
}
.histoire-quote blockquote::before,
.histoire-quote blockquote::after {
  font-family: Georgia, serif;
  font-size: 5rem;
  color: var(--orange);
  position: absolute;
  line-height: 1;
}
.histoire-quote blockquote::before { content:'\201C'; top:-20px; left:0; }
.histoire-quote blockquote::after  { content:'\201D'; bottom:-44px; right:0; }

/* ============================================================
   CHAMPIONS
   ============================================================ */
.champions-hero-bg { background-image: url('../images/hero-africa2kball.PNG'); }
.champions-hero .page-hero-overlay {
  background: linear-gradient(to bottom, rgba(8,6,4,.6) 0%, rgba(8,6,4,.92) 100%);
}
.champions-hero .page-hero-content { text-align: center; padding: 100px 40px 60px; }

.champions-section { background: var(--black-soft); }
.champions-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.visual-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.visual-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--brown);
}
.visual-card-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.7) contrast(1.1) saturate(.9);
}
.visual-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,6,4,.95) 0%, rgba(8,6,4,.45) 65%, rgba(8,6,4,.15) 100%);
}
.visual-card-body {
  position: relative; z-index: 2;
  padding: 32px 36px;
}
.champion-edition-label {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 5px;
}
.champion-intro-label { font-size: .95rem; color: var(--muted); margin-bottom: 2px; }
.champion-name {
  font-family: var(--font-title);
  font-size: clamp(36px, 4.5vw, 62px);
  text-transform: uppercase;
  color: var(--sand);
  line-height: 1;
  margin-bottom: 10px;
}
.champion-accent-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.champion-accent-bar span { display: block; height: 3px; width: 28px; border-radius: 2px; }
.champion-desc { font-size: .88rem; color: var(--muted); line-height: 1.55; max-width: 380px; }
.champion-icon-wrap {
  margin-top: 16px;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
}
.champion-icon-wrap svg { width: 22px; height: 22px; }

/* CTA TROPHÉE */
.champions-cta-band {
  background: var(--brown);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.champions-cta-icon { flex-shrink: 0; }
.champions-cta-icon svg { width: 56px; height: 56px; }
.champions-cta-text { flex: 1; }
.champions-cta-text h2 {
  font-family: var(--font-title);
  font-size: clamp(20px, 3vw, 38px);
  text-transform: uppercase;
  color: var(--white); line-height: 1.1;
}
.champions-cta-text h2 span { color: var(--orange); }

/* ============================================================
   BILLETTERIE
   ============================================================ */
.billetterie-hero-bg { background-image: url('../images/hero-africa2kball.PNG'); }

.billetterie-section { background: var(--black-soft); }
.billetterie-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
}

/* Carte événement */
.info-card {
  background: var(--brown);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.info-card-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.info-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: rgba(217,87,34,.14);
  border: 1px solid rgba(217,87,34,.28);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-card-icon svg { width: 20px; height: 20px; }
.info-card-header h3 { font-size: 1rem; font-weight: 700; color: var(--white); }
.info-card-header p  { font-size: .84rem; color: var(--orange); font-weight: 700; margin-top: 2px; }
.info-card-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.info-card-row {
  display: flex; align-items: flex-start; gap: 12px;
}
.info-card-row-icon { width: 20px; flex-shrink: 0; margin-top: 2px; }
.info-card-row-icon svg { width: 16px; height: 16px; color: var(--orange); }
.info-card-row p { font-size: .84rem; color: var(--muted); line-height: 1.4; }
.info-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.event-tag {
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}

/* Formulaires */
.form-card {
  background: var(--brown);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.form-card h2 { font-size: 1.3rem; font-weight: 700; color: var(--white); margin-bottom: 5px; }
.form-card .form-desc { font-size: .88rem; color: var(--muted); margin-bottom: 26px; }

.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-group  { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }

.form-group label {
  font-size: .78rem; font-weight: 600;
  color: var(--beige); letter-spacing: .03em;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  color: var(--white);
  font-size: .88rem;
  transition: border-color var(--ease);
  width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--orange);
  background: rgba(255,255,255,.09);
}
.form-group select option { background: var(--brown); color: var(--white); }
.form-group textarea { resize: vertical; min-height: 100px; }

/* Ticket counter */
.ticket-counter-wrap { display: flex; flex-direction: column; gap: 6px; }
.ticket-counter-wrap label { font-size: .78rem; font-weight: 600; color: var(--beige); }
.ticket-counter {
  display: flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}
.ticket-counter button {
  width: 40px; height: 42px;
  background: rgba(255,255,255,.06);
  color: var(--white); font-size: 1.3rem;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background var(--ease);
}
.ticket-counter button:hover { background: var(--orange); }
.ticket-counter input {
  width: 56px; height: 42px;
  text-align: center;
  background: rgba(255,255,255,.04);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--white); font-weight: 700; font-size: .95rem;
  pointer-events: none;
}

/* Ticket types */
.ticket-types-wrap { display: flex; flex-direction: column; gap: 6px; }
.ticket-types-wrap label { font-size: .78rem; font-weight: 600; color: var(--beige); }
.ticket-types {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
}
.ticket-type {
  padding: 13px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: var(--ease);
}
.ticket-type:hover { border-color: rgba(217,87,34,.5); }
.ticket-type.selected { border-color: var(--orange); background: rgba(217,87,34,.1); }
.ticket-type input[type="radio"] { display: none; }
.ticket-type-icon { width: 20px; height: 20px; flex-shrink: 0; }
.ticket-type-icon svg { width: 20px; height: 20px; }
.ticket-type-label { font-size: .82rem; font-weight: 600; color: var(--white); }

/* Type radio (inscriptions) */
.type-selector { display: flex; gap: 14px; }
.type-option {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: .88rem;
  font-weight: 600; color: var(--muted);
  transition: color var(--ease);
}
.type-option input { display: none; }
.type-radio {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: var(--ease);
  position: relative;
}
.type-radio::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0;
  transition: opacity var(--ease);
  position: absolute;
}
.type-option.selected .type-radio { border-color: var(--orange); }
.type-option.selected .type-radio::after { opacity: 1; }
.type-option.selected { color: var(--white); }

/* Submit */
.form-submit { margin-top: 22px; }
.btn-submit {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--orange); color: var(--white);
  font-weight: 700; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 15px 32px;
  border-radius: var(--radius);
  border: none; cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.btn-submit:hover { background: var(--orange-dark); transform: translateY(-2px); }
.btn-submit svg { width: 18px; height: 18px; }

/* Feedback messages */
.form-feedback {
  display: none;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 18px;
  font-weight: 600;
  font-size: .9rem;
  text-align: center;
}
.form-feedback.success {
  display: block;
  background: rgba(42,174,80,.1);
  border: 1px solid rgba(42,174,80,.35);
  color: #5dbb7a;
}
.form-feedback.error {
  display: block;
  background: rgba(217,87,34,.1);
  border: 1px solid rgba(217,87,34,.35);
  color: var(--orange);
}
.form-error-msg {
  font-size: .75rem;
  color: #e07060;
  margin-top: 4px;
  display: none;
}
.form-error-msg.visible { display: block; }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: #e07060; }

/* À propos event */
.about-event-card {
  margin-top: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.about-event-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.about-event-card p  { font-size: .85rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.about-event-list { display: flex; flex-direction: column; gap: 10px; }
.about-event-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; color: var(--muted);
}
.about-event-list li svg { width: 16px; height: 16px; color: var(--orange); flex-shrink: 0; }

/* Rassurance */
.reassurance { background: var(--brown); border-top: 1px solid var(--border); }
.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}
.reassurance-item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 36px 40px;
  border-right: 1px solid var(--border);
}
.reassurance-item:last-child { border-right: none; }
.reassurance-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(217,87,34,.1);
  border: 1px solid rgba(217,87,34,.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.reassurance-icon svg { width: 20px; height: 20px; }
.reassurance-item h3 { font-size: .95rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.reassurance-item p  { font-size: .83rem; color: var(--muted); line-height: 1.5; }

/* ============================================================
   INSCRIPTIONS
   ============================================================ */
.inscriptions-hero-bg { background-image: url('../images/hero-africa2kball.PNG'); }

.inscriptions-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 32px;
}
.inscription-card {
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; min-height: 230px;
}
.inscription-card-media { background: var(--brown); border: 1px solid var(--border); }
.inscription-card-benev { background: var(--sand); }

.inscription-card-img {
  width: 210px; flex-shrink: 0;
  overflow: hidden; position: relative;
}
.inscription-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  filter: brightness(.8);
}
.inscription-card-img-placeholder {
  width: 100%; height: 100%;
  background: rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
}
.inscription-card-img-placeholder svg { width: 48px; height: 48px; opacity: .3; }

.inscription-card-body {
  flex: 1; padding: 28px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 10px;
}
.inscription-card-icon { width: 32px; height: 32px; }
.inscription-card-icon svg { width: 32px; height: 32px; color: var(--orange); }
.inscription-card-media .inscription-card-icon svg { color: var(--orange); }
.inscription-card-benev .inscription-card-icon svg  { color: var(--brown); }

.inscription-card-title { font-size: 1.25rem; font-weight: 700; }
.inscription-card-media .inscription-card-title { color: var(--white); }
.inscription-card-benev .inscription-card-title  { color: var(--black); }

.inscription-card-desc { font-size: .85rem; line-height: 1.5; }
.inscription-card-media .inscription-card-desc { color: var(--muted); }
.inscription-card-benev .inscription-card-desc  { color: rgba(0,0,0,.6); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-hero-bg { background-image: url('../images/hero-africa2kball.PNG'); }
.contact-section { background: var(--black-soft); }
.contact-layout {
  display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start;
}
.contact-sidebar { display: flex; flex-direction: column; gap: 18px; }

.contact-info-card {
  position: relative; overflow: hidden;
}
.contact-africa-watermark {
  position: absolute; right: -8px; bottom: -8px;
  width: 100px; height: 100px;
  opacity: .06; pointer-events: none;
}
.contact-africa-watermark svg { width: 100%; height: 100%; }
.contact-info-list { display: flex; flex-direction: column; gap: 16px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 14px; }
.contact-info-item-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(217,87,34,.1);
  border: 1px solid rgba(217,87,34,.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-item-icon svg { width: 15px; height: 15px; color: var(--orange); }
.contact-info-item .ci-label { font-size: .72rem; color: var(--muted); margin-bottom: 2px; }
.contact-info-item .ci-value { font-size: .88rem; color: var(--white); font-weight: 600; }

.partenariat-card {
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex; align-items: flex-start; gap: 16px;
}
.partenariat-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(217,87,34,.1);
  border: 1px solid rgba(217,87,34,.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.partenariat-icon svg { width: 20px; height: 20px; color: var(--orange); }
.partenariat-card h3 { font-size: 1rem; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.partenariat-card p  { font-size: .83rem; color: rgba(0,0,0,.55); line-height: 1.5; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--black-soft);
  border-top: 1px solid var(--border);
  padding: 60px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand img { height: 58px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; display: block; }
.footer-brand-tagline { font-size: .83rem; color: var(--muted); line-height: 1.5; }

.footer-col h4 {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 16px;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
  font-size: .85rem; color: var(--muted);
  transition: color var(--ease);
}
.footer-col ul li a:hover { color: var(--white); }

.footer-social { display: flex; gap: 10px; margin-top: 4px; }
.footer-social-link {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: var(--ease);
}
.footer-social-link svg { width: 16px; height: 16px; }
.footer-social-link:hover { border-color: var(--orange); color: var(--orange); }

.footer-contact-list { display: flex; flex-direction: column; gap: 8px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; color: var(--muted); }
.footer-contact-item svg { width: 14px; height: 14px; color: var(--orange); flex-shrink: 0; margin-top: 3px; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.footer-bottom p { font-size: .78rem; color: var(--muted); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: .78rem; color: var(--muted); transition: color var(--ease); }
.footer-legal a:hover { color: var(--white); }

/* ============================================================
   RESPONSIVE — TABLET (≤ 1100px)
   ============================================================ */
@media (max-width: 1100px) {
  .nations-grid         { grid-template-columns: repeat(4,1fr); }
  .nations-cards-grid   { grid-template-columns: repeat(4,1fr); }
  .roster-grid          { grid-template-columns: repeat(3,1fr); }
  .footer-grid          { grid-template-columns: 1fr 1fr; }
  .billetterie-layout,
  .contact-layout       { grid-template-columns: 1fr; }
  .histoire-editorial-grid { grid-template-columns: 1fr; }
  .histoire-editorial-img { max-width: 580px; }
  .champions-cta-band   { flex-direction: column; text-align: center; }
  .nations-hero-inner   { grid-template-columns: 1fr; gap: 24px; padding: 60px 48px; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Header */
  .header { padding: 0 20px; height: 66px; }
  .header-nav, .header-cta-wrap { display: none; }
  .burger { display: flex; }

  /* Heroes */
  .home-hero-inner { padding: 0 20px; }
  .home-hero-title { font-size: 46px; }
  .home-hero-sub   { font-size: 22px; }
  .home-hero-actions { flex-direction: column; }
  .page-hero-content { padding: 40px 20px; }
  .page-title { font-size: 42px; }
  .histoire-hero .page-hero-content { padding: 80px 20px 50px; }

  /* Sections */
  .container { padding: 0 20px; }
  .section  { padding: 50px 0; }

  /* Trio */
  .home-trio-grid { grid-template-columns: 1fr; }
  .home-trio-item { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 20px; }
  .home-trio-item:last-child { border-bottom: none; }

  /* Nations home */
  .nations-cards-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }

  /* Nations page */
  .nations-hero-inner { padding: 50px 20px; grid-template-columns: 1fr; }
  .nations-grid { grid-template-columns: repeat(2,1fr); }

  /* Roster */
  .roster-grid { grid-template-columns: repeat(2,1fr); }
  .roster-header { flex-direction: column; }
  .roster-aside { text-align: left; max-width: 100%; }

  /* Timeline */
  .timeline-track { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .timeline-track::before { display: none; }
  .timeline-item { flex-direction: row; text-align: left; align-items: flex-start; gap: 16px; padding: 0; }
  .timeline-num { flex-shrink: 0; margin-bottom: 0; }

  /* Champions */
  .champions-cards { grid-template-columns: 1fr; }
  .visual-card { min-height: 320px; }
  .champions-cta-band { padding: 28px 20px; }

  /* Billetterie */
  .billetterie-layout { grid-template-columns: 1fr; }
  .ticket-types { grid-template-columns: 1fr; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .form-card { padding: 24px 16px; }

  /* Inscriptions */
  .inscriptions-cards { grid-template-columns: 1fr; }
  .inscription-card { flex-direction: column; }
  .inscription-card-img { width: 100%; height: 180px; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; }

  /* Rassurance */
  .reassurance-grid { grid-template-columns: 1fr; }
  .reassurance-item { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 20px; }
  .reassurance-item:last-child { border-bottom: none; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 0 20px; }
  .footer { padding: 40px 0 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 20px 0; }

  /* Quote */
  .histoire-quote blockquote { padding: 0 40px; }
  .histoire-quote blockquote::before { left: 0; font-size: 3rem; }
  .histoire-quote blockquote::after  { right: 0; font-size: 3rem; }
}

@media (max-width: 480px) {
  .nations-grid { grid-template-columns: repeat(2,1fr); }
  .roster-grid  { grid-template-columns: repeat(2,1fr); }
  .home-hero-actions { flex-direction: column; }
}

/* ============================================================
   V3 — CLASSES UTILITAIRES (remplacement styles inline)
   ============================================================ */

/* Page hero — hauteurs */
.page-hero--compact  { min-height: 380px; }
.page-hero--medium   { min-height: 360px; }
.page-hero--large    { min-height: 420px; }
.page-hero--xlarge   { min-height: 440px; }

/* Page hero overlay — fondu bas */
.page-hero-overlay--bottom {
  background: linear-gradient(to bottom, rgba(8,6,4,.6) 0%, rgba(8,6,4,.92) 100%);
}
.page-hero-overlay--bottom-soft {
  background: linear-gradient(to bottom, rgba(8,6,4,.58) 0%, rgba(8,6,4,.92) 100%);
}
.page-hero-overlay--bottom-histoire {
  background: linear-gradient(to bottom, rgba(8,6,4,.62) 0%, rgba(8,6,4,.92) 100%);
}

/* Page hero content — centré */
.page-hero-content--centered {
  text-align: center;
  padding: 100px 40px 60px;
  width: 100%;
}
.page-hero-content--histoire {
  text-align: center;
  padding: 100px 40px 80px;
  width: 100%;
}

/* Page subtitle — centré */
.page-subtitle--centered {
  margin: 10px auto 0;
  text-align: center;
}
.page-subtitle--histoire {
  margin: 12px auto 0;
  text-align: center;
}

/* Section backgrounds */
.section--black-soft { background: var(--black-soft); }
.section--brown      { background: var(--brown); }
.section--no-bottom  { padding-bottom: 0; }
.section--no-top     { padding-top: 0; }

/* Titres & textes */
.section-title--dark { color: var(--black); }
.page-title--histoire { font-size: clamp(38px, 7vw, 86px); }
.text-orange { color: var(--orange); }
.text-center { text-align: center; }

/* Accent bar histoire */
.accent-bar--history { margin-top: 28px; }

/* Info card sticky */
.info-card--sticky { position: sticky; top: 100px; }

/* Form card flex (contact sidebar) */
.form-card--flex { flex: 1 1 0; min-width: 0; }

/* Espacement formulaires */
.form-group--top  { margin-top: 18px; }
.form-about--top  { margin-top: 24px; }
.event-meta--spaced { margin-top: 14px; }
.textarea--tall   { min-height: 140px; }

/* Ticket wraps — margin ajouté au CSS (suppression inline) */
.ticket-counter-wrap { margin-top: 18px; }
.ticket-types-wrap   { margin-top: 18px; }

/* Badges nation (couleurs cardinales) */
.badge--caraibes { color: #00b4d8; }
.badge--senegal  { color: #00a86b; }
.badge--kongo    { color: #e63946; }
.badge--cdi      { color: #f4a261; }
.badge--cameroun { color: #2dc653; }
.badge--mali     { color: #f9c74f; }
.badge--maghreb  { color: #e63946; }
.badge--diaspora { color: var(--beige); }

/* Shields preview (index.html) — mêmes couleurs */
.shield--caraibes { color: #00b4d8; }
.shield--senegal  { color: #00a86b; }
.shield--kongo    { color: #e63946; }
.shield--cdi      { color: #f4a261; }
.shield--cameroun { color: #2dc653; }
.shield--mali     { color: #f9c74f; }
.shield--maghreb  { color: #e63946; }
.shield--diaspora { color: var(--beige); }

/* Champion accent bars spans */
.bar-caraib-1 { background: #00b4d8; }
.bar-caraib-2 { background: #0096c7; }
.bar-caraib-3 { background: #0077b6; }
.bar-senega-1 { background: #00a86b; }
.bar-senega-2 { background: #f9c74f; }
.bar-senega-3 { background: #e63946; }

/* Roster dynamique — styles de transition */
.roster-section { transition: opacity .25s ease; }
.roster-section.roster-loading { opacity: .4; pointer-events: none; }
.roster-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(217,87,34,.12);
  border: 1px solid rgba(217,87,34,.3);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.nation-card.active-nation {
  box-shadow: 0 0 0 2px var(--orange), 0 14px 36px rgba(0,0,0,.5);
}
.nation-card-btn.active { color: var(--orange); border-color: var(--orange); }

/* ============================================================
   COMPLÉMENTS v2 — Formulaires & Inscriptions & Contact
   ============================================================ */

/* Asterisque champ requis */
.req { color: var(--orange); margin-left: 2px; font-weight: 700; }

/* En-tête form-card */
.form-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.form-card-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius);
  background: rgba(217,87,34,.12);
  border: 1px solid rgba(217,87,34,.26);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.form-card-icon svg { width: 20px; height: 20px; }
.form-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
}

/* Alias radio dot (inscriptions v2) */
.type-radio-dot {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: var(--ease);
  position: relative;
}
.type-radio-dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0;
  transition: opacity var(--ease);
  position: absolute;
}
.type-option.selected .type-radio-dot { border-color: var(--orange); }
.type-option.selected .type-radio-dot::after { opacity: 1; }

/* Inscription cards (visual-card sur inscriptions.html) */
.insc-card { min-height: 380px; }
.insc-card-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.insc-card-icon svg { width: 22px; height: 22px; }
.insc-card-title {
  font-family: var(--font-title);
  font-size: clamp(22px, 2.8vw, 34px);
  text-transform: uppercase;
  color: var(--sand);
  line-height: 1;
  margin-bottom: 10px;
}
.insc-card-desc {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 380px;
  margin-bottom: 18px;
}

/* Info card (contact sidebar — version liste) */
.info-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.info-card-list { display: flex; flex-direction: column; gap: 16px; }
.info-card-item { display: flex; align-items: flex-start; gap: 14px; }
.info-card-item > .info-card-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(217,87,34,.1);
  border: 1px solid rgba(217,87,34,.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-card-item > .info-card-icon svg { width: 15px; height: 15px; }
.info-label { font-size: .72rem; color: var(--muted); margin-bottom: 2px; }
.info-value  { font-size: .88rem; color: var(--white); font-weight: 600; }

/* Watermark Afrique sidebar contact */
.contact-africa-watermark {
  display: flex;
  justify-content: center;
  opacity: .4;
  pointer-events: none;
  margin-top: 8px;
}
.contact-africa-watermark svg { width: 90px; height: 90px; }

/* Responsive inscriptions v2 */
@media (max-width: 768px) {
  .insc-card { min-height: 280px; }
  .insc-card-title { font-size: 22px; }
}

/* ============================================================
   PAGES LÉGALES (mentions-legales, politique, cgv)
   ============================================================ */
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 0 64px;
}
.legal-block {
  margin-bottom: 40px;
}
.legal-block h2 {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.legal-block p {
  color: var(--beige-dim);
  line-height: 1.75;
  margin-bottom: 10px;
}
.legal-block strong { color: var(--beige); }
.legal-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.legal-list li {
  color: var(--beige-dim);
  padding: 6px 0 6px 20px;
  position: relative;
  line-height: 1.6;
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* ============================================================
   V4 — DRAPEAUX, PARTENAIRES, ROSTER À VENIR
   ============================================================ */

/* --- Nation card flag badge (nations.html) --- */
.nation-card-photo { position: relative; }
.nation-flag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 52px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(239,224,200,.35);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  z-index: 2;
  background: rgba(0,0,0,.3);
}
.nation-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Home nation preview flag (index.html) --- */
.nation-home-flag {
  width: 74px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(8,6,4,.08);
  border: 1px solid rgba(8,6,4,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.nation-home-flag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}

/* --- Roster à venir --- */
.roster-coming-soon {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, rgba(42,23,13,.9), rgba(8,6,4,.92));
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  margin-top: 24px;
}
.roster-coming-flag {
  width: 112px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(239,224,200,.28);
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.roster-coming-flag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  display: block;
}
.roster-coming-flag-fallback {
  width: 84px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid rgba(239,224,200,.15);
  flex-shrink: 0;
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.roster-coming-content h3 {
  font-family: var(--font-title);
  text-transform: uppercase;
  color: var(--sand);
  font-size: clamp(28px, 4vw, 46px);
  line-height: .95;
  letter-spacing: .04em;
}
.roster-coming-content p {
  color: var(--muted);
  margin-top: 10px;
  max-width: 720px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .roster-coming-soon { flex-direction: column; align-items: flex-start; }
  .roster-coming-flag { width: 100%; max-width: 160px; height: 92px; }
}

/* --- Partners marquee section --- */
.partners-strip-section {
  background: var(--black-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 52px 0 48px;
}
.partners-strip-section .container { margin-bottom: 0; }
.partners-strip-section .section-title { margin-top: 6px; }
.partners-strip-section .section-intro {
  color: var(--muted);
  max-width: 560px;
  margin-top: 10px;
  line-height: 1.6;
}
.partners-marquee {
  overflow: hidden;
  width: 100%;
  margin-top: 40px;
}
.partners-track {
  display: flex;
  width: max-content;
  animation: partners-scroll 38s linear infinite;
  gap: 0;
}
.partners-marquee:hover .partners-track {
  animation-play-state: paused;
}
.partner-logo-card {
  flex: 0 0 auto;
  min-width: 180px;
  height: 88px;
  margin-right: 18px;
  border: 1px solid var(--border);
  background: rgba(239,224,200,.06);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  transition: border-color .2s, background .2s;
}
.partner-logo-card:hover {
  border-color: rgba(239,224,200,.2);
  background: rgba(239,224,200,.07);
}
.partner-logo-card img {
  max-height: 58px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(.85);
  transition: filter .2s;
}
.partner-logo-card:hover img { filter: brightness(0) invert(1) opacity(1); }
.partner-logo-fallback {
  color: var(--sand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .78rem;
  text-align: center;
  line-height: 1.3;
}
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .partner-logo-card { min-width: 148px; height: 74px; padding: 12px 16px; }
  .partners-track { animation-duration: 28s; }
}

/* ============================================================
   V6 — NATION SHOWCASE CARDS (index.html)
   ============================================================ */

/* Override old nations-preview background */
.nations-preview {
  background:
    radial-gradient(circle at 20% 20%, rgba(217,87,34,.10), transparent 35%),
    linear-gradient(135deg, #efe0c8 0%, #e6d3b8 100%) !important;
  padding: 96px 0 !important;
  overflow: hidden;
}
.nations-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 42px !important;
}

/* Grid 4 cols on desktop */
.nations-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

/* Hide old nation-card-home if present */
.nation-card-home { display: none !important; }

/* Base card */
.nation-showcase-card {
  position: relative;
  min-height: 190px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(8,6,4,.92), rgba(42,23,13,.88));
  border: 1px solid rgba(239,224,200,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  display: flex;
  align-items: stretch;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nation-showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0,0,0,.28);
  border-color: var(--orange);
  text-decoration: none;
}
.nation-showcase-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: var(--nation-accent, var(--orange));
  opacity: .9;
}

/* Per-nation accent colors */
.nation-showcase-card--caraibes  { --nation-accent: #00b4d8; }
.nation-showcase-card--senegal   { --nation-accent: #00a86b; }
.nation-showcase-card--kongo     { --nation-accent: #e63946; }
.nation-showcase-card--cdi       { --nation-accent: #f4a261; }
.nation-showcase-card--cameroun  { --nation-accent: #2dc653; }
.nation-showcase-card--mali      { --nation-accent: #f9c74f; }
.nation-showcase-card--maghreb   { --nation-accent: #e8374c; }
.nation-showcase-card--diaspora  { --nation-accent: #c9a77a; }

/* Flag area */
.nation-showcase-flag {
  width: 52%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(255,255,255,.06);
  border-right: 1px solid rgba(239,224,200,.08);
}
.nation-showcase-flag img {
  width: 100%;
  max-height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.38));
  display: block;
}

/* Text area */
.nation-showcase-content {
  flex: 1;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.nation-showcase-label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--nation-accent, var(--orange));
  font-weight: 800;
}
.nation-showcase-content strong {
  font-family: var(--font-title);
  text-transform: uppercase;
  color: var(--sand);
  font-size: clamp(22px, 1.8vw, 34px);
  line-height: .95;
  display: block;
}

/* Responsive nations grid */
@media (max-width: 1100px) {
  .nations-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 860px) {
  .nations-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .nation-showcase-card { min-height: 160px; }
}
@media (max-width: 640px) {
  .nations-preview-header { display: block; }
  .nations-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .nation-showcase-card { min-height: 130px; }
  .nation-showcase-flag { width: 44%; padding: 14px; }
  .nation-showcase-flag img { max-height: 80px; }
  .nation-showcase-content { padding: 16px 12px; }
  .nation-showcase-content strong { font-size: clamp(18px, 4.5vw, 26px); }
}

/* ============================================================
   V6 — PARTNERS STRIP (index.html)
   ============================================================ */

.partners-strip-section {
  background:
    radial-gradient(circle at center, rgba(217,87,34,.08), transparent 38%),
    var(--black) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  overflow: hidden !important;
  padding: 88px 0 !important;
}
.partners-header {
  text-align: center;
  margin-bottom: 44px;
}
.partners-strip-section .section-label {
  color: var(--orange);
  text-align: center;
  display: block;
}
.partners-strip-section .section-title {
  color: var(--sand) !important;
  text-align: center;
  opacity: 1;
}
.partners-marquee {
  width: 100%;
  overflow: hidden;
}
.partners-track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  animation: partners-scroll 34s linear infinite !important;
  gap: 0;
}
.partners-marquee:hover .partners-track { animation-play-state: paused; }
.partner-logo-card {
  flex: 0 0 auto !important;
  width: 230px !important;
  height: 112px !important;
  margin-right: 22px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(239,224,200,.20) !important;
  background: linear-gradient(145deg, rgba(239,224,200,.10), rgba(255,255,255,.04)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  transition: border-color .2s, transform .2s;
}
.partner-logo-card:hover {
  border-color: rgba(239,224,200,.38) !important;
  transform: translateY(-3px);
}
.partner-logo-card img {
  max-width: 100% !important;
  max-height: 72px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
  display: block;
}
@media (max-width: 768px) {
  .partner-logo-card { width: 180px !important; height: 90px !important; padding: 18px !important; }
  .partners-track { animation-duration: 28s !important; }
}

/* ============================================================
   V6 — ROSTER COMING CARD (nations.html)
   ============================================================ */

.roster-section {
  background:
    radial-gradient(circle at 15% 20%, rgba(217,87,34,.12), transparent 32%),
    linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%) !important;
  border-top: 1px solid var(--border) !important;
  padding: 64px 0 72px;
}
.roster-coming-card {
  --nation-accent: var(--orange);
  position: relative;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: center;
  border-radius: 24px;
  border: 1px solid rgba(239,224,200,.18);
  background: linear-gradient(135deg, rgba(42,23,13,.88), rgba(8,6,4,.95));
  padding: 48px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.roster-coming-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--nation-accent);
  border-radius: 24px 0 0 24px;
}
.roster-coming-visual {
  height: 260px;
  border-radius: 20px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.10), transparent 55%),
    rgba(239,224,200,.05);
  border: 1px solid rgba(239,224,200,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
}
.roster-coming-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.38));
  display: block;
}
.roster-coming-copy .roster-title {
  font-family: var(--font-title) !important;
  font-size: clamp(38px, 5.5vw, 72px) !important;
  text-transform: uppercase !important;
  line-height: .9 !important;
  color: var(--sand) !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.roster-coming-copy h3 {
  font-family: var(--font-title);
  text-transform: uppercase;
  color: var(--nation-accent);
  font-size: clamp(26px, 3.5vw, 48px);
  line-height: .95;
  margin-bottom: 14px;
}
.roster-coming-copy .section-label {
  color: var(--orange);
  margin-bottom: 10px;
  display: block;
}
.roster-coming-copy p {
  color: var(--muted);
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.65;
}
.roster-coming-copy .btn-primary {
  margin-top: 26px;
  display: inline-flex;
}

/* Active nation card */
.nation-card.active-nation {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 2px rgba(217,87,34,.30), 0 22px 46px rgba(0,0,0,.32) !important;
}

/* Responsive roster card */
@media (max-width: 900px) {
  .roster-coming-card {
    grid-template-columns: 1fr;
    padding: 32px 28px;
    gap: 28px;
  }
  .roster-coming-visual { height: 200px; }
}
@media (max-width: 520px) {
  .roster-coming-card { border-radius: 18px; padding: 22px 18px; }
  .roster-coming-visual { height: 158px; padding: 24px; }
}

/* ============================================================
   V7 — NATION SHOWCASE CARDS : drapeau pleine colonne
   ============================================================ */

.nation-showcase-card {
  display: grid !important;
  grid-template-columns: 42% 58% !important;
  align-items: stretch !important;
  min-height: 190px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(8,6,4,.94), rgba(42,23,13,.90)) !important;
  border: 1px solid rgba(8,6,4,.16) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  text-decoration: none !important;
  position: relative !important;
}
.nation-showcase-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.24) !important;
  border-color: var(--orange) !important;
}

/* Flag : pleine hauteur, cover */
.nation-showcase-flag {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 190px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.06) !important;
  display: block !important;
  border-right: none !important;
}
.nation-showcase-flag img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  filter: saturate(1.05) contrast(1.04) !important;
}
/* Subtle vignette sur le drapeau */
.nation-showcase-flag::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(8,6,4,.04), rgba(8,6,4,.22)) !important;
  pointer-events: none !important;
}

/* Text area */
.nation-showcase-content {
  padding: 26px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.nation-showcase-label {
  font-size: .68rem !important;
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  color: var(--nation-accent, var(--orange)) !important;
  font-weight: 800 !important;
  margin-bottom: 0 !important;
}
.nation-showcase-content strong {
  font-family: var(--font-title) !important;
  text-transform: uppercase !important;
  color: var(--sand) !important;
  font-size: clamp(26px, 2.2vw, 40px) !important;
  line-height: .92 !important;
  word-break: normal !important;
  display: block !important;
}

/* Bottom accent stripe */
.nation-showcase-card::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 4px !important;
  width: 100% !important;
  background: var(--nation-accent, var(--orange)) !important;
  opacity: .92 !important;
}

/* Responsive overrides */
@media (max-width: 860px) {
  .nations-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .nation-showcase-card { min-height: 165px !important; }
  .nation-showcase-flag { min-height: 165px !important; }
}
@media (max-width: 640px) {
  .nation-showcase-card { grid-template-columns: 44% 56% !important; min-height: 145px !important; }
  .nation-showcase-flag { min-height: 145px !important; }
  .nation-showcase-content { padding: 18px 14px !important; }
  .nation-showcase-content strong { font-size: 24px !important; }
}

/* ============================================================
   V7 — PARTENAIRES : logos sans cadres, fond transparent
   ============================================================ */

/* Reset .partner-logo-card (les éléments HTML existants) */
.partner-logo-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 160px !important;
  width: auto !important;
  height: 90px !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.partner-logo-card:hover {
  background: transparent !important;
  border: none !important;
  transform: none !important;
}
.partner-logo-card img {
  max-width: 160px !important;
  max-height: 72px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
  display: block;
  opacity: .88;
  transition: opacity .2s;
}
.partner-logo-card:hover img {
  opacity: 1 !important;
  filter: none !important;
}

/* Gap between logos instead of margin */
.partners-track {
  gap: 72px !important;
  animation-duration: 34s !important;
}

/* Strip section */
.partners-strip-section {
  background:
    radial-gradient(circle at center, rgba(217,87,34,.07), transparent 42%),
    var(--black) !important;
  padding: 88px 0 !important;
}
.partners-strip-section .container.partners-header {
  text-align: center;
  margin-bottom: 46px;
}
.partners-strip-section .section-title {
  color: var(--sand) !important;
  text-align: center !important;
  opacity: 1 !important;
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .partners-track { gap: 46px !important; animation-duration: 28s !important; }
  .partner-logo-card { min-width: 120px !important; height: 72px !important; }
  .partner-logo-card img { max-width: 130px !important; max-height: 58px !important; }
}

/* ============================================================
   V8 — NATION SHOWCASE : noms non coupés + proportions
   ============================================================ */

.nation-showcase-card {
  grid-template-columns: 40% 60% !important;
}
.nation-showcase-content {
  padding: 24px 20px !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.nation-showcase-content strong {
  font-size: clamp(23px, 1.75vw, 34px) !important;
  line-height: .93 !important;
  letter-spacing: -.02em !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
}
/* Noms longs : taille réduite pour éviter coupure */
.nation-showcase-card--cameroun .nation-showcase-content strong,
.nation-showcase-card--maghreb  .nation-showcase-content strong,
.nation-showcase-card--diaspora .nation-showcase-content strong {
  font-size: clamp(21px, 1.55vw, 30px) !important;
}
.nation-showcase-card--cdi .nation-showcase-content strong {
  font-size: clamp(19px, 1.4vw, 27px) !important;
  line-height: .96 !important;
}

/* Sur écrans intermédiaires : 2 cols centrées */
@media (max-width: 1200px) {
  .nations-cards-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 768px) {
  .nations-cards-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px;
  }
  .nation-showcase-card {
    grid-template-columns: 42% 58% !important;
    min-height: 150px !important;
  }
  .nation-showcase-flag { min-height: 150px !important; }
  .nation-showcase-content strong {
    font-size: clamp(24px, 7.5vw, 34px) !important;
    letter-spacing: -.01em !important;
  }
  .nation-showcase-card--cameroun .nation-showcase-content strong,
  .nation-showcase-card--maghreb  .nation-showcase-content strong,
  .nation-showcase-card--diaspora .nation-showcase-content strong,
  .nation-showcase-card--cdi      .nation-showcase-content strong {
    font-size: clamp(22px, 6.5vw, 30px) !important;
  }
}

/* ============================================================
   V8 — PARTENAIRES : .partner-logo-item sans cadre
   ============================================================ */

.partners-strip-section {
  background:
    radial-gradient(circle at center, rgba(217,87,34,.07), transparent 42%),
    var(--black) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  overflow: hidden !important;
  padding: 88px 0 !important;
}
.partners-track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  gap: 78px !important;
  animation: partners-scroll 34s linear infinite !important;
  margin: 0 !important;
  padding: 0 !important;
}
.partner-logo-item {
  flex: 0 0 auto;
  min-width: 180px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible;
}
.partner-logo-item img {
  display: block;
  max-width: 190px;
  max-height: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: .9;
  transition: opacity .2s;
}
.partner-logo-item:hover img { opacity: 1; }

/* Neutralize old .partner-logo-card completely */
.partner-logo-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.partner-logo-card img {
  filter: none !important;
  background: transparent !important;
}

@media (max-width: 768px) {
  .partners-track { gap: 50px !important; animation-duration: 28s !important; }
  .partner-logo-item { min-width: 140px !important; height: 74px !important; }
  .partner-logo-item img { max-width: 145px !important; max-height: 60px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   V9 — FINITION INDEX — NOMS NATIONS + LOGOS PARTENAIRES
   ─────────────────────────────────────────────────────────────────── */

/* Grille nations : 4 colonnes max 1120px */
.nations-cards-grid {
  grid-template-columns: repeat(4, minmax(280px, 1fr)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Carte nation : plus d'espace texte */
.nation-showcase-card {
  grid-template-columns: 38% 62% !important;
  min-height: 190px !important;
}

/* Nom nation : taille et wrapping */
.nation-showcase-content strong {
  font-size: clamp(24px, 1.75vw, 34px) !important;
  letter-spacing: -.025em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Noms longs : taille réduite */
.nation-showcase-card--cameroun .nation-showcase-content strong,
.nation-showcase-card--maghreb  .nation-showcase-content strong,
.nation-showcase-card--diaspora .nation-showcase-content strong {
  font-size: clamp(22px, 1.55vw, 30px) !important;
}

/* Côte d'Ivoire : taille encore réduite */
.nation-showcase-card--cdi .nation-showcase-content strong {
  font-size: clamp(21px, 1.45vw, 29px) !important;
}

/* Logos partenaires : taille uniforme */
.partner-logo-item {
  min-width: 190px !important;
  height: 92px !important;
}
.partner-logo-item img {
  max-width: 210px !important;
  max-height: 82px !important;
}

/* Responsive nations ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nations-cards-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .nations-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .nation-showcase-card {
    grid-template-columns: 38% 62% !important;
    min-height: 160px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   V10 — CORRECTION LOGOS PARTENAIRES — CSS DÉFINITIF COMPLET
   Remplace et neutralise tous les blocs partners précédents.
   ─────────────────────────────────────────────────────────────────── */

/* Section principale */
.partners-strip-section {
  background:
    radial-gradient(circle at center, rgba(217,87,34,.07), transparent 42%),
    var(--black) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  overflow: hidden !important;
  padding: 88px 0 !important;
}

.partners-header {
  text-align: center !important;
  margin-bottom: 46px !important;
}

.partners-strip-section .section-label,
.partners-strip-section .section-title {
  text-align: center !important;
}

.partners-strip-section .section-title {
  color: var(--sand) !important;
  opacity: 1 !important;
  text-shadow: 0 8px 30px rgba(0,0,0,.65) !important;
}

/* Marquee */
.partners-marquee {
  width: 100% !important;
  overflow: hidden !important;
  margin-top: 40px !important;
}

.partners-track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  gap: 78px !important;
  animation: partners-scroll 34s linear infinite !important;
}

.partners-marquee:hover .partners-track {
  animation-play-state: paused !important;
}

/* Item logo — zéro cadre, zéro fond CSS */
.partner-logo-item {
  flex: 0 0 auto !important;
  min-width: 190px !important;
  height: 92px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.partner-logo-item img {
  display: block !important;
  max-width: 210px !important;
  max-height: 82px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Neutraliser .partner-logo-card (ancienne classe, plus utilisée) */
.partner-logo-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.partner-logo-card img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.partner-logo-fallback { display: none !important; }

/* Keyframes marquee (redéfini pour priorité) */
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .partners-track {
    gap: 50px !important;
    animation-duration: 28s !important;
  }
  .partner-logo-item {
    min-width: 150px !important;
    height: 74px !important;
  }
  .partner-logo-item img {
    max-width: 155px !important;
    max-height: 62px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   V11 — PARTENAIRES EN ATTENTE LOGOS TRANSPARENTS
   Capsules visuelles assumées (fond beige/noir discret) — temporaire.
   À retirer dès réception des vrais PNG RGBA ou SVG transparents.
   ─────────────────────────────────────────────────────────────────── */

.partner-logo-item {
  flex: 0 0 auto !important;
  min-width: 210px !important;
  height: 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(239, 224, 200, 0.08) !important;
  border: 1px solid rgba(239, 224, 200, 0.16) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.partner-logo-item img {
  display: block !important;
  max-width: 185px !important;
  max-height: 72px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.partners-track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  gap: 28px !important;
  animation: partners-scroll 34s linear infinite !important;
}

@media (max-width: 768px) {
  .partner-logo-item {
    min-width: 160px !important;
    height: 82px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
  }
  .partner-logo-item img {
    max-width: 140px !important;
    max-height: 56px !important;
  }
  .partners-track {
    gap: 18px !important;
    animation-duration: 28s !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   V12 — CORRECTIONS PRÉ-MISE EN LIGNE
   Nations showcase, Roster CSS, sections nouvelles (Pourquoi, Piliers,
   Palmarès, Billetterie, Inscriptions), RGPD checkbox, neutralisation
   anciennes classes.
   ─────────────────────────────────────────────────────────────────── */

/* ── Nations showcase — CSS définitif ──────────────────────────────── */
.nations-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(280px, 1fr)) !important;
  gap: 18px !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.nation-showcase-card {
  position: relative !important;
  min-height: 190px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 38% 62% !important;
  align-items: stretch !important;
}

.nation-showcase-flag {
  width: 100% !important;
  height: 100% !important;
  min-height: 190px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.nation-showcase-flag img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.nation-showcase-content {
  min-width: 0 !important;
  overflow: visible !important;
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.nation-showcase-content strong {
  display: block !important;
  max-width: 100% !important;
  font-size: clamp(24px, 1.75vw, 34px) !important;
  line-height: .92 !important;
  letter-spacing: -.025em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.nation-showcase-card--cameroun .nation-showcase-content strong,
.nation-showcase-card--maghreb  .nation-showcase-content strong,
.nation-showcase-card--diaspora .nation-showcase-content strong {
  font-size: clamp(22px, 1.55vw, 30px) !important;
}

.nation-showcase-card--cdi .nation-showcase-content strong {
  font-size: clamp(21px, 1.45vw, 29px) !important;
  line-height: .95 !important;
}

@media (max-width: 1100px) {
  .nations-cards-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    max-width: 760px !important;
  }
}

@media (max-width: 640px) {
  .nations-cards-grid { grid-template-columns: 1fr !important; }
  .nation-showcase-card { grid-template-columns: 40% 60% !important; min-height: 150px !important; }
  .nation-showcase-flag { min-height: 150px !important; }
  .nation-showcase-content { padding: 18px 16px !important; }
  .nation-showcase-content strong { font-size: clamp(24px, 8vw, 34px) !important; }
}

/* ── Roster section — CSS brief ────────────────────────────────────── */
.roster-section {
  background:
    radial-gradient(circle at 15% 20%, rgba(217,87,34,.12), transparent 32%),
    linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
  border-top: 1px solid var(--border);
}

.nation-card.active,
.nation-card.active-nation {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 2px rgba(217,87,34,.30), 0 22px 46px rgba(0,0,0,.32) !important;
}

.roster-coming-card {
  --nation-accent: var(--orange);
  position: relative !important;
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 42px !important;
  align-items: center !important;
  border-radius: 24px !important;
  border: 1px solid rgba(239,224,200,.18) !important;
  background: linear-gradient(135deg, rgba(42,23,13,.88), rgba(8,6,4,.95)) !important;
  padding: 42px !important;
  overflow: hidden !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.28) !important;
}

.roster-coming-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 6px !important;
  background: var(--nation-accent) !important;
}

.roster-coming-visual {
  height: 250px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.12), transparent 55%),
    rgba(239,224,200,.06) !important;
  border: 1px solid rgba(239,224,200,.20) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 34px !important;
}

.roster-coming-visual img { width: 100% !important; height: 100% !important; object-fit: contain !important; }

.roster-coming-copy .roster-title {
  font-family: var(--font-title) !important;
  font-size: clamp(42px, 6vw, 78px) !important;
  text-transform: uppercase !important;
  line-height: .9 !important;
  color: var(--sand) !important;
  margin-bottom: 18px !important;
}

.roster-coming-copy h3 {
  font-family: var(--font-title) !important;
  text-transform: uppercase !important;
  color: var(--nation-accent) !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  line-height: .95 !important;
  margin-bottom: 12px !important;
}

@media (max-width: 900px) {
  .roster-coming-card { grid-template-columns: 1fr !important; padding: 28px !important; }
  .roster-coming-visual { height: 190px !important; }
}

/* ── Nouvelles sections — Pourquoi venir ────────────────────────────── */
.pourquoi-section {
  background: radial-gradient(circle at 80% 20%, rgba(217,87,34,.06), transparent 50%), var(--black-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pourquoi-header { text-align: center; margin-bottom: 52px; }

.pourquoi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

.pourquoi-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  background: rgba(239,224,200,.04);
  border: 1px solid rgba(239,224,200,.12);
  border-radius: 16px;
}

.pourquoi-num {
  font-family: var(--font-title);
  font-size: 48px;
  line-height: 1;
  color: var(--orange);
  opacity: .35;
  letter-spacing: -.04em;
}

.pourquoi-item h3 {
  font-family: var(--font-title);
  font-size: 18px;
  text-transform: uppercase;
  color: var(--sand);
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.pourquoi-item p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.pourquoi-cta { text-align: center; }

@media (max-width: 900px) {
  .pourquoi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pourquoi-grid { grid-template-columns: 1fr; }
}

/* ── Notre mission — histoire.html ────────────────────────────────── */
.histoire-mission { background: var(--black); }
.histoire-mission-intro { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.histoire-mission-text { color: var(--muted); line-height: 1.7; margin-bottom: 16px; font-size: 16px; }

.histoire-piliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 60px;
}

.histoire-pilier {
  padding: 28px;
  background: rgba(239,224,200,.04);
  border: 1px solid rgba(239,224,200,.12);
  border-radius: 16px;
}

.histoire-pilier-num {
  font-family: var(--font-title);
  font-size: 42px;
  color: var(--orange);
  opacity: .4;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 12px;
}

.histoire-pilier h3 {
  font-family: var(--font-title);
  text-transform: uppercase;
  color: var(--sand);
  font-size: 20px;
  margin-bottom: 10px;
}

.histoire-pilier p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.histoire-chiffres {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 52px;
  padding: 40px;
  background: rgba(217,87,34,.06);
  border: 1px solid rgba(217,87,34,.18);
  border-radius: 20px;
}

.histoire-chiffre { text-align: center; }
.histoire-chiffre-num { display: block; font-family: var(--font-title); font-size: clamp(42px, 5vw, 64px); color: var(--orange); line-height: 1; letter-spacing: -.04em; }
.histoire-chiffre-label { display: block; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }

.histoire-mission-cta { text-align: center; }

@media (max-width: 768px) {
  .histoire-piliers { grid-template-columns: 1fr; }
  .histoire-chiffres { gap: 28px; }
}

/* ── Palmarès — champions.html ────────────────────────────────────── */
.palmares-section { margin-top: 60px; padding-top: 60px; border-top: 1px solid var(--border); }
.palmares-title { font-family: var(--font-title); font-size: clamp(28px, 4vw, 48px); text-transform: uppercase; color: var(--sand); text-align: center; margin-bottom: 40px; letter-spacing: -.02em; }

.palmares-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 760px;
  margin: 0 auto 32px;
}

.palmares-card {
  background: rgba(239,224,200,.04);
  border: 1px solid rgba(239,224,200,.14);
  border-radius: 18px;
  padding: 32px;
}

.palmares-edition-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--orange);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}

.palmares-nation { font-family: var(--font-title); font-size: 36px; text-transform: uppercase; color: var(--sand); letter-spacing: -.02em; line-height: 1; margin-bottom: 8px; }
.palmares-role.champion-role { color: var(--orange); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 20px; }

.palmares-details { border-top: 1px solid rgba(239,224,200,.1); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.palmares-detail-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); }
.palmares-tbc { color: rgba(239,224,200,.4); font-style: italic; font-size: 12px; }

.palmares-note { text-align: center; color: var(--muted); font-size: 14px; font-style: italic; margin-bottom: 28px; }

.palmares-cta { text-align: center; }

/* btn-secondary si absent */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid rgba(239,224,200,.3);
  border-radius: 8px;
  color: var(--sand);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.btn-secondary:hover { border-color: var(--orange); background: rgba(217,87,34,.08); }

@media (max-width: 640px) {
  .palmares-grid { grid-template-columns: 1fr; }
}

/* ── Comment ça marche — billetterie.html ─────────────────────────── */
.comment-section {
  background: var(--black-soft);
  border-bottom: 1px solid var(--border);
  padding-top: 72px;
  padding-bottom: 72px;
}

.comment-header { text-align: center; margin-bottom: 48px; }

.comment-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 36px;
}

.comment-step {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: rgba(239,224,200,.04);
  border: 1px solid rgba(239,224,200,.1);
  border-radius: 14px;
}

.comment-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
}

.comment-step-body h3 { font-size: 15px; font-weight: 700; color: var(--sand); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.comment-step-body p { font-size: 14px; color: var(--muted); line-height: 1.55; }

.comment-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px;
  background: rgba(217,87,34,.08);
  border: 1px solid rgba(217,87,34,.22);
  border-radius: 10px;
  color: var(--sand);
  font-size: 14px;
  line-height: 1.6;
}

.comment-note svg { flex-shrink: 0; margin-top: 2px; color: var(--orange); }

@media (max-width: 768px) {
  .comment-steps { grid-template-columns: 1fr; }
}

/* ── Tarifs card ─────────────────────────────────────────────────── */
.tarifs-card {
  margin-top: 20px;
  background: rgba(239,224,200,.04);
  border: 1px solid rgba(239,224,200,.14);
  border-radius: 14px;
  padding: 24px;
}

.tarifs-title { font-size: 16px; font-weight: 700; color: var(--sand); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }

.tarifs-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.tarifs-list li { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid rgba(239,224,200,.06); }
.tarifs-val { color: var(--sand); font-weight: 600; font-size: 13px; }

.tarifs-lieu, .tarifs-horaires {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.tarifs-maps-note { font-size: 12px; color: rgba(239,224,200,.4); font-style: italic; margin-top: 8px; }

/* ── Note inscriptions ───────────────────────────────────────────── */
.insc-note-faq { max-width: 720px; margin: 0 auto 40px; }

.insc-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: rgba(217,87,34,.08);
  border: 1px solid rgba(217,87,34,.22);
  border-radius: 10px;
  margin-bottom: 28px;
}

.insc-note svg { flex-shrink: 0; margin-top: 2px; }
.insc-note strong { display: block; color: var(--sand); font-size: 15px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.insc-note p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }

.insc-faq { display: flex; flex-direction: column; gap: 16px; }
.insc-faq-item { padding: 18px 20px; background: rgba(239,224,200,.04); border: 1px solid rgba(239,224,200,.1); border-radius: 10px; }
.insc-faq-item h3 { color: var(--sand); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.insc-faq-item p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }

/* ── RGPD checkbox ───────────────────────────────────────────────── */
.form-group--checkbox { margin-top: 20px; margin-bottom: 8px; }

.checkbox-label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--orange);
  cursor: pointer;
}

.has-error .checkbox-label span { color: var(--orange); }

/* ── Neutraliser anciennes classes obsolètes ─────────────────────── */
.nation-card-home,
.nation-home-flag,
.shield,
.shield-placeholder {
  display: none !important;
}

.partner-logo-fallback { display: none !important; }

/* ── Contact — sidebar items ajoutés ────────────────────────────── */
.contact-cta-billet {
  padding-top: 12px;
  border-top: 1px solid rgba(239,224,200,.1);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════
   V13 — MODIFICATIONS CLIENT
   Partenaires sans cadres, histoire text-only, MVP honor, drapeaux,
   roster-coming-visual sans cadre, billetterie courtside, admin.
   ─────────────────────────────────────────────────────────────────── */

/* ── Partenaires — sans cadres (override V11 capsules) ──────────────────── */
.partner-logo-item {
  flex: 0 0 auto !important;
  min-width: 190px !important;
  height: 92px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

.partner-logo-item img {
  display: block !important;
  max-width: 210px !important;
  max-height: 82px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ── Histoire — grille text-only ────────────────────────────────────────── */
.histoire-editorial-grid--text-only {
  grid-template-columns: 1fr !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.histoire-editorial-grid--text-only .histoire-editorial-text {
  max-width: 780px;
  margin: 0 auto;
}

/* ── Drapeaux nations — object-fit: contain (pas de rognage) ────────────── */
.nation-card .nation-flag img,
.nation-flag img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 6px !important;
}

/* ── Roster-coming-visual — sans cadre ──────────────────────────────────── */
.roster-coming-visual {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.roster-coming-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── MVP Honor section ──────────────────────────────────────────────────── */
.mvp-honor-section {
  background: linear-gradient(135deg, var(--black), var(--black-soft));
  border-top: 1px solid var(--border);
  padding-top: 80px;
  padding-bottom: 80px;
}

.section-heading--center {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 42px;
}

.section-intro {
  color: var(--muted);
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
}

.mvp-honor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.mvp-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 34px 34px 34px 44px;
  background: linear-gradient(145deg, rgba(42,23,13,.88), rgba(8,6,4,.95));
  overflow: hidden;
}

.mvp-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--orange);
}

.mvp-edition {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.mvp-card h3 {
  font-family: var(--font-title);
  text-transform: uppercase;
  color: var(--sand);
  font-size: clamp(36px, 4vw, 60px);
  line-height: .9;
  margin-bottom: 14px;
}

.mvp-card p { color: var(--muted); }
.mvp-card strong { color: var(--white, #fff); }

@media (max-width: 768px) {
  .mvp-honor-grid { grid-template-columns: 1fr; }
  .mvp-card { padding: 28px 28px 28px 36px; }
}

/* ── Billetterie — Courtside payment zone ───────────────────────────────── */
.courtside-payment-zone { margin-top: 16px; margin-bottom: 8px; }

.courtside-payment-card {
  padding: 20px 24px;
  background: rgba(217,87,34,.06);
  border: 1px solid rgba(217,87,34,.28);
  border-radius: 12px;
}

.courtside-payment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--sand);
  font-size: 15px;
}

.courtside-payment-desc { color: var(--muted); font-size: 14px; margin-bottom: 14px; }

.courtside-pay-btn { display: inline-flex; align-items: center; gap: 8px; }

.courtside-pay-pending {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  padding: 10px 14px;
  background: rgba(239,224,200,.04);
  border: 1px solid rgba(239,224,200,.1);
  border-radius: 8px;
}

/* ── Billetterie — Google Maps link ─────────────────────────────────────── */
.tarifs-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--orange);
  text-decoration: none;
  margin-top: 8px;
  font-weight: 600;
}
.tarifs-maps-link:hover { text-decoration: underline; }

/* Responsive partenaires */
@media (max-width: 768px) {
  .partner-logo-item {
    min-width: 140px !important;
    height: 72px !important;
  }
  .partner-logo-item img {
    max-width: 145px !important;
    max-height: 60px !important;
  }
}

/* ============================================================
   V14 — Corrections ciblées (nations drapeaux + vidéo + champions)
   ============================================================ */

/* ── Drapeaux nations — plus grands, sans cadre ─────────────────────────── */
.nation-flag {
  width: 72px !important;
  height: 52px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.nation-flag img,
.nation-card .nation-flag img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

/* ── Champion icon-wrap — drapeau remplace l'icône ──────────────────────── */
.champion-icon-wrap {
  width: 56px !important;
  height: 40px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.25) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.champion-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  display: block;
}

/* ── Section vidéo recap ─────────────────────────────────────────────────── */
.video-recap-section {
  padding: 64px 0 40px;
}
.video-recap-section .section-label { color: var(--orange); }
.video-recap-section .section-title { margin-top: 4px; margin-bottom: 32px; }
.video-recap-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.video-recap-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* ratio 16:9 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.65);
  border: 1px solid var(--border);
}
.video-recap-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Toast roster bloqué ─────────────────────────────────────────────────── */
.roster-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--brown);
  color: var(--white);
  border: 1px solid rgba(217,87,34,.5);
  border-radius: var(--radius-lg);
  padding: 14px 26px;
  font-size: .92rem;
  font-weight: bold;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 6px 28px rgba(0,0,0,.55);
}
.roster-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 480px) {
  .roster-toast {
    white-space: normal;
    text-align: center;
    left: 16px;
    right: 16px;
    transform: translateX(0) translateY(16px);
    width: calc(100% - 32px);
  }
  .roster-toast.show {
    transform: translateX(0) translateY(0);
  }
}

/* ============================================================
   V14b — Section vidéo YouTube (edition-recap) — remplacement
   ============================================================ */
.edition-recap {
  padding: 80px 24px;
  background: #050505;
  color: var(--white);
}
.edition-recap .section-kicker {
  text-align: center;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .35em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.edition-recap h2 {
  text-align: center;
  font-family: var(--font-title);
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.youtube-wrapper {
  width: min(100%, 1120px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255,255,255,.12);
}
.youtube-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
@media (max-width: 768px) {
  .edition-recap { padding: 56px 16px; }
  .youtube-wrapper { border-radius: 12px; }
}

/* ============================================================
   V15 — Champions : drapeaux sans cadre + MVP vidéos
   ============================================================ */

/* ── champion-icon-wrap : drapeau agrandi, sans cadre ───────────────────── */
.champion-icon-wrap {
  width: 110px !important;
  height: 74px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: block !important;
  margin-top: 18px !important;
}
.champion-icon-wrap img {
  width: 110px !important;
  height: 74px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  display: block !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Section MVP vidéos ─────────────────────────────────────────────────── */
.mvp-section {
  padding: 80px 24px;
  background: var(--black-soft);
}
.mvp-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: min(100%, 1320px);
  margin: 0 auto;
}
.mvp-video-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 520px;
  background: #000;
}
.mvp-video-card video {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  object-fit: cover;
}
.mvp-video-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.82),
    rgba(0,0,0,.35),
    transparent
  );
}
.mvp-video-caption span {
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.mvp-video-caption h3 {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-size: clamp(34px, 5vw, 72px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.mvp-video-caption p {
  max-width: 560px;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .mvp-video-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .mvp-video-card,
  .mvp-video-card video {
    min-height: 420px;
  }
  .mvp-video-caption {
    padding: 24px;
  }
}
@media (max-width: 520px) {
  .mvp-video-card,
  .mvp-video-card video {
    min-height: 360px;
  }
  .mvp-video-caption {
    padding: 20px;
  }
  .mvp-section {
    padding: 56px 0;
  }
}

/* ============================================================
   V16 — Menu mobile header — système complet (remplace open/display)
   Approche : opacity + visibility + transform pour compatibilité
   maximale mobile (iOS Safari, Android Chrome, WebView)
   ============================================================ */

/* ============================================================
   V20 — MENU MOBILE + LOGO FOND BLANC — BLOC UNIQUE AUTORITAIRE
   Remplace V16 / V18 / V19 entièrement.
   ============================================================ */

/* ---- Logo header : fond blanc pill ---- */
.header-logo {
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1001 !important;
}
.header-logo img {
  height: 42px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}
@media (max-width: 900px) {
  .header-logo { padding: 4px 10px !important; }
  .header-logo img { height: 36px !important; }
}

/* ---- Logo footer : fond blanc pill ---- */
.footer-brand > img:first-child {
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  height: 52px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  box-sizing: content-box !important;
}

/* ---- MENU MOBILE : masqué par défaut, display:flex quand ouvert ---- */
.mobile-nav {
  display: none;
  position: fixed;
  top: 66px;
  left: 0;
  right: 0;
  z-index: 1200;
  flex-direction: column;
  padding: 18px 20px 22px;
  background: rgba(5, 5, 5, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ouvert — JS ajoute les deux classes pour compatibilité maximale */
.mobile-nav.is-open,
.mobile-nav.open {
  display: flex !important;
  flex-direction: column !important;
}

/* Liens du menu mobile */
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--white);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .92rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  padding: 0;
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a.active { color: var(--orange); }
.mobile-nav .btn-primary {
  justify-content: center;
  margin-top: 14px;
  min-height: 52px;
  border-radius: 10px;
  background: var(--orange);
  color: var(--white);
  border-bottom: 0;
}

/* ---- BURGER : animation pour is-open ET open ---- */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: transparent;
  border: 0;
  margin-left: auto;
  position: relative;
  z-index: 1300;
  pointer-events: auto;
}
.burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.burger.is-open span:nth-child(1),
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2),
.burger.open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3),
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Z-INDEX hiérarchie header ---- */
.header { position: relative; z-index: 1100; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .header { height: 66px !important; padding: 0 20px !important; }
  .header-nav, .header-cta-wrap { display: none !important; }
  .burger { display: flex !important; }
}
@media (min-width: 901px) {
  .mobile-nav { display: none !important; }
  .burger     { display: none !important; }
}

/* ============================================================
   V21 — SÉCURISATION FINALE MENU MOBILE (media query explicite)
   ============================================================ */
@media (max-width: 900px) {
  .header {
    z-index: 1100 !important;
  }
  .burger {
    display: flex !important;
    position: relative !important;
    z-index: 1300 !important;
    pointer-events: auto !important;
  }
  .mobile-nav {
    position: fixed !important;
    top: 66px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
    background: rgba(5, 5, 5, 0.98) !important;
  }
  .mobile-nav.open,
  .mobile-nav.is-open {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ============================================================
   V22 — FOOTER LOGO : corriger la pilule trop large
   ============================================================ */
.footer-brand > img:first-child {
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  height: 42px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: inline-block !important;
  box-sizing: border-box !important;
}

/* ============================================================
   V23 — ÉTOILES CHAMPIONS + COURTSIDE INFO ZONE
   ============================================================ */

/* Étoile champion — sobre, orange, alignée */
.champion-star,
.nation-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  color: var(--orange);
  font-size: 0.72em;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}
.champion-star svg,
.nation-star svg {
  width: 0.85em;
  height: 0.85em;
  fill: var(--orange);
  stroke: none;
}

/* Courtside info zone — remplace la zone paiement */
.courtside-info-zone {
  margin-top: 18px;
}
.courtside-info-card {
  background: rgba(217,87,34,.1);
  border: 1px solid rgba(217,87,34,.3);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.courtside-info-card strong {
  color: var(--orange);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.courtside-info-card p {
  color: rgba(248,241,231,.75);
  font-size: .88rem;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   V24 — champion-star--top : étoile AU-DESSUS du nom
   ============================================================ */

/* Variante display:block — se place sur sa propre ligne au-dessus du nom */
.champion-star--top {
  display: block;
  margin: 0 0 7px 0;
  color: var(--orange);
  line-height: 1;
  text-shadow: 0 0 16px rgba(217,87,34,.4);
}
.champion-star--top svg {
  fill: var(--orange);
  stroke: none;
  display: block;
}

/* Index.html — nation-showcase-content déjà flex-column */
.nation-showcase-content .champion-star--top {
  align-self: flex-start;
  margin-bottom: 5px;
}
.nation-showcase-content .champion-star--top svg {
  width: clamp(16px, 1.4vw, 22px);
  height: clamp(16px, 1.4vw, 22px);
}

/* Nations.html — nation-card-name avec star au-dessus */
.nation-card-name--champion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.nation-card-name--champion .champion-star--top svg {
  width: 18px;
  height: 18px;
}

/* Champions.html — visual-card-body */
.visual-card-body .champion-star--top svg {
  width: clamp(22px, 2.5vw, 34px);
  height: clamp(22px, 2.5vw, 34px);
}

/* Supprimer l'ancienne version inline (nation-star / champion-star sans --top) */
.nation-showcase-content .nation-star,
.nation-card-name .nation-star,
.champion-name .champion-star {
  display: none !important;
}

@media (max-width: 600px) {
  .champion-star--top svg { width: 18px !important; height: 18px !important; }
}