/* ============================================================
   Grille « Nos sections »
   ============================================================

   La grille occupait un bandeau presque noir, plein cadre. Sur la page d'accueil
   d'origine, ce contraste répondait à une photo ; ici la grille **est** toute la
   page, posée à côté d'une colonne de widgets clairs. Le résultat était un pavé
   sombre isolé au milieu d'un site crème.

   Le bandeau revient donc au fond du site, et la couleur de chaque section cesse
   d'être un aplat plein écran : elle devient un accent — un filet en tête de
   carte, une pastille derrière le pictogramme, un halo au survol. Neuf couleurs
   saturées côte à côte se battaient ; les mêmes, en touches, se distinguent.
   ============================================================ */

.vc-sections-grid-wrap {
  background-color: var(--vc-color-bg);
  color: var(--vc-color-ink);
  padding: var(--vc-section-py) 0;
}

/* ─── En-tête ─────────────────────────────────────────────── */

.vc-sections-grid-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: var(--vc-space-8);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  text-align: left;
}

.vc-sections-grid-header .vc-eyebrow {
  color: var(--vc-color-accent);
  margin-bottom: var(--vc-space-4);
}

.vc-sections-grid-title {
  font-family: var(--vc-font-heading);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: var(--vc-tracking-display);
  line-height: 0.98;
  color: var(--vc-color-ink);
  margin: 0;
  transform: translate3d(0, var(--vc-parallax-y, 0px), 0);
}

.vc-sections-grid-subtitle {
  font-family: var(--vc-font-body);
  font-size: var(--vc-font-size-md);
  letter-spacing: 0;
  text-transform: none;
  color: var(--vc-color-ink-soft);
  line-height: var(--vc-line-height-normal);
  margin: 0;
  max-width: 46ch;
  justify-self: end;
}

/* ─── La grille ───────────────────────────────────────────── */

/* `auto-fill` plutôt qu'une fraction fixe : neuf sections sur quatre colonnes
   laissaient une carte seule en dernière ligne, ce qui se voyait plus que tout
   le reste. La grille choisit maintenant son nombre de colonnes selon la place,
   et les cartes gardent la même largeur d'un bout à l'autre. */
.vc-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--vc-gap-grid);
  background: none;
  border: none;
}

/* ─── La carte ────────────────────────────────────────────── */

.vc-section-card {
  --section-color: var(--vc-color-primary);
  --media-height: 132px;

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--vc-color-border);
  border-radius: var(--vc-radius-lg);
  background-color: var(--vc-color-white);
  color: var(--vc-color-ink);
  text-align: left;
  isolation: isolate;
  transition:
    transform var(--vc-duration-base) var(--vc-ease-out),
    box-shadow var(--vc-duration-base) var(--vc-ease),
    border-color var(--vc-duration-base) var(--vc-ease);
}

/* Le filet de couleur : c'est lui qui identifie la section, et il suffit. */
.vc-section-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background-color: var(--section-color);
  z-index: 1;
}

.vc-section-card:hover,
.vc-section-card:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--section-color) 45%, transparent);
  box-shadow: var(--vc-shadow-md);
}

/* ─── Média ───────────────────────────────────────────────── */

/* Une hauteur fixe plutôt qu'un rapport 3/4 : sans photo, la carte n'a rien à
   remplir, et un grand rectangle vide se remarque davantage qu'une bande
   courte. Avec photo, la bande suffit à la montrer. */
.vc-section-card-media {
  position: relative;
  height: var(--media-height);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--section-color) 8%, var(--vc-color-cream));
}

.vc-section-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  --vc-zoom: 1.04;
  transform: scale(var(--vc-zoom));
  transition: transform 1.1s var(--vc-ease-out);
}

.vc-section-card:hover .vc-section-card-img { --vc-zoom: 1.1; }

/* Le voile ne sert qu'aux cartes qui portent une photo : sur un fond clair, il
   ne ferait qu'assombrir une couleur déjà choisie. */
.vc-section-card--photo .vc-section-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--section-color) 55%, transparent) 0%,
    transparent 70%
  );
}

/* ─── Pictogramme ─────────────────────────────────────────── */

.vc-section-card-icon {
  position: absolute;
  top: 50%;
  left: var(--vc-space-6);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
  border-radius: var(--vc-radius-full);
  background-color: var(--vc-color-white);
  color: var(--section-color);
  box-shadow: var(--vc-shadow-card);
  transition:
    transform var(--vc-duration-base) var(--vc-ease-out),
    box-shadow var(--vc-duration-base) var(--vc-ease);
}

/* Logo uploadé (remplace le glyphe SVG) : contenu dans la même pastille, sans la déborder. */
.vc-section-card-logo {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.vc-section-card-glyph { width: 30px; height: 30px; }

.vc-section-card:hover .vc-section-card-icon {
  transform: translateY(-50%) scale(1.06);
  box-shadow: var(--vc-shadow-md);
}

/* Sur une carte à photo, la pastille se pose sur l'image et doit s'en détacher. */
.vc-section-card--photo .vc-section-card-icon {
  background-color: color-mix(in srgb, var(--vc-color-white) 92%, transparent);
}

/* ─── Corps ───────────────────────────────────────────────── */

.vc-section-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: var(--vc-space-6) var(--vc-space-6) var(--vc-space-8);
}

.vc-section-card-index {
  font-family: var(--vc-font-body);
  font-size: var(--vc-font-size-xs);
  font-weight: 600;
  letter-spacing: var(--vc-tracking-wide);
  color: var(--section-color);
}

.vc-section-card-title {
  font-family: var(--vc-font-heading);
  font-size: clamp(1.25rem, 1.4vw, 1.5rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: var(--vc-tracking-tight);
  line-height: 1.1;
  color: var(--vc-color-ink);
  margin: 0;
}

.vc-section-card-desc {
  font-size: var(--vc-font-size-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--vc-color-ink-soft);
  line-height: var(--vc-line-height-normal);
  margin: 0;
}

/* ─── Flèche ──────────────────────────────────────────────── */

/* Dans la bande média, face au pictogramme : le corps de la carte porte du
   texte de longueur variable, et une flèche posée dessous finirait par le
   chevaucher. Elle reste visible au repos — cachée jusqu'au survol, elle ne
   servait qu'à ceux qui avaient déjà compris que la carte est cliquable. */
.vc-section-card-arrow {
  position: absolute;
  top: calc(var(--media-height) / 2);
  right: var(--vc-space-6);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--vc-color-border);
  color: var(--section-color);
  opacity: 0.55;
  transform: translateY(-50%);
  background-color: var(--vc-color-white);
  transition:
    opacity var(--vc-duration-base) var(--vc-ease),
    transform var(--vc-duration-base) var(--vc-ease-out),
    background-color var(--vc-duration-base) var(--vc-ease),
    border-color var(--vc-duration-base) var(--vc-ease),
    color var(--vc-duration-base) var(--vc-ease);
}

.vc-section-card:hover .vc-section-card-arrow,
.vc-section-card:focus-within .vc-section-card-arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(3px);
  border-color: var(--section-color);
  background-color: var(--section-color);
  color: var(--vc-color-white);
}

.vc-section-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.vc-section-card-link:focus-visible {
  outline: 2px solid var(--section-color);
  outline-offset: -3px;
  border-radius: var(--vc-radius-lg);
}

/* ─── Adaptations ─────────────────────────────────────────── */

@media (max-width: 820px) {
  .vc-sections-grid-header { grid-template-columns: 1fr; align-items: start; }
  .vc-sections-grid-subtitle { justify-self: start; }
}

@media (max-width: 640px) {
  .vc-sections-grid-wrap { padding: var(--vc-section-py-sm) 0; }

  /* Une seule colonne sous 640 px : deux cartes de 150 px n'affichent plus
     qu'un titre tronqué. */
  .vc-sections-grid { grid-template-columns: 1fr; }

  .vc-section-card { --media-height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-section-card,
  .vc-section-card-img,
  .vc-section-card-icon,
  .vc-section-card-arrow {
    transition: none;
  }

  .vc-section-card:hover,
  .vc-section-card:focus-within {
    transform: none;
  }

  .vc-sections-grid-title { transform: none; }
}

/* ─── Mise en page « Liste » (bloc Sections du club, attribut layout) ───
   Une ligne par section, sans photo ni logo : toutes tiennent sur un écran. */
.vc-sections-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0 var(--vc-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vc-sections-list-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--vc-space-3);
  padding: var(--vc-space-3) var(--vc-space-1);
  border-bottom: 1px solid var(--vc-color-border);
  transition: background var(--vc-duration-fast, .15s) var(--vc-ease, ease);
}

.vc-sections-list-item:hover {
  background: color-mix(in srgb, var(--section-color) 6%, transparent);
}

.vc-sections-list-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--section-color);
}

.vc-sections-list-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.vc-sections-list-name {
  font-size: var(--vc-font-size-base);
  font-weight: 600;
  line-height: 1.3;
}

.vc-sections-list-desc {
  overflow: hidden;
  color: var(--vc-color-text-muted);
  font-size: var(--vc-font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-sections-list-arrow {
  flex: 0 0 auto;
  color: var(--section-color);
  transition: transform var(--vc-duration-fast, .15s) var(--vc-ease, ease);
}

.vc-sections-list-item:hover .vc-sections-list-arrow {
  transform: translateX(3px);
}

/* Toute la ligne est cliquable. */
.vc-sections-list-link {
  position: absolute;
  inset: 0;
}

.vc-sections-list-link:focus-visible {
  outline: 2px solid var(--section-color);
  outline-offset: -2px;
}