/*
  AV Sport Distribution — Pages Ambassadeurs v1.0
  ────────────────────────────────────────────────
  Dépend de main.css (tokens :root).
  Thème clair : html.amb-light redéfinit les variables.
*/

/* ══════════════════════════════════════════
   THÈME CLAIR (surcharge des tokens)
══════════════════════════════════════════ */
html.amb-light {
  --bg:         #f5f5f1;
  --surface:    #ffffff;
  --surface2:   #efefe9;
  --border:     rgba(10,10,12,.10);
  --border2:    rgba(10,10,12,.18);
  --text:       #131316;
  --muted:      rgba(19,19,22,.55);
  --accent-dim: rgba(140,175,10,.14);
}
/* L'accent lime reste identique (texte noir dessus), mais on fonce
   ses usages "texte sur fond clair" pour garder le contraste. */
html.amb-light .amb-kicker,
html.amb-light .amb-stat-v,
html.amb-light .amb-tl-year { color: #7e9c0d; }

/* Corrections des éléments à couleurs codées en dur dans main.css */
html.amb-light .btn-ghost {
  background: rgba(10,10,12,.05);
  color: var(--text);
  border-color: var(--border2);
}
html.amb-light .btn-ghost:hover { background: rgba(10,10,12,.10); }
html.amb-light .site-nav { background: rgba(245,245,241,.85); }
html.amb-light body::before { opacity: .035; }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.amb-hero {
  padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.amb-hero::after {
  content: '';
  position: absolute;
  top: -180px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 65%);
  pointer-events: none;
}
.amb-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.amb-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.amb-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
}
html.amb-light .amb-badge { color: #7e9c0d; }

.amb-tagline {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--muted);
  max-width: 480px;
  margin-top: 14px;
}

.amb-hero-img {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border2);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  aspect-ratio: 4 / 5;
}
html.amb-light .amb-hero-img { box-shadow: 0 24px 60px rgba(0,0,0,.12); }
.amb-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Toggle thème : icônes */
.amb-icon-light { display: none; }
html.amb-light .amb-icon-dark  { display: none; }
html.amb-light .amb-icon-light { display: inline; }

/* Réseaux sociaux */
.amb-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.amb-social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  transition: border-color .15s ease, background .15s ease;
}
.amb-social:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-dim); }
.amb-social .material-symbols-outlined { font-size: 17px; }

/* ══════════════════════════════════════════
   COMMUN
══════════════════════════════════════════ */
.amb-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.amb-page h2 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: clamp(20px, 3vw, 36px);
}

/* ══════════════════════════════════════════
   STATS
══════════════════════════════════════════ */
.amb-stats { padding: clamp(32px, 4vw, 48px) 0; }
.amb-stats-grid {
  display: grid;
  /* min(100%, …) évite tout débordement quand la colonne est plus étroite
     que la largeur mini demandée. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1px;
  background: var(--border);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  align-items: stretch;
}
.amb-stat {
  background: var(--surface);
  padding: clamp(16px, 2.6vw, 26px) clamp(12px, 1.8vw, 20px);
  text-align: center;
  min-width: 0;              /* autorise le contenu à rétrécir dans la grille */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  overflow-wrap: anywhere;
}
.amb-stat-v {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.06;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;   /* casse un mot trop long plutôt que déborder */
  word-break: break-word;
  hyphens: auto;
  text-wrap: balance;
  /* Taille par défaut (valeurs courtes type "12", "17,2 km/h") */
  font-size: clamp(22px, 3.4vw, 38px);
}
/* Palier de taille selon la longueur du texte saisi (calculé en PHP).
   Le script d'ajustement affine ensuite au pixel près. */
.amb-stat-v[data-len="m"]  { font-size: clamp(20px, 2.8vw, 31px); letter-spacing: -.01em; }
.amb-stat-v[data-len="l"]  { font-size: clamp(17px, 2.2vw, 25px); letter-spacing: -.01em; }
.amb-stat-v[data-len="xl"] { font-size: clamp(15px, 1.8vw, 20px); letter-spacing: 0; line-height: 1.2; }
/* Les valeurs n'ayant pas toutes le même nombre de lignes, on aligne les
   libellés entre eux quand le navigateur sait faire (progressive enhancement). */
@supports (grid-template-rows: subgrid) {
  .amb-stat {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    justify-items: center;
    align-content: start;
  }
}
.amb-stat-l {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* ══════════════════════════════════════════
   HISTOIRE
══════════════════════════════════════════ */
.amb-bio-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.amb-bio-side { position: sticky; top: 96px; }
.amb-bio-text p {
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--text);
  opacity: .92;
  margin-bottom: 16px;
  max-width: 680px;
}
.amb-quote {
  margin-top: 28px;
  padding: 24px 28px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  position: relative;
}
.amb-quote .material-symbols-outlined {
  color: var(--accent);
  font-size: 28px;
  margin-bottom: 6px;
}
.amb-quote p {
  font-size: clamp(16px, 2vw, 19px);
  font-style: italic;
  margin-bottom: 10px;
}
.amb-quote cite {
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
}

/* ══════════════════════════════════════════
   PALMARÈS (timeline)
══════════════════════════════════════════ */
.amb-timeline {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--border2);
  margin-left: 8px;
}
.amb-tl-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  padding: 18px 0 18px 26px;
  position: relative;
}
.amb-tl-item::before {
  content: '';
  position: absolute;
  left: -6px; top: 27px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.amb-tl-year {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--accent);
}
.amb-tl-body h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.amb-tl-body p  { font-size: 14px; color: var(--muted); }

/* ══════════════════════════════════════════
   GALERIE + LIGHTBOX
══════════════════════════════════════════ */
.amb-gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(10px, 1.6vw, 16px);
}
.amb-gal-item {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--surface);
  aspect-ratio: 1;
  transition: transform .2s ease, border-color .2s ease;
}
.amb-gal-item:hover { transform: translateY(-3px); border-color: var(--accent); }
.amb-gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.amb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  cursor: zoom-out;
}
.amb-lightbox[hidden] { display: none; }
.amb-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.amb-lb-close {
  position: absolute;
  top: 22px; right: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}

/* ══════════════════════════════════════════
   PROMO + CTA
══════════════════════════════════════════ */
.amb-promo-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px);
  border-radius: var(--r);
  border: 1px solid var(--border2);
  background: var(--surface);
}
.amb-promo-glow {
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 70%;
  background: radial-gradient(ellipse at bottom, var(--accent-dim) 0%, transparent 70%);
  pointer-events: none;
}
.amb-promo-card h2 { margin-bottom: 12px; }
.amb-promo-txt {
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto 26px;
}
.amb-promo-code {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  border: 2px dashed var(--accent);
  background: var(--accent-dim);
  color: var(--text);
  cursor: pointer;
  transition: transform .15s ease;
}
.amb-promo-code:hover { transform: scale(1.03); }
.amb-code-value {
  font-family: 'Syne', sans-serif;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: .12em;
}
.amb-promo-code .material-symbols-outlined { font-size: 20px; opacity: .7; }
.amb-code-copied {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.amb-promo-code.is-copied .amb-code-copied { opacity: 1; }
.amb-promo-cta { margin-top: 28px; position: relative; z-index: 1; }

/* ══════════════════════════════════════════
   PRODUITS FAVORIS — RECHARGE.SHOP
   Couleurs de marque : rose → violet → bleu
══════════════════════════════════════════ */
.amb-produits {
  --rs-pink:   #d6247f;
  --rs-purple: #7c3aed;
  --rs-blue:   #3f5fc4;
  --rs-grad:   linear-gradient(100deg, var(--rs-pink) 0%, var(--rs-purple) 52%, var(--rs-blue) 100%);
}

/* Panneau à bordure dégradée */
.amb-rs-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--r);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--rs-grad) border-box;
}
.amb-rs-glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .14;
  pointer-events: none;
}
.amb-rs-glow--pink { background: var(--rs-pink); top: -180px; left: -120px; }
.amb-rs-glow--blue { background: var(--rs-blue); bottom: -200px; right: -120px; }
html.amb-light .amb-rs-glow { opacity: .10; }

.amb-kicker--rs {
  background: var(--rs-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.amb-light .amb-kicker--rs { color: transparent; }

.amb-prod-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.amb-prod-head h2 { margin-bottom: 0; }
.amb-rs-logo {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
html.amb-light .amb-rs-logo { box-shadow: 0 4px 14px rgba(0,0,0,.1); border: 1px solid var(--border); }
.amb-rs-logo:hover { transform: translateY(-2px); }
.amb-rs-logo img {
  height: 22px;
  width: auto !important;
  max-width: none;
  border-radius: 0;
}

/* Cards produit — style boutique : fond blanc quel que soit le thème */
.amb-prod-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
}
.amb-prod-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1a1a1f;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.amb-prod-card:hover {
  text-decoration: none;
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(124,58,237,.28);
}
.amb-prod-img {
  aspect-ratio: 1;
  background: #f7f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.amb-prod-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 0;
  padding: 14px;
  transition: transform .25s ease;
}
.amb-prod-card:hover .amb-prod-img img { transform: scale(1.05); }
.amb-prod-img .material-symbols-outlined { font-size: 44px; color: rgba(0,0,0,.18); }
.amb-prod-body {
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.amb-prod-body h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #1a1a1f;
}
.amb-prod-price {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  background: var(--rs-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.amb-prod-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--rs-grad);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: filter .15s ease;
}
.amb-prod-card:hover .amb-prod-btn { filter: brightness(1.12); }
.amb-prod-btn .material-symbols-outlined { font-size: 16px; }

.amb-prod-hint {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  font-size: 14px;
  color: var(--muted);
}
.amb-prod-hint .material-symbols-outlined {
  font-size: 18px;
  background: var(--rs-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.amb-prod-hint strong { color: var(--text); letter-spacing: .06em; }

/* ══════════════════════════════════════════
   UI/UX 2026
══════════════════════════════════════════ */

/* Barre de progression de lecture (scroll-driven, natif) */
.amb-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent), #8fd400);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 10001;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .amb-progress {
    animation: ambProgress linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes ambProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* View Transition du toggle (révélation circulaire pilotée en JS) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Apparition des sections au scroll (natif, zéro JS) */
@supports (animation-timeline: view()) {
  .amb-reveal {
    animation: ambFadeUp both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }
}
@keyframes ambFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Micro-parallaxe sur la photo hero */
@supports (animation-timeline: view()) {
  .amb-hero-img { overflow: hidden; }
  .amb-hero-img img {
    animation: ambParallax linear both;
    animation-timeline: view();
    scale: 1.1;
  }
}
@keyframes ambParallax {
  from { translate: 0 -3.5%; }
  to   { translate: 0  3.5%; }
}

/* Boutons d'action du hero (partage + thème) */
.amb-hero-actions { display: flex; gap: 10px; flex-shrink: 0; }
.amb-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.amb-icon-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.amb-share-ok {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--accent);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.amb-icon-btn.is-ok .amb-share-ok { opacity: 1; }

/* Mini-nav des sections (sticky + scrollspy) */
.amb-nav {
  position: sticky;
  top: 66px; /* sous la nav fixe du site */
  z-index: 90;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.amb-nav-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 10px;
  padding-bottom: 10px;
}
.amb-nav-inner::-webkit-scrollbar { display: none; }
.amb-nav a {
  flex-shrink: 0;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color .15s ease, background .15s ease;
}
.amb-nav a:hover { text-decoration: none; color: var(--text); }
.amb-nav a.is-active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
html.amb-light .amb-nav a.is-active { color: #7e9c0d; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; /* nav site + mini-nav */ }

/* Flèches du lightbox */
.amb-lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.amb-lb-arrow:hover { background: rgba(255,255,255,.18); }
.amb-lb-prev { left: 18px; }
.amb-lb-next { right: 18px; }
.amb-lb-arrow .material-symbols-outlined { font-size: 26px; }

/* Accessibilité : motion réduit → tout se calme */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .amb-progress,
  .amb-reveal,
  .amb-hero-img img { animation: none !important; }
  .amb-hero-img img { scale: 1; translate: 0 0; }
  .amb-prod-card, .amb-gal-item, .amb-icon-btn,
  .amb-theme-toggle, .amb-rs-logo, .amb-promo-code { transition: none !important; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .amb-bio-grid { grid-template-columns: 1fr; }
  .amb-bio-side { position: static; }
}
@media (max-width: 900px) {
  .amb-stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
}
@media (max-width: 700px) {
  .amb-hero-grid { grid-template-columns: 1fr; }
  .amb-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amb-stat { padding: 16px 12px; }
  .amb-hero-img { order: -1; aspect-ratio: 4 / 3; }
  .amb-tl-item { grid-template-columns: 1fr; gap: 4px; }
  .amb-prod-grid { grid-template-columns: repeat(2, 1fr); }

  /* Galerie : carrousel à snap horizontal */
  .amb-gal-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    margin-inline: calc(-1 * clamp(16px, 4vw, 24px));
    padding-inline: clamp(16px, 4vw, 24px);
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .amb-gal-grid::-webkit-scrollbar { display: none; }
  .amb-gal-item {
    flex: 0 0 74%;
    aspect-ratio: 4 / 5;
    scroll-snap-align: center;
  }
}
@media (max-width: 480px) {
  /* Une seule colonne : la cellule est large, on peut ré-agrandir le texte. */
  .amb-stats-grid { grid-template-columns: 1fr; }
  .amb-stat { padding: 18px 16px; }
  .amb-stat-v,
  .amb-stat-v[data-len="m"] { font-size: clamp(22px, 7vw, 30px); }
  .amb-stat-v[data-len="l"],
  .amb-stat-v[data-len="xl"] { font-size: clamp(19px, 5.5vw, 26px); line-height: 1.15; }
  .amb-socials { gap: 8px; }
  .amb-social { padding: 7px 12px; font-size: 12px; }
}

/* ══════════════════════════════════════════
   FOND SPORTIF + CONTENU EN BOX
   Activé par .amb-page.has-bg (voir single-ambassadeur.php).
   Le fond vient de la fiche, sinon du sport, sinon du défaut global.
   --amb-voile (0 → 1) règle l'intensité du voile, pilotée côté admin.
══════════════════════════════════════════ */
/* <html> ET <body> portent tous deux un fond opaque (main.css). Un enfant en
   z-index négatif se retrouve donc peint SOUS le fond du body, invisible.
   La parade : faire de .amb-page un contexte d'empilement (position + z-index).
   La couche passe alors derrière le contenu de <main> mais devant le fond du
   body, sans avoir à toucher au fond du body lui-même. */
.amb-page.has-bg {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.amb-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.amb-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 75% at 50% 0%,
      rgba(10,10,12, calc(var(--amb-voile, .7) * .40)) 0%,
      transparent 62%),
    linear-gradient(180deg,
      rgba(10,10,12, calc(var(--amb-voile, .7) * .80)) 0%,
      rgba(10,10,12, calc(var(--amb-voile, .7) * .92)) 55%,
      rgba(10,10,12, var(--amb-voile, .7)) 100%);
}
html.amb-light .amb-bg::after {
  background:
    radial-gradient(115% 75% at 50% 0%,
      rgba(245,245,241, calc(var(--amb-voile, .7) * .45)) 0%,
      transparent 62%),
    linear-gradient(180deg,
      rgba(245,245,241, calc(var(--amb-voile, .7) * .82)) 0%,
      rgba(245,245,241, calc(var(--amb-voile, .7) * .94)) 55%,
      rgba(245,245,241, var(--amb-voile, .7)) 100%);
}

/* Les sections deviennent transparentes : c'est le .wrap qui porte la box */
.amb-page.has-bg section { background: transparent; border-color: transparent; }
.amb-page.has-bg > section { padding: clamp(18px, 2.6vw, 34px) 0; }
.amb-page.has-bg .amb-hero { border-bottom: 0; }

.amb-page.has-bg > section:not(.amb-produits):not(.amb-promo-section) > .wrap {
  position: relative;
  padding: clamp(24px, 3.6vw, 46px);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(155deg, rgba(22,22,28,.84) 0%, rgba(10,10,12,.74) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow:
    0 34px 80px -28px rgba(0,0,0,.85),
    0 2px 10px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}
/* Liseré lumineux sur l'arête haute de chaque box */
.amb-page.has-bg > section:not(.amb-produits):not(.amb-promo-section) > .wrap::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, transparent 100%);
  pointer-events: none;
}
html.amb-light .amb-page.has-bg > section:not(.amb-produits):not(.amb-promo-section) > .wrap {
  border-color: rgba(10,10,12,.10);
  background: linear-gradient(155deg, rgba(255,255,255,.90) 0%, rgba(245,245,241,.80) 100%);
  box-shadow:
    0 30px 70px -30px rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
}
html.amb-light .amb-page.has-bg > section:not(.amb-produits):not(.amb-promo-section) > .wrap::before {
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, transparent 100%);
}

/* Panneaux déjà encadrés : on renforce seulement leur détachement */
.amb-page.has-bg .amb-rs-panel,
.amb-page.has-bg .amb-promo-card {
  box-shadow:
    0 34px 80px -28px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.amb-page.has-bg .amb-hero-img { box-shadow: 0 30px 70px -18px rgba(0,0,0,.8); }

/* Mini-nav : barre flottante plutôt que bandeau pleine largeur */
.amb-page.has-bg .amb-nav {
  background: transparent;
  border-bottom: 0;
  padding: 8px 0;
}
.amb-page.has-bg .amb-nav-inner {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,12,16,.74);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.85);
}
html.amb-light .amb-page.has-bg .amb-nav-inner {
  border-color: rgba(10,10,12,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.35);
}

/* Badges (type + sport) */
.amb-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.amb-badge--sport {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: var(--border2);
}
html.amb-light .amb-badge--sport { background: rgba(10,10,12,.06); color: var(--text); }

/* Repli : sans backdrop-filter, on opacifie les boxes pour rester lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .amb-page.has-bg > section:not(.amb-produits):not(.amb-promo-section) > .wrap {
    background: rgba(12,12,16,.94);
  }
  html.amb-light .amb-page.has-bg > section:not(.amb-produits):not(.amb-promo-section) > .wrap {
    background: rgba(250,250,247,.95);
  }
  .amb-page.has-bg .amb-nav-inner { background: rgba(12,12,16,.94); }
}

@media (max-width: 700px) {
  .amb-page.has-bg > section:not(.amb-produits):not(.amb-promo-section) > .wrap {
    border-radius: 20px;
    padding: 20px 18px;
  }
  .amb-page.has-bg > section:not(.amb-produits):not(.amb-promo-section) > .wrap::before {
    border-radius: 20px 20px 0 0;
  }
}