/* ==========================================================================
   SIL3A 3D — Premium dark / industrial-chic theme
   Palette : #C8202F red · #8B1620 deep red · #0A0A0A black · #1C1C1C anthracite
   Fonts   : Sora (titres) · Inter (texte)
   ========================================================================== */

/* -------------------------------- RESET ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, picture, video, svg { max-width: 100%; display: block; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ----------------------------- VARIABLES ---------------------------------- */
:root {
  --red: #C8202F;
  --red-dark: #8B1620;
  --black: #0A0A0A;
  --anthracite: #1C1C1C;
  --anthracite-2: #161616;
  --off-white: #F5F5F5;
  --gray-text: #9A9A9A;
  --gray-border: #2A2A2A;
  --white: #FFFFFF;

  --shadow-soft: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-red: 0 0 24px rgba(200,32,47,0.35);

  --radius: 10px;
  --radius-lg: 18px;

  --container: 1280px;
  --header-h: 78px;

  --t-fast: 180ms ease;
  --t: 280ms cubic-bezier(.2,.7,.2,1);
}

/* -------------------------------- BASE ------------------------------------ */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--off-white);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* pas d overflow-x ici : il ferait de <body> un conteneur de defilement et
     neutraliserait tous les position:sticky de la page. La coupe horizontale
     est assuree par <html> juste en dessous. */
}

/* Le débordement horizontal doit être coupé au niveau du document : sinon le
   navigateur mobile élargit la fenêtre de mise en page (390 px demandés,
   604 px obtenus). Les tableaux tarifaires gardent leur propre défilement. */
html { overflow-x: hidden; max-width: 100%; }

h1, h2, h3, h4, h5 {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--white);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .5rem; }
h4 { font-size: 1.1rem; }

p { color: var(--off-white); }
.muted { color: var(--gray-text); }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }
.section-tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-dark { background: var(--anthracite-2); }

.eyebrow {
  display: inline-block;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .22em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 2.2rem;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1.7rem; height: 2px;
  background: var(--red);
  transform: translateY(-50%);
}

.section-title { margin-bottom: 1.2rem; }
.section-intro { color: var(--gray-text); max-width: 60ch; margin-bottom: 3rem; }

/* -------------------------------- BUTTONS --------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--t);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  box-shadow: 0 4px 18px rgba(200,32,47,0.25);
}
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(200,32,47,0.4); }
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.25);
}
.btn-outline:hover { border-color: var(--red); color: var(--red); }
.btn-sm { padding: .65rem 1.2rem; font-size: .8rem; }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* ------------------------------- HEADER ----------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  height: var(--header-h);
  transition: background var(--t), box-shadow var(--t);
}
.site-header.scrolled { background: rgba(10,10,10,0.96); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.brand { display: flex; align-items: center; gap: .8rem; }
.brand img { height: 44px; width: auto; }

.nav-list { display: flex; gap: 1.7rem; align-items: center; }
.nav-list a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--off-white);
  padding: .35rem 0;
  position: relative;
  transition: color var(--t-fast);
}
.nav-list a:hover, .nav-list a.active { color: var(--red); }
.nav-list a.active::after,
.nav-list a:hover::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px 0;
  height: 2px;
  background: var(--red);
}

.header-cta { display: flex; align-items: center; gap: 1rem; }

.nav-toggle {
  display: none;
  background: transparent; border: none;
  width: 40px; height: 40px;
  padding: 0; cursor: pointer;
  color: var(--white);
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px auto; transition: transform var(--t), opacity var(--t); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

main { padding-top: var(--header-h); }

/* --------------------------------- HERO ----------------------------------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding: clamp(3rem,8vw,6rem) 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top right, rgba(200,32,47,0.18), transparent 55%),
    linear-gradient(180deg, #0a0a0a, #050505 70%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-content .eyebrow { margin-bottom: 1.5rem; }
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 .accent { color: var(--red); display: block; }
.hero-sub { font-size: 1.1rem; color: var(--gray-text); margin-bottom: 1rem; }
.hero-desc { color: var(--off-white); margin-bottom: 2.2rem; max-width: 55ch; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-soft);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease; }
.hero-visual:hover img { transform: scale(1.05); }
.hero-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(200,32,47,0.15), transparent 60%);
}
.hero-badge {
  position: absolute; top: 1.2rem; left: 1.2rem;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(8px);
  padding: .6rem 1rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid var(--red);
  z-index: 2;
}

/* ------------------------------- KPI / STATS ------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--gray-border);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: var(--anthracite);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background var(--t);
}
.stat:hover { background: #222; }
.stat-num {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: .5rem;
}
.stat-label {
  font-size: .85rem;
  color: var(--gray-text);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* --------------------------------- CARDS ---------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}
.card {
  background: var(--anthracite);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t);
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-6px); border-color: var(--red); box-shadow: var(--shadow-red); }
.card-media {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t);
}
.card:hover .card-media img { transform: scale(1.08); }
.card-body { padding: 1.4rem 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.card-title { color: var(--white); margin-bottom: .5rem; font-size: 1.15rem; }
.card-desc { color: var(--gray-text); font-size: .92rem; margin-bottom: 1rem; flex: 1; }
.card-actions { display: flex; gap: .6rem; margin-top: auto; flex-wrap: wrap; }

/* -------------------------------- FEATURES -------------------------------- */
.feature {
  background: var(--anthracite);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem;
  transition: all var(--t);
}
.feature:hover { border-color: var(--red); box-shadow: var(--shadow-red); transform: translateY(-4px); }
.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(200,32,47,0.12);
  color: var(--red);
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
}
.feature h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.feature p { color: var(--gray-text); font-size: .9rem; }

/* ------------------------ PROCESSUS (4 étapes) ----------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.process-step {
  position: relative;
  background: var(--anthracite);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem 1.6rem;
  transition: all var(--t);
}
.process-step:hover { border-color: var(--red); transform: translateY(-4px); }
.process-num {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(200,32,47,0.12);
  border: 1px solid rgba(200,32,47,0.35);
  color: var(--red);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.process-step h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.process-step p { color: var(--gray-text); font-size: .9rem; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process-grid { grid-template-columns: 1fr; } }

/* Aide "quoi envoyer" dans la barre CTA */
.cta-hint { font-size: .85rem; opacity: .85; margin-top: .6rem; }

/* Liens "spécialités" (maillage interne vers les pages SEO dédiées) */
.spec-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.spec-links a {
  display: inline-block;
  padding: .55rem 1.15rem;
  border: 1px solid var(--gray-border);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  transition: all var(--t-fast);
}
.spec-links a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

/* ===========================================================================
   "POURQUOI" — Diaporama horizontal animé (marquee CSS infini)
   - Une seule ligne qui défile automatiquement à gauche
   - Boucle infinie sans saut visuel (track dupliqué x2)
   - Pause au survol
   - Bordures fondues sur les côtés pour un effet "tunnel"
   =========================================================================== */
.features-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
  /* fade out sur les bords */
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
}
.features-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: featuresScroll 60s linear infinite;
  will-change: transform;
}
.features-track:hover {
  animation-play-state: paused;
}
.features-marquee .feature {
  flex: 0 0 280px;       /* largeur fixe pour défilement régulier */
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@keyframes featuresScroll {
  from { transform: translateX(0); }
  /* On translate de -50% car le track contient 2 copies identiques :
     quand la première moitié est sortie, on revient à 0 sans saut visuel */
  to { transform: translateX(-50%); }
}
/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  .features-track { animation: none; }
  .features-marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .features-marquee .feature { scroll-snap-align: start; }
}
/* Responsive : cartes plus petites sur mobile */
@media (max-width: 768px) {
  .features-marquee .feature {
    flex: 0 0 240px;
    min-height: 200px;
    padding: 1.4rem 1.2rem;
  }
  .features-track { animation-duration: 45s; }
}

/* ------------------------------- GALLERY ---------------------------------- */
/* Recherche intelligente : le client décrit son besoin en langage naturel */
.gallery-search { max-width: 720px; margin: 0 auto 2rem; }
.gallery-search-box {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--anthracite);
  border: 1px solid var(--gray-border);
  border-radius: 999px;
  padding: .35rem .6rem .35rem 1.1rem;
  transition: border-color .2s, box-shadow .2s;
}
.gallery-search-box:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,32,47,0.15);
}
.gallery-search-icon { font-size: 1rem; opacity: .7; flex-shrink: 0; }
#gallery-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--off-white);
  font: inherit;
  font-size: .95rem;
  padding: .55rem 0;
}
#gallery-search-input::placeholder { color: var(--gray-text); opacity: .8; }
#gallery-search-input::-webkit-search-cancel-button { display: none; }
.gallery-search-clear {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: var(--anthracite-2);
  color: var(--gray-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.gallery-search-clear:hover { background: var(--red); color: var(--white); }
.gallery-search-hints {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .8rem;
  font-size: .78rem;
  color: var(--gray-text);
}
.gallery-search-hints button {
  padding: .35rem .8rem;
  font-size: .75rem;
  background: transparent;
  color: var(--gray-text);
  border: 1px solid var(--gray-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.gallery-search-hints button:hover { color: var(--red); border-color: var(--red); }

/* Bandeau "conception sur mesure" affiché pendant une recherche */
.gallery-search-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 860px;
  margin: 0 auto 1.6rem;
  padding: .9rem 1.2rem;
  background: var(--anthracite-2);
  border: 1px solid var(--gray-border);
  border-left: 3px solid var(--red);
  border-radius: 10px;
  font-size: .9rem;
  color: var(--gray-text);
  text-align: center;
}
.gallery-search-cta strong { color: var(--red); }
.gallery-search-cta .btn { flex-shrink: 0; }

/* Séparateur "Créations similaires" entre résultats directs et thèmes voisins */
.gal-sep {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.2rem 0 .4rem;
  color: var(--gray-text);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.gal-sep::before, .gal-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-border);
}

.gallery-filters {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  justify-content: center;
}
.filter-btn {
  padding: .55rem 1.1rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: transparent;
  color: var(--gray-text);
  border: 1px solid var(--gray-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.filter-btn:hover { color: var(--white); border-color: var(--red); }
.filter-btn.active { background: var(--red); color: var(--white); border-color: var(--red); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}
.gal-item {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--anthracite);
  border: 1px solid rgba(255,255,255,0.05);
  transition: all var(--t);
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.gal-item:hover { border-color: var(--red); box-shadow: var(--shadow-red); }
.gal-item:hover img { transform: scale(1.1); }
.gal-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.92));
  display: flex; align-items: flex-end;
  padding: 1.1rem;
  opacity: 0;
  transition: opacity var(--t);
}
.gal-item:hover .gal-overlay { opacity: 1; }
.gal-overlay-text { color: var(--white); }
.gal-overlay-text .tag { color: var(--red); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
.gal-overlay-text h4 { font-size: 1rem; margin-top: .25rem; }

/* ------------------------------- LIGHTBOX --------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.95);
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: var(--red); color: var(--white);
  border: none; width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.5rem; cursor: pointer; transition: background var(--t-fast);
}
.lightbox-close:hover { background: var(--red-dark); }

/* ------------------------------- PRODUCTS --------------------------------- */
.product-card {
  background: var(--anthracite);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t);
}
.product-card:hover { border-color: var(--red); box-shadow: var(--shadow-red); transform: translateY(-4px); }
.product-head {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  align-items: stretch;
}
.product-media {
  width: 100%;
  min-width: 0;
  aspect-ratio: auto;
  overflow: hidden;
  background: #fff;
}
/* contain (pas cover) : les photos studio ont un fond blanc et doivent rester entières (ex. Trophée Prestige) */
.product-media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--t); }
.product-card:hover .product-media img { transform: scale(1.06); }
.product-info { padding: 1.8rem 2rem; display: flex; flex-direction: column; justify-content: center; gap: .8rem; }
.product-info h3 { font-size: 1.5rem; color: var(--white); margin: 0; }
.product-info .sizes {
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.product-info .sizes span {
  font-size: .72rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--gray-text);
  letter-spacing: .05em;
}
.product-info .desc { color: var(--gray-text); font-size: .95rem; margin: 0; }
.product-info .actions { display: flex; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }

.price-table-wrap {
  padding: 0 2rem 2rem;
  overflow-x: auto;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 580px;
  font-size: .88rem;
}
.price-table th {
  text-align: left;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-text);
  padding: .9rem .8rem;
  border-bottom: 2px solid var(--gray-border);
}
.price-table td {
  padding: .85rem .8rem;
  border-bottom: 1px solid var(--gray-border);
  color: var(--off-white);
}
.price-table td:first-child { font-weight: 700; color: var(--white); }
.price-table td.coffret { background: rgba(200,32,47,0.07); color: var(--red); font-weight: 600; }
.price-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.price-note {
  font-size: .8rem; color: var(--gray-text);
  padding: .8rem 2rem 0; line-height: 1.5;
}

/* ------------------------------- EVENTS ----------------------------------- */
.event-card {
  background: var(--anthracite);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t);
}
.event-card:hover { border-color: var(--red); box-shadow: var(--shadow-red); transform: translateY(-4px); }
.event-card .card-media { aspect-ratio: 16/10; }
.event-meta {
  display: flex; gap: .8rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: .5rem;
}
.event-meta .cat { color: var(--red); font-weight: 700; }

/* =============================================================================
   ÉVÉNEMENTS PREMIUM (HOME) — Mosaïque éditoriale "magazine style"
   1 carte hero (grande, 2 colonnes × 2 lignes) + 5 cartes secondaires
   ============================================================================= */
.section-events-featured {
  background:
    radial-gradient(ellipse at top right, rgba(200,32,47,0.10), transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #0E0E0E 100%);
  position: relative;
  overflow: hidden;
}
.section-events-featured::before {
  content: "";
  position: absolute;
  top: 5%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(244,185,66,0.08), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.events-featured-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.events-featured-header .eyebrow { padding-left: 0; }
.events-featured-header .eyebrow::before {
  display: none;
}
.events-featured-header .eyebrow {
  display: inline-block;
  background: rgba(244,185,66,0.12);
  border: 1px solid rgba(244,185,66,0.3);
  padding: .35rem 1rem;
  border-radius: 999px;
  color: #f4b942;
}
.events-featured-header .section-intro {
  margin-inline: auto;
  text-align: center;
}
.events-featured-header .section-title {
  max-width: 22ch;
  margin-inline: auto;
}
.events-featured-header .section-title::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}
.events-featured-header .section-title.in::after {
  transform: translateX(-50%) scaleX(1);
}

/* MOSAÏQUE — grille asymétrique 4 colonnes × 2 lignes
   - hero card : 2 cols × 2 rows (gauche)
   - 4 petites cards : 1 col × 1 row chacune (droite, en 2×2)
   - card #5 (6e position) : 2 cols × 1 row en bas */
.events-featured {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 220px);
  gap: 1.2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.events-featured-cta {
  text-align: center;
  position: relative;
  z-index: 1;
}
.events-stat-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-border);
}
.events-stat-strip > div {
  text-align: center;
  font-size: .82rem;
  color: var(--gray-text);
  letter-spacing: .05em;
}
.events-stat-strip strong {
  display: block;
  color: var(--red);
  font-family: 'Sora', sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: .4rem;
  text-shadow: 0 0 16px rgba(200,32,47,0.4);
}

/* Responsive — tablet : 2 cols × 5 rows (8 cartes : 1 hero + 6 normales + 1 wide) */
@media (max-width: 1024px) {
  .events-featured {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 200px);
  }
}
/* Mobile : stack vertical de 8 cartes */
@media (max-width: 600px) {
  .events-featured {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 240px;
  }
  .events-stat-strip {
    gap: 1.5rem;
  }
  .events-stat-strip strong { font-size: 1.8rem; }
}

/* Badge épinglé pour événements mis en avant */
.event-card.pinned {
  border-color: rgba(244, 185, 66, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(244, 185, 66, 0.3), 0 12px 32px rgba(244, 185, 66, 0.15);
}
.event-card.pinned:hover {
  box-shadow: 0 0 0 2px #f4b942, 0 16px 48px rgba(244, 185, 66, 0.25);
}
.event-card .card-media { position: relative; }

/* --------------------------------- FAQ ------------------------------------ */
.faq-list { max-width: 880px; margin-inline: auto; }
.faq-item {
  border: 1px solid var(--gray-border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  background: var(--anthracite);
  transition: border-color var(--t-fast);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--red); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--white);
  font-size: 1rem;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--red);
  transition: transform var(--t);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "−"; }
.faq-body {
  padding: 0 1.5rem 1.4rem;
  color: var(--off-white);
}

/* --------------------------------- FORM ----------------------------------- */
.form-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}
form .field { margin-bottom: 1.1rem; }
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
form label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--gray-text);
  margin-bottom: .35rem;
  text-transform: uppercase;
}
form input, form textarea, form select {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  /* couleur posée en dur : --white et --anthracite valent tous deux #FFFFFF
     depuis le passage au thème clair, ce qui rendait la saisie invisible */
  color: #0F172A;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  font-size: .95rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
form input::placeholder, form textarea::placeholder { color: #94A3B8; opacity: 1; }
@media (max-width: 820px) {
  form input, form textarea, form select { font-size: 16px; }
}
form select option { color: #0F172A; background: #FFFFFF; }
/* le remplissage automatique impose ses propres couleurs : on les reprend */
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus,
form textarea:-webkit-autofill,
form select:-webkit-autofill {
  -webkit-text-fill-color: #0F172A;
  box-shadow: 0 0 0 1000px #EFF4FF inset;
}
form input:focus, form textarea:focus, form select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,32,47,0.18);
}
form textarea { resize: vertical; min-height: 140px; }
.form-msg { margin-top: 1rem; font-size: .9rem; color: var(--red); font-weight: 600; display: none; }
.form-msg.visible { display: block; }
.form-msg.success { color: #38d97b; }

/* Bannière retour PHP (?sent=1 ou ?sent=0&err=…) */
.form-banner {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid;
}
.form-banner.success {
  background: rgba(56,217,123,0.1);
  border-color: rgba(56,217,123,0.4);
  color: #38d97b;
}
.form-banner.error {
  background: rgba(200,32,47,0.12);
  border-color: rgba(200,32,47,0.5);
  color: var(--red);
}

.contact-info {
  background: var(--anthracite);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.contact-info h3 { font-size: 1.1rem; margin-bottom: 1.2rem; }
.contact-info ul li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--gray-border);
  font-size: .92rem;
}
.contact-info ul li:last-child { border: none; }
.contact-info .ico { color: var(--red); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; width: 22px; text-align: center; }
.contact-info a:hover { color: var(--red); }
.map-wrap { margin-top: 1.5rem; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; border: 1px solid var(--gray-border); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------- CLIENTS ---------------------------------- */

/* ===========================================================================
   CLIENTS — Bannière défilante rapide (marquee)
   Logos sur fond blanc, défilement rapide gauche, pause au survol.
   =========================================================================== */
.clients-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0.6rem 0;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  /* fade-out sur les bords pour effet "tunnel" */
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
}
.client-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;                              /* spacing géré par les items pour régularité */
  width: max-content;
  animation: clientsScroll 110s linear infinite;
  will-change: transform;
}
.client-marquee-track:hover {
  animation-play-state: paused;
}
/* Largeur FIXE pour chaque cellule = défilement parfaitement régulier */
.client-marquee-item {
  flex: 0 0 240px;
  height: 168px;
  display: grid;
  place-items: center;
  padding: 0 1.2rem;
  filter: grayscale(50%) opacity(.85);
  transition: filter .25s ease, transform .25s ease;
}
.client-marquee-item:hover {
  filter: grayscale(0) opacity(1);
  transform: scale(1.12);
}
.client-marquee-item img {
  max-width: 95%;
  max-height: 160px;                   /* logo presque pleine cellule */
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
@keyframes clientsScroll {
  from { transform: translateX(0); }
  /* -50% car le contenu est dupliqué pour boucle sans saut */
  to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .client-marquee-item { flex: 0 0 180px; height: 130px; padding: 0 .8rem; }
  .client-marquee-item img { max-height: 110px; }
  .client-marquee-track { animation-duration: 50s; }
}
@media (prefers-reduced-motion: reduce) {
  .client-marquee-track { animation: none; }
  .clients-marquee { overflow-x: auto; }
}

/* --------------------------------- CTA BAR -------------------------------- */
.cta-bar {
  position: relative;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  overflow: hidden;
}
.cta-bar::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, transparent 60%, rgba(255,255,255,0.07));
  pointer-events: none;
}
.cta-bar h2 { color: var(--white); margin: 0; max-width: 30ch; }
.cta-bar p { color: rgba(255,255,255,0.85); margin-top: .5rem; max-width: 50ch; }
.cta-bar .btn { background: var(--white); color: var(--red); border-color: var(--white); position: relative; z-index: 1; }
.cta-bar .btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* ------------------------------- BLOG ------------------------------------- */
.article-card { display: flex; flex-direction: column; }
.article-card .card-media { aspect-ratio: 16/10; }
.article-meta { font-size: .75rem; color: var(--gray-text); margin-bottom: .5rem; letter-spacing: .08em; text-transform: uppercase; }
.article-meta .red { color: var(--red); font-weight: 700; }

/* ------------------------------ ABOUT PAGE -------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
  margin-top: 1rem;
}
.value-card {
  padding: 1.4rem;
  border: 1px solid var(--gray-border);
  border-radius: var(--radius);
  background: var(--anthracite);
}
.value-card .icon { font-size: 1.6rem; color: var(--red); margin-bottom: .6rem; }

/* -------------------------------- FOOTER ---------------------------------- */
.site-footer {
  background: #050505;
  border-top: 1px solid var(--gray-border);
  padding: 4rem 0 1.5rem;
  color: var(--gray-text);
  font-size: .9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-grid h4 {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--white);
  margin-bottom: 1rem;
}
.footer-grid ul li { margin-bottom: .55rem; }
.footer-grid a:hover { color: var(--red); }
.footer-brand p { margin-top: 1rem; max-width: 38ch; }
.footer-socials { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gray-border);
  color: var(--white);
  transition: all var(--t-fast);
}
.footer-socials a:hover { background: var(--red); border-color: var(--red); color: var(--white); }

/* --------------------- WHATSAPP / SCROLL-TOP FLOAT ------------------------ */
.float-actions {
  position: fixed;
  right: 1.2rem; bottom: 1.2rem;
  display: flex; flex-direction: column; gap: .6rem;
  z-index: 50;
}
.float-btn {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
  transition: transform var(--t-fast);
  font-size: 1.5rem;
}
.float-btn.scroll-top { background: var(--red); font-size: 1.1rem; opacity: 0; pointer-events: none; }
.float-btn.scroll-top.visible { opacity: 1; pointer-events: auto; }
.float-btn:hover { transform: scale(1.08); }

/* ---------------------------- PAGE HEADER --------------------------------- */
.page-hero {
  padding: 6rem 0 3rem;
  background:
    radial-gradient(ellipse at top, rgba(200,32,47,0.18), transparent 50%),
    linear-gradient(180deg, #0a0a0a, #050505);
  text-align: center;
  border-bottom: 1px solid var(--gray-border);
}
.page-hero h1 { margin-bottom: .8rem; }
.page-hero p { color: var(--gray-text); max-width: 60ch; margin-inline: auto; }
.crumbs {
  display: inline-flex; gap: .5rem; align-items: center;
  font-size: .8rem;
  color: var(--gray-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.crumbs a:hover { color: var(--red); }
.crumbs .sep { color: var(--red); }

/* ------------------------- ANIMATIONS ------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* Le contenu du premier écran ne doit pas attendre le JavaScript. Il était à
   opacity:0 jusqu'à ce que l'observateur ajoute .in : le plus grand élément
   visible n'était peint qu'à 3,2 s. Il s'affiche désormais immédiatement,
   l'animation ne concerne plus que ce qui est sous la ligne de flottaison. */
.hero .reveal,
.page-hero .reveal,
.hero-inner .reveal { opacity: 1; transform: none; transition: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===========================================================================
   HOMEPAGE — MODERN ANIMATIONS PACK
   1. Trophy gentle float
   2. Hero ambient particles
   3. Hero spotlight pulse
   4. Hero badge shimmer
   5. Section title animated underline
   6. Stat number glow when visible
   7. Card 3D hover tilt
   8. CTA bar diagonal shine sweep
   9. Eyebrow line breath
   =========================================================================== */

/* 1 — Trophy floating animation (replaces previous hover scale) */
.hero-visual-float img {
  animation: heroFloat 6s ease-in-out infinite alternate;
  will-change: transform;
  transition: none;
}
.hero-visual-float:hover img { transform: none; }
@keyframes heroFloat {
  0%   { transform: translateY(-10px) rotate(-1.4deg); }
  50%  { transform: translateY(2px)   rotate(0deg);    }
  100% { transform: translateY(10px)  rotate(1.4deg);  }
}

/* 2 — Hero ambient particles (red floating dots rising slowly) */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-particles span {
  position: absolute;
  bottom: -20px;
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(200,32,47,0.55);
  filter: blur(0.5px);
  box-shadow: 0 0 12px rgba(200,32,47,0.45);
  animation: particleUp 22s linear infinite;
  opacity: 0;
}
.hero-particles span:nth-child(1) { left: 6%;  animation-duration: 24s; animation-delay: 0s;  }
.hero-particles span:nth-child(2) { left: 18%; animation-duration: 19s; animation-delay: -5s; width: 4px; height: 4px; }
.hero-particles span:nth-child(3) { left: 32%; animation-duration: 27s; animation-delay: -10s; }
.hero-particles span:nth-child(4) { left: 46%; animation-duration: 21s; animation-delay: -3s;  width: 3px; height: 3px; opacity: .8; }
.hero-particles span:nth-child(5) { left: 60%; animation-duration: 25s; animation-delay: -14s; width: 5px; height: 5px; }
.hero-particles span:nth-child(6) { left: 74%; animation-duration: 23s; animation-delay: -7s; }
.hero-particles span:nth-child(7) { left: 86%; animation-duration: 28s; animation-delay: -12s; width: 4px; height: 4px; }
.hero-particles span:nth-child(8) { left: 95%; animation-duration: 20s; animation-delay: -2s;  width: 5px; height: 5px; }
@keyframes particleUp {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translate3d(40px, -110vh, 0); opacity: 0; }
}

/* 3 — Hero spotlight pulse (radial red glow gently breathes) */
.hero::before {
  content: "";
  position: absolute;
  top: -10%; right: -10%;
  width: 70%; height: 70%;
  background: radial-gradient(circle at center, rgba(200,32,47,0.22), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: spotlightPulse 7s ease-in-out infinite;
  filter: blur(20px);
}
@keyframes spotlightPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.hero-inner { position: relative; z-index: 1; }

/* 4 — Hero badge shimmer (gold sweep across the badge) */
.hero-badge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: badgeShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badgeShimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%);  }
  100% { transform: translateX(100%);  }
}

/* 5 — Section title animated underline */
.section-title { position: relative; padding-bottom: 18px; }
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 72px; height: 3px;
  background: linear-gradient(90deg, var(--red), transparent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .15s;
}
/* If the title is not a reveal target, show immediately */
.section-title:not(.reveal)::after { transform: scaleX(1); }
/* If revealed (intersection observed), animate the bar in */
.section-title.reveal.in::after { transform: scaleX(1); }
/* Also animate on hover */
.section-title:hover::after { transform: scaleX(1.4); transition-duration: .4s; }

/* 6 — Stat number glow when stats container is revealed */
.stat-num {
  text-shadow: 0 0 0 transparent;
  transition: text-shadow 1.4s ease .3s;
}
.stats.reveal.in .stat-num {
  text-shadow: 0 0 22px rgba(200,32,47,0.45);
}

/* 7 — Card 3D hover tilt (subtle lift + perspective) */
.card { transform-style: preserve-3d; }
.card:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
}
.card .card-media { transform: translateZ(0); }

/* 8 — CTA bar diagonal shine sweep */
.cta-bar { position: relative; overflow: hidden; isolation: isolate; }
.cta-bar::after {
  content: "";
  position: absolute;
  top: -20%; left: -40%;
  width: 35%; height: 140%;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.22) 50%, transparent 75%);
  transform: skewX(-22deg);
  animation: ctaShine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaShine {
  0%   { left: -40%;  }
  55%  { left: 120%;  }
  100% { left: 120%;  }
}

/* 9 — Eyebrow line breath (the small red dash before eyebrow text) */
.eyebrow::before {
  animation: eyebrowBreath 3.6s ease-in-out infinite;
}
@keyframes eyebrowBreath {
  0%, 100% { width: 1.4rem; opacity: 0.75; }
  50%      { width: 2.4rem; opacity: 1;    }
}

/* ===========================================================================
   RECORD CARD — Highlight "572 trophées en moins d'une semaine"
   =========================================================================== */
.record-card {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem 2.5rem;
  background:
    radial-gradient(ellipse at top right, rgba(200,32,47,0.18), transparent 60%),
    linear-gradient(135deg, #161616 0%, #0f0f0f 100%);
  border: 1px solid var(--gray-border);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.record-card::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(200,32,47,0.25), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.record-flag {
  background: var(--red);
  color: var(--white);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .2em;
  padding: .45rem .9rem;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.record-number {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  color: var(--white);
  text-shadow: 0 0 24px rgba(200,32,47,0.5);
  letter-spacing: -.02em;
  position: relative;
  z-index: 1;
}
.record-text { z-index: 1; position: relative; }
.record-text h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--white);
  margin: 0 0 .4rem 0;
}
.record-text h3 em { color: var(--red); font-style: normal; }
.record-text p { color: var(--gray-text); font-size: .92rem; margin: 0; max-width: 50ch; }
.record-cta { z-index: 1; position: relative; }

@media (max-width: 900px) {
  .record-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.2rem;
    padding: 1.8rem 1.5rem;
  }
  .record-flag, .record-cta { justify-self: center; }
  .record-text p { margin-inline: auto; }
}

/* ===========================================================================
   BEST OF — Coverflow 3D Carousel (compact, très animé)
   - Slide centrale large et nette
   - 2 slides latérales en perspective 3D, plus petites + dimées
   - Auto-rotation 4s
   - Navigation prev/next + dots
   - Au survol : pause auto-rotate
   =========================================================================== */
.bestof-stage {
  position: relative;
  perspective: 1800px;
  height: 420px;
  margin: 2rem 0 1rem;
  overflow: hidden;
}
.bestof-rail {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.bestof-slide {
  /* Toutes les slides sont absolument positionnées au centre.
     Leur état (is-active, is-prev, is-next, is-far-prev, is-far-next, ou rien)
     définit leur position 3D autour du centre. Les slides "rien" sont invisibles. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 540px;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--anthracite);
  border: 1px solid var(--gray-border);
  cursor: pointer;
  transform-style: preserve-3d;
  transition:
    transform .9s cubic-bezier(.2,.7,.2,1),
    opacity .6s ease,
    filter .6s ease,
    box-shadow .4s ease,
    border-color .4s ease;
}
.bestof-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}
.bestof-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.95) 100%);
}

/* Default : slides hors champ (échelle 0, invisibles) */
.bestof-slide {
  transform: translate(-50%, -50%) scale(.3);
  opacity: 0;
  filter: brightness(.5) saturate(.7);
  pointer-events: none;
  z-index: 1;
}

/* Slide active (centre, plein écran) */
.bestof-slide.is-active {
  transform: translate(-50%, -50%) rotateY(0deg) scale(1);
  opacity: 1;
  filter: brightness(1) saturate(1);
  box-shadow: 0 30px 80px rgba(200,32,47,0.35), 0 0 0 1px rgba(200,32,47,0.3);
  border-color: rgba(200,32,47,0.5);
  z-index: 5;
  pointer-events: auto;
}
.bestof-slide.is-active img {
  transform: scale(1.04);   /* Ken Burns lent */
}

/* Voisines immédiates (gauche/droite) — décalées + tournées */
.bestof-slide.is-prev {
  transform: translate(calc(-50% - 320px), -50%) rotateY(35deg) scale(.78);
  opacity: .65;
  filter: brightness(.7) saturate(.9);
  z-index: 3;
  pointer-events: auto;
}
.bestof-slide.is-next {
  transform: translate(calc(-50% + 320px), -50%) rotateY(-35deg) scale(.78);
  opacity: .65;
  filter: brightness(.7) saturate(.9);
  z-index: 3;
  pointer-events: auto;
}

/* Slides "lointaines" — encore plus loin + plus petites */
.bestof-slide.is-far-prev {
  transform: translate(calc(-50% - 520px), -50%) rotateY(50deg) scale(.55);
  opacity: .28;
  filter: brightness(.45) saturate(.6);
  z-index: 2;
  pointer-events: none;
}
.bestof-slide.is-far-next {
  transform: translate(calc(-50% + 520px), -50%) rotateY(-50deg) scale(.55);
  opacity: .28;
  filter: brightness(.45) saturate(.6);
  z-index: 2;
  pointer-events: none;
}

/* Tag (signature, NEW) */
@keyframes pulseTagBlue {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,210,255,0.5); transform: scale(1); }
  50%      { box-shadow: 0 4px 22px rgba(0,210,255,0.9); transform: scale(1.05); }
}

/* Infos en bas */
.bestof-slide-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 1.8rem;
  z-index: 3;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .6s ease .15s, opacity .5s ease .2s;
}
.bestof-slide.is-active .bestof-slide-info {
  transform: translateY(0);
  opacity: 1;
}
.bestof-slide-cat {
  display: inline-block;
  font-family: 'Sora', sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--red);
  background: rgba(200,32,47,0.18);
  padding: .25rem .65rem;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.bestof-slide-info h3 {
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 .4rem 0;
}
.bestof-slide-info p {
  color: rgba(255,255,255,0.82);
  font-size: .9rem;
  margin: 0 0 1rem 0;
}
.bestof-slide-info .btn { margin-top: .2rem; }

/* Navigation prev/next */
.bestof-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gray-border);
  color: #fff;
  font-size: 2rem;
  font-family: 'Sora', sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: all .2s ease;
}
.bestof-nav:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(200,32,47,0.4);
}
.bestof-nav-prev { left: 1.5rem; }
.bestof-nav-next { right: 1.5rem; }

/* Dots */
.bestof-dots {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin: .8rem 0 2rem;
}
.bestof-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .3s ease;
}
.bestof-dot:hover { background: rgba(200,32,47,0.6); }
.bestof-dot.is-active {
  background: var(--red);
  width: 32px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(200,32,47,0.7);
}

/* Bottom CTA */
.bestof-bottom-cta {
  text-align: center;
  margin-top: 1rem;
}

/* Header de la section */
.section-bestof {
  background:
    radial-gradient(ellipse at top left, rgba(200,32,47,0.10), transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #0E0E0E 100%);
  position: relative;
  overflow: hidden;
}
.bestof-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.bestof-header .eyebrow {
  display: inline-block;
  padding-left: 0;
  background: rgba(200,32,47,0.12);
  border: 1px solid rgba(200,32,47,0.35);
  padding: .35rem 1rem;
  border-radius: 999px;
  color: var(--red);
}
.bestof-header .eyebrow::before { display: none; }
.bestof-header .section-title { max-width: 22ch; margin-inline: auto; }
.bestof-header .section-title::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}
.bestof-header .section-title.in::after { transform: translateX(-50%) scaleX(1); }
.bestof-header .section-intro { margin-inline: auto; text-align: center; }

/* Responsive */
@media (max-width: 900px) {
  .bestof-stage { height: 380px; }
  .bestof-slide { width: 380px; height: 340px; }
  .bestof-slide.is-prev   { transform: translate(calc(-50% - 230px), -50%) rotateY(35deg) scale(.78); }
  .bestof-slide.is-next   { transform: translate(calc(-50% + 230px), -50%) rotateY(-35deg) scale(.78); }
  .bestof-slide.is-far-prev { transform: translate(calc(-50% - 380px), -50%) rotateY(50deg) scale(.55); }
  .bestof-slide.is-far-next { transform: translate(calc(-50% + 380px), -50%) rotateY(-50deg) scale(.55); }
  .bestof-slide-info h3 { font-size: 1.2rem; }
  .bestof-nav { width: 42px; height: 42px; font-size: 1.5rem; }
  .bestof-nav-prev { left: .5rem; }
  .bestof-nav-next { right: .5rem; }
}
@media (max-width: 600px) {
  .bestof-stage { height: 340px; }
  .bestof-slide { width: 280px; height: 300px; }
  .bestof-slide.is-prev   { transform: translate(calc(-50% - 170px), -50%) rotateY(28deg) scale(.7); }
  .bestof-slide.is-next   { transform: translate(calc(-50% + 170px), -50%) rotateY(-28deg) scale(.7); }
  .bestof-slide.is-far-prev { transform: translate(calc(-50% - 280px), -50%) rotateY(45deg) scale(.5); }
  .bestof-slide.is-far-next { transform: translate(calc(-50% + 280px), -50%) rotateY(-45deg) scale(.5); }
  .bestof-slide-info { padding: 1rem 1.2rem; }
  .bestof-slide-info h3 { font-size: 1.05rem; }
  .bestof-slide-info p { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bestof-slide { transition: opacity .2s; }
}

/* ===========================================================================
   BEST OF — Ancienne mosaïque cinema (gardée mais non utilisée)
   =========================================================================== */
.deprecated_bestof_cinema__
   - 4 cols × 3 rows : hero (2x2) + tall (1x2) + 2 carrés + 2 wide
   - Numérotation magazine 01-06
   - Tilt 3D au survol (mouvement subtil suivant la souris)
   - Auto-spotlight : éclaire une carte différente toutes les 4 secondes
   =========================================================================== */
.section-bestof {
  background:
    radial-gradient(ellipse at top left, rgba(200,32,47,0.10), transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #0E0E0E 100%);
  position: relative;
  overflow: hidden;
}
.section-bestof::before {
  content: "";
  position: absolute;
  bottom: 10%; left: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(200,32,47,0.10), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.bestof-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.bestof-header .eyebrow {
  display: inline-block;
  padding-left: 0;
  background: rgba(200,32,47,0.12);
  border: 1px solid rgba(200,32,47,0.35);
  padding: .35rem 1rem;
  border-radius: 999px;
  color: var(--red);
}
.bestof-header .eyebrow::before { display: none; }
.bestof-header .section-title { max-width: 22ch; margin-inline: auto; }
.bestof-header .section-title::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}
.bestof-header .section-title.in::after {
  transform: translateX(-50%) scaleX(1);
}
.bestof-header .section-intro {
  margin-inline: auto;
  text-align: center;
}

/* Auto-spotlight : pulse rouge sur une carte différente toutes les 4s */
@keyframes bestofSpotlight {
  0%, 96%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-color: var(--gray-border); }
  3% { box-shadow: 0 0 0 2px var(--red), 0 0 40px rgba(200,32,47,0.5); border-color: var(--red); }
  10% { box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-color: var(--gray-border); }
}

/* Badge spécial gold sur card hero */
@keyframes pulseBlue {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,210,255,0.5); }
  50% { box-shadow: 0 4px 22px rgba(0,210,255,0.9); }
}

/* CTA bas de section */
.bestof-bottom-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 600px) {
  .bestof-bottom-cta .btn { flex: 1; min-width: 0; }
}

/* ===========================================================================
   BEST OF cards reinforcement — premium badge + accent glow
   =========================================================================== */
.section .card-grid .card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow-red), inset 0 0 0 1px rgba(200,32,47,0.15);
}
.section .card-grid .card .card-title {
  position: relative;
  padding-bottom: .3rem;
}
.section .card-grid .card:hover .card-title {
  color: #fff;
}

/* ===========================================================================
   IMAGE SAFETY — fallback + aspect-ratio guarantee
   Les cartes utilisent aspect-ratio fixe + object-fit: cover,
   donc une photo verticale, horizontale ou trop grande ne casse jamais
   la mise en page. Si une image manque, un placeholder dégradé s'affiche.
   =========================================================================== */
.card-media,
.gal-item,
.event-card .card-media {
  background:
    linear-gradient(135deg, #1c1c1c, #0f0f0f);
  position: relative;
}
.product-media { position: relative; background: #fff; } /* photos studio fond blanc, image entière */
.card-media::before,
.gal-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px);
  pointer-events: none;
}
.card-media img,
.gal-item img,
.product-media img,
.event-card .card-media img,
.article-card .card-media img {
  position: relative;
  z-index: 1;
}
/* Si une image n'a pas chargé (broken / blocked), elle prend ces dimensions
   au lieu d'aplatir la carte. */
img {
  font-style: italic;            /* Quand alt s'affiche en cas de broken img */
  color: var(--gray-text);
  font-size: .75rem;
  text-align: center;
}

/* Reduced-motion: switch every animation off */
@media (prefers-reduced-motion: reduce) {
  .hero-visual-float img,
  .hero-particles span,
  .hero::before,
  .hero-badge::before,
  .stat-num,
  .cta-bar::after,
  .eyebrow::before,
  .section-title::after { animation: none !important; transition: none !important; transform: none !important; }
  .section-title::after { transform: scaleX(1) !important; }
}