html, 
body, 
.tm-page {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE / Edge */
}

html::-webkit-scrollbar, 
body::-webkit-scrollbar, 
.tm-page::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Edge */
  width: 0 !important;
  height: 0 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #07101f;
  --bg-deep: #040c18;
  --c-navy: #0a1628;
  --c-mid: #0d2040;
  --surface: rgba(13, 28, 55, 0.75);
  --border: rgba(94, 170, 255, 0.10);
  --border-md: rgba(94, 170, 255, 0.20);
  --border-hi: rgba(94, 170, 255, 0.38);
  --text: #e6f1ff;
  --text-muted: rgba(170, 205, 255, 0.52);
  --text-dim: rgba(130, 175, 240, 0.32);
  --accent: #5eaaff;
  --accent2: #347dd1;
  --accent-teal: #38d4c8;
  --accent-soft: #7ec4ff;
  --accent-soft2: #369bee;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --navbar-h: clamp(52px, 7vw, 64px);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --tr: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --space-section: clamp(40px, 6vw, 80px);
  --space-inner: clamp(14px, 2.5vw, 28px);
  --page-pad: clamp(20px, 4vw, 100px); /* page edge padding for PC */
  --gap: clamp(8px, 1.4vw, 16px);

  /* ─── CYBER CUT VARIABLES ─── */
  --cut: clamp(8px, 1vw, 14px);
  --cut-sm: clamp(5px, 0.6vw, 8px);
  --cut-lg: clamp(14px, 1.6vw, 22px);

  /* CLIP-PATHS */
  --clip-card: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
  --clip-card-alt: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --clip-btn: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
  --clip-btn-r: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
  --clip-tag: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  --clip-icon: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --clip-bigcard: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}


/* 1. On autorise le défilement (on retire le hidden) */
html, body {
  overflow-y: auto; 
  
  /* 2. On cache la barre pour Firefox */
  scrollbar-width: none;
  
  /* 3. On cache la barre pour Internet Explorer et Edge (ancienne version) */
  -ms-overflow-style: none;
}

/* 4. On cache la barre pour Chrome, Safari, Opera et Edge (version récente) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* ============================================================
   GLOBAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0s);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.section-label {
  font-size: clamp(9px, 0.8vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(8px, 1vw, 14px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::before {
  content: '';
  display: block;
  width: clamp(16px, 1.8vw, 26px);
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 0.85;
  letter-spacing: 0.01em;
  color: var(--text);
}

.section-title em {
  font-style: normal;
  color: var(--accent);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative;
  font-family: var(--font-body);
  font-size: clamp(9.5px, 0.85vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  padding: clamp(9px, 1vw, 13px) clamp(16px, 2vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  clip-path: var(--clip-btn);
  transition: background var(--tr), color var(--tr), transform var(--tr), filter var(--tr);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--accent);
  color: #040e1e;
}

.btn--primary:hover {
  background: var(--accent-soft);
  filter: drop-shadow(0 0 18px rgba(94, 169, 255, 0.5));
}

.btn--az {
  background: rgba(86, 159, 243, 0.10);
  color: #7f95bc;
  outline: 1px solid rgba(94, 170, 255, 0.18);
  outline-offset: -1px;
}

.btn--az:hover {
  background: #7f95bc;
  color: #040e1e;
  outline-color: transparent;
}

.btn--az2 {
  background: rgba(82, 139, 179, 0.06);
  color: #5e7aa9;
  outline: 1px solid rgba(94, 170, 255, 0.10);
  outline-offset: -1px;
}

.btn--az2:hover {
  background: #5e7aa9;
  color: #040e1e;
  outline-color: transparent;
}

.btn--ghost {
  color: var(--text-muted);
  background: rgba(94, 170, 255, 0.04);
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
}

.btn--ghost:hover {
  color: var(--text);
  background: rgba(94, 170, 255, 0.10);
  outline-color: var(--accent);
}

.btn--sm {
  padding: clamp(6px, 0.7vw, 9px) clamp(10px, 1.2vw, 18px);
  font-size: clamp(8.5px, 0.75vw, 10.5px);
}

.tag {
  font-size: clamp(8px, 0.7vw, 10px);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(94, 170, 255, .10);
  color: var(--accent);
  outline: 1px solid rgba(94, 170, 255, .18);
  outline-offset: -1px;
  clip-path: var(--clip-tag);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 18, 32, 0.35);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background .35s, backdrop-filter .35s, border-color .35s, box-shadow .35s;
}

.navbar.scrolled {
  background: rgba(6, 20, 45, 0.85);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom-color: rgba(120, 180, 255, 0.15);
  box-shadow: 0 8px 50px rgba(0, 0, 0, .7);
}

.navbar__inner {
  max-width: 100% !important;
  margin: 0 auto;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad);
  gap: clamp(10px, 2vw, 24px);
}

.navbar__left {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 36px);
  min-width: 0;
}

.navbar__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar__logo-img {
  height: clamp(16px, 1.8vw, 22px);
  width: auto;
  object-fit: contain;
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.navbar__link {
  font-size: clamp(10px, 0.9vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(230, 241, 255, .60);
  text-decoration: none;
  padding: 8px clamp(6px, 0.9vw, 13px);
  position: relative;
  white-space: nowrap;
  transition: color var(--tr), background var(--tr);
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 13px;
  right: 13px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--tr);
}

.navbar__link:hover,
.navbar__link.active {
  color: var(--text);
}

.navbar__link:hover::after,
.navbar__link.active::after {
  transform: scaleX(1);
}

.navbar__right {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 12px);
  flex-shrink: 0;
}

.navbar__lang {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
  clip-path: var(--clip-tag);
  transition: color var(--tr), background var(--tr);
}

.navbar__lang:hover,
.navbar__lang.open {
  color: var(--text);
  background: rgba(18, 38, 74, .8);
}

.lang__chevron {
  flex-shrink: 0;
  transition: transform var(--tr);
}

.navbar__lang.open .lang__chevron {
  transform: rotate(180deg);
}

.lang__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  background: #0d1e3d;
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
  padding: 6px;
  list-style: none;
  box-shadow: 0 20px 50px rgba(0, 0, 30, .8);
  clip-path: var(--clip-card-alt);
}

.navbar__lang.open .lang__dropdown {
  display: block;
}

.lang__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--tr), color var(--tr);
}

.lang__option:hover {
  background: rgba(18, 38, 74, .9);
  color: var(--text);
}

.lang__option.active {
  color: var(--accent);
}

.navbar__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 3.5vw, 38px);
  height: clamp(32px, 3.5vw, 38px);
  color: var(--text-muted);
  text-decoration: none;
  flex-shrink: 0;
  clip-path: var(--clip-icon);
  transition: color var(--tr), background var(--tr);
}

.navbar__icon-btn:hover {
  color: var(--text);
  background: rgba(18, 38, 74, .8);
}

.navbar__icon-btn svg {
  width: clamp(18px, 1.6vw, 20px);
  height: clamp(18px, 1.6vw, 20px);
}

.badge {
  position: absolute;
  top: 2px;
  right: 1px;
  background: var(--accent);
  color: #000;
  font-size: clamp(7px, 0.65vw, 9px);
  font-weight: 700;
  min-width: clamp(13px, 1.2vw, 16px);
  height: clamp(13px, 1.2vw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
}

.navbar__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  clip-path: var(--clip-icon);
  transition: background var(--tr);
}

.navbar__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-muted);
  transition: transform var(--tr), opacity var(--tr), background var(--tr);
}

.navbar__burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--text);
}

.navbar__burger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar__burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--text);
}

.navbar__mobile {
  overflow: hidden;
  max-height: 0;
  background: rgba(4, 12, 24, .99);
  border-top: 1px solid transparent;
  transition: max-height .36s cubic-bezier(0.4, 0, 0.2, 1), border-color var(--tr);
}

.navbar__mobile.open {
  max-height: 360px;
  border-color: var(--border);
}

.navbar__mobile nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0 16px;
}

.mobile__link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 15px 24px;
  border-bottom: 1px solid var(--border);
  transition: color var(--tr), background var(--tr);
}

@media (max-width: 768px) {
  .navbar__nav { display: none !important; }
  .navbar__burger { display: flex !important; }
  .navbar__right { gap: 2px; }
  .lang__flag { font-size: 10px; }
}

@media (min-width: 769px) {
  .navbar__burger { display: none !important; }
  .navbar__nav { display: flex !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  /* ============================================================
     Hauteur LINÉAIRE, IMMÉDIATE et SANS PALIER :
       h(w) = 0.291 * w + 521.17px
     calibrée pour passer EXACTEMENT par :
       - (500px,  666.67px) -> ratio 3:4 portrait au max rétréci PC
       - (1920px, 1080px)   -> plein écran sur écran 1920x1080
     Une SEULE droite : pente constante 0.291 sur toute la plage PC.
     -> chaque pixel rétréci provoque une réduction immédiate.
     -> hero plus "portrait" en chemin (évite l'effet 1:1 perçu).

     Le min() ajoute deux garde-fous (sans rompre la linéarité) :
       - 100svh      : jamais plus grand que le viewport (ultra-wide / 4K)
       - (4/3)*100vw : à 500px de large et en dessous, on est EXACTEMENT
                       en ratio 3:4 portrait. La cassure de pente se fait
                       sous la largeur minimale d'un navigateur PC, donc
                       invisible en usage normal.
     ============================================================ */
  height: min(
    100svh,
    calc(100vw * 4 / 3),
    calc((100vw - 500px) * 0.291 + 666.67px)
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #03070f;
}

.hero__bg,
.hero__scanlines,
.hero__grid-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__bg {
  z-index: 0;
  background-image: linear-gradient(to bottom, rgba(2, 8, 16, 0.1), rgba(4, 12, 26, 1)), url('header.gif');
  background-size: cover;
  background-position: center 25%;
  will-change: transform;
}

.hero__scanlines {
  z-index: 2;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, .045) 3px, rgba(0, 0, 0, .045) 4px);
  opacity: .5;
}

.hero__grid-lines {
  z-index: 1;
  background-image:
    linear-gradient(rgba(94, 170, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 170, 255, .045) 1px, transparent 1px);
  background-size: clamp(40px, 5vw, 88px) clamp(40px, 5vw, 88px);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to top, #061226 0%, rgba(6, 18, 38, 0.6) 40%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 0 var(--page-pad) clamp(25px, 5vw, 50px);
  display: flex;
  flex-direction: column;
}

.hero__eyebrow {
  font-size: clamp(8px, 0.85vw, 11px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(8px, 1.5vw, 15px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 12px);
}

.hero__eyebrow::before {
  content: '';
  width: clamp(16px, 2vw, 30px);
  height: 2px;
  background: var(--accent);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 7.5vw, 110px);
  line-height: 0.85;
  margin: 0;
  text-transform: uppercase;
  max-width: 900px;
}

.hero__sub {
  font-size: clamp(13px, 1.1vw, 17px);
  color: rgba(215, 229, 255, 0.7);
  margin-top: 15px;
  margin-bottom: clamp(20px, 3vw, 40px);
  line-height: 1.4;
  max-width: 500px;
}

@media (min-width: 1024px) {
  .hero__sub { max-width: 35vw; }
}

.hero__stats {
  position: absolute;
  bottom: clamp(25px, 5vw, 50px);
  right: var(--page-pad);
  z-index: 6;
  display: flex;
  flex-direction: row;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: nowrap;
  align-items: flex-end;
  text-align: right;
  pointer-events: auto;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero__stat-n {
  font-size: clamp(16px, 2vw, 26px);
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(94, 170, 255, .4);
  line-height: 1;
}

.hero__stat-l {
  font-size: clamp(7px, 0.75vw, 10px);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.hero__content > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero__content > *:nth-child(1) { animation-delay: 0.1s; }
.hero__content > *:nth-child(2) { animation-delay: 0.2s; }
.hero__content > *:nth-child(3) { animation-delay: 0.3s; }
.hero__content > *:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SECTIONS — FULL PAGE WIDTH (NO CAP)
   ============================================================ */
.events__inner,
.actu__inner,
.team__inner,
.footer__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  position: relative;
  z-index: 1;
}

/* ============================================================
   UNIFIED SECTION HEADER — label above title
   ============================================================ */
.team__header,
.events__header,
.actu__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 40px);
  margin-bottom: clamp(28px, 4vw, 64px);
  flex-wrap: nowrap;
}

.team__header-titles,
.events__header-titles,
.actu__header-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.team__header-titles .section-title,
.events__header-titles .section-title,
.actu__header-titles .section-title {
  margin-top: 4px;
}

.team__header > .btn,
.actu__header > .btn,
.events__header-actions {
  flex-shrink: 0;
  margin-bottom: 6px;
}

.events__header-actions {
  display: flex;
  gap: clamp(8px, 1vw, 12px);
  flex-wrap: wrap;
}

/* ============================================================
   MOBILE — keep header buttons top-right, stack events buttons
   ============================================================ */
@media (max-width: 768px) {
  .team__header,
  .events__header,
  .actu__header {
    align-items: flex-end;
    gap: 12px;
  }

  .events__header-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 8px;
  }

  .team__header > .btn,
  .actu__header > .btn,
  .events__header-actions .btn {
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 420px) {
  .team__header > .btn,
  .actu__header > .btn,
  .events__header-actions .btn {
    padding: 7px 10px;
    font-size: 9px;
  }
}

/* ============================================================
   TEAM SECTION
   ============================================================ */
.team-section {
  position: relative;
  padding: var(--space-section) 0;
  overflow: hidden;
  margin-top: -1px;
  background: #061226;
}

.team__inner {
  z-index: 5;
}

/* ─── BACKGROUND animé ─── */
.team__bg-anim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 30%, rgba(94, 170, 255, 0.35), transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 70%, rgba(56, 212, 200, 0.22), transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(72, 110, 220, 0.30), transparent 65%),
    radial-gradient(ellipse 55% 45% at 70% 20%, rgba(62, 95, 212, 0.18), transparent 60%),
    linear-gradient(135deg, #051538 0%, #0a2050 25%, #061a3e 50%, #0c2860 75%, #051538 100%);
  background-size: 200% 200%, 220% 220%, 180% 180%, 200% 200%, 300% 300%;
  background-position: 0% 0%, 100% 100%, 50% 100%, 80% 20%, 0% 0%;
  animation: teamGradientShift 22s ease-in-out infinite;
  filter: saturate(1.15);
}

@keyframes teamGradientShift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 100%, 80% 20%, 0% 50%; }
  25%  { background-position: 60% 40%, 40% 70%, 80% 50%, 30% 60%, 50% 100%; }
  50%  { background-position: 100% 100%, 0% 0%, 20% 30%, 70% 80%, 100% 50%; }
  75%  { background-position: 40% 80%, 70% 30%, 90% 70%, 20% 40%, 50% 0%; }
  100% { background-position: 0% 0%, 100% 100%, 50% 100%, 80% 20%, 0% 50%; }
}
/* ─── Team content layout ─── */
.team__content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}

.team__composition {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-width: 620px;
  margin: 0 auto;
}

/* ─── Roster cards ─── */
.roster-card {
  position: absolute;
  background: linear-gradient(145deg, #0c2a5a 0%, #051230 50%, #030a1c 100%);
  border: 1px solid rgba(94, 170, 255, 0.22);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(94, 170, 255, 0.08);
}

.roster-card__silhouette {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 260;
}

.roster-card__tag {
  position: absolute;
  bottom: clamp(6px, 0.8vw, 10px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: clamp(7px, 0.65vw, 9px);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(4, 12, 24, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border: 1px solid rgba(94, 170, 255, 0.3);
  white-space: nowrap;
}

.roster-card__tag--alt {
  color: var(--accent-teal);
  border-color: rgba(56, 212, 200, 0.3);
}

/* DEFAULT (mobile/tablet) — players top, managers bottom */
.roster-card--player { width: 30%; }
.roster-card--p1 { top: 4%; left: 6%; transform: rotate(-7deg); z-index: 2; }
.roster-card--p2 { top: 0; left: 35%; transform: rotate(3deg); z-index: 3; }
.roster-card--p3 { top: 6%; right: 6%; transform: rotate(8deg); z-index: 2; }

.roster-card--manager { width: 23%; }
.roster-card--m1 { bottom: 4%; left: 18%; transform: rotate(-5deg); z-index: 1; }
.roster-card--m2 { bottom: 0; right: 18%; transform: rotate(6deg); z-index: 1; }

/* ─── PC LAYOUT — managers next to players, all in horizontal fan ─── */
@media (min-width: 1100px) {
  .team__content {
    align-items: center;
  }

  .team__composition {
    /* Format ramassé : la hauteur de la boîte = hauteur réelle des cartes
       => aucun espace vide en bas, l'ancrage est plus net visuellement */
    aspect-ratio: 5 / 2.55;
    max-width: 100%;
  }

  /* Joueurs et managers plus grands */
  .roster-card--player { width: 26%; }
  .roster-card--manager { width: 19%; }

  /* JOUEURS — ancrés en bas-gauche, en éventail (occupent ~67% de la largeur) */
  .roster-card--p1 {
    bottom: 6%;
    left: 0%;
    top: auto;
    right: auto;
    transform: rotate(-6deg);
    z-index: 2;
  }
  .roster-card--p2 {
    bottom: 14%;
    left: 20%;
    top: auto;
    right: auto;
    transform: rotate(2deg);
    z-index: 3;
  }
  .roster-card--p3 {
    bottom: 6%;
    left: 40%;
    top: auto;
    right: auto;
    transform: rotate(7deg);
    z-index: 2;
  }
  /* MANAGERS — décalés à droite, gap clair avec les joueurs */
  .roster-card--m1 {
    bottom: 0%;
    left: 68%;
    top: auto;
    right: auto;
    transform: rotate(-4deg);
    z-index: 1;
  }
  .roster-card--m2 {
    bottom: 11%;
    left: 81%;
    top: auto;
    right: auto;
    transform: rotate(5deg);
    z-index: 1;
  }
}

/* ─── Team info panel ─── */
.team__info {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 26px);
}

.team__games {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.8vw, 10px);
}

.team__game-tag {
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: clamp(5px, 0.6vw, 7px) clamp(10px, 1.2vw, 14px);
  background: rgba(94, 170, 255, 0.10);
  color: var(--accent);
  outline: 1px solid rgba(94, 170, 255, 0.28);
  outline-offset: -1px;
  clip-path: var(--clip-tag);
}

.team__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 56px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--text);
}

.team__title em {
  font-style: normal;
  color: var(--accent);
}

.team__desc {
  font-size: clamp(12px, 1vw, 15px);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 540px;
}

.team__stats {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
  padding-top: clamp(10px, 1.5vw, 18px);
  border-top: 1px solid var(--border);
}

.team__stat { display: flex; flex-direction: column; }

.team__stat-n {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(94, 170, 255, 0.45);
}

.team__stat-l {
  font-size: clamp(8px, 0.75vw, 10.5px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

@media (max-width: 768px) {
  .team__content { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 50px); }
  .team__composition { max-width: 500px; }
}

@media (max-width: 520px) {
  .team__composition { max-width: 100%; aspect-ratio: 5 / 3.6; }
  .roster-card--player { width: 32%; }
  .roster-card--manager { width: 25%; }
  .team__stats { gap: clamp(14px, 4vw, 24px); }
}

@media (max-width: 380px) {
  .team__composition { aspect-ratio: 5 / 3.4; }
  .roster-card--player { width: 34%; }
  .roster-card--manager { width: 26%; }
}
/* ============================================================
   EVENTS SECTION
   ============================================================ */
.events-section {
  position: relative;
  padding: var(--space-section) 0;
  overflow: hidden;
  margin-top: -1px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(20, 60, 140, .35), transparent 70%),
    linear-gradient(180deg, #050d1c 0%, #07142a 55%, #03080f 100%);
}



/* ─── Events grid — Tournois + Coaching = large, Partenaires = small ─── */
.events__grid {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.event-card {
  background: rgba(6, 16, 40, .85);
  backdrop-filter: blur(10px);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  clip-path: var(--clip-bigcard);
  transition: outline-color var(--tr), transform var(--tr);
}

.event-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--tr);
}

.event-card:hover {
  outline-color: var(--border-hi);
  transform: translateY(-3px);
}

.event-card:hover::after { opacity: 1; }

/* event-card--large: only changes typography, NOT grid placement (let it flow naturally) */
.event-card--large .event-card__title { font-size: 34px; }

.event-card__icon {
  width: 52px;
  height: 52px;
  background: rgba(94, 170, 255, .10);
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 4px;
  flex-shrink: 0;
  clip-path: var(--clip-icon);
}

.event-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.1;
}

.event-card__desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
}

.event-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.event-card__link {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-top: auto;
  padding-top: 8px;
  transition: color var(--tr);
}

.event-card__link:hover { color: var(--accent-soft); }

/* UPCOMING block */
.upcoming {
  background: rgba(6, 16, 40, .85);
  backdrop-filter: blur(8px);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  padding: clamp(16px, 2vw, 28px) clamp(16px, 2.2vw, 32px);
  clip-path: var(--clip-card);
}

.upcoming__label {
  font-size: clamp(8px, 0.8vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(10px, 1.4vw, 20px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.upcoming__label svg {
  width: clamp(10px, 1vw, 13px);
  height: clamp(10px, 1vw, 13px);
}

.upcoming__list {
  display: flex;
  flex-direction: column;
}

.upcoming__item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 20px);
  padding: clamp(8px, 1.1vw, 16px) 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.upcoming__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.upcoming__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(32px, 3.2vw, 48px);
  flex-shrink: 0;
}

.upcoming__day {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1;
  color: var(--accent);
}

.upcoming__month {
  font-size: clamp(7px, 0.7vw, 9.5px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.upcoming__game-icon {
  width: clamp(28px, 2.8vw, 42px);
  height: clamp(28px, 2.8vw, 42px);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(94, 170, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: var(--clip-icon);
}

.upcoming__game-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.upcoming__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.upcoming__info strong {
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 600;
  color: var(--text);
}

.upcoming__info span {
  font-size: clamp(9px, 0.85vw, 12px);
  color: var(--text-muted);
}

.upcoming__info span lo {
  font-size: 10px;
  color: #6a95d5;
}

/* COUNTDOWN */
.upcoming__countdown {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(10px, 2vw, 15px);
}

.countdown__n {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.6vw, 22px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.countdown__l {
  font-size: clamp(6px, 0.55vw, 8px);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 2px;
}

.countdown__sep {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.2vw, 18px);
  color: rgba(94, 170, 255, 0.25);
  line-height: 1;
  padding-bottom: 10px;
}

.upcoming__countdown.countdown--ended { opacity: 0.4; }
.upcoming__countdown.countdown--ended .countdown__n { color: var(--text-muted); }

/* ============================================================
   ACTU SECTION
   ============================================================ */
.actu-section {
  position: relative;
  padding: var(--space-section) 0;
  overflow: hidden;
  margin-top: -1px;
  background-color: #040c1a;
}

.actu__lines-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #041028 0%, #0a2a6e 20%, #1245a8 40%, #0d3a8a 55%, #1550b8 70%, #0a2868 85%, #041028 100%);
  opacity: 0.45;
}

.actu__lines-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(94, 170, 255, 0.06) 4px, rgba(94, 170, 255, 0.06) 5px);
}

.actu__lines-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-50deg, transparent, transparent 12px, rgba(120, 190, 255, 0.04) 12px, rgba(120, 190, 255, 0.04) 13px);
}

.actu-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(20, 80, 200, 0.15), transparent 60%),
    radial-gradient(ellipse 50% 60% at 75% 80%, rgba(10, 50, 160, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(4, 12, 26, 0.6) 0%, transparent 15%, transparent 85%, rgba(4, 12, 26, 0.7) 100%);
}

.actu__grid {
  display: grid;
  grid-template-columns: 1fr clamp(220px, 32%, 420px);
  gap: clamp(10px, 1.4vw, 20px);
  align-items: stretch;
}

.actu__side {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.9vw, 14px);
}

.actu-card {
  background: rgba(8, 20, 50, .85);
  backdrop-filter: blur(8px);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  overflow: hidden;
  display: flex;
  transition: outline-color var(--tr), transform var(--tr);
}

.actu-card:hover {
  outline-color: var(--border-hi);
  transform: translateY(-2px) scale(1.01);
  z-index: 2;
}

.actu-card--featured {
  flex-direction: column;
  clip-path: var(--clip-bigcard);
}

.actu-card--mini {
  display: grid;
  grid-template-columns: clamp(70px, 8vw, 120px) 1fr;
  clip-path: var(--clip-card-alt);
}

.actu-card__img,
.actu-card__img-mini {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b2558 0%, #1a4e90 45%, #0e3468 100%);
}

.actu-card__img {
  aspect-ratio: 16/9;
}

.actu-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.28s var(--ease-out);
}

.actu-card:hover .actu-card__photo { transform: scale(1.04); }

.actu-card__cat-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(4, 12, 24, .90);
  backdrop-filter: blur(8px);
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
  font-size: clamp(7px, 0.7vw, 9.5px);
  font-weight: 700;
  color: var(--accent);
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  clip-path: var(--clip-tag);
}

.actu-card__body {
  padding: clamp(10px, 1.2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.actu-card__date {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.actu-card--featured .actu-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 28px);
  color: var(--text);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.actu-card--mini .actu-card__title {
  font-size: clamp(11px, 1vw, 14px);
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
}

.actu-card__excerpt {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.actu-card__link {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  text-decoration: none;
  margin-top: auto;
  transition: color var(--tr);
}

.actu-card__link:hover { color: var(--accent-soft); }

@media (min-width: 1200px) {
  .actu__grid { grid-template-columns: repeat(3, 1fr); }
  .actu__side { display: contents; }

  .actu-card--featured,
  .actu__side .actu-card--mini:nth-child(1),
  .actu__side .actu-card--mini:nth-child(2) {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    clip-path: var(--clip-bigcard);
  }

  .actu__side .actu-card--mini:nth-child(1) .actu-card__img-mini,
  .actu__side .actu-card--mini:nth-child(2) .actu-card__img-mini {
    aspect-ratio: 16/9;
    width: 100%;
  }

  .actu__side .actu-card--mini:nth-child(n+3) {
    grid-row: 2;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: #0a1525;
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.footer__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.footer__top {
  display: grid;
  grid-template-columns: clamp(95px, 18%, 300px) 1fr;
  gap: clamp(10px, 2.5vw, 80px);
  padding: var(--space-section) 0 clamp(30px, 4vw, 60px);
  border-bottom: 1px solid var(--border);
}

.footer__logo {
  display: block;
  margin-bottom: clamp(10px, 1.2vw, 18px);
  text-decoration: none;
}

.footer__logo-img {
  height: clamp(20px, 2.2vw, 32px);
  width: auto;
  object-fit: contain;
}

.footer__tagline {
  font-size: clamp(8px, 0.9vw, 13.5px);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: clamp(8px, 1.6vw, 28px);
}

.footer__socials {
  display: flex;
  gap: clamp(3px, 0.5vw, 8px);
  flex-wrap: nowrap;
}

.social-btn {
  width: clamp(20px, 2.4vw, 36px);
  height: clamp(20px, 2.4vw, 36px);
  background: rgba(8, 18, 44, .8);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  clip-path: var(--clip-tag);
  transition: color var(--tr), background var(--tr), outline-color var(--tr);
}

.social-btn svg {
  width: clamp(9px, 1vw, 16px);
  height: clamp(9px, 1vw, 16px);
}

.social-btn:hover {
  color: var(--accent);
  background: rgba(16, 36, 80, .9);
  outline-color: var(--border-md);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.5vw, 32px);
}

.footer__col-title {
  font-size: clamp(7px, 0.8vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: clamp(6px, 1.2vw, 18px);
}

.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.8vw, 11px);
}

.footer__col ul li a {
  font-size: clamp(8px, 0.95vw, 13.5px);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--tr);
}

.footer__col ul li a:hover { color: var(--accent); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 1.8vw, 24px) 0;
  flex-wrap: nowrap;
  gap: clamp(8px, 1.5vw, 24px);
}

.footer__copy {
  font-size: clamp(7px, 0.85vw, 12px);
  color: var(--text-dim);
  white-space: nowrap;
}

.footer__legal {
  display: flex;
  gap: clamp(6px, 1.4vw, 24px);
  flex-wrap: nowrap;
  white-space: nowrap;
}

.footer__legal a {
  font-size: clamp(7px, 0.85vw, 12px);
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--tr);
}

.footer__legal a:hover { color: var(--text-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .events__grid { grid-template-columns: 1fr 1fr; }
  /* Tournois + Coaching cote a cote, Partenaires en dessous full width */
  .events__grid > .event-card:nth-child(3) { grid-column: 1 / -1; }
  .actu__grid { grid-template-columns: 1fr; }
  .actu__side { display: grid; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .events__grid > .event-card:nth-child(3) { grid-column: 1 / -1; }
  .actu__side { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* .hero sizing is handled by the fluid min() formula above — no override needed */
  .hero__sub { max-width: 100%; }
  .events__grid { grid-template-columns: 1fr; }
  .events__grid > .event-card:nth-child(3) { grid-column: 1; }
  .actu__grid { grid-template-columns: 1fr; }
  .actu__side { grid-template-columns: 1fr; }
  .upcoming__item { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .hero__stats { flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; }
  .hero__stat { align-items: flex-start; }
}











/* État caché par défaut */
.lang__dropdown {
  display: none;
  position: absolute;
  /* ... ton style de fond, bordure, etc. ... */
}

/* État affiché via le JavaScript */
.lang__dropdown.show {
  display: block;
}

/* Option active */
.lang__option.active {
  color: var(--text);
  font-weight: bold;
  background: var(--surface);
}
/* ============================================================
   HERO SUB — texte clampé + bouton "Voir plus" avec flèche
   ============================================================ */
.hero__sub-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 15px;
  margin-bottom: clamp(20px, 3vw, 40px);
  max-width: 500px;
}

@media (min-width: 1024px) {
  .hero__sub-wrap { max-width: 35vw; }
}

/* Override the default margin/max-width on .hero__sub now that it's wrapped */
.hero__sub-wrap .hero__sub {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  transition: -webkit-line-clamp 0.3s ease;
}

.hero__sub-wrap .hero__sub.expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.hero__sub-toggle {
  background: transparent;
  border: 0;
  padding: 4px 0;
  color: var(--accent);
  font-family: inherit;
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease, gap 0.25s ease;
}

.hero__sub-toggle:hover {
  color: var(--accent-teal, #38d4c7);
  gap: 9px;
}

.hero__sub-toggle-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}

.hero__sub-toggle[aria-expanded="true"] .hero__sub-toggle-icon {
  transform: rotate(180deg);
}

/* HERO RESPONSIVE STATS */
@media (max-width: 600px) {
  /* Mobile : stats reviennent sous le contenu */
  .hero__stats {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: clamp(20px, 4vw, 60px);
    margin-top: clamp(16px, 2vw, 24px);
  }
  .hero__stat { align-items: flex-start; }
}

/* TABLETTE 601-1024 : stats en haut-droite de la bannière */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero__stats {
    bottom: auto;
    top: clamp(95px, 10vw, 130px);
  }
}


/* ============================================================
   HERO 3D — VELRA SIGNATURE
   Remplace l'image header.gif par une scène 3D interactive.
   - Lettres extrudées en CSS (28 couches Z par lettre)
   - Réagit au scroll + au curseur
   - Background gradient bottom -> top
   ============================================================ */

/* Désactive l'ancien fond image */
.hero__bg { display: none !important; }

/* ============================================================
   HERO — Hauteur LINÉAIRE, IMMÉDIATE et SANS PALIER
   Voir explication détaillée dans .hero (base) plus haut.
   Pente constante 0.291 calibrée pour (500x666.67) -> (1920x1080).
   La hero atteint le format 3:4 à 500px (max rétréci sur PC) et
   reste 3:4 en dessous. Transition continue, aucun palier visible
   dans la plage de redimensionnement normale d'un navigateur PC.
   ============================================================ */
.hero {
  aspect-ratio: auto !important;
  height: min(
    100svh,
    calc(100vw * 4 / 3),
    calc((100vw - 500px) * 0.291 + 666.67px)
  ) !important;
  max-height: none !important;
  min-height: 0 !important;
  perspective: 1600px;
  perspective-origin: 50% 45%;
  background: #03060d;
  isolation: isolate;
}

/* === GRADIENT BOTTOM -> TOP === */
.hero__bg-gradient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(94,170,255,0.10), transparent 70%),
    linear-gradient(to top,
      #02050b 0%,
      #050e1c 18%,
      #08182f 42%,
      #0c2548 70%,
      #143661 92%,
      #1a4377 100%);
}

/* === GRILLE EN PERSPECTIVE AU SOL === */
.hero__grid-floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(94,170,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,170,255,.07) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to top, black 0%, rgba(0,0,0,.5) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, rgba(0,0,0,.5) 60%, transparent 100%);
  transform: perspective(800px) rotateX(60deg) translateY(8%);
  transform-origin: 50% 100%;
  opacity: .55;
}

/* === HALO LUMINEUX QUI SUIT LE CURSEUR === */
.hero__cursor-glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle 480px at var(--mx, 50%) var(--my, 50%),
    rgba(94,170,255,0.22) 0%,
    rgba(94,170,255,0.08) 28%,
    transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .4s ease;
}
.hero.is-cursor-active .hero__cursor-glow { opacity: 1; }

/* === PARTICULES FLOTTANTES === */
.hero__particles {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.hero__particles span {
  position: absolute;
  width: var(--s, 3px); height: var(--s, 3px);
  background: rgba(180,215,255,0.7);
  border-radius: 50%;
  filter: blur(1px);
  box-shadow: 0 0 8px rgba(94,170,255,0.55);
  animation: hero3dFloat var(--dur, 16s) linear infinite;
  animation-delay: var(--del, 0s);
  left: var(--x, 50%); top: 100%;
  opacity: 0;
}
@keyframes hero3dFloat {
  0%   { transform: translate3d(0,0,0); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .55; }
  100% { transform: translate3d(var(--dx, 0), -110vh, 0); opacity: 0; }
}

/* === SCENE 3D === */
.hero__3d-wrap {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  perspective: 1600px;
  perspective-origin: 50% 45%;
}
.hero__3d-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 22px);
  pointer-events: auto;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--sceneRX, -2deg))
    rotateY(var(--sceneRY, -8deg))
    translateZ(var(--sceneTZ, 0px));
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

/* === LETTRES 3D === */
.l3d {
  position: relative;
  display: inline-block;
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: clamp(110px, 20vw, 320px);
  line-height: 0.78;
  letter-spacing: -0.02em;
  font-weight: 400;
  transform-style: preserve-3d;
  transform:
    translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, 0px))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    rotateZ(var(--rz, 0deg))
    scale(var(--sc, 1));
  transition: transform .55s cubic-bezier(.16,1,.3,1), filter .4s ease;
  filter: drop-shadow(0 var(--shY, 26px) var(--shB, 40px) rgba(0,0,0,.55));
  cursor: pointer;
  color: transparent;
}

.l3d__layer {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0.78;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  position: absolute;
  inset: 0;
  color: hsl(
    calc(216 - var(--d) * 0.4),
    calc(72% - var(--d) * 1.6%),
    calc(72% - var(--d) * 2.6%)
  );
  transform: translateZ(calc(var(--d) * -3px));
}

/* la couche front porte le layout (les autres sont absolute) */
.l3d__layer--front {
  position: relative;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #d8eaff 35%,
    #7ec4ff 70%,
    #5eaaff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 0 22px rgba(94,170,255,0.55))
    drop-shadow(0 0 1px rgba(255,255,255,0.5));
  transform: translateZ(0);
}

.l3d__layer--back {
  color: #02060f !important;
  -webkit-text-stroke: 1px rgba(94,170,255,0.18);
}

/* Reflet "sweep" qui balaie chaque lettre */
.l3d__sweep {
  position: absolute; inset: 0;
  font-family: inherit; font-size: inherit; line-height: 0.78;
  text-align: center; white-space: nowrap;
  background: linear-gradient(110deg,
    transparent 38%,
    rgba(255,255,255,0.55) 50%,
    transparent 62%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  mix-blend-mode: screen;
  z-index: 2;
  transform: translateZ(2px);
  pointer-events: none;
  animation: l3dSweep 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.18s);
}
@keyframes l3dSweep {
  0%   { background-position: 220% 50%; opacity: 0; }
  18%  { opacity: 1; }
  60%  { background-position: -120% 50%; opacity: 1; }
  100% { background-position: -120% 50%; opacity: 0; }
}

/* État "hot" (lettre survolée) — boost glow + aberration chromatique */
.l3d.is-hot .l3d__layer--front {
  filter:
    drop-shadow(0 0 38px rgba(94,170,255,0.95))
    drop-shadow(0 0 4px rgba(255,255,255,0.7));
}
.l3d::before, .l3d::after { content: ''; }
.l3d.is-hot::before,
.l3d.is-hot::after {
  content: attr(data-char);
  position: absolute; inset: 0;
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: inherit;
  line-height: 0.78;
  text-align: center;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0.55;
}
.l3d.is-hot::before { color: #ff3870; transform: translate3d(-3px, 0, 4px); }
.l3d.is-hot::after  { color: #38d4c8; transform: translate3d( 3px, 0, 4px); }

/* === LIGNE D'HORIZON === */
.hero__floor-line {
  position: absolute;
  bottom: 22%;
  left: 0; right: 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(94,170,255,0.5), transparent);
  pointer-events: none;
  box-shadow: 0 0 24px rgba(94,170,255,0.35);
}

/* On garde scanlines + grid-lines existants au-dessus pour cohérence visuelle */
.hero__scanlines { z-index: 6; }
.hero__grid-lines { z-index: 5; opacity: .5; }

/* Le contenu texte reste au-dessus de la scène 3D */
.hero__content { z-index: 8; position: relative; pointer-events: none; }
.hero__content > * { pointer-events: auto; }

/* Réduction des animations si demandé */
@media (prefers-reduced-motion: reduce) {
  .l3d, .hero__3d-stage { transition: none !important; }
  .l3d__sweep, .hero__particles span { animation: none !important; }
}

/* Sur mobile/tablette, on désactive les particules et on simplifie */
@media (max-width: 700px) {
  .l3d { font-size: clamp(70px, 22vw, 130px); }
  .hero__3d-stage { gap: 4px; }
  .hero__particles { display: none; }
}

/* ============================================================
   COMMUNITY SECTION — 2D FIXED BLUE BACKGROUND (parallax loin)
   Pas d'ombres noires. Fondu bas vers la section suivante (#040c1a).
   ============================================================ */
.community-perspective {
  position: relative;
  isolation: isolate;
}

/* Fond fixe : ne suit pas le scroll, effet "loin" */
.community-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #0c2350;
  background-image:
    /* Halo principal en haut-gauche, bleu lumineux */
    radial-gradient(ellipse 55% 50% at 22% 28%, rgba(110, 190, 255, .55), transparent 65%),
    /* Halo central-droit, bleu vif */
    radial-gradient(ellipse 50% 45% at 78% 55%, rgba(60, 140, 255, .45), transparent 70%),
    /* Touche cyan en bas droite : fraicheur */
    radial-gradient(ellipse 45% 40% at 85% 88%, rgba(80, 220, 230, .28), transparent 70%),
    /* Reflet indigo doux en bas-gauche */
    radial-gradient(ellipse 50% 45% at 12% 80%, rgba(90, 130, 240, .35), transparent 70%),
    /* Halo central tres diffus pour eviter zone morte */
    radial-gradient(ellipse 75% 60% at 50% 50%, rgba(70, 150, 255, .22), transparent 75%),
    /* Base degradee bleue, claire */
    linear-gradient(165deg, #0a1d3d 0%, #11295a 35%, #102e6b 60%, #0a1f44 100%);
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Shimmer tres subtil pour donner du relief */
.community-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 35%, rgba(190, 225, 255, .06) 50%, transparent 65%);
  background-attachment: fixed;
  background-size: 200% 200%;
  background-position: 50% 50%;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Fondu BAS vers la couleur visuelle du haut de la section actu (overlay inclus) */
.community-perspective::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 26, 64, 0) 0%, #071a40 100%);
}

.community-perspective .events__inner { position: relative; z-index: 2; }

/* Mobile : fixed bug sur iOS, on garde un beau fond statique */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .community-bg {
    background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
  }
  .community-bg::before { background-attachment: scroll; }
}

/* ============================================================
   SECTION TITLES — vague lumineuse minimaliste sur .title-glow
   Couleurs douces, texte toujours visible, L -> R lentement
   ============================================================ */

.section-title {
  color: var(--text);
  text-shadow: none;
  animation: none;
}

.section-title em.title-glow,
.title-glow {
  font-style: normal;

  /* fallback si background-clip:text n'est pas supporte */
  color: #9ec9ff;

  /* gradient avec base solide partout sauf une vague claire au centre */
  background-image: linear-gradient(
    110deg,
    #9ec9ff 0%,
    #9ec9ff 42%,
    #f0f8ff 50%,
    #9ec9ff 58%,
    #9ec9ff 100%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;

  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: titleWave 9s ease-in-out infinite;
  will-change: background-position;
}

/* La vague va de la gauche du mot vers la droite, puis pause */
@keyframes titleWave {
  0%   { background-position: 100% 0; }   /* vague hors-cadre a gauche */
  55%  { background-position: 0% 0; }     /* vague hors-cadre a droite */
  100% { background-position: 0% 0; }     /* pause minimaliste */
}

@media (prefers-reduced-motion: reduce) {
  .title-glow {
    animation: none;
    background-position: 50% 0;
  }
}

/* ============================================================
   TEAM SECTION — PC LAYOUT REFINE
   - Equilibre 50/50 autour du centre
   - Cartes centrees verticalement
   - Bloc info plus grand
   ============================================================ */
@media (min-width: 1100px) {
  .team-section { padding-block: clamp(80px, 10vh, 140px); }

  .team__content {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 90px);
    align-items: center;
    min-height: 520px;
  }

  .team__composition {
    max-width: 100%;
    width: 100%;
    align-self: center;
    aspect-ratio: 5 / 2.7;
    margin: 0;
  }

  /* Cartes legerement plus grandes et davantage centrees vers le centre */
  .roster-card--player  { width: 30%; }
  .roster-card--manager { width: 22%; }

  .roster-card--p1 { bottom: 6%;  left: 2%;  top: auto; right: auto; transform: rotate(-7deg); }
  .roster-card--p2 { bottom: 18%; left: 22%; top: auto; right: auto; transform: rotate(2deg);  }
  .roster-card--p3 { bottom: 6%;  left: 42%; top: auto; right: auto; transform: rotate(7deg);  }
  .roster-card--m1 { bottom: 0%;  left: 67%; top: auto; right: auto; transform: rotate(-4deg); }
  .roster-card--m2 { bottom: 13%; left: 80%; top: auto; right: auto; transform: rotate(5deg);  }

  /* Bloc info : plus genereux */
  .team__info {
    gap: clamp(22px, 2.5vw, 36px);
    align-self: center;
  }
  .team__games        { gap: clamp(8px, 1vw, 14px); }
  .team__game-tag     { font-size: clamp(11px, 0.9vw, 14px); padding: clamp(7px, 0.8vw, 10px) clamp(14px, 1.5vw, 18px); }

  .team__title        { font-size: clamp(36px, 5.2vw, 84px); line-height: 0.95; }
  .team__desc         { font-size: clamp(14px, 1.25vw, 19px); line-height: 1.75; max-width: 580px; }

  .team__stats        { gap: clamp(28px, 3.5vw, 60px); padding-top: clamp(16px, 2vw, 26px); }
  .team__stat-n       { font-size: clamp(40px, 4.2vw, 64px); }
  .team__stat-l       { font-size: clamp(10px, 0.85vw, 13px); margin-top: 6px; }
}

@media (min-width: 1500px) {
  .team__title        { font-size: clamp(56px, 5vw, 96px); }
  .team__desc         { font-size: clamp(16px, 1.2vw, 21px); }
  .team__stat-n       { font-size: clamp(52px, 4vw, 72px); }
}

/* ============================================================
   NAVBAR — HIDDEN by default, slides down once past hero
   ============================================================ */
.navbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    opacity .35s ease,
    background .35s,
    backdrop-filter .35s,
    border-color .35s,
    box-shadow .35s;
}
.navbar--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   HERO BANNER — epure, minimalist, logo center
   Lives at the top of .hero ; visible until scrolled past hero.
   ============================================================ */
.hero-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(18px, 2.4vw, 32px) var(--page-pad);
  pointer-events: auto;
  will-change: opacity, transform;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

/* Subtle horizontal "thread" behind banner — DISABLED on demand */
.hero-banner::after {
  content: none;
  display: none;
}

/* hide banner once user has scrolled past hero */
.hero-banner.is-gone {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* ─── SIDE NAVIGATION ─── */
.hero-banner__side {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 42px);
  min-width: 0;
}
.hero-banner__side--left  { justify-content: flex-start; }
.hero-banner__side--right { justify-content: flex-end; }

.hero-banner__link {
  position: relative;
  font-family: var(--font-body);
  font-size: clamp(10.5px, 0.9vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(230, 241, 255, 0.72);
  text-decoration: none;
  padding: 6px 2px 8px;
  white-space: nowrap;
  transition: color .3s ease, letter-spacing .3s ease;
}
.hero-banner__link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.hero-banner__link::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--accent);
  transform: translateY(-50%) scale(0);
  transition: transform .35s ease;
  opacity: .85;
}
.hero-banner__link:hover {
  color: var(--text);
  letter-spacing: 0.32em;
}
.hero-banner__link:hover::before { transform: scaleX(1); }
.hero-banner__link:hover::after  { transform: translateY(-50%) scale(1); }

/* ─── CENTER LOGO with decorative lines & corner brackets ─── */
.hero-banner__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 30px);
  text-decoration: none;
  flex-shrink: 0;
}

.hero-banner__line {
  display: block;
  height: 1px;
  width: clamp(40px, 7vw, 110px);
  background: linear-gradient(90deg,
    rgba(94,170,255,.0) 0%,
    rgba(94,170,255,.45) 50%,
    rgba(94,170,255,.0) 100%);
  position: relative;
}
.hero-banner__line::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--accent);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(94,170,255,.55);
}
.hero-banner__line--left::before  { right: 0; }
.hero-banner__line--right::before { left: 0; }

.hero-banner__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 4.2vw, 58px);
  height: clamp(42px, 4.2vw, 58px);
  transition: transform .5s cubic-bezier(.22,1,.36,1), filter .35s ease;
}
.hero-banner__mark::before {
  content: "";
  position: absolute;
  inset: -6px;
  background: radial-gradient(circle, rgba(94,170,255,.30) 0%, rgba(94,170,255,0) 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.hero-banner__logo:hover .hero-banner__mark {
  transform: rotate(-4deg) scale(1.06);
  filter: drop-shadow(0 0 14px rgba(94,170,255,.55));
}
.hero-banner__logo:hover .hero-banner__mark::before { opacity: 1; }

.hero-banner__mark-img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(94,170,255,.35));
}

/* Corner brackets around the logo */
.hero-banner__corner {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  opacity: .75;
}
.hero-banner__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero-banner__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hero-banner__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hero-banner__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ─── BURGER for mobile (hidden on desktop) ─── */
.hero-banner__burger {
  display: none;
  position: absolute;
  right: var(--page-pad);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 2;
  transition: opacity .25s ease;
}
.hero-banner__burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: rgba(230,241,255,.85);
  transition: transform var(--tr), opacity var(--tr), background var(--tr);
}
.hero-banner__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hero-banner__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hero-banner__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Side nav hidden on small screens, burger shown */
@media (max-width: 768px) {
  .hero-banner {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-inline: clamp(60px, 12vw, 90px);
  }
  .hero-banner__side  { display: none; }
  .hero-banner__burger { display: flex; }
  .hero-banner__line   { width: clamp(28px, 8vw, 60px); }
}

@media (max-width: 480px) {
  .hero-banner { padding-block: 14px; }
  .hero-banner__mark { width: 40px; height: 40px; }
}


/* ============================================================
   ACTU SECTION — UNIFIED CARDS (PC: 3 large + 3 small, Tablet/Mobile: 1 large + 5 small)
   - Each card is fully clickable (<a>)
   - Each card has ONE assigned social icon (data-social)
   - Image becomes blurry every 3s and the social logo flashes in the center
   ============================================================ */

/* Grid override: 6 equal columns logic */
.actu__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: stretch;
}

/* Card base — anchor (whole card is clickable) */
.actu__grid .actu-card {
  position: relative;
  background: rgba(8, 20, 50, .85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  overflow: hidden;
  display: grid;
  text-decoration: none;
  color: inherit;
  transition: outline-color var(--tr), transform var(--tr);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%,
    0 100%
  );
  cursor: pointer;
}

.actu__grid .actu-card:hover {
  outline-color: var(--border-hi);
  transform: translateY(-2px);
}

/* Image wrapper */
.actu-card__img-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b2558 0%, #1a4e90 45%, #0e3468 100%);
  width: 100%;
  height: 100%;
}

.actu-card__img-wrap .actu-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--ease-out);
  animation: actuPhotoFlash 8s ease-in-out infinite;
  will-change: filter, transform;
}

.actu__grid .actu-card:hover .actu-card__photo {
  transform: scale(1.04);
}

/* Cat badge — top-left corner */
.actu-card__cat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: auto;
  background: rgba(4, 12, 24, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
  font-size: clamp(8px, 0.7vw, 10px);
  font-weight: 700;
  color: var(--accent);
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  clip-path: var(--clip-tag);
  z-index: 3;
}

/* Social icon overlay — flashes in the center */
.actu-card__social-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: clamp(46px, 5vw, 72px);
  height: clamp(46px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6))
          drop-shadow(0 0 14px rgba(94, 170, 255, .55));
  animation: actuSocialFlash 8s ease-in-out infinite;
  will-change: opacity, transform;
}

.actu-card__social-icon svg {
  width: 70%;
  height: 70%;
}

/* Per-social tint (subtle accent for the glow) */
.actu-card[data-social="instagram"] .actu-card__social-icon {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6))
          drop-shadow(0 0 14px rgba(225, 48, 108, .65));
}
.actu-card[data-social="x"] .actu-card__social-icon {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .7))
          drop-shadow(0 0 14px rgba(255, 255, 255, .35));
}
.actu-card[data-social="tiktok"] .actu-card__social-icon {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6))
          drop-shadow(0 0 14px rgba(37, 244, 238, .55));
}
.actu-card[data-social="youtube"] .actu-card__social-icon {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6))
          drop-shadow(0 0 14px rgba(255, 0, 0, .65));
}

/* Staggered animation: each card flashes 0.2s after the previous one */
.actu__grid .actu-card:nth-child(1) .actu-card__photo,
.actu__grid .actu-card:nth-child(1) .actu-card__social-icon { animation-delay: 0s; }
.actu__grid .actu-card:nth-child(2) .actu-card__photo,
.actu__grid .actu-card:nth-child(2) .actu-card__social-icon { animation-delay: 0.2s; }
.actu__grid .actu-card:nth-child(3) .actu-card__photo,
.actu__grid .actu-card:nth-child(3) .actu-card__social-icon { animation-delay: 0.4s; }
.actu__grid .actu-card:nth-child(4) .actu-card__photo,
.actu__grid .actu-card:nth-child(4) .actu-card__social-icon { animation-delay: 0.6s; }
.actu__grid .actu-card:nth-child(5) .actu-card__photo,
.actu__grid .actu-card:nth-child(5) .actu-card__social-icon { animation-delay: 0.8s; }
.actu__grid .actu-card:nth-child(6) .actu-card__photo,
.actu__grid .actu-card:nth-child(6) .actu-card__social-icon { animation-delay: 1s; }

/* Keyframes — 8s cycle: blur + social logo visible 3s, then 5s pause */
@keyframes actuPhotoFlash {
  0%        { filter: blur(0) brightness(1); transform: scale(1); }
  3%, 40%   { filter: blur(8px) brightness(0.6); transform: scale(1.05); }
  43%, 100% { filter: blur(0) brightness(1); transform: scale(1); }
}

@keyframes actuSocialFlash {
  0%        { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  3%, 40%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  43%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

/* Body — uniform structure */
.actu__grid .actu-card__body {
  padding: clamp(12px, 1.2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
}

.actu__grid .actu-card__date {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.actu__grid .actu-card__title {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.2em; /* reserve 2 lines so body height stays uniform across cards */
}

.actu__grid .actu-card__excerpt {
  font-size: clamp(11.5px, 0.95vw, 13.5px);
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3em; /* reserve 2 lines so body height stays uniform across cards */
}

.actu__grid .actu-card__link {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  text-decoration: none;
  margin-top: auto;
  padding-top: 6px;
  transition: color var(--tr);
  white-space: nowrap; /* never wrap to a 2nd line - keeps body height uniform */
}

.actu__grid .actu-card:hover .actu-card__link {
  color: var(--accent-soft);
}

/* ─── PC LAYOUT (>= 1200px) — 3 LARGE on row 1, 3 SMALL on row 2 (image LEFT) ─── */
@media (min-width: 1200px) {
  .actu__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: clamp(14px, 1.4vw, 22px);
  }

  /* LARGE cards — vertical, image on top */
  .actu__grid .actu-card--lead {
    grid-row: 1;
    display: flex;
    flex-direction: column;
  }
  .actu__grid .actu-card--lead .actu-card__img-wrap {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
  .actu__grid .actu-card--lead .actu-card__title {
    font-size: clamp(18px, 1.6vw, 24px);
  }
  .actu__grid .actu-card--lead .actu-card__body {
    padding: clamp(14px, 1.3vw, 22px);
    gap: 8px;
  }

  /* SMALL cards — HORIZONTAL on PC: thin row, image on the LEFT */
  .actu__grid .actu-card--small {
    grid-row: 2;
    display: grid;
    grid-template-columns: clamp(140px, 14vw, 200px) 1fr;
    align-items: stretch;
  }
  .actu__grid .actu-card--small .actu-card__img-wrap {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
  }
  .actu__grid .actu-card--small .actu-card__title {
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.3;
  }
  .actu__grid .actu-card--small .actu-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(11px, 0.85vw, 13px);
    line-height: 1.45;
    color: var(--text-muted);
    margin-top: 2px;
  }
  .actu__grid .actu-card--small .actu-card__body {
    padding: clamp(10px, 0.9vw, 14px) clamp(12px, 1.1vw, 16px);
    gap: 4px;
    justify-content: center;
  }
  .actu__grid .actu-card--small .actu-card__cat-badge {
    top: 6px;
    left: 6px;
    font-size: clamp(7px, 0.6vw, 9px);
    padding: 3px 7px;
  }
  .actu__grid .actu-card--small .actu-card__social-icon {
    width: clamp(34px, 3.2vw, 48px);
    height: clamp(34px, 3.2vw, 48px);
  }
  .actu__grid .actu-card--small .actu-card__link {
    font-size: clamp(9.5px, 0.75vw, 11px);
  }
}

/* ─── TABLET (< 1200px) — 1 LARGE on the LEFT + 5 SMALL stacked on the RIGHT ───
   Cards shrink fluidly with the viewport using clamp() / fr / minmax().
   Image always takes ~1/3 of the small card width and the widget keeps its clip-path shape. ─── */
@media (max-width: 1199.98px) {
  .actu__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: clamp(6px, 1vw, 14px);
    align-items: stretch;
  }

  /* CARD 1 = LARGE on the left, spans the 5 rows */
  .actu__grid .actu-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__img-wrap {
    aspect-ratio: 16 / 10;
    width: 100%;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__title {
    font-size: clamp(14px, 2.2vw, 24px);
    line-height: 1.15;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: clamp(11px, 1.2vw, 14px);
    line-height: 1.5;
    color: var(--text-muted);
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__body {
    padding: clamp(10px, 1.6vw, 20px);
    gap: clamp(4px, 0.8vw, 10px);
  }

  /* CARDS 2–6 = SMALL on the right column, one per row, image LEFT */
  .actu__grid .actu-card:nth-child(n+2) {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); /* image ~1/3 of card width */
    align-items: stretch;
  }
  .actu__grid .actu-card:nth-child(2) { grid-row: 1; }
  .actu__grid .actu-card:nth-child(3) { grid-row: 2; }
  .actu__grid .actu-card:nth-child(4) { grid-row: 3; }
  .actu__grid .actu-card:nth-child(5) { grid-row: 4; }
  .actu__grid .actu-card:nth-child(6) { grid-row: 5; }

  .actu__grid .actu-card:nth-child(n+2) .actu-card__img-wrap {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
  }
  .actu__grid .actu-card:nth-child(n+2) .actu-card__title {
    font-size: clamp(10px, 1.2vw, 15px);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .actu__grid .actu-card:nth-child(n+2) .actu-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: clamp(9px, 1vw, 12.5px);
    line-height: 1.4;
    color: var(--text-muted);
  }
  .actu__grid .actu-card:nth-child(n+2) .actu-card__date {
    font-size: clamp(8px, 0.85vw, 10px);
  }
  .actu__grid .actu-card:nth-child(n+2) .actu-card__body {
    padding: clamp(6px, 1vw, 14px) clamp(8px, 1.2vw, 16px);
    gap: clamp(2px, 0.4vw, 5px);
    justify-content: center;
  }
  .actu__grid .actu-card:nth-child(n+2) .actu-card__cat-badge {
    font-size: clamp(6.5px, 0.8vw, 9px);
    padding: 2px clamp(4px, 0.7vw, 7px);
    top: clamp(4px, 0.6vw, 7px);
    left: clamp(4px, 0.6vw, 7px);
  }
  .actu__grid .actu-card:nth-child(n+2) .actu-card__social-icon {
    width: clamp(22px, 3.5vw, 42px);
    height: clamp(22px, 3.5vw, 42px);
  }
  .actu__grid .actu-card:nth-child(n+2) .actu-card__link {
    font-size: clamp(8.5px, 0.85vw, 10.5px);
  }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .actu-card__photo,
  .actu-card__social-icon {
    animation: none !important;
  }
  .actu-card__social-icon { opacity: 0 !important; }
}

/* When banner is gone on mobile, the navbar burger reappears (already handled) *//* ============================================================
   VELRA — PATCH CSS
   À ajouter À LA FIN de ton style.css (les règles écrasent les
   anciennes grâce à leur position et à leur spécificité).

   1) Navbar : apparaît dès que la bannière du haut (hero-banner)
      n'est plus visible — déclencheur géré dans le JS.
   2) Suppression du texte "VELRA" 3D + particules qui montent.
   3) Nouveau fond épuré, minimaliste, dégradé bleu nuit doux.
   ============================================================ */

/* --- 2) Hide the 3D "VELRA" word, particles & decorative floor --- */
.hero__3d-wrap,
.hero__particles,
.hero__floor-line,
.hero__grid-floor {
  display: none !important;
}

/* Keep the cursor halo soft (optional polish) */
.hero__cursor-glow {
  background: radial-gradient(circle 520px at var(--mx, 50%) var(--my, 50%),
    rgba(126, 196, 255, 0.10) 0%,
    rgba(94, 170, 255, 0.04) 30%,
    transparent 65%);
}

/* --- 3) New epure / minimalist gradient background --------------- */
.hero {
  background: #060c1a !important;
  /* La hauteur reste 100vh comme défini précédemment */
}

.hero__bg-gradient {
  background:
    /* halo lumineux très doux en haut-centre */
    radial-gradient(ellipse 70% 55% at 50% 10%,
      rgba(126, 196, 255, 0.10) 0%,
      transparent 70%),
    /* halo accent en bas-gauche */
    radial-gradient(ellipse 60% 45% at 18% 92%,
      rgba(94, 170, 255, 0.14) 0%,
      transparent 70%),
    /* halo cyan discret en bas-droite */
    radial-gradient(ellipse 55% 40% at 85% 88%,
      rgba(56, 212, 200, 0.08) 0%,
      transparent 70%),
    /* base verticale épurée bleu nuit -> bleu profond */
    linear-gradient(180deg,
      #050b18 0%,
      #07111f 30%,
      #0a1a30 60%,
      #0d2342 100%) !important;
}

/* Léger grain pour la texture minimaliste (ultra discret) */
.hero__bg-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* La grille de fond reste mais plus discrète pour l'aspect épuré */
.hero__grid-lines {
  opacity: 0.28 !important;
}

/* Scanlines réduites */
.hero__scanlines {
  opacity: 0.25 !important;
}

/* ============================================================
   TEAM INFO — Alignement à droite (titre, description, stats, games)
   ============================================================ */
.team__info {
  text-align: right;
  align-items: flex-end;
}

.team__games {
  justify-content: flex-end;
}

.team__title,
.team__desc {
  margin-left: auto;
  text-align: right;
}

.team__desc {
  /* max-width existant conservé, juste poussé à droite */
  margin-left: auto;
  margin-right: 0;
}

.team__stats {
  justify-content: flex-end;
  width: 100%;
}

.team__stat {
  align-items: flex-end;
  text-align: right;
}

/* Sur mobile, on garde lisible : on revient à gauche */
@media (max-width: 900px) {
  .team__info,
  .team__title,
  .team__desc,
  .team__stat {
    text-align: left;
    align-items: flex-start;
  }
  .team__games,
  .team__stats {
    justify-content: flex-start;
  }
  .team__title,
  .team__desc {
    margin-left: 0;
    margin-right: auto;
  }
}

/* ============================================================
   TEAM SECTION — Aligner le breakpoint tablette sur celui de la
   section "Dernières news" (.actu__grid) : la mise en page PC
   "éventail" bascule à 1200px au lieu de 1100px. Entre 900px et
   1199.98px on garde le VRAI layout tablette d'origine (2 colonnes,
   joueurs en haut / managers en bas).
   ============================================================ */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  /* Annule la mise en page PC "éventail" pour garder le layout
     tablette d'origine (celui qui s'appliquait 900-1099px). */

  /* Padding tablette (annule le padding-block PC) */
  .team-section {
    padding-block: var(--space-section) !important;
  }

  /* Grille 2 colonnes par défaut, comme entre 900 et 1099px */
  .team__content {
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: clamp(30px, 4vw, 60px) !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  /* Composition : ratio par défaut + max-width tablette */
  .team__composition {
    aspect-ratio: 5 / 4 !important;
    max-width: 620px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Joueurs en haut / managers en bas (layout d'origine) */
  .roster-card--player { width: 30% !important; }
  .roster-card--manager { width: 23% !important; }

  .roster-card--p1 {
    top: 4% !important; left: 6% !important;
    bottom: auto !important; right: auto !important;
    transform: rotate(-7deg) !important; z-index: 2 !important;
  }
  .roster-card--p2 {
    top: 0 !important; left: 35% !important;
    bottom: auto !important; right: auto !important;
    transform: rotate(3deg) !important; z-index: 3 !important;
  }
  .roster-card--p3 {
    top: 6% !important; right: 6% !important;
    bottom: auto !important; left: auto !important;
    transform: rotate(8deg) !important; z-index: 2 !important;
  }
  .roster-card--m1 {
    bottom: 4% !important; left: 18% !important;
    top: auto !important; right: auto !important;
    transform: rotate(-5deg) !important; z-index: 1 !important;
  }
  .roster-card--m2 {
    bottom: 0 !important; right: 18% !important;
    top: auto !important; left: auto !important;
    transform: rotate(6deg) !important; z-index: 1 !important;
  }

  /* Tailles texte tablette (annule les boosts PC) */
  .team__info { gap: clamp(14px, 2vw, 26px) !important; }
  .team__game-tag {
    font-size: clamp(9px, 0.8vw, 11px) !important;
    padding: clamp(5px, 0.6vw, 7px) clamp(10px, 1.2vw, 14px) !important;
  }
  .team__title { font-size: clamp(28px, 3.8vw, 56px) !important; line-height: 0.9 !important; }
  .team__desc  { font-size: clamp(12px, 1vw, 15px) !important; line-height: 1.7 !important; max-width: 540px !important; }
  .team__stats { gap: clamp(20px, 3vw, 48px) !important; padding-top: clamp(10px, 1.5vw, 18px) !important; }
  .team__stat-n { font-size: clamp(28px, 3.2vw, 48px) !important; }
  .team__stat-l { font-size: clamp(8px, 0.75vw, 10.5px) !important; margin-top: 4px !important; }
}

/* ============================================================
   EVENTS SECTION (Rejoins l'arène) — Aligner le breakpoint
   tablette sur celui de la section "Dernières news" : la
   bascule 3 colonnes -> 2 colonnes se fait à 1200px au lieu
   de 1100px.
   ============================================================ */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  /* Force le layout tablette (2 colonnes + 3e carte full width) */
  .events__grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .events__grid > .event-card:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================
   EVENTS SECTION — Pas de format mobile distinct.
   Le layout "tablette" (2 colonnes + 3e carte pleine largeur)
   s'applique sur TOUTES les tailles en dessous de 1200px,
   exactement comme la section "Dernières news".
   ============================================================ */
@media (max-width: 1199.98px) {
  .events__grid {
    grid-template-columns: 1fr 1fr !important;
    /* on garde le même gap responsive que les cartes news */
    gap: clamp(10px, 1.4vw, 22px) !important;
  }
  .events__grid > .event-card:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  /* Évite que le contenu des cartes soit cassé sur petit écran :
     on resserre juste les paddings, sans changer la structure. */
  .event-card {
    padding: clamp(14px, 2.2vw, 28px) clamp(14px, 2.2vw, 28px) clamp(18px, 2.6vw, 32px) !important;
  }
  .event-card--large .event-card__title {
    font-size: clamp(20px, 2.4vw, 34px) !important;
  }
  .event-card__title {
    font-size: clamp(18px, 2.2vw, 26px) !important;
  }
  .event-card__desc {
    font-size: clamp(12px, 1.4vw, 13.5px) !important;
  }
}

/* ============================================================
   ACTU SECTION — Format tablette (< 1200px)
   2 GRANDES widgets en haut + 4 PETITES widgets en dessous.
   Toutes les images restent en 16:9 dans leur widget, sans
   casser la structure quand la page se rétrécit.
   ============================================================ */
@media (max-width: 1199.98px) {
  .actu__grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: clamp(10px, 1.4vw, 18px) !important;
  }

  /* --- 2 GRANDES widgets : cartes 1 et 2 (rangée du haut) --- */
  .actu__grid .actu-card:nth-child(1),
  .actu__grid .actu-card:nth-child(2) {
    grid-column: auto !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__img-wrap,
  .actu__grid .actu-card:nth-child(2) .actu-card__img-wrap {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__title,
  .actu__grid .actu-card:nth-child(2) .actu-card__title {
    font-size: clamp(15px, 2vw, 22px) !important;
    line-height: 1.15 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__excerpt,
  .actu__grid .actu-card:nth-child(2) .actu-card__excerpt {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    font-size: clamp(11px, 1.1vw, 13px) !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__body,
  .actu__grid .actu-card:nth-child(2) .actu-card__body {
    padding: clamp(10px, 1.4vw, 18px) !important;
    gap: clamp(4px, 0.8vw, 8px) !important;
  }

  /* --- 4 PETITES widgets : cartes 3 à 6 (rangées du bas, 2x2) --- */
  .actu__grid .actu-card:nth-child(n+3) {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important;
    align-items: stretch !important;
  }
  .actu__grid .actu-card:nth-child(3) { grid-row: 2 !important; }
  .actu__grid .actu-card:nth-child(4) { grid-row: 2 !important; }
  .actu__grid .actu-card:nth-child(5) { grid-row: 3 !important; }
  .actu__grid .actu-card:nth-child(6) { grid-row: 3 !important; }

  /* Image 16:9 forcée dans la petite widget — la largeur s'adapte,
     la hauteur suit, et le body remplit le reste. */
  .actu__grid .actu-card:nth-child(n+3) .actu-card__img-wrap {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    align-self: stretch !important;
  }
  .actu__grid .actu-card:nth-child(n+3) .actu-card__photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .actu__grid .actu-card:nth-child(n+3) .actu-card__body {
    padding: clamp(8px, 1.2vw, 14px) clamp(10px, 1.4vw, 16px) !important;
    gap: clamp(3px, 0.5vw, 6px) !important;
    justify-content: center !important;
  }
  .actu__grid .actu-card:nth-child(n+3) .actu-card__title {
    font-size: clamp(11px, 1.2vw, 14px) !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .actu__grid .actu-card:nth-child(n+3) .actu-card__excerpt {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    font-size: clamp(9.5px, 1vw, 12px) !important;
    line-height: 1.4 !important;
  }
  .actu__grid .actu-card:nth-child(n+3) .actu-card__date {
    font-size: clamp(8px, 0.85vw, 10px) !important;
  }
  .actu__grid .actu-card:nth-child(n+3) .actu-card__cat-badge {
    font-size: clamp(7px, 0.75vw, 9px) !important;
    padding: 2px clamp(4px, 0.7vw, 7px) !important;
    top: clamp(4px, 0.6vw, 7px) !important;
    left: clamp(4px, 0.6vw, 7px) !important;
  }
  .actu__grid .actu-card:nth-child(n+3) .actu-card__social-icon {
    width: clamp(24px, 3vw, 40px) !important;
    height: clamp(24px, 3vw, 40px) !important;
  }
  .actu__grid .actu-card:nth-child(n+3) .actu-card__link {
    font-size: clamp(9px, 0.9vw, 11px) !important;
  }
  /* Harmonise "Lire l'article" size for the 2 lead cards on mobile/tablet */
  .actu__grid .actu-card:nth-child(1) .actu-card__link,
  .actu__grid .actu-card:nth-child(2) .actu-card__link {
    font-size: clamp(9px, 0.9vw, 11px) !important;
  }
}


/* ============================================================
   FIX — NOTRE ROSTER (PC ≥ 1200px)
   Objectif :
   • Pas de gros vide en haut/bas de la section
   • Cartes décalées vers la DROITE de leur colonne (plus proches du centre)
   • Bloc infos un peu plus petit, CENTRÉ horizontalement et verticalement
     dans sa colonne droite, à la même échelle de hauteur que les cartes
   • Tout shrink proportionnellement quand la page se rétrécit
   ============================================================ */
@media (min-width: 1200px) {

  /* Section : on réduit drastiquement le padding vertical */
  .team-section {
    padding-block: clamp(40px, 5vh, 72px) !important;
  }

  /* Grille : 2 colonnes équilibrées, items centrés, plus de min-height */
  .team__content {
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(20px, 2.5vw, 48px) !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  /* Composition cartes : box compacte, ancrée à droite de sa colonne
     pour rapprocher les cartes du bloc infos. Aspect ratio en vw pour
     que la hauteur suive la largeur du viewport. */
  .team__composition {
    aspect-ratio: 5 / 2.35 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    align-self: center !important;
  }

  /* Cartes joueurs / managers — éventail décalé vers la DROITE */
  .roster-card--player  { width: 27% !important; }
  .roster-card--manager { width: 20% !important; }

  .roster-card--p1 {
    bottom: 4% !important;  left: 10% !important;
    top: auto !important;   right: auto !important;
    transform: rotate(-7deg) !important;
    z-index: 2 !important;
  }
  .roster-card--p2 {
    bottom: 16% !important; left: 28% !important;
    top: auto !important;   right: auto !important;
    transform: rotate(2deg) !important;
    z-index: 3 !important;
  }
  .roster-card--p3 {
    bottom: 4% !important;  left: 46% !important;
    top: auto !important;   right: auto !important;
    transform: rotate(7deg) !important;
    z-index: 2 !important;
  }
  .roster-card--m1 {
    bottom: 0% !important;  left: 66% !important;
    top: auto !important;   right: auto !important;
    transform: rotate(-4deg) !important;
    z-index: 1 !important;
  }
  .roster-card--m2 {
    bottom: 12% !important; left: 81% !important;
    top: auto !important;   right: auto !important;
    transform: rotate(5deg) !important;
    z-index: 1 !important;
  }

  /* Bloc infos : MÊME aspect-ratio que la box des cartes → garantit
     EXACTEMENT la même hauteur (même largeur de colonne × même ratio).
     Le contenu reste contraint dans cette boîte, jamais ne dépasse
     le haut ni le bas des cartes. */
  .team__info {
    aspect-ratio: 5 / 2.35 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: center !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;

    gap: clamp(8px, 1vw, 16px) !important;
    padding: clamp(8px, 1.2vw, 20px) clamp(10px, 1.5vw, 28px) !important;
    overflow: hidden !important;
  }

  .team__games {
    justify-content: center !important;
    gap: clamp(5px, 0.6vw, 9px) !important;
  }

  .team__game-tag {
    font-size: clamp(9px, 0.78vw, 12px) !important;
    padding: clamp(5px, 0.55vw, 8px) clamp(10px, 1.1vw, 14px) !important;
  }

  .team__title,
  .team__desc {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  /* Titre plus grand mais reste dans la boîte */
  .team__title {
    font-size: clamp(28px, 3vw, 52px) !important;
    line-height: 0.95 !important;
  }

  /* Description : on plafonne le nb de lignes pour ne pas déborder */
  .team__desc {
    font-size: clamp(12px, 0.95vw, 15px) !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
  }

  .team__stats {
    justify-content: center !important;
    width: 100% !important;
    gap: clamp(16px, 2vw, 38px) !important;
    padding-top: clamp(8px, 1vw, 14px) !important;
  }

  .team__stat {
    align-items: center !important;
    text-align: center !important;
  }

  .team__stat-n {
    font-size: clamp(26px, 2.6vw, 44px) !important;
  }

  .team__stat-l {
    font-size: clamp(8px, 0.72vw, 11px) !important;
    margin-top: 3px !important;
  }
}

/* ============================================================
   FIX TABLETTE (521px – 1199.98px) — Disposition des cartes
   "Notre roster" identique à la version mobile :
   les cartes manager sont LÉGÈREMENT sous les cartes joueur
   (et non loin en bas comme avant).
   ============================================================ */
@media (min-width: 521px) and (max-width: 1199.98px) {
  .team__composition {
    aspect-ratio: 5 / 3.6 !important;
    max-width: 100% !important;
  }

  /* Tailles cartes alignées sur le mobile */
  .roster-card--player  { width: 32% !important; }
  .roster-card--manager { width: 25% !important; }

  /* Positions joueurs — identiques à la version mobile (rules par défaut) */
  .roster-card--p1 {
    top: 4% !important; left: 6% !important;
    bottom: auto !important; right: auto !important;
    transform: rotate(-7deg) !important; z-index: 2 !important;
  }
  .roster-card--p2 {
    top: 0 !important; left: 35% !important;
    bottom: auto !important; right: auto !important;
    transform: rotate(3deg) !important; z-index: 3 !important;
  }
  .roster-card--p3 {
    top: 6% !important; right: 6% !important;
    bottom: auto !important; left: auto !important;
    transform: rotate(8deg) !important; z-index: 2 !important;
  }

  /* Managers — légèrement sous les joueurs (comme en mobile) */
  .roster-card--m1 {
    bottom: 4% !important; left: 18% !important;
    top: auto !important; right: auto !important;
    transform: rotate(-5deg) !important; z-index: 1 !important;
  }
  .roster-card--m2 {
    bottom: 0 !important; right: 18% !important;
    top: auto !important; left: auto !important;
    transform: rotate(6deg) !important; z-index: 1 !important;
  }
}
/* ============================================================
   LANGUAGE DROPDOWN — FIX
   The .navbar__lang had `clip-path: var(--clip-tag)` which was
   clipping its absolutely-positioned `.lang__dropdown` child,
   making the menu invisible when opened. Remove clip-path from
   the toggle so the dropdown can fully render below it. Lift
   z-index so it sits above following sections.
   ============================================================ */
.navbar__lang {
  clip-path: none !important;
  border-radius: 4px;
}
.lang__dropdown {
  z-index: 1200 !important;
}
.navbar__lang.open .lang__dropdown,
.lang__dropdown.show {
  display: block !important;
}
/* ============================================================
   HERO BANNER — Layout sans logo central
   Le logo central et ses décorations (lignes + coins) ont été
   retirés du HTML. On adapte la grille pour ne plus afficher
   de colonne centrale, et on cache toute trace résiduelle des
   éléments supprimés au cas où.
   ============================================================ */
.hero-banner {
  grid-template-columns: 1fr 1fr !important;
}

.hero-banner__logo,
.hero-banner__line,
.hero-banner__mark,
.hero-banner__corner,
.hero-banner__mark-img {
  display: none !important;
}

/* Sur mobile (burger actif) la grille redevient 1 colonne — règle existante */
@media (max-width: 768px) {
  .hero-banner {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   HERO STATS — Bascule top-left quand le burger s'active (≤768px)
   Synchronisé avec la disparition des liens .hero-banner__side
   (déjà gérée par la règle existante `display: none` à ≤768px).
   ============================================================ */
@media (max-width: 768px) {
  .hero__stats {
    bottom: auto !important;
    right: auto !important;
    top: clamp(80px, 16vw, 120px);
    left: var(--page-pad);
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(14px, 3vw, 24px);
    text-align: left;
    align-items: flex-start;
  }
  .hero__stat {
    align-items: flex-start;
  }
  .hero__stat-n {
    text-align: left;
  }
  .hero__stat-l {
    text-align: left;
  }
}

/* Sur très petit écran, on garde le stack vertical mais toujours en haut-gauche */
@media (max-width: 420px) {
  .hero__stats {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .hero__stat {
    align-items: flex-start !important;
  }
}

/* ============================================================
   HERO BANNER — Nav unique à gauche, PAS de burger, layout STABLE
   ------------------------------------------------------------
   Override final de tout ce qui a été défini plus haut :
   - tous les 4 liens sont à gauche, sur une SEULE ligne horizontale
   - aucun saut, aucun wrap, aucun changement de mise en page
     quand on rétrécit la fenêtre
   - le burger est désactivé à toutes les largeurs
   - le hover ne déforme plus la barre (letter-spacing fixe)
   ============================================================ */
.hero-banner {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: clamp(14px, 2.2vw, 30px) var(--page-pad) !important;
  gap: 0 !important;
}

.hero-banner__side {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 2.2vw, 36px) !important;
  min-width: 0;
}

/* Le burger est définitivement retiré */
.hero-banner__burger {
  display: none !important;
}

/* Liens : taille / espacement s'adaptent linéairement, JAMAIS de wrap */
.hero-banner__link {
  font-size: clamp(8.5px, 1vw, 12.5px) !important;
  letter-spacing: clamp(0.06em, 0.16vw, 0.28em) !important;
  padding: 6px 0 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: color .3s ease !important; /* on retire letter-spacing du hover */
}

/* Hover : on garde le soulignement animé mais on n'élargit PLUS le texte */
.hero-banner__link:hover {
  letter-spacing: clamp(0.06em, 0.16vw, 0.28em) !important;
  color: var(--text) !important;
}

/* Annule la règle mobile précédente qui cachait les liens et affichait le burger */
@media (max-width: 768px) {
  .hero-banner {
    grid-template-columns: none !important;
    justify-items: start !important;
    padding-inline: var(--page-pad) !important;
  }
  /* Au moment où la navbar devient burger : les 4 liens de hero disparaissent */
  .hero-banner__side {
    display: none !important;
  }
  .hero-banner__burger {
    display: none !important;
  }
}

/* ============================================================
   HERO STATS — Position UNIQUE selon le viewport :
     • > 768px : bas-droite (état par défaut)
     • ≤ 768px : angle haut-droite (au moment où la section
       "Notre roster" passe en mobile = 1 colonne)
   AUCUN état intermédiaire. Neutralise toutes les anciennes
   règles (notamment 601-1024px qui mettait stats en haut).
   ============================================================ */
.hero__stats {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  bottom: clamp(25px, 5vw, 50px) !important;
  right: var(--page-pad) !important;
  margin: 0 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  text-align: right !important;
  gap: clamp(20px, 3vw, 48px) !important;
  z-index: 6 !important;
}
.hero__stat {
  align-items: flex-end !important;
  text-align: right !important;
}
.hero__stat-n,
.hero__stat-l {
  text-align: right !important;
}

@media (max-width: 768px) {
  /* Quand "Notre roster" passe en mobile + navbar devient burger */
  .hero-banner {
    /* visibility (et non display: none) pour garder l'élément
       dans le layout : sans ça, getBoundingClientRect() retourne
       toujours 0 et la navbar fixe ne se déclencherait plus au
       scroll sur mobile (comportement cassé). */
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .hero__stats {
    position: absolute !important;
    top: clamp(12px, 2.5vw, 24px) !important;
    right: clamp(12px, 2.5vw, 24px) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 8 !important;
  }
}

@media (max-width: 420px) {
  .hero__stats {
    flex-direction: column !important;
    gap: 6px !important;
  }
}

/* ============================================================
   HERO — Tailles MONOTONIQUES (sans saut ni rebond)
   Linéaires : grand à 1920px → petit à 320px.
   Les mins sont gardés identiques à l'existant (=tailles
   actuelles au plus petit format).
   Les max sont LÉGÈREMENT augmentés pour que le PC paraisse
   plus grand qu'avant.
   ============================================================ */
.hero__eyebrow { font-size: clamp(8px, 0.73vw, 14px) !important; }
.hero__title   { font-size: clamp(34px, 7.3vw, 140px) !important; }
.hero__sub     { font-size: clamp(13px, 1.15vw, 22px) !important; }
.hero__stat-n  { font-size: clamp(16px, 1.88vw, 36px) !important; }
.hero__stat-l  { font-size: clamp(7px, 0.68vw, 13px) !important; }

/* Description : largeur STRICTEMENT monotonique
   (annule l'ancienne règle @media min-width:1024 qui créait
   un saut max-width 35vw → 500px à 1024px). */
.hero__sub-wrap {
  max-width: clamp(200px, 28vw, 500px) !important;
}
@media (min-width: 1024px) {
  .hero__sub-wrap { max-width: clamp(200px, 28vw, 500px) !important; }
}
@media (max-width: 768px) {
  .hero__sub-wrap { max-width: clamp(200px, 28vw, 500px) !important; }
}
@media (max-width: 480px) {
  .hero__sub-wrap { max-width: clamp(200px, 28vw, 500px) !important; }
}

/* (Bloc précédent retiré — désormais géré par la règle monotonique
   .hero__sub-wrap { max-width: clamp(200px, 28vw, 500px) } juste au-dessus.) */