:root {
  --f1-red:    #e10600;
  --f1-black:  #1b1b1b;
  --f1-white:  #ffffff;
  --f1-grey:   #2e2e2e;
  --f1-shadow: rgba(0,0,0,0.5);
  --f1-font:   'Segoe UI', sans-serif;
}
/* 1. On écrase la marge sous le hero */
.hero {
  margin-bottom: 0 !important;
}

/* 2. On colle les KPI contre le hero */
.kpi-row {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;  /* juste un petit espace après les KPI */
}




/* ===== Collage KPI ===== */
.kpi-row {
  margin-top: -1.5rem !important;  /* remonte sous le hero */
  margin-bottom: 0 !important;
}

/* ===== Layout 4 colonnes ===== */
.jv-block {
  display: flex;
  gap: 1.5rem;
  font-family: var(--f1-font);
}

/* ===== Carte JV-CARD ===== */
.jv-card {
  background: var(--f1-grey);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1rem 2rem var(--f1-shadow);
  display: flex;
  flex-direction: column;
  width: 380px;       /* carte élargie */
}

.jv-card-header {
  position: relative;
  background: var(--f1-red);
  color: var(--f1-white);
  text-align: center;
  padding: 1rem;
  font-size: 1.75rem; /* titre agrandi */
}

.jv-card-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--f1-white) 0 10px,
      var(--f1-black) 10px 20px
    );
}

.jv-card-body {
  padding: 1.5rem;
  color: var(--f1-white);
  flex: 1;
}

.jv-card-body h4 {
  margin-top: 1rem;
  margin-bottom: .5rem;
  text-transform: uppercase;
  font-size: 1rem;
}

.jv-card-body a {
  color: var(--f1-red);
  text-decoration: underline;
}

/* ===== Galeries images ===== */
.jv-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.jv-gallery-col .img-slot {
  background: var(--f1-grey);
  border-radius: .5rem;
  box-shadow: 0 .3rem .6rem var(--f1-shadow);
  overflow: hidden;
  width: 220px;   /* vignettes plus grandes */
  height: 140px;
}

.jv-gallery-col .img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Modal image agrandie */
#imageModal .modal-dialog {
  max-width: 800px;    /* 4 × 200px */
}

#imageModal .modal-body img {
  width: 100%;         /* remplit toute la largeur du modal */
  height: auto;
}
/* Galerie : scroll-snap et taille plus grande */
.gallery-scroll {
  overflow-x: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;      /* on plaque à chaque vignette */
  scroll-behavior: smooth;            /* défilement doux */
}

.gallery-scroll::-webkit-scrollbar {
  height: 6px;
}
.gallery-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
}

/* Chaque vignette cliquable */
.gallery-item {
  width: 200px;                       /* taille doublée */
  height: auto;
  scroll-snap-align: start;           /* à l’écran on commence toujours par le bord gauche de la vignette */
  display: inline-block;
  margin-right: 1rem;
}

/* ————————————
   Override de la hero
   ———————————— */

/* Enlève toute image de fond + filtre + hauteur fixe */
body.index .hero {
  background: none !important;
  background-image: none !important;
  filter: none !important;
  height: auto !important;
  padding-top: 0.5rem !important;    /* espace minime au-dessus */
  padding-bottom: 1rem !important;   /* si tu veux encore un peu d’air dessous */
  margin-bottom: 0 !important;       /* supprime tout margin inutile */
}

/* Désactive la superposition du ::after */
body.index .hero::after {
  content: none !important;
}
/* 1) On remplace le padding XXL du content */
body.index .hero .content {
  padding-top: 0.5rem !important;    /* ~8px au lieu de 100px */
  padding-bottom: 0.5rem !important; /* un peu d’air en bas */
}

/* 2) On peut même remonter un poil la section sous le navbar */
body.index .hero {
  margin-top: -0.5rem !important;    /* remonte la hero de 8px */
}
/* ================================
   Style du logo dans la hero index
   ================================ */

/* Sélecteur un peu plus précis pour écraser tout le reste */
body.index .hero-logo {
  display: inline-block;                                  /* nécessaire pour le box-shadow */
  max-width: 800px;                                       /* ou ta valeur perso */
  width: 100%;
  height: auto;

  border-radius: 0.75rem !important;                      /* arrondi */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;    /* ombre portée */
}