@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@font-face{font-family:'Azurio Bold';src:url('font/azurio_bold.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'Azurio Medium';src:url('font/azurio_medium.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'Azurio Light';src:url('font/azurio_light.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap;}

/* ============================================================
   AZURIO — variante stylistique SS04 activee globalement
   ============================================================ */
html {
  font-feature-settings: "ss04" 1;
  -webkit-font-feature-settings: "ss04" 1;
}
*, *::before, *::after {
  font-feature-settings: inherit;
  -webkit-font-feature-settings: inherit;
}


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: 'Azurio Bold', sans-serif;
  --font-medium: 'Azurio Medium', sans-serif;
  --font-light: 'Azurio Light', 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);
  /* Hero sub-title expand/collapse animation (Voir plus / Voir moins) */
  --sub-anim: 420ms;
  --ease-open: cubic-bezier(0.16, 1, 0.3, 1);   /* ouverture : rapide -> lent */
  --ease-close: cubic-bezier(0.7, 0, 0.84, 0);  /* fermeture : lent -> rapide */
  --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%);
}

/* ============================================================
   TITRES EN MAJUSCULES
   ============================================================ */
.team__header .section-title,
.team__header .section-title em,
.team__header .section-title .highlight-text,
.team__header .section-title .word,
.events__header .section-title,
.events__header .section-title em,
.events__header .section-title .rotate,
.events__header .section-title .rotate__char,
.events__header .section-title .rotate__measure,
.actu__header .section-title,
.actu__header .section-title em,
.team__title,
.team__title em,
.event-card__title {
  text-transform: uppercase !important;
  font-feature-settings: "ss04" 1 !important;
  -webkit-font-feature-settings: "ss04" 1 !important;
  font-variant-alternates: styleset(ss04) !important;
}

/* 1. On autorise le défilement (on retire le hidden) */
html, body {
  overflow-y: visible;

  /* 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: clip;
}

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: none;
  -webkit-clip-path: none;
  border-radius: 6px !important;
  transition: background var(--tr), color var(--tr), outline-color var(--tr);
}

.btn:hover {
  transform: none;
}

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

.btn--primary:hover {
  background: var(--accent-soft);
  filter: none;
}

.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: 600px) {
  .navbar__nav { display: none !important; }
  .navbar__burger { display: flex !important; }
  .navbar__right { gap: 2px; }
  .lang__flag { font-size: 10px; }
}

@media (min-width: 601px) {
  .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.29108 * (w - 500px) + 666.67px
     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
     La première droite est calibrée pour atteindre exactement 1920x1080, tout en conservant le rétrécissement immédiat et progressif jusqu'au 3:4 (aucun plateau).
     -> 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),
    max(
      calc((100vw - 500px) * 0.29108 + 666.67px),
      calc((100vw - 2560px) * 0.9 + 1351px)
    )
  );
  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;
  color: var(--text);
}

.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 .events__community-btn {
  margin-left: auto;
}

.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: 600px) {
  .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;
  /* Bas en pente : plus bas à gauche, remonte vers la droite */
  --team-slope: clamp(36px, 5vw, 110px);
  padding-top: calc(var(--space-section) + var(--team-slope));
  padding-bottom: calc(var(--space-section) + var(--team-slope));
  clip-path: polygon(0 var(--team-slope), 100% 0, 100% calc(100% - var(--team-slope)), 0 100%);
  -webkit-clip-path: polygon(0 var(--team-slope), 100% 0, 100% calc(100% - var(--team-slope)), 0 100%);
}


.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);
  padding-top: clamp(10px, 1.5vw, 18px);
  border-top: 1px solid var(--border);
}

.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);
}

/* ============================================================
   ROSTER TITLE — effet couleur minimaliste + bascule 3D au scroll
   Pilote par --tilt (-1 en haut du viewport .. +1 en bas) et
   --glow (max au centre). Perspective reelle (pas un simple italic) :
   haut = \\  /  centre = droit  /  bas = /
   ============================================================ */
.team__title {
  /* Couleur UNIFORME bleu proche du gris (toute la phrase, accent compris). */
  color: #a6b6cf;
  -webkit-text-fill-color: #a6b6cf;
  background: none;
  /* Effet : glow bleu-gris doux pilote au scroll (max quand le titre est droit). */
  text-shadow: 0 0 calc(var(--glow, 0) * 16px) rgba(150, 180, 225, calc(var(--glow, 0) * 0.55));
  /* Bascule 3D en perspective au scroll (vraie 3D, pas un simple italic). */
  transform:
    perspective(720px)
    rotateX(calc(var(--tilt, 0) * 6deg))
    rotateY(calc(var(--tilt, 0) * 16deg))
    skewX(calc(var(--tilt, 0) * 9deg));
  transform-origin: 0% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  transition: text-shadow .2s ease;
}
/* Meme couleur uniforme pour l'accent (plus de bleu vif different). */
.team__title em {
  color: #a6b6cf;
  -webkit-text-fill-color: #a6b6cf;
}
@media (prefers-reduced-motion: reduce) {
  .team__title { transform: none !important; }
}

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

.team__stats {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}

.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: 600px) {
  .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%; }
}

/* POLICE OBLISK — hero, titre du roster et tagline principale */
.hero__title,
.hero__title em,
.hero__motto,
.team__title,
.team__title em,
.footer__tagline-main {
  font-family: 'Oblisk', var(--font-display), sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* Accroche au-dessus du titre hero, légèrement plus petite. */
.hero__motto {
  font-size: clamp(18px, 2.5vw, 38px) !important;
  line-height: 1 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-soft, #7ec4ff);
  margin: 0 0 clamp(8px, 1.2vw, 16px);
  white-space: nowrap !important;
}

/* Le titre du roster reste sur une seule ligne. */
.team__title {
  white-space: nowrap !important;
}

/* Le texte reste exactement sur une ligne, sans retour automatique. */
.footer__tagline-main {
  white-space: nowrap !important;
}

/* ============================================================
   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;
  /* Layout : ligne 1 = icone + TITRE cote a cote ; ensuite desc / tags / lien sur toute la largeur */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(12px, 1.4vw, 20px);
  row-gap: 12px;
  align-items: start;
  position: relative;
  overflow: hidden;
  clip-path: var(--clip-bigcard);
  transition: outline-color var(--tr), transform var(--tr);
}
/* Ligne 1 : icone (col 1) + titre (col 2) alignes verticalement au centre */
.event-card > .event-card__icon  { grid-column: 1; grid-row: 1; align-self: center; }
.event-card > .event-card__title { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
/* Lignes suivantes : pleine largeur sous l'ensemble icone + titre */
.event-card > .event-card__desc,
.event-card > .event-card__tags,
.event-card > .event-card__link { grid-column: 1 / -1; }

.event-card::after {
  content: none;
}

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

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

/* 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 {
  /* Plus de conteneur visible : ni fond, ni contour, ni clip-path.
     La taille = celle du titre a cote, pour que haut/bas s'alignent. */
  width: auto;
  height: 1em;
  background: transparent;
  outline: none;
  border: none;
  clip-path: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  /* Hauteur calee sur la taille de police du titre voisin */
  font-size: inherit;
}
/* Le SVG prend exactement la hauteur du titre (1em via le parent grid-row) */
.event-card__icon svg {
  width: auto;
  height: 100%;
  display: block;
}
/* Le conteneur d'icone herite de la hauteur de ligne du titre voisin */
.event-card { --evcard-icon-h: clamp(28px, 3vw, 40px); }
.event-card > .event-card__icon { height: var(--evcard-icon-h); }

.event-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--accent);
  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); }

/* Watermark icon en fond de la carte : grande icone en trait fin, bien incrustee */
.event-card__bg-icon {
  position: absolute;
  right: -8%;
  bottom: -12%;
  width: 62%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  color: #1a3766;
  opacity: 0.55;
  z-index: 0;
  transition: opacity var(--tr), transform var(--tr);
}
.event-card__bg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 0.25;
}
.event-card:hover .event-card__bg-icon {
  opacity: 0.75;
  transform: translate(-4px, -4px);
}
/* Les autres elements doivent rester au-dessus du watermark */
.event-card > .event-card__icon,
.event-card > .event-card__title,
.event-card > .event-card__desc,
.event-card > .event-card__tags,
.event-card > .event-card__link { position: relative; z-index: 1; }

/* 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) 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  margin: 0 -12px;
  border-radius: 6px;
  transition: background-color var(--tr);
}

.upcoming__item:hover {
  background-color: rgba(94, 170, 255, 0.02);
}

.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: 1300px) {
  .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 {
  position: relative;
  width: clamp(20px, 2.4vw, 36px);
  height: clamp(20px, 2.4vw, 36px);
  background: transparent;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  overflow: hidden;
  /* 4 coins coupes conserves pour le fond qui apparait au hover */
  clip-path: polygon(
    5px 0, calc(100% - 5px) 0,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0 calc(100% - 5px), 0 5px
  );
  transition: color 0.35s ease;
}

/* Cercle de remplissage qui s'agrandit depuis le centre au survol.
   Le fond n'est pas visible au repos (scale 0) et grandit pour couvrir
   tout le bouton au hover, en prenant la couleur de l'icone par defaut. */
.social-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text-muted);
  border-radius: 50%;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s ease;
  z-index: 0;
  pointer-events: none;
}

.social-btn svg {
  position: relative;
  z-index: 1;
  width: clamp(9px, 1vw, 16px);
  height: clamp(9px, 1vw, 16px);
  transition: color 0.35s ease;
}

.social-btn:hover {
  /* l'icone prend la couleur du fond de la page */
  color: var(--bg-deep);
}
.social-btn:hover::before {
  /* le cercle remplit largement le bouton (diagonale + marge) */
  transform: scale(2.2);
}

.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;
  font-style: italic;
  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" INLINE (en fin
   de description) avec animation ease-out (rapide puis lent)
   ============================================================ */
.hero__sub-wrap {
  position: relative;
  display: block;
  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.
   Etat REPLIE : 2 lignes SANS "…" (pas de line-clamp), le texte va
   jusqu'au bord droit puis se fond via un masque en dégradé. */
.hero__sub-wrap .hero__sub {
  /* Le texte et son curseur partagent le meme fondu de fin de ligne. */
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 100%;
  display: block;
  max-height: 2.8em; /* 2 lignes (line-height 1.4) */
  overflow: hidden;
  /* Fondu UNIQUEMENT sur la 2e ligne, à la fin de la phrase.
     - couche 1 (verticale) : 1re ligne 100% opaque ; 2e ligne suit la couche 2
     - couche 2 (horizontale) : fondu marqué à la fin (texte totalement
       invisible sur les derniers pixels, là où se place "Voir plus")
     Les deux couches sont additionnées (mask-composite: add). */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0, #000 50%, transparent 50%),
    linear-gradient(to right, #000 0, #000 calc(100% - clamp(150px, 20vw, 270px)), transparent calc(100% - clamp(70px, 9vw, 120px)));
          mask-image:
    linear-gradient(to bottom, #000 0, #000 50%, transparent 50%),
    linear-gradient(to right, #000 0, #000 calc(100% - clamp(150px, 20vw, 270px)), transparent calc(100% - clamp(70px, 9vw, 120px)));
  -webkit-mask-composite: source-over;
          mask-composite: add;
  /* Glissement vers le haut + fondu synchronisés avec le max-height (piloté en JS).
     Transition combinée max-height + opacity + transform (translateY 12px). */
  transform: translateY(0);
  will-change: max-height, transform;
  transition:
    max-height var(--sub-anim) var(--ease-close),
    opacity var(--sub-anim) var(--ease-close),
    transform var(--sub-anim) var(--ease-close);
}

/* Bascule des courbes selon l'état : ease-open à l'ouverture (is-expanded) */
.hero__sub-wrap.is-expanded .hero__sub {
  transition:
    max-height var(--sub-anim) var(--ease-open),
    opacity var(--sub-anim) var(--ease-open),
    transform var(--sub-anim) var(--ease-open);
}

.hero__sub-wrap .hero__sub.expanded {
  display: block;
  max-height: none;
  /* Plus de fondu quand le texte est déplié */
  -webkit-mask-image: none;
          mask-image: none;
}

.hero__sub-toggle {
  background: transparent;
  border: 0;
  padding: 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: baseline;
  gap: 6px;
  white-space: nowrap;
}

/* Survol : changement de couleur uniquement, aucune animation */
.hero__sub-toggle:hover {
  color: var(--accent-teal, #38d4c7);
}

.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);
}

/* === État REPLIÉ : bouton "Voir plus" inline en fin de description ===
   On réserve l'espace du bouton via padding-right sur la description.
   L'ellipsis "…" du line-clamp apparaît NATURELLEMENT au bout de la
   ligne 2, et le bouton se positionne juste après. Pas de fake-dots,
   pas de dégradé. */
.hero__sub-wrap:not(.is-expanded) .hero__sub {
  /* Plus de réservation d'espace : le texte va jusqu'au bord droit et
     se fond sous le bouton grâce au masque en dégradé. */
  padding-right: 0;
}

/* Replié : 'Voir plus' ancré à droite, aligné sur la ligne de base
   du texte de la 2e ligne (léger décalage pour compenser la
   différence de taille de police entre le texte et le bouton). */
.hero__sub-wrap:not(.is-expanded) .hero__sub-toggle {
  position: absolute;
  right: 0;
  left: auto;
  top: 75%; /* centre vertical de la 2e ligne (boîte = 2 lignes) */
  bottom: auto;
  transform: translateY(-50%);
  padding: 0;
  background: transparent;
}

/* === État DÉPLIÉ : bouton sous la description, sur sa propre ligne === */
/* Deplie : 'Voir moins' positionne en JS juste apres le DERNIER mot du
   texte (meme logique 'a cote du texte' qu'en mode replie). */
.hero__sub-wrap.is-expanded .hero__sub-toggle {
  position: absolute;
  right: auto;
  bottom: auto;
  margin-top: 0;
  will-change: opacity, transform;
  /* Ouverture : le bouton "Voir moins" monte (translateY 12px -> 0) + fondu,
     synchronisé sur la même durée / courbe que la montée du texte. */
  transition:
    opacity var(--sub-anim) var(--ease-open),
    transform var(--sub-anim) var(--ease-open);
}

/* 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 0.29108 : 3:4 exact à 500px, plein écran en 1920x1080, rétrécissement progressif sans plateau entre les deux.
   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),
    max(
      calc((100vw - 500px) * 0.29108 + 666.67px),
      calc((100vw - 2560px) * 0.9 + 1351px)
    )
  ) !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, 'Azurio Bold', 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, 'Azurio Bold', 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: 600px) {
  .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 : background-attachment:fixed est bugge sur iOS / Android, on ne peut
   donc pas garder l'effet "fond fixe" du PC. On recree "le fond bouge au scroll"
   en faisant GLISSER le degrade via background-position (piloté en JS). On agrandit
   le fond (background-size 140%) pour avoir de la marge de glissement sans jamais
   reveler de bord. Memes couleurs que sur PC. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .community-bg {
    background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
    background-size: 100% 200%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    will-change: background-position;
  }
  .community-bg::before {
    background-attachment: scroll;
    background-size: 200% 240%;
  }

  /* "Rejoins l'arene" : le bouton "concept de l'evenement" est masque en mobile */
  .upcoming__item .btn--az2 { display: none !important; }
}

/* ============================================================
   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: 420px; }

  .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: 600px) {
  .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: 1300px) {
  .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 (768px – 1299.98px) ─ 2 LARGE on row 1 + 2 SMALL on row 2 ───
   Cards 3 and 6 are hidden on tablet. */
@media (min-width: 601px) and (max-width: 1299.98px) {
  .actu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: clamp(10px, 1.4vw, 18px);
    align-items: stretch;
  }

  /* Hide card 3 (3rd lead) and card 6 (3rd small) on tablet */
  .actu__grid .actu-card:nth-child(3),
  .actu__grid .actu-card:nth-child(6) {
    display: none !important;
  }

  /* LARGE cards (1, 2) on row 1 — 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(15px, 2vw, 22px);
    line-height: 1.15;
  }
  .actu__grid .actu-card--lead .actu-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: clamp(11px, 1.2vw, 14px);
    line-height: 1.5;
    color: var(--text-muted);
  }
  .actu__grid .actu-card--lead .actu-card__body {
    padding: clamp(10px, 1.6vw, 20px);
    gap: clamp(4px, 0.8vw, 10px);
  }

  /* SMALL cards (4, 5) on row 2 — horizontal, image LEFT */
  .actu__grid .actu-card--small {
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    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(11px, 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--small .actu-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: clamp(10px, 1vw, 12.5px);
    line-height: 1.4;
    color: var(--text-muted);
  }
  .actu__grid .actu-card--small .actu-card__date {
    font-size: clamp(8px, 0.85vw, 10px);
  }
  .actu__grid .actu-card--small .actu-card__body {
    padding: clamp(8px, 1vw, 14px) clamp(10px, 1.2vw, 16px);
    gap: clamp(2px, 0.4vw, 5px);
    justify-content: center;
  }
  .actu__grid .actu-card--small .actu-card__cat-badge {
    font-size: clamp(7px, 0.8vw, 9px);
    padding: 2px clamp(5px, 0.7vw, 7px);
    top: clamp(5px, 0.6vw, 7px);
    left: clamp(5px, 0.6vw, 7px);
  }
  .actu__grid .actu-card--small .actu-card__social-icon {
    width: clamp(28px, 3.5vw, 42px);
    height: clamp(28px, 3.5vw, 42px);
  }
  .actu__grid .actu-card--small .actu-card__link {
    font-size: clamp(9px, 0.85vw, 10.5px);
  }
}

/* ─── MOBILE (< 768px) ─ 1 LARGE + 2 SMALL displayed as LARGE in a single column ───
   Cards 2, 3 and 6 are hidden on mobile.
   Visible cards: 1 (lead), 4 and 5 (small → forced into lead/vertical style). */
@media (max-width: 600px) {
  .actu__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: clamp(12px, 3vw, 18px);
    align-items: stretch;
  }

  /* Hide cards 2, 3 and 6 on mobile */
  .actu__grid .actu-card:nth-child(2),
  .actu__grid .actu-card:nth-child(3),
  .actu__grid .actu-card:nth-child(6) {
    display: none !important;
  }

  /* All visible cards become LEAD/LARGE style — image on TOP, content below */
  .actu__grid .actu-card {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-template-columns: none; /* reset the small-card horizontal split */
  }
  .actu__grid .actu-card .actu-card__img-wrap {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }
  .actu__grid .actu-card .actu-card__title {
    font-size: clamp(15px, 4.5vw, 20px);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .actu__grid .actu-card .actu-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.5;
    color: var(--text-muted);
  }
  .actu__grid .actu-card .actu-card__date {
    font-size: clamp(9px, 2.6vw, 11px);
  }
  .actu__grid .actu-card .actu-card__body {
    padding: clamp(12px, 4vw, 18px);
    gap: clamp(5px, 1.5vw, 8px);
    justify-content: flex-start;
  }
  .actu__grid .actu-card .actu-card__cat-badge {
    font-size: clamp(8px, 2.4vw, 10px);
    padding: 3px clamp(7px, 2vw, 10px);
    top: 10px;
    left: 10px;
  }
  .actu__grid .actu-card .actu-card__social-icon {
    width: clamp(40px, 12vw, 60px);
    height: clamp(40px, 12vw, 60px);
  }
  .actu__grid .actu-card .actu-card__link {
    font-size: clamp(10px, 2.8vw, 12px);
  }
}

/* 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;
}

/* Grain effect removed to keep the background clean and high-quality */

/* 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;
}

/* Tablette (769-1199px) : infos collees a DROITE (regle de base ci-dessus).
   On ne repasse a gauche qu'en mobile (<=768px, layout 1 colonne). */
@media (max-width: 600px) {
  .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: 1299.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: 380px !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: 1299.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: 1299.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 — Formats responsives
   • Tablette (768px – 1299.98px) : 2 GRANDES + 2 PETITES
     (cartes 3 et 6 masquées, soit la dernière colonne PC)
   • Mobile (< 768px) : 1 GRANDE + 2 cartes "petites" affichées
     EN GRAND format (cartes 2, 3 et 6 masquées)
   ============================================================ */

/* ─── TABLETTE : 2 GRANDES (row 1) + 2 PETITES (row 2) ─── */
@media (min-width: 601px) and (max-width: 1299.98px) {
  .actu__grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: clamp(10px, 1.4vw, 18px) !important;
  }

  /* Masque les cartes 3 et 6 (3e colonne PC) sur tablette */
  .actu__grid .actu-card:nth-child(3),
  .actu__grid .actu-card:nth-child(6) {
    display: none !important;
  }

  /* Cartes 1 et 2 = GRANDES (image en 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;
  }

  /* Cartes 4 et 5 = PETITES (image à gauche, contenu à droite) */
  .actu__grid .actu-card:nth-child(4),
  .actu__grid .actu-card:nth-child(5) {
    grid-column: auto !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) !important;
    align-items: stretch !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__img-wrap,
  .actu__grid .actu-card:nth-child(5) .actu-card__img-wrap {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 100% !important;
    align-self: stretch !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__photo,
  .actu__grid .actu-card:nth-child(5) .actu-card__photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__body,
  .actu__grid .actu-card:nth-child(5) .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(4) .actu-card__title,
  .actu__grid .actu-card:nth-child(5) .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(4) .actu-card__excerpt,
  .actu__grid .actu-card:nth-child(5) .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(4) .actu-card__date,
  .actu__grid .actu-card:nth-child(5) .actu-card__date {
    font-size: clamp(8px, 0.85vw, 10px) !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__cat-badge,
  .actu__grid .actu-card:nth-child(5) .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(4) .actu-card__social-icon,
  .actu__grid .actu-card:nth-child(5) .actu-card__social-icon {
    width: clamp(24px, 3vw, 40px) !important;
    height: clamp(24px, 3vw, 40px) !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__link,
  .actu__grid .actu-card:nth-child(5) .actu-card__link {
    font-size: clamp(9px, 0.9vw, 11px) !important;
  }
  /* Harmonise la taille de "Lire l'article" sur les 2 grandes */
  .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;
  }
}

/* ─── MOBILE : 1 GRANDE (pleine largeur) + 2 PETITES côte à côte (image en haut, texte en bas) ─── */
@media (max-width: 600px) {
  .actu__grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    grid-auto-rows: auto !important;
    gap: clamp(10px, 2.5vw, 16px) !important;
  }

  /* Masque les cartes 2, 3 et 6 sur mobile */
  .actu__grid .actu-card:nth-child(2),
  .actu__grid .actu-card:nth-child(3),
  .actu__grid .actu-card:nth-child(6) {
    display: none !important;
  }

  /* Carte 1 = GRANDE pleine largeur (occupe les 2 colonnes) */
  .actu__grid .actu-card:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
  }
  .actu__grid .actu-card:nth-child(1) .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(1) .actu-card__photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__body {
    padding: clamp(12px, 4vw, 18px) !important;
    gap: clamp(5px, 1.5vw, 8px) !important;
    justify-content: flex-start !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__title {
    font-size: clamp(15px, 4.4vw, 20px) !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__excerpt {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    font-size: clamp(12px, 3.4vw, 14px) !important;
    line-height: 1.5 !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__date {
    font-size: clamp(9px, 2.6vw, 11px) !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__cat-badge {
    font-size: clamp(8px, 2.4vw, 10px) !important;
    padding: 3px clamp(7px, 2vw, 10px) !important;
    top: 10px !important;
    left: 10px !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__social-icon {
    width: clamp(40px, 12vw, 60px) !important;
    height: clamp(40px, 12vw, 60px) !important;
  }
  .actu__grid .actu-card:nth-child(1) .actu-card__link {
    font-size: clamp(10px, 2.8vw, 12px) !important;
  }

  /* Cartes 4 et 5 = PETITES côte à côte, format VERTICAL (image en HAUT, contenu en BAS) */
  .actu__grid .actu-card:nth-child(4),
  .actu__grid .actu-card:nth-child(5) {
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
  }
  .actu__grid .actu-card:nth-child(4) { grid-column: 1 !important; }
  .actu__grid .actu-card:nth-child(5) { grid-column: 2 !important; }

  .actu__grid .actu-card:nth-child(4) .actu-card__img-wrap,
  .actu__grid .actu-card:nth-child(5) .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(4) .actu-card__photo,
  .actu__grid .actu-card:nth-child(5) .actu-card__photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__body,
  .actu__grid .actu-card:nth-child(5) .actu-card__body {
    padding: clamp(8px, 2.5vw, 12px) !important;
    gap: clamp(3px, 1vw, 6px) !important;
    justify-content: flex-start !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__title,
  .actu__grid .actu-card:nth-child(5) .actu-card__title {
    font-size: clamp(11px, 3vw, 14px) !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__excerpt,
  .actu__grid .actu-card:nth-child(5) .actu-card__excerpt {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    font-size: clamp(9.5px, 2.5vw, 12px) !important;
    line-height: 1.4 !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__date,
  .actu__grid .actu-card:nth-child(5) .actu-card__date {
    font-size: clamp(8px, 2vw, 10px) !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__cat-badge,
  .actu__grid .actu-card:nth-child(5) .actu-card__cat-badge {
    font-size: clamp(7px, 1.9vw, 9px) !important;
    padding: 2px clamp(5px, 1.6vw, 8px) !important;
    top: 6px !important;
    left: 6px !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__social-icon,
  .actu__grid .actu-card:nth-child(5) .actu-card__social-icon {
    width: clamp(28px, 8vw, 44px) !important;
    height: clamp(28px, 8vw, 44px) !important;
  }
  .actu__grid .actu-card:nth-child(4) .actu-card__link,
  .actu__grid .actu-card:nth-child(5) .actu-card__link {
    font-size: clamp(9px, 2.3vw, 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: 1300px) {

  /* 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 {
    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: visible !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;
  }
  .team__desc {
    max-width: 460px !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 garde le texte ENTIER, plus de troncage */
  .team__desc {
    font-size: clamp(12px, 0.95vw, 15px) !important;
    line-height: 1.5 !important;
    display: block !important;
    overflow: visible !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: 1299.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: 600px) {
  .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: 600px) {
  .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: 600px) {
  .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;
  /* Aligné avec le BAS de la description (hero__sub-wrap) :
     padding-bottom de .hero__content + margin-bottom de .hero__sub-wrap */
  bottom: calc(clamp(25px, 5vw, 50px) + clamp(20px, 3vw, 40px)) !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: 600px) {
  /* 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;
    /* Mobile : stats empilées verticalement (et non plus horizontalement) */
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    text-align: right !important;
    gap: clamp(8px, 1.5vw, 14px) !important;
  }
  .hero__stat {
    align-items: flex-end !important;
    text-align: right !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: 600px) {
  .hero__sub-wrap { max-width: clamp(200px, 28vw, 500px) !important; }
}
@media (max-width: 480px) {
  .hero__sub-wrap { max-width: clamp(200px, 28vw, 500px) !important; }
}

/* ============================================================
   BANDE PARTENAIRES (sous le hero) — bande fixe, logos en
   rotation aléatoire qui apparaissent de bas en haut.
   ============================================================ */
.partners-band {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #060c1a 0%, #081428 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  z-index: 3;
}
/* lignes d'accent discrètes haut/bas */
.partners-band::before,
.partners-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94,170,255,0.35), transparent);
  pointer-events: none;
}
.partners-band::before { top: 0; }
.partners-band::after  { bottom: 0; }

.partners-band__inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(16px, 2.2vw, 28px) clamp(10px, 4vw, 64px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 56px);
}

.partners-band__label {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: clamp(9px, 0.8vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.partners-band__label::before {
  content: "";
  display: block;
  width: clamp(16px, 1.8vw, 26px);
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.partners-band__track {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.4vw, 24px);
  height: clamp(44px, 4.6vw, 62px);
}

/* un emplacement (fenêtre fixe) dans lequel le logo glisse */
.pb-slot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* logo : démarre en bas, masqué */
.pb-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(115%);
  opacity: 0;
  transition:
    transform 0.75s cubic-bezier(0.16, 0.84, 0.34, 1),
    opacity 0.55s ease;
  will-change: transform, opacity;
}
.pb-logo.is-in  { transform: translateY(0);     opacity: 1; }
.pb-logo.is-out { transform: translateY(-115%); opacity: 0; }

/* pastille blanche : rend lisibles les logos sombres sur le fond bleu nuit */
.pb-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: clamp(4px, 0.8vw, 12px) clamp(6px, 1.2vw, 22px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
/* logo déjà conçu pour fond sombre (ex : Brawl Hub) -> pas de pastille */
.pb-logo--plain .pb-chip {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.pb-chip img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* logo clair/blanc -> inversé en sombre pour rester visible sur la pastille */
.pb-img--invert { filter: invert(1); }

.pb-slot:hover .pb-chip { transform: scale(1.04); transition: transform 0.25s ease; }

/* fallback texte si le logo image est introuvable */
.pb-logo--text {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 30px);
  letter-spacing: 0.04em;
  color: var(--accent-soft);
  opacity: 0.82;
}

/* sur mobile : label au-dessus, bande en dessous */
@media (max-width: 640px) {
  .partners-band__inner {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(10px, 3vw, 16px);
  }
  .partners-band__track { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-logo { transition: opacity 0.4s ease; transform: none; }
  .pb-logo.is-out { transform: none; }
}
/* =====================================================================
   VELRA — PATCH BANDE PARTENAIRES (à ajouter à la FIN de style.css)

   Objectif :
   • La bande utilise toute la largeur disponible (mêmes bords que le hero,
     les events, le footer, etc.) au lieu d'être bridée à max-width 1500px.
   • Les vignettes occupent tout l'espace, jusqu'aux marges --page-pad.
   • Fond des vignettes : bleu nuit (cohérent avec la page).
   • Tous les logos : bleu clair proche du blanc (monochrome unifié).
   ===================================================================== */

/* ── Largeur de la bande ──────────────────────────────────────────── */
.partners-band__inner {
  max-width: 100% !important;
  padding: clamp(16px, 2.2vw, 28px) var(--page-pad) !important;
  gap: clamp(16px, 2.6vw, 40px) !important;
}

.partners-band__track {
  gap: clamp(6px, 1vw, 18px) !important;
  height: clamp(46px, 4.4vw, 68px) !important;
}

/* Plafond doux : en ultra-large, chaque vignette ne dépasse pas
   une largeur raisonnable pour ne pas devenir disproportionnée. */
.pb-slot {
  max-width: clamp(120px, 12vw, 180px);
}

/* ── Vignettes : fond BLEU au lieu de blanc ───────────────────────── */
.pb-chip {
  background: rgba(13, 32, 64, 0.85) !important;          /* bleu nuit translucide */
  border: 1px solid rgba(94, 170, 255, 0.28) !important;  /* fin liseré bleu accent */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(126, 196, 255, 0.08) !important;   /* léger reflet haut */
}

/* Variante \"plain\" (sans pastille) : si tu remets plain:true sur un
   logo, on garde le fond transparent — comportement d'origine. */
.pb-logo--plain .pb-chip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Logos : tous en BLEU CLAIR (proche du blanc) ─────────────────── */
/* Le filtre transforme n'importe quelle couleur d'origine en
   bleu très pâle (≈ #d4e7ff). Marche pour PNG/SVG, couleur ou monochrome. */
.pb-chip img {
  filter:
    brightness(0)
    invert(0.96)
    sepia(0.18)
    saturate(380%)
    hue-rotate(185deg) !important;
}

/* L'option invert d'origine (utilisée pour les logos blancs comme UPCore)
   n'est plus nécessaire vu qu'on uniformise tout : on neutralise. */
.pb-img--invert {
  filter:
    brightness(0)
    invert(0.96)
    sepia(0.18)
    saturate(380%)
    hue-rotate(185deg) !important;
}

/* Léger boost de luminosité au survol pour l'effet vivant */
.pb-slot:hover .pb-chip img {
  filter:
    brightness(0)
    invert(1)
    sepia(0.08)
    saturate(300%)
    hue-rotate(185deg) !important;
  transition: filter 0.25s ease;
}
.pb-slot:hover .pb-chip {
  border-color: rgba(94, 170, 255, 0.55) !important;
  background: rgba(18, 42, 82, 0.92) !important;
  transition: border-color 0.25s ease, background 0.25s ease;
}

/* ============================================================
   HERO DANS LE FLUX — le hero est en haut de page et défile
   avec le reste du document (scroll classique).
   ============================================================ */
.hero {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  z-index: auto;
}

main {
  padding-top: 0;
}
/* === Rejoins l'arene : nombre d'evenements visibles selon la largeur === */
/* PC (>1300px) : 6 evenements / Tablette (<=1300px) : 5 / Mobile (<=600px) : 4 */
@media (max-width: 1300px) {
  .upcoming .upcoming__list .upcoming__item:nth-child(n + 6) {
    display: none !important;
  }
  .upcoming .upcoming__list .upcoming__item:nth-child(5) {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 600px) {
  .upcoming .upcoming__list .upcoming__item:nth-child(n + 5) {
    display: none !important;
  }
  .upcoming .upcoming__list .upcoming__item:nth-child(4) {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* ============================================================
   REJOINS L'ARENE — ajustements globaux
   - Badges (Brawl Stars / Rocket League / Sessions privees /
     Tous niveaux) masques sur PC + tablette + mobile
   - Fleches → supprimees apres le texte des liens
   - Icone de jeu : fond retire et stretchee de haut en bas du titre
   - Sous-titre type evenement remplace par un badge colore
   ============================================================ */

/* Masque les pastilles de tags (toutes tailles) */
.event-card .event-card__tags { display: none !important; }

/* Pas de fleche apres le lien (texte seul) */
.event-card__link::after { content: none !important; }

/* Description : ellipsis sur mobile uniquement pour eviter widgets trop hauts */
@media (max-width: 600px) {
  .event-card .event-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Icone du jeu : fond transparent, taille calee sur le bloc titre + badge */
.upcoming__item { align-items: center; }
.upcoming__list .upcoming__item .upcoming__game-icon {
  background: transparent !important;
  width: clamp(34px, 3.6vw, 52px) !important;
  height: clamp(34px, 3.6vw, 52px) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}
.upcoming__list .upcoming__item .upcoming__game-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Badge type d'evenement (style identique a la page communaute) */
.upcoming__info { display: flex; flex-direction: column; gap: 4px; }
/* Specificite (0,2,0) pour battre .upcoming__info span (0,1,1) */
.upcoming__info .upcoming__type {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  font-size: clamp(7px, 0.6vw, 9px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 2px 6px !important;
  line-height: 1.1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
  border: none !important;
}
.upcoming__info .upcoming__type--tournoi {
  background: linear-gradient(135deg, #7ab4ff 0%, #3a72d8 100%) !important;
  color: #0c2c72 !important;
}
.upcoming__info .upcoming__type--event {
  background: linear-gradient(135deg, #9aa6ff 0%, #9d5cff 100%) !important;
  color: #2c1170 !important;
}
.upcoming__info .upcoming__type--concours {
  background: linear-gradient(135deg, #ff8a8a 0%, #e0353c 100%) !important;
  color: #4a0a0e !important;
}

/* Compteur 'Prochains evenements' : layout inline comme la page communaute */
.upcoming__countdown {
  gap: clamp(6px, 0.8vw, 10px) !important;
}
.upcoming__countdown .countdown__unit {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.upcoming__countdown .countdown__n {
  color: var(--text) !important;
}
.upcoming__countdown .countdown__l {
  font-size: clamp(7px, 0.65vw, 9px) !important;
  margin-top: 0 !important;
  color: var(--text-muted) !important;
}
.upcoming__countdown .countdown__sep {
  display: none !important;
}

/* Compteur cale a droite (entre le titre et les boutons) avec un
   bon ecart par rapport aux boutons. Taille legerement reduite
   pour rester discret face aux gros titres a gauche. */
.upcoming__list .upcoming__item .upcoming__info {
  flex: 0 1 auto !important;
}
.upcoming__list .upcoming__item .upcoming__countdown {
  margin-left: auto !important;
  margin-right: clamp(14px, 2vw, 32px) !important;
  gap: clamp(4px, 0.6vw, 8px) !important;
}
.upcoming__list .upcoming__item .upcoming__countdown .countdown__n {
  font-size: clamp(11px, 1.15vw, 16px) !important;
}
.upcoming__list .upcoming__item .upcoming__countdown .countdown__l {
  font-size: clamp(6px, 0.55vw, 8px) !important;
}
.upcoming__list .upcoming__item .upcoming__countdown .countdown__unit {
  min-width: clamp(20px, 1.8vw, 28px) !important;
  justify-content: center !important;
}

/* Mobile etroit (<=480px) : masque le compteur des prochains evenements */
@media (max-width: 480px) {
  .upcoming__countdown { display: none !important; }
}

/* Boutons section (haut-droite des sections) : pas d'angles coupes */
.btn.btn--ghost {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* ============================================================
   PC uniquement (>=1300px) : ajustement des angles des cartes
   - Tournois communautaires (1ere carte) : angles coupes a GAUCHE
   - Coaching pro (2eme carte) : aucun angle coupe
   ============================================================ */
@media (min-width: 1300px) {
  .events__grid > .event-card:nth-child(1) {
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px), 0 22px) !important;
    -webkit-clip-path: polygon(22px 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px), 0 22px) !important;
  }
  .events__grid > .event-card:nth-child(2) {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}

/* ============================================================
   Tablette (>=601px, <=1299px) et Mobile (<=600px) : alignement
   des angles coupes
   - Tournois communautaires (1ere carte) : angles a GAUCHE (inchange)
   - Programme partenaires (3eme carte) : angles coupes de la MEME
     TAILLE que le conteneur "Prochain evenement" en dessous, en
     utilisant la variable --cut-lg (clamp(14px, 1.6vw, 22px)).
   ============================================================ */
@media (max-width: 1299px) {
  .events__grid > .event-card:nth-child(1) {
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px), 0 22px) !important;
    -webkit-clip-path: polygon(22px 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px), 0 22px) !important;
  }
  .events__grid > .event-card:nth-child(3) {
    /* Angles du HAUT conserves a 8px (coherents avec les cartes au-dessus)
       Angle bas-droit a la MEME taille que le conteneur "Prochain evenement"
       en dessous (var(--cut-lg) = clamp(14px, 1.6vw, 22px)).
       Angle bas-gauche : AUCUN angle coupe (tablette/mobile <=1299px). */
    clip-path: polygon(
      8px 0,
      calc(100% - 8px) 0,
      100% 8px,
      100% calc(100% - var(--cut-lg)),
      calc(100% - var(--cut-lg)) 100%,
      0 100%,
      0 8px
    ) !important;
    -webkit-clip-path: polygon(
      8px 0,
      calc(100% - 8px) 0,
      100% 8px,
      100% calc(100% - var(--cut-lg)),
      calc(100% - var(--cut-lg)) 100%,
      0 100%,
      0 8px
    ) !important;
  }
}
/* ============================================================
   PC uniquement (>=1300px) : conteneur "Prochain evenement" (.upcoming)
   - Haut-gauche  : 8px (petit angle, comme les cartes au-dessus)
   - Haut-droit   : 8px (petit angle, comme les cartes au-dessus)
   - Bas-droit    : var(--cut-lg)  (grand angle, deplace depuis le haut-droit)
   - Bas-gauche   : var(--cut-lg)  (grand angle, inchange)
   En tablette/mobile (<=1299px) la regle ne s'applique pas :
   .upcoming garde son clip-path d'origine (var(--clip-card)).
   ============================================================ */
@media (min-width: 1300px) {
  .upcoming {
    clip-path: polygon(
      8px 0,
      calc(100% - 8px) 0,
      100% 8px,
      100% calc(100% - var(--cut-lg)),
      calc(100% - var(--cut-lg)) 100%,
      var(--cut-lg) 100%,
      0 calc(100% - var(--cut-lg)),
      0 8px
    ) !important;
    -webkit-clip-path: polygon(
      8px 0,
      calc(100% - 8px) 0,
      100% 8px,
      100% calc(100% - var(--cut-lg)),
      calc(100% - var(--cut-lg)) 100%,
      var(--cut-lg) 100%,
      0 calc(100% - var(--cut-lg)),
      0 8px
    ) !important;
  }
}


/* ─── Prochains evenements : description a droite du titre ─── */
.upcoming__item { flex-wrap: nowrap; }
.upcoming__list .upcoming__item .upcoming__info { flex: 0 0 auto; max-width: 42%; }

/* Description : masquee par defaut, visible UNIQUEMENT au-dela de 1300px */
.upcoming__list .upcoming__item .upcoming__desc {
  display: none !important;
}
.upcoming__list .upcoming__item .upcoming__countdown,
.upcoming__list .upcoming__item .btn { flex-shrink: 0; }

@media (min-width: 1300px) {
  .upcoming__list .upcoming__item .upcoming__desc {
    display: block !important;
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
    margin-left: clamp(10px, 1.4vw, 18px);
    padding-left: clamp(10px, 1.4vw, 18px);
    border-left: 1px solid var(--border-md);
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    /* Fondu vers l'invisible à la fin au lieu de "…" */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(40px, 5vw, 70px)), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(40px, 5vw, 70px)), transparent 100%);
  }
  .upcoming__list .upcoming__item .upcoming__desc--empty {
    border-left: 0;
  }
  .upcoming__list .upcoming__item .upcoming__info { max-width: 34% !important; }
}

@media (max-width: 900px) {
  .upcoming__item {
    flex-wrap: wrap;
    position: relative;
    padding-right: 110px;
  }
  .upcoming__list .upcoming__item .upcoming__info {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Le bouton "rejoindre" reste colle a droite quelle que soit la largeur */
  .upcoming__list .upcoming__item .btn--az {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    flex-shrink: 0;
    z-index: 2;
  }
}


/* ─── FIX MOBILE ≤600px (v2) ─────────────────────────────── */
@media (max-width: 600px) {

  /* 1) Le texte ne doit plus deborder du conteneur */
  .upcoming__list .upcoming__item .upcoming__info,
  .upcoming__list .upcoming__item .upcoming__info strong,
  .upcoming__list .upcoming__item .upcoming__info span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 2) Le bouton "REJOINDRE" et la pastille "type" (ex: EVENEMENT / TOURNOI)
        n'ont plus d'angles coupes sur mobile */
  .upcoming__list .upcoming__item .btn--az,
  .upcoming__list .upcoming__item .btn--az2,
  .upcoming__list .upcoming__item .upcoming__type,
  .upcoming__list .upcoming__item .upcoming__badge,
  .upcoming__list .upcoming__item .upcoming__tag,
  .upcoming__list .upcoming__item [class*="tag"],
  .upcoming__list .upcoming__item [class*="type"] {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 6px !important;
  }

  /* 3) Le titre de l'evenement reste sur la meme ligne que le jeu,
        JAMAIS en dessous — et on n'agrandit pas le widget */
  .upcoming__item {
    flex-wrap: nowrap !important;
    align-items: center;
    padding-right: 96px; /* place pour le bouton fixe a droite */
  }
  .upcoming__list .upcoming__item .upcoming__info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .upcoming__list .upcoming__item .upcoming__info strong {
    font-size: 12px;
    line-height: 1.15;
  }
  .upcoming__list .upcoming__item .upcoming__info span,
  .upcoming__list .upcoming__item .upcoming__info span lo {
    font-size: 10px;
    line-height: 1.15;
  }

  /* Bouton rejoindre : reste colle a droite, plus petit, sans clip */
  .upcoming__list .upcoming__item .btn--az {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    z-index: 2;
  }

  /* 4) Boutons "S'INSCRIRE" et "DEVENIR PARTENAIRE" plus petits */
  .coaching .btn,
  .partner .btn,
  .partners .btn,
  a.btn[href*="inscri"],
  a.btn[href*="partenaire"],
  .btn--az2 {
    padding: 8px 14px !important;
    font-size: 11px !important;
    letter-spacing: .04em !important;
  }

  /* 5) Titres des conteneurs plus petits — SAUF le widget "Prochains evenements" */
  .section__title,
  .card__title,
  .tournois h2, .tournois h3,
  .coaching h2, .coaching h3,
  .partner  h2, .partner  h3,
  .partners h2, .partners h3,
  h2.section-title, h3.section-title {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.15 !important;
  }
  /* On preserve la taille actuelle du titre du widget evenements */
  .upcoming .section__title,
  .upcoming h2,
  .upcoming h3,
  .upcoming__header,
  .upcoming__header * {
    font-size: unset !important;
  }
}

/* ============================================================
   CORRECTION V3 — mobile 600px / boutons / débordements
   ============================================================ */

/* Aucun angle arrondi sur tout le site, même si une règle plus bas en remet. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Les boutons "concept de l'evenement" et "rejoindre" gardent un vrai bord
   complet sur toutes les tailles : plus de clip-path/outline coupé. */
.upcoming__list .upcoming__item .btn--az,
.upcoming__list .upcoming__item .btn--az2 {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border: 1px solid rgba(94, 170, 255, 0.24) !important;
  outline: none !important;
  outline-offset: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: max-content;
  justify-content: center;
}

.upcoming__list .upcoming__item .btn--az {
  background: rgba(86, 159, 243, 0.10) !important;
}

.upcoming__list .upcoming__item .btn--az2 {
  background: rgba(82, 139, 179, 0.06) !important;
}

/* Le texte reste toujours dans son conteneur. */
.events-section,
.events__inner,
.events__grid,
.event-card,
.event-card__title,
.event-card__desc,
.event-card__link,
.upcoming,
.upcoming__list,
.upcoming__item,
.upcoming__info,
.upcoming__info strong,
.upcoming__info span,
.upcoming__desc {
  min-width: 0 !important;
  max-width: 100%;
}

.event-card,
.upcoming,
.upcoming__item {
  overflow: hidden !important;
}

.event-card__title,
.event-card__desc {
  overflow-wrap: anywhere;
  word-break: normal;
}

.event-card__link {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming__list .upcoming__item {
  flex-wrap: nowrap !important;
}

.upcoming__list .upcoming__item .upcoming__info {
  flex: 1 1 0 !important;
  overflow: hidden !important;
}

.upcoming__list .upcoming__item .upcoming__info strong,
.upcoming__list .upcoming__item .upcoming__info span,
.upcoming__list .upcoming__item .upcoming__info .upcoming__type {
  display: block;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

.upcoming__list .upcoming__item .upcoming__type {
  display: inline-flex !important;
  width: fit-content;
  max-width: 100% !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 0 !important;
}

/* Description : cachée sous 1300px, visible seulement au-delà de 1300px. */
.upcoming__list .upcoming__item .upcoming__desc {
  display: none !important;
}

@media (min-width: 1300px) {
  .upcoming__list .upcoming__item .upcoming__desc {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    margin-left: clamp(10px, 1.4vw, 18px) !important;
    padding-left: clamp(10px, 1.4vw, 18px) !important;
    border-left: 1px solid var(--border-md) !important;
    /* Fondu vers l'invisible à la fin au lieu de "…" */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(40px, 5vw, 70px)), transparent 100%) !important;
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - clamp(40px, 5vw, 70px)), transparent 100%) !important;
  }

  .upcoming__list .upcoming__item .upcoming__desc--empty {
    border-left: 0 !important;
  }
}

/* Tablette : ligne compacte, pas de retour à la ligne qui agrandit le widget. */
@media (min-width: 601px) and (max-width: 1299px) {
  .upcoming__list .upcoming__item {
    display: flex !important;
    align-items: center !important;
    gap: clamp(8px, 1.2vw, 16px) !important;
    padding-right: 12px !important;
  }

  .upcoming__list .upcoming__item .upcoming__info {
    max-width: none !important;
  }

  .upcoming__list .upcoming__item .upcoming__countdown {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: clamp(8px, 1.4vw, 20px) !important;
  }

  .upcoming__list .upcoming__item .btn--az,
  .upcoming__list .upcoming__item .btn--az2 {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }
}

/* Mobile commence à 600px : tout tient dans une seule ligne sans agrandir le widget. */
@media (max-width: 600px) {
  .events__inner,
  .team__inner,
  .actu__inner,
  .footer__inner {
    padding-left: clamp(12px, 4vw, 18px) !important;
    padding-right: clamp(12px, 4vw, 18px) !important;
  }

  .events__header,
  .team__header,
  .actu__header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 10px !important;
  }

  .events__header-titles,
  .team__header-titles,
  .actu__header-titles {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Titres des conteneurs plus petits, sans toucher au widget Prochains evenements. */
  .team__header-titles .section-title,
  .events__header-titles .section-title,
  .actu__header-titles .section-title,
  .event-card__title,
  .event-card--large .event-card__title {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
  }

  .section-label {
    font-size: 8px !important;
    letter-spacing: 0.12em !important;
  }

  .events__header-actions .btn,
  .team__header > .btn,
  .actu__header > .btn {
    padding: 5px 8px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 0 !important;
  }

  /* "Voir les tournois", "S'inscrire", "Devenir partenaire" plus petits. */
  .events__grid .event-card__link {
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    padding-top: 4px !important;
  }

  .event-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    padding: 12px 12px 14px !important;
  }

  .event-card__icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  .event-card__desc {
    font-size: 11px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .upcoming {
    padding: 12px 10px !important;
  }

  .upcoming__label {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 8px !important;
  }

  .upcoming__list .upcoming__item {
    display: grid !important;
    grid-template-columns: 30px 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 7px 72px 7px 0 !important;
    min-height: 42px !important;
    position: relative !important;
  }

  .upcoming__list .upcoming__item .upcoming__date {
    width: 30px !important;
    min-width: 30px !important;
  }

  .upcoming__list .upcoming__item .upcoming__day {
    font-size: 18px !important;
    line-height: 0.95 !important;
  }

  .upcoming__list .upcoming__item .upcoming__month {
    font-size: 6px !important;
    letter-spacing: 0.08em !important;
  }

  .upcoming__list .upcoming__item .upcoming__game-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 0 !important;
  }

  .upcoming__list .upcoming__item .upcoming__info {
    grid-column: 3 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 2px !important;
  }

  .upcoming__list .upcoming__item .upcoming__info strong {
    font-size: 10.5px !important;
    line-height: 1.05 !important;
  }

  .upcoming__list .upcoming__item .upcoming__type {
    font-size: 6.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    padding: 2px 4px !important;
    max-width: 100% !important;
  }

  .upcoming__list .upcoming__item .upcoming__desc,
  .upcoming__list .upcoming__item .upcoming__countdown,
  .upcoming__list .upcoming__item .btn--az2 {
    display: none !important;
  }

  .upcoming__list .upcoming__item .btn--az {
    display: inline-flex !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 24px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 2 !important;
  }
}

@media (max-width: 380px) {
  .upcoming__list .upcoming__item {
    grid-template-columns: 26px 26px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding-right: 60px !important;
  }

  .upcoming__list .upcoming__item .upcoming__date {
    width: 26px !important;
    min-width: 26px !important;
  }

  .upcoming__list .upcoming__item .upcoming__game-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }

  .upcoming__list .upcoming__item .upcoming__info strong {
    font-size: 9.5px !important;
  }

  .upcoming__list .upcoming__item .btn--az {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    font-size: 7px !important;
  }
}


/* ============================================================
   INDEX HEADER CTA — GetStartedButton (HTML/CSS pur)
   Le libelle glisse a gauche et disparait, la fleche est
   revelee depuis la droite au survol (comme <GetStartedButton/>)
   ============================================================ */
.btn-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(38px, 3.4vw, 44px);
  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: 0 clamp(18px, 2vw, 28px);
  white-space: nowrap;
  cursor: pointer;
  color: #040e1e;
  background: var(--accent);
  outline: 1px solid transparent;
  outline-offset: -1px;
  clip-path: none;
  border-radius: 6px;
  transition: background var(--tr), color var(--tr);
}

.btn-cta:hover {
  transform: none;
  filter: none;
}

.btn-cta:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.btn-cta:active {
  transform: none;
}

/* Libelle : disparait en fondu au survol (style Magic / 21st.dev) */
.btn-cta__label {
  display: inline-block;
  line-height: 1;
  margin-right: clamp(20px, 2.2vw, 32px);
  transition: opacity 500ms ease;
}

.btn-cta:hover .btn-cta__label,
.btn-cta:focus-visible .btn-cta__label {
  opacity: 0;
}

/* Pastille fleche : petite a droite, s'etend sur tout le bouton au survol */
.btn-cta__icon {
  position: absolute;
  z-index: 10;
  top: 4px;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 25%;
  min-width: 32px;
  border-radius: 3px;
  background: rgba(4, 14, 30, 0.15);
  color: #040e1e;
  transition: width 500ms ease, transform 500ms ease;
}

.btn-cta:hover .btn-cta__icon,
.btn-cta:focus-visible .btn-cta__icon {
  width: calc(100% - 8px);
}

.btn-cta:active .btn-cta__icon {
  transform: scale(0.95);
}

.btn-cta__icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* ============================================================
   SECTION HEADERS — label (tiret) a GAUCHE / titre au CENTRE
   de la page / bouton a DROITE. Grille 3 colonnes 1fr auto 1fr :
   la colonne centrale (titre) est centree sur la page quelles
   que soient les largeurs du label et du bouton.
   ============================================================ */
.team__header,
.events__header,
.actu__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "label title btn";
  align-items: center;
  column-gap: clamp(16px, 3vw, 48px);
  margin-bottom: clamp(28px, 4vw, 64px);
}

.team__header > .section-label,
.events__header > .section-label,
.actu__header > .section-label {
  grid-area: label;
  justify-self: start;
  align-self: center;
  margin: 0;
}

.team__header > .section-title,
.events__header > .section-title,
.actu__header > .section-title {
  grid-area: title;
  justify-self: center;
  text-align: center;
  margin: 0;
}

.team__header > .btn-cta,
.events__header > .btn-cta,
.actu__header > .btn-cta {
  grid-area: btn;
  justify-self: end;
}

/* ============================================================
   SECTION TITLES — taille legerement augmentee + couleur neutre
   Neutralisation du title-glow sur les titres de section
   ============================================================ */
.section-title {
  font-size: clamp(34px, 4vw, 60px);
}

.team__header .section-title em,
.events__header .section-title em,
.actu__header .section-title em {
  font-style: normal;
  color: var(--text);
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  animation: none;
}

/* ============================================================
   MOBILE — label + bouton sur une ligne, titre en dessous
   ============================================================ */
@media (max-width: 720px) {
  .team__header,
  .events__header,
  .actu__header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label btn"
      "title title";
    column-gap: 12px;
    row-gap: 10px;
  }

  .team__header > .section-title,
  .events__header > .section-title,
  .actu__header > .section-title {
    justify-self: start;
    text-align: left;
  }

  .btn-cta {
    padding: 9px 16px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 420px) {
  .btn-cta {
    padding: 8px 13px;
    font-size: 9px;
  }
}

/* Preview autonome : si components.js n'est pas fourni avec le fichier HTML,
   les sections .reveal ne doivent pas rester invisibles. */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Boutons demandés : pas d'angles coupés, pas de lueur, pas de montée au hover. */
.btn-cta,
.team__header > .btn-cta,
.events__header > .btn-cta,
.actu__header > .btn-cta {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 0 !important;
  transform: none !important;
  filter: none !important;
}

.btn-cta:hover,
.btn-cta:focus-visible,
.btn-cta:active {
  transform: none !important;
  filter: none !important;
}

/* ============================================================
   HIERARCHIE TYPOGRAPHIQUE AZURIO
   - Bold   : hero principal
   - Medium : titres de sections
   - Light  : "Une equipe, plusieurs jeux"
   ============================================================ */

/* --- BOLD : hero de la page d'accueil --- */
.hero__title,
.hero__title em,
.l3d,
.l3d.is-hot::after {
  font-family: var(--font-display);
}

/* --- MEDIUM : titres de sections --- */
.section-title,
.event-card__title,
.actu-card__title,
.actu-card--featured .actu-card__title,
.actu__grid .actu-card__title,
.upcoming__day,
.pb-logo--text {
  font-family: var(--font-medium);
}

/* --- LIGHT : "Une equipe, plusieurs jeux" --- */
.team__title,
.team__title em {
  font-family: var(--font-light);
}


/* ============================================================
   BANDE PARTENAIRES — suppression des pastilles (contour/fond)
   et de l'effet au survol
   ============================================================ */
.pb-chip,
.pb-logo--plain .pb-chip {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.pb-slot:hover .pb-chip {
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
}

.pb-slot:hover .pb-chip img {
  filter:
    brightness(0)
    invert(0.96)
    sepia(0.18)
    saturate(380%)
    hue-rotate(185deg) !important;
  transition: none !important;
}

/* =====================================================================
   PATCH — Alignement des titres, section "Rejoins", bande partenaires
   ===================================================================== */

/* ── 1. Titres "Notre roster" et "Dernieres news" alignes a GAUCHE ──── */
.team__header > .section-title,
.actu__header > .section-title {
  justify-self: start !important;
  text-align: left !important;
}

/* ── 2. Section "Rejoins + mot qui tourne" : Azurio Light, un peu plus petit ── */
.events__header .section-title,
.events__header .section-title em,
.events__header .section-title span,
.events__header .section-title .rotate,
.events__header .section-title .rotate__inner,
.events__header .section-title .rotate__char,
.events__header .section-title .rotate__measure {
  font-family: var(--font-light) !important;
  font-weight: 400 !important;
}

.events__header .section-title {
  font-size: clamp(28px, 3.3vw, 50px) !important;
}

/* ── 3. Bande partenaires : les logos se DEPLACENT de droite a gauche ── */
/* L'animation d'origine (le logo qui MONTE puis est remplace) reste
   intacte : le deplacement horizontal est applique aux emplacements,
   pas aux logos eux-memes. */
@keyframes pb-drift {
  0%   { transform: translateX(14px); }
  100% { transform: translateX(-14px); }
}

.pb-slot {
  animation: pb-drift 7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.pb-slot:nth-child(2) { animation-delay: -0.9s; }
.pb-slot:nth-child(3) { animation-delay: -1.8s; }
.pb-slot:nth-child(4) { animation-delay: -2.7s; }
.pb-slot:nth-child(5) { animation-delay: -3.6s; }
.pb-slot:nth-child(6) { animation-delay: -4.5s; }
.pb-slot:nth-child(7) { animation-delay: -5.4s; }
.pb-slot:nth-child(8) { animation-delay: -6.3s; }

@media (prefers-reduced-motion: reduce) {
  .pb-slot { animation: none; }
}

/* ── 4. Logos un peu plus petits ────────────────────────────────────── */
.partners-band__track {
  height: clamp(38px, 3.6vw, 54px) !important;
}

.pb-slot {
  max-width: clamp(96px, 9.5vw, 144px);
}

.pb-chip {
  padding: clamp(3px, 0.6vw, 9px) clamp(5px, 1vw, 16px) !important;
}

.pb-chip img {
  max-height: 84%;
  max-width: 88%;
}


/* =====================================================================
   PATCH v4 — Titres de sections a gauche + Bebas Neue dans les cartes
   ===================================================================== */

/* ── 1. "Notre roster" et "Dernieres news" cales a GAUCHE de la page ── */
.team__header,
.actu__header {
  justify-content: flex-start !important;
}

.team__header-titles,
.actu__header-titles,
.team__header > .section-title,
.actu__header > .section-title {
  align-items: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.team__header .section-title,
.actu__header .section-title,
.team__header .section-label,
.actu__header .section-label {
  text-align: left !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
}

/* ── 2. Titres des cartes / conteneurs en Bebas Neue ────────────────── */
.event-card__title,
.event-card--large .event-card__title,
.actu-card__title,
.actu-card--featured .actu-card__title,
.actu__grid .actu-card__title,
.roster-card__name,
.card__title {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}


/* ── 3. Widget "Prochains evenements" : PAS de Bebas Neue sur les titres ── */
.upcoming__title,
.upcoming__item .upcoming__title,
.upcoming__info strong,
.upcoming__day,
.upcoming__list .upcoming__item h3,
.upcoming__list .upcoming__item h4 {
  font-family: var(--font-medium), 'Barlow', sans-serif !important;
  letter-spacing: normal !important;
}

/* =====================================================================
   CORRECTION V6 — positions finales et police d'origine des evenements
   ===================================================================== */

/* "Notre roster" et "Dernieres news" occupent vraiment la colonne gauche. */
.team__header,
.actu__header {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "title btn" !important;
  width: 100% !important;
}

.team__header > .section-title,
.actu__header > .section-title {
  grid-area: title !important;
  justify-self: start !important;
  align-self: center !important;
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
}

.team__header > .btn-cta,
.actu__header > .btn-cta {
  grid-area: btn !important;
  justify-self: end !important;
}

/* Boutons services (gauche) et communaute (droite), titre Rejoins centre. */
.events__header {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas: "btn-left title btn-right" !important;
  width: 100% !important;
}

.events__header > .events__services-btn {
  grid-area: btn-left !important;
  justify-self: start !important;
}

.events__header > .events__community-btn {
  grid-area: btn-right !important;
  justify-self: end !important;
}

.events__header > .section-title {
  grid-area: title !important;
  justify-self: center !important;
  text-align: center !important;
}

/* Police par defaut d'origine (Barlow) pour le titre de chaque evenement. */
.upcoming__info strong,
.upcoming__list .upcoming__item .upcoming__info strong,
.upcoming__list .upcoming__item h3,
.upcoming__list .upcoming__item h4 {
  font-family: var(--font-body), 'Barlow', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

@media (max-width: 720px) {
  .team__header,
  .actu__header {
    grid-template-areas: "title btn" !important;
  }

  .events__header {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "btn-left btn-right"
      "title title" !important;
  }

  .events__header > .events__services-btn {
    grid-area: btn-left !important;
    justify-self: start !important;
  }

  .events__header > .events__community-btn {
    grid-area: btn-right !important;
    justify-self: end !important;
  }

  .events__header > .section-title {
    justify-self: start !important;
    text-align: left !important;
  }
}

/* =====================================================================
   PATCH V7 — vignettes news sans angle coupe, ombres sociales noires,
   date des "Prochains evenements" en Bebas Neue
   ===================================================================== */

/* 1. Badges categorie (records, concours, etc.) : plus d'angle coupe */
.actu-card__cat-badge,
.actu__grid .actu-card .actu-card__cat-badge,
.actu__grid .actu-card--small .actu-card__cat-badge,
.actu-card--featured .actu-card__cat-badge {
  clip-path: none !important;
  border-radius: 4px;
}

/* 2. Icones reseaux sociaux : ombre uniquement noire */
.actu-card__social-icon,
.actu-card[data-social="instagram"] .actu-card__social-icon,
.actu-card[data-social="x"] .actu-card__social-icon,
.actu-card[data-social="tiktok"] .actu-card__social-icon,
.actu-card[data-social="youtube"] .actu-card__social-icon {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .75))
          drop-shadow(0 0 14px rgba(0, 0, 0, .65)) !important;
}

/* 3. Date (numero + mois) des "Prochains evenements" en Bebas Neue */
.upcoming__list .upcoming__item .upcoming__day,
.upcoming__list .upcoming__item .upcoming__month,
.upcoming__day,
.upcoming__month {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
}

/* ============================================================
   AJUSTEMENTS SECTION SERVICES / COMMUNAUTE
   ============================================================ */

/* 1. "Programme partenaires" a exactement la meme taille que
      "Coaching pro" et "Tournois communautaires". */
.event-card__title,
.event-card--large .event-card__title {
  font-size: 34px !important;
}

@media (max-width: 1024px) {
  .event-card__title,
  .event-card--large .event-card__title {
    font-size: clamp(20px, 2.4vw, 34px) !important;
  }
}

@media (max-width: 720px) {
  .event-card__title,
  .event-card--large .event-card__title {
    font-size: clamp(17px, 5vw, 22px) !important;
  }
}

/* 2. Bouton "services" (a gauche du header) : la pastille avec la
      fleche est a GAUCHE et s'ouvre vers la gauche, fleche vers la gauche. */
.events__services-btn .btn-cta__icon {
  right: auto !important;
  left: 4px !important;
}

.events__services-btn .btn-cta__icon svg {
  transform: scaleX(-1);
}

/* ============================================================
   SCROLL LIFT — les blocs remontent au scroll et redescendent
   ============================================================ */
.scroll-lift {
  transition-property: opacity !important;
  will-change: transform;
}

/* ============================================================
   REJOINS L'ARENE — la section remplit toute la page (PC)
   ============================================================ */
@media (min-width: 1001px) {
  .events-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  .events-section > .events__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 2.5vw, 34px);
  }

  .events__grid {
    gap: clamp(16px, 1.6vw, 24px);
    margin-bottom: 0;
  }

  .events__grid > .event-card {
    min-height: clamp(320px, 26vw, 440px);
    align-content: start;
  }
}

/* ============================================================
   EVENTS — section ancree plein ecran pendant l'animation
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-pin {
    position: relative;
    height: 200vh;
  }

  .events-pin > .events-section {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ============================================================
   MERGE AU BAS DE SECTION — les 4 blocs se rejoignent en 1
   (uniquement vers l'interieur : les gaps se ferment, la
   silhouette exterieure et les textes/tailles ne changent pas)
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events__inner { --merge: 0; }

  .events__grid {
    gap: calc(16px * (1 - var(--merge, 0)));
    margin-bottom: calc(16px * (1 - var(--merge, 0)));
  }

  /* Etat fusionne : on efface les decoupes internes, on garde
     seulement les coins exterieurs du grand bloc. */
  .events__inner[data-merged="1"] .events__grid > .event-card {
    clip-path: none;
  }
  .events__inner[data-merged="1"] .events__grid > .event-card:last-child {
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  }
  .events__inner[data-merged="1"] .upcoming {
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
  }
}
/* ============================================================
   FIX FUSION (MERGE) — Communauté & Services
   Les 4 conteneurs se soudent en un seul bloc au scroll :
   - les gaps se ferment vers l'INTERIEUR (les blocs s'étendent,
     rien ne bouge dans leur contenu, aucune déformation)
   - les bordures internes s'effacent progressivement
   - les angles coupés INTERNES se referment (plus de "trous")
   - chevauchement d'1px pour supprimer la fine ligne (arrondi
     sub-pixel du navigateur)
   Les angles et bordures EXTERIEURS ne changent jamais.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events__inner { --merge: 0; }
  .events__inner .events__grid,
  .events__inner .upcoming,
  .events__inner .events__grid > .event-card { --m: var(--merge, 0); }

  /* 1. Fermeture des gaps (les cartes s'élargissent vers l'intérieur) */
  .events__inner .events__grid {
    gap: calc(16px * (1 - var(--m)));
    margin-bottom: calc(16px * (1 - var(--m)));
  }
  /* 2. Chevauchement 1px vers l'interieur : tue la hairline de sub-pixel
        sans jamais decaler le bord exterieur droit du bloc. */
  .events__inner .events__grid > .event-card:not(:last-child) {
    margin-right: calc(-1px * var(--m));
  }
  .events__inner .upcoming { margin-top: calc(-1px * var(--m)); }

  /* 3. Bordures : outline remplacé par des bords indépendants,
        les bords internes s'effacent avec --merge. */
  .events__inner .events__grid > .event-card,
  .events__inner .upcoming {
    --edge: var(--border);
    --edge-in: color-mix(in srgb, var(--border) calc((1 - var(--m)) * 100%), transparent);
    outline: none !important;
    transition: box-shadow var(--tr), transform var(--tr);
  }
  .events__inner .events__grid > .event-card:nth-child(1) {
    box-shadow:
      inset 0 1px 0 0 var(--edge),      /* haut  : externe */
      inset 1px 0 0 0 var(--edge),      /* gauche: externe */
      inset -1px 0 0 0 var(--edge-in),  /* droite: interne */
      inset 0 -1px 0 0 var(--edge-in);  /* bas   : interne */
  }
  .events__inner .events__grid > .event-card:nth-child(2) {
    box-shadow:
      inset 0 1px 0 0 var(--edge),
      inset 1px 0 0 0 var(--edge-in),
      inset -1px 0 0 0 var(--edge-in),
      inset 0 -1px 0 0 var(--edge-in);
  }
  .events__inner .events__grid > .event-card:nth-child(3) {
    box-shadow:
      inset 0 1px 0 0 var(--edge),
      inset 1px 0 0 0 var(--edge-in),
      inset -1px 0 0 0 var(--edge),     /* droite: externe */
      inset 0 -1px 0 0 var(--edge-in);
  }
  .events__inner .upcoming {
    box-shadow:
      inset 0 1px 0 0 var(--edge-in),   /* haut  : interne */
      inset 1px 0 0 0 var(--edge),
      inset -1px 0 0 0 var(--edge),
      inset 0 -1px 0 0 var(--edge);
  }
  .events__inner .events__grid > .event-card:hover,
  .events__inner .upcoming:hover { transform: none; }

  /* 4. Angles coupés internes qui se referment (0 déformation :
        seuls les sommets des coins internes bougent). */
  --dummy: 0;
}

/* --- PC large (>=1300px) --- */
@media (min-width: 1300px) {
  .events__inner .events__grid > .event-card:nth-child(1) {
    --c8: calc(8px * (1 - var(--m)));
    clip-path: polygon(22px 0, 100% 0, 100% 100%, var(--c8) 100%, 0 calc(100% - var(--c8)), 0 22px) !important;
    -webkit-clip-path: polygon(22px 0, 100% 0, 100% 100%, var(--c8) 100%, 0 calc(100% - var(--c8)), 0 22px) !important;
  }
  .events__inner .events__grid > .event-card:nth-child(2) {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  .events__inner .events__grid > .event-card:nth-child(3) {
    --c8: calc(8px * (1 - var(--m)));
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - var(--c8)), calc(100% - var(--c8)) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - var(--c8)), calc(100% - var(--c8)) 100%, 0 100%) !important;
  }
  .events__inner .upcoming {
    --c8: calc(8px * (1 - var(--m)));
    clip-path: polygon(
      var(--c8) 0,
      calc(100% - var(--c8)) 0,
      100% var(--c8),
      100% calc(100% - var(--cut-lg)),
      calc(100% - var(--cut-lg)) 100%,
      var(--cut-lg) 100%,
      0 calc(100% - var(--cut-lg)),
      0 var(--c8)
    ) !important;
    -webkit-clip-path: polygon(
      var(--c8) 0,
      calc(100% - var(--c8)) 0,
      100% var(--c8),
      100% calc(100% - var(--cut-lg)),
      calc(100% - var(--cut-lg)) 100%,
      var(--cut-lg) 100%,
      0 calc(100% - var(--cut-lg)),
      0 var(--c8)
    ) !important;
  }
}

/* --- PC intermédiaire (1001px – 1299px) --- */
@media (min-width: 1001px) and (max-width: 1299px) {
  .events__inner .events__grid > .event-card:nth-child(1) {
    --c8: calc(8px * (1 - var(--m)));
    clip-path: polygon(22px 0, 100% 0, 100% 100%, var(--c8) 100%, 0 calc(100% - var(--c8)), 0 22px) !important;
    -webkit-clip-path: polygon(22px 0, 100% 0, 100% 100%, var(--c8) 100%, 0 calc(100% - var(--c8)), 0 22px) !important;
  }
  .events__inner .events__grid > .event-card:nth-child(2) {
    --c8: calc(8px * (1 - var(--m)));
    clip-path: polygon(var(--c8) 0, calc(100% - var(--c8)) 0, 100% var(--c8), 100% calc(100% - var(--c8)), calc(100% - var(--c8)) 100%, var(--c8) 100%, 0 calc(100% - var(--c8)), 0 var(--c8)) !important;
    -webkit-clip-path: polygon(var(--c8) 0, calc(100% - var(--c8)) 0, 100% var(--c8), 100% calc(100% - var(--c8)), calc(100% - var(--c8)) 100%, var(--c8) 100%, 0 calc(100% - var(--c8)), 0 var(--c8)) !important;
  }
  .events__inner .events__grid > .event-card:nth-child(3) {
    --c8: calc(8px * (1 - var(--m)));
    --cbr: calc(var(--cut-lg) * (1 - var(--m)));
    clip-path: polygon(var(--c8) 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - var(--cbr)), calc(100% - var(--cbr)) 100%, 0 100%, 0 var(--c8)) !important;
    -webkit-clip-path: polygon(var(--c8) 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - var(--cbr)), calc(100% - var(--cbr)) 100%, 0 100%, 0 var(--c8)) !important;
  }
  .events__inner .upcoming {
    --c8: calc(8px * (1 - var(--m)));
    clip-path: polygon(
      var(--c8) 0,
      calc(100% - var(--c8)) 0,
      100% var(--c8),
      100% 100%,
      var(--cut-lg) 100%,
      0 calc(100% - var(--cut-lg))
    ) !important;
    -webkit-clip-path: polygon(
      var(--c8) 0,
      calc(100% - var(--c8)) 0,
      100% var(--c8),
      100% 100%,
      var(--cut-lg) 100%,
      0 calc(100% - var(--cut-lg))
    ) !important;
  }
}

/* 5. Neutralise l'ancien état binaire [data-merged="1"] (clip-path: none)
      qui cassait la silhouette et laissait les lignes internes. */
@media (min-width: 0px) { /* anim: tous formats */
  .events__inner[data-merged="1"] .events__grid { gap: 0; margin-bottom: 0; }
}

/* ============================================================
   FIX v2 — LE 4e BLOC ("Prochains évènements") SE SOUDE AUSSI
   Cause : sur PC, l'espace entre la rangée de 3 cartes et le bloc
   "Prochains évènements" ne vient PAS de `margin-bottom` du grid
   (mis à 0 en >=1001px) mais du `gap` flex de `.events__inner`.
   Il n'était donc jamais refermé -> le 4e restait détaché.
   On ferme ce gap avec --merge, exactement comme les gaps horizontaux.
   Rien ne bouge à l'intérieur des blocs : ils s'étendent, c'est tout.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .events__inner {
    --m: var(--merge, 0);
    gap: calc(clamp(20px, 2.5vw, 34px) * (1 - var(--m)));
  }

  /* Le gap horizontal en >=1001px vaut clamp(16px,1.6vw,24px) :
     on reprend la MEME valeur (sinon fermeture partielle / chevauchement). */
  .events-section > .events__inner .events__grid {
    gap: calc(clamp(16px, 1.6vw, 24px) * (1 - var(--m)));
    margin-bottom: 0;
  }

  /* Chevauchement 1px vertical : supprime la hairline entre la rangée
     de cartes et le bloc "Prochains évènements". */
  .events-section > .events__inner .upcoming {
    margin-top: calc(-1px * var(--m));
  }

  /* Etat 100% fusionné : plus aucun espace résiduel. */
  .events__inner[data-merged="1"] { gap: 0 !important; }
  .events__inner[data-merged="1"] .events__grid { gap: 0 !important; margin-bottom: 0 !important; }
}

/* ============================================================
   COMMUNAUTE & SERVICES — CONFINEMENT DE LA FUSION
   Le bloc "Prochains evenements" ne peut plus deborder vers
   l'exterieur (a droite) ni recouvrir les conteneurs du haut :
   - la largeur reste strictement celle de la colonne de contenu
   - l'expansion se fait uniquement vers l'interieur
   - les cartes du haut sont toujours au-dessus dans l'empilement
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .events__inner {
    overflow-x: clip;
  }

  .events-section > .events__inner .events__grid,
  .events-section > .events__inner .upcoming {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .events-section > .events__inner .events__grid > .event-card {
    position: relative;
    z-index: 2;
  }

  .events-section > .events__inner .upcoming {
    position: relative;
    z-index: 1;
    align-self: stretch;
    margin-top: calc(-1px * var(--merge, 0));
  }
}

/* ============================================================
   COMMUNAUTE & SERVICES — EMPILEMENT PROPRE PENDANT LA FUSION
   Le flou d'arriere-plan des 4 blocs est identique : la soudure
   ne laisse plus apparaitre de difference de teinte au niveau
   de la jonction horizontale.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .events__inner .upcoming {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}


/* ============================================================
   COMMUNAUTE & SERVICES — FONDU DU CONTENU PUIS RETRAIT DU BLOC
   1. Pendant la fusion, tout le contenu des 4 conteneurs
      disparait progressivement en fondu jusqu'a l'unification.
   2. Une fois le conteneur unique forme, il se retrecit au
      scroll jusqu'a ne plus etre visible, sans jamais deborder.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .events__inner {
    gap: clamp(20px, 2.5vw, 34px);
  }
  .events__inner[data-merged="1"] {
    gap: clamp(20px, 2.5vw, 34px) !important;
  }

  .events-section > .events__inner > .events__merge {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    gap: calc(clamp(20px, 2.5vw, 34px) * (1 - var(--merge, 0)));
    transform-origin: 50% 50%;
    transform: scale(calc(1 - 0.94 * var(--collapse, 0)));
    /* Le conteneur se retrecit SANS fondu : il reste 100% opaque. */
    opacity: 1 !important;
    will-change: transform;
  }
  .events__inner[data-merged="1"] > .events__merge {
    gap: 0 !important;
  }

  .events-section > .events__inner > .events__merge > .events__grid > .event-card > *,
  .events-section > .events__inner > .events__merge > .upcoming > * {
    opacity: clamp(0, calc(1.12 * (1 - var(--merge, 0)) - 0.06), 1);
    transition: none;
  }
  .events__inner[data-merged="1"] .events__grid > .event-card > *,
  .events__inner[data-merged="1"] .upcoming > * {
    opacity: 0;
  }
}

/* ============================================================
   COMMUNAUTE & SERVICES — RECREATION DU CONTENEUR UNIQUE
   Sur la fin de la fusion, les 4 blocs s'effacent et un seul
   conteneur homogene (meme fond, meme bordure, meme silhouette)
   est recree par-dessus : plus de superposition, plus de fines
   lignes, aucune deformation de la structure.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .events__inner > .events__merge {
    position: relative;
    isolation: isolate;
    /* Le conteneur reste TOUJOURS au-dessus de la section
       "Dernieres news" qui apparait dessous. */
    z-index: 20;
  }

  /* Le wrapper doit porter le meme empilement pour que le conteneur
     passe devant .actu-section (absolute, z-index 6). */
  .events-section > .events__inner {
    position: relative;
    z-index: 20;
  }

  .events-section > .events__inner > .events__merge::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: rgba(6, 16, 40, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
      inset 0 1px 0 0 var(--border),
      inset 0 -1px 0 0 var(--border),
      inset 1px 0 0 0 var(--border),
      inset -1px 0 0 0 var(--border);
    clip-path: polygon(
      var(--corner-cut, 22px) 0,
      calc(100% - var(--corner-cut, 22px)) 0,
      100% var(--corner-cut, 22px),
      100% calc(100% - var(--corner-cut, 22px)),
      calc(100% - var(--corner-cut, 22px)) 100%,
      var(--corner-cut, 22px) 100%,
      0 calc(100% - var(--corner-cut, 22px)),
      0 var(--corner-cut, 22px)
    );
    -webkit-clip-path: polygon(
      var(--corner-cut, 22px) 0,
      calc(100% - var(--corner-cut, 22px)) 0,
      100% var(--corner-cut, 22px),
      100% calc(100% - var(--corner-cut, 22px)),
      calc(100% - var(--corner-cut, 22px)) 100%,
      var(--corner-cut, 22px) 100%,
      0 calc(100% - var(--corner-cut, 22px)),
      0 var(--corner-cut, 22px)
    );
    opacity: clamp(0, calc((var(--merge, 0) - 0.72) / 0.2), 1);
  }

  /* Les 4 blocs d'origine disparaissent pendant que le conteneur
     unique apparait : plus aucun bord interne ni chevauchement. */
  .events-section > .events__inner > .events__merge > .events__grid > .event-card,
  .events-section > .events__inner > .events__merge > .upcoming {
    opacity: clamp(0, calc(1 - (var(--merge, 0) - 0.72) / 0.2), 1);
  }
}

/* ============================================================
   DERNIERS ARTICLES — integres a l'animation du losange
   La section apparait a l'interieur du meme ecran ancre,
   au moment ou le bloc unifie se retrecit et s'efface.
   ============================================================ */
@media (min-width: 1001px) {
  .events-pin {
    height: 300vh;
  }

  .events-section > .events__inner > .events__header {
    opacity: clamp(0, calc(1 - var(--collapse, 0) * 3), 1) !important;
    transform: none !important;
    transition: none !important;
  }

  .events-section > .actu-section {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    padding: 0;
    margin: 0;
    background-color: transparent;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: none;
  }

  .events-section > .actu-section > .actu__lines-bg,
  .events-section > .actu-section::before {
    display: none;
  }

  .events-section > .actu-section > .actu__inner {
    width: 100%;
    padding-top: var(--actu-top, 0px);
  }

  /* Le titre "Derniers articles" prend la place du titre pivotant et le
     bouton "articles" celle du bouton communaute. */
  .events-section > .actu-section .actu__header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title btn" !important;
    align-items: center !important;
    margin-bottom: clamp(28px, 4vw, 64px);
  }

  .events-section > .actu-section .actu__header > .section-title,
  .events-section > .actu-section .actu__header > .section-title em {
    justify-self: center !important;
    text-align: center !important;
    font-family: var(--font-light) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.3vw, 50px) !important;
  }


  .events-pin[data-actu="1"] > .events-section > .actu-section {
    pointer-events: auto;
  }
}

/* ============================================================
   COMMUNAUTE & SERVICES — FERMETURE EN LOSANGE STRICTEMENT A 45 DEG
   Geometrie invariante au format (resize largeur/hauteur) :
   - la coupe avance de la MEME longueur en px sur X et sur Y
     -> les 4 angles restent a 45 degres a chaque instant ;
   - les bords gauche/droite (ou haut/bas) se rapprochent du centre
     via un retrait en px, jamais via une mise a l'echelle
     -> le losange n'est jamais deforme ;
   - a la fin de la phase 1 la silhouette est un carre tourne a 45
     (losange parfait), quel que soit le rapport largeur/hauteur ;
   - la phase 2 est un scale() uniforme : les angles sont conserves.
   Les dimensions de la boite viennent de --merge-w / --merge-h
   (JS facultatif : losange-45.js) avec un repli CSS raisonnable.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-pin,
  .events-section > .events__inner {
    --dia: clamp(0, calc(var(--collapse, 0) / 0.55), 1);
    --shrink: clamp(0, calc((var(--collapse, 0) - 0.55) / 0.45), 1);
    --corner-cut: clamp(14px, 1.6vw, 22px);
  }

  /* Geometrie generique : --bw / --bh = dimensions reelles de la boite.
     --c  : longueur de coupe, IDENTIQUE sur X et sur Y => 45 deg garanti.
     --ix / --iy : retrait des bords vers le centre (carre final). */
  .events-section > .community-bg,
  .events-section > .events__inner > .events__merge {
    --half: calc(min(var(--bw), var(--bh)) / 2);
    --c: calc(var(--corner-cut) + (var(--half) - var(--corner-cut)) * var(--dia));
    --ix: calc(max(0px, (var(--bw) - var(--bh)) / 2) * var(--dia));
    --iy: calc(max(0px, (var(--bh) - var(--bw)) / 2) * var(--dia));
  }

  /* Fond uni revele derriere le losange qui se referme. */
  .events-pin > .events-section.community-perspective {
    background-color: #071a40;
  }

  .events-section > .community-bg {
    /* Avant l'animation : aucune coupe d'angle -> le fond du dessous
       ne peut plus apparaitre dans les coins. La coupe ne nait qu'avec --dia. */
    --corner-cut: 0px;
    /* Dimensions exactes du fond : deduites de ses propres insets. */
    --bw: calc(100vw - 2 * var(--page-pad) * var(--dia, 0));
    --bh: calc(100vh - 2 * clamp(72px, 13vh, 110px) * var(--dia, 0));
    transform-origin: 50% 50%;
    transform:
      translate3d(0, calc(-1 * clamp(36px, 2.4vw, 46px) * var(--shrink)), 0)
      scale(calc(1 - var(--shrink)));
    opacity: 1;
    clip-path: polygon(
      calc(var(--ix) + var(--c)) var(--iy),
      calc(100% - var(--ix) - var(--c)) var(--iy),
      calc(100% - var(--ix)) calc(var(--iy) + var(--c)),
      calc(100% - var(--ix)) calc(100% - var(--iy) - var(--c)),
      calc(100% - var(--ix) - var(--c)) calc(100% - var(--iy)),
      calc(var(--ix) + var(--c)) calc(100% - var(--iy)),
      var(--ix) calc(100% - var(--iy) - var(--c)),
      var(--ix) calc(var(--iy) + var(--c))
    );
    -webkit-clip-path: polygon(
      calc(var(--ix) + var(--c)) var(--iy),
      calc(100% - var(--ix) - var(--c)) var(--iy),
      calc(100% - var(--ix)) calc(var(--iy) + var(--c)),
      calc(100% - var(--ix)) calc(100% - var(--iy) - var(--c)),
      calc(100% - var(--ix) - var(--c)) calc(100% - var(--iy)),
      calc(var(--ix) + var(--c)) calc(100% - var(--iy)),
      var(--ix) calc(100% - var(--iy) - var(--c)),
      var(--ix) calc(var(--iy) + var(--c))
    );
    will-change: transform, clip-path;
  }

  /* Le fondu bas ne doit pas trahir la fermeture du fond. */
  .events-pin > .events-section.community-perspective::after {
    opacity: clamp(0, calc(1 - var(--collapse, 0) * 6), 1);
  }

  /* Le conteneur unifie : memes angles, meme reduction, sans fondu. */
  .events-section > .events__inner > .events__merge {
    --bw: var(--merge-w, calc(100vw - 2 * var(--page-pad)));
    --bh: var(--merge-h, clamp(320px, 46vh, 620px));
    overflow: hidden;
    opacity: 1 !important;
    transform: scale(calc(1 - var(--shrink))) !important;
    clip-path: polygon(
      calc(var(--ix) + var(--c)) var(--iy),
      calc(100% - var(--ix) - var(--c)) var(--iy),
      calc(100% - var(--ix)) calc(var(--iy) + var(--c)),
      calc(100% - var(--ix)) calc(100% - var(--iy) - var(--c)),
      calc(100% - var(--ix) - var(--c)) calc(100% - var(--iy)),
      calc(var(--ix) + var(--c)) calc(100% - var(--iy)),
      var(--ix) calc(100% - var(--iy) - var(--c)),
      var(--ix) calc(var(--iy) + var(--c))
    );
    -webkit-clip-path: polygon(
      calc(var(--ix) + var(--c)) var(--iy),
      calc(100% - var(--ix) - var(--c)) var(--iy),
      calc(100% - var(--ix)) calc(var(--iy) + var(--c)),
      calc(100% - var(--ix)) calc(100% - var(--iy) - var(--c)),
      calc(100% - var(--ix) - var(--c)) calc(100% - var(--iy)),
      calc(var(--ix) + var(--c)) calc(100% - var(--iy)),
      var(--ix) calc(100% - var(--iy) - var(--c)),
      var(--ix) calc(var(--iy) + var(--c))
    );
    will-change: transform, clip-path;
  }

  /* L'habillage du conteneur unique suit exactement la meme silhouette. */
  .events-section > .events__inner > .events__merge::after {
    clip-path: polygon(
      calc(var(--ix) + var(--c)) var(--iy),
      calc(100% - var(--ix) - var(--c)) var(--iy),
      calc(100% - var(--ix)) calc(var(--iy) + var(--c)),
      calc(100% - var(--ix)) calc(100% - var(--iy) - var(--c)),
      calc(100% - var(--ix) - var(--c)) calc(100% - var(--iy)),
      calc(var(--ix) + var(--c)) calc(100% - var(--iy)),
      var(--ix) calc(100% - var(--iy) - var(--c)),
      var(--ix) calc(var(--iy) + var(--c))
    ) !important;
    -webkit-clip-path: polygon(
      calc(var(--ix) + var(--c)) var(--iy),
      calc(100% - var(--ix) - var(--c)) var(--iy),
      calc(100% - var(--ix)) calc(var(--iy) + var(--c)),
      calc(100% - var(--ix)) calc(100% - var(--iy) - var(--c)),
      calc(100% - var(--ix) - var(--c)) calc(100% - var(--iy)),
      calc(var(--ix) + var(--c)) calc(100% - var(--iy)),
      var(--ix) calc(100% - var(--iy) - var(--c)),
      var(--ix) calc(var(--iy) + var(--c))
    ) !important;
    opacity: clamp(0, calc((var(--merge, 0) - 0.72) / 0.2), 1) !important;
  }
}


/* ============================================================
   COMMUNAUTE & SERVICES — SORTIE DE L'EN-TETE PENDANT LA FUSION
   Pendant que les 4 conteneurs fusionnent en un seul :
   - le bouton "services" sort par la gauche
   - le bouton "communaute" sort par la droite
   - le titre "Rejoins ..." monte puis devient invisible
   - l'espace de l'en-tete se referme : le conteneur unique
     se recentre verticalement dans la page.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .events__inner > .events__header {
    --hx: var(--merge, 0);
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    /* L'en-tete libere sa place (hauteur + gap) au fur et a mesure. */
    margin-bottom: calc(-1 * (var(--header-h, 0px) + clamp(20px, 2.5vw, 34px)) * var(--hx)) !important;
    pointer-events: none;
  }

  .events-section > .events__inner > .events__header > .section-title {
    transform: translate3d(0, calc(-1 * var(--hx) * 150%), 0) !important;
    opacity: clamp(0, calc(1 - var(--hx) / 0.55), 1) !important;
    transition: none !important;
    will-change: transform, opacity;
  }

  .events-section > .events__inner > .events__header > .events__services-btn {
    transform: translate3d(calc(-1 * var(--hx) * 62vw), 0, 0) !important;
    opacity: clamp(0, calc(1 - var(--hx) / 0.85), 1) !important;
    transition: none !important;
    will-change: transform, opacity;
  }

  .events-section > .events__inner > .events__header > .events__community-btn {
    transform: translate3d(calc(var(--hx) * 62vw), 0, 0) !important;
    opacity: clamp(0, calc(1 - var(--hx) / 0.85), 1) !important;
    transition: none !important;
    will-change: transform, opacity;
  }

  /* Le conteneur unique reste centre dans l'ecran ancre. */
  .events-section > .events__inner {
    justify-content: center;
  }
}

/* ============================================================
   PATCH V-RELAIS — COMMUNAUTE & SERVICES -> DERNIERS ARTICLES
   1. L'en-tete ne se deplace plus verticalement pendant la fusion :
      le titre et les deux boutons gardent leur position exacte,
      seul le bloc unifie se recentre (translation appliquee a lui).
   2. Le titre "Rejoins ..." est centre par rapport a l'en-tete entier
      (et non entre les deux boutons) : le titre "Derniers articles"
      peut donc apparaitre EXACTEMENT au meme endroit.
   3. Le bouton "articles" prend la place exacte du bouton
      "communaute" (meme bord droit, meme ligne).
   ============================================================ */
@media (min-width: 1001px) {

  /* ── 1. En-tete figee : plus de fermeture d'espace ── */
  .events-section > .events__inner > .events__header {
    position: relative !important;
    margin-bottom: clamp(28px, 4vw, 64px) !important;
    min-height: var(--header-h, auto);
  }

  /* Le recentrage du conteneur unifie passe par SA propre translation,
     l'en-tete au-dessus reste immobile. */
  .events-section > .events__inner > .events__merge {
    transform:
      translate3d(0, calc(-0.5 * (var(--header-h, 0px) + clamp(28px, 4vw, 64px)) * var(--merge, 0)), 0)
      scale(calc(1 - 0.94 * var(--collapse, 0))) !important;
  }
  .events-pin > .events-section > .events__inner > .events__merge {
    transform:
      translate3d(0, calc(-0.5 * (var(--header-h, 0px) + clamp(28px, 4vw, 64px)) * var(--merge, 0) - clamp(36px, 2.4vw, 46px) * var(--shrink)), 0)
      scale(calc(1 - var(--shrink))) !important;
  }

  /* ── 2. Titre "Rejoins ..." centre sur toute la largeur de l'en-tete ── */
  .events-section > .events__inner > .events__header > .section-title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    justify-self: center !important;
    text-align: center !important;
    transform: translate3d(-50%, calc(-50% - var(--hx, 0) * 150%), 0) !important;
  }

  /* ── 3. Les boutons partent uniquement sur les cotes ── */
  .events-section > .events__inner > .events__header > .events__services-btn,
  .events-section > .events__inner > .events__header > .events__community-btn {
    align-self: center !important;
    margin: 0 !important;
  }

  /* ── 4. "Derniers articles" : meme geometrie que l'en-tete d'origine ── */
  .events-section > .actu-section .actu__header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title btn" !important;
    align-items: center !important;
    column-gap: clamp(16px, 3vw, 48px) !important;
    margin-bottom: clamp(28px, 4vw, 64px) !important;
    min-height: var(--header-h, auto);
  }

  .events-section > .actu-section .actu__header > .section-title {
    grid-area: title !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    transform: translate3d(-50%, -50%, 0) !important;
    text-align: center !important;
    font-family: var(--font-light) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.3vw, 50px) !important;
  }

  .events-section > .actu-section .actu__header > .btn-cta {
    grid-area: btn !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }
}

/* ============================================================
   PATCH V-RELAIS 2 — ENTREE DU RELAIS "DERNIERS ARTICLES"
   - le bouton "articles" arrive de la droite et s'arrete
     exactement a la place du bouton "communaute"
   - le titre "Derniers articles" descend du haut et s'arrete
     exactement a la place de l'ancien titre "Rejoins ..."
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .actu-section {
    /* Progression d'entree : demarre des que le losange se referme. */
    --ain: clamp(0, calc((var(--collapse, 0) - 0.30) / 0.45), 1);
  }

  .events-section > .actu-section .actu__header > .section-title {
    transform: translate3d(-50%, calc(-50% - (1 - var(--ain)) * 150%), 0) !important;
    opacity: var(--ain) !important;
    transition: none !important;
    will-change: transform, opacity;
  }

  .events-section > .actu-section .actu__header > .btn-cta {
    transform: translate3d(calc((1 - var(--ain)) * 62vw), 0, 0) !important;
    opacity: var(--ain) !important;
    transition: none !important;
    will-change: transform, opacity;
  }
}

/* ============================================================
   PATCH V-RELAIS 3 — CENTRAGE PARFAIT + AZURIO MEDIUM
   - les deux titres ("Rejoins ..." et "Derniers articles") sont
     centres sur toute la largeur de la page (bord a bord du
     conteneur, plus de calcul en max-content / translateX)
   - les deux titres passent en Azurio Medium (comme "Notre roster")
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */

  /* ── Centrage : le titre occupe toute la largeur de l'en-tete ── */
  .events-section > .events__inner > .events__header > .section-title {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    text-align: center !important;
    transform: translate3d(0, calc(-50% - var(--hx, 0) * 150%), 0) !important;
  }

  .events-section > .actu-section .actu__header > .section-title {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    text-align: center !important;
    transform: translate3d(0, calc(-50% - (1 - var(--ain)) * 150%), 0) !important;
  }

  /* Le titre est au-dessus des boutons pour rester parfaitement centre
     sans etre pousse par eux. */
  .events-section > .events__inner > .events__header > .section-title,
  .events-section > .actu-section .actu__header > .section-title {
    z-index: 2;
    pointer-events: none;
  }
  .events-section > .events__inner > .events__header > .btn-cta,
  .events-section > .actu-section .actu__header > .btn-cta {
    position: relative;
    z-index: 3;
  }
}

/* ── Azurio Medium pour les deux titres (toutes tailles d'ecran) ── */
.events__header .section-title,
.events__header .section-title em,
.events__header .section-title span,
.events__header .section-title .rotate,
.events__header .section-title .rotate__inner,
.events__header .section-title .rotate__char,
.events__header .section-title .rotate__measure,
.actu__header .section-title,
.actu__header .section-title em,
.events-section > .actu-section .actu__header > .section-title,
.events-section > .actu-section .actu__header > .section-title em {
  font-family: var(--font-medium) !important;
  font-weight: 400 !important;
}

/* ============================================================
   DERNIERS ARTICLES — CENTRAGE DES SIX CONTENEURS
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .actu-section > .actu__inner {
    height: 100%;
    box-sizing: border-box;
  }

  .events-section > .actu-section .actu__grid {
    position: absolute;
    top: 50%;
    left: var(--page-pad);
    right: var(--page-pad);
    width: auto;
    margin: 0;
    transform: translate3d(0, -50%, 0);
  }
}

/* ============================================================
   COMMUNAUTE — CONTOUR DU FOND COLLE AU LOSANGE AVANT
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .community-bg {
    /* A l'arrivee (--collapse: 0) le fond couvre toute la section. */
    inset:
      calc(clamp(72px, 13vh, 110px) * var(--dia, 0))
      calc(var(--page-pad) * var(--dia, 0));
  }

  .events-section > .events__inner > .events__merge::after {
    background: #061028;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}



/* ── Haut ET bas en pente de la section "Notre roster" (après tous les overrides) ──
   Les deux bords sont parallèles : côté gauche plus bas, côté droit plus haut. */
.team-section {
  padding-top: calc(var(--space-section) + var(--team-slope)) !important;
  padding-bottom: calc(var(--space-section) + var(--team-slope)) !important;
  position: relative;
  z-index: 6 !important;
  margin-top: calc(-1 * var(--team-slope)) !important;
  clip-path: polygon(0 var(--team-slope), 100% 0, 100% calc(100% - var(--team-slope)), 0 100%) !important;
  -webkit-clip-path: polygon(0 var(--team-slope), 100% 0, 100% calc(100% - var(--team-slope)), 0 100%) !important;
}

/* La bande partenaires gagne la place perdue sous la pente du roster,
   sans casser son contenu (logos jamais recouverts). */
.partners-band {
  padding-bottom: var(--team-slope, clamp(36px, 5vw, 110px));
  border-bottom: 0 !important;
}
.partners-band::after { display: none !important; }
@media (min-width: 1100px) {
  .team-section {
    padding-top: calc(clamp(80px, 10vh, 140px) + var(--team-slope)) !important;
    padding-bottom: calc(clamp(80px, 10vh, 140px) + var(--team-slope)) !important;
  }
}
@media (min-width: 1300px) {
  .team-section {
    padding-top: calc(clamp(40px, 5vh, 72px) + var(--team-slope)) !important;
    padding-bottom: calc(clamp(40px, 5vh, 72px) + var(--team-slope)) !important;
  }
}

/* ── La section Communauté & Services remonte sous la pente du roster ── */
:root { --team-slope: clamp(36px, 5vw, 110px); }

.events-pin {
  margin-top: calc(-1 * var(--team-slope));
  position: relative;
  z-index: 4 !important;
}

@media (max-width: 1000px) {
  .events-section { padding-top: calc(var(--space-section) + var(--team-slope)); }
}


/* ============================================================
   HERO — VIDEO DE FOND
   ============================================================ */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
  border: 0;
  filter: hue-rotate(-58deg) saturate(1.2) brightness(0.94);
  opacity: 1;
}

.hero__video-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(4, 12, 26, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ============================================================
   HERO — NETTOYAGE : suppression totale du grain et des anciens effets
   ============================================================ */
.hero__bg,
.hero__bg-gradient,
.hero__scanlines,
.hero__grid-lines,
.hero__grid-floor,
.hero__floor-line,
.hero__particles,
.hero__cursor-glow,
.hero__3d-wrap,
.hero__3d-stage {
  display: none !important;
}

.hero__bg-gradient::before,
.hero__bg-gradient::after,
.hero__video-tint::before,
.hero__video-tint::after {
  content: none !important;
  background: none !important;
}

/* Titre hero agrandi et verrouillé sur une seule ligne */
.hero__title {
  max-width: none !important;
  white-space: nowrap !important;
  font-size: clamp(42px, 8.5vw, 180px) !important;
}

.hero__title br {
  display: inline;
}

@media (max-width: 600px) {
  .hero__title {
    font-size: clamp(34px, 10.5vw, 78px) !important;
  }
}

/* ============================================================
   MOBILE 600px — titre "Rejoins" a la meme taille que "Notre roster"
   et boutons lateraux alignes en bas
   ============================================================ */
@media (max-width: 600px) {
  .events__header .section-title,
  .events__header .section-title em,
  .events__header .section-title span,
  .events__header .section-title .rotate,
  .events__header .section-title .rotate__inner,
  .events__header .section-title .rotate__char,
  .events__header .section-title .rotate__measure {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.15 !important;
  }

  .events__header {
    align-items: end !important;
  }

  .events__header > .events__services-btn,
  .events__header > .events__community-btn {
    align-self: end !important;
  }
}

/* ============================================================
   MOBILE 600px — boutons lateraux places tout en bas de la section
   ============================================================ */
@media (max-width: 600px) {
  .events-section {
    position: relative !important;
    padding-bottom: 78px !important;
  }

  .events__header > .events__services-btn,
  .events__header > .events__community-btn {
    position: absolute !important;
    bottom: 20px !important;
    width: calc(50% - clamp(14px, 4vw, 22px)) !important;
    margin: 0 !important;
    justify-content: center !important;
    z-index: 4 !important;
  }

  .events__header > .events__services-btn {
    left: clamp(12px, 4vw, 18px) !important;
  }

  .events__header > .events__community-btn {
    right: clamp(12px, 4vw, 18px) !important;
  }
}

/* ============================================================
   MOBILE 600px — boutons "Notre roster" et "Derniers articles"
   places tout en bas de leur section
   ============================================================ */
@media (max-width: 600px) {
  .team-section {
    position: relative !important;
    /* La section s'etend vers le bas pour que le bouton "equipe"
       (qui deborde de .team__inner) passe au-dessus de la decoupe
       diagonale et reste entierement visible. */
    padding-bottom: 150px !important;
  }

  .team__header > .btn-cta {
    position: absolute !important;
    left: clamp(12px, 4vw, 18px) !important;
    right: clamp(12px, 4vw, 18px) !important;
    bottom: 20px !important;
    width: auto !important;
    margin: 0 !important;
    justify-content: center !important;
    align-self: end !important;
    z-index: 4 !important;
  }

  .actu-section,
  .events-section > .actu-section {
    position: relative !important;
    padding-bottom: 78px !important;
  }

  .actu__header {
    align-items: end !important;
  }

  .actu__header > .btn-cta,
  .events-section > .actu-section .actu__header > .btn-cta {
    position: absolute !important;
    left: clamp(12px, 4vw, 18px) !important;
    right: clamp(12px, 4vw, 18px) !important;
    bottom: 20px !important;
    width: auto !important;
    margin: 0 !important;
    justify-content: center !important;
    align-self: end !important;
    z-index: 4 !important;
  }

  .team__header {
    align-items: end !important;
  }

  .team__header > .btn-cta,
  .actu__header > .btn-cta,
  .events-section > .actu-section .actu__header > .btn-cta {
    right: auto !important;
    bottom: -58px !important;
    width: calc(100% - 2 * clamp(12px, 4vw, 18px)) !important;
    max-width: none !important;
  }
}

/* ============================================================
   MOBILE 600px — titres "Notre roster", "Rejoins" et
   "Dernieres news / Derniers articles" CENTRES
   ============================================================ */
@media (max-width: 600px) {
  .team__header,
  .actu__header,
  .events-section > .actu-section .actu__header,
  .events__header {
    justify-items: center !important;
    text-align: center !important;
  }

  .team__header > .section-title,
  .actu__header > .section-title,
  .events-section > .actu-section .actu__header > .section-title,
  .events__header > .section-title {
    justify-self: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* =====================================================================
   PATCH — "Rejoins + vignette animee" centre + titres de section plus grands
   ===================================================================== */

/* ── 1. Section "Rejoins" : titre + mot anime parfaitement centres ───── */
.events__header > .section-title,
.events__header > .section-title.section-title--rotate {
  grid-area: title;
  justify-self: center !important;
  text-align: center !important;
  margin-inline: auto !important;
}

.section-title--rotate {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}

@media (max-width: 720px) {
  .events__header {
    grid-template-areas:
      "label btn"
      "title title";
  }
  .events__header > .section-title {
    justify-self: center !important;
    text-align: center !important;
  }
}

/* ── 2. Titres de section un peu plus grands ─────────────────────────── */
/*    "Notre roster" / "Derniers articles" */
.section-title {
  font-size: clamp(40px, 4.8vw, 70px);
}

/*    "Rejoins <mot anime>" */
.events__header .section-title {
  font-size: clamp(34px, 4vw, 60px) !important;
}

/* =====================================================================
   PATCH V8 — "Notre roster", "Rejoins <mot anime>" et "Dernieres news"
   exactement la meme taille (plus petite) + Azurio Medium
   ===================================================================== */
.team__header .section-title,
.team__header .section-title em,
.team__header .section-title span,
.team__header .section-title .word,
.team__header .section-title .highlight-text,
.actu__header .section-title,
.actu__header .section-title em,
.actu__header .section-title span,
.events__header .section-title,
.events__header .section-title em,
.events__header .section-title span,
.events__header .section-title .rotate,
.events__header .section-title .rotate__inner,
.events__header .section-title .rotate__mask,
.events__header .section-title .rotate__char,
.events__header .section-title .rotate__measure {
  font-family: var(--font-medium), 'Barlow', sans-serif !important;
  font-weight: 400 !important;
}

.team__header .section-title,
.actu__header .section-title,
.events__header .section-title,
.team__header > .section-title,
.actu__header > .section-title,
.events__header > .section-title,
.events-section > .events__inner > .events__header > .section-title,
.events-section > .actu-section .actu__header > .section-title {
  font-size: clamp(28px, 3.2vw, 46px) !important;
}

/* =====================================================================
   PATCH V9 — 1. "DERNIERES NEWS" : les deux mots exactement a la meme
                 taille que "NOTRE ROSTER" (les regles em plus
                 specifiques dans les media-queries sont neutralisees)
              2. Boutons "Assistance" et "Discord" de la navbar :
                 vrais boutons visibles et coherents avec le design
   ===================================================================== */

/* ── 1. Titres de section : une seule taille, mots inclus ───────────── */
.team__header .section-title,
.team__header .section-title em,
.team__header .section-title span,
.actu__header .section-title,
.actu__header .section-title em,
.actu__header .section-title span,
.events__header .section-title,
.events__header .section-title em,
.events__header .section-title span,
.events-section > .actu-section .actu__header > .section-title,
.events-section > .actu-section .actu__header > .section-title em,
.events-section > .actu-section .actu__header > .section-title span,
.events-section > .events__inner > .events__header > .section-title,
.events-section > .events__inner > .events__header > .section-title em,
.events-section > .events__inner > .events__header > .section-title span {
  font-family: var(--font-medium), 'Barlow', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.2vw, 46px) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.01em !important;
}

/* ── 2. Navbar : Assistance (ghost) + Discord (plein) ───────────────── */
/* Les deux boutons sont colles, separes par une simple verticale a 90deg,
   et n'ont plus aucun effet au survol. */
:root {
  --cta-h: clamp(30px, 3vw, 36px);
  --cta-gap: clamp(4px, 1vw, 12px);  /* gap de .navbar__right a annuler */
}

.navbar__right .navbar__cta,
.navbar__cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--cta-h);
  padding: 0 clamp(12px, 1.4vw, 20px);
  font-family: var(--font-medium), 'Barlow', sans-serif;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  transition: none !important;
}

/* Assistance — contour discret, bord droit droit (90deg) */
.navbar__cta--ghost {
  color: var(--text) !important;
  background: rgba(94, 170, 255, 0.06);
  border: 1px solid var(--border-md);
  border-right: 0;
  clip-path: polygon(
    var(--cut, 10px) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--cut, 10px)
  );
  margin-right: calc(-1 * var(--cta-gap));
  position: relative;
  z-index: 2;
}

/* Discord — bouton plein accent, bord gauche droit (colle a Assistance) */
.navbar__cta:not(.navbar__cta--ghost) {
  color: #04101f !important;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent2) 100%);
  border: 1px solid transparent;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut, 10px)),
    calc(100% - var(--cut, 10px)) 100%,
    0 100%
  );
  position: relative;
  z-index: 1;
}

/* Aucun effet hover / focus / active sur les deux boutons */
.navbar__cta--ghost:hover,
.navbar__cta--ghost:focus,
.navbar__cta--ghost:focus-visible,
.navbar__cta--ghost:active {
  background: rgba(94, 170, 255, 0.06);
  border-color: var(--border-md);
  transform: none;
  box-shadow: none;
  filter: none;
}

.navbar__cta:not(.navbar__cta--ghost):hover,
.navbar__cta:not(.navbar__cta--ghost):focus,
.navbar__cta:not(.navbar__cta--ghost):focus-visible,
.navbar__cta:not(.navbar__cta--ghost):active {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent2) 100%);
  transform: none;
  box-shadow: none;
  filter: none;
}

.navbar__cta:active {
  transform: none;
}

@media (max-width: 900px) {
  .navbar__cta--ghost {
    display: none !important;
  }
  /* seul Discord reste : coins biseautes normaux */
  .navbar__cta:not(.navbar__cta--ghost) {
    clip-path: polygon(var(--cut, 10px) 0, 100% 0, 100% calc(100% - var(--cut, 10px)), calc(100% - var(--cut, 10px)) 100%, 0 100%, 0 var(--cut, 10px));
  }
}



/* ============================================================
   BANDE PARTENAIRES — HAUT EN PENTE (parallele au bas) + fine
   ============================================================ */
:root {
  --pb-slope: var(--team-slope, clamp(36px, 5vw, 110px));
  /* angle exact de la pente : 5vw sur 100vw -> atan(0.05) */
  --pb-angle: -2.862deg;
}
/* zones ou la pente est bornee par le clamp -> angle recalcule */
@media (max-width: 720px) { :root { --pb-angle: -3.4deg; } }
@media (max-width: 520px) { :root { --pb-angle: -4.2deg; } }
@media (min-width: 2200px) { :root { --pb-angle: -2.4deg; } }

.partners-band {
  /* pas de remontee dans le hero : la bande ne depasse plus a droite */
  margin-top: 0 !important;
  padding-top: var(--pb-slope) !important;
  padding-bottom: var(--pb-slope) !important;
  border-top: 0 !important;
  clip-path: polygon(0 var(--pb-slope), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 var(--pb-slope), 100% 0, 100% 100%, 0 100%);
}

/* ligne d'accent qui suit le contour incline du haut */
.partners-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--pb-slope) + 3px);
  background: linear-gradient(90deg, transparent, rgba(94, 170, 255, 0.45), transparent);
  clip-path: polygon(0 var(--pb-slope), 100% 0, 100% 1.5px, 0 calc(var(--pb-slope) + 1.5px));
  -webkit-clip-path: polygon(0 var(--pb-slope), 100% 0, 100% 1.5px, 0 calc(var(--pb-slope) + 1.5px));
  pointer-events: none;
  z-index: 2;
}

/* contenu incline exactement du meme angle que les deux bords */
.partners-band__inner {
  transform: rotate(var(--pb-angle));
  transform-origin: 50% 50%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: var(--page-pad) !important;
  padding-right: var(--page-pad) !important;
  will-change: transform;
}

/* ── Bande plus fine / plus minimale ─────────────────────────── */
.partners-band__track {
  height: clamp(20px, 1.7vw, 26px) !important;
  gap: clamp(10px, 2vw, 30px) !important;
}
.pb-slot { max-width: clamp(66px, 6vw, 96px); }
.pb-chip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.pb-chip img { max-height: 100%; }
.pb-slot:hover .pb-chip { transform: none; }

/* =====================================================================
   PATCH — "Notre roster" centre, bouton EQUIPE a gauche,
            bouton PARTENAIRE a droite
   ===================================================================== */
.team__header {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas: "btn-left title btn-right" !important;
  width: 100% !important;
  align-items: center !important;
}

.team__header > .team__equipe-btn {
  grid-area: btn-left !important;
  justify-self: start !important;
  position: relative !important;
}

.team__header > .team__partners-btn {
  grid-area: btn-right !important;
  justify-self: end !important;
  position: relative !important;
}

/* Bouton "equipe" (a gauche) : pastille + fleche vers la gauche,
   exactement comme le bouton "services" de la section communaute. */
.team__equipe-btn .btn-cta__icon {
  right: auto !important;
  left: 4px !important;
}

.team__equipe-btn .btn-cta__icon svg {
  transform: scaleX(-1);
}

.team__header > .section-title {
  grid-area: title !important;
  justify-self: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 720px) {
  .team__header {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "btn-left btn-right"
      "title title" !important;
    row-gap: clamp(10px, 2vw, 16px) !important;
  }

  .team__header > .team__equipe-btn,
  .team__header > .team__partners-btn {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
  }

  .team__header > .team__equipe-btn { justify-self: start !important; }
  .team__header > .team__partners-btn { justify-self: end !important; }
}

/* ============================================================
   DERNIERS ARTICLES — ENTREE DEPUIS LES BORDS DU CONTENEUR
   "COMMUNAUTE & SERVICES" QUI SE REFERME
   Les 3 cartes du haut descendent depuis le bord superieur du
   conteneur qui retrecit, les 3 cartes du bas remontent depuis
   son bord inferieur. Les cartes restent pleinement opaques :
   aucun fondu n'est applique, seul le deplacement les fait
   apparaitre au fil du retrecissement du conteneur.
   ============================================================ */

@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .actu-section .actu__grid > .actu-card {
    translate: var(--shift-x, 0px) var(--shift, 0px);
    opacity: 1;
    transition: none !important;
    will-change: translate;
  }
}

/* ============================================================
   PATCH — CONTENEURS "COMMUNAUTE & SERVICES" 100% OPAQUES
   Les 4 blocs (cartes + prochains evenements) avaient un fond
   semi-transparent (rgba .85 + blur) : pendant l'animation
   inverse, les articles "Dernieres news" se voyaient par
   transparence a travers eux. On force un fond plein.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .events__inner > .events__merge > .events__grid > .event-card,
  .events-section > .events__inner > .events__merge > .upcoming {
    background: #061028 !important;
    background-color: #061028 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Le conteneur unifie recree par-dessus reste lui aussi plein. */
  .events-section > .events__inner > .events__merge::after {
    background: #061028 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Le wrapper des 4 blocs porte un fond plein tant que la fusion
     est en cours, pour boucher les interstices entre les blocs. */
  .events-section > .events__inner > .events__merge > .events__grid {
    background: transparent;
  }
}

/* ============================================================
   PATCH V10 — HOVER
   1. Aucun effet hover sur les cartes "Tournois communautaires",
      "Coaching pro" et "Programme partenaires".
   2. "Prochains evenements" : hover stable (plus de clignotement),
      uniquement un changement de couleur, sans transition.
   ============================================================ */

/* 1. Cartes Communaute & Services : hover totalement neutralise */
.event-card,
.event-card:hover,
.event-card:focus-within {
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

.event-card:hover {
  outline-color: var(--border) !important;
}

.event-card:hover::after {
  opacity: 0 !important;
}

.event-card:hover .event-card__bg-icon,
.event-card:focus-within .event-card__bg-icon {
  opacity: inherit;
  transform: none !important;
  filter: none !important;
}

/* Le lien "En savoir plus" garde son propre survol texte : rien a changer. */

/* 2. Prochains evenements : plus de clignotement.
      - aucune transition (le fond change instantanement)
      - aucune modification de geometrie (pas de scale/translate/ombre)
      donc le survol ne peut plus se re-declencher en boucle. */
.upcoming__list .upcoming__item,
.upcoming__list .upcoming__item:hover {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: auto !important;
  will-change: auto !important;
}

.upcoming__list .upcoming__item:hover {
  background-color: rgba(94, 170, 255, 0.04) !important;
}

/* ─── Prochains evenements : descriptions alignees automatiquement ───
   La liste devient une grille : la colonne "titre + badge" prend la largeur
   du titre LE PLUS LONG de la liste (max-content partage entre les lignes).
   Les descriptions demarrent donc toutes au meme endroit, au plus pres des
   titres, et s'adaptent automatiquement quand les evenements changent. */
@media (min-width: 1300px) {
  .upcoming__list {
    display: grid;
    grid-template-columns:
      max-content   /* date */
      max-content   /* icone du jeu */
      max-content   /* titre + badge */
      minmax(0, 1fr)/* description */
      max-content   /* compte a rebours */
      max-content   /* bouton concept */
      max-content;  /* bouton rejoindre */
    column-gap: clamp(8px, 1.4vw, 20px);
  }
  .upcoming__list .upcoming__item {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
  }
  .upcoming__list .upcoming__item .upcoming__info {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
  }
  .upcoming__list .upcoming__item .upcoming__desc {
    margin-left: 0 !important;
    padding-left: clamp(10px, 1.4vw, 18px);
  }
}

/* ============================================================
   PATCH V11 — COMMUNAUTE & SERVICES : FERMETURE VERTICALE
   Le conteneur unifie ne se referme plus en losange/scale :
   son bord HAUT descend et son bord BAS remonte jusqu'a la
   fermeture complete. Les angles coupes restent a 45 deg
   (longueur de coupe constante, simplement bornee par la
   hauteur restante) et le fond se referme exactement pareil.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  /* Progression unique de la fermeture verticale. */
  .events-pin,
  .events-section > .events__inner {
    --vclose: clamp(0, var(--collapse, 0), 1);
  }

  .events-section > .community-bg,
  .events-section > .events__inner > .events__merge {
    /* Aucun retrait horizontal : la fermeture est purement verticale. */
    --ix: 0px !important;
    --iy: calc(var(--bh) / 2 * var(--vclose, 0)) !important;
    /* Coupe identique sur X et Y (45 deg), bornee par la hauteur restante. */
    --c: min(var(--corner-cut), calc(var(--bh) / 2 - var(--iy))) !important;
  }

  /* ── Fond : meme fermeture verticale, sans scale ni retrait de cadre ── */
  .events-section > .community-bg {
    --bh: 100vh;
    --bw: 100vw;
    inset: 0 !important;
    transform: none !important;
  }

  /* ── Conteneur unifie : plus de mise a l'echelle ── */
  .events-section > .events__inner > .events__merge,
  .events-pin > .events-section > .events__inner > .events__merge {
    --bh: var(--merge-h, clamp(320px, 46vh, 620px));
    --bw: var(--merge-w, calc(100vw - 2 * var(--page-pad)));
    transform:
      translate3d(0, calc(-0.5 * (var(--header-h, 0px) + clamp(28px, 4vw, 64px)) * var(--merge, 0)), 0)
      !important;
  }
}

/* ============================================================
   PATCH V12 — FERMETURE TOTALE + ARTICLES SYNCHRONISES
   1. Le conteneur disparaissait en laissant une ligne fine de 1px :
      la fermeture verticale depasse maintenant legerement la moitie
      de la hauteur et le bloc est masque a la fin de la course.
   2. Les articles ne sont visibles qu'a partir du moment ou le
      conteneur commence reellement a se refermer.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-section > .community-bg,
  .events-section > .events__inner > .events__merge {
    /* +2px de marge : plus aucun residu de ligne a la fermeture. */
    --iy: calc((var(--bh) / 2 + 2px) * var(--vclose, 0)) !important;
  }

  /* Securite : au terme de la course, le bloc est totalement retire. */
  .events-section > .events__inner > .events__merge {
    opacity: clamp(0, calc((1 - var(--collapse, 0)) * 40), 1) !important;
  }
  .events-pin[data-collapsed="1"] > .events-section > .events__inner > .events__merge,
  .events-pin[data-collapsed="1"] > .events-section > .community-bg {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Les 6 articles restent invisibles tant que rien n'a bouge. */
  .events-section > .actu-section .actu__grid > .actu-card {
    opacity: var(--fade, 0) !important;
  }
}

/* ============================================================
   PATCH V13 — FERMETURE : ANGLES QUI SE REDRESSENT + FOND QUI BLANCHIT
   1. Pendant que le conteneur se retrecit au scroll, les angles coupes
      se reduisent progressivement jusqu'a redevenir des angles droits.
      (idem pour le fond de la section, meme progression)
   2. En parallele, le conteneur et son fond virent progressivement
      au blanc, au meme rythme que la fermeture.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  /* ── 1. Les angles coupes se redressent au fur et a mesure ── */
  .events-section > .community-bg,
  .events-section > .events__inner > .events__merge {
    --c: min(
      calc(var(--corner-cut) * (1 - var(--vclose, 0))),
      calc(var(--bh) / 2 - var(--iy))
    ) !important;
  }

  /* La silhouette "habillage" du conteneur unifie suit la meme coupe. */
  .events-section > .events__inner > .events__merge::after {
    clip-path: polygon(
      calc(var(--ix) + var(--c)) var(--iy),
      calc(100% - var(--ix) - var(--c)) var(--iy),
      calc(100% - var(--ix)) calc(var(--iy) + var(--c)),
      calc(100% - var(--ix)) calc(100% - var(--iy) - var(--c)),
      calc(100% - var(--ix) - var(--c)) calc(100% - var(--iy)),
      calc(var(--ix) + var(--c)) calc(100% - var(--iy)),
      var(--ix) calc(100% - var(--iy) - var(--c)),
      var(--ix) calc(var(--iy) + var(--c))
    ) !important;
    -webkit-clip-path: polygon(
      calc(var(--ix) + var(--c)) var(--iy),
      calc(100% - var(--ix) - var(--c)) var(--iy),
      calc(100% - var(--ix)) calc(var(--iy) + var(--c)),
      calc(100% - var(--ix)) calc(100% - var(--iy) - var(--c)),
      calc(100% - var(--ix) - var(--c)) calc(100% - var(--iy)),
      calc(var(--ix) + var(--c)) calc(100% - var(--iy)),
      var(--ix) calc(100% - var(--iy) - var(--c)),
      var(--ix) calc(var(--iy) + var(--c))
    ) !important;
    /* ── 2a. Le conteneur unifie blanchit progressivement ── */
    background: color-mix(in srgb, #ffffff calc(var(--vclose, 0) * 100%), #061028) !important;
  }

  /* Les blocs internes suivent la meme teinte pour eviter tout aplat sombre. */
  .events-section > .events__inner > .events__merge > .events__grid > .event-card,
  .events-section > .events__inner > .events__merge > .upcoming {
    background: color-mix(in srgb, #ffffff calc(var(--vclose, 0) * 100%), #061028) !important;
    background-color: color-mix(in srgb, #ffffff calc(var(--vclose, 0) * 100%), #061028) !important;
  }

  /* ── 2b. Le fond de la section blanchit exactement au meme rythme ── */
  .events-section > .community-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: #ffffff;
    opacity: var(--vclose, 0);
  }
}

/* ============================================================
   PATCH V14 — FERMETURE : TRAIT FIN + DISSIPATION (SANS BLANC)
   1. Plus de blanc : la fermeture vire vers un bleu du theme
      (accent) suffisamment marque mais non agressif.
   2. En fin de course le conteneur devient un trait fin
      lumineux qui se dissipe (flou + fondu + etirement).
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-pin,
  .events-section > .events__inner {
    /* Teinte de fermeture, issue du theme */
    --close-tint: #2f7fd6;
    --close-glow: #5eaaff;
    /* Phase finale (derniers 18% de la course) : trait + dissipation */
    --vline: clamp(0, calc((var(--vclose, 0) - 0.82) / 0.18), 1);
  }

  /* ── 1. Fin de course : on laisse un trait fin (2px) au lieu de fermer a 0 ── */
  .events-section > .community-bg,
  .events-section > .events__inner > .events__merge {
    --iy: calc((var(--bh) / 2 - 1px) * var(--vclose, 0)) !important;
  }

  /* ── 2. Couleur : bleu du theme au lieu du blanc ── */
  .events-section > .events__inner > .events__merge::after {
    background: color-mix(
      in srgb,
      var(--close-tint, #2f7fd6) calc(var(--vclose, 0) * 88%),
      #061028
    ) !important;
    box-shadow:
      0 0 calc(28px * var(--vline, 0)) calc(2px * var(--vline, 0))
        color-mix(in srgb, var(--close-glow, #5eaaff) 70%, transparent),
      0 0 calc(80px * var(--vline, 0)) rgba(94, 170, 255, 0.35) !important;
  }

  .events-section > .events__inner > .events__merge > .events__grid > .event-card,
  .events-section > .events__inner > .events__merge > .upcoming {
    background: color-mix(
      in srgb,
      var(--close-tint, #2f7fd6) calc(var(--vclose, 0) * 88%),
      #061028
    ) !important;
    background-color: color-mix(
      in srgb,
      var(--close-tint, #2f7fd6) calc(var(--vclose, 0) * 88%),
      #061028
    ) !important;
  }

  /* ── 3. Dissipation du trait : flou + etirement + fondu ── */
  .events-section > .events__inner > .events__merge {
    opacity: calc(1 - var(--vline, 0) * var(--vline, 0)) !important;
    filter: blur(calc(6px * var(--vline, 0)))
            saturate(calc(1 + 0.6 * var(--vline, 0))) !important;
    will-change: opacity, filter;
  }
  .events-section > .events__inner > .events__merge > .events__grid,
  .events-section > .events__inner > .events__merge > .upcoming {
    transform: scaleX(calc(1 + 0.03 * var(--vline, 0)));
    transform-origin: 50% 50%;
  }

  /* ── 4. Fond de section : voile bleu discret, qui se dissipe aussi ── */
  .events-section > .community-bg::after {
    background: radial-gradient(
      120% 60% at 50% 50%,
      color-mix(in srgb, var(--close-glow, #5eaaff) 40%, transparent) 0%,
      color-mix(in srgb, var(--close-tint, #2f7fd6) 18%, transparent) 45%,
      transparent 78%
    ) !important;
    opacity: calc(var(--vclose, 0) * (1 - 0.75 * var(--vline, 0)) * 0.85) !important;
  }
}

/* ============================================================
   BTN-CTA (accueil) — libelle place entre la fleche et la bordure
   opposee, plus de fondu au survol : la pastille (opaque) passe
   PAR-DESSUS le texte, le texte passe dessous.
   ============================================================ */
.btn-cta {
  /* zone reservee a la pastille : 4px de marge + 32px mini de largeur */
  --cta-icon-zone: 36px;
  --cta-side-pad: clamp(18px, 2vw, 28px);
  /* fleche a DROITE par defaut : padding droit = pastille + espace identique a gauche */
  padding-left: var(--cta-side-pad) !important;
  padding-right: calc(var(--cta-icon-zone) + var(--cta-side-pad)) !important;
}

/* fleche a GAUCHE (equipe, services) : on inverse */
.team__equipe-btn,
.events__services-btn {
  padding-left: calc(var(--cta-icon-zone) + var(--cta-side-pad)) !important;
  padding-right: var(--cta-side-pad) !important;
}

/* le libelle n'a plus de marge : il est centre dans l'espace restant */
.btn-cta .btn-cta__label {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  opacity: 1 !important;
  transition: none !important;
}
.btn-cta:hover .btn-cta__label,
.btn-cta:focus-visible .btn-cta__label,
.btn-cta:active .btn-cta__label {
  opacity: 1 !important;
}

/* la pastille est OPAQUE (meme teinte visuelle qu'avant) et au-dessus du texte */
.btn-cta .btn-cta__icon {
  z-index: 10;
  background: #5296dc; /* = accent #5eaaff assombri de 15% (fallback) */
}
@supports (color: color-mix(in srgb, #000, #fff)) {
  .btn-cta .btn-cta__icon {
    background: color-mix(in srgb, #040e1e 15%, var(--accent));
  }
}


/* ============================================================
   FIX — la pente de "Notre roster" ne recouvre plus le contenu de
   "Communaute & Services" (titre, boutons) sur tous les formats.
   Le fond de la communaute continue de remplir le triangle sous la
   pente (le decalage negatif est conserve), mais le CONTENU demarre
   toujours sous la pente.
   ============================================================ */
@media (min-width: 0px) { /* anim: tous formats */
  .events-pin > .events-section.community-perspective {
    padding-top: var(--team-slope) !important;
    padding-bottom: calc(var(--team-slope) / 2) !important;
    box-sizing: border-box;
  }
  /* Centrage "sur" : jamais rogne en haut si l'ecran est bas. */
  .events-pin > .events-section > .events__inner {
    margin-block: auto !important;
  }

  /* Course d'ancrage reduite : 1.25 ecran de scroll, entierement utilise
     (fusion puis fermeture), au lieu de 2 ecrans avec des temps morts. */
  .events-pin {
    height: 225vh !important;
  }
}



/* ============================================================
   ANIMATION ANCREE SUR TOUS LES FORMATS (PC / tablette / mobile)
   - le fond prend tout l'ecran, les 4 conteneurs sont centres,
     puis fusionnent et se referment pour laisser place aux articles ;
   - les boutons ne passent JAMAIS par-dessus les conteneurs.
   ============================================================ */
.events-pin {
  height: 225vh !important;
  position: relative;
}
.events-pin > .events-section.community-perspective {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding-top: var(--team-slope) !important;
  padding-bottom: calc(var(--team-slope) / 2) !important;
}
.events-pin > .events-section > .events__inner {
  --f: var(--fit-ev, 1);
  --pad-x: var(--page-pad);
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin-block: auto !important;
  /* Ajustement automatique : si le contenu depasse l'ecran (petits
     telephones), il est reduit juste ce qu'il faut pour rester centre.
     La boite est elargie de 1/f puis reduite de f : les MARGES DE PAGE
     visuelles restent exactement celles des autres sections. */
  width: calc(100% / var(--f)) !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  /* Contenu qui tient : les marges auto le centrent. Contenu reduit : la
     boite (plus haute que l'ecran) part du haut et, reduite depuis son bord
     superieur, occupe exactement la hauteur disponible. */
  align-self: flex-start !important;
  margin-left: calc((100% - 100% / var(--f)) / 2) !important;
  margin-right: 0 !important;
  padding-left: calc(var(--pad-x) / var(--f)) !important;
  padding-right: calc(var(--pad-x) / var(--f)) !important;
  transform: scale(var(--f));
  transform-origin: 50% 0;
}
.events-pin > .events-section > .actu-section {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.events-pin > .events-section > .actu-section > .actu__inner {
  --f: var(--fit-actu, 1);
  --pad-x: var(--page-pad);
  /* Le titre "Derniers articles" reprend exactement la place du titre
     "Rejoins ..." (offset mesure), sur tous les formats. */
  padding-top: calc(var(--actu-top, 0px) / var(--f)) !important;
  height: calc(100% / var(--f)) !important;
  width: calc(100% / var(--f)) !important;
  max-width: none !important;
  margin-left: calc((100% - 100% / var(--f)) / 2) !important;
  padding-left: calc(var(--pad-x) / var(--f)) !important;
  padding-right: calc(var(--pad-x) / var(--f)) !important;
  box-sizing: border-box !important;
  transform: scale(var(--f));
  transform-origin: 50% 0;
}
.events-pin > .events-section > .actu-section .actu__grid {
  left: calc(var(--pad-x) / var(--f)) !important;
  right: calc(var(--pad-x) / var(--f)) !important;
}
/* Meme marge de page que les autres sections sur tous les formats. */
@media (max-width: 600px) {
  .events-pin > .events-section > .events__inner,
  .events-pin > .events-section > .actu-section > .actu__inner {
    --pad-x: clamp(12px, 4vw, 18px);
  }
}

@media (max-width: 1000px) {
  /* La navbar est fixe (~84px) : le contenu ancre demarre en dessous. */
  .events-pin > .events-section.community-perspective {
    padding-top: max(var(--team-slope), 100px) !important;
    padding-bottom: clamp(16px, 4vw, 40px) !important;
  }
  /* Grille compacte pour tenir dans un ecran ancre */
  .events-pin .events__grid {
    gap: calc(12px * (1 - var(--merge, 0))) !important;
    margin-bottom: 0 !important;
  }
  .events-pin .events__grid > .event-card {
    min-height: 0 !important;
    padding: clamp(14px, 3vw, 22px) !important;
  }
  .events-pin .event-card__tags { display: none !important; }
  .events-pin .events-section > .events__inner { gap: calc(clamp(14px, 2.5vw, 24px) * (1 - var(--merge, 0))) !important; }

  /* En-tete : boutons sur une rangee, titre en dessous, rien ne se superpose */
  .events-pin > .events-section > .events__inner > .events__header {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "btn-left btn-right" "title title" !important;
    row-gap: clamp(10px, 2vw, 18px) !important;
    margin-bottom: clamp(16px, 3vw, 28px) !important;
    min-height: 0 !important;
  }
  .events-pin > .events-section > .events__inner > .events__header > .section-title {
    grid-area: title !important;
    position: relative !important;
    left: auto !important; right: auto !important; top: auto !important;
    width: auto !important;
    justify-self: center !important;
    text-align: center !important;
    transform: translate3d(0, calc(-1 * var(--hx, 0) * 150%), 0) !important;
  }
  .events-pin > .events-section > .events__inner > .events__header > .events__services-btn,
  .events-pin > .events-section > .events__inner > .events__header > .events__community-btn,
  .events-pin > .events-section > .actu-section .actu__header > .btn-cta {
    position: relative !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }
  .events-pin > .events-section > .events__inner > .events__header > .events__community-btn { justify-self: end !important; }
  .events-pin > .events-section > .events__inner > .events__header > .events__services-btn {
    transform: translate3d(calc(-1 * var(--hx, 0) * 120vw), 0, 0) !important;
  }
  .events-pin > .events-section > .events__inner > .events__header > .events__community-btn {
    transform: translate3d(calc(var(--hx, 0) * 120vw), 0, 0) !important;
  }

  /* Articles : 2 colonnes compactes dans l'ecran ancre */
  .events-pin > .events-section > .actu-section .actu__header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title btn" !important;
    align-items: center !important;
    min-height: 0 !important;
    margin-bottom: clamp(16px, 3vw, 28px) !important;
  }
  .events-pin > .events-section > .actu-section .actu__header > .section-title {
    position: relative !important;
    left: auto !important; right: auto !important; top: auto !important;
    width: auto !important;
    text-align: left !important;
    transform: translate3d(0, calc(-1 * (1 - var(--ain, 1)) * 150%), 0) !important;
  }
  .events-pin > .events-section > .actu-section .actu__header > .btn-cta { justify-self: end !important; }
  .events-pin .actu-section .actu__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(10px, 2vw, 16px) !important;
  }
  .events-pin .actu-section .actu__grid > .actu-card { min-height: 0 !important; }
}
@media (max-width: 600px) {
  .events-pin .events__grid { grid-template-columns: 1fr 1fr !important; }
  .events-pin .events__grid > .event-card:nth-child(3) { grid-column: 1 / -1 !important; }
  .events-pin .event-card__desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}


/* ============================================================
   MOBILE (<=600px) — boutons en bas de la section ancree
   ============================================================ */
@media (max-width: 600px) {
  .events-pin > .events-section.community-perspective {
    padding-bottom: 0 !important;
  }
  .events-pin > .events-section > .events__inner,
  .events-pin > .events-section > .actu-section > .actu__inner {
    --btn-zone: 74px;   /* hauteur reservee aux boutons en bas */
    position: relative !important;
    height: calc(100% / var(--f)) !important;
    padding-bottom: calc(var(--btn-zone) / var(--f)) !important;
    box-sizing: border-box !important;
    margin-block: 0 !important;
    align-self: flex-start !important;
    transform-origin: 50% 0 !important;
  }
  /* Le contenu (titre + conteneurs) reste centre dans la zone restante. */
  .events-pin > .events-section > .events__inner > .events__header {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" !important;
    margin-bottom: clamp(14px, 3vw, 24px) !important;
  }
  .events-pin > .events-section > .events__inner > .events__header > .events__services-btn,
  .events-pin > .events-section > .events__inner > .events__header > .events__community-btn,
  .events-pin > .events-section > .actu-section .actu__header > .btn-cta {
    position: absolute !important;
    bottom: calc(18px / var(--f)) !important;
    top: auto !important;
    width: calc(50% - var(--pad-x) / var(--f) - 6px) !important;
    max-width: none !important;
    justify-content: center !important;
    margin: 0 !important;
    z-index: 5 !important;
  }
  .events-pin > .events-section > .events__inner > .events__header > .events__services-btn {
    left: calc(var(--pad-x) / var(--f)) !important;
    right: auto !important;
    transform: translate3d(calc(-1 * var(--hx, 0) * 120vw), 0, 0) !important;
  }
  .events-pin > .events-section > .events__inner > .events__header > .events__community-btn,
  .events-pin > .events-section > .actu-section .actu__header > .btn-cta {
    right: calc(var(--pad-x) / var(--f)) !important;
    left: auto !important;
  }
  .events-pin > .events-section > .events__inner > .events__header > .events__community-btn {
    transform: translate3d(calc(var(--hx, 0) * 120vw), 0, 0) !important;
  }
  .events-pin > .events-section > .actu-section .actu__header > .btn-cta {
    transform: translate3d(calc((1 - var(--ain, 1)) * 120vw), 0, 0) !important;
  }
  /* Le bloc articles se place sous le titre (plus de centrage a 50 %
     qui chevauchait l'en-tete) ; la hauteur est ajustee par --fit-actu. */
  .events-pin > .events-section > .actu-section .actu__header {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    margin: 0 !important;
    left: auto !important; right: auto !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   MOBILE (<=600px) — "Notre roster" : boutons EQUIPE / PARTENAIRE
   cote a cote en bas de la section, dans les marges de page
   (repare le conflit entre deux anciens patchs qui faisait deborder
   les boutons a droite du titre).
   ============================================================ */
@media (max-width: 600px) {
  .team-section {
    padding-bottom: calc(var(--team-slope) + 96px) !important;
  }
  .team__header {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" !important;
  }
  .team__header > .team__equipe-btn,
  .team__header > .team__partners-btn {
    position: absolute !important;
    top: auto !important;
    bottom: calc(-1 * (var(--team-slope) + 96px) + var(--team-slope) + 24px) !important;
    width: calc(50% - clamp(12px, 4vw, 18px) - 6px) !important;
    max-width: none !important;
    margin: 0 !important;
    justify-content: center !important;
    z-index: 6 !important;
  }
  .team__header > .team__equipe-btn { left: clamp(12px, 4vw, 18px) !important; right: auto !important; }
  .team__header > .team__partners-btn { right: clamp(12px, 4vw, 18px) !important; left: auto !important; }
}


/* Tablette (<=1300px) : la navbar fixe est plus haute, le contenu ancre
   (et le titre "Derniers articles") demarre toujours en dessous. */
@media (max-width: 1300px) {
  .events-pin > .events-section.community-perspective {
    padding-top: max(var(--team-slope), 100px) !important;
  }
}


/* ============================================================
   BOUTONS JAMAIS REDUITS — quand la section est mise a l'echelle pour
   tenir dans l'ecran (tablette / PC bas), les boutons compensent
   exactement (1 / f) : meme taille que les boutons du roster.
   ============================================================ */
@media (min-width: 601px) {
  .events-pin > .events-section > .events__inner > .events__header > .events__services-btn {
    transform: translate3d(calc(-1 * var(--hx, 0) * 62vw), 0, 0) scale(calc(1 / var(--f, 1))) !important;
    transform-origin: 0% 50% !important;
  }
  .events-pin > .events-section > .events__inner > .events__header > .events__community-btn {
    transform: translate3d(calc(var(--hx, 0) * 62vw), 0, 0) scale(calc(1 / var(--f, 1))) !important;
    transform-origin: 100% 50% !important;
  }
  .events-pin > .events-section > .actu-section .actu__header > .btn-cta {
    transform: translate3d(calc((1 - var(--ain, 1)) * 62vw), 0, 0) scale(calc(1 / var(--f, 1))) !important;
    transform-origin: 100% 50% !important;
  }
}

/* ============================================================
   MOBILE (<=600px) — AUCUNE mise a l'echelle. Une "scene" commune :
   les conteneurs de la communaute remplissent exactement la zone
   entre le titre et les boutons ; les articles apparaissent au CENTRE
   de cette meme zone (meme boite, meme hauteur), pas en bas.
   ============================================================ */
@media (max-width: 600px) {
  .events-pin > .events-section > .events__inner,
  .events-pin > .events-section > .actu-section > .actu__inner {
    --f: 1 !important;
    transform: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: var(--pad-x) !important;
    padding-right: var(--pad-x) !important;
    height: 100% !important;
    padding-bottom: var(--btn-zone) !important;
    justify-content: flex-start !important;
  }
  /* En-tete : titre centre, meme hauteur et meme marge pour les deux titres */
  .events-pin > .events-section > .events__inner > .events__header,
  .events-pin > .events-section > .actu-section .actu__header {
    min-height: var(--header-h, auto) !important;
    margin-bottom: clamp(16px, 4vw, 26px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" !important;
    align-items: center !important;
  }
  .events-pin > .events-section > .actu-section .actu__header > .section-title {
    justify-self: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  /* Scene : le bloc unifie occupe toute la hauteur disponible */
  .events-pin > .events-section > .events__inner > .events__merge {
    height: var(--stage-h, auto) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .events-pin > .events-section > .events__inner > .events__merge > .events__grid {
    overflow: hidden !important;
  }
  .events-pin > .events-section > .events__inner > .events__merge > .events__grid > .event-card > .event-card__desc {
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .events-pin > .events-section > .events__inner > .events__merge > .events__grid > .event-card > .event-card__link {
    position: static !important;
    margin-top: 0 !important;
  }
  .events-pin > .events-section > .events__inner > .events__merge > .events__grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    align-content: stretch !important;
  }
  .events-pin > .events-section > .events__inner > .events__merge > .events__grid > .event-card {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    padding: clamp(14px, 3.5vw, 22px) !important;
  }
  .events-pin > .events-section > .events__inner > .events__merge > .events__grid > .event-card:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
  .events-pin > .events-section > .events__inner > .events__merge > .upcoming {
    flex: 0 0 auto !important;
    max-height: 42% !important;
    overflow: hidden !important;
  }
  /* Articles : meme boite que le bloc unifie, contenu centre dedans */
  .events-pin > .events-section > .actu-section .actu__grid {
    position: relative !important;
    height: var(--stage-h, auto) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: clamp(10px, 2.5vw, 14px) !important;
    align-content: center !important;
    overflow: hidden !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid > .actu-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid > .actu-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid > .actu-card:first-child {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid > .actu-card .actu-card__img-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    height: auto !important;
    overflow: hidden !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid > .actu-card .actu-card__photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid > .actu-card .actu-card__body {
    flex: 0 0 auto !important;
    padding: clamp(8px, 2.4vw, 12px) !important;
    gap: 4px !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid > .actu-card .actu-card__excerpt {
    display: none !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid > .actu-card .actu-card__title {
    font-size: clamp(13px, 3.6vw, 16px) !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .events-pin > .events-section > .actu-section .actu__grid > .actu-card:nth-child(n + 4) {
    display: none !important;
  }
}

/* PATCH: menu scroll-lock + responsive rotated roster */
/* Keep the fan/rotation, but constrain card anchors so the composition cannot
   clip managers or create horizontal overflow at intermediate widths. */
@media (min-width: 601px) and (max-width: 1300px) {
  .team__content { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 52px); }
  .team__composition {
    width: min(100%, 860px);
    max-width: 860px;
    aspect-ratio: 5 / 3.05;
    overflow: visible;
  }
  .roster-card--player { width: 24%; }
  .roster-card--manager { width: 18%; }
  .roster-card--p1 { top: 8%; left: 0%; bottom: auto; transform: rotate(-6deg); }
  .roster-card--p2 { top: 2%; left: 19%; bottom: auto; transform: rotate(2deg); }
  .roster-card--p3 { top: 8%; left: 38%; right: auto; bottom: auto; transform: rotate(7deg); }
  .roster-card--m1 { bottom: 0%; left: 61%; top: auto; transform: rotate(-4deg); }
  .roster-card--m2 { bottom: 9%; left: 80%; right: auto; top: auto; transform: rotate(6deg); }
}

@media (max-width: 600px) {
  .team__content { grid-template-columns: 1fr; gap: clamp(24px, 7vw, 42px); }
  .team__composition {
    width: min(100%, 560px);
    max-width: 560px;
    aspect-ratio: 5 / 3.75;
    overflow: visible;
  }
  /* Three rotated player cards remain the visual front row. */
  .roster-card--player { width: 30%; }
  .roster-card--p1 { top: 7%; left: 3%; right: auto; bottom: auto; transform: rotate(-7deg); }
  .roster-card--p2 { top: 1%; left: 35%; right: auto; bottom: auto; transform: rotate(3deg); }
  .roster-card--p3 { top: 7%; left: 67%; right: auto; bottom: auto; transform: rotate(8deg); }
  .roster-card--manager { width: 23%; }
  .roster-card--m1 { bottom: 1%; left: 17%; right: auto; top: auto; transform: rotate(-5deg); }
  .roster-card--m2 { bottom: 0; left: 60%; right: auto; top: auto; transform: rotate(6deg); }
  .roster-card__tag { padding: 3px 7px; letter-spacing: .11em; }
}

/* RESPONSIVE SCENE CORRECTION — <=1300px only */
/* IDs intentionally scope the reset above the old layered patches. */
#eventsPin[data-flow="responsive"] {
  --merge: 0 !important; --collapse: 0 !important;
  height: var(--r-pin-h) !important;
  overflow: visible !important;
}
#eventsPin[data-flow="responsive"] > #events {
  position: sticky !important; top: var(--r-stick, 0px) !important;
  height: var(--r-section-h, 100svh) !important; min-height: 0 !important;
  width: 100% !important; padding: 0 !important; margin: 0 !important;
  display: block !important; overflow: clip !important;
  background: #071a40 !important;
  --merge: 0 !important; --collapse: 0 !important;
}
#eventsPin[data-flow="responsive"] #events > .community-bg {
  position: absolute !important; inset: 0 !important; height: 100% !important;
  transform: none !important; clip-path: none !important; -webkit-clip-path: none !important;
  visibility: visible !important; opacity: calc(1 - var(--r-close, 0)) !important;
  background-attachment: scroll !important; filter: none !important; will-change: auto !important;
}
#eventsPin[data-flow="responsive"] #events > .community-bg::before,
#eventsPin[data-flow="responsive"] #events > .community-bg::after,
#eventsPin[data-flow="responsive"] #events::after { display: none !important; }
#eventsPin[data-flow="responsive"] #events > .events__inner,
#eventsPin[data-flow="responsive"] #actu,
#eventsPin[data-flow="responsive"] #actu > .actu__inner {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; max-width: none !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important; transform: none !important;
  display: block !important; overflow: visible !important; gap: 0 !important;
  --f: 1 !important; --merge: 0 !important; --collapse: 0 !important;
}
#eventsPin[data-flow="responsive"] #events > .events__inner { z-index: 3 !important; pointer-events: none; }
#eventsPin[data-flow="responsive"] #actu { z-index: 2 !important; background: transparent !important; pointer-events: none !important; }
#eventsPin[data-flow="responsive"] #actu::before,
#eventsPin[data-flow="responsive"] #actu > .actu__lines-bg { display: none !important; }
#eventsPin[data-flow="responsive"] .events__header,
#eventsPin[data-flow="responsive"] .actu__header {
  position: static !important; display: contents !important; transform: none !important;
  opacity: 1 !important; transition: none !important;
}
#eventsPin[data-flow="responsive"] .events__header > .section-title,
#eventsPin[data-flow="responsive"] .actu__header > .section-title {
  position: absolute !important; left: var(--r-pad) !important; right: var(--r-pad) !important;
  top: var(--r-title-y, 100px) !important; width: auto !important; max-width: none !important;
  height: var(--r-title-h, 64px) !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  text-align: center !important; transform: none !important;
  font-size: var(--r-title-size, clamp(28px, 3.3vw, 50px)) !important; line-height: 1.12 !important;
  pointer-events: none !important; transition: none !important;
}
#eventsPin[data-flow="responsive"] .events__header > .section-title { opacity: calc(1 - var(--r-merge, 0)) !important; }
#eventsPin[data-flow="responsive"] .actu__header > .section-title { opacity: var(--r-news, 0) !important; }
#eventsPin[data-flow="responsive"] .section-title em,
#eventsPin[data-flow="responsive"] .section-title span { font-size: inherit !important; }
#eventsPin[data-flow="responsive"] .events__header > .btn-cta,
#eventsPin[data-flow="responsive"] .actu__header > .btn-cta {
  position: absolute !important; top: var(--r-buttons-y) !important; bottom: auto !important;
  left: auto !important; right: var(--r-pad) !important; width: auto !important;
  max-width: none !important; margin: 0 !important;
  transform: none !important; scale: none !important;
  transition: none !important; pointer-events: auto;
}
#eventsPin[data-flow="responsive"] .events__header > .events__services-btn { left: var(--r-pad) !important; right: auto !important; }
#eventsPin[data-flow="responsive"] .events__header > .btn-cta { opacity: calc(1 - var(--r-merge, 0)) !important; }
#eventsPin[data-flow="responsive"] .actu__header > .btn-cta { opacity: var(--r-news, 0) !important; }
#eventsPin[data-flow="responsive"] .events__merge,
#eventsPin[data-flow="responsive"] #actu .actu__grid {
  position: absolute !important; left: var(--r-pad) !important; right: var(--r-pad) !important;
  top: var(--r-stage-y, 200px) !important; width: auto !important; max-width: none !important;
  height: var(--r-stage-h, auto) !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; transform: none !important;
  filter: none !important; visibility: visible !important; overflow: visible !important;
  transition: none !important;
}
#eventsPin[data-flow="responsive"] .events__merge {
  display: flex !important; flex-direction: column !important;
  gap: calc(var(--r-gap) * (1 - var(--r-merge, 0))) !important;
  clip-path: inset(calc(var(--r-close, 0) * 50%) 0) !important;
  -webkit-clip-path: inset(calc(var(--r-close, 0) * 50%) 0) !important;
  opacity: calc(1 - var(--r-finished, 0)) !important;
  background: transparent !important; will-change: auto !important;
}
#eventsPin[data-flow="responsive"] .events__merge::after {
  inset: 0 !important; transform: none !important; filter: none !important;
  clip-path: none !important; -webkit-clip-path: none !important;
  background: #061028 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  opacity: clamp(0, calc((var(--r-merge, 0) - .8) * 5), 1) !important;
}
#eventsPin[data-flow="responsive"] .events__grid {
  display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-rows: minmax(var(--r-row1, 180px), 1fr) minmax(var(--r-row2, 150px), .8fr) !important;
  gap: calc(var(--r-gap) * (1 - var(--r-merge, 0))) !important;
  flex: 1 0 auto !important; min-height: 0 !important; height: auto !important;
  margin: 0 !important; padding: 0 !important; width: 100% !important;
  overflow: visible !important; background: transparent !important;
}
#eventsPin[data-flow="responsive"] .events__grid > .event-card,
#eventsPin[data-flow="responsive"] .events__merge > .upcoming {
  transform: none !important; transition: none !important; opacity: 1 !important;
  filter: none !important; box-shadow: none !important; outline: none !important;
  background: #061028 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  margin: 0 !important; overflow: hidden !important;
  padding: clamp(14px, 2vw, 24px) !important;
  pointer-events: auto;
}
#eventsPin[data-flow="responsive"] .events__grid > .event-card:nth-child(3) { grid-column: 1 / -1 !important; }
#eventsPin[data-flow="responsive"] .events__merge > .upcoming {
  flex: 0 0 auto !important; width: 100% !important;
}
#eventsPin[data-flow="responsive"] .events__grid > .event-card > *,
#eventsPin[data-flow="responsive"] .events__merge > .upcoming > * {
  opacity: calc(1 - var(--r-merge, 0)) !important; transition: none !important;
}
/* Internal notches close together. Requested right corners stay square. */
#eventsPin[data-flow="responsive"] .events__grid > .event-card:nth-child(1) {
  clip-path: polygon(20px 0,100% 0,100% 100%,0 100%,0 20px) !important;
  -webkit-clip-path: polygon(20px 0,100% 0,100% 100%,0 100%,0 20px) !important;
}
#eventsPin[data-flow="responsive"] .events__grid > .event-card:nth-child(2) {
  clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%) !important;
  -webkit-clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%) !important;
}
#eventsPin[data-flow="responsive"] .events__grid > .event-card:nth-child(3) {
  clip-path: inset(0) !important; -webkit-clip-path: inset(0) !important;
}
#eventsPin[data-flow="responsive"] .events__merge > .upcoming {
  clip-path: polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px)) !important;
  -webkit-clip-path: polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px)) !important;
}
#eventsPin[data-flow="responsive"] #actu .actu__grid {
  display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-rows: auto auto !important; align-content: center !important;
  gap: var(--r-gap) !important; pointer-events: none;
}
#eventsPin[data-flow="responsive"] #actu .actu-card {
  grid-row: auto !important; grid-column: auto !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  display: flex !important; flex-direction: column !important;
  opacity: var(--r-card-opacity,0) !important;
  transform: translate3d(0,calc(var(--r-enter-y, 0px) * (1 - var(--r-news, 0))),0) !important;
  transition: none !important; filter: none !important; overflow: hidden !important;
  pointer-events: auto;
}
#eventsPin[data-flow="responsive"] #actu .actu-card:nth-child(3),
#eventsPin[data-flow="responsive"] #actu .actu-card:nth-child(n+6) { display: none !important; }
#eventsPin[data-flow="responsive"] #actu .actu-card__img-wrap {
  position: relative !important; width: 100% !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  aspect-ratio: 16 / 9 !important; flex: 0 0 auto !important;
}
#eventsPin[data-flow="responsive"] #actu .actu-card__photo {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important;
}
#eventsPin[data-flow="responsive"] #actu .actu-card__body {
  height: auto !important; max-height: none !important; flex: 1 0 auto !important;
  padding: 12px !important; gap: 6px !important;
}
#eventsPin[data-flow="responsive"] #actu .actu-card__excerpt {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
}
#eventsPin[data-flow="responsive"] [inert] { pointer-events: none !important; }
#eventsPin[data-flow="responsive"] [inert] * { pointer-events: none !important; }
#eventsPin[data-flow="responsive"][data-measuring="1"] .events__grid { grid-template-rows: auto auto !important; }
#eventsPin[data-flow="responsive"][data-measuring="1"] .events__merge,
#eventsPin[data-flow="responsive"][data-measuring="1"] #actu .actu__grid { height: auto !important; }
@media (max-width: 600px) {
  #eventsPin[data-flow="responsive"] .events__header > .btn-cta,
  #eventsPin[data-flow="responsive"] .actu__header > .btn-cta {
    width: calc((100% - 2 * var(--r-pad) - 12px) / 2) !important;
    justify-content: center !important;
  }
  #eventsPin[data-flow="responsive"] .events__header > .section-title { flex-wrap: wrap !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card:nth-child(2),
  #eventsPin[data-flow="responsive"] #actu .actu-card:nth-child(3) { display: none !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card:first-child { grid-column: 1 / -1 !important; }
}
/* Reduced motion: no pinned corridor or hidden content. */
#eventsPin[data-flow="responsive"][data-reduced="1"] { height: auto !important; }
#eventsPin[data-flow="responsive"][data-reduced="1"] > #events { position: relative !important; top: 0 !important; height: auto !important; overflow: visible !important; }
#eventsPin[data-flow="responsive"][data-reduced="1"] #events > .events__inner,
#eventsPin[data-flow="responsive"][data-reduced="1"] #actu { position: relative !important; height: var(--r-section-h) !important; }
#eventsPin[data-flow="responsive"][data-reduced="1"] .events__merge { clip-path: none !important; -webkit-clip-path: none !important; }

/* Stable sizing: no scale of cards, headings or CTA controls. */
#eventsPin[data-flow="responsive"] .events__grid { flex: 1 1 auto !important; transform: none !important; }
#eventsPin[data-flow="responsive"] .events__merge > .upcoming { transform: none !important; }
#eventsPin[data-flow="responsive"] .events__merge::before,
#eventsPin[data-flow="responsive"] .events__grid::before,
#eventsPin[data-flow="responsive"] .events__grid::after,
#eventsPin[data-flow="responsive"] .event-card::after,
#eventsPin[data-flow="responsive"] .upcoming::after { display: none !important; }
#eventsPin[data-flow="responsive"] .events__merge::after {
  clip-path: polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px) !important;
  -webkit-clip-path: polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px) !important;
}
#eventsPin[data-flow="responsive"] .event-card__link { position: static !important; margin-top: 8px !important; }
#eventsPin[data-flow="responsive"] .event-card__tags { display: none !important; }
#eventsPin[data-flow="responsive"] .event-card__desc { margin-bottom: 8px !important; }
#eventsPin[data-flow="responsive"] #actu .actu-card { align-self: stretch !important; }
#eventsPin[data-flow="responsive"] #actu .actu-card__title { display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; }
#eventsPin[data-flow="responsive"] #actu .actu-card__empty,
#eventsPin[data-flow="responsive"] #actu .actu__empty { opacity:var(--r-news,0) !important; }
#eventsPin[data-flow="responsive"] .events__header > .section-title { column-gap: .2em !important; }
#eventsPin[data-flow="responsive"] .actu__header > .section-title { column-gap: .2em !important; }
#eventsPin[data-flow="responsive"][data-measuring="1"] .events__header > .section-title,
#eventsPin[data-flow="responsive"][data-measuring="1"] .actu__header > .section-title { height:auto !important; }
#eventsPin[data-flow="responsive"][data-measuring="1"] .actu-card { transform:none !important; }
#eventsPin[data-flow="responsive"][data-reduced="1"] #actu .actu__inner { position:absolute !important; }
@media (min-width:601px) and (max-width:1300px) {
  #eventsPin[data-flow="responsive"] .events__grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
}
@media (max-width:600px) {
  #eventsPin[data-flow="responsive"] #actu .actu-card__excerpt { display:none !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card:nth-child(4),
  #eventsPin[data-flow="responsive"] #actu .actu-card:nth-child(5) { display:flex !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card__title { font-size:clamp(13px,3.6vw,16px) !important; line-height:1.2 !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card__body { padding:10px !important; gap:4px !important; }
}

#eventsPin[data-flow="responsive"][data-moving="1"] .actu-card__photo,
#eventsPin[data-flow="responsive"] .actu-card:not([data-social]) .actu-card__photo {
  animation:none !important; filter:none !important; transform:none !important;
}
#eventsPin[data-flow="responsive"][data-moving="1"] .actu-card__social-icon { animation:none !important; opacity:0 !important; }
/* Containment overrides for the pre-existing !important roster patches. */
@media (max-width:1300px) {
  .hero__inner, .hero__content, .team__inner, .team__content, .team__info, .team__composition {
    min-width:0 !important; box-sizing:border-box !important; max-width:100% !important;
  }
  .hero__title, .hero__motto, .team__title { white-space:normal !important; max-width:100% !important; overflow-wrap:break-word !important; }
  .team__title { line-height:1.15 !important; transform-origin:50% 50% !important; }
  .team__content { grid-template-columns:minmax(0,1fr) !important; gap:28px !important; }
  .team__composition { width:100% !important; max-width:860px !important; aspect-ratio:5 / 2.4 !important; height:auto !important; margin:0 auto !important; overflow:visible !important; }
  .team__composition .roster-card { min-width:0 !important; max-width:none !important; height:auto !important; }
  .team__composition .roster-card--player { width:24% !important; }
  .team__composition .roster-card--manager { width:18% !important; }
  .team__composition .roster-card--p1 { top:8% !important; left:2% !important; right:auto !important; bottom:auto !important; transform:rotate(-6deg) !important; }
  .team__composition .roster-card--p2 { top:2% !important; left:21% !important; right:auto !important; bottom:auto !important; transform:rotate(2deg) !important; }
  .team__composition .roster-card--p3 { top:8% !important; left:40% !important; right:auto !important; bottom:auto !important; transform:rotate(7deg) !important; }
  .team__composition .roster-card--m1 { top:auto !important; left:61% !important; right:auto !important; bottom:2% !important; transform:rotate(-4deg) !important; }
  .team__composition .roster-card--m2 { top:auto !important; left:79% !important; right:auto !important; bottom:11% !important; transform:rotate(6deg) !important; }
  .team__info { width:100% !important; text-align:right !important; align-items:flex-end !important; }
  /* Keep the scroll gesture native. No touch interception and no fixed backgrounds. */
  .community-bg { background-attachment:scroll !important; }
}
@media (max-width:600px) {
  .team__composition { aspect-ratio:5 / 3.75 !important; }
  .team__composition .roster-card--player { width:28% !important; }
  .team__composition .roster-card--manager { width:23% !important; }
  .team__composition .roster-card--p1 { top:7% !important; left:4% !important; bottom:auto !important; transform:rotate(-7deg) !important; }
  .team__composition .roster-card--p2 { top:1% !important; left:36% !important; bottom:auto !important; transform:rotate(3deg) !important; }
  .team__composition .roster-card--p3 { top:7% !important; left:68% !important; bottom:auto !important; transform:rotate(7deg) !important; }
  .team__composition .roster-card--m1 { top:auto !important; left:18% !important; bottom:2% !important; }
  .team__composition .roster-card--m2 { top:auto !important; left:59% !important; bottom:2% !important; }
}
#eventsPin[data-flow="responsive"] .events__header > .section-title,
#eventsPin[data-flow="responsive"] .actu__header > .section-title {
  width:calc(100% - 2 * var(--r-pad)) !important;
  box-sizing:border-box !important; justify-self:auto !important;
  min-height:0 !important; max-height:none !important;
}
#eventsPin[data-flow="responsive"] .events__header > .section-title {
  flex-wrap:nowrap !important;
}
#eventsPin[data-flow="responsive"] .events__header .rotate { flex:0 1 auto !important; min-width:0 !important; max-width:100% !important; }
@media (max-width:600px) {
  /* "Rejoins" + vignette animee sur UNE ligne, vignette a droite */
  #eventsPin[data-flow="responsive"] .events__header > .section-title { flex-direction:row !important; flex-wrap:nowrap !important; white-space:nowrap !important; gap:.25em !important; }
  #eventsPin[data-flow="responsive"] .events__header .rotate { flex:0 0 auto !important; max-width:none !important; }
}

/* ===== Police Oblisk (fichier fourni : font/OBLISK.otf) ===== */
@font-face {
  font-family: 'Oblisk';
  src: url('font/OBLISK.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ===== Titres adaptes par format ===== */
@media (min-width: 601px) and (max-width: 1300px) {
  .section-title, .team__title { font-size: clamp(28px, 3.6vw, 44px) !important; }
  .event-card__title { font-size: clamp(18px, 2vw, 24px) !important; }
  .event-card--large .event-card__title { font-size: clamp(20px, 2.3vw, 28px) !important; }
  .upcoming__title, .upcoming__head h3 { font-size: clamp(14px, 1.5vw, 18px) !important; }
}
@media (max-width: 600px) {
  .hero__title { font-size: clamp(30px, 9vw, 46px) !important; }
  .section-title, .team__title { font-size: clamp(22px, 6.4vw, 30px) !important; }
  .event-card__title { font-size: 17px !important; line-height: 1.1 !important; }
  .event-card--large .event-card__title { font-size: 19px !important; }
  .event-card__desc { font-size: 12.5px !important; line-height: 1.5 !important; }
  .event-card { --evcard-icon-h: 26px; }
  .upcoming__title, .upcoming__head h3 { font-size: 13px !important; }
}
#eventsPin[data-flow="responsive"] .events__header > .section-title,
#eventsPin[data-flow="responsive"] .actu__header > .section-title { font-size: clamp(28px, 3.6vw, 44px) !important; }
@media (max-width: 600px) {
  #eventsPin[data-flow="responsive"] .events__header > .section-title,
  #eventsPin[data-flow="responsive"] .actu__header > .section-title { font-size: clamp(22px, 6.4vw, 30px) !important; }
}

/* ===== Espace entre "Programme partenaires" et "Prochains evenements" ===== */
@media (max-width: 600px) {
  #eventsPin[data-flow="responsive"] .events__merge,
  #eventsPin[data-flow="responsive"] .events__grid { gap: calc(14px * (1 - var(--r-merge, 0))) !important; }
  #eventsPin[data-flow="responsive"] .events__merge > .upcoming { padding: 16px !important; }
  /* Les 3 liens texte sont retires sur mobile. */
  #eventsPin[data-flow="responsive"] .event-card__link { display: none !important; }
}

/* ===== Liens "Voir les tournois / S'inscrire / Devenir partenaire" en bas a droite (tablette + PC) ===== */
@media (min-width: 601px) {
  .events__grid > .event-card { --card-pad: 28px; padding: 28px var(--card-pad) 64px !important; position: relative !important; }
  .events__grid > .event-card > .event-card__link,
  #eventsPin .events__grid > .event-card > .event-card__link,
  #eventsPin[data-flow="responsive"] .events__grid > .event-card > .event-card__link {
    position: absolute !important; right: var(--card-pad) !important; bottom: 26px !important;
    top: auto !important; left: auto !important;
    margin: 0 !important; padding: 0 !important; z-index: 2 !important; display: inline-block !important;
    text-align: right !important;
  }
  #eventsPin[data-flow="responsive"] .events__grid > .event-card {
    --card-pad: clamp(14px, 2vw, 24px);
    padding: clamp(14px, 2vw, 24px) var(--card-pad) 58px !important;
  }
  #eventsPin[data-flow="responsive"] .events__grid > .event-card > .event-card__link { bottom: clamp(14px, 2vw, 22px) !important; }
}

/* ===== Boutons : mobile en bas, tablette en haut de la section ===== */
@media (min-width: 601px) and (max-width: 1300px) {
  #eventsPin[data-flow="responsive"] .events__header > .btn-cta,
  #eventsPin[data-flow="responsive"] .actu__header > .btn-cta {
    top: calc(var(--r-title-y) + (var(--r-title-h, 56px) - 38px) / 2) !important;
  }
  #eventsPin[data-flow="responsive"] .events__header > .section-title,
  #eventsPin[data-flow="responsive"] .actu__header > .section-title {
    left: calc(var(--r-pad) + 190px) !important; right: calc(var(--r-pad) + 190px) !important;
    width: auto !important;
  }
}

/* ===== Animations des boutons et titres (fluides, pilotees par le scroll) ===== */
#eventsPin[data-flow="responsive"] .events__header > .btn-cta,
#eventsPin[data-flow="responsive"] .actu__header > .btn-cta,
#eventsPin[data-flow="responsive"] .events__header > .section-title,
#eventsPin[data-flow="responsive"] .actu__header > .section-title { will-change: transform, opacity; }
#eventsPin[data-flow="responsive"] .events__header > .events__services-btn {
  transform: translate3d(calc(-1 * var(--r-merge, 0) * 110vw), 0, 0) !important;
  opacity: 1 !important;
}
#eventsPin[data-flow="responsive"] .events__header > .events__community-btn {
  transform: translate3d(calc(var(--r-merge, 0) * 110vw), 0, 0) !important;
  opacity: 1 !important;
}
#eventsPin[data-flow="responsive"] .actu__header > .btn-cta {
  transform: translate3d(calc((1 - var(--r-news, 0)) * 110vw), 0, 0) !important;
  opacity: 1 !important;
}
#eventsPin[data-flow="responsive"] .events__header > .section-title {
  transform: translate3d(0, calc(-1 * var(--r-merge, 0) * 400%), 0) !important;
  opacity: 1 !important;
}
#eventsPin[data-flow="responsive"] .actu__header > .section-title {
  transform: translate3d(0, calc(-1 * (1 - var(--r-news, 0)) * 400%), 0) !important;
  opacity: 1 !important;
}
#eventsPin[data-flow="responsive"][data-measuring="1"] .events__header > *,
#eventsPin[data-flow="responsive"][data-measuring="1"] .actu__header > * { transform: none !important; }
/* PC : titres des cartes proportionnels a la largeur (plus de mot coupe). */
@media (min-width: 1301px) {
  .event-card__title { font-size: clamp(20px, 1.7vw, 28px) !important; overflow-wrap: normal; }
  .event-card--large .event-card__title { font-size: clamp(22px, 2vw, 34px) !important; }
}

/* ===== Aucun fondu du conteneur : le fond unifie apparait seulement quand les fentes sont fermees ===== */
#eventsPin[data-flow="responsive"] .events__merge { opacity: 1 !important; }
#eventsPin[data-flow="responsive"] .events__merge::after {
  opacity: clamp(0, calc((var(--r-merge, 0) - .985) * 80), 1) !important;
}
/* ===== Bannieres 16:9 mobile : toutes les cartes verticales ===== */
@media (max-width: 600px) {
  #eventsPin .actu__grid .actu-card,
  #eventsPin .actu__grid .actu-card--small,
  #eventsPin .actu__grid .actu-card--lead {
    display: flex !important; flex-direction: column !important; grid-template-columns: none !important;
    height: auto !important; min-height: 0 !important;
  }
  #eventsPin .actu__grid .actu-card .actu-card__img-wrap {
    position: relative !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; flex: 0 0 auto !important;
  }
  #eventsPin .actu__grid .actu-card .actu-card__photo {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  #eventsPin .actu__grid .actu-card .actu-card__body { flex: 0 0 auto !important; height: auto !important; }
}

/* ===== Tablette : grille d'articles d'origine (2 grands en haut, 2 petits en dessous, image a gauche) ===== */
@media (min-width: 601px) and (max-width: 1300px) {
  #eventsPin[data-flow="responsive"] #actu .actu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto auto !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card--lead { grid-row: 1 !important; display: flex !important; flex-direction: column !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card--lead .actu-card__img-wrap { aspect-ratio: 16 / 9 !important; width: 100% !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card--small {
    grid-row: 2 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; align-items: stretch !important;
  }
  #eventsPin[data-flow="responsive"] #actu .actu-card--small .actu-card__img-wrap { aspect-ratio: auto !important; width: 100% !important; height: 100% !important; min-height: 90px !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card--small .actu-card__body { justify-content: center !important; }
  #eventsPin[data-flow="responsive"] #actu .actu-card__body { flex: 0 0 auto !important; }
  /* Titre de section : plus petit, sur plusieurs lignes si besoin, jamais sous les boutons */
  #eventsPin[data-flow="responsive"] .events__header > .section-title,
  #eventsPin[data-flow="responsive"] .actu__header > .section-title {
    font-size: clamp(22px, 3vw, 38px) !important; white-space: normal !important; flex-wrap: wrap !important; overflow-wrap: anywhere !important;
  }
}

/* ===== Mobile : titres plus petits, angles moins coupes, hero ===== */
@media (max-width: 600px) {
  :root { --cut: 6px; --cut-sm: 4px; --cut-lg: 9px; --clip-bigcard: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%); }
  .section-title, #eventsPin[data-flow="responsive"] .events__header > .section-title,
  #eventsPin[data-flow="responsive"] .actu__header > .section-title { font-size: clamp(18px, 5.4vw, 24px) !important; }
  .team__title { font-size: clamp(16px, 4.6vw, 20px) !important; }
  .hero__motto { font-size: clamp(30px, 9vw, 46px) !important; line-height: 1.05 !important; }
  .hero__title { font-size: clamp(40px, 12.5vw, 62px) !important; line-height: 0.95 !important; }
  #eventsPin[data-flow="responsive"] .events__grid > .event-card:nth-child(1) { clip-path: polygon(10px 0,100% 0,100% 100%,0 100%,0 10px) !important; -webkit-clip-path: polygon(10px 0,100% 0,100% 100%,0 100%,0 10px) !important; }
  #eventsPin[data-flow="responsive"] .events__grid > .event-card:nth-child(2) { clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%) !important; -webkit-clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%) !important; }
  #eventsPin[data-flow="responsive"] .events__merge > .upcoming { clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px)) !important; -webkit-clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px)) !important; }
  #eventsPin[data-flow="responsive"] .events__merge::after { clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px) !important; -webkit-clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px) !important; }
}

/* ===== Valeurs de secours : la mise en page reste correcte meme si la mesure JS echoue ===== */
#eventsPin[data-flow="responsive"] {
  --r-pad: clamp(12px, 4vw, 18px); --r-gap: 12px; --r-title-y: 84px; --r-title-h: 56px;
  --r-stage-y: 152px; --r-stage-h: calc(100svh - 152px - 64px); --r-buttons-y: calc(100svh - 58px);
  --r-section-h: 100svh; --r-pin-h: 200svh; --r-stick: 0px; --r-row1: 180px; --r-row2: 150px;
}
@media (min-width: 601px) and (max-width: 1300px) {
  #eventsPin[data-flow="responsive"] { --r-pad: clamp(24px, 4vw, 58px); --r-gap: 16px; --r-title-y: 96px; --r-stage-y: 172px; --r-stage-h: calc(100svh - 172px - 28px); }
}
/* Fond de la section prolonge sur TOUT le couloir d'animation.
   Le decor (et pas seulement une couleur plate) reste visible sous la scene
   lorsque la barre d'adresse mobile change la hauteur du viewport. */
#eventsPin[data-flow="responsive"] {
  background-color: #0c2350 !important;
  background-image:
    radial-gradient(ellipse 55% 50% at 22% 28%, rgba(110,190,255,.55), transparent 65%),
    radial-gradient(ellipse 50% 45% at 78% 55%, rgba(60,140,255,.45), transparent 70%),
    radial-gradient(ellipse 45% 40% at 85% 88%, rgba(80,220,230,.28), transparent 70%),
    radial-gradient(ellipse 50% 45% at 12% 80%, rgba(90,130,240,.35), transparent 70%),
    radial-gradient(ellipse 75% 60% at 50% 50%, rgba(70,150,255,.22), transparent 75%),
    linear-gradient(165deg,#0a1d3d 0%,#11295a 35%,#102e6b 60%,#0a1f44 100%) !important;
  background-size: 100% max(100svh, var(--r-section-h, 100svh)) !important;
  background-repeat: repeat-y !important;
}
#eventsPin[data-flow="responsive"] > #events { height: max(var(--r-section-h, 100svh), 100svh) !important; }

/* ===== Typographie : Oblisk restauree sur "Plusieurs jeux, une equipe" ===== */
.team__title, .team__title em {
  font-family: 'Oblisk', var(--font-display), sans-serif !important;
  font-weight: 400 !important; letter-spacing: .01em !important; text-transform: uppercase;
}
.team__desc, .event-card__desc, .hero__sub { font-family: var(--font-body) !important; }
.team__info { gap: 10px !important; }
.team__desc { margin-top: 0 !important; }

/* ===== Hero : "Chaque jour. Chaque match." toujours un peu plus petit que le titre, les deux plus serres ===== */
.hero__motto { margin: 0 0 4px !important; }
.hero__title { margin: 0 !important; }
.hero__sub-wrap { margin-top: 3px !important; }
.hero__sub { margin-top: 0 !important; }
@media (min-width: 601px) {
  .hero__motto { font-size: clamp(30px, 4.6vw, 96px) !important; line-height: 1 !important; }
}
@media (max-width: 600px) {
  .hero__motto { font-size: clamp(22px, 6.8vw, 32px) !important; }
  .hero__title { font-size: clamp(36px, 11.5vw, 56px) !important; line-height: .95 !important; }
  .team__title { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.05 !important; }
  .team__info { gap: 6px !important; }
}
/* Mobile : icone au-dessus du titre de carte, titre sur toute la largeur (plus de mot coupe) */
@media (max-width: 600px) {
  #eventsPin[data-flow="responsive"] .events__grid > .event-card { grid-template-columns: 1fr !important; row-gap: 8px !important; padding: 14px !important; }
  #eventsPin[data-flow="responsive"] .events__grid > .event-card > .event-card__icon { grid-column: 1 !important; grid-row: 1 !important; }
  #eventsPin[data-flow="responsive"] .events__grid > .event-card > .event-card__title { grid-column: 1 !important; grid-row: 2 !important; font-size: 15px !important; overflow-wrap: normal !important; word-break: normal !important; }
  #eventsPin[data-flow="responsive"] .events__grid > .event-card:nth-child(3) > .event-card__title { font-size: 17px !important; }
}

/* Hero mobile : accroche, titre et trait decoratif renforces jusqu'a 600px. */
@media (max-width: 600px) {
  .hero__motto {
    font-size: clamp(34px, 10.5vw, 52px) !important;
    line-height: 1.02 !important;
  }

  .hero__title {
    font-size: clamp(50px, 15vw, 76px) !important;
    line-height: 0.93 !important;
  }

  .hero__eyebrow::before {
    height: 4px !important;
  }
}

/* ============================================================
   ÉQUIPE — hiérarchie commune, composition aérée, icône unique.
   Les phases et transformations de la communauté restent intactes.
   ============================================================ */
:root {
  --section-heading-size: clamp(32px, 3.8vw, 64px);
  --team-copy-title: clamp(30px, 3.1vw, 54px);
  --team-copy-body: clamp(14px, 1.05vw, 18px);
  --team-copy-gap: 12px;
}
#team .team__header > .section-title,
#eventsPin .events__header > .section-title,
#eventsPin .actu__header > .section-title,
#eventsPin[data-flow="responsive"] .events__header > .section-title,
#eventsPin[data-flow="responsive"] .actu__header > .section-title {
  font-family: var(--font-display), 'Azurio Bold', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: var(--section-heading-size) !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
}
#team .team__header > .section-title *,
#eventsPin .events__header > .section-title *,
#eventsPin .actu__header > .section-title * {
  font-family: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}
/* Le conteneur d'animation garde ses mesures et son repère de scroll.
   On supprime uniquement sa remontée sous la section précédente. */
#eventsPin.events-pin { margin-top: 0 !important; }

/* Identiques : titre, description, espacement et couleur des deux blocs. */
#team .team__info,
#team .staff-recruit__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  gap: var(--team-copy-gap) !important;
  text-align: center !important;
}
#team .team__title,
#team .team__title em,
#team .staff-recruit__title {
  margin: 0 !important;
  max-width: 100% !important;
  font-family: 'Oblisk', 'Bebas Neue', var(--font-display) !important;
  font-size: var(--team-copy-title) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.12 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  text-align: inherit !important;
  color: #d9e9fb !important;
  text-wrap: balance;
  transform: none !important;
  text-shadow: none !important;
}
#team .team__desc,
#team .staff-recruit__desc {
  display: block !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: var(--team-copy-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-align: inherit !important;
  color: #9bb4d2 !important;
  text-wrap: pretty;
}
#team .staff-recruit {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(28px, 4vw, 76px);
  width: 100%;
  margin-top: clamp(44px, 5vw, 84px);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
#team .staff-recruit__art { min-width: 0; width: min(100%, 480px); margin: 0 auto; pointer-events: none; }
#team .staff-recruit__scene { display: block; width: 100%; height: auto; }
#team .staff-recruit__coin { animation: vstaff-coin-float 6s ease-in-out infinite; }
#team .staff-recruit__coin--two { animation-delay: -2s; animation-duration: 7s; }
#team .staff-recruit__coin--three { animation-delay: -4s; animation-duration: 8s; }
@keyframes vstaff-coin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* PC : éventail agrandi, réellement ancré à gauche, managers décalés à droite. */
@media (min-width: 1301px) {
  #team .team__content { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important; gap: clamp(28px, 4vw, 76px) !important; }
  #team .team__composition { width: 100% !important; max-width: none !important; aspect-ratio: 5 / 2.8 !important; margin: 0 !important; overflow: visible !important; }
  #team .team__composition .roster-card--player { width: 31% !important; }
  #team .team__composition .roster-card--manager { width: 21% !important; }
  #team .team__composition .roster-card--p1 { left: 3% !important; bottom: 9% !important; top: auto !important; right: auto !important; transform: rotate(-7deg) !important; }
  #team .team__composition .roster-card--p2 { left: 23% !important; bottom: 22% !important; top: auto !important; right: auto !important; transform: rotate(1deg) !important; }
  #team .team__composition .roster-card--p3 { left: 43% !important; bottom: 8% !important; top: auto !important; right: auto !important; transform: rotate(7deg) !important; }
  #team .team__composition .roster-card--m1 { left: 67% !important; bottom: 0 !important; top: auto !important; right: auto !important; transform: rotate(-4deg) !important; }
  #team .team__composition .roster-card--m2 { left: 78% !important; bottom: 29% !important; top: auto !important; right: auto !important; transform: rotate(5deg) !important; }
}
@media (min-width: 601px) and (max-width: 1300px) {
  :root { --section-heading-size: clamp(24px, 2.8vw, 36px); --team-copy-title: clamp(28px, 3vw, 36px); --team-copy-body: clamp(14px, 1.4vw, 16px); }
  #team .team__content { gap: 26px !important; }
  #team .staff-recruit { gap: 24px; margin-top: 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #team .staff-recruit__art { max-width: 410px; }
  /* Réserver aux titres la place réellement nécessaire aux boutons. */
  #eventsPin[data-flow="responsive"] .events__header > .section-title,
  #eventsPin[data-flow="responsive"] .actu__header > .section-title {
    left: calc(var(--r-pad) + 120px) !important;
    right: calc(var(--r-pad) + 120px) !important;
    width: auto !important;
    justify-content: center !important;
  }
  #eventsPin[data-flow="responsive"] .events__header > .btn-cta,
  #eventsPin[data-flow="responsive"] .actu__header > .btn-cta { max-width: 116px !important; min-width: 0 !important; }
}
@media (max-width: 600px) {
  :root { --section-heading-size: clamp(20px, 5.8vw, 28px); --team-copy-title: clamp(25px, 7vw, 32px); --team-copy-body: clamp(13px, 3.65vw, 16px); --team-copy-gap: 10px; }
  #team .team__content { display: flex !important; flex-direction: column !important; gap: 28px !important; }
  #team .team__info { order: -1 !important; }
  #team .team__composition { flex: none !important; width: 100% !important; }
  #team .team__info { width: 100% !important; text-align: right !important; align-items: flex-end !important; }
  #team .team__info .team__title,
  #team .team__info .team__desc { margin-left: auto !important; margin-right: 0 !important; text-align: right !important; align-self: flex-end !important; }
  #team .staff-recruit__copy { width: 100% !important; text-align: left !important; align-items: flex-start !important; }
  #team .staff-recruit__copy .staff-recruit__title,
  #team .staff-recruit__copy .staff-recruit__desc { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; align-self: flex-start !important; }
  #team .team__desc,
  #team .staff-recruit__desc { max-width: 100% !important; }
  #team .staff-recruit { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 44px; }
  #team .staff-recruit__art { width: min(100%, 360px); }
}
/* En-têtes : compenser l'échelle de la scène PC sans modifier son animation.
   Même taille VISUELLE que Notre équipe, même lorsque les articles sont réduits. */
@media (min-width: 1301px) {
  #eventsPin .events__header > .section-title,
  #eventsPin .actu__header > .section-title {
    font-size: calc(var(--section-heading-size) / var(--f, 1)) !important;
  }
}
@media (min-width: 601px) and (max-width: 720px) {
  :root { --section-heading-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #team .staff-recruit__coin { animation: none; }
}


/* ============================================================
   JOURNAL HOMEPAGE — staff board art + balanced roster placement
   This block is intentionally scoped to #team so the community/news
   animation and the rest of the site keep their existing behaviour.
   ============================================================ */
#team .staff-recruit__title {
  color: #a6b6cf !important;
}
#team .staff-recruit__art {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  justify-self: end;
  transform: translateX(clamp(0px, 1.2vw, 18px));
}
#team .staff-recruit__scene {
  width: 100% !important;
  height: auto;
  overflow: visible;
}

/* The roster uses the full left column instead of hugging the page edge. */
@media (min-width: 1301px) {
  #team .team__content {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    gap: clamp(30px, 4vw, 72px) !important;
  }
  #team .team__composition {
    width: calc(100% + clamp(12px, 2.2vw, 36px)) !important;
    max-width: none !important;
    aspect-ratio: 5 / 2.78 !important;
    transform: translateX(clamp(12px, 2.2vw, 36px));
  }
  #team .team__composition .roster-card--player { width: 33% !important; }
  #team .team__composition .roster-card--manager { width: 23% !important; }
  #team .team__composition .roster-card--p1 { left: 5% !important; }
  #team .team__composition .roster-card--p2 { left: 25% !important; }
  #team .team__composition .roster-card--p3 { left: 45% !important; }
  #team .team__composition .roster-card--m1 { left: 69% !important; }
  #team .team__composition .roster-card--m2 { left: 81% !important; }
  #team .staff-recruit__art { width: min(100%, 640px) !important; max-width: 640px !important; }
}

@media (min-width: 601px) and (max-width: 1300px) {
  #team .team__composition {
    transform: translateX(clamp(6px, 1.8vw, 22px));
    width: calc(100% + clamp(6px, 1.8vw, 22px)) !important;
  }
  #team .staff-recruit__art {
    width: min(100%, 470px) !important;
    max-width: 470px !important;
    transform: none;
  }
}

@media (max-width: 600px) {
  /* Keep copy before the illustration, with no overlap at narrow widths. */
  #team .staff-recruit { grid-template-columns: minmax(0, 1fr) !important; }
  #team .staff-recruit__art {
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    justify-self: center;
    transform: none;
  }
  #team .staff-recruit__scene { width: 100% !important; }
}

/* Identical text paint on both homepage copy blocks, including legacy fill overrides. */
#team .team__title, #team .team__title em, #team .staff-recruit__title {
  color: #a6b6cf !important;
  -webkit-text-fill-color: #a6b6cf !important;
}
/* Journal administration — shared across all site pages. */
.va-journal-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid rgba(94,170,255,.18)}
.va-journal-tab{font:inherit;font-size:12px;padding:10px 15px;color:#8da9c8;background:transparent;border:1px solid rgba(94,170,255,.2);cursor:pointer}
.va-journal-tab.is-active{color:#c4e3ff;background:rgba(94,170,255,.12);border-color:rgba(94,170,255,.6)}
.va-journal-tab-content{min-width:0}.va-journal-channel-status{display:block;color:#7db9de;font-size:10px;padding:7px 0}
.va-journal-channel-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%;padding-top:10px}.va-journal-channel-actions button{font-size:11px!important;padding:8px 10px!important}
.va-journal-search{margin:20px 0 12px}.va-journal-search input{width:100%;box-sizing:border-box;background:#071527;color:#d1e3f7;border:1px solid #315577;padding:12px;font:inherit;font-size:13px}
.va-journal-invite{display:block;width:100%;min-width:0;box-sizing:border-box;background:#08182c;border:1px solid #5e9ad6;color:#b6dbff;padding:10px;font-size:11px;margin-top:12px}
.va-journal-note{font-size:12px;color:#9ab5cf;line-height:1.65;margin:0 0 18px}.va-journal-tab-content [disabled]{opacity:.55}

/* STAFF — conserver l'inclinaison de la charte historique remplacée dans le fichier à jour. */
#team .staff-recruit__scene {
  transform: rotate(10deg);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 16px 20px rgba(0, 5, 20, .34));
}

@media (max-width: 760px) {
  #team .staff-recruit__scene {
    transform: rotate(8deg);
  }
}

/* =====================================================================
   ALIGNEMENTS FINAUX — textes aux marges extérieures sur tous les formats
   ===================================================================== */

/* « Plusieurs jeux, une équipe » : bord droit de la page. */
#team .team__info {
  width: 100% !important;
  max-width: none !important;
  justify-self: end !important;
  align-items: flex-end !important;
  text-align: right !important;
}

#team .team__info .team__title,
#team .team__info .team__desc {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}

/* « Devenir membre du personnel » : bord gauche de la page. */
#team .staff-recruit__copy {
  width: 100% !important;
  max-width: none !important;
  justify-self: start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

#team .staff-recruit__copy .staff-recruit__title,
#team .staff-recruit__copy .staff-recruit__desc {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Le bouton Communauté reste seul à droite de l'en-tête. */
#eventsPin .events__header > .events__community-btn,
#eventsPin[data-flow="responsive"] .events__header > .events__community-btn {
  justify-self: end !important;
  right: var(--r-pad, 0px) !important;
  left: auto !important;
}

/* Même règle sur tablette et mobile : aucun recentrage automatique. */
@media (max-width: 1300px) {
  #team .team__info {
    align-items: flex-end !important;
    text-align: right !important;
  }

  #team .team__info .team__title,
  #team .team__info .team__desc {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
  }

  #team .staff-recruit__copy {
    align-items: flex-start !important;
    text-align: left !important;
  }

  #team .staff-recruit__copy .staff-recruit__title,
  #team .staff-recruit__copy .staff-recruit__desc {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}

/* ============================================================
   PATCH 2026-09 — COMMUNAUTE / NEWS
   1) Titres "Rejoins ..." et "Dernieres news" cales a gauche
      (marge gauche de la page), boutons toujours a droite.
   2) Boutons "communaute" et "articles" cliquables :
      les calques d'animation ne capturent plus la souris,
      seuls les elements REELLEMENT visibles sont cliquables.
      Aucune valeur d'animation n'est modifiee.
   ============================================================ */

/* ---- 1) Alignement a gauche ---- */
.events__header,
.actu__header {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "title btn" !important;
}

.events__header > .section-title,
.actu__header > .section-title,
.events-section > .actu-section .actu__header > .section-title,
.events-section > .actu-section .actu__header > .section-title em {
  grid-area: title;
  justify-self: start !important;
  text-align: left !important;
}

.events__header > .btn-cta,
.actu__header > .btn-cta {
  grid-area: btn;
  justify-self: end !important;
}

/* Variante "responsive" (titres positionnes en absolu) */
#eventsPin[data-flow="responsive"] .events__header > .section-title,
#eventsPin[data-flow="responsive"] .actu__header > .section-title {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ---- 2) Cliquabilite des boutons ---- */
/* Le calque "actualites" superpose la section communaute : il ne doit
   jamais intercepter les clics, seuls ses enfants visibles le font. */
.events-pin > .events-section > .actu-section {
  pointer-events: none !important;
}

.events-pin[data-actu="1"] > .events-section > .actu-section .actu__header > .btn-cta,
.events-pin[data-actu="1"] > .events-section > .actu-section .actu__grid,
.events-pin[data-actu="1"] > .events-section > .actu-section .actu-card {
  pointer-events: auto !important;
}

/* Quand les actus sont affichees, le bouton communaute (invisible) ne
   capte plus les clics, et inversement. */
.events-pin[data-actu="1"] .events__header > .btn-cta {
  pointer-events: none !important;
}

.events-pin .events__header > .btn-cta,
.events-pin .events__header > .events__header-actions .btn-cta {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

#eventsPin[data-flow="responsive"] .actu__header > .btn-cta {
  pointer-events: none !important;
}

#eventsPin[data-flow="responsive"][data-actu="1"] .actu__header > .btn-cta {
  pointer-events: auto !important;
}

#eventsPin[data-flow="responsive"][data-actu="1"] .events__header > .btn-cta {
  pointer-events: none !important;
}

/* ============================================================
   PATCH V2 — alignement a gauche + cliquabilite (specificite forte)
   ============================================================ */
.events-pin > .events-section > .events__inner > .events__header,
.events-section > .events__inner > .events__header,
#events .events__header {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas: "title btn-left btn-right" !important;
  align-items: center !important;
}

.events-pin > .events-section > .events__inner > .events__header > .section-title,
.events-section > .events__inner > .events__header > .section-title,
#events .events__header > .section-title,
#events .events__header > .section-title.section-title--rotate {
  grid-area: title !important;
  justify-self: start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: auto !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  transform: none;
}

#events .events__header > .events__services-btn {
  grid-area: btn-left !important;
  justify-self: end !important;
}

#events .events__header > .events__community-btn,
#events .events__header > .btn-cta {
  grid-area: btn-right !important;
  justify-self: end !important;
}

.events-pin > .events-section > .actu-section .actu__header > .section-title,
#actu .actu__header > .section-title {
  justify-self: start !important;
  text-align: left !important;
  width: auto !important;
  margin-inline: 0 !important;
}

/* Cliquabilite : le calque communaute ne bloque plus les actus */
.events-pin[data-actu="1"] > .events-section > .events__inner {
  pointer-events: none !important;
}
.events-pin[data-actu="1"] > .events-section > .actu-section,
.events-pin[data-actu="1"] > .events-section > .actu-section .actu__inner,
.events-pin[data-actu="1"] > .events-section > .actu-section .actu__header,
.events-pin[data-actu="1"] > .events-section > .actu-section .actu__header > .btn-cta,
.events-pin[data-actu="1"] > .events-section > .actu-section .actu-card,
.events-pin[data-actu="1"] > .events-section > .actu-section .actu-card a {
  pointer-events: auto !important;
}
.events-pin[data-actu="0"] > .events-section > .actu-section {
  pointer-events: none !important;
}

/* ============================================================
   PATCH V3 — fond hero retiré + icônes de fond section communauté supprimées
   ============================================================ */

/* 1) Supprimer le fond du hero (vidéo, gif, scanlines, grille, dégradés) */
.hero,
section.hero,
#home.hero {
  background: #03070f !important;
}

.hero__bg,
.hero__bg-gradient,
.hero__video,
.hero__video-tint,
.hero__scanlines,
.hero__grid-lines,
.hero__overlay,
.hero__media,
.hero__gif,
.hero__particles {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Pseudo-élément du bas du hero (dégradé) */
.hero::after,
#home.hero::after,
section.hero::after {
  display: none !important;
  content: none !important;
}

/* 2) Supprimer les grandes icônes en filigrane dans les cartes communauté */
.event-card__bg-icon,
.event-card .event-card__bg-icon,
.events__grid .event-card__bg-icon {
  display: none !important;
}

/* ============================================================
   PATCH V4 — toggle afficher/masquer bande partenaires
   ============================================================ */

.va-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  color: #e6edf6;
  font-size: 0.95rem;
}

.va-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.va-toggle__slider {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  transition: background 0.25s ease;
}

.va-toggle__slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.va-toggle input:checked + .va-toggle__slider {
  background: #3b82f6;
}

.va-toggle input:checked + .va-toggle__slider::after {
  transform: translateX(20px);
}

.va-toggle__label {
  line-height: 1.3;
}


/* ============================================================
   BANDE PARTENAIRES MASQUEE (case decochee dans l'admin)
   La bande disparait completement et la section roster reprend
   sa place directement sous le hero, tout en conservant sa pente.
   ============================================================ */
body.partners-band-hidden #partners + :is(.svc-section, .team-section) {
  margin-top: 0 !important;
}

/* ============================================================
   CORRECTION — titres Tournois / Evenement / Concours
   - meme taille pour les trois cartes sur tablette et ordinateur
   - sur mobile (<= 600px), titres agrandis et places sous les icones
   ============================================================ */
.event-card__title,
.event-card--large .event-card__title {
  font-size: clamp(22px, 2vw, 34px) !important;
  line-height: 1.1 !important;
}

@media (max-width: 600px) {
  #eventsPin[data-flow="responsive"] .events__grid > .event-card {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
    align-items: start !important;
  }

  #eventsPin[data-flow="responsive"] .events__grid > .event-card > .event-card__icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    align-self: start !important;
  }

  #eventsPin[data-flow="responsive"] .events__grid > .event-card > .event-card__title,
  #eventsPin[data-flow="responsive"] .events__grid > .event-card:nth-child(3) > .event-card__title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin: 0 !important;
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #eventsPin[data-flow="responsive"] .events__grid > .event-card > .event-card__desc,
  #eventsPin[data-flow="responsive"] .events__grid > .event-card > .event-card__tags,
  #eventsPin[data-flow="responsive"] .events__grid > .event-card > .event-card__link {
    grid-column: 1 !important;
  }
}

/* ============================================================
   CORRECTION 2026-09-07 — RACCORDS DE FOND DES PENTES
   Ces prolongements sont purement visuels : ils ne modifient ni la
   geometrie des sections, ni les variables, ni les transformations
   utilisees par l'animation Communaute / Actualites.
   ============================================================ */

/* Lorsque la bande partenaires est masquee, le fond du hero continue
   sous toute la pente haute du roster. Aucun changement de hauteur :
   le contenu et le declenchement de la navbar restent inchanges. */
body.partners-band-hidden .hero {
  box-shadow: 0 calc(var(--team-slope) + 2px) 0 #0a2050 !important;
}

/* Garde de fond placee sous la pente basse du roster. Elle appartient
   au conteneur de la Communaute mais reste independante de .community-bg :
   la fusion, la fermeture et le parallax conservent donc leur animation. */
#eventsPin.events-pin::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--team-slope));
  height: calc(var(--team-slope) + 3px);
  z-index: 3;
  pointer-events: none;
  background-color: #0c2350;
  background-image:
    radial-gradient(ellipse 55% 50% at 22% 28%, rgba(110, 190, 255, .55), transparent 65%),
    radial-gradient(ellipse 50% 45% at 78% 55%, rgba(60, 140, 255, .45), transparent 70%),
    radial-gradient(ellipse 45% 40% at 85% 88%, rgba(80, 220, 230, .28), transparent 70%),
    radial-gradient(ellipse 50% 45% at 12% 80%, rgba(90, 130, 240, .35), transparent 70%),
    radial-gradient(ellipse 75% 60% at 50% 50%, rgba(70, 150, 255, .22), transparent 75%),
    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;
}

/* Le contenu et les calques animes restent au-dessus de la garde. */
#eventsPin.events-pin > .events-section.community-perspective {
  z-index: 2;
}

/* Sur les appareils tactiles, on evite background-attachment: fixed,
   sans toucher au parallax JS de la vraie couche .community-bg. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  #eventsPin.events-pin::before {
    background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
  }
}

/* ============================================================
   AJUSTEMENT MOBILE <= 600px — titres plus grands
   Notre équipe / Rejoins + vignette / Dernières news / Hero
   ============================================================ */
@media (max-width: 600px) {
  /* Titres principaux des trois sections. La vignette animée de
     « Rejoins » hérite de la même taille pour rester harmonieuse. */
  :root {
    --section-heading-size: clamp(30px, 7.2vw, 38px);
  }

  #team .team__header > .section-title,
  #eventsPin .events__header > .section-title,
  #eventsPin .actu__header > .section-title,
  #eventsPin[data-flow="responsive"] .events__header > .section-title,
  #eventsPin[data-flow="responsive"] .actu__header > .section-title {
    font-size: var(--section-heading-size) !important;
    line-height: 1.08 !important;
  }

  #eventsPin .events__header > .section-title .rotate,
  #eventsPin .events__header > .section-title .rotate *,
  #eventsPin .actu__header > .section-title *,
  #team .team__header > .section-title * {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  /* Accroche et titre du hero. */
  html body #home.hero .hero__motto {
    font-size: clamp(34px, 9vw, 52px) !important;
    line-height: .98 !important;
  }

  html body #home.hero .hero__title {
    font-size: clamp(58px, 18vw, 96px) !important;
    line-height: .90 !important;
  }
}

/* ============================================================
   HERO — 2 traits alignés et réellement séparés
   ============================================================ */
.hero__copy-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 30px);
  border-left: 0 !important;
  box-shadow: none !important;
}

/* Suppression définitive de l'ancien trait unique. */
.hero__content::before,
.hero__content::after,
.hero__copy-wrap::before,
.hero__copy-wrap::after {
  content: none !important;
  display: none !important;
}

.hero__headline-wrap,
.hero__sub-wrap {
  position: relative;
  border-left: 0 !important;
}

/* On n'utilise plus de pseudo-éléments : chaque bloc possède son propre trait. */
.hero__headline-wrap::before,
.hero__headline-wrap::after,
.hero__sub-wrap::before,
.hero__sub-wrap::after {
  content: none !important;
  display: none !important;
}

.hero__block-line {
  position: absolute;
  left: clamp(-32px, -2.2vw, -18px);
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  pointer-events: none;
}

.hero__sub-wrap {
  margin-top: 0 !important;
}

/* ============================================================
   HERO — correction finale : aucun trait en double
   ============================================================ */
html body #home.hero .hero__content,
html body #home.hero .hero__copy-wrap,
html body #home.hero .hero__headline-wrap,
html body #home.hero .hero__sub-wrap {
  border-left: 0 !important;
  border-inline-start: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Neutralise tous les anciens traits créés avec ::before / ::after. */
html body #home.hero .hero__content::before,
html body #home.hero .hero__content::after,
html body #home.hero .hero__copy-wrap::before,
html body #home.hero .hero__copy-wrap::after,
html body #home.hero .hero__headline-wrap::before,
html body #home.hero .hero__headline-wrap::after,
html body #home.hero .hero__sub-wrap::before,
html body #home.hero .hero__sub-wrap::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* Les deux seuls traits conservés. */
html body #home.hero .hero__block-line {
  display: block !important;
  position: absolute !important;
  left: clamp(-32px, -2.2vw, -18px) !important;
  width: 4px !important;
  height: auto !important;
  background: var(--accent) !important;
  border: 0 !important;
}

/* Trait du titre : du haut visible de « Chaque jour » au bas visible
   de « On joue pour gagner », sans dépasser. */
html body #home.hero .hero__headline-wrap > .hero__block-line {
  top: clamp(6px, .8vw, 12px) !important;
  bottom: clamp(14px, 2vw, 32px) !important;
}

/* Trait de la description : strictement limité à ses lignes de texte. */
html body #home.hero .hero__sub-wrap > .hero__block-line {
  top: clamp(7px, .8vw, 12px) !important;
  bottom: clamp(5px, .6vw, 9px) !important;
}

/* ============================================================
   HERO — traits ancrés dans la marge générale de la page
   ============================================================ */
html body #home.hero {
  --hero-trait-text-gap: clamp(22px, 2.2vw, 32px);
}

/* Le bord gauche de chaque bloc reste exactement sur --page-pad,
   qui correspond à l'ancien emplacement du trait unique. */
html body #home.hero .hero__headline-wrap,
html body #home.hero .hero__sub-wrap {
  box-sizing: content-box !important;
  padding-left: var(--hero-trait-text-gap) !important;
}

/* Les deux traits ne peuvent plus sortir à gauche de la marge générale. */
html body #home.hero .hero__headline-wrap > .hero__block-line,
html body #home.hero .hero__sub-wrap > .hero__block-line {
  left: 0 !important;
}

/* ============================================================
   HERO — alignement fiable sur la marge de page
   Le trait est la première colonne du bloc : aucun calcul négatif,
   donc les deux traits restent alignés avec le bouton de gauche.
   ============================================================ */
html body #home.hero {
  --hero-line-width: 4px;
  --hero-line-gap: clamp(18px, 2vw, 28px);
}

html body #home.hero .hero__copy-wrap {
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

html body #home.hero .hero__headline-wrap,
html body #home.hero .hero__sub-wrap {
  display: grid !important;
  grid-template-columns: var(--hero-line-width) minmax(0, 1fr) !important;
  column-gap: var(--hero-line-gap) !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

html body #home.hero .hero__headline-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

html body #home.hero .hero__headline-wrap > .hero__block-line,
html body #home.hero .hero__sub-wrap > .hero__block-line {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  align-self: stretch !important;
  justify-self: start !important;
  width: var(--hero-line-width) !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
}

html body #home.hero .hero__headline-wrap > .hero__block-line {
  margin-block: clamp(6px, .8vw, 12px) clamp(14px, 2vw, 32px) !important;
}

html body #home.hero .hero__headline-wrap > .hero__motto,
html body #home.hero .hero__headline-wrap > .hero__title,
html body #home.hero .hero__sub-wrap > .hero__sub-line {
  grid-column: 2 !important;
  min-width: 0 !important;
}

html body #home.hero .hero__headline-wrap > .hero__motto {
  grid-row: 1 !important;
}

html body #home.hero .hero__headline-wrap > .hero__title {
  grid-row: 2 !important;
}

/* La largeur inclut le trait et son espacement et ne peut jamais
   dépasser les marges gauche et droite de la page. */
html body #home.hero .hero__sub-wrap {
  width: min(760px, 100%) !important;
  max-width: min(760px, 100%) !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
}

html body #home.hero .hero__sub-wrap > .hero__block-line {
  margin-block: clamp(5px, .6vw, 9px) !important;
}

html body #home.hero .hero__sub-wrap > .hero__sub-line {
  grid-row: 1 !important;
}

/* Le bouton reste ancré au bord droit de la colonne de description,
   et non au bord droit du trait. */
html body #home.hero .hero__sub-wrap:not(.is-expanded) .hero__sub-toggle {
  right: 0 !important;
}

@media (max-width: 600px) {
  html body #home.hero {
    --hero-line-width: 3px;
    --hero-line-gap: clamp(14px, 4vw, 20px);
  }

  html body #home.hero .hero__sub-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   TEAM — fermeture en perspective façon doubles portes au scroll
   Le bloc de droite et le bloc de gauche pivotent en miroir.
   --door-open : 1 = entrouvert, 0 = fermé / face à l'écran.
   ============================================================ */
#team .team__info,
#team .staff-recruit__copy {
  --door-open: 1;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

/* Bloc droit : charnière à droite, fermeture de gauche à droite. */
#team .team__info {
  transform-origin: 100% 50%;
  transform: perspective(1300px) rotateY(calc(var(--door-open) * -28deg));
}

/* Bloc gauche : charnière à gauche, fermeture de droite à gauche. */
#team .staff-recruit__copy {
  transform-origin: 0% 50%;
  transform: perspective(1300px) rotateY(calc(var(--door-open) * 28deg));
}

@media (max-width: 600px) {
  #team .team__info {
    transform: perspective(1100px) rotateY(calc(var(--door-open) * -22deg));
  }
  #team .staff-recruit__copy {
    transform: perspective(1100px) rotateY(calc(var(--door-open) * 22deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  #team .team__info,
  #team .staff-recruit__copy {
    transform: none !important;
  }
}

/* ============================================================
   ROSTER — ajustement final PC
   Cartes légèrement plus petites, éventail plus horizontal et aéré.
   Tablette et mobile restent inchangés.
   ============================================================ */
@media (min-width: 1301px) {
  #team .team__composition {
    aspect-ratio: 5 / 2.6 !important;
  }

  #team .team__composition .roster-card--player {
    width: 32% !important;
  }

  #team .team__composition .roster-card--manager {
    width: 22% !important;
  }

  #team .team__composition .roster-card--p1 {
    left: 1% !important;
    bottom: 7% !important;
  }

  #team .team__composition .roster-card--p2 {
    left: 24% !important;
    bottom: 17% !important;
  }

  #team .team__composition .roster-card--p3 {
    left: 47% !important;
    bottom: 7% !important;
  }

  #team .team__composition .roster-card--m1 {
    left: 71% !important;
    bottom: 0 !important;
  }

  #team .team__composition .roster-card--m2 {
    left: 86% !important;
    bottom: 20% !important;
  }
}

/* ============================================================
   ROSTER — ajustement mobile <= 600px
   Cartes rapprochées et groupe légèrement moins haut.
   ============================================================ */
@media (max-width: 600px) {
  #team .team__composition {
    aspect-ratio: 5 / 3.3 !important;
  }

  #team .team__composition .roster-card--player {
    width: 31% !important;
  }

  #team .team__composition .roster-card--manager {
    width: 25% !important;
  }

  #team .team__composition .roster-card--p1 {
    top: 6% !important;
    left: 7% !important;
  }

  #team .team__composition .roster-card--p2 {
    top: 1% !important;
    left: 34.5% !important;
  }

  #team .team__composition .roster-card--p3 {
    top: 6% !important;
    left: 62% !important;
  }

  #team .team__composition .roster-card--m1 {
    left: 24% !important;
    bottom: 1% !important;
  }

  #team .team__composition .roster-card--m2 {
    left: 52% !important;
    bottom: 1% !important;
  }
}

/* ============================================================
   CORRECTIONS DEMANDEES — 09/09/2026
   ============================================================ */

/* Le trait du titre va du haut de « Chaque jour. Chaque match. »
   jusqu'au bas de « On joue pour gagner. ». */
html body #home.hero .hero__headline-wrap > .hero__block-line {
  grid-row: 1 / span 2 !important;
  align-self: stretch !important;
  margin-top: clamp(6px, .8vw, 12px) !important;
  margin-bottom: 0 !important;
}

/* Bloc « Plusieurs jeux, une équipe » : description côté droit. */
html body #team .team__info,
html body #team .team__info .team__title,
html body #team .team__info .team__desc {
  text-align: right !important;
}
html body #team .team__info {
  align-items: flex-end !important;
}
html body #team .team__info .team__title,
html body #team .team__info .team__desc {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Bloc « Devenir membre du personnel » : description côté gauche. */
html body #team .staff-recruit__copy,
html body #team .staff-recruit__copy .staff-recruit__title,
html body #team .staff-recruit__copy .staff-recruit__desc {
  text-align: left !important;
}
html body #team .staff-recruit__copy {
  align-items: flex-start !important;
}
html body #team .staff-recruit__copy .staff-recruit__title,
html body #team .staff-recruit__copy .staff-recruit__desc {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}


/* ============================================================
   COMMUNAUTE V2 — bleu nuit / facettes 100% opaques.
   Un seul dessin continu sous la pente : aucun miroir ni copie.
   Geometrie des contenus et timelines existantes conservees.
   ============================================================ */
#eventsPin[data-community-art] {
  --community-stage-h: 100svh;
  /* clip (pas hidden) ne cree pas de conteneur de defilement :
     l'ancrage sticky reste celui de la page. */
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Retire l'ancienne bande de raccord independante. */
#eventsPin.events-pin[data-community-art]::before {
  content: none !important;
  display: none !important;
}

/* Autorise uniquement le decor a remonter sous la pente.
   Le cadre conserve son clipping a gauche, a droite et en bas.
   Aucun changement de position, hauteur, marge ou padding. */
#eventsPin.events-pin[data-community-art] > #events.community-perspective {
  overflow: visible !important;
  clip-path: inset(calc(-1 * var(--team-slope)) 0 0 0) !important;
  -webkit-clip-path: inset(calc(-1 * var(--team-slope)) 0 0 0) !important;
}

/* Une seule surface, prolongee vers le haut, derriere le roster.
   La fermeture rejoint toujours le centre ORIGINAL de la section,
   pas le centre du dessin agrandi. La ligne finale reste de 2px. */
#eventsPin[data-community-art] #events > .community-bg {
  top: calc(-1 * var(--team-slope)) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(100% + var(--team-slope)) !important;
  background: #0a162b !important;
  background-attachment: scroll !important;
  clip-path: inset(
    calc((var(--team-slope) + var(--community-stage-h) / 2 - 1px) * var(--vclose, 0))
    0
    calc((var(--community-stage-h) / 2 - 1px) * var(--vclose, 0))
    0
  ) !important;
  -webkit-clip-path: inset(
    calc((var(--team-slope) + var(--community-stage-h) / 2 - 1px) * var(--vclose, 0))
    0
    calc((var(--community-stage-h) / 2 - 1px) * var(--vclose, 0))
    0
  ) !important;
}

/* Pas de voile, reflet, transparence ou fondu decoratif.
   Seule la transition de sortie existante du fond est conservee. */
#eventsPin[data-community-art] #events > .community-bg::before,
#eventsPin[data-community-art] #events > .community-bg::after,
#eventsPin[data-community-art] > #events.community-perspective::after {
  content: none !important;
  display: none !important;
}

#eventsPin[data-community-art] .community-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
#eventsPin[data-community-art] .community-art__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#eventsPin[data-community-art] .community-art__facet {
  opacity: 1;
  transform: translate3d(var(--facet-x, 0px), var(--facet-y, 0px), 0);
  transition: none;
  pointer-events: none;
}
#eventsPin[data-community-art] .community-art__facet > path {
  opacity: 1;
  fill-opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #eventsPin[data-community-art] .community-art__facet {
    transform: none !important;
  }
}


/* ============================================================
   V3 — textes equipe / vignette transparente / fin de scene mobile.
   Les transformations de perspective des deux blocs sont conservees.
   ============================================================ */

/* Les descriptions ne sont plus decoupees en lignes d'animation.
   Leur bord suit celui du titre, a tous les formats. */
html body #team .team__info > .team__desc {
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
html body #team .staff-recruit__copy > .staff-recruit__desc {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Vignette : finition translucide definie dans le correctif V4 en fin de fichier. */

/* Retire le vieux degrade repete du couloir, distinct du SVG actuel.
   Le dessin unique reste porte par .community-bg, comme en V2. */
#eventsPin[data-community-art][data-flow="responsive"] {
  background: #071a40 !important;
}

@media (max-width: 600px) {
  /* Le bandeau anime du titre suit le centrage mobile existant. */
  #team .team__header > .section-title.velra-text-reveal > .velra-text-reveal-line {
    margin-inline: auto;
  }

  /* L'ensemble REJOINS + mot tournant, pas chaque mot separement,
     est centre dans la meme boite que le titre des actualites.
     Aucun changement des transforms utilises pour les entrees/sorties. */
  #eventsPin[data-flow="responsive"] #events .events__header > .section-title,
  #eventsPin[data-flow="responsive"] #actu .actu__header > .section-title {
    left: var(--r-pad) !important;
    right: var(--r-pad) !important;
    width: calc(100% - 2 * var(--r-pad)) !important;
    max-width: none !important;
    justify-self: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-inline: 0 !important;
    font-size: var(--mobile-scene-heading-size, var(--section-heading-size)) !important;
  }

  /* La timeline garde sa reference stable en svh, tandis que le fond
     couvre aussi l'espace libere quand la barre d'adresse se replie.
     Le couloir gagne exactement la meme hauteur : sticky inchange. */
  #eventsPin[data-flow="responsive"] {
    --r-live-extra: max(0px, 100dvh - 100svh);
    --r-button-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    --r-button-gap: 20px;
    height: calc(var(--r-pin-h) + var(--r-live-extra)) !important;
  }
  #eventsPin[data-flow="responsive"] > #events {
    height: calc(var(--r-section-h) + var(--r-live-extra)) !important;
  }

  /* Zone de boutons independante, apres les conteneurs : le bas suit
     le viewport visible, sans deplacer les cartes au scroll. */
  #eventsPin[data-flow="responsive"] #events .events__header > .btn-cta,
  #eventsPin[data-flow="responsive"] #actu .actu__header > .btn-cta {
    top: auto !important;
    bottom: var(--r-button-bottom) !important;
    margin-block: 0 !important;
  }

  /* En mode sans animation, les deux sections restent en flux normal. */
  #eventsPin[data-flow="responsive"][data-reduced="1"] {
    height: auto !important;
  }
  #eventsPin[data-flow="responsive"][data-reduced="1"] > #events {
    height: auto !important;
  }
  #eventsPin[data-flow="responsive"][data-reduced="1"] #events > .events__inner,
  #eventsPin[data-flow="responsive"][data-reduced="1"] #actu {
    height: calc(var(--r-section-h) + var(--r-live-extra)) !important;
  }

  /* Descend le bloc complet : compteurs et libelles restent ensemble,
     avec une marge sous l'en-tete mobile. */
  html body #home.hero > .hero__stats {
    top: calc(var(--navbar-h, 64px) + 32px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
  }
}


/* ============================================================
   V4 — vignette translucide visible, descriptions sur une demi-page,
   fond mobile securise pendant les changements de barre d'adresse.
   ============================================================ */

/* La boite redevient visible sans masquer le decor : teinte a 20%
   et contour interieur fin. Aucune opacite sur le texte ou le parent. */
#events #eventsRotate {
  background: rgba(94, 170, 255, .20) !important;
  background: color-mix(in srgb, var(--rotate-tint, #5eaaff) 20%, transparent) !important;
  box-shadow: inset 0 0 0 1px rgba(139, 195, 255, .60) !important;
  border-color: transparent !important;
}

/* Chaque paragraphe reste dans sa moitie de page, cote droit pour
   le roster et cote gauche pour le personnel. Les titres et leur
   perspective ne sont pas modifies. Retour a la ligne naturel. */
html body #team .team__info > .team__desc,
html body #team .staff-recruit__copy > .staff-recruit__desc {
  width: 100% !important;
  max-width: min(440px, calc(50vw - var(--page-pad))) !important;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 600px) {
  /* Le JS actualise --r-live-extra a partir de la hauteur reellement
     visible. Cette reserve purement decorative couvre aussi les
     frames intermediaires de Chrome pendant le repli de la barre.
     Elle ne deplace ni les cartes, ni les boutons, ni la timeline. */
  #eventsPin[data-community-art][data-flow="responsive"] {
    --community-tail: max(96px, calc(100lvh - 100svh));
    clip-path: inset(calc(-1 * var(--team-slope)) 0 0 0);
    -webkit-clip-path: inset(calc(-1 * var(--team-slope)) 0 0 0);
  }
  #eventsPin.events-pin[data-community-art][data-flow="responsive"] > #events.community-perspective {
    clip-path: inset(calc(-1 * var(--team-slope)) 0 calc(-1 * var(--community-tail)) 0) !important;
    -webkit-clip-path: inset(calc(-1 * var(--team-slope)) 0 calc(-1 * var(--community-tail)) 0) !important;
  }
  #eventsPin[data-community-art][data-flow="responsive"] #events > .community-bg {
    bottom: calc(-1 * var(--community-tail)) !important;
    height: calc(100% + var(--team-slope) + var(--community-tail)) !important;
  }
}

/* ============================================================
   AJUSTEMENTS V5 — 13/09/2026
   Equipe : montee selon l'inclinaison, sans fondu.
   Communaute : vrais fonds conserves, seul le contenu s'efface.
   ============================================================ */

/* Le reveal du parent ne doit ni estomper ni deplacer les cartes.
   Les effets de perspective des deux blocs de texte restent intacts. */
#team .team__content.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
#team .team__composition > .roster-card {
  translate: var(--roster-lift-x, 0px) var(--roster-lift-y, 0px);
  opacity: 1 !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #team .team__composition > .roster-card {
    translate: none !important;
  }
}

/* Supprime reellement le faux bloc recree PAR-DESSUS les quatre
   conteneurs. Aucun remplacement par un autre calque ou pseudo-fond. */
#eventsPin #events .events__merge::after {
  content: none !important;
  display: none !important;
}

/* Les vrais blocs et leur wrapper restent opaques de bout en bout.
   La fermeture existante reste geometrique (clip-path), sans flou,
   sans dissipation et sans fondu final. visibility gere deja la fin PC. */
#eventsPin #events .events__merge,
#eventsPin #events .events__merge > .events__grid,
#eventsPin #events .events__merge > .events__grid > .event-card,
#eventsPin #events .events__merge > .upcoming {
  opacity: 1 !important;
  filter: none !important;
}
#eventsPin #events .events__merge {
  will-change: clip-path, transform;
}
/* Retire l'etirement horizontal de l'ancien effet de dissipation.
   Les translations d'entree scroll-lift sur les cartes sont conservees. */
#eventsPin #events .events__merge > .events__grid {
  transform: none !important;
}

/* Une seule progression par format : --merge sur PC, --r-merge
   en responsive. Seuls les enfants (textes, icones, liens, liste)
   perdent leur opacite, jamais leur conteneur de fond. */
#eventsPin #events .events__merge {
  --content-fade: clamp(0, calc(1 - var(--merge, 0)), 1);
}
#eventsPin[data-flow="responsive"] #events .events__merge {
  --content-fade: clamp(0, calc(1 - var(--r-merge, 0)), 1);
}
#eventsPin #events .events__merge > .events__grid > .event-card > *,
#eventsPin #events .events__merge > .upcoming > * {
  opacity: var(--content-fade, 1) !important;
  transition: none !important;
}

/* Raccords reels de 1px : les surfaces se chevauchent uniquement aux
   jonctions internes. Cela evite les lignes d'anticrenelage sans ajouter
   de fond commun ni de calque de camouflage. Au repos, chevauchement nul. */
#eventsPin #events .events__merge {
  --join: calc(1px * var(--merge, 0));
}
#eventsPin[data-flow="responsive"] #events .events__merge {
  --join: calc(1px * var(--r-merge, 0));
}
@media (min-width: 1301px) {
  #eventsPin #events .events__grid > .event-card:not(:last-child) {
    width: calc(100% + var(--join)) !important;
    max-width: none !important;
  }
}
#eventsPin[data-flow="responsive"] #events .events__grid > .event-card:first-child {
  width: calc(100% + var(--join)) !important;
  max-width: none !important;
}
#eventsPin[data-flow="responsive"] #events .events__grid > .event-card {
  margin-bottom: calc(-1 * var(--join)) !important;
}

/* En mouvement reduit, le pilotage existant garde les blocs separes
   et le contenu doit rester lisible, y compris apres un redimensionnement. */
@media (prefers-reduced-motion: reduce) {
  #eventsPin #events .events__merge {
    --content-fade: 1 !important;
  }
}

/* ============================================================
   STAFF V6 — folio de coordination, bleu roster, traits fins.
   L'illustration est autonome : aucun effet sur les cartes joueurs,
   les blocs de texte, les animations Communaute ou le pied de page.
   ============================================================ */
#team .staff-recruit__scene.staff-recruit__scene--folio {
  /* Les inclinaisons sont dessinees dans le SVG, plan par plan.
     Neutralise seulement l'ancienne rotation globale de la planche. */
  transform: none !important;
  filter: none !important;
  overflow: visible;
  aspect-ratio: 620 / 500;
}
#team .staff-recruit__scene--folio .staff-recruit__coin {
  animation: vstaff6-coin-drift 7.5s ease-in-out infinite;
}
#team .staff-recruit__scene--folio .staff-recruit__coin--two {
  animation-duration: 9s;
  animation-delay: -3s;
}
#team .staff-recruit__scene--folio .staff-recruit__coin--three {
  animation-duration: 8.5s;
  animation-delay: -5s;
}
@keyframes vstaff6-coin-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  #team .staff-recruit__scene--folio .staff-recruit__coin {
    animation: none !important;
  }
}

/* DECOR PATCH — community/team palette sync, sparse random facets, staff folio +12%.
   Append after the existing stylesheet. Scoped to the homepage community/team targets. */

/* Community uses the exact gradient stops/colours used by .team__bg-anim. */
#eventsPin[data-community-art] #events > .community-bg {
  background-color: #051538 !important;
  background-image:
    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%) !important;
  background-size: 200% 200%, 220% 220%, 180% 180%, 200% 200%, 300% 300% !important;
  background-position: 0% 0%, 100% 100%, 50% 100%, 80% 20%, 0% 0% !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  animation: teamGradientShift 22s ease-in-out infinite !important;
  filter: saturate(1.15);
}

/* The original SVG includes a full-canvas dark rectangle. It must not
   cover the shared team gradient, even after the facets have been recoloured. */
#eventsPin[data-community-art] .community-art__svg > rect { fill: transparent !important; }

/* Keep the existing SVG/parallax layer, but remove the bespoke dark polygon palette. */
#eventsPin[data-community-art] .community-art__facet--community-tone-a > path {
  fill: #051538 !important;
}
#eventsPin[data-community-art] .community-art__facet--community-tone-b > path {
  fill: #0a2050 !important;
}
#eventsPin[data-community-art] .community-art__facet--community-tone-c > path {
  fill: #061a3e !important;
}
#eventsPin[data-community-art] .community-art__facet--community-tone-d > path {
  fill: #0c2860 !important;
}
#eventsPin[data-community-art] .community-art__facet > path {
  fill-opacity: .20 !important;
}

/* Fewer visible objects; hidden nodes remain in the SVG so the existing
   depth/parallax calculation and timeline structure are untouched. */
#eventsPin[data-community-art] .community-art__facet.community-facet--sparse-hidden {
  display: none !important;
}

/* Random per-load placement is additive to the existing parallax translation. */
#eventsPin[data-community-art] .community-art__facet {
  transform:
    translate3d(
      calc(var(--facet-x, 0px) + var(--community-random-x, 0px)),
      calc(var(--facet-y, 0px) + var(--community-random-y, 0px)),
      0
    )
    rotate(var(--community-random-r, 0deg))
    scale(var(--community-random-s, 1));
  transform-box: fill-box;
  transform-origin: center;
}

/* The folio is the only staff target changed: +12% visual scale, with a
   negative inset so its layout footprint stays inside the existing art box. */
#team .staff-recruit__scene.staff-recruit__scene--folio {
  width: 112% !important;
  max-width: none !important;
  margin-left: -6% !important;
  margin-right: -6% !important;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  #eventsPin[data-community-art] #events > .community-bg {
    animation: none !important;
  }
}

/* V7 — targeted corrections, 14 September 2026. */
/* Keep the original grid columns, but anchor each rail to measured glyph ink,
   rather than the line-height box. Fallback remains available without JS. */
html body #home.hero .hero__headline-wrap,
html body #home.hero .hero__sub-wrap { position: relative !important; }
html body #home.hero .hero__headline-wrap[data-ink-ready] > .hero__block-line,
html body #home.hero .hero__sub-wrap[data-ink-ready] > .hero__block-line {
  position: absolute !important; grid-area: auto !important;
  top: var(--hero-ink-top) !important; left: 0 !important;
  right: auto !important; bottom: auto !important;
  height: var(--hero-ink-height) !important;
  margin: 0 !important; min-height: 0 !important;
  transform: none !important; transition: none !important;
}
/* Independent glyphs must never flex-shrink, overlap, or inherit a colour
   intended for generic section-title spans. Measurement uses the same nodes. */
html body #events #eventsRotate {
  --rotate-tint: #9d5cff;
  flex: 0 0 auto !important; min-width: 0 !important; max-width: none !important;
  height: 1.5em !important; box-sizing: border-box !important;
  padding: 0 .26em !important;
  color: var(--rotate-ink, #c5a3ff) !important;
  background: color-mix(in srgb, var(--rotate-tint) 20%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rotate-tint) 65%, #cce4ff) !important;
  transition: background-color 400ms ease, color 400ms ease !important;
}
html body #events #eventsRotateMask {
  flex: 0 0 auto !important; min-width: 0 !important; max-width: none !important;
  overflow: hidden !important; box-sizing: content-box !important;
  height: 100% !important; padding: 0 .06em !important;
  transition: width 600ms cubic-bezier(.22,1,.36,1) !important;
}
html body #events #eventsRotateInner,
html body #events #eventsRotateMeasureText {
  display: inline-flex !important; flex: 0 0 auto !important;
  flex-wrap: nowrap !important; align-items: center !important;
  width: max-content !important; min-width: max-content !important;
  height: 100% !important; gap: 0 !important; line-height: 1.15 !important;
}
html body #events .rotate__char {
  flex: 0 0 auto !important; min-width: max-content !important;
  width: auto !important; margin: 0 !important; padding: 0 !important;
  line-height: 1.15 !important; color: inherit !important;
}
html body #events #eventsRotateInner,
html body #events #eventsRotateMask { color: inherit !important; }
html body #events #eventsRotateMeasure {
  position: fixed !important; left: -20000px !important; top: 0 !important;
  display: inline-flex !important; width: max-content !important;
  max-width: none !important; height: 1.5em !important;
  contain: layout style; visibility: hidden !important;
}
html body #events #eventsRotateMeasure .rotate__char {
  animation: none !important; transform: none !important; opacity: 1 !important;
}
/* Remove the detached blue remnant during a width reduction. */
html body #events #eventsRotateStreak { display: none !important; }
html body #eventsPin #events .events__header > .section-title { flex-wrap: nowrap !important; }
@media (min-width: 1301px) {
  html body #eventsPin #events .events__header > .section-title,
  html body #eventsPin #actu .actu__header > .section-title,
  html body #eventsPin #events .events__header > .btn-cta,
  html body #eventsPin #actu .actu__header > .btn-cta {
    translate: 0 var(--v7-header-shift, 0px);
  }
}
@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin[data-flow="responsive"] #events .events__header > .section-title,
  html body #eventsPin[data-flow="responsive"] #actu .actu__header > .section-title {
    left: var(--r-pad) !important; right: auto !important;
    width: calc(100% - 2 * var(--r-pad) - var(--v7-cta-room, 180px)) !important;
    top: var(--r-title-y) !important; margin: 0 !important;
    transform: none !important; justify-content: flex-start !important;
    font-size: var(--v7-heading-size, clamp(28px, 3.2vw, 46px)) !important;
  }
  html body #eventsPin[data-flow="responsive"] #events .events__header > .btn-cta,
  html body #eventsPin[data-flow="responsive"] #actu .actu__header > .btn-cta {
    top: calc(var(--r-title-y) + var(--r-title-h) / 2) !important;
    bottom: auto !important; translate: 0 -50% !important;
  }
}
@media (max-width: 600px) {
  html body #eventsPin[data-flow="responsive"] #events .events__header > .section-title,
  html body #eventsPin[data-flow="responsive"] #actu .actu__header > .section-title {
    left: var(--r-pad) !important; right: var(--r-pad) !important;
    width: calc(100% - 2 * var(--r-pad)) !important;
    top: var(--r-title-y) !important; margin: 0 !important;
    font-size: var(--v7-heading-size, var(--mobile-scene-heading-size, 28px)) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #events #eventsRotateMask { transition: none !important; }
}

@media (min-width: 1301px) {
  html body #eventsPin #events .events__header > .section-title,
  html body #eventsPin #actu .actu__header > .section-title {
    font-size: var(--v7-heading-size, clamp(32px, 3.8vw, 64px)) !important;
  }
}

/*
 * V8 palette-only patch: community + hero.
 *
 * Scope deliberately excludes layout, text, cards, staff art, and all motion
 * geometry. Append after style.css (and after any existing V7 palette block).
 */

/* -------------------------------------------------------------------------
   COMMUNITY — opaque facet palette + the synchronised background surface.

   .community-bg is synchronised to .team__bg-anim by the companion JS.  The
   JS copies the team's *computed* gradient image/position and converts the
   team's percentage image sizes/positions to pixels, so different section
   heights do not create a second, differently-composited gradient.  The team
   element itself is never changed.
   ------------------------------------------------------------------------- */
html body #eventsPin[data-community-art] #events.community-perspective > .community-bg {
  background-color: #061226 !important; /* same opaque section base as #team */
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  animation: none !important; /* position is copied from the live team layer */
  filter: saturate(1.15) !important; /* same effective filter as .team__bg-anim */
}

/* The old shimmer/fade pseudo-layers must not tint the shared palette. */
html body #eventsPin[data-community-art] #events.community-perspective > .community-bg::before,
html body #eventsPin[data-community-art] #events.community-perspective > .community-bg::after,
html body #eventsPin[data-community-art] #events.community-perspective::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Exactly twelve nodes are still selected by script.js.  Do not alter the
   selection or its bounded random transforms; only make each visible object
   fully opaque and palette-solid. */
html body #eventsPin[data-community-art] .community-art,
html body #eventsPin[data-community-art] .community-art__svg,
html body #eventsPin[data-community-art] .community-art__facet,
html body #eventsPin[data-community-art] .community-art__facet > path {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body #eventsPin[data-community-art] .community-art__facet > path {
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
}

/* The source SVG's full-canvas rectangle used to hide the gradient. */
html body #eventsPin[data-community-art] .community-art__svg > rect {
  fill: transparent !important;
  fill-opacity: 0 !important;
}

/* Solid stops from .team__bg-anim; no rgba fills and no translucent overlay. */
html body #eventsPin[data-community-art] .community-art__facet--community-tone-a > path {
  fill: #051538 !important;
}
html body #eventsPin[data-community-art] .community-art__facet--community-tone-b > path {
  fill: #0a2050 !important;
}
html body #eventsPin[data-community-art] .community-art__facet--community-tone-c > path {
  fill: #061a3e !important;
}
html body #eventsPin[data-community-art] .community-art__facet--community-tone-d > path {
  fill: #0c2860 !important;
}

/* -------------------------------------------------------------------------
   HERO — deep-blue base only.  Geometry, copy, and text animation are not
   touched.  The upstream V3 cleanup disables the video; repeat that decision
   here so a late video frame cannot contaminate the navy palette.
   ------------------------------------------------------------------------- */
html body #home.hero,
html body section.hero#home {
  /* Même bleu que le calque interne : aucune bande sombre ne peut apparaître
     au bottom si le navigateur arrondit la hauteur d’un sous-pixel sur PC. */
  background: #0a2050 !important;
  background-image: none !important;
}

html body #home.hero > .hero__video,
html body #home.hero > .hero__video-tint {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
}

/* V8 — independent staff assembly; no fade, original resting SVG intact. */
html body #team .staff-recruit__art,
html body #team .staff-recruit__scene--folio,
html body #team .staff-recruit__composition,
html body #team .v8-staff-part { opacity: 1 !important; }
html body #team .staff-recruit__scene--folio .v8-staff-part {
  animation: none !important;
  translate: var(--staff-enter-x, 0px) var(--staff-enter-y, 0px);
  transition: none !important;
  will-change: translate;
}
/* The real surfaces close to ONE pixel early enough to be seen, then to zero.
   Percentages refer to their actual box, never an estimated --merge-h. */
html body #eventsPin {
  --v8-close: var(--collapse, 0);
  --v8-squeeze: clamp(0, calc(var(--v8-close) / .82), 1);
  --v8-tail: clamp(0, calc((1 - var(--v8-close)) / .025), 1);
  --v8-halfline: calc(.5px * var(--v8-squeeze) * var(--v8-tail));
}
html body #eventsPin[data-flow="responsive"] { --v8-close: var(--r-close, 0); }
html body #eventsPin #events .events__merge {
  clip-path: inset(calc(50% * var(--v8-squeeze) - var(--v8-halfline)) 0) !important;
  -webkit-clip-path: inset(calc(50% * var(--v8-squeeze) - var(--v8-halfline)) 0) !important;
  filter: none !important; box-shadow: none !important;
  opacity: 1 !important;
}
html body #eventsPin[data-community-art] #events.community-perspective > .community-bg {
  clip-path: inset(
    calc((50% + var(--team-slope) / 2) * var(--v8-squeeze)) 0
    calc((50% - var(--team-slope) / 2) * var(--v8-squeeze)) 0
  ) !important;
  -webkit-clip-path: inset(
    calc((50% + var(--team-slope) / 2) * var(--v8-squeeze)) 0
    calc((50% - var(--team-slope) / 2) * var(--v8-squeeze)) 0
  ) !important;
}
/* Existing terminal visibility remains the final clean removal, no fake slab. */
html body #eventsPin[data-collapsed="1"] #events .events__merge,
html body #eventsPin[data-collapsed="1"] #events > .community-bg { visibility: hidden !important; }

/* Section CTA assembly. Only internal layers move: anchor geometry and links
   stay untouched, including the desktop inverse scale and mobile positions. */
html body main .btn-cta[data-v8-cta] {
  isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  --v8-cta-shift: calc(100% + 8px);
}
html body main .btn-cta[data-v8-side="left"] { --v8-cta-shift: calc(-100% - 8px); }
html body main .btn-cta[data-v8-cta]::before {
  content: "" !important;
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--v8-cta-fill, #5eaaff);
  transform: translateY(102%);
  transition: transform 680ms cubic-bezier(.22,1,.36,1), background-color 200ms ease;
  pointer-events: none;
}
html body main .btn-cta[data-v8-cta] > .btn-cta__label {
  translate: 0 var(--v8-cta-height, 46px);
  transition: translate 680ms cubic-bezier(.22,1,.36,1), opacity 500ms ease !important;
  opacity: 1 !important;
}
html body main .btn-cta[data-v8-active="1"]:hover > .btn-cta__label,
html body main .btn-cta[data-v8-active="1"]:focus-visible > .btn-cta__label { opacity: 0 !important; }
html body main .btn-cta[data-v8-cta] > .btn-cta__icon {
  translate: var(--v8-cta-shift) 0;
  transition: translate 680ms cubic-bezier(.22,1,.36,1), width 500ms ease, transform 500ms ease !important;
  opacity: 1 !important;
}
html body main .btn-cta[data-v8-active="1"]::before { transform: translateY(0); }
html body main .btn-cta[data-v8-active="1"] > .btn-cta__label,
html body main .btn-cta[data-v8-active="1"] > .btn-cta__icon { translate: 0 0; }
html body main .btn-cta[data-v8-active="0"] { visibility: hidden !important; pointer-events: none !important; }
html body main .btn-cta[data-v8-active="0"]::before,
html body main .btn-cta[data-v8-active="0"] > .btn-cta__label,
html body main .btn-cta[data-v8-active="0"] > .btn-cta__icon { transition: none !important; }
html body main .btn-cta[data-v8-active="1"]:hover::before { background: var(--accent-soft, #8ec3ff); }
/* The news CTA now assembles in place instead of its former whole-button
   side slide/fade; its independent optical-centering translate is preserved. */
html body #eventsPin #actu .actu__header > .btn-cta[data-v8-cta] { opacity: 1 !important; }
@media (min-width: 1301px) {
  html body #eventsPin #actu .actu__header > .btn-cta[data-v8-cta] {
    transform: scale(calc(1 / var(--f, 1))) !important;
  }
}
@media (max-width: 1300px) {
  html body #eventsPin #actu .actu__header > .btn-cta[data-v8-cta] { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #team .staff-recruit__scene--folio .v8-staff-part { translate: none !important; }
  html body main .btn-cta[data-v8-cta]::before,
  html body main .btn-cta[data-v8-cta] > .btn-cta__label,
  html body main .btn-cta[data-v8-cta] > .btn-cta__icon { transition: none !important; }
}

/* HERO — fond bleu nuit fixe, lueur centrale douce et sans fondu en bas. */
html body #home.hero > .hero__bg-gradient {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  z-index: 0 !important;
  transform: none !important;
  translate: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  /* Fond sans fondu en bas ; les traits sont maintenant un SVG anime. */
  background: #0a2050 !important;
  background-image: radial-gradient(ellipse at 50% 46%, rgba(65, 137, 235, .16) 0%, rgba(49, 117, 210, .08) 28%, rgba(49, 117, 210, .025) 48%, rgba(49, 117, 210, 0) 72%), linear-gradient(125deg, #0a2050 0%, #071d38 100%) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  animation: none !important;
  filter: none !important;
  pointer-events: none;
}
html body #eventsPin[data-community-art] #events.community-perspective > .community-bg {
  opacity: 1 !important;
}

/* Correction ciblée — titres demandés en Azurio Bold */
.team__header .section-title,
.team__header .section-title *,
.events__header .section-title,
.events__header .section-title *,
.actu__header .section-title,
.actu__header .section-title * {
  font-family: var(--font-display), 'Azurio Bold', sans-serif !important;
  font-weight: normal !important;
}


/* =====================================================================
   DEUXIEME BANDE LATERALE — TITRE OBLISK + DESCRIPTION PAR ONGLET
   ===================================================================== */
.va-subpanel .va-sub-head {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 24px 52px !important;
  text-align: center !important;
}

.va-subpanel .va-sub-title {
  width: 100% !important;
  margin: 0 !important;
  font-family: 'Oblisk', 'Bebas Neue', var(--font-display), sans-serif !important;
  font-size: clamp(38px, 3.2vw, 52px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: var(--va-text) !important;
}

.va-subpanel .va-sub-description {
  display: block;
  width: min(100%, 520px);
  margin: 0;
  color: rgba(166, 190, 218, .82);
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .02em;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 601px) and (max-width: 1300px) {
  .va-subpanel .va-sub-title {
    font-size: clamp(36px, 5vw, 46px) !important;
  }
}

@media (max-width: 600px) {
  .va-subpanel .va-sub-head {
    gap: 8px !important;
    padding: 22px 42px !important;
  }
  .va-subpanel .va-sub-title {
    font-size: clamp(34px, 10vw, 42px) !important;
  }
  .va-subpanel .va-sub-description {
    font-size: 12px;
    line-height: 1.4;
  }
}

/* Correction ciblée — boutons centrés sous leurs titres. */
html body #team .team__info > .team__equipe-btn {
  flex: none;
  align-self: center !important;
  margin: clamp(8px, 1vw, 14px) auto 0 !important;
}

html body #team .staff-recruit__copy > .team__partners-btn {
  flex: none;
  align-self: center !important;
  margin: clamp(8px, 1vw, 14px) auto 0 !important;
}

@media (max-width: 600px) {
  html body #team.team-section {
    padding-bottom: calc(clamp(40px, 5vh, 72px) + var(--team-slope)) !important;
  }
}

/* Agrandissement ciblé des accroches — tablette jusqu’à 1300 px. */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #home.hero .hero__motto {
    font-size: clamp(42px, 5.2vw, 68px) !important;
    line-height: .98 !important;
  }

  html body #home.hero .hero__title {
    font-size: clamp(74px, 9.2vw, 120px) !important;
    line-height: .90 !important;
  }

  html body #team {
    --team-copy-title: clamp(38px, 4vw, 52px);
  }
}

/* Agrandissement ciblé des accroches — PC. */
@media (min-width: 1301px) {
  html body #home.hero .hero__motto {
    font-size: clamp(56px, 5.4vw, 100px) !important;
    line-height: .98 !important;
  }

  html body #home.hero .hero__title {
    font-size: clamp(96px, 9.5vw, 190px) !important;
    line-height: .88 !important;
  }

  html body #team {
    --team-copy-title: clamp(48px, 4.3vw, 72px);
  }
}


/* ============================================================
   TEAM — vignettes statistiques ruban (17/09/2026)
   Deux vignettes au-dessus du bouton Équipe, sans traits à droite.
   ============================================================ */
html body #team .team__ribbon-stats {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(6px, .65vw, 10px);
  width: 100%;
  margin: clamp(2px, .5vw, 8px) 0 0;
}

html body #team .team__ribbon-stat {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: clamp(24px, 2.05vw, 31px) clamp(68px, 5.25vw, 82px);
  align-items: center;
  min-height: clamp(24px, 2.05vw, 31px);
  filter: drop-shadow(0 4px 7px rgba(0, 12, 36, .2));
}

html body #team .team__ribbon-stat::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: calc(clamp(24px, 2.05vw, 31px) * .52);
  right: 0;
  top: 14%;
  bottom: 14%;
  background: linear-gradient(90deg, #102b50 0%, #0d2749 100%);
  border: 1px solid rgba(77, 115, 156, .28);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(188, 213, 239, .07);
}

html body #team .team__ribbon-number {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(24px, 2.05vw, 31px);
  aspect-ratio: 1;
  color: #a6b6cf;
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-shadow: none;
  transform: rotate(45deg);
  background: linear-gradient(145deg, #112b50 0%, #0d2547 100%);
  border: 1px solid #294d73;
  box-shadow: inset 0 0 0 1px rgba(5, 17, 38, .72);
}

html body #team .team__ribbon-number > b {
  display: block;
  font: inherit;
  transform: rotate(-45deg);
}

html body #team .team__ribbon-stats--staff {
  justify-content: flex-start;
  align-self: flex-start;
  width: min(100%, 520px);
}

html body #team .team__ribbon-label {
  position: relative;
  z-index: 1;
  padding: 0 clamp(10px, .9vw, 14px) 0 clamp(8px, .68vw, 11px);
  color: #a6b6cf;
  font-family: var(--font-body);
  font-size: clamp(9.5px, .85vw, 11.5px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  text-shadow: none;
}

@media (max-width: 600px) {
  html body #team .team__ribbon-stats {
    justify-content: flex-start;
    gap: 7px;
  }

  html body #team .team__ribbon-stat {
    grid-template-columns: 25px 68px;
    min-height: 25px;
  }

  html body #team .team__ribbon-stat::before {
    left: 13px;
  }

  html body #team .team__ribbon-number {
    width: 25px;
    font-size: 12px;
  }

  html body #team .team__ribbon-label {
    padding-left: 7px;
    padding-right: 9px;
    font-size: 9.5px;
  }
}


/* ============================================================
   STAFF — nouvelles bannières lower-third (17/09/2026)
   Rémunération + Mise en avant, style "bandeau biaisé".
   ============================================================ */
html body #team .staff-banners {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, .9vw, 12px);
  width: min(100%, 520px);
  margin-top: clamp(10px, 1.1vw, 16px);
}

html body #team .staff-banner {
  --bar-w: clamp(190px, 17vw, 250px);
  --diamond: clamp(30px, 2.6vw, 38px);
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--diamond) * .86);
  filter: drop-shadow(0 6px 12px rgba(2, 12, 32, .45));
  overflow: hidden;
  padding-right: 8px;
}

/* Losange biaisé — pièce maîtresse du bandeau */
html body #team .staff-banner__diamond {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--diamond);
  height: var(--diamond);
  margin-right: calc(var(--diamond) * -.18);
  color: #07101f;
  background: linear-gradient(150deg, #9fd4ff 0%, #5eaaff 48%, #2c6cb8 100%);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  transform: skewX(-8deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

html body #team .staff-banner__diamond svg {
  width: 55%;
  height: 55%;
  transform: skewX(8deg);
}

/* Barre longue biaisée — dégradé bleu VELRA, pointe coupée */
html body #team .staff-banner__bar {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--bar-w);
  height: 78%;
  padding-left: calc(var(--diamond) * .55);
  padding-right: calc(var(--diamond) * .9);
  background: linear-gradient(90deg, #173c74 0%, #102b50 55%, #0a1a38 100%);
  border-top: 1px solid rgba(126, 196, 255, .38);
  border-bottom: 1px solid rgba(4, 12, 28, .6);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 6% 100%);
  box-shadow: inset 0 1px 0 rgba(190, 224, 255, .14);
}

html body #team .staff-banner__label {
  color: #dceaff;
  font-family: var(--font-body);
  font-size: clamp(10.5px, .95vw, 13px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(2, 10, 26, .55);
}


@media (max-width: 600px) {
  html body #team .staff-banner {
    --bar-w: clamp(170px, 52vw, 220px);
    --diamond: 27px;
  }

  html body #team .staff-banner__label {
    font-size: 10.5px;
  }
}

/* ============================================================
   ALIGNEMENT FINAL DES CTA — 17/09/2026
   Chaque bouton est centré sur la largeur réelle de son titre.
   ============================================================ */
html body #team .team__info {
  width: max-content !important;
  max-width: 100% !important;
}

html body #team .staff-recruit__copy {
  width: max-content !important;
  max-width: 100% !important;
}

html body #team .team__info > .team__equipe-btn,
html body #team .staff-recruit__copy > .team__partners-btn {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =============================================================
   V9 · 19/09/2026 — restored community/news scene; measured once, no end-state scale.
   --scene-* values are owned exclusively by initCommunityScene.
   ============================================================= */
html.velra-scene-running { scroll-behavior: auto !important; overscroll-behavior-y: none; }
html body #eventsPin[data-flow="timed"] {
  --scene-merge: 0; --scene-close: 0; --scene-content: 1;
  --scene-community-exit: 0; --scene-news-enter: 0; --scene-news-title: 0;
  --scene-pad: 4vw; --scene-height: 100svh; --scene-pin-h: calc(100svh + 120px);
  --scene-stage-y: 190px; --scene-stage-h: 440px; --scene-title-y: 100px; --scene-title-h: 68px;
  --scene-cta-y: 134px; --scene-cta-distance: 110vw; --scene-bottom-zone: 96px;
  --merge: 0; --collapse: 0; --f: 1; --fit-ev: 1; --fit-actu: 1;
  position: relative !important; height: var(--scene-pin-h) !important;
  min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  overflow: visible !important; clip-path: none !important;
  background: #040c1a !important; isolation: isolate;
}
html body #eventsPin[data-flow="timed"] > #events {
  position: sticky !important; top: var(--scene-stick, 0px) !important;
  height: var(--scene-height) !important; min-height: 0 !important;
  width: 100% !important; margin: 0 !important; padding: 0 !important;
  display: block !important; overflow: clip !important;
  transform: none !important; clip-path: none !important; -webkit-clip-path: none !important;
  background: #040c1a !important; perspective: none !important;
}
html body #eventsPin[data-flow="timed"][data-community-art] #events.community-perspective > .community-bg {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  min-height: 0 !important; margin: 0 !important;
  background: #0a2050 !important; background-image: none !important;
  transform: none !important; translate: none !important; animation: none !important; filter: none !important;
  opacity: 1 !important; visibility: visible !important;
  clip-path: inset(calc(50% * var(--scene-close)) 0) !important;
  -webkit-clip-path: inset(calc(50% * var(--scene-close)) 0) !important;
  pointer-events: none !important;
}
html body #eventsPin[data-flow="timed"] #events::before,
html body #eventsPin[data-flow="timed"] #events::after,
html body #eventsPin[data-flow="timed"] .community-bg::before,
html body #eventsPin[data-flow="timed"] .community-bg::after,
html body #eventsPin[data-flow="timed"] #actu::before,
html body #eventsPin[data-flow="timed"] #actu::after,
html body #eventsPin[data-flow="timed"] .actu__lines-bg { display: none !important; }
html body #eventsPin[data-flow="timed"] #events > .events__inner,
html body #eventsPin[data-flow="timed"] #actu,
html body #eventsPin[data-flow="timed"] #actu > .actu__inner {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important;
  display: block !important; margin: 0 !important; padding: 0 !important; gap: 0 !important;
  transform: none !important; translate: none !important; scale: none !important;
  opacity: 1 !important; visibility: visible !important; transition: none !important;
  background: transparent !important; overflow: visible !important;
  pointer-events: none !important; --f: 1 !important; --fit-actu: 1 !important; --fit-ev: 1 !important;
}
html body #eventsPin[data-flow="timed"] #events > .events__inner { z-index: 4 !important; }
html body #eventsPin[data-flow="timed"] #actu { z-index: 2 !important; }
html body #eventsPin[data-flow="timed"][data-community-art] #events.community-perspective > .community-bg { z-index: 3 !important; }
html body #eventsPin[data-flow="timed"][data-scene="news"] #events > .events__inner { z-index: 2 !important; }
html body #eventsPin[data-flow="timed"][data-scene="news"] #actu { z-index: 4 !important; }
html body #eventsPin[data-flow="timed"] #events .events__header,
html body #eventsPin[data-flow="timed"] #actu .actu__header {
  display: contents !important; position: static !important; margin: 0 !important; padding: 0 !important;
  transform: none !important; translate: none !important; opacity: 1 !important;
  visibility: visible !important; transition: none !important; pointer-events: none !important;
}
html body #eventsPin[data-flow="timed"] #events .events__header > .section-title,
html body #eventsPin[data-flow="timed"] #actu .actu__header > .section-title {
  position: absolute !important; top: var(--scene-title-y) !important;
  left: var(--scene-pad) !important; right: auto !important;
  width: calc(100% - 2 * var(--scene-pad) - var(--v7-cta-room, 190px)) !important;
  max-width: none !important; height: var(--scene-title-h) !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  flex-wrap: nowrap !important; gap: .23em !important; white-space: nowrap !important;
  margin: 0 !important; padding: 0 !important; text-align: left !important;
  font-size: var(--v7-heading-size, clamp(28px, 3.8vw, 64px)) !important; line-height: 1.1 !important;
  transform: none !important; translate: none !important; scale: none !important; transition: none !important;
}
html body #eventsPin[data-flow="timed"] #events .events__header > .section-title {
  opacity: 1 !important; transform: translate3d(calc(-1 * var(--scene-community-exit) * var(--scene-cta-distance)), 0, 0) !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu__header > .section-title {
  opacity: 1 !important; transform: translate3d(calc(-1 * (1 - var(--scene-news-enter)) * var(--scene-cta-distance)), 0, 0) !important;
}
html body #eventsPin[data-flow="timed"] .section-title > em,
html body #eventsPin[data-flow="timed"] .section-title > span { font-size: inherit !important; }
html body #eventsPin[data-flow="timed"] #events .events__header > .btn-cta,
html body #eventsPin[data-flow="timed"] #actu .actu__header > .btn-cta {
  position: absolute !important; top: var(--scene-cta-y) !important; bottom: auto !important;
  left: auto !important; right: var(--scene-pad) !important;
  width: max-content !important; min-width: 145px !important; max-width: none !important;
  height: 48px !important; min-height: 48px !important; margin: 0 !important;
  font-size: 12px !important; translate: 0 -50% !important; scale: none !important;
  opacity: 1 !important; visibility: visible !important; transition: none !important;
  pointer-events: auto !important; z-index: 6 !important;
}
html body #eventsPin[data-flow="timed"] #events .events__header > .btn-cta {
  transform: translate3d(calc(var(--scene-community-exit) * var(--scene-cta-distance)), 0, 0) !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu__header > .btn-cta {
  transform: translate3d(calc((1 - var(--scene-news-enter)) * var(--scene-cta-distance)), 0, 0) !important;
}
html body #eventsPin[data-flow="timed"] #events .events__merge,
html body #eventsPin[data-flow="timed"] #actu .actu__grid {
  position: absolute !important; top: var(--scene-stage-y) !important;
  left: var(--scene-pad) !important; right: var(--scene-pad) !important;
  width: auto !important; max-width: none !important; height: var(--scene-stage-h) !important;
  min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  transform: none !important; translate: none !important; scale: none !important;
  opacity: 1 !important; visibility: visible !important; filter: none !important;
  transition: none !important; pointer-events: auto !important;
}
/* The real card surfaces meet, then close symmetrically. No fading slab. */
html body #eventsPin[data-flow="timed"] #events .events__merge {
  --content-fade: var(--scene-content); --join: 0px;
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: var(--scene-top-h, 152px) minmax(0, 1fr) !important;
  gap: calc(18px * (1 - var(--scene-merge))) !important;
  clip-path: inset(calc(50% * var(--scene-close)) 0) !important;
  -webkit-clip-path: inset(calc(50% * var(--scene-close)) 0) !important;
  background: transparent !important; overflow: hidden !important;
}
html body #eventsPin[data-flow="timed"] #events .events__grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important; grid-auto-rows: auto !important;
  gap: calc(18px * (1 - var(--scene-merge))) !important;
  min-height: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
  transform: none !important; overflow: visible !important;
}
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card {
  position: relative !important; display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto !important;
  grid-column: auto !important; grid-row: auto !important; align-content: start !important; align-items: center !important;
  column-gap: 12px !important; row-gap: 9px !important;
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  height: 100% !important; min-height: 0 !important; margin: 0 !important;
  --card-pad: clamp(14px, 1.8vw, 28px); --scene-icon: clamp(25px, 2.2vw, 36px);
  padding: var(--card-pad) var(--card-pad) 42px !important; overflow: hidden !important;
  transform: none !important; translate: none !important; scale: none !important;
  opacity: 1 !important; transition: none !important; border: 0 !important; border-radius: 0 !important;
  background: #06112b !important; clip-path: none !important; -webkit-clip-path: none !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card::before,
html body #eventsPin[data-flow="timed"] #events .event-card::after { display: none !important; }
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__icon {
  grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important;
  width: var(--scene-icon) !important; height: var(--scene-icon) !important;
  display: grid !important; place-items: center !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card__icon svg { width: 100%; height: 100%; }
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__title {
  grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; padding: 0 !important;
  width: auto !important; min-width: 0 !important; line-height: 1 !important;
  font-size: calc(var(--scene-icon) * .78) !important; white-space: nowrap !important;
  overflow-wrap: normal !important; word-break: normal !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__desc {
  grid-column: 1 / -1 !important; grid-row: 2 !important;
  width: 100% !important; max-width: none !important; margin: 0 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; font-size: clamp(13px, 1.1vw, 16px) !important; line-height: 1.4 !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card__bg-icon,
html body #eventsPin[data-flow="timed"] #events .event-card__tags { display: none !important; }
/* Original visible blue actions, anchored at the bottom right. */
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__link {
  display: inline-block !important; position: absolute !important;
  inset: auto var(--card-pad) 18px auto !important;
  width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  font-size: clamp(9px, .75vw, 11px) !important; color: var(--accent) !important;
  background: transparent !important; border: 0 !important; text-align: right !important;
  z-index: 2 !important; cursor: pointer;
}
html body #eventsPin[data-flow="timed"] #events .event-card:focus-within { box-shadow: inset 0 0 0 2px #8ec3ff !important; }
html body #eventsPin[data-flow="timed"] #events .events__merge > .upcoming {
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  padding: var(--scene-upcoming-pad, clamp(16px, 1.7vw, 26px)) !important; width: 100% !important;
  height: 100% !important; max-height: none !important; min-height: 0 !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  transform: none !important; translate: none !important; opacity: 1 !important; transition: none !important;
  background: #06112b !important; clip-path: none !important; -webkit-clip-path: none !important;
  overflow: hidden !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__label {
  flex: 0 0 auto !important; display: flex !important; gap: 9px !important;
  align-items: center !important; margin: 0 !important; padding: 0 !important;
  font-size: clamp(12px, 1.1vw, 16px) !important;
}
/* No internal scroll area. The scene reserves the natural height of the list. */
html body #eventsPin[data-flow="timed"] #events .upcoming__list {
  flex: 1 1 auto !important; min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 38px 38px fit-content(24ch) minmax(0, 1fr) max-content max-content max-content !important;
  grid-auto-rows: minmax(var(--scene-row-min, 54px), 1fr) !important;
  column-gap: clamp(8px, 1vw, 16px) !important; row-gap: 0 !important;
  overflow: visible !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__item {
  display: grid !important; grid-column: 1 / -1 !important; grid-template-columns: subgrid !important;
  align-items: center !important; column-gap: inherit !important;
  width: 100% !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: clamp(4px, calc((var(--scene-row-min, 54px) - 38px) / 2), 8px) 0 !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__month { font-size: 8px !important; line-height: 1.1 !important; }
html body #eventsPin[data-flow="timed"] #events .upcoming__date { width: auto !important; min-width: 0 !important; }
html body #eventsPin[data-flow="timed"] #events .upcoming__day { font-size: 28px !important; line-height: 1 !important; }
html body #eventsPin[data-flow="timed"] #events .upcoming__game-icon { width: 38px !important; height: 34px !important; }
html body #eventsPin[data-flow="timed"] #events .upcoming__info { min-width: 0 !important; width: auto !important; max-width: 24ch !important; gap: 4px !important; }
html body #eventsPin[data-flow="timed"] #events .upcoming__info > strong {
  display: block !important; overflow: hidden !important; text-overflow: ellipsis !important;
  white-space: nowrap !important; font-size: clamp(13px, 1.1vw, 17px) !important; line-height: 1.2 !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__desc {
  min-width: 0 !important; width: auto !important; max-width: 34ch !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; font-size: 12px !important; line-height: 1.4 !important;
  white-space: normal !important; margin: 0 !important; padding: 0 0 0 14px !important;
  border: 0 !important; border-left: 1px solid var(--border-md) !important;
  mask-image: none !important; -webkit-mask-image: none !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__desc--empty { border-left-color: transparent !important; }
html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn {
  position: static !important; inset: auto !important; transform: none !important; translate: none !important;
  grid-column: auto !important; grid-row: auto !important; margin: 0 !important;
  width: auto !important; min-width: 0 !important; min-height: 36px !important; white-space: nowrap;
}
/* Original article layout. No forced 2fr/1fr rows, no 100%-height small cards. */
html body #eventsPin[data-flow="timed"] #actu .actu__grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important; height: auto !important;
  width: calc((100% - 2 * var(--scene-pad)) / var(--scene-news-scale, 1)) !important; right: auto !important;
  transform: scale(var(--scene-news-scale, 1)) !important; transform-origin: left top !important;
  gap: clamp(14px, 1.4vw, 22px) !important; align-content: start !important; overflow: visible !important;
}
/* The final article grid is centred vertically in the Community stage.
   Its upper and lower rows can therefore enter symmetrically from the
   panel's real top and bottom edges, on desktop, tablet and mobile. */
html body #eventsPin[data-flow="timed"] #actu .actu__grid {
  top: var(--scene-news-grid-y, var(--scene-stage-y)) !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu__grid > .actu-card {
  width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; overflow: hidden !important; translate: none !important; scale: none !important;
  transform: translate3d(0, calc((1 - var(--scene-card-in, 0)) * var(--scene-card-distance, 0px)), 0) !important;
  /* No fade: the Community surfaces physically mask and reveal the cards. */
  opacity: 1 !important; visibility: visible !important;
  transition: none !important; pointer-events: auto !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu-card--lead {
  display: flex !important; flex-direction: column !important; grid-row: 1 !important; grid-column: auto !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu-card--lead .actu-card__img-wrap {
  position: relative !important; width: 100% !important; height: auto !important;
  aspect-ratio: 16 / 9 !important; flex: 0 0 auto !important; min-height: 0 !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu-card--small {
  display: grid !important; grid-row: 2 !important; grid-column: auto !important;
  grid-template-columns: clamp(140px, 14vw, 200px) minmax(0, 1fr) !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu-card--small .actu-card__img-wrap {
  position: relative !important; width: 100% !important; height: 100% !important; min-height: 0 !important;
  aspect-ratio: auto !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu-card__photo {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu-card__body { height: auto !important; min-height: 0 !important; }
html body #eventsPin[data-flow="timed"] #actu .actu__grid > :not(.actu-card) { grid-column: 1 / -1; align-self: center; }
@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin[data-flow="timed"] #actu .actu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu-card:nth-child(3),
  html body #eventsPin[data-flow="timed"] #actu .actu-card:nth-child(n+6) { display: none !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu-card--small { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; }
}
html body #eventsPin[data-flow="timed"][data-scene="community"] #actu .actu__header > * { visibility: hidden !important; }
html body #eventsPin[data-flow="timed"][data-scene="news"] #events .events__merge,
html body #eventsPin[data-flow="timed"][data-scene="news"] #events .events__header > * { visibility: hidden !important; }
html body #eventsPin[data-flow="timed"] [inert],
html body #eventsPin[data-flow="timed"] [inert] * { pointer-events: none !important; }
@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list { grid-template-columns: 36px 36px minmax(0, 1fr) max-content max-content !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__desc,
  html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn--az2 { display: none !important; }
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card { --card-pad: 14px; padding: 14px 14px 40px !important; column-gap: 8px !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list { grid-template-columns: 36px 36px minmax(0, 1fr) max-content !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__countdown { display: none !important; }
}
@media (max-width: 600px) {
  /* Address-bar changes only expand the empty bottom band, never the cards. */
  html body #eventsPin[data-flow="timed"] { height: calc(max(var(--scene-height), 100dvh) + 120px) !important; }
  html body #eventsPin[data-flow="timed"] > #events { height: max(var(--scene-height), 100dvh) !important; }
  html body #eventsPin[data-flow="timed"] #events .events__header > .section-title,
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .section-title {
    width: calc(100% - 2 * var(--scene-pad)) !important;
    justify-content: center !important; text-align: center !important;
    font-size: var(--v7-heading-size, clamp(22px, 7.3vw, 32px)) !important;
  }
  html body #eventsPin[data-flow="timed"] #events .events__header > .btn-cta,
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .btn-cta {
    left: 50% !important; right: auto !important; translate: -50% -50% !important;
    top: calc((var(--scene-stage-y) + var(--scene-stage-h) + max(var(--scene-height), 100dvh)) / 2) !important;
    height: 44px !important; min-height: 44px !important; min-width: 148px !important;
    font-size: 11px !important;
  }
  html body #eventsPin[data-flow="timed"] #events .events__merge {
    grid-template-rows: var(--scene-top-h, 182px) minmax(0, 1fr) !important;
    gap: calc(12px * (1 - var(--scene-merge))) !important;
  }
  html body #eventsPin[data-flow="timed"] #events .events__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: calc(10px * (1 - var(--scene-merge))) !important;
  }
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card {
    --scene-icon: 23px; padding: 12px !important; column-gap: 8px !important; row-gap: 7px !important;
  }
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(3) { grid-column: 1 / -1 !important; }
  html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__icon { width: 23px !important; height: 23px !important; }
  html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__title { font-size: 18px !important; }
  html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__desc { font-size: 12px !important; line-height: 1.3 !important; }
  html body #eventsPin[data-flow="timed"] #events .events__merge > .upcoming { padding: 14px !important; gap: 8px !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__label { font-size: 11px !important; letter-spacing: .1em !important; }
  html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__link { display: none !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__list { grid-template-columns: 28px 30px minmax(0, 1fr) max-content !important; column-gap: 7px !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__item { padding: 5px 0 !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__game-icon { width: 30px !important; height: 28px !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__day { font-size: 26px !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__info > strong { font-size: 13px !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__type { font-size: 9px !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__desc,
  html body #eventsPin[data-flow="timed"] #events .upcoming__countdown,
  html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn--az2 { display: none !important; }
  html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn--az { font-size: 9px !important; padding: 10px 8px !important; min-height: 38px; }
  /* Original mobile arrangement: one large card, then two vertical cards. */
  html body #eventsPin[data-flow="timed"] #actu .actu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu-card:nth-child(2),
  html body #eventsPin[data-flow="timed"] #actu .actu-card:nth-child(3),
  html body #eventsPin[data-flow="timed"] #actu .actu-card:nth-child(n+6) { display: none !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu-card:first-child { grid-column: 1 / -1 !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu-card--small { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu-card .actu-card__img-wrap { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; flex: 0 0 auto !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu-card__body { flex: 0 0 auto !important; padding: 10px !important; gap: 4px !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu-card__title { font-size: clamp(13px, 3.6vw, 16px) !important; line-height: 1.2 !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu-card__excerpt { display: none !important; }

}
/* Restored original contours: only the inner cuts close during the merge. */
html body #eventsPin[data-flow="timed"] #events .events__merge {
  --scene-cut: 22px; --scene-inner-cut: calc(8px * (1 - var(--scene-merge)));
}
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(1) {
  clip-path: polygon(var(--scene-cut) 0, 100% 0, 100% 100%, var(--scene-inner-cut) 100%, 0 calc(100% - var(--scene-inner-cut)), 0 var(--scene-cut)) !important;
}
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(3) {
  clip-path: polygon(0 0, calc(100% - var(--scene-cut)) 0, 100% var(--scene-cut), 100% calc(100% - var(--scene-inner-cut)), calc(100% - var(--scene-inner-cut)) 100%, 0 100%) !important;
}
html body #eventsPin[data-flow="timed"] #events .events__merge > .upcoming {
  clip-path: polygon(var(--scene-inner-cut) 0, calc(100% - var(--scene-inner-cut)) 0, 100% var(--scene-inner-cut), 100% calc(100% - var(--scene-cut)), calc(100% - var(--scene-cut)) 100%, var(--scene-cut) 100%, 0 calc(100% - var(--scene-cut)), 0 var(--scene-inner-cut)) !important;
}
html body #eventsPin[data-flow="timed"] #events .events__merge::before,
html body #eventsPin[data-flow="timed"] #events .events__merge::after,
html body #eventsPin[data-flow="timed"] #events .events__grid::before,
html body #eventsPin[data-flow="timed"] #events .events__grid::after { display: none !important; }
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card > *,
html body #eventsPin[data-flow="timed"] #events .events__merge > .upcoming > * { opacity: var(--scene-content) !important; }
html body #eventsPin[data-flow="timed"] .community-art { display: block !important; }
/* A single flat blue ground, with the existing opaque objects retained above it.
   Its upper/lower clipping is driven by the same clock as the card surfaces. */
html body #eventsPin[data-flow="timed"] .community-bg { background-position: 0 0 !important; background-size: auto !important; }
@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #events .events__merge { --scene-cut: 10px; }
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(1) { clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px) !important; }
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(2) { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%) !important; }
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(3) { clip-path: inset(0) !important; }
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .btn-cta {
    top: calc((var(--scene-news-bottom, calc(var(--scene-stage-y) + var(--scene-stage-h))) + max(var(--scene-height), 100dvh)) / 2) !important;
  }
}
/* Do not keep the prefixed legacy clip-path:none after restoring a polygon. */
html body #eventsPin[data-flow="timed"][data-static="1"] #events .event-card > *,
html body #eventsPin[data-flow="timed"][data-static="1"] #events .upcoming > * { opacity: 1 !important; }
html body #eventsPin[data-flow="timed"][data-static="1"] #events > .community-bg { clip-path: none !important; }

/* Reduced motion and short landscape screens: both sections remain readable
   in ordinary document flow, with no scroll capture. */
html body #eventsPin[data-flow="timed"][data-static="1"] { height: auto !important; }
html body #eventsPin[data-flow="timed"][data-static="1"] > #events { position: relative !important; top: 0 !important; height: calc(2 * var(--scene-height)) !important; }
html body #eventsPin[data-flow="timed"][data-static="1"] #events > .events__inner,
html body #eventsPin[data-flow="timed"][data-static="1"] #actu { height: var(--scene-height) !important; }
html body #eventsPin[data-flow="timed"][data-static="1"] #actu { top: var(--scene-height) !important; }
html body #eventsPin[data-flow="timed"][data-static="1"] #events .events__merge {
  clip-path: none !important; --scene-content: 1; --scene-merge: 0;
}
html body #eventsPin[data-flow="timed"][data-static="1"] .events__header > *,
html body #eventsPin[data-flow="timed"][data-static="1"] .actu__header > *,
html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__grid,
html body #eventsPin[data-flow="timed"][data-static="1"] #events .events__merge,
html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__grid > .actu-card {
  visibility: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important;
}
html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__grid {
  transform: scale(var(--scene-news-scale, 1)) !important;
}
/* Hero: the complete rail + copy occupies the same width as the headline. */
html body #home.hero .hero__sub-wrap .hero__sub-line,
html body #home.hero .hero__sub-wrap .hero__sub {
  width: 100% !important; max-width: none !important; min-width: 0 !important;
}
/* Opposing copy anchors, including the nested text-reveal wrappers. */
html body #team .team__info {
  justify-self: start !important; align-items: flex-start !important; text-align: left !important;
  margin-left: 0 !important; margin-right: auto !important;
}
html body #team .staff-recruit__copy {
  justify-self: end !important; align-items: flex-end !important; text-align: right !important;
  margin-left: auto !important; margin-right: 0 !important;
}
html body #team .team__info > .team__title,
html body #team .team__info > .team__desc,
html body #team .team__info .velra-text-reveal-line {
  text-align: left !important; margin-left: 0 !important; margin-right: auto !important;
}
html body #team .staff-recruit__copy > .staff-recruit__title,
html body #team .staff-recruit__copy > .staff-recruit__desc,
html body #team .staff-recruit__copy .velra-text-reveal-line {
  text-align: right !important; margin-left: auto !important; margin-right: 0 !important;
}
html body #team .team__info > .team__ribbon-stats { justify-content: flex-start !important; }
html body #team .staff-recruit__copy > .team__ribbon-stats,
html body #team .staff-recruit__copy > .staff-banners { align-self: flex-end !important; align-items: flex-end !important; justify-content: flex-end !important; }
@media (max-width: 600px) {
  html body #team .staff-recruit__art {
    justify-self: center !important; align-self: center !important; width: min(100%, 440px) !important;
    max-width: 100% !important; margin: 0 auto !important; padding: 0 !important;
    transform: none !important; translate: none !important;
  }
  html body #team .staff-recruit__scene.staff-recruit__scene--folio {
    display: block !important; width: 100% !important; max-width: 100% !important;
    margin: 0 auto !important; transform: none !important; translate: none !important;
  }
}


/* ============================================================
   PATCH RESPONSIVE — PROCHAINS EVENEMENTS
   Tablette <=1300px : 5 lignes ; mobile <=600px : 4 lignes.
   Les contenus gagnent légèrement en taille pour occuper naturellement
   la hauteur disponible sans agrandir le conteneur.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__item {
    padding-block: clamp(6px, calc((var(--scene-row-min, 58px) - 40px) / 2), 10px) !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__day {
    font-size: 30px !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__game-icon {
    width: 40px !important;
    height: 36px !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__info > strong {
    font-size: clamp(14px, 1.25vw, 18px) !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__type {
    font-size: 9.5px !important;
    padding: 3px 7px !important;
  }
}

@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__item {
    padding-block: 7px !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__day {
    font-size: 28px !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__game-icon {
    width: 34px !important;
    height: 32px !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__info > strong {
    font-size: 14px !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__type {
    font-size: 9.5px !important;
    padding: 3px 6px !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn--az {
    font-size: 9.5px !important;
    padding: 11px 9px !important;
    min-height: 40px !important;
  }
}


/* ============================================================
   CORRECTION FINALE DE CASCADE — NOMBRE DE LIGNES VISIBLES
   Ces sélecteurs reprennent la spécificité de la scène afin que
   display:grid !important ne puisse pas réafficher les lignes masquées.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:nth-child(n + 6) {
    display: none !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:nth-child(5) {
    border-bottom: none !important;
  }
}

@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:nth-child(n + 5) {
    display: none !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:nth-child(4) {
    border-bottom: none !important;
  }
}


/* ============================================================
   TRANSITION COMMUNAUTE -> ARTICLES — ORDRE DES CALQUES
   Au début de la fermeture : conteneur Communauté au-dessus,
   articles juste derrière, fond bleu tout en dessous.
   ============================================================ */
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events > .events__inner {
  z-index: 4 !important;
}
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #actu {
  z-index: 3 !important;
}
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"][data-community-art] #events.community-perspective > .community-bg {
  z-index: 2 !important;
}


/* ============================================================
   FERMETURE PROPRE — SUPPRESSION DU TRAIT RESIDUEL
   Les contours et séparateurs n'ont plus à être comprimés une fois
   le contenu effacé : seuls les aplats se referment.
   ============================================================ */
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .events__merge,
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .events__grid,
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .event-card,
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .upcoming {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .upcoming__item,
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .upcoming__desc {
  border-color: transparent !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}


/* ============================================================
   FERMETURE SANS COUTURE — GEOMETRIE ET DERNIER PIXEL
   Après fusion, les découpes des surfaces internes sont retirées et
   la surface basse chevauche la surface haute d'un pixel. La scène est
   masquée avant d'atteindre une hauteur subpixel.
   ============================================================ */
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .events__grid > .event-card,
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .events__merge > .upcoming {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .events__merge > .upcoming {
  transform: translateY(-1px) !important;
  height: calc(100% + 1px) !important;
}
html body #eventsPin[data-flow="timed"][data-closed="1"] #events .events__merge,
html body #eventsPin[data-flow="timed"][data-closed="1"][data-community-art] #events.community-perspective > .community-bg {
  visibility: hidden !important;
}


/* ============================================================
   VERROUILLAGE TOTAL DU SCROLL PENDANT LA SCENE (2000 ms)
   Le gutter reste réservé : aucun déplacement horizontal lorsque
   la barre de défilement est temporairement masquée.
   ============================================================ */
html:has(#eventsPin[data-flow="timed"]) {
  scrollbar-gutter: stable;
}
html.velra-scene-running {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scroll-behavior: auto !important;
}
html.velra-scene-running body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}


/* ============================================================
   ALIGNEMENT ICONES / TITRES + DESCRIPTIONS DES EVENEMENTS
   - Les titres des trois cartes restent strictement dans la hauteur
     de leur icone, quel que soit le format.
   - PC et tablette (>600px) : la description occupe tout l'espace
     disponible jusqu'au compteur.
   ============================================================ */
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__icon,
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__title {
  align-self: center !important;
  box-sizing: border-box !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__title {
  display: flex !important;
  align-items: center !important;
  height: var(--scene-icon) !important;
  min-height: var(--scene-icon) !important;
  max-height: var(--scene-icon) !important;
  font-size: calc(var(--scene-icon) * .74) !important;
  line-height: 1 !important;
  overflow: hidden !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}

@media (min-width: 601px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__desc {
    display: -webkit-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: clamp(10px, 1.2vw, 16px) !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
  }
}

@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list {
    grid-template-columns:
      36px
      36px
      fit-content(20ch)
      minmax(0, 1fr)
      max-content
      max-content !important;
    column-gap: clamp(7px, .9vw, 12px) !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__countdown {
    display: flex !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__desc {
    font-size: clamp(10px, .9vw, 12px) !important;
    line-height: 1.35 !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn--az2 {
    display: none !important;
  }
}

@media (min-width: 1301px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list {
    grid-template-columns:
      38px
      38px
      fit-content(24ch)
      minmax(0, 1fr)
      max-content
      max-content
      max-content !important;
  }
}


/* ============================================================
   CORRECTION VISUELLE FINALE — TITRES DANS LES ICONES
   Les metriques de la police display remontent visuellement les glyphes.
   Une marge interne proportionnelle garantit que lettres et accents restent
   entre le haut et le bas reels de chaque icone, sur tous les formats.
   ============================================================ */
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__title {
  height: var(--matched-icon-size, var(--scene-icon)) !important;
  min-height: var(--matched-icon-size, var(--scene-icon)) !important;
  max-height: var(--matched-icon-size, var(--scene-icon)) !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  font-size: calc(var(--scene-icon) * .98) !important;
  line-height: 1 !important;
  overflow: visible !important;
}
/* Les trois textes gardent strictement la meme taille. Les icones sont
   calibrees individuellement sur la hauteur d'encre propre a chaque mot :
   les accents de ÉVÉNEMENT rendent naturellement ce mot plus haut. */
html body #eventsPin[data-flow="timed"] #events .event-card:nth-child(1) {
  --matched-icon-size: calc(var(--scene-icon) * .87);
}
html body #eventsPin[data-flow="timed"] #events .event-card:nth-child(2) {
  --matched-icon-size: calc(var(--scene-icon) * 1.08);
}
html body #eventsPin[data-flow="timed"] #events .event-card:nth-child(3) {
  --matched-icon-size: calc(var(--scene-icon) * .83);
}
html body #eventsPin[data-flow="timed"] #events .event-card > .event-card__icon {
  width: var(--matched-icon-size, var(--scene-icon)) !important;
  height: var(--matched-icon-size, var(--scene-icon)) !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card:nth-child(1) > .event-card__title {
  transform: translateY(calc(var(--scene-icon) * .071)) !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card:nth-child(2) > .event-card__title {
  transform: translateY(calc(var(--scene-icon) * .142)) !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card:nth-child(3) > .event-card__title {
  transform: translateY(calc(var(--scene-icon) * .0355)) !important;
}
/* Marge optique de securite : sur le rendu raster reel, aucun glyphe ne
   depasse du dessin de son icone, meme avec l'antialiasing et les accents. */
html body #eventsPin[data-flow="timed"] #events .event-card:nth-child(1) > .event-card__icon svg {
  width: 105% !important;
  height: 105% !important;
  transform: none !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card:nth-child(2) > .event-card__icon svg {
  width: 104% !important;
  height: 104% !important;
  transform: none !important;
}
html body #eventsPin[data-flow="timed"] #events .event-card:nth-child(3) > .event-card__icon svg {
  width: 103% !important;
  height: 103% !important;
  transform: translateY(calc(var(--scene-icon) * .015)) !important;
}

/* Typographie strictement identique a la description de la carte Tournois. */
@media (min-width: 601px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__desc {
    font-family: Barlow, sans-serif !important;
    font-size: clamp(13px, 1.1vw, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    color: rgba(170, 205, 255, .52) !important;
  }
}


/* ============================================================
   DESCRIPTIONS EVENEMENTS — LARGEUR COMPLETE + FONDU
   La description s'etire jusqu'au compteur. Aucun line-clamp ni
   text-overflow: ellipsis : la fin disparait progressivement.
   ============================================================ */
@media (min-width: 601px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item .upcoming__desc {
    grid-column: 4 !important;
    justify-self: stretch !important;
    align-self: center !important;
    display: block !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    padding-right: clamp(8px, 1vw, 16px) !important;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - clamp(52px, 5vw, 88px)),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - clamp(52px, 5vw, 88px)),
      transparent 100%
    ) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item .upcoming__countdown {
    grid-column: 5 !important;
  }
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item .upcoming__desc--empty {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* ============================================================
   RACCORD HAUT COMMUNAUTE — CONTINUITE DU VRAI FOND
   La meme surface SVG remonte sous la pente de la section Equipe.
   Le centre de fermeture reste celui du viewport d'origine : la
   timeline, la duree et la geometrie de l'animation ne changent pas.
   ============================================================ */
html body #eventsPin[data-flow="timed"][data-community-art] > #events.community-perspective {
  overflow-x: clip !important;
  overflow-y: visible !important;
  clip-path: inset(calc(-1 * var(--team-slope)) 0 0 0) !important;
  -webkit-clip-path: inset(calc(-1 * var(--team-slope)) 0 0 0) !important;
}
html body #eventsPin[data-flow="timed"][data-community-art] #events.community-perspective > .community-bg {
  top: calc(-1 * var(--team-slope)) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(var(--scene-height) + var(--team-slope)) !important;
  clip-path: inset(
    calc((var(--team-slope) + var(--scene-height) / 2) * var(--scene-close))
    0
    calc((var(--scene-height) / 2) * var(--scene-close))
    0
  ) !important;
  -webkit-clip-path: inset(
    calc((var(--team-slope) + var(--scene-height) / 2) * var(--scene-close))
    0
    calc((var(--scene-height) / 2) * var(--scene-close))
    0
  ) !important;
}

/* ============================================================
   SURVOLS COMMUNAUTE — FONDU DES LIGNES + CARTES ENTIERES CLIQUABLES
   ============================================================ */
/* Lignes d'evenements : l'eclairage disparait progressivement aux deux bords. */
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item {
  position: relative !important;
  isolation: isolate;
  background-color: transparent !important;
  background-image: none !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(94, 170, 255, 0) 0%,
    rgba(94, 170, 255, .055) 10%,
    rgba(94, 170, 255, .075) 50%,
    rgba(94, 170, 255, .055) 90%,
    rgba(94, 170, 255, 0) 100%
  );
  transition: opacity 160ms ease-out;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:hover,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:focus-within {
  background-color: transparent !important;
  background-image: none !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:hover::before,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:focus-within::before {
  opacity: 1;
}

/* Trois cartes superieures : aplat uniforme, sans fondu ni mouvement. */
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card {
  cursor: pointer !important;
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out !important;
}
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:hover,
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:focus-within {
  background: #0a1a38 !important;
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .16) !important;
  transform: none !important;
}

/* Le lien existant couvre la carte, tout en gardant son libelle a sa place. */
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card > .event-card__link {
  display: flex !important;
  position: absolute !important;
  z-index: 8 !important;
  inset: 0 auto 0 calc(-1 * var(--card-pad)) !important;
  width: calc(100% + 2 * var(--card-pad)) !important;
  max-width: none !important;
  height: 100% !important;
  box-sizing: border-box !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 calc(2 * var(--card-pad)) 18px !important;
  color: var(--accent) !important;
  text-align: right !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card > .event-card__link:focus-visible {
  outline: 2px solid #8ec3ff !important;
  outline-offset: -3px !important;
}
@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card > .event-card__link {
    color: transparent !important;
    font-size: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================================
   EQUIPE — alternance finale des textes et illustrations
   PC et tablette : texte roster a gauche / visuel a droite,
   visuel staff a gauche / texte staff a droite.
   ============================================================ */
@media (min-width: 601px) {
  html body #team .team__content {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  }
  html body #team .team__info {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html body #team .team__composition {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body #team .staff-recruit {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
  }
  html body #team .staff-recruit__art {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }
  html body #team .staff-recruit__copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

/* ============================================================
   CORRECTION 20/09/2026 — marge roster + perspective inversee
   ============================================================ */

/* Les cartes gardent exactement leur taille et leur ecartement d'origine.
   On deplace l'eventail complet vers la gauche au lieu de rapprocher la
   derniere carte : le bord droit reste ainsi dans la marge de la page. */
@media (min-width: 1301px) {
  html body #team .team__composition {
    width: 100% !important;
    max-width: 100% !important;
    transform: translateX(-10%) !important;
  }

  html body #team .team__composition .roster-card--m2 {
    left: 86% !important;
    right: auto !important;
  }
}

@media (min-width: 601px) and (max-width: 1300px) {
  html body #team .team__composition {
    width: 100% !important;
    max-width: 100% !important;
    transform: translateX(-3%) !important;
  }

  html body #team .team__composition .roster-card--m2 {
    left: 79% !important;
    right: auto !important;
  }
}

/* Les blocs arrivent inclines puis s'ouvrent face a l'ecran au scroll.
   Roster : ouverture de gauche a droite, charniere a gauche.
   Personnel : ouverture de droite a gauche, charniere a droite.
   --door-open descend de 1 a 0 dans script.js pour finir lisible. */
html body #team .team__info {
  transform-origin: 0% 50% !important;
  transform: perspective(1300px) rotateY(calc(var(--door-open) * 55deg)) !important;
}

html body #team .staff-recruit__copy {
  transform-origin: 100% 50% !important;
  transform: perspective(1300px) rotateY(calc(var(--door-open) * -55deg)) !important;
}

@media (max-width: 600px) {
  html body #team .team__info {
    transform: perspective(1100px) rotateY(calc(var(--door-open) * 45deg)) !important;
  }

  html body #team .staff-recruit__copy {
    transform: perspective(1100px) rotateY(calc(var(--door-open) * -45deg)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #team .team__info,
  html body #team .staff-recruit__copy {
    transform: none !important;
  }
}


/* ============================================================
   CORRECTION 20/09/2026 — CARTES ROSTER TABLETTE 601–1300px
   Sur tablette, les 3 cartes joueur et les 2 cartes manager
   reprennent strictement la disposition mobile <= 600px.
   Le rendu desktop > 1300px reste inchangé.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #team .team__composition {
    width: 100% !important;
    max-width: 860px !important;
    aspect-ratio: 5 / 3.3 !important;
    transform: none !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  html body #team .team__composition .roster-card--player {
    width: 31% !important;
  }

  html body #team .team__composition .roster-card--manager {
    width: 25% !important;
  }

  html body #team .team__composition .roster-card--p1 {
    top: 6% !important;
    left: 7% !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-7deg) !important;
    z-index: 2 !important;
  }

  html body #team .team__composition .roster-card--p2 {
    top: 1% !important;
    left: 34.5% !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(3deg) !important;
    z-index: 3 !important;
  }

  html body #team .team__composition .roster-card--p3 {
    top: 6% !important;
    left: 62% !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(8deg) !important;
    z-index: 2 !important;
  }

  html body #team .team__composition .roster-card--m1 {
    top: auto !important;
    left: 24% !important;
    right: auto !important;
    bottom: 1% !important;
    transform: rotate(-5deg) !important;
    z-index: 1 !important;
  }

  html body #team .team__composition .roster-card--m2 {
    top: auto !important;
    left: 52% !important;
    right: auto !important;
    bottom: 1% !important;
    transform: rotate(6deg) !important;
    z-index: 1 !important;
  }
}


/* ============================================================
   CORRECTION 20/09/2026 — ILLUSTRATION PERSONNEL SUR TABLETTE
   L'illustration est légèrement agrandie entre 601px et 1300px
   pour retrouver une présence proche des cartes joueur.
   Mobile et desktop restent inchangés.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #team .staff-recruit__art {
    width: min(100%, 540px) !important;
    max-width: 540px !important;
    justify-self: center !important;
    transform: none !important;
  }
}


/* ============================================================
   CORRECTION 20/09/2026 — ILLUSTRATION PERSONNEL MOBILE
   Remonte uniquement l'illustration sur <=600px afin que son bord
   inférieur reste entièrement visible au-dessus de la pente suivante.
   ============================================================ */
@media (max-width: 600px) {
  html body #team .staff-recruit__art {
    transform: translateY(clamp(-48px, -8vw, -30px)) !important;
  }
}

/* ============================================================
   CORRECTION 20/09/2026 — ILLUSTRATION PERSONNEL SUR PC
   Ancrage strict sur la marge gauche et mise à l'échelle fluide,
   sur le même principe que la composition des cartes joueur.
   ============================================================ */
@media (min-width: 1301px) {
  html body #team .staff-recruit__art {
    width: min(100%, clamp(680px, 52vw, 900px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  html body #team .staff-recruit__scene.staff-recruit__scene--folio {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
  }
}

/* ============================================================
   CORRECTION 20/09/2026 — TITRE ET CTA EN BAS SUR MOBILE
   Uniquement <= 600px : le titre remonte et les deux actions sont
   réunies dans le flux au bas de la section, sans position absolue.
   ============================================================ */
html body #team .team__mobile-bottom-actions {
  display: none;
}

@media (max-width: 600px) {
  html body #team.team-section {
    padding-top: calc(var(--team-slope) + clamp(8px, 3vw, 14px)) !important;
    padding-bottom: calc(var(--team-slope) + 20px) !important;
  }

  html body #team .team__header {
    margin-top: 0 !important;
    margin-bottom: clamp(20px, 6vw, 28px) !important;
  }

  /* Les boutons d'origine restent à leur place sur tablette/PC seulement. */
  html body #team .team__info > .team__equipe-btn,
  html body #team .staff-recruit__copy > .team__partners-btn {
    display: none !important;
  }

  html body #team .team__mobile-bottom-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2.6vw, 12px);
    width: 100%;
    margin: clamp(-28px, -5vw, -16px) 0 0 !important;
    position: relative;
    z-index: 7;
  }

  html body #team .team__mobile-bottom-actions > .team__mobile-bottom-btn {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
    inset: auto !important;
    justify-content: center !important;
  }
}

/* ============================================================
   CORRECTION FINALE MOBILE 20/09/2026
   - titre réellement remonté dans le flux
   - CTA réservés dans le bas utile, au-dessus de la pente
   ============================================================ */
@media (max-width: 600px) {
  html body #team.team-section {
    padding-top: var(--team-slope) !important;
    padding-bottom: calc(var(--team-slope) + 140px) !important;
  }

  html body #team .team__header {
    margin-top: clamp(-120px, -18vw, -76px) !important;
    margin-bottom: clamp(18px, 5vw, 24px) !important;
  }

  html body #team .team__mobile-bottom-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(8px, 2.6vw, 12px) !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(-1 * (var(--team-slope) + 82px)) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 20 !important;
  }

  html body #team .team__mobile-bottom-actions > .team__mobile-bottom-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 42px !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   CORRECTION MOBILE 20/09/2026 — CTA visibles + titre légèrement abaissé
   Uniquement <= 600px. Les actions sont ancrées DANS la section,
   au-dessus de sa découpe basse, afin de ne plus être masquées par
   overflow:hidden. Les formats tablette et PC restent inchangés.
   ============================================================ */
@media (max-width: 600px) {
  html body #team .team__header {
    margin-top: calc(clamp(-120px, -18vw, -76px) + 10px) !important;
  }

  html body #team .team__mobile-bottom-actions {
    left: var(--page-pad) !important;
    right: var(--page-pad) !important;
    bottom: calc(var(--team-slope) + 18px) !important;
    width: auto !important;
  }
}

/* ============================================================
   CORRECTION 22/09/2026 — CTA AUTOUR DU TITRE « NOTRE EQUIPE »
   PC/tablette : Equipe a gauche, titre centre, Postuler a droite.
   Mobile : les deux CTA restent uniquement dans le bloc inferieur.
   ============================================================ */
@media (min-width: 601px) {
  html body #team .team__header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-areas: "btn-left title btn-right" !important;
    align-items: center !important;
    width: 100% !important;
  }

  html body #team .team__header > .team__equipe-btn {
    display: inline-flex !important;
    grid-area: btn-left !important;
    justify-self: start !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
  }

  html body #team .team__header > .section-title {
    grid-area: title !important;
    justify-self: center !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body #team .team__header > .team__partners-btn {
    display: inline-flex !important;
    grid-area: btn-right !important;
    justify-self: end !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
  }
}

@media (max-width: 600px) {
  html body #team .team__header > .team__equipe-btn,
  html body #team .team__header > .team__partners-btn {
    display: none !important;
  }
}


/* ============================================================
   AJUSTEMENT — LOGOS DES JEUX / DATE (COMMUNAUTE)
   Le visuel du jeu occupe exactement la hauteur du bloc jour + mois.
   Sa colonne conserve la largeur necessaire au logo horizontal.
   ============================================================ */
html body #eventsPin[data-flow="timed"] #events .upcoming__list {
  --upcoming-game-logo-h: 36.8px;
  --upcoming-game-logo-w: 83px;
  grid-template-columns: 38px var(--upcoming-game-logo-w) fit-content(24ch) minmax(0, 1fr) max-content max-content max-content !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__game-icon {
  width: var(--upcoming-game-logo-w) !important;
  min-width: var(--upcoming-game-logo-w) !important;
  height: var(--upcoming-game-logo-h) !important;
  min-height: var(--upcoming-game-logo-h) !important;
  align-self: center !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__game-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list {
    --upcoming-game-logo-h: 38.8px;
    --upcoming-game-logo-w: 88px;
  }
}

@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list {
    --upcoming-game-logo-h: 36.8px;
    --upcoming-game-logo-w: 83px;
    grid-template-columns: 28px var(--upcoming-game-logo-w) minmax(0, 1fr) max-content !important;
  }
}

@media (max-width: 380px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list {
    --upcoming-game-logo-w: 76px;
    grid-template-columns: 26px var(--upcoming-game-logo-w) minmax(0, 1fr) max-content !important;
  }
}

/* ============================================================
   CORRECTION 22/09/2026 — EVENEMENTS
   - hover stable, sans clignotement ni changement de geometrie
   - Bebas Neue conservee sur les titres a toutes les largeurs
   - bouton Rejoindre remplace par l'icone fournie sur <= 600px
   ============================================================ */
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:hover,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:focus-within {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  box-shadow: none !important;
  transition: none !important;
}

html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item::before {
  transition: none !important;
  animation: none !important;
}

html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:hover::before,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:focus-within::before {
  opacity: 1 !important;
}

html body #eventsPin #events .upcoming__title,
html body #eventsPin #events .upcoming__item .upcoming__title,
html body #eventsPin #events .upcoming__item .upcoming__info > strong,
html body #eventsPin #events .upcoming__list .upcoming__item h3,
html body #eventsPin #events .upcoming__list .upcoming__item h4 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .035em !important;
}

@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn--az {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: #7f95bc;
  }

  html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn--az::before {
    content: "";
    display: block;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    background: transparent url('enter-sharp-svgrepo-com.svg') center / contain no-repeat;
    pointer-events: none;
  }

  html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn--az:hover,
  html body #eventsPin[data-flow="timed"] #events .upcoming__item > .btn--az:focus-visible {
    color: #7f95bc;
    background: rgba(86, 159, 243, .18) !important;
    outline-color: rgba(94, 170, 255, .28) !important;
  }
}

/* ============================================================
   CORRECTION V2 22/09/2026 — HOVER CONSERVE + ICONE MOBILE
   ============================================================ */

/* Le hover reste visible. Seuls les changements de géométrie susceptibles
   de faire entrer/sortir le pointeur en boucle sont neutralisés. */
html body #eventsPin #events .upcoming__list .upcoming__item,
html body #eventsPin #events .upcoming__list .upcoming__item:hover,
html body #eventsPin #events .upcoming__list .upcoming__item:focus-within {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  box-shadow: none !important;
}
html body #eventsPin #events .upcoming__list .upcoming__item::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(94, 170, 255, 0) 0%,
    rgba(94, 170, 255, .055) 10%,
    rgba(94, 170, 255, .075) 50%,
    rgba(94, 170, 255, .055) 90%,
    rgba(94, 170, 255, 0) 100%
  ) !important;
  animation: none !important;
  transition: opacity 160ms ease-out !important;
}
html body #eventsPin #events .upcoming__list .upcoming__item:hover::before,
html body #eventsPin #events .upcoming__list .upcoming__item:focus-within::before {
  opacity: 1 !important;
}

/* Le hover des trois cartes supérieures est également conservé sans mouvement. */
html body #eventsPin #events .events__grid > .event-card,
html body #eventsPin #events .events__grid > .event-card:hover,
html body #eventsPin #events .events__grid > .event-card:focus-within {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}
html body #eventsPin #events .events__grid > .event-card:hover,
html body #eventsPin #events .events__grid > .event-card:focus-within {
  background: #0a1a38 !important;
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .16) !important;
}

/* L'icône SVG est injectée directement dans le bouton par script.js :
   elle ne dépend plus du chargement d'une image CSS externe. */
.mobile-join-icon { display: none; }
@media (max-width: 600px) {
  html body #eventsPin #events .upcoming__item > .btn--az {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: #7f95bc !important;
  }
  html body #eventsPin #events .upcoming__item > .btn--az::before,
  html body #eventsPin #events .upcoming__item > .btn--az::after {
    content: none !important;
    display: none !important;
  }
  html body #eventsPin #events .upcoming__item > .btn--az > .mobile-join-icon {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    fill: currentColor !important;
    pointer-events: none !important;
  }
}

/* Articles opaques à 100 %, sans fond translucide ni filtre. */
html body #eventsPin #actu .actu__grid > .actu-card {
  opacity: 1 !important;
  background: #081432 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
html body #eventsPin #actu .actu-card__img-wrap,
html body #eventsPin #actu .actu-card__body {
  opacity: 1 !important;
  filter: none !important;
}
/* La photo garde son animation : flou + assombrissement pendant
   l'affichage de l'icône réseaux, nette à nouveau ensuite. */
html body #eventsPin #actu .actu-card__photo {
  opacity: 1 !important;
  animation: actuPhotoFlash 8s ease-in-out infinite !important;
}

/* ============================================================
   CORRECTION 2026-09-23 — COMMUNAUTE, PC + TABLETTE
   - Espace reel agrandi entre la description et le compteur.
   - Le fondu de la description se termine avant cet espacement.
   - La vignette animee conserve son fond et son animation,
     mais n'affiche plus de contour.
   - Le mobile <= 600px reste strictement inchange.
   ============================================================ */
@media (min-width: 601px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item .upcoming__desc {
    padding-right: 0 !important;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - clamp(110px, 10vw, 190px)),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - clamp(110px, 10vw, 190px)),
      transparent 100%
    ) !important;
  }

  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item .upcoming__countdown {
    margin-left: clamp(32px, 3vw, 64px) !important;
  }

  html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item .upcoming__desc--empty {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  html body #events #eventsRotate {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   CORRECTION 23/09/2026 — EN-TÊTES COMMUNAUTÉ / ACTUALITÉS (PC)
   - "Rejoindre + vignette" retrouve son alignement à gauche.
   - "Dernière news" reste centrée sur la page.
   - Une introduction éditoriale centrée apparaît sous les actualités.
   Tablette et mobile restent inchangés.
   ============================================================ */
html body #eventsPin #actu .actu__intro {
  display: none;
}

@media (min-width: 1301px) {
  html body #eventsPin[data-flow="timed"] #events .events__header > .section-title {
    left: var(--scene-pad) !important;
    right: auto !important;
    width: calc(100% - 2 * var(--scene-pad) - var(--v7-cta-room, 190px)) !important;
    max-width: none !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html body #eventsPin[data-flow="timed"] #actu .actu__header > .section-title {
    left: var(--scene-pad) !important;
    right: auto !important;
    width: calc(100% - 2 * var(--scene-pad)) !important;
    max-width: none !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
    display: block !important;
    position: absolute !important;
    top: calc(var(--scene-title-y) + var(--scene-title-h) - 8px) !important;
    left: var(--scene-pad) !important;
    right: auto !important;
    width: calc(100% - 2 * var(--scene-pad)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 clamp(170px, 15vw, 250px) !important;
    color: rgba(196, 211, 235, .72) !important;
    font-family: 'Azurio', sans-serif !important;
    font-size: clamp(13px, .9vw, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: .015em !important;
    text-align: center !important;
    white-space: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(calc(-1 * (1 - var(--scene-news-enter)) * var(--scene-cta-distance)), 0, 0) !important;
    transition: none !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================
   CORRECTION 23/09/2026 — DESCRIPTION FINALE + HOVER SANS CONTOUR
   ============================================================ */

/* La description existe sur PC, tablette et mobile, mais reste totalement
   absente pendant les 2 secondes de transition. data-scene="news" n'est
   pose qu'apres la derniere image de l'animation. */
html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
  display: block !important;
  position: absolute !important;
  top: calc(var(--scene-title-y) + var(--scene-title-h) + 2px) !important;
  left: var(--scene-pad) !important;
  right: var(--scene-pad) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(100px, 13vw, 250px) !important;
  color: rgba(196, 211, 235, .72) !important;
  font-family: 'Azurio Light', 'Barlow', sans-serif !important;
  font-size: clamp(12px, .9vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

html body #eventsPin[data-flow="timed"][data-scene="news"] #actu .actu__header > .actu__intro {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 1300px) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
    padding-inline: clamp(72px, 10vw, 140px) !important;
    font-size: clamp(11px, 1.15vw, 14px) !important;
  }
}

@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
    top: calc(var(--scene-title-y) + var(--scene-title-h) - 1px) !important;
    padding-inline: 6px !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.3 !important;
  }
}

/* Les fonds de survol restent perceptibles, mais aucun contour, anneau ou
   ombre interieure ne se dessine autour des conteneurs Communaute. */
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:hover,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:hover {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   CORRECTION V2 23/09/2026 — HOVER EVENTS + INTRO ACTUALITES
   ============================================================ */

/* Meme bleu de survol que les conteneurs Tournois, sans contour. */
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:hover,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:focus-within {
  background: #0a1a38 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:hover::before,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:focus-within::before {
  opacity: 0 !important;
}

/* Police originale du site et fondu declenche uniquement a la fin de la scene. */
html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
  font-family: inherit !important;
  transition: opacity 420ms ease-out !important;
}

/* Tablette : description alignee sur la marge gauche de la page. */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
    left: var(--scene-pad) !important;
    right: var(--scene-pad) !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: clamp(150px, 20vw, 230px) !important;
    text-align: left !important;
  }
}

/* Mobile : conserve le centrage visible dans la composition mobile. */
@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
    text-align: center !important;
  }
}

/* ============================================================
   CORRECTION 2026-09-23 — ARTICLES
   - Hover identique aux conteneurs evenements/tournois (bleu #0a1a38)
   - Aucun contour qui apparait au survol
   ============================================================ */
html body #eventsPin #actu .actu__grid > .actu-card {
  transition: background-color 160ms ease-out !important;
}
html body #eventsPin #actu .actu__grid > .actu-card:hover,
html body #eventsPin #actu .actu__grid > .actu-card:focus-within {
  background: #0a1a38 !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ============================================================
   CORRECTION V3 23/09/2026 — ARTICLES + FONDU EVENTS
   ============================================================ */
/* Articles : aucun contour, y compris au survol et au clavier. */
html body #eventsPin #actu .actu__grid > .actu-card,
html body #eventsPin #actu .actu__grid > .actu-card:hover,
html body #eventsPin #actu .actu__grid > .actu-card:focus,
html body #eventsPin #actu .actu__grid > .actu-card:focus-visible,
html body #eventsPin #actu .actu__grid > .actu-card:focus-within {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Un seul article a la fois : apparition rapide, maintien pendant 4 secondes,
   disparition groupee des icones, puis passage immediat a l'article suivant. */
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__photo {
  animation: actuPhotoFlashIndividual 24s ease-in-out infinite !important;
}
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__social-icon {
  animation: actuSocialFlashIndividual 24s ease-in-out infinite !important;
}
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(1) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(1) .actu-card__social-icon { animation-delay: 0s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(2) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(2) .actu-card__social-icon { animation-delay: -20s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(3) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(3) .actu-card__social-icon { animation-delay: -16s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(4) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(4) .actu-card__social-icon { animation-delay: -12s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(5) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(5) .actu-card__social-icon { animation-delay: -8s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(6) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(6) .actu-card__social-icon { animation-delay: -4s !important; }

@keyframes actuPhotoFlashIndividual {
  0%             { filter: blur(0) brightness(1); transform: scale(1); }
  1.25%, 15.416% { filter: blur(8px) brightness(.6); transform: scale(1.05); }
  16.666%, 100%  { filter: blur(0) brightness(1); transform: scale(1); }
}
@keyframes actuSocialFlashIndividual {
  0%             { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  1.25%, 15.416% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  16.666%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}

/* Evenements Communaute : retablissement du fondu de survol aux deux cotes. */
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:hover,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:focus-within {
  background-color: transparent !important;
  background-image: none !important;
}
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:hover::before,
html body #eventsPin[data-flow="timed"] #events .upcoming__list .upcoming__item:focus-within::before {
  opacity: 1 !important;
}

/* ============================================================
   CORRECTION V2 24/09/2026 — NOTRE EQUIPE / PC > 1300px
   - Les 3 joueurs se deplacent ensemble vers la gauche.
   - Les 5 cartes sont abaissees via leurs ancrages bottom reels.
   - Aucun changement sur tablette et mobile.
   ============================================================ */
@media (min-width: 1301px) {
  .roster-card--p1 {
    left: 4% !important;
    bottom: -1% !important;
  }

  .roster-card--p2 {
    left: 22% !important;
    bottom: 11% !important;
  }

  .roster-card--p3 {
    left: 40% !important;
    bottom: -1% !important;
  }

  .roster-card--m1 { bottom: -5% !important; }
  .roster-card--m2 { bottom: 7% !important; }
}

/* ============================================================
   RECONSTRUCTION 24/09/2026 — STAFF + JOUEURS / PC
   Les vignettes sont sorties du bloc anime : elles ne suivent plus
   ni la rotation ni le mouvement du titre personnel.
   Les joueurs forment un groupe distinct a gauche des managers.
   ============================================================ */
html body #team .staff-recruit__copy-shell {
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media (min-width: 601px) {
  html body #team .staff-recruit__copy-shell {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: max-content !important;
    justify-self: end !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
}

@media (max-width: 600px) {
  html body #team .staff-recruit__copy-shell {
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
}

@media (min-width: 1301px) {
  html body #team .staff-recruit__copy-shell {
    position: relative !important;
  }

  /* Bloc autonome : aucun parent anime ne l'entraine. */
  html body #team .staff-recruit__copy-shell > .staff-banners {
    position: absolute !important;
    top: 50% !important;
    right: calc(100% + clamp(54px, 7vw, 132px)) !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  /* Uniquement l'axe horizontal : tailles, hauteurs et rotations conservees. */
  html body #team .team__composition .roster-card--p1 { left: -8% !important; }
  html body #team .team__composition .roster-card--p2 { left: 12% !important; }
  html body #team .team__composition .roster-card--p3 { left: 32% !important; }
}

/* ============================================================
   AJUSTEMENT 24/09/2026 — JOUEURS + GRAPHIQUE STAFF / PC
   - Seuls les 3 joueurs descendent legerement et vont 2% plus a gauche.
   - Les 2 managers restent strictement inchanges.
   - Le graphique circulaire staff rejoint la limite de --page-pad.
   ============================================================ */
@media (min-width: 1301px) {
  html body #team .team__composition .roster-card--p1 {
    left: -10% !important;
    bottom: 6% !important;
  }

  html body #team .team__composition .roster-card--p2 {
    left: 10% !important;
    bottom: 19% !important;
  }

  html body #team .team__composition .roster-card--p3 {
    left: 30% !important;
    bottom: 5% !important;
  }

  /* Le disque "chart" seul se cale sur la marge gauche de la page.
     Son mouvement d'entree existant reste compose avec ce decalage. */
  html body #team .staff-recruit__scene--folio .staff-recruit__graph {
    translate:
      calc(var(--staff-enter-x, 0px) - clamp(54px, 4.2vw, 70px))
      var(--staff-enter-y, 0px) !important;
  }
}

/* ============================================================
   CORRECTION 24/09/2026 — ILLUSTRATION STAFF COMPLETE / PC
   - Le graphique interne reprend exactement sa disposition d'origine.
   - L'illustration complete est deplacee comme un seul bloc vers la gauche.
   - Son element le plus a gauche vient affleurer --page-pad sans le depasser.
   ============================================================ */
@media (min-width: 1301px) {
  /* Annule le decalage isole du graphique applique precedemment. */
  html body #team .staff-recruit__scene--folio .staff-recruit__graph {
    translate:
      var(--staff-enter-x, 0px)
      var(--staff-enter-y, 0px) !important;
  }

  /* Deplace ensemble dossier, graphique, agenda et pieces. */
  html body #team .staff-recruit__art {
    transform: translateX(calc(-1 * clamp(52px, 4vw, 64px))) !important;
  }
}

/* ============================================================
   CORRECTION FINALE 24/09/2026 — CHARTE + 3 CARTES JOUEUR / PC
   - La charte complete rejoint la marge gauche de la page.
   - Les trois joueurs se deplacent comme un groupe vers la gauche
     et legerement vers le bas.
   - Managers, tablette et mobile restent strictement inchanges.
   ============================================================ */
@media (min-width: 1301px) {
  /* Charte remise strictement dans sa position PC d'origine. */
  html body #team .staff-recruit__art {
    transform: translateX(calc(-1 * clamp(52px, 4vw, 64px))) !important;
  }

  /* Meme ecartement et memes rotations : seul le groupe Joueur bouge. */
  html body #team .team__composition .roster-card--p1 {
    left: -18% !important;
    bottom: 0% !important;
  }

  html body #team .team__composition .roster-card--p2 {
    left: 2% !important;
    bottom: 13% !important;
  }

  html body #team .team__composition .roster-card--p3 {
    left: 22% !important;
    bottom: -1% !important;
  }

  /* Descend ensemble le titre roster, sa description et ses statistiques.
     La perspective animee reste intacte car son transform n'est pas modifie. */
  html body #team .team__info {
    position: relative !important;
    top: clamp(48px, 4vw, 64px) !important;
  }
}

/* ============================================================
   CORRECTION 24/09/2026 — RAPPROCHEMENT DES MANAGERS / PC
   Les managers rejoignent l'eventail des joueurs et ferment le groupe
   avant la marge droite. Tablette, mobile, tailles et animations restent
   strictement inchanges.
   ============================================================ */
@media (min-width: 1301px) {
  html body #team .team__composition .roster-card--m1 {
    left: 48% !important;
  }

  html body #team .team__composition .roster-card--m2 {
    left: 64% !important;
  }
}

/* ============================================================
   CORRECTION 24/09/2026 — CENTRAGE CHARTE STAFF + CARTES / PC
   - La charte staff est centree entre la marge gauche de la page
     et le bloc texte de droite (bandeaux + titre), avec le meme
     espacement a gauche et a droite, comme les cartes du roster.
     Le decalage exact est calcule par script.js (--staff-art-shift).
   - Les cartes du roster descendent legerement pour aerer l'espace
     sous le titre "Notre equipe".
   - Tablette et mobile restent strictement inchanges.
   ============================================================ */
@media (min-width: 1301px) {
  html body #team .staff-recruit__art {
    transform:
      translateX(var(--staff-art-shift, calc(-1 * clamp(52px, 4vw, 64px))))
      scale(var(--staff-art-scale, 1)) !important;
    transform-origin: 0 50% !important;
  }

  html body #team .team__composition {
    position: relative !important;
    top: clamp(20px, 1.7vw, 34px) !important;
  }
}

/* ============================================================
   CORRECTION 24/09/2026 (2) — STAFF, MANAGERS, HERO / PC
   - "Remuneration" et "Mise en avant" rejoignent le bloc
     "Devenir membre du personnel." (sous les statistiques, alignees
     a droite). Elles restent hors du bloc anime : aucune rotation.
   - Les 2 cartes manager glissent legerement vers la droite en
     restant collees aux cartes joueur.
   - Tablette et mobile restent inchanges.
   ============================================================ */
@media (min-width: 1301px) {
  html body #team .staff-recruit__copy-shell > .staff-banners {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    align-self: flex-end !important;
    align-items: flex-end !important;
    width: max-content !important;
    margin: clamp(18px, 1.6vw, 28px) 0 0 !important;
  }

  html body #team .team__composition .roster-card--m1 {
    left: 50.5% !important;
  }

  html body #team .team__composition .roster-card--m2 {
    left: 66.5% !important;
  }
}

/* HERO — "Voir plus" et le fondu de la description reapparaissent
   progressivement apres "Voir moins". --hero-sub-fade (0 -> 1) est
   anime par script.js ; sans script la valeur vaut 1 (etat d'origine). */
html body #home.hero .hero__sub-wrap .hero__sub:not(.expanded) {
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0, #000 50%, rgba(0, 0, 0, calc(1 - var(--hero-sub-fade, 1))) 50%),
    linear-gradient(to right, #000 0, #000 calc(100% - clamp(150px, 20vw, 270px)), rgba(0, 0, 0, calc(1 - var(--hero-sub-fade, 1))) calc(100% - clamp(70px, 9vw, 120px)));
          mask-image:
    linear-gradient(to bottom, #000 0, #000 50%, rgba(0, 0, 0, calc(1 - var(--hero-sub-fade, 1))) 50%),
    linear-gradient(to right, #000 0, #000 calc(100% - clamp(150px, 20vw, 270px)), rgba(0, 0, 0, calc(1 - var(--hero-sub-fade, 1))) calc(100% - clamp(70px, 9vw, 120px)));
}

/* ============================================================
   TEAM — mosaique de triangles (24/09/2026)
   Angle haut gauche + angle bas droit, aux couleurs de la page.
   Decor fixe : aucune animation, aucun clic, sous le contenu.
   Les triangles vont jusqu'au bord incline de la section.
   ============================================================ */
html body #team .team__mosaic {
  position: absolute;
  z-index: 0;
  width: 23vw;
  aspect-ratio: 640 / 659;
  pointer-events: none;
  opacity: .72;
  mix-blend-mode: screen;
}
html body #team .team__mosaic svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Les mosaiques touchent le vrai bord de la section : c'est la pente
   (clip-path de #team) qui les decoupe, en suivant son inclinaison. */
html body #team .team__mosaic--tl {
  top: 0;
  left: 0;
}
html body #team .team__mosaic--br {
  aspect-ratio: 640 / 539;
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}
/* Largeur liee a la pente (5vw) : les triangles suivent exactement le
   bord incline. Au-dela des bornes de la pente, on garde le meme ratio. */
@media (max-width: 720px) {
  html body #team .team__mosaic {
    width: calc(clamp(36px, 5vw, 110px) * 4.6);
    opacity: .55;
  }
}
@media (min-width: 2200px) {
  html body #team .team__mosaic {
    width: calc(clamp(36px, 5vw, 110px) * 4.6);
  }
}

/* ============================================================
   TEAM — VIGNETTES (24/09/2026)
   1. "Plusieurs jeux, une equipe." : disposition d'origine conservee
      (losange a gauche, trait a droite).
   2. "Remuneration / Mise en avant" recreees : la bande part
      directement du carre icone, sans coupure ni vide.
   3. Animations d'entree : roster de gauche a droite, staff de
      droite a gauche (classes posees par script.js).
   ============================================================ */

/* ---- 2. Bandeaux staff recrees ---- */
html body #team .staff-recruit__copy-shell .staff-banner {
  --bar-w: clamp(210px, 18.6vw, 272px);
  --diamond: clamp(30px, 2.6vw, 38px);
  --banner-h: calc(var(--diamond) * .86);
  --tuck: calc(var(--diamond) * .6);
  display: flex;
  align-items: center;
  height: var(--banner-h);
  padding: 0;
  overflow: visible;
}
/* Carre icone : parallelogramme net, icone droite. */
html body #team .staff-recruit__copy-shell .staff-banner__diamond {
  z-index: 2;
  flex: 0 0 auto;
  width: var(--diamond);
  height: 100%;
  margin: 0;
  transform: none;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
}
html body #team .staff-recruit__copy-shell .staff-banner__diamond svg {
  width: calc(var(--banner-h) * .56);
  height: calc(var(--banner-h) * .56);
  transform: none;
}
/* Bande : elle demarre SOUS le carre, donc elle est collee a son bord
   incline sur toute sa hauteur ; seule la pointe droite est biseautee. */
html body #team .staff-recruit__copy-shell .staff-banner__bar {
  z-index: 1;
  flex: 0 0 auto;
  width: var(--bar-w);
  height: 78%;
  margin-left: calc(-1 * var(--tuck));
  padding-left: calc(var(--tuck) + 12px);
  padding-right: calc(var(--diamond) * .9);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
@media (max-width: 600px) {
  html body #team .staff-recruit__copy-shell .staff-banner {
    --bar-w: clamp(186px, 56vw, 236px);
    --diamond: 27px;
  }
}

/* ---- 3. Animations d'entree ---- */
@keyframes velraVignetteLtr {
  from { opacity: 0; transform: translateX(-18px); clip-path: inset(-24px 100% -24px -24px); }
  to   { opacity: 1; transform: none;              clip-path: inset(-24px -24px -24px -24px); }
}
@keyframes velraVignetteRtl {
  from { opacity: 0; transform: translateX(18px); clip-path: inset(-24px -24px -24px 100%); }
  to   { opacity: 1; transform: none;             clip-path: inset(-24px -24px -24px -24px); }
}
html.velra-vignettes-js body #team .team__info .team__ribbon-stat,
html.velra-vignettes-js body #team .staff-recruit__copy .team__ribbon-stat,
html.velra-vignettes-js body #team .staff-recruit__copy-shell .staff-banner {
  opacity: 0;
}
html.velra-vignettes-js body #team .team__info .team__ribbon-stats.is-vignettes-in .team__ribbon-stat {
  animation: velraVignetteLtr .62s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--vi, 0) * 130ms);
}
html.velra-vignettes-js body #team .staff-recruit__copy .team__ribbon-stats.is-vignettes-in .team__ribbon-stat,
html.velra-vignettes-js body #team .staff-recruit__copy-shell .staff-banners.is-vignettes-in .staff-banner {
  animation: velraVignetteRtl .62s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--vi, 0) * 130ms);
}
@media (prefers-reduced-motion: reduce) {
  html.velra-vignettes-js body #team .team__ribbon-stat,
  html.velra-vignettes-js body #team .staff-banner {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ============================================================
   ARTICLES — ICONES RESEAUX EN BOUCLE (24/09/2026)
   Les icones apparaissent chacune a leur tour, rapidement, restent
   4 secondes, puis disparaissent de la meme facon (meme ordre,
   meme rapidite) et restent cachees 4 secondes. Et ainsi de suite.
   Cycle : 0,3 s apparition + 4 s visible + 0,3 s disparition + 4 s cache.
   Le flou de la photo suit exactement son icone.
   ============================================================ */
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__photo {
  animation: actuPhotoLoop 8.6s ease-in-out infinite !important;
}
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__social-icon {
  animation: actuSocialLoop 8.6s ease-in-out infinite !important;
}
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(1) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(1) .actu-card__social-icon { animation-delay: 0s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(2) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(2) .actu-card__social-icon { animation-delay: .18s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(3) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(3) .actu-card__social-icon { animation-delay: .36s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(4) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(4) .actu-card__social-icon { animation-delay: .54s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(5) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(5) .actu-card__social-icon { animation-delay: .72s !important; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(6) .actu-card__photo,
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(6) .actu-card__social-icon { animation-delay: .9s !important; }

@keyframes actuPhotoLoop {
  0%            { filter: blur(0) brightness(1); transform: scale(1); }
  3.49%, 50%    { filter: blur(8px) brightness(.6); transform: scale(1.05); }
  53.49%, 100%  { filter: blur(0) brightness(1); transform: scale(1); }
}
@keyframes actuSocialLoop {
  0%            { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  3.49%, 50%    { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  53.49%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  html body #eventsPin #actu .actu__grid > .actu-card .actu-card__photo,
  html body #eventsPin #actu .actu__grid > .actu-card .actu-card__social-icon {
    animation: none !important;
  }
}

/* ============================================================
   PROCHAINS EVENEMENTS — AUCUN DEPLACEMENT AU SURVOL (24/09/2026)
   Le survol retirait le trait de separation (1px) : le contenu de la
   ligne descendait alors d'un demi-pixel. Le trait garde maintenant
   son epaisseur et devient seulement invisible : fond de survol
   identique, zero mouvement.
   ============================================================ */
html body #eventsPin #events .upcoming__list .upcoming__item:not(:last-child):hover,
html body #eventsPin #events .upcoming__list .upcoming__item:not(:last-child):focus-within {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: transparent !important;
}
/* Derniere ligne visible selon la largeur (5e sur tablette, 4e sur
   mobile) : elle n'a pas de trait, le survol n'en ajoute pas. */
@media (max-width: 1300px) {
  html body #eventsPin #events .upcoming__list .upcoming__item:nth-child(5):hover,
  html body #eventsPin #events .upcoming__list .upcoming__item:nth-child(5):focus-within {
    border-bottom-width: 0 !important;
    border-bottom-style: none !important;
  }
}
@media (max-width: 600px) {
  html body #eventsPin #events .upcoming__list .upcoming__item:nth-child(4):hover,
  html body #eventsPin #events .upcoming__list .upcoming__item:nth-child(4):focus-within {
    border-bottom-width: 0 !important;
    border-bottom-style: none !important;
  }
}

/* ============================================================
   APPARITION "LIGNE MASQUEE" (hero uniquement) — meme effet que
   "Apprenez des meilleurs." (services.css : srvLineReveal).
   Les conteneurs Communaute gardent leur fondu d'origine.
   Le texte monte depuis sous sa propre ligne, qui sert de masque :
   translateY(100%) + opacite 0 -> position finale, 1 s,
   cubic-bezier(.22, 1, .36, 1), lignes decalees de 0,15 s.
   ============================================================ */

/* ---- HERO : "Chaque jour. Chaque match." puis "On joue pour gagner." ---- */
@keyframes velraHeroLineReveal {
  from { translate: 0 calc(100% + .04em); }
  to { translate: 0 0; }
}
@keyframes velraHeroSoftIn { from { opacity: 0; } to { opacity: 1; } }

/* Le bloc titre ne fait plus de fondu global : chaque ligne a son effet. */
html body #home.hero .hero__content > .hero__copy-wrap {
  animation: none;
  opacity: 1;
  transform: none;
}
html body #home.hero .hero__headline-wrap > .hero__motto,
html body #home.hero .hero__headline-wrap > .hero__title {
  animation: velraHeroLineReveal 1s cubic-bezier(.22, 1, .36, 1) backwards;
}
html body #home.hero .hero__headline-wrap > .hero__motto { animation-delay: .4s; }
html body #home.hero .hero__headline-wrap > .hero__title { animation-delay: .55s; }
/* Les 2 traits verticaux : rien au depart, puis le trait se dessine
   depuis son bas jusqu'a son haut. Leur geometrie est mesuree sur la
   position FINALE du texte (script.js), ils ne sont donc jamais casses
   pendant que les lignes montent. */
@keyframes velraHeroRailGrow {
  from { clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0); }
}
html body #home.hero .hero__headline-wrap > .hero__block-line {
  animation: velraHeroRailGrow .9s cubic-bezier(.22, 1, .36, 1) .4s backwards;
}
html body #home.hero .hero__sub-wrap > .hero__block-line {
  animation: velraHeroRailGrow .9s cubic-bezier(.22, 1, .36, 1) .85s backwards;
}
html body #home.hero .hero__copy-wrap > .hero__sub-wrap {
  animation: fadeUp .8s cubic-bezier(.2, .8, .2, 1) .75s backwards;
}
@media (prefers-reduced-motion: reduce) {
  html body #home.hero .hero__headline-wrap > .hero__motto,
  html body #home.hero .hero__headline-wrap > .hero__title,
  html body #home.hero .hero__headline-wrap > .hero__block-line,
  html body #home.hero .hero__sub-wrap > .hero__block-line,
  html body #home.hero .hero__copy-wrap > .hero__sub-wrap {
    animation: none;
  }
}

/* ============================================================
   DERNIERE NEWS — description : meme apparition que
   "Sessions de mise en situation reelle et interactive"
   (services.css .reveal -> .revealed : opacite 0 + 40px plus bas,
   0,9 s cubic-bezier(.22, 1, .36, 1)). Declenchee a l'arrivee sur
   les actualites ; au depart elle disparait immediatement.
   ============================================================ */
html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
  translate: 0 40px;
  transition: none !important;
}
html body #eventsPin[data-flow="timed"][data-scene="news"] #actu .actu__header > .actu__intro {
  translate: 0 0;
  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1),
    translate .9s cubic-bezier(.22, 1, .36, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro { translate: none; }
}

/* Phrase bleue sous la description "Dernière news" : même mouvement,
   mais dans un second temps, une fois l’animation de la description terminée. */
html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro::after {
  content: "Devient témoin de nos progrès";
  display: block;
  margin-top: 6px;
  color: var(--accent, #5eaaff);
  font-weight: 600;
  opacity: 0;
  translate: 0 40px;
  transition: none;
}
html body #eventsPin[data-flow="timed"][data-scene="news"] #actu .actu__header > .actu__intro::after {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1) .9s,
    translate .9s cubic-bezier(.22, 1, .36, 1) .9s;
}
@media (prefers-reduced-motion: reduce) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro::after {
    translate: none;
    transition-delay: 0s;
  }
}

/* ============================================================
   DERNIERE NEWS — descriptions PENDANT l'animation (2000 ms)
   --scene-news-intro  : description grise (40% -> 80% de la scene)
   --scene-news-accent : phrase bleue (62% -> 100%), elle se termine
   exactement sur la derniere image de l'animation de la section.
   Pilotees image par image par initCommunityScene (script.js) :
   aucune transition CSS, donc parfaitement reversible au retour.
   ============================================================ */
html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro,
html body #eventsPin[data-flow="timed"][data-scene="news"] #actu .actu__header > .actu__intro {
  opacity: var(--scene-news-intro, 0) !important;
  visibility: visible !important;
  translate: 0 calc((1 - var(--scene-news-intro, 0)) * 40px) !important;
  transition: none !important;
}
html body #eventsPin[data-flow="timed"][data-scene="community"] #actu .actu__header > .actu__intro {
  visibility: hidden !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro::after,
html body #eventsPin[data-flow="timed"][data-scene="news"] #actu .actu__header > .actu__intro::after {
  /* L'opacite du parent est deja appliquee : on compense pour que la phrase
     bleue suive uniquement sa propre courbe une fois le parent visible. */
  opacity: var(--scene-news-accent, 0) !important;
  translate: 0 calc((1 - var(--scene-news-accent, 0)) * 40px) !important;
  transition: none !important;
}
/* Mode statique (petits ecrans / mouvement reduit) : tout est visible. */
html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__header > .actu__intro,
html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__header > .actu__intro::after {
  opacity: 1 !important; visibility: visible !important; translate: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro,
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro::after { translate: none !important; }
}

/* ============================================================
   FOND COMMUNAUTE — FERMETURE ALIGNEE SUR LE CONTENEUR (tous formats)
   Le fond bleu se referme exactement sur la ligne centrale du conteneur
   Communaute (.events__merge), mesuree par initCommunityScene :
   --scene-bg-close-top    = distance bord haut du fond -> ligne
   --scene-bg-close-bottom = distance bord bas du fond  -> ligne
   Meme courbe (--scene-close) que le conteneur : les deux se ferment
   ensemble, le bord le plus proche avance simplement moins vite.
   ============================================================ */
html body #eventsPin[data-flow="timed"] #events > .community-bg,
html body #eventsPin[data-flow="timed"][data-community-art] #events.community-perspective > .community-bg {
  clip-path: inset(
    calc(var(--scene-close) * var(--scene-bg-close-top, 50%))
    0
    calc(var(--scene-close) * var(--scene-bg-close-bottom, 50%))
    0
  ) !important;
  -webkit-clip-path: inset(
    calc(var(--scene-close) * var(--scene-bg-close-top, 50%))
    0
    calc(var(--scene-close) * var(--scene-bg-close-bottom, 50%))
    0
  ) !important;
}
html body #eventsPin[data-flow="timed"][data-static="1"] #events > .community-bg {
  clip-path: none !important; -webkit-clip-path: none !important;
}

/* ============================================================
   BOUTON "CREATEURS" — miroir du bouton "Articles" (25/09/2026)
   Meme apparition que "Articles" mais depuis la GAUCHE, sur la meme
   horloge (--scene-news-enter). Il n'ouvre rien pour l'instant.
   ============================================================ */
.btn-cta.btn-cta--mirror { font: inherit; border: 0; }
.btn-cta--mirror .btn-cta__label { margin-right: 0 !important; margin-left: clamp(20px, 2.2vw, 32px) !important; }
.btn-cta--mirror .btn-cta__icon { right: auto !important; left: 4px !important; }
/* Meme fleche que le bouton "equipe" : fleche vers la gauche. */
.btn-cta--mirror .btn-cta__icon svg { width: 16px; height: 16px; transform: scaleX(-1); }

html body #eventsPin[data-flow="timed"] #actu .actu__header > .btn-cta.actu__creators-btn {
  left: var(--scene-pad) !important;
  right: auto !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: #040e1e !important;
  cursor: pointer !important;
  transform: translate3d(calc(-1 * (1 - var(--scene-news-enter)) * var(--scene-cta-distance)), 0, 0) !important;
}
/* Tablette : les deux boutons encadrent le titre -> titre et description centres. */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .section-title {
    left: var(--scene-pad) !important;
    right: auto !important;
    width: calc(100% - 2 * var(--scene-pad)) !important;
    justify-content: center !important;
    text-align: center !important;
  }
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
    padding-left: clamp(72px, 10vw, 140px) !important;
    padding-right: clamp(72px, 10vw, 140px) !important;
    text-align: center !important;
  }
}
/* Mobile : "Articles" et "Createurs" cote a cote sous les articles. */
@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .btn-cta {
    min-width: 0 !important;
    width: calc(50% - var(--scene-pad) - 6px) !important;
    max-width: 170px !important;
    padding: 0 12px !important;
  }
  html body #eventsPin[data-flow="timed"] #actu .actu__header > a.btn-cta {
    left: calc(50% + 6px) !important;
    right: auto !important;
    translate: 0 -50% !important;
  }
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .btn-cta.actu__creators-btn {
    left: auto !important;
    right: calc(50% + 6px) !important;
    translate: 0 -50% !important;
  }
}
/* Mode statique : bouton visible sans deplacement. */
html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__header > .btn-cta.actu__creators-btn { transform: none !important; }

/* ============================================================
   NOS CREATEURS DE CONTENU (25/09/2026)
   Grande vignette 16:9 a gauche + 4 vignettes a droite : 2 en haut,
   2 en bas, alignees sur le HAUT et le BAS de la grande vignette.
   Avatar rond + nom sous chaque vignette, puis le titre de la video.
   Badge reseau (logo + YouTube / TikTok) en haut a gauche.
   ============================================================ */
.creators-section {
  position: relative;
  background: #040c1a;
  color: var(--text, #eaf2ff);
  padding: clamp(28px, 4vw, 64px) 0 clamp(56px, 7vw, 110px);
  overflow: hidden;
}
.creators__inner {
  container-type: inline-size;
  width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(24px, 4vw, 80px);
}
.creators__title {
  margin: 0 0 clamp(22px, 2.6vw, 40px);
  font-family: var(--font-display, 'Azurio Bold'), sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 3.8vw, 64px);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text, #eaf2ff);
  opacity: 0;
  translate: 0 28px;
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), translate .8s cubic-bezier(.22, 1, .36, 1);
}
.creators-section.is-visible .creators__title { opacity: 1; translate: 0 0; }

/* ---- Grille : colonnes 2.2fr | 1fr | 1fr ----
   H  = hauteur de la grande vignette (16:9 de sa colonne)
   Rangees : [vignette haut][meta haut][vignette bas][meta bas]
   h  = (H - meta - 2 * gap) / 2  -> la vignette basse finit pile sur H. */
.creators__showcase {
  --cv-gap: clamp(14px, 1.4vw, 22px);
  --cv-row-gap: 10px;
  --cv-meta: 58px;
  --cv-big-w: calc((100cqw - 2 * var(--cv-gap)) * 2.2 / 4.2);
  --cv-H: calc(var(--cv-big-w) * 9 / 16);
  --cv-h: calc((var(--cv-H) - var(--cv-meta) - 2 * var(--cv-row-gap)) / 2);
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: var(--cv-h) var(--cv-meta) var(--cv-h) auto;
  column-gap: var(--cv-gap);
  row-gap: var(--cv-row-gap);
  opacity: 0;
  translate: 0 36px;
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1) .12s, translate .9s cubic-bezier(.22, 1, .36, 1) .12s;
}
.creators-section.is-visible .creators__showcase { opacity: 1; translate: 0 0; }
.creators__showcase.is-empty { display: block; }
.creator-video { display: contents; }
.creator-video--big .creator-video__media { grid-column: 1; grid-row: 1 / 4; }
.creator-video--big .creator-video__meta  { grid-column: 1; grid-row: 4; }
.creator-video--s1 .creator-video__media  { grid-column: 2; grid-row: 1; }
.creator-video--s1 .creator-video__meta   { grid-column: 2; grid-row: 2; }
.creator-video--s2 .creator-video__media  { grid-column: 3; grid-row: 1; }
.creator-video--s2 .creator-video__meta   { grid-column: 3; grid-row: 2; }
.creator-video--s3 .creator-video__media  { grid-column: 2; grid-row: 3; }
.creator-video--s3 .creator-video__meta   { grid-column: 2; grid-row: 4; }
.creator-video--s4 .creator-video__media  { grid-column: 3; grid-row: 3; }
.creator-video--s4 .creator-video__meta   { grid-column: 3; grid-row: 4; }

.creator-video__media {
  position: relative;
  min-width: 0; min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #0a1a38;
  isolation: isolate;
}
.creator-video--big .creator-video__media { aspect-ratio: 16 / 9; }
.creator-video__link { position: absolute; inset: 0; display: block; color: #fff; }
.creator-video__img, .creator-video__blur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .4s ease;
}
.creator-video__img--contain { object-fit: contain; z-index: 1; }
.creator-video__blur { filter: blur(22px) brightness(.55) saturate(1.2); transform: scale(1.25); }
.creator-video__link::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(4, 12, 26, .38) 0%, rgba(4, 12, 26, 0) 38%, rgba(4, 12, 26, 0) 70%, rgba(4, 12, 26, .35) 100%);
  pointer-events: none;
}
.creator-video__play {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: clamp(38px, 3.4vw, 58px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(4, 14, 30, .62); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  translate: -50% -50%; scale: .86; opacity: 0;
  transition: opacity .3s ease, scale .4s cubic-bezier(.22, 1, .36, 1), background .3s ease;
}
.creator-video--s1 .creator-video__play, .creator-video--s2 .creator-video__play,
.creator-video--s3 .creator-video__play, .creator-video--s4 .creator-video__play { width: clamp(30px, 2.4vw, 42px); }
.creator-video__play svg { width: 42%; height: 42%; margin-left: 8%; }
.creator-video__link:hover .creator-video__img:not(.creator-video__img--contain),
.creator-video__link:focus-visible .creator-video__img:not(.creator-video__img--contain) { transform: scale(1.04); }
.creator-video__link:hover .creator-video__play,
.creator-video__link:focus-visible .creator-video__play { opacity: 1; scale: 1; background: var(--accent, #5eaaff); color: #040e1e; }
.creator-video__link:focus-visible { outline: 2px solid var(--accent, #5eaaff); outline-offset: -2px; }

.creator-video__badge {
  position: absolute; z-index: 4; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 3px;
  background: #040e1e;
  color: #fff;
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1; text-decoration: none;
  transition: background .2s ease;
}
.creator-video--big .creator-video__badge { top: 12px; left: 12px; font-size: 11px; padding: 6px 10px 6px 8px; }
.creator-video__badge-icon { display: inline-grid; width: 14px; height: 14px; }
.creator-video--big .creator-video__badge-icon { width: 16px; height: 16px; }
.creator-video__badge-icon svg { width: 100%; height: 100%; }
.creator-video[data-platform="youtube"] .creator-video__badge-icon { color: #ff0033; }
.creator-video[data-platform="tiktok"] .creator-video__badge-icon { color: #fff; filter: drop-shadow(1px 0 0 #fe2c55) drop-shadow(-1px 0 0 #25f4ee); }
.creator-video__badge:hover, .creator-video__badge:focus-visible { background: #0a1a38; }

.creator-video__meta {
  min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 5px;
  padding-top: 2px;
  overflow: hidden;
}
.creator-video__author {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  width: max-content; max-width: 100%;
  color: var(--text, #eaf2ff); text-decoration: none;
}
.creator-video__avatar {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  overflow: hidden; background: #0a1a38;
  box-shadow: 0 0 0 1px rgba(94, 170, 255, .35);
}
.creator-video--big .creator-video__avatar { width: 30px; height: 30px; }
.creator-video__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.creator-video__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  transition: color .2s ease;
}
.creator-video--big .creator-video__name { font-size: 14px; }
.creator-video__author:hover .creator-video__name,
.creator-video__author:focus-visible .creator-video__name { color: var(--accent, #5eaaff); }
.creator-video__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden;
  color: rgba(196, 211, 235, .78); text-decoration: none;
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: 12.5px; line-height: 1.35;
}
.creator-video--big .creator-video__title { -webkit-line-clamp: 2; font-size: clamp(13px, 1vw, 16px); color: rgba(220, 230, 246, .9); }
.creator-video__title:hover { color: #fff; }

/* Chargement + emplacements vides */
.creator-video--skeleton .creator-video__media,
.creator-video--skeleton .creator-video__meta::before,
.creator-video--skeleton .creator-video__meta::after {
  background: linear-gradient(90deg, #08152e 0%, #0d1f42 45%, #08152e 90%);
  background-size: 220% 100%;
  animation: velraCreatorsShimmer 1.4s linear infinite;
}
.creator-video--skeleton .creator-video__meta::before { content: ""; display: block; width: 46%; height: 12px; border-radius: 3px; margin-top: 4px; }
.creator-video--skeleton .creator-video__meta::after  { content: ""; display: block; width: 78%; height: 10px; border-radius: 3px; }
@keyframes velraCreatorsShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.creator-video--empty .creator-video__media {
  background: repeating-linear-gradient(135deg, #07132a 0 12px, #081630 12px 24px);
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .08);
}
.creators__empty {
  margin: 0; padding: 48px 24px; text-align: center;
  color: rgba(255, 255, 255, .55); font-size: 15px; letter-spacing: .02em;
}

/* ---- Carrousel de tous les createurs ---- */
.creators__rail {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(30px, 3.4vw, 54px);
  opacity: 0; translate: 0 36px;
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1) .24s, translate .9s cubic-bezier(.22, 1, .36, 1) .24s;
}
.creators-section.is-visible .creators__rail { opacity: 1; translate: 0 0; }
.creators__rail[hidden] { display: none; }
.creators__rail-track {
  display: flex; gap: clamp(10px, 1vw, 16px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px;
}
.creators__rail-track::-webkit-scrollbar { display: none; }
.creators__rail-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: 6px;
  background: var(--accent, #5eaaff); color: #040e1e; cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
.creators__rail-btn svg { width: 18px; height: 18px; }
.creators__rail-btn:hover:not(:disabled) { background: #8cc3ff; }
.creators__rail-btn:focus-visible { outline: 2px solid #8cc3ff; outline-offset: 2px; }
.creators__rail-btn:disabled { opacity: .28; cursor: default; }
.creators__rail.is-static .creators__rail-btn { visibility: hidden; }
.creators__rail.is-static .creators__rail-track { justify-content: center; }

.creator-tile {
  position: relative; flex: 0 0 auto;
  width: clamp(112px, 9.2vw, 168px); aspect-ratio: 3 / 4;
  border-radius: 6px; overflow: hidden;
  background: #0a1a38; color: #fff; text-decoration: none;
  scroll-snap-align: start;
}
.creator-tile__img, .creator-tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.creator-tile__img img { object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.creator-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 12, 26, 0) 45%, rgba(4, 12, 26, .92) 100%);
}
.creator-tile__net {
  position: absolute; z-index: 2; top: 8px; left: 8px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 3px;
  background: #040e1e;
}
.creator-tile__net svg { width: 14px; height: 14px; }
.creator-tile[data-platform="youtube"] .creator-tile__net { color: #ff0033; }
.creator-tile[data-platform="tiktok"] .creator-tile__net { color: #fff; }
.creator-tile__name {
  position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px;
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .2s ease;
}
.creator-tile:hover .creator-tile__img img, .creator-tile:focus-visible .creator-tile__img img { transform: scale(1.06); }
.creator-tile:hover .creator-tile__name, .creator-tile:focus-visible .creator-tile__name { color: var(--accent, #5eaaff); }
.creator-tile:focus-visible { outline: 2px solid var(--accent, #5eaaff); outline-offset: 2px; }

/* ---- Tablette / mobile : grande vignette en haut, 2 x 2 dessous ---- */
@media (max-width: 1024px) {
  .creators__showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    row-gap: 8px;
  }
  .creator-video__media { aspect-ratio: 16 / 9; }
  .creator-video--big .creator-video__media { grid-column: 1 / -1; grid-row: 1; }
  .creator-video--big .creator-video__meta  { grid-column: 1 / -1; grid-row: 2; margin-bottom: 14px; }
  .creator-video--s1 .creator-video__media, .creator-video--s2 .creator-video__media { grid-row: 3; }
  .creator-video--s1 .creator-video__meta,  .creator-video--s2 .creator-video__meta  { grid-row: 4; margin-bottom: 14px; }
  .creator-video--s3 .creator-video__media, .creator-video--s4 .creator-video__media { grid-row: 5; }
  .creator-video--s3 .creator-video__meta,  .creator-video--s4 .creator-video__meta  { grid-row: 6; }
  .creator-video--s1 .creator-video__media, .creator-video--s1 .creator-video__meta,
  .creator-video--s3 .creator-video__media, .creator-video--s3 .creator-video__meta { grid-column: 1; }
  .creator-video--s2 .creator-video__media, .creator-video--s2 .creator-video__meta,
  .creator-video--s4 .creator-video__media, .creator-video--s4 .creator-video__meta { grid-column: 2; }
}
@media (max-width: 600px) {
  .creators__inner { padding-inline: clamp(12px, 4vw, 22px); }
  .creators__title { font-size: min(30px, 7.3vw); }
  .creators__showcase { column-gap: 10px; }
  .creator-video__badge { top: 6px; left: 6px; padding: 3px 6px 3px 5px; font-size: 9px; gap: 4px; }
  .creator-video__badge-icon { width: 12px; height: 12px; }
  .creator-video__name { font-size: 11px; }
  .creator-video__title { font-size: 11.5px; }
  .creators__rail-btn { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .creators__title, .creators__showcase, .creators__rail { opacity: 1; translate: none; transition: none; }
  .creator-video--skeleton .creator-video__media,
  .creator-video--skeleton .creator-video__meta::before,
  .creator-video--skeleton .creator-video__meta::after { animation: none; }
}
/* Avatar rond demande (exception a la regle "aucun angle arrondi"). */
.creator-video__avatar, .creator-video__avatar img { border-radius: 50% !important; }
/* Coin coupe en haut a droite, comme les cartes articles. */
.creator-video__media, .creator-tile {
  --cv-cut: 12px;
  clip-path: polygon(0 0, calc(100% - var(--cv-cut)) 0, 100% var(--cv-cut), 100% 100%, 0 100%);
}
.creator-video--big .creator-video__media { --cv-cut: 20px; }
/* Bouton miroir : pastille a largeur fixe pour que le libelle ne passe jamais dessous. */
.btn-cta--mirror .btn-cta__icon { width: 38px !important; min-width: 38px !important; }
.btn-cta--mirror .btn-cta__label { margin-left: 34px !important; }
.btn-cta--mirror:hover .btn-cta__icon, .btn-cta--mirror:focus-visible .btn-cta__icon { width: calc(100% - 8px) !important; }

/* ============================================================
   CREATEURS V2 (26/09/2026) — description, rotation 4 s, formats courts
   ============================================================ */
.creators__title { margin-bottom: clamp(10px, 1vw, 16px); }
.creators__intro {
  max-width: 760px;
  margin: 0 auto clamp(24px, 2.8vw, 44px);
  padding-inline: 12px;
  color: rgba(196, 211, 235, .72);
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: clamp(12.5px, .95vw, 16px);
  line-height: 1.5;
  text-align: center;
  opacity: 0; translate: 0 24px;
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1) .06s, translate .8s cubic-bezier(.22, 1, .36, 1) .06s;
}
.creators-section.is-visible .creators__intro { opacity: 1; translate: 0 0; }

/* Changement des 5 videos toutes les 4 s : sortie (fondu + leger recul),
   entree (fondu + leger zoom), decalee vignette par vignette. */
.creator-video .creator-video__media,
.creator-video .creator-video__meta {
  transition: opacity .32s ease, transform .5s cubic-bezier(.22, 1, .36, 1), filter .32s ease;
}
.creator-video.is-leaving .creator-video__media { opacity: 0; transform: scale(.97); filter: blur(4px); }
.creator-video.is-leaving .creator-video__meta { opacity: 0; transform: translateY(6px); }
.creator-video.is-entering .creator-video__media { opacity: 0; transform: scale(1.03); filter: blur(4px); transition: none; }
.creator-video.is-entering .creator-video__meta { opacity: 0; transform: translateY(-6px); transition: none; }

/* ---- Formats courts TikTok ---- */
.creators__shorts {
  margin-top: clamp(34px, 3.6vw, 60px);
  opacity: 0; translate: 0 36px;
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1) .24s, translate .9s cubic-bezier(.22, 1, .36, 1) .24s;
}
.creators-section.is-visible .creators__shorts { opacity: 1; translate: 0 0; }
.creators__shorts[hidden] { display: none; }
.creators__shorts-label {
  margin: 0 0 14px;
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent, #5eaaff); text-align: center;
}
.creators__shorts-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(4px, .8vw, 12px);
}
.creators__shorts-viewport {
  position: relative; overflow: hidden;
  padding-block: 6px;
}
.creators__shorts-track {
  display: flex; column-gap: clamp(10px, 1vw, 18px);
  width: max-content; will-change: transform;
}
/* Fleches seules, sans fond ni contour. */
.creators__shorts-btn {
  display: grid; place-items: center;
  width: 36px; height: 56px; padding: 0;
  border: 0; outline: 0; background: none !important; box-shadow: none;
  color: var(--accent, #5eaaff); cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.creators__shorts-btn svg { width: 30px; height: 30px; }
.creators__shorts-btn:hover { color: #fff; }
.creators__shorts-btn--prev:hover { transform: translateX(-3px); }
.creators__shorts-btn--next:hover { transform: translateX(3px); }
.creators__shorts-btn:focus-visible { outline: 2px solid var(--accent, #5eaaff); outline-offset: 2px; }

.short-card { flex: 0 0 auto; width: clamp(150px, 12.5vw, 220px); }
.short-card__inner {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  background: #0a1a38;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  will-change: transform, opacity;
}
.short-card__link { position: absolute; inset: 0; display: block; color: #fff; }
.short-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.short-card__link::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 12, 26, .35) 0%, rgba(4, 12, 26, 0) 26%, rgba(4, 12, 26, 0) 52%, rgba(4, 12, 26, .94) 100%);
}
.short-card__link:hover .short-card__img { transform: scale(1.05); }
.short-card__link .creator-video__play { width: clamp(34px, 2.6vw, 46px); }
.short-card__link:hover .creator-video__play,
.short-card__link:focus-visible .creator-video__play { opacity: 1; scale: 1; background: var(--accent, #5eaaff); color: #040e1e; }
.short-card__badge { top: 8px; left: 8px; }
.short-card__badge .creator-video__badge-icon { color: #fff; filter: drop-shadow(1px 0 0 #fe2c55) drop-shadow(-1px 0 0 #25f4ee); }
.short-card__meta {
  position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.short-card__author { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #fff; text-decoration: none; pointer-events: auto; width: max-content; max-width: 100%; }
.short-card__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body, 'Barlow'), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.short-card__author:hover .short-card__name { color: var(--accent, #5eaaff); }
.short-card__title {
  margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-family: var(--font-body, 'Barlow'), sans-serif; font-size: 11.5px; line-height: 1.35;
  color: rgba(220, 230, 246, .85);
}
@media (max-width: 600px) {
  .short-card { width: clamp(120px, 38vw, 160px); }
  .creators__shorts-btn { width: 26px; }
  .creators__shorts-btn svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .creators__intro, .creators__shorts { opacity: 1; translate: none; transition: none; }
  .creator-video .creator-video__media, .creator-video .creator-video__meta { transition: none; }
}

/* ============================================================
   ARTICLES — FLOU SANS CONTOUR TRANSPARENT (27/09/2026)
   Le flou n'est plus applique a la photo (filter: blur laissait
   apparaitre le fond sur les bords). Une couche posee sur l'image
   floute ce qui se trouve derriere elle (backdrop-filter) : les bords
   sont prolonges en miroir, donc aucun contour transparent, et
   aucun effet de zoom. Meme rythme que l'icone (8,6 s).
   ============================================================ */
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__photo {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__img-wrap { position: relative; }
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(0px) brightness(1);
  backdrop-filter: blur(0px) brightness(1);
  animation: actuBackdropLoop 8.6s ease-in-out infinite;
}
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__cat-badge,
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__social-icon { z-index: 2; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(2) .actu-card__img-wrap::after { animation-delay: .18s; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(3) .actu-card__img-wrap::after { animation-delay: .36s; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(4) .actu-card__img-wrap::after { animation-delay: .54s; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(5) .actu-card__img-wrap::after { animation-delay: .72s; }
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(6) .actu-card__img-wrap::after { animation-delay: .9s; }
@keyframes actuBackdropLoop {
  0%           { -webkit-backdrop-filter: blur(0px) brightness(1);  backdrop-filter: blur(0px) brightness(1); }
  3.49%, 50%   { -webkit-backdrop-filter: blur(8px) brightness(.6); backdrop-filter: blur(8px) brightness(.6); }
  53.49%, 100% { -webkit-backdrop-filter: blur(0px) brightness(1);  backdrop-filter: blur(0px) brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  html body #eventsPin #actu .actu__grid > .actu-card .actu-card__img-wrap::after { animation: none; }
}

/* ============================================================
   STAFF V3 (27/09/2026)
   - "Devenir membre du personnel." a GAUCHE, meme animation (porte
     charniere a gauche) et meme sens que "Plusieurs jeux, une equipe."
   - Charte (illustration) centree sur le CENTRE DE LA PAGE.
   - "Remuneration / Mise en avant" a DROITE sous le titre
     "LES AVANTAGES" (Azurio Light).
   ============================================================ */
html body #team .staff-recruit.staff-recruit--v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  column-gap: clamp(24px, 3vw, 56px) !important;
  row-gap: 0 !important;
}
html body #team .staff-recruit--v3 > .staff-recruit__copy-shell {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: auto !important;
  max-width: 100% !important;
  position: relative !important;
}
html body #team .staff-recruit--v3 .staff-recruit__copy {
  align-items: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  transform-origin: 0% 50% !important;
  transform: perspective(1300px) rotateY(calc(var(--door-open, 0) * 55deg)) !important;
}
html body #team .staff-recruit--v3 .staff-recruit__copy .staff-recruit__title,
html body #team .staff-recruit--v3 .staff-recruit__copy .staff-recruit__desc {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  align-self: flex-start !important;
}
html body #team .staff-recruit--v3 .staff-recruit__copy .team__ribbon-stats--staff {
  justify-content: flex-start !important;
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Statistiques : entree de gauche a droite, comme le roster. */
html.velra-vignettes-js body #team .staff-recruit--v3 .staff-recruit__copy .team__ribbon-stats.is-vignettes-in .team__ribbon-stat {
  animation-name: velraVignetteLtr !important;
}

html body #team .staff-recruit--v3 > .staff-recruit__art {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: clamp(340px, 30vw, 560px) !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

/* ---- Bloc "Les avantages" ---- */
html body #team .staff-recruit--v3 > .staff-perks {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
}
html body #team .staff-perks__title {
  margin: 0;
  font-family: 'Azurio Light', 'Barlow', sans-serif !important;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 32px);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: right;
  color: var(--text, #eaf2ff);
}
html body #team .staff-perks > .staff-banners {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  width: max-content !important;
  max-width: 100% !important;
  align-self: flex-end !important;
  align-items: flex-end !important;
  pointer-events: auto !important;
}
/* Forme des bandeaux (identique a l'ancien emplacement). */
html body #team .staff-perks .staff-banner {
  --bar-w: clamp(210px, 18.6vw, 272px);
  --diamond: clamp(30px, 2.6vw, 38px);
  --banner-h: calc(var(--diamond) * .86);
  --tuck: calc(var(--diamond) * .6);
  display: flex;
  align-items: center;
  height: var(--banner-h);
  padding: 0;
  overflow: visible;
}
html body #team .staff-perks .staff-banner__diamond {
  z-index: 2;
  flex: 0 0 auto;
  width: var(--diamond);
  height: 100%;
  margin: 0;
  transform: none;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
}
html body #team .staff-perks .staff-banner__diamond svg {
  width: calc(var(--banner-h) * .56);
  height: calc(var(--banner-h) * .56);
  transform: none;
}
html body #team .staff-perks .staff-banner__bar {
  z-index: 1;
  flex: 0 0 auto;
  width: var(--bar-w);
  height: 78%;
  margin-left: calc(-1 * var(--tuck));
  padding-left: calc(var(--tuck) + 12px);
  padding-right: calc(var(--diamond) * .9);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
/* Titre + bandeaux : entree de droite a gauche. */
html.velra-vignettes-js body #team .staff-perks .staff-banner { opacity: 0; }
html.velra-vignettes-js body #team .staff-perks .staff-banners.is-vignettes-in .staff-banner {
  animation: velraVignetteRtl .62s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--vi, 0) * 130ms + 120ms);
}
html body #team .staff-perks__title {
  opacity: 0;
  translate: 18px 0;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), translate .6s cubic-bezier(.22, 1, .36, 1);
}
html body #team .staff-perks:has(.staff-banners.is-vignettes-in) .staff-perks__title,
html:not(.velra-vignettes-js) body #team .staff-perks__title { opacity: 1; translate: 0 0; }

/* ---- Tablette : texte a gauche + avantages a droite, charte centree dessous ---- */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #team .staff-recruit.staff-recruit--v3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    row-gap: clamp(20px, 3vw, 36px) !important;
  }
  html body #team .staff-recruit--v3 > .staff-recruit__copy-shell { grid-column: 1 !important; grid-row: 1 !important; }
  html body #team .staff-recruit--v3 > .staff-perks { grid-column: 2 !important; grid-row: 1 !important; }
  html body #team .staff-recruit--v3 > .staff-recruit__art {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: min(100%, 470px) !important;
  }
}
/* ---- Mobile : texte, charte, puis avantages ---- */
@media (max-width: 600px) {
  html body #team .staff-recruit.staff-recruit--v3 {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    row-gap: 24px !important;
  }
  html body #team .staff-recruit--v3 > .staff-recruit__copy-shell { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; }
  html body #team .staff-recruit--v3 > .staff-recruit__art { grid-column: 1 !important; grid-row: 2 !important; width: min(100%, 400px) !important; }
  html body #team .staff-recruit--v3 > .staff-perks { grid-column: 1 !important; grid-row: 3 !important; justify-self: end !important; }
  html body #team .staff-recruit--v3 .staff-recruit__copy {
    transform: perspective(1100px) rotateY(calc(var(--door-open, 0) * 45deg)) !important;
  }
  html body #team .staff-perks .staff-banner { --bar-w: clamp(186px, 56vw, 236px); --diamond: 27px; }  /* Laisse la place aux boutons Equipe / Postuler ancres en bas de section. */
  html body #team .staff-recruit.staff-recruit--v3 { padding-bottom: 120px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #team .staff-recruit--v3 .staff-recruit__copy { transform: none !important; }
  html body #team .staff-perks__title { opacity: 1; translate: none; transition: none; }
  html.velra-vignettes-js body #team .staff-perks .staff-banner { opacity: 1 !important; animation: none !important; }
}

/* ============================================================
   STAFF — RESTRUCTURATION FINALE PC (27/09/2026)
   L'assemblage interne de la charte est agrandi, pas uniquement
   son conteneur. La section gagne la hauteur necessaire : rien
   n'est coupe et les animations existantes restent intactes.
   ============================================================ */
@media (min-width: 1301px) {
  html body #team .staff-recruit.staff-recruit--v3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(560px, 1.7fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(760px, auto) !important;
    column-gap: 0 !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: clamp(46px, 5vw, 82px) !important;
    overflow: visible !important;
  }

  html body #team .staff-recruit--v3 > .staff-recruit__copy-shell {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 3 !important;
  }

  html body #team .staff-recruit--v3 > .staff-recruit__art {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: clamp(590px, 43vw, 680px) !important;
    max-width: none !important;
    margin: clamp(42px, 4vw, 70px) auto 0 !important;
    transform: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }

  html body #team .staff-recruit--v3 .staff-recruit__scene.staff-recruit__scene--folio {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Echelle reelle de l'illustration : l'ensemble atteint maintenant
     une largeur visuelle comparable a l'eventail des cartes joueur. */
  html body #team .staff-recruit--v3 .staff-recruit__composition {
    transform-box: view-box !important;
    transform-origin: 310px 250px !important;
    transform: scale(1.62) !important;
  }

  html body #team .staff-recruit--v3 > .staff-perks {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    align-items: flex-end !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: right !important;
    position: relative !important;
    z-index: 3 !important;
  }

  html body #team .staff-recruit--v3 .staff-perks__title,
  html body #team .staff-recruit--v3 .staff-perks > .staff-banners {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
  }
}

/* Les trois vignettes gardent le texte a gauche et l'icone a droite. */
html body #team .staff-recruit--v3 .staff-perks .staff-banner {
  flex-direction: row-reverse !important;
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner__diamond {
  margin: 0 !important;
  clip-path: polygon(0 0, 84% 0, 100% 100%, 16% 100%) !important;
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner__bar {
  justify-content: flex-end !important;
  margin-left: 0 !important;
  margin-right: calc(-1 * var(--tuck)) !important;
  padding-left: calc(var(--diamond) * .9) !important;
  padding-right: calc(var(--tuck) + 12px) !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%) !important;
  text-align: right !important;
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner__label {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
}

/* ============================================================
   CORRECTION CIBLEE 27/09/2026 — SANS MODIFIER L'EVENTAIL
   ============================================================ */

/* Vignettes : icône à gauche, texte à droite, sur tous les formats. */
html body #team .staff-recruit--v3 .staff-perks .staff-banner {
  flex-direction: row !important;
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner__diamond {
  margin: 0 !important;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%) !important;
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner__bar {
  justify-content: flex-start !important;
  margin-left: calc(-1 * var(--tuck)) !important;
  margin-right: 0 !important;
  padding-left: calc(var(--tuck) + 12px) !important;
  padding-right: calc(var(--diamond) * .9) !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%) !important;
  text-align: left !important;
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner__label {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

@media (min-width: 1301px) {
  /* Trois zones : texte / espace libre / avantages. La charte est centrée
     dans l'espace réellement disponible, donc même vide à gauche et à droite. */
  html body #team .staff-recruit.staff-recruit--v3 {
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    column-gap: 0 !important;
  }

  /* Taille d'une carte Joueur : on réduit l'assemblage sans le rendre minuscule. */
  html body #team .staff-recruit--v3 > .staff-recruit__art {
    width: clamp(320px, 22vw, 380px) !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }
  html body #team .staff-recruit--v3 .staff-recruit__composition {
    transform-box: view-box !important;
    transform-origin: 310px 250px !important;
    transform: scale(1.5) !important;
  }

  /* Déplacement du GROUPE complet uniquement. Les cinq cartes conservent
     strictement leurs tailles, rotations, écarts et coordonnées internes. */
  html body #team .team__composition {
    transform: translateX(var(--roster-center-shift, 0px)) !important;
  }
}

/* ============================================================
   CREATEURS V3 (28/09/2026)
   - Vues en bas a droite de chaque vignette.
   - Survol : la vignette entiere s'agrandit un peu, plus aucun zoom
     a l'interieur de l'image.
   - Lecture : fleche seule au centre (plus de fond carre / rond).
   - Photo de profil sans contour.
   - Pastille reseau (haut gauche) : logo blanc sur fond noir
     transparent floute.
   ============================================================ */

/* --- Survol : agrandissement de la vignette entiere --- */
html body .creators__showcase .creator-video .creator-video__media {
  transition: opacity .32s ease, transform .5s cubic-bezier(.22, 1, .36, 1), filter .32s ease, scale .35s cubic-bezier(.22, 1, .36, 1);
}
html body .creators__showcase .creator-video .creator-video__media:hover,
html body .creators__showcase .creator-video .creator-video__media:focus-within {
  scale: 1.035;
  z-index: 5;
}
/* Aucun effet a l'interieur de la vignette. */
html body .creator-video__link:hover .creator-video__img,
html body .creator-video__link:focus-visible .creator-video__img,
html body .short-card__link:hover .short-card__img,
html body .short-card__link:focus-visible .short-card__img {
  transform: none !important;
}
/* Formats courts : meme principe (la carte entiere grandit). */
html body .creators__shorts-viewport { padding-block: 18px; }
html body .short-card { position: relative; transition: scale .35s cubic-bezier(.22, 1, .36, 1); }
html body .short-card:hover,
html body .short-card:focus-within { scale: 1.04; z-index: 2; }

/* --- Fleche de lecture seule, sans fond --- */
html body .creator-video__play,
html body .creator-video__link:hover .creator-video__play,
html body .creator-video__link:focus-visible .creator-video__play,
html body .short-card__link:hover .creator-video__play,
html body .short-card__link:focus-visible .creator-video__play {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .65));
}
html body .creator-video__play svg { width: 78%; height: 78%; margin-left: 6%; }

/* --- Photo de profil sans contour --- */
html body .creator-video__avatar,
html body .short-card .creator-video__avatar {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}

/* --- Pastille reseau : logo blanc, fond noir transparent floute --- */
html body .creator-video__badge,
html body .short-card__badge {
  background: rgba(0, 0, 0, .34) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  color: #fff !important;
}
html body .creator-video__badge:hover,
html body .creator-video__badge:focus-visible { background: rgba(0, 0, 0, .52) !important; }
html body .creator-video .creator-video__badge-icon,
html body .creator-video[data-platform="youtube"] .creator-video__badge-icon,
html body .creator-video[data-platform="tiktok"] .creator-video__badge-icon,
html body .short-card__badge .creator-video__badge-icon {
  color: #fff !important;
  filter: none !important;
}

/* --- Nombre de vues en bas a droite --- */
.creator-video__views {
  position: absolute; z-index: 4; right: 8px; bottom: 8px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  color: #fff;
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.creator-video--big .creator-video__views { right: 12px; bottom: 12px; font-size: 12px; padding: 5px 10px; }
.short-card .creator-video__views { right: 8px; bottom: 8px; }
html body .short-card__meta { bottom: 36px; }
@media (max-width: 600px) {
  .creator-video__views { right: 6px; bottom: 6px; padding: 3px 6px; font-size: 9.5px; }
  .creator-video--big .creator-video__views { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .creators__showcase .creator-video .creator-video__media,
  html body .short-card { transition: none; }
}

/* ============================================================
   CREATEURS + ARTICLES V4 (29/09/2026)
   - Survol des vignettes : agrandissement minimaliste.
   - Coin coupe en haut a droite ET en bas a gauche.
   - Vignettes TikTok 9:16 plus petites, plus proches des vignettes
     YouTube, libelle "Formats courts" retire.
   - Survol : flou doux type Apple au centre (sans bord net) + deux
     fleches en trait fin animees (la petite a un peu d'avance).
     La fleche ne bouge plus au survol (plus de scale / translate).
   - Vues + temps de publication en bas a droite.
   - Articles : au survol, le conteneur texte monte jusqu'en haut,
     le texte disparait et l'icone "carre + fleche" apparait.
   - Mode presentation : bande partenaires avec textes "Partenaire".
   ============================================================ */

/* --- Survol minimaliste --- */
html body .creators__showcase .creator-video .creator-video__media:hover,
html body .creators__showcase .creator-video .creator-video__media:focus-within { scale: 1.012; }
html body .short-card:hover,
html body .short-card:focus-within { scale: 1.018; }

/* --- Coin coupe en haut a droite + en bas a gauche --- */
html body .creator-video__media,
html body .creator-tile,
html body .short-card__inner {
  clip-path: polygon(0 0, calc(100% - var(--cv-cut, 12px)) 0, 100% var(--cv-cut, 12px), 100% 100%, var(--cv-cut, 12px) 100%, 0 calc(100% - var(--cv-cut, 12px)));
}
html body .short-card__inner { --cv-cut: 10px; }

/* --- Formats courts : 9:16, plus petits, plus proches --- */
html body .creators__shorts-label { display: none !important; }
html body .creators__shorts { margin-top: clamp(6px, .8vw, 14px); }
html body .creators__shorts-viewport { padding-block: 8px; }
html body .short-card { width: clamp(116px, 8.2vw, 158px); }
html body .short-card__inner { aspect-ratio: 9 / 16 !important; height: auto !important; }
html body .short-card__meta { left: 8px; right: 8px; bottom: 30px; gap: 4px; }
html body .short-card__name { font-size: 11px; }
html body .short-card__title { font-size: 10.5px; }
html body .short-card .creator-video__avatar { width: 18px; height: 18px; }
html body .short-card .creator-video__views { right: 6px; bottom: 6px; padding: 3px 6px; font-size: 9.5px; }
html body .short-card__badge { top: 6px; left: 6px; }
@media (max-width: 600px) {
  html body .short-card { width: clamp(100px, 29vw, 132px); }
}

/* --- Zone de lecture : couvre la vignette, ne bouge jamais --- */
html body .creator-video__play,
html body .creator-video__link:hover .creator-video__play,
html body .creator-video__link:focus-visible .creator-video__play,
html body .short-card__link:hover .creator-video__play,
html body .short-card__link:focus-visible .creator-video__play,
html body .short-card__link .creator-video__play,
html body .creator-video--s3 .creator-video__play,
html body .creator-video--s4 .creator-video__play {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important; aspect-ratio: auto !important;
  margin: 0 !important;
  transform: none !important; translate: none !important; scale: none !important;
  display: grid !important; place-items: center !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important;
  /* Pas de filter / opacity ici : sinon le flou d'arriere-plan ne voit plus l'image. */
  filter: none !important;
  opacity: 1 !important;
  color: #fff !important;
  pointer-events: none;
  z-index: 2;
  transition: none !important;
}
/* Flou doux type Apple : ellipse centrale, bords en degrade (aucune coupure nette). */
html body .creator-video__play::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 62%; height: 100%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(4, 12, 26, .30), rgba(4, 12, 26, .12) 60%, rgba(4, 12, 26, 0));
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, #000 38%, rgba(0, 0, 0, .55) 66%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, #000 38%, rgba(0, 0, 0, .55) 66%, transparent 100%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
html body .short-card .creator-video__play::before { width: 110%; height: 62%; }
html body .creator-video__media:hover .creator-video__play::before,
html body .creator-video__media:focus-within .creator-video__play::before,
html body .short-card__inner:hover .creator-video__play::before,
html body .short-card__inner:focus-within .creator-video__play::before { opacity: 1; }

/* Deux fleches en trait fin (petite + grande). */
html body .creator-video__play svg.cv-chevrons {
  position: relative;
  width: clamp(38px, 3.2vw, 60px) !important;
  height: auto !important;
  aspect-ratio: 30 / 24;
  margin: 0 !important;
  opacity: 0;
  transition: opacity .25s ease;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45));
  overflow: visible;
}
html body .creator-video--s1 .creator-video__play svg.cv-chevrons,
html body .creator-video--s2 .creator-video__play svg.cv-chevrons,
html body .creator-video--s3 .creator-video__play svg.cv-chevrons,
html body .creator-video--s4 .creator-video__play svg.cv-chevrons { width: clamp(30px, 2.3vw, 44px) !important; }
html body .short-card .creator-video__play svg.cv-chevrons { width: clamp(28px, 2vw, 38px) !important; }
html body .creator-video__media:hover .cv-chevrons,
html body .creator-video__media:focus-within .cv-chevrons,
html body .short-card__inner:hover .cv-chevrons,
html body .short-card__inner:focus-within .cv-chevrons { opacity: 1; }

.cv-chev {
  fill: none;
  stroke: #fff;
  stroke-width: 1.25;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 0 100;
  stroke-dashoffset: -50;
}
/* Cycle de 5 s : apparition 0,5 s (les deux bords partent de la pointe),
   maintien 3 s, disparition 0,5 s (les deux bords se rejoignent a la
   pointe), invisible 1 s. La petite fleche a un peu d'avance. */
html body .creator-video__media:hover .cv-chev,
html body .creator-video__media:focus-within .cv-chev,
html body .short-card__inner:hover .cv-chev,
html body .short-card__inner:focus-within .cv-chev {
  animation: cvChevDraw 5s infinite both;
}
html body .creator-video__media:hover .cv-chev--l,
html body .creator-video__media:focus-within .cv-chev--l,
html body .short-card__inner:hover .cv-chev--l,
html body .short-card__inner:focus-within .cv-chev--l { animation-delay: .18s; }
@keyframes cvChevDraw {
  0%   { stroke-dasharray: 0 100;  stroke-dashoffset: -50; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  10%  { stroke-dasharray: 100 0;  stroke-dashoffset: 0; }
  70%  { stroke-dasharray: 100 0;  stroke-dashoffset: 0;   animation-timing-function: cubic-bezier(.64, 0, .78, 0); }
  80%  { stroke-dasharray: 0 100;  stroke-dashoffset: -50; }
  100% { stroke-dasharray: 0 100;  stroke-dashoffset: -50; }
}

/* --- Vues + temps de publication --- */
.creator-video__views { display: inline-flex; align-items: center; gap: 5px; }
.creator-video__views-sep { opacity: .6; }
.creator-video__ago { font-weight: 600; color: rgba(255, 255, 255, .86); }

/* --- Articles : couche de survol --- */
html body #eventsPin #actu .actu__grid > .actu-card { position: relative; }
.actu-card__hover {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: #0a1a38;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .5s cubic-bezier(.22, 1, .36, 1);
}
/* Cartes horizontales (photo a gauche) : le conteneur texte s'etend vers la gauche. */
@media (min-width: 601px) {
  html body #eventsPin[data-flow="timed"] #actu .actu-card--small .actu-card__hover { clip-path: inset(0 0 0 100%); }
}
html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__hover,
html body #eventsPin #actu .actu__grid > .actu-card:focus-visible .actu-card__hover {
  clip-path: inset(0 0 0 0);
}
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__body > * { transition: opacity .2s ease; }
html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__body > *,
html body #eventsPin #actu .actu__grid > .actu-card:focus-visible .actu-card__body > * { opacity: 0 !important; }
/* Icone identique a "Evenements en vedette" : carre fin qui tourne + fleche fixe. */
.actu-card__hover::before,
.actu-card__hover::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  scale: .8;
  opacity: 0;
  transition: opacity .3s ease, scale .45s cubic-bezier(.22, 1, .36, 1);
}
.actu-card__hover::before {
  width: clamp(46px, 4.5vw, 64px);
  height: clamp(46px, 4.5vw, 64px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='2' y='2' width='60' height='60' fill='none' stroke='%235eaaff' stroke-opacity='0.9' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: velraSquareSpin 1.8s linear infinite;
}
.actu-card__hover::after {
  width: clamp(18px, 1.8vw, 26px);
  height: clamp(18px, 1.8vw, 26px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 40 L40 24 M27 24 H40 V37' fill='none' stroke='%235eaaff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__hover::before,
html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__hover::after,
html body #eventsPin #actu .actu__grid > .actu-card:focus-visible .actu-card__hover::before,
html body #eventsPin #actu .actu__grid > .actu-card:focus-visible .actu-card__hover::after {
  opacity: 1;
  scale: 1;
  transition-delay: .18s;
}
@keyframes velraSquareSpin {
  0%   { transform: rotate(0deg);  animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  25%  { transform: rotate(45deg); animation-timing-function: linear; }
  50%  { transform: rotate(45deg); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  75%  { transform: rotate(90deg); animation-timing-function: linear; }
  100% { transform: rotate(90deg); }
}

/* --- Mode presentation : bande partenaires --- */
.partners-band__track--present { display: none !important; }
body.velra-presentation #partnersTrack { display: none !important; }
body.velra-presentation .partners-band__track--present { display: flex !important; }
.partners-band__track--present .pb-slot {
  max-width: none !important;
  overflow: visible !important;
  display: flex; align-items: center; justify-content: center;
}
.pb-chip--text {
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: clamp(8.5px, .72vw, 12px);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(214, 228, 250, .6);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html body .creator-video__media:hover .cv-chev,
  html body .short-card__inner:hover .cv-chev { animation: none; stroke-dasharray: 100 0; stroke-dashoffset: 0; }
  .actu-card__hover, .actu-card__hover::before { transition: none; animation: none; }
}

/* ============================================================
   CREATEURS V5 (29/09/2026)
   - Flou du survol : noir transparent, identique a la pastille reseau.
   - Fleches plus serrees, trait fin couleur accent (comme l'icone
     "Evenements en vedette"), cycle 4 s : visible 2 s / invisible 1 s.
   - Formats courts TikTok 9:16 : 8 visibles sur PC, 6 sur tablette
     (<= 1300px), 4 sur mobile (<= 600px).
   ============================================================ */
html body .creator-video__play::before {
  background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, .26) 55%, rgba(0, 0, 0, 0)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
  backdrop-filter: blur(10px) saturate(1.15) !important;
}
html body .creator-video__play svg.cv-chevrons {
  aspect-ratio: 27 / 24;
  filter: none;
}
html body .cv-chev {
  stroke: var(--accent, #5eaaff);
  stroke-width: .7;
}
html body .creator-video__media:hover .cv-chev,
html body .creator-video__media:focus-within .cv-chev,
html body .short-card__inner:hover .cv-chev,
html body .short-card__inner:focus-within .cv-chev {
  animation: cvChevDraw4 4s infinite both;
}
html body .creator-video__media:hover .cv-chev--l,
html body .creator-video__media:focus-within .cv-chev--l,
html body .short-card__inner:hover .cv-chev--l,
html body .short-card__inner:focus-within .cv-chev--l { animation-delay: .15s; }
/* 0,5 s apparition + 2 s visible + 0,5 s disparition + 1 s invisible. */
@keyframes cvChevDraw4 {
  0%    { stroke-dasharray: 0 100;  stroke-dashoffset: -50; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  12.5% { stroke-dasharray: 100 0;  stroke-dashoffset: 0; }
  62.5% { stroke-dasharray: 100 0;  stroke-dashoffset: 0;   animation-timing-function: cubic-bezier(.64, 0, .78, 0); }
  75%   { stroke-dasharray: 0 100;  stroke-dashoffset: -50; }
  100%  { stroke-dasharray: 0 100;  stroke-dashoffset: -50; }
}

/* --- Formats courts : nombre de vignettes visibles par format --- */
html body .creators__shorts-viewport {
  --sc-gap: clamp(8px, .8vw, 14px);
  container-type: inline-size;
}
html body .creators__shorts-track { column-gap: var(--sc-gap); }
html body .short-card { width: calc((100cqw - 7 * var(--sc-gap)) / 8); }
html body .short-card__inner { aspect-ratio: 9 / 16 !important; height: auto !important; }
html body .short-card__img { object-fit: cover; width: 100%; height: 100%; }
@media (max-width: 1300px) {
  html body .short-card { width: calc((100cqw - 5 * var(--sc-gap)) / 6); }
}
@media (max-width: 600px) {
  html body .short-card { width: calc((100cqw - 3 * var(--sc-gap)) / 4); }
  html body .creators__shorts-btn { width: 22px; }
  html body .creators__shorts-btn svg { width: 20px; height: 20px; }
  html body .short-card__title { display: none; }
  html body .short-card__meta { left: 5px; right: 5px; bottom: 22px; }
  html body .short-card__name { font-size: 9px; }
  html body .short-card .creator-video__avatar { width: 14px; height: 14px; }
  html body .short-card__badge { top: 4px; left: 4px; padding: 3px 4px !important; }
  html body .short-card__badge .creator-video__badge-label { display: none; }
  html body .short-card .creator-video__views { right: 4px; bottom: 4px; padding: 2px 4px; font-size: 7.5px; gap: 3px; }
  html body .short-card__inner { --cv-cut: 7px; }
}

/* ============================================================
   VELRA LINES — fond a traits Articles -> Createurs
   Calque decoratif ajoute (canvas), pilote par script.js.
   Il ne modifie ni la mise en page ni la scene Communaute/Articles :
   dans #events il se place SOUS le panneau Communaute (z-index 3),
   sous les cartes (z-index 2/4) et au-dessus du fond #040c1a.
   Couleurs surchargeables (format "r, g, b").
   ============================================================ */
.velra-lines {
  --velra-lines-teal: 56, 212, 199;
  --velra-lines-accent: 94, 170, 255;
  --velra-lines-bright: 158, 214, 255;
  --velra-lines-cool: 42, 105, 191;
  --velra-lines-deep: 22, 58, 150;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}
.velra-lines > canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  will-change: transform;
  pointer-events: none;
}
html body #eventsPin #events > .velra-lines {
  z-index: 1 !important;
}
.creators-section > .velra-lines { z-index: 0; }
.creators-section > .creators__inner { position: relative; z-index: 1; }

/* ============================================================
   CORRECTIFS 30/09/2026
   ============================================================ */

/* 1) Formats courts TikTok : plus de fleches gauche / droite. */
html body .creators__shorts-btn { display: none !important; }
html body .creators__shorts-row { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }

/* 2) Titre + description "Nos createurs de contenu" toujours visibles.
   La scene epinglee (#eventsPin, z-index 4) passait PAR-DESSUS le haut de
   la section quand celle-ci remonte (marge negative calculee par
   components.js) : le titre etait cache ou coupe selon le format.
   Le calcul place toujours le haut de la section SOUS le dernier article,
   la section peut donc passer devant sans rien recouvrir. */
html body .creators-section { position: relative; z-index: 5; }

/* 3) Vignettes YouTube / TikTok : aucun agrandissement au survol. */
html body .creators__showcase .creator-video .creator-video__media:hover,
html body .creators__showcase .creator-video .creator-video__media:focus-within,
html body .short-card:hover,
html body .short-card:focus-within { scale: none !important; }
html body .creator-video__link:hover .creator-video__img,
html body .creator-video__link:focus-visible .creator-video__img,
html body .short-card__link:hover .short-card__img,
html body .short-card__link:focus-visible .short-card__img { transform: none !important; scale: none !important; }

/* 4) Rotation des vignettes YouTube : fondu uniquement (ni retrecissement,
   ni zoom, ni flou, ni deplacement). */
/*    Fondu enchaine (components.js) : la nouvelle vignette, image deja
      chargee, est posee SOUS l'ancienne dans la meme case ; l'ancienne
      s'efface en fondu. Jamais de case vide pendant le changement. */
html body .creator-video .creator-video__media,
html body .creator-video .creator-video__meta { transition: opacity .42s ease !important; }
html body .creator-video.is-leaving .creator-video__media,
html body .creator-video.is-leaving .creator-video__meta,
html body .creator-video.is-entering .creator-video__media,
html body .creator-video.is-entering .creator-video__meta {
  transform: none !important; scale: none !important; filter: none !important; translate: none !important;
}
html body .creator-video.is-leaving .creator-video__media,
html body .creator-video.is-leaving .creator-video__meta { pointer-events: none !important; }
/* L'ancienne reste au-dessus jusqu'a la fin du fondu (meme si survol). */
html body .creator-video.is-leaving .creator-video__media { z-index: 6 !important; }
html body .creator-video.is-leaving.is-fading .creator-video__media,
html body .creator-video.is-leaving.is-fading .creator-video__meta { opacity: 0 !important; }
/* Image de la nouvelle vignette : visible tout de suite, sous l'ancienne. */
html body .creator-video.is-entering .creator-video__media { opacity: 1 !important; transition: none !important; }
/* Texte de la nouvelle vignette : apparait pendant que l'ancien s'efface. */
html body .creator-video.is-entering .creator-video__meta { opacity: 0 !important; transition: none !important; }

/* 5) Articles : au survol, c'est le conteneur texte DEJA PRESENT (sous
   l'image, ou a droite de l'image pour les cartes horizontales) qui monte
   / s'etend par-dessus l'image. La couche part exactement du bord de ce
   conteneur (mesure par script.js) et prend la meme couleur que la carte :
   au repos elle se confond avec lui. */
html body #eventsPin #actu .actu__grid > .actu-card[data-hover-dir] .actu-card__body { position: relative; z-index: 7; }
html body #eventsPin #actu .actu__grid > .actu-card[data-hover-dir] .actu-card__hover { background: inherit !important; }
html body #eventsPin #actu .actu__grid > .actu-card[data-hover-dir="up"] .actu-card__hover {
  clip-path: inset(var(--hover-start, 100%) 0 0 0) !important;
}
html body #eventsPin #actu .actu__grid > .actu-card[data-hover-dir="left"] .actu-card__hover {
  clip-path: inset(0 0 0 var(--hover-start, 100%)) !important;
}
html body #eventsPin #actu .actu__grid > .actu-card[data-hover-dir]:hover .actu-card__hover,
html body #eventsPin #actu .actu__grid > .actu-card[data-hover-dir]:focus-visible .actu-card__hover {
  clip-path: inset(0 0 0 0) !important;
}

/* 6) Titre "Derniere news" : pendant l'animation il arrive du HAUT vers
   sa place, rapide puis lent (--vf-news-title calcule par script.js a
   partir de la meme horloge de scene). Mode statique inchange. */
html body #eventsPin[data-flow="timed"]:not([data-static="1"]) #actu .actu__header > .section-title {
  transform: translate3d(0, calc(-1 * (1 - var(--vf-news-title, var(--scene-news-enter))) * (var(--scene-title-y) + var(--scene-title-h) + 24px)), 0) !important;
}

/* 7) Description du hero : meme police que la pastille des articles
   (Barlow gras, majuscules, lettres espacees). Taille reduite ; hauteur de
   ligne 1.4 = celle utilisee par l'etat replie (2 lignes = 2.8em) : plus
   aucune ligne coupee en deux. */
html body .hero .hero__sub {
  font-family: var(--font-body, 'Barlow'), 'Barlow', sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: clamp(10.5px, .7vw, 13.5px) !important;
  line-height: 1.4 !important;
}

/* 8) Mode statique (ecrans peu hauts / animations reduites) : le titre
   "Derniere news", sa description et ses boutons restaient decales hors
   ecran (horloge de scene a 0). Sans animation, ils sont a leur place et visibles. */
html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__header > .section-title,
html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__header > .actu__intro,
html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__header > .btn-cta {
  transform: none !important;
  visibility: visible !important;
}

/* ============================================================
   CORRECTIFS 30/09/2026 (2)
   ============================================================ */

/* 9) Description du hero : effet "frappe clavier". Avant le script le
   texte est masque (data-tw="pending" dans index.html) ; secours CSS : il
   s'affiche seul apres 5 s si le script ne s'execute pas. */
@keyframes vfTwFallback { to { opacity: 1; } }
html body #home.hero .hero__sub-wrap[data-tw="pending"] .hero__sub-line,
html body #home.hero .hero__sub-wrap[data-tw="pending"] .hero__sub-toggle {
  opacity: 0;
  animation: vfTwFallback .01s linear 5s forwards;
}
html body #home.hero .hero__sub-wrap[data-tw="typing"] .hero__sub-toggle {
  opacity: 0 !important; pointer-events: none !important;
}
html body #home.hero .hero__sub-wrap[data-tw="done"] .hero__sub-toggle {
  transition: opacity .45s ease !important;
}
html body #home.hero .hero__sub-wrap .vf-caret {
  position: absolute; z-index: 3; width: 2px; pointer-events: none;
  background: var(--accent, #5eaaff);
  box-shadow: 0 0 8px rgba(94, 170, 255, .55);
  transition: opacity .3s ease;
}
html body #home.hero .hero__sub-wrap .vf-caret.is-idle { animation: vfCaretBlink .9s steps(1, end) infinite; }
html body #home.hero .hero__sub-wrap .vf-caret.is-gone { opacity: 0; animation: none; }
@keyframes vfCaretBlink { 50% { opacity: 0; } }

/* 10) Titres Tournois / Evenement / Concours : effet de revelation par bloc
   (repris du titre "Notre equipe"). Rien n'est visible avant le debut de
   l'effet : le titre n'apparait que pendant l'animation. */
html body #events .event-card__title.velra-text-reveal:not([data-reveal-ready="true"]) { visibility: hidden !important; }
html body #events .event-card__title.velra-text-reveal .velra-text-reveal-line { max-width: 100%; }

/* 11) "Plusieurs jeux, une equipe." / "Devenir membre du personnel." :
   la porte est ouverte a 100 % (90 deg, vue par la tranche = invisible)
   avant l'animation, puis se referme face a l'ecran au scroll. */
html body #team .team__info {
  transform: perspective(1300px) rotateY(calc(var(--door-open) * 90deg)) !important;
}
html body #team .staff-recruit__copy {
  transform: perspective(1300px) rotateY(calc(var(--door-open) * -90deg)) !important;
}
html body #team .staff-recruit--v3 .staff-recruit__copy {
  transform: perspective(1300px) rotateY(calc(var(--door-open, 0) * 90deg)) !important;
}
@media (max-width: 600px) {
  html body #team .team__info {
    transform: perspective(1100px) rotateY(calc(var(--door-open) * 90deg)) !important;
  }
  html body #team .staff-recruit__copy {
    transform: perspective(1100px) rotateY(calc(var(--door-open) * -90deg)) !important;
  }
  html body #team .staff-recruit--v3 .staff-recruit__copy {
    transform: perspective(1100px) rotateY(calc(var(--door-open, 0) * 90deg)) !important;
  }
}

/* 12) "Nos createurs de contenu" : plus d'air au-dessus du titre (sous les
   articles) et sous la description (avant les vignettes). components.js
   utilise cette meme marge pour l'espace au-dessus du titre. */
html body .creators-section .creators__intro { margin-bottom: clamp(52px, 4.4vw, 84px) !important; }

/* 13) Onglets de l'espace compte (Achat, Billet, Journal, Boutique...) :
   meme police que la description du hero. */
html body .va-menu .va-item > span:not(.va-item__icon):not(.va-item__chev) {
  font-family: var(--font-body, 'Barlow'), 'Barlow', sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}

/* 14) Footer : titres des tiroirs en Bebas Neue. */
html body .footer .footer__col-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .05em !important;
  font-size: clamp(20px, 1.55vw, 26px) !important;
}

/* 15) Footer : le cadre n'entoure QUE les deux tiroirs. VELRA, les reseaux
   et, juste en dessous, les mentions legales + copyright sont a gauche. */
html body .footer .footer__content {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: clamp(28px, 4vw, 72px) !important;
  row-gap: 0 !important;
  align-items: start !important;
}
html body .footer .footer__content > .footer__brand {
  grid-column: 1 !important; grid-row: 1 !important;
  align-self: start !important; justify-self: start !important;
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  width: max-content !important; max-width: 100% !important;
}
html body .footer .footer__content > .footer__frame {
  grid-column: 2 !important; grid-row: 1 !important;
  display: block !important;
  justify-self: stretch !important; align-self: start !important;
  width: auto !important; max-width: 100% !important; min-width: 0 !important;
  box-sizing: border-box !important;
}
html body .footer .footer__frame > .footer__cols { width: 100% !important; }
html body .footer .footer__brand .footer__socials {
  width: clamp(124px, 11vw, 176px) !important; max-width: 100% !important;
}
html body .footer .footer__brand > .footer__bottom {
  grid-column: auto !important; grid-row: auto !important; order: 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; justify-content: flex-start !important;
  align-self: stretch !important; justify-self: auto !important;
  width: auto !important; margin: clamp(16px, 1.4vw, 22px) 0 0 !important; padding: 0 !important;
  gap: 6px !important; text-align: left !important; border: 0 !important;
}
html body .footer .footer__brand .footer__legal {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  justify-content: flex-start !important; align-items: flex-start !important;
  gap: 4px clamp(12px, 1vw, 18px) !important; margin: 0 !important;
}
html body .footer .footer__brand .footer__legal a,
html body .footer .footer__brand .footer__copy {
  font-size: clamp(11px, .72vw, 13px) !important; line-height: 1.45 !important;
  text-align: left !important; margin: 0 !important;
}
@media (max-width: 600px) {
  html body .footer .footer__content {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }
  html body .footer .footer__content > .footer__brand { width: 100% !important; }
  html body .footer .footer__brand .footer__socials { width: min(100%, 112px) !important; }
  html body .footer .footer__brand .footer__legal { flex-direction: column !important; gap: 3px !important; }
  html body .footer .footer__brand .footer__legal a,
  html body .footer .footer__brand .footer__copy { font-size: clamp(10px, 2.8vw, 11.5px) !important; }
  html body .footer .footer__col-title { font-size: clamp(18px, 5vw, 21px) !important; }
}

/* 11 bis) Porte vue par la tranche : aucun reste de texte visible avant
   l'animation (opacite nulle a 90 deg, pleine des ~83 deg). */
html body #team .team__info,
html body #team .staff-recruit__copy {
  opacity: clamp(0, calc((1 - var(--door-open, 0)) * 12), 1) !important;
}

/* 15 bis) Mentions + copyright : toujours contenus dans la colonne de
   gauche (retour a la ligne, jamais sous le cadre des tiroirs). */
html body .footer .footer__brand > .footer__bottom,
html body .footer .footer__brand .footer__legal,
html body .footer .footer__brand .footer__copy { max-width: 100% !important; min-width: 0 !important; }
html body .footer .footer__brand .footer__copy,
html body .footer .footer__brand .footer__legal a { white-space: normal !important; overflow-wrap: break-word !important; }

/* ============================================================
   MOBILE (<=600px) — boutons "CREATEURS" et "ARTICLES"
   places en bas de la section CREATEURS (et non plus de la
   section articles). Le deplacement des noeuds est fait par
   script.js ; ces regles mettent en page la rangee et
   suppriment la zonereservee en bas de la section articles.
   ============================================================ */
@media (max-width: 600px) {
  /* Plus de zone reservee aux boutons dans la section articles. */
  .events-pin > .events-section > .actu-section > .actu__inner {
    --btn-zone: 0px !important;
    padding-bottom: 12px !important;
  }
  .actu-section,
  .events-section > .actu-section {
    padding-bottom: 12px !important;
  }

  /* Rangee de boutons en bas de la section createurs. */
  .creators-section .creators__mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: clamp(28px, 7vw, 44px);
  }
  .creators-section .creators__mobile-actions .btn-cta {
    position: relative !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    height: 42px !important;
    margin: 0 !important;
    justify-content: center !important;
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    transform: none !important; translate: none !important; scale: none !important;
    z-index: auto !important;
  }
  .creators-section .creators__mobile-actions .btn-cta:not(.btn-cta--mirror) {
    padding: 0 54px 0 18px !important;
  }
  .creators-section .creators__mobile-actions .btn-cta.btn-cta--mirror {
    padding: 0 18px 0 54px !important;
  }
  .creators-section .creators__mobile-actions .btn-cta .btn-cta__label {
    margin: 0 !important;
    font: inherit !important;
    letter-spacing: inherit !important;
  }
  .creators-section .creators__mobile-actions .btn-cta .btn-cta__icon {
    width: 25% !important; min-width: 25% !important;
    top: 4px !important; bottom: 4px !important; height: auto !important;
  }
  .creators-section .creators__mobile-actions .btn-cta:hover .btn-cta__icon,
  .creators-section .creators__mobile-actions .btn-cta:focus-visible .btn-cta__icon {
    width: calc(100% - 8px) !important;
  }
  .creators-section .creators__mobile-actions { gap: 12px; }
}

/* Createurs (tablette 1300px ET mobile 600px) : meme composition.
   Grande vignette 16:9 a gauche (4 colonnes sur 6), deux vignettes
   empilees a droite dont le haut et le bas sont VERROUILLES sur ceux
   de la grande : h = (H - gap) / 2. Les hauteurs sont calculees
   depuis la largeur du conteneur (cqw) -> aucun depassement possible. */
@media (max-width: 1300px) {
  .creators__showcase {
    --cv-gap: clamp(7px, 1.6cqw, 18px);
    --cv-big-w: calc((100cqw - 5 * var(--cv-gap)) * 4 / 6 + 3 * var(--cv-gap));
    --cv-H: calc(var(--cv-big-w) * 9 / 16);
    --cv-h: calc((var(--cv-H) - var(--cv-gap)) / 2);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: var(--cv-h) var(--cv-h) auto;
    grid-auto-rows: auto;
    column-gap: var(--cv-gap);
    row-gap: var(--cv-gap);
  }
  .creators__showcase .creator-video__media { aspect-ratio: auto; height: 100%; min-height: 0; }
  .creators__showcase .creator-video--big .creator-video__media {
    grid-column: 1 / 5; grid-row: 1 / 3; aspect-ratio: auto; height: var(--cv-H);
  }
  .creators__showcase .creator-video--s1 .creator-video__media { grid-column: 5 / 7; grid-row: 1; height: var(--cv-h); }
  .creators__showcase .creator-video--s2 .creator-video__media { grid-column: 5 / 7; grid-row: 2; height: var(--cv-h); }
  .creators__showcase .creator-video--s3 .creator-video__media { grid-column: 1 / 4; grid-row: 3; height: auto; aspect-ratio: 16 / 9; }
  .creators__showcase .creator-video--s4 .creator-video__media { grid-column: 4 / 7; grid-row: 3; height: auto; aspect-ratio: 16 / 9; }
  .creators__showcase .creator-video__meta { margin: 0 !important; }
}

/* Mobile 600px : les cinq vignettes YouTube, comme sur tablette. */
@media (max-width: 600px) {
  .creators__showcase { --cv-gap: 6px; }
  .creators__showcase .creator-video--s3,
  .creators__showcase .creator-video--s4 { display: contents; }
  .creators__showcase .creator-video__badge { top: 4px; left: 4px; padding: 2px 5px 2px 4px; font-size: 8px; gap: 3px; }
  .creators__showcase .creator-video--big .creator-video__badge { top: 6px; left: 6px; font-size: 9px; padding: 3px 6px 3px 5px; }
  .creators__showcase .creator-video__badge-icon { width: 10px; height: 10px; }
}


/* ============================================================
   CREATEURS — angles responsifs + informations a la rotation
   Tablette/mobile uniquement : l'avatar, le pseudo et le titre de
   chaque nouvelle vignette YouTube restent centres pendant 2 s.
   ============================================================ */
.creator-video__rotation-info { display: none; }

@media (max-width: 1300px) {
  html body .creator-video__media,
  html body .creator-tile,
  html body .short-card__inner {
    --cv-cut: 8px !important;
  }

  html body .creator-video__meta {
    display: none !important;
  }

  html body .creator-video__rotation-info {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px clamp(12px, 7%, 28px);
    background: rgba(4, 12, 26, .68);
    color: #fff;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    animation: creatorRotationInfo 6s linear both;
  }
  html body .creator-video__rotation-avatar {
    width: clamp(26px, 3.2vw, 42px);
    height: clamp(26px, 3.2vw, 42px);
    overflow: hidden;
    border-radius: 50%;
    background: #0a1a38;
  }
  html body .creator-video__rotation-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html body .creator-video__rotation-name,
  html body .creator-video__rotation-title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-family: var(--font-body, 'Barlow'), sans-serif;
  }
  html body .creator-video__rotation-name {
    -webkit-line-clamp: 1;
    font-size: clamp(11px, 1.25vw, 16px);
    font-weight: 700;
    line-height: 1.15;
  }
  html body .creator-video__rotation-title {
    -webkit-line-clamp: 2;
    color: rgba(230, 241, 255, .88);
    font-size: clamp(10px, 1.05vw, 14px);
    line-height: 1.25;
  }
}

@media (max-width: 600px) {
  html body .creator-video__media,
  html body .creator-tile,
  html body .short-card__inner {
    --cv-cut: 5px !important;
  }
  html body .creator-video__rotation-info {
    gap: 3px;
    padding: 8px 10px;
  }
  html body .creator-video__rotation-avatar {
    width: clamp(22px, 7vw, 34px);
    height: clamp(22px, 7vw, 34px);
  }
  html body .creator-video__rotation-name { font-size: clamp(9px, 2.8vw, 13px); }
  html body .creator-video__rotation-title { font-size: clamp(8px, 2.45vw, 11px); }
}

@keyframes creatorRotationInfo {
  0%, 33.32% { opacity: 0; }
  33.33%, 66.66% { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1300px) {
  html body .creator-video__rotation-info { animation: creatorRotationInfo 6s linear both; }
}

/* Créateurs YouTube / TikTok : assombrissement sans flou au survol.
   Même voile et même apparition opacity + scale que les événements en vedette.
   Les dimensions, la rotation des contenus et le responsive restent inchangés. */
html body .creators-section .creator-video__play::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  translate: none !important;
  background: rgba(2, 8, 20, .62) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 0;
  transition: opacity .35s ease;
}
html body .creators-section .creator-video__media:hover .creator-video__play::before,
html body .creators-section .creator-video__media:focus-within .creator-video__play::before,
html body .creators-section .short-card__inner:hover .creator-video__play::before,
html body .creators-section .short-card__inner:focus-within .creator-video__play::before {
  opacity: 1;
}
html body .creators-section .creator-video__play svg.cv-chevrons {
  opacity: 0;
  scale: .8;
  transform-origin: center;
  transition: opacity .35s ease, scale .45s cubic-bezier(.22, 1, .36, 1);
}
html body .creators-section .creator-video__media:hover .cv-chevrons,
html body .creators-section .creator-video__media:focus-within .cv-chevrons,
html body .creators-section .short-card__inner:hover .cv-chevrons,
html body .creators-section .short-card__inner:focus-within .cv-chevrons {
  opacity: 1;
  scale: 1;
}
/* Cycle de tracé d’origine conservé : apparition 0,5 s, visible 2 s,
   disparition 0,5 s, invisible 1 s (cvChevDraw4, boucle de 4 s). */
@media (prefers-reduced-motion: reduce) {
  html body .creators-section .creator-video__play::before,
  html body .creators-section .creator-video__play svg.cv-chevrons {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .creators-section .creator-video__play .cv-chev {
    animation: none !important;
    stroke-dasharray: 100 0 !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Flèches : scale à chaque apparition ET disparition du cycle,
   en complément du tracé d'origine (cvChevDraw4 reste inchangé). */
html body .creators-section .creator-video__media:hover .cv-chevrons,
html body .creators-section .creator-video__media:focus-within .cv-chevrons,
html body .creators-section .short-card__inner:hover .cv-chevrons,
html body .creators-section .short-card__inner:focus-within .cv-chevrons {
  animation: creatorArrowScaleCycle 4s infinite both;
}
@keyframes creatorArrowScaleCycle {
  0% { opacity: 0; scale: .8; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  12.5% { opacity: 1; scale: 1; }
  62.5% { opacity: 1; scale: 1; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  75%, 100% { opacity: 0; scale: .8; }
}
/* Mesure synchrone du roster au repos : cette classe n'est jamais affichée.
   Ne change aucune taille, coordonnée ou rotation des cartes. */
@media (min-width: 1301px) {
  html body #team.roster-layout-measuring .team__info {
    transform: none !important;
    translate: none !important;
    transition: none !important;
  }
  html body #team.roster-layout-measuring .team__composition {
    transform: none !important;
    translate: none !important;
    transition: none !important;
  }
  html body #team.roster-layout-measuring .team__composition > .roster-card {
    translate: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .creators-section .creator-video__play svg.cv-chevrons {
    animation: none !important;
  }
}

/* ============================================================
   CORRECTIFS 06/10/2026
   1) Titre "Derniere news" : descend VISIBLEMENT du haut de l'ecran.
   2) Hero : grand "VELRA" central, police Vectra en trait extra fin.
   3) Notre equipe : fond triangulaire minimaliste (comme l'image),
      memes proprietes que l'ancien fond (degrade anime qui change
      de couleur, pente, mosaiques des coins conservees).
   ============================================================ */

@font-face {
  font-family: 'Vectra';
  src: url('font/vectra.woff2') format('woff2'), url('font/Vectra.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ---- 1) DERNIERE NEWS ------------------------------------------------
   Cause du bug : le titre etait dans le calque #actu (z-index 2), donc
   SOUS le fond bleu de la Communaute (z-index 3). Il descendait cache
   derriere ce fond et n'etait devoile qu'a la fermeture du fond, deja
   arrive a sa place : il "apparaissait devant nos yeux".
   Correctif : #actu ne cree plus de calque ; chaque element garde
   exactement son ancien niveau (cartes, description, boutons), seul le
   titre passe au-dessus du fond : on le voit entrer par le haut de
   l'ecran et descendre jusqu'a sa place. Mode statique inchange. */
html body #eventsPin[data-flow="timed"][data-scene][data-actu]:not([data-static="1"]) #actu,
html body #eventsPin[data-flow="timed"][data-scene][data-actu]:not([data-static="1"]) #actu > .actu__inner {
  z-index: auto !important;
}
/* Ancien niveau de #actu, reporte sur ses elements (2 / 3 / 4). */
html body #eventsPin[data-flow="timed"][data-scene][data-actu]:not([data-static="1"]) #actu .actu__grid,
html body #eventsPin[data-flow="timed"][data-scene][data-actu]:not([data-static="1"]) #actu .actu__header > .actu__intro,
html body #eventsPin[data-flow="timed"][data-scene][data-actu]:not([data-static="1"]) #actu .actu__header > .btn-cta {
  z-index: 2 !important;
}
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"]:not([data-static="1"]) #actu .actu__grid,
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"]:not([data-static="1"]) #actu .actu__header > .actu__intro,
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"]:not([data-static="1"]) #actu .actu__header > .btn-cta {
  z-index: 3 !important;
}
html body #eventsPin[data-flow="timed"][data-scene="news"][data-actu]:not([data-static="1"]) #actu .actu__grid,
html body #eventsPin[data-flow="timed"][data-scene="news"][data-actu]:not([data-static="1"]) #actu .actu__header > .actu__intro,
html body #eventsPin[data-flow="timed"][data-scene="news"][data-actu]:not([data-static="1"]) #actu .actu__header > .btn-cta {
  z-index: 4 !important;
}
/* Le titre : toujours au-dessus du fond qui se referme. */
html body #eventsPin[data-flow="timed"][data-scene][data-actu]:not([data-static="1"]) #actu .actu__header > .section-title {
  z-index: 5 !important;
}

/* ---- 2) HERO : "VELRA" en trait fin ---------------------------------- */
html body #home.hero > .hero__velra {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
  /* Epaisseur ~1.1 px a l'ecran (recalculee par script.js selon la taille). */
  --velra-sw: 3px;
}
html body #home.hero > .hero__velra > .hero__velra-svg {
  display: block;
  width: clamp(300px, 84vw, 1600px);
  height: auto;
  overflow: visible;
}
/* Halo : calque separe, fixe, pose exactement sous les traits. */
html body #home.hero > .hero__velra > .hero__velra-svg--glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: opacity;
  animation: heroVelraFade 1.6s ease 1.6s forwards;
}
html body #home.hero .hero__velra-svg path {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 8;
}
html body #home.hero .hero__velra-lines path {
  stroke: url(#heroVelraStroke);
  stroke-width: var(--velra-sw);
  opacity: .82;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: heroVelraDraw 2.2s cubic-bezier(.65, 0, .35, 1) forwards;
  animation-delay: calc(.3s + var(--i, 0) * .14s);
}
html body #home.hero .hero__velra-glow path {
  stroke: #5eaaff;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body #home.hero .hero__velra-glow--wide path {
  stroke-width: calc(var(--velra-sw) * 9);
  opacity: .05;
}
html body #home.hero .hero__velra-glow--near path {
  stroke-width: calc(var(--velra-sw) * 4);
  opacity: .08;
}
html body #home.hero .hero__velra-spark {
  opacity: 0;
  animation: heroVelraFade 1.2s ease 2.9s forwards;
}
html body #home.hero .hero__velra-spark path {
  stroke: #5eaaff;
  stroke-width: calc(var(--velra-sw) * 1.6);
  stroke-dasharray: .06 .94;
  stroke-dashoffset: 1;
  animation: heroVelraSpark 7s linear infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@keyframes heroVelraDraw { to { stroke-dashoffset: 0; } }
@keyframes heroVelraFade { to { opacity: 1; } }
@keyframes heroVelraSpark {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body #home.hero .hero__velra-lines path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  html body #home.hero > .hero__velra > .hero__velra-svg--glow { animation: none; opacity: 1; }
  html body #home.hero .hero__velra-spark { display: none; }
}

/* ---- 3) NOTRE EQUIPE : fond triangulaire ------------------------------
   .team__bg-anim (degrade anime "teamGradientShift") reste en dessous :
   les facettes sont translucides, la couleur continue donc de changer.
   Les mosaiques des coins restent au-dessus, alignees sur la grille. */
html body #team > .team__tri {
  position: absolute;
  inset: 0;
  /* z-index auto : pas de calque isole -> les traits peuvent se fondre
     dans le degrade anime situe dessous. */
  z-index: auto;
  pointer-events: none;
  overflow: hidden;
}
html body #team > .team__tri > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Calques propres : dessines une fois, jamais repeints par le degrade
     anime (fluidite du defilement). */
  will-change: transform;
}
/* Traits : se teintent de la couleur du fond qui change (multiply),
   plus discrets, fondus en haut / en bas (le long de la pente) et
   sous les mosaiques (masque dessine par script.js). */
html body #team > .team__tri > .team__tri-lines {
  mix-blend-mode: multiply;
}

/* ============================================================
   CORRECTIFS 06/10/2026 (2)
   ============================================================ */

/* ---- NOTRE EQUIPE : mosaiques (transparence d'origine retablie) -------
   Haut -> coin DROIT, bas -> coin GAUCHE (miroir horizontal des dessins
   d'origine : la partie dense reste collee a l'angle). */
html body #team .team__mosaic--tl {
  top: 0;
  left: auto;
  right: 0;
  /* remonte de la marge vide du dessin (114.3 / 659) : les triangles
     touchent le bord, la pente les decoupe comme avant. */
  transform: translateY(-17.34%) scaleX(-1);
}
html body #team .team__mosaic--br {
  right: auto;
  left: 0;
  bottom: 0;
  /* descend de la marge vide du dessin (114.3 / 539) : les triangles
     touchent le bord bas, la pente les decoupe comme avant. */
  transform: translateY(21.2%) scaleY(-1);
}

/* ---- NOTRE EQUIPE : traits fondus sur les bords inclines -------------
   Haut  : le long de la pente, du bord GAUCHE de la page jusqu'au centre.
   Bas   : le long de la pente, du bord DROIT de la page jusqu'au centre.
   Trait net (span) + halo doux (::before), sans "filter" : aucun cout de
   rendu (un filter sur ce calque faisait ramer le fond anime Articles). */
html body #team > .team__edge {
  --edge-w: 2px;
  --edge-glow: 9px;
  --s: var(--team-slope, 72px);
  position: absolute;
  width: 50%;
  height: calc(var(--team-slope, 72px) + 14px);
  z-index: 4;
  pointer-events: none;
}
html body #team > .team__edge > span,
html body #team > .team__edge::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
}
html body #team > .team__edge--top { top: 0; left: 0; }
html body #team > .team__edge--bottom { right: 0; bottom: 0; }

/* Haut : bord de #team = (0, pente) -> (50%, pente / 2) */
html body #team > .team__edge--top > span {
  background: linear-gradient(90deg, #8ec3ff 0%, rgba(94, 170, 255, .85) 30%, rgba(94, 170, 255, 0) 100%);
  clip-path: polygon(0 var(--s), 100% calc(var(--s) / 2),
    100% calc(var(--s) / 2 + var(--edge-w)), 0 calc(var(--s) + var(--edge-w)));
  -webkit-clip-path: polygon(0 var(--s), 100% calc(var(--s) / 2),
    100% calc(var(--s) / 2 + var(--edge-w)), 0 calc(var(--s) + var(--edge-w)));
}
html body #team > .team__edge--top::before {
  background: linear-gradient(90deg, rgba(94, 170, 255, .22) 0%, rgba(94, 170, 255, .1) 40%, rgba(94, 170, 255, 0) 100%);
  clip-path: polygon(0 var(--s), 100% calc(var(--s) / 2),
    100% calc(var(--s) / 2 + var(--edge-glow)), 0 calc(var(--s) + var(--edge-glow)));
  -webkit-clip-path: polygon(0 var(--s), 100% calc(var(--s) / 2),
    100% calc(var(--s) / 2 + var(--edge-glow)), 0 calc(var(--s) + var(--edge-glow)));
}

/* Bas : bord de #team = (50%, 100% - pente / 2) -> (100%, 100% - pente) */
html body #team > .team__edge--bottom > span {
  background: linear-gradient(270deg, #8ec3ff 0%, rgba(94, 170, 255, .85) 30%, rgba(94, 170, 255, 0) 100%);
  clip-path: polygon(0 calc(100% - var(--s) / 2 - var(--edge-w)), 100% calc(100% - var(--s) - var(--edge-w)),
    100% calc(100% - var(--s)), 0 calc(100% - var(--s) / 2));
  -webkit-clip-path: polygon(0 calc(100% - var(--s) / 2 - var(--edge-w)), 100% calc(100% - var(--s) - var(--edge-w)),
    100% calc(100% - var(--s)), 0 calc(100% - var(--s) / 2));
}
html body #team > .team__edge--bottom::before {
  background: linear-gradient(270deg, rgba(94, 170, 255, .22) 0%, rgba(94, 170, 255, .1) 40%, rgba(94, 170, 255, 0) 100%);
  clip-path: polygon(0 calc(100% - var(--s) / 2 - var(--edge-glow)), 100% calc(100% - var(--s) - var(--edge-glow)),
    100% calc(100% - var(--s)), 0 calc(100% - var(--s) / 2));
  -webkit-clip-path: polygon(0 calc(100% - var(--s) / 2 - var(--edge-glow)), 100% calc(100% - var(--s) - var(--edge-glow)),
    100% calc(100% - var(--s)), 0 calc(100% - var(--s) / 2));
}
@media (max-width: 600px) {
  html body #team > .team__edge { --edge-w: 1.5px; --edge-glow: 6px; }
}

/* ---- COMMUNAUTE : montee des conteneurs au scroll ---------------------
   Pendant la montee (data-lift="1", section pas encore fixee), la boite
   de fusion ne coupe plus ses enfants : on voit les conteneurs arriver
   d'en bas. Des que la section se fixe, tout redevient exactement comme
   avant (scene minutee intacte). */
html body #eventsPin[data-flow][data-lift="1"] #events .events__merge,
html body #eventsPin[data-lift="1"] #events .events__merge {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
html body #eventsPin[data-lift="1"] #events .events__grid {
  overflow: visible !important;
}


/* ============================================================
   CORRECTIFS 07/10/2026
   ============================================================ */

/* ---- 1) CREATEURS : aucun degrade sombre en bas des vignettes YouTube --
   Le leger voile du HAUT (lisibilite du badge) est conserve. Les vignettes
   TikTok gardent leur degrade noir d'origine en bas. */
html body .creator-video__link::after {
  background: linear-gradient(180deg, rgba(4, 12, 26, .38) 0%, rgba(4, 12, 26, 0) 38%) !important;
}

/* ---- 2) TIKTOK : vignettes fixes + fondu enchaine (comme YouTube) -----
   Plus de defilement : la rangee reste en place, centree. L'ancienne
   vignette reste au-dessus de la nouvelle, a la meme place, et s'efface. */
html body .creators__shorts-track {
  position: relative;
  margin-inline: auto;
  transform: none !important;
  will-change: auto;
}
html body .short-card.is-leaving {
  position: absolute !important;
  z-index: 3;
  margin: 0 !important;
  pointer-events: none !important;
}
html body .short-card .short-card__inner {
  transform: none !important;
  transition: opacity .42s ease !important;
}
html body .short-card.is-leaving.is-fading .short-card__inner { opacity: 0 !important; }

/* ---- 3) "DERNIERE NEWS" : meme apparition que les boutons -------------
   --vf-news-title (script.js) suit desormais la course visible des
   boutons Articles / Createurs : le titre entre et se pose avec eux. */

/* ---- 4) COMMUNAUTE (accueil) : angles calques sur les articles --------
   Articles : haut-droit coupe (--cut-lg), bas-droit coupe (--cut-sm),
   angles gauches droits. Le conteneur Communaute prend les memes angles
   (a l'echelle des articles) et les GARDE pendant toute sa fermeture :
   la decoupe suit le bord haut / bas qui se referme, au lieu d'un
   rectangle a angles droits. */
html body #eventsPin[data-flow="timed"] #events .events__merge {
  --cm-tr0: calc(var(--cut-lg) * var(--scene-news-scale, 1));
  --cm-br0: calc(var(--cut-sm) * var(--scene-news-scale, 1));
  --cm-room: calc(var(--scene-stage-h) * (1 - var(--scene-close)) / 2);
  --cm-tr: min(var(--cm-tr0), var(--cm-room));
  --cm-br: min(var(--cm-br0), var(--cm-room));
  --cm-t: calc(50% * var(--scene-close));
  --cm-b: calc(100% - 50% * var(--scene-close));
  clip-path: polygon(
    0 var(--cm-t),
    calc(100% - var(--cm-tr)) var(--cm-t),
    100% calc(var(--cm-t) + var(--cm-tr)),
    100% calc(var(--cm-b) - var(--cm-br)),
    calc(100% - var(--cm-br)) var(--cm-b),
    0 var(--cm-b)
  ) !important;
  -webkit-clip-path: polygon(
    0 var(--cm-t),
    calc(100% - var(--cm-tr)) var(--cm-t),
    100% calc(var(--cm-t) + var(--cm-tr)),
    100% calc(var(--cm-b) - var(--cm-br)),
    calc(100% - var(--cm-br)) var(--cm-b),
    0 var(--cm-b)
  ) !important;
}
/* Angles exterieurs des surfaces internes = memes angles (les decoupes
   internes qui se referment pendant la fusion sont conservees). */
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(1) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--scene-inner-cut) 100%, 0 calc(100% - var(--scene-inner-cut))) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, var(--scene-inner-cut) 100%, 0 calc(100% - var(--scene-inner-cut))) !important;
}
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(3) {
  clip-path: polygon(0 0, calc(100% - var(--cm-tr0)) 0, 100% var(--cm-tr0), 100% calc(100% - var(--scene-inner-cut)), calc(100% - var(--scene-inner-cut)) 100%, 0 100%) !important;
  -webkit-clip-path: polygon(0 0, calc(100% - var(--cm-tr0)) 0, 100% var(--cm-tr0), 100% calc(100% - var(--scene-inner-cut)), calc(100% - var(--scene-inner-cut)) 100%, 0 100%) !important;
}
html body #eventsPin[data-flow="timed"] #events .events__merge > .upcoming {
  clip-path: polygon(var(--scene-inner-cut) 0, calc(100% - var(--scene-inner-cut)) 0, 100% var(--scene-inner-cut), 100% calc(100% - var(--cm-br0)), calc(100% - var(--cm-br0)) 100%, 0 100%, 0 var(--scene-inner-cut)) !important;
  -webkit-clip-path: polygon(var(--scene-inner-cut) 0, calc(100% - var(--scene-inner-cut)) 0, 100% var(--scene-inner-cut), 100% calc(100% - var(--cm-br0)), calc(100% - var(--cm-br0)) 100%, 0 100%, 0 var(--scene-inner-cut)) !important;
}
@media (max-width: 600px) {
  /* Mobile : Tournois | Evenement en haut, Concours pleine largeur. */
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(1),
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(3) {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:nth-child(2) {
    clip-path: polygon(0 0, calc(100% - var(--cm-tr0)) 0, 100% var(--cm-tr0), 100% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, calc(100% - var(--cm-tr0)) 0, 100% var(--cm-tr0), 100% 100%, 0 100%) !important;
  }
}
/* Fermeture : les surfaces internes perdent leurs decoupes (inchange),
   le conteneur garde les siennes (regle ci-dessus). */
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .events__grid > .event-card,
html body #eventsPin[data-flow="timed"][data-scene="transition"][data-actu="1"] #events .events__merge > .upcoming {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* ---- 5) PROCHAINS EVENEMENTS : survol des boutons ---------------------
   Plus de texte noir : le bouton s'eclaircit legerement (fond, bord,
   texte), transition douce, aucun scale ni deplacement. */
html body .upcoming__list .upcoming__item .btn--az,
html body .upcoming__list .upcoming__item .btn--az2,
html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .btn--az,
html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .btn--az2 {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
  filter: none !important;
}
html body .upcoming__list .upcoming__item .btn--az:hover,
html body .upcoming__list .upcoming__item .btn--az:focus-visible,
html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .btn--az:hover,
html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .btn--az:focus-visible {
  background: rgba(86, 159, 243, .2) !important;
  border-color: rgba(94, 170, 255, .5) !important;
  color: #e3eeff !important;
  outline-color: transparent !important;
}
html body .upcoming__list .upcoming__item .btn--az2:hover,
html body .upcoming__list .upcoming__item .btn--az2:focus-visible,
html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .btn--az2:hover,
html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .btn--az2:focus-visible {
  background: rgba(82, 139, 179, .16) !important;
  border-color: rgba(94, 170, 255, .4) !important;
  color: #c7d8f2 !important;
  outline-color: transparent !important;
}


/* ============================================================
   CORRECTIFS 07/10/2026 (2)
   ============================================================ */

/* Cartes Joueur / Manager du roster : plus d'ombre ni de halo autour. */
html body #team .roster-card,
html body #team .roster-card:hover,
html body #team .roster-card:focus-within {
  box-shadow: none !important;
  filter: none !important;
}

/* Titre « Rejoindre + mot anime » : le conteneur epouse exactement les
   lettres (haut, bas et cotes). Les mesures viennent de index.html
   (--ink-h, --ink-dx, --ink-dy, --ink-shift). */
html body #events #eventsRotate.is-ink {
  height: var(--ink-h) !important;
  padding: 0 !important;
  position: relative !important;
  top: var(--ink-shift, 0px) !important;
  transition: background-color 400ms ease, color 400ms ease, height 600ms cubic-bezier(.22,1,.36,1),
              top 600ms cubic-bezier(.22,1,.36,1) !important;
}
html body #events #eventsRotate.is-ink.ink-instant { transition: none !important; }
html body #events #eventsRotate.is-ink #eventsRotateMask {
  padding: 0 !important;
  height: 100% !important;
  align-items: flex-start !important;
}
html body #events #eventsRotate.is-ink #eventsRotateInner {
  height: auto !important;
  margin: var(--ink-dy, 0px) 0 0 var(--ink-dx, 0px) !important;
}


/* ============================================================
   CORRECTIFS 07/10/2026 (3)
   ============================================================ */
:root {
  --velra-beige: #a78bfa;
  --velra-beige-soft: rgba(167, 139, 250, .14);
  --velra-beige-line: rgba(167, 139, 250, .45);
}

/* ---- Footer : le logo VELRA passe en bleu au survol, comme les
   icones reseaux (meme couleur, meme transition, sans mouvement). */
html body .footer .footer__brand .footer__logo::after {
  transition: background-color .35s ease !important;
}
html body .footer .footer__brand .footer__logo:hover::after,
html body .footer .footer__brand .footer__logo:focus-visible::after {
  background-color: var(--accent, #5eaaff) !important;
}

/* ---- Titre « Rejoindre + mot anime » : plus de vignette autour du mot.
   Le mot, sa couleur et son animation restent identiques. */
html body #events #eventsRotate,
html body #events #eventsRotate.is-ink {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* ---- Derniere news : description retiree. */
html body #eventsPin #actu .actu__intro { display: none !important; }

/* ---- Navbar (PC) : le texte du premier onglet commence exactement
   sur la marge gauche de la page ; le trait suit la largeur du texte. */
@media (min-width: 1301px) {
  html body .navbar .navbar__nav {
    margin-left: calc(-1 * clamp(6px, 0.9vw, 13px)) !important;
  }
  html body .navbar .navbar__nav .navbar__link::after {
    left: clamp(6px, 0.9vw, 13px) !important;
    right: clamp(6px, 0.9vw, 13px) !important;
    transition: transform var(--tr, .22s cubic-bezier(.4,0,.2,1)), background-color .22s ease !important;
  }
}
/* Trait des onglets : beige au survol d'un autre onglet, gris au survol
   de l'onglet deja selectionne (bleu au repos). */
html body .navbar .navbar__nav .navbar__link:not(.is-current):not([aria-current="page"])::after {
  background-color: var(--velra-beige) !important;
}
html body .navbar .navbar__nav .navbar__link.is-current:hover::after,
html body .navbar .navbar__nav .navbar__link[aria-current="page"]:hover::after {
  background-color: #8d97a8 !important;
}

/* ---- Beige : cartes Manager, 2e trait du hero, boutons Equipe et
   Createurs, liens des cartes evenement, bouton Assistance. */
html body #team .roster-card__tag--alt {
  color: var(--velra-beige) !important;
  border-color: rgba(167, 139, 250, .32) !important;
}
html body #home.hero .hero__sub-wrap > .hero__block-line {
  background: var(--velra-beige) !important;
  background-color: var(--velra-beige) !important;
}
html body .btn-cta.team__equipe-btn,
html body .btn-cta.actu__creators-btn,
html body .creators__mobile-actions .btn-cta.btn-cta--mirror,
html body #eventsPin[data-flow] #actu .actu__header > .btn-cta.actu__creators-btn {
  background: var(--velra-beige) !important;
  background-color: var(--velra-beige) !important;
}
html body .event-card .event-card__link,
html body .event-card .event-card__link:visited {
  color: var(--velra-beige) !important;
}
html body .event-card .event-card__link:hover,
html body .event-card .event-card__link:focus-visible {
  color: #d4c8ff !important;
}
html body .navbar .navbar__cta--ghost,
html body .navbar .navbar__cta--ghost:hover,
html body .navbar .navbar__cta--ghost:focus,
html body .navbar .navbar__cta--ghost:focus-visible,
html body .navbar .navbar__cta--ghost:active {
  color: var(--velra-beige) !important;
  background: var(--velra-beige-soft) !important;
  border-color: var(--velra-beige-line) !important;
}
html body .navbar__mobile .mobile__bottom-link--assistance,
html body .mobile__bottom-link--assistance {
  color: var(--velra-beige) !important;
}

/* ---- MOBILE (<= 600px) : section Notre equipe ------------------------ */
@media (max-width: 600px) {
  /* Blocs centres, la porte s'ouvre de bas en haut (charniere en bas). */
  html body #team .team__content .team__info,
  html body #team .team__info,
  html body #team .staff-recruit.staff-recruit--v3 .staff-recruit__copy,
  html body #team .staff-recruit--v3 .staff-recruit__copy {
    align-items: center !important;
    text-align: center !important;
    transform-origin: 50% 100% !important;
    transform: perspective(900px) rotateX(calc(var(--door-open, 0) * 62deg)) !important;
  }
  html body #team .staff-recruit--v3 > .staff-recruit__copy-shell {
    justify-self: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  html body #team .team__info > .team__title,
  html body #team .team__info > .team__desc,
  html body #team .staff-recruit--v3 .staff-recruit__copy .staff-recruit__title,
  html body #team .staff-recruit--v3 .staff-recruit__copy .staff-recruit__desc {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }
  html body #team .team__info .velra-text-reveal-line,
  html body #team .staff-recruit__copy .velra-text-reveal-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html body #team .team__info .team__ribbon-stats,
  html body #team .staff-recruit--v3 .staff-recruit__copy .team__ribbon-stats--staff {
    justify-content: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* « Les avantages » au centre. */
  html body #team .staff-recruit--v3 > .staff-perks {
    justify-self: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  html body #team .staff-perks__title { text-align: center !important; }
  html body #team .staff-perks .staff-banners {
    align-items: center !important;
    align-self: center !important;
  }
  /* Illustration VELRA / STAFF aussi grande que les cartes joueur. */
  html body #team .staff-recruit--v3 > .staff-recruit__art {
    width: min(100%, 420px) !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---- Mobile (<=600px) : blocs « Plusieurs jeux, une equipe. » et
   « Devenir membre du personnel. » centres sur toute la largeur. */
@media (max-width: 600px) {
  html body #team.team-section .team__content > .team__info,
  html body #team.team-section .staff-recruit.staff-recruit--v3 .staff-recruit__copy {
    width: 100% !important;
    max-width: 100% !important;
    align-self: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    text-align: center !important;
  }
  html body #team.team-section .team__info > .team__title,
  html body #team.team-section .staff-recruit--v3 .staff-recruit__copy .staff-recruit__title {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* >>> VELRA-BEIGE-CTA-STAFF-MOBILE-20261008 START <<< */
/* La pastille et le fond anime suivent la couleur du bouton beige,
   sans modifier la largeur, la fleche ni les animations existantes. */
html body .btn-cta.team__equipe-btn,
html body .btn-cta.actu__creators-btn,
html body .creators__mobile-actions .btn-cta.btn-cta--mirror {
  --v8-cta-fill: var(--velra-beige, #a78bfa) !important;
}
html body .btn-cta.team__equipe-btn > .btn-cta__icon,
html body .btn-cta.actu__creators-btn > .btn-cta__icon,
html body .creators__mobile-actions .btn-cta.btn-cta--mirror > .btn-cta__icon {
  background: #9a86e8 !important;
  background: color-mix(in srgb, #040e1e 15%, var(--velra-beige, #a78bfa)) !important;
}
html body main .btn-cta.team__equipe-btn[data-v8-cta]::before,
html body main .btn-cta.actu__creators-btn[data-v8-cta]::before,
html body main .creators__mobile-actions .btn-cta.btn-cta--mirror[data-v8-cta]::before {
  background: var(--velra-beige, #a78bfa) !important;
}
@media (max-width: 600px) {
  /* Supprime la limite historique d'une demi-page sur ces deux textes. */
  html body #team.team-section .team__info > .team__desc,
  html body #team.team-section .staff-recruit.staff-recruit--v3 .staff-recruit__copy > .staff-recruit__desc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
  /* Agrandit le dessin lui-meme, pas seulement sa boite. */
  html body #team.team-section .staff-recruit--v3 > .staff-recruit__art {
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  html body #team.team-section .staff-recruit--v3 .staff-recruit__scene.staff-recruit__scene--folio {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  html body #team.team-section .staff-recruit--v3 .staff-recruit__composition {
    transform-box: view-box !important;
    transform-origin: 310px 250px !important;
    transform: scale(1.27) !important;
  }
}
/* >>> VELRA-BEIGE-CTA-STAFF-MOBILE-20261008 END <<< */

/* >>> VELRA-STAFF-FOLIO-MOBILE-REAL-SIZE-20261008 START <<< */
@media (max-width: 600px) {
  /* Agrandissement reel de la charte principale, independant du cadre
     du SVG et des petits elements decoratifs. Les rotations sont conservees. */
  html body #team.team-section .staff-recruit--v3 .staff-recruit__composition > .v8-staff-part[data-enter-angle="8"] {
    transform-box: fill-box !important;
    transform-origin: center !important;
    transform: rotate(-8deg) !important;
    scale: 1.35;
  }
  /* Reserve l'espace du dessin agrandi pour ne pas recouvrir les stats
     ni le titre Les avantages. */
  html body #team.team-section .staff-recruit--v3 > .staff-recruit__art {
    margin-top: 24px !important;
    margin-bottom: 80px !important;
  }
}
/* >>> VELRA-STAFF-FOLIO-MOBILE-REAL-SIZE-20261008 END <<< */

/* 09/10/2026 — accueil : départ commun 1,5 s après l'arrivée. */
html.velra-home-intro:not(.velra-home-intro-ready) body #navbar.navbar,
html.velra-home-intro:not(.velra-home-intro-ready) body > .navbar__center-logo.velra-adaptive-center-logo,
html.velra-home-intro:not(.velra-home-intro-ready) body #home.hero > .hero__stats {
  opacity: 0 !important;
  pointer-events: none !important;
}
html.velra-home-intro.velra-home-intro-ready body #navbar.navbar,
html.velra-home-intro.velra-home-intro-ready body > .navbar__center-logo.velra-adaptive-center-logo,
html.velra-home-intro.velra-home-intro-ready body #home.hero > .hero__stats {
  opacity: 1 !important;
}
/* La transition spéciale ne dure que pendant le fondu d'entrée.
   Les transitions de scroll et de menu reprennent ensuite sans changement. */
html.velra-home-intro:not(.velra-home-intro-complete) body #navbar.navbar {
  transition: opacity .7s ease, padding .35s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.22,1,.36,1) !important;
}
html.velra-home-intro:not(.velra-home-intro-complete) body #home.hero > .hero__stats {
  transition: opacity .7s ease !important;
}
/* Le logo central est déplacé hors de la navbar par son effet adaptatif.
   Il doit donc recevoir le même fondu sur son propre lien, pas sur son image. */
html.velra-home-intro:not(.velra-home-intro-complete) body > .navbar__center-logo.velra-adaptive-center-logo {
  transition: opacity .7s ease !important;
}
/* Pause réelle : les animations du texte ne se jouent pas derrière un masque. */
html.velra-home-intro:not(.velra-home-intro-ready) body #home.hero > .hero__content {
  visibility: hidden;
}
html.velra-home-intro:not(.velra-home-intro-ready) body #home.hero > .hero__content,
html.velra-home-intro:not(.velra-home-intro-ready) body #home.hero > .hero__content * {
  animation-play-state: paused !important;
}
/* Même animation et même décalage entre les lignes ; premier départ à 1,5 s. */
html.velra-home-intro body #home.hero .hero__content > .hero__eyebrow { animation-delay: 0s; }
html.velra-home-intro body #home.hero .hero__headline-wrap > .hero__motto { animation-delay: .3s; }
html.velra-home-intro body #home.hero .hero__headline-wrap > .hero__title { animation-delay: .45s; }
html.velra-home-intro body #home.hero .hero__headline-wrap > .hero__block-line { animation-delay: .3s; }
html.velra-home-intro body #home.hero .hero__copy-wrap > .hero__sub-wrap { animation-delay: .65s; }
html.velra-home-intro body #home.hero .hero__sub-wrap > .hero__block-line { animation-delay: .75s; }

/* Boutons : leurs règles de survol d'origine restent entièrement intactes. */
@media (prefers-reduced-motion: reduce) {
  html.velra-home-intro:not(.velra-home-intro-complete) body #navbar.navbar,
  html.velra-home-intro:not(.velra-home-intro-complete) body > .navbar__center-logo.velra-adaptive-center-logo,
  html.velra-home-intro:not(.velra-home-intro-complete) body #home.hero > .hero__stats {
    transition: none !important;
  }
}
/* MISE EN AVANT : vignette beige, carre incline dans le sens inverse.
   L'etoile et les deux autres avantages restent inchanges. */
html body #team .staff-recruit--v3 .staff-perks .staff-banner[data-i18n="staff_banner_featured"] .staff-banner__diamond {
  background: linear-gradient(150deg, #ddd2ff 0%, var(--velra-beige, #a78bfa) 48%, #8b6cf0 100%);
  clip-path: polygon(0 0, 84% 0, 100% 100%, 16% 100%) !important;
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner[data-i18n="staff_banner_featured"] .staff-banner__bar {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%) !important;
  background: linear-gradient(90deg, #3d2f6b 0%, #2f2557 55%, #221a40 100%);
  border-top-color: rgba(167, 139, 250, .30);
  border-bottom-color: rgba(91, 66, 170, .45);
  box-shadow: inset 0 1px 0 rgba(221, 210, 255, .10);
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner[data-i18n="staff_banner_featured"] .staff-banner__label {
  color: var(--velra-beige, #a78bfa);
  text-shadow: none;
}

/* Avantages bleus : texte assorti à la vignette, comme les avantages beige. */
html body #team .staff-recruit--v3 .staff-perks .staff-banner[data-i18n="staff_banner_paid"] .staff-banner__label,
html body #team .staff-recruit--v3 .staff-perks .staff-banner--priority .staff-banner__label {
  color: var(--accent);
  text-shadow: none;
}


/* HERO ACCUEIL — plein ecran a toutes les largeurs.
   dvh suit la hauteur visible lorsque les barres du navigateur mobile changent.
   Aucun changement sur les fonds ni sur les animations existantes. */
html body section#home.hero {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

/* Voir plus / Voir moins : texte et fleche beige, dans les deux etats. */
html body #home.hero .hero__sub-toggle,
html body #home.hero .hero__sub-toggle:hover,
html body #home.hero .hero__sub-toggle:focus-visible {
  color: var(--velra-beige, #a78bfa) !important;
}

/* Notre equipe : fin de section rapprochee, sans toucher a la pente. */
html body #team.team-section {
  padding-bottom: calc(var(--team-slope) + 20px) !important;
}
@media (max-width: 600px) {
  /* Une seule reserve sous les CTA, plutot que trois espaces cumules. */
  html body #team .staff-recruit.staff-recruit--v3 {
    padding-bottom: 0 !important;
  }
  html body #team .team__mobile-bottom-actions {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
  }
}

/* Accueil : ajustements cibles des evenements et createurs sur mobile. */
@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list {
    --upcoming-game-logo-w: 60px;
    --upcoming-game-logo-h: 27px;
  }
  html body .creators-section .creator-video__views {
    display: none !important;
  }
  html body .creators-section .creator-video--s1 .creator-video__badge,
  html body .creators-section .creator-video--s2 .creator-video__badge {
    font-size: 0 !important;
    gap: 0 !important;
    padding: 4px !important;
  }
  html body .creators-section .creator-video--s1 .creator-video__badge-label,
  html body .creators-section .creator-video--s2 .creator-video__badge-label {
    display: none !important;
  }
}

/* >>> VELRA-V12 START (10/10/2026) <<< */

/* 1) Derniere news : plus aucune description sous le titre. */
html body #actu .actu__header > .actu__intro,
html body #eventsPin #actu .actu__header > .actu__intro,
html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro {
  display: none !important;
}
html body #eventsPin[data-flow="timed"] #actu .actu__header > .actu__intro::after,
html body #eventsPin[data-flow="timed"][data-scene="news"] #actu .actu__header > .actu__intro::after {
  content: none !important;
  display: none !important;
}

/* 2) Plus de contour / voile bleu ciel quand on touche ou maintient un
      conteneur (surbrillance native du navigateur). */
html,
html * {
  -webkit-tap-highlight-color: transparent !important;
}

/* 3) Communaute (accueil) : Tournois / Evenement / Defi ne gardent plus
      leur effet de survol apres un appui. Le survol reste actif tant que
      la souris est dessus (PC) ou pendant l'appui (tactile) ; le contour
      de focus ne s'affiche plus qu'a la navigation clavier. */
html body #eventsPin #events .events__grid > .event-card:focus-within:not(:hover):not(:has(:focus-visible)),
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:focus-within:not(:hover):not(:has(:focus-visible)) {
  background: #06112b !important;
  box-shadow: none !important;
}
@media (hover: none), (pointer: coarse) {
  html body #eventsPin #events .events__grid > .event-card:hover:not(:active):not(:has(:focus-visible)),
  html body #eventsPin #events .events__grid > .event-card:focus-within:not(:active):not(:has(:focus-visible)),
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:hover:not(:active):not(:has(:focus-visible)),
  html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:focus-within:not(:active):not(:has(:focus-visible)) {
    background: #06112b !important;
    box-shadow: none !important;
  }
}

/* 4) Accueil / Communaute: remove only the two light-blue star tones.
      The dark stars, background, parallax and section geometry stay intact. */
html body #eventsPin[data-community-art] .community-art__star.community-art__facet--community-tone-b,
html body #eventsPin[data-community-art] .community-art__star.community-art__facet--community-tone-d {
  display: none !important;
}

/* 5) Notre equipe : trait du bas (cote droit) en beige. */
html body #team > .team__edge--bottom > span {
  background: linear-gradient(270deg, #c6b4fd 0%, rgba(167, 139, 250, .88) 30%, rgba(167, 139, 250, 0) 100%) !important;
}
html body #team > .team__edge--bottom::before {
  background: linear-gradient(270deg, rgba(167, 139, 250, .22) 0%, rgba(167, 139, 250, .1) 40%, rgba(167, 139, 250, 0) 100%) !important;
}

/* 6) Mobile (<= 600px) : icone VELRA / STAFF identique au PC et plus grande.
      Le folio n'est plus agrandi seul (il recouvrait pieces et agenda) :
      il reprend sa rotation d'origine et c'est l'ensemble qui grandit. */
@media (max-width: 600px) {
  html body #team.team-section .staff-recruit--v3 .staff-recruit__composition > .v8-staff-part[data-enter-angle="8"] {
    transform-box: view-box !important;
    transform-origin: 297px 264px !important;
    transform: rotate(-8deg) !important;
    scale: none !important;
  }
  html body #team.team-section .staff-recruit--v3 .staff-recruit__composition {
    transform-box: view-box !important;
    transform-origin: 290px 262px !important;
    transform: scale(1.12) !important;
  }
  html body #team.team-section .staff-recruit--v3 > .staff-recruit__art {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
  }
}
/* >>> VELRA-V12 END <<< */


/* >>> VELRA-V13 START (10/10/2026) <<< */

/* 1) Communaute (accueil) : pendant la fermeture, les angles du conteneur
      s'aplatissent progressivement. Il devient une ligne fine (2 px),
      puis cette ligne se retracte vers le centre jusqu'a disparaitre. */
html body #eventsPin[data-flow="timed"]:not([data-lift="1"]):not([data-static="1"]) #events .events__merge {
  --cm-cv: min(1, calc(var(--scene-close) / 0.82));
  --cm-ch: max(0, calc((var(--scene-close) - 0.82) / 0.18));
  --cm-t: calc((50% - 1px) * var(--cm-cv));
  --cm-b: calc(100% - (50% - 1px) * var(--cm-cv));
  --cm-l: calc(50% * var(--cm-ch));
  --cm-r: calc(100% - 50% * var(--cm-ch));
  --cm-tr: calc(var(--cm-tr0) * (1 - var(--cm-cv)));
  --cm-br: calc(var(--cm-br0) * (1 - var(--cm-cv)));
  clip-path: polygon(
    var(--cm-l) var(--cm-t),
    calc(var(--cm-r) - var(--cm-tr)) var(--cm-t),
    var(--cm-r) calc(var(--cm-t) + var(--cm-tr)),
    var(--cm-r) calc(var(--cm-b) - var(--cm-br)),
    calc(var(--cm-r) - var(--cm-br)) var(--cm-b),
    var(--cm-l) var(--cm-b)
  ) !important;
  -webkit-clip-path: polygon(
    var(--cm-l) var(--cm-t),
    calc(var(--cm-r) - var(--cm-tr)) var(--cm-t),
    var(--cm-r) calc(var(--cm-t) + var(--cm-tr)),
    var(--cm-r) calc(var(--cm-b) - var(--cm-br)),
    calc(var(--cm-r) - var(--cm-br)) var(--cm-b),
    var(--cm-l) var(--cm-b)
  ) !important;
}

/* 2) Articles : au sortir du survol, le contenu de la carte ne revient
      qu'une fois l'icone disparue (0,3 s). A l'entree, il se masque aussitot. */
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__body > * {
  transition: opacity .2s ease .32s !important;
}
html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__body > *,
html body #eventsPin #actu .actu__grid > .actu-card:focus-visible .actu-card__body > * {
  transition-delay: 0s !important;
}

/* 3) Icones de survol une carte sur deux en beige :
      1re bleue, 2e beige, 3e bleue... (Articles et Createurs). */
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(even) .actu-card__hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='2' y='2' width='60' height='60' fill='none' stroke='%23a78bfa' stroke-opacity='0.9' stroke-width='1.5'/%3E%3C/svg%3E") !important;
}
html body #eventsPin #actu .actu__grid > .actu-card:nth-child(even) .actu-card__hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 40 L40 24 M27 24 H40 V37' fill='none' stroke='%23a78bfa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html body .creators-section .creators__showcase > .creator-video:nth-child(even) .cv-chev,
html body .creators-section .creators__shorts-track > .short-card:nth-child(even) .cv-chev {
  stroke: var(--velra-beige, #a78bfa) !important;
}

/* 4) Vignettes YouTube / TikTok : plus de fondu ni de scale dans le cycle.
      Les traits se retractent vers la pointe exactement comme ils sont
      apparus (cvChevDraw4), puis se redessinent. */
html body .creators-section .creator-video__play svg.cv-chevrons {
  scale: 1 !important;
  transition: none !important;
}
html body .creators-section .creator-video__media:hover .cv-chevrons,
html body .creators-section .creator-video__media:focus-within .cv-chevrons,
html body .creators-section .short-card__inner:hover .cv-chevrons,
html body .creators-section .short-card__inner:focus-within .cv-chevrons {
  animation: none !important;
  opacity: 1 !important;
  scale: 1 !important;
}

/* 5) Notre equipe : les vignettes Remuneration / Mise en avant / Priorite
      recoivent l'effet de revelation (bloc beige) ; masquees tant que
      l'effet n'est pas pret, pour ne pas les voir clignoter. */
html body #team .staff-banner__label.velra-text-reveal:not([data-reveal-ready="true"]) {
  visibility: hidden !important;
}
html body #team .staff-perks .staff-banner__label .velra-text-reveal-line {
  margin: 0 !important;
  max-width: 100% !important;
}

/* 6) Communaute : "Voir les tournois", "S'inscrire", "Decouvrir les defis"
      en beige (PC et tablette ; sur mobile le lien couvre la carte sans texte). */
@media (min-width: 601px) {
  html body #eventsPin[data-flow] #events .events__grid > .event-card > .event-card__link,
  html body #eventsPin[data-flow] #events .events__grid > .event-card > .event-card__link:visited,
  html body #eventsPin[data-flow] #events .events__grid > .event-card:hover > .event-card__link,
  html body #eventsPin[data-flow] #events .events__grid > .event-card > .event-card__link:hover,
  html body #eventsPin[data-flow] #events .events__grid > .event-card > .event-card__link:focus-visible {
    color: var(--velra-beige, #a78bfa) !important;
  }
}
/* >>> VELRA-V13 END <<< */

/* HERO — traits traces sur la meme chronologie que les lettres VELRA.
   Aucun masque vertical : la trame reste visible jusqu'en bas.
   Le seul masque conserve une zone plus calme au centre. */
html body #home.hero > .hero__bg-gradient > .hero__network {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 49%, rgba(0,0,0,.16) 0%, rgba(0,0,0,.48) 27%, #000 65%);
  mask-image: radial-gradient(ellipse at 50% 49%, rgba(0,0,0,.16) 0%, rgba(0,0,0,.48) 27%, #000 65%);
}
html body #home.hero > .hero__bg-gradient > .hero__network path {
  fill: none;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: heroVelraDraw 2.2s cubic-bezier(.65, 0, .35, 1) forwards;
  animation-delay: calc(.3s + var(--i, 0) * .14s);
}
@media (max-width: 600px) {
  html body #home.hero > .hero__bg-gradient > .hero__network {
    width: 177.778vh;
    width: 177.778dvh;
    min-width: 100%;
    left: 68%;
    right: auto;
    transform: translateX(-68%);
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #home.hero > .hero__bg-gradient > .hero__network path {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* HERO — motif exclusivement bleu (sans toucher aux etincelles de VELRA). */
html body #home.hero > .hero__bg-gradient > .hero__network > g {
  stroke: #5eaaff;
}
html body #home.hero > .hero__bg-gradient > .hero__network > g:last-child {
  stroke: #8ec3ff;
}

/* Bande partenaires masquee : le vrai fond, traits compris, se prolonge
   sous la pente de Notre equipe, a la place de l'ancien aplat box-shadow.
   Hauteur du hero, disposition et geometrie des sections inchangees.
   Le clip conserve les limites laterales/hautes et n'ouvre que le bas. */
html body.partners-band-hidden section#home.hero {
  overflow: visible !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% + var(--team-slope) + 2px), 0 calc(100% + var(--team-slope) + 2px)) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% + var(--team-slope) + 2px), 0 calc(100% + var(--team-slope) + 2px)) !important;
  box-shadow: none !important;
}
html body.partners-band-hidden #home.hero > .hero__bg-gradient {
  bottom: calc(-1 * (var(--team-slope) + 2px)) !important;
  height: calc(100% + var(--team-slope) + 2px) !important;
  overflow: hidden !important;
}
@media (max-width: 600px) {
  html body.partners-band-hidden #home.hero > .hero__bg-gradient > .hero__network {
    width: calc((100vh + var(--team-slope) + 2px) * 1.77778);
    width: calc((100dvh + var(--team-slope) + 2px) * 1.77778);
  }
}

/* HERO — masque IMMOBILE sur chaque ligne ; seul son texte se deplace.
   La limite basse reste celle du texte au repos, sans croiser la description.
   Tailles, interlignes, grille et marges existantes conserves. */
html body #home.hero .hero__headline-wrap > .hero__motto,
html body #home.hero .hero__headline-wrap > .hero__title {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  clip-path: inset(-.3em -6% var(--hero-line-mask-inset, -.04em) -6%) !important;
  -webkit-clip-path: inset(-.3em -6% var(--hero-line-mask-inset, -.04em) -6%) !important;
}
html body #home.hero .hero__headline-wrap > .hero__motto > .hero__line-text,
html body #home.hero .hero__headline-wrap > .hero__title > .hero__line-text {
  display: block;
  opacity: 1;
  animation: velraHeroLineReveal 1s cubic-bezier(.22, 1, .36, 1) backwards;
}
html body #home.hero .hero__headline-wrap > .hero__motto > .hero__line-text { animation-delay: .3s; }
html body #home.hero .hero__headline-wrap > .hero__title > .hero__line-text { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  html body #home.hero .hero__headline-wrap > .hero__motto > .hero__line-text,
  html body #home.hero .hero__headline-wrap > .hero__title > .hero__line-text {
    animation: none;
    translate: none;
  }
}

/* Notre equipe : seuls les traits noirs sont attenues, pas les facettes. */
html body #team > .team__tri > .team__tri-lines { opacity: .65; }

/* Nouvelle vignette Cadeaux : meme format, palette beige. */
html body #team .staff-recruit--v3 .staff-perks .staff-banner--gifts .staff-banner__diamond {
  background: linear-gradient(150deg, #ddd2ff 0%, var(--velra-beige, #a78bfa) 48%, #8b6cf0 100%);
  clip-path: polygon(0 0, 84% 0, 100% 100%, 16% 100%) !important;
  color: #07101f;
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner--gifts .staff-banner__bar {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%) !important;
  background: linear-gradient(90deg, #3d2f6b 0%, #2f2557 55%, #221a40 100%);
  border-top-color: rgba(167, 139, 250, .30);
  border-bottom-color: rgba(91, 66, 170, .45);
  box-shadow: inset 0 1px 0 rgba(221, 210, 255, .10);
}
html body #team .staff-recruit--v3 .staff-perks .staff-banner--gifts .staff-banner__label {
  color: var(--velra-beige, #a78bfa);
  text-shadow: none;
}

/* Personnel : avantages en deux colonnes sur mobile uniquement.
   Priorité / Cadeaux à droite, avec la tige vers la gauche. */
@media (max-width: 1300px) {
  html body #team .staff-recruit--v3 .staff-perks > .staff-banners {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 14px 10px;
    width: 100% !important;
    max-width: 520px !important;
    align-items: center !important;
  }
  html body #team .staff-recruit--v3 .staff-perks .staff-banner {
    --diamond: 26px;
    --banner-h: 26px;
    --tuck: 14px;
    --bar-w: calc(100% - var(--diamond) + var(--tuck));
    width: 100%;
    min-width: 0;
  }
  html body #team .staff-recruit--v3 .staff-perks .staff-banner__bar {
    padding-left: calc(var(--tuck) + 6px) !important;
    padding-right: 10px !important;
  }
  html body #team .staff-recruit--v3 .staff-perks .staff-banner__label {
    font-size: 10px;
    letter-spacing: .06em;
  }
  html body #team .staff-recruit--v3 .staff-perks .staff-banner:nth-child(n + 3) {
    flex-direction: row-reverse !important;
  }
  html body #team .staff-recruit--v3 .staff-perks .staff-banner:nth-child(n + 3) .staff-banner__diamond {
    transform: scaleX(-1);
  }
  html body #team .staff-recruit--v3 .staff-perks .staff-banner:nth-child(n + 3) .staff-banner__diamond svg {
    transform: scaleX(-1);
  }
  html body #team .staff-recruit--v3 .staff-perks .staff-banner:nth-child(n + 3) .staff-banner__bar {
    margin-left: 0 !important;
    margin-right: calc(-1 * var(--tuck)) !important;
    padding-left: 10px !important;
    padding-right: calc(var(--tuck) + 6px) !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%) !important;
  }
  html body #team .staff-recruit--v3 .staff-perks .staff-banner:nth-child(n + 3) .staff-banner__label {
    text-align: right !important;
  }
}

/* Cadeaux sur mobile : coupe beige inversée, tige toujours à gauche. */
@media (max-width: 1300px) {
  html body #team .staff-recruit--v3 .staff-perks .staff-banner.staff-banner--gifts .staff-banner__bar {
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%) !important;
  }
}

/* Titres demandes en blanc, avec les icones des cartes et du calendrier. */
:root { --heading-white: #fff; }
html body .event-card > .event-card__title,
html body .event-card > .event-card__icon,
html body .upcoming__label,
html body .upcoming__label > *,
html body #team .team__title,
html body #team .team__title *,
html body #team .staff-recruit__title,
html body #team .staff-recruit__title * {
  color: var(--heading-white) !important;
  -webkit-text-fill-color: var(--heading-white) !important;
}

/* Icones des cartes et prochains evenements : retour au bleu du theme. */
html body .event-card > .event-card__icon,
html body .upcoming__label,
html body .upcoming__label > * {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}
/* La teinte suit la fermeture existante, jusqu'au beige quand la ligne
   fine est atteinte. Aucune nouvelle horloge ni modification du mouvement. */
:root { --community-closing-base: #06112b; }
html body #eventsPin[data-flow="timed"] #events .events__merge {
  --community-beige-progress: clamp(0, calc(var(--scene-close, 0) / .82), 1);
  --community-closing-color: color-mix(in srgb,
    var(--velra-beige) calc(var(--community-beige-progress) * 100%),
    var(--community-closing-base));
}
html body #eventsPin[data-flow="timed"] #events .events__merge > .events__grid > .event-card,
html body #eventsPin[data-flow="timed"] #events .events__merge > .upcoming {
  background: var(--community-closing-color) !important;
  background-color: var(--community-closing-color) !important;
}


/* ============================================================
   BOUTON "CREATEURS" AU NIVEAU DU TITRE "NOS CREATEURS DE CONTENU"
   (12/10/2026) — PC et tablette (> 600px) : le bouton est a GAUCHE,
   centre verticalement sur le titre. Le titre reste centre.
   Mobile (<= 600px) : inchange (rangee de boutons en bas de section).
   ============================================================ */
.creators-section .creators__head {
  position: relative;
}
.creators-section .creators__head > .creators__title {
  margin-bottom: clamp(10px, 1vw, 16px);
}
@media (min-width: 601px) {
  .creators-section .creators__head {
    padding-inline: 170px;
  }
  html body .creators-section .creators__head > .btn-cta.actu__creators-btn {
    position: absolute !important;
    top: 50% !important; bottom: auto !important;
    left: 0 !important; right: auto !important;
    width: max-content !important; min-width: 145px !important; max-width: none !important;
    height: 48px !important; min-height: 48px !important;
    margin: 0 !important;
    padding: 0 clamp(18px, 2vw, 28px) !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    color: #040e1e !important;
    cursor: pointer !important;
    transform: none !important; scale: none !important;
    translate: 0 calc(-50% + 28px) !important;
    opacity: 0;
    z-index: 2 !important;
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1), translate .8s cubic-bezier(.22, 1, .36, 1) !important;
  }
  html body .creators-section.is-visible .creators__head > .btn-cta.actu__creators-btn {
    opacity: 1;
    translate: 0 -50% !important;
  }
}
@media (min-width: 601px) and (prefers-reduced-motion: reduce) {
  html body .creators-section .creators__head > .btn-cta.actu__creators-btn {
    opacity: 1;
    translate: 0 -50% !important;
    transition: none !important;
  }
}

/* Derniere news : entree depuis la gauche, centrage mobile uniquement. */
html body #eventsPin[data-flow="timed"] #actu .actu__header > .section-title {
  left: var(--scene-pad) !important;
  right: auto !important;
  width: calc(100% - 2 * var(--scene-pad)) !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html body #eventsPin[data-flow="timed"]:not([data-static="1"]) #actu .actu__header > .section-title {
  transform: translate3d(calc(-1 * (1 - var(--vf-news-title, var(--scene-news-enter, 0))) * (100vw + 100%)), 0, 0) !important;
}

@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #actu .actu__header > .section-title {
    justify-content: center !important;
    text-align: center !important;
  }
}

html body #eventsPin[data-flow="timed"][data-static="1"] #actu .actu__header > .section-title {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #eventsPin[data-flow="timed"]:not([data-static="1"]) #actu .actu__header > .section-title {
    transform: none !important;
  }
}

/* ============================================================
   LUEUR CENTRALE — integree au degrade du fond (pas de calque qui
   "apparait" au refresh). Meme lueur reprise dans la section communaute.
   ============================================================ */
html body #home.hero,
html body section.hero#home,
html body.partners-band-hidden section#home.hero {
  background-color: #0a2050 !important;
  background-image:
    radial-gradient(ellipse at 50% 46%, rgba(65, 137, 235, .16) 0%, rgba(49, 117, 210, .08) 28%, rgba(49, 117, 210, .025) 48%, rgba(49, 117, 210, 0) 72%),
    linear-gradient(125deg, #0a2050 0%, #071d38 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
html body #home.hero > .hero__bg-gradient,
html body.partners-band-hidden #home.hero > .hero__bg-gradient {
  background: transparent !important;
  background-image: none !important;
  transition: none !important;
  animation: none !important;
}

html body #eventsPin #events.community-perspective > .community-bg,
html body #eventsPin[data-community-art] #events.community-perspective > .community-bg,
html body #eventsPin[data-flow] #events > .community-bg {
  background-color: #0a2050 !important;
  background-image:
    radial-gradient(ellipse at 50% 46%, rgba(65, 137, 235, .16) 0%, rgba(49, 117, 210, .08) 28%, rgba(49, 117, 210, .025) 48%, rgba(49, 117, 210, 0) 72%),
    linear-gradient(125deg, #0a2050 0%, #071d38 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-attachment: scroll !important;
}


/* >>> VELRA-V14 START (12/10/2026) <<< */

/* 1) NOTRE EQUIPE : les traits noirs du fond triangulaire sont plus
      transparents (les facettes ne changent pas). */
html body #team > .team__tri > .team__tri-lines {
  opacity: .3 !important;
}

/* 2) HERO : le fond (degrade + lueur centrale) EST le fond du hero.
      - plus de halo ajoute qui apparait apres le chargement ;
      - le calque de fond descend sous la pente de la section suivante
        (bande partenaires OU Notre equipe) : plus de vide sous le hero,
        avec ou sans bande partenaires ;
      - hauteur stable sur mobile (svh) : la barre d'adresse qui se replie
        au defilement ne redimensionne plus le hero (plus de saut). */
:root {
  --velra-hero-ext: calc(var(--team-slope, clamp(36px, 5vw, 110px)) + 4px);
  --velra-glow-radial: radial-gradient(ellipse at 50% 46%, rgba(65, 137, 235, .16) 0%, rgba(49, 117, 210, .08) 28%, rgba(49, 117, 210, .025) 48%, rgba(49, 117, 210, 0) 72%);
  --velra-glow-linear: linear-gradient(125deg, #0a2050 0%, #071d38 100%);
}
html body section#home.hero,
html body.partners-band-hidden section#home.hero {
  height: 100vh !important;
  height: 100svh !important;
  overflow: visible !important;
  background: #0a2050 !important;
  background-image: none !important;
  box-shadow: none !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% + var(--velra-hero-ext)), 0 calc(100% + var(--velra-hero-ext))) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% + var(--velra-hero-ext)), 0 calc(100% + var(--velra-hero-ext))) !important;
}
html body #home.hero > .hero__bg-gradient,
html body.partners-band-hidden #home.hero > .hero__bg-gradient {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: calc(100% + var(--velra-hero-ext)) !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  background-color: #0a2050 !important;
  /* La lueur reste centree sur le hero visible (et non sur le calque
     prolonge sous la pente). */
  background-image: var(--velra-glow-radial), var(--velra-glow-linear) !important;
  background-size: 100% calc(100% - var(--velra-hero-ext)), 100% 100% !important;
  background-position: top center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
/* Ancien halo "ajoute" autour de VELRA : retire (la lueur vient du fond). */
html body #home.hero > .hero__velra > .hero__velra-svg--glow {
  display: none !important;
}
@media (max-width: 600px) {
  html body #home.hero > .hero__bg-gradient > .hero__network,
  html body.partners-band-hidden #home.hero > .hero__bg-gradient > .hero__network {
    width: calc((100vh + var(--velra-hero-ext)) * 1.77778) !important;
    width: calc((100svh + var(--velra-hero-ext)) * 1.77778) !important;
  }
}

/* 3) COMMUNAUTE : meme lueur que le hero, integree au fond. */
html body #eventsPin[data-flow][data-flow][data-flow][data-flow][data-community-art] #events.community-perspective > .community-bg,
html body #eventsPin[data-flow][data-flow][data-flow][data-flow] #events > .community-bg {
  background-color: #0a2050 !important;
  background-image: var(--velra-glow-radial), var(--velra-glow-linear) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: scroll !important;
}

/* 4) COMMUNAUTE : fermeture du conteneur.
      - la teinte passe progressivement au BLEU (plus de beige) ;
      - pendant la fermeture, une SEULE surface se referme (le conteneur),
        les surfaces internes deviennent transparentes : plus d'effet de
        deux conteneurs qui s'entremelent. */
html body #eventsPin[data-flow="timed"] #events .events__merge {
  --community-closing-color: color-mix(in srgb,
    var(--accent, #5eaaff) calc(var(--community-beige-progress, 0) * 100%),
    var(--community-closing-base, #06112b)) !important;
}
html body #eventsPin[data-flow="timed"][data-actu="1"]:not([data-static="1"]) #events .events__merge {
  background: var(--community-closing-color) !important;
  background-color: var(--community-closing-color) !important;
  gap: 0 !important;
}
/* Plus de couture claire entre la rangee des cartes et « Prochains
   evenements » une fois les surfaces fusionnees. */
html body #eventsPin[data-flow="timed"][data-scene="transition"]:not([data-static="1"]) #events .events__merge > .events__grid > .event-card,
html body #eventsPin[data-flow="timed"][data-scene="transition"]:not([data-static="1"]) #events .events__merge > .upcoming {
  box-shadow: none !important;
  border-color: transparent !important;
  outline: 0 !important;
}
html body #eventsPin[data-flow="timed"][data-actu="1"]:not([data-static="1"]) #events .events__merge > .events__grid {
  gap: 0 !important;
  background: transparent !important;
}
html body #eventsPin[data-flow="timed"][data-actu="1"]:not([data-static="1"]) #events .events__merge > .events__grid > .event-card,
html body #eventsPin[data-flow="timed"][data-actu="1"]:not([data-static="1"]) #events .events__merge > .upcoming {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 5) "Rejoins un + mot anime" : vignette adaptative sous le mot.
      Hauteur calee sur les lettres de « Rejoins un » avec la MEME marge
      en haut, en bas, a gauche et a droite (mesures : index.html). */
html body #events #eventsRotate.is-ink {
  transition: color 400ms ease !important;
  overflow: visible !important;
}
html body #events #eventsRotate > .rotate__vignette {
  position: absolute !important;
  display: block !important;
  top: var(--vig-top, 0px) !important;
  left: var(--vig-left, 0px) !important;
  width: var(--vig-w, 100%) !important;
  height: var(--vig-h, 100%) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  background: color-mix(in srgb, var(--rotate-tint, #5eaaff) 20%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rotate-tint, #5eaaff) 65%, #cce4ff) !important;
  opacity: 0;
  transition: width 600ms cubic-bezier(.22, 1, .36, 1), left 600ms cubic-bezier(.22, 1, .36, 1),
              background-color 400ms ease, box-shadow 400ms ease, opacity 300ms ease !important;
}
html body #events #eventsRotate.has-vignette > .rotate__vignette { opacity: 1; }
/* Ecart « Rejoins un » / vignette = marge interieure (calcule en JS). */
html body #events #eventsRotate { margin-left: var(--vig-gap, 0px) !important; }
html body #events #eventsRotate.vig-instant > .rotate__vignette { transition: none !important; }
html body #events #eventsRotate > #eventsRotateMask {
  position: relative !important;
  z-index: 1 !important;
}

/* 6) Icone VELRA STAFF : elements beiges (piece, barres, agenda,
      3e mission, part detachee) — proteges des regles de teinte. */
html body #team .staff-recruit__scene--folio .staff-beige { color: var(--velra-beige, #a78bfa); }

/* 7) Lueur interne (angles) des « ? » Joueur / Manager et des etoiles de
      la communaute : calque dessine par script.js, sans filtre (fluide). */
html body .velra-inner-glow { pointer-events: none; }

/* >>> VELRA-V14 END <<< */

/* ===== NAVBAR : bouton PANIER (remplace Assistance) ===== */
.navbar__cta--cart,
.mobile__bottom-link--cart {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  overflow: visible !important;
}
.navbar__cta--cart .navbar__cart-icon,
.mobile__bottom-link--cart .navbar__cart-icon { flex: 0 0 auto; width: 15px; height: 15px; }
.navbar__cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-family: 'Barlow', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: #04101f;
  background: var(--velra-beige, #a78bfa);
}
.navbar__cart-count[hidden] { display: none !important; }

/* ===== PANIER GLOBAL — bande laterale (toutes les pages) =====
   Le panneau reprend les classes de la 1re bande du profil
   (.va-panel.va-panel--drawer, CSS injecte par components.js) :
   meme largeur, meme hauteur, memes couleurs, meme animation.
   Ici : seulement le contenu propre au panier. */
.vc-panel .va-head { position: relative; gap: 14px; }
.vc-panel .vc-avatar {
  cursor: default;
  color: var(--va-accent-soft, #7ec4ff);
}
.vc-panel .vc-avatar svg { width: 36px; height: 36px; }
.vc-panel .va-name { font-size: 30px; }
.vc-panel .va-drawer-close svg { stroke: currentColor; }
html body .vc-panel .va-menu.vc-list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  gap: 0 !important;
}
html body .vc-panel .vc-list > * { width: 100%; box-sizing: border-box; }
html body .vc-panel .vc-list::before,
html body .vc-panel .vc-list::after { display: none !important; }
.vc-item {
  position: relative;
  padding: 18px 20px;
  border-bottom: 1px solid var(--va-border, rgba(94, 170, 255, .2));
}
.vc-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vc-item__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; line-height: 1; letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--va-text, #e6f1ff);
}
.vc-item__price { font-weight: 700; font-size: 15px; color: var(--velra-beige, #a78bfa); }
.vc-item__players {
  list-style: none;
  margin: 10px 0 0; padding: 0;
  display: grid; gap: 4px;
  font-size: 13px;
  color: var(--va-muted, rgba(170, 205, 255, .55));
}
.vc-item__players li { display: flex; justify-content: space-between; gap: 10px; }
.vc-item__players b { color: var(--va-text, #e6f1ff); font-weight: 600; }
.vc-item__remove {
  margin-top: 10px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: 600 11px/1 'Barlow', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--va-muted, rgba(170, 205, 255, .55));
  transition: color .18s ease;
}
.vc-item__remove:hover, .vc-item__remove:focus-visible { color: #ff8a8a; outline: none; }
.vc-empty {
  margin: auto 0; padding: 40px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--va-muted, rgba(170, 205, 255, .55));
}
.vc-foot {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
  padding: 0 20px;
  background: var(--va-surface, #0d1e3d);
  border-top: 1px solid var(--va-border, rgba(94, 170, 255, .2));
}
.vc-foot__label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--va-muted, rgba(170, 205, 255, .55));
}
.vc-foot__total { font-size: 18px; font-weight: 700; color: var(--va-text, #e6f1ff); }

/* >>> VELRA-V15 START (20/10/2026) <<<
   Correctifs groupes : staff, evenements, vignette animee, fonds
   Articles / Createurs, Notre equipe, vignettes YouTube, titre
   "Derniere news", panier / Discord, FAQ.
   ============================================================ */

/* 1) VELRA / STAFF : contours a la MEME epaisseur que les cartes joueur.
      L'epaisseur (px ecran) est mesuree sur les cartes par script.js
      (--vs-contour = contour de silhouette, --vs-corner = coins). */
html body #team .staff-recruit__scene--folio .vs-contour {
  vector-effect: non-scaling-stroke;
  stroke-width: var(--vs-contour, 1.45px) !important;
}
html body #team .staff-recruit__scene--folio .vs-corner {
  vector-effect: non-scaling-stroke;
  stroke-width: var(--vs-corner, 2.2px) !important;
}

/* 2) Prochains evenements : logo du jeu plus petit sur mobile. */
@media (max-width: 600px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list {
    --upcoming-game-logo-w: 44px;
    --upcoming-game-logo-h: 20px;
  }
}
@media (max-width: 380px) {
  html body #eventsPin[data-flow="timed"] #events .upcoming__list {
    --upcoming-game-logo-w: 40px;
    --upcoming-game-logo-h: 18px;
  }
}

/* 3) "Rejoins un + mot anime" : vignette PLEINE (plus de transparence),
      sans contour, centree sur le mot (meme marge haut / bas, calculee
      dans index.html). Elle suit le mot sans fondu. */
html body #events #eventsRotate > .rotate__vignette {
  background: color-mix(in srgb, var(--rotate-tint, #5eaaff) 34%, #0b1d45) !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  transition: width 600ms cubic-bezier(.22, 1, .36, 1), left 600ms cubic-bezier(.22, 1, .36, 1),
              top 600ms cubic-bezier(.22, 1, .36, 1), height 600ms cubic-bezier(.22, 1, .36, 1),
              background-color 400ms ease !important;
}
html body #events #eventsRotate.vig-instant > .rotate__vignette { transition: none !important; }

/* 4) Articles + Createurs (+ FAQ) : fond moins sombre. */
html body #eventsPin[data-flow="timed"],
html body #eventsPin[data-flow="timed"] > #events,
html body .creators-section,
html body .faq-section {
  background-color: #0b1b3d !important;
}
html body #eventsPin[data-flow="timed"],
html body #eventsPin[data-flow="timed"] > #events {
  background-image: none !important;
}

/* 5) Notre equipe : plus de double trait fondu (halo) sur les traits
      des bords haut et bas. Le trait net reste. */
html body #team > .team__edge::before {
  display: none !important;
  content: none !important;
}

/* 6) Scene Communaute -> Articles : pendant l'animation, les conteneurs
      ne sont plus animes par des transitions CSS (sinon, en remontant,
      les 4 conteneurs reapparaissaient transparents une fraction de
      seconde au moment ou le bloc unique se separe). */
html body #eventsPin[data-flow="timed"][data-running="1"] #events .events__merge,
html body #eventsPin[data-flow="timed"][data-running="1"] #events .events__merge > .events__grid,
html body #eventsPin[data-flow="timed"][data-running="1"] #events .events__merge > .events__grid > .event-card,
html body #eventsPin[data-flow="timed"][data-running="1"] #events .events__merge > .upcoming,
html body #eventsPin[data-flow="timed"][data-scene="transition"] #events .events__merge,
html body #eventsPin[data-flow="timed"][data-scene="transition"] #events .events__merge > .events__grid,
html body #eventsPin[data-flow="timed"][data-scene="transition"] #events .events__merge > .events__grid > .event-card,
html body #eventsPin[data-flow="timed"][data-scene="transition"] #events .events__merge > .upcoming {
  transition: none !important;
}

/* 7) Articles : icones de survol violettes sur TOUTES les cartes paires
      (deja corrige dans la regle d'origine) + fleche des createurs. */

/* 8) "Derniere news" : nouvelle entree. Le titre attend que « Rejoins un »
      soit sorti, puis MONTE depuis sa ligne de base, revele par un masque
      (sans fondu), lentement jusqu'a la fin de la scene. */
html body #eventsPin[data-flow="timed"]:not([data-static="1"]) #actu .actu__header > .section-title {
  transform: translate3d(0, calc((1 - var(--vf-news-title, 1)) * 100%), 0) !important;
  clip-path: inset(-0.6em -1em calc((1 - var(--vf-news-title, 1)) * 100%) -1em) !important;
  -webkit-clip-path: inset(-0.6em -1em calc((1 - var(--vf-news-title, 1)) * 100%) -1em) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #eventsPin[data-flow="timed"]:not([data-static="1"]) #actu .actu__header > .section-title {
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}

/* 9) Createurs : TOUTES les vignettes YouTube en 16:9, quel que soit le
      format. Les petites vignettes restent alignees sur le haut et le
      bas de la grande : les largeurs de colonnes sont calculees pour que
      chaque case soit exactement 16:9.
      PC : B = 2s + K, avec K = (meta + 2 x ecart vertical) x 16/9. */
html body .creators__showcase {
  --cv-k: calc((var(--cv-meta) + 2 * var(--cv-row-gap)) * 16 / 9);
  --cv-s: calc((100cqw - 2 * var(--cv-gap) - var(--cv-k)) / 4);
  --cv-big-w: calc(2 * var(--cv-s) + var(--cv-k));
  --cv-h: calc(var(--cv-s) * 9 / 16);
  --cv-H: calc(var(--cv-big-w) * 9 / 16);
  grid-template-columns: var(--cv-big-w) var(--cv-s) var(--cv-s) !important;
  grid-template-rows: var(--cv-h) var(--cv-meta) var(--cv-h) auto !important;
}
html body .creators__showcase .creator-video--big .creator-video__media {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}
/* Tablette 1300px + mobile 600px : grande vignette + 2 empilees a droite,
   puis 2 vignettes cote a cote. s = (W - g - 16g/9) / 3, B = 2s + 16g/9. */
@media (max-width: 1300px) {
  html body .creators__showcase {
    --cv-s: calc((100cqw - var(--cv-gap) - var(--cv-gap) * 16 / 9) / 3);
    --cv-big-w: calc(2 * var(--cv-s) + var(--cv-gap) * 16 / 9);
    --cv-c1: calc((100cqw - var(--cv-gap)) / 2);
    --cv-h: calc(var(--cv-s) * 9 / 16);
    --cv-H: calc(var(--cv-big-w) * 9 / 16);
    grid-template-columns: var(--cv-c1) calc(var(--cv-big-w) - var(--cv-c1) - var(--cv-gap)) var(--cv-s) !important;
    grid-template-rows: var(--cv-h) var(--cv-h) auto !important;
  }
  html body .creators__showcase .creator-video--big .creator-video__media {
    grid-column: 1 / 3 !important; grid-row: 1 / 3 !important;
    height: var(--cv-H) !important; aspect-ratio: auto !important;
  }
  html body .creators__showcase .creator-video--s1 .creator-video__media {
    grid-column: 3 / 4 !important; grid-row: 1 !important;
    height: var(--cv-h) !important; aspect-ratio: auto !important;
  }
  html body .creators__showcase .creator-video--s2 .creator-video__media {
    grid-column: 3 / 4 !important; grid-row: 2 !important;
    height: var(--cv-h) !important; aspect-ratio: auto !important;
  }
  html body .creators__showcase .creator-video--s3 .creator-video__media {
    grid-column: 1 / 2 !important; grid-row: 3 !important;
    height: auto !important; aspect-ratio: 16 / 9 !important;
  }
  html body .creators__showcase .creator-video--s4 .creator-video__media {
    grid-column: 2 / 4 !important; grid-row: 3 !important;
    height: auto !important; aspect-ratio: 16 / 9 !important;
  }
}

/* 10) Createurs : plus d'apparition en fondu (titre, texte, vignettes
       YouTube et TikTok). Les blocs restent opaques et MONTENT a leur
       place quand la section arrive a l'ecran. */
html body .creators-section .creators__title,
html body .creators-section .creators__intro,
html body .creators-section .creators__showcase,
html body .creators-section .creators__rail,
html body .creators-section .creators__shorts {
  opacity: 1 !important;
  transition: translate .9s cubic-bezier(.22, 1, .36, 1) !important;
}
html body .creators-section:not(.is-visible) .creators__title { translate: 0 32px !important; }
html body .creators-section:not(.is-visible) .creators__intro { translate: 0 32px !important; }
html body .creators-section:not(.is-visible) .creators__showcase,
html body .creators-section:not(.is-visible) .creators__rail,
html body .creators-section:not(.is-visible) .creators__shorts { translate: 0 48px !important; }
html body .creators-section.is-visible .creators__title,
html body .creators-section.is-visible .creators__intro,
html body .creators-section.is-visible .creators__showcase,
html body .creators-section.is-visible .creators__rail,
html body .creators-section.is-visible .creators__shorts { translate: 0 0 !important; }
html body .creators-section .creators__intro { transition-delay: .06s !important; }
html body .creators-section .creators__showcase { transition-delay: .12s !important; }
html body .creators-section .creators__rail,
html body .creators-section .creators__shorts { transition-delay: .22s !important; }
@media (prefers-reduced-motion: reduce) {
  html body .creators-section .creators__title,
  html body .creators-section .creators__intro,
  html body .creators-section .creators__showcase,
  html body .creators-section .creators__rail,
  html body .creators-section .creators__shorts { translate: none !important; transition: none !important; }
}

/* 11) FAQ (bas de l'accueil) ------------------------------------------ */
.faq-section {
  position: relative;
  color: var(--text, #eaf2ff);
  padding: clamp(56px, 6vw, 112px) 0 clamp(72px, 7vw, 128px);
  overflow: hidden;
  isolation: isolate;
}
.faq-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 85% 20%, rgba(94, 170, 255, .10), rgba(94, 170, 255, 0) 70%),
    radial-gradient(45% 50% at 8% 90%, rgba(167, 139, 250, .09), rgba(167, 139, 250, 0) 70%);
}
.faq__inner {
  width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(24px, 4vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 104px);
  align-items: start;
}
.faq__intro {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent, #5eaaff);
}
.faq__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent, #5eaaff);
}
.faq__title {
  margin: 0;
  font-family: var(--font-display, 'Azurio Bold'), sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 64px);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text, #eaf2ff);
}
.faq__title-hl {
  display: inline-block;
  margin-top: .08em;
  padding: .06em .24em .02em;
  background: color-mix(in srgb, #a78bfa 34%, #0b1d45);
  color: #d4c2ff;
  white-space: nowrap;
}
.faq__lead {
  max-width: 44ch;
  margin: 0;
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: rgba(196, 211, 235, .78);
}
.faq__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 6px;
}
.faq__contact-text {
  margin: 0;
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #eaf2ff);
}
html body .faq-section .faq__cta { position: relative; transform: none; }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.faq-item {
  --faq-cut: 14px;
  position: relative;
  background: #0f2350;
  border: 1px solid rgba(94, 170, 255, .16);
  transition: background-color .3s ease, border-color .3s ease, translate .8s cubic-bezier(.22, 1, .36, 1);
}
.faq-item::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: linear-gradient(180deg, #a78bfa, #5eaaff);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.faq-item:hover { border-color: rgba(94, 170, 255, .34); }
.faq-item.is-open {
  background: #12295c;
  border-color: rgba(167, 139, 250, .45);
}
.faq-item.is-open::before { transform: scaleY(1); }
.faq-item__heading { margin: 0; font: inherit; }
.faq-item__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  width: 100%;
  margin: 0;
  padding: clamp(18px, 1.5vw, 24px) clamp(18px, 1.8vw, 28px);
  border: 0;
  background: transparent;
  color: var(--text, #eaf2ff);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.faq-item__btn:focus-visible { outline: 2px solid var(--accent, #5eaaff); outline-offset: 2px; }
.faq-item__num {
  font-family: var(--font-display, 'Azurio Bold'), sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  letter-spacing: .04em;
  color: var(--accent, #5eaaff);
  min-width: 2ch;
  transition: color .3s ease;
}
.faq-item.is-open .faq-item__num { color: #a78bfa; }
.faq-item__q {
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: clamp(15px, 1.12vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
}
.faq-item__icon {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid rgba(94, 170, 255, .32);
  background: #0b1b3d;
  transition: background-color .3s ease, border-color .3s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 2px;
  margin: -1px 0 0 -6px;
  background: var(--accent, #5eaaff);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item__btn:hover .faq-item__icon { border-color: rgba(94, 170, 255, .7); }
.faq-item.is-open .faq-item__icon { background: #a78bfa; border-color: #a78bfa; }
.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after { background: #04101f; }
.faq-item.is-open .faq-item__icon::after { transform: rotate(0deg); }
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1);
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel-inner { min-height: 0; overflow: hidden; }
.faq-item__panel-inner > p {
  margin: 0;
  padding: 0 clamp(18px, 1.8vw, 28px) clamp(20px, 1.6vw, 26px) calc(clamp(18px, 1.8vw, 28px) + 2ch + clamp(14px, 1.6vw, 24px));
  font-family: var(--font-body, 'Barlow'), sans-serif;
  font-size: clamp(14px, .98vw, 16px);
  line-height: 1.65;
  color: rgba(196, 211, 235, .82);
}
.faq-item__panel-inner a {
  color: var(--accent, #5eaaff);
  text-decoration: none;
  border-bottom: 1px solid rgba(94, 170, 255, .35);
  transition: color .2s ease, border-color .2s ease;
}
.faq-item__panel-inner a:hover { color: #a78bfa; border-color: #a78bfa; }
/* Apparition : les questions MONTENT une a une (aucun fondu). */
.faq-section.faq-js:not(.is-visible) .faq-item { translate: 0 40px; }
.faq-section.faq-js .faq-item { transition-delay: 0s, 0s, calc(var(--faq-i, 0) * 70ms); }

/* Tablette (<= 1300px) : introduction au-dessus, en ligne. */
@media (max-width: 1300px) {
  .faq__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 48px); }
  .faq__intro {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "eyebrow eyebrow" "title contact" "lead contact";
    align-items: end;
    gap: 16px 40px;
  }
  .faq__eyebrow { grid-area: eyebrow; }
  .faq__title { grid-area: title; font-size: clamp(32px, 4.4vw, 52px); }
  .faq__lead { grid-area: lead; max-width: 60ch; }
  .faq__contact { grid-area: contact; flex-direction: column; align-items: flex-end; margin: 0; align-self: end; }
}
/* Mobile (<= 600px) : tout en colonne, centre. */
@media (max-width: 600px) {
  .faq-section { padding: 48px 0 64px; }
  .faq__inner { padding-inline: clamp(12px, 4vw, 22px); gap: 28px; }
  .faq__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .faq__title { font-size: min(30px, 7.3vw); }
  .faq__lead { font-size: 14px; }
  .faq__contact { flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; }
  .faq__list { gap: 10px; }
  .faq-item__btn { gap: 12px; padding: 16px 14px; }
  .faq-item__num { font-size: 14px; }
  .faq-item__q { font-size: 14.5px; }
  .faq-item__icon { width: 30px; height: 30px; }
  .faq-item__icon::before, .faq-item__icon::after { width: 10px; margin-left: -5px; }
  .faq-item__panel-inner > p { padding: 0 14px 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item::before, .faq-item__panel, .faq-item__icon::before, .faq-item__icon::after { transition: none !important; }
  .faq-section.faq-js:not(.is-visible) .faq-item { translate: none; }
}
/* >>> VELRA-V15 END <<< */

/* >>> VELRA-V16 (20/10/2026) : FAQ inspiree de la maquette (rangees
   pleine largeur, halo lumineux a gauche, croix fine), style VELRA. <<< */
html body .faq-section .faq__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 3.4vw, 56px);
}
html body .faq-section .faq__intro {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow eyebrow" "title contact" "lead contact";
  align-items: end;
  gap: 14px clamp(24px, 4vw, 64px);
}
html body .faq-section .faq__eyebrow { grid-area: eyebrow; }
html body .faq-section .faq__title { grid-area: title; font-size: clamp(40px, 5vw, 88px); line-height: 1; }
html body .faq-section .faq__lead { grid-area: lead; max-width: 60ch; }
html body .faq-section .faq__contact {
  grid-area: contact;
  flex-direction: column;
  align-items: flex-end;
  align-self: end;
  margin: 0;
  gap: 12px;
}
html body .faq-section .faq__list { gap: clamp(10px, .9vw, 14px); }
html body .faq-section .faq-item {
  overflow: hidden;
  isolation: isolate;
  background: #0b1a3c;
  border: 1px solid rgba(142, 195, 255, .14);
  transition: border-color .3s ease, translate .8s cubic-bezier(.22, 1, .36, 1);
}
/* Halo lumineux a gauche (bleu, violet quand la question est ouverte). */
html body .faq-section .faq-item::before {
  inset: 0;
  left: 0; top: 0; bottom: 0;
  width: auto;
  z-index: -1;
  transform: none;
  background: radial-gradient(38% 140% at 0% 100%, rgba(58, 128, 212, .58) 0%, rgba(58, 128, 212, .2) 45%, rgba(58, 128, 212, 0) 72%);
  opacity: .75;
  transition: opacity .45s ease;
}
html body .faq-section .faq-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(42% 150% at 0% 100%, rgba(157, 92, 255, .6) 0%, rgba(167, 139, 250, .2) 45%, rgba(167, 139, 250, 0) 72%);
  opacity: 0;
  transition: opacity .45s ease;
}
html body .faq-section .faq-item:hover { border-color: rgba(142, 195, 255, .3); }
html body .faq-section .faq-item:hover::before { opacity: 1; }
html body .faq-section .faq-item.is-open {
  background: #0d1f47;
  border-color: rgba(167, 139, 250, .4);
}
html body .faq-section .faq-item.is-open::before { opacity: 0; }
html body .faq-section .faq-item.is-open::after { opacity: 1; }
html body .faq-section .faq-item__btn {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: clamp(72px, 5.6vw, 92px);
  padding: clamp(18px, 1.6vw, 26px) clamp(20px, 2.2vw, 36px);
  gap: 24px;
}
html body .faq-section .faq-item__num { display: none; }
html body .faq-section .faq-item__q {
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* Croix fine, sans cadre : devient un tiret violet a l'ouverture. */
html body .faq-section .faq-item__icon {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
}
html body .faq-section .faq-item__icon::before,
html body .faq-section .faq-item__icon::after {
  width: 24px;
  height: 1.5px;
  margin: -0.75px 0 0 -12px;
  background: #8ec3ff;
}
html body .faq-section .faq-item__btn:hover .faq-item__icon { border: 0; }
html body .faq-section .faq-item.is-open .faq-item__icon { background: transparent; border: 0; }
html body .faq-section .faq-item.is-open .faq-item__icon::before,
html body .faq-section .faq-item.is-open .faq-item__icon::after { background: #c4b0ff; }
html body .faq-section .faq-item__panel-inner > p {
  max-width: 110ch;
  padding: 0 clamp(20px, 2.2vw, 36px) clamp(20px, 1.8vw, 28px);
  font-size: clamp(13.5px, .95vw, 15.5px);
  line-height: 1.65;
}
/* Tablette (<= 1300px) */
@media (max-width: 1300px) {
  html body .faq-section .faq__title { font-size: clamp(36px, 6vw, 64px); }
  html body .faq-section .faq-item__q { max-width: none; }
}
/* Mobile (<= 600px) */
@media (max-width: 600px) {
  html body .faq-section .faq__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
  }
  html body .faq-section .faq__title { font-size: min(40px, 10vw); }
  html body .faq-section .faq__contact { flex-direction: row; align-items: center; align-self: flex-start; justify-content: flex-start; flex-wrap: wrap; margin-top: 4px; }
  html body .faq-section .faq-item__btn { min-height: 64px; padding: 16px 16px; gap: 14px; }
  html body .faq-section .faq-item__q { font-size: 14px; }
  html body .faq-section .faq-item__icon { width: 22px; height: 22px; }
  html body .faq-section .faq-item__icon::before,
  html body .faq-section .faq-item__icon::after { width: 18px; margin-left: -9px; }
  html body .faq-section .faq-item::before { background: radial-gradient(60% 140% at 0% 100%, rgba(58, 128, 212, .58) 0%, rgba(58, 128, 212, .2) 45%, rgba(58, 128, 212, 0) 72%); }
  html body .faq-section .faq-item::after { background: radial-gradient(65% 150% at 0% 100%, rgba(157, 92, 255, .6) 0%, rgba(167, 139, 250, .2) 45%, rgba(167, 139, 250, 0) 72%); }
  html body .faq-section .faq-item__panel-inner > p { padding: 0 16px 18px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .faq-section .faq-item::after { transition: none !important; }
}
/* >>> VELRA-V16 END <<< */

/* >>> VELRA-V17 (20/10/2026) : bouts de page -> etirement (script.js),
   plus de rebond natif qui laissait voir un vide. <<< */
html, body { overscroll-behavior-y: none; }
html.velra-stretching main,
html.velra-stretching velra-footer > *,
html.velra-stretching body > .sv-hero,
html.velra-stretching body > [data-velra-stretch],
html.velra-stretch-ready main,
html.velra-stretch-ready velra-footer > *,
html.velra-stretch-ready body > .sv-hero,
html.velra-stretch-ready body > [data-velra-stretch] { will-change: transform; backface-visibility: hidden; }
/* >>> VELRA-V17 END <<< */

/* >>> VELRA-V18 (21/10/2026) : « Derniere news » GLISSE de gauche a
   droite, exactement comme « Rejoins un » / le bouton Communaute, sur la
   meme horloge que le bouton « articles » (--scene-news-enter) : le titre
   s'arrete au meme instant que le bouton. Plus de decoupe lettre par
   lettre ni de masque. <<< */
html body #actu .actu__header > .section-title .vf-word,
html body #actu .actu__header > .section-title .vf-ch { display: inline; transform: none !important; clip-path: none !important; -webkit-clip-path: none !important; }
html body #eventsPin[data-flow="timed"]:not([data-static="1"]) #actu .actu__header > .section-title {
  transform: translate3d(calc(-1 * (1 - var(--scene-news-enter, 0)) * var(--scene-cta-distance)), 0, 0) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  html body #eventsPin[data-flow="timed"]:not([data-static="1"]) #actu .actu__header > .section-title { transform: none !important; }
}
/* >>> VELRA-V18 END <<< */

/* >>> VELRA-V17 (20/10/2026) : FAQ — titre centre a la taille des autres
   titres de section, plus d'accroche « FAQ », plus de bouton contact,
   plus de vignette sous « frequentes », plus de fondu de transition ;
   bord superieur coupe en zigzag. <<< */
html body .faq-section {
  --faq-bg: #061430;
  /* 21/10/2026 (V18) : 2x moins de zigzags (dents 2x plus larges, meme pente). */
  --zz-w: 80px;
  --zz-h: 40px;
  z-index: 6 !important;
  overflow: visible;
  overflow-x: clip;
}
html body #faq.faq-section { background: var(--faq-bg) !important; background-image: none !important; }
html body .faq-section::before { display: none !important; }
html body .faq-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1px - var(--zz-h));
  height: var(--zz-h);
  background: var(--faq-bg);
  pointer-events: none;
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / var(--zz-w) 100% repeat-x;
          mask: conic-gradient(from 135deg at 50% 0, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / var(--zz-w) 100% repeat-x;
}
html body .faq-section .faq__intro {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  text-align: center !important;
  gap: clamp(12px, 1.2vw, 18px);
  position: relative;
  top: auto;
}
html body .faq-section .faq__title,
html body .faq-section .faq__lead { grid-area: auto; }
html body .faq-section .faq__title {
  font-size: var(--faq-title-fs, clamp(28px, 3.35vw, 64px)) !important;
  line-height: 1.05 !important;
  letter-spacing: var(--faq-title-ls, .01em);
  text-align: center;
}
html body .faq-section .faq__lead {
  max-width: 92ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--faq-lead-fs, clamp(13px, 1vw, 17px));
}
@media (max-width: 600px) {
  html body .faq-section { --zz-w: 48px; --zz-h: 24px; }
  html body .faq-section .faq__intro { align-items: center !important; text-align: center !important; }
}
/* >>> VELRA-V17 END <<< */

/* >>> VELRA-V18 (21/10/2026) : FAQ — sur PC (> 1300px), une seconde
   colonne de questions a DROITE (.faq__list--extra). Sur tablette
   (<= 1300px) et mobile (<= 600px), mise en page inchangee : une seule
   colonne, les questions supplementaires n'apparaissent pas. <<< */
html body .faq-section .faq__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, .9vw, 14px) clamp(16px, 2vw, 32px);
  align-items: start;
}
html body .faq-section .faq__columns > .faq__list { min-width: 0; }
@media (max-width: 1300px) {
  html body .faq-section .faq__columns { grid-template-columns: minmax(0, 1fr); }
  html body .faq-section .faq__list--extra { display: none !important; }
}
/* >>> VELRA-V18 END <<< */

/* ============================================================
   VELRA-V19 (21/10/2026)
   1) SERVICES : nouvelle section au-dessus de « Notre equipe ».
      Elle porte les deux pentes (haut / bas, paralleles) et les traits
      lumineux (haut a gauche en bleu, bas a droite en violet).
   2) NOTRE EQUIPE : plus de pente en bas (bord droit), plus de traits.
   3) Cases de services : style « dashboard » (fond sombre, halo
      colore, texture de traits fins, coins arrondis, pastilles).
   ============================================================ */

/* ---- 1) Section ------------------------------------------------------- */
html body #services.svc-section {
  position: relative;
  z-index: 7;
  overflow: hidden;
  background: #04102a;
  margin-top: calc(-1 * var(--team-slope));
  padding-top: calc(var(--space-section) + var(--team-slope));
  padding-bottom: calc(var(--space-section) + var(--team-slope));
  clip-path: polygon(0 var(--team-slope), 100% 0, 100% calc(100% - var(--team-slope)), 0 100%);
  -webkit-clip-path: polygon(0 var(--team-slope), 100% 0, 100% calc(100% - var(--team-slope)), 0 100%);
}
@media (min-width: 1100px) {
  html body #services.svc-section {
    padding-top: calc(clamp(80px, 10vh, 140px) + var(--team-slope));
    padding-bottom: calc(clamp(80px, 10vh, 140px) + var(--team-slope));
  }
}
@media (min-width: 1300px) {
  html body #services.svc-section {
    padding-top: calc(clamp(48px, 6vh, 84px) + var(--team-slope));
    padding-bottom: calc(clamp(48px, 6vh, 84px) + var(--team-slope));
  }
}
html body #services > .svc__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 12% 18%, rgba(94, 170, 255, .16), transparent 62%),
    radial-gradient(ellipse 50% 55% at 88% 86%, rgba(167, 139, 250, .14), transparent 62%),
    linear-gradient(180deg, #05132f 0%, #04102a 55%, #040e26 100%);
}
html body #services > .svc__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(94, 170, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 170, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
  opacity: .5;
}
html body #services > .svc__inner {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
@media (max-width: 600px) {
  html body #services > .svc__inner { padding-left: clamp(12px, 4vw, 18px); padding-right: clamp(12px, 4vw, 18px); }
}

/* Traits lumineux sur les pentes (repris de Notre equipe) :
   haut = du bord GAUCHE au centre (bleu) ; bas = du bord DROIT au centre (violet). */
html body #services > .svc__edge {
  --edge-w: 2px;
  --s: var(--team-slope, 72px);
  position: absolute;
  width: 50%;
  height: calc(var(--s) + 14px);
  z-index: 4;
  pointer-events: none;
}
html body #services > .svc__edge > span { position: absolute; inset: 0; display: block; }
html body #services > .svc__edge--top { top: 0; left: 0; }
html body #services > .svc__edge--bottom { right: 0; bottom: 0; }
html body #services > .svc__edge--top > span {
  background: linear-gradient(90deg, #8ec3ff 0%, rgba(94, 170, 255, .85) 30%, rgba(94, 170, 255, 0) 100%);
  clip-path: polygon(0 var(--s), 100% calc(var(--s) / 2), 100% calc(var(--s) / 2 + var(--edge-w)), 0 calc(var(--s) + var(--edge-w)));
  -webkit-clip-path: polygon(0 var(--s), 100% calc(var(--s) / 2), 100% calc(var(--s) / 2 + var(--edge-w)), 0 calc(var(--s) + var(--edge-w)));
}
html body #services > .svc__edge--bottom > span {
  background: linear-gradient(270deg, #c6b4fd 0%, rgba(167, 139, 250, .88) 30%, rgba(167, 139, 250, 0) 100%);
  clip-path: polygon(0 calc(100% - var(--s) / 2 - var(--edge-w)), 100% calc(100% - var(--s) - var(--edge-w)), 100% calc(100% - var(--s)), 0 calc(100% - var(--s) / 2));
  -webkit-clip-path: polygon(0 calc(100% - var(--s) / 2 - var(--edge-w)), 100% calc(100% - var(--s) - var(--edge-w)), 100% calc(100% - var(--s)), 0 calc(100% - var(--s) / 2));
}
@media (max-width: 600px) {
  html body #services > .svc__edge { --edge-w: 1.5px; }
}

/* En-tete : titre centre (meme typo que les autres sections), bouton a droite. */
html body #services .svc__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "spacer title btn";
  align-items: center;
  column-gap: clamp(16px, 3vw, 48px);
  margin-bottom: clamp(28px, 4vw, 56px);
}
html body #services .svc__header > .section-title {
  grid-area: title;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-medium), 'Barlow', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: .9;
  letter-spacing: .01em;
  color: var(--text);
}
html body #services .svc__header > .section-title span { color: var(--text); }
html body #services .svc__header > .svc__cta {
  grid-area: btn;
  justify-self: end;
  clip-path: none;
  border-radius: 0;
}
@media (max-width: 720px) {
  html body #services .svc__header {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "btn";
    row-gap: clamp(12px, 2.5vw, 18px);
  }
  html body #services .svc__header > .svc__cta { justify-self: center; }
}

/* ---- 3) Grille des cases ---------------------------------------------- */
html body #services .svc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(200px, 16.5vw, 290px), auto);
  gap: clamp(14px, 1.6vw, 24px);
}
/* Grande case a gauche (2 colonnes, 2 rangees) et deux cases empilees a droite,
   separees par le meme vide que le reste de la grille. */
html body #services .svc-card--main { grid-column: 1 / span 2; grid-row: 2 / span 2; }
html body #services .svc-card--side1 { grid-column: 3; grid-row: 2; }
html body #services .svc-card--side2 { grid-column: 3; grid-row: 3; }

@media (max-width: 1100px) {
  html body #services .svc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(190px, 26vw, 280px), auto);
  }
  html body #services .svc-card--figure { grid-column: 1 / -1; }
  html body #services .svc-card--main { grid-column: 1 / -1; grid-row: auto; }
  html body #services .svc-card--side1,
  html body #services .svc-card--side2 { grid-column: auto; grid-row: auto; }
}
@media (max-width: 600px) {
  html body #services .svc__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }
  html body #services .svc-card--figure { grid-column: auto; }
}

/* Case : fond sombre, halo colore dans un angle, texture de traits fins,
   bord fin et coins arrondis (style de la reference). */
html body #services .svc-card {
  --glow: 94, 170, 255;
  --gx: 0%;
  --gy: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(20px, 2.1vw, 34px);
  border-radius: clamp(12px, 1.2vw, 18px) !important; /* le site force 0 partout */
  border: 1px solid rgba(var(--glow), .16);
  background: #061023;
  color: var(--text);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
html body #services .svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 80% at var(--gx) var(--gy), rgba(var(--glow), .62) 0%, rgba(var(--glow), .26) 32%, rgba(var(--glow), .06) 58%, rgba(6, 16, 35, 0) 78%),
    linear-gradient(180deg, #091a3c 0%, #061023 60%, #050d1f 100%);
}
html body #services .svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 6px);
  mask-image: radial-gradient(80% 90% at var(--gx) var(--gy), #000 0%, rgba(0, 0, 0, .6) 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 90% at var(--gx) var(--gy), #000 0%, rgba(0, 0, 0, .6) 40%, transparent 75%);
}
html body #services .svc-card--violet { --glow: 167, 139, 250; }
html body #services .svc-card--steps { --gx: 8%; --gy: 0%; }
html body #services .svc-card--focus { --gx: 50%; --gy: 110%; }
html body #services .svc-card--figure { --gx: 100%; --gy: 100%; }
html body #services .svc-card--main { --gx: 100%; --gy: 100%; --glow: 167, 139, 250; }
html body #services .svc-card--side1 { --gx: 0%; --gy: 100%; }
html body #services .svc-card--side2 { --gx: 100%; --gy: 0%; }
@media (hover: hover) and (pointer: fine) {
  html body #services .svc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--glow), .42);
    box-shadow: 0 36px 70px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(var(--glow), .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}
/* Entree des cases (classe .reveal posee par script.js) : animation
   decalee (--d) qui rend la main au style normal une fois finie, pour
   que le soulevement au survol fonctionne ensuite. */
html body #services .svc-card.reveal { opacity: 0; transform: none; }
html body #services .svc-card.reveal.visible {
  opacity: 1;
  animation: svcCardIn .7s var(--ease-out) var(--d, 0s) backwards;
}
@keyframes svcCardIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html body #services .svc-card.reveal.visible { animation: none; }
}

/* Petites mentions dans les angles. */
html body #services .svc-card__meta {
  position: absolute;
  z-index: 2;
  font-family: var(--font-body);
  font-size: clamp(8px, .55vw, 9.5px);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(var(--glow), .62);
  pointer-events: none;
}
html body #services .svc-card__meta--tl { top: clamp(14px, 1.3vw, 20px); left: clamp(16px, 1.5vw, 24px); }
html body #services .svc-card__meta--tr { top: clamp(14px, 1.3vw, 20px); right: clamp(16px, 1.5vw, 24px); }
html body #services .svc-card__meta--bl { bottom: clamp(14px, 1.3vw, 20px); left: clamp(16px, 1.5vw, 24px); }
html body #services .svc-card__meta--br { bottom: clamp(14px, 1.3vw, 20px); right: clamp(16px, 1.5vw, 24px); }

/* Textes. */
html body #services .svc-card__badge {
  display: grid;
  place-items: center;
  width: clamp(26px, 2vw, 32px);
  height: clamp(26px, 2vw, 32px);
  border-radius: 7px !important;
  background: rgba(var(--glow), .9);
  color: #040e1e;
  box-shadow: 0 8px 22px -8px rgba(var(--glow), .8);
  margin-bottom: auto;
}
html body #services .svc-card__title {
  margin: 0;
  font-family: var(--font-medium), 'Barlow', sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 1.75vw, 30px);
  line-height: 1.08;
  letter-spacing: .005em;
  color: #f2f7ff;
}
html body #services .svc-card--steps .svc-card__title { margin-top: clamp(18px, 2vw, 30px); }
html body #services .svc-card__title--xl { font-size: clamp(24px, 2.3vw, 42px); line-height: 1.04; max-width: 24ch; }
html body #services .svc-card__title--md { font-size: clamp(18px, 1.35vw, 24px); margin-top: auto; }
html body #services .svc-card__kicker {
  margin: 0 0 clamp(8px, .9vw, 14px);
  font-family: var(--font-body);
  font-size: clamp(9px, .7vw, 11px);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(var(--glow), .85);
}
html body #services .svc-card__text {
  margin: clamp(8px, .8vw, 12px) 0 0;
  font-family: var(--font-body);
  font-size: clamp(13px, .85vw, 15px);
  line-height: 1.55;
  color: rgba(207, 226, 255, .78);
  max-width: 36ch;
}
html body #services .svc-card__foot {
  margin: auto 0 0;
  padding-top: clamp(10px, 1vw, 16px);
  font-family: var(--font-body);
  font-size: clamp(11px, .72vw, 13px);
  line-height: 1.5;
  color: rgba(207, 226, 255, .62);
  max-width: 30ch;
}
html body #services .svc-card__center {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(14px, 1.5vw, 22px) 0;
}
html body #services .svc-card--figure .svc-card__center { gap: clamp(6px, .7vw, 10px); }
html body #services .svc-card--figure .svc-card__kicker { margin-bottom: 0; color: rgba(222, 236, 255, .9); letter-spacing: .14em; font-size: clamp(11px, .8vw, 13px); text-transform: none; font-weight: 600; }
html body #services .svc-card__shout {
  margin: 0;
  font-family: var(--font-medium), 'Barlow', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 34px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f2f7ff;
}
html body #services .svc-card__figure {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  color: #f2f7ff;
}
html body #services .svc-card__figure-big {
  font-family: var(--font-medium), 'Barlow', sans-serif;
  font-weight: 400;
  font-size: clamp(44px, 4.2vw, 76px);
  line-height: .95;
  letter-spacing: -.01em;
}
html body #services .svc-card__figure-unit {
  font-family: var(--font-body);
  font-size: clamp(12px, .9vw, 16px);
  font-weight: 600;
  color: rgba(207, 226, 255, .72);
}

/* Pastilles. */
html body #services .svc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--glow), .36);
  background: rgba(var(--glow), .09);
  font-family: var(--font-body);
  font-size: clamp(8.5px, .62vw, 10.5px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #dbeaff;
  white-space: nowrap;
}
html body #services .svc-pill--solid {
  background: rgb(var(--glow));
  border-color: rgb(var(--glow));
  color: #040e1e;
}
html body #services .svc-pill__num { color: rgba(var(--glow), .95); font-weight: 800; }
html body #services .svc-pills {
  list-style: none;
  margin: clamp(16px, 1.6vw, 26px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, .7vw, 10px);
  max-width: 40rem;
}
html body #services .svc-card__main-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  padding-top: clamp(18px, 1.8vw, 28px);
}
html body #services .svc-card__link {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: clamp(18px, 1.8vw, 28px);
  font-family: var(--font-body);
  font-size: clamp(9.5px, .72vw, 11.5px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e6f1ff;
  text-decoration: none;
  width: max-content;
}
html body #services .svc-card__link > span:last-child { transition: transform .3s var(--ease-out); }
html body #services .svc-card__link:hover > span:last-child,
html body #services .svc-card__link:focus-visible > span:last-child { transform: translateX(4px); }
html body #services .svc-card__link:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; }

/* Etapes (case 1) : point + libelle + trait fin. */
html body #services .svc-steps {
  list-style: none;
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(8px, .8vw, 12px);
}
html body #services .svc-steps__item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}
html body #services .svc-steps__dot {
  width: 9px; height: 9px;
  border-radius: 50% !important;
  border: 1.5px solid rgba(var(--glow), .9);
  background: rgba(var(--glow), .15);
}
html body #services .svc-steps__item:first-child .svc-steps__dot { background: rgb(var(--glow)); box-shadow: 0 0 10px rgba(var(--glow), .7); }
html body #services .svc-steps__label {
  font-family: var(--font-body);
  font-size: clamp(9.5px, .7vw, 11.5px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #dbeaff;
}
html body #services .svc-steps__bar {
  position: relative;
  height: 1px;
  background: rgba(var(--glow), .14);
}
html body #services .svc-steps__bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  background: linear-gradient(90deg, rgba(var(--glow), .9), rgba(var(--glow), .2));
}

/* ---- 2) Notre equipe : bas droit, plus de traits sur les bords -------- */
html body #team.team-section {
  clip-path: polygon(0 var(--team-slope), 100% 0, 100% 100%, 0 100%) !important;
  -webkit-clip-path: polygon(0 var(--team-slope), 100% 0, 100% 100%, 0 100%) !important;
  padding-bottom: var(--space-section) !important;
}
@media (min-width: 1100px) {
  html body #team.team-section { padding-bottom: clamp(80px, 10vh, 140px) !important; }
}
@media (min-width: 1300px) {
  html body #team.team-section { padding-bottom: clamp(40px, 5vh, 72px) !important; }
}
html body #team > .team__edge { display: none !important; }
/* >>> VELRA-V19 END <<< */

/* ============================================================
   VELRA-V20 (21/10/2026)
   1) SERVICES : titre « SERVICES », meme taille / meme police que les
      autres titres de section (copie de « Nos createurs de contenu »,
      valeurs posees par script.js : --svc-title-*).
   2) SERVICES : plus de traits lumineux (repasses sur Notre roster).
   3) NOTRE ROSTER (#team) : traits lumineux haut a gauche (bleu) et bas
      a droite (violet) + bas de section de nouveau en pente.
   4) Cases de services : plus de coins arrondis ; angles COUPES sur PC
      (> 1300px) aux endroits demandes ; interieur facon « verre » de la
      reference (halo plus intense, panneaux de verre floutes).
   5) Disposition des cases :
      PC (> 1300px)   : Etapes | Coaching | Accompagnement structures
                        (carre) | Pour les joueurs (carre), puis la grande
                        case (3 colonnes) | Pour les equipes (carre).
      Tablette (<= 1300px) : 2 colonnes (<= 900px : grande case et
                        « Pour les equipes » sur toute la largeur).
      Mobile (<= 600px)    : 1 colonne.
   6) Avantages (mobile <= 600px) : texte cale a DROITE dans les
      vignettes de droite (Priorite, Cadeaux).
   ============================================================ */

/* ---- 1) Titre ---------------------------------------------------------- */
html body #services .svc__header > .section-title {
  font-family: var(--svc-title-ff, "Azurio Bold", sans-serif);
  /* V23 : meme repli CSS que les autres titres de section (3.8vw, max 64px). */
  font-size: var(--svc-title-fs, clamp(32px, 3.8vw, 64px));
  font-weight: var(--svc-title-fw, 400);
  letter-spacing: var(--svc-title-ls, .01em);
  line-height: var(--svc-title-lh, 1.05);
  text-transform: uppercase;
}

/* ---- 2) Services : plus de traits ------------------------------------- */
html body #services > .svc__edge { display: none !important; }

/* ---- 3) Notre roster : traits + pente du bas -------------------------- */
html body #team.team-section {
  clip-path: polygon(0 var(--team-slope), 100% 0, 100% calc(100% - var(--team-slope)), 0 100%) !important;
  -webkit-clip-path: polygon(0 var(--team-slope), 100% 0, 100% calc(100% - var(--team-slope)), 0 100%) !important;
  padding-bottom: calc(var(--team-slope) + 20px) !important;
}
@media (min-width: 1100px) {
  html body #team.team-section { padding-bottom: calc(var(--team-slope) + 20px) !important; }
}
@media (min-width: 1300px) {
  html body #team.team-section { padding-bottom: calc(var(--team-slope) + 20px) !important; }
}
html body #team > .team__edge { display: block !important; }

/* ---- 4) Cases : angles droits / coupes + style « verre » --------------- */
html body #services .svc-card {
  --cut: clamp(14px, 1.3vw, 22px);
  --c-tl: 0px; --c-tr: 0px; --c-br: 0px; --c-bl: 0px;
  --bd: rgba(var(--glow), .5);
  --svc-clip: polygon(
    var(--c-tl) 0, calc(100% - var(--c-tr)) 0,
    100% var(--c-tr), 100% calc(100% - var(--c-br)),
    calc(100% - var(--c-br)) 100%, var(--c-bl) 100%,
    0 calc(100% - var(--c-bl)), 0 var(--c-tl));
  border-radius: 0 !important;
  border: 0 !important;
  /* Le contour (1px) est le fond de la case, visible autour du calque
     ::before (inset 1px) : il suit aussi les angles coupes. */
  background: var(--bd);
  box-shadow: none;
  clip-path: var(--svc-clip);
  -webkit-clip-path: var(--svc-clip);
  transition: transform .45s var(--ease-out), background-color .45s var(--ease-out);
}
html body #services .svc-card::before {
  inset: 1px;
  clip-path: var(--svc-clip);
  -webkit-clip-path: var(--svc-clip);
  background:
    radial-gradient(70% 62% at var(--gx) var(--gy), rgba(var(--glow), .82) 0%, rgba(var(--glow), .38) 30%, rgba(var(--glow), .1) 56%, rgba(6, 16, 35, 0) 76%),
    radial-gradient(120% 90% at var(--gx) var(--gy), rgba(var(--glow), .16) 0%, rgba(var(--glow), 0) 70%),
    linear-gradient(180deg, #081736 0%, #050e22 58%, #040b1b 100%);
}
html body #services .svc-card::after {
  inset: 1px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px);
}
@media (hover: hover) and (pointer: fine) {
  html body #services .svc-card:hover {
    --bd: rgba(var(--glow), .85);
    box-shadow: none;
  }
}

/* Panneaux de verre (comme la reference) : deux plaques floutees par case. */
html body #services .svc-card__glass {
  position: absolute;
  inset: 1px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  clip-path: var(--svc-clip);
  -webkit-clip-path: var(--svc-clip);
}
html body #services .svc-card__glass::before,
html body #services .svc-card__glass::after {
  content: "";
  position: absolute;
  border-radius: 0 !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .015) 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), inset -1px -1px 0 rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}
/* Etapes : une plaque haute et fine a droite. */
html body #services .svc-card--steps .svc-card__glass::before { right: 9%; top: -12%; width: 20%; height: 72%; }
html body #services .svc-card--steps .svc-card__glass::after { right: 31%; top: -12%; width: 7%; height: 46%; opacity: .7; }
/* Coaching : deux blocs depolis en bas a gauche. */
html body #services .svc-card--focus .svc-card__glass::before { left: 0; bottom: 0; width: 17%; height: 50%; }
html body #services .svc-card--focus .svc-card__glass::after { left: 17%; bottom: 0; width: 30%; height: 22%; opacity: .8; }
/* Accompagnement structures : reflet en diagonale. */
html body #services .svc-card--figure .svc-card__glass::before { right: -22%; top: -40%; width: 46%; height: 180%; transform: rotate(32deg); }
html body #services .svc-card--figure .svc-card__glass::after { right: 30%; top: -40%; width: 9%; height: 180%; transform: rotate(32deg); opacity: .55; }
/* Pour les joueurs : grande plaque a droite. */
html body #services .svc-card--side1 .svc-card__glass::before { right: -6%; top: 14%; width: 46%; height: 62%; }
html body #services .svc-card--side1 .svc-card__glass::after { right: 32%; top: 50%; width: 16%; height: 30%; opacity: .75; }
/* Grande case : plaques inclinees en bas a droite. */
html body #services .svc-card--main .svc-card__glass::before { right: 8%; bottom: -24%; width: 24%; height: 84%; transform: rotate(-14deg); }
html body #services .svc-card--main .svc-card__glass::after { right: -3%; top: -12%; width: 12%; height: 62%; transform: rotate(-14deg); opacity: .7; }
/* Pour les equipes : eclats en diagonale en haut a droite. */
html body #services .svc-card--side2 .svc-card__glass::before { right: -20%; top: -28%; width: 62%; height: 92%; transform: rotate(36deg); }
html body #services .svc-card--side2 .svc-card__glass::after { right: 34%; top: -36%; width: 10%; height: 120%; transform: rotate(36deg); opacity: .6; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body #services .svc-card__glass::before,
  html body #services .svc-card__glass::after { background: linear-gradient(165deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 60%); }
}

/* Contenu au-dessus des calques. */
html body #services .svc-card > :not(.svc-card__glass) { position: relative; z-index: 1; }
html body #services .svc-card > .svc-card__meta { position: absolute; z-index: 2; }

/* ---- 5) Disposition ----------------------------------------------------- */
/* PC (> 1300px), V23 : grille de 6 colonnes egales (unite u = 1 colonne).
   Rangee 1 : « Etapes » (2u) | « Accompagnement structures 360° » (2u) |
              « Coaching » (1u, CARRE) | « Pour les joueurs » (1u, CARRE).
   Rangees 2-3 : grande case « Un accompagnement complet » (4u) |
              « Pour les equipes & structures » (2u, CARRE, meme hauteur
              que la grande case).
   « Etapes » et « 360° » gardent leur largeur d'origine (2u = 1/3 de la
   grille). Les carres imposent la hauteur des rangees ; les autres cases
   de la rangee s'etirent a la meme hauteur. */
@media (min-width: 1301px) {
  html body #services .svc__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: clamp(14px, 1.6vw, 24px);
    align-items: stretch;
  }
  html body #services .svc-card--steps  { grid-column: 1 / span 2; grid-row: 1; }
  html body #services .svc-card--figure { grid-column: 3 / span 2; grid-row: 1; }
  html body #services .svc-card--focus  { grid-column: 5; grid-row: 1; }
  html body #services .svc-card--side1  { grid-column: 6; grid-row: 1; }
  html body #services .svc-card--main   { grid-column: 1 / span 4; grid-row: 2; }
  html body #services .svc-card--side2  { grid-column: 5 / span 2; grid-row: 2; }
  /* Cases carrees : la largeur de colonne fixe la hauteur. */
  html body #services .svc-card--focus,
  html body #services .svc-card--side1,
  html body #services .svc-card--side2 {
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
    /* La rangee prend la hauteur du carre ; si le contenu d'une case
       voisine est plus haut (petits ecrans PC), le carre s'etire a la
       hauteur de la rangee pour rester aligne. */
    align-self: stretch;
  }
  /* « Etapes » : espaces internes legerement reduits pour tenir dans la
     hauteur du carre voisin (la case garde sa taille). */
  html body #services .svc-card--steps .svc-card__title { margin-top: clamp(12px, 1.1vw, 18px); }
  html body #services .svc-card--steps .svc-steps { margin-top: clamp(10px, 1vw, 16px); }
  html body #services .svc-card--steps,
  html body #services .svc-card--figure,
  html body #services .svc-card--main {
    aspect-ratio: auto;
    min-height: 100%;
    height: auto;
  }
  /* Petites cases carrees : contenu centre verticalement, texte plus compact. */
  html body #services .svc-card--focus .svc-card__center { padding: 0; gap: clamp(8px, .7vw, 12px); }
  html body #services .svc-card--focus .svc-card__shout { font-size: clamp(18px, 1.45vw, 26px); }
  html body #services .svc-card--side1 { padding: clamp(16px, 1.4vw, 24px); }
  html body #services .svc-card--side1 .svc-card__title--md { font-size: clamp(15px, 1.05vw, 19px); }
  html body #services .svc-card--side1 .svc-card__text { font-size: clamp(10.5px, .7vw, 12.5px); line-height: 1.45; }
  /* « 360° » : moins d'espace interne pour tenir dans la hauteur de la rangee
     (la case garde sa taille : seuls les espaces vides sont reduits). */
  html body #services .svc-card--figure .svc-card__center { padding: 0; }
  html body #services .svc-card--figure .svc-card__foot { padding-top: clamp(6px, .6vw, 10px); }
  /* Angles coupes :
     - les 4 coins exterieurs de la grille : haut gauche de « Etapes »,
       haut droit de « Pour les joueurs », bas gauche de la grande case,
       bas droit de « Pour les equipes » ;
     - le croisement central (4 coins) : bas droit de « 360° », bas gauche
       de « Coaching », haut droit de la grande case, haut gauche de
       « Pour les equipes ».
     Les jonctions entre « Coaching » / « Pour les joueurs » et « Pour les
     equipes » restent a angles droits. */
  html body #services .svc-card--steps  { --c-tl: var(--cut); }
  html body #services .svc-card--figure { --c-br: var(--cut); }
  html body #services .svc-card--focus  { --c-bl: var(--cut); }
  html body #services .svc-card--side1  { --c-tr: var(--cut); }
  html body #services .svc-card--main   { --c-tr: var(--cut); --c-bl: var(--cut); }
  html body #services .svc-card--side2  { --c-tl: var(--cut); --c-br: var(--cut); }
}
/* Tablette (601px - 1300px) : 2 colonnes.
   Etapes | Coaching, Accompagnement structures | Pour les joueurs,
   grande case | Pour les equipes. */
@media (max-width: 1300px) {
  html body #services .svc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(220px, 27vw, 320px), auto);
    gap: clamp(12px, 1.8vw, 20px);
  }
  html body #services .svc-card--steps,
  html body #services .svc-card--focus,
  html body #services .svc-card--figure,
  html body #services .svc-card--side1,
  html body #services .svc-card--main,
  html body #services .svc-card--side2 {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: auto;
  }
  html body #services .svc-card { padding: clamp(18px, 2.6vw, 28px); }
  html body #services .svc-card__title--xl { font-size: clamp(22px, 3vw, 32px); }
}
/* Petite tablette (601px - 900px) : la grande case et « Pour les equipes »
   passent sur toute la largeur (texte plus lisible). */
@media (max-width: 900px) and (min-width: 601px) {
  html body #services .svc-card--main,
  html body #services .svc-card--side2 { grid-column: 1 / -1; }
}
/* Mobile (<= 600px) : 1 colonne, cases a la hauteur du contenu. */
@media (max-width: 600px) {
  html body #services .svc__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }
  html body #services .svc-card { min-height: clamp(190px, 54vw, 240px); padding: 20px 18px; }
  html body #services .svc-card--main { min-height: 0; }
  html body #services .svc-card__title--xl { font-size: clamp(22px, 6.4vw, 28px); max-width: none; }
  html body #services .svc-pill { white-space: normal; }
}

/* ---- 6) Avantages : texte a droite dans les vignettes de droite (mobile) */
@media (max-width: 1300px) {
  html body #team .staff-recruit--v3 .staff-perks .staff-banner:nth-child(n + 3) .staff-banner__bar {
    justify-content: flex-end !important;
    text-align: right !important;
  }
  html body #team .staff-recruit--v3 .staff-perks .staff-banner:nth-child(n + 3) .staff-banner__label,
  html body #team .staff-recruit--v3 .staff-perks .staff-banner:nth-child(n + 3) .staff-banner__label > * {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
    justify-content: flex-end !important;
  }
}
/* >>> VELRA-V20 END <<< */

/* ============================================================
   VELRA-V21 (21/10/2026) — COMMUNAUTE
   1) Prochains evenements (PC > 1300px) : date (jour + mois) plus
      grande ; le logo du jeu a EXACTEMENT la hauteur de la date (haut
      du jour -> bas du mois), centre sur elle, jamais plus grand.
      Le titre et la vignette (Tournoi / Evenement) sont agrandis et
      cales eux aussi du haut au bas du logo.
   2) Conteneurs de la section (Tournois, Evenement, Defi, Prochains
      evenements) : contour fin comme les cases Services. Le trait est
      dessine par script.js (V21) et suit la forme exacte du conteneur
      (angles coupes compris) a toutes les largeurs.
   ============================================================ */

/* ---- 1) Date + logo (PC) --------------------------------------------- */
@media (min-width: 1301px) {
  html body #eventsPin[data-flow] #events .upcoming__list {
    --up-day: clamp(36px, 2.5vw, 48px);
    --up-month: clamp(10px, .68vw, 13px);
    /* Hauteur de la date = ligne du jour (.8) + ligne du mois (.6).
       Avec Bebas Neue, ces hauteurs de ligne placent le HAUT des chiffres
       du jour sur le haut du bloc et le BAS des lettres du mois sur le bas
       du bloc : le logo (meme hauteur, centre) va du haut du jour au bas
       du mois. */
    --up-date-h: calc(var(--up-day) * .8 + var(--up-month) * .6);
    --upcoming-game-logo-h: var(--up-date-h);
    /* Logo horizontal (rapport du logo Brawl Stars d'origine : 83 x 36.8). */
    --upcoming-game-logo-w: calc(var(--up-date-h) * 2.255);
    grid-template-columns: calc(var(--up-day) * 1.25) var(--upcoming-game-logo-w) fit-content(24ch) minmax(0, 1fr) max-content max-content max-content !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__date {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--up-date-h) !important;
    align-self: center !important;
    overflow: visible !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__day {
    font-size: var(--up-day) !important;
    line-height: .8 !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__month {
    font-size: var(--up-month) !important;
    line-height: .6 !important;
    overflow: visible !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__game-icon {
    width: var(--upcoming-game-logo-w) !important;
    min-width: var(--upcoming-game-logo-w) !important;
    max-width: var(--upcoming-game-logo-w) !important;
    height: var(--up-date-h) !important;
    min-height: var(--up-date-h) !important;
    max-height: var(--up-date-h) !important;
    align-self: center !important;
    justify-self: start !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__game-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
}

/* ---- 1b) Titre + vignette (PC) : agrandis, calés sur le logo ----------
   Le bloc titre + vignette a la MEME hauteur que la date et le logo :
   haut des lettres du titre = haut du logo, bas de la vignette = bas du
   logo. */
@media (min-width: 1301px) {
  html body #eventsPin[data-flow] #events .upcoming__list {
    --up-badge-fs: clamp(10px, .62vw, 12px);
    --up-badge-py: 3px;
    --up-badge-h: calc(var(--up-badge-fs) * 1.1 + var(--up-badge-py) * 2);
    --up-info-gap: clamp(3px, .25vw, 5px);
    /* Bebas Neue, hauteur de ligne .8 : le haut des lettres = haut de la ligne. */
    --up-title-fs: calc((var(--up-date-h) - var(--up-info-gap) - var(--up-badge-h)) / .8);
    grid-template-columns: calc(var(--up-day) * 1.25) var(--upcoming-game-logo-w) fit-content(32ch) minmax(0, 1fr) max-content max-content max-content !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: var(--up-info-gap) !important;
    height: var(--up-date-h) !important;
    min-height: var(--up-date-h) !important;
    max-height: var(--up-date-h) !important;
    max-width: 32ch !important;
    align-self: center !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info > strong {
    font-size: var(--up-title-fs) !important;
    line-height: .8 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info .upcoming__type {
    font-size: var(--up-badge-fs) !important;
    line-height: 1.1 !important;
    height: var(--up-badge-h) !important;
    min-height: var(--up-badge-h) !important;
    padding: 0 clamp(6px, .45vw, 9px) !important;
    margin: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
}

/* ---- 2) Contours (trait SVG pose par script.js) ----------------------- */
html body #eventsPin #events .velra-outline {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: auto !important; bottom: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 6 !important;
  transform: none !important;
}
html body #eventsPin #events .velra-outline polygon {
  fill: none;
  /* V23 : meme intensite que le contour des cases Services. */
  stroke: rgba(94, 170, 255, .5);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  transition: stroke .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  html body #eventsPin #events .event-card:hover > .velra-outline polygon,
  html body #eventsPin #events .upcoming:hover > .velra-outline polygon {
    stroke: rgba(94, 170, 255, .85);
  }
}
/* >>> VELRA-V21 END <<< */

/* ============================================================
   VELRA-V23 (21/10/2026)
   1) NOTRE EQUIPE (#team) : le bas de la section redevient DROIT (plus
      de pente). Le trait lumineux du bas (cote droit) est conserve :
      il est simplement horizontal, a l'extremite basse de la section.
   2) Les deux mosaiques de triangles (coins) quittent « Equipe » et
      passent sur la section SERVICES (memes coins : haut droit / bas
      gauche, decoupees par les pentes de Services).
   3) Titre « Notre equipe » -> « EQUIPE » (texte dans index.html /
      script.js).
   ============================================================ */

/* ---- 1) Bas droit + trait horizontal ---------------------------------- */
html body #team.team-section {
  clip-path: polygon(0 var(--team-slope), 100% 0, 100% 100%, 0 100%) !important;
  -webkit-clip-path: polygon(0 var(--team-slope), 100% 0, 100% 100%, 0 100%) !important;
  padding-bottom: calc(var(--space-section) + var(--team-slope)) !important;
}
@media (min-width: 1100px) {
  html body #team.team-section { padding-bottom: calc(clamp(80px, 10vh, 140px) + var(--team-slope)) !important; }
}
@media (min-width: 1300px) {
  html body #team.team-section { padding-bottom: calc(clamp(40px, 5vh, 72px) + var(--team-slope)) !important; }
}
/* Trait du bas : horizontal, du bord DROIT vers le centre, a l'extremite
   basse de la section. */
html body #team > .team__edge--bottom {
  display: block !important;
  right: 0;
  bottom: 0;
  height: 14px;
}
html body #team > .team__edge--bottom > span {
  clip-path: polygon(0 calc(100% - var(--edge-w)), 100% calc(100% - var(--edge-w)), 100% 100%, 0 100%) !important;
  -webkit-clip-path: polygon(0 calc(100% - var(--edge-w)), 100% calc(100% - var(--edge-w)), 100% 100%, 0 100%) !important;
}

/* ---- 2) Mosaiques sur SERVICES ---------------------------------------- */
html body #services .team__mosaic {
  position: absolute;
  z-index: 1;
  width: 23vw;
  aspect-ratio: 640 / 659;
  pointer-events: none;
  opacity: .72;
  mix-blend-mode: screen;
}
html body #services .team__mosaic svg { display: block; width: 100%; height: 100%; }
html body #services .team__mosaic--tl {
  top: 0;
  right: 0;
  left: auto;
  transform: translateY(-17.34%) scaleX(-1);
}
html body #services .team__mosaic--br {
  aspect-ratio: 640 / 539;
  left: 0;
  right: auto;
  bottom: 0;
  transform: translateY(21.2%) scaleY(-1);
}
@media (max-width: 720px) {
  html body #services .team__mosaic { width: calc(clamp(36px, 5vw, 110px) * 4.6); opacity: .55; }
}
@media (min-width: 2200px) {
  html body #services .team__mosaic { width: calc(clamp(36px, 5vw, 110px) * 4.6); }
}
/* >>> VELRA-V23 END <<< */

/* V25 — commandes explicites, distinctes des deux calques de contenu. */
/* V26 : simple indicateur de defilement (aucun conteneur, aucun clic). */
html body #eventsPin #events > .scene-arrow {
  position: absolute; bottom: 12px; left: calc(50% - 24px); z-index: 20;
  width: 48px; height: 48px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 0;
  color: #cde7ff; background: none; box-shadow: none; cursor: default;
  pointer-events: none; user-select: none;
}
html body #eventsPin #events > .scene-arrow[hidden] { display: none; }
.scene-arrow svg { animation: velraArrowFloat 2s ease-in-out infinite; }
html body #eventsPin #events > .scene-arrow {
  opacity: var(--arrow-k, 0); transform: scale(calc(.2 + .8 * var(--arrow-k, 0)));
  transform-origin: 50% 50%; transition: opacity .18s linear, transform .18s ease-out;
}
.scene-arrow[data-direction="up"] svg { rotate: 180deg; }
@keyframes velraArrowFloat { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .scene-arrow svg { animation: none; } }
html body #eventsPin[data-flow="timed"]:not([data-static="1"]) #actu .actu__grid {
  clip-path: inset(var(--scene-articles-clip-top, 0px) 0 var(--scene-articles-clip-bottom, 0px) 0);
}

:root {
 --svc-tile-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22824%22%20viewBox%3D%220%200%20240%20824%22%3E%3Cg%3E%3Cpolygon%20points%3D%22-12%2C-412%2012%2C-412%2048%2C-206%2012%2C0%20-12%2C0%20-48%2C-206%22%20fill%3D%22%23164394%22%20fill-opacity%3D%220.62%22%2F%3E%3Cpolygon%20points%3D%22-12%2C0%2012%2C0%2048%2C206%2012%2C412%20-12%2C412%20-48%2C206%22%20fill%3D%22%2310357a%22%20fill-opacity%3D%220.58%22%2F%3E%3Cpolygon%20points%3D%22-12%2C412%2012%2C412%2048%2C618%2012%2C824%20-12%2C824%20-48%2C618%22%20fill%3D%22%231d55a8%22%20fill-opacity%3D%220.42%22%2F%3E%3Cpolygon%20points%3D%22-12%2C824%2012%2C824%2048%2C1030%2012%2C1236%20-12%2C1236%20-48%2C1030%22%20fill%3D%22%230b2a63%22%20fill-opacity%3D%220.5%22%2F%3E%3Cpolygon%20points%3D%2248%2C-206%2072%2C-206%20108%2C0%2072%2C206%2048%2C206%2012%2C0%22%20fill%3D%22%230b2a63%22%20fill-opacity%3D%220.5%22%2F%3E%3Cpolygon%20points%3D%2248%2C206%2072%2C206%20108%2C412%2072%2C618%2048%2C618%2012%2C412%22%20fill%3D%22%232a69bf%22%20fill-opacity%3D%220.34%22%2F%3E%3Cpolygon%20points%3D%2248%2C618%2072%2C618%20108%2C824%2072%2C1030%2048%2C1030%2012%2C824%22%20fill%3D%22%230b2a63%22%20fill-opacity%3D%220.5%22%2F%3E%3Cpolygon%20points%3D%22108%2C-412%20132%2C-412%20168%2C-206%20132%2C0%20108%2C0%2072%2C-206%22%20fill%3D%22%23164394%22%20fill-opacity%3D%220.62%22%2F%3E%3Cpolygon%20points%3D%22108%2C0%20132%2C0%20168%2C206%20132%2C412%20108%2C412%2072%2C206%22%20fill%3D%22%232a69bf%22%20fill-opacity%3D%220.34%22%2F%3E%3Cpolygon%20points%3D%22108%2C412%20132%2C412%20168%2C618%20132%2C824%20108%2C824%2072%2C618%22%20fill%3D%22%230b2a63%22%20fill-opacity%3D%220.5%22%2F%3E%3Cpolygon%20points%3D%22108%2C824%20132%2C824%20168%2C1030%20132%2C1236%20108%2C1236%2072%2C1030%22%20fill%3D%22%232a69bf%22%20fill-opacity%3D%220.34%22%2F%3E%3Cpolygon%20points%3D%22168%2C-206%20192%2C-206%20228%2C0%20192%2C206%20168%2C206%20132%2C0%22%20fill%3D%22%2310357a%22%20fill-opacity%3D%220.58%22%2F%3E%3Cpolygon%20points%3D%22168%2C206%20192%2C206%20228%2C412%20192%2C618%20168%2C618%20132%2C412%22%20fill%3D%22%230b2a63%22%20fill-opacity%3D%220.5%22%2F%3E%3Cpolygon%20points%3D%22168%2C618%20192%2C618%20228%2C824%20192%2C1030%20168%2C1030%20132%2C824%22%20fill%3D%22%230b2a63%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238ec3ff%22%20stroke-opacity%3D%22.32%22%20stroke-width%3D%221%22%3E%3Cpolygon%20points%3D%22-12%2C-412%2012%2C-412%2048%2C-206%2012%2C0%20-12%2C0%20-48%2C-206%22%2F%3E%3Cpolygon%20points%3D%22-12%2C0%2012%2C0%2048%2C206%2012%2C412%20-12%2C412%20-48%2C206%22%2F%3E%3Cpolygon%20points%3D%22-12%2C412%2012%2C412%2048%2C618%2012%2C824%20-12%2C824%20-48%2C618%22%2F%3E%3Cpolygon%20points%3D%22-12%2C824%2012%2C824%2048%2C1030%2012%2C1236%20-12%2C1236%20-48%2C1030%22%2F%3E%3Cpolygon%20points%3D%2248%2C-206%2072%2C-206%20108%2C0%2072%2C206%2048%2C206%2012%2C0%22%2F%3E%3Cpolygon%20points%3D%2248%2C206%2072%2C206%20108%2C412%2072%2C618%2048%2C618%2012%2C412%22%2F%3E%3Cpolygon%20points%3D%2248%2C618%2072%2C618%20108%2C824%2072%2C1030%2048%2C1030%2012%2C824%22%2F%3E%3Cpolygon%20points%3D%22108%2C-412%20132%2C-412%20168%2C-206%20132%2C0%20108%2C0%2072%2C-206%22%2F%3E%3Cpolygon%20points%3D%22108%2C0%20132%2C0%20168%2C206%20132%2C412%20108%2C412%2072%2C206%22%2F%3E%3Cpolygon%20points%3D%22108%2C412%20132%2C412%20168%2C618%20132%2C824%20108%2C824%2072%2C618%22%2F%3E%3Cpolygon%20points%3D%22108%2C824%20132%2C824%20168%2C1030%20132%2C1236%20108%2C1236%2072%2C1030%22%2F%3E%3Cpolygon%20points%3D%22168%2C-206%20192%2C-206%20228%2C0%20192%2C206%20168%2C206%20132%2C0%22%2F%3E%3Cpolygon%20points%3D%22168%2C206%20192%2C206%20228%2C412%20192%2C618%20168%2C618%20132%2C412%22%2F%3E%3Cpolygon%20points%3D%22168%2C618%20192%2C618%20228%2C824%20192%2C1030%20168%2C1030%20132%2C824%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%2303091c%22%20stroke%3D%22%235eaaff%22%20stroke-opacity%3D%22.35%22%20stroke-width%3D%221%22%3E%3Crect%20x%3D%22-12%22%20y%3D%22-424%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22-12%22%20y%3D%22-12%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22-12%22%20y%3D%22400%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22-12%22%20y%3D%22812%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%22-218%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%22194%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%22606%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22108%22%20y%3D%22-424%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22108%22%20y%3D%22-12%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22108%22%20y%3D%22400%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22108%22%20y%3D%22812%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22168%22%20y%3D%22-218%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22168%22%20y%3D%22194%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22168%22%20y%3D%22606%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 --faq-star-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22640%22%20viewBox%3D%220%200%20320%20640%22%3E%3Cg%20fill%3D%22%235eaaff%22%20fill-opacity%3D%22.105%22%3E%3Cpath%20d%3D%22M0%2028Q0%2032%204%2032Q0%2032%200%2036Q0%2032%20-4%2032Q0%2032%200%2028Z%22%2F%3E%3Cpath%20d%3D%22M128%2028Q128%2032%20132%2032Q128%2032%20128%2036Q128%2032%20124%2032Q128%2032%20128%2028Z%22%2F%3E%3Cpath%20d%3D%22M192%2028Q192%2032%20196%2032Q192%2032%20192%2036Q192%2032%20188%2032Q192%2032%20192%2028Z%22%2F%3E%3Cpath%20d%3D%22M320%2028Q320%2032%20324%2032Q320%2032%20320%2036Q320%2032%20316%2032Q320%2032%20320%2028Z%22%2F%3E%3Cpath%20d%3D%22M96%2089Q96%2096%20103%2096Q96%2096%2096%20103Q96%2096%2089%2096Q96%2096%2096%2089Z%22%2F%3E%3Cpath%20d%3D%22M224%2089Q224%2096%20231%2096Q224%2096%20224%20103Q224%2096%20217%2096Q224%2096%20224%2089Z%22%2F%3E%3Cpath%20d%3D%22M288%2089Q288%2096%20295%2096Q288%2096%20288%20103Q288%2096%20281%2096Q288%2096%20288%2089Z%22%2F%3E%3Cpath%20d%3D%22M0%20148Q0%20160%2012%20160Q0%20160%200%20172Q0%20160%20-12%20160Q0%20160%200%20148Z%22%2F%3E%3Cpath%20d%3D%22M64%20148Q64%20160%2076%20160Q64%20160%2064%20172Q64%20160%2052%20160Q64%20160%2064%20148Z%22%2F%3E%3Cpath%20d%3D%22M128%20148Q128%20160%20140%20160Q128%20160%20128%20172Q128%20160%20116%20160Q128%20160%20128%20148Z%22%2F%3E%3Cpath%20d%3D%22M256%20148Q256%20160%20268%20160Q256%20160%20256%20172Q256%20160%20244%20160Q256%20160%20256%20148Z%22%2F%3E%3Cpath%20d%3D%22M320%20148Q320%20160%20332%20160Q320%20160%20320%20172Q320%20160%20308%20160Q320%20160%20320%20148Z%22%2F%3E%3Cpath%20d%3D%22M32%20205Q32%20224%2051%20224Q32%20224%2032%20243Q32%20224%2013%20224Q32%20224%2032%20205Z%22%2F%3E%3Cpath%20d%3D%22M160%20205Q160%20224%20179%20224Q160%20224%20160%20243Q160%20224%20141%20224Q160%20224%20160%20205Z%22%2F%3E%3Cpath%20d%3D%22M224%20205Q224%20224%20243%20224Q224%20224%20224%20243Q224%20224%20205%20224Q224%20224%20224%20205Z%22%2F%3E%3Cpath%20d%3D%22M352%20205Q352%20224%20371%20224Q352%20224%20352%20243Q352%20224%20333%20224Q352%20224%20352%20205Z%22%2F%3E%3Cpath%20d%3D%22M64%20262Q64%20288%2090%20288Q64%20288%2064%20314Q64%20288%2038%20288Q64%20288%2064%20262Z%22%2F%3E%3Cpath%20d%3D%22M192%20262Q192%20288%20218%20288Q192%20288%20192%20314Q192%20288%20166%20288Q192%20288%20192%20262Z%22%2F%3E%3Cpath%20d%3D%22M256%20262Q256%20288%20282%20288Q256%20288%20256%20314Q256%20288%20230%20288Q256%20288%20256%20262Z%22%2F%3E%3Cpath%20d%3D%22M32%20326Q32%20352%2058%20352Q32%20352%2032%20378Q32%20352%206%20352Q32%20352%2032%20326Z%22%2F%3E%3Cpath%20d%3D%22M96%20326Q96%20352%20122%20352Q96%20352%2096%20378Q96%20352%2070%20352Q96%20352%2096%20326Z%22%2F%3E%3Cpath%20d%3D%22M160%20326Q160%20352%20186%20352Q160%20352%20160%20378Q160%20352%20134%20352Q160%20352%20160%20326Z%22%2F%3E%3Cpath%20d%3D%22M352%20326Q352%20352%20378%20352Q352%20352%20352%20378Q352%20352%20326%20352Q352%20352%20352%20326Z%22%2F%3E%3Cpath%20d%3D%22M0%20397Q0%20416%2019%20416Q0%20416%200%20435Q0%20416%20-19%20416Q0%20416%200%20397Z%22%2F%3E%3Cpath%20d%3D%22M128%20397Q128%20416%20147%20416Q128%20416%20128%20435Q128%20416%20109%20416Q128%20416%20128%20397Z%22%2F%3E%3Cpath%20d%3D%22M192%20397Q192%20416%20211%20416Q192%20416%20192%20435Q192%20416%20173%20416Q192%20416%20192%20397Z%22%2F%3E%3Cpath%20d%3D%22M256%20397Q256%20416%20275%20416Q256%20416%20256%20435Q256%20416%20237%20416Q256%20416%20256%20397Z%22%2F%3E%3Cpath%20d%3D%22M320%20397Q320%20416%20339%20416Q320%20416%20320%20435Q320%20416%20301%20416Q320%20416%20320%20397Z%22%2F%3E%3Cpath%20d%3D%22M96%20468Q96%20480%20108%20480Q96%20480%2096%20492Q96%20480%2084%20480Q96%20480%2096%20468Z%22%2F%3E%3Cpath%20d%3D%22M160%20468Q160%20480%20172%20480Q160%20480%20160%20492Q160%20480%20148%20480Q160%20480%20160%20468Z%22%2F%3E%3Cpath%20d%3D%22M288%20468Q288%20480%20300%20480Q288%20480%20288%20492Q288%20480%20276%20480Q288%20480%20288%20468Z%22%2F%3E%3Cpath%20d%3D%22M0%20537Q0%20544%207%20544Q0%20544%200%20551Q0%20544%20-7%20544Q0%20544%200%20537Z%22%2F%3E%3Cpath%20d%3D%22M64%20537Q64%20544%2071%20544Q64%20544%2064%20551Q64%20544%2057%20544Q64%20544%2064%20537Z%22%2F%3E%3Cpath%20d%3D%22M192%20537Q192%20544%20199%20544Q192%20544%20192%20551Q192%20544%20185%20544Q192%20544%20192%20537Z%22%2F%3E%3Cpath%20d%3D%22M320%20537Q320%20544%20327%20544Q320%20544%20320%20551Q320%20544%20313%20544Q320%20544%20320%20537Z%22%2F%3E%3Cpath%20d%3D%22M32%20604Q32%20608%2036%20608Q32%20608%2032%20612Q32%20608%2028%20608Q32%20608%2032%20604Z%22%2F%3E%3Cpath%20d%3D%22M160%20604Q160%20608%20164%20608Q160%20608%20160%20612Q160%20608%20156%20608Q160%20608%20160%20604Z%22%2F%3E%3Cpath%20d%3D%22M288%20604Q288%20608%20292%20608Q288%20608%20288%20612Q288%20608%20284%20608Q288%20608%20288%20604Z%22%2F%3E%3Cpath%20d%3D%22M352%20604Q352%20608%20356%20608Q352%20608%20352%20612Q352%20608%20348%20608Q352%20608%20352%20604Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* V25 — corrections ciblees, sans modifier les autres pages. */
html body.partners-band-hidden #partners.partners-band { display: none !important; }
html body #services.svc-section { background-color: #0a2050; }
html body #services > .svc__bg {
  /* Meme famille de bleus que la section Equipe, mais fige (aucune animation). */
  background: linear-gradient(135deg, #061a3e 0%, #0c2860 50%, #0a2050 100%) !important;
  animation: none !important; transform: none !important;
}
html body #services > .svc__bg::after {
  /* Motif « carrelage » : hexagones etires en quinconce + carres sombres aux jonctions. */
  background-image: var(--svc-tile-pattern) !important;
  background-size: 240px 824px !important;
  background-position: center top !important;
  background-repeat: repeat !important;
  mask-image: none !important; -webkit-mask-image: none !important;
  opacity: 1; animation: none !important; transform: none !important;
}
html body #services .team__mosaic { display: none; }
/* Les angles coupes sont conserves ; seul le filet devient plus discret. */
html body #services .svc-card,
html body #services .svc-card:hover {
  --bd: rgba(var(--glow), .3);
  transform: none; box-shadow: none; transition: none;
}
html body #services .svc-card::before,
html body #services .svc-card::after { inset: .65px; }
html body #eventsPin #events .velra-outline polygon,
html body #eventsPin #events .event-card:hover > .velra-outline polygon,
html body #eventsPin #events .upcoming:hover > .velra-outline polygon {
  stroke: rgba(94, 170, 255, .3); stroke-width: .75px; transition: none;
}
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card,
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card:hover {
  box-shadow: none !important; filter: none !important;
}
/* Le calque de halo du trait bas avait conserve son ancienne pente. */
html body #team > .team__edge--bottom::before {
  clip-path: inset(calc(100% - var(--edge-glow)) 0 0) !important;
  -webkit-clip-path: inset(calc(100% - var(--edge-glow)) 0 0) !important;
}
@media (min-width: 1301px) {
  html body #team .staff-recruit.staff-recruit--v3 {
    grid-template-rows: minmax(500px, auto) !important;
    margin-top: 24px !important;
  }
}
/* FAQ : motif etoile vectoriel autonome, doux et sans animation. */
html body #faq.faq-section {
  background-color: #061430 !important;
  background-image: var(--faq-star-pattern) !important;
  background-size: 320px 640px !important;
  background-repeat: repeat !important;
}
html body .faq-section .faq-item__q,
html body .faq-section .faq-item__panel-inner > p {
  width: 100%; max-width: none; min-width: 0;
  white-space: normal; overflow-wrap: break-word; text-wrap: wrap;
}
/* Les questions supplementaires restent consultables sur petit ecran. */
@media (max-width: 1300px) {
  html body .faq-section .faq__list--extra { display: flex !important; }
}
/* Articles : sortie par le bas / retour par le haut, jamais par opacite. */
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__body { overflow: hidden !important; }
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__body > * {
  opacity: 1 !important;
  transform: translateY(0);
  transition: transform .42s cubic-bezier(.22,1,.36,1) .2s !important;
}
@media (hover: hover) and (pointer: fine) {
  html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__body > * {
    opacity: 1 !important;
    transform: translateY(var(--article-body-slide, 240px));
    transition-delay: 0s !important;
  }
}
html body #eventsPin #actu .actu__grid > .actu-card:focus-visible .actu-card__body > * {
  opacity: 1 !important; transform: translateY(var(--article-body-slide, 240px));
  transition-delay: 0s !important;
}
@media (hover: none) {
  html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__body > * { transform: none; opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #eventsPin #actu .actu__grid > .actu-card .actu-card__body > * { transition: none !important; }
}

/* >>> VELRA-V26 START (22/10/2026) <<< */
/* 1) SERVICES : fond carrelage (losanges etires + petits carres).
      Fond uni partout ; traits aussi fins que ceux de « Equipe » ;
      chaque trait part et arrive EXACTEMENT sur un angle de carre ;
      aucun carre coupe (dessin calcule par script.js : .svc__tiles). */
html body #services.svc-section { background-color: #0a2050; }
html body #services > .svc__bg {
  background: #0a2050 !important;
  animation: none !important;
  transform: none !important;
  overflow: hidden;
}
html body #services > .svc__bg::before,
html body #services > .svc__bg::after {
  content: none !important;
  background: none !important;
  display: none !important;
}
html body #services > .svc__bg > .svc__tiles {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 2) HERO : titre, description, followers et partenaires descendent.
      Marge du bas = marge du haut du bouton Discord de la navbar
      (valeur mesuree par script.js -> --hero-edge-gap). */
html body #home.hero { --hero-edge-gap: 31px; }
@media (max-width: 600px) {
  html body #home.hero { --hero-edge-gap: 29px; }
}
html body #home.hero > .hero__content { padding-bottom: 0 !important; }
html body #home.hero > .hero__content > .hero__copy-wrap { margin-bottom: var(--hero-edge-gap) !important; }
html body #home.hero > .hero__content .hero__sub-wrap { margin-bottom: 0 !important; }
@media (min-width: 601px) {
  html body #home.hero > .hero__stats { bottom: var(--hero-edge-gap) !important; }
}

/* 3) EQUIPE : « Plusieurs jeux, une équipe. » (titre, description,
      statistiques) remonte un peu vers le titre de section, sans trop
      s'eloigner de « Devenir membre du personnel. ». */
@media (min-width: 1301px) {
  html body #team.team-section .team__content > .team__info {
    position: relative !important;
    top: calc(clamp(48px, 4vw, 64px) - clamp(24px, 3vw, 56px)) !important;
  }
}
/* >>> VELRA-V26 END <<< */


/* 23/10/2026 — Tablette (601-1300px) : charte VELRA STAFF a droite,
   « Les avantages » en bas au centre, disposes comme sur mobile. */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #team .staff-recruit.staff-recruit--v3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }
  html body #team .staff-recruit--v3 > .staff-recruit__copy-shell { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; }
  html body #team .staff-recruit--v3 > .staff-recruit__art {
    grid-column: 2 !important; grid-row: 1 !important;
    justify-self: end !important; align-self: center !important;
    width: min(100%, 420px) !important; margin: 0 !important;
  }
  html body #team .staff-recruit--v3 > .staff-perks {
    grid-column: 1 / -1 !important; grid-row: 2 !important;
    justify-self: center !important; align-items: center !important;
    width: 100% !important; text-align: center !important;
  }
  html body #team .staff-recruit--v3 .staff-perks__title,
  html body #team .staff-recruit--v3 .staff-perks > .staff-banners {
    align-self: center !important; text-align: center !important;
    margin-left: auto !important; margin-right: auto !important;
  }
}

/* 23/10/2026 — FAQ tablette / mobile : 7 questions (la 1re fixe, 6 tirees au hasard). */
@media (max-width: 1300px) {
  html body .faq-section .faq__list--extra { display: flex !important; }
  html body .faq-section .faq__list--extra:not(:has(.faq-item:not(.faq-item--off-sm))) { display: none !important; }
  html body .faq-section .faq-item.faq-item--off-sm { display: none !important; }
  html body .faq-section .faq-item { --faq-i: var(--faq-i-sm, 0) !important; }
}

/* 23/10/2026 — Communaute / Articles, tablette (601-1300px) : la 2e rangee
   horizontale d'articles (cartes 4 et 5) est retiree. */
@media (min-width: 601px) and (max-width: 1300px) {
  html body .actu__grid .actu-card:nth-child(4),
  html body .actu__grid .actu-card:nth-child(5) { display: none !important; }
  html body .actu__grid { grid-template-rows: auto !important; }
}

/* >>> VELRA-V43 START (25/10/2026) <<< */
/* 1) SERVICES : fond des conteneurs SOLIDE et simple (plus de halo, de
      rayures ni de plaques de verre). Les contours restent. */
html body #services .svc-card::before {
  background: #071631 !important;
  background-image: none !important;
}
html body #services .svc-card::after { background-image: none !important; background: none !important; }
html body #services .svc-card__glass { display: none !important; }
/* « Un accompagnement complet… » et « Pour les équipes & structures » :
   rangee moins haute (PC). */
@media (min-width: 1301px) {
  html body #services .svc-card--side2 { aspect-ratio: auto !important; }
  html body #services .svc-card--main,
  html body #services .svc-card--side2 {
    min-height: clamp(240px, 17vw, 320px) !important;
    height: auto !important;
  }
  html body #services .svc-card--main { padding-top: clamp(20px, 1.6vw, 28px) !important; padding-bottom: clamp(20px, 1.6vw, 28px) !important; }
}

/* 2) EQUIPE : haut de section coupe DROIT, bas en PENTE ; plus de traits
      lumineux (haut gauche / bas droit). Services finit droit au-dessus. */
html body #services.svc-section {
  clip-path: polygon(0 var(--team-slope), 100% 0, 100% 100%, 0 100%) !important;
  -webkit-clip-path: polygon(0 var(--team-slope), 100% 0, 100% 100%, 0 100%) !important;
  padding-bottom: var(--space-section) !important;
}
@media (min-width: 1100px) {
  html body #services.svc-section { padding-bottom: clamp(80px, 10vh, 140px) !important; }
}
html body #team.team-section {
  margin-top: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--team-slope)), 0 100%) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--team-slope)), 0 100%) !important;
}
html body #team > .team__edge,
html body #team > .team__edge--top,
html body #team > .team__edge--bottom { display: none !important; }
/* La section suivante passe sous la pente (meme fond, aucun vide). */
html body #eventsPin.events-pin {
  margin-top: calc(-1 * var(--team-slope)) !important;
  padding-top: var(--team-slope) !important;
}

/* 3) EQUIPE : survol = leger zoom sur les cartes Joueur / Manager et sur
      les elements de la charte VELRA STAFF (pieces, graphe, document). */
html body #team .team__composition .roster-card {
  pointer-events: auto;
  transition: scale .28s cubic-bezier(.22, 1, .36, 1);
}
html body #team .team__composition .roster-card:hover { scale: 1.04; z-index: 5; }
html body #team .staff-recruit .v8-staff-part {
  pointer-events: bounding-box;
  transform-box: fill-box;
  transform-origin: center;
  transition: scale .28s cubic-bezier(.22, 1, .36, 1);
  cursor: default;
}
html body #team .staff-recruit .v8-staff-part:hover { scale: 1.06; }
@media (prefers-reduced-motion: reduce) {
  html body #team .team__composition .roster-card,
  html body #team .staff-recruit .v8-staff-part { transition: none; }
}

/* 4) EQUIPE : « Plusieurs jeux, une équipe. » + description + chiffres
      remontent, plus pres du titre de section. */
@media (min-width: 1301px) {
  html body #team.team-section .team__content > .team__info {
    top: calc(clamp(48px, 4vw, 64px) - clamp(24px, 3vw, 56px) - clamp(40px, 4.2vw, 84px)) !important;
  }
}

/* 5) PROCHAINS EVENEMENTS : date plus petite ; logo du jeu, titre et
      vignette tiennent entre le haut et le bas de la date (alignes). */
@media (min-width: 1301px) {
  html body #eventsPin[data-flow] #events .upcoming__list {
    --up-day: clamp(28px, 1.85vw, 36px) !important;
    --up-month: clamp(9px, .58vw, 11px) !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info > strong {
    max-height: calc(var(--up-date-h) - var(--up-info-gap) - var(--up-badge-h)) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__game-icon,
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info {
    align-self: center !important;
    box-sizing: border-box !important;
  }
}
/* >>> VELRA-V43 END <<< */
/* V43b : rangee « Un accompagnement complet… » un peu moins haute (PC). */
@media (min-width: 1301px) {
  html body #services .svc-card--main .svc-card__title--xl { font-size: clamp(24px, 2vw, 36px) !important; line-height: 1.05 !important; }
  html body #services .svc-card--main .svc-pills { margin-top: clamp(10px, .9vw, 16px) !important; }
  html body #services .svc-card--main .svc-card__link { margin-top: clamp(10px, .9vw, 16px) !important; }
}

/* >>> VELRA-V38-SCENE-PAD START (26/10/2026) <<< */
/* Le conteneur de la scene Communaute -> Articles passe sous la pente de
   « Equipe » (padding-top = --team-slope). Ce padding s'AJOUTE a la hauteur
   de la scene (content-box) : la course sticky reste intacte et la scene se
   cale exactement en haut de l'ecran, sous la navbar (script.js lit ce
   padding pour l'ancrage). */
html body #eventsPin.events-pin[data-flow="timed"]:not([data-static="1"]) {
  box-sizing: content-box !important;
}
/* >>> VELRA-V38-SCENE-PAD END <<< */

/* >>> VELRA-V38-SERVICES START (26/10/2026) <<< */
/* ============================================================
   SERVICES (accueil) — v38
   1) Disposition PC conservee en tablette (jusqu'a 1300px) :
      Classe 1 + 2 (2u) | Classe 5 (2u) | Fan session (2u, 2 rangees)
      grande case « Un accompagnement complet » (4u).
   2) Mini cards Fan Session (memes couleurs que la page Services).
   3) Pastilles 01..05 a angles droits (style du site).
   4) Fond : traits / carres proches du fond + gradients diffus.
   ============================================================ */
html body #services .svc-mini--1 { --pk: #8896da; --pk-hi: #b3c4ff; --pk-rgb: 136, 150, 218; --pk-dk2: #1a2150; --pk-dk: #0b0f2c; }
html body #services .svc-mini--2 { --pk: #cf6595; --pk-hi: #ff8fb4; --pk-rgb: 207, 101, 149; --pk-dk2: #3d1733; --pk-dk: #1b0915; }
html body #services .svc-mini--5 { --pk: #5fc195; --pk-hi: #8af2bf; --pk-rgb: 95, 193, 149; --pk-dk2: #133c2f; --pk-dk: #071a13; }

/* ---- 1) Disposition ---- */
@media (min-width: 901px) {
  html body #services .svc__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: clamp(12px, 1.6vw, 24px) !important;
    align-items: stretch !important;
  }
  html body #services .svc-card--classes { grid-column: 1 / span 2 !important; grid-row: 1 !important; }
  html body #services .svc-card--class5  { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
  html body #services .svc-card--fan     { grid-column: 5 / span 2 !important; grid-row: 1 / span 2 !important; }
  html body #services .svc-card--main    { grid-column: 1 / span 4 !important; grid-row: 2 !important; }
  html body #services .svc-card--classes,
  html body #services .svc-card--class5,
  html body #services .svc-card--fan,
  html body #services .svc-card--main {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }
  /* Angles coupes : 4 coins exterieurs + croisement central. */
  html body #services .svc-card--classes { --c-tl: var(--cut); --c-tr: 0px; --c-br: 0px; --c-bl: 0px; }
  html body #services .svc-card--class5  { --c-tl: 0px; --c-tr: 0px; --c-br: var(--cut); --c-bl: 0px; }
  html body #services .svc-card--fan     { --c-tl: 0px; --c-tr: var(--cut); --c-br: var(--cut); --c-bl: 0px; }
  html body #services .svc-card--main    { --c-tl: 0px; --c-tr: var(--cut); --c-br: 0px; --c-bl: var(--cut); }
  html body #services .svc-card--main .svc-card__title--xl { font-size: clamp(22px, 2vw, 36px) !important; }
}
/* Petite tablette (601 - 900px) : 2 colonnes, Fan session + grande case
   sur toute la largeur. */
@media (min-width: 601px) and (max-width: 900px) {
  html body #services .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; }
  html body #services .svc-card--classes,
  html body #services .svc-card--class5 { grid-column: auto !important; grid-row: auto !important; }
  html body #services .svc-card--fan,
  html body #services .svc-card--main { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
html body #services .svc-card--classes,
html body #services .svc-card--class5 { min-height: 0 !important; }

/* ---- 2) Mini cards Fan Session ---- */
html body #services .svc-card--classes { padding: clamp(14px, 1.3vw, 22px) !important; gap: clamp(8px, .7vw, 12px); }
html body #services .svc-classes__kicker { margin: 0 !important; }
html body #services .svc-classes {
  display: flex; flex-direction: column; gap: clamp(8px, .7vw, 12px);
  flex: 1 1 auto; justify-content: center;
}
html body #services .svc-mini,
html body #services .svc-c5 {
  position: relative;
  display: grid;
  align-items: center;
  color: #e6efff;
  text-decoration: none;
  border: 1px solid rgba(var(--pk-rgb), .55);
  background:
    linear-gradient(180deg, rgba(var(--pk-rgb), .30) 0%, rgba(var(--pk-rgb), .08) 55%, transparent 100%),
    linear-gradient(180deg, var(--pk-dk2) 0%, var(--pk-dk) 100%);
  border-radius: 0 !important;
  transition: border-color .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
html body #services .svc-mini {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: clamp(8px, .8vw, 14px);
  padding: clamp(8px, .7vw, 12px) clamp(10px, .9vw, 16px);
}
html body #services .svc-mini:hover,
html body #services .svc-mini:focus-visible,
html body #services .svc-c5:hover,
html body #services .svc-c5:focus-visible {
  border-color: var(--pk-hi);
  outline: none;
}
html body #services .svc-mini:focus-visible,
html body #services .svc-c5:focus-visible { box-shadow: 0 0 0 2px rgba(var(--pk-rgb), .45); }
html body #services .svc-mini__icon {
  width: clamp(30px, 2.6vw, 44px); height: clamp(30px, 2.6vw, 44px);
  object-fit: contain; display: block;
}
html body #services .svc-mini__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body #services .svc-mini__title {
  font-family: 'Bebas Neue', var(--font-display, sans-serif);
  font-size: clamp(15px, 1.25vw, 22px); line-height: 1; letter-spacing: .03em;
  text-transform: uppercase; color: var(--pk-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #services .svc-mini__cls {
  font-family: var(--font-body); font-size: clamp(8px, .55vw, 10px); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(214, 228, 255, .6);
}
html body #services .svc-mini__sessions {
  font-family: 'Bebas Neue', var(--font-display, sans-serif);
  font-size: clamp(12px, .9vw, 16px); letter-spacing: .04em; text-transform: uppercase; color: #eef4ff;
}
html body #services .svc-mini__sessions > b { color: var(--pk-hi); font-weight: 400; }
html body #services .svc-mini__price {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right;
}
html body #services .svc-mini__price > b {
  font-family: 'Bebas Neue', var(--font-display, sans-serif); font-weight: 400;
  font-size: clamp(15px, 1.25vw, 22px); line-height: 1; color: var(--pk-hi); white-space: nowrap;
}
html body #services .svc-mini__price > small {
  font-family: var(--font-body); font-size: clamp(8px, .55vw, 10px); color: rgba(214, 228, 255, .55); white-space: nowrap;
}
/* Ronds user (meme principe que la page Services). */
html body #services .svc-mini__avatars,
html body #services .svc-c5__avatars { display: flex; align-items: flex-start; justify-content: center; }
html body #services .svc-mini__av {
  --av: clamp(34px, 2.8vw, 48px);
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: var(--av);
}
html body #services .svc-mini__av-in {
  position: relative; width: var(--av); height: var(--av);
  border-radius: 50% !important; overflow: hidden;
  display: grid; place-items: center;
  background: var(--pk-dk2);
  box-shadow: inset 0 0 0 2px var(--pk);
  font-family: 'Bebas Neue', var(--font-display, sans-serif);
  font-size: calc(var(--av) * .42); letter-spacing: .04em; color: var(--pk-hi);
  transition: opacity .45s ease;
}
html body #services .svc-mini__av-in > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50% !important; }
html body #services .svc-mini__av-in > svg { width: 52%; height: 52%; stroke: var(--pk-hi); fill: none; stroke-width: 1.6; opacity: .85; }
html body #services .svc-mini__av-name {
  max-width: calc(var(--av) * 1.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body); font-size: clamp(7.5px, .5vw, 9.5px); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pk-hi);
  transition: opacity .45s ease;
}
html body #services .svc-mini__av.is-swap .svc-mini__av-in,
html body #services .svc-mini__av.is-swap .svc-mini__av-name { opacity: 0; }

/* Case Classe 5 : la case entiere est la card du pack. */
html body #services .svc-card--class5 { --glow: 95, 193, 149; padding: 0 !important; }
html body #services .svc-c5 {
  flex: 1 1 auto;
  grid-template-rows: auto 1fr auto;
  align-items: stretch;
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(14px, 1.3vw, 22px);
  border: 0;
  min-height: 100%;
}
html body #services .svc-c5__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, .8vw, 14px);
}
html body #services .svc-c5__title { font-size: clamp(18px, 1.6vw, 28px); }
html body #services .svc-c5__avatars { align-items: center; gap: clamp(10px, 1.4vw, 26px); }
html body #services .svc-c5__avatars .svc-mini__av { --av: clamp(48px, 4.4vw, 76px); }
html body #services .svc-c5__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: clamp(8px, .7vw, 12px); border-top: 1px solid rgba(var(--pk-rgb), .3);
}
html body #services .svc-c5__go {
  font-family: var(--font-body); font-size: clamp(9px, .62vw, 11px); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pk-hi);
}

/* ---- Case fusionnee Fan session ---- */
html body #services a.svc-card--fan { text-decoration: none; color: var(--text); cursor: pointer; justify-content: flex-start; gap: clamp(8px, .8vw, 14px); }
html body #services .svc-card--fan .svc-card__kicker { margin: clamp(12px, 1.2vw, 20px) 0 0 !important; }
html body #services .svc-fan__title { margin: 0 !important; font-size: clamp(18px, 1.5vw, 28px) !important; line-height: 1.1; }
html body #services .svc-fan__text { margin: 0 !important; font-size: clamp(11px, .78vw, 14px) !important; line-height: 1.5; max-width: none !important; }
html body #services .svc-fan__list { list-style: none; margin: clamp(4px, .6vw, 10px) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(8px, .8vw, 14px); }
html body #services .svc-fan__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: clamp(10.5px, .72vw, 13px); line-height: 1.45; color: rgba(207, 226, 255, .72); }
html body #services .svc-fan__item b { display: block; margin-bottom: 2px; font-size: clamp(12px, .9vw, 16px); font-weight: 700; color: #eef4ff; }
html body #services .svc-fan__num {
  display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px;
  border: 1px solid rgba(var(--glow), .45); background: rgba(var(--glow), .1);
  font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .12em; color: rgb(var(--glow));
  border-radius: 0 !important;
}
html body #services .svc-fan__link { margin-top: auto !important; padding-top: clamp(10px, 1vw, 16px); }
html body #services a.svc-card--fan:hover .svc-fan__link,
html body #services a.svc-card--fan:focus-visible .svc-fan__link { color: rgb(var(--glow)); }
html body #services a.svc-card--fan:focus-visible { outline: 2px solid rgba(var(--glow), .7); outline-offset: 2px; }

/* ---- 3) Pastilles a angles droits ---- */
html body #services .svc-pill,
html body #services .svc-pill--solid { border-radius: 0 !important; }

/* ---- Mobile ---- */
@media (max-width: 600px) {
  html body #services .svc-card--classes,
  html body #services .svc-card--class5,
  html body #services .svc-card--fan { min-height: 0 !important; }
  html body #services .svc-mini { grid-template-columns: auto minmax(0, 1fr) auto; }
  html body #services .svc-mini__avatars { display: none; }
  html body #services .svc-mini__title { font-size: 17px; }
  html body #services .svc-mini__price > b { font-size: 17px; }
  html body #services .svc-c5__avatars .svc-mini__av { --av: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #services .svc-mini__av-in,
  html body #services .svc-mini__av-name { transition: none; }
}

/* ---- 4) Fond : gradients diffus par-dessus le motif ---- */
html body section#services.svc-section > .svc__bg::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    radial-gradient(38% 30% at 12% 18%, rgba(60, 120, 230, .22), transparent 70%),
    radial-gradient(34% 34% at 88% 30%, rgba(120, 100, 240, .16), transparent 70%),
    radial-gradient(40% 32% at 70% 86%, rgba(40, 150, 220, .18), transparent 72%),
    radial-gradient(30% 26% at 20% 80%, rgba(80, 110, 230, .14), transparent 70%) !important;
  background-size: auto !important;
}
/* >>> VELRA-V38-SERVICES END <<< */

/* >>> VELRA-V38-SERVICES-FAN-STEPS START <<< */
html body #services .svc-fan__steps {
  list-style: none; margin: clamp(6px, .8vw, 14px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, .6vw, 10px);
}
html body #services .svc-fan__steps > li {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(8px, .8vw, 14px);
  border: 1px solid rgba(var(--glow), .22); background: rgba(var(--glow), .06);
  font-family: var(--font-body); font-size: clamp(9px, .62vw, 11px); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #dbeaff; line-height: 1.3;
}
html body #services .svc-fan__step-n {
  font-family: 'Bebas Neue', var(--font-display, sans-serif); font-size: clamp(18px, 1.5vw, 28px);
  font-weight: 400; letter-spacing: 0; line-height: 1; color: rgb(var(--glow));
}
@media (min-width: 901px) {
  /* Contenu reparti sur toute la hauteur (case sur 2 rangees). */
  html body #services a.svc-card--fan { justify-content: space-between !important; }
  html body #services .svc-fan__list,
  html body #services .svc-fan__link { margin-top: 0 !important; }
  html body #services .svc-fan__steps > li { padding-block: clamp(12px, 1.2vw, 22px); }
}
/* >>> VELRA-V38-SERVICES-FAN-STEPS END <<< */

/* >>> VELRA-V38-TEAM START (26/10/2026) <<< */
/* 1) VELRA STAFF : la rotation d'origine du document et de l'agenda est
      portee par un groupe INTERNE (index.html) ; le zoom de survol reste
      sur le groupe externe -> disposition identique a la reference. */
/* 2) Survol plus doux : Joueur / Manager / elements VELRA STAFF. */
html body #team .team__composition .roster-card {
  transition: scale .7s cubic-bezier(.25, .8, .25, 1), translate .7s cubic-bezier(.25, .8, .25, 1) !important;
}
html body #team .team__composition .roster-card:hover { scale: 1.015 !important; }
html body #team .staff-recruit .v8-staff-part {
  transition: scale .7s cubic-bezier(.25, .8, .25, 1) !important;
}
html body #team .staff-recruit .v8-staff-part:hover { scale: 1.02 !important; }
@media (prefers-reduced-motion: reduce) {
  html body #team .team__composition .roster-card,
  html body #team .staff-recruit .v8-staff-part { transition: none !important; }
}
/* 3) Jonction Services -> Equipe : petit triangle descendant a gauche et
      a droite du haut de « Equipe » ; on y voit la section Services. */
html body #team.team-section {
  --team-notch: clamp(26px, 3.6vw, 72px);
  margin-top: calc(-1 * var(--team-notch)) !important;
  clip-path: polygon(0 var(--team-notch), var(--team-notch) 0, calc(100% - var(--team-notch)) 0, 100% var(--team-notch), 100% calc(100% - var(--team-slope)), 0 100%) !important;
  -webkit-clip-path: polygon(0 var(--team-notch), var(--team-notch) 0, calc(100% - var(--team-notch)) 0, 100% var(--team-notch), 100% calc(100% - var(--team-slope)), 0 100%) !important;
}
/* « Equipe » passe au-dessus du bas de « Services » (z-index 7) pour que
   seuls les 2 triangles laissent voir Services. */
html body #team.team-section { z-index: 8 !important; }
html body #services.svc-section { padding-bottom: calc(var(--space-section) + clamp(26px, 3.6vw, 72px)) !important; }
@media (min-width: 1100px) {
  html body #services.svc-section { padding-bottom: calc(clamp(80px, 10vh, 140px) + clamp(26px, 3.6vw, 72px)) !important; }
}
/* >>> VELRA-V38-TEAM END <<< */

/* >>> VELRA-V38-UPCOMING START (26/10/2026) <<< */
/* Prochains evenements : vignette (type) sous le titre PLUS PETITE ; le
   titre grandit d'autant (--up-title-fs est calcule a partir de la
   hauteur de la date) : il reste cale entre le haut et le bas de la date. */
@media (min-width: 1301px) {
  html body #eventsPin[data-flow] #events .upcoming__list {
    --up-badge-fs: clamp(7.5px, .45vw, 9px) !important;
    --up-badge-py: 1.5px !important;
    --up-info-gap: clamp(2px, .18vw, 4px) !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info .upcoming__type {
    padding: 0 clamp(4px, .32vw, 6px) !important;
    letter-spacing: .1em !important;
  }
}
@media (max-width: 1300px) {
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info .upcoming__type {
    font-size: 7.5px !important;
    line-height: 1.1 !important;
    padding: 1.5px 5px !important;
    letter-spacing: .1em !important;
  }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info > strong {
    font-size: clamp(17px, 1.6vw, 21px) !important;
    line-height: .9 !important;
  }
}
@media (max-width: 600px) {
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info .upcoming__type { font-size: 7px !important; padding: 1px 4px !important; }
  html body #eventsPin[data-flow] #events .upcoming__list .upcoming__item .upcoming__info > strong { font-size: 16.5px !important; }
}
/* >>> VELRA-V38-UPCOMING END <<< */

/* >>> VELRA-V39 START (26/10/2026) <<< */

/* ---- 1) BANDE PARTENAIRES : coupee DROIT (haut et bas) -----------------
      Plus de pente ni de rotation du contenu ; filets d'accent droits. */
html body #partners.partners-band {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  margin-top: 0 !important;
  padding-top: clamp(14px, 1.4vw, 22px) !important;
  padding-bottom: clamp(14px, 1.4vw, 22px) !important;
}
html body #partners.partners-band::before,
html body #partners.partners-band::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  height: 1px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: linear-gradient(90deg, transparent, rgba(94, 170, 255, .45), transparent) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body #partners.partners-band::before { top: 0 !important; bottom: auto !important; }
html body #partners.partners-band::after  { bottom: 0 !important; top: auto !important; }
html body #partners.partners-band > .partners-band__inner {
  transform: none !important;
  rotate: none !important;
  will-change: auto !important;
}

/* ---- 2) SERVICES : haut coupe DROIT (plus de pente) --------------------
      La section ne remonte plus sous la bande / le hero. */
html body #services.svc-section {
  margin-top: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  padding-top: calc(var(--space-section) + var(--team-slope) / 2) !important;
  /* bas : place pour les 2 petits triangles de « Equipe » (2x plus petits) */
  padding-bottom: calc(var(--space-section) + clamp(13px, 1.8vw, 36px)) !important;
}
@media (min-width: 1100px) {
  html body #services.svc-section {
    padding-top: calc(clamp(80px, 10vh, 140px) + var(--team-slope) / 2) !important;
    padding-bottom: calc(clamp(80px, 10vh, 140px) + clamp(13px, 1.8vw, 36px)) !important;
  }
}
@media (min-width: 1300px) {
  html body #services.svc-section {
    padding-top: calc(clamp(48px, 6vh, 84px) + var(--team-slope) / 2) !important;
  }
}

/* ---- 3) SERVICES : case Classe 5 sur le meme fond bleu que les autres --- */
html body #services .svc-card--class5 { --glow: 94, 170, 255 !important; }
html body #services .svc-card--class5 > .svc-c5,
html body #services .svc-card--class5 > .svc-c5:hover,
html body #services .svc-card--class5 > .svc-c5:focus-visible {
  background: transparent !important;
  background-image: none !important;
}

/* ---- 4) SERVICES : ronds user Premium (Classe 1 / Classe 2) alignes
      verticalement : les deux mini cards partagent les memes colonnes
      (icone | texte | ronds | prix), quel que soit la largeur du prix. */
@media (min-width: 601px) {
  html body #services .svc-classes {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-content: center;
  }
  html body #services .svc-classes > .svc-mini {
    grid-column: 1 / -1;
    grid-template-columns: subgrid !important;
  }
  html body #services .svc-classes > .svc-mini > .svc-mini__avatars { justify-self: center; }
  html body #services .svc-classes > .svc-mini > .svc-mini__price { justify-self: end; }
}

/* ---- 5) SERVICES : case « Joue et progresse avec les meilleurs. »
      - plus de 01 / 02 (joueurs / equipes & structures) ;
      - titre en MAJUSCULES et centre, description centree ;
      - bouton « Decouvrir » en bas au centre -> section Fan session. */
html body #services .svc-card--fan {
  color: var(--text);
  justify-content: flex-start;
  gap: clamp(8px, .8vw, 14px);
}
@media (min-width: 901px) {
  html body #services .svc-card--fan { justify-content: space-between !important; }
}
html body #services .svc-card--fan .svc-card__kicker,
html body #services .svc-card--fan .svc-fan__title,
html body #services .svc-card--fan .svc-fan__text {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body #services .svc-card--fan .svc-fan__title { text-transform: uppercase !important; letter-spacing: .02em; }
html body #services .svc-card--fan .svc-fan__list,
html body #services .svc-card--fan .svc-fan__link { display: none !important; }
html body #services .svc-fan__cta-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding-top: clamp(10px, 1vw, 16px);
}
html body #services .svc-fan__cta-wrap > .svc-fan__cta { margin: 0 !important; }

/* ---- 6) EQUIPE -----------------------------------------------------------
      - les 2 triangles coupes (haut gauche / haut droit) : 2x plus petits ;
      - moins de marge entre le haut de la section et le titre ;
      - le bas de la section (pente) ne passe plus sur les elements :
        hauteur calculee par script.js (initTeamFit, pente comprise). */
html body #team.team-section { --team-notch: clamp(13px, 1.8vw, 36px) !important; }
@media (min-width: 601px) {
  html body #team.team-section {
    padding-top: calc(var(--team-notch) + clamp(28px, 2.6vw, 52px)) !important;
  }
}
/* PC : cartes Joueur / Manager plus hautes, charte VELRA STAFF juste
   dessous sans chevauchement ; « Plusieurs jeux, une equipe. » centre
   verticalement sur les cartes (decalage --team-info-shift mesure par
   script.js). */
@media (min-width: 1301px) {
  html body #team .team__composition { top: calc(-1 * clamp(6px, .6vw, 12px)) !important; }
  html body #team .staff-recruit.staff-recruit--v3 { margin-top: 0 !important; }
  html body #team.team-section .team__content > .team__info { translate: 0 var(--team-info-shift, 0px); }
}

/* ---- 7) PAGE COMMUNAUTE : concept de l'evenement choisi -----------------
      Arrivee depuis « concept de l'evenement » (accueil) : la case de
      l'evenement s'affiche en tete de la section Concept et la carte du
      concept lie est mise en avant (components.js > initConceptFeed). */
.velra-concept-event {
  --vce-rgb: 94, 170, 255;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  padding: clamp(12px, 1.2vw, 20px) clamp(14px, 1.6vw, 26px);
  background: linear-gradient(180deg, rgba(var(--vce-rgb), .16) 0%, rgba(var(--vce-rgb), .05) 100%), #071631;
  border: 1px solid rgba(var(--vce-rgb), .55);
  color: #e6f1ff;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  animation: velraConceptIn .6s cubic-bezier(.22, 1, .36, 1) both;
}
.velra-concept-event[data-type="tournoi"] { --vce-rgb: 94, 170, 255; }
.velra-concept-event[data-type="event"] { --vce-rgb: 167, 139, 250; }
.velra-concept-event[data-type="concours"] { --vce-rgb: 255, 107, 107; }
.velra-concept-event__date {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-family: 'Bebas Neue', var(--font-display, sans-serif);
}
.velra-concept-event__day { font-size: clamp(30px, 2.4vw, 44px); color: rgb(var(--vce-rgb)); }
.velra-concept-event__month { font-size: clamp(10px, .7vw, 12px); letter-spacing: .14em; color: rgba(214, 228, 255, .7); }
.velra-concept-event__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.velra-concept-event__kicker {
  font-family: var(--font-body, sans-serif); font-size: clamp(9px, .6vw, 11px); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--vce-rgb));
}
.velra-concept-event__title {
  margin: 0; font-family: 'Bebas Neue', var(--font-display, sans-serif); font-weight: 400;
  font-size: clamp(20px, 1.7vw, 30px); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.velra-concept-event__meta { font-size: clamp(11px, .78vw, 13px); color: rgba(207, 226, 255, .72); }
.velra-concept-event__join {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid rgba(var(--vce-rgb), .7);
  background: rgba(var(--vce-rgb), .14); color: #eef4ff; text-decoration: none;
  font-family: var(--font-body, sans-serif); font-size: clamp(10px, .7vw, 12px); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .25s ease, border-color .25s ease;
}
.velra-concept-event__join:hover,
.velra-concept-event__join:focus-visible { background: rgba(var(--vce-rgb), .3); border-color: rgb(var(--vce-rgb)); outline: none; }
@media (max-width: 600px) {
  .velra-concept-event { grid-template-columns: auto minmax(0, 1fr); }
  .velra-concept-event__join { grid-column: 1 / -1; justify-content: center; }
}
.sv-concept__item.is-velra-focus {
  outline: 2px solid rgba(94, 170, 255, .9) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(94, 170, 255, .16), 0 18px 40px rgba(5, 15, 40, .45) !important;
  animation: velraConceptPulse 1.6s ease-out 2;
}
@keyframes velraConceptIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes velraConceptPulse {
  0% { box-shadow: 0 0 0 0 rgba(94, 170, 255, .55), 0 18px 40px rgba(5, 15, 40, .45); }
  100% { box-shadow: 0 0 0 14px rgba(94, 170, 255, 0), 0 18px 40px rgba(5, 15, 40, .45); }
}

/* ---- 8) PAGE SERVICES : classe choisie depuis l'accueil ---------------- */
.velra-deeplink-focus {
  outline: 2px solid rgba(94, 170, 255, .9) !important;
  outline-offset: 3px;
  animation: velraConceptPulse 1.6s ease-out 2;
}
@media (prefers-reduced-motion: reduce) {
  .velra-concept-event,
  .sv-concept__item.is-velra-focus,
  .velra-deeplink-focus { animation: none !important; }
}
/* >>> VELRA-V39 END <<< */

/* >>> VELRA-V44 START (26/10/2026) <<< */
/* SERVICES (accueil) : « Fan session · Premium » centre dans la case
   Premium ; plus de « @velra » / « velra.gg » dans les cases ; bouton
   « Decouvrir » centre a l'horizontale ET a la verticale entre les
   elements de la case et le bas de la case. */
html body #services .svc-classes__kicker,
html body #services .svc-card--classes .svc-card__kicker {
  text-align: center !important;
  align-self: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}
html body #services .svc-card__meta { display: none !important; }
html body #services .svc-card--fan {
  padding-bottom: 0 !important;
  justify-content: flex-start !important;
}
html body #services .svc-card--fan > .svc-fan__cta-wrap {
  flex: 1 1 auto;
  min-height: clamp(76px, 6vw, 112px);
  margin-top: calc(-1 * clamp(8px, .8vw, 14px));   /* annule le gap : milieu exact */
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* >>> VELRA-V44 END <<< */

/* >>> VELRA-V45 START (26/10/2026) <<< */
/* EQUIPE (PC) : « Devenir membre du personnel. », icone VELRA STAFF et
   avantages descendent un peu (espace avec les cartes Joueur / Manager) ;
   le titre du personnel est centre sur l'icone (--staff-copy-shift,
   script.js). */
@media (min-width: 1301px) {
  html body #team .staff-recruit.staff-recruit--v3 { margin-top: clamp(18px, 1.6vw, 32px) !important; }
  html body #team .staff-recruit--v3 > .staff-recruit__copy-shell { translate: 0 var(--staff-copy-shift, 0px); }
}
/* >>> VELRA-V45 END <<< */

/* >>> VELRA-V46 START (26/10/2026) <<< */
/* ---- SERVICES (accueil) : carte « Un accompagnement complet » -------- */
html body #services .svc-card--main { position: relative; }
html body #services .svc-card--main .svc-card__title { text-transform: uppercase !important; }
html body #services .svc-card--main .svc-card__main-body { z-index: 2; }
html body #services .svc-card--main .svc-card__title,
html body #services .svc-card--main .svc-pills { max-width: min(66%, 640px); }
/* icone simple a droite (barres isometriques en escalier) */
html body #services .svc-card--main > svg.svc-main-icon {
  position: absolute !important; z-index: 1 !important; margin: 0 !important;
  right: clamp(28px, 3.4vw, 64px);
  top: clamp(50px, 3.8vw, 64px);
  height: calc(100% - clamp(50px, 3.8vw, 64px) - clamp(54px, 4.2vw, 70px)) !important;
  max-height: 220px;
  width: auto !important;
  aspect-ratio: 200 / 224;
  transform: none !important;
  pointer-events: none;
  overflow: visible;
}
html body #services .svc-main-icon .l { fill: #2c63c8; }
html body #services .svc-main-icon .r { fill: #18408c; }
html body #services .svc-main-icon .t { fill: #6fb4ff; }
html body #services .svc-main-icon__bar {
  animation: svcBarIn .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(.12s * (3 - var(--i, 0)) + .2s);
  transform-box: fill-box; transform-origin: 50% 100%;
}
@keyframes svcBarIn { from { opacity: 0; transform: translateY(14px) scaleY(.6); } to { opacity: 1; transform: none; } }
/* vignette temporaire « Bientot » */
html body #services .svc-card--main > .svc-soon {
  position: absolute !important; z-index: 3 !important; margin: 0 !important; width: auto !important; left: auto !important; bottom: auto !important;
  top: clamp(14px, 1.4vw, 22px); right: clamp(14px, 1.4vw, 22px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(167, 139, 250, .14);
  border: 1px solid rgba(167, 139, 250, .55);
  color: #e3dbff;
  font-family: 'Barlow', sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  pointer-events: none;
}
html body #services .svc-soon__dot {
  width: 7px; height: 7px; border-radius: 50% !important;
  background: #a78bfa; box-shadow: 0 0 0 0 rgba(167, 139, 250, .6);
  animation: svcSoonPulse 1.8s ease-out infinite;
}
@keyframes svcSoonPulse { 0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, .6); } 100% { box-shadow: 0 0 0 9px rgba(167, 139, 250, 0); } }
/* liens sans fleche, en bas a droite, comme « Voir les tournois » */
html body #services .svc-card--main .svc-card__link {
  position: absolute !important; z-index: 3;
  right: clamp(22px, 2.2vw, 34px); bottom: clamp(16px, 1.6vw, 24px);
  margin: 0 !important; padding: 0 !important;
  font-family: 'Barlow', sans-serif !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: rgb(167, 139, 250) !important;
  text-decoration: none;
}
html body #services .svc-card--main .svc-card__link::before,
html body #services .svc-card--main .svc-card__link::after { content: none !important; display: none !important; }
html body #services .svc-card--main .svc-card__link:hover { color: #cbbcff !important; }
html body #services .svc-c5__go {
  margin-left: auto;
  font-family: 'Barlow', sans-serif !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
}
html body #services .svc-c5__go::before,
html body #services .svc-c5__go::after { content: none !important; display: none !important; }
@media (max-width: 900px) {
  html body #services .svc-card--main .svc-card__title,
  html body #services .svc-card--main .svc-pills { max-width: none; }
  html body #services .svc-card--main .svc-card__main-body { padding-bottom: 28px; }
  html body #services .svc-card--main > svg.svc-main-icon { height: 84px !important; top: auto; bottom: 44px; opacity: .5; }
}

/* ---- SERVICES (accueil) : bouton « Decouvrir » simple ---------------- */
html body #services .svc-fan__cta--simple {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 30px;
  background: #5eaaff; color: #04122c;
  border: 1px solid #5eaaff;
  font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
html body #services .svc-fan__cta--simple:hover,
html body #services .svc-fan__cta--simple:focus-visible { background: transparent; color: #e6f1ff; outline: none; }

/* ---- SERVICES (accueil) : etapes 1-2-3 (stepper anime) --------------- */
html body #services .svc-stepper {
  --svc-dot: 30px;
  --svc-step-p: 0;
  position: relative;
  margin-top: clamp(8px, 1vw, 16px);
}
html body #services .svc-stepper__track {
  position: absolute; left: 16.666%; right: 16.666%;
  top: calc(var(--svc-dot) / 2 - 1px); height: 2px;
  background: rgba(94, 170, 255, .2);
}
html body #services .svc-stepper__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--svc-step-p) * 100%);
  background: linear-gradient(90deg, #5eaaff, #8ec3ff);
  transition: width .8s cubic-bezier(.65, 0, .35, 1);
}
html body #services .svc-stepper.is-resetting .svc-stepper__fill { transition-duration: .2s; }
html body #services .svc-stepper__list {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
html body #services .svc-stepper__step {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  min-width: 0;
}
html body #services .svc-stepper__dot {
  position: relative; display: grid; place-items: center;
  width: var(--svc-dot); height: var(--svc-dot); border-radius: 50% !important;
  margin-bottom: 8px;
  background: #0b1d42; border: 2px solid rgba(94, 170, 255, .28);
  color: rgba(206, 224, 255, .55);
  font-family: 'Bebas Neue', sans-serif; font-size: 15px; line-height: 1;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease;
}
html body #services .svc-stepper__check {
  position: absolute; width: 15px; height: 15px;
  fill: none; stroke: #04122c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; opacity: 0;
  transition: stroke-dashoffset .35s ease .1s, opacity .2s ease;
}
html body #services .svc-stepper__step.is-current .svc-stepper__dot {
  border-color: #5eaaff; color: #e6f1ff; transform: scale(1.08);
  box-shadow: 0 0 0 5px rgba(94, 170, 255, .16);
}
html body #services .svc-stepper__step.is-done .svc-stepper__dot { background: #5eaaff; border-color: #5eaaff; color: transparent; }
html body #services .svc-stepper__step.is-done .svc-stepper__check { stroke-dashoffset: 0; opacity: 1; }
html body #services .svc-stepper__k {
  font-family: 'Barlow', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(206, 224, 255, .55);
}
html body #services .svc-stepper__t {
  font-family: 'Barlow', sans-serif; font-size: clamp(11px, .78vw, 13px); font-weight: 700;
  color: #e6f1ff; line-height: 1.2;
}
html body #services .svc-stepper__s {
  font-family: 'Barlow', sans-serif; font-size: 10.5px; font-weight: 600;
  color: rgba(206, 224, 255, .45); transition: color .3s ease;
}
html body #services .svc-stepper__step.is-done .svc-stepper__s { color: #6ee7a8; }
html body #services .svc-stepper__step.is-current .svc-stepper__s { color: #8ec3ff; }
@media (prefers-reduced-motion: reduce) {
  html body #services .svc-stepper__fill,
  html body #services .svc-stepper__dot,
  html body #services .svc-main-icon__bar,
  html body #services .svc-soon__dot { transition: none !important; animation: none !important; }
}

/* ---- FOOTER : le trait du haut reste le meme quand le footer monte
      (ouverture d'un tiroir) : il suit le nouveau bord haut. */
html body .footer.velra-footer-upward::before {
  /* v47 : 1px de plus vers le haut -> plus de ligne noire (fond du body)
     entre la page remontee et le footer ; le trait garde sa couleur. */
  top: calc(-1 * var(--footer-upspace, 0px) - 1px) !important;
  border-top: 2px solid rgba(94, 170, 255, .1) !important;
  box-sizing: border-box;
}

/* >>> VELRA-V46 END <<< */

/* >>> VELRA-V47 START (26/10/2026) <<< */
/* ---- ARTICLES + CREATEURS : fonds UNIS, sans aucun trait -------------
      Deux couleurs pleines tres proches ; le passage Articles -> Createurs
      se fond sur 200px (pas de coupure). Les fleches pleines (30 %) sont
      dessinees par script.js (VELRA LINES) sur les deux sections. */
html body #eventsPin,
html body #eventsPin > #events.events-section { background-color: #0b1b3d !important; background-image: none !important; }
html body #eventsPin #actu::before,
html body #eventsPin #actu::after,
html body #eventsPin #actu > .actu__lines-bg { display: none !important; }
html body #createurs.creators-section {
  background-color: #0a1837 !important;
  background-image: linear-gradient(180deg, #0b1b3d 0, #0a1837 200px) !important;
}
html body #createurs.creators-section::before,
html body #createurs.creators-section::after { background-image: none !important; }

/* ---- EQUIPE (PC) : bloc « Devenir membre du personnel. » + icone VELRA
      STAFF + avantages un peu plus bas (espace avec les cartes Joueur). */
@media (min-width: 1301px) {
  html body #team .staff-recruit.staff-recruit--v3 { margin-top: clamp(44px, 3.4vw, 72px) !important; }
}
/* >>> VELRA-V47 END <<< */

/* >>> VELRA-V48 START (26/10/2026) <<< */
/* ---- BANDE PARTENAIRES : plus de deplacement ; chaque emplacement a une
      largeur FIXE et change de marque sur place (script.js, v48). */
html body #partners .pb-slot { animation: none !important; transform: none !important; }
html body #partners .partners-band__track:not(.partners-band__track--present) > .pb-slot {
  flex: 0 0 auto; width: clamp(66px, 6vw, 96px);
}
html body #partners .pb-slot { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
html body #partners .pb-swap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; will-change: transform; }
html body #partners .pb-swap--out { position: relative; }
html body #partners .pb-swap--in { position: absolute; inset: 0; transform: translateY(115%); }

/* ---- SERVICES (accueil) : « Bientot » en texte simple (sans vignette) */
html body #services .svc-card--main > .svc-soon {
  background: none !important; border: 0 !important; padding: 0 !important;
  box-shadow: none !important; clip-path: none !important;
  color: #c9b8ff;
}

/* ---- Icone a 4 paliers : couleurs proches du conteneur, centree entre
      les elements de gauche et le bord droit (--svc-icon-left, script.js) */
html body #services .svc-main-icon .l { fill: #183a7a; }
html body #services .svc-main-icon .r { fill: #10295c; }
html body #services .svc-main-icon .t { fill: #2b5cab; }
@media (min-width: 901px) {
  html body #services .svc-card--main > svg.svc-main-icon[style*="--svc-icon-left"] {
    left: var(--svc-icon-left) !important; right: auto !important;
  }
  /* « Decouvrir nos services » : meme place que « Voir les tournois » */
  /* (le lien est dans .svc-card__main-body, decale de 34px / 28px du bord
     de la carte : 56px / 18px depuis le bord de la carte) */
  html body #services .svc-card--main .svc-card__link { right: 22px !important; bottom: -10px !important; }
}

/* ---- Petite description sous « Un accompagnement complet » */
html body #services .svc-card--main .svc-main__desc {
  max-width: min(66%, 560px);
  margin: 10px 0 14px !important;
  font-size: clamp(12px, .85vw, 14px); line-height: 1.5;
  color: rgba(206, 224, 255, .7);
}
@media (max-width: 900px) { html body #services .svc-card--main .svc-main__desc { max-width: none; } }

/* ---- Etapes 1-2-3 : CARRES, numero au centre ; etape 3 terminee =
      manette OU bulle de message (pleine, sans trou). */
html body #services .svc-stepper__dot { border-radius: 0 !important; }
html body #services .svc-stepper__step.is-current .svc-stepper__dot { box-shadow: 0 0 0 4px rgba(94, 170, 255, .16); }
html body #services .svc-stepper__n { position: relative; z-index: 1; transition: opacity .2s ease; }
html body #services .svc-stepper__step.is-done .svc-stepper__n { opacity: 0; }
html body #services .svc-stepper__ico {
  position: absolute; width: 17px; height: 17px;
  fill: #04122c; stroke: none;
  opacity: 0; transform: scale(.4);
  transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
html body #services .svc-stepper__dot--final .svc-stepper__check { display: none !important; }
html body #services .svc-stepper[data-final="pad"] .svc-stepper__step.is-done .svc-stepper__ico--pad,
html body #services .svc-stepper[data-final="chat"] .svc-stepper__step.is-done .svc-stepper__ico--chat { opacity: 1; transform: none; }
/* >>> VELRA-V48 END <<< */

/* v48 : mobile / tablette — l'icone ne touche plus « Decouvrir nos services » */
@media (max-width: 900px) {
  html body #services .svc-card--main > svg.svc-main-icon { bottom: 58px !important; }
}

/* ============================================================
   28/10/2026 (v50) : scene Communaute -> Articles sur ecrans peu hauts.
   La scene tient dans l'ecran (sous la navbar) : la liste des prochains
   evenements defile dans son cadre au lieu de pousser la scene.
   ============================================================ */
html body #eventsPin[data-flow="timed"][data-fit="tight"] #events .upcoming__list {
  overflow-y: auto !important; overflow-x: hidden !important;
  grid-auto-rows: var(--scene-row-min, 48px) !important;
  overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: rgba(94, 170, 255, .45) transparent;
}
html body #eventsPin[data-flow="timed"][data-fit="tight"] #events .upcoming__list::-webkit-scrollbar { width: 6px; }
html body #eventsPin[data-flow="timed"][data-fit="tight"] #events .upcoming__list::-webkit-scrollbar-thumb { background: rgba(94, 170, 255, .45); }

/* 28/10/2026 (v50) : titres « Services » et « Equipe » = meme taille que
   les autres titres de section (valeur relue sur « Nos createurs de
   contenu » par script.js), sur PC, tablette et mobile. */
html body #services .svc__header > .section-title {
  font-size: var(--svc-title-fs, clamp(32px, 3.8vw, 64px)) !important;
}
html body #team .team__header > .section-title {
  font-size: var(--team-title-fs, clamp(32px, 3.8vw, 64px)) !important;
  letter-spacing: var(--team-title-ls, .01em) !important;
  line-height: var(--team-title-lh, 1.05) !important;
}
html body #team .team__header > .section-title * { font-size: inherit !important; }

/* 28/10/2026 (v50) : Equipe (tablette) - « VELRA / STAFF » sur l'axe des
   cards joueurs / managers (decalage mesure par script.js), un peu plus grand.
   « scale » (et non « transform ») est mesure apres coup : le centre ne bouge pas. */
@media (min-width: 601px) and (max-width: 1300px) {
  html body #team .staff-recruit__art.v50-staff-axis {
    translate: var(--v50-staff-dx, 0px) 0;
    scale: 1.24;
    transform-origin: 50% 50%;
  }
}

/* >>> VELRA-V52 (29/10/2026) <<<
   « Prochains evenements » : plus aucune barre de defilement (la liste
   reste defilable au doigt / a la molette si elle est plafonnee). */
html body .upcoming__list,
html body #eventsPin #events .upcoming__list,
html body #eventsPin[data-flow="timed"][data-fit="tight"] #events .upcoming__list {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html body .upcoming__list::-webkit-scrollbar,
html body #eventsPin #events .upcoming__list::-webkit-scrollbar,
html body #eventsPin[data-flow="timed"][data-fit="tight"] #events .upcoming__list::-webkit-scrollbar {
  display: none !important; width: 0 !important; height: 0 !important; background: transparent !important;
}
/* >>> VELRA-V52 END <<< */

/* v53 : la section Equipe ne passe plus PAR-DESSUS la section Services
   au defilement : plus de chevauchement (marge negative) ni de pente en
   haut, elle suit simplement Services et monte normalement avec la page.
   La pente du bas (vers Communaute) est conservee. */
html body #services + #team.team-section,
html body #partners + #team.team-section {
  margin-top: 0 !important;
  z-index: 5 !important;
  padding-top: var(--space-section) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--team-slope)), 0 100%) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--team-slope)), 0 100%) !important;
}
@media (min-width: 1100px) {
  html body #services + #team.team-section,
  html body #partners + #team.team-section { padding-top: clamp(80px, 10vh, 140px) !important; }
}
@media (min-width: 1300px) {
  html body #services + #team.team-section,
  html body #partners + #team.team-section { padding-top: clamp(40px, 5vh, 72px) !important; }
}
html body #services.svc-section { position: relative; z-index: 6; }


/* >>> VELRA-V57 START (31/10/2026) <<< */
/* ---- 1) Services (accueil) : titres en Bebas Neue. */
html body #services .svc-card--fan .svc-fan__title,
html body #services .svc-card--main .svc-card__title--xl {
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
}
/* ---- 2) Conteneur « Nos services » : bleu comme les autres cartes. */
html body #services .svc-card--main { --glow: 94, 170, 255 !important; }
html body #services .svc-card--main > .svc-soon { color: #b9dcff !important; }
html body #services .svc-card--main .svc-soon__dot { background: #5eaaff !important; animation-name: svcSoonPulseBlue !important; }
@keyframes svcSoonPulseBlue { 0% { box-shadow: 0 0 0 0 rgba(94, 170, 255, .6); } 100% { box-shadow: 0 0 0 9px rgba(94, 170, 255, 0); } }
html body #services .svc-card--main .svc-card__link { color: #5eaaff !important; }
html body #services .svc-card--main .svc-card__link:hover,
html body #services .svc-card--main .svc-card__link:focus-visible { color: #b9dcff !important; }
/* ---- 3) Communaute : « Voir les tournois », « S'inscrire », « Découvrir
      les défis » : meme survol que « Découvrir nos services ». */
html body #services .svc-card--main .svc-card__link,
html body .event-card .event-card__link,
html body #eventsPin[data-flow] #events .events__grid > .event-card > .event-card__link { transition: color .2s ease !important; }
html body .event-card .event-card__link:hover,
html body .event-card .event-card__link:focus-visible,
html body #eventsPin[data-flow] #events .events__grid > .event-card > .event-card__link:hover,
html body #eventsPin[data-flow] #events .events__grid > .event-card > .event-card__link:focus-visible,
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card > .event-card__link:hover,
html body #eventsPin[data-flow="timed"] #events .events__grid > .event-card > .event-card__link:focus-visible { color: #cbbcff !important; }
/* ---- 4) Etape 3 : 3e icone « progression » ; retour en arriere du trait
      etape par etape (3 -> 2 puis 2 -> 1). */
html body #services .svc-stepper[data-final="prog"] .svc-stepper__step.is-done .svc-stepper__ico--prog { opacity: 1; transform: none; }
html body #services .svc-stepper.is-resetting .svc-stepper__fill {
  transition: width .6s cubic-bezier(.65, 0, .35, 1) !important;
}
/* >>> VELRA-V57 END <<< */

/* >>> VELRA-V58 START (31/10/2026) <<< */
/* ---- 1) Services (accueil) : plus d'effet « scale » sur la carte
      « Découvrir nos services » (pastille « Bientôt » qui pulsait, barres
      qui s'etiraient) : la pastille est fixe, les barres montent en fondu. */
html body #services .svc-card--main .svc-soon__dot,
html body #services .svc-soon__dot { animation: none !important; box-shadow: none !important; }
@keyframes svcBarIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- 2) Services (accueil) : les conteneurs apparaissent en SCALE,
      belle courbe de vitesse, decales (--d). */
html body #services .svc-card.reveal.visible {
  animation: svcCardScaleIn .95s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards !important;
  transform-origin: 50% 60%;
}
@keyframes svcCardScaleIn {
  from { opacity: 0; transform: scale(.86); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body #services .svc-card.reveal.visible { animation: none !important; }
}

/* ---- 3) Equipe : un petit triangle coupe tout a gauche et tout a droite
      du haut de la section ; on y voit la section Services (au-dessus).
      Services reste PAR-DESSUS Equipe (pas de chevauchement au defilement) :
      c'est le bas de Services qui ne garde que ces 2 triangles. */
html body #services.svc-section,
html body #services + #team.team-section { --v58-notch: clamp(20px, 3.4vw, 68px); }
html body #services.svc-section {
  margin-bottom: calc(-1 * var(--v58-notch)) !important;
  padding-bottom: calc(var(--space-section) + clamp(13px, 1.8vw, 36px) + var(--v58-notch)) !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--v58-notch)) calc(100% - var(--v58-notch)), var(--v58-notch) calc(100% - var(--v58-notch)), 0 100%) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--v58-notch)) calc(100% - var(--v58-notch)), var(--v58-notch) calc(100% - var(--v58-notch)), 0 100%) !important;
}

/* Les 2 triangles coupes en haut d'Equipe : un fin trait lumineux suit la
   decoupe pour qu'on les voie bien (le fond de Services y reste visible). */
html body #services.svc-section::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: var(--v58-notch) !important;
  pointer-events: none !important;
  z-index: 4 !important;
  background:
    linear-gradient(to bottom right, rgba(94, 170, 255, .10) calc(50% - 1.5px), rgba(120, 186, 255, .75) calc(50% - .5px), rgba(120, 186, 255, .75) calc(50% + .5px), transparent calc(50% + 1.5px)) left bottom / var(--v58-notch) var(--v58-notch) no-repeat,
    linear-gradient(to bottom left, rgba(94, 170, 255, .10) calc(50% - 1.5px), rgba(120, 186, 255, .75) calc(50% - .5px), rgba(120, 186, 255, .75) calc(50% + .5px), transparent calc(50% + 1.5px)) right bottom / var(--v58-notch) var(--v58-notch) no-repeat !important;
}

/* ---- 4) Createurs : la grande vignette arrive de la GAUCHE, les 4 petites
      (YouTube) de la DROITE une par une (colonne de gauche puis colonne de
      droite) ; les vignettes TikTok montent du BAS, chacune leur tour de
      gauche a droite. Une seule fois (pas a chaque rotation des videos). */
html body .creators-section .creators__showcase { opacity: 1 !important; translate: none !important; transition: none !important; }
html body .creators-section:not(.cv-play):not(.cv-done) .creators__showcase .creator-video > *,
html body .creators-section:not(.cv-play):not(.cv-done) .creators__shorts-track .short-card { opacity: 0; }
html body .creators-section.cv-play:not(.cv-done) .creator-video--big > * { animation: cvInLeft 1s cubic-bezier(.16, 1, .3, 1) .05s both; }
html body .creators-section.cv-play:not(.cv-done) .creator-video--s1 > * { animation: cvInRight .9s cubic-bezier(.16, 1, .3, 1) .28s both; }
html body .creators-section.cv-play:not(.cv-done) .creator-video--s3 > * { animation: cvInRight .9s cubic-bezier(.16, 1, .3, 1) .42s both; }
html body .creators-section.cv-play:not(.cv-done) .creator-video--s2 > * { animation: cvInRight .9s cubic-bezier(.16, 1, .3, 1) .56s both; }
html body .creators-section.cv-play:not(.cv-done) .creator-video--s4 > * { animation: cvInRight .9s cubic-bezier(.16, 1, .3, 1) .70s both; }
html body .creators-section.cv-play:not(.cv-done) .creators__shorts-track .short-card {
  animation: cvInUp .85s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(.8s + min(var(--cv-i, 0), 9) * 110ms);
}
@keyframes cvInLeft { from { opacity: 0; translate: -70px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes cvInRight { from { opacity: 0; translate: 70px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes cvInUp { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  html body .creators-section .creators__showcase .creator-video > *,
  html body .creators-section .creators__shorts-track .short-card { animation: none !important; opacity: 1 !important; }
}

/* ---- 5) FAQ : chaque question s'OUVRE depuis son centre (belle courbe),
      puis son contenu apparait. La 1re (ouverte par defaut) apparait en
      scale simple. */
html body .faq-section.faq-js .faq-item { translate: none !important; }
html body .faq-section.faq-js:not(.is-visible) .faq-item { opacity: 0; }
html body .faq-section.faq-js:not(.is-visible) .faq-item__btn > *,
html body .faq-section.faq-js:not(.is-visible) .faq-item__panel-inner { opacity: 0; }
html body .faq-section.faq-js.is-visible .faq-item {
  animation: faqOpenCenter .85s cubic-bezier(.77, 0, .18, 1) both;
  animation-delay: calc(var(--faq-i, 0) * 75ms);
}
html body .faq-section.faq-js.is-visible .faq-item .faq-item__btn > *,
html body .faq-section.faq-js.is-visible .faq-item .faq-item__panel-inner {
  animation: faqContentIn .55s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--faq-i, 0) * 75ms + .62s);
}
html body .faq-section.faq-js.is-visible .faq-item[data-testid="faq-item-1"] {
  animation: faqScaleIn .8s cubic-bezier(.16, 1, .3, 1) both;
}
html body .faq-section.faq-js.is-visible .faq-item[data-testid="faq-item-1"] .faq-item__btn > *,
html body .faq-section.faq-js.is-visible .faq-item[data-testid="faq-item-1"] .faq-item__panel-inner { animation-delay: .35s; }
@keyframes faqOpenCenter {
  from { opacity: 1; clip-path: inset(-30px 50% -30px 50%); }
  to { opacity: 1; clip-path: inset(-30px -30px -30px -30px); }
}
@keyframes faqScaleIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes faqContentIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  html body .faq-section.faq-js .faq-item,
  html body .faq-section.faq-js .faq-item .faq-item__btn > *,
  html body .faq-section.faq-js .faq-item .faq-item__panel-inner { animation: none !important; opacity: 1 !important; }
}
/* >>> VELRA-V58 END <<< */

/* >>> VELRA-V59 START (31/10/2026) <<< */
/* ---- 1) Equipe : les 2 angles coupes en haut sont 2x plus petits ; plus
      de trait bleu ni de voile : on voit directement le fond de la section
      Services (au-dessus). */
html body #services.svc-section,
html body #services + #team.team-section { --v58-notch: clamp(10px, 1.7vw, 34px) !important; }
html body #services.svc-section::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ---- 2) Services : bouton « Services » du bas (cache sur PC). */
html body #services .svc__cta-bottom { display: none; }

/* ---- 3) Tablette (<= 1300px) + mobile (<= 600px) */
@media (max-width: 1300px) {
  /* Bouton « Services » : retire de l'en-tete, affiche en bas. */
  html body #services .svc__header > .svc__cta { display: none !important; }
  html body #services .svc__header {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" !important;
  }
  html body #services .svc__cta-bottom {
    display: flex;
    justify-content: center;
    margin-top: clamp(24px, 4vw, 40px);
  }
  html body #services .svc__cta-bottom > .svc__cta { clip-path: none; border-radius: 0; }

  /* Texte « Un accompagnement complet, du joueur a la structure. » masque. */
  html body #services .svc-card--main .svc-card__title--xl { display: none !important; }
  html body #services .svc-card--main .svc-main__desc { margin-top: clamp(8px, 1vw, 12px) !important; }

  /* Premium (Classe 1 / Classe 2) + Pack decouverte : UN SEUL bloc,
     Premium en haut, Pack decouverte juste en dessous. */
  html body #services .svc__grid {
    --svc-gap: clamp(12px, 1.6vw, 20px);
    gap: var(--svc-gap) !important;
  }
  html body #services .svc-card--class5 {
    margin-top: calc(-1 * var(--svc-gap)) !important;
    --d: .05s !important;
  }
  /* Angles coupes : haut gauche du bloc (Premium) et bas droit (Pack). */
  html body #services .svc-card--classes { --c-tl: var(--cut) !important; --c-tr: 0px !important; --c-br: 0px !important; --c-bl: 0px !important; }
  html body #services .svc-card--class5  { --c-tl: 0px !important; --c-tr: 0px !important; --c-br: var(--cut) !important; --c-bl: 0px !important; }
  /* Pas de contour a la jonction : les deux fonds se touchent. */
  html body #services .svc-card--classes::before { inset: .65px .65px 0 .65px !important; }
  html body #services .svc-card--class5::before  { inset: 0 .65px .65px .65px !important; }
  html body #services .svc-card--classes { padding-bottom: clamp(8px, 1vw, 12px) !important; }
  /* Fin separateur interne entre Premium et Pack decouverte. */
  html body #services .svc-card--class5::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 clamp(14px, 1.6vw, 22px) auto !important;
    height: 1px !important;
    background: rgba(94, 170, 255, .16) !important;
    pointer-events: none;
  }
  /* Apparition en scale : les deux moities partent de la jonction. */
  html body #services .svc-card--classes.reveal.visible { transform-origin: 50% 100% !important; }
  html body #services .svc-card--class5.reveal.visible  { transform-origin: 50% 0 !important; }
}
/* Tablette large (901 - 1300px) : bloc Premium + Pack (2 rangees) | Fan
   session (2 rangees), puis la grande case sur toute la largeur. */
@media (min-width: 901px) and (max-width: 1300px) {
  html body #services .svc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html body #services .svc-card--classes { grid-column: 1 / span 2 !important; grid-row: 1 !important; }
  html body #services .svc-card--class5  { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  html body #services .svc-card--fan     { grid-column: 3 / span 2 !important; grid-row: 1 / span 2 !important; }
  html body #services .svc-card--main    { grid-column: 1 / -1 !important; grid-row: 3 !important; }
}
/* Petite tablette (601 - 900px) : tout sur la largeur, bloc unifie en haut. */
@media (min-width: 601px) and (max-width: 900px) {
  html body #services .svc-card--classes,
  html body #services .svc-card--class5 { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
/* >>> VELRA-V59 END <<< */

/* >>> VELRA-V61 START (01/11/2026) <<<
   1) Defilement : la page defile normalement ; en meme temps, Services
      recule tres legerement (script.js > V61) pour que la section Equipe
      monte un tout petit peu par-dessus son bas. Equipe passe au-dessus.
   2) Tablette (<= 1300px) + mobile (<= 600px) : la case « Un
      accompagnement complet, du joueur a la structure. » est retiree. */
html body #services.svc-section {
  z-index: 4 !important;
}
html body #services + #team.team-section { z-index: 5 !important; }
@media (max-width: 1300px) {
  html body #services .svc-card--main { display: none !important; }
}
/* Tablette large : sans la grande case, le coin bas gauche du bloc
   (Pack decouverte) reprend l'angle coupe exterieur. */
@media (min-width: 901px) and (max-width: 1300px) {
  html body #services .svc-card--class5 { --c-bl: var(--cut) !important; }
}
/* >>> VELRA-V61 END <<< */

/* >>> VELRA-V62 START (01/11/2026) <<<
   1) Equipe : les 2 angles coupes en haut (gauche / droite) sont de
      retour. Comme Equipe passe maintenant AU-DESSUS de Services, c'est
      Equipe elle-meme qui est decoupee : dans les 2 triangles on voit le
      bas de Services (qui glisse dessous grace a sa marge negative).
   2) Fluidite : le decalage de Services n'utilise plus de variable CSS
      (qui recalculait tout le contenu de Services a chaque image) ; il est
      pose directement en transform par script.js (V62). */
html body #services.svc-section {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  will-change: auto !important;
}
html body #services + #team.team-section {
  clip-path: polygon(0 var(--v58-notch), var(--v58-notch) 0, calc(100% - var(--v58-notch)) 0, 100% var(--v58-notch), 100% calc(100% - var(--team-slope)), 0 100%) !important;
  -webkit-clip-path: polygon(0 var(--v58-notch), var(--v58-notch) 0, calc(100% - var(--v58-notch)) 0, 100% var(--v58-notch), 100% calc(100% - var(--team-slope)), 0 100%) !important;
}
/* >>> VELRA-V62 END <<< */

/* >>> VELRA-V63 START (02/11/2026) <<<
   1) Titres « Services » et « Structure » (ex-Équipe) : meme espace entre
      le haut de la section et le titre qu'entre les articles et le titre
      « Nos créateurs de contenu ».
   2) « Joue et progresse avec les meilleurs » : icones de l'etape 3
      (manette, bulle, progression) parfaitement centrees dans le carre. */
html body { --va-title-gap: clamp(40px, 4.4vw, 64px); }
html body #services.svc-section {
  padding-top: var(--va-title-gap) !important;
}
html body #team.team-section,
html body #services + #team.team-section,
html body #partners + #team.team-section {
  padding-top: var(--va-title-gap) !important;
}
html body #services .svc-stepper__dot { overflow: visible; }
html body #services .svc-stepper__ico {
  inset: 0 !important; margin: auto !important;
  display: block;
}
/* >>> VELRA-V63 END <<< */

/* >>> VELRA-V64 START (02/11/2026) <<<
   1) Accueil > Services : contour des ronds user (anneau coupe, couleurs
      de la classe), comme sur les cards fan session.
   2) Articles : miniatures TOUJOURS en 16:9 (PC, tablette, mobile).
   3) Createurs + Questions frequentes : apparition de chaque element
      quand IL arrive a l'ecran (script.js V64) ; la rotation des videos
      ne casse plus l'animation.
   4) Mobile (<= 600 px) : vignettes YouTube sans informations par-dessus
      (rond user + pseudo + titre dessous, comme sur PC) sauf les 2 petites
      a droite de la grande ; titre visible sur les vignettes TikTok.
   5) Mobile : bouton « articles » centre (il arrive de la droite quand
      « communauté » part a droite) ; bouton « partenaires » centre en bas
      de la section createurs, meme style que sur PC.
   6) Tablette / mobile : plus de bloc « Avantage » dans Structure. */

/* 1) ronds user de la section Services */
html body #services .svc-mini__av-in { box-shadow: none !important; overflow: visible !important; }
html body #services .svc-mini__av-in > img,
html body #services .svc-mini__av-in > svg { position: relative; z-index: 1; }
html body #services .svc-mini__av-in::after {
  /* v65 : meme anneau que les cards fan session : fin (1,5 px), a
     l'exterieur de la photo, et qui s'effile vers l'ouverture. */
  --rt: 1.5px; --tdp: 3.6%;
  content: ""; position: absolute; inset: calc((var(--rt) + .5px) * -1); z-index: 2; pointer-events: none;
  border-radius: 50% !important;
  background: conic-gradient(from 210deg, var(--pk-hi), var(--pk), var(--pk-lo, var(--pk)), var(--pk-hi));
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--rt) - .5px), #000 calc(100% - var(--rt))),
    radial-gradient(calc(50% - var(--tdp)) calc(50% - var(--tdp)) at calc(50% + var(--tdp) * .7071) calc(50% + var(--tdp) * .7071), transparent calc(100% - .6px), #000 100%),
    conic-gradient(from 115deg, transparent 0 40deg, #000 40deg 360deg);
  -webkit-mask-composite: source-in, source-in;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--rt) - .5px), #000 calc(100% - var(--rt))),
    radial-gradient(calc(50% - var(--tdp)) calc(50% - var(--tdp)) at calc(50% + var(--tdp) * .7071) calc(50% + var(--tdp) * .7071), transparent calc(100% - .6px), #000 100%),
    conic-gradient(from 115deg, transparent 0 40deg, #000 40deg 360deg);
  mask-composite: intersect;
  transition: opacity .45s ease;
}
@media (max-width: 1300px) { html body #services .svc-mini__av-in::after { --tdp: 5.5%; } }
@media (max-width: 600px) { html body #services .svc-mini__av-in::after { --rt: 1px; } }
html body #services .svc-mini__av.is-swap .svc-mini__av-in::after { opacity: 1; }
html body #services .svc-mini__av-in { clip-path: none !important; }
html body #services .svc-mini__av-in > img { border-radius: 50% !important; }

/* 2) (v67) articles : voir VELRA-V67 */

/* 3) apparitions au defilement (createurs) */
html body .creators-section.cv64 .creator-video:not(.creator-video--skeleton):not(.cv-in) > *,
html body .creators-section.cv64 .creators__shorts-track .short-card:not(.cv-in) { opacity: 0 !important; animation: none !important; }
html body .creators-section.cv64 .creator-video.cv-in:not(.cv-shown) > * {
  animation: cvInRight .95s cubic-bezier(.16, 1, .3, 1) both !important;
  animation-delay: var(--cv-d, 0s) !important;
}
html body .creators-section.cv64 .creator-video--big.cv-in:not(.cv-shown) > * { animation-name: cvInLeft !important; }
html body .creators-section.cv64 .creators__shorts-track .short-card.cv-in:not(.cv-shown):not(.is-leaving) {
  animation: cvInUp .95s cubic-bezier(.16, 1, .3, 1) both !important;
  animation-delay: var(--cv-d, 0s) !important;
}
html body .creators-section.cv64 .creator-video.cv-shown > *,
html body .creators-section.cv64 .short-card.cv-shown { animation: none !important; }

/* 3) apparitions au defilement (questions frequentes) */
html body .faq-section.faq64 .faq-item:not(.faq-in),
html body .faq-section.faq64 .faq-item:not(.faq-in) .faq-item__btn > *,
html body .faq-section.faq64 .faq-item:not(.faq-in) .faq-item__panel-inner { opacity: 0 !important; animation: none !important; }
html body .faq-section.faq64 .faq-item.faq-in:not(.faq-shown) {
  opacity: 1 !important;
  animation: faqOpenCenter .85s cubic-bezier(.77, 0, .18, 1) both !important;
  animation-delay: var(--fd, 0s) !important;
}
html body .faq-section.faq64 .faq-item.faq-in:not(.faq-shown) .faq-item__btn > *,
html body .faq-section.faq64 .faq-item.faq-in:not(.faq-shown) .faq-item__panel-inner {
  animation: faqContentIn .55s cubic-bezier(.16, 1, .3, 1) both !important;
  animation-delay: calc(var(--fd, 0s) + .62s) !important;
}
html body .faq-section.faq64 .faq-item.faq-in:not(.faq-shown)[data-testid="faq-item-1"] {
  animation: faqScaleIn .8s cubic-bezier(.16, 1, .3, 1) both !important;
  animation-delay: var(--fd, 0s) !important;
}
html body .faq-section.faq64 .faq-item.faq-in:not(.faq-shown)[data-testid="faq-item-1"] .faq-item__btn > *,
html body .faq-section.faq64 .faq-item.faq-in:not(.faq-shown)[data-testid="faq-item-1"] .faq-item__panel-inner { animation-delay: calc(var(--fd, 0s) + .35s) !important; }
html body .faq-section.faq64 .faq-item.faq-shown,
html body .faq-section.faq64 .faq-item.faq-shown .faq-item__btn > *,
html body .faq-section.faq64 .faq-item.faq-shown .faq-item__panel-inner { opacity: 1 !important; animation: none !important; clip-path: none; }

@media (max-width: 600px) {
  /* 4) (v66) vignettes YouTube : disposition d'origine remise. */
  /* TikTok : titre visible */
  html body .short-card__title {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 8.5px !important; line-height: 1.25 !important;
  }
  html body .short-card__meta { gap: 3px !important; }

  /* 5) bouton « publications » centre dans la scene (taille : V66) */
  html body #eventsPin[data-flow="timed"] #actu .actu__header > a.btn-cta:not(.actu__creators-btn) {
    left: 50% !important; right: auto !important; translate: -50% -50% !important;
  }
  /* bouton « partenaires » : centre en bas de la section createurs */
  html body .creators-section .creators__mobile-actions.is-single {
    display: flex !important; justify-content: center !important; grid-template-columns: none !important;
  }
  html body .creators-section .creators__mobile-actions.is-single .btn-cta {
    width: auto !important; min-width: 184px !important;
    height: 42px !important; padding: 0 18px 0 54px !important;
    font-size: 10px !important; letter-spacing: .08em !important;
  }
  html body .creators-section .creators__mobile-actions.is-single .btn-cta .btn-cta__icon {
    width: 46px !important; min-width: 46px !important; left: 4px !important; right: auto !important;
    top: 4px !important; bottom: 4px !important; height: auto !important;
  }
  html body .creators-section .creators__mobile-actions.is-single .btn-cta:hover .btn-cta__icon,
  html body .creators-section .creators__mobile-actions.is-single .btn-cta:focus-visible .btn-cta__icon { width: calc(100% - 8px) !important; }
}

/* 6) Structure : pas d'« Avantage » sur tablette / mobile */
@media (max-width: 1300px) {
  html body .staff-perks { display: none !important; }
}
/* >>> VELRA-V64 END <<< */

/* >>> VELRA-V65 START (02/11/2026) <<<
   Mobile (<= 600 px), Structure : l'icone VELRA / STAFF (folio) etait
   tournee 2 fois (rotate(-8deg) du CSS mobile + la rotation deja dessinee
   dans le SVG) : meme inclinaison que sur PC. */
@media (max-width: 600px) {
  html body #team.team-section .staff-recruit--v3 .staff-recruit__composition > .v8-staff-part[data-enter-angle="8"] {
    transform: none !important;
    rotate: none !important;
  }
}
/* >>> VELRA-V65 END <<< */

/* >>> VELRA-V66 START (02/11/2026) <<<
   Boutons « communaute », « publications » et « partenaires » : memes
   dimensions et meme texte que « equipe » / « postuler » (PC, tablette,
   mobile). Ils ne se croisent plus pendant la scene (script.js V66). */
html body #eventsPin[data-flow] #events .events__header > .btn-cta.btn-cta,
html body #eventsPin[data-flow] #actu .actu__header > .btn-cta.btn-cta,
html body .btn-cta.btn-cta.actu__creators-btn {
  height: clamp(38px, 3.4vw, 44px) !important;
  min-height: clamp(38px, 3.4vw, 44px) !important;
  min-width: 0 !important;
  font-size: clamp(9.5px, .85vw, 11.5px) !important;
  letter-spacing: .1em !important;
}
@media (max-width: 600px) {
  html body #eventsPin[data-flow] #events .events__header > .btn-cta.btn-cta,
  html body #eventsPin[data-flow] #actu .actu__header > .btn-cta.btn-cta,
  html body .btn-cta.btn-cta.actu__creators-btn,
  html body .creators-section .creators__mobile-actions.is-single .btn-cta {
    width: 184px !important; min-width: 184px !important; max-width: 184px !important;
    height: 42px !important; min-height: 42px !important;
    font-size: 9px !important; letter-spacing: .08em !important;
  }
  html body #eventsPin[data-flow] #events .events__header > .btn-cta.btn-cta,
  html body #eventsPin[data-flow] #actu .actu__header > .btn-cta.btn-cta {
    padding: 8px 54px 8px 18px !important;
  }
  html body #eventsPin[data-flow] #events .events__header > .btn-cta.btn-cta > .btn-cta__icon,
  html body #eventsPin[data-flow] #actu .actu__header > .btn-cta.btn-cta > .btn-cta__icon {
    width: 46px !important; min-width: 46px !important; left: auto !important; right: 4px !important;
    top: 4px !important; bottom: 4px !important; height: auto !important;
  }
  html body .btn-cta.btn-cta.actu__creators-btn { padding: 8px 18px 8px 54px !important; }
  /* TikTok : photo, nom et description descendus (moins de vide en bas). */
  html body .creators__shorts-track .short-card .short-card__meta { bottom: 6px !important; }
}
@media (min-width: 601px) {
  html body .creators-section .creators__head > .btn-cta.btn-cta.actu__creators-btn {
    height: clamp(38px, 3.4vw, 44px) !important; min-height: clamp(38px, 3.4vw, 44px) !important;
    min-width: 0 !important;
    font-size: clamp(9.5px, .85vw, 11.5px) !important; letter-spacing: .1em !important;
    padding: 0 clamp(18px, 2vw, 28px) 0 calc(36px + clamp(18px, 2vw, 28px)) !important;
  }
}
/* « Prochains evenements » : 6 events sur PC, 5 en tablette (<= 1300 px),
   4 en mobile (<= 600 px) ; jamais de defilement dans le conteneur. */
html body #eventsPin #events .upcoming__list > .upcoming__item:nth-child(n+7) { display: none !important; }
@media (max-width: 1300px) {
  html body #eventsPin #events .upcoming__list > .upcoming__item:nth-child(n+6) { display: none !important; }
}
@media (max-width: 600px) {
  html body #eventsPin #events .upcoming__list > .upcoming__item:nth-child(n+5) { display: none !important; }
}
html body #eventsPin #events .upcoming__list,
html body #eventsPin[data-flow] #events .upcoming .upcoming__list.upcoming__list,
html body #eventsPin #events .upcoming {
  overflow: hidden !important; overscroll-behavior: none !important; scrollbar-width: none !important;
}
html body #eventsPin #events .upcoming__list::-webkit-scrollbar { display: none !important; }
/* Structure : titre « Avantage » en Bebas Neue, centre sur les vignettes. */
html body #team .staff-perks__title,
html body #team .staff-recruit--v3 .staff-perks__title {
  font-family: 'Bebas Neue', 'Barlow', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  font-size: clamp(24px, 2.2vw, 38px) !important;
  align-self: center !important;
  text-align: center !important;
  width: 100%;
}
html body #team .staff-recruit--v3 .staff-perks > .staff-banners { align-self: stretch !important; }
/* >>> VELRA-V66 END <<< */

/* >>> VELRA-V67 START (02/11/2026) <<< */
/* Articles : petites cartes en ligne -> miniature 16:9 pleine hauteur,
   collee aux bords de la carte ; texte dans le reste (script.js V67). */
html body #eventsPin[data-flow] #actu .actu__grid > .actu-card--small.actu-card--small[data-ah] {
  grid-template-columns: max-content minmax(0, 1fr) !important;
}
html body #eventsPin[data-flow] #actu .actu__grid > .actu-card--small.actu-card--small[data-ah] > .actu-card__img-wrap {
  align-self: stretch !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  width: calc(var(--ah) * 16 / 9) !important; min-width: 0 !important; max-width: none !important;
  aspect-ratio: auto !important; margin: 0 !important; justify-self: start !important;
}
/* Services (accueil) : plus de bouton « Decouvrir » ; les etapes sont
   centrees entre le bas de la description et le bas du conteneur. */
html body #services .svc-card--fan .svc-stepper {
  margin-top: auto !important; margin-bottom: auto !important;
}
html body #services .svc-card--fan .svc-fan__cta-wrap { display: none !important; }
/* Structure : MEME survol pour les cartes Joueur / Manager et chaque
   element de l'icone VELRA STAFF (graphique, pieces, agenda, dossier) :
   leger agrandissement, rapide et fluide. */
html body #team .team__composition .roster-card,
html body #team .staff-recruit .v8-staff-part {
  transition: scale .38s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.25, .8, .25, 1) !important;
}
html body #team .staff-recruit .v8-staff-part { transform-box: fill-box; transform-origin: center; }
html body #team .team__composition .roster-card:hover,
html body #team .staff-recruit .v8-staff-part:hover { scale: 1.035 !important; }
@media (hover: none) {
  html body #team .team__composition .roster-card:hover,
  html body #team .staff-recruit .v8-staff-part:hover { scale: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #team .team__composition .roster-card,
  html body #team .staff-recruit .v8-staff-part { transition: none !important; }
}
/* Bouton « partenaires » : la marge du libelle (place de la fleche)
   s'ajoutait au padding -> bouton trop long. */
html body .btn-cta.btn-cta.actu__creators-btn > .btn-cta__label { margin: 0 !important; }
/* >>> VELRA-V67 END <<< */

/* >>> VELRA-V68 START (02/11/2026) <<< */
/* « Joue et progresse » : tablette / mobile -> espace en bas (le bouton
   Decouvrir n'est plus la). */
@media (max-width: 1300px) {
  html body #services .svc-card--fan { padding-bottom: clamp(20px, 3.2vw, 30px) !important; }
}
/* PC : etapes en escalier ; le trait part de l'etape, va jusqu'a mi-chemin,
   descend, puis repart a droite jusqu'a l'etape suivante. */
@media (min-width: 1301px) {
  html body #services .svc-stepper { --svc-drop: clamp(20px, 1.8vw, 30px); padding-bottom: calc(var(--svc-drop) * 2); }
  html body #services .svc-stepper__track { display: none !important; }
  html body #services .svc-stepper__step { position: relative; }
  html body #services .svc-stepper__step:nth-child(2) { translate: 0 var(--svc-drop); }
  html body #services .svc-stepper__step:nth-child(3) { translate: 0 calc(var(--svc-drop) * 2); }
  html body #services .svc-stepper__step:nth-child(n+2)::before,
  html body #services .svc-stepper__step:nth-child(n+2)::after {
    content: ""; position: absolute; pointer-events: none; box-sizing: border-box;
    border: 0 solid rgba(94, 170, 255, .22);
    transition: border-color .45s cubic-bezier(.65, 0, .35, 1);
  }
  html body #services .svc-stepper__step:nth-child(n+2)::before {
    left: calc(-50% - 8px + var(--svc-dot) / 2 + 4px);
    width: calc(50% - var(--svc-dot) / 2);
    top: calc(var(--svc-dot) / 2 - 1px - var(--svc-drop));
    height: calc(var(--svc-drop) + 2px);
    border-top-width: 2px; border-right-width: 2px;
  }
  html body #services .svc-stepper__step:nth-child(n+2)::after {
    left: -4px;
    width: calc(50% - var(--svc-dot) / 2);
    top: calc(var(--svc-dot) / 2 - 1px);
    height: 2px;
    border-top-width: 2px;
  }
  html body #services .svc-stepper__step.is-done::before,
  html body #services .svc-stepper__step.is-current::before { border-color: #5eaaff; }
  html body #services .svc-stepper__step.is-done::after,
  html body #services .svc-stepper__step.is-current::after { border-color: #8ec3ff; transition-delay: .3s; }
  html body #services .svc-stepper.is-resetting .svc-stepper__step::after { transition-delay: 0s; }
}
/* Scene : titres et boutons recentres (script.js V68). */
html body #eventsPin[data-flow] #events .events__header > .section-title.section-title,
html body #eventsPin[data-flow] #actu .actu__header > .section-title.section-title { margin-top: var(--v68-title-dy, 0px) !important; }
@media (max-width: 600px) {
  html body #eventsPin[data-flow] #events .events__header > .btn-cta.btn-cta,
  html body #eventsPin[data-flow] #actu .actu__header > .btn-cta.btn-cta { margin-top: var(--v68-cta-dy, 0px) !important; }
}
html body #eventsPin #events .upcoming__list > .upcoming__item.v68-cut { display: none !important; }
/* TikTok : photo, nom et description colles en bas de la vignette (tous ecrans). */
html body .creators-section .creators__shorts-track .short-card .short-card__meta { bottom: clamp(6px, .55vw, 10px) !important; padding-bottom: 0 !important; }
/* Articles sur mobile : textes plus lisibles (sans changer la disposition). */
@media (max-width: 600px) {
  html body #eventsPin[data-flow] #actu .actu__grid > .actu-card .actu-card__date { font-size: 10.5px !important; }
  html body #eventsPin[data-flow] #actu .actu__grid > .actu-card--lead .actu-card__title { font-size: 18px !important; }
  html body #eventsPin[data-flow] #actu .actu__grid > .actu-card--small .actu-card__title { font-size: 15.5px !important; }
  html body #eventsPin[data-flow] #actu .actu__grid > .actu-card .actu-card__link { font-size: 11.5px !important; }
  html body #eventsPin[data-flow] #actu .actu__grid > .actu-card .actu-card__cat-badge { font-size: 9.5px !important; }
}
/* >>> VELRA-V68 END <<< */

/* >>> VELRA-V70 START (03/11/2026) <<< */
/* ---- 1) Services (accueil) : etapes 1-2-3 sur PC (> 1300px) : elles
      MONTENT (etape 1 en bas a gauche -> etape 3 en haut a droite), comme
      les barres du graphique. Le trait entre deux etapes est dessine par 3
      segments (.v70-link, ajoutes par script.js V70) : horizontal ->
      vertical (vers le haut) -> horizontal, en scaleX / scaleY avec
      transform-origin, un segment apres l'autre. Les anciens traits en
      pseudo-elements (V68) sont masques. */
html body #services .svc-stepper .v70-link { display: none; }
@media (min-width: 1301px) {
  html body #services .svc-stepper__step:nth-child(1) { translate: 0 calc(var(--svc-drop) * 2) !important; }
  html body #services .svc-stepper__step:nth-child(2) { translate: 0 var(--svc-drop) !important; }
  html body #services .svc-stepper__step:nth-child(3) { translate: 0 0 !important; }
  html body #services .svc-stepper.v70-stepper .svc-stepper__step::before,
  html body #services .svc-stepper.v70-stepper .svc-stepper__step::after { content: none !important; display: none !important; }
  html body #services .svc-stepper .v70-link {
    display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  }
  /* le rond passe au-dessus du trait */
  html body #services .svc-stepper.v70-stepper .svc-stepper__dot { z-index: 1; }
  html body #services .svc-stepper .v70-seg {
    position: absolute; display: block; overflow: hidden;
    background: rgba(94, 170, 255, .2);
  }
  /* a : depuis le rond precedent (plus bas) jusqu'a mi-chemin */
  html body #services .svc-stepper .v70-seg--a {
    left: calc(-50% - 8px + var(--svc-dot) / 2 + 4px);
    width: calc(50% - var(--svc-dot) / 2 + 1px);
    top: calc(var(--svc-dot) / 2 - 1px + var(--svc-drop)); height: 2px;
  }
  /* b : montee verticale */
  html body #services .svc-stepper .v70-seg--b {
    left: -5px; width: 2px;
    top: calc(var(--svc-dot) / 2 - 1px); height: calc(var(--svc-drop) + 2px);
  }
  /* c : de mi-chemin jusqu'au rond de l'etape */
  html body #services .svc-stepper .v70-seg--c {
    left: -5px; width: calc(50% - var(--svc-dot) / 2 + 1px);
    top: calc(var(--svc-dot) / 2 - 1px); height: 2px;
  }
  html body #services .svc-stepper .v70-seg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, #5eaaff, #8ec3ff);
    transform: scaleX(0); transform-origin: 0 50%;
    will-change: transform;
  }
  html body #services .svc-stepper .v70-seg--b::after {
    background: linear-gradient(0deg, #6cb2ff, #8ec3ff);
    transform: scaleY(0); transform-origin: 50% 100%;
  }
  /* dessin (on) : a -> b -> c ; total 900ms (= LINK_MS de script.js) */
  html body #services .svc-stepper .v70-link-on .v70-seg--a::after { transform: scaleX(1); transition: transform .34s cubic-bezier(.55, 0, .9, .6) 0s; }
  html body #services .svc-stepper .v70-link-on .v70-seg--b::after { transform: scaleY(1); transition: transform .2s linear .34s; }
  html body #services .svc-stepper .v70-link-on .v70-seg--c::after { transform: scaleX(1); transition: transform .36s cubic-bezier(.1, .4, .45, 1) .54s; }
  /* effacement (off) : en sens inverse c -> b -> a */
  html body #services .svc-stepper .v70-seg--c::after { transition: transform .26s cubic-bezier(.55, 0, .9, .6) 0s; transform-origin: 0 50%; }
  html body #services .svc-stepper .v70-seg--b::after { transition: transform .16s linear .26s; }
  html body #services .svc-stepper .v70-seg--a::after { transition: transform .26s cubic-bezier(.1, .4, .45, 1) .42s; }
  html body #services .svc-stepper.v70-instant .v70-seg::after { transition: none !important; }
}
/* tablette / mobile : la barre horizontale existante, sans saut au depart */
html body #services .svc-stepper.v70-instant .svc-stepper__fill { transition: none !important; }

/* ---- 2) « Joue et progresse avec les meilleurs. » et « Un accompagnement
      complet » : meme marge du haut que le Pack decouverte (Classe 5). */
html body #services .svc-card--fan { padding-top: clamp(14px, 1.3vw, 22px) !important; }
html body #services .svc-card--fan > .svc-card__kicker { margin-top: 0 !important; }
html body #services .svc-card--main { padding-top: clamp(14px, 1.3vw, 22px) !important; }
html body #services .svc-card--main .svc-card__main-body { padding-top: 0 !important; margin-top: 0 !important; }
html body #services .svc-card--main > .svc-soon { top: clamp(14px, 1.3vw, 22px) !important; }

/* ---- 3) PC (> 1300px) : Premium + Pack decouverte + Accompagnement =
      UN SEUL grand conteneur (un seul fond, un seul contour, fins
      separateurs internes). Les cartes se touchent (marges negatives sur
      la gouttiere), plus de contour aux jonctions. Tablette / mobile :
      inchange. */
@media (min-width: 1301px) {
  html body #services .svc__grid { --v70-gap: clamp(12px, 1.6vw, 24px); gap: var(--v70-gap) !important; }
  html body #services .svc-card--classes { margin-right: calc(var(--v70-gap) / -2) !important; }
  html body #services .svc-card--class5  { margin-left: calc(var(--v70-gap) / -2 - 1px) !important; }
  html body #services .svc-card--main    { margin-top: calc(-1 * var(--v70-gap) - 1px) !important; }
  /* angles coupes : haut gauche et bas gauche du grand bloc seulement
     (miroir de la carte « Joue et progresse » : haut droit / bas droit) */
  html body #services .svc-card--classes { --c-tl: var(--cut) !important; --c-tr: 0px !important; --c-br: 0px !important; --c-bl: 0px !important; }
  html body #services .svc-card--class5  { --c-tl: 0px !important; --c-tr: 0px !important; --c-br: 0px !important; --c-bl: 0px !important; }
  html body #services .svc-card--main    { --c-tl: 0px !important; --c-tr: 0px !important; --c-br: 0px !important; --c-bl: var(--cut) !important; }
  /* contour seulement sur le bord exterieur */
  html body #services .svc-card--classes::before,
  html body #services .svc-card--classes::after { inset: .65px 0 0 .65px !important; }
  html body #services .svc-card--class5::before,
  html body #services .svc-card--class5::after { inset: .65px .65px 0 0 !important; }
  html body #services .svc-card--main::before,
  html body #services .svc-card--main::after { inset: 0 .65px .65px .65px !important; }
  /* fins separateurs internes (dessines dans le fond) */
  html body #services .svc-card--class5::before {
    background:
      linear-gradient(rgba(94, 170, 255, .18), rgba(94, 170, 255, .18)) no-repeat 0 clamp(14px, 1.3vw, 22px) / 1px calc(100% - 2 * clamp(14px, 1.3vw, 22px)),
      #071631 !important;
  }
  html body #services .svc-card--main::before {
    background:
      linear-gradient(rgba(94, 170, 255, .18), rgba(94, 170, 255, .18)) no-repeat clamp(14px, 1.6vw, 22px) 0 / calc(100% - 2 * clamp(14px, 1.6vw, 22px)) 1px,
      #071631 !important;
  }
  /* le Pack decouverte passe au-dessus de la jonction (1px de recouvrement) */
  html body #services .svc-card--class5,
  html body #services .svc-card--main { z-index: 1; }
}

/* ---- 4) Apparition au scroll (PC > 1300px), une seule fois :
      - « Joue et progresse » : de droite a gauche ;
      - le grand conteneur (3 morceaux, ensemble) : de gauche a droite. */
@keyframes v70InFromRight { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: none; } }
@keyframes v70InFromLeft  { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
@media (min-width: 1301px) {
  html body #services .svc-card--fan.reveal.visible {
    animation: v70InFromRight 1s cubic-bezier(.16, 1, .3, 1) .12s backwards !important;
  }
  html body #services .svc-card--classes.reveal.visible,
  html body #services .svc-card--class5.reveal.visible,
  html body #services .svc-card--main.reveal.visible {
    animation: v70InFromLeft 1s cubic-bezier(.16, 1, .3, 1) 0s backwards !important;
  }
}
/* les 3 morceaux attendent le signal commun (script.js V70) */
@media (min-width: 1301px) {
  html body #services .svc__grid:not(.v70-uni-in) > .svc-card--classes.reveal,
  html body #services .svc__grid:not(.v70-uni-in) > .svc-card--class5.reveal,
  html body #services .svc__grid:not(.v70-uni-in) > .svc-card--main.reveal { opacity: 0 !important; animation: none !important; }
}
@media (min-width: 1301px) and (prefers-reduced-motion: reduce) {
  html body #services .svc-card--fan.reveal.visible,
  html body #services .svc-card--classes.reveal.visible,
  html body #services .svc-card--class5.reveal.visible,
  html body #services .svc-card--main.reveal.visible { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #services .svc-stepper .v70-seg::after { transition: none !important; }
}
/* >>> VELRA-V70 END <<< */

/* >>> VELRA-V70 SCENE START (03/11/2026) <<< */
/* ---- 5) Scene Communaute -> Articles, tablette (<= 1300px) et mobile
      (<= 600px) : plus de fleche en bas ; titre + conteneur + bouton du
      bas decales ENSEMBLE (--v70-scene-dy, script.js V70) pour etre
      centres entre la navbar et le bas de l'ecran. Le recentrage du titre
      seul (V68) est neutralise ici. PC : inchange. */
@media (max-width: 1300px) {
  html body #eventsPin #events > .scene-arrow,
  html body #eventsPin #actu > .scene-arrow { display: none !important; }
  html body #eventsPin[data-flow] #events > .events__inner,
  html body #eventsPin[data-flow] #actu > .actu__inner { translate: 0 var(--v70-scene-dy, 0px) !important; }
  html body #eventsPin[data-flow] #events .events__header > .section-title.section-title.section-title,
  html body #eventsPin[data-flow] #actu .actu__header > .section-title.section-title.section-title { margin-top: 0 !important; }
}
@media (max-width: 600px) {
  html body #eventsPin[data-flow] #events .events__header > .btn-cta.btn-cta.btn-cta,
  html body #eventsPin[data-flow] #actu .actu__header > .btn-cta.btn-cta.btn-cta { margin-top: var(--v70-cta-dy, 0px) !important; }
}
/* >>> VELRA-V70 SCENE END <<< */

/* >>> VELRA-V70 ARTICLES START (03/11/2026) <<< */
/* ---- 6) Articles : la couche de survol ne passe plus jamais sur la
      banniere (image) hors survol : masquee au repos (visibility, avec
      un delai = duree du retour, pour garder l'animation de sortie) ;
      les z-index internes restent dans la carte (isolation). Ecrans
      tactiles : pas de couche de survol (le :hover y reste « colle »
      apres un toucher). */
html body #eventsPin #actu .actu__grid > .actu-card { isolation: isolate; }
html body #eventsPin #actu .actu__grid > .actu-card .actu-card__hover {
  visibility: hidden;
  transition: clip-path .5s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .5s !important;
}
html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__hover,
html body #eventsPin #actu .actu__grid > .actu-card:focus-visible .actu-card__hover {
  visibility: visible;
  transition: clip-path .5s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s !important;
}
@media (hover: none) {
  html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__hover { visibility: hidden !important; }
  html body #eventsPin #actu .actu__grid > .actu-card:hover .actu-card__body > * { opacity: 1 !important; }
}
/* >>> VELRA-V70 ARTICLES END <<< */

/* >>> VELRA-V74 START (05/11/2026) <<<
   ACCUEIL
   1) Services : conteneur de gauche (Premium + Pack decouverte +
      « Un accompagnement complet ») : plus de trait de separation entre ses
      parties (PC, tablette, mobile) ; plus de contour autour des cases
      Classe 1 et Classe 2.
   2) Services : apparition au scroll. PC + tablette (<= 1300px) : le
      conteneur de gauche arrive de la GAUCHE, « Joue et progresse » de la
      DROITE. Mobile (<= 600px) : les deux apparaissent en SCALE simple.
      (classes posees par script.js V74 ; une seule fois.)
   3) Tablette + mobile : plus d'angle coupe en bas a droite du conteneur
      de gauche ; mobile : angle coupe en bas a droite de « Joue et
      progresse avec les meilleurs. ».
   4) Createurs : bouton « partenaires » a DROITE (comme « publications »),
      bleu, fleche a droite ; mobile : reste centre (bas de section).
      Mobile : plus les 2 petites vignettes a droite de la grande ; sous la
      grande : rond utilisateur + pseudo + description (comme sur PC).
   5) Articles (tablette + mobile) : plus transparents (le trace anime de la
      scene passait par-dessus les cartes).
   6) Structure : bandeaux des vignettes (Membres / Postes / Jeux...) aussi
      longs que leur texte (langues aux mots longs).
   ============================================================ */

/* ---- 1) separateurs internes et contours Classe 1 / Classe 2 ---- */
html body #services .svc-card--class5::before,
html body #services .svc-card--main::before { background: #071631 !important; }
@media (max-width: 1300px) {
  html body #services .svc-card--class5::after { background: transparent !important; height: 0 !important; }
  /* jonction Premium / Pack : 1px de recouvrement (plus de fine ligne due
     aux arrondis de sous-pixel) */
  html body #services .svc-card--class5 { margin-top: calc(-1 * var(--svc-gap, 16px) - 1px) !important; z-index: 1; }
}
/* (v74h : contours des cases Premium Classe 1 / Classe 2 remis) */

/* ---- 2) apparition au scroll ---- */
@keyframes v74InLeft  { from { opacity: 0; translate: -72px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes v74InRight { from { opacity: 0; translate: 72px 0; }  to { opacity: 1; translate: 0 0; } }
@keyframes v74InScale { from { opacity: 0; scale: .9; }          to { opacity: 1; scale: 1; } }
html body #services .svc__grid.v74-reveal:not(.v74-in-left) > .svc-card--classes,
html body #services .svc__grid.v74-reveal:not(.v74-in-left) > .svc-card--class5,
html body #services .svc__grid.v74-reveal:not(.v74-in-left) > .svc-card--main,
html body #services .svc__grid.v74-reveal:not(.v74-in-right) > .svc-card--fan {
  opacity: 0 !important; animation: none !important; transition: none !important;
}
html body #services .svc__grid.v74-reveal > .svc-card.reveal { transform: none !important; }
html body #services .svc__grid.v74-reveal.v74-in-left > .svc-card--classes.reveal,
html body #services .svc__grid.v74-reveal.v74-in-left > .svc-card--class5.reveal,
html body #services .svc__grid.v74-reveal.v74-in-left > .svc-card--main.reveal {
  opacity: 1; transition: none !important;
  animation: v74InLeft 1.05s cubic-bezier(.16, 1, .3, 1) 0s both !important;
}
html body #services .svc__grid.v74-reveal.v74-in-right > .svc-card--fan.reveal {
  opacity: 1; transition: none !important;
  animation: v74InRight 1.05s cubic-bezier(.16, 1, .3, 1) .12s both !important;
}
@media (max-width: 600px) {
  html body #services .svc__grid.v74-reveal.v74-in-left > .svc-card--classes.reveal,
  html body #services .svc__grid.v74-reveal.v74-in-left > .svc-card--class5.reveal,
  html body #services .svc__grid.v74-reveal.v74-in-left > .svc-card--main.reveal,
  html body #services .svc__grid.v74-reveal.v74-in-right > .svc-card--fan.reveal {
    animation: v74InScale .8s cubic-bezier(.22, 1, .36, 1) 0s both !important;
    transform-origin: 50% 50% !important;
  }
}
html body #services .svc__grid.v74-reveal.v74-done > .svc-card.reveal { animation: none !important; opacity: 1 !important; translate: none; scale: none; }
@media (prefers-reduced-motion: reduce) {
  html body #services .svc__grid.v74-reveal > .svc-card.reveal { animation: none !important; opacity: 1 !important; }
}

/* ---- 3) angles coupes (tablette / mobile) ---- */
@media (max-width: 1300px) {
  html body #services .svc-card--class5 { --c-br: 0px !important; }
}
@media (max-width: 600px) {
  html body #services .svc-card--fan { --c-br: var(--cut) !important; }
}

/* ---- 4) Createurs : bouton « partenaires » (droite, bleu, fleche a droite) ---- */
html body .btn-cta.btn-cta.actu__creators-btn.actu__creators-btn,
html body .creators__mobile-actions .btn-cta.btn-cta.actu__creators-btn {
  --v8-cta-fill: #5eaaff !important;
  background: #5eaaff !important;
  background-color: #5eaaff !important;
}
html body .btn-cta.btn-cta.actu__creators-btn.actu__creators-btn > .btn-cta__icon {
  background: #5093dd !important;
  background: color-mix(in srgb, #040e1e 15%, #5eaaff) !important;
  left: auto !important; right: 4px !important;
}
html body main .btn-cta.actu__creators-btn[data-v8-cta]::before { background: #5eaaff !important; }
@media (min-width: 601px) {
  html body .creators-section .creators__head > .btn-cta.btn-cta.actu__creators-btn {
    left: auto !important; right: 0 !important;
    padding: 0 calc(36px + clamp(18px, 2vw, 28px)) 0 clamp(18px, 2vw, 28px) !important;
  }
}
@media (max-width: 600px) {
  html body .btn-cta.btn-cta.actu__creators-btn,
  html body .creators-section .creators__mobile-actions.is-single .btn-cta { padding: 0 54px 0 18px !important; }
  html body .creators-section .creators__mobile-actions.is-single .btn-cta .btn-cta__icon { left: auto !important; right: 4px !important; }
}

/* ---- 4b) Createurs (mobile) : grande vignette seule + infos dessous ---- */
@media (max-width: 600px) {
  html body .creators__showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    column-gap: 8px !important; row-gap: 8px !important;
  }
  html body .creators__showcase .creator-video--big { display: contents !important; }
  html body .creators__showcase .creator-video--big .creator-video__media {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    height: auto !important; aspect-ratio: 16 / 9 !important;
  }
  html body .creators__showcase .creator-video--big .creator-video__meta {
    display: flex !important;
    grid-column: 1 / -1 !important; grid-row: 2 !important;
    margin: 4px 0 10px !important;
  }
  html body .creators__showcase .creator-video--big .creator-video__rotation-info { display: none !important; }
  html body .creators__showcase .creator-video--s1,
  html body .creators__showcase .creator-video--s2 { display: none !important; }
  html body .creators__showcase .creator-video--s3 .creator-video__media {
    grid-column: 1 / 2 !important; grid-row: 3 !important; height: auto !important; aspect-ratio: 16 / 9 !important;
  }
  html body .creators__showcase .creator-video--s4 .creator-video__media {
    grid-column: 2 / 3 !important; grid-row: 3 !important; height: auto !important; aspect-ratio: 16 / 9 !important;
  }
}

/* ---- 5) Articles opaques (tablette / mobile) ---- */
@media (max-width: 1300px) {
  html body #eventsPin #events > .velra-lines--actu { z-index: 0 !important; }
}

/* ---- 6) Structure : bandeau aussi long que le texte ---- */
html body #team .team__ribbon-stats .team__ribbon-stat {
  grid-template-columns: clamp(24px, 2.05vw, 31px) minmax(clamp(68px, 5.25vw, 82px), max-content) !important;
}
@media (max-width: 600px) {
  html body #team .team__ribbon-stats .team__ribbon-stat { grid-template-columns: 25px minmax(68px, max-content) !important; }
}
html body #team .team__ribbon-stats .team__ribbon-label { white-space: nowrap !important; overflow: visible !important; }
/* >>> VELRA-V74 END <<< */

/* >>> VELRA-V74B START (05/11/2026) <<<
   1) Structure : les icones (cartes Joueur / Manager, charte VELRA STAFF)
      ne bougent plus pendant le defilement : position de repos fixe (les
      decalages pilotes au scroll sont neutralises). Le fond triangule ne se
      redessine plus en defilant (script.js V74).
   2) Structure (mobile) : icone VELRA STAFF un peu plus haut, plus proche
      du texte.
   3) Scene Communaute -> Articles (PC, tablette, mobile) : les articles
      passent AU-DESSUS du fond / du conteneur Communaute qui s'anime.
   4) Createurs (mobile) : rond utilisateur + pseudo + titre sous les deux
      vignettes YouTube placees sous la grande. */
html body #team .team__composition .roster-card {
  --roster-lift-x: 0px !important;
  --roster-lift-y: 0px !important;
}
html body #team .v8-staff-part {
  --staff-enter-x: 0px !important;
  --staff-enter-y: 0px !important;
}
@media (max-width: 600px) {
  html body #team.team-section .staff-recruit.staff-recruit--v3 .staff-recruit__art,
  html body #team.team-section .staff-recruit--v3 > .staff-recruit__art.staff-recruit__art { margin-top: -22px !important; }
}
/* (v74c : regle de superposition retiree, voir VELRA-V74C) */
@media (max-width: 600px) {
  html body .creators__showcase .creator-video--s3 .creator-video__meta,
  html body .creators__showcase .creator-video--s4 .creator-video__meta {
    display: flex !important;
    grid-row: 4 !important;
    margin: 4px 0 6px !important;
    min-width: 0;
  }
  html body .creators__showcase .creator-video--s3 .creator-video__meta { grid-column: 1 / 2 !important; }
  html body .creators__showcase .creator-video--s4 .creator-video__meta { grid-column: 2 / 3 !important; }
  html body .creators__showcase .creator-video--s3 .creator-video__rotation-info,
  html body .creators__showcase .creator-video--s4 .creator-video__rotation-info { display: none !important; }
  html body .creators__showcase .creator-video--s3 .creator-video__meta .creator-video__title,
  html body .creators__showcase .creator-video--s4 .creator-video__meta .creator-video__title {
    font-size: 12px !important; line-height: 1.3 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  html body .creators__showcase .creator-video--s3 .creator-video__author,
  html body .creators__showcase .creator-video--s4 .creator-video__author { min-width: 0; }
  html body .creators__showcase .creator-video--s3 .creator-video__name,
  html body .creators__showcase .creator-video--s4 .creator-video__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* >>> VELRA-V74B END <<< */

/* >>> VELRA-V74C START (05/11/2026) <<<
   1) Scene Communaute -> Articles : ordre d'origine (le conteneur
      Communaute passe par-dessus les articles en se retrecissant).
   2) « Rejoins un… » / « Derniere news » + bouton : meme marge du haut
      (--v74-cta-dy*) ; au debut, meme marge haute que le titre Services,
      puis descente progressive jusqu'a leur place (--v74-push),
      pilotes par script.js V74. */
/* (v74c : le conteneur Communaute reste AU-DESSUS des articles pendant
   qu'il se retrecit : ordre d'origine conserve, aucune regle ici) */
html body #eventsPin[data-flow] #events.events-section .events__header > .section-title.section-title {
  margin-top: var(--v74-push, 0px) !important;
}
@media (min-width: 601px) {
  html body #eventsPin[data-flow] #events.events-section .events__header > .btn-cta.btn-cta.btn-cta {
    margin-top: calc(var(--v74-cta-dy, 0px) + var(--v74-push, 0px)) !important;
  }
}
/* « Dernieres news » + bouton : meme place que le titre / bouton
   Communaute (calcule par script.js V74, tous formats) */
html body #eventsPin[data-flow] #events.events-section #actu.actu-section .actu__header > .section-title.section-title {
  translate: 0 var(--v74-news-dy, 0px) !important;
}
html body #eventsPin[data-flow] #events.events-section #actu.actu-section .actu__header > .btn-cta.btn-cta.btn-cta:not(.actu__creators-btn) {
  margin-top: var(--v74-cta-dy-news, 0px) !important;   /* Articles : navbar sans effet */
}
/* 3) Section Structure : bas = pente d'origine ; haut = droit (plus
      d'angles coupes en haut a gauche / a droite). */
html body #services + #team.team-section.team-section,
html body #partners + #team.team-section.team-section {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--team-slope, 80px)), 0 100%) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--team-slope, 80px)), 0 100%) !important;
}
/* >>> VELRA-V74C END <<< */

/* >>> VELRA-V75 START (06/11/2026) <<<
   1) BANDE PARTENAIRES (accueil) : logos / textes STRICTEMENT entre les
      marges gauche et droite de la page (--page-pad), plus rien ne
      deborde. Nombre FIXE de partenaires visibles, colonnes egales :
      8 sur PC, 6 sur tablette (<= 1300 px), 4 sur mobile (<= 600 px),
      logos comme textes (mode presentation « Partenaire »). Les
      partenaires en trop attendent leur tour : un emplacement tire au
      hasard change de marque (l'ancienne MONTE, la nouvelle arrive du
      BAS, courbe de vitesse douce - script.js v48 / v75).
   2) SERVICES (accueil) : apparition des 2 conteneurs en glissement
      fluide, sans fondu (script.js V74 -> v75) ; les anciennes animations (V70 / V74
      / .reveal generique) ne s'appliquent plus a ces cartes. */

/* ---- 1) Bande partenaires ---- */
html body #partners { --pb-n: 8; --pb-gap: clamp(14px, 1.8vw, 32px); }
@media (max-width: 1300px) { html body #partners { --pb-n: 6; --pb-gap: clamp(12px, 2.2vw, 26px); } }
@media (max-width: 600px)  { html body #partners { --pb-n: 4; --pb-gap: 12px; } }

html body #partners.partners-band > .partners-band__inner {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: var(--page-pad, clamp(20px, 4vw, 100px)) !important;
  padding-right: var(--page-pad, clamp(20px, 4vw, 100px)) !important;
  overflow: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body #partners .partners-band__track {
  box-sizing: border-box !important;
  grid-template-columns: repeat(var(--pb-n), minmax(0, 1fr)) !important;
  grid-template-rows: 100% !important;
  grid-auto-rows: 0 !important;
  column-gap: var(--pb-gap) !important;
  row-gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  justify-content: stretch !important;
}
html body:not(.velra-presentation) #partners #partnersTrack.partners-band__track { display: grid !important; }
html body.velra-presentation #partners .partners-band__track--present { display: grid !important; }
html body #partners .partners-band__track > .pb-slot {
  position: relative;
  box-sizing: border-box;
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
}
/* au-dela de N : en attente (reserve du changement aleatoire) */
html body #partners .partners-band__track > .pb-slot:nth-child(n + 9) { display: none !important; }
@media (max-width: 1300px) { html body #partners .partners-band__track > .pb-slot:nth-child(n + 7) { display: none !important; } }
@media (max-width: 600px)  { html body #partners .partners-band__track > .pb-slot:nth-child(n + 5) { display: none !important; } }
/* logos : jamais plus larges que leur colonne */
html body #partners .pb-slot img,
html body #partners .pb-slot svg { max-width: 100% !important; max-height: 100%; object-fit: contain; }
html body #partners .pb-slot .pb-chip { max-width: 100%; min-width: 0; }
/* textes (mode presentation / nom sans logo) : taille suivant la colonne,
   jamais coupes ni superposes */
html body #partners .pb-slot .pb-chip--text,
html body #partners .pb-slot .pb-logo--text {
  /* v75b : texte centre VERTICALEMENT dans la bande (meme marge en haut
     et en bas) : il remplit l'emplacement et se centre dedans. */
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(7.5px, 9.5cqi, 12px) !important;
  letter-spacing: .2em !important;
  /* centre optique : espacement apres la derniere lettre (gauche) et
     majuscules (bas) */
  padding: 0 0 .14em .2em !important;
  box-sizing: border-box;
  line-height: 1;
}
@media (max-width: 600px) {
  html body #partners .pb-slot .pb-chip--text,
  html body #partners .pb-slot .pb-logo--text { padding-bottom: 0 !important; }
}
/* logos : centres dans leur emplacement, meme marge en haut et en bas */
html body #partners .partners-band__track > .pb-slot > .pb-logo { inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
html body #partners .partners-band__track > .pb-slot .pb-chip:not(.pb-chip--text) { display: flex !important; align-items: center !important; justify-content: center !important; height: 100%; }
html body #partners .pb-swap { min-width: 0; max-width: 100%; }

/* ---- 2) Services : apparition fluide ---- */
html body #services .svc__grid.v75-rv > .svc-card.reveal,
html body #services .svc__grid.v75-rv > .svc-card.reveal.visible {
  animation: none !important;
  transform: none !important;
  scale: none !important;
}
/* v75b : SANS fondu : les conteneurs restent pleinement visibles et
   glissent seulement jusqu'a leur place, des le premier pixel apercu. */
html body #services .svc__grid.v75-rv > .svc-card.reveal:not(.v75-done) {
  transition: translate 1.1s cubic-bezier(.22, 1, .36, 1) var(--v75-d, 0s) !important;
  will-change: translate;
  backface-visibility: hidden;
}
html body #services .svc__grid.v75-rv > .svc-card.reveal:not(.v75-in) {
  opacity: 1 !important;
  translate: var(--v75-from, 0 34px) !important;
}
html body #services .svc__grid.v75-rv > .svc-card.reveal.v75-in:not(.v75-done) {
  opacity: 1 !important;
  translate: 0 0 !important;
}
html body #services .svc__grid.v75-rv > .svc-card.reveal.v75-done { opacity: 1 !important; }
html body #services .svc__grid.v75-rv > .svc-card.reveal.v75-instant { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html body #services .svc__grid.v75-rv > .svc-card.reveal { opacity: 1 !important; translate: none !important; transition: none !important; }
}
/* >>> VELRA-V75 END <<< */

/* >>> VELRA-V75B START (06/11/2026) <<<
   1) Services (accueil) : marge du BAS = marge entre le haut de la section
      Structure et son titre (meme valeur, tous formats). Calculee par
      script.js V75B (--v75-svc-pb), sur les vraies positions.
   2) Services -> Structure : petit fondu simple a la jonction (couleur du
      bas de Services qui se fond dans Structure), sans toucher aux marges
      ni aux espacements. */
html body #services.svc-section[style*="--v75-svc-pb"] {
  padding-bottom: var(--v75-svc-pb) !important;
}
html body #services + #team.team-section::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; top: 0 !important;
  height: clamp(56px, 6vw, 120px) !important;
  background: linear-gradient(180deg, rgba(11, 36, 85, 1) 0%, rgba(11, 36, 85, .55) 45%, rgba(11, 36, 85, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  display: block !important;
  clip-path: none !important;
  transform: none !important;
}
/* >>> VELRA-V75B END <<< */

/* >>> VELRA-V75C START (06/11/2026) <<<
   Scene Communaute -> Articles, tablette (<= 1300 px) et mobile (<= 600 px)
   1) « Prochains evenements » : TOUJOURS 5 evenements (tablette) / 4
      (mobile). Les lignes se partagent toute la hauteur du conteneur ; si
      la place manque, le contenu des lignes est reduit proportionnellement
      (--v75-up-zoom, script.js) : plus de chevauchement, le bas du
      conteneur reste intact.
   2) Articles : bannieres TOUJOURS en 16:9. Si la grille ne tient pas,
      elle est reduite d'un bloc (--scene-news-fit) et centree.
   3) Ordre des calques pendant la transition : le fond Communaute passe
      SOUS les articles, le conteneur Communaute reste AU-DESSUS (il se
      referme pour laisser voir les articles). */
@media (max-width: 1300px) {
  html body #eventsPin#eventsPin[data-flow="timed"] #events .upcoming__list {
    grid-template-rows: none !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    align-content: stretch !important;
    overflow: hidden !important;   /* plus de defilement interne : tout tient */
  }
  html body #eventsPin#eventsPin[data-flow="timed"] #events .upcoming__list > .upcoming__item {
    height: auto !important; min-height: 0 !important;
    zoom: var(--v75-up-zoom, 1);
  }
  html body #eventsPin#eventsPin[data-flow="timed"] #events .upcoming__list.v75-measure {
    grid-auto-rows: auto !important; height: auto !important; max-height: none !important; overflow: visible !important;
  }
  html body #eventsPin#eventsPin[data-flow="timed"] #events .upcoming__list.v75-measure > .upcoming__item { zoom: 1 !important; }
  html body #eventsPin#eventsPin[data-flow="timed"] #events .upcoming__list > .upcoming__item.v68-cut { display: grid !important; }
  html body #eventsPin#eventsPin[data-flow="timed"] #events .upcoming__list.v75-six > .upcoming__item:nth-child(6) { display: grid !important; }
  /* v75g : articles sur toute la hauteur du conteneur (espace entre les
     rangees agrandi), toujours sur toute la largeur */
  html body #eventsPin#eventsPin[data-flow="timed"][style*="--scene-news-row-gap"] #actu .actu__grid.actu__grid {
    row-gap: var(--scene-news-row-gap) !important;
  }
  /* articles : reduction d'un bloc, centree, bannieres 16:9 intactes */
  html body #eventsPin[data-flow="timed"][style*="--scene-news-fit"] #actu .actu__grid {
    transform: scale(calc(var(--scene-news-scale, 1) * var(--scene-news-fit, 1))) !important;
    left: calc(var(--scene-pad) + (100% - 2 * var(--scene-pad)) * (1 - var(--scene-news-fit, 1)) / 2) !important;
  }
  /* v75f : tant que le conteneur Communaute ne s'est pas encore ouvert
     (phase ou ses cases se rejoignent), les articles restent invisibles :
     on ne les voit plus a travers les espaces entre les cases. Ils
     apparaissent des que le conteneur commence a se refermer. */
  html body #eventsPin#eventsPin[data-flow="timed"][data-scene="transition"]:not([data-static="1"]) #actu#actu .actu__grid.actu__grid {
    opacity: clamp(0, calc(var(--scene-close, 0) * 40), 1) !important;
  }
  /* calques : fond (2) < articles (3) < conteneur Communaute (4) */
  html body #eventsPin#eventsPin[data-flow="timed"][data-scene="transition"]:not([data-static="1"]) #actu#actu > .actu__inner {
    z-index: 3 !important;
  }
  html body #eventsPin#eventsPin[data-flow="timed"][data-scene="news"]:not([data-static="1"]) #actu#actu > .actu__inner {
    z-index: 4 !important;
  }
}
/* >>> VELRA-V75C END <<< */

/* >>> VELRA-V75E START (06/11/2026) <<<
   Services (accueil), tablette (<= 1300 px) et mobile (<= 600 px) : le
   bouton « Services » revient A DROITE du titre, comme les autres
   boutons de la page (plus de bouton en bas de section). */
@media (max-width: 1300px) {
  html body #services .svc__header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-areas: "spacer title btn" !important;
    row-gap: 0 !important;
  }
  html body #services .svc__header > .svc__cta { display: inline-flex !important; grid-area: btn !important; justify-self: end !important; }
  html body #services .svc__cta-bottom { display: none !important; }
}
@media (max-width: 600px) {
  html body #services .svc__header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title btn" !important;
    column-gap: 12px !important;
  }
  html body #services .svc__header > .section-title { text-align: left !important; justify-self: start !important; }
}
/* >>> VELRA-V75E END <<< */



/* V75I : « Prochains evenements » : lignes de hauteur fixe (mesuree a
   l'etat de depart) : pendant l'animation, quand les cases se rejoignent
   et que le conteneur grandit, les evenements ne s'agrandissent pas. */
html body #eventsPin#eventsPin[data-flow="timed"] #events .upcoming__list[style*="--v75-up-row-h"]:not(.v75-measure) {
  grid-template-rows: none !important;
  grid-auto-rows: var(--v75-up-row-h) !important;
  align-content: center !important;
}

/* V75I : menu burger / tiroir langue au-dessus de la scene Communaute ->
   Articles : voile sombre sans flou (plus de bug d'affichage), scene en
   pause tant que le menu est ouvert. */
html.velra-scene-onscreen.velra-menu-open .velra-menu-glass,
html.velra-scene-onscreen.velra-lang-open .velra-menu-glass,
html.velra-scene-onscreen body.velra-menu-open .velra-menu-glass,
html.velra-scene-onscreen body.velra-lang-open .velra-menu-glass,
html.velra-scene-onscreen body:has(.navbar__mobile.open) .velra-menu-glass {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(3, 8, 18, .84) !important;
}
html.velra-scene-onscreen.velra-menu-open #eventsPin *,
html.velra-scene-onscreen.velra-lang-open #eventsPin *,
html.velra-scene-onscreen body.velra-menu-open #eventsPin *,
html.velra-scene-onscreen body.velra-lang-open #eventsPin * {
  animation-play-state: paused !important;
}

/* >>> VELRA-V75K START (06/11/2026) <<<
   Scene Communaute -> Articles, TABLETTE (601-1300 px) : 2 articles
   seulement, cote a cote, colles aux marges gauche et droite de la page.
   Animation : ils partent du centre et glissent chacun vers sa marge
   (--scene-card-dx, script.js). Textes et vignettes plus grands. */
html body #eventsPin#eventsPin[data-flow="timed"] #actu .actu__grid > .actu-card {
  transform: translate3d(calc((1 - var(--scene-card-in, 0)) * var(--scene-card-dx, 0px)),
                         calc((1 - var(--scene-card-in, 0)) * var(--scene-card-distance, 0px)), 0) !important;
}
@media (min-width: 601px) and (max-width: 1300px) {
  html body #eventsPin#eventsPin[data-flow="timed"] #actu .actu__grid > .actu-card--small { display: none !important; }
  html body #eventsPin#eventsPin[data-flow="timed"] #actu .actu__grid.actu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    column-gap: clamp(16px, 2vw, 26px) !important;
  }
  html body #eventsPin#eventsPin[data-flow] #actu .actu__grid > .actu-card--lead .actu-card__title { font-size: 24px !important; line-height: 1.15 !important; }
  html body #eventsPin#eventsPin[data-flow] #actu .actu__grid > .actu-card--lead .actu-card__date { font-size: 12.5px !important; }
  html body #eventsPin#eventsPin[data-flow] #actu .actu__grid > .actu-card--lead .actu-card__link { font-size: 13px !important; }
  html body #eventsPin#eventsPin[data-flow] #actu .actu__grid > .actu-card--lead .actu-card__cat-badge { font-size: 11px !important; }
  /* les articles passent au-dessus l'un de l'autre au centre : le 2e devant */
  html body #eventsPin#eventsPin[data-flow="timed"] #actu .actu__grid > .actu-card--lead:nth-child(2) { z-index: 2; }
}
/* >>> VELRA-V75K END <<< */

/* >>> VELRA-V75L START (06/11/2026) <<<
   Createurs, TABLETTE (601-1300 px) : comme sur PC, le rond utilisateur,
   le nom et le titre de la video sont SOUS chaque vignette YouTube (mode
   normal ET mode presentation) ; plus de bloc superpose sur la vignette.
   Meme composition (grande vignette + 2 empilees a droite, puis 2 cote a
   cote), toutes les vignettes restent en 16:9 : la grande vignette est
   aussi haute que les 2 petites + les infos de la 1re.
   s = ((W - g) * 9/16 - m - 2g) * 16/27 ; grande = W - s - g.
   Mobile (<= 600 px) : inchange (infos deja sous les vignettes, V74B). */
@media (min-width: 601px) and (max-width: 1300px) {
  html body .creators__showcase.creators__showcase {
    --cv-m: clamp(52px, 6.4cqw, 60px);
    --cv-s: calc(((100cqw - var(--cv-gap)) * 9 / 16 - var(--cv-m) - 2 * var(--cv-gap)) * 16 / 27);
    --cv-big-w: calc(100cqw - var(--cv-s) - var(--cv-gap));
    --cv-c1: calc((100cqw - var(--cv-gap)) / 2);
    --cv-h: calc(var(--cv-s) * 9 / 16);
    --cv-H: calc(var(--cv-big-w) * 9 / 16);
    grid-template-columns: var(--cv-c1) calc(var(--cv-big-w) - var(--cv-c1) - var(--cv-gap)) var(--cv-s) !important;
    grid-template-rows: var(--cv-h) var(--cv-m) var(--cv-h) var(--cv-m) auto auto !important;
  }
  html body .creators__showcase.creators__showcase .creator-video--big .creator-video__media { grid-column: 1 / 3 !important; grid-row: 1 / 4 !important; height: var(--cv-H) !important; }
  html body .creators__showcase.creators__showcase .creator-video--s1 .creator-video__media { grid-column: 3 / 4 !important; grid-row: 1 !important; height: var(--cv-h) !important; }
  html body .creators__showcase.creators__showcase .creator-video--s2 .creator-video__media { grid-column: 3 / 4 !important; grid-row: 3 !important; height: var(--cv-h) !important; }
  html body .creators__showcase.creators__showcase .creator-video--s3 .creator-video__media { grid-column: 1 / 2 !important; grid-row: 5 !important; }
  html body .creators__showcase.creators__showcase .creator-video--s4 .creator-video__media { grid-column: 2 / 4 !important; grid-row: 5 !important; }
  html body .creators__showcase.creators__showcase .creator-video__meta {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    height: var(--cv-m) !important;
    overflow: hidden !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html body .creators__showcase.creators__showcase .creator-video--big .creator-video__meta { grid-column: 1 / 3 !important; grid-row: 4 !important; }
  html body .creators__showcase.creators__showcase .creator-video--s1 .creator-video__meta { grid-column: 3 / 4 !important; grid-row: 2 !important; }
  html body .creators__showcase.creators__showcase .creator-video--s2 .creator-video__meta { grid-column: 3 / 4 !important; grid-row: 4 !important; }
  html body .creators__showcase.creators__showcase .creator-video--s3 .creator-video__meta { grid-column: 1 / 2 !important; grid-row: 6 !important; }
  html body .creators__showcase.creators__showcase .creator-video--s4 .creator-video__meta { grid-column: 2 / 4 !important; grid-row: 6 !important; }
  html body .creators__showcase.creators__showcase .creator-video__name,
  html body .creators__showcase.creators__showcase .creator-video__title { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
}
@media (max-width: 1300px) {
  html body .creators__showcase .creator-video__rotation-info { display: none !important; }
}
/* >>> VELRA-V75L END <<< */