/* ============================================================
   COMMUNAUTE PAGE — CYBER MINIMALIST
   ============================================================ */

.sv-page {
  /* Pas de bande reservee a la navbar : le hero commence tout en haut. */
  padding-top: 0;
  min-height: 100vh;
  background: var(--bg-deep);
}

/* ============================================================
   TITRES EN MAJUSCULES
   ============================================════ */
.sv-hero__title,
.sv-hero__title em,
.sv-partner__name,
.sv-partner__name em,
.sv-partner__cta-title {
  text-transform: uppercase !important;
}

/* ============================================================
   HERO — simple gradient transition
   ============================================================ */
.sv-hero {
  position: relative;
  padding: clamp(50px, 8vw, 100px) 0 0;
  text-align: center;
  overflow: hidden;
  background: #030814;
}

.sv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    #030814 0%,
    #061838 55%,
    #051a3e 100%);
}

.sv-hero__content {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-inner);
  margin-bottom: clamp(28px, 4vw, 50px);
}

.sv-hero__eyebrow {
  font-size: clamp(8px, 0.85vw, 11px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.sv-hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  line-height: 0.9;
  color: var(--text);
  text-align: center;
}

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

/* ── Tabs ── */
.sv-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 0 var(--space-inner);
  border-bottom: 1px solid var(--border);
}

.sv-tab {
  font-family: var(--font-body);
  font-size: clamp(10px, 0.9vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  padding: 14px clamp(14px, 2vw, 28px);
  border-bottom: 2px solid transparent;
  transition: color var(--tr), border-color var(--tr);
}

.sv-tab:hover,
.sv-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ── Sections ── */
.sv-section {
  padding: clamp(40px, 5vw, 80px) 0;
  position: relative;
  overflow: hidden;
}

.sv-inner {
  /* Memes marges gauche/droite que style.css (.events__inner, .footer__inner, etc.) :
     pleine largeur + padding lateral = var(--page-pad) (clamp(20px, 4vw, 100px)). */
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-pad, clamp(20px, 4vw, 100px));
  position: relative;
  z-index: 2;
}

/* ============================================================
   EVENTS BACKGROUND — minimalist + slow comets
   ============================================================ */
.sv-section--events {
  background: linear-gradient(180deg, #051a3e 0%, #04122a 50%, #030a1a 100%);
}

.sv-section--events .sv-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sv-section--events .sv-section__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(94, 170, 255, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(56, 212, 199, 0), transparent 70%);
}

/* ─── COMETES — courbe parfaite, traînée 2× plus longue, fréquence irrégulière ─── */

/* ============================================================
   COMETS — 3 comètes | tête glow ILLIMITÉ + traîne propre
   ─────────────────────────────────────────────────────────
   Anti-carré : la box de la tête est BEAUCOUP plus grande que
   le glow visible. Le radial-gradient finit à transparent à
   50% du rayon → côtés et coins de la box totalement transparents.
   Aucun contour rectangulaire visible.

   mix-blend-mode:screen → mélange additif naturel avec le fond.

   Anchors différents :
     i:first-child = TRAÎNE → offset-anchor:100% 50% (bord droit = tip)
     i:last-child  = TÊTE   → offset-anchor:50% 50%  (centre = tip)
   ============================================================ */

.comet {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.comet i {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  will-change: offset-distance, opacity;
}

/* ── TRAÎNE (i:first-child) ── */
.comet i:first-child {
  clip-path: polygon(0 50%, 100% 0%, 100% 100%);
  background: linear-gradient(to right,
    transparent                  0%,
    rgba(94,  170, 255, 0.04)   14%,
    rgba(130, 196, 255, 0.20)   38%,
    rgba(180, 222, 255, 0.55)   65%,
    rgba(225, 244, 255, 0.85)   85%,
    rgba(255, 255, 255, 0.95)  100%
  );
  /* 24/10/2026 : plus de fondu au bout cote tete -> la traine colle a la lueur. */
  -webkit-mask-image: none;
  mask-image: none;
  filter: blur(0.65px);
  offset-anchor: 100% 50%;
  offset-rotate: auto;
}

/* ── TÊTE (i:last-child) — glow illimité ──
   Box énorme (200/140/80px) >> glow visible.
   Gradient finit à transparent à ~48-52% du rayon.
   Donc tous les bords de la box sont 100% transparents.
   Plus aucun artefact carré possible. */
.comet i:last-child {
  border-radius: 50%;
  /* Pas de filter:blur ici (le gradient suffit). 
     Pas de box-shadow (cause originale de l'effet cube). */
  mix-blend-mode: screen;
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────
   TAILLES — box très large + gradient confiné aux ~50% du rayon
───────────────────────────────────────────────────────── */
/* GRANDE — glow bleu discret (box 140×140) */
.comet--1 i:first-child {
  width: 325px; height: 11px;
  opacity: 0.7;
  background: linear-gradient(to right,
    transparent                  0%,
    rgba(60,  120, 200, 0.04)   14%,
    rgba(80,  150, 220, 0.18)   38%,
    rgba(120, 180, 235, 0.45)   65%,
    rgba(170, 210, 245, 0.70)   85%,
    rgba(210, 230, 250, 0.85)  100%
  );
}
.comet--1 i:last-child {
  width: 140px; height: 140px;
  background: radial-gradient(circle,
    rgba(200, 225, 250, 0.55)   0%,
    rgba(140, 190, 240, 0.38)   3%,
    rgba(94,  170, 255, 0.25)   8%,
    rgba(70,  140, 220, 0.16)  16%,
    rgba(60,  120, 200, 0.08)  26%,
    rgba(50,  100, 180, 0.03)  38%,
    transparent                50%
  );
}

/* MOYENNE — glow bleu discret (box 100×100) */
.comet--2 i:first-child {
  width: 225px; height: 7px;
  opacity: 0.7;
  background: linear-gradient(to right,
    transparent                  0%,
    rgba(60,  120, 200, 0.04)   14%,
    rgba(80,  150, 220, 0.16)   38%,
    rgba(120, 180, 235, 0.40)   65%,
    rgba(170, 210, 245, 0.65)   85%,
    rgba(210, 230, 250, 0.80)  100%
  );
}
.comet--2 i:last-child {
  width: 100px; height: 100px;
  background: radial-gradient(circle,
    rgba(200, 225, 250, 0.50)   0%,
    rgba(140, 190, 240, 0.34)   3%,
    rgba(94,  170, 255, 0.22)   9%,
    rgba(70,  140, 220, 0.13)  18%,
    rgba(60,  120, 200, 0.06)  28%,
    transparent                50%
  );
}

/* PETITE — glow bleu discret (box 60×60) */
.comet--3 i:first-child {
  width: 130px; height: 4px;
  opacity: 0.7;
  background: linear-gradient(to right,
    transparent                  0%,
    rgba(60,  120, 200, 0.04)   14%,
    rgba(80,  150, 220, 0.14)   38%,
    rgba(120, 180, 235, 0.36)   65%,
    rgba(170, 210, 245, 0.60)   85%,
    rgba(210, 230, 250, 0.75)  100%
  );
}
.comet--3 i:last-child {
  width: 60px; height: 60px;
  background: radial-gradient(circle,
    rgba(200, 225, 250, 0.45)   0%,
    rgba(140, 190, 240, 0.30)   4%,
    rgba(94,  170, 255, 0.18)  11%,
    rgba(70,  140, 220, 0.10)  22%,
    rgba(60,  120, 200, 0.04)  34%,
    transparent                48%
  );
}

/* ─────────────────────────────────────────────────────────
   CHEMINS Bézier — arc visible sans vague
───────────────────────────────────────────────────────── */
.comet--1 i {
  offset-path: path("M -400 600 Q 1150 -60, 2900 260");
  animation: cometRide1 13s linear infinite 7.0s;
}
.comet--2 i {
  offset-path: path("M -400 70  Q 1380 490, 2900 140");
  animation: cometRide2 22s linear infinite -3.65s;
}
.comet--3 i {
  offset-path: path("M -400 340 Q 1000 730, 2900 410");
  animation: cometRide3 31s linear infinite -17.5s;
}

@keyframes cometRide1 {
  0%   { offset-distance: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes cometRide2 {
  0%   { offset-distance: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes cometRide3 {
  0%   { offset-distance: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Fallback sans offset-path */
@supports not (offset-path: path("M 0 0 L 1 1")) {
  .comet { left:-400px; border-radius:0;
    clip-path:polygon(0 50%,100% 0%,100% 100%);
    background:linear-gradient(to right,transparent 0%,rgba(120,185,255,.3) 45%,rgba(255,255,255,.9) 100%);
    opacity:0; }
  .comet i { display:none; }
  .comet--1 { top:72%; width:325px; height:11px; animation:cometFB 13s linear infinite  7.0s; }
  .comet--2 { top: 9%; width:225px; height: 7px; animation:cometFB 22s linear infinite -3.65s; }
  .comet--3 { top:43%; width:130px; height: 4px; animation:cometFB 31s linear infinite -17.5s; }
}
@keyframes cometFB {
  0%   { transform:translateX(0);                   opacity:0; }
  5%   { opacity:0.8; }
  90%  { opacity:0.8; }
  100% { transform:translateX(calc(100vw + 800px)); opacity:0; }
}
/* ============================================================
   PARTNER BACKGROUND
   ============================================================ */
.sv-section--partner {
  /* Fade vertical : couleur de fin de la section Events en haut,
     couleur Partner d'origine en bas. */
  background: linear-gradient(180deg,
    #030a1a 0%,
    #04102a 30%,
    #060f24 60%,
    #060f24 100%
  );
}

.sv-section--partner .sv-section__bg-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(94, 170, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 170, 255, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, black 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, black 25%, transparent 100%);
}
/* ============================================================
   1. EVENTS LAYOUT
   ============================================================ */
.sv-events {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(20px, 2.5vw, 36px);
  /* stretch -> la colonne droite (concept + agenda) prend la meme hauteur
     que la colonne gauche (filtres + liste d'events). On peut donc
     aligner le bottom de l'agenda avec le bottom de la liste. */
  align-items: stretch;
}

.sv-events__filters {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.sv-filter {
  font-family: var(--font-body);
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  background: rgba(8, 20, 50, 0.6);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  color: var(--text-muted);
  cursor: pointer;
  clip-path: var(--clip-tag);
  transition: color var(--tr), background var(--tr), outline-color var(--tr);
}

.sv-filter:hover {
  color: var(--text);
  outline-color: var(--border-md);
  background: rgba(94, 170, 255, 0.08);
}

.sv-filter.active {
  background: rgba(94, 170, 255, 0.18);
  outline-color: var(--accent);
  color: var(--accent);
}

/* ── List wrapper with scroll + vertical nav ── */
.sv-events__list-wrap {
  display: grid;
  grid-template-columns: 1fr 36px;
  gap: 14px;
  align-items: stretch;
}

.sv-events__scroll {
  /* Hauteur calée : 3 events + aperçu du 4ème, scroll pour voir les autres. */
  max-height: clamp(500px, 56vh, 620px);
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 8px;

  /* Firefox — bleu opaque assorti aux boutons des items event */
  scrollbar-width: thin;
  scrollbar-color: #1f5fb0 #123a6b;
}

/* WebKit (Chrome, Edge, Safari) — aucune transparence */
.sv-events__scroll::-webkit-scrollbar {
  width: 8px;
}
.sv-events__scroll::-webkit-scrollbar-track {
  background: #123a6b;
  border-radius: 4px;
}
.sv-events__scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2f78d6 0%, #1f5fb0 100%);
  border-radius: 4px;
  border: 1px solid #0d2d58;
}
.sv-events__scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4b91e8 0%, #2b6fc5 100%);
}

/* ============================================================
   ETAT VIDE — aucun evenement pour le moment
   Affiche quand initEventFeed() ne recoit aucun document Firestore.
   ============================================================ */
.sv-events__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 48px 24px;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(94, 170, 255, 0.22);
  border-radius: 12px;
}

/* ============================================================
   VERTICAL EVENT NAV — barre de navigation droite
   ============================================================ */
.sv-events__nav {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0;
  flex-shrink: 0;
}

.sv-events__nav::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(94, 170, 255, 0.18) 8%,
    rgba(94, 170, 255, 0.18) 92%,
    transparent 100%
  );
  transform: translateX(-50%);
}

.sv-events__nav-btn {
  position: relative;
  background: rgba(8, 20, 50, 0.95);
  border: none;
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  transition: outline-color var(--tr), background var(--tr), transform var(--tr);
}

.sv-events__nav-btn::after {
  content: '';
  width: 4px;
  height: 4px;
  background: rgba(94, 170, 255, 0.35);
  transition: background var(--tr), box-shadow var(--tr);
}

.sv-events__nav-btn:hover {
  outline-color: var(--accent);
  transform: scale(1.15);
}

.sv-events__nav-btn:hover::after {
  background: var(--accent);
}

.sv-events__nav-btn.active {
  outline-color: var(--accent);
  background: rgba(94, 170, 255, 0.18);
  transform: scale(1.3);
}

.sv-events__nav-btn.active::after {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(94, 170, 255, 0.6);
}

/* Tooltip avec le titre de l'event au hover */
.sv-events__nav-btn[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--text);
  background: rgba(4, 12, 24, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
  padding: 5px 10px;
  clip-path: var(--clip-tag);
  pointer-events: none;
  z-index: 10;
}

/* ============================================================
   EVENT ITEM — same as before
   ============================================================ */
.sv-event-item {
  display: grid;
  grid-template-columns: clamp(200px, 32%, 290px) 1fr;
  background: rgba(8, 20, 50, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: 1px dotted var(--border);
  outline-offset: -1px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  clip-path: var(--clip-card);
  transition: outline-color 0.6s ease, transform 0.6s ease;
}

.sv-event-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-teal));
  transition: height 0.6s ease;
  z-index: 2;
}

.sv-event-item:hover {
  outline-color: var(--border-hi);
  outline-style: dotted;
}

.sv-event-item:hover::before {
  height: 100%;
}

.sv-event-item.hidden {
  display: none;
}

.sv-event-item__media {
  position: relative;
  /* Colonne gauche : banniere 16:9 en haut, puis la date + le compteur
     en bas a gauche, juste sous la banniere. Identique a toutes les
     largeurs (page agrandie comme retrecie). */
  width: 100%;
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* La banniere garde TOUJOURS un ratio 16:9 strict, quelle que soit
   la largeur de la page. */
.sv-event-item__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(135deg, #0b2558 0%, #1a4e90 50%, #0e3468 100%);
}

/* Date + compteur, colles en bas a gauche sous la banniere. */
.sv-event-item__media-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.4vw, 16px);
}

/* Date affichee en ligne (jour + mois) dans le media-footer. */
.sv-event-item__media-footer .sv-event-item__date {
  position: static;
  bottom: auto;
  left: auto;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(94, 170, 255, 0.10);
  outline-color: var(--border);
  flex-shrink: 0;
}
.sv-event-item__media-footer .sv-event-item__day {
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1;
}
.sv-event-item__media-footer .sv-event-item__month {
  margin-top: 0;
  font-size: clamp(8px, 0.7vw, 10px);
  color: var(--text);
  opacity: 0.75;
}
.sv-event-item__media-footer .sv-event-item__countdown {
  flex-shrink: 0;
}

.sv-event-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}

.sv-event-item:hover .sv-event-item__img {
  transform: none;
}

.sv-event-item__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(4, 12, 24, 0.65) 100%);
  pointer-events: none;
}

.sv-event-item__date {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  background: rgba(4, 12, 24, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
  clip-path: var(--clip-tag);
}

.sv-event-item__day {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  color: var(--accent);
}

.sv-event-item__month {
  font-size: clamp(7px, 0.65vw, 9px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* === Date deplacee dans le footer (a gauche du countdown) === */
.sv-event-item__footer .sv-event-item__date {
  position: static;            /* annule le position:absolute d'origine */
  bottom: auto;
  left: auto;
  flex-direction: row;         /* jour + mois cote a cote au lieu d'empiles */
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(94, 170, 255, 0.10);
  outline-color: var(--border);
  flex-shrink: 0;
}

.sv-event-item__footer .sv-event-item__day {
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1;
}

.sv-event-item__footer .sv-event-item__month {
  margin-top: 0;
  font-size: clamp(8px, 0.7vw, 10px);
  color: var(--text);
  opacity: 0.75;
}

.sv-event-item__status {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: clamp(8px, 0.7vw, 10px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: 1px solid;
  outline-offset: -1px;
  clip-path: var(--clip-tag);
}

.sv-event-item__status--open {
  background: rgba(56, 212, 200, 0.20);
  color: var(--accent-teal);
  outline-color: rgba(56, 212, 200, 0.5);
}

.sv-event-item__status--soon {
  background: rgba(94, 170, 255, 0.20);
  color: var(--accent);
  outline-color: rgba(94, 170, 255, 0.5);
}

.sv-event-item__status--closed {
  background: rgba(130, 175, 240, 0.10);
  color: var(--text-dim);
  outline-color: var(--border);
}

.sv-event-item__content {
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
}

.sv-event-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sv-event-item__game-icon {
  width: clamp(38px, 4vw, 48px);
  height: clamp(38px, 4vw, 48px);
  background: rgba(94, 170, 255, 0.10);
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  clip-path: var(--clip-icon);
}

.sv-event-item__game-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.sv-event-item__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.sv-event-item__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.05;
}

.sv-event-item__meta {
  font-size: clamp(10px, 0.85vw, 12px);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.sv-event-item__desc {
  font-size: clamp(11.5px, 0.95vw, 13px);
  color: var(--text-muted);
  line-height: 1.6;
}

.sv-event-item__footer {
  margin-top: auto;
  padding-top: clamp(8px, 1vw, 12px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  /* date + countdown collés à GAUCHE, bouton poussé à droite */
  justify-content: flex-start;
  gap: clamp(10px, 1.5vw, 14px);
  flex-wrap: wrap;
}

/* Le bouton "Rejoindre" se pousse tout seul à droite */
.sv-event-item__footer .btn {
  margin-left: auto;
}

.sv-event-item__countdown {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

/* ============================================================
   CONCEPT DE L'EVENEMENT — container au-dessus de l'agenda
   Onglets Brawl Stars / Rocket League, panneau actif affiche
   une liste (TITRE + DESCRIPTION). Style assorti aux autres
   containers de la page (clip-path, outline, backdrop-blur).
   ============================================================ */
.sv-concept {
  position: relative;
  background: rgba(8, 20, 50, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  clip-path: var(--clip-card);
  padding: clamp(18px, 1.8vw, 26px);
  margin-bottom: 0;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Dans la section "Concept de l'événement", le container partage le même
   fond que la section "En vedette" : aucune distinction visuelle. */
.sv-section--concept .sv-concept {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sv-concept__title {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 19px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 0 0 14px 0;
}

/* Tabs */
.sv-concept__tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}

.sv-concept__tab {
  background: transparent;
  border: 0;
  padding: 9px 14px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: clamp(11.5px, 0.95vw, 13px);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  position: relative;
  transition: color var(--tr);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sv-concept__tab img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity var(--tr);
}

.sv-concept__tab:hover {
  color: var(--text);
}
.sv-concept__tab:hover img {
  opacity: 0.85;
}

.sv-concept__tab.active {
  color: var(--accent);
}
.sv-concept__tab.active img {
  opacity: 1;
}

/* Soulignement actif (gradient comme accents) */
.sv-concept__tab.active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-teal));
}

/* Panneaux : un seul visible à la fois */
.sv-concept__panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sv-concept__panel {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  animation: conceptFade 0.25s ease-out;
  flex: 1 1 auto;
  min-height: 0;
}

.sv-concept__panel.active {
  display: grid;
  flex: 1 1 auto;
}

/* Tablette (<= 1299.98px) : 3 conteneurs par ligne */
@media (max-width: 1300px) {
  .sv-concept__panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile : 2 conteneurs par ligne */
@media (max-width: 600px) {
  .sv-concept__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes conceptFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Items de la liste (TITRE + DESCRIPTION) */
.sv-concept__item {
  min-width: 0;
  padding: 12px 14px;
  background: rgba(94, 170, 255, 0.05);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  clip-path: var(--clip-tag);
  transition: background var(--tr), outline-color var(--tr);
}

.sv-concept__item:hover {
  background: rgba(94, 170, 255, 0.10);
  outline-color: var(--border-md);
}

.sv-concept__item-title {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--accent);
  margin: 0 0 5px 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sv-concept__item-desc {
  font-size: clamp(11.5px, 0.92vw, 13px);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .sv-concept {
    padding: 16px;
  }
  .sv-concept__tab {
    padding: 8px 10px;
    font-size: 11px;
  }
  .sv-concept__tab img {
    width: 15px;
    height: 15px;
  }
}

.sv-events__right {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* padding-top + height sont calculés par JS pour aligner top/bottom
     du concept exactement sur la zone de scroll des events */
  padding-top: 0;
  overflow: hidden;
}

.sv-agenda__slide:hover 

/* ============================================================
   2. PARTNER PROGRAM
   ============================================================ */
.sv-partner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr) !important;
  grid-template-areas: "info cta" !important;
  gap: clamp(24px, 3vw, 56px);
  align-items: stretch !important;
}

.sv-partner__info {
  grid-area: info;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sv-partner__cta-box {
  grid-area: cta;
  min-width: 0;
  align-self: stretch;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sv-partner__cta-inner {
  height: 100%;
  flex: 1;
}

.sv-partner__name {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 44px);
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1;
  letter-spacing: 0.01em;
}

.sv-partner__desc {
  font-size: clamp(12px, 1vw, 14px);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: clamp(20px, 2.5vw, 36px);
  max-width: 500px;
}

.sv-partner__perks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sv-perk {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sv-perk__icon {
  width: clamp(36px, 3.5vw, 42px);
  height: clamp(36px, 3.5vw, 42px);
  background: rgba(94, 170, 255, 0.10);
  outline: 1px solid var(--border-md);
  outline-offset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  clip-path: var(--clip-icon);
}

.sv-perk div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sv-perk strong {
  font-size: clamp(12px, 1vw, 13.5px);
  color: var(--text);
  font-weight: 600;
}

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

.sv-partner__cta-box {
  background: rgba(6, 16, 40, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  overflow: hidden;
  position: relative;
  clip-path: var(--clip-bigcard);
}

.sv-partner__cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-teal), transparent);
  z-index: 2;
}

.sv-partner__cta-inner {
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  flex: 1;
  height: 100%;
}

.sv-partner__cta-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  opacity: 0.6;
  margin-bottom: 4px;
}

.sv-partner__cta-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 36px);
  color: var(--text);
  line-height: 1;
  letter-spacing: 0.01em;
}

.sv-partner__cta-text {
  font-size: clamp(12px, 1vw, 13.5px);
  color: var(--text-muted);
  line-height: 1.65;
}

.sv-partner__cta-stats {
  display: flex;
  gap: clamp(24px, 3vw, 48px);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  width: 100%;
}

.sv-partner__cta-stats > div {
  display: flex;
  flex-direction: column;
}

.sv-partner__cta-stats strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 0 16px rgba(94, 170, 255, 0.4);
}

.sv-partner__cta-stats span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ============================================================
   FULL-WIDTH Events & Partner (PC) — comme le footer
   Sur grand écran on libère .sv-inner du max-width pour que le
   contenu prenne toute la largeur. Le padding latéral reste fluide.
   ============================================================ */
@media (min-width: 1101px) {
  .sv-section--events .sv-inner,
  .sv-section--partner .sv-inner,
  .sv-section--featured .sv-inner {
    max-width: none;
    width: 100%;
    padding: 0 var(--page-pad, clamp(20px, 4vw, 100px));
  }
}

@media (max-width: 1100px) {
  .sv-events__list-wrap {
    grid-template-columns: 1fr 30px;
    gap: 10px;
  }
}

@media (max-width: 1300px) {
  .sv-events {
    grid-template-columns: 1fr;
  }

  .sv-events__right {
    position: static;
    /* En mode stack vertical, on annule le push-bottom et l'offset top. */
    padding-top: 0;
    display: block;
  }

  

  /* Mobile : la barre passe SOUS la liste (plus de colonne a droite) */
  .sv-events__list-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  /* Mobile : grille 2 colonnes -> 2 events par rangee,
     hauteur = 2 rangees visibles (2 en haut + 2 en bas) */
  .sv-events__scroll {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: calc(2 * var(--ev-row, 290px) + 10px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0;
  }

  /* image au-dessus du contenu : cards compactes en colonne */
  .sv-event-item {
    grid-template-columns: 1fr;
  }

  .sv-event-item__banner {
    aspect-ratio: 16 / 9;
  }

  /* Le partner garde 2 colonnes (info à gauche, postuler à droite)
     jusqu'au breakpoint 700px — voir @media (max-width: 600px) */
}

@media (max-width: 600px) {
  /* Le bloc "Deviens partenaire" reste TOUJOURS a sa place (colonne droite),
     il ne passe plus en dessous sur une autre ligne quand la page retrecit. */
  .sv-partner {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.9fr) !important;
    grid-template-areas: "info cta" !important;
    gap: clamp(12px, 2vw, 24px);
  }
}

@media (max-width: 600px) {
  .sv-tabs {
    overflow-x: auto;
    justify-content: center;
    gap: 0;
    -webkit-overflow-scrolling: touch;
  }

  .sv-tab {
    flex-shrink: 0;
  }

  .sv-events__list-wrap {
    grid-template-columns: 1fr;
  }

  .sv-events__nav {
    display: none;
  }

  /* Mobile : ~2 cards visibles, le reste accessible au scroll */
  .sv-events__scroll {
    max-height: 430px;
  }

  /* Cards COMPACTES en horizontal (image vignette gauche + texte droite) */
  .sv-event-item {
    grid-template-columns: 130px 1fr;
  }

  /* Image vignette plus modeste, ratio 16:9 conservé */
  .sv-event-item__banner {
    aspect-ratio: 16 / 9;
  }

  .sv-event-item__content {
    padding: 12px 12px 12px 14px;
    gap: 8px;
  }

  /* Description trop verbeuse : on la masque sur mobile */
  .sv-event-item__desc {
    display: none;
  }

  .sv-event-item__head {
    gap: 8px;
  }

  .sv-event-item__title {
    font-size: 14px;
    line-height: 1.2;
  }

  .sv-event-item__meta {
    font-size: 10.5px;
  }

  /* Footer reste en ligne (date + countdown + btn) mais ultra-compact */
  .sv-event-item__footer {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .sv-event-item__footer .sv-event-item__date {
    padding: 3px 7px;
  }

  .sv-event-item__footer .sv-event-item__day {
    font-size: 12px;
  }

  .sv-event-item__footer .sv-event-item__month {
    font-size: 8px;
  }

  .sv-event-item__countdown {
    gap: 0;
    transform: scale(0.85);
    transform-origin: left center;
  }

  .sv-event-item__footer .btn {
    margin-left: auto;
    padding: 6px 10px;
    font-size: 11px;
  }

  /* Game icon plus petite */
  .sv-event-item__game-icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 420px) {
  /* Cards encore plus compactes sur tres petit ecran */
  .sv-event-item {
    grid-template-columns: 110px 1fr;
  }

  .sv-event-item__content {
    padding: 10px;
  }

  .sv-event-item__title {
    font-size: 13px;
  }

  .sv-event-item__status {
    top: 6px;
    right: 6px;
    font-size: 8px;
    padding: 3px 6px;
  }

  .sv-event-item__footer .btn {
    padding: 5px 8px;
    font-size: 10.5px;
  }
}
/* ============================================================
   PARTNER — Boutons internes : pas d'angles coupés
   On annule le clip-path/clipping cyber des .btn dans la cta-box.
   ============================================================ */
.sv-partner__cta-box .btn,
.sv-partner__cta-inner .btn {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 4px;
}

/* ============================================================
   AJUSTEMENTS WIDGETS EVENTS (demande utilisateur)
   ============================================================ */

/* 1. Retrait du trait vertical qui séparait la liste d'events
   du conteneur "Concept de l'événement". */
.sv-events__nav::before {
  display: none !important;
}

/* 2. Widget entièrement cliquable : curseur main sur toute la carte
   (le clic est géré dans communaute.js). */
.sv-event-item {
  cursor: pointer;
}

/* ============================================================
   SCALING PROPORTIONNEL DES WIDGETS (>900px)
   La carte devient un "conteneur" (container-type) et tout l'interieur
   est exprime en cqw (% de la largeur de la carte). Resultat : quand la
   carte s'agrandit ou retrecit, TOUS les elements scalent ensemble dans
   la meme proportion (ratio constant, scaling lineaire/monotone).
   Fini l'effet "ca grandit puis ca retrecit" cause par des clamp() vw
   independants sur chaque element.
   ============================================================ */
@media (min-width: 1300.02px) {
  /* Reequilibrage des colonnes : moins d'ecart liste / Concept.
     La page reste pleine largeur. */
  .sv-events {
    /* items events plus etroits (rouge) + Concept elargi qui remplit jusqu'a
       la marge droite (vert) -> toute la largeur de la page est occupee */
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(12px, 1.2vw, 18px);
  }

  /* La carte = conteneur de reference pour le scaling.
     Image en % strict => ratio image/carte toujours constant. */
  .sv-event-item {
    container-type: inline-size;
    grid-template-columns: 35% 1fr;
  }

  /* --- Colonne media (image + date / compteur) --- */
  .sv-event-item__media-footer {
    gap: 1.4cqw;
    padding: 1.5cqw 1.9cqw;
  }
  .sv-event-item__media-footer .sv-event-item__date {
    gap: 0.7cqw;
    padding: 0.7cqw 1.25cqw;
  }
  .sv-event-item__media-footer .sv-event-item__day   { font-size: 2.35cqw; }
  .sv-event-item__media-footer .sv-event-item__month { font-size: 1.35cqw; }
  .sv-event-item__status { font-size: 1.35cqw; padding: 0.7cqw 1.5cqw; }

  .sv-event-item .countdown__n   { font-size: 2.35cqw; }
  .sv-event-item .countdown__l   { font-size: 1.05cqw; }
  .sv-event-item .countdown__sep { font-size: 1.9cqw; }

  /* --- Contenu (texte) --- */
  .sv-event-item__content {
    padding: 3cqw 3.6cqw;
    gap: 1.7cqw;
  }
  .sv-event-item__head { gap: 1.7cqw; }
  .sv-event-item__game-icon {
    width: 7.2cqw;
    height: 7.2cqw;
  }
  .sv-event-item__title { font-size: 3cqw; }
  .sv-event-item__meta  { font-size: 1.65cqw; }
  .sv-event-item__desc  { font-size: 1.95cqw; }

  .sv-event-item__footer {
    padding-top: 1.6cqw;
    gap: 1.9cqw;
  }
  .sv-event-item__footer .btn--sm {
    padding: 1.2cqw 2.4cqw;
    font-size: 1.45cqw;
  }
}

/* ============================================================
   CONTOUR MINIMALISTE QUI SUIT LA FORME DU WIDGET
   L'outline rectangulaire ne suivait pas les coins coupes (clip-path).
   On peint un lisere discret de 1px epousant exactement la forme :
   le fond de la carte = couleur du lisere, et un ::after insere de 1px
   (meme clip-path) redonne la surface interieure.
   ============================================================ */
.sv-event-item {
  background: var(--border-md);
  outline: none !important;
}
.sv-event-item::after {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--clip-card);
  -webkit-clip-path: var(--clip-card);
  background: rgba(8, 20, 50, 0.78);
  z-index: 0;
  pointer-events: none;
}
.sv-event-item > * {
  position: relative;
  z-index: 1;
}
.sv-event-item:hover {
  background: var(--border-hi);
}

/* ============================================================
   COMBLER L'ESPACE LISTE / CONCEPT
   La colonne de navigation verticale (.sv-events__nav) est vide et
   inutilisee ; depuis qu'on a retire le trait, elle ne laissait qu'un
   grand vide entre les widgets et le Concept. On la supprime : la liste
   d'events occupe toute sa colonne et se rapproche du Concept.
   ============================================================ */
.sv-events__list-wrap {
  grid-template-columns: 1fr;
  gap: 0;
}
.sv-events__nav {
  display: none;
}

/* ============================================================
   CONTENEUR CONCEPT : MEME PRINCIPE QUE LES WIDGETS
   1) Contour minimaliste discret qui suit la forme (clip-path).
   2) Scaling proportionnel en cqw (texte plus grand, ratio constant).
   ============================================================ */
.sv-concept {
  background: var(--border-md);
  outline: none !important;
}
.sv-concept::after {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--clip-card);
  -webkit-clip-path: var(--clip-card);
  background: rgba(8, 20, 50, 0.70);
  z-index: 0;
  pointer-events: none;
}
.sv-concept > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 1300.02px) {
  /* Le Concept devient son propre conteneur de scaling.
     Tout l'interieur en cqw => grandit/retrecit dans la meme
     proportion, en coherence avec les widgets. */
  .sv-concept {
    container-type: inline-size;
    /* padding externe en clamp (pas en cqw) pour eviter la dependance
       circulaire cqw<->padding du conteneur. Le texte interne est en cqw. */
    padding: clamp(18px, 1.9vw, 28px);
  }
  .sv-concept__title {
    font-size: 4.0cqw;
    margin: 0 0 2.8cqw 0;
  }
  .sv-concept__tabs {
    gap: 0.9cqw;
    margin-bottom: 3.1cqw;
  }
  .sv-concept__tab {
    font-size: 2.65cqw;
    padding: 1.8cqw 2.8cqw;
  }
  .sv-concept__panel { gap: 2.4cqw; }
  .sv-concept__item {
    padding: 2.5cqw 2.9cqw;
  }
  .sv-concept__item-title {
    font-size: 3.2cqw;
    margin: 0 0 1.1cqw 0;
  }
  .sv-concept__item-desc {
    font-size: 2.95cqw;
  }
}

/* ============================================================
   SCROLLBAR MOBILE
   On laisse reapparaitre la barre de scroll des events (style de base).
   Comme la liste occupe maintenant toute sa colonne (nav supprimee),
   le bord droit de la zone de scroll = bord droit du Concept en dessous :
   la barre s'arrete donc pile a la meme verticale.
   ============================================================ */
@media (max-width: 1300px) {
  .sv-events__scroll {
    overflow-y: auto;
    /* barre native masquee : seule la barre custom (sous les events) pilote */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sv-events__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* ============================================================
   AJUSTEMENTS DEMANDE UTILISATEUR
   ============================================================ */

/* --- "Rejoindre" : plus un bouton, juste un texte/lien accent --- */
.sv-event-item__footer .sv-event-item__join {
  margin-left: auto;
  background: none; border: none; outline: none; padding: 0;
  color: var(--accent);
  font-family: var(--font-display, inherit);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: max(11px, 1.55cqw);
  cursor: pointer; white-space: nowrap;
  transition: color var(--tr, 0.2s);
}
.sv-event-item__footer .sv-event-item__join::after { content: " \203A"; font-weight: 700; }
.sv-event-item:hover .sv-event-item__join { color: var(--accent-teal, #5ee0d0); }

/* --- Avantages Partner : 8 au total --- */
/* Desktop : 2 colonnes (4x2) */
@media (min-width: 1300.02px) {
  .sv-partner__perks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; align-content: start; }
}
/* Mobile + tablette : une colonne, et SEULEMENT 4 avantages visibles */
@media (max-width: 1300px) {
  .sv-partner__perks { display: flex; flex-direction: column; gap: 14px; }
  .sv-perk:nth-child(n+5) { display: none !important; }
}

/* ============================================================
   ITEM EVENT : MEME FORMAT QU'EN PC A TOUTES LES LARGEURS
   La carte est un conteneur (container-type) ; tout l'interieur est
   en cqw (proportionnel a la largeur de la carte) avec un plancher px
   via max() pour rester lisible. La description et la structure
   restent IDENTIQUES au format PC (mobile + tablette compris).
   ============================================================ */
.sv-event-item {
  container-type: inline-size;
  grid-template-columns: 35% 1fr !important;
}
.sv-event-item__desc {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-event-item__media-footer {
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 1.4cqw !important;
  padding: 1.5cqw 1.9cqw !important;
}
.sv-event-item__media-footer .sv-event-item__date {
  gap: 0.7cqw !important;
  padding: 0.7cqw 1.25cqw !important;
  flex-shrink: 0;
}
.sv-event-item__media-footer .sv-event-item__day   { font-size: max(12px, 2.35cqw) !important; }
.sv-event-item__media-footer .sv-event-item__month { font-size: max(8px, 1.35cqw) !important; }
.sv-event-item__status { font-size: max(8px, 1.35cqw) !important; padding: 0.7cqw 1.5cqw !important; }

.sv-event-item__countdown { transform: none !important; gap: 0.2cqw !important; flex-shrink: 1; min-width: 0; }
.sv-event-item .countdown__n   { font-size: max(11px, 2.35cqw) !important; }
.sv-event-item .countdown__l   { font-size: max(7px, 1.05cqw) !important; }
.sv-event-item .countdown__sep { font-size: max(9px, 1.9cqw) !important; }

.sv-event-item__content { padding: 3cqw 3.6cqw !important; gap: 1.7cqw !important; }
.sv-event-item__head { gap: 1.7cqw !important; }
.sv-event-item__game-icon { width: max(28px, 7.2cqw) !important; height: max(28px, 7.2cqw) !important; }
.sv-event-item__title { font-size: max(14px, 3cqw) !important; line-height: 1.2; }
.sv-event-item__meta  { font-size: max(10px, 1.65cqw) !important; }
.sv-event-item__desc  { font-size: max(11px, 1.95cqw) !important; }
.sv-event-item__footer { padding-top: 1.6cqw !important; gap: 1.9cqw !important; flex-wrap: nowrap !important; }

/* ============================================================
   FILTRES EVENTS : 2 menus deroulants (Regions + Jeux)
   ============================================================ */
.sv-events__filters { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.sv-fdrop { position: relative; }
.sv-fdrop__btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: space-between;
  min-width: 160px;
  font-family: var(--font-body); font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 14px;
  background: rgba(8, 20, 50, 0.6); outline: 1px solid var(--border); outline-offset: -1px;
  color: var(--text); cursor: pointer; clip-path: var(--clip-tag);
  transition: outline-color var(--tr), background var(--tr), color var(--tr);
}
.sv-fdrop__btn:hover { outline-color: var(--border-md); background: rgba(94, 170, 255, 0.08); }
.sv-fdrop.open .sv-fdrop__btn { outline-color: var(--accent); color: var(--accent); }
.sv-fdrop__chev { transition: transform 0.2s; flex-shrink: 0; }
.sv-fdrop.open .sv-fdrop__chev { transform: rotate(180deg); }
.sv-fdrop__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%;
  list-style: none; margin: 0; padding: 6px; z-index: 30;
  background: #0a1424; outline: 1px solid var(--border-md); outline-offset: -1px;
  clip-path: var(--clip-tag); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.sv-fdrop.open .sv-fdrop__menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sv-fdrop__menu li {
  padding: 9px 12px; font-family: var(--font-body); font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.sv-fdrop__menu li:hover { background: rgba(94, 170, 255, 0.12); color: var(--text); }
.sv-fdrop__menu li.is-selected { background: rgba(94, 170, 255, 0.18); color: var(--accent); }

/* --- Tres petits ecrans : compteur un cran plus compact pour tenir
       dans la colonne image sans deborder --- */
@media (max-width: 400px) {
  .sv-event-item__media-footer { gap: 4px !important; padding: 6px 7px !important; }
  .sv-event-item__media-footer .sv-event-item__day { font-size: 10px !important; }
  .sv-event-item__media-footer .sv-event-item__month { font-size: 7px !important; }
  .sv-event-item .countdown__n   { font-size: 9px !important; }
  .sv-event-item .countdown__l   { font-size: 5.5px !important; }
  .sv-event-item .countdown__sep { font-size: 7px !important; }
}

/* ============================================================
   ASSISTANT CREATEURS (wizard 3 etapes) - style VELRA cyber
   ============================================================ */

/* On masque la barre de scroll pour l'onglet createurs (contenu en etapes) */
.pp-scroll--noscroll { scrollbar-width: none; }
.pp-scroll--noscroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

#ppCreatorWizard { display: flex; flex-direction: column; gap: 18px; }

/* --- Stepper --- */
.cw-steps { display: flex; align-items: center; gap: 6px; padding: 2px 0 4px; }
.cw-step { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.cw-step__num {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Barlow', sans-serif; font-weight: 800; font-size: 13px;
  color: #6f86a8; background: rgba(4, 12, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
  transition: all 0.2s;
}
.cw-step__label {
  font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #6f86a8;
  transition: color 0.2s; white-space: nowrap;
}
.cw-step__bar { flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, 0.14); min-width: 14px; }
.cw-step.is-active .cw-step__num { color: #fff; border-color: #5eaaff; background: rgba(94, 170, 255, 0.18); box-shadow: 0 0 0 3px rgba(94, 170, 255, 0.12); }
.cw-step.is-active .cw-step__label { color: #fff; }
.cw-step.is-done .cw-step__num { color: #5eaaff; border-color: #5eaaff; background: rgba(94, 170, 255, 0.10); }
.cw-step.is-done .cw-step__label { color: #c7d3e6; }

/* --- Panes --- */
.cw-pane { display: none; flex-direction: column; gap: 12px; }
.cw-pane.is-active { display: flex; animation: cwFade 0.25s ease; }
@keyframes cwFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Etape 2 : plateformes --- */
.cw-plat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cw-plat-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-plat-toggle {
  padding: 7px 14px; font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: #8fa0bc; background: rgba(4, 12, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
  transition: all 0.18s;
}
.cw-plat-toggle:hover { border-color: rgba(94, 170, 255, 0.4); color: #c7d3e6; }
.cw-plat-toggle.is-on { color: #fff; border-color: #5eaaff; background: rgba(94, 170, 255, 0.16); }
.cw-plat-hint { font-family: 'Barlow', sans-serif; font-size: 12px; color: #6f86a8; margin: 2px 0; }

#cwPlatforms { display: flex; flex-direction: column; gap: 14px; }
.cw-plat-card {
  background: rgba(4, 12, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 2px solid var(--plat, #5eaaff);
  padding: 14px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.cw-plat-card__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.cw-plat-card__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--plat, #5eaaff); box-shadow: 0 0 8px var(--plat, #5eaaff); flex-shrink: 0; }
.cw-plat-card__head strong { font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
.cw-plat-card__x {
  width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 80, 80, 0.12); border: 1px solid rgba(255, 80, 80, 0.4); color: #ff7676;
  font-size: 18px; line-height: 1; cursor: pointer; border-radius: 4px; transition: background 0.15s, color 0.15s;
}
.cw-plat-card__x:hover { background: rgba(255, 80, 80, 0.25); color: #fff; }
.cw-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .cw-plat-grid { grid-template-columns: 1fr; } }

/* --- Etape 3 : tiers --- */
.cw-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .cw-tiers { grid-template-columns: 1fr; } }
.cw-tier { cursor: pointer; }
.cw-tier input { display: none; }
.cw-tier__box {
  display: flex; flex-direction: column; gap: 5px; position: relative;
  padding: 14px 14px 14px 36px; height: 100%;
  background: rgba(4, 12, 24, 0.7); border: 1px solid rgba(255, 255, 255, 0.12);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: border-color 0.18s, background 0.18s;
}
.cw-tier:hover .cw-tier__box { border-color: rgba(94, 170, 255, 0.4); }
.cw-tier__dot {
  position: absolute; left: 13px; top: 16px; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3); transition: all 0.18s;
}
.cw-tier.is-sel .cw-tier__box { border-color: #5eaaff; background: rgba(94, 170, 255, 0.10); }
.cw-tier.is-sel .cw-tier__dot { border-color: #5eaaff; background: radial-gradient(circle, #5eaaff 0 42%, transparent 48%); box-shadow: 0 0 8px rgba(94,170,255,0.5); }
.cw-tier__name { font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 800; color: #fff; }
.cw-tier__req { font-family: 'Barlow', sans-serif; font-size: 11.5px; color: #8fa0bc; line-height: 1.4; }

/* --- Etape 3 : accord --- */
.cw-agree {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer; user-select: none;
  padding: 13px; background: rgba(4, 12, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.10);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.cw-agree input { display: none; }
.cw-agree .pp-check {
  flex-shrink: 0; margin-top: 1px; width: 18px; height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.cw-agree .pp-check svg { opacity: 0; transition: opacity 0.15s; }
.cw-agree input:checked + .pp-check { background: #5eaaff; border-color: #5eaaff; }
.cw-agree input:checked + .pp-check svg { opacity: 1; }
.cw-agree__txt { font-family: 'Barlow', sans-serif; font-size: 12.5px; color: #c7d3e6; line-height: 1.5; }


/* ============================================================
   CARTE EVENEMENT — v4
   - contour bleu anime en CADRE qui epouse les coins coupes
   - sens d'animation alterne 1 carte sur 2 (G->D puis D->G)
   - interieur translucide (cometes visibles)
   - bande de fond solide PROLONGEE sous toute la carte jusqu'a "Rejoindre"
   - conteneur de date retire ; fleche "Rejoindre" retiree
   ============================================================ */

@property --sv-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes sv-rotate { to { --sv-angle: 360deg; } }

/* ---- CARTE : fond transparent => cometes du fond visibles ---- */
.sv-event-item {
  position: relative;
  background: transparent !important;
  outline: none !important;
  isolation: isolate;
}

/* ---- INTERIEUR : base translucide + BANDE SOLIDE en bas (pleine largeur,
        sous l'image ET jusqu'au bouton Rejoindre) ---- */
.sv-event-item::after {
  content: "";
  position: absolute;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  clip-path: var(--clip-card);
  -webkit-clip-path: var(--clip-card);
  background:
    /* bande solide bleue collee en bas, sur toute la largeur */
    linear-gradient(135deg, #0b2558 0%, #1a4e90 50%, #0e3468 100%)
      bottom / 100% clamp(52px, 11cqw, 72px) no-repeat,
    /* base translucide (laisse voir les cometes au-dessus de la bande) */
    rgba(8, 20, 50, 0.62);
  box-shadow: none !important;
  z-index: 0;
  pointer-events: none;
}

/* ---- CONTOUR ANIME : CADRE qui epouse exactement les coins coupes,
        pose AU-DESSUS de l'image et du contenu ---- */
.sv-event-item::before {
  content: "";
  position: absolute;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  -webkit-mask: none !important;
          mask: none !important;
  background:
    conic-gradient(from var(--sv-angle),
      #2a5e9e 0deg,
      #5aa6f0 50deg,
      #bfe2ff 105deg,
      #6ff0e2 150deg,
      #5aa6f0 205deg,
      #2a5e9e 280deg,
      #2a5e9e 360deg) !important;
  /* cadre de 2px qui suit les coins coupes (contour exterieur + decoupe
     interieure parallele, regle evenodd => trou au centre) */
  clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    2px 2px,
    calc(100% - var(--cut-lg)) 2px,
    calc(100% - 2px) var(--cut-lg),
    calc(100% - 2px) calc(100% - 2px),
    var(--cut-lg) calc(100% - 2px),
    2px calc(100% - var(--cut-lg)));
  -webkit-clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    2px 2px,
    calc(100% - var(--cut-lg)) 2px,
    calc(100% - 2px) var(--cut-lg),
    calc(100% - 2px) calc(100% - 2px),
    var(--cut-lg) calc(100% - 2px),
    2px calc(100% - var(--cut-lg)));
  filter: drop-shadow(0 0 6px rgba(94, 170, 255, 0.55));
  animation: sv-rotate 7s linear infinite;
  z-index: 5;
  pointer-events: none;
  transition: filter var(--tr);
}

/* ---- SENS ALTERNE : 1 carte sur 2 tourne dans l'autre sens ---- */
.sv-event-item:nth-of-type(even)::before {
  animation-direction: reverse;
}

/* ---- HOVER : contour BLANC POINTILLE qui tourne rapidement ---- */
.sv-event-item:hover::before {
  background:
    repeating-conic-gradient(from var(--sv-angle),
      #ffffff 0deg 6deg,
      transparent 6deg 14deg) !important;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 18px rgba(255, 255, 255, 0.55));
  animation-duration: 1.2s;
}

/* Sens alterne conserve aussi au hover */
.sv-event-item:nth-of-type(even):hover::before {
  animation-direction: reverse;
}

/* ---- SOUS L'IMAGE : transparent (laisse voir la bande solide), centre ---- */
.sv-event-item__media-footer {
  background: transparent !important;
  justify-content: center !important;
}

/* ---- A DROITE : fondu degrade ; transparent en bas pour laisser voir la
        bande solide derriere "Rejoindre" ---- */
.sv-event-item__content {
  background: linear-gradient(135deg,
    rgba(26, 78, 144, 0.55) 0%,
    rgba(11, 37, 88, 0.32) 38%,
    rgba(8, 20, 50, 0.00) 70%) !important;
}

/* ---- DATE : conteneur (fond + contour) retire a cote du minuteur ---- */
.sv-event-item__media-footer .sv-event-item__date,
.sv-event-item__footer .sv-event-item__date,
.sv-event-item__date {
  background: transparent !important;
  outline: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  clip-path: none !important;
  padding: 0 !important;
}

/* ---- "Rejoindre" : fleche retiree ---- */
.sv-event-item__footer .sv-event-item__join::after {
  content: "" !important;
}


/* ============================================================
   CARTE EVENEMENT — v5
   - badge region (EMEA/NA/SA/APAC) : highlight bleu SOLIDE qui epouse le texte
   - date centree SOUS l'image, avec l'annee
   - minuteur deplace dans le footer, a gauche (cale sur la description)
   - "fond" = highlights bleus solides qui ne depassent jamais le texte
     (remplace l'ancienne bande pleine largeur qui variait selon le format)
   ============================================================ */

/* plus de bande pleine largeur : on garde juste la base translucide (cometes) */
.sv-event-item::after {
  background: rgba(8, 20, 50, 0.62) !important;
}

/* ---- BADGE REGION : solide, opaque, epouse le texte (ni conteneur ni contour) ---- */
.sv-event-item__status,
.sv-event-item__status--soon,
.sv-event-item__status--open,
.sv-event-item__status--closed {
  background: #1f5fb0 !important;
  color: #ffffff !important;
  outline: none !important;
  border: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 0 !important;
  padding: 2px 7px !important;
  line-height: 1.15 !important;
}

/* ---- DATE : highlight bleu solide qui epouse le texte, centre sous l'image ---- */
.sv-event-item__media-footer {
  background: transparent !important;
  justify-content: center !important;
  padding: clamp(8px, 1vw, 12px) !important;
}
.sv-event-item__media-footer .sv-event-item__date {
  background: #1f5fb0 !important;
  outline: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  flex: 0 0 auto !important;
}
.sv-event-item__media-footer .sv-event-item__day,
.sv-event-item__media-footer .sv-event-item__month,
.sv-event-item__media-footer .sv-event-item__year {
  color: #ffffff !important;
  opacity: 1 !important;
}
.sv-event-item__year {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ---- FOOTER : minuteur a GAUCHE (cale sur la description), Rejoindre a DROITE ---- */
.sv-event-item__footer {
  background: transparent !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
/* highlight bleu solide qui epouse le minuteur */
.sv-event-item__footer .sv-event-item__countdown {
  background: #1f5fb0 !important;
  padding: 4px 9px !important;
  flex: 0 0 auto !important;
  align-self: center;
}
.sv-event-item__footer .sv-event-item__countdown .countdown__n   { color: #ffffff !important; }
.sv-event-item__footer .sv-event-item__countdown .countdown__l   { color: rgba(255, 255, 255, 0.72) !important; }
.sv-event-item__footer .sv-event-item__countdown .countdown__sep { color: rgba(255, 255, 255, 0.6) !important; }
.sv-event-item__footer .sv-event-item__join { margin-left: auto !important; }


/* ============================================================
   CARTE EVENEMENT — v6 (correction)
   - on RETIRE le highlight de la date et du minuteur (couleurs d'origine)
   - 2 bandes bleues de MEME hauteur en bas :
       * sous l'image (date)
       * footer (minuteur + Rejoindre)
   ============================================================ */

/* hauteur commune des 2 bandes du bas */
:root { --sv-bottom-h: clamp(46px, 7cqw, 56px); }

/* ---- BANDE BLEUE SOUS L'IMAGE (date) ---- */
.sv-event-item__media-footer {
  background: linear-gradient(180deg, #1a4380 0%, #0e2c58 100%) !important;
  justify-content: center !important;
  align-items: center !important;
  height: clamp(46px, 7cqw, 56px) !important;
  min-height: clamp(46px, 7cqw, 56px) !important;
  flex: 0 0 auto !important;
  padding: 0 clamp(10px, 1.4vw, 16px) !important;
}
/* date SANS fond, couleurs d'origine */
.sv-event-item__media-footer .sv-event-item__date {
  background: transparent !important;
  padding: 0 !important;
}
.sv-event-item__media-footer .sv-event-item__day {
  color: var(--accent) !important;
  opacity: 1 !important;
}
.sv-event-item__media-footer .sv-event-item__month,
.sv-event-item__media-footer .sv-event-item__year {
  color: var(--text) !important;
  opacity: 0.78 !important;
}

/* ---- BANDE BLEUE FOOTER (minuteur + Rejoindre), MEME hauteur ---- */
.sv-event-item__footer {
  background: linear-gradient(180deg, #1a4380 0%, #0e2c58 100%) !important;
  border-top: none !important;
  justify-content: flex-start !important;
  align-items: center !important;
  height: clamp(46px, 7cqw, 56px) !important;
  min-height: clamp(46px, 7cqw, 56px) !important;
  flex: 0 0 auto !important;
  padding: 0 clamp(12px, 1.6vw, 20px) !important;
}
/* minuteur SANS fond, couleurs d'origine */
.sv-event-item__footer .sv-event-item__countdown {
  background: transparent !important;
  padding: 0 !important;
}
.sv-event-item__footer .sv-event-item__countdown .countdown__n   { color: var(--text) !important; }
.sv-event-item__footer .sv-event-item__countdown .countdown__l   { color: var(--text-muted) !important; }
.sv-event-item__footer .sv-event-item__countdown .countdown__sep { color: var(--text-muted) !important; }
.sv-event-item__footer .sv-event-item__join { margin-left: auto !important; }


/* ============================================================
   CARTE EVENEMENT — v7 (correction format)
   - on annule les hauteurs fixes v6 (qui cassaient le format)
   - FOND A : sous l'image (date), attache et remplit jusqu'en bas
   - FOND B : footer (minuteur + Rejoindre), DIFFERENT de A, attache au bottom
   - date & minuteur : couleurs d'origine, AUCUN fond individuel
   ============================================================ */

/* ---- FOND A : sous l'image (rempli jusqu'au bas), date centree ---- */
.sv-event-item__media-footer {
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  flex: 1 1 auto !important;            /* remplit l'espace sous l'image jusqu'en bas */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #0b2558 0%, #1a4e90 50%, #0e3468 100%) !important;
  padding: clamp(10px, 1.2vw, 16px) !important;
}
.sv-event-item__media-footer .sv-event-item__date {
  background: transparent !important;
  padding: 0 !important;
}
.sv-event-item__media-footer .sv-event-item__day {
  color: var(--accent) !important;
  opacity: 1 !important;
}
.sv-event-item__media-footer .sv-event-item__month,
.sv-event-item__media-footer .sv-event-item__year {
  color: var(--text) !important;
  opacity: 0.78 !important;
}

/* ---- FOND B : footer (minuteur + Rejoindre), couleur DIFFERENTE, au bottom ---- */
.sv-event-item__footer {
  height: auto !important;
  min-height: 0 !important;
  margin-top: auto !important;
  background: #0a1d3d !important;       /* fond different du fond sous l'image */
  border-top: none !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.6vw, 20px) !important;
}
.sv-event-item__footer .sv-event-item__countdown {
  background: transparent !important;
  padding: 0 !important;
}
.sv-event-item__footer .countdown__n   { color: var(--text) !important; }
.sv-event-item__footer .countdown__l   { color: var(--text-muted) !important; }
.sv-event-item__footer .countdown__sep { color: var(--text-muted) !important; }
.sv-event-item__footer .sv-event-item__join { margin-left: auto !important; }


/* ============================================================
   CARTE EVENEMENT — v8 (correction hauteur/position)
   - les 2 fonds du bas ont la MEME hauteur (date = minuteur)
   - date CENTREE verticalement (plus collee en bas)
   - minuteur + Rejoindre centres, fond sur toute la largeur du footer
   - 2 couleurs differentes ; date & minuteur sans fond individuel
   ============================================================ */

/* hauteur commune des 2 bandes */
.sv-event-item__media-footer,
.sv-event-item__footer {
  height: clamp(48px, 7.5cqw, 60px) !important;
  min-height: clamp(48px, 7.5cqw, 60px) !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;        /* collees en bas, alignees */
  align-items: center !important;     /* centrage vertical du contenu */
}

/* FOND A : sous l'image (date) — plus clair */
.sv-event-item__media-footer {
  background: linear-gradient(180deg, #1a4682 0%, #123a6e 100%) !important;
  justify-content: center !important;
  padding: 0 clamp(10px, 1.4vw, 16px) !important;
}

/* FOND B : footer (minuteur + Rejoindre) — plus fonce, different de A */
.sv-event-item__footer {
  background: #0a1d3d !important;
  border-top: none !important;
  justify-content: flex-start !important;
  padding: 0 clamp(12px, 1.6vw, 20px) !important;
}
.sv-event-item__footer .sv-event-item__join { margin-left: auto !important; }


/* ============================================================
   CARTE EVENEMENT — v9 (alignement bas des 2 fonds)
   Le footer etait remonte par le padding-bottom de la zone contenu.
   On le supprime => le fond minuteur descend au meme niveau que le
   fond de la date (memes hauteur ET position) ; date & minuteur
   restent centres verticalement => la date n'est plus trop basse.
   ============================================================ */
.sv-event-item__content {
  padding-bottom: 0 !important;
}

/* ============================================================
   CARTE EVENEMENT — v10 (demandes utilisateur)
   1) Logo jeu : sans conteneur ni contour ; hauteur = du HAUT du titre
      au BAS du sous-titre (meta). Largeur libre (ratio conserve).
   2) Fond du footer (minuteur + Rejoindre) : etendu sur toute la
      largeur de la zone contenu (full-bleed gauche/droite).
   3) Le fond de la date (.sv-event-item__media-footer) est colore
      dynamiquement en JS d'apres l'image de la banniere.
   ============================================================ */

/* --- 1) LOGO JEU : plus de conteneur ni contour ; hauteur = bloc titre ---
   La hauteur exacte (haut du titre -> bas du sous-titre) est appliquee en JS
   sur l'image (img height = hauteur de .sv-event-item__title-wrap, width auto).
   Le 2.6em ci-dessous n'est qu'un fallback avant l'execution du JS. */
.sv-event-item__head {
  align-items: center !important;
}
.sv-event-item__game-icon {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  outline: none !important;
  border: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  display: block !important;
}
.sv-event-item__game-icon img {
  display: block !important;
  width: auto !important;            /* pas de limite en longueur (ratio conserve) */
  height: 2.6em !important;          /* fallback avant JS */
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* --- 2) FOND FOOTER (minuteur + Rejoindre) etendu sur toute la largeur --- */
/* La zone contenu a un padding horizontal de 3.6cqw ; on annule ce padding
   pour le footer via des marges negatives, puis on le re-applique en interne
   pour que le texte ne colle pas aux bords. => le fond touche les 2 bords. */
.sv-event-item__footer {
  margin-left: -3.6cqw !important;
  margin-right: -3.6cqw !important;
  margin-bottom: 0 !important;
  width: auto !important;
  align-self: stretch !important;
  padding-left: 3.6cqw !important;
  padding-right: 3.6cqw !important;
}


/* ============================================================
   CONCEPT DE L'EVENEMENT — v2 (demandes utilisateur)
   1) Contour anime facon "item evenement" (cadre 2px, coins coupes),
      mais le balayage lumineux va du BAS vers le HAUT (visible sur les
      cotes gauche & droit).
   2) Titre "CONCEPT DE L'EVENEMENT" centre horizontalement.
   3) Les blocs VELRA / SPORTSTARS / DEADEND s'agrandissent pour remplir
      la hauteur du conteneur (plus d'espace vide en bas) — seule la zone
      grandit, le texte garde sa taille.
   ============================================================ */

/* --- 1) CONTOUR anime, balayage bas -> haut --- */
.sv-concept {
  background: transparent !important;
  outline: none !important;
  isolation: isolate;
}
/* cadre 2px : degrade vertical qui defile vers le haut */
.sv-concept::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(to top,
    #2a5e9e 0%,
    #5aa6f0 20%,
    #bfe2ff 38%,
    #6ff0e2 50%,
    #bfe2ff 62%,
    #5aa6f0 80%,
    #2a5e9e 100%) !important;
  background-size: 100% 300% !important;
  background-repeat: no-repeat !important;
  animation: sv-concept-sweep 4s linear infinite !important;
  /* meme forme que la carte (coins coupes) ; le centre est masque par ::after
     => il ne reste qu'un cadre regulier de 2px sur les 4 cotes */
  clip-path: var(--clip-card) !important;
  -webkit-clip-path: var(--clip-card) !important;
  filter: drop-shadow(0 0 6px rgba(94, 170, 255, 0.5)) !important;
}
/* defilement du degrade : la bande claire monte (bas -> haut) */
@keyframes sv-concept-sweep {
  0%   { background-position: 50% 100%; }
  100% { background-position: 50% -100%; }
}
/* fond interieur (inset 2px) qui masque le centre => seul le cadre reste visible.
   Pose APRES ::before dans l'ordre => recouvre le centre. */
.sv-concept::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  clip-path: var(--clip-card) !important;
  -webkit-clip-path: var(--clip-card) !important;
  background: rgba(8, 20, 50, 0.97) !important;   /* centre quasi opaque : seul le cadre 2px laisse voir le degrade anime */
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
/* le contenu reste au-dessus des deux pseudo-elements */
.sv-concept > * {
  position: relative;
  z-index: 1 !important;
}

/* --- 2) TITRE centre --- */
.sv-concept__title {
  text-align: center !important;
}

/* --- 3) Les blocs remplissent la hauteur (zone seulement, pas le texte) --- */
.sv-concept__panel.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.sv-concept__item {
  flex: 1 1 auto !important;   /* la zone grandit pour remplir, pas de vide en bas */
  min-height: 0 !important;
}


/* ============================================================
   SCROLLBAR PERSONNALISEE — liste d'evenements
   On masque la scrollbar native de .sv-events__scroll et on dessine
   une barre custom dans la gouttiere (.sv-events__nav) : rail "pilule"
   + bouton rond brillant qui descend selon la progression du scroll.
   La barre + le bouton sont injectes par communaute.js.
   ============================================================ */

/* 1) masquer la scrollbar native UNIQUEMENT sur mobile/tablette
      (sur PC on garde la scrollbar native stylee — voir bloc @media
      min-width: 1300.02px). */
@media (max-width: 1300px) {
  .sv-events__scroll {
    scrollbar-width: none !important;          /* Firefox */
    -ms-overflow-style: none !important;       /* IE/Edge legacy */
  }
  .sv-events__scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;                  /* Chrome/Safari */
  }
}

/* 2) la gouttiere accueille la barre custom : on retire l'ancien trait */
.sv-events__nav.has-cscroll {
  padding: 6px 0 !important;
  justify-content: flex-start !important;
}
.sv-events__nav.has-cscroll::before {
  display: none !important;
}

/* ============================================================
   3) BARRE SCROLL CUSTOM — PARALLELOGRAMME 3D MODERNE
      Forme : double slant haut/bas, angle constant en px
      Rail : degrade navy profond -> cobalt eclaire
      Thumb : degrade cyan brillant glow
      Largeur generee, look premium
   ============================================================ */
.sv-cscroll {
  --bar-w: clamp(20px, 1.7vw, 30px);     /* legerement plus grande */
  --slant: clamp(4px, 0.35vw, 7px);      /* pente legere */

  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--bar-w);
  pointer-events: none;
  z-index: 3;
  -webkit-user-select: none;
          user-select: none;
}

/* RAIL — parallelogramme bleu marine, degrade 3D */
.sv-cscroll__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  background:
    linear-gradient(135deg,
      #051a4f 0%,
      #082d8e 28%,
      #0d4ab8 62%,
      #1968cd 100%) !important;
  /* chevron / ruban : V-notch en haut ET en bas (memes pentes que l'ancien parallelogramme) */
  clip-path: polygon(
    0 0,
    50% var(--slant),
    100% 0,
    100% 100%,
    50% calc(100% - var(--slant)),
    0 100%
  );
  -webkit-clip-path: polygon(
    0 0,
    50% var(--slant),
    100% 0,
    100% 100%,
    50% calc(100% - var(--slant)),
    0 100%
  );
  filter: drop-shadow(0 0 14px rgba(25, 104, 205, 0.45))
          drop-shadow(0 2px 8px rgba(5, 26, 79, 0.6));
  cursor: pointer;
  pointer-events: auto;
}

/* FILL — trail lumineux de progression, meme chevron que le rail */
.sv-cscroll__fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  height: 0;
  border-radius: 0 !important;
  background: linear-gradient(180deg,
    rgba(110, 210, 255, 0.55),
    rgba(45, 171, 255, 0.30)) !important;
  /* top chevron = rail, bottom = droit (sera recouvert par le thumb de toute facon) */
  clip-path: polygon(
    0 0,
    50% var(--slant),
    100% 0,
    100% 100%,
    0 100%
  );
  -webkit-clip-path: polygon(
    0 0,
    50% var(--slant),
    100% 0,
    100% 100%,
    0 100%
  );
  pointer-events: none;
  mix-blend-mode: screen;
}

/* THUMB — parallelogramme cyan brillant qui glisse */
.sv-cscroll__thumb,
.sv-cscroll .sv-cscroll__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bar-w) !important;
  height: calc(var(--bar-w) * 4) !important;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  background:
    linear-gradient(135deg,
      #8FDDFF 0%,
      #6CD0FF 22%,
      #4FB8FF 55%,
      #2DABFF 100%) !important;
  /* meme forme chevron exacte que le rail (V-notch haut + bas) */
  clip-path: polygon(
    0 0,
    50% var(--slant),
    100% 0,
    100% 100%,
    50% calc(100% - var(--slant)),
    0 100%
  );
  -webkit-clip-path: polygon(
    0 0,
    50% var(--slant),
    100% 0,
    100% 100%,
    50% calc(100% - var(--slant)),
    0 100%
  );
  filter:
    drop-shadow(0 0 12px rgba(108, 208, 255, 0.85))
    drop-shadow(0 0 22px rgba(45, 171, 255, 0.45));
  cursor: grab;
  pointer-events: auto;
  transition: filter 0.2s var(--ease-out), transform 0.12s var(--ease-out);
  will-change: top;
}
.sv-cscroll__thumb::after { content: none !important; }

.sv-cscroll__thumb:hover {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 16px rgba(143, 221, 255, 1))
    drop-shadow(0 0 28px rgba(45, 171, 255, 0.7));
}
.sv-cscroll__thumb.dragging {
  cursor: grabbing;
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 20px rgba(170, 230, 255, 1))
    drop-shadow(0 0 32px rgba(45, 171, 255, 0.85));
}


/* ============================================================
   SCROLLBAR CUSTOM — LAYOUT (ancrage hauteur + espacement large)
   Ancree sur .sv-events__list-wrap pour matcher la hauteur de Concept.
   ============================================================ */
@media (min-width: 1300.02px) {
  .sv-events {
    gap: clamp(64px, 5.6vw, 100px) !important;
    align-items: stretch !important;
  }

  .sv-events__left {
    position: relative;
    min-width: 0;
  }

  .sv-events__list-wrap {
    position: relative !important;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  .sv-events__scroll {
    padding-right: 0 !important;
  }

  .sv-events__nav {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 100% !important;
    /* centrage parfait dans le gap parent */
    margin-left: calc((clamp(64px, 5.6vw, 100px) - clamp(30px, 2.5vw, 48px)) / 2) !important;
    width: clamp(30px, 2.5vw, 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    z-index: 5 !important;
  }
}

/* ============================================================
   CONCEPT DE L'EVENEMENT — retrait des angles coupes
   (force des coins droits + bordure standard, override final)
   ============================================================ */
.sv-concept {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: rgba(8, 20, 50, 0.92) !important;
  outline: 1px solid var(--border) !important;
  outline-offset: -1px !important;
  border-radius: 4px;
}
.sv-concept::before,
.sv-concept::after {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 4px;
}


/* ============================================================
   ITEM EVENT — plus de fleche apres "Rejoindre maintenant"
   Specificite maximale pour battre tout autre rule / injection JS
   ============================================================ */
body .sv-event-item__join::after,
body .sv-page .sv-event-item__join::after,
body .sv-event-item__footer .sv-event-item__join::after,
.sv-event-item .sv-event-item__join::after {
  content: none !important;
  display: none !important;
}
/* au cas ou la fleche serait un caractere insere via :after content,
   on neutralise aussi tout span/svg "arrow" qui serait apres .sv-event-item__join */
.sv-event-item__join + .arrow,
.sv-event-item__join + svg,
.sv-event-item__join ~ .sv-event-item__join-arrow {
  display: none !important;
}

/* ============================================================
   CONCEPT — onglet jeu : largeur de l'icone = largeur du trait
   (suppression du padding horizontal pour qu'ils soient identiques)
   ============================================================ */
.sv-concept__tabs {
  border-bottom: 1px solid var(--border) !important;
  justify-content: flex-start !important;
}
.sv-concept__tab {
  gap: 0 !important;
  padding: 0 0 10px 0 !important;     /* aucun padding lateral */
  margin: 0 !important;
  position: relative;
  background: transparent !important;
  border: 0 !important;
  display: inline-block !important;   /* tab dimensionne par l'icone */
}
.sv-concept__tab .sv-concept__tab-icon,
.sv-concept__tab img {
  width: clamp(100px, 8vw, 140px) !important;   /* icone GROSSE */
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  opacity: 1 !important;
}
/* trait sous l'onglet ACTIF : exactement la meme largeur que l'icone
   (tab_width = icon_width car plus de padding lateral) */
.sv-concept__tab.active::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent-teal)) !important;
}

/* ============================================================
   CONCEPT — titre avec icone livre a gauche
   ============================================================ */
.sv-concept__title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100%;
}
.sv-concept__title .sv-concept__title-icon {
  width: clamp(20px, 1.6vw, 26px);
  height: clamp(20px, 1.6vw, 26px);
  flex-shrink: 0;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(94, 170, 255, 0.45));
}
.sv-concept__title .sv-concept__title-text {
  display: inline-block;
}

/* ============================================================
   AJUSTEMENTS DEMANDES (overrides)
   ============================================================ */

/* 1) VERT — TOUTE la barre sous la banniere prend les couleurs de l'image,
   automatiquement (gere par communaute.js).
   Couche 1 (::before) : banniere FLOUTEE -> repli colore qui marche partout.
   Couche 2 (::after)  : degrade net des couleurs extraites (si dispo),
   pose par-dessus le flou. Si rien n'est dispo -> bleu de repli. */
.sv-event-item__media-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(120deg, rgba(94, 170, 255, 0.14), rgba(55, 230, 201, 0.12)) !important;
}
.sv-event-item__media-footer::before {
  content: "";
  position: absolute;
  inset: -50px;
  z-index: -2;
  background-image: var(--ev-img);
  background-size: cover;
  background-position: center bottom; /* repli : bas de l'image floute */
  filter: blur(24px) saturate(1.3);
  transform: scale(1.3);
}
.sv-event-item__media-footer::after {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: -1;
  /* ligne de pixels du bas de l'image, etiree verticalement jusqu'en bas,
     puis floutee -> la barre prolonge exactement le bas de la banniere */
  background: var(--ev-strip, transparent);
  background-size: 100% 100%;
  filter: blur(13px);
}
/* La pastille de date devient transparente pour se fondre dans la barre coloree */
.sv-event-item__media-footer .sv-event-item__date {
  background: transparent !important;
  outline-color: rgba(255, 255, 255, 0.25) !important;
}
.sv-event-item__media-footer .sv-event-item__date .sv-event-item__day,
.sv-event-item__media-footer .sv-event-item__date .sv-event-item__month,
.sv-event-item__media-footer .sv-event-item__date .sv-event-item__year {
  color: #ffffff !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}
/* La pastille de date devient transparente pour se fondre dans la barre coloree */
.sv-event-item__media-footer .sv-event-item__date {
  background: transparent !important;
  outline-color: rgba(255, 255, 255, 0.25) !important;
}
.sv-event-item__media-footer .sv-event-item__date .sv-event-item__day,
.sv-event-item__media-footer .sv-event-item__date .sv-event-item__month,
.sv-event-item__media-footer .sv-event-item__date .sv-event-item__year {
  color: #ffffff !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}

/* 2) VIOLET — logo Brawl Stars de l'onglet Concept : un peu plus grand */
.sv-concept__tab .sv-concept__tab-icon,
.sv-concept__tab img {
  width: clamp(58px, 4.8vw, 84px) !important;
}

/* Onglets jeu : pas de trait, toujours centres (1, 2 jeux ou plus) */
.sv-concept__tabs {
  border-bottom: 0 !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}
.sv-concept__tab::after,
.sv-concept__tab.active::after { content: none !important; display: none !important; }
.sv-concept__tab { padding: 0 !important; opacity: .55; transition: opacity .2s ease; }
.sv-concept__tab.active, .sv-concept__tab:hover { opacity: 1; }

/* 3) ORANGE — icone (livre) collee juste a cote du texte du titre,
   meme hauteur que le texte (haut et bas alignes sur les majuscules) */
.sv-concept__title {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.sv-concept__title .sv-concept__title-icon {
  flex-shrink: 0;
  height: 0.78em !important;   /* repli si l'unite cap n'est pas supportee */
  height: 1cap !important;     /* hauteur exacte des majuscules du texte */
  width: 0.78em !important;
  width: 1cap !important;
}
.sv-concept__title .sv-concept__title-text {
  white-space: nowrap;
}

/* ============================================================
   EVENT ITEMS — balayage de lumiere (gauche -> droite) sur le
   fond sous l'image + trait vertical colore par region
   ============================================================ */

/* --- 1) BALAYAGE DE LUMIERE sur le fond (media-footer) --------
   La lueur passe de gauche a droite. Elle est decalee item par
   item (1 puis 2 puis 3...) pour creer un effet de vague. */
.sv-event-item__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-100%);
  /* Lueur plus large + teinte proche du fond bleu de la barre (entouree en
     rouge) pour mieux s'imbriquer avec le fond */
  background: linear-gradient(
    100deg,
    transparent 12%,
    rgba(90, 150, 230, 0.10) 30%,
    rgba(140, 190, 255, 0.40) 50%,
    rgba(90, 150, 230, 0.10) 70%,
    transparent 88%
  );
  animation: svFooterSweep 4.4s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes svFooterSweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  6%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Decalage sequentiel : item 1, puis 2, puis 3... (effet de vague) */
.sv-event-item:nth-of-type(1) .sv-event-item__sweep { animation-delay: 0s; }
.sv-event-item:nth-of-type(2) .sv-event-item__sweep { animation-delay: 0.55s; }
.sv-event-item:nth-of-type(3) .sv-event-item__sweep { animation-delay: 1.1s; }
.sv-event-item:nth-of-type(4) .sv-event-item__sweep { animation-delay: 1.65s; }
.sv-event-item:nth-of-type(5) .sv-event-item__sweep { animation-delay: 2.2s; }
.sv-event-item:nth-of-type(6) .sv-event-item__sweep { animation-delay: 2.75s; }
.sv-event-item:nth-of-type(7) .sv-event-item__sweep { animation-delay: 3.3s; }
.sv-event-item:nth-of-type(8) .sv-event-item__sweep { animation-delay: 3.85s; }

/* La date/compteur restent au-dessus de la lueur */
.sv-event-item__media-footer .sv-event-item__date {
  position: relative !important;
  z-index: 2 !important;
}
.sv-event-item__media-footer .sv-event-item__countdown {
  position: relative;
  z-index: 2;
}

/* --- 2) TRAIT VERTICAL colore par region (bord droit de l'image)
   EMEA = bleu, NA = jaune, SA = vert, APAC = rouge --------------- */
.sv-event-item[data-region="EMEA"] { --region-line: #3d8bff; } /* bleu  */
.sv-event-item[data-region="NA"]   { --region-line: #ffd23d; } /* jaune */
.sv-event-item[data-region="SA"]   { --region-line: #34e06a; } /* vert  */
.sv-event-item[data-region="APAC"] { --region-line: #ff4d4d; } /* rouge */

/* Trait de couleur par region retire (la couleur reste sur la vignette/badge) */

/* --- 3) VIGNETTE / BADGE region : fond colore selon la region ----------
   EMEA bleu, APAC rouge, NA jaune, SA vert */
.sv-event-item[data-region="EMEA"] .sv-event-item__status {
  /* bleu en degrade + texte bleu fonce */
  background: linear-gradient(135deg, #5ea0ff 0%, #2360c8 100%) !important;
  color: #0c2c72 !important;
  outline-color: rgba(61, 139, 255, 0.95) !important;
}
.sv-event-item[data-region="APAC"] .sv-event-item__status {
  /* rouge en degrade + texte rouge fonce */
  background: linear-gradient(135deg, #ff6b6b 0%, #c52a2a 100%) !important;
  color: #6e0e0e !important;
  outline-color: rgba(255, 77, 77, 0.95) !important;
}
.sv-event-item[data-region="NA"] .sv-event-item__status {
  /* jaune en degrade + texte jaune/brun fonce */
  background: linear-gradient(135deg, #ffe07a 0%, #e0aa14 100%) !important;
  color: #5a3e00 !important;
  outline-color: rgba(255, 210, 61, 0.98) !important;
}
.sv-event-item[data-region="SA"] .sv-event-item__status {
  /* vert en degrade + texte vert fonce */
  background: linear-gradient(135deg, #46eb7d 0%, #15a54b 100%) !important;
  color: #07401d !important;
  outline-color: rgba(52, 224, 106, 0.98) !important;
}

/* --- 4) CONTENEUR "CONCEPT DE L'EVENEMENT" --------------------------
   Fond entierement transparent (conteneur + sections), pas d'angles
   coupes sur les sections, et une bande de fond degradee gauche->droite
   (transparente a droite) uniquement derriere le titre. */

/* a) conteneur transparent MAIS avec son contour visible */
.sv-concept {
  background: transparent !important;
  outline: 1px solid var(--border-md) !important;
  outline-offset: -1px !important;
}
.sv-concept::before {
  display: none !important;
  content: none !important;
}
.sv-concept::after {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* b) sections de description : transparentes, contour visible, sans angle coupe */
.sv-concept__item {
  background: transparent !important;
  outline: 1px solid var(--border) !important;
  outline-offset: -1px !important;
  border-radius: 3px;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.sv-concept__item:hover {
  background: transparent !important;
  outline-color: var(--border-md) !important;
}

/* c) bande de fond uniquement derriere le titre (degrade gauche -> droite,
   transparent a droite) */
.sv-concept__item-title {
  display: block;
  background: linear-gradient(90deg,
      rgba(94, 170, 255, 0.30) 0%,
      rgba(94, 170, 255, 0.16) 45%,
      rgba(94, 170, 255, 0) 100%) !important;
  padding: 5px 12px !important;
  border-radius: 2px;
}

/* Accessibilite : on coupe l'animation si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .sv-event-item__sweep { animation: none; opacity: 0; }
}


/* ============================================================
   EVENEMENTS EN VEDETTE — 3 grandes bannieres format PC
   carrousel auto droite -> gauche
   ============================================================ */
.sv-section--featured {
  position: relative;
  padding: clamp(40px, 6vw, 80px) 0;
  overflow: hidden;
}
.sv-featured__head {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  margin-bottom: clamp(24px, 3vw, 44px);
  text-align: center;
}
.sv-featured__head-main {
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
  width: 100%;
}
.sv-featured__title {
  font-family: var(--font-medium, "Azurio Medium", sans-serif);
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  text-align: center;
  margin: 0;
}
.sv-featured__sub {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* -------- LEGENDE (a droite du titre) -------------------------------
   - Ligne 1 : vignettes de type (EVENEMENT / TOURNOIS / CONCOURS),
     memes degrades que les .sv-event-item__status.sv-type--* des
     widgets d'evenement.
   - Ligne 2 : tags de region (EMEA / SA / NA / APAC) en italique
     colore, meme style que .sv-event-item__meta--tag.
   ------------------------------------------------------------------- */
.sv-featured__legend {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  padding-top: 4px;
}
.sv-featured__legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.sv-feat-pill {
  font-family: var(--font-body);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  line-height: 1.15;
  border-radius: 2px;
  color: #0c2c72;
  background: #7ab4ff;
  white-space: nowrap;
}
.sv-feat-pill--tournoi  { background: linear-gradient(135deg, #7ab4ff 0%, #3a72d8 100%); color: #0c2c72; }
.sv-feat-pill--event    { background: linear-gradient(135deg, #9aa6ff 0%, #9d5cff 100%); color: #2c1170; }
.sv-feat-pill--concours { background: linear-gradient(135deg, #ff8a8a 0%, #e0353c 100%); color: #4a0a0e; }

.sv-feat-tag {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sv-feat-tag--emea { color: #3d8bff; }
.sv-feat-tag--na   { color: #ffd23d; }
.sv-feat-tag--sa   { color: #34e06a; }
.sv-feat-tag--apac { color: #ff4d4d; }

@media (max-width: 720px) {
  .sv-featured__head {
    align-items: center;
    text-align: center;
  }
}

/* Fenetre du carrousel : occupe toute la largeur de .sv-inner (memes marges
   que la section du haut). Sert de container pour dimensionner les cartes. */
.sv-featured__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  /* marge verticale pour que la banniere puisse monter au survol sans etre rognee */
  padding: 22px 0 34px;
}

/* Traits fins minimalistes aux bords du carrousel, a la hauteur des cartes */
.sv-featured__viewport::before,
.sv-featured__viewport::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 34px;
  width: 1px;
  background: rgba(94, 170, 255, 0.35);
  pointer-events: none;
  z-index: 10;
}
.sv-featured__viewport::before { left: 0; }
.sv-featured__viewport::after  { right: 0; }

/* Piste qui defile : chaque evenement n'apparait qu'une fois */
.sv-featured__track {
  --feat-gap: clamp(14px, 1.6vw, 26px);
  display: flex;
  gap: var(--feat-gap);
  width: max-content;
  will-change: transform;
  animation: sv-feat-scroll 38s linear infinite;
}
/* Le survol NE met PLUS le defilement en pause (demande user) :
   les cartes continuent de defiler meme curseur au-dessus. */
@keyframes sv-feat-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Carte = grande banniere format PC (16:9) + infos dessous
   Largeur calee pour afficher 3 bannieres (PC/tablette) et 1 (mobile),
   en s'appuyant sur la largeur du carrousel (container query units) et en
   tenant compte des gouttieres entre cartes. */
.sv-feat-card {
  flex: 0 0 auto;
  /* PC : 3 bannieres visibles (100cqw reparti en 3 - 2 gouttieres). */
  width: calc((100cqw - 2 * var(--feat-gap)) / 3);
  text-decoration: none;
  display: block;
  transition: transform 0.35s var(--ease, ease);
}
/* Tablette (<= 1299.98px) : 2 bannieres visibles. */
@media (max-width: 1300px) {
  .sv-feat-card { width: calc((100cqw - var(--feat-gap)) / 2); }
}
/* Mobile (<= 600px) : 1 banniere visible (pleine largeur du viewport). */
@media (max-width: 600px) {
  .sv-feat-card { width: 100cqw; }
}
.sv-feat-card:hover { transform: translateY(-6px); }

.sv-feat-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  outline: 1px solid var(--border);
  outline-offset: -1px;
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%,
    0 calc(100% - 6px), 0 6px);
  background: #0a1424;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.sv-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* (Zoom de l'image au survol SUPPRIME — demande user) */

/* Survol : la banniere S'ASSOMBRIT et une icone "rejoindre"
   (fleche dans un carre fin, couleur accent bleu) apparait — pro & minimaliste.
   Le carre tourne en continu : carre -> losange -> pause -> carre, avec une
   courbe de vitesse lente-rapide-lente. La fleche reste parfaitement fixe. */
.sv-feat-card__shine {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 20, 0);
  transition: background-color 0.35s ease;
  pointer-events: none;
}
.sv-feat-card:hover .sv-feat-card__shine {
  background: rgba(2, 8, 20, 0.62);
}

/* Carre fin tournant — rotation TOUJOURS vers la droite (jamais de retour),
   et animation d'entree/sortie douce (opacity + scale, independants du spin) */
.sv-feat-card__shine::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(46px, 4.5vw, 64px);
  height: clamp(46px, 4.5vw, 64px);
  translate: -50% -50%;
  scale: 0.8;
  transform: rotate(0deg);
  opacity: 0;
  transition: opacity 0.35s ease, scale 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  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;
  z-index: 1;
  animation: sv-feat-square-spin 1.8s linear infinite;
}
.sv-feat-card:hover .sv-feat-card__shine::before,
.sv-feat-card:focus-visible .sv-feat-card__shine::before {
  opacity: 1;
  scale: 1;
}

/* Fleche fixe au centre */
.sv-feat-card__shine::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(18px, 1.8vw, 26px);
  height: clamp(18px, 1.8vw, 26px);
  translate: -50% -50%;
  scale: 0.8;
  opacity: 0;
  transition: opacity 0.35s ease, scale 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  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;
  z-index: 2;
}
.sv-feat-card:hover .sv-feat-card__shine::after,
.sv-feat-card:focus-visible .sv-feat-card__shine::after {
  opacity: 1;
  scale: 1;
}

/* Sens unique : 0deg -> 45deg -> 90deg (= visuellement 0deg) puis boucle. */
@keyframes sv-feat-square-spin {
  0%   { transform: rotate(0deg);  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  25%  { transform: rotate(45deg); animation-timing-function: linear; }
  50%  { transform: rotate(45deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  75%  { transform: rotate(90deg); animation-timing-function: linear; }
  100% { transform: rotate(90deg); }
}


.sv-feat-card__info {
  padding-top: 14px;
}
/* Ligne date (gauche) + region (tout a droite) */
.sv-feat-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sv-feat-card__date {
  font-family: var(--font-body);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Badge region, aligne a droite, colore selon la zone */
.sv-feat-card__region {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sv-feat-card__region--emea { color: #3d8bff; }
.sv-feat-card__region--na   { color: #ffd23d; }
.sv-feat-card__region--sa   { color: #34e06a; }
.sv-feat-card__region--apac { color: #ff4d4d; }
.sv-feat-card__name {
  margin: 0;
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-size: clamp(20px, 2.2vw, 34px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.05;
}
/* Ligne titre + vignette de type (a cote du titre, sous la banniere) */
.sv-feat-card__name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.sv-feat-card__name-row .sv-feat-card__name { flex: 0 1 auto; }
.sv-feat-card__name-row .sv-feat-pill {
  flex: 0 0 auto;
  align-self: center;
  /* Vignette (CONCOURS / EVENEMENT / TOURNOI) calee a DROITE sous la card */
  margin-left: auto;
}

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

/* ============================================================
   EFFET DE CLIC (press) sur les filtres Regions / Jeux
   ============================================================ */
.sv-fdrop__btn:active {
  transform: scale(0.95);
}
.sv-fdrop__btn.is-press {
  animation: sv-fdrop-press 0.35s var(--ease, ease);
}
@keyframes sv-fdrop-press {
  0%   { transform: scale(1);    outline-color: var(--accent); box-shadow: 0 0 0 0 rgba(94, 170, 255, 0.45); }
  35%  { transform: scale(0.93); outline-color: var(--accent); box-shadow: 0 0 0 6px rgba(94, 170, 255, 0.18); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(94, 170, 255, 0); }
}


/* 4 bannieres en PC -> 1 GRANDE banniere en mobile (look premium).
   On affiche une seule banniere bien large + un petit apercu de la
   suivante (~12cqw) pour garder l'effet carrousel/defilement. */
/* Plus de palier a 600px : la largeur fluide (clamp 48cqw / 620px / 100cqw)
   gere seule la transition progressive 2 bannieres -> 1 banniere. */

/* ============================================================
   CARTE EVENEMENT — AJUSTEMENTS DEMANDES (v11)
   1) VERT  : badge region en BAS A DROITE de l'image
   2) BLEU  : annee "2026" = meme taille + meme police que le jour
   3) ROUGE : lettres j/h/m/s A DROITE des chiffres (cote a cote)
   4) JAUNE : sous-titre = un seul mot "TOURNAMENT", couleur degradee
   ============================================================ */

/* --- 1) VERT : badge region colle en bas a droite de l'image --- */
.sv-event-item__banner .sv-event-item__status {
  top: auto !important;
  bottom: 10px !important;
  right: 10px !important;
  left: auto !important;
}

/* --- 2) BLEU : l'annee adopte la taille ET la police du jour ---
   (meme specificite 0,2,0 que les regles du jour pour suivre la cascade) */
.sv-event-item__media-footer .sv-event-item__year {
  font-family: var(--font-display, "Bebas Neue", sans-serif) !important;
  font-size: clamp(13px, 1.2vw, 17px) !important;
  font-weight: inherit !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  opacity: 1 !important;
}
/* Aligne l'annee sur le jour a chaque palier responsive (le jour change de taille) */
@media (min-width: 1300.02px) {
  .sv-event-item__media-footer .sv-event-item__year { font-size: 2.35cqw !important; }
}
@media (max-width: 1300px) {
  .sv-event-item__media-footer .sv-event-item__year { font-size: max(12px, 2.35cqw) !important; }
}
@media (max-width: 400px) {
  .sv-event-item__media-footer .sv-event-item__year { font-size: 10px !important; }
}

/* --- 3) ROUGE : chiffre + lettre cote a cote (lettre a droite) --- */
.sv-event-item .countdown__unit {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 2px !important;
}
.sv-event-item .countdown__unit .countdown__l {
  margin-top: 0 !important;
}

/* --- 4) JAUNE : sous-titre unique "TOURNAMENT", couleur degradee aesthetic --- */
.sv-event-item__meta--tag {
  display: inline-block;
  font-style: italic !important;   /* TOURNAMENT en italique */
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(11px, 1vw, 14px) !important;
  line-height: 1.1;
  background: linear-gradient(95deg, #5eaaff 0%, #7fe9ff 45%, #38e6c9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 18px rgba(94, 170, 255, 0.22);
}


/* ============================================================
   CONTOUR ANIME DES ITEMS EVENT — couleurs tirees de l'IMAGE (v12)
   Les variables --ev-c1 / --ev-c2 / --ev-c3 sont posees par
   communaute.js (couleurs dominantes vives de la banniere de chaque
   carte). La forme du cadre, les coins coupes et la rotation restent
   IDENTIQUES : seules les couleurs du degrade changent selon l'image.
   Repli (avant chargement JS ou image cross-origin) = bleus d'origine.
   ============================================================ */
.sv-event-item::before {
  background:
    conic-gradient(from var(--sv-angle),
      var(--ev-c1, #2a5e9e) 0deg,
      var(--ev-c2, #5aa6f0) 60deg,
      var(--ev-c3, #bfe2ff) 130deg,
      var(--ev-c2, #6ff0e2) 205deg,
      var(--ev-c1, #5aa6f0) 290deg,
      var(--ev-c1, #2a5e9e) 360deg) !important;
}
/* Au survol : memes couleurs (issues de l'image), juste plus lumineux */
.sv-event-item:hover::before {
  background:
    conic-gradient(from var(--sv-angle),
      var(--ev-c1, #3a78c8) 0deg,
      var(--ev-c2, #74bbff) 60deg,
      var(--ev-c3, #eaf5ff) 130deg,
      var(--ev-c2, #8df5ea) 205deg,
      var(--ev-c1, #74bbff) 290deg,
      var(--ev-c1, #3a78c8) 360deg) !important;
  filter: drop-shadow(0 0 12px rgba(140, 200, 255, 0.9)) !important;
  animation-duration: 3.6s;
}


/* ============================================================
   DOUBLE CONTOUR (v13)
   Contour 1 = cadre FONCE (bleu presque noir), STATIQUE, a l'exterieur.
   Contour 2 = cadre anime qui prend les couleurs de l'image, decale de
   2px vers l'interieur => il vient JUSTE APRES le contour fonce.
   Meme epaisseur (2px) et memes coins coupes pour les deux.
   ============================================================ */

/* --- Contour 1 : cadre fonce statique, JUSTE A L'INTERIEUR du contour
       colore (decale de 2px vers le centre) --- */
.sv-event-item__frame {
  content: "";
  position: absolute;
  inset: 2px;
  top: 2px; left: 2px; right: 2px; bottom: 2px;
  z-index: 6;                 /* au-dessus du contour anime (z-index 5) */
  pointer-events: none;
  background: #060d1c;        /* bleu tres fonce, presque noir */
  clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    2px 2px,
    calc(100% - var(--cut-lg)) 2px,
    calc(100% - 2px) var(--cut-lg),
    calc(100% - 2px) calc(100% - 2px),
    var(--cut-lg) calc(100% - 2px),
    2px calc(100% - var(--cut-lg)));
  -webkit-clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    2px 2px,
    calc(100% - var(--cut-lg)) 2px,
    calc(100% - 2px) var(--cut-lg),
    calc(100% - 2px) calc(100% - 2px),
    var(--cut-lg) calc(100% - 2px),
    2px calc(100% - var(--cut-lg)));
}

/* --- Contour 2 : le cadre anime colore reste au BORD EXTERIEUR (inset 0),
       le contour fonce venant juste a l'interieur --- */
.sv-event-item::before {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* ============================================================
   MAJ — Events pleine largeur (le Concept devient sa propre
   section sous "En vedette"). Sur desktop (>=901px) la liste
   d'events passe en grille 2 colonnes ; la barre de scroll
   custom (.sv-events__nav) reste a l'extreme droite.
   ============================================================ */
@media (min-width: 1300.02px) {
  .sv-events {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .sv-events__left {
    width: 100%;
  }
  .sv-events__scroll {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: max-content;
    align-items: start;
    align-content: start;
    column-gap: clamp(14px, 1.4vw, 22px);
    row-gap: 14px;
  }
}

/* Section dediee "Concept de l'evenement" sous la section En vedette */
.sv-section--concept .sv-concept {
  flex: 0 1 auto;
}
.sv-section--concept .sv-inner {
  position: relative;
  z-index: 2;
}


/* ============================================================
   MAJ 2 — Concept pleine largeur + compact ; barre de scroll
   events ramenee dans la marge droite (sans depasser vers le
   bord de l'ecran), items events retrecis en consequence.
   ============================================================ */

/* Concept : rejoint les marges gauche/droite de la page (comme
   les sections events / featured), au-dela de 1100px. */
@media (min-width: 1101px) {
  .sv-section--concept .sv-inner {
    max-width: none;
    width: 100%;
    padding: 0 var(--page-pad, clamp(20px, 4vw, 100px));
  }
}

@media (min-width: 1300.02px) {
  /* Concept plus large et MOINS haut : les 3 blocs passent
     cote a cote au lieu d'etre empiles. */
  .sv-section--concept .sv-concept {
    flex: 0 0 auto !important;
  }
  .sv-section--concept .sv-concept__panel.active {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(12px, 1vw, 18px) !important;
    align-items: start !important;
  }

  /* Barre de scroll events ancree a l'EXTREME droite de la page :
     on annule la marge laterale (--page-pad) a sa droite pour qu'elle
     rejoigne le bord droit de la zone de contenu, sans espace vide. */
  .sv-events__list-wrap {
    position: relative !important;
  }
  .sv-events__nav {
    left: auto !important;
    right: 0 !important;
    margin-left: 0 !important;
  }
  /* La barre VISIBLE se cale a droite de la gouttiere pour finir
     exactement au bord du contenu, comme tous les conteneurs. */
  .sv-events__nav .sv-cscroll {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
  /* On reserve la place de la barre a droite -> les items events
     se retrecissent sans casser leur format. */
  .sv-events__scroll {
    padding-right: calc(clamp(30px, 2.5vw, 48px) + 16px) !important;
  }
}


/* ============================================================
   MAJ 3 — Concept compact sur PC : on annule le scaling "cqw"
   (qui rendait le texte enorme en pleine largeur) et on repasse
   en tailles fixes mesurees. Layout 2 colonnes (2 puis 2).
   ============================================================ */
@media (min-width: 1300.02px) {
  .sv-section--concept .sv-concept {
    container-type: normal !important;   /* desactive le scaling cqw */
    padding: clamp(18px, 1.6vw, 28px) !important;
    max-width: 1200px;                   /* recentre + limite la largeur sur grands ecrans */
    margin-left: auto;
    margin-right: auto;
  }
  .sv-section--concept .sv-concept__title {
    font-size: clamp(18px, 1.6vw, 26px) !important;
    margin: 0 0 16px 0 !important;
  }
  .sv-section--concept .sv-concept__tabs {
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  .sv-section--concept .sv-concept__tab {
    font-size: clamp(11px, 0.9vw, 13px) !important;
    padding: 8px 14px !important;
  }
  .sv-section--concept .sv-concept__item {
    padding: clamp(11px, 1vw, 15px) clamp(13px, 1.1vw, 17px) !important;
  }
  .sv-section--concept .sv-concept__item-title {
    font-size: clamp(14px, 1.05vw, 17px) !important;
    margin: 0 0 6px 0 !important;
  }
  .sv-section--concept .sv-concept__item-desc {
    font-size: clamp(12px, 0.85vw, 14px) !important;
    line-height: 1.55 !important;
  }
}


/* ============================================================
   MAJ 4 — Contour FONCE des items event (.sv-event-item__frame)
   passe de "presque noir" a "bleu presque blanc". L'autre
   contour (anime/colore) reste inchange.
   ============================================================ */
.sv-event-item__frame {
  background: #e6f0ff !important;
}


/* ============================================================
   MAJ 5 — Demandes utilisateur :
   1) Le contour BLANC (.sv-event-item__frame) devient un bleu
      un tout petit peu plus fonce.
   2) Le 2e contour ANIME (.sv-event-item::before) devient 1.5x
      plus epais (2px -> 3px) ; le cadre interieur est decale en
      consequence pour rester juste a l'interieur.
   3) Le conteneur "Concept de l'evenement" s'elargit jusqu'aux
      marges de la page (fin du max-width 1200px centre).
   ============================================================ */

/* 1) Contour blanc -> bleu un tout petit peu plus fonce */
.sv-event-item__frame {
  background: #cdddf7 !important;
}

/* 2) Contour anime 1.5x plus epais : bande 3px au lieu de 2px */
.sv-event-item::before {
  clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    3px 3px,
    calc(100% - var(--cut-lg)) 3px,
    calc(100% - 3px) var(--cut-lg),
    calc(100% - 3px) calc(100% - 3px),
    var(--cut-lg) calc(100% - 3px),
    3px calc(100% - var(--cut-lg))) !important;
  -webkit-clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    3px 3px,
    calc(100% - var(--cut-lg)) 3px,
    calc(100% - 3px) var(--cut-lg),
    calc(100% - 3px) calc(100% - 3px),
    var(--cut-lg) calc(100% - 3px),
    3px calc(100% - var(--cut-lg))) !important;
}

/* Le cadre interieur (contour fonce/blanc) se decale a 3px pour
   rester juste a l'interieur du contour anime epaissi. */
.sv-event-item__frame {
  inset: 3px !important;
  top: 3px !important; left: 3px !important; right: 3px !important; bottom: 3px !important;
}

/* 3) Concept : largeur pleine jusqu'aux marges de la page
   (on annule le max-width 1200px centre de la MAJ 3). */
@media (min-width: 1300.02px) {
  .sv-section--concept .sv-concept {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



/* ============================================================
   MAJ 6 — Demandes utilisateur :
   1) Barre de recherche (filtre par titre d'evenement) a cote
      des filtres Region / Jeux -> stylee comme les dropdowns.
   2) Le contour BLANC (.sv-event-item__frame) devient un bleu
      fonce presque noir.
   3) Le contour ANIME pioche jusqu'a 4 couleurs de l'image
      (--ev-c1 / --ev-c2 / --ev-c3 / --ev-c4, posees par
      communaute.js).
   ============================================================ */

/* 2) Contour blanc -> bleu fonce presque noir */
.sv-event-item__frame {
  background: #060f22 !important;
}

/* 3) Contour anime : degrade conique sur 4 couleurs de l'image */
.sv-event-item::before {
  background:
    conic-gradient(from var(--sv-angle),
      var(--ev-c1, #2a5e9e) 0deg,
      var(--ev-c2, #5aa6f0) 90deg,
      var(--ev-c3, #bfe2ff) 180deg,
      var(--ev-c4, #6ff0e2) 270deg,
      var(--ev-c1, #2a5e9e) 360deg) !important;
}
.sv-event-item:hover::before {
  background:
    conic-gradient(from var(--sv-angle),
      var(--ev-c1, #3a78c8) 0deg,
      var(--ev-c2, #74bbff) 90deg,
      var(--ev-c3, #eaf5ff) 180deg,
      var(--ev-c4, #8df5ea) 270deg,
      var(--ev-c1, #3a78c8) 360deg) !important;
}

/* 1) Barre de recherche evenement (assortie aux dropdowns filtres) */
.sv-fsearch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  padding: 9px 14px;
  background: rgba(8, 20, 50, 0.6);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  clip-path: var(--clip-tag);
  transition: outline-color var(--tr), background var(--tr);
}
.sv-fsearch:hover { outline-color: var(--border-md); background: rgba(94, 170, 255, 0.08); }
.sv-fsearch:focus-within { outline-color: var(--accent); }
.sv-fsearch__icon { color: var(--text-muted); flex-shrink: 0; }
.sv-fsearch:focus-within .sv-fsearch__icon { color: var(--accent); }
.sv-fsearch__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sv-fsearch__input::placeholder {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
/* masque la croix native du type=search pour rester coherent */
.sv-fsearch__input::-webkit-search-decoration,
.sv-fsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }



/* ============================================================
   MAJ 7 — Corrections :
   1) Le contour fonce (.sv-event-item__frame) est repositionne
      pour s'emboiter EXACTEMENT a l'interieur du contour anime :
      son bord exterieur (3px) coincide avec le bord interieur du
      contour anime, memes coins coupes -> plus de decalage.
   2) Filtres : sur mobile/tablette la barre de recherche reste
      sur la MEME ligne que les dropdowns Region / Jeux.
   ============================================================ */

/* 1) Cadre fonce = bande de 3px a 5px, coins coupes alignes sur le
      contour anime (qui occupe 0 -> 3px). */
.sv-event-item__frame {
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  clip-path: polygon(evenodd,
    3px 3px,
    calc(100% - var(--cut-lg)) 3px,
    calc(100% - 3px) var(--cut-lg),
    calc(100% - 3px) calc(100% - 3px),
    var(--cut-lg) calc(100% - 3px),
    3px calc(100% - var(--cut-lg)),
    5px 5px,
    calc(100% - var(--cut-lg)) 5px,
    calc(100% - 5px) var(--cut-lg),
    calc(100% - 5px) calc(100% - 5px),
    var(--cut-lg) calc(100% - 5px),
    5px calc(100% - var(--cut-lg))) !important;
  -webkit-clip-path: polygon(evenodd,
    3px 3px,
    calc(100% - var(--cut-lg)) 3px,
    calc(100% - 3px) var(--cut-lg),
    calc(100% - 3px) calc(100% - 3px),
    var(--cut-lg) calc(100% - 3px),
    3px calc(100% - var(--cut-lg)),
    5px 5px,
    calc(100% - var(--cut-lg)) 5px,
    calc(100% - 5px) var(--cut-lg),
    calc(100% - 5px) calc(100% - 5px),
    var(--cut-lg) calc(100% - 5px),
    5px calc(100% - var(--cut-lg))) !important;
}

/* 2) Mobile / tablette : recherche a cote des filtres (pas en dessous) */
@media (max-width: 1300px) {
  .sv-events__filters {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .sv-events__filters .sv-fdrop { flex: 0 1 auto; min-width: 0; }
  .sv-events__filters .sv-fdrop__btn {
    min-width: 0 !important;
    padding: 9px 10px !important;
  }
  .sv-fsearch {
    flex: 1 1 70px !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
  }
}



/* ============================================================
   MAJ 8 — Corrections :
   1) PC : 6 items visibles (3 rangees x 2 colonnes) au lieu de 4.
   2) Mobile : la barre de recherche + filtres ne depassent plus
      la marge de la page (elements vraiment retractables, ellipsis).
   3) (molette desactivee sur les items -> gere en JS)
   ============================================================ */

/* 1) PC : 6 items visibles (3 rangees x 2 colonnes). La hauteur exacte
      est posee par le script inline (fit) ; on retire juste le plafond CSS
      pour ne pas couper la 3e rangee. */
@media (min-width: 1300.02px) {
  .sv-events__scroll {
    max-height: none !important;
  }
}

/* 2) Mobile / tablette : filtres + recherche sur une ligne SANS debordement */
@media (max-width: 1300px) {
  .sv-events__filters {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .sv-events__filters .sv-fdrop {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  .sv-events__filters .sv-fdrop__btn {
    min-width: 0 !important;
    width: 100% !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;
    gap: 6px !important;
  }
  /* le libelle du dropdown se tronque au lieu de pousser la largeur */
  .sv-events__filters .sv-fdrop__val {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sv-fsearch {
    flex: 1 1 64px !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;
  }
}



/* ============================================================
   MAJ 9 — Mobile / tablette (<= 900px) :
   1) Recherche : les filtres s'alignent EXACTEMENT sur la largeur
      des cartes (suppression de la gouttiere verticale 30px) -> la
      barre de recherche ne depasse plus la marge de la page.
   2) Les events passent en DEFILEMENT HORIZONTAL avec une BARRE DE
      SCROLL HORIZONTALE visible (plus de scroll vertical).
   ============================================================ */
@media (max-width: 1300px) {

  /* 1) plus de gouttiere : la barre custom passe SOUS la liste */
  .sv-events, .sv-events__left, .sv-events__list-wrap {
    min-width: 0 !important;
  }
  .sv-events__list-wrap {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* filtres strictement dans le cadre, recherche bornee a droite */
  .sv-events__filters {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
  }

  /* 2) GRILLE 2 colonnes, defilement VERTICAL : 4 events visibles
        (2 en haut + 2 en bas). Le reste defile, la barre custom est dessous. */
  .sv-events__scroll {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    /* rangees a HAUTEUR FIXE => 2 rangees completes, jamais coupees,
       et meme forme de card quelle que soit la largeur de l'ecran. */
    grid-auto-rows: var(--ev-row, 300px) !important;
    align-content: start !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    /* 2 rangees visibles = 2 hauteurs de card + 1 gap */
    max-height: calc(2 * var(--ev-row, 300px) + 14px) !important;
    gap: 14px !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  /* scrollbar NATIVE masquee : seule la barre custom (sous les events) pilote */
  .sv-events__scroll {
    scrollbar-width: none !important;            /* Firefox */
    -ms-overflow-style: none !important;
  }
  .sv-events__scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* chaque carte : remplit sa rangee (hauteur fixe), mode PORTRAIT compact
     (image au-dessus, infos en dessous). */
  .sv-events__scroll > .sv-event-item {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;       /* media au-dessus du contenu */
  }
  /* description bornee a 2 lignes => toutes les cards ont la meme hauteur,
     le bas (compte a rebours + Rejoindre) reste toujours visible. */
  .sv-events__scroll > .sv-event-item .sv-event-item__desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}



/* ============================================================
   MAJ 10 — Reutilisation de LA MEME barre custom (.sv-cscroll)
   en mode HORIZONTAL sous les events (mobile / tablette <= 900px).
   On n'ajoute PAS de barre native : c'est la pilule custom existante
   qui pilote maintenant scrollLeft (voir communaute.js).
   ============================================================ */
@media (max-width: 1300px) {
  /* la gouttiere verticale devient une bande horizontale SOUS la liste.
     position: relative => la barre absolue (.sv-cscroll) est CONTENUE
     dans cette bande et reste donc SOUS les events (et non au milieu). */
  .sv-events__nav {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(22px, 7vw, 30px) !important;
    margin-top: 12px !important;
    padding: 0 !important;
  }
  .sv-events__nav.has-cscroll {
    padding: 0 !important;
    justify-content: center !important;
  }

  /* conteneur de la barre : pleine largeur, fine bande horizontale */
  .sv-cscroll.is-horizontal {
    --bar-w: clamp(14px, 4vw, 20px);
    --slant: clamp(5px, 1.4vw, 9px);
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    height: var(--bar-w) !important;
  }

  /* RAIL horizontal : parallelogramme couche */
  .sv-cscroll.is-horizontal .sv-cscroll__track {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
  }

  /* FILL horizontal : ancre a gauche, largeur posee par le JS (en !important) */
  .sv-cscroll.is-horizontal .sv-cscroll__fill {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    background: linear-gradient(90deg,
      rgba(110, 210, 255, 0.55),
      rgba(45, 171, 255, 0.30)) !important;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
  }

  /* THUMB horizontal : large, centre vertical, position 'left' posee par le JS */
  .sv-cscroll.is-horizontal .sv-cscroll__thumb {
    top: 0 !important;
    height: var(--bar-w) !important;
    width: calc(var(--bar-w) * 2.4) !important;
    will-change: left !important;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
  }
}
/* ============================================================
   MAJ 11 — FIX FORME DES ITEMS EVENT EN MOBILE (<= 900px)
   ─────────────────────────────────────────────────────────
   Probleme : entre la version la plus large (~900px) et la
   plus etroite (~320px), les cartes changeaient de FORME
   (vignette horizontale, padding fixes, hauteur fixe 300px)
   au lieu de simplement RETRECIR.

   Solution :
   • chaque carte verrouille sa forme verticale (image en haut
     + infos en dessous) via aspect-ratio (portrait constant).
   • container-type: inline-size + valeurs internes en cqw
     => tous les elements scalent dans la MEME proportion
     quelle que soit la largeur de la colonne.
   • on neutralise les anciennes regles @<=600px / @<=420px
     qui repassaient les cards en layout horizontal.
   ============================================================ */
@media (max-width: 1300px) {
  /* La grille n'impose plus de hauteur fixe : c'est l'aspect-ratio
     des cards qui pilote la hauteur => meme forme partout. */
  .sv-events__scroll {
    grid-auto-rows: auto !important;
    max-height: calc(2 * (50cqw - 7px) / 0.7 + 14px) !important;
  }

  /* Carte : portrait verrouille (ratio constant ~ 0.70 largeur / 1 hauteur).
     container-type:inline-size => les valeurs cqw internes
     se basent sur la largeur de la carte. */
  .sv-events__scroll > .sv-event-item {
    grid-template-columns: 1fr !important;
    /* Hauteur pilotee par le contenu (plus de gros vide au milieu) :
       on retire l'aspect-ratio fixe et la rangee contenu en 1fr. */
    grid-template-rows: auto auto !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    container-type: inline-size;
  }

  /* La banniere occupe toute la largeur de la carte et garde un 16:9 strict. */
  .sv-events__scroll > .sv-event-item .sv-event-item__media {
    width: 100% !important;
    height: auto !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__banner {
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
  }

  /* ----- media-footer (date + countdown sous l'image) ----- */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer {
    padding: 3cqw 3.5cqw !important;
    gap: 2cqw !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer .sv-event-item__date {
    padding: 1.4cqw 2.4cqw !important;
    gap: 1.4cqw !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer .sv-event-item__day {
    font-size: 5cqw !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer .sv-event-item__month {
    font-size: 2.8cqw !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer .sv-event-item__year {
    font-size: 5cqw !important;
  }

  /* Badge region (bas-droite de l'image) */
  .sv-events__scroll > .sv-event-item .sv-event-item__status {
    font-size: 2.8cqw !important;
    padding: 1.3cqw 2.6cqw !important;
    bottom: 2.5cqw !important;
    right: 2.5cqw !important;
  }

  /* Countdown (j h m s) */
  .sv-events__scroll > .sv-event-item .countdown__n  { font-size: 5cqw !important; }
  .sv-events__scroll > .sv-event-item .countdown__l  { font-size: 2.5cqw !important; }
  .sv-events__scroll > .sv-event-item .countdown__sep{ font-size: 4cqw !important; }

  /* ----- contenu texte ----- */
  .sv-events__scroll > .sv-event-item .sv-event-item__content {
    padding: 4cqw 4.2cqw !important;
    gap: 2.5cqw !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__head {
    gap: 3cqw !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__game-icon {
    /* Le logo (v10) est dimensionne par JS : height = hauteur du bloc titre,
       width auto. Le conteneur doit donc s'adapter a l'image (auto) au lieu
       d'etre force a 11cqw, sinon l'image deborde PAR-DESSUS le titre. */
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__title {
    font-size: 5.2cqw !important;
    line-height: 1.05 !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__meta,
  .sv-events__scroll > .sv-event-item .sv-event-item__meta--tag {
    font-size: 3cqw !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__desc {
    font-size: 3.4cqw !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ----- footer (date + countdown + Rejoindre) ----- */
  .sv-events__scroll > .sv-event-item .sv-event-item__footer {
    padding-top: 2.8cqw !important;
    gap: 2.5cqw !important;
    flex-wrap: nowrap !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .btn,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .btn--sm,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__join {
    padding: 2cqw 3.5cqw !important;
    font-size: 3cqw !important;
    margin-left: auto !important;
  }
}

/* On neutralise definitivement les anciennes regles qui repassaient
   les cards en horizontal sur tres petits ecrans : la forme reste
   verticale, seule la taille rapetisse. */
@media (max-width: 600px) {
  .sv-events__scroll > .sv-event-item,
  .sv-event-item {
    grid-template-columns: 1fr !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__banner {
    aspect-ratio: 16 / 9 !important;
  }
}

@media (max-width: 420px) {
  .sv-events__scroll > .sv-event-item,
  .sv-event-item {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   MAJ 12 — FORME CONSTANTE DE LA BANDE (MOBILE / TABLETTE seulement)
   ─────────────────────────────────────────────────────────────
   Probleme : sur mobile, la bande sous l'image (date) et le footer
   utilisaient `height: clamp(48px, 7.5cqw, 60px)`. Le MIN 48px en
   PIXELS restait constant tandis que la carte retrecissait => la
   bande grossissait visuellement et n'avait plus la meme forme.

   Solution : UNIQUEMENT sur mobile / tablette (<= 1199.98px),
   on definit la hauteur des deux bandes en cqw pur (proportionnel
   a la largeur de la carte). Sur PC (>= 1200px) on NE TOUCHE A
   RIEN : la regle d'origine `clamp(48px, 7.5cqw, 60px)` continue
   de s'appliquer et la mise en page reste identique.
   ============================================================ */
@media (max-width: 1300px) {
  /* La carte sert deja de conteneur (container-type: inline-size)
     a partir de la MAJ 11 (>=901px et grille mobile). On le re-confirme
     ici pour que cqw soit toujours valide sur tout mobile/tablette. */
  .sv-events__scroll > .sv-event-item,
  .sv-event-item {
    container-type: inline-size;
  }

  /* Hauteur des 2 bandes : 13% de la largeur de la carte.
     => meme forme du PC large jusqu'au mobile tres etroit. */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer,
  .sv-event-item .sv-event-item__media-footer,
  .sv-event-item .sv-event-item__footer {
    height: 13cqw !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Padding horizontal proportionnel (pas de px). */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer,
  .sv-event-item .sv-event-item__media-footer {
    padding-left: 3.5cqw !important;
    padding-right: 3.5cqw !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__footer,
  .sv-event-item .sv-event-item__footer {
    padding-left: 3.6cqw !important;
    padding-right: 3.6cqw !important;
  }
}


/* ============================================================
   MAJ 13 — REORGANISATION COMPTEUR / DATE / BADGE REGION
   ─────────────────────────────────────────────────────────────
   - Suppression des ":" du compteur (deja retire du DOM par le JS,
     on neutralise aussi en CSS au cas ou).
   - Compteur deplace dans la bande sous l'image, juste a cote
     de la date.
   - Badge region deplace dans le footer, a gauche de "Rejoindre".
   ============================================================ */

/* 1) Securite : si un ":" reste dans le DOM, on le masque */
.sv-event-item .countdown__sep {
  display: none !important;
}

/* 2) Compteur dans la bande media-footer (a cote de la date) */
.sv-event-item__media-footer {
  /* date a gauche, compteur a droite */
  justify-content: space-between !important;
  gap: clamp(8px, 1vw, 14px) !important;
}
.sv-event-item__media-footer .sv-event-item__countdown {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: clamp(4px, 0.6vw, 8px) !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
  background: transparent !important;
}
/* unite (chiffre + lettre cote a cote) reste sans separateur */
.sv-event-item__media-footer .sv-event-item__countdown .countdown__unit {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 2px !important;
}
/* couleur des chiffres lisible sur le fond colore de la bande */
.sv-event-item__media-footer .sv-event-item__countdown .countdown__n {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  font-family: var(--font-display, "Bebas Neue", sans-serif) !important;
  font-size: clamp(13px, 1.2vw, 17px) !important;
  line-height: 1 !important;
}
.sv-event-item__media-footer .sv-event-item__countdown .countdown__l {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(8px, 0.7vw, 10px) !important;
  letter-spacing: 0.02em;
}

/* 3) Badge region dans le footer (a gauche de "Rejoindre")
   - on annule le positionnement absolu d'origine (banner)
   - on le place en flux a cote des autres elements */
.sv-event-item__footer .sv-event-item__status {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 auto 0 0 !important;     /* colle a gauche, "Rejoindre" pousse a droite */
  flex-shrink: 0 !important;
  align-self: center !important;
  z-index: auto !important;
}
/* On force le bouton "Rejoindre" a rester a droite quand le badge prend sa place */
.sv-event-item__footer {
  display: flex !important;
  align-items: center !important;
  gap: clamp(8px, 1vw, 14px) !important;
  justify-content: flex-start !important;
}
.sv-event-item__footer .sv-event-item__join {
  margin-left: auto !important;
}

/* Le footer ne contient plus le compteur => on libere la regle qui
   le stylait specifiquement (les anciennes regles .footer .countdown
   restent en place mais ne matchent plus puisque le compteur est
   ailleurs ; rien d'autre a annuler). */

/* === Adaptation mobile/tablette === */
@media (max-width: 1300px) {
  /* tailles du compteur dans la bande (en cqw, comme le reste mobile) */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer .countdown__n,
  .sv-event-item .sv-event-item__media-footer .countdown__n {
    font-size: 4.4cqw !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer .countdown__l,
  .sv-event-item .sv-event-item__media-footer .countdown__l {
    font-size: 2.5cqw !important;
  }
  /* le badge region (deplace dans le footer) prend une taille cqw */
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__status,
  .sv-event-item .sv-event-item__footer .sv-event-item__status {
    font-size: 3cqw !important;
    padding: 1.3cqw 2.6cqw !important;
  }
}


/* ============================================================
   MAJ FINALE — SCROLLBAR CHEVRON IDENTIQUE SUR MOBILE / TABLETTE
   On force la meme barre VERTICALE chevron a droite des events
   meme en dessous de 1200px (override de tous les blocs mobile
   qui voulaient la passer en horizontal ou la cacher).
   ============================================================ */
@media (max-width: 1300px) {

  /* Layout : la liste reprend la disposition "liste + colonne barre a droite" */
  .sv-events__list-wrap {
    position: relative !important;
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
  }

  /* La zone scroll garde sa grille 2 colonnes mais on lui reserve la
     place de la barre custom a droite. */
  .sv-events__scroll {
    /* scroll vertical, native masquee (la pilule custom pilote) */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: clamp(32px, 5vw, 48px) !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .sv-events__scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* La gouttiere reprend sa position verticale a droite */
  .sv-events__nav,
  .sv-events__nav.has-cscroll {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    margin: 0 !important;
    width: clamp(24px, 3.6vw, 38px) !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  /* On annule tous les styles horizontaux : la barre reste verticale,
     comme sur desktop. La classe .is-horizontal n'est plus posee par
     le JS, mais on neutralise les anciennes regles au cas ou. */
  .sv-cscroll,
  .sv-cscroll.is-horizontal {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: var(--bar-w) !important;
    height: auto !important;
  }

  .sv-cscroll.is-horizontal .sv-cscroll__track,
  .sv-cscroll .sv-cscroll__track {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    clip-path: polygon(
      0 0,
      50% var(--slant),
      100% 0,
      100% 100%,
      50% calc(100% - var(--slant)),
      0 100%
    ) !important;
    -webkit-clip-path: polygon(
      0 0,
      50% var(--slant),
      100% 0,
      100% 100%,
      50% calc(100% - var(--slant)),
      0 100%
    ) !important;
  }

  .sv-cscroll.is-horizontal .sv-cscroll__fill,
  .sv-cscroll .sv-cscroll__fill {
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: 0;
    clip-path: polygon(
      0 0,
      50% var(--slant),
      100% 0,
      100% 100%,
      0 100%
    ) !important;
    -webkit-clip-path: polygon(
      0 0,
      50% var(--slant),
      100% 0,
      100% 100%,
      0 100%
    ) !important;
  }

  .sv-cscroll.is-horizontal .sv-cscroll__thumb,
  .sv-cscroll .sv-cscroll__thumb {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--bar-w) !important;
    height: calc(var(--bar-w) * 4) !important;
    clip-path: polygon(
      0 0,
      50% var(--slant),
      100% 0,
      100% 100%,
      50% calc(100% - var(--slant)),
      0 100%
    ) !important;
    -webkit-clip-path: polygon(
      0 0,
      50% var(--slant),
      100% 0,
      100% 100%,
      50% calc(100% - var(--slant)),
      0 100%
    ) !important;
  }
}


/* >>> VELRA-HSCROLL START <<< */
/* ============================================================
   MAJ 14 — EVENTS EN CARROUSEL HORIZONTAL (MOBILE / TABLETTE <= 1199.98px)
   ────────────────────────────────────────────────────────────
   Avant : grille 2 colonnes a defilement VERTICAL dont la max-height
   coupait la 3e rangee (les "2 items coupes").
   Apres : carrousel HORIZONTAL. Les cartes gardent EXACTEMENT leur forme
   (portrait verrouille par la MAJ 11). Elles sont empilees par 2
   (grid-auto-flow: column + 2 rangees = on conserve "2 colonnes")
   et defilent de droite a gauche : on voit UNE colonne entiere + la
   MOITIE de la suivante. Plus aucun item coupe.
   La barre custom (meme style chevron) passe a l'HORIZONTALE SOUS la liste.
   ============================================================ */
@media (max-width: 1300px) {

  .sv-events__list-wrap {
    position: relative !important;
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
  }

  /* CARROUSEL HORIZONTAL : 2 rangees, nouvelles colonnes vers la droite.
     grid-auto-columns ~64% => 1 colonne pleine + la moitie de la suivante. */
  .sv-events__scroll {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-template-columns: none !important;
    /* PROPORTIONNEL : 3 colonnes pleines + un apercu de la 4eme.
       En % de la largeur visible => les cartes se REDIMENSIONNENT au
       resize (au lieu de rester figees et de se decaler). */
    grid-auto-columns: calc(100% / 3.3 - 12px) !important;
    gap: 12px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 4px 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Scroll LIBRE et FLUIDE : pas de snap (qui recollait au debut de
       chaque carte => gros sauts pendant le drag de la barre) et
       defilement instantane (pas d'animation smooth qui se cumule). */
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain !important;
  }
  .sv-events__scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  .sv-events__scroll > .sv-event-item {
    scroll-snap-align: none !important;
  }

  /* GOUTTIERE => bande horizontale pleine largeur SOUS la liste */
  .sv-events__nav,
  .sv-events__nav.has-cscroll {
    display: block !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    height: clamp(22px, 7vw, 30px) !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    z-index: 5 !important;
  }

  /* BARRE CUSTOM HORIZONTALE (meme style chevron, couchee) */
  .sv-cscroll,
  .sv-cscroll.is-horizontal {
    --bar-w: clamp(14px, 4vw, 20px);
    --slant: clamp(5px, 1.4vw, 9px);
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    height: var(--bar-w) !important;
  }

  .sv-cscroll.is-horizontal .sv-cscroll__track,
  .sv-cscroll .sv-cscroll__track {
    top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; height: 100% !important;
    clip-path: polygon(0 0, var(--slant) 50%, 0 100%, 100% 100%, calc(100% - var(--slant)) 50%, 100% 0) !important;
    -webkit-clip-path: polygon(0 0, var(--slant) 50%, 0 100%, 100% 100%, calc(100% - var(--slant)) 50%, 100% 0) !important;
  }

  .sv-cscroll.is-horizontal .sv-cscroll__fill,
  .sv-cscroll .sv-cscroll__fill {
    top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: auto !important;
    width: 0; height: 100% !important;
    background: linear-gradient(90deg, rgba(110, 210, 255, 0.55), rgba(45, 171, 255, 0.30)) !important;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%) !important;
  }

  .sv-cscroll.is-horizontal .sv-cscroll__thumb,
  .sv-cscroll .sv-cscroll__thumb {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    height: var(--bar-w) !important;
    width: calc(var(--bar-w) * 2.6) !important;
    will-change: left !important;
    clip-path: polygon(0 0, var(--slant) 50%, 0 100%, 100% 100%, calc(100% - var(--slant)) 50%, 100% 0) !important;
    -webkit-clip-path: polygon(0 0, var(--slant) 50%, 0 100%, 100% 100%, calc(100% - var(--slant)) 50%, 100% 0) !important;
  }
}
/* >>> VELRA-HSCROLL END <<< */


/* >>> VELRA-EVENTS-COUNT START <<< */
/* ============================================================
   FIX DIMENSIONNEMENT DES ITEMS EVENT (demande utilisateur)
   Avant : grid-auto-columns en clamp(px) => les cartes restaient
   FIGEES en px et se DECALAIENT au resize au lieu de se retrecir.
   Apres : largeur PROPORTIONNELLE (% de la largeur visible) =>
     - Tablette / PC (700 -> 1299.98px) : 3 cartes + un bout de la 4eme
     - Mobile (<= 700px)                : 1 carte  + un bout de la 2eme
   2 rangees conservees dans les deux cas (carrousel horizontal).
   ============================================================ */
@media (max-width: 600px) {
  .sv-events__scroll {
    grid-auto-columns: calc(100% / 1.3 - 12px) !important;
  }
}
/* >>> VELRA-EVENTS-COUNT END <<< */


/* >>> VELRA-DATE-CENTER START <<< */
/* ============================================================
   DATE + COMPTEUR : ESPACEMENTS EGAUX (demande user)
   IMPORTANT : une regle plus haut (MAJ 13, ~ligne 4055) force
   "justify-content: space-between !important" => date collee a
   GAUCHE et compteur a DROITE. Sans !important nos reglages
   etaient ignores. On la neutralise ici.

   Resultat voulu : 3 ecarts IDENTIQUES
     bord gauche <-> date <-> compteur <-> bord droit
   => space-evenly repartit l'espace libre en parts egales
      (avant / entre / apres). gap:0 pour ne pas grossir l'ecart
      du milieu.
   ============================================================ */
.sv-event-item__media-footer {
  justify-content: space-evenly !important;
  gap: 0 !important;
}
/* >>> VELRA-DATE-CENTER END <<< */


/* >>> VELRA-EVENT-UNIFORM-SIZE START <<< */
/* ============================================================
   TAILLE IDENTIQUE POUR TOUTES LES CARTES EVENT (<= 1299.98px)
   Avant : chaque carte prenait la hauteur de SON contenu
   (align-items:start) => certaines cartes (ex: desc plus longue,
   titre sur 2 lignes) etaient plus GRANDES que les autres.
   Apres : les 2 rangees du carrousel font la MEME hauteur (1fr)
   et chaque carte s'etire (stretch) => toutes identiques.
   Pas de vide visible : la zone contenu absorbe la difference
   et le footer reste colle en bas (margin-top:auto).
   ============================================================ */
@media (max-width: 1300px) {
  .sv-events__scroll {
    align-items: stretch !important;
    grid-template-rows: repeat(2, 1fr) !important;
  }
  .sv-events__scroll > .sv-event-item {
    grid-template-rows: auto 1fr !important;
    height: 100% !important;
  }
  .sv-events__scroll > .sv-event-item .sv-event-item__footer {
    margin-top: auto !important;
  }
}
/* >>> VELRA-EVENT-UNIFORM-SIZE END <<< */



/* >>> VELRA-META-REGION START <<< */
/* ============================================================
   ECHANGE META <-> BADGE (demande utilisateur)
   - Le meta (ancien "TOURNAMENT") affiche desormais la REGION
     (EMEA / NA / SA / APAC), en ITALIQUE et avec la COULEUR de
     la region (EMEA bleu, NA jaune, SA vert, APAC rouge).
   - Le badge (ancienne vignette region) affiche le TYPE
     (TOURNOI / EVENEMENT) avec un style propre au type.
   ============================================================ */

/* 1) META = region, en italique + couleur par region.
   IMPORTANT : la regle .sv-event-item__meta--tag (~ligne 3179)
   remplit le texte avec un DEGRADE via -webkit-text-fill-color:
   transparent + background-clip:text. Il faut donc neutraliser
   ce remplissage, sinon la couleur de region ne s'affiche pas. */
.sv-event-item .sv-event-item__meta--tag {
  font-style: italic !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; /* le texte suit "color" */
  text-shadow: none !important;
}
.sv-event-item[data-region="EMEA"] .sv-event-item__meta { color: #3d8bff !important; } /* bleu  */
.sv-event-item[data-region="NA"]   .sv-event-item__meta { color: #ffd23d !important; } /* jaune */
.sv-event-item[data-region="SA"]   .sv-event-item__meta { color: #34e06a !important; } /* vert  */
.sv-event-item[data-region="APAC"] .sv-event-item__meta { color: #ff4d4d !important; } /* rouge */

/* 2) BADGE = type, style PREMIUM (famille bleue), SANS glow ni
      ombre de texte. Le texte reprend la teinte du fond mais en
      plus FONCE (comme les anciens badges region).
      Selecteurs en (0,4,0) pour passer devant les regles region. */
.sv-event-item[data-region] .sv-event-item__status.sv-type--tournoi {
  background: linear-gradient(135deg, #7ab4ff 0%, #3a72d8 100%) !important; /* bleu */
  color: #0c2c72 !important;                 /* bleu fonce */
  outline-color: rgba(130, 175, 255, 0.7) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 700;
}
.sv-event-item[data-region] .sv-event-item__status.sv-type--event {
  background: linear-gradient(135deg, #9aa6ff 0%, #9d5cff 100%) !important; /* bleu -> violet */
  color: #2c1170 !important;                 /* violet fonce */
  outline-color: rgba(167, 139, 250, 0.85) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 700;
}
.sv-event-item[data-region] .sv-event-item__status.sv-type--concours {
  background: linear-gradient(135deg, #ff8a8a 0%, #e0353c 100%) !important; /* cyan-bleu */
  color: #4a0a0e !important;                 /* cyan fonce */
  outline-color: rgba(255, 105, 105, 0.8) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 700;
}
/* >>> VELRA-META-REGION END <<< */



/* >>> VELRA-FILTER-TYPE START <<< */
/* ============================================================
   FILTRE "TYPE" (Tournoi / Evenement / Concours)
   Ajoute entre "Tous les jeux" et la recherche.
   - PC + tablette : reste sur la meme rangee que les autres
     filtres (herite du style .sv-fdrop, aucune regle en plus).
   - Mobile (<= 700px) : les 3 menus deroulants se partagent la
     rangee du haut, et la BARRE DE RECHERCHE passe en BAS, sur
     toute la longueur (sa propre rangee).
   ============================================================ */
@media (max-width: 600px) {
  .sv-events__filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .sv-events__filters .sv-fdrop {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .sv-events__filters .sv-fsearch {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    order: 10 !important;          /* derniere position => en bas */
    box-sizing: border-box !important;
  }
}
/* >>> VELRA-FILTER-TYPE END <<< */


/* >>> VELRA-EVENTS-NAV-HIDE START <<< */
/* ============================================================
   RETRAIT DE LA BANDE / SCROLLBAR HORIZONTALE SOUS LES EVENTS
   (zone entouree en rouge) — tablette + mobile (<= 1299.98px).
   Le conteneur .sv-events__nav reservait une bande vide
   (hauteur ~22-30px + marge 12px) sous les cartes, meme quand
   aucun defilement n'etait necessaire. On la masque entierement.
   Le defilement reste possible au doigt / a la molette
   (la scrollbar native est deja masquee, overflow-y:auto conserve).
   ============================================================ */
@media (max-width: 1300px) {
  .sv-events__nav {
    display: none !important;
  }
  /* plus aucune reserve d'espace sous la liste d'events */
  .sv-events__scroll {
    margin-bottom: 0 !important;
  }
  .sv-events__list-wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* >>> VELRA-EVENTS-NAV-HIDE END <<< */


/* >>> VELRA-EVENT-CARD-FILL-FIX START <<< */
/* ============================================================
   SUPPRESSION DU VIDE EN BAS DES CARTES EVENT (sous "Rejoindre
   maintenant") — tablette + mobile (<= 1299.98px).
   Cause : .sv-event-item avait height:100% + grille a hauteur de
   rangee fixe (grid-auto-rows: var(--ev-row,300px)). Les cartes
   au contenu plus court etaient ETIREES a la hauteur de la rangee,
   d'ou un vide a l'interieur de la bordure. align-items:start
   etait sans effet car height:100% forcait la hauteur.
   Fix : la carte epouse exactement la hauteur de son contenu.
   ============================================================ */
@media (max-width: 1300px) {
  .sv-events__scroll {
    grid-auto-rows: 1fr !important;
  }
  .sv-events__scroll > .sv-event-item,
  .sv-event-item {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }
}
/* >>> VELRA-EVENT-CARD-FILL-FIX END <<< */

/* >>> VELRA-EVENT-HOVER-WHITE-DASHED START <<< */
/* ============================================================
   MAJ 7 — Survol des cartes event :
   1) Le contour anime devient BLANC POINTILLE qui tourne TRES VITE.
   2) L'image ne s'agrandit PLUS au survol.
   3) La carte se RETRECIT legerement au survol (scale 0.97).
   Cette section est placee a la FIN du fichier pour ecraser
   toutes les redefinitions precedentes de :hover::before / :hover img.
   ============================================================ */

/* Transition douce du leger retrecissement de la carte entiere */
.sv-event-item {
  transition: transform 0.25s var(--ease-out, ease-out),
              outline-color var(--tr, 0.2s ease);
}

/* 3) Retrecissement TRES leger de la carte entiere au survol */
.sv-event-item:hover {
  transform: scale(0.99);
}

/* 1) Contour BLEU DISCRET POINTILLE + rotation LENTE au survol */
.sv-event-item:hover::before {
  background:
    repeating-conic-gradient(from var(--sv-angle),
      #5aa6f0 0deg 6deg,
      transparent 6deg 14deg) !important;
  filter: drop-shadow(0 0 6px rgba(94, 170, 255, 0.55))
          drop-shadow(0 0 12px rgba(94, 170, 255, 0.30)) !important;
  animation: sv-rotate 6s linear infinite !important;
}

/* Sens alterne conserve : carte paire tourne dans l'autre sens */
.sv-event-item:nth-of-type(even):hover::before {
  animation-direction: reverse !important;
}

/* 2) L'image NE s'agrandit PLUS au survol */
.sv-event-item:hover .sv-event-item__img {
  transform: none !important;
}
/* >>> VELRA-EVENT-HOVER-WHITE-DASHED END <<< */


/* ============================================================
   EVENT ITEMS — Deuxieme lueur (droite -> gauche) sur la bande
   du footer (.sv-event-item__footer), parfaitement synchronisee
   avec celle de la media-footer.
   ============================================================ */

/* Le footer (bande de droite) doit etre relatif + clipper la lueur */
.sv-event-item__footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Le contenu du footer (date, countdown, status, bouton, etc.)
   reste au-dessus de la lueur */
.sv-event-item__footer > *:not(.sv-event-item__sweep) {
  position: relative;
  z-index: 2;
}

/* Lueur de droite (place dans .sv-event-item__footer) :
   sens INVERSE — part de la droite, finit a gauche. Animation et
   timing identiques au sweep gauche : les deux apparaissent et
   disparaissent au meme moment. */
.sv-event-item__sweep--right {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(100%);
  background: linear-gradient(
    260deg,
    transparent 12%,
    rgba(90, 150, 230, 0.10) 30%,
    rgba(140, 190, 255, 0.40) 50%,
    rgba(90, 150, 230, 0.10) 70%,
    transparent 88%
  );
  animation: svFooterSweepRev 4.4s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes svFooterSweepRev {
  0%   { transform: translateX(100%);  opacity: 0; }
  6%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* Memes delais sequentiels que la lueur gauche -> les deux glissent
   simultanement sur chaque carte. */
.sv-event-item:nth-of-type(1) .sv-event-item__sweep--right { animation-delay: 0s; }
.sv-event-item:nth-of-type(2) .sv-event-item__sweep--right { animation-delay: 0.55s; }
.sv-event-item:nth-of-type(3) .sv-event-item__sweep--right { animation-delay: 1.1s; }
.sv-event-item:nth-of-type(4) .sv-event-item__sweep--right { animation-delay: 1.65s; }
.sv-event-item:nth-of-type(5) .sv-event-item__sweep--right { animation-delay: 2.2s; }
.sv-event-item:nth-of-type(6) .sv-event-item__sweep--right { animation-delay: 2.75s; }
.sv-event-item:nth-of-type(7) .sv-event-item__sweep--right { animation-delay: 3.3s; }
.sv-event-item:nth-of-type(8) .sv-event-item__sweep--right { animation-delay: 3.85s; }


/* ============================================================
   EVENT ITEM — Effet de biseau / perspective NET sur la zone
   titre/region/description (.sv-event-item__content).
   - 4 trapezes (haut / gauche / droite / bas) crees par les
     jonctions en miter d'une bordure 4 couleurs sur un
     pseudo-element.
   - Cote lumiere : top + left (clair).
   - Cote ombre  : bottom + right (sombre).
   - Le fond/gradient existant + le texte restent visibles AU
     CENTRE, dans la zone non couverte par la bordure.
   ============================================================ */
.sv-event-item__content {
  position: relative;
  isolation: isolate;
}

/* Le pseudo couvre toute la zone titre. Sa bordure 6px a 4
   couleurs differentes => les 4 trapezes du biseau apparaissent
   aux 4 cotes (et se rejoignent en miter aux coins). */
.sv-event-item__content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-sizing: border-box;
  /* Bordure 4 cotes, miter naturel => trapezes */
  border-style: solid;
  border-width: clamp(7px, 0.75vw, 11px);
  border-top-color:    rgba(140, 190, 255, 0.22);  /* lumiere haute */
  border-left-color:   rgba(140, 190, 255, 0.16);  /* lumiere gauche (plus douce) */
  border-right-color:  rgba(0, 0, 0, 0.30);        /* ombre droite */
  border-bottom-color: rgba(0, 0, 0, 0.55);        /* ombre basse (la plus marquee) */
  /* Le fond du pseudo reste transparent pour laisser passer le
     gradient existant du content. */
  background: transparent;
  /* Petit liseré net interieur pour marquer la jonction
     biseau / centre, propre et minimaliste. */
  box-shadow:
    inset  1px  1px 0 rgba(140, 190, 255, 0.18),
    inset -1px -1px 0 rgba(0, 0, 0, 0.35);
}

/* Tous les enfants restent au-dessus du biseau */
.sv-event-item__content > * {
  position: relative;
  z-index: 1;
}


/* ============================================================
   FIX BANDE TROP GRANDE (v2)
   Probleme : la barre date/compteur (media-footer) avait une
   hauteur forcee a 13cqw alors que le bandeau du bas (footer)
   est aussi a 13cqw, mais avec son contenu (texte) qui remplit
   verticalement. Le media-footer, lui, avait du vide en-dessous
   du texte (espace colore) qui fusionnait visuellement avec le
   padding-top du contenu => effet "bande beaucoup plus grosse".

   Solution :
   - Suppression de l'etirement vertical du media (plus de gros
     trou sous l'image en layout horizontal).
   - Le media-footer reste colle a l'image, taille reduite et
     identique a celle du footer du bas.
   - Padding-top du contenu mis a 0 pour que le titre commence
     juste sous la barre date.
   ============================================================ */
.sv-event-item__media {
  height: auto !important;
  align-self: start !important;
}
.sv-event-item__media-footer {
  margin-top: 0 !important;
}

/* Mobile / tablette : harmonisation des 3 bandes (date, separateur, footer) */
@media (max-width: 1300px) {
  /* La barre date/compteur prend exactement la taille de son contenu
     (plus de vide colore en-dessous du texte) */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer,
  .sv-event-item .sv-event-item__media-footer {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 1.8cqw !important;
    padding-bottom: 1.8cqw !important;
    align-items: center !important;
  }
  /* Le footer du bas garde la meme structure : hauteur calee sur le contenu */
  .sv-events__scroll > .sv-event-item .sv-event-item__footer,
  .sv-event-item .sv-event-item__footer {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 1.8cqw !important;
    padding-bottom: 1.8cqw !important;
    align-items: center !important;
  }
  /* Le contenu (titre + description) commence juste apres la barre date,
     sans gros padding-top qui creait une zone tampon visible. */
  .sv-events__scroll > .sv-event-item .sv-event-item__content,
  .sv-event-item .sv-event-item__content {
    padding-top: 2.2cqw !important;
    padding-bottom: 0 !important;
    gap: 1.6cqw !important;
  }
}

/* Desktop (>= 1300px) : meme principe pour eviter la grande bande
   verticale due a l'etirement du media + au gros vide sous l'image. */
@media (min-width: 1300.02px) {
  .sv-event-item__media-footer {
    padding-top: 1cqw !important;
    padding-bottom: 1cqw !important;
    align-items: center !important;
  }
  .sv-event-item__footer {
    padding-top: 1cqw !important;
    align-items: center !important;
  }
}

/* ============================================================
   FEATURED + CONCEPT — background scroll-driven (identique).
   Base color = #030a1a (bas du degrade .sv-section--events).
   Un voile bleu profond (coherent avec le hero #061838) apparait
   progressivement APRES le titre + la mini description.
   --feat-progress (0..1) est defini par communaute.js au scroll.
   ============================================================ */
.sv-section--featured {
  --feat-progress: 0;
  background-color: #030a1a !important;
  background-image: linear-gradient(180deg,
    rgba(10, 28, 52, var(--feat-progress)) 0%,
    rgba(15, 40, 74, var(--feat-progress)) 100%) !important;
  transition: background-color 200ms linear, background-image 200ms linear;
}

/* CONCEPT : EXACTEMENT le meme background (aucune difference,
   fond uni entre les deux — il prolonge la couleur de fin du
   degrade de la section En vedette). */
.sv-section--concept {
  --feat-progress: 0;
  background-color: #030a1a !important;
  background-image: linear-gradient(180deg,
    rgba(15, 40, 74, var(--feat-progress)) 0%,
    rgba(15, 40, 74, var(--feat-progress)) 100%) !important;
  transition: background-color 200ms linear, background-image 200ms linear;
}

/* Degrade OMBRE qui monte vers le TOP du background qui change de
   couleur : ombre sombre en haut de la section, fondu vers le bas. */
/* Le fondu du haut DEBORDE au-dessus de la section : il commence dans
   la section precedente et se termine au niveau du titre "En vedette".
   -> plus de coupure nette, la couleur monte progressivement. */
.sv-section--featured {
  overflow: visible !important;
}
.sv-section--featured::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* remonte au-dessus de la section (sur la section du haut) */
  top: calc(-1 * clamp(160px, 22vw, 320px));
  /* jusqu'au niveau du titre */
  height: calc(clamp(160px, 22vw, 320px) + clamp(60px, 8vw, 120px));
  background: linear-gradient(180deg,
    rgba(10, 28, 52, 0) 0%,
    rgba(10, 28, 52, calc(var(--feat-progress) * 0.25)) 35%,
    rgba(10, 28, 52, calc(var(--feat-progress) * 0.6)) 65%,
    rgba(10, 28, 52, calc(var(--feat-progress) * 0.88)) 85%,
    rgba(10, 28, 52, var(--feat-progress)) 100%);
  transition: background 200ms linear;
  pointer-events: none;
  z-index: 0;
}
.sv-section--featured > .sv-inner {
  position: relative;
  z-index: 1;
}


/* Header "Concept de l'évènement" hors du container, style du titre
   "Evenements en vedette". Marge sous le titre avant le container. */
.sv-concept__head {
  margin-bottom: clamp(18px, 2.4vw, 32px);
}

/* Concept de l'événement : conteneur compact, centré et identique au
   style original, tout en restant dans la même section "En vedette". */
.sv-concept-section {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(40px, 5vw, 80px);
}

.sv-concept-section .sv-concept {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(16px, 1.5vw, 22px);
}



/* ============================================================
   FIX — Barre de scroll de la liste d'evenements (PC >= 1300px)
   C'est la barre CUSTOM (.sv-cscroll, dans la gouttiere .sv-events__nav)
   qui pilote le defilement, comme partout ailleurs. On masque donc la
   scrollbar NATIVE pour ne jamais avoir de double barre.
   ============================================================ */
@media (min-width: 1300.02px) {
  .sv-events__scroll {
    overflow-y: scroll !important;
    scrollbar-width: none !important;          /* Firefox */
    -ms-overflow-style: none !important;
  }
  .sv-events__scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;                  /* Chrome/Safari */
  }
}

/* >>> VELRA-EVENTS-WHEEL-OFF START <<< */
/* ============================================================
   NAVIGATION 100% FLUIDE AU-DESSUS DES EVENT ITEMS
   La molette / le touch ne peuvent PLUS faire defiler la zone :
   overflow hidden => le navigateur scrolle la PAGE nativement
   (zero interception JS, zero micro-arret).
   Le drag de la barre custom continue de piloter scrollTop /
   scrollLeft par programme (fonctionne avec overflow:hidden).
   ============================================================ */
.sv-events__scroll {
  overflow: hidden !important;
  overscroll-behavior: auto !important;
}
/* >>> VELRA-EVENTS-WHEEL-OFF END <<< */


/* ============================================================
   HIERARCHIE TYPOGRAPHIQUE AZURIO — COMMUNAUTE
   ============================================================ */

/* --- BOLD : hero "Tout pour la victoire" --- */
.sv-hero__title,
.sv-hero__title em {
  font-family: var(--font-display) !important;
}

/* --- MEDIUM : titres de sections --- */
.sv-featured__title,
.sv-featured__title em,
.sv-concept__title,
.sv-concept__item-title,
.sv-event-item__title,
.sv-feat-card__name,
.sv-partner__name,
.sv-partner__name em,
.sv-partner__cta-title {
  font-family: var(--font-medium) !important;
  text-align: center !important;
}

/* ============================================================
   AJUSTEMENTS — CONCEPT SANS CONTENEUR + TYPO BEBAS NEUE
   ============================================================ */

/* 1) Concept de l'evenement : suppression complete du conteneur */
.sv-concept,
.sv-section--concept .sv-concept {
  background: transparent !important;
  outline: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.sv-concept::before,
.sv-concept::after {
  display: none !important;
  content: none !important;
}

/* 2) Widget events (haut de page) : titre, date et "Rejoindre maintenant"
      en Bebas Neue, titre aligne a gauche */
.sv-event-item__title-wrap {
  text-align: left !important;
  align-items: flex-start !important;
}
.sv-event-item__title {
  font-family: 'Bebas Neue', sans-serif !important;
  text-align: left !important;
  letter-spacing: 0.02em;
}
.sv-event-item__date,
.sv-event-item__footer .sv-event-item__date,
.sv-event-item__media-footer .sv-event-item__date,
.sv-event-item__day,
.sv-event-item__month,
.sv-event-item__year {
  font-family: 'Bebas Neue', sans-serif !important;
}
.sv-event-item__join,
.sv-event-item__footer .sv-event-item__join {
  font-family: 'Bebas Neue', sans-serif !important;
}

/* ============================================================
   AJUSTEMENTS TYPO — EN VEDETTE + WIDGET EVENTS
   ============================================================ */

/* Titres des cartes "Evenements en vedette" en Bebas Neue */
.sv-feat-card__name,
.sv-feat-card__name-row .sv-feat-card__name {
  font-family: 'Bebas Neue', sans-serif !important;
}

/* Widget events : le texte de region garde la police par defaut */
.sv-event-item__meta,
.sv-event-item__meta--tag,
.sv-event-item .sv-event-item__meta--tag {
  font-family: var(--font-body) !important;
}

/* Widget events : minuteur et annee en Bebas Neue */
.sv-event-item__countdown,
.sv-event-item__countdown .countdown__n,
.sv-event-item__countdown .countdown__l,
.sv-event-item__countdown .countdown__sep,
.sv-event-item__footer .sv-event-item__countdown,
.sv-event-item__footer .sv-event-item__countdown .countdown__n,
.sv-event-item__footer .sv-event-item__countdown .countdown__l,
.sv-event-item__footer .sv-event-item__countdown .countdown__sep,
.sv-event-item__year {
  font-family: 'Bebas Neue', sans-serif !important;
}

/* ============================================================
   TYPO FORCEE — DATE / ANNEE / MINUTEUR DES CARTES EVENTS
   (specificite renforcee : bat toutes les regles precedentes)
   ============================================================ */
.sv-event-item .sv-event-item__date,
.sv-event-item .sv-event-item__date *,
.sv-event-item .sv-event-item__day,
.sv-event-item .sv-event-item__month,
.sv-event-item .sv-event-item__year,
.sv-event-item .sv-event-item__media-footer .sv-event-item__day,
.sv-event-item .sv-event-item__media-footer .sv-event-item__month,
.sv-event-item .sv-event-item__media-footer .sv-event-item__year,
.sv-event-item .sv-event-item__countdown,
.sv-event-item .sv-event-item__countdown *,
.sv-event-item .countdown__unit,
.sv-event-item .countdown__n,
.sv-event-item .countdown__l,
.sv-event-item .countdown__sep,
.sv-event-item__footer .sv-event-item__countdown .countdown__n,
.sv-event-item__footer .sv-event-item__countdown .countdown__l,
.sv-event-item__footer .sv-event-item__countdown .countdown__sep {
  font-family: 'Bebas Neue', 'Bebas Neue Fallback', sans-serif !important;
}

/* ============================================================
   EN VEDETTE — TRAITS ANIMES GAUCHE / DROITE
   Trait fin continu (pleine hauteur des deux cotes). Le long du
   trait, des rectangles de tailles aleatoires masquent la carte
   (meme fond que la section) et sont bordes par le trait :
   decrochage rectangulaire, la carte n'est pas visible dedans.
   Meme vitesse (lente) pour tous, aucun chevauchement.
   Les rectangles n'apparaissent que sur la banniere (pas sur le
   texte) : a gauche ils montent, a droite ils descendent.
   ============================================================ */

/* Trait de base : 1px continu, pleine hauteur, aux deux bords */
.sv-section--featured .sv-featured__viewport::before,
.sv-section--featured .sv-featured__viewport::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 34px;
  width: 1px;
  background: rgba(94, 170, 255, 0.35);
  pointer-events: none;
  z-index: 9;
}
.sv-section--featured .sv-featured__viewport::before { left: 0; }
.sv-section--featured .sv-featured__viewport::after  { right: 0; }

/* Zone (clippee) qui contient les rectangles animes : banniere seule */
.sv-featured__rail {
  --maxh: 52px;
  --rail-width: 18px;
  position: absolute;
  top: 22px;
  width: var(--rail-width);
  height: var(--feat-banner-h, 56%);
  --rail-h: var(--feat-banner-h, 200px);
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}
.sv-featured__rail--left  { left: 0; }
.sv-featured__rail--right { right: 0; }

/* La zone laterale se resserre avec l'ecran : les decrochements restent
   discrets et ne masquent pas inutilement les bannieres. */
@media (max-width: 1300px) {
  .sv-featured__rail { --rail-width: 13px; }
}
@media (max-width: 600px) {
  .sv-featured__rail { --rail-width: 9px; }
}

/* Rectangle qui masque la carte, borde par le trait */
.sv-featured__notch {
  position: absolute;
  top: 0;
  width: var(--n-w, 34px);
  height: var(--n-h, 60px);
  /* AUCUN fond propre : le rectangle reprend EXACTEMENT le fond de la
     section (base #030a1a + voile uniforme pilote par --feat-progress,
     meme couleur en haut et en bas -> pas de degrade interne). On voit
     donc le background par-dessus les cards qui defilent. */
  background-color: #030a1a;
  background-image: linear-gradient(180deg,
    rgba(10, 28, 52, var(--feat-progress, 0)) 0%,
    rgba(10, 28, 52, var(--feat-progress, 0)) 100%);
  border: 1px solid rgba(94, 170, 255, 0.35);
  box-sizing: border-box;
}
.sv-featured__rail--left .sv-featured__notch {
  left: 0;
  border-left: 0;
  transform-origin: left center;
  will-change: transform, width;
  animation:
    svFeatNotchUp var(--n-dur, 12s) linear var(--n-delay, 0s) infinite,
    svFeatNotchTaper var(--n-dur, 12s) ease-in-out var(--n-delay, 0s) infinite;
}
.sv-featured__rail--right .sv-featured__notch {
  right: 0;
  border-right: 0;
  transform-origin: right center;
  will-change: transform, width;
  animation:
    svFeatNotchDown var(--n-dur, 12s) linear var(--n-delay, 0s) infinite,
    svFeatNotchTaper var(--n-dur, 12s) ease-in-out var(--n-delay, 0s) infinite;
}

/* Deplacement vertical inchange : gauche vers le haut, droite vers le bas. */
@keyframes svFeatNotchUp {
  from { transform: translateY(var(--rail-h, 200px)); }
  to   { transform: translateY(calc(-1 * var(--maxh, 52px))); }
}
@keyframes svFeatNotchDown {
  from { transform: translateY(calc(-1 * var(--maxh, 52px))); }
  to   { transform: translateY(var(--rail-h, 200px)); }
}

/* Le rectangle nait sur le trait, garde sa largeur pendant sa course puis
   amorce tres doucement son retrecissement. Il atteint 0 px a 98.5 % :
   les derniers pixels sont donc parcourus deja totalement retracte, avant
   de toucher le bout du trait vertical fixe situe dessous. */
@keyframes svFeatNotchTaper {
  0% {
    width: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  14% {
    width: var(--n-w, 17px);
  }
  66% {
    width: var(--n-w, 17px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
  }
  98.5% { width: 0; }
  100%  { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-featured__notch { animation: none !important; display: none !important; }
}



/* >>> VELRA-EVENT-CONTOUR-FIX START <<< */
/* ============================================================
   1) CONTOUR ANIME (::before) — fermeture complete a gauche
   2) SECOND CONTOUR STATIQUE (__frame) — fermeture complete a gauche
      Meme cause : le trace evenodd reliait l'anneau exterieur a
      l'anneau interieur par une diagonale le long du bord GAUCHE ;
      le segment de fermeture croisait cette diagonale => le
      remplissage s'annulait a gauche. On ferme d'abord l'anneau
      exterieur, puis on rejoint l'anneau interieur au coin
      haut-gauche : pont d'entree et pont de fermeture confondus,
      le lisere se referme sur les 4 cotes.
   3) MINIATURES — retrait du degrade ombre noir en bas de la banniere.
   ============================================================ */

.sv-event-item::before {
  clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    0 0,
    2px 2px,
    2px calc(100% - var(--cut-lg)),
    var(--cut-lg) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 2px,
    2px 2px) !important;
  -webkit-clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    0 0,
    2px 2px,
    2px calc(100% - var(--cut-lg)),
    var(--cut-lg) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 2px,
    2px 2px) !important;
}

.sv-event-item__frame {
  clip-path: polygon(evenodd,
    3px 3px,
    calc(100% - var(--cut-lg)) 3px,
    calc(100% - 3px) var(--cut-lg),
    calc(100% - 3px) calc(100% - 3px),
    var(--cut-lg) calc(100% - 3px),
    3px calc(100% - var(--cut-lg)),
    3px 3px,
    5px 5px,
    5px calc(100% - var(--cut-lg)),
    var(--cut-lg) calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 5px,
    5px 5px) !important;
  -webkit-clip-path: polygon(evenodd,
    3px 3px,
    calc(100% - var(--cut-lg)) 3px,
    calc(100% - 3px) var(--cut-lg),
    calc(100% - 3px) calc(100% - 3px),
    var(--cut-lg) calc(100% - 3px),
    3px calc(100% - var(--cut-lg)),
    3px 3px,
    5px 5px,
    5px calc(100% - var(--cut-lg)),
    var(--cut-lg) calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 5px,
    5px 5px) !important;
}

.sv-event-item__banner::after {
  background: none !important;
}

/* ============================================================
   V4 — FONDU DE FOND, TOUJOURS SOUS LES ITEMS EVENTS
   Le fondu est désormais un enfant de la section Events dans le
   HTML. Il ne déborde plus depuis une section voisine et reste
   donc dans le même contexte d'empilement que les cartes.
   ============================================================ */
.sv-section--featured {
  position: relative !important;
  overflow: hidden !important;
  background-color: #030a1a !important;
  background-image: linear-gradient(180deg,
    rgba(10, 28, 52, var(--feat-progress, 0)) 0%,
    rgba(15, 40, 74, var(--feat-progress, 0)) 100%) !important;
}

/* On supprime l'ancienne ombre du haut : le voile la remplace. */
.sv-section--featured::before {
  display: none !important;
  content: none !important;
}

.sv-events__tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--feat-progress, 0);
  transition: opacity 220ms linear;
  background: linear-gradient(180deg,
    rgba(10, 28, 52, 0) 0%,
    rgba(10, 28, 52, 0.12) 30%,
    rgba(10, 28, 52, 0.32) 48%,
    rgba(11, 31, 58, 0.58) 66%,
    rgba(12, 34, 62, 0.82) 82%,
    rgba(15, 40, 74, 1) 100%);
}

/* Le contenu de la section En vedette reste au-dessus de son fond. */
.sv-section--featured > .sv-section__bg-grid { position: relative; z-index: 1; }
.sv-section--featured > .sv-inner { position: relative; z-index: 2; }

/* ============================================================
   ORDRE STRICT DANS EVENTS
   0 = fond/comètes, 1 = fondu, 2 = contenu et items.
   ============================================================ */
.sv-section--events {
  position: relative !important;
  z-index: auto !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
.sv-section--events > .sv-section__bg {
  z-index: 0 !important;
}
.sv-section--events > .sv-inner,
.sv-section--events .sv-events,
.sv-section--events .sv-event-item {
  position: relative;
  z-index: 2 !important;
}

/* ============================================================
   V5 — FONDU 100% HOMOGENE (Events -> En vedette -> Concept)
   Une SEULE couleur de voile (10,28,52) pour les trois sections,
   posee sur la meme base #030a1a. Le fondu se termine donc
   exactement sur la couleur du haut de "En vedette" : aucune
   separation visible, aucun saut au scroll.
   ============================================================ */
.sv-section--featured,
.sv-section--concept {
  background-color: #030a1a !important;
  background-image: linear-gradient(180deg,
    rgba(10, 28, 52, var(--feat-progress, 0)) 0%,
    rgba(10, 28, 52, var(--feat-progress, 0)) 100%) !important;
  /* pas de transition : la progression est pilotee au scroll (rAF),
     une transition provoque du retard et des sauts de couleur. */
  transition: none !important;
}

.sv-events__tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* l'opacite porte toute la progression -> interpolation parfaite */
  opacity: var(--feat-progress, 0);
  transition: none !important;
  background: linear-gradient(180deg,
    rgba(10, 28, 52, 0) 0%,
    rgba(10, 28, 52, 0.12) 30%,
    rgba(10, 28, 52, 0.34) 50%,
    rgba(10, 28, 52, 0.62) 70%,
    rgba(10, 28, 52, 0.86) 88%,
    rgba(10, 28, 52, 1) 100%) !important;
}

/* ============================================================
   MAJ FINALE — Grille concept : 5 / 3 / 2 colonnes max
   ============================================================ */
.sv-concept__panel.active,
.sv-section--concept .sv-concept__panel.active {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 16px) !important;
  align-items: start !important;
}
.sv-concept__item,
.sv-section--concept .sv-concept__item {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

@media (max-width: 1300px) {
  .sv-concept__panel.active,
  .sv-section--concept .sv-concept__panel.active {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .sv-concept__panel.active,
  .sv-section--concept .sv-concept__panel.active {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   AJUSTEMENTS V2 — items carrés, logo plus grand, trait actif
   ============================================================ */

/* Chaque bloc concept devient un carré parfait */
.sv-concept__item,
.sv-section--concept .sv-concept__item {
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Le contenu reste centré et ne déborde pas */
.sv-concept__item-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.sv-concept__item-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Logo du jeu légèrement plus grand */
.sv-concept__tab .sv-concept__tab-icon,
.sv-concept__tab img {
  width: clamp(64px, 5.2vw, 92px) !important;
}

/* Petit trait sous le logo de l'onglet actif */
.sv-concept__tab::after { content: none !important; display: none !important; }
.sv-concept__tab.active::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -5px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent-teal)) !important;
  display: block !important;
}

/* ============================================================
   CONCEPT — titre en haut centré, type en bas à gauche,
   format en bas à droite
   ============================================================ */
.sv-concept__item,
.sv-section--concept .sv-concept__item {
  justify-content: flex-start !important;
  position: relative !important;
  padding-bottom: clamp(26px, 2.6cqw, 40px) !important;
}

/* Nom du concept en Bebas Neue, centré, sans bande de fond */
.sv-concept__item-title,
.sv-section--concept .sv-concept__item-title {
  text-align: center !important;
  width: 100% !important;
  margin-top: 0 !important;
  font-family: 'Bebas Neue', sans-serif !important;
  background: transparent !important;
}

/* Description centrée horizontalement et verticalement dans le conteneur */
.sv-concept__item-desc,
.sv-section--concept .sv-concept__item-desc {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  margin-top: 0 !important;
}

.sv-concept__item-foot {
  position: absolute !important;
  left: clamp(8px, 0.9cqw, 14px) !important;
  right: clamp(8px, 0.9cqw, 14px) !important;
  bottom: clamp(6px, 0.8cqw, 12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  font-size: clamp(9px, 0.85cqw, 12px) !important;
  line-height: 1.1 !important;
  opacity: .85 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  pointer-events: none !important;
}
.sv-concept__item-kind { text-align: left !important; }
.sv-concept__item-format { text-align: right !important; }

/* ============================================================
   CONCEPT — FOND ANIME A CARRES (grille)
   Entre les carres : la couleur de la page reste visible
   (canvas transparent, aucun fond peint).
   Les carres : bleu fonce identique a la section Events.
   ============================================================ */
.sv-section--concept > .sv-concept__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* la grille couvre toute la largeur de la page, fondu doux uniquement
     sur les bords extremes */
  -webkit-mask-image: radial-gradient(ellipse 100% 85% at center, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 85% at center, #000 62%, transparent 100%);
}

.sv-section--concept .sv-inner {
  position: relative;
  z-index: 2;
}

/* ============================================================
   CONCEPT — FONDU DU HAUT SUR LA GRILLE ANIMEE
   La grille de carres part de la couleur du fond (bleu par defaut)
   en haut de la section et apparait progressivement en descendant,
   comme le fondu de la section "En vedette".
   ============================================================ */
.sv-section--concept > .sv-concept__grid {
  -webkit-mask-image:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.25) 12%,
      rgba(0, 0, 0, 0.7) 24%,
      #000 38%,
      #000 100%),
    radial-gradient(ellipse 100% 85% at center, #000 62%, transparent 100%);
  mask-image:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.25) 12%,
      rgba(0, 0, 0, 0.7) 24%,
      #000 38%,
      #000 100%),
    radial-gradient(ellipse 100% 85% at center, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}


/* ============================================================
   NAVBAR MASQUEE A L'ARRIVEE (page Communaute uniquement)
   Elle glisse vers le bas des qu'on scrolle : la classe
   body.sv-nav-shown est ajoutee par communaute.js.
   Specificite augmentee pour surpasser les regles !important de
   components.js qui forcent la navbar toujours visible.
   ============================================================ */
html body .navbar,
html body #navbar,
html body .navbar.navbar--visible {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  transform: translateY(-115%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .5s cubic-bezier(.22,1,.36,1),
              opacity .3s ease,
              padding .35s cubic-bezier(.4,0,.2,1) !important;
}

html body.sv-nav-shown .navbar,
html body.sv-nav-shown #navbar,
html body.sv-nav-shown .navbar.navbar--visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Supprimer la marge par defaut du haut pour que le hero colle le bord */
html body { margin-top: 0 !important; }

/* ============================================================
   CONCEPT — FOND DES CONTENEURS (grid-feature-cards, 21st.dev)
   Fond SOLIDE, bordure en pointilles, motif quadrille en pointilles
   avec quelques cases remplies plus claires (comme le composant
   d'origine), estompe par un masque radial en haut a droite.
   ============================================================ */
.sv-concept__item,
.sv-section--concept .sv-concept__item {
  position: relative !important;
  overflow: hidden !important;
  background: #0a1c34 !important;
  outline: 1px dashed #23486f !important;
  outline-offset: -1px !important;
  clip-path: none !important;
  border-radius: 0 !important;
  padding: clamp(12px, 1.1cqw, 18px) !important;
  padding-bottom: clamp(26px, 2.6cqw, 40px) !important;
  transition: outline-color var(--tr) !important;
}

/* motif : grille en pointilles + cases remplies plus claires */
.sv-concept__item::before,
.sv-section--concept .sv-concept__item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-repeat: repeat !important;
  background-position: top right !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cdefs%3E%3Cpattern id='p' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M.5 20V.5H20' fill='none' stroke='%232a5183' stroke-opacity='0.55' stroke-dasharray='4 2'/%3E%3C/pattern%3E%3C/defs%3E%3Cg fill='%23173a61'%3E%3Crect x='81' y='61' width='19' height='19'/%3E%3Crect x='41' y='21' width='19' height='19'/%3E%3Crect x='141' y='61' width='19' height='19'/%3E%3Crect x='121' y='41' width='19' height='19'/%3E%3Crect x='21' y='81' width='19' height='19'/%3E%3Crect x='101' y='101' width='19' height='19'/%3E%3Crect x='1' y='41' width='19' height='19'/%3E%3Crect x='61' y='1' width='19' height='19'/%3E%3Crect x='141' y='1' width='19' height='19'/%3E%3Crect x='41' y='81' width='19' height='19'/%3E%3C/g%3E%3Crect width='160' height='120' fill='url(%23p)'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 100% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 80%) !important;
  mask-image: radial-gradient(ellipse 75% 75% at 100% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 80%) !important;
}

/* pas de voile supplementaire : le fond reste solide */
.sv-concept__item::after,
.sv-section--concept .sv-concept__item::after {
  content: none !important;
  display: none !important;
}

/* le contenu reste au-dessus du motif, disposition d'origine conservee */
.sv-concept__item > *,
.sv-section--concept .sv-concept__item > * {
  position: relative !important;
  z-index: 1 !important;
}
.sv-concept__item-foot,
.sv-section--concept .sv-concept__item-foot {
  position: absolute !important;
  z-index: 2 !important;
}

.sv-concept__item:hover,
.sv-section--concept .sv-concept__item:hover {
  outline-color: #3a6ba8 !important;
}


/* ============================================================
   OVERRIDES DEMANDES
   1) PC : suppression du biseau/perspective sur le cote GAUCHE
      du bloc titre (entre la banniere et le titre).
   2) La barre sous la banniere (date + compteur) n'est plus une
      bande floue : simple bleu SOLIDE du theme de la page.
   3) Fond des cartes evenement : SOLIDE, plus de transparence ni blur.
   4) Pointilles au hover des concept items : meme couleur que le
      contour anime des event items (degrade bleu -> turquoise).
   ============================================================ */

/* 1) PC uniquement : plus de trapeze lumineux a gauche */
@media (min-width: 1300.02px) {
  .sv-event-item__content::before {
    border-left-width: 0 !important;
    border-left-color: transparent !important;
    box-shadow:
      inset 0 1px 0 rgba(140, 190, 255, 0.18),
      inset -1px -1px 0 rgba(0, 0, 0, 0.35) !important;
  }
}

/* 2) Bande date : bleu solide, sans flou ni couleurs extraites */
.sv-event-item__media-footer {
  background: #123a6b !important;
  isolation: auto !important;
}
.sv-event-item__media-footer::before,
.sv-event-item__media-footer::after {
  content: none !important;
  display: none !important;
}
.sv-event-item__media-footer .sv-event-item__date {
  background: transparent !important;
  outline: none !important;
}
.sv-event-item__media-footer .sv-event-item__date .sv-event-item__day,
.sv-event-item__media-footer .sv-event-item__date .sv-event-item__month,
.sv-event-item__media-footer .sv-event-item__date .sv-event-item__year {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* 3) Fond SOLIDE sur les cartes evenement */
.sv-event-item {
  background: #0a1c34 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 4) Pointilles hover des concept items = couleur du contour anime */
.sv-concept__item:hover,
.sv-section--concept .sv-concept__item:hover {
  outline-color: var(--accent) !important;
}

/* Au passage, le hover de la carte event adopte aussi cette couleur (pointille) */
.sv-event-item:hover {
  outline: 1px dashed var(--accent) !important;
}

/* 5) Barre de recherche 2x plus longue sur PC et tablette */
@media (min-width: 1300.02px) {
  .sv-fsearch {
    min-width: 400px !important;
  }
}
@media (max-width: 1300px) {
  .sv-fsearch {
    flex: 2 1 140px !important;
  }
}

/* 6) Pas d'effet hover sur les boutons filtres a cote de la recherche */
.sv-fdrop__btn:hover {
  outline-color: var(--border) !important;
  background: rgba(8, 20, 50, 0.6) !important;
  color: var(--text) !important;
}


/* ============================================================
   CORRECTIFS DEMANDES (derniere passe)
   A) Boutons filtres (Regions / Jeux / Types) : AUCUN effet au
      survol NI au clic NI a l'ouverture du menu.
   B) Les pointilles de survol reprennent EXACTEMENT les couleurs
      du contour anime (degrade issu des couleurs de la banniere).
   ============================================================ */

/* ---------- A) Filtres : etat visuel unique ---------- */
.sv-events__filters .sv-fdrop__btn,
.sv-events__filters .sv-fdrop__btn:hover,
.sv-events__filters .sv-fdrop__btn:focus,
.sv-events__filters .sv-fdrop__btn:focus-visible,
.sv-events__filters .sv-fdrop__btn:active,
.sv-events__filters .sv-fdrop__btn.is-press,
.sv-events__filters .sv-fdrop.open .sv-fdrop__btn,
.sv-fdrop__btn,
.sv-fdrop__btn:hover,
.sv-fdrop__btn:focus,
.sv-fdrop__btn:focus-visible,
.sv-fdrop__btn:active,
.sv-fdrop__btn.is-press,
.sv-fdrop.open .sv-fdrop__btn {
  background: rgba(8, 20, 50, 0.6) !important;
  outline: 1px solid var(--border) !important;
  outline-offset: -1px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
}
/* la fleche continue de pivoter a l'ouverture (indicateur d'etat) */
.sv-fdrop.open .sv-fdrop__chev { transform: rotate(180deg) !important; }

/* ---------- B) Pointilles animes = couleurs de la banniere ---------- */
/* Plus d'outline uni : on dessine un cadre en pointilles rempli par le
   MEME degrade conique anime que le contour des cartes event, decoupe
   par un masque en pointilles. */
.sv-event-item:hover,
.sv-concept__item,
.sv-section--concept .sv-concept__item,
.sv-concept__item:hover,
.sv-section--concept .sv-concept__item:hover {
  outline: none !important;
}

.sv-concept__item::after,
.sv-section--concept .sv-concept__item::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background:
    conic-gradient(from var(--sv-angle),
      var(--ev-c1, #2a5e9e) 0deg,
      var(--ev-c2, #5aa6f0) 60deg,
      var(--ev-c3, #bfe2ff) 130deg,
      var(--ev-c2, #6ff0e2) 205deg,
      var(--ev-c1, #5aa6f0) 290deg,
      var(--ev-c1, #2a5e9e) 360deg) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='0.5' y='0.5' width='99' height='99' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='4 2'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='0.5' y='0.5' width='99' height='99' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='4 2'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: 0.55 !important;
  animation: sv-rotate 6s linear infinite !important;
}

.sv-concept__item:hover::after,
.sv-section--concept .sv-concept__item:hover::after {
  opacity: 1 !important;
  animation-duration: 3.6s !important;
  filter: drop-shadow(0 0 8px rgba(140, 200, 255, 0.6)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .sv-concept__item::after,
  .sv-section--concept .sv-concept__item::after { animation: none !important; }
}

/* ============================================================
   CORRECTION FINALE — contour pointille au hover des events
   Les pointilles utilisent exactement le meme degrade dynamique
   (--ev-c1 a --ev-c4, extrait de la banniere) que le contour anime.
   ============================================================ */
.sv-event-item:hover::before {
  background:
    conic-gradient(from var(--sv-angle),
      var(--ev-c1, #3a78c8) 0deg,
      var(--ev-c2, #74bbff) 90deg,
      var(--ev-c3, #eaf5ff) 180deg,
      var(--ev-c4, #8df5ea) 270deg,
      var(--ev-c1, #3a78c8) 360deg) !important;
  /* le masque tourne AUSSI avec --sv-angle : les pointilles defilent
     comme avant, tout en laissant passer les couleurs de la banniere */
  -webkit-mask: repeating-conic-gradient(from var(--sv-angle),
    #000 0deg 6deg,
    transparent 6deg 14deg
  ) !important;
  mask: repeating-conic-gradient(from var(--sv-angle),
    #000 0deg 6deg,
    transparent 6deg 14deg
  ) !important;
  filter: drop-shadow(0 0 6px var(--ev-c2, #74bbff)) !important;
  animation: sv-rotate 3.6s linear infinite !important;
}

.sv-event-item:nth-of-type(even):hover::before {
  animation-direction: reverse !important;
}

@media (prefers-reduced-motion: reduce) {
  .sv-event-item:hover::before { animation: none !important; }
}


/* ============================================================
   CALENDRIER DES ÉVÈNEMENTS — vue mensuelle (sous Concept)
   Style aligné sur la page : fond navy, découpes anguleuses,
   bandes bleues (#1a4380 -> #0e2c58) et accents de la page.
   ============================================================ */
.sv-section--calendar {
  position: relative;
  padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 8vw, 110px);
  background:
    radial-gradient(ellipse 55% 60% at 12% 22%, rgba(26, 67, 128, 0.3), transparent 62%),
    radial-gradient(ellipse 50% 55% at 88% 100%, rgba(15, 59, 116, 0.32), transparent 62%),
    linear-gradient(180deg, #030814 0%, #051530 48%, #030814 100%);
  overflow: hidden;
}
/* Fine grille lumineuse en fond, estompée sur les bords */
.sv-section--calendar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(77, 163, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 163, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 25%, transparent 78%);
  pointer-events: none;
}
/* Fondu retiré (demande utilisateur) : Concept partage désormais
   les mêmes couleurs que la section Calendrier, voir fin de fichier. */
.sv-section--calendar .sv-inner {
  position: relative;
  z-index: 2;
}
@media (min-width: 1101px) {
  .sv-section--calendar .sv-inner {
    max-width: none;
    width: 100%;
    padding: 0 var(--page-pad, clamp(20px, 4vw, 100px));
  }
}

.sv-calendar {
  position: relative;
  background: rgba(8, 20, 50, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  clip-path: var(--clip-card);
  padding: clamp(14px, 1.8vw, 26px);
}

/* ── Barre du haut : flèches + Aujourd'hui à gauche, mois CENTRÉ ── */
.sv-cal__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
.sv-cal__ctrl {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-cal__balance { justify-self: end; }
.sv-cal__month {
  justify-self: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  position: relative;
  overflow: visible;
}
.sv-cal__month-stage {
  display: block;
  overflow: hidden;
  margin: 0 auto;
}
.sv-cal__month-track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}
.sv-cal__month-item {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
}
.sv-cal__month em {
  font-style: normal;
  color: var(--accent);
}
.sv-cal__today {
  font-family: inherit;
  font-size: clamp(10.5px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 14px;
  border-radius: 0;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.sv-cal__nav {
  /* Fleches larges (68px) sur TOUS les ecrans ; hauteur 34px inchangee,
     alignee sur le bouton AUJOURD'HUI (la fleche reste centree). */
  width: 68px;
}
.sv-cal__nav,
.sv-cal__today {
  box-sizing: border-box;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 24, 52, 0.5);
  border: 0;
  outline: 1px solid var(--border);
  outline-offset: -1px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--tr), background-color var(--tr), outline-color var(--tr), transform var(--tr);
}
.sv-cal__nav:hover,
.sv-cal__today:hover {
  color: var(--text);
  background: rgba(26, 67, 128, 0.35);
  outline-color: var(--border-hi);
}
.sv-cal__nav:active,
.sv-cal__today:active { transform: scale(0.93); }

/* ── En-têtes des jours (bande bleue comme les cartes events) ── */
.sv-cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 5px;
}
.sv-cal__day-name {
  font-family: var(--font-body, 'Barlow', sans-serif);
  background: rgba(10, 24, 52, 0.5);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  text-align: center;
  padding: 9px 0;
  font-size: clamp(9.5px, 0.8vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Grille des jours ── */
.sv-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.sv-cal__cell {
  position: relative;
  min-height: clamp(96px, 9.2vw, 150px);
  background: rgba(6, 16, 40, 0.62);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  padding: clamp(6px, 0.7vw, 10px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: background-color var(--tr), outline-color var(--tr);
}
.sv-cal__cell.is-out { opacity: 0.32; }
/* Jours déjà passés : grisés pour bien voir que c'est terminé */
.sv-cal__cell.is-past {
  opacity: 0.38;
  filter: grayscale(0.55) brightness(0.82);
}
.sv-cal__num {
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1;
}
.sv-cal__cell.is-today {
  outline: 1px solid var(--accent);
  background: rgba(26, 67, 128, 0.22);
}
.sv-cal__cell.is-today .sv-cal__num { color: var(--accent); }
.sv-cal__cell.has-events { cursor: pointer; }
.sv-cal__cell.has-events:hover,
.sv-cal__cell.has-events:focus-visible {
  background: rgba(26, 67, 128, 0.48);
  outline-color: var(--border-hi);
}

/* Pastilles évènement — mêmes familles de couleurs que les vignettes
   des cartes évènements (tournoi bleu / évènement violet / concours cyan) */
.sv-cal__chip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(9.5px, 0.75vw, 11px);
  font-weight: 600;
  color: var(--text);
  padding: 3px 6px;
  overflow: hidden;
}
.sv-cal__chip-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-cal__chip-logo {
  width: 12px;
  height: 12px;
  object-fit: contain;
  flex: none;
}
.sv-cal__chip--tournoi {
  background: rgba(90, 140, 230, 0.16);
  border-left: 2px solid #7ab4ff;
}
.sv-cal__chip--event {
  background: rgba(157, 92, 255, 0.14);
  border-left: 2px solid #9d5cff;
}
.sv-cal__chip--concours {
  background: rgba(255, 90, 90, 0.13);
  border-left: 2px solid #ff6b6b;
}
.sv-cal__more {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.sv-cal__dots { display: none; gap: 3px; margin-top: auto; }
.sv-cal__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.sv-cal__dot--tournoi { background: #7ab4ff; }
.sv-cal__dot--event { background: #9d5cff; }
.sv-cal__dot--concours { background: #ff6b6b; }

/* ── Popup de détails d'une journée ── */
.sv-calpop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
}
.sv-calpop.is-open { display: block; }
.sv-calpop__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 20, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sv-calpop__box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0a1c42 0%, #071228 100%);
  outline: 1px solid var(--border-hi);
  outline-offset: -1px;
  animation: svCalPopIn 0.22s var(--ease-out, ease-out) both;
}
@keyframes svCalPopIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.sv-calpop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #1a4380 0%, #0e2c58 100%);
}
.sv-calpop__title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.sv-calpop__close {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--tr), border-color var(--tr);
}
.sv-calpop__close:hover {
  color: var(--text);
  border-color: var(--border-hi);
}
.sv-calpop__list {
  display: grid;
  gap: 10px;
  padding: 16px 18px 20px;
}
.sv-calpop__item {
  display: block;
  text-decoration: none;
  background: rgba(8, 20, 50, 0.6);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background-color var(--tr), outline-color var(--tr);
}
.sv-calpop .sv-calpop__item:hover {
  background: rgba(26, 67, 128, 0.4);
  outline-color: var(--accent);
  transform: none !important;
  scale: none !important;
}
.sv-calpop__item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
/* Région : texte italique coloré, comme partout sur le site */
.sv-calpop__region {
  font-family: var(--font-body, 'Barlow', sans-serif) !important;
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sv-calpop__region--emea { color: #3d8bff; }
.sv-calpop__region--na { color: #ffd23d; }
.sv-calpop__region--sa { color: #34e06a; }
.sv-calpop__region--apac { color: #ff4d4d; }
.sv-calpop__go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.6;
  transition: opacity var(--tr), transform var(--tr);
}
.sv-calpop__item:hover .sv-calpop__go {
  opacity: 1;
  transform: translate(2px, -2px);
}
.sv-calpop__time {
  font-family: var(--font-body, 'Barlow', sans-serif) !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
/* Vignettes de type : MÊMES couleurs que sur les cartes évènements */
.sv-cal-type {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.sv-cal-type--tournoi {
  background: linear-gradient(135deg, #7ab4ff 0%, #3a72d8 100%);
  color: #0c2c72;
  outline-color: rgba(130, 175, 255, 0.7);
}
.sv-cal-type--event {
  background: linear-gradient(135deg, #9aa6ff 0%, #9d5cff 100%);
  color: #2c1170;
  outline-color: rgba(167, 139, 250, 0.85);
}
.sv-cal-type--concours {
  background: linear-gradient(135deg, #ff8a8a 0%, #e0353c 100%);
  color: #4a0a0e;
  outline-color: rgba(255, 105, 105, 0.8);
}
.sv-calpop__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
}
.sv-calpop__game {
  width: 22px;
  height: 22px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sv-calpop__game img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sv-calpop__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.sv-calpop__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Responsive : bascule mobile a partir de 600px ── */
@media (max-width: 600px) {
  .sv-cal__bar {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 12px;
  }
  /* Le MOIS passe AU-DESSUS des boutons */
  .sv-cal__month { order: -1; justify-self: center; }
  .sv-cal__balance { display: none; }
  /* Ligne de controles : fleches CENTREES de part et d'autre de AUJOURD'HUI */
  .sv-cal__ctrl {
    order: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
  }
  #svCalPrev  { order: 0; }
  #svCalToday { order: 1; }
  #svCalNext  { order: 2; }
  .sv-cal__cell {
    min-height: 48px;
    padding: 5px;
  }
  .sv-cal__chip,
  .sv-cal__more { display: none; }
  .sv-cal__dots { display: flex; }
  .sv-cal__num { font-size: 12px; }
}



/* ============================================================
   CONCEPT DES ÉVÈNEMENTS — titres des carrés plus grands et
   décollés du bord, format = bonshommes (1 par joueur).
   (Couleurs de section d'origine rétablies, fondu retiré.)
   ============================================================ */

/* Titre dans les carrés (ex : Brawl Ball) : plus grand et un peu
   plus bas, décollé de la bordure du carré. */
.sv-concept__item-title,
.sv-section--concept .sv-concept__item-title {
  font-size: clamp(17px, 1.55vw, 24px) !important;
  margin: clamp(12px, 1.2vw, 20px) 0 9px 0 !important;
}

/* Format : un bonhomme par joueur (ex : 3 joueurs = 3 bonshommes) */
.sv-concept__item-format,
.sv-section--concept .sv-concept__item-format {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  color: var(--text-muted);
}
.sv-concept__ppl {
  width: 12px;
  height: 12px;
  flex: none;
}

/* ============================================================
   FILTRES ÉVÈNEMENTS — boutons plus simples et plus élégants
   (Status / Region / Platform / Types)
   ============================================================ */
.sv-fdrop__btn {
  min-width: 118px;
  font-family: var(--font-display);
  font-size: clamp(11.5px, 0.95vw, 13.5px);
  font-weight: 400;
  letter-spacing: 0.14em;
  background: rgba(8, 20, 50, 0.45);
  color: var(--text-muted);
  clip-path: none;
  border-radius: 3px;
}
.sv-fdrop__btn:hover {
  color: var(--text);
  background: rgba(94, 170, 255, 0.08);
  outline-color: var(--border-hi);
}
.sv-fdrop.open .sv-fdrop__btn {
  color: var(--accent);
  outline-color: var(--accent);
}
.sv-fdrop__menu {
  clip-path: none;
  border-radius: 3px;
}
.sv-fdrop__chev { opacity: 0.7; }

/* ============================================================
   CONCEPT DES ÉVÈNEMENTS — FLIP 3D (titre <-> description)
   Structure injectee par communaute.js :
     .sv-concept__item > .sv-concept__flip
       > .sv-concept__face--front (titre)
       > .sv-concept__face--back  (description)
   Le pied (type/format) et le cadre anime ::after restent des
   enfants directs de .sv-concept__item, HORS du contexte 3D :
   ils ne tournent pas et ne clignotent pas pendant la rotation.
   Les deux faces restent dans le DOM (lecteurs d'ecran).
   ============================================================ */
.sv-concept__item,
.sv-section--concept .sv-concept__item {
  perspective: 900px !important;
  -webkit-perspective: 900px !important;
  cursor: pointer !important;
}

.sv-concept__item .sv-concept__flip,
.sv-section--concept .sv-concept__item .sv-concept__flip {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  -webkit-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.2, 1) !important;
  transform: rotateY(0deg);
  will-change: transform;
}
.sv-concept__item.is-flipped .sv-concept__flip,
.sv-section--concept .sv-concept__item.is-flipped .sv-concept__flip {
  transform: rotateY(180deg);
}

.sv-concept__item .sv-concept__face,
.sv-section--concept .sv-concept__item .sv-concept__face {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  /* translateZ leger : anti-bavures de rendu 3D */
  transform: rotateY(0deg) translateZ(2px);
}
.sv-concept__item .sv-concept__face--back,
.sv-section--concept .sv-concept__item .sv-concept__face--back {
  transform: rotateY(180deg) translateZ(2px);
}

/* Titre (ex : Brawl Ball) : centre VERTICALEMENT et HORIZONTALEMENT
   dans le carre (la marge haute historique est annulee) */
.sv-concept__item .sv-concept__face--front .sv-concept__item-title,
.sv-section--concept .sv-concept__item .sv-concept__face--front .sv-concept__item-title {
  margin: 0 !important;
}

/* Description : centree, ne deborde jamais de la face */
.sv-concept__item .sv-concept__face--back .sv-concept__item-desc,
.sv-section--concept .sv-concept__item .sv-concept__face--back .sv-concept__item-desc {
  margin: 0 !important;
  width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Accessibilite : flip remplace par un fondu simple */
@media (prefers-reduced-motion: reduce) {
  .sv-concept__item .sv-concept__flip,
  .sv-section--concept .sv-concept__item .sv-concept__flip {
    transition: none !important;
    transform: none !important;
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
  }
  .sv-concept__item .sv-concept__face,
  .sv-section--concept .sv-concept__item .sv-concept__face {
    transform: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    transition: opacity 0.45s ease !important;
  }
  .sv-concept__item .sv-concept__face--front { opacity: 1; }
  .sv-concept__item .sv-concept__face--back  { opacity: 0; }
  .sv-concept__item.is-flipped .sv-concept__face--front { opacity: 0; }
  .sv-concept__item.is-flipped .sv-concept__face--back  { opacity: 1; }
}


/* ============================================================
   CONCEPT — CARTES CONFORMES A index.html (grid-feature-cards)
   1) Motif : grille FINE en traits PLEINS (plus de pointilles)
      + carres remplis ALEATOIRES, injectes par communaute.js
      (.sv-concept__pattern), memes masques que le composant
      d'origine (fondu lineaire vers le bas + radial en haut).
   2) Bordure : pointilles FINS de 1px (le masque SVG sans viewBox
      utilise des unites pixel => plus d'epaississement a l'echelle),
      le degrade conique anime est conserve.
   ============================================================ */

/* L'ancien motif CSS (grille en pointilles figee) est retire */
.sv-concept__item::before,
.sv-section--concept .sv-concept__item::before {
  content: none !important;
  display: none !important;
}

/* Conteneur du motif (equivalent .pattern-wrap d'index.html) */
.sv-concept__item .sv-concept__pattern,
.sv-section--concept .sv-concept__item .sv-concept__pattern,
#sv-concept-section .sv-concept__empty .sv-concept__pattern {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin-top: -0.5rem !important;
  margin-left: -5rem !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  -webkit-mask-image: linear-gradient(white, transparent) !important;
  mask-image: linear-gradient(white, transparent) !important;
}

/* Equivalent .pattern-inner d'index.html, couleurs du theme VELRA */
.sv-concept__item .sv-concept__pattern-inner,
.sv-section--concept .sv-concept__item .sv-concept__pattern-inner,
#sv-concept-section .sv-concept__empty .sv-concept__pattern-inner {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to right, rgba(230, 241, 255, 0.05), rgba(230, 241, 255, 0.01)) !important;
  -webkit-mask-image: radial-gradient(farthest-side at top, white, transparent) !important;
  mask-image: radial-gradient(farthest-side at top, white, transparent) !important;
}

.sv-concept__item .sv-concept__pattern-inner svg,
.sv-section--concept .sv-concept__item .sv-concept__pattern-inner svg,
#sv-concept-section .sv-concept__empty .sv-concept__pattern-inner svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  fill: rgba(230, 241, 255, 0.05) !important;
  stroke: rgba(230, 241, 255, 0.25) !important;
  mix-blend-mode: overlay !important;
}

/* Bordure en pointilles FINS (1px, tirets 4px / 3px) : le SVG du
   masque n'a pas de viewBox => unites en pixels, aucune mise a
   l'echelle du trait quelle que soit la taille de la carte. */
.sv-concept__item::after,
.sv-section--concept .sv-concept__item::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='2' stroke-dasharray='4 3'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='2' stroke-dasharray='4 3'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   CONCEPT — AJUSTEMENTS DEMANDES
   1) 2 colonnes MAXIMUM sur PC, tablette et mobile
   2) Rotation : les cartes en trop sont masquees et remplacent
      une carte visible toutes les 8s (classe .is-slot-hidden,
      logique dans communaute.js) avec un fondu d'apparition
   3) Type (COMPETITIF / AMUSANT) en HAUT A GAUCHE, le format
      (bonshommes) reste en bas a droite
   4) Grille de fond plus DISCRETE (teinte proche du fond, plus
      de blanc) et positionnee en HAUT A DROITE (miroir)
   5) Hover / carte figee au clic : contour en ligne PLEINE de
      la meme epaisseur que les pointilles (1px)
   ============================================================ */

/* --- 1) Colonnes : PC 5 (max 10 visibles), tablette 4 (max 8),
       mobile 2 (max 4) — le surplus tourne toutes les 8s --- */
.sv-concept__panel.active,
.sv-section--concept .sv-concept__panel.active {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1300px) {
  .sv-concept__panel.active,
  .sv-section--concept .sv-concept__panel.active {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .sv-concept__panel.active,
  .sv-section--concept .sv-concept__panel.active {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- 2) cartes en trop masquees ; l'animation rotateY unique est definie
   dans le bloc de livraison final, avec le meme style que le flip historique. */
.sv-concept__item.is-slot-hidden,
.sv-section--concept .sv-concept__item.is-slot-hidden {
  display: none !important;
}
.sv-concept__item.is-swap-out,
.sv-section--concept .sv-concept__item.is-swap-out {
  position: relative;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
  transform-origin: center center !important;
}
.sv-concept__item.is-swap-in,
.sv-section--concept .sv-concept__item.is-swap-in {
  position: relative;
  z-index: 2;
  will-change: transform;
  transform-origin: center center !important;
}

/* --- 3) type en haut a gauche, format en bas a droite --- */
.sv-concept__item-foot,
.sv-section--concept .sv-concept__item-foot {
  top: clamp(10px, 1cqw, 16px) !important;
  bottom: clamp(6px, 0.8cqw, 12px) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
}
.sv-concept__item-kind,
.sv-section--concept .sv-concept__item-kind { align-self: flex-start !important; }
.sv-concept__item-format,
.sv-section--concept .sv-concept__item-format { align-self: flex-end !important; }

/* --- 4) grille discrete (teinte du fond) et en haut a DROITE ---
   scaleX(-1) : miroir horizontal -> les carres aleatoires passent
   du haut-gauche au haut-droite, les masques restent symetriques */
.sv-concept__item .sv-concept__pattern,
.sv-section--concept .sv-concept__item .sv-concept__pattern,
#sv-concept-section .sv-concept__empty .sv-concept__pattern {
  margin-left: 0 !important;
  transform: scaleX(-1) !important;
}
.sv-concept__item .sv-concept__pattern-inner,
.sv-section--concept .sv-concept__item .sv-concept__pattern-inner,
#sv-concept-section .sv-concept__empty .sv-concept__pattern-inner {
  background: none !important;
}
.sv-concept__item .sv-concept__pattern-inner svg,
.sv-section--concept .sv-concept__item .sv-concept__pattern-inner svg,
#sv-concept-section .sv-concept__empty .sv-concept__pattern-inner svg {
  stroke: rgba(96, 148, 214, 0.13) !important;
  fill: rgba(96, 148, 214, 0.10) !important;
  mix-blend-mode: normal !important;
}

/* --- 5) hover ou carte figee : ligne PLEINE de 1px (meme epaisseur
   que les pointilles), le degrade anime du contour est conserve --- */
.sv-concept__item:hover::after,
.sv-section--concept .sv-concept__item:hover::after,
.sv-concept__item.is-frozen::after,
.sv-section--concept .sv-concept__item.is-frozen::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") !important;
}
.sv-concept__item.is-frozen::after,
.sv-section--concept .sv-concept__item.is-frozen::after {
  opacity: 1 !important;
}


/* ============================================================
   FILTRES EVENTS — RECHERCHE A GAUCHE, BOUTONS A DROITE
   - La barre de recherche passe en PREMIER (gauche) avec une
     largeur FIXE = largeur des 4 boutons par defaut reunis
     (4 x 118px + 3 gaps de 10px = 502px) : coherence visuelle.
   - Les 4 boutons sont pousses a DROITE de la page.
   - Quand un bouton change de forme (filtre selectionne), la
     barre de recherche ne bouge pas (largeur fixe, flex none).
   ============================================================ */
.sv-events__filters .sv-fsearch,
.sv-events__filters .sv-fsearch#filterSearch {
  order: -1 !important;
  margin-right: auto !important;
}
@media (min-width: 1300.02px) {
  .sv-events__filters .sv-fsearch,
  .sv-events__filters .sv-fsearch#filterSearch {
    flex: 0 0 auto !important;
    width: calc(4 * 118px + 3 * 10px) !important;   /* = 502px */
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   FIX — BARRE DE SCROLL DES EVENTS RETABLIE SUR PC (>= 1300px)
   La gouttiere PC existante (absolute a droite de la liste) est
   conservee telle quelle : le correctif est dans communaute.js
   (la barre verticale reste TOUJOURS visible, meme quand tous
   les events tiennent a l'ecran, au lieu de se masquer).
   ============================================================ */

/* ============================================================
   FILTRES EVENTS — CENTRAGE PC UNIQUEMENT (> 1300px)
   La barre de recherche est placee juste a GAUCHE du centre et
   les boutons (Status / Region / Platform / Types) juste a DROITE
   du centre. Le groupe entier est centre horizontalement.
   Tablette et mobile (<= 1300px) : aucun changement.
   ============================================================ */
@media (min-width: 1301px) {
  .sv-events__filters {
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }
  /* la recherche passe en premier => a gauche du centre ;
     on ANNULE le margin-right:auto (qui poussait les boutons a
     l'extreme droite) pour que le groupe recherche+boutons soit
     centre : recherche au centre-gauche, boutons au centre-droite. */
  .sv-events__filters .sv-fsearch,
  .sv-events__filters .sv-fsearch#filterSearch {
    order: -1;
    margin-right: 0 !important;
  }
  .sv-events__filters .sv-fdrop { order: 0; }
}


/* ============================================================
   AJUST FINAL — filtres & barre de scroll
   1) Recherche et boutons EXACTEMENT la meme hauteur sur PC.
   2) Contour des boutons : bleu-gris discret (plus de blanc dur).
   3) Barre de scroll custom : tons sourds fondus dans le decor navy.
   ============================================================ */
@media (min-width: 1301px) {
  .sv-events__filters .sv-fsearch,
  .sv-events__filters .sv-fsearch#filterSearch,
  .sv-events__filters .sv-fdrop__btn {
    height: 38px !important;
    min-height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* 2) Contours boutons filtres — discrets, fondus (plus de blanc) */
.sv-events__filters .sv-fdrop__btn,
.sv-events__filters .sv-fdrop__btn:hover,
.sv-events__filters .sv-fdrop__btn:focus,
.sv-events__filters .sv-fdrop__btn:focus-visible,
.sv-events__filters .sv-fdrop__btn:active,
.sv-events__filters .sv-fdrop__btn.is-press,
.sv-events__filters .sv-fdrop.open .sv-fdrop__btn {
  outline: 1px solid rgba(120, 156, 208, 0.26) !important;
  outline-offset: -1px !important;
}
.sv-events__filters .sv-fdrop__btn:hover {
  outline-color: rgba(120, 156, 208, 0.42) !important;
}
.sv-events__filters .sv-fdrop.open .sv-fdrop__btn {
  outline-color: rgba(94, 170, 255, 0.55) !important;
}

/* 3) Barre de scroll custom — bleus opaques assortis aux boutons item event */
.sv-cscroll__track {
  background: linear-gradient(135deg,
    #123a6b 0%,
    #0d2d58 100%) !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 12, 0.45)) !important;
}
.sv-cscroll__thumb,
.sv-cscroll .sv-cscroll__thumb {
  background: linear-gradient(180deg,
    #2f78d6 0%,
    #1f5fb0 100%) !important;
  filter: drop-shadow(0 2px 5px rgba(16, 65, 130, 0.65)) !important;
}
.sv-cscroll__thumb:hover {
  background: linear-gradient(180deg,
    #4b91e8 0%,
    #2b6fc5 100%) !important;
  filter: drop-shadow(0 2px 7px rgba(31, 95, 176, 0.75)) !important;
  transform: none !important;
}
.sv-cscroll__fill {
  background: linear-gradient(180deg,
    #276cc2 0%,
    #1f5fb0 100%) !important;
  mix-blend-mode: normal !important;
}

/* ============================================================
   PENTE INVERSEE — Concept -> Calendrier
   Meme amplitude que l'accueil (--team-slope), mais le sommet
   de la diagonale est a GAUCHE (accueil : a droite).

   Le calendrier remonte dans le concept. La pente est un
   clip-path : chaque fond reste intact, aucun trou, le triangle
   droit laisse voir le fond du concept, le triangle gauche est
   le fond du calendrier. Padding extra = le contenu n'est jamais
   coupe par la diagonale.
   ============================================================ */
.sv-section--concept,
.sv-section--calendar {
  --sv-slope: var(--team-slope, clamp(36px, 5vw, 110px));
}

.sv-section--concept {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-bottom: calc(clamp(40px, 5vw, 80px) + var(--sv-slope));
}

.sv-section--calendar {
  position: relative;
  z-index: 3;
  overflow: hidden;
  margin-top: calc(-1 * var(--sv-slope));
  padding-top: calc(clamp(40px, 6vw, 90px) + var(--sv-slope));
  clip-path: polygon(
    0 0,
    100% var(--sv-slope),
    100% 100%,
    0 100%
  );
  -webkit-clip-path: polygon(
    0 0,
    100% var(--sv-slope),
    100% 100%,
    0 100%
  );
}

/* (20/10/2026 v37) Etoiles du titre « Evenements en vedette » retirees
   (deplacees sur « Premium », page Services). */

/* ============================================================
   AJUSTEMENT CIBLE — FILTRES EVENTS
   Les boutons reprennent la surface et le contour de la recherche.
   La recherche conserve des angles droits, sans decoupe.
   ============================================================ */
.sv-events__filters .sv-fsearch,
.sv-events__filters .sv-fsearch#filterSearch {
  background: rgba(8, 20, 50, 0.6) !important;
  outline: 1px solid var(--border) !important;
  outline-offset: -1px !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  box-shadow: none !important;
}

.sv-events__filters .sv-fdrop__btn,
.sv-events__filters .sv-fdrop__btn:hover,
.sv-events__filters .sv-fdrop__btn:focus,
.sv-events__filters .sv-fdrop__btn:focus-visible,
.sv-events__filters .sv-fdrop__btn:active,
.sv-events__filters .sv-fdrop__btn.is-press,
.sv-events__filters .sv-fdrop.open .sv-fdrop__btn {
  background: rgba(8, 20, 50, 0.6) !important;
  outline: 1px solid var(--border) !important;
  outline-offset: -1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  color: var(--text-muted) !important;
  font-family: "Bebas Neue", sans-serif !important;
  box-shadow: none !important;
}

/* Centrage ciblé du message d’état vide des événements */
.sv-events__scroll > .sv-events__empty,
.sv-events__empty {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Correction finale : l’état vide occupe les deux colonnes de la grille */
.sv-events__scroll > .sv-events__empty {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
}


/* ============================================================
   CONCEPT DES EVENEMENTS — DEMANDE UTILISATEUR
   1) Retrait de l'effet HOVER sur les contours des carres :
      le contour reste identique au survol (pointilles, meme
      opacite, meme vitesse d'animation, sans halo ni ligne pleine).
   2) Au CLIC : le carre retrecit legerement puis revient a sa
      forme initiale (petit rebond).
   ============================================================ */

/* 1) Neutralisation de l'effet hover du contour anime des carres.
   On force l'etat de survol a etre identique a l'etat de base. */
.sv-concept__item:hover::after,
.sv-section--concept .sv-concept__item:hover::after {
  opacity: 0.55 !important;
  animation-duration: 6s !important;
  filter: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='0.5' y='0.5' width='99' height='99' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='4 2'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='0.5' y='0.5' width='99' height='99' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='4 2'/%3E%3C/svg%3E") !important;
}

/* 2) Animation de clic : leger retrecissement puis retour a la normale */
@keyframes sv-concept-click-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.955); }
  100% { transform: scale(1); }
}
.sv-concept__item.is-click-pulse,
.sv-section--concept .sv-concept__item.is-click-pulse {
  animation: sv-concept-click-pulse 0.28s ease !important;
  transform-origin: center center !important;
}

@media (prefers-reduced-motion: reduce) {
  .sv-concept__item.is-click-pulse,
  .sv-section--concept .sv-concept__item.is-click-pulse {
    animation: none !important;
  }
}

/* ============================================================
   FINAL — Survol neutre + clic conserve
   - Pas d'effet visuel au survol des carres (couleur, halo,
     ligne pleine, ombre) MAIS on garde intact l'effet de clic
     (retrecissement .is-click-pulse) : on ne touche PAS a
     transform/animation sur le carre lui-meme.
   - Quand le carre est fige au clic (.is-frozen), le contour
     en ligne PLEINE reste visible meme si le curseur passe
     dessus (le :hover ne le remet plus en pointille).
   ============================================================ */

/* Neutralise le survol seulement sur les proprietes visuelles,
   sans casser l'animation de clic (transform / animation). */
.sv-concept__item:hover:not(.is-frozen),
.sv-section--concept .sv-concept__item:hover:not(.is-frozen) {
  box-shadow: none !important;
  filter: none !important;
  outline-color: #23486f !important;
  background: #0a1c34 !important;
}

/* Contour anime : au survol d'un carre NON fige on reste en pointille */
.sv-concept__item:hover:not(.is-frozen)::after,
.sv-section--concept .sv-concept__item:hover:not(.is-frozen)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='0.5' y='0.5' width='99' height='99' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='4 2'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='0.5' y='0.5' width='99' height='99' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='4 2'/%3E%3C/svg%3E") !important;
  opacity: 0.55 !important;
  animation-duration: 6s !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Carre fige au clic : le contour PLEIN reste visible meme au survol */
.sv-concept__item.is-frozen:hover::after,
.sv-section--concept .sv-concept__item.is-frozen:hover::after,
.sv-concept__item.is-frozen::after,
.sv-section--concept .sv-concept__item.is-frozen::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='0.5' y='0.5' width='99' height='99' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Crect x='0.5' y='0.5' width='99' height='99' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") !important;
  opacity: 1 !important;
}

/* Aucun halo/filter/anim sur le ::before au survol */
.sv-concept__item:hover::before,
.sv-section--concept .sv-concept__item:hover::before {
  filter: none !important;
  animation: none !important;
  box-shadow: none !important;
}


/* ============================================================
   POLICE OBLISK — ajouts
   - Hero "Tout pour la victoire"
   - Titres des carrés du Concept (ex : Brawl Ball) + taille agrandie
   - Mois du calendrier
   ============================================================ */

/* Hero : "Tout pour la victoire" */
.sv-hero__title,
.sv-hero__title em {
  font-family: 'Oblisk', var(--font-display) !important;
  font-weight: 400 !important;      /* OBLISK n'existe qu'en Regular : on évite le faux gras */
  font-synthesis: none !important;  /* empêche le navigateur de fabriquer un gras artificiel */
}

/* Concept — titres dans les carrés (ex : Brawl Ball), police Oblisk + agrandis */
.sv-concept__item-title,
.sv-section--concept .sv-concept__item-title {
  font-family: 'Oblisk', var(--font-display) !important;
  font-size: clamp(22px, 2.1vw, 32px) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* Calendrier — nom du mois */
.sv-cal__month,
.sv-cal__month em,
.sv-cal__month-item {
  font-family: 'Oblisk', var(--font-display) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* ============================================================
   MAJ — CONCEPT : VIGNETTE DE TYPE (COMPETITIF / AMUSANT)
   Demande : transformer le libelle de type (haut-gauche des
   cartes concept) en VIGNETTE.
   - Fondu degrade a GAUCHE (transparent -> couleur).
   - Cote DROIT : PAS de fondu, la vignette est tranchee net
     par une diagonale a 45°. Le coin HAUT-DROITE est plus
     AVANCE (plus a droite) que le coin BAS-DROITE.
     -> pente = hauteur de la vignette (20px) = 45° exact.
   - S'adapte a la LONGUEUR du texte (largeur = contenu) et a
     sa taille (hauteur fixe, coherente avec la police du foot).
   ============================================================ */
.sv-concept__item-kind,
.sv-section--concept .sv-concept__item-kind {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  width: auto !important;
  height: 20px !important;                 /* hauteur de reference = pente du 45° */
  padding: 0 28px 0 12px !important;       /* marge droite = place pour la diagonale */
  color: #eaf2ff !important;
  isolation: isolate !important;           /* le fond reste derriere le texte, au-dessus de la carte */
  overflow: visible !important;
}

/* Fond de la vignette : degrade a gauche + coupe 45° a droite */
.sv-concept__item-kind::before,
.sv-section--concept .sv-concept__item-kind::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  /* fondu degrade sur la GAUCHE, plein a DROITE (aucun fondu a droite) */
  background: linear-gradient(
    90deg,
    rgba(42, 108, 196, 0)   0%,
    rgba(42, 108, 196, 0.35) 30%,
    rgba(52, 130, 226, 0.85) 70%,
    rgba(66, 148, 240, 0.96) 100%
  ) !important;
  /* diagonale 45° : haut-droite (100%) plus avance que bas-droite
     (100% - 20px), 20px = hauteur -> angle exact de 45° */
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) !important;
          clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) !important;
}

/* ============================================================
   CONCEPT — AJUSTEMENT FINAL
   - Titres des modes plus lisibles (ex. Brawl Ball)
   - Titre et description gardent exactement la meme teinte pendant
     le flip
   - Vignettes : rouge pour COMPETITIF, vert pour AMUSANT
   ============================================================ */

/* Le titre reste lisible sur les deux faces et reprend la couleur
   de la description quand la carte bascule. */
.sv-concept__item-title,
.sv-section--concept .sv-concept__item-title,
.sv-concept__item-desc,
.sv-section--concept .sv-concept__item-desc {
  color: var(--text-muted) !important;
}

/* Taille volontairement plus presente, sans faire deborder les petits
   formats de carte. */
.sv-concept__item-title,
.sv-section--concept .sv-concept__item-title {
  font-size: clamp(24px, 2.6vw, 38px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.025em !important;
}

/* Le fond de la vignette reste bien visible au-dessus de la carte. */
.sv-concept__item-kind,
.sv-section--concept .sv-concept__item-kind {
  z-index: 1 !important;
}

.sv-concept__item-kind::before,
.sv-section--concept .sv-concept__item-kind::before {
  z-index: 0 !important;
}

/* Palette rouge harmonisee avec le bleu nuit de la page. */
.sv-concept__item-kind.is-competitive::before,
.sv-section--concept .sv-concept__item-kind.is-competitive::before {
  background: linear-gradient(
    90deg,
    rgba(122, 31, 57, 0) 0%,
    rgba(156, 39, 65, 0.35) 30%,
    rgba(205, 66, 82, 0.86) 70%,
    rgba(228, 91, 101, 0.98) 100%
  ) !important;
}

/* Palette verte fraiche, mais suffisamment sombre pour rester elegante
   sur le fond marine. */
.sv-concept__item-kind.is-fun::before,
.sv-section--concept .sv-concept__item-kind.is-fun::before {
  background: linear-gradient(
    90deg,
    rgba(24, 104, 91, 0) 0%,
    rgba(29, 139, 111, 0.35) 30%,
    rgba(51, 184, 137, 0.86) 70%,
    rgba(91, 220, 164, 0.98) 100%
  ) !important;
}

.sv-concept__item-kind.is-competitive,
.sv-section--concept .sv-concept__item-kind.is-competitive {
  color: #ffecef !important;
  text-shadow: 0 1px 2px rgba(58, 8, 22, 0.45);
}

.sv-concept__item-kind.is-fun,
.sv-section--concept .sv-concept__item-kind.is-fun {
  color: #eafff5 !important;
  text-shadow: 0 1px 2px rgba(5, 53, 41, 0.45);
}

/* ============================================================
   CONCEPT — CONTOUR FIN ET HOVER NEUTRE
   Le contour actif et le contour pointille utilisent tous les deux
   un trait de 1px. Le hover ne change plus la bordure ni la carte.
   ============================================================ */

/* Le titre est double par rapport a la taille precedente, avec une
   limite pour conserver le texte dans les cartes plus etroites. */
.sv-concept__item-title,
.sv-section--concept .sv-concept__item-title {
  font-size: clamp(44px, 5.2vw, 76px) !important;
  line-height: 0.98 !important;
}

/* Retire toute ancienne couche de contour epais ajoutee au survol. */
.sv-concept__item::before,
.sv-section--concept .sv-concept__item::before,
.sv-concept__item:hover::before,
.sv-section--concept .sv-concept__item:hover::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Etat normal et hover : meme masque, meme epaisseur, meme opacite.
   Le SVG n'a volontairement pas de viewBox pour conserver 1px reel. */
.sv-concept__item::after,
.sv-section--concept .sv-concept__item::after,
.sv-concept__item:hover::after,
.sv-section--concept .sv-concept__item:hover::after,
.sv-concept__item:hover:not(.is-frozen)::after,
.sv-section--concept .sv-concept__item:hover:not(.is-frozen)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='4 3'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='4 3'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: 0.55 !important;
  animation-duration: 6s !important;
  filter: none !important;
  box-shadow: none !important;
  background:
    conic-gradient(from var(--sv-angle),
      var(--ev-c1, #2a5e9e) 0deg,
      var(--ev-c2, #5aa6f0) 60deg,
      var(--ev-c3, #bfe2ff) 130deg,
      var(--ev-c2, #6ff0e2) 205deg,
      var(--ev-c1, #5aa6f0) 290deg,
      var(--ev-c1, #2a5e9e) 360deg) !important;
}

/* Au clic, seul l'etat fige reste indique : contour plein, mais
   toujours de 1px, exactement comme le contour pointille. */
.sv-concept__item.is-frozen::after,
.sv-section--concept .sv-concept__item.is-frozen::after,
.sv-concept__item.is-frozen:hover::after,
.sv-section--concept .sv-concept__item.is-frozen:hover::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: 1 !important;
  animation-duration: 6s !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Aucun changement de surface/halo au survol : les interactions JS
   (flip, clic, pause et rotation) restent intactes. */
.sv-concept__item:hover:not(.is-frozen),
.sv-section--concept .sv-concept__item:hover:not(.is-frozen),
.sv-concept__item.is-frozen:hover,
.sv-section--concept .sv-concept__item.is-frozen:hover {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ============================================================
   CORRECTION — CARTES OPAQUES ET CONTOURS COMPLETS
   Le masque du contour etait responsable des cotes droit/bas absents
   selon le navigateur. On revient a un contour CSS natif de 1px :
   il reste visible sur les quatre cotes et le clic garde son etat.
   ============================================================ */

.sv-concept__item,
.sv-section--concept .sv-concept__item,
.sv-concept__item:hover,
.sv-section--concept .sv-concept__item:hover {
  background: #0a1c34 !important;
  outline: 1px dashed rgba(94, 170, 255, 0.55) !important;
  outline-offset: -1px !important;
  box-shadow: none !important;
  filter: none !important;
}

/* On desactive uniquement la couche graphique defectueuse, pas le clic,
   le flip, la pause ni la rotation geres par JavaScript. */
.sv-concept__item::after,
.sv-section--concept .sv-concept__item::after {
  content: none !important;
  display: none !important;
}

.sv-concept__item.is-frozen,
.sv-section--concept .sv-concept__item.is-frozen,
.sv-concept__item.is-frozen:hover,
.sv-section--concept .sv-concept__item.is-frozen:hover {
  background: #0a1c34 !important;
  outline: 1px solid rgba(154, 207, 255, 0.95) !important;
  outline-offset: -1px !important;
}

/* La vignette est opaque sous le texte : aucune disparition progressive
   du libelle, ni transparence heritee du pied de carte. */
.sv-concept__item-foot,
.sv-section--concept .sv-concept__item-foot {
  opacity: 1 !important;
}

.sv-concept__item-kind::before,
.sv-section--concept .sv-concept__item-kind::before {
  z-index: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(183, 54, 73, 0.96) 0%,
    rgba(225, 91, 101, 0.98) 100%
  ) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) !important;
          clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) !important;
}

.sv-concept__item-kind.is-fun::before,
.sv-section--concept .sv-concept__item-kind.is-fun::before {
  background: linear-gradient(
    90deg,
    rgba(38, 151, 113, 0.96) 0%,
    rgba(91, 220, 164, 0.98) 100%
  ) !important;
}

.sv-concept__item-kind.is-competitive,
.sv-section--concept .sv-concept__item-kind.is-competitive {
  position: relative !important;
  z-index: 1 !important;
  color: #661d2d !important;
  text-shadow: none !important;
}

.sv-concept__item-kind.is-fun,
.sv-section--concept .sv-concept__item-kind.is-fun {
  position: relative !important;
  z-index: 1 !important;
  color: #0f553f !important;
  text-shadow: none !important;
}

/* ============================================================
   CORRECTION FINALE — VIGNETTE SOUS LE TEXTE
   Le fond ne passe plus par un pseudo-element : il est directement
   sur la vignette, donc le libelle reste toujours net et visible.
   ============================================================ */

.sv-concept__item-kind,
.sv-section--concept .sv-concept__item-kind {
  position: relative !important;
  z-index: 2 !important;
  isolation: auto !important;
  overflow: hidden !important;
  opacity: 1 !important;
  color: #661d2d !important;
  -webkit-text-fill-color: currentColor !important;
  background: linear-gradient(
    135deg,
    #e45b65 0%,
    #b73649 100%
  ) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) !important;
          clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) !important;
}

.sv-concept__item-kind::before,
.sv-section--concept .sv-concept__item-kind::before {
  content: none !important;
  display: none !important;
}

.sv-concept__item-kind.is-competitive,
.sv-section--concept .sv-concept__item-kind.is-competitive {
  color: #661d2d !important;
  -webkit-text-fill-color: currentColor !important;
  background: linear-gradient(
    135deg,
    #e45b65 0%,
    #b73649 100%
  ) !important;
}

.sv-concept__item-kind.is-fun,
.sv-section--concept .sv-concept__item-kind.is-fun {
  color: #0f553f !important;
  -webkit-text-fill-color: currentColor !important;
  background: linear-gradient(
    135deg,
    #5bdca4 0%,
    #269771 100%
  ) !important;
}

/* ============================================================
   AJUSTEMENT FINAL — FONDU DE LA VIGNETTE + HOVER LEGER
   Le fondu revient depuis la gauche de la vignette.
   Le survol ne rend plus le carre transparent : il applique seulement
   un agrandissement discret, sans modifier le clic ni le flip.
   ============================================================ */

.sv-concept__item-kind.is-competitive,
.sv-section--concept .sv-concept__item-kind.is-competitive {
  background: linear-gradient(
    90deg,
    rgba(228, 91, 101, 0) 0%,
    rgba(228, 91, 101, 0.62) 32%,
    #b73649 100%
  ) !important;
}

.sv-concept__item-kind.is-fun,
.sv-section--concept .sv-concept__item-kind.is-fun {
  background: linear-gradient(
    90deg,
    rgba(91, 220, 164, 0) 0%,
    rgba(91, 220, 164, 0.62) 32%,
    #269771 100%
  ) !important;
}

/* Le fond reste opaque pendant le survol : seul le carre grandit
   legerement. La declaration transform reste non-importante afin de
   laisser l'animation de clic .is-click-pulse prendre la main. */
.sv-concept__item:hover:not(.is-frozen),
.sv-section--concept .sv-concept__item:hover:not(.is-frozen),
.sv-concept__item.is-frozen:hover,
.sv-section--concept .sv-concept__item.is-frozen:hover {
  background: #0a1c34 !important;
  outline: 1px dashed rgba(94, 170, 255, 0.55) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 180ms ease, background 180ms ease, outline-color 180ms ease !important;
}

.sv-concept__item:not(:hover) {
  transform: scale(1);
  transition: transform 180ms ease, background 180ms ease, outline-color 180ms ease !important;
}

.sv-concept__item.is-frozen:hover,
.sv-section--concept .sv-concept__item.is-frozen:hover {
  outline-style: solid !important;
  outline-color: rgba(154, 207, 255, 0.95) !important;
}


/* ============================================================
   MAJ v3 — MEMES EFFETS DE LUMIERE / DEGRADES QU'AU DEPART,
   mais teintes avec la couleur de la bande sous la banniere
   (version un peu plus sombre, pas noire).
   Le JS pose sur la carte :
     --ev-band-dark : couleur de la bande, legerement assombrie
     --ev-band-deep : la meme, un peu plus profonde (fond de carte)
   ============================================================ */

/* Fond de carte : teinte de la bande, profonde mais pas noire */
.sv-event-item {
  background: var(--ev-band-deep, #12305c) !important;
}
.sv-event-item::after {
  background: var(--ev-band-deep, #12305c) !important;
}

/* Zone contenu : le degrade lumineux diagonal d'origine,
   simplement teinte avec la couleur de la bande */
.sv-event-item__content {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ev-band-dark, #1a4e90) 85%, transparent) 0%,
    color-mix(in srgb, var(--ev-band-dark, #1a4e90) 48%, transparent) 38%,
    transparent 72%) !important;
}

/* Bande de DROITE : meme couleur que la bande sous la banniere,
   avec le leger degrade vertical (lumiere en haut) */
.sv-event-item__footer {
  background: linear-gradient(180deg,
    color-mix(in srgb, white 9%, var(--ev-band-dark, #1a4e90)) 0%,
    var(--ev-band-dark, #1a4e90) 100%) !important;
}


/* ============================================================
   MAJ v4 — "REJOINDRE MAINTENANT"
   Fond : la meme couleur que le fond de la carte (--ev-band-deep)
   mais plus fonce ; texte clair pour rester toujours lisible.
   ============================================================ */
.sv-event-item__join,
.sv-event-item__footer .sv-event-item__join {
  background: color-mix(in srgb, var(--ev-band-deep, #12305c) 55%, #000) !important;
  color: #eef5ff !important;
  text-shadow: none !important;
  padding: max(5px, 0.9cqw) max(10px, 2.4cqw) !important;
  border-radius: 4px;
  transition: background var(--tr, 0.2s), color var(--tr, 0.2s);
}
.sv-event-item:hover .sv-event-item__join,
.sv-event-item__footer .sv-event-item__join:hover {
  background: color-mix(in srgb, var(--ev-band-deep, #12305c) 40%, #000) !important;
  color: #ffffff !important;
}


/* ============================================================
   MAJ v4 — OMBRE PERSPECTIVE DE DROITE JUSQU'EN BAS
   La carte se lit : banniere -> bande date -> contenu (biseau
   perspectif) -> footer. L'ombre sombre du cote DROITE du biseau
   s'arretait au bord du footer : on la prolonge le long du footer
   jusqu'au bas de la carte (memes teintes que le cote droit du
   biseau, avec un fondu legerement plus marque vers le bas).
   ============================================================ */
.sv-event-item__footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(7px, 0.75vw, 11px);
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.30) 40%,
    rgba(0, 0, 0, 0.42) 100%);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35);
}

/* ============================================================
   CORRECTION FINALE — ITEMS EVENT
   Coin inferieur gauche a angle droit sur PC, tablette et mobile.
   Le coin superieur droit conserve sa decoupe cyber.
   ============================================================ */

/* Forme generale de la carte et de son fond interieur */
.sv-event-item,
.sv-event-item::after {
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    0 100%
  ) !important;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    0 100%
  ) !important;
}

/* Contour anime exterieur : bas gauche parfaitement carre */
.sv-event-item::before {
  clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    0 100%,
    0 0,
    2px 2px,
    2px calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 2px,
    2px 2px
  ) !important;
  -webkit-clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    0 100%,
    0 0,
    2px 2px,
    2px calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 2px,
    2px 2px
  ) !important;
}

/* Second contour interieur : meme geometrie, sans biseau en bas a gauche */
.sv-event-item__frame {
  clip-path: polygon(evenodd,
    3px 3px,
    calc(100% - var(--cut-lg)) 3px,
    calc(100% - 3px) var(--cut-lg),
    calc(100% - 3px) calc(100% - 3px),
    3px calc(100% - 3px),
    3px 3px,
    5px 5px,
    5px calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 5px,
    5px 5px
  ) !important;
  -webkit-clip-path: polygon(evenodd,
    3px 3px,
    calc(100% - var(--cut-lg)) 3px,
    calc(100% - 3px) var(--cut-lg),
    calc(100% - 3px) calc(100% - 3px),
    3px calc(100% - 3px),
    3px 3px,
    5px 5px,
    5px calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 5px,
    5px 5px
  ) !important;
}


/* ============================================================
   MAJ 19 — DATE A GAUCHE, TYPE + REJOINDRE GROUPES A DROITE
   Le JS ajoute .sv-event-layout-v19 et place la date dans le footer.
   Cette couche finale neutralise les anciens ordres/marges responsive.
   ============================================================ */
.sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(5px, 0.7cqw, 9px) !important;
  overflow: hidden !important;
}

.sv-event-item.sv-event-layout-v19 .sv-event-item__footer > * {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  align-self: center !important;
  transform: none !important;
}

/* La date reprend exactement le slot gauche auparavant occupe par le type. */
.sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__date {
  order: 0 !important;
  display: inline-flex !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 auto 0 0 !important;
  white-space: nowrap !important;
}

/* Le type reste colle au bouton, dans le groupe de droite. */
.sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__status {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__join,
.sv-event-item.sv-event-layout-v19 .sv-event-item__footer .btn {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Le minuteur reste seul et centre sous la banniere. */
.sv-event-item.sv-event-layout-v19 .sv-event-item__media-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mode compact : les trois informations restent sur une ligne. */
@media (max-width: 600px) {
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    gap: 4px !important;
  }
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__date {
    padding: 3px 5px !important;
  }
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__day {
    font-size: 11px !important;
  }
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__month {
    font-size: 7px !important;
    letter-spacing: 0.08em !important;
  }
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__status {
    padding: 3px 5px !important;
    font-size: 7px !important;
    letter-spacing: 0.07em !important;
  }
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__join,
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .btn {
    padding: 5px 7px !important;
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
  }
}

/* ============================================================
   MAJ 20 — MINUTEUR A COTE DE LA REGION
   Meme taille et meme axe vertical que le texte de region.
   Chiffres en italique, sans libelles j/h/m/s.
   ============================================================ */
.sv-event-item.sv-event-layout-v20 .sv-event-item__meta {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: baseline !important;
  gap: 0.65em !important;
  min-width: 0 !important;
  font-style: italic !important;
  line-height: 1.1 !important;
}

.sv-event-item.sv-event-layout-v20 .sv-event-item__meta .sv-event-item__countdown {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: baseline !important;
  gap: 0.38em !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  font: inherit !important;
  font-style: italic !important;
  line-height: inherit !important;
  color: inherit !important;
}

.sv-event-item.sv-event-layout-v20 .sv-event-item__meta .countdown__unit {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
}

.sv-event-item.sv-event-layout-v20 .sv-event-item__meta .countdown__n {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: italic !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

.sv-event-item.sv-event-layout-v20 .sv-event-item__meta .countdown__l,
.sv-event-item.sv-event-layout-v20 .sv-event-item__meta .countdown__sep {
  display: none !important;
}

/* ============================================================
   CORRECTION FINALE — BANNIERES EVENT EN 16:9, SANS BANDE
   - conserve un ratio 16:9 strict pour toutes les bannieres
   - supprime uniquement la bande situee sous l'image
   - n'etire jamais l'image selon son format source
   ============================================================ */
.sv-event-item .sv-event-item__media {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

.sv-event-item .sv-event-item__media-footer,
.sv-event-item.sv-event-layout-v19 .sv-event-item__media-footer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.sv-event-item .sv-event-item__banner {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  flex: 0 0 auto !important;
}

.sv-event-item .sv-event-item__banner .sv-event-item__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* ============================================================
   FIX event cards — hauteur + bande decorative
   Portee : DESKTOP UNIQUEMENT (>= 1300px).
   Objet  : sur les cartes .sv-event-item[data-type="event"]
     (ex: EVENEMENT EQWAAK, TEST 5) uniquement.
     1) Uniformiser la hauteur / proportion / clip-path avec les
        cartes de type "tournoi" et "concours" pour que la grille
        2 colonnes reste alignee.
     2) Reafficher la bande sous la banniere (.sv-event-item__media-footer)
        en version PUREMENT DECORATIVE (videe de son contenu), avec le
        MEME rendu visuel que la bande du bas (.sv-event-item__footer),
        a une hauteur egale a 50% de celle du footer.
   Contrainte : aucune modification HTML / JS. Uniquement CSS.
   Les selecteurs jouent sur la specificite (attribut [data-type=...])
   pour battre proprement les couches MAJ precedentes et sont doubles
   d'un !important la ou la couche finale utilise deja !important.
   ============================================================ */
@media (min-width: 1300.02px) {

  /* ---------- FIX 2 : uniformisation forme / hauteur ---------- */

  /* On force les meme proprietes structurantes que sur les autres
     types de cartes. --clip-card est deja pilote globalement par la
     "CORRECTION FINALE" (bas-gauche carre, coin sup-droit coupe) :
     on le rappelle explicitement pour la carte event afin de garantir
     un clip identique meme si une couche MAJ specifique l'a altere. */
  .sv-event-item[data-type="event"] {
    /* meme grille horizontale (media | contenu) et meme container
       de reference pour le scaling cqw que les autres cartes */
    container-type: inline-size !important;
    grid-template-columns: 35% 1fr !important;
    /* stretch : la carte occupe la hauteur de sa rangee -> alignement
       parfait avec les cartes voisines (tournoi / concours) */
    align-self: stretch !important;
    height: 100% !important;
    /* clip identique aux autres types */
    clip-path: polygon(
      0 0,
      calc(100% - var(--cut-lg)) 0,
      100% var(--cut-lg),
      100% 100%,
      0 100%
    ) !important;
    -webkit-clip-path: polygon(
      0 0,
      calc(100% - var(--cut-lg)) 0,
      100% var(--cut-lg),
      100% 100%,
      0 100%
    ) !important;
  }

  /* La colonne media reprend son role de conteneur flex vertical
     (banniere en haut, bande decorative collee sous). Certaines MAJ
     precedentes forcaient height:auto / align-self:start, on remet
     stretch pour laisser la bande occuper le vide sous la banniere. */
  .sv-event-item[data-type="event"] .sv-event-item__media {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* La banniere garde son aspect-ratio 16/9 strict (ne repousse
     pas le footer, ne change pas la hauteur totale de la carte). */
  .sv-event-item[data-type="event"] .sv-event-item__banner {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---------- FIX 1 : bande decorative sous la banniere ---------- */

  /* Reactivation de la bande UNIQUEMENT pour data-type="event".
     Bat proprement la couche "CORRECTION FINALE" qui avait pose
     display:none sur toutes les cartes (specificite plus haute
     grace a l'attribut, + !important pour matcher la couche finale).
     Rendu visuel : identique au footer -> meme gradient utilisant
     --ev-band-dark (pose dynamiquement par communaute.js d'apres la
     couleur dominante de la banniere). */
  .sv-event-item[data-type="event"] .sv-event-item__media-footer,
  .sv-event-item[data-type="event"].sv-event-layout-v19 .sv-event-item__media-footer {
    display: flex !important;
    visibility: visible !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* Hauteur = 50% de celle du footer.
       Le footer est content-driven ; sa hauteur effective sur desktop
       est essentiellement dictee par le bouton (padding 1.2cqw haut/bas
       + font-size 1.45cqw) + padding-top 1.6cqw du footer,
       soit ~5.6cqw. 50% -> ~2.8cqw. Clamp pour resister aux tres
       petites / grandes largeurs de carte. */
    height: clamp(20px, 2.8cqw, 34px) !important;
    min-height: clamp(20px, 2.8cqw, 34px) !important;
    max-height: clamp(20px, 2.8cqw, 34px) !important;

    /* Padding vertical reduit (le contenu est masque de toute facon,
       on garde juste un padding horizontal coherent avec le footer). */
    padding: 0 clamp(12px, 1.9cqw, 22px) !important;
    margin: 0 !important;

    /* MEME rendu visuel que .sv-event-item__footer :
       - meme gradient vertical base sur --ev-band-dark
       - meme blur d'arriere-plan
       - pas de border-top (le footer en avait deja retire un) */
    background: linear-gradient(180deg,
      color-mix(in srgb, white 9%, var(--ev-band-dark, #1a4e90)) 0%,
      var(--ev-band-dark, #1a4e90) 100%) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border: 0 !important;
    border-top: 0 !important;
    outline: none !important;

    /* Pas de clip-path individuel : la carte porte deja le clip
       global et la bande est confinee a l'interieur => la bande
       epouse naturellement la forme (coins coupes en haut a droite). */
    clip-path: none !important;
    -webkit-clip-path: none !important;

    /* On centre les eventuels enfants meme s'ils sont invisibles,
       cela stabilise la geometrie si le JS remet quelque chose. */
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  /* Contenu purement decoratif : on masque tous les enfants
     (date, day, month, year, countdown, status, join, etc.) via
     visibility:hidden -- la geometrie reste, rien n'est visible.
     visibility (plutot que display:none) evite tout re-layout si
     communaute.js ajoute / retire des elements a chaud. */
  .sv-event-item[data-type="event"] .sv-event-item__media-footer > *,
  .sv-event-item[data-type="event"].sv-event-layout-v19 .sv-event-item__media-footer > * {
    visibility: hidden !important;
    pointer-events: none !important;
    /* on retire aussi la contribution en hauteur des enfants pour
       s'assurer que la hauteur de bande reste exactement celle
       imposee ci-dessus, quel que soit le contenu injecte */
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }

  /* Idem pour tout descendant textuel (span text nodes, badges
     ajoutes par le JS). Ceinture + bretelles. */
  .sv-event-item[data-type="event"] .sv-event-item__media-footer * {
    visibility: hidden !important;
  }
}
/* ==== fin FIX event cards ==== */


/* ============================================================
   AJUSTEMENT MINIMAL (v3)
   Base = page d'origine, rien d'autre n'est touche.
   1) Toutes les cartes event ont la meme forme que les autres.
   2) La bande sous la banniere = meme bande que celle de droite,
      en hauteur 50 %.
   ============================================================ */
@media (min-width: 1300.02px) {
  .sv-events__scroll > .sv-event-item {
    container-type: inline-size !important;
    /* Image legerement plus large : le ratio 16:9 reste intact. */
    grid-template-columns: 38% 1fr !important;
    align-self: stretch !important;
    height: 100% !important;
    clip-path: polygon(
      0 0,
      calc(100% - var(--cut-lg, 22px)) 0,
      100% var(--cut-lg, 22px),
      100% 100%,
      0 100%
    ) !important;
    -webkit-clip-path: polygon(
      0 0,
      calc(100% - var(--cut-lg, 22px)) 0,
      100% var(--cut-lg, 22px),
      100% 100%,
      0 100%
    ) !important;
  }

  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 clamp(12px, 1.9cqw, 22px) !important;
    /* Bande deux fois plus fine ; la hauteur liberee profite a la banniere. */
    height: clamp(10px, 1.4cqw, 17px) !important;
    min-height: clamp(10px, 1.4cqw, 17px) !important;
    max-height: clamp(10px, 1.4cqw, 17px) !important;
    background: linear-gradient(180deg,
      color-mix(in srgb, white 9%, var(--ev-band-dark, #1a4e90)) 0%,
      var(--ev-band-dark, #1a4e90) 100%) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border: 0 !important;
    outline: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}
/* ==== fin ajustement minimal v3 ==== */

/* ============================================================
   UNIFORMISATION FINALE — MODELE SPORTSTARS
   Toutes les cartes utilisent exactement la meme structure media,
   sans traitement different selon data-type.
   ============================================================ */
@media (min-width: 1300.02px) {
  /* Neutralise l'ancien align-self:stretch reserve a data-type="event".
     Ainsi, aucune bande ne peut s'etirer selon la hauteur du texte. */
  .sv-events__scroll > .sv-event-item .sv-event-item__media,
  .sv-events__scroll > .sv-event-item[data-type="event"] .sv-event-item__media {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }

  /* Meme banniere 16:9 pour tous les items, sans deformation. */
  .sv-events__scroll > .sv-event-item .sv-event-item__banner,
  .sv-events__scroll > .sv-event-item[data-type="event"] .sv-event-item__banner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  .sv-events__scroll > .sv-event-item .sv-event-item__banner .sv-event-item__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Bande decorative strictement identique au modele SportStars. */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item[data-type="event"] .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item[data-type="event"].sv-event-layout-v19 .sv-event-item__media-footer {
    display: flex !important;
    visibility: visible !important;
    flex: 0 0 clamp(10px, 1.4cqw, 17px) !important;
    width: 100% !important;
    height: clamp(10px, 1.4cqw, 17px) !important;
    min-height: clamp(10px, 1.4cqw, 17px) !important;
    max-height: clamp(10px, 1.4cqw, 17px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    align-self: auto !important;
    background: linear-gradient(180deg,
      color-mix(in srgb, white 9%, var(--ev-band-dark, #1a4e90)) 0%,
      var(--ev-band-dark, #1a4e90) 100%) !important;
    border: 0 !important;
    outline: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  /* La bande est decorative : aucun ancien contenu ne peut modifier
     sa hauteur ou creer une difference entre deux types de cartes. */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer > * {
    display: none !important;
  }
}
/* ==== fin uniformisation SportStars ==== */

/* ============================================================
   BANDE BASSE CONTINUE — COULEUR SOLIDE IDENTIQUE
   La hauteur sous la banniere reste strictement inchangee.
   ============================================================ */
@media (min-width: 1300.02px) {
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer {
    background: var(--ev-band-dark, #1a4e90) !important;
    background-color: var(--ev-band-dark, #1a4e90) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
  }

  /* Aucun effet cache ne doit modifier la matiere de la bande gauche. */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer::before,
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer::after {
    content: none !important;
    display: none !important;
  }
}
/* ==== fin bande basse continue ==== */

/* ============================================================
   FOOTER EVENT — CENTRAGE REEL + VIGNETTES NORMALISEES
   - positions horizontales conservees
   - marges visuelles haut/bas identiques
   - badges calques sur les vignettes intactes de "En vedette"
   ============================================================ */
@media (min-width: 1300.02px) {
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: clamp(6px, 1cqw, 10px) !important;
    padding-bottom: clamp(6px, 1cqw, 10px) !important;
    overflow: hidden !important;
  }

  /* Neutralise les anciens translateY JS : chaque element est centre
     par flex, avec exactement la meme marge visuelle en haut et en bas. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > * {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    align-self: center !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Date toujours a gauche. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__date {
    display: inline-flex !important;
    align-items: baseline !important;
    flex: 0 0 auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Norme exacte des vignettes intactes de la section En vedette. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 3px 9px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    font-family: var(--font-body) !important;
    font-size: clamp(10px, 0.8vw, 12px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    border: 0 !important;
    border-radius: 2px !important;
    outline: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Memes palettes que les trois vignettes intactes. */
  .sv-events__scroll > .sv-event-item[data-region] .sv-event-item__status.sv-type--tournoi {
    background: linear-gradient(135deg, #7ab4ff 0%, #3a72d8 100%) !important;
    color: #0c2c72 !important;
  }
  .sv-events__scroll > .sv-event-item[data-region] .sv-event-item__status.sv-type--event {
    background: linear-gradient(135deg, #9aa6ff 0%, #9d5cff 100%) !important;
    color: #2c1170 !important;
  }
  .sv-events__scroll > .sv-event-item[data-region] .sv-event-item__status.sv-type--concours {
    background: linear-gradient(135deg, #ff8a8a 0%, #e0353c 100%) !important;
    color: #4a0a0e !important;
  }

  /* Bouton conserve sa place a droite, mais sans decalage vertical. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
  }
}
/* ==== fin footer centre ==== */

/* ============================================================
   AJUSTEMENT FIN — DESCRIPTION, DATE ET HAUTEUR DES BANDES
   ============================================================ */
@media (min-width: 1300.02px) {
  /* Description un peu plus petite, lignes rapprochees et bloc remonte. */
  .sv-events__scroll > .sv-event-item .sv-event-item__desc {
    font-size: max(10.5px, 1.65cqw) !important;
    line-height: 1.28 !important;
    position: relative !important;
    top: clamp(-4px, -0.38cqw, -2px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  /* Mois complet : aucune largeur forcee, aucun rognage. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__date {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    gap: 5px !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__month {
    display: inline-block !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    letter-spacing: 0.08em !important;
  }

  /* Bande sous la banniere legerement plus haute.
     Le ratio 16:9 de l'image reste inchange. */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item[data-type="event"] .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item[data-type="event"].sv-event-layout-v19 .sv-event-item__media-footer {
    flex-basis: clamp(14px, 1.8cqw, 22px) !important;
    height: clamp(14px, 1.8cqw, 22px) !important;
    min-height: clamp(14px, 1.8cqw, 22px) !important;
    max-height: clamp(14px, 1.8cqw, 22px) !important;
  }

  /* Bande de droite legerement plus haute, avec marges symetriques. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    height: auto !important;
    min-height: 0 !important;
    padding-top: clamp(8px, 1.2cqw, 12px) !important;
    padding-bottom: clamp(8px, 1.2cqw, 12px) !important;
    align-items: center !important;
  }

  /* Les elements restent parfaitement centres apres l'augmentation. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > * {
    align-self: center !important;
    transform: none !important;
  }
}
/* ==== fin ajustement texte / bandes ==== */

/* ============================================================
   RACCORD FINAL DES BANDES
   - la bande droite commence juste sous la description
   - la bande sous la banniere garde sa hauteur et prend une teinte proche
   - une mini-bande de la meme teinte relie les deux zones par le bas
   ============================================================ */
@media (min-width: 1300.02px) {
  .sv-events__scroll > .sv-event-item {
    /* Teinte solide, proche de la bande droite mais visiblement distincte. */
    --ev-band-left: color-mix(in srgb, var(--ev-band-dark, #1a4e90) 88%, white 12%);
  }

  /* Bande sous la banniere : seule la couleur change, sa hauteur reste intacte. */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item[data-type="event"] .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item[data-type="event"].sv-event-layout-v19 .sv-event-item__media-footer {
    background: var(--ev-band-left, #35679a) !important;
    background-color: var(--ev-band-left, #35679a) !important;
    background-image: none !important;
  }

  /* La grande bande droite remonte et commence juste sous la description.
     flex-grow remplit uniquement l'espace deja disponible : aucune hauteur
     de carte, d'image ou de banniere n'est modifiee. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    margin-top: -4px !important;
    flex: 1 1 auto !important;
    position: relative !important;
    background: var(--ev-band-dark, #1a4e90) !important;
    background-color: var(--ev-band-dark, #1a4e90) !important;
    background-image: none !important;
  }

  /* Mini-bande basse continue, de la meme couleur solide que la partie gauche. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: clamp(3px, 0.32cqw, 5px) !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 4 !important;
    background: var(--ev-band-left, #35679a) !important;
    background-color: var(--ev-band-left, #35679a) !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
/* ==== fin raccord final des bandes ==== */

/* ============================================================
   CONTINUITE FINE + 3 TRIANGLES FIXES ENTRE DATE ET VIGNETTE
   ============================================================ */
@media (min-width: 1300.02px) {
  /* A droite, la bande gauche continue sur toute la longueur avec
     une hauteur plus petite, mais une couleur strictement identique. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::after {
    height: 9px !important;
    background: var(--ev-band-left, #35679a) !important;
    background-color: var(--ev-band-left, #35679a) !important;
  }

  /* Le bloc date occupe toujours le meme emplacement : le mois ne peut
     ni pousser ni rapprocher les triangles d'une carte a l'autre. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__date {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    margin-right: auto !important;
  }

  /* Groupe decoratif fixe, pose sur la bande basse entre la date
     et la vignette Tournoi / Evenement / Concours. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__triangles {
    display: flex !important;
    position: absolute !important;
    left: 168px !important;
    right: auto !important;
    top: auto !important;
    bottom: 1px !important;
    width: 46px !important;
    height: 7px !important;
    flex: 0 0 46px !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 6 !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__triangles > i {
    display: block !important;
    width: 11px !important;
    height: 7px !important;
    flex: 0 0 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: color-mix(in srgb, var(--ev-band-deep, #12305c) 78%, #000 22%) !important;
    clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
  }
}
/* ==== fin continuite et triangles fixes ==== */

/* ============================================================
   CORRECTION FINALE — SPIKES SUR LE HAUT + BANDE x2
   ============================================================ */
@media (min-width: 1300.02px) {
  /* 9px -> 18px : hauteur exactement doublee.
     z-index inferieur a l'ombre droite (::before, z-index 3), afin que
     la bande passe visuellement SOUS l'effet de perspective. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::after {
    height: 18px !important;
    z-index: 1 !important;
    background: var(--ev-band-left, #35679a) !important;
    background-color: var(--ev-band-left, #35679a) !important;
    background-image: none !important;
  }

  /* Les trois pointes sont posees au bord SUPERIEUR de la bande.
     Leur base chevauche la bande de 1px : aucune coupure ni espace visible. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__triangles {
    bottom: 17px !important;
    width: 46px !important;
    height: 9px !important;
    align-items: flex-end !important;
    z-index: 2 !important;
  }

  /* Meme couleur exacte que la bande : les spikes semblent en faire partie. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__triangles > i {
    width: 11px !important;
    height: 9px !important;
    flex-basis: 11px !important;
    background: var(--ev-band-left, #35679a) !important;
    background-color: var(--ev-band-left, #35679a) !important;
    background-image: none !important;
  }

  /* L'ombre perspective de droite reste au-dessus de la bande continue. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::before {
    z-index: 3 !important;
  }

  /* Date, vignette et bouton restent au-dessus de la bande agrandie. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > *:not(.sv-event-item__triangles) {
    z-index: 4 !important;
  }
}
/* ==== fin correction spikes / bande x2 ==== */

/* ============================================================
   AJUSTEMENT VISUEL — BANDE GAUCHE PLUS HAUTE + SPIKES ETENDUS
   ============================================================ */
@media (min-width: 1300.02px) {
  /* Bande sous la banniere augmentee a 28px : elle reste nettement
     plus haute que sa continuation droite de 18px. Image 16:9 intacte. */
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item[data-type="event"] .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item[data-type="event"].sv-event-layout-v19 .sv-event-item__media-footer {
    flex-basis: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }

  /* Groupe plus large et decale vers la droite, toujours situe entre
     la date et la vignette de type. Sa position ne varie pas par carte. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__triangles {
    left: 260px !important;
    bottom: 17px !important;
    width: 82px !important;
    height: 12px !important;
    flex-basis: 82px !important;
  }

  /* Pointes plus etendues : base large et profil moins etroit,
     avec la meme teinte que la bande continue. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__triangles > i {
    width: 22px !important;
    height: 12px !important;
    flex: 0 0 22px !important;
    background: var(--ev-band-left, #35679a) !important;
    background-color: var(--ev-band-left, #35679a) !important;
    clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
  }
}
/* ==== fin bande gauche / spikes etendus ==== */

/* ============================================================
   DISPOSITION DEFINITIVE — SPIKES COLLES, CENTRES ET SLOTS FIXES
   ============================================================ */
@media (min-width: 1300.02px) {
  /* Quatre zones stables : date | espace des spikes | vignette | bouton.
     La largeur d'un libelle ne peut plus deplacer aucun autre element. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    display: grid !important;
    grid-template-columns: 180px minmax(90px, 1fr) 112px 230px !important;
    column-gap: 9px !important;
    align-items: center !important;
    justify-content: stretch !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__date {
    grid-column: 1 !important;
    box-sizing: border-box !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    margin: 0 !important;
    justify-self: start !important;
    gap: 5px !important;
  }

  /* Jour, mois et annee ont exactement la meme hauteur typographique. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__day,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__month,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__year {
    display: inline-block !important;
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__month {
    letter-spacing: 0.04em !important;
  }

  /* Vignette et bouton disposent eux aussi de largeurs fixes. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__status {
    grid-column: 3 !important;
    box-sizing: border-box !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .btn {
    grid-column: 4 !important;
    box-sizing: border-box !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }

  /* Le groupe est centre dans la zone fixe comprise entre date et vignette. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__triangles {
    grid-column: 2 !important;
    left: auto !important;
    right: auto !important;
    bottom: 17px !important;
    width: 90px !important;
    height: 12px !important;
    flex-basis: 90px !important;
    justify-self: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  /* Trois bases de 30px dans un groupe de 90px : aucun espace entre elles.
     Le profil est plus etendu lateralement, comme sur l'image de reference. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__triangles > i {
    width: 30px !important;
    height: 12px !important;
    flex: 0 0 30px !important;
    margin: 0 !important;
    background: var(--ev-band-left, #35679a) !important;
    background-color: var(--ev-band-left, #35679a) !important;
    clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
  }
}
/* ==== fin disposition definitive ==== */

/* ============================================================
   CORRECTION DEMANDEE — DATE ORIGINALE, LARGEURS NATURELLES,
   SPIKES AU CENTRE EXACT ENTRE DATE ET VIGNETTE
   ============================================================ */
@media (min-width: 1300.02px) {
  /* Police d'origine restauree sur toute la date. Les tailles egales
     jour/mois/annee demandees precedemment restent conservees. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__day,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__month,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__year {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  /* Le slot de la vignette reste fixe pour garantir la meme disposition,
     mais la vignette visible reprend sa largeur naturelle, sans surplus. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__status {
    grid-column: 3 !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 112px !important;
    justify-self: start !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  /* Meme correction pour Rejoindre maintenant : longueur naturelle,
     bord parfaitement droit et alignement stable dans son slot. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .btn {
    grid-column: 4 !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 230px !important;
    justify-self: end !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  /* Position absolue centree DANS la colonne 2 : ses limites sont exactement
     le bord droit du slot date et le bord gauche du slot vignette.
     left/right:0 + marges automatiques rendent le centrage geometrique fiable. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__triangles {
    grid-column: 2 !important;
    left: 0 !important;
    right: 0 !important;
    width: 90px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    gap: 0 !important;
  }
}
/* ==== fin correction date / vignettes / centrage ==== */

/* ============================================================
   GABARIT UNIFORME — 2 LIGNES RESERVEES + CONTROLES GROUPES
   ============================================================ */
@media (min-width: 1300.02px) {
  /* Une description d'une seule ligne reserve exactement la place de deux.
     La bande droite commence donc au meme niveau sur toutes les cartes. */
  .sv-events__scroll > .sv-event-item .sv-event-item__desc {
    height: 2.56em !important;
    min-height: 2.56em !important;
    max-height: 2.56em !important;
    flex: 0 0 2.56em !important;
    line-height: 1.28 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* La bande garde le meme comportement et la meme reserve verticale,
     que la description contienne une ou deux lignes. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    margin-top: -4px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }

  /* La vignette se place au bord droit de son slot et le bouton au bord
     gauche du suivant : seul le gap fixe de 9px les separe. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__status {
    justify-self: end !important;
    margin-right: 0 !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .btn {
    justify-self: start !important;
    margin-left: 0 !important;
  }

  /* La position horizontale est fournie par le calcul exact date/vignette.
     Le groupe reste sur la bande et aucun controle du footer ne le recouvre. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__triangles {
    grid-column: auto !important;
    left: var(--ev-tri-left, 120px) !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: auto !important;
    z-index: 5 !important;
  }
}
/* ==== fin gabarit uniforme ==== */

/* ============================================================
   RESTAURATION PERSPECTIVE DROITE + CENTRAGE VERTICAL REEL
   ============================================================ */
@media (min-width: 1300.02px) {
  /* Le biseau de la zone droite repasse au premier plan sur tout le bord.
     L'ombre reste limitee au cadre et ne recouvre aucun texte. */
  .sv-events__scroll > .sv-event-item .sv-event-item__content::before {
    display: block !important;
    content: "" !important;
    z-index: 12 !important;
    border-right-color: rgba(0, 0, 0, 0.48) !important;
    box-shadow:
      inset -1px 0 0 rgba(0, 0, 0, 0.62),
      inset -7px 0 8px rgba(0, 0, 0, 0.22),
      inset 1px 1px 0 rgba(140, 190, 255, 0.18),
      inset -1px -1px 0 rgba(0, 0, 0, 0.35) !important;
    pointer-events: none !important;
  }

  /* Prolongement de la meme ombre sur le footer, au-dessus du fond et de
     la bande continue. Le z-index eleve retablit l'effet visible a droite. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 12px !important;
    z-index: 20 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.26) 0%,
      rgba(0, 0, 0, 0.38) 48%,
      rgba(0, 0, 0, 0.58) 100%) !important;
    box-shadow:
      inset -2px 0 0 rgba(0, 0, 0, 0.58),
      -5px 0 8px rgba(0, 0, 0, 0.16) !important;
  }

  /* La continuation basse fait 18px. Elle devient une zone separee du
     bandeau principal : le contenu est centre dans tout l'espace au-dessus. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 18px !important;
    align-items: center !important;
  }

  /* Date, vignette et bouton partagent exactement le meme axe vertical.
     Le centrage de la grille assure la meme marge visible en haut et en bas. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__date,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__status,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .btn {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    align-self: center !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* ==== fin restauration perspective / centrage ==== */

/* ============================================================
   RECTIFICATION — BISEAU UNIQUEMENT A DROITE, AUCUN EFFET EN BAS
   + CENTRAGE SUR LA HAUTEUR COMPLETE DE LA BANDE
   ============================================================ */
@media (min-width: 1300.02px) {
  /* On retire le biseau sombre du bottom ajoute precedemment.
     Le relief conserve seulement sa tranche verticale droite. */
  .sv-events__scroll > .sv-event-item .sv-event-item__content::before {
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    border-right-color: rgba(0, 0, 0, 0.46) !important;
    box-shadow:
      inset -1px 0 0 rgba(0, 0, 0, 0.68),
      inset -9px 0 10px rgba(0, 0, 0, 0.24),
      inset 1px 0 0 rgba(140, 190, 255, 0.14) !important;
  }

  /* Tranche de perspective verticale : degrade de gauche a droite,
     jamais de haut en bas. Elle suit tout le cote droit jusqu'au bas. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::before {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 14px !important;
    height: auto !important;
    z-index: 20 !important;
    background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.24) 48%,
      rgba(0, 0, 0, 0.56) 100%) !important;
    box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.62) !important;
  }

  /* Aucun decalage reserve au bottom : les trois elements sont centres
     sur la hauteur complete de leur grande bande. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__date,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__status,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .btn {
    align-self: center !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* ==== fin biseau droit / centrage complet ==== */


/* ============================================================
   CORRECTION LIVRAISON — MINUTEUR SOUS BANNIERE + 2 TRIANGLES
   ============================================================ */
.sv-event-item .sv-event-item__media-footer,
.sv-event-item.sv-event-layout-v19 .sv-event-item__media-footer,
.sv-events__scroll > .sv-event-item .sv-event-item__media-footer {
  display: flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.sv-event-item .sv-event-item__media-footer > .sv-event-item__countdown,
.sv-event-item.sv-event-layout-v20 .sv-event-item__media-footer > .sv-event-item__countdown {
  display: inline-flex !important;
  position: static !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.38em !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  color: color-mix(in srgb, var(--ev-band-left, #35679a) 65%, black 35%) !important;
  font-style: normal !important;
  line-height: 1 !important;
}

.sv-event-item .sv-event-item__media-footer .sv-event-item__countdown *,
.sv-event-item .sv-event-item__media-footer .countdown__unit,
.sv-event-item .sv-event-item__media-footer .countdown__n {
  display: inline-flex !important;
  align-items: center !important;
  color: color-mix(in srgb, var(--ev-band-left, #35679a) 65%, black 35%) !important;
  font-style: normal !important;
  text-shadow: none !important;
  line-height: 1 !important;
}

.sv-event-item .sv-event-item__media-footer .countdown__l,
.sv-event-item .sv-event-item__media-footer .countdown__sep {
  display: none !important;
}

@media (max-width: 1300px) {
  .sv-event-item .sv-event-item__media-footer,
  .sv-event-item.sv-event-layout-v19 .sv-event-item__media-footer {
    flex: 0 0 clamp(22px, 6cqw, 28px) !important;
    height: clamp(22px, 6cqw, 28px) !important;
    min-height: clamp(22px, 6cqw, 28px) !important;
    max-height: clamp(22px, 6cqw, 28px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ev-band-left, #35679a) !important;
  }
}

@media (min-width: 1300.02px) {
  .sv-event-item .sv-event-item__media-footer > .sv-event-item__countdown {
    font-size: clamp(12px, 1.25cqw, 18px) !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer > .sv-event-item__triangles {
    width: 60px !important;
    flex-basis: 60px !important;
  }
}
/* ==== fin correction livraison ==== */

/* ============================================================
   AJUSTEMENT — TITRE HERO + CENTRAGE MOBILE/TABLETTE DU MINUTEUR
   ============================================================ */
.sv-hero__title {
  font-size: clamp(44px, 6.5vw, 82px) !important;
}

@media (max-width: 1300px) {
  .sv-event-item .sv-event-item__media-footer,
  .sv-event-item.sv-event-layout-v19 .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer {
    position: relative !important;
    justify-content: center !important;
  }

  .sv-event-item .sv-event-item__media-footer > .sv-event-item__countdown,
  .sv-event-item.sv-event-layout-v20 .sv-event-item__media-footer > .sv-event-item__countdown,
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer > .sv-event-item__countdown {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100% - 12px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* ==== fin ajustement titre / centrage ==== */

/* ============================================================
   CORRECTION RESPONSIVE — TABLETTE (<= 1300px) / MOBILE (<= 600px)
   - OCTOBRE a la meme hauteur typographique que l'annee
   - suppression totale de la bande et du minuteur sous la banniere
   ============================================================ */
@media (max-width: 1300px) {
  /* Le mois et l'annee partagent strictement la meme typographie. */
  .sv-event-item .sv-event-item__footer .sv-event-item__month,
  .sv-event-item .sv-event-item__footer .sv-event-item__year,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__year {
    display: inline-block !important;
    font-family: 'Bebas Neue', 'Bebas Neue Fallback', sans-serif !important;
    font-size: clamp(11px, 3.2cqw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }

  /* Retire la bande date/compteur sous l'image, sans espace residuel. */
  .sv-event-item .sv-event-item__media-footer,
  .sv-event-item.sv-event-layout-v19 .sv-event-item__media-footer,
  .sv-event-item.sv-event-layout-v20 .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer {
    display: none !important;
    visibility: hidden !important;
    flex: 0 0 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .sv-event-item .sv-event-item__media-footer .sv-event-item__countdown,
  .sv-event-item.sv-event-layout-v20 .sv-event-item__media-footer .sv-event-item__countdown,
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer .sv-event-item__countdown {
    display: none !important;
    visibility: hidden !important;
  }
}

@media (max-width: 600px) {
  .sv-event-item .sv-event-item__footer .sv-event-item__month,
  .sv-event-item .sv-event-item__footer .sv-event-item__year,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__year {
    font-size: clamp(11px, 3.2cqw, 18px) !important;
    line-height: 1 !important;
  }
}
/* ==== fin correction responsive ==== */


/* ============================================================
   CORRECTIF FINAL — CARTES EVENT TABLETTE / MOBILE
   Portee : <= 1300px (tablette), avec le meme ajustement <= 600px
   (mobile). Le rendu desktop > 1300px reste strictement inchange.
   - zone sombre sous la banniere legerement plus haute ;
   - bandeau horizontal du bas legerement plus epais ;
   - suppression de la face / bande verticale de perspective a gauche.
   ============================================================ */
@media (max-width: 1300px) {
  /* Le titre garde son espacement existant ; l'espace ajoute est reserve
     juste sous la banniere pour agrandir proprement la zone de contenu. */
  .sv-events__scroll > .sv-event-item .sv-event-item__content {
    padding-top: calc(2.2cqw + clamp(4px, 1cqw, 8px)) !important;
  }

  /* Bandeau horizontal inferieur : augmentation legere et proportionnelle
     a la largeur de chaque carte, y compris dans le carrousel mobile. */
  .sv-events__scroll > .sv-event-item .sv-event-item__footer {
    padding-top: calc(1.8cqw + clamp(3px, 0.7cqw, 6px)) !important;
    padding-bottom: calc(1.8cqw + clamp(3px, 0.7cqw, 6px)) !important;
  }

  /* Face gauche du biseau dans la zone de texte : uniquement les faces
     superieure / droite / inferieure restent visibles. */
  .sv-events__scroll > .sv-event-item .sv-event-item__content::before {
    border-left-width: 0 !important;
    border-left-color: transparent !important;
    box-shadow:
      inset 0 1px 0 rgba(140, 190, 255, 0.18),
      inset -1px -1px 0 rgba(0, 0, 0, 0.35) !important;
  }

  /* Le cadre interne peignait encore une tranche sombre continue a gauche.
     Son anneau est conserve en haut, a droite et en bas, mais son bord
     vertical gauche est neutralise par les deux points x=3px du trou interne. */
  .sv-events__scroll > .sv-event-item .sv-event-item__frame {
    clip-path: polygon(evenodd,
      3px 3px,
      calc(100% - var(--cut-lg)) 3px,
      calc(100% - 3px) var(--cut-lg),
      calc(100% - 3px) calc(100% - 3px),
      3px calc(100% - 3px),
      3px 3px,
      3px 5px,
      3px calc(100% - 5px),
      calc(100% - 5px) calc(100% - 5px),
      calc(100% - 5px) var(--cut-lg),
      calc(100% - var(--cut-lg)) 5px,
      3px 5px
    ) !important;
    -webkit-clip-path: polygon(evenodd,
      3px 3px,
      calc(100% - var(--cut-lg)) 3px,
      calc(100% - 3px) var(--cut-lg),
      calc(100% - 3px) calc(100% - 3px),
      3px calc(100% - 3px),
      3px 3px,
      3px 5px,
      3px calc(100% - 5px),
      calc(100% - 5px) calc(100% - 5px),
      calc(100% - 5px) var(--cut-lg),
      calc(100% - var(--cut-lg)) 5px,
      3px 5px
    ) !important;
  }
}

/* Mobile <= 600px : conserver exactement le meme principe, avec une
   reserve minimale lisible lorsque la carte devient tres etroite. */
@media (max-width: 600px) {
  .sv-events__scroll > .sv-event-item .sv-event-item__content {
    padding-top: calc(2.2cqw + clamp(5px, 1.2cqw, 8px)) !important;
  }

  .sv-events__scroll > .sv-event-item .sv-event-item__footer {
    padding-top: calc(1.8cqw + clamp(4px, 0.9cqw, 6px)) !important;
    padding-bottom: calc(1.8cqw + clamp(4px, 0.9cqw, 6px)) !important;
  }
}
/* ==== fin correctif cartes responsive ==== */

/* ============================================================
   CORRECTIF STABLE — TABLETTE / MOBILE
   - les controles du footer restent dans leur propre colonne ;
   - la vignette de type ne peut plus etre ecrasee ou decoupee ;
   - le relief revient a gauche, avec trois faces plus discretes.
   ============================================================ */
@media (max-width: 1300px) {
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content max-content !important;
    align-items: center !important;
    column-gap: clamp(4px, 1.2cqw, 9px) !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__date {
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__status {
    grid-column: 2 !important;
    position: static !important;
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(3px, 0.75cqw, 5px) clamp(6px, 1.35cqw, 10px) !important;
    font-size: clamp(8px, 1.35cqw, 11px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .btn {
    grid-column: 3 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(5px, 0.9cqw, 7px) clamp(7px, 1.6cqw, 12px) !important;
    font-size: clamp(8px, 1.35cqw, 11px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Relief fin sur trois cotes seulement : gauche, haut et droite. */
  .sv-events__scroll > .sv-event-item .sv-event-item__content::before {
    border-width: clamp(3px, 0.45vw, 5px) !important;
    border-bottom-width: 0 !important;
    border-left-color: rgba(140, 190, 255, 0.10) !important;
    border-top-color: rgba(140, 190, 255, 0.14) !important;
    border-right-color: rgba(0, 0, 0, 0.20) !important;
    box-shadow:
      inset 1px 0 0 rgba(140, 190, 255, 0.10),
      inset -1px 0 0 rgba(0, 0, 0, 0.20) !important;
  }

  /* La tranche verticale est desormais a gauche et moins marquee. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: clamp(4px, 0.55vw, 7px) !important;
    height: auto !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.12) 55%,
      transparent 100%) !important;
    box-shadow: inset 1px 0 0 rgba(140, 190, 255, 0.10) !important;
  }

  /* Restaure le fin contour gauche que l'ancien correctif supprimait. */
  .sv-events__scroll > .sv-event-item .sv-event-item__frame {
    clip-path: polygon(evenodd,
      3px 3px,
      calc(100% - var(--cut-lg)) 3px,
      calc(100% - 3px) var(--cut-lg),
      calc(100% - 3px) calc(100% - 3px),
      3px calc(100% - 3px),
      3px 3px,
      5px 5px,
      5px calc(100% - 5px),
      calc(100% - 5px) calc(100% - 5px),
      calc(100% - 5px) var(--cut-lg),
      calc(100% - var(--cut-lg)) 5px,
      5px 5px
    ) !important;
    -webkit-clip-path: polygon(evenodd,
      3px 3px,
      calc(100% - var(--cut-lg)) 3px,
      calc(100% - 3px) var(--cut-lg),
      calc(100% - 3px) calc(100% - 3px),
      3px calc(100% - 3px),
      3px 3px,
      5px 5px,
      5px calc(100% - 5px),
      calc(100% - 5px) calc(100% - 5px),
      calc(100% - 5px) var(--cut-lg),
      calc(100% - var(--cut-lg)) 5px,
      5px 5px
    ) !important;
  }
}

@media (max-width: 600px) {
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    column-gap: 4px !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__status {
    padding: 3px 5px !important;
    font-size: 7px !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19
  .sv-event-item__footer .btn {
    padding: 5px 6px !important;
    font-size: 8px !important;
  }
}
/* ==== fin correctif stable responsive ==== */

/* >>> VELRA-HBAR-FIX START <<< */
/* ============================================================
   FIX FINAL — BARRE DE SCROLL HORIZONTALE (tablette <=1300px
   et mobile <=600px).
   Problemes corriges :
   1) .sv-events__nav etait masque (VELRA-EVENTS-NAV-HIDE) => la
      barre custom n'existait plus visuellement.
   2) .sv-events__scroll{overflow:hidden} (VELRA-EVENTS-WHEEL-OFF)
      bloquait tout defilement (doigt + barre).
   3) Certains blocs remettaient la liste en scroll VERTICAL alors
      que la barre etait horizontale => barre morte.
   Resultat : carrousel horizontal fluide + barre chevron
   horizontale sous les cartes, meme design que sur PC.
   ============================================================ */
@media (max-width: 1300px) {

  /* --- La zone de cartes redevient un carrousel HORIZONTAL --- */
  .sv-events__scroll {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-template-columns: none !important;
    grid-auto-rows: 1fr !important;
    grid-auto-columns: calc(100% / 2.25 - 12px) !important;
    gap: 12px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 0 2px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    /* scrollbar native masquee : seule la barre custom est visible */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    touch-action: pan-x pan-y !important;
  }
  .sv-events__scroll::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* --- La gouttiere redevient une bande horizontale SOUS la liste --- */
  .sv-events__list-wrap {
    position: relative !important;
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
  }
  .sv-events__nav,
  .sv-events__nav.has-cscroll {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: clamp(22px, 7vw, 30px) !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    z-index: 4 !important;
  }

  /* --- Barre custom : HORIZONTALE, chevron IDENTIQUE au PC --- */
  .sv-events__nav .sv-cscroll,
  .sv-cscroll.is-horizontal {
    --bar-w: clamp(20px, 3.2vw, 30px);   /* meme epaisseur que sur PC */
    --slant: clamp(4px, 0.9vw, 7px);     /* meme angle que sur PC */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    height: var(--bar-w) !important;
    display: block !important;
  }

  /* RAIL : chevron V aux DEUX extremites (version couchee du rail PC) */
  .sv-events__nav .sv-cscroll .sv-cscroll__track {
    top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg,
      #051a4f 0%,
      #082d8e 28%,
      #0d4ab8 62%,
      #1968cd 100%) !important;
    clip-path: polygon(
      0 0,
      var(--slant) 50%,
      0 100%,
      100% 100%,
      calc(100% - var(--slant)) 50%,
      100% 0
    ) !important;
    -webkit-clip-path: polygon(
      0 0,
      var(--slant) 50%,
      0 100%,
      100% 100%,
      calc(100% - var(--slant)) 50%,
      100% 0
    ) !important;
    filter: drop-shadow(0 0 14px rgba(25, 104, 205, 0.45))
            drop-shadow(0 2px 8px rgba(5, 26, 79, 0.6)) !important;
  }

  /* FILL : chevron a gauche, droit a droite (comme le fill PC) */
  .sv-events__nav .sv-cscroll .sv-cscroll__fill {
    top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: auto !important;
    height: 100% !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg,
      rgba(110, 210, 255, 0.55),
      rgba(45, 171, 255, 0.30)) !important;
    clip-path: polygon(0 0, var(--slant) 50%, 0 100%, 100% 100%, 100% 0) !important;
    -webkit-clip-path: polygon(0 0, var(--slant) 50%, 0 100%, 100% 100%, 100% 0) !important;
    mix-blend-mode: screen !important;
  }

  /* THUMB : meme chevron + memes proportions (4x) et meme glow que sur PC */
  .sv-events__nav .sv-cscroll .sv-cscroll__thumb {
    top: 0 !important;
    height: var(--bar-w) !important;
    width: calc(var(--bar-w) * 4) !important;
    border-radius: 0 !important;
    will-change: left !important;
    touch-action: none !important;
    background: linear-gradient(135deg,
      #8FDDFF 0%,
      #6CD0FF 22%,
      #4FB8FF 55%,
      #2DABFF 100%) !important;
    clip-path: polygon(
      0 0,
      var(--slant) 50%,
      0 100%,
      100% 100%,
      calc(100% - var(--slant)) 50%,
      100% 0
    ) !important;
    -webkit-clip-path: polygon(
      0 0,
      var(--slant) 50%,
      0 100%,
      100% 100%,
      calc(100% - var(--slant)) 50%,
      100% 0
    ) !important;
    filter:
      drop-shadow(0 0 12px rgba(108, 208, 255, 0.85))
      drop-shadow(0 0 22px rgba(45, 171, 255, 0.45)) !important;
  }
}

/* Tablette etroite : 2 colonnes visibles */
@media (max-width: 900px) {
  .sv-events__scroll {
    grid-auto-columns: calc(100% / 1.7 - 12px) !important;
  }
}

/* Mobile : 1 carte pleine + apercu de la suivante */
@media (max-width: 600px) {
  .sv-events__scroll {
    grid-auto-columns: calc(100% / 1.15 - 10px) !important;
    gap: 10px !important;
  }
  .sv-events__nav,
  .sv-events__nav.has-cscroll {
    height: 30px !important;
    margin-top: 12px !important;
  }
}
/* >>> VELRA-HBAR-FIX END <<< */

/* >>> VELRA-FOOTER-ALIGN-FIX START <<< */
/* ============================================================
   ALIGNEMENT FINAL — BANDE DU BAS DES CARTES EVENT
   Tablette (<= 1300px) et mobile (<= 600px).
   Date, vignette (TOURNOI / EVENEMENT / CONCOURS) et
   "Rejoindre maintenant" sont sur UNE SEULE ligne, centres
   verticalement (top/bottom) dans la bande du bas.
   Tout translateY injecte par JS (MAJ 15) est neutralise.
   Le rendu desktop > 1300px reste strictement inchange.
   ============================================================ */
@media (max-width: 1300px) {
  .sv-event-item .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v20 .sv-event-item__footer {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: minmax(0, 1fr) max-content max-content !important;
    grid-template-rows: minmax(clamp(30px, 8cqw, 44px), auto) !important;
    align-items: center !important;
    align-content: center !important;
    column-gap: clamp(4px, 1.2cqw, 9px) !important;
    row-gap: 0 !important;
    min-width: 0 !important;
  }

  /* Neutralise le recentrage mesure par JS : il n'est plus necessaire. */
  .sv-event-item .sv-event-item__footer > *,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer > * {
    transform: none !important;
    align-self: center !important;
    justify-self: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    will-change: auto !important;
  }

  .sv-event-item .sv-event-item__footer .sv-event-item__date,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__date {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    line-height: 1 !important;
  }

  .sv-event-item .sv-event-item__footer .sv-event-item__status,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__status {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
  }

  .sv-event-item .sv-event-item__footer .sv-event-item__join,
  .sv-event-item .sv-event-item__footer .btn,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    margin-left: 0 !important;
  }
}
/* >>> VELRA-FOOTER-ALIGN-FIX END <<< */

/* >>> VELRA-FOOTER-BIGGER-AND-DARK-EDGE START <<< */
/* ============================================================
   1) AGRANDISSEMENT — date, vignette (TOURNOI / CONCOURS...) et
      "Rejoindre maintenant" dans la bande du bas.
   2) CONTOUR NOIR sous la bande : un liseré fonce (#060d1c) qui
      rejoint le contour noir du cadre de la carte.
   Tablette (<= 1300px) et mobile (<= 600px) uniquement.
   ============================================================ */
@media (max-width: 1300px) {
  /* --- Date --- */
  .sv-event-item .sv-event-item__footer .sv-event-item__day,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__day {
    font-size: 4.6cqw !important;
    line-height: 1 !important;
  }
  .sv-event-item .sv-event-item__footer .sv-event-item__month,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month {
    font-size: 3.4cqw !important;
    line-height: 1 !important;
  }

  /* --- Vignette (TOURNOI / EVENEMENT / CONCOURS) --- */
  .sv-event-item .sv-event-item__footer .sv-event-item__status,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__status {
    font-size: 3.6cqw !important;
    padding: 1.7cqw 3.2cqw !important;
    line-height: 1 !important;
  }

  /* --- Bouton "Rejoindre maintenant" --- */
  .sv-event-item .sv-event-item__footer .sv-event-item__join,
  .sv-event-item .sv-event-item__footer .btn,
  .sv-event-item .sv-event-item__footer .btn--sm,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .btn,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .btn--sm {
    font-size: 3.6cqw !important;
    padding: 2.3cqw 3.9cqw !important;
    line-height: 1 !important;
  }

  /* La bande garde de la place pour les elements agrandis */
  .sv-event-item .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer {
    grid-template-rows: minmax(clamp(36px, 10cqw, 54px), auto) !important;
    padding-top: 2.2cqw !important;
    padding-bottom: 2.2cqw !important;
    position: relative !important;
    /* 2) contour noir : liseré fonce en haut de la bande, prolonge
          jusqu'aux bords pour rejoindre le cadre noir de la carte */
    border-top: 3px solid #060d1c !important;
    box-shadow:
      inset 3px 0 0 0 #060d1c,
      inset -3px 0 0 0 #060d1c,
      inset 0 -3px 0 0 #060d1c !important;
  }
}

@media (max-width: 600px) {
  .sv-event-item .sv-event-item__footer .sv-event-item__day,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__day {
    font-size: 5.2cqw !important;
  }
  .sv-event-item .sv-event-item__footer .sv-event-item__month,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month {
    font-size: 3.8cqw !important;
  }
  .sv-event-item .sv-event-item__footer .sv-event-item__status,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__status,
  .sv-event-item .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__join,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .btn {
    font-size: 3.9cqw !important;
  }
}
/* >>> VELRA-FOOTER-BIGGER-AND-DARK-EDGE END <<< */

/* >>> VELRA-EVENT-DASHED-BLACK-UNDERLAY START <<< */
/*
   Le cadre noir forme maintenant une base continue de 5 px :
   - 0 -> 2 px : sous le contour anime, visible entre les pointilles ;
   - 2 -> 5 px : second contour noir interieur, sans raccord visible.
   Regle commune PC / tablette / mobile.
*/
.sv-event-item__frame {
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 4 !important;
  background: #020713 !important;
  clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    0 0,
    5px 5px,
    5px calc(100% - var(--cut-lg)),
    var(--cut-lg) calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 5px,
    5px 5px) !important;
  -webkit-clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    0 0,
    5px 5px,
    5px calc(100% - var(--cut-lg)),
    var(--cut-lg) calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 5px,
    5px 5px) !important;
}

/* Le contour colore/pointille reste au-dessus de sa base noire. */
.sv-event-item::before {
  z-index: 5 !important;
}
/* >>> VELRA-EVENT-DASHED-BLACK-UNDERLAY END <<< */

/* >>> VELRA-EVENT-BOTTOM-LEFT-CUT-SYNC START <<< */
/*
   Coin inferieur gauche synchronise sur toutes les couches :
   carte/fond, contour noir continu et contour anime.
   Regle commune PC / tablette / mobile.
*/
.sv-event-item,
.sv-event-item::after {
  clip-path: 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))
  ) !important;
  -webkit-clip-path: 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))
  ) !important;
}

/* Premier contour : meme biseau bas-gauche que le contour noir.
   L'anneau interieur reste parallele a 2 px du bord exterieur. */
.sv-event-item::before {
  clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    0 0,
    2px 2px,
    2px calc(100% - var(--cut-lg)),
    var(--cut-lg) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 2px,
    2px 2px
  ) !important;
  -webkit-clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    0 0,
    2px 2px,
    2px calc(100% - var(--cut-lg)),
    var(--cut-lg) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) var(--cut-lg),
    calc(100% - var(--cut-lg)) 2px,
    2px 2px
  ) !important;
}
/* >>> VELRA-EVENT-BOTTOM-LEFT-CUT-SYNC END <<< */

/* >>> VELRA-EVENT-BOTTOM-LEFT-FINAL-FIX START <<< */
/*
   Synchronisation definitive du coin inferieur gauche.
   Une seule geometrie est partagee par :
   - la carte et son fond interieur ;
   - le premier contour colore/anime ;
   - le second contour noir continu.

   Le contour rectangulaire historique au survol est neutralise : il ne
   suivait pas le biseau et recreait un angle droit en bas a gauche.
   Seul le vrai contour decoupe (::before) reste visible.
*/
.sv-event-item {
  --ev-cut-sync: var(--cut-lg, 26px);
  overflow: hidden !important;
}

/* Seuil tablette demande : 1300 px. */
@media (max-width: 1300px) {
  .sv-event-item {
    --ev-cut-sync: var(--cut-lg, 22px);
  }
}

/* Seuil mobile demande : 600 px. */
@media (max-width: 600px) {
  .sv-event-item {
    --ev-cut-sync: var(--cut-lg, 18px);
  }
}

/* Retire uniquement l'ancien outline rectangulaire parasite. */
.sv-event-item,
.sv-event-item:hover,
.sv-event-item:focus,
.sv-event-item:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Carte + fond qui depasse : meme coupe, donc aucun triangle carre restant. */
.sv-event-item,
.sv-event-item::after {
  clip-path: polygon(
    0 0,
    calc(100% - var(--ev-cut-sync)) 0,
    100% var(--ev-cut-sync),
    100% 100%,
    var(--ev-cut-sync) 100%,
    0 calc(100% - var(--ev-cut-sync))
  ) !important;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--ev-cut-sync)) 0,
    100% var(--ev-cut-sync),
    100% 100%,
    var(--ev-cut-sync) 100%,
    0 calc(100% - var(--ev-cut-sync))
  ) !important;
}

/* Premier contour colore : anneau de 2 px avec biseau parallele. */
.sv-event-item::before {
  clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--ev-cut-sync)) 0,
    100% var(--ev-cut-sync),
    100% 100%,
    var(--ev-cut-sync) 100%,
    0 calc(100% - var(--ev-cut-sync)),
    0 0,
    2px 2px,
    2px calc(100% - var(--ev-cut-sync)),
    var(--ev-cut-sync) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) var(--ev-cut-sync),
    calc(100% - var(--ev-cut-sync)) 2px,
    2px 2px
  ) !important;
  -webkit-clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--ev-cut-sync)) 0,
    100% var(--ev-cut-sync),
    100% 100%,
    var(--ev-cut-sync) 100%,
    0 calc(100% - var(--ev-cut-sync)),
    0 0,
    2px 2px,
    2px calc(100% - var(--ev-cut-sync)),
    var(--ev-cut-sync) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) var(--ev-cut-sync),
    calc(100% - var(--ev-cut-sync)) 2px,
    2px 2px
  ) !important;
}

/* Second contour noir : base continue de 5 px, strictement parallele. */
.sv-event-item__frame {
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--ev-cut-sync)) 0,
    100% var(--ev-cut-sync),
    100% 100%,
    var(--ev-cut-sync) 100%,
    0 calc(100% - var(--ev-cut-sync)),
    0 0,
    5px 5px,
    5px calc(100% - var(--ev-cut-sync)),
    var(--ev-cut-sync) calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) var(--ev-cut-sync),
    calc(100% - var(--ev-cut-sync)) 5px,
    5px 5px
  ) !important;
  -webkit-clip-path: polygon(evenodd,
    0 0,
    calc(100% - var(--ev-cut-sync)) 0,
    100% var(--ev-cut-sync),
    100% 100%,
    var(--ev-cut-sync) 100%,
    0 calc(100% - var(--ev-cut-sync)),
    0 0,
    5px 5px,
    5px calc(100% - var(--ev-cut-sync)),
    var(--ev-cut-sync) calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) var(--ev-cut-sync),
    calc(100% - var(--ev-cut-sync)) 5px,
    5px 5px
  ) !important;
}
/* >>> VELRA-EVENT-BOTTOM-LEFT-FINAL-FIX END <<< */

/* >>> VELRA-EVENT-BOTTOM-BAND-CUT-FIX START <<< */
/*
   La bande basse possede maintenant sa propre decoupe : elle ne peut plus
   peindre le triangle situe sous le biseau du contour bas-gauche.
*/

/* PC : la bande sous la banniere occupe la colonne media gauche. */
@media (min-width: 1300.02px) {
  .sv-event-item .sv-event-item__media-footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__media-footer {
    overflow: hidden !important;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      var(--ev-cut-sync) 100%,
      0 calc(100% - var(--ev-cut-sync))
    ) !important;
    -webkit-clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      var(--ev-cut-sync) 100%,
      0 calc(100% - var(--ev-cut-sync))
    ) !important;
  }
}

/* Tablette et mobile : la bande footer est la bande basse pleine largeur. */
@media (max-width: 1300px) {
  .sv-event-item .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v20 .sv-event-item__footer {
    overflow: hidden !important;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      var(--ev-cut-sync) 100%,
      0 calc(100% - var(--ev-cut-sync))
    ) !important;
    -webkit-clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      var(--ev-cut-sync) 100%,
      0 calc(100% - var(--ev-cut-sync))
    ) !important;
  }
}
/* >>> VELRA-EVENT-BOTTOM-BAND-CUT-FIX END <<< */

/* >>> VELRA-MOBILE-BOTTOM-BAND-AND-DATE-FIX START <<< */
/*
   Mobile <= 600 px uniquement :
   - aucun contour noir propre a la bande basse ; le contour noir reste porte
     par le cadre general de la carte, comme sur PC ;
   - jour, mois et annee partagent exactement la meme taille et sont centres
     verticalement avec des espaces haut/bas identiques.
*/
@media (max-width: 600px) {
  .sv-event-item .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v20 .sv-event-item__footer {
    border-top: 0 !important;
    box-shadow: none !important;
    padding-top: 2.2cqw !important;
    padding-bottom: 2.2cqw !important;
  }

  /* Retire la tranche noire interne de la bande, sans toucher au contour
     exterieur .sv-event-item__frame qui entoure toute la carte. */
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::before,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v20 .sv-event-item__footer::before {
    display: none !important;
  }

  .sv-event-item .sv-event-item__footer .sv-event-item__date,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__date {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    gap: 0.32em !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }

  .sv-event-item .sv-event-item__footer .sv-event-item__day,
  .sv-event-item .sv-event-item__footer .sv-event-item__month,
  .sv-event-item .sv-event-item__footer .sv-event-item__year,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__day,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__year {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Bebas Neue', 'Bebas Neue Fallback', sans-serif !important;
    font-size: clamp(13px, 4.4cqw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
  }
}
/* >>> VELRA-MOBILE-BOTTOM-BAND-AND-DATE-FIX END <<< */

/* >>> VELRA-RESPONSIVE-PC-LIKE-DOUBLE-CONTOUR START <<< */
/*
   Tablette <= 1300 px et mobile <= 600 px : meme empilement que sur PC.
   Le cadre noir continu de 5 px est sous le contour anime de 2 px :
   le noir reste visible entre les segments pendant toute l'animation.
*/
@media (max-width: 1300px) {
  .sv-event-item .sv-event-item__frame,
  .sv-events__scroll > .sv-event-item .sv-event-item__frame,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__frame,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v20 .sv-event-item__frame {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 4 !important;
    pointer-events: none !important;
    background: #020713 !important;
    opacity: 1 !important;
    clip-path: polygon(evenodd,
      0 0,
      calc(100% - var(--ev-cut-sync)) 0,
      100% var(--ev-cut-sync),
      100% 100%,
      var(--ev-cut-sync) 100%,
      0 calc(100% - var(--ev-cut-sync)),
      0 0,
      5px 5px,
      5px calc(100% - var(--ev-cut-sync)),
      var(--ev-cut-sync) calc(100% - 5px),
      calc(100% - 5px) calc(100% - 5px),
      calc(100% - 5px) var(--ev-cut-sync),
      calc(100% - var(--ev-cut-sync)) 5px,
      5px 5px
    ) !important;
    -webkit-clip-path: polygon(evenodd,
      0 0,
      calc(100% - var(--ev-cut-sync)) 0,
      100% var(--ev-cut-sync),
      100% 100%,
      var(--ev-cut-sync) 100%,
      0 calc(100% - var(--ev-cut-sync)),
      0 0,
      5px 5px,
      5px calc(100% - var(--ev-cut-sync)),
      var(--ev-cut-sync) calc(100% - 5px),
      calc(100% - 5px) calc(100% - 5px),
      calc(100% - 5px) var(--ev-cut-sync),
      calc(100% - var(--ev-cut-sync)) 5px,
      5px 5px
    ) !important;
  }

  .sv-event-item::before,
  .sv-events__scroll > .sv-event-item::before {
    z-index: 5 !important;
  }
}

/* Le seuil mobile conserve exactement le meme empilement ; seule la valeur
   de --ev-cut-sync definie plus haut adapte la longueur des biseaux. */
@media (max-width: 600px) {
  .sv-event-item .sv-event-item__frame,
  .sv-events__scroll > .sv-event-item .sv-event-item__frame {
    z-index: 4 !important;
    background: #020713 !important;
  }

  .sv-event-item::before,
  .sv-events__scroll > .sv-event-item::before {
    z-index: 5 !important;
  }
}
/* >>> VELRA-RESPONSIVE-PC-LIKE-DOUBLE-CONTOUR END <<< */

/* >>> VELRA-RESPONSIVE-REMOVE-FOOTER-TOP-LINE START <<< */
/*
   Tablette <= 1300 px et mobile <= 600 px : suppression complete du trait
   noir horizontal au-dessus de la bande basse. Le double contour exterieur
   de la carte reste intact et continue de suivre les biseaux.
*/
@media (max-width: 1300px) {
  .sv-event-item .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v20 .sv-event-item__footer {
    border: 0 !important;
    border-top: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
}
/* >>> VELRA-RESPONSIVE-REMOVE-FOOTER-TOP-LINE END <<< */


/* ============================================================
   LIVRAISON — CONCEPT STATIQUE + ROTATION DU CONTENEUR
   Le titre et la description restent visibles ensemble. La rotation
   anime la carte entiere lorsqu'un concept different prend sa place.
   ============================================================ */
.sv-section--concept .sv-concept__item,
.sv-concept__item {
  perspective: none !important;
  -webkit-perspective: none !important;
  transform-style: flat !important;
  justify-content: flex-start !important;
  padding-top: clamp(34px, 3.2vw, 48px) !important;
  cursor: default !important;
}

/* Compatibilite pendant le re-rendu Firestore : le JS retire ce wrapper,
   mais display:contents evite tout flash/empilement si un observer voit
   l'ancien markup pendant une frame. */
.sv-concept__item > .sv-concept__flip,
.sv-section--concept .sv-concept__item > .sv-concept__flip {
  display: contents !important;
  transform: none !important;
  transition: none !important;
  perspective: none !important;
  -webkit-perspective: none !important;
  transform-style: flat !important;
}
.sv-concept__item > .sv-concept__flip > .sv-concept__face,
.sv-section--concept .sv-concept__item > .sv-concept__flip > .sv-concept__face {
  display: contents !important;
  position: static !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
.sv-concept__item.is-flipped > .sv-concept__flip,
.sv-section--concept .sv-concept__item.is-flipped > .sv-concept__flip {
  transform: none !important;
}

/* Le nom et la description restent dans la meme carte pendant la rotation.
   Les deux utilisent un vrai bloc de clamp (et non display:block + line-clamp).
   Les hauteurs reservees evitent le ruban du haut et le pied d'icones. */
.sv-concept__item > .sv-concept__item-title,
.sv-section--concept .sv-concept__item > .sv-concept__item-title,
.sv-concept__item > .sv-concept__flip .sv-concept__item-title,
.sv-section--concept .sv-concept__item > .sv-concept__flip .sv-concept__item-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 2.16em !important;
  margin: 0 0 clamp(5px, 1vw, 10px) !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: clamp(24px, 2.7vw, 42px) !important;
  line-height: 1.04 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}
.sv-concept__item > .sv-concept__item-desc,
.sv-section--concept .sv-concept__item > .sv-concept__item-desc,
.sv-concept__item > .sv-concept__flip .sv-concept__item-desc,
.sv-section--concept .sv-concept__item > .sv-concept__flip .sv-concept__item-desc {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  position: absolute !important;
  top: 66% !important;
  left: clamp(10px, 1.25vw, 18px) !important;
  right: clamp(10px, 1.25vw, 18px) !important;
  z-index: 2 !important;
  width: auto !important;
  max-width: none !important;
  max-height: 5.6em !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  text-align: center !important;
  font-size: clamp(11px, 1.25vw, 14px) !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
}
.sv-concept__item > .sv-concept__item-foot,
.sv-section--concept .sv-concept__item > .sv-concept__item-foot {
  z-index: 2 !important;
  pointer-events: none !important;
}

/* La sortie/entree porte sur la carte complete en reprenant le meme
   mouvement rotateY que le flip titre/description historique. Aucun fondu
   ou simple scale ne remplace cette rotation. */
.sv-concept__item,
.sv-section--concept .sv-concept__item {
  perspective: 900px !important;
  -webkit-perspective: 900px !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sv-concept__item.is-swap-out,
.sv-section--concept .sv-concept__item.is-swap-out {
  animation: svConceptCardOut .62s cubic-bezier(.45,.05,.2,1) both !important;
}
.sv-concept__item.is-swap-in,
.sv-section--concept .sv-concept__item.is-swap-in {
  animation: svConceptCardIn .7s cubic-bezier(.45,.05,.2,1) both !important;
}
@keyframes svConceptCardOut {
  0% { opacity: 1; transform: perspective(900px) rotateY(0deg); }
  52% { opacity: 1; transform: perspective(900px) rotateY(72deg); }
  100% { opacity: 1; transform: perspective(900px) rotateY(90deg); }
}
@keyframes svConceptCardIn {
  0% { opacity: 1; transform: perspective(900px) rotateY(-90deg); }
  48% { opacity: 1; transform: perspective(900px) rotateY(-24deg); }
  100% { opacity: 1; transform: perspective(900px) rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-concept__item.is-swap-out,
  .sv-section--concept .sv-concept__item.is-swap-out,
  .sv-concept__item.is-swap-in,
  .sv-section--concept .sv-concept__item.is-swap-in {
    animation: none !important;
    transform: none !important;
  }
}

/* Entre 601 et 900 px les cartes conservent quatre colonnes et sont donc
   plus étroites : le titre reste agrandi, tandis que la description centrée
   est limitée à deux lignes pour ne jamais toucher le titre ni les icônes. */

/* Cartes mobiles ~150px : reserve explicite pour le ruban superieur et
   le pied, puis clamp reel du titre/texte dans l'espace restant. */
@media (max-width: 600px) {
  .sv-concept__ppl { width: 10px !important; height: 10px !important; }
}

/* ============================================================
   LIVRAISON — CALENDRIER AU PREMIER PLAN
   Profondeur simple (surface, liseres et ombres), sans 3D.
   ============================================================ */
/* Ombre portée sur la section précédente, hors du masque du calendrier.
   Son bord bas suit exactement la pente existante, sans déplacer la grille
   ni changer les dimensions des sections. */
.sv-section--concept::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: calc(var(--sv-slope) / 2);
  height: clamp(28px, 4vw, 52px);
  z-index: 2;
  transform-origin: 50% 100%;
  transform: skewY(atan2(var(--sv-slope), 100vw));
  background: linear-gradient(0deg, rgba(0, 3, 12, .68), rgba(0, 3, 12, .22) 42%, transparent);
  pointer-events: none;
}
.sv-section--calendar {
  isolation: isolate;
}
.sv-section--calendar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 66, 124, .16), transparent 30%);
}
.sv-section--calendar .sv-inner {
  z-index: 2;
}
.sv-section--calendar .sv-calendar {
  background: linear-gradient(180deg, rgba(12, 31, 69, .92), rgba(5, 16, 39, .94)) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 34px rgba(0, 4, 16, .32), 0 0 0 1px rgba(94, 170, 255, .12);
}

/* Event start time enhancement: direct sibling immediately before the existing date. */
.sv-event-item__time,
.sv-feat-card__time {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}
.sv-event-item__time[hidden],
.sv-feat-card__time[hidden] { display: none !important; }

/* The existing featured date and new time remain a contiguous left group. */
.sv-feat-card__meta:has(> .sv-feat-card__time) { justify-content: flex-start; }
.sv-feat-card__meta > .sv-feat-card__time { margin-right: 0; }
.sv-feat-card__meta > .sv-feat-card__region { margin-left: auto; }

/* communaute.js moves the original date into this footer; the time follows it. */
.sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__time {
  order: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1300px) {
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content !important;
  }
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__time {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__date {
    grid-column: 2 !important;
  }
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__status {
    grid-column: 3 !important;
  }
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__join,
  .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .btn {
    grid-column: 4 !important;
  }
}


/* ============================================================
   CONCEPT — TITRE EN HAUT A GAUCHE + VIGNETTE A DROITE
   1) Le titre quitte le centre : aligne en HAUT A GAUCHE, la
      place qu'occupait la vignette. L'ancien bandeau degrade
      derriere le titre est retire.
   2) La vignette de type (COMPETITIF / AMUSANT) passe en HAUT
      A DROITE : miroir exact du style d'origine (fondu vers le
      bord de la carte, coupe 45° cote interieur).
   ============================================================ */

/* --- 1) Titre : haut-gauche de la carte --- */
.sv-concept__item,
.sv-section--concept .sv-concept__item {
  padding-top: clamp(12px, 1.2vw, 18px) !important;
}
.sv-concept__item > .sv-concept__item-title,
.sv-section--concept .sv-concept__item > .sv-concept__item-title,
.sv-concept__item > .sv-concept__flip .sv-concept__item-title,
.sv-section--concept .sv-concept__item > .sv-concept__flip .sv-concept__item-title {
  text-align: left !important;
  background: none !important;
  border-radius: 0 !important;
}

/* --- 2) Vignette : haut-droite (miroir du style d'origine) --- */
.sv-concept__item-kind,
.sv-section--concept .sv-concept__item-kind {
  align-self: flex-end !important;
  padding: 0 12px 0 28px !important;      /* miroir : marge gauche = diagonale */
}
.sv-concept__item-kind::before,
.sv-section--concept .sv-concept__item-kind::before {
  /* fondu a DROITE (vers le bord de la carte), plein a gauche */
  background: linear-gradient(
    270deg,
    rgba(42, 108, 196, 0)    0%,
    rgba(42, 108, 196, 0.35) 30%,
    rgba(52, 130, 226, 0.85) 70%,
    rgba(66, 148, 240, 0.96) 100%
  ) !important;
  /* diagonale 45° miroir : coin haut-GAUCHE plus avance que bas-gauche */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%) !important;
          clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%) !important;
}
.sv-concept__item-kind.is-competitive::before,
.sv-section--concept .sv-concept__item-kind.is-competitive::before {
  background: linear-gradient(
    270deg,
    rgba(122, 31, 57, 0)     0%,
    rgba(156, 39, 65, 0.35)  30%,
    rgba(205, 66, 82, 0.86)  70%,
    rgba(228, 91, 101, 0.98) 100%
  ) !important;
}
.sv-concept__item-kind.is-fun::before,
.sv-section--concept .sv-concept__item-kind.is-fun::before {
  background: linear-gradient(
    270deg,
    rgba(24, 104, 91, 0)     0%,
    rgba(29, 139, 111, 0.35) 30%,
    rgba(51, 184, 137, 0.86) 70%,
    rgba(91, 220, 164, 0.98) 100%
  ) !important;
}

/* Mobile : meme bascule, diagonale miroir a 16px */

/* ============================================================
   CONCEPT — VIGNETTE EN BAS A GAUCHE, TITRE CENTRE EN HAUT,
   DESCRIPTION AU CENTRE DU CARRE
   1) Titre : de nouveau centre horizontalement, toujours en haut.
   2) Description : centree horizontalement ET verticalement
      (milieu exact de la carte, toutes tailles d'ecran).
   3) Vignette de type (COMPETITIF / AMUSANT) : descend dans
      l'angle BAS-GAUCHE ; les icones joueurs restent en bas a
      droite. La coupe 45° reste cote interieur (a droite) et le
      fondu s'ouvre vers le bord gauche de la carte.
   ============================================================ */

/* --- 1) Titre : centre, en haut --- */
.sv-concept__item > .sv-concept__item-title,
.sv-section--concept .sv-concept__item > .sv-concept__item-title,
.sv-concept__item > .sv-concept__flip .sv-concept__item-title,
.sv-section--concept .sv-concept__item > .sv-concept__flip .sv-concept__item-title {
  text-align: center !important;
}

/* --- 2) Description : milieu exact de la carte --- */
.sv-concept__item > .sv-concept__item-desc,
.sv-section--concept .sv-concept__item > .sv-concept__item-desc,
.sv-concept__item > .sv-concept__flip .sv-concept__item-desc,
.sv-section--concept .sv-concept__item > .sv-concept__flip .sv-concept__item-desc {
  top: 50% !important;
  transform: translateY(-50%) !important;
  text-align: center !important;
}

/* --- 3) Pied de carte : colle en bas, vignette a gauche --- */
.sv-concept__item-foot,
.sv-section--concept .sv-concept__item-foot {
  top: auto !important;
  bottom: clamp(6px, 0.8cqw, 12px) !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.sv-concept__item-kind,
.sv-section--concept .sv-concept__item-kind {
  align-self: flex-start !important;      /* bord gauche */
  padding: 0 28px 0 12px !important;      /* marge a droite = place de la diagonale */
}
.sv-concept__item-format,
.sv-section--concept .sv-concept__item-format {
  align-self: flex-end !important;        /* icones joueurs : bord droit */
}

/* Tablette et mobile : meme centrage vertical de la description
   et vignette toujours en bas a gauche. */

/* ============================================================
   CONCEPT — VIGNETTE EN HAUT A GAUCHE, TITRE AU TOP (SOUS LA
   VIGNETTE), DESCRIPTION TOUJOURS AU CENTRE, VIGNETTE PLUS
   DISCRETE SUR MOBILE (<= 600px)
   1) La vignette de type remonte dans l'angle HAUT-GAUCHE :
      le pied de carte redevient une colonne etiree sur toute
      la hauteur, vignette en haut a gauche, icones joueurs
      toujours en bas a droite.
   2) Le titre reste en haut du carre mais descend juste sous
      la vignette.
   3) Sur mobile la vignette est reduite (hauteur, police,
      marges) : elle etait trop grande a 600px.
   ============================================================ */

/* --- 1) Vignette en haut a gauche, icones en bas a droite --- */
.sv-concept__item-foot,
.sv-section--concept .sv-concept__item-foot {
  top: clamp(6px, 0.8cqw, 10px) !important;
  bottom: clamp(6px, 0.8cqw, 10px) !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.sv-concept__item-kind,
.sv-section--concept .sv-concept__item-kind {
  align-self: flex-start !important;      /* angle haut-gauche */
  padding: 0 28px 0 12px !important;
}
.sv-concept__item-format,
.sv-section--concept .sv-concept__item-format {
  align-self: flex-end !important;        /* icones joueurs : bas-droit */
}

/* Fond de la vignette : fondu vers la gauche (bord de carte),
   coupe 45° a droite, cote interieur. */
.sv-concept__item-kind::before,
.sv-section--concept .sv-concept__item-kind::before {
  background: linear-gradient(
    90deg,
    rgba(42, 108, 196, 0)    0%,
    rgba(42, 108, 196, 0.35) 30%,
    rgba(52, 130, 226, 0.85) 70%,
    rgba(66, 148, 240, 0.96) 100%
  ) !important;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) !important;
          clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) !important;
}
.sv-concept__item-kind.is-competitive::before,
.sv-section--concept .sv-concept__item-kind.is-competitive::before {
  background: linear-gradient(
    90deg,
    rgba(122, 31, 57, 0)     0%,
    rgba(156, 39, 65, 0.35)  30%,
    rgba(205, 66, 82, 0.86)  70%,
    rgba(228, 91, 101, 0.98) 100%
  ) !important;
}
.sv-concept__item-kind.is-fun::before,
.sv-section--concept .sv-concept__item-kind.is-fun::before {
  background: linear-gradient(
    90deg,
    rgba(24, 104, 91, 0)     0%,
    rgba(29, 139, 111, 0.35) 30%,
    rgba(51, 184, 137, 0.86) 70%,
    rgba(91, 220, 164, 0.98) 100%
  ) !important;
}

/* --- 2) Titre : en haut, juste sous la vignette --- */
.sv-concept__item,
.sv-section--concept .sv-concept__item {
  padding-top: clamp(34px, 2.8vw, 42px) !important;
}

/* --- 3) Mobile (<= 600px) : vignette plus petite, titre ajuste --- */

/* ============================================================
   CONCEPT — TITRE : ENCORE PLUS GRAND
   (on augmente la taille, l'espace sous la vignette suit)
   ============================================================ */
.sv-concept__item-title,
.sv-section--concept .sv-concept__item-title {
  font-size: clamp(56px, 6.6vw, 96px) !important;
}
.sv-concept__item,
.sv-section--concept .sv-concept__item {
  padding-top: clamp(46px, 3.8vw, 58px) !important;
}

/* ============================================================
   CORRECTION — HEURE, DATE ET ACTIONS SUR UNE MEME LIGNE DESKTOP
   L'heure dispose de sa propre colonne : aucune ligne implicite
   ne repousse la date, la vignette et le bouton vers le bas.
   Les pointes decoratives et le responsive <= 1300px sont preserves.
   ============================================================ */
@media (min-width: 1301px) {
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    grid-template-columns: max-content max-content minmax(0, 1fr) max-content max-content !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
    align-content: center !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__time,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__date,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__status,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .btn {
    grid-row: 1 !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__time {
    grid-column: 1 !important;
  }
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__date {
    grid-column: 2 !important;
  }
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__status {
    grid-column: 4 !important;
  }
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .sv-event-item__join,
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer > .btn {
    grid-column: 5 !important;
  }
}

/* Ajustement cible : retrait de l'ombre sur la jonction haute du calendrier. */
.sv-section--concept::after {
  content: none !important;
  display: none !important;
}

/* Agrandissement independant des rotations de remplacement des concepts. */
.sv-section--concept .sv-concept__item,
.sv-concept__item {
  scale: 1;
  transform-origin: center center !important;
  transition: transform 180ms ease, background 180ms ease, outline-color 180ms ease, scale 220ms ease !important;
  -webkit-user-select: none;
  user-select: none;
}
.sv-section--concept .sv-concept__item *,
.sv-concept__item * {
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .sv-section--concept .sv-concept__item:hover,
  .sv-concept__item:hover {
    scale: 1.008;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-section--concept .sv-concept__item,
  .sv-concept__item {
    transition: none !important;
  }
}

/* Survol minimaliste : une seule mise a l'echelle, animee dans les deux sens.
   Les transformations des animations de remplacement ne sont pas forcees. */
.sv-concept__item,
.sv-section--concept .sv-concept__item,
.sv-concept__item:not(:hover),
.sv-section--concept .sv-concept__item:not(:hover),
.sv-concept__item:hover:not(.is-frozen),
.sv-section--concept .sv-concept__item:hover:not(.is-frozen) {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms ease, outline-color 180ms ease, scale 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Le fond du coin bas-gauche depassait car une ancienne regle plus
   specifique conservait une silhouette rectangulaire a cet endroit.
   Corrige uniquement le masque EXTERIEUR : aucun changement de dimensions,
   de position, de padding, ni de structure a l'interieur des widgets. */
.sv-event-item,
.sv-events__scroll > .sv-event-item,
.sv-events__scroll > .sv-event-item[data-type="event"] {
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut-lg, 22px)) 0,
    100% var(--cut-lg, 22px),
    100% 100%,
    var(--ev-cut-sync) 100%,
    0 calc(100% - var(--ev-cut-sync))
  ) !important;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--cut-lg, 22px)) 0,
    100% var(--cut-lg, 22px),
    100% 100%,
    var(--ev-cut-sync) 100%,
    0 calc(100% - var(--ev-cut-sync))
  ) !important;
}
@media (prefers-reduced-motion: reduce) {
  .sv-concept__item,
  .sv-section--concept .sv-concept__item,
  .sv-concept__item:not(:hover),
  .sv-section--concept .sv-concept__item:not(:hover),
  .sv-concept__item:hover:not(.is-frozen),
  .sv-section--concept .sv-concept__item:hover:not(.is-frozen) {
    transition: none !important;
  }
}


/* ============================================================
   CORRECTIFS 07/10/2026 (2)
   ============================================================ */

/* ---- 1) Titres « Événements en vedette » et « Concept des évènements » :
   meme marge au-dessus et au-dessous que « Nos createurs de contenu »
   (accueil) : clamp(52px, 4.4vw, 84px) entre le contenu de la section
   precedente et le titre, puis entre la description et le contenu.
   Les marges internes des cartes en vedette (22px en haut, 34px en
   bas, reservees au survol) sont deduites pour garder l'ecart visible. */
:root { --sv-title-gap: clamp(52px, 4.4vw, 84px); }
html body .sv-section--events {
  padding-bottom: calc(var(--sv-title-gap) / 2) !important;
}
html body .sv-section--featured {
  padding-top: calc(var(--sv-title-gap) / 2) !important;
  padding-bottom: 0 !important;
}
html body .sv-section--featured .sv-featured__head {
  margin-bottom: calc(var(--sv-title-gap) - 22px) !important;
}
html body .sv-section--concept {
  padding-top: calc(var(--sv-title-gap) - 34px) !important;
}
html body .sv-section--concept .sv-concept__head {
  margin-bottom: var(--sv-title-gap) !important;
}

/* ---- 2) Concept de l'evenement : contour selectionne bref -------------
   Meme contour que l'ancien etat « selectionne » des cartes (1px plein,
   bleu clair), pose quelques instants a l'arrivee depuis le bouton
   « concept de l'evenement », puis retour au contour pointille. */
html body .sv-section--concept .sv-concept__item.is-concept-target,
html body .sv-section--concept .sv-concept__item.is-concept-target:hover {
  outline: 1px solid rgba(154, 207, 255, 0.95) !important;
  outline-offset: -1px !important;
}


/* ============================================================
   CORRECTIFS 07/10/2026 (3)
   ============================================================ */

/* ---- « Concept des evenements » : meme marge au-dessus du titre (depuis
   le debut du fond de la section) qu'au-dessous (jusqu'aux cartes). */
html body .sv-section--concept {
  padding-top: var(--sv-title-gap) !important;
}

/* ---- Items event (PC) : le contenu reste DANS la carte -------------- */
@media (min-width: 1300.02px) {
  html body #eventScroll.sv-events__scroll > .sv-event-item,
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-layout-v19 {
    grid-template-columns: 38% minmax(0, 1fr) !important;
  }
  html body #eventScroll.sv-events__scroll > .sv-event-item > .sv-event-item__content {
    min-width: 0 !important;
  }
  /* Description : marge a droite (= marge interne de la carte) et
     trois points a la fin de la 2e ligne si le texte est coupe. */
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__desc {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  /* Pied : la date prend sa largeur reelle (plus de colonne fixe de
     180px) ; script communaute.js ajuste si la carte est etroite. */
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer,
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto !important;
  }
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__date,
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__date {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    flex-basis: auto !important;
  }
  /* Heure : meme hauteur (haut et bas) que le jour et le mois. */
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__time,
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer .sv-event-item__time {
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 18px !important;
    letter-spacing: .04em !important;
  }
}

/* ---- Minuteur des items de type « Evenement » : il etait masque par
   une ancienne regle propre a ce type. Il s'affiche comme sur les
   autres items (meme place, meme taille). */
@media (min-width: 1300.02px) {
  html body #eventScroll.sv-events__scroll > .sv-event-item[data-type="event"] .sv-event-item__media-footer > .sv-event-item__countdown {
    visibility: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    font-size: 12px !important;
    line-height: 12px !important;
  }
  html body #eventScroll.sv-events__scroll > .sv-event-item[data-type="event"] .sv-event-item__media-footer > .sv-event-item__countdown * {
    visibility: visible !important;
  }
}

/* ---- Items event (tablette et mobile) : l'heure ne chevauche plus le
   jour ; heure, jour, mois et annee ont la meme hauteur. */
@media (max-width: 1300px) {
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer {
    grid-template-columns: max-content max-content minmax(0, 1fr) max-content max-content !important;
  }
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__time {
    grid-column: 1 !important; grid-row: 1 !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400 !important;
    font-size: 3.4cqw !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
  }
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__date { grid-column: 2 !important; grid-row: 1 !important; }
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__sweep,
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__triangles { grid-column: 3 !important; grid-row: 1 !important; }
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__status { grid-column: 4 !important; grid-row: 1 !important; }
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__join { grid-column: 5 !important; grid-row: 1 !important; }
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__day,
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month,
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__year {
    font-size: 3.4cqw !important;
  }
}
@media (max-width: 600px) {
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__time,
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__day,
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month,
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__year {
    font-size: clamp(13px, 4.4cqw, 18px) !important;
  }
}

/* >>> VELRA-V5-CONCEPT-KIND-COLORS START <<< */
/* Vignettes des cases Concept : Compétitif = bleu, Amusant = violet. */
.sv-concept__item-kind.is-competitive,
.sv-section--concept .sv-concept__item-kind.is-competitive {
  color: #0b2547 !important;
  -webkit-text-fill-color: currentColor !important;
  background: linear-gradient(90deg,
    rgba(116, 187, 255, 0) 0%,
    rgba(116, 187, 255, 0.62) 32%,
    #3f8ee0 100%) !important;
}
.sv-concept__item-kind.is-fun,
.sv-section--concept .sv-concept__item-kind.is-fun {
  color: #4a3a1d !important;
  -webkit-text-fill-color: currentColor !important;
  background: linear-gradient(90deg,
    rgba(167, 139, 250, 0) 0%,
    rgba(167, 139, 250, 0.66) 32%,
    #c9b183 100%) !important;
}
/* >>> VELRA-V5-CONCEPT-KIND-COLORS END <<< */

/* >>> VELRA-V5-EVENT-RIGHT-PERSPECTIVE START <<< */
/* Perspective de droite : ombre pleine comme la perspective du haut,
   sans trait ni degrade. */
.sv-events__scroll > .sv-event-item .sv-event-item__content::before,
.sv-event-item .sv-event-item__content::before {
  box-shadow: none !important;
}
@media (min-width: 1300.02px) {
  .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::before,
  .sv-event-item .sv-event-item__footer::before {
    left: auto !important;
    right: 0 !important;
    width: 11px !important;
    background: rgba(0, 0, 0, 0.46) !important;
    box-shadow: none !important;
  }
}
/* >>> VELRA-V5-EVENT-RIGHT-PERSPECTIVE END <<< */

/* >>> VELRA-V5-EVENT-HOVER-SLOW START <<< */
/* Pointilles du survol 3 fois plus lents (3,6 s -> 10,8 s). */
.sv-event-item:hover::before {
  animation-duration: 10.8s !important;
}
/* >>> VELRA-V5-EVENT-HOVER-SLOW END <<< */

/* >>> VELRA-V5-EVENT-BAND-EDGE START <<< */
/* Contour du bas : couleur fixe de la bande la plus proche (non anime). */
.sv-event-item > .sv-event-item__band-edge {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-image: var(--be-st-c, none), var(--be-mf-c, none), var(--be-ft-c, none) !important;
  background-position: right 0 bottom -2px, left 0 bottom -2px, right 0 bottom -2px !important;
  background-size:
    100% calc(var(--be-st-h, 0px) + 2px),
    var(--be-mf-w, 0px) calc(var(--be-mf-h, 0px) + 2px),
    var(--be-ft-w, 0px) calc(var(--be-ft-h, 0px) + 2px) !important;
}
/* >>> VELRA-V5-EVENT-BAND-EDGE END <<< */

/* >>> VELRA-V6-CALENDAR-TOP START <<< */
/* Section Calendrier : contenu remonte un peu sous la diagonale. */
.sv-section--calendar {
  padding-top: calc(clamp(30px, 3.4vw, 54px) + var(--sv-slope, clamp(36px, 5vw, 110px))) !important;
}
/* >>> VELRA-V6-CALENDAR-TOP END <<< */

/* >>> VELRA-V7-AGENDA-DEPTH START <<< */
/* Retrait uniquement du bouton des items event ; badges et dates conserves. */
html body .sv-event-item .sv-event-item__join {
  display: none !important;
}
@media (min-width: 1301px) {
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer,
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  }
}
/* Concept reste ancre a En vedette : son fond ne se deplace jamais.
   C'est l'Agenda qui remonte sur ce plan, avec compensation dans le flux
   pour ne creer aucun espace vide avant la suite de la page. */
html body #sv-concept-section.sv-depth-back {
  z-index: 1;
  transform: none;
  transition: none;
}
html body #sv-concept-section.sv-depth-back > .sv-inner {
  transform-origin: 50% 0;
  transform: perspective(1200px) translateZ(var(--sv-depth-z, 0px)) rotateX(var(--sv-depth-tilt, 0deg));
  transition: none;
}
html body #sv-calendar-section.sv-depth-front {
  z-index: 3;
  isolation: isolate;
  top: calc(-1 * var(--sv-depth-drift, 0px));
  margin-bottom: calc(-1 * var(--sv-depth-drift, 0px));
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  html body #sv-concept-section.sv-depth-back,
  html body #sv-concept-section.sv-depth-back > .sv-inner {
    transform: none;
  }
}
/* >>> VELRA-V7-AGENDA-DEPTH END <<< */

/* >>> VELRA-V8-CONCEPT-SLOTS START <<< */
/* Deux rangees completes, y compris si le flux contient peu de concepts. */
html body #sv-concept-section .sv-concept__panel.active {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, auto) !important;
}
@media (max-width: 1300px) {
  html body #sv-concept-section .sv-concept__panel.active {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  html body #sv-concept-section .sv-concept__panel.active {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Cases de reserve : fond moins transparent et motif geometrique discret
   de la reference. Les vrais concepts et le fond de section sont inchanges. */
#sv-concept-section .sv-concept__empty {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(10, 28, 52, .84);
  outline: 1px dashed rgba(35, 72, 111, .7);
  outline-offset: -1px;
  color: var(--text-muted, #7788a5);
}
#sv-concept-section .sv-concept__empty::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('concept-reserve-pattern.jpg') center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: .2;
}
/* Supprime seulement l'ancien quadrillage interne des cases de reserve. */
#sv-concept-section .sv-concept__empty .sv-concept__pattern {
  display: none !important;
}
#sv-concept-section .sv-concept__empty-label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 10px;
  right: 10px;
  transform: translateY(-50%);
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.3;
  text-align: center;
}
#sv-concept-section .sv-concept__empty-title {
  position: absolute;
  z-index: 1;
  top: clamp(46px, 3.8vw, 58px);
  left: 10px;
  right: 10px;
  width: auto !important;
  margin: 0 !important;
  font-size: clamp(19px, 2.1vw, 32px) !important;
  line-height: 1.02 !important;
  text-align: center !important;
}
/* Un + geometrique fin : epaisseur constante, sans graisse de police. */
#sv-concept-section .sv-concept__empty-plus {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 7vw, 100px);
  height: clamp(64px, 7vw, 100px);
  font-size: 0;
  color: var(--text-muted, #7788a5);
}
#sv-concept-section .sv-concept__empty-plus::before,
#sv-concept-section .sv-concept__empty-plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
}
#sv-concept-section .sv-concept__empty-plus::before {
  width: 100%;
  height: 1.25px;
}
#sv-concept-section .sv-concept__empty-plus::after {
  width: 1.25px;
  height: 100%;
}
#sv-concept-section .sv-concept__empty--proposal .sv-concept__empty-label {
  display: none;
}
/* >>> VELRA-V8-CONCEPT-SLOTS END <<< */

/* Recherche vide : un cadre central, sur toute la largeur de la liste. */
#eventScroll .sv-event-item.hidden {
  display: none !important;
}
#eventScroll.has-search-empty {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-auto-columns: auto !important;
  grid-auto-flow: row !important;
}
#eventScroll .sv-events__empty[hidden] {
  display: none !important;
}
#eventScroll .sv-events__search-empty {
  box-sizing: border-box;
  grid-column: 1 / -1;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  min-height: 220px;
  margin: 0;
  padding: 32px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--text-muted, #7788a5);
  background: rgba(10, 24, 52, .5);
  outline: 1px solid var(--border, rgba(94, 170, 255, .22));
  outline-offset: -1px;
}

/* >>> VELRA-V9-DATE-TONE START <<< */
/* Heure, jour, mois, annee de la bande droite : meme formule que le
   compteur (.countdown__n), calee sur --ev-band-dark (repli #1a4e90). */
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__day,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__year,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__time *,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__day *,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month *,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__year *,
html body #eventScroll.sv-events__scroll > .sv-event-item:hover .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item:hover .sv-event-item__footer .sv-event-item__day,
html body #eventScroll.sv-events__scroll > .sv-event-item:hover .sv-event-item__footer .sv-event-item__month,
html body #eventScroll.sv-events__scroll > .sv-event-item:hover .sv-event-item__footer .sv-event-item__year,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer:hover .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer:hover .sv-event-item__day,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer:hover .sv-event-item__month,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer:hover .sv-event-item__year,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__time:hover,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__day:hover,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__month:hover,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer .sv-event-item__year:hover {
  color: color-mix(in srgb, var(--ev-band-dark, #1a4e90) 65%, black 35%) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
/* >>> VELRA-V9-DATE-TONE END <<< */

/* >>> VELRA-EVENT-BAND-CENTER-20261008 START <<< */
/* Le centre suit les deux limites rouges : toute la bande sombre,
   y compris sa partie basse. Le raccord clair de 18px reste decoratif. */
@media (min-width: 1300.02px) {
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer,
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    padding-top: 0 !important;
    padding-bottom: 18px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-content: stretch !important;
    align-items: center !important;
  }
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__time,
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__date,
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__status {
    grid-row: 1 !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}
/* >>> VELRA-EVENT-BAND-CENTER-20261008 END <<< */


/* >>> VELRA-EVENT-DIVIDER-FILTER-ICONS-20261008 START <<< */
@media (min-width: 1300.02px) {
  /* Retire l'ancienne face gauche qui traversait la jonction basse. */
  html body #eventScroll.sv-events__scroll > .sv-event-item > .sv-event-item__content::before {
    border-left-width: 0 !important;
    border-left-color: transparent !important;
  }
  /* Meme matiere a la jonction : aucun liseré entre bande 1 et bande 2. */
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__media-footer {
    border-right: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer {
    overflow: visible !important;
  }
  /* Recouvrement d'un pixel a la jonction, sans changer les dimensions.
     Evite aussi le filet d'anticrenelage aux largeurs fractionnaires. */
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::after {
    left: -1px !important;
    width: calc(100% + 1px) !important;
  }
}
.sv-events__filters .sv-fdrop__icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: currentColor;
}
.sv-events__filters .sv-fdrop__btn {
  gap: 9px !important;
}
@media (max-width: 600px) {
  html body .sv-events__filters {
    gap: 6px !important;
  }
  html body .sv-events__filters .sv-fdrop {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
  }
  html body .sv-events__filters .sv-fdrop__btn {
    width: 36px !important;
    min-width: 36px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  /* Le libelle reste accessible et suit la selection, mais est invisible. */
  html body .sv-events__filters .sv-fdrop__val {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  html body .sv-events__filters .sv-fdrop__chev {
    display: none !important;
  }
  html body .sv-events__filters .sv-fsearch#filterSearch {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }
  html body .sv-events__filters .sv-fsearch__input {
    min-width: 0 !important;
    width: 100% !important;
  }
  html body .sv-events__filters .sv-fdrop__menu {
    left: auto;
    right: 0;
    min-width: 150px;
  }
}
/* >>> VELRA-EVENT-DIVIDER-FILTER-ICONS-20261008 END <<< */

/* >>> VELRA-V9-CONCEPT-ZOOM START <<< */
/* Case agrandie (2 x 2) au-dessus de la grille : la grille et les autres
   cases ne bougent pas. Agrandissement geometrique, sans fondu. */
#sv-concept-section .sv-concept__panel.active > .sv-concept__item,
#sv-concept-section .sv-concept__panel.active > .sv-concept__empty--proposal {
  cursor: pointer !important;
}
html body #sv-concept-section .sv-concept > .sv-concept-zoom {
  position: absolute !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  background: #0a1c34 !important;
  cursor: pointer !important;
  transition:
    left .42s cubic-bezier(.2, .8, .2, 1),
    top .42s cubic-bezier(.2, .8, .2, 1),
    width .42s cubic-bezier(.2, .8, .2, 1),
    height .42s cubic-bezier(.2, .8, .2, 1),
    outline-color .35s ease !important;
}
html body #sv-concept-section .sv-concept > .sv-concept-zoom.is-closing {
  pointer-events: none !important;
}
/* Contour active un court instant a l'ouverture. */
html body #sv-concept-section .sv-concept > .sv-concept-zoom.is-zoom-flash {
  outline: 1px solid #8fd0ff !important;
  outline-offset: -1px !important;
}
/* Description complete, defilable si elle est tres longue. */
html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-desc {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: clamp(8px, 1.2vw, 18px) 0 0 !important;
  padding: 0 clamp(4px, 2vw, 40px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  font-size: clamp(13px, 1.15vw, 16px) !important;
  line-height: 1.55 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(94, 170, 255, .35) transparent;
}

/* Case + : formulaire de commentaire. */
html body #sv-concept-section .sv-concept > .sv-concept-zoom--form {
  cursor: default !important;
  padding-bottom: clamp(14px, 1.4vw, 22px) !important;
}
#sv-concept-section .sv-concept-zoom__form {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(6px, 1vw, 14px);
}
#sv-concept-section .sv-concept-zoom__input {
  flex: 1 1 auto;
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  resize: none;
  border: 0;
  border-radius: 0;
  background: rgba(5, 14, 29, .72);
  outline: 1px solid rgba(94, 170, 255, .32);
  outline-offset: -1px;
  color: #dce9ff;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.5;
}
#sv-concept-section .sv-concept-zoom__input:focus {
  outline-color: rgba(94, 170, 255, .85);
}
#sv-concept-section .sv-concept-zoom__input::placeholder {
  color: var(--text-muted, #7788a5);
  opacity: 1;
}
#sv-concept-section .sv-concept-zoom__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#sv-concept-section .sv-concept-zoom__status {
  min-width: 0;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 12px;
  color: var(--text-muted, #7788a5);
}
#sv-concept-section .sv-concept-zoom__status.is-ok { color: #6ff0e2; }
#sv-concept-section .sv-concept-zoom__status.is-error { color: #ff8a8a; }
#sv-concept-section .sv-concept-zoom__send {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  background: #5eaaff;
  color: #06142a;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
#sv-concept-section .sv-concept-zoom__send:disabled {
  opacity: .45;
  cursor: default;
}
@media (max-width: 600px) {
  #sv-concept-section .sv-concept-zoom__input { padding: 9px 10px; font-size: 13px; }
  #sv-concept-section .sv-concept-zoom__send { height: 34px; padding: 0 16px; font-size: 12px; }
  #sv-concept-section .sv-concept-zoom__form { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #sv-concept-section .sv-concept > .sv-concept-zoom { transition: none !important; }
}
/* >>> VELRA-V9-CONCEPT-ZOOM END <<< */

/* >>> VELRA-V10 START <<< */
/* ---- Agenda : nom du mois en Bebas Neue ---- */
html body #svCalendar .sv-cal__month,
html body #svCalendar .sv-cal__month em,
html body #svCalendar .sv-cal__month-item {
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* ---- Agenda : croix sur les jours passes sans evenement ---- */
#svCalendar .sv-cal__cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
#svCalendar .sv-cal__cross line {
  stroke: rgba(150, 185, 235, .45);
  stroke-width: 1px;
}
#svCalendar .sv-cal__cell .sv-cal__num {
  position: relative;
  z-index: 1;
}

/* ---- Widget agenda : region a cote du titre ---- */
.sv-calpop__name-row .sv-calpop__region {
  flex: none;
  font-size: 12.5px;
  line-height: 1;
}

/* ---- Page bloquee tant qu'un widget est affiche ---- */
html.sv-scroll-locked,
html.sv-scroll-locked body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
.sv-calpop__list,
html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-desc {
  overscroll-behavior: contain;
}

/* ---- Concept : rotation des cases en fondu simple (plus de retournement) ---- */
html body #sv-concept-section .sv-concept__item.is-swap-out {
  animation: svConceptFadeOut .62s ease both !important;
  transform: none !important;
}
html body #sv-concept-section .sv-concept__item.is-swap-in {
  animation: svConceptFadeIn .7s ease both !important;
  transform: none !important;
}
@keyframes svConceptFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes svConceptFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html body #sv-concept-section .sv-concept__item.is-swap-out,
  html body #sv-concept-section .sv-concept__item.is-swap-in {
    animation: none !important;
  }
}

/* ---- Concept : vignettes plus grasses ---- */
html body #sv-concept-section .sv-concept__item-kind {
  font-weight: 700 !important;
}

/* ---- Concept : texte plein (sans fondu), couleur de la vignette ----
   Les cases sans vignette (??? et +) restent inchangees. */
html body #sv-concept-section .sv-concept__item.sv-concept--competitive .sv-concept__item-title,
html body #sv-concept-section .sv-concept__item.sv-concept--competitive .sv-concept__item-desc {
  color: #3f8ee0 !important;
  -webkit-text-fill-color: #3f8ee0 !important;
  opacity: 1 !important;
}
html body #sv-concept-section .sv-concept__item.sv-concept--fun .sv-concept__item-title,
html body #sv-concept-section .sv-concept__item.sv-concept--fun .sv-concept__item-desc {
  color: #c9b183 !important;
  -webkit-text-fill-color: #c9b183 !important;
  opacity: 1 !important;
}

/* ---- Items event : la banniere reste entiere a l'interieur du contour noir ----
   Le contour noir (5 px) entoure la banniere au lieu de la recouvrir.
   La taille de la carte ne change pas et l'image reste exactement en 16:9 :
   le retrait est pris dans la boite de la banniere (meme couleur que le contour). */
html body #eventScroll > .sv-event-item .sv-event-item__banner {
  box-sizing: border-box !important;
  padding: 5px 5px 0 5px !important;
  background: rgb(2, 7, 19) !important;
}
html body #eventScroll > .sv-event-item .sv-event-item__banner > img,
html body #eventScroll > .sv-event-item .sv-event-item__banner .sv-event-item__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}
@media (min-width: 1300.02px) {
  /* PC : banniere a gauche, le contour noir est en haut et a gauche.
     Aucun trait entre la banniere et le conteneur (cote droit colle). */
  html body #eventScroll > .sv-event-item .sv-event-item__banner {
    padding: 5px 0 0 5px !important;
  }
}

/* ---- Items event tablette / mobile : contour du bas de la meme couleur
   que la bande voisine (comme sur PC), couleur lue en direct. ---- */
@media (max-width: 1300px) {
  html body .sv-event-item > .sv-event-item__band-edge {
    background-image:
      none,
      none,
      linear-gradient(180deg,
        color-mix(in srgb, white 9%, var(--ev-band-dark, #1a4e90)) 0%,
        var(--ev-band-dark, #1a4e90) 100%) !important;
    background-size:
      100% 0px,
      0px 0px,
      100% calc(var(--be-ft-h, 0px) + 2px) !important;
    background-position: left 0 bottom -2px, left 0 bottom -2px, left 0 bottom -2px !important;
  }
}

/* ---- Barre de navigation des items event : meme style que sur PC ---- */
@media (max-width: 1300px) {
  html body #eventNav .sv-cscroll .sv-cscroll__track {
    background: linear-gradient(135deg, rgb(18, 58, 107) 0%, rgb(13, 45, 88) 100%) !important;
    filter: drop-shadow(rgba(0, 0, 12, .45) 0 2px 6px) !important;
    -webkit-clip-path: polygon(0 0, 5.6px 50%, 0 100%, 100% 100%, calc(100% - 5.6px) 50%, 100% 0) !important;
    clip-path: polygon(0 0, 5.6px 50%, 0 100%, 100% 100%, calc(100% - 5.6px) 50%, 100% 0) !important;
  }
  html body #eventNav .sv-cscroll .sv-cscroll__fill {
    background: linear-gradient(90deg, rgb(39, 108, 194) 0%, rgb(31, 95, 176) 100%) !important;
    -webkit-clip-path: polygon(0 0, 5.6px 50%, 0 100%, 100% 100%, 100% 0) !important;
    clip-path: polygon(0 0, 5.6px 50%, 0 100%, 100% 100%, 100% 0) !important;
  }
  html body #eventNav .sv-cscroll .sv-cscroll__thumb {
    background: linear-gradient(180deg, rgb(47, 120, 214) 0%, rgb(31, 95, 176) 100%) !important;
    filter: drop-shadow(rgba(16, 65, 130, .65) 0 2px 5px) !important;
    -webkit-clip-path: polygon(0 0, 5.6px 50%, 0 100%, 100% 100%, calc(100% - 5.6px) 50%, 100% 0) !important;
    clip-path: polygon(0 0, 5.6px 50%, 0 100%, 100% 100%, calc(100% - 5.6px) 50%, 100% 0) !important;
  }
}
/* >>> VELRA-V10 END <<< */

/* >>> VELRA-V11 START <<< */
/* ---- Hero : onglets conserves, sans barre de defilement visible ---- */
html body .sv-hero .sv-tabs {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html body .sv-hero .sv-tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
@media (max-width: 600px) {
  html body .sv-hero .sv-tabs { padding-left: 6px; padding-right: 6px; }
  html body .sv-hero .sv-tab { padding-left: clamp(8px, 2.6vw, 14px); padding-right: clamp(8px, 2.6vw, 14px); }
}

/* ---- Cometes : traine courbe (segments qui suivent le chemin) ---- */
.comet.comet--curved > i:first-child {
  display: none !important;
}
.comet > i.comet__seg {
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 68%, transparent 100%);
  offset-anchor: 50% 50%;
  offset-rotate: auto;
  filter: none;
  mix-blend-mode: normal;
  z-index: 0;
}
/* >>> VELRA-V11 END <<< */

/* >>> VELRA-V12 START (10/10/2026) <<< */
/* Hero : grand VELRA en trait fin derriere le titre, comme sur l'accueil.
   Version epuree : pas de halo, traits fins, discrets sous le texte. */
.sv-hero__content > .sv-hero__velra {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(60vw, 860px);
  transform: translate(-50%, -54%);
  pointer-events: none;
  --sv-velra-sw: 4.5px;
}
.sv-hero__velra > .sv-hero__velra-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.sv-hero__velra path {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 8;
}
.sv-hero__velra-lines path {
  stroke: url(#svHeroVelraStroke);
  stroke-width: var(--sv-velra-sw);
  opacity: .5;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: svHeroVelraDraw 2.2s cubic-bezier(.65, 0, .35, 1) forwards;
  animation-delay: calc(.35s + var(--i, 0) * .14s);
}
.sv-hero__velra-spark {
  opacity: 0;
  animation: svHeroVelraShow 1.2s ease 2.9s forwards;
}
.sv-hero__velra-spark path {
  stroke: #a78bfa;
  stroke-width: calc(var(--sv-velra-sw) * 1.6);
  opacity: .85;
  stroke-dasharray: .06 .94;
  stroke-dashoffset: 1;
  animation: svHeroVelraSpark 7s linear infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@keyframes svHeroVelraDraw { to { stroke-dashoffset: 0; } }
@keyframes svHeroVelraShow { to { opacity: 1; } }
@keyframes svHeroVelraSpark { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 1300px) {
  .sv-hero__content > .sv-hero__velra { width: 80vw; }
}
@media (max-width: 600px) {
  .sv-hero__content > .sv-hero__velra { width: 94vw; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-hero__velra-lines path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .sv-hero__velra-spark { display: none; }
}
/* >>> VELRA-V12 END <<< */


/* >>> VELRA-V13 START (10/10/2026) <<< */
/* En vedette : icone de survol une carte sur deux en beige
   (1re bleue, 2e beige, 3e bleue...). */
#featuredTrack > .sv-feat-card:nth-child(even) .sv-feat-card__shine::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;
}
#featuredTrack > .sv-feat-card:nth-child(even) .sv-feat-card__shine::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;
}
/* >>> VELRA-V13 END <<< */


/* VELRA-V14-ITEM-PC retire (v30) : items event tablette/mobile = design d'origine (cm.css). */

/* >>> VELRA-V14-CONCEPT-PC START <<<
   Cases concept : meme design que sur PC sur tous les formats (les
   anciennes regles mobile ont ete retirees) + titres agrandis. */
html body #sv-concept-section .sv-concept__panel > .sv-concept__item > .sv-concept__item-title {
  font-size: clamp(30px, 3.3vw, 52px) !important;
  line-height: 1.02 !important;
  max-height: 2.1em !important;
}
html body #sv-concept-section .sv-concept__panel .sv-concept__empty-title {
  font-size: clamp(25px, 2.7vw, 42px) !important;
}
html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-title {
  font-size: clamp(36px, 4.2vw, 66px) !important;
  line-height: 1.02 !important;
}
/* >>> VELRA-V14-CONCEPT-PC END <<< */

/* >>> VELRA-V14-BAND-FADE START <<<
   Items event (tous formats) :
   - bande 1 (bas) : a droite, elle prend en fondu la couleur de la bande 2 ;
   - bande 2 (date / type) : a gauche, elle prend en fondu la couleur de la
     bande 3 (titre / description) — calque .sv-event-item__b2fade pose par JS. */
/* v30 : uniquement sur PC — tablette / mobile = design d'origine (cm.css). */
@media (min-width: 1300.02px) {
html body .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::after,
html body .sv-events__scroll > .sv-event-item .sv-event-item__footer::after {
  background-image: linear-gradient(to right,
    transparent 0,
    transparent calc(100% - 130px),
    var(--ev-band-dark, #1a4e90) calc(100% - 11px),
    var(--ev-band-dark, #1a4e90) 100%) !important;
}
html body .sv-events__scroll > .sv-event-item .sv-event-item__footer { isolation: isolate; }
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > span.sv-event-item__b2fade.sv-event-item__b2fade {
  position: absolute !important;
  display: block !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: var(--ev-b1h, 18px) !important;
  width: 24% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  order: -2 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
}
}
@media (max-width: 1300px) {
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > span.sv-event-item__b2fade.sv-event-item__b2fade { display: none !important; }
}
/* >>> VELRA-V14-BAND-FADE END <<< */


/* Agenda: fine crosses softly disappear towards the four corners.
   Only the decorative SVG is masked; dates and events remain untouched. */
html body #svCalendar .sv-cal__cross {
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 28%, rgba(0,0,0,.55) 62%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 0%, #000 28%, rgba(0,0,0,.55) 62%, transparent 100%);
}
html body #svCalendar .sv-cal__cross line {
  stroke: rgba(150, 185, 235, .22);
  stroke-width: 1px;
}

/* Presentation event cards: stable blue surfaces and readable pale text.
   Scoped to placeholders only; real event imagery/colours are untouched. */
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] {
  --ev-band-dark: #244e82 !important;
  --ev-band-deep: #102747 !important;
  --ev-band-left: #315e91 !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__content {
  background: linear-gradient(135deg, #173860, #102747) !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__title {
  color: #f3f7ff !important;
  -webkit-text-fill-color: currentColor !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__desc {
  color: #c0d3eb !important;
  -webkit-text-fill-color: currentColor !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__footer :is(.sv-event-item__time, .sv-event-item__date, .sv-event-item__day, .sv-event-item__month, .sv-event-item__year),
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__footer :is(.sv-event-item__time, .sv-event-item__date, .sv-event-item__day, .sv-event-item__month, .sv-event-item__year) *,
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__media-footer .sv-event-item__countdown,
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__media-footer .sv-event-item__countdown * {
  color: #e8f2ff !important;
  -webkit-text-fill-color: #e8f2ff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}


/* >>> VELRA-V15-20261013 START <<<
   - Concept : titres des cases en degrade metallique sobre, sans halo ;
     description en couleur neutre (meme teinte que « ??? ») ;
   - Calendrier (widget) : plus de contour autour des vignettes event
     (pastilles des jours + vignettes de la fenetre du jour) ;
   - En vedette : le trait anime de gauche DESCEND comme celui de droite ;
   - Items event : minuteur et date / heure plus clairs. */

/* ---- Concept : titres en degrade metallique sobre (sans halo) ----
   Degrade clair -> couleur du type, sans glow ni contour : propre et
   accorde au reste de la page. */
html body #sv-concept-section .sv-concept__item.sv-concept--competitive.sv-concept--competitive .sv-concept__item-title,
html body #sv-concept-section .sv-concept__item.sv-concept--fun.sv-concept--fun .sv-concept__item-title {
  color: #9fcbff !important;
  background-image: linear-gradient(180deg, #c9dffb 0%, #a8ccf7 40%, #7fb6f2 70%, #5e9ee6 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
html body #sv-concept-section .sv-concept__item.sv-concept--fun.sv-concept--fun .sv-concept__item-title {
  color: #a78bfa !important;
  background-image: linear-gradient(180deg, #ecdfc3 0%, #dfcda8 40%, #cdb88d 70%, #b9a173 100%) !important;
}
/* Description : couleur neutre, la meme que les cases « ??? ». */
html body #sv-concept-section .sv-concept__item.sv-concept--competitive.sv-concept--competitive .sv-concept__item-desc,
html body #sv-concept-section .sv-concept__item.sv-concept--fun.sv-concept--fun .sv-concept__item-desc {
  color: rgba(170, 205, 255, .52) !important;
  -webkit-text-fill-color: rgba(170, 205, 255, .52) !important;
  opacity: 1 !important;
}

/* ---- Calendrier : les chips des jours GARDENT leur trait gauche (v16) ;
   seules les vignettes de TYPE (Tournoi / Défi / Événement) de la fenêtre
   du jour perdent leur contour. ---- */
html body .sv-calpop .sv-cal-type,
html body .sv-calpop .sv-cal-type.sv-cal-type--tournoi,
html body .sv-calpop .sv-cal-type.sv-cal-type--event,
html body .sv-calpop .sv-cal-type.sv-cal-type--concours,
html body .sv-cal-type,
html body .sv-cal-type.sv-cal-type--tournoi,
html body .sv-cal-type.sv-cal-type--event,
html body .sv-cal-type.sv-cal-type--concours {
  outline: 0 !important;
  outline-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- En vedette : le trait de gauche descend comme celui de droite ---- */
.sv-featured__rail--left .sv-featured__notch {
  animation:
    svFeatNotchDown var(--n-dur, 12s) linear var(--n-delay, 0s) infinite,
    svFeatNotchTaper var(--n-dur, 12s) ease-in-out var(--n-delay, 0s) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sv-featured__rail--left .sv-featured__notch { animation: none !important; }
}

/* ---- Items event : heure, date et minuteur — MEME formule qu'a l'origine
   (color-mix sur la couleur de la bande de l'item), mais eclaircie vers le
   blanc au lieu d'etre foncee vers le noir : adaptee au fond de chaque item. ---- */
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer .sv-event-item__time *,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer :is(.sv-event-item__date, .sv-event-item__day, .sv-event-item__month, .sv-event-item__year),
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer :is(.sv-event-item__date, .sv-event-item__day, .sv-event-item__month, .sv-event-item__year) *,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item:hover .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item:hover .sv-event-item__footer :is(.sv-event-item__date, .sv-event-item__day, .sv-event-item__month, .sv-event-item__year) {
  color: color-mix(in srgb, var(--ev-band-dark, #1a4e90) 42%, white 58%) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__media-footer .sv-event-item__countdown,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__media-footer .sv-event-item__countdown *,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__media-footer .countdown__n {
  color: color-mix(in srgb, var(--ev-band-left, #35679a) 42%, white 58%) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__countdown.countdown--ended,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__countdown.countdown--ended * {
  color: color-mix(in srgb, var(--ev-band-left, #35679a) 55%, white 45%) !important;
  -webkit-text-fill-color: currentColor !important;
}
/* Items de presentation : meme regle (couleurs des bandes forcees). */
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__footer :is(.sv-event-item__time, .sv-event-item__date, .sv-event-item__day, .sv-event-item__month, .sv-event-item__year),
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__footer :is(.sv-event-item__time, .sv-event-item__date, .sv-event-item__day, .sv-event-item__month, .sv-event-item__year) * {
  color: color-mix(in srgb, #244e82 42%, white 58%) !important;
  -webkit-text-fill-color: currentColor !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__media-footer .sv-event-item__countdown,
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__media-footer .sv-event-item__countdown * {
  color: color-mix(in srgb, #315e91 42%, white 58%) !important;
  -webkit-text-fill-color: currentColor !important;
}
/* >>> VELRA-V15-20261013 END <<< */


/* >>> VELRA-V16-20261014 START <<<
   - Concept : titres des cases en degrade plus proche de leur couleur du
     bas (plus de blanc en haut) ;
   - Concept : bouton « Retour » dans la case « Propose ton idée » ;
   - Items event : minuteur plus sombre (toujours dans la teinte de la
     bande) ; heure dans la couleur du contour de l'item. */

/* ---- Concept : degrade de titre, tons proches du bas ---- */
html body #sv-concept-section .sv-concept__item.sv-concept--competitive.sv-concept--competitive .sv-concept__item-title {
  color: #6aa8ec !important;
  background-image: linear-gradient(180deg, #8dbdf3 0%, #78b0ef 45%, #5e9ee6 100%) !important;
}
html body #sv-concept-section .sv-concept__item.sv-concept--fun.sv-concept--fun .sv-concept__item-title {
  color: #c6ae82 !important;
  background-image: linear-gradient(180deg, #d6c098 0%, #c8b085 45%, #b39a6b 100%) !important;
}

/* ---- Concept : bouton « Retour » (case idée) ---- */
#sv-concept-section .sv-concept-zoom__row { justify-content: flex-start; }
#sv-concept-section .sv-concept-zoom__status { flex: 1 1 auto; text-align: right; }
#sv-concept-section .sv-concept-zoom__back {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: 0; border-radius: 0;
  background: #13284f;
  color: #cfe2ff;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
  -webkit-clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}
#sv-concept-section .sv-concept-zoom__back:hover { background: #1b3768; color: #ffffff; }
#sv-concept-section .sv-concept-zoom__back:focus-visible { outline: 2px solid #8ec3ff; outline-offset: 2px; }
#sv-concept-section .sv-concept-zoom__back svg { flex: 0 0 auto; }
@media (max-width: 600px) {
  #sv-concept-section .sv-concept-zoom__back { height: 34px; padding: 0 12px 0 9px; font-size: 12px; }
}

/* ---- Items event : minuteur plus sombre, adapte au fond ----
   Meme teinte que la bande (--ev-band-left), assombrie vers le bleu nuit. */
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__media-footer .sv-event-item__countdown,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__media-footer .sv-event-item__countdown *,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__media-footer .countdown__n {
  color: color-mix(in srgb, var(--ev-band-left, #35679a) 38%, #020a1a 62%) !important;
  -webkit-text-fill-color: currentColor !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__countdown.countdown--ended,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__countdown.countdown--ended * {
  color: color-mix(in srgb, var(--ev-band-left, #35679a) 30%, #020a1a 70%) !important;
  -webkit-text-fill-color: currentColor !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__media-footer .sv-event-item__countdown,
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__media-footer .sv-event-item__countdown * {
  color: color-mix(in srgb, #315e91 38%, #020a1a 62%) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ---- Items event : heure = couleur du contour de l'item (--ev-c2,
   couleur tiree de la banniere, comme le cadre anime). ---- */
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer .sv-event-item__time *,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item:hover .sv-event-item__footer .sv-event-item__time {
  color: color-mix(in srgb, var(--ev-c2, #5aa6f0) 82%, white 18%) !important;
  -webkit-text-fill-color: currentColor !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item[data-presentation="1"] .sv-event-item__footer .sv-event-item__time * {
  color: color-mix(in srgb, var(--ev-c2, #5aa6f0) 82%, white 18%) !important;
  -webkit-text-fill-color: currentColor !important;
}
/* >>> VELRA-V16-20261014 END <<< */

/* >>> VELRA-V17-20261015 START <<<
   - Concept : beige -> violet (titre + vignette « Amusant ») ; vignettes
     plus longues (texte decale a droite, hors du fondu gauche) ; cases
     sans transparence ; titre / description qui grandissent et
     retrecissent progressivement a l'ouverture / fermeture.
   - Items event : contours coupes (haut-droite / bas-gauche) d'epaisseur
     constante, cadre noir ET cadre anime ; pointes du bas plus longues et
     fixes au survol ; heure = version claire de la couleur de la bande. */

/* ---- Concept : titre « Amusant » violet ---- */
html body #sv-concept-section .sv-concept__item.sv-concept--fun.sv-concept--fun .sv-concept__item-title,
html body #sv-concept-section .sv-concept > .sv-concept-zoom.sv-concept--fun.sv-concept--fun .sv-concept__item-title {
  color: #b9a4fc !important;
  background-image: linear-gradient(180deg, #ddd2ff 0%, #c6b4fd 40%, #a78bfa 72%, #8b6cf0 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ---- Concept : vignettes plus longues, texte hors du fondu gauche ---- */
html body #sv-concept-section .sv-concept__item-kind.is-competitive,
html body #sv-concept-section .sv-concept__item-kind.is-fun {
  padding-left: 30px !important;
  padding-right: 34px !important;
}
html body #sv-concept-section .sv-concept__item-kind.is-fun {
  color: #1d1240 !important;
  -webkit-text-fill-color: currentColor !important;
  background: linear-gradient(90deg,
    rgba(167, 139, 250, 0) 0%,
    rgba(167, 139, 250, 0.66) 26%,
    #9b7df5 100%) !important;
}
html body #sv-concept-section .sv-concept__item-kind.is-competitive {
  background: linear-gradient(90deg,
    rgba(116, 187, 255, 0) 0%,
    rgba(116, 187, 255, 0.62) 26%,
    #3f8ee0 100%) !important;
}
html body #sv-concept-section .sv-concept__item-kind.is-fun::before {
  background: linear-gradient(90deg,
    rgba(167, 139, 250, 0) 0%,
    rgba(167, 139, 250, 0.35) 30%,
    rgba(155, 125, 245, 0.86) 70%,
    rgba(139, 108, 240, 0.98) 100%) !important;
}

/* ---- Concept : cases opaques (plus de fond transparent) ---- */
html body #sv-concept-section .sv-concept__panel > .sv-concept__item,
html body #sv-concept-section .sv-concept__panel > .sv-concept__empty,
html body #sv-concept-section .sv-concept > .sv-concept-zoom {
  background-color: #0a1c34 !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---- Concept : agrandissement / retrecissement progressif du texte ---- */
html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-title,
html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-desc {
  transition:
    font-size .42s cubic-bezier(.2, .8, .2, 1),
    line-height .42s cubic-bezier(.2, .8, .2, 1),
    margin .42s cubic-bezier(.2, .8, .2, 1),
    padding .42s cubic-bezier(.2, .8, .2, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-title,
  html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-desc { transition: none !important; }
}

/* ---- Items event : coins coupes d'epaisseur constante ----
   Pour une bordure d'epaisseur t, le point interieur de la diagonale est
   decale de t x (racine(2) - 1) : la diagonale a la meme epaisseur que
   les cotes droits. Cadre noir = 5 px, cadre anime = 2 px. */
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__frame,
html body .sv-events__scroll > .sv-event-item .sv-event-item__frame {
  clip-path: polygon(evenodd,
    0 0, calc(100% - var(--cut-lg, 22px)) 0, 100% var(--cut-lg, 22px), 100% 100%,
    var(--ev-cut-sync, 22px) 100%, 0 calc(100% - var(--ev-cut-sync, 22px)), 0 0,
    5px 5px,
    5px calc(100% - var(--ev-cut-sync, 22px) - 2.071px),
    calc(var(--ev-cut-sync, 22px) + 2.071px) calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) calc(var(--cut-lg, 22px) + 2.071px),
    calc(100% - var(--cut-lg, 22px) - 2.071px) 5px,
    5px 5px) !important;
  -webkit-clip-path: polygon(evenodd,
    0 0, calc(100% - var(--cut-lg, 22px)) 0, 100% var(--cut-lg, 22px), 100% 100%,
    var(--ev-cut-sync, 22px) 100%, 0 calc(100% - var(--ev-cut-sync, 22px)), 0 0,
    5px 5px,
    5px calc(100% - var(--ev-cut-sync, 22px) - 2.071px),
    calc(var(--ev-cut-sync, 22px) + 2.071px) calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    calc(100% - 5px) calc(var(--cut-lg, 22px) + 2.071px),
    calc(100% - var(--cut-lg, 22px) - 2.071px) 5px,
    5px 5px) !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item::before,
html body #eventScroll.sv-events__scroll > .sv-event-item:hover::before,
html body .sv-events__scroll > .sv-event-item::before {
  clip-path: polygon(evenodd,
    0 0, calc(100% - var(--cut-lg, 22px)) 0, 100% var(--cut-lg, 22px), 100% 100%,
    var(--ev-cut-sync, 22px) 100%, 0 calc(100% - var(--ev-cut-sync, 22px)), 0 0,
    2px 2px,
    2px calc(100% - var(--ev-cut-sync, 22px) - .828px),
    calc(var(--ev-cut-sync, 22px) + .828px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) calc(var(--cut-lg, 22px) + .828px),
    calc(100% - var(--cut-lg, 22px) - .828px) 2px,
    2px 2px) !important;
  -webkit-clip-path: polygon(evenodd,
    0 0, calc(100% - var(--cut-lg, 22px)) 0, 100% var(--cut-lg, 22px), 100% 100%,
    var(--ev-cut-sync, 22px) 100%, 0 calc(100% - var(--ev-cut-sync, 22px)), 0 0,
    2px 2px,
    2px calc(100% - var(--ev-cut-sync, 22px) - .828px),
    calc(var(--ev-cut-sync, 22px) + .828px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) calc(var(--cut-lg, 22px) + .828px),
    calc(100% - var(--cut-lg, 22px) - .828px) 2px,
    2px 2px) !important;
}

/* ---- Items event : pointes du bas plus longues (meme hauteur) et
   immobiles au survol ---- */
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__triangles,
html body #eventScroll.sv-events__scroll > .sv-event-item:hover .sv-event-item__footer > .sv-event-item__triangles {
  width: 96px !important;
  flex-basis: 96px !important;
  height: 12px !important;
  gap: 0 !important;
  transition: none !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__triangles > i,
html body #eventScroll.sv-events__scroll > .sv-event-item:hover .sv-event-item__footer > .sv-event-item__triangles > i {
  width: 48px !important;
  flex: 0 0 48px !important;
  height: 12px !important;
  transform: none !important;
  transition: none !important;
}

/* ---- Items event : heure = version plus claire de la couleur de la
   bande de la date ---- */
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer .sv-event-item__time *,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item:hover .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item[data-presentation="1"] .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item[data-presentation="1"] .sv-event-item__footer .sv-event-item__time * {
  color: #e8f2ff !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer > .sv-event-item__time {
  background: color-mix(in srgb, var(--ev-band-dark, #244e82) 74%, white 26%) !important;
  padding: 3px 7px 2px !important;
  line-height: 1 !important;
  height: auto !important;
}
/* >>> VELRA-V17-20261015 END <<< */

/* >>> VELRA-V30 START (16/10/2026) <<< */
/* ---- Concept : elements remontes sous le titre / description ---- */
html body #sv-concept-section .sv-concept__head {
  margin-bottom: clamp(18px, 2.2vw, 40px) !important;
}

/* ---- Concept : contour des cases « Amusant » en violet ---- */
html body #sv-concept-section .sv-concept__panel > .sv-concept__item {
  --sv-case-line: rgba(94, 170, 255, 0.55);
}
html body #sv-concept-section .sv-concept__panel > .sv-concept__item.sv-concept--fun,
html body #sv-concept-section .sv-concept__panel > .sv-concept__item.sv-concept--fun.is-hov,
html body #sv-concept-section .sv-concept__panel > .sv-concept__item.sv-concept--fun:hover,
html body #sv-concept-section .sv-concept > .sv-concept-zoom.sv-concept--fun {
  --sv-case-line: rgba(167, 139, 250, 0.7);
  outline-color: rgba(167, 139, 250, 0.7) !important;
}
html body #sv-concept-section .sv-concept > .sv-concept-zoom {
  --sv-case-line: rgba(94, 170, 255, 0.55);
}
html body #sv-concept-section .sv-concept > .sv-concept-zoom.sv-concept--fun {
  --sv-case-line: rgba(167, 139, 250, 0.7);
}

/* ---- Concept : trait pointille sous le titre (longueur du titre,
   meme epaisseur / pointilles / couleur que le contour de la case) ---- */
html body #sv-concept-section .sv-concept__panel > .sv-concept__item > .sv-concept__item-title,
html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-title {
  overflow: visible !important;
}
html body #sv-concept-section .sv-concept__panel > .sv-concept__item > .sv-concept__item-title::after,
html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-title::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -0.14em !important;
  width: var(--sv-title-w, 0px) !important;
  height: 0 !important;
  border: 0 !important;
  border-top: 1px dashed var(--sv-case-line, rgba(94, 170, 255, 0.55)) !important;
  background: none !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  -webkit-text-fill-color: initial !important;
}

/* ---- Concept : plus de « saut » du texte des vignettes apres le survol
   (la case reste sur son calque : rendu du texte identique pendant et
   apres l'effet scale). ---- */
html body #sv-concept-section .sv-concept__panel > .sv-concept__item {
  will-change: transform, scale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- Case TON IDÉE : Retour toute la largeur a gauche, Envoyer toute
   la largeur a droite ; le statut passe au-dessus de la rangee ---- */
#sv-concept-section .sv-concept-zoom__form { position: relative; }
#sv-concept-section .sv-concept-zoom--form .sv-concept-zoom__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
}
#sv-concept-section .sv-concept-zoom--form .sv-concept-zoom__back,
#sv-concept-section .sv-concept-zoom--form .sv-concept-zoom__send {
  width: 100% !important;
  justify-content: center;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
#sv-concept-section .sv-concept-zoom--form .sv-concept-zoom__back { grid-column: 1; grid-row: 1; }
#sv-concept-section .sv-concept-zoom--form .sv-concept-zoom__send { grid-column: 2; grid-row: 1; }
#sv-concept-section .sv-concept-zoom--form .sv-concept-zoom__status {
  position: absolute;
  right: 12px;
  bottom: calc(40px + 10px + 8px);
  max-width: calc(100% - 24px);
  text-align: right;
  pointer-events: none;
}
@media (max-width: 600px) {
  #sv-concept-section .sv-concept-zoom--form .sv-concept-zoom__status { bottom: calc(34px + 8px + 6px); }
}

/* ---- Case TON IDÉE : le contenu disparait en fondu a la fermeture ---- */
html body #sv-concept-section .sv-concept > .sv-concept-zoom--form > * {
  transition: opacity .26s ease !important;
}
html body #sv-concept-section .sv-concept > .sv-concept-zoom.sv-concept-zoom--form.is-fading > * {
  opacity: 0 !important;
}

/* ---- Calendrier : nom du mois suivant au centre des cases du mois d'apres ---- */
html body #svCalendar .sv-cal__cell { position: relative; }
html body #svCalendar .sv-cal__next-month {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: 'Bebas Neue', var(--font-display, sans-serif);
  font-size: clamp(12px, 1.25vw, 20px);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(142, 195, 255, 0.7);
  pointer-events: none;
}
html body #svCalendar .sv-cal__cell .sv-cal__chip,
html body #svCalendar .sv-cal__cell .sv-cal__more,
html body #svCalendar .sv-cal__cell .sv-cal__dots { position: relative; z-index: 1; }
@media (max-width: 600px) {
  html body #svCalendar .sv-cal__next-month { font-size: 9px; letter-spacing: .04em; }
}

/* ---- Calendrier : plus d'ombre en bas a gauche du fond ---- */
html body .sv-section--calendar {
  background:
    radial-gradient(ellipse 55% 60% at 12% 22%, rgba(26, 67, 128, 0.3), transparent 62%),
    radial-gradient(ellipse 50% 55% at 88% 100%, rgba(15, 59, 116, 0.32), transparent 62%),
    radial-gradient(ellipse 50% 55% at 12% 100%, rgba(15, 59, 116, 0.32), transparent 62%),
    linear-gradient(180deg, #030814 0%, #051530 48%, #051530 72%, #04102a 100%) !important;
}
/* v31 : pas de selection de texte quand on clique vite sur les cases */
html body #sv-concept-section .sv-concept__panel > .sv-concept__item,
html body #sv-concept-section .sv-concept__panel > .sv-concept__empty {
  -webkit-user-select: none;
  user-select: none;
}
/* >>> VELRA-V30 END <<< */

/* >>> VELRA-V33 START (17/10/2026) <<< */

/* ---- Items event : les 2 pointes (spikes) de la bande du bas sont
   retirees (le JS ne les cree plus ; securite si un ancien rendu reste). */
html body .sv-event-item .sv-event-item__triangles,
html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer > .sv-event-item__triangles,
html body #eventScroll.sv-events__scroll > .sv-event-item:hover .sv-event-item__footer > .sv-event-item__triangles,
html body #eventScroll.sv-events__scroll > .sv-event-item.is-hov .sv-event-item__footer > .sv-event-item__triangles {
  display: none !important;
}

@media (min-width: 1300.02px) {
  /* ---- Items event (PC) : le trait de perspective du haut se termine en
     pente a gauche, a cote de la banniere (meme angle 45 deg que sa fin a
     droite). La pente fait exactement l'epaisseur du trait. */
  html body #eventScroll.sv-events__scroll > .sv-event-item > .sv-event-item__content::before,
  html body #eventScroll.sv-events__scroll > .sv-event-item:hover > .sv-event-item__content::before,
  html body #eventScroll.sv-events__scroll > .sv-event-item.is-hov > .sv-event-item__content::before {
    -webkit-clip-path: polygon(clamp(7px, 0.75vw, 11px) 0, 100% 0, 100% 100%, 0 100%, 0 clamp(7px, 0.75vw, 11px)) !important;
    clip-path: polygon(clamp(7px, 0.75vw, 11px) 0, 100% 0, 100% 100%, 0 100%, 0 clamp(7px, 0.75vw, 11px)) !important;
  }

  /* ---- Items event (PC) : la perspective noire de droite, en bas (a cote
     de la bande date / type), etait posee DEUX fois (tranche du contenu +
     tranche du footer) -> plus foncee. Seule la tranche continue du
     contenu reste : meme couleur et meme opacite (noir 0.46) du haut
     jusqu'en bas. */
  html body #eventScroll.sv-events__scroll > .sv-event-item .sv-event-item__footer::before,
  html body #eventScroll.sv-events__scroll > .sv-event-item:hover .sv-event-item__footer::before,
  html body #eventScroll.sv-events__scroll > .sv-event-item.is-hov .sv-event-item__footer::before,
  html body .sv-events__scroll > .sv-event-item.sv-event-layout-v19 .sv-event-item__footer::before {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}

/* ---- Concept : la carte d'origine reste masquee tant que la case
   agrandie est presente (ouverture, ouverte, fermeture). Elle ne
   depasse plus autour de la case agrandie (plus de double contour). */
html body #sv-concept-section .sv-concept__panel > .sv-concept__item.is-zoom-source,
html body #sv-concept-section .sv-concept__panel > .sv-concept__empty.is-zoom-source,
html body #sv-concept-section .sv-concept__panel > .sv-concept__item.is-zoom-source.is-hov,
html body #sv-concept-section .sv-concept__panel > .sv-concept__empty.is-zoom-source.is-hov {
  opacity: 0 !important;
}

/* ---- Concept : la case agrandie a le MEME survol que les cases
   normales (scale 1.008, 420 ms, cubic-bezier(0.22, 1, 0.36, 1)),
   anime a l'entree comme a la sortie du curseur. */
html body #sv-concept-section .sv-concept > .sv-concept-zoom.sv-concept-zoom {
  scale: 1;
  transform-origin: center center !important;
  transition:
    left .42s cubic-bezier(.2, .8, .2, 1),
    top .42s cubic-bezier(.2, .8, .2, 1),
    width .42s cubic-bezier(.2, .8, .2, 1),
    height .42s cubic-bezier(.2, .8, .2, 1),
    outline-color .35s ease,
    scale 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body #sv-concept-section .sv-concept > .sv-concept-zoom.sv-concept-zoom.is-hov {
    scale: 1.008;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #sv-concept-section .sv-concept > .sv-concept-zoom.sv-concept-zoom {
    transition: none !important;
  }
}

/* ---- Calendrier : le nom du mois precedent est ecrit au centre des
   cases du mois precedent, exactement comme pour le mois suivant
   (meme element .sv-cal__next-month pose par communaute.js). */
/* >>> VELRA-V33 END <<< */

/* >>> VELRA-V34 START (17/10/2026) <<< */

/* ---- Calendrier : plus aucune case du mois precedent / suivant ----
   communaute.js ne pose plus qu'un emplacement vide (.sv-cal__blank) avant
   le 1er et apres le dernier jour : rien n'est dessine, chaque jour reste
   sous son nom de jour. */
html body #svCalendar .sv-cal__blank {
  min-width: 0;
  background: none !important;
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* ---- Concept : la case agrandie a le meme rendu de texte que la carte
   d'origine (la vignette de type ne change pas d'aspect a l'agrandissement ;
   sa taille est en plus verrouillee par communaute.js). ---- */
html body #sv-concept-section .sv-concept > .sv-concept-zoom {
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
html body #sv-concept-section .sv-concept > .sv-concept-zoom .sv-concept__item-kind {
  transition: none !important;
}
/* La description de la case agrandie ne retient plus la molette : une fois
   en bas (ou si elle ne defile pas), la PAGE defile normalement. */
html body #sv-concept-section .sv-concept > .sv-concept-zoom > .sv-concept__item-desc {
  overscroll-behavior: auto !important;
}

/* ---- En vedette : trait anime gauche / droite ----
   1) Le trait et le contour des rectangles sont dessines de la MEME
      facon (bordure 1px, meme couleur) : meme epaisseur a l'ecran quel que
      soit le zoom / l'ecran, un seul et unique trait.
   2) Les rectangles se deplacent en « top » (et plus en transform) : ils
      restent cales au pixel pres sur le trait, plus de petit liseré.
   3) En haut, les rectangles arrivent DEJA a leur taille (plus
      d'agrandissement) ; ils se retractent toujours en bas.
   4) Survol d'une vignette au bord : le trait (et la zone des
      rectangles) remonte avec la vignette (--feat-lift-l / -r, JS). */
html body .sv-section--featured .sv-featured__viewport::before,
html body .sv-section--featured .sv-featured__viewport::after {
  width: 0 !important;
  background: none !important;
  border: 0 !important;
  border-left: 1px solid rgba(94, 170, 255, 0.35) !important;
  box-sizing: content-box !important;
}
html body .sv-section--featured .sv-featured__viewport::before { top: calc(22px - var(--feat-lift-l, 0px)) !important; }
html body .sv-section--featured .sv-featured__viewport::after  { top: calc(22px - var(--feat-lift-r, 0px)) !important; }
html body .sv-section--featured .sv-featured__rail--left  { top: calc(22px - var(--feat-lift-l, 0px)) !important; }
html body .sv-section--featured .sv-featured__rail--right { top: calc(22px - var(--feat-lift-r, 0px)) !important; }

html body .sv-section--featured .sv-featured__notch {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(94, 170, 255, 0.35) !important;
  box-sizing: border-box !important;
  transform: none !important;
  will-change: auto !important;
}
html body .sv-section--featured .sv-featured__rail--left .sv-featured__notch {
  left: 0 !important;
  border-left-width: 0 !important;
}
html body .sv-section--featured .sv-featured__rail--right .sv-featured__notch {
  right: 0 !important;
  left: auto !important;
  border-right-width: 0 !important;
}
html body .sv-section--featured .sv-featured__rail--left .sv-featured__notch,
html body .sv-section--featured .sv-featured__rail--right .sv-featured__notch {
  animation:
    svFeatNotchMoveV34 var(--n-dur, 12s) linear var(--n-delay, 0s) infinite,
    svFeatNotchTaperV34 var(--n-dur, 12s) linear var(--n-delay, 0s) infinite !important;
}
/* Descente (gauche et droite) : de juste au-dessus de la banniere jusqu'a
   son bas ; la zone (overflow hidden) coupe ce qui depasse. */
@keyframes svFeatNotchMoveV34 {
  from { top: calc(-1 * var(--maxh, 52px)); }
  to   { top: var(--rail-h, 200px); }
}
/* Pleine largeur des l'arrivee en haut, retrait tres doux en bas (0 px a
   98,5 % : les derniers pixels sont parcourus deja retracte). */
@keyframes svFeatNotchTaperV34 {
  0%    { width: var(--n-w, 17px); }
  66%   { width: var(--n-w, 17px); animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1); }
  98.5% { width: 0; }
  100%  { width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body .sv-section--featured .sv-featured__rail--left .sv-featured__notch,
  html body .sv-section--featured .sv-featured__rail--right .sv-featured__notch {
    animation: none !important;
    display: none !important;
  }
}
/* >>> VELRA-V34 END <<< */


/* >>> VELRA-V35 START (17/10/2026) <<< */

/* ---- Concept : la vignette de type (en haut a gauche) de la case agrandie
   est rendue EXACTEMENT comme celle de la case d'origine : meme couche de
   rendu (will-change identique aux cases normales) -> meme epaisseur et
   meme taille de texte, pendant ET apres l'agrandissement. ---- */
html body #sv-concept-section .sv-concept > .sv-concept-zoom.sv-concept-zoom {
  will-change: transform, scale !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

/* ---- Calendrier : cases du mois precedent / suivant de retour, avec
   UNIQUEMENT le nom du mois (aucun evenement, aucune croix, pas de survol). */
html body #svCalendar .sv-cal__cell.is-out {
  pointer-events: none !important;
  cursor: default !important;
}
html body #svCalendar .sv-cal__cell.is-out .sv-cal__num,
html body #svCalendar .sv-cal__cell.is-out .sv-cal__cross,
html body #svCalendar .sv-cal__cell.is-out .sv-cal__chip,
html body #svCalendar .sv-cal__cell.is-out .sv-cal__more,
html body #svCalendar .sv-cal__cell.is-out .sv-cal__dots {
  display: none !important;
}

/* ---- Items event : heure sans conteneur de fond, meme couleur que la date ---- */
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer > .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item.sv-event-item:hover .sv-event-item__footer > .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item.sv-event-item.is-hov .sv-event-item__footer > .sv-event-item__time {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item.sv-event-item .sv-event-item__footer .sv-event-item__time *,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item.sv-event-item:hover .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item.sv-event-item.is-hov .sv-event-item__footer .sv-event-item__time {
  color: color-mix(in srgb, var(--ev-band-dark, #1a4e90) 42%, white 58%) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item.sv-event-item[data-presentation="1"] .sv-event-item__footer .sv-event-item__time,
html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.sv-event-item.sv-event-item.sv-event-item[data-presentation="1"] .sv-event-item__footer .sv-event-item__time * {
  color: color-mix(in srgb, #244e82 42%, white 58%) !important;
}

/* ---- Items event (PC) : trait de perspective du haut. Il part bien du
   bord gauche (haut visible du trait, sous le contour de 4px) puis
   descend en pente douce ( \ ) jusqu'a son bas. ---- */
@media (min-width: 1300.02px) {
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item > .sv-event-item__content::before,
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item:hover > .sv-event-item__content::before,
  html body #eventScroll.sv-events__scroll > .sv-event-item.sv-event-item.is-hov > .sv-event-item__content::before {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 clamp(7px, 0.75vw, 11px), clamp(30px, 2.6vw, 50px) clamp(7px, 0.75vw, 11px), 0 4px) !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 clamp(7px, 0.75vw, 11px), clamp(30px, 2.6vw, 50px) clamp(7px, 0.75vw, 11px), 0 4px) !important;
  }
}

/* ---- Concept « Ton idee » : boutons Envoyer / Retour sans angles coupes ---- */
html body #sv-concept-section .sv-concept-zoom__send,
html body #sv-concept-section .sv-concept-zoom__back {
  -webkit-clip-path: none !important;
  clip-path: none !important;
}
html body #sv-concept-section .sv-concept-zoom__back svg { display: none !important; }

/* ---- Calendrier : logo VELRA sur la diagonale (cote droit, entre le
   milieu et le bord). Le logo vectoriel (proportions d'origine) est coupe
   par la diagonale :
     - au-dessus : rempli avec le fond du calendrier (.sv-cal-logo-notch,
       dans Concept, decoupe au pixel sur la diagonale) ;
     - en dessous : decoupe (masque) dans le calendrier -> on voit la
       section Concept a travers.
   Pour que Concept existe sous le calendrier a cet endroit, les deux
   sections se chevauchent de --sv-logo-ext en plus (aucun changement
   visible : meme diagonale, memes positions de contenu). ---- */
html body .sv-section--concept,
html body .sv-section--calendar {
  --sv-logo-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 919'%3E%3Cpath fill='%23000' d='M0,1 L591,906 L597,913 L607,918 L618,918 L627,914 L639,900 L864,589 L864,586 L828,531 L826,530 L700,705 L697,707 L236,1 Z M1370,6 L1135,330 L1136,334 L1172,389 L1293,222 L1302,212 L1764,918 L1999,918 L1407,11 L1400,4 L1389,0 L1380,1 Z M582,0 L1182,918 L1417,918 L817,0 Z'/%3E%3C/svg%3E");
  --sv-logo-ext: clamp(24px, 2.4vw, 56px);
  --sv-logo-w: clamp(64px, 6.6vw, 150px);
  --sv-logo-h: calc(var(--sv-logo-w) * 0.4595);
  --sv-logo-p: 0.7585;                                /* bord gauche du logo (fraction de la largeur) */
  --sv-logo-a: calc(var(--sv-logo-h) * 0.44);         /* hauteur au-dessus de la diagonale (bord gauche) */
  --sv-logo-fill: #061226;                            /* fond du calendrier sous la diagonale */
}
html body .sv-section--concept {
  padding-bottom: calc(clamp(40px, 5vw, 80px) + var(--sv-slope) + var(--sv-logo-ext)) !important;
}
html body .sv-section--calendar {
  margin-top: calc(-1 * (var(--sv-slope) + var(--sv-logo-ext))) !important;
  padding-top: calc(clamp(30px, 3.4vw, 54px) + var(--sv-slope) + var(--sv-logo-ext)) !important;
  -webkit-clip-path: polygon(0 var(--sv-logo-ext), 100% calc(var(--sv-slope) + var(--sv-logo-ext)), 100% 100%, 0 100%) !important;
  clip-path: polygon(0 var(--sv-logo-ext), 100% calc(var(--sv-slope) + var(--sv-logo-ext)), 100% 100%, 0 100%) !important;
  /* Decoupe du logo (moitie basse) : SVG du logo deja tourne a la pente,
     calcule par communaute.js (v35b) ; tant qu'il n'est pas pret, aucun trou. */
  -webkit-mask-image: var(--sv-logo-rot, linear-gradient(transparent, transparent)), linear-gradient(#000, #000);
  mask-image: var(--sv-logo-rot, linear-gradient(transparent, transparent)), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: var(--sv-logo-bw, 1px) var(--sv-logo-bh, 1px), 100% 100%;
  mask-size: var(--sv-logo-bw, 1px) var(--sv-logo-bh, 1px), 100% 100%;
  -webkit-mask-position: var(--sv-logo-mx, -10px) var(--sv-logo-my, -10px), 0 0;
  mask-position: var(--sv-logo-mx, -10px) var(--sv-logo-my, -10px), 0 0;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Moitie haute : meme logo tourne, rempli avec le fond du calendrier et
   coupe exactement sur la diagonale (la ligne passe par le CENTRE du logo :
   deux moities egales, alignees sur la pente). */
html body .sv-section--concept > .sv-cal-logo-notch {
  display: none;
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--sv-logo-fill);
}
html body .sv-section--concept.has-cal-logo > .sv-cal-logo-notch {
  display: block;
  left: var(--sv-logo-nl);
  bottom: calc(var(--sv-logo-nb) + var(--sv-depth-drift, 0px));
  width: var(--sv-logo-bw);
  height: var(--sv-logo-bh);
  -webkit-mask: var(--sv-logo-rot) no-repeat 0 0 / 100% 100%;
  mask: var(--sv-logo-rot) no-repeat 0 0 / 100% 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--sv-logo-cr), 0 var(--sv-logo-cl));
  clip-path: polygon(0 0, 100% 0, 100% var(--sv-logo-cr), 0 var(--sv-logo-cl));
}
/* >>> VELRA-V35 END <<< */

/* ============================================================
   20/10/2026 (v37) — En vedette : traits gauche / droite PLEINS (sans
   transparence), exactement la meme couleur que le contour des
   rectangles (rgba(94,170,255,.35) pose sur le fond des rectangles).
   ============================================================ */
html body .sv-section--featured .sv-featured__viewport::before,
html body .sv-section--featured .sv-featured__viewport::after {
  border-left-color: #23426a !important;
  opacity: 1 !important;
}
html body .sv-section--featured .sv-featured__notch {
  border-color: #23426a !important;
  opacity: 1;
}

/* 20/10/2026 (v37) — En vedette : hors mode presentation, les traits
   gauche / droite s'arretent en bas de l'image (plus de trait coupe a
   cote de la date et du titre). En mode presentation : trait complet. */
html body .sv-section--featured:not([data-presentation-mode="1"]) .sv-featured__viewport::before,
html body .sv-section--featured:not([data-presentation-mode="1"]) .sv-featured__viewport::after {
  height: var(--feat-banner-h, 200px) !important;
  bottom: auto !important;
}

/* >>> VELRA-V38-EVENTS-ONE-ROW START <<< */
/* 25/10/2026 (v38) — Tablette (601px -> 1300px) : les items event
   defilent sur UNE SEULE rangee horizontale (plus 2 rangees). */
@media (min-width: 600.02px) and (max-width: 1300px) {
  html body #eventScroll:not(.has-search-empty) {
    grid-auto-flow: column !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
  }
}
/* >>> VELRA-V38-EVENTS-ONE-ROW END <<< */