/* =========================================================
   Loops & Play — feuille de style principale
   Palette : noir + canary (jaune) + violet electrique
   Polices : Clash Display (display) / Satoshi (body)
   ========================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@200,300,400,500,600,700&f[]=satoshi@300,400,500,700&display=swap');

/* ---------- Tokens (HSL — identiques à l'app React) ---------- */
:root {
  --background: 0 0% 0%;
  --foreground: 276 9% 90%;
  --card: 0 0% 5%;
  --primary: 54 100% 54%;          /* canary */
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 8%;
  --muted-foreground: 276 9% 70%;
  --accent: 271 100% 54%;          /* electric violet */
  --accent-foreground: 0 0% 100%;
  --border: 276 9% 18%;
  --ring: 271 100% 54%;
  --radius: 0.75rem;
  --surface-light: 276 9% 79%;
  --surface-light-foreground: 0 0% 0%;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0 solid hsl(var(--border)); }
html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100%;
}
body {
  font-family: 'Satoshi', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Clash Display', sans-serif; line-height: 1.1; }
:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (max-width: 768px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Grain overlay ---------- */
.grain { position: relative; }
.grain::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ---------- Text glow (Hero) ---------- */
.text-glow { text-shadow: 0 0 80px rgba(255, 231, 19, 0.25), 0 0 160px rgba(142, 20, 255, 0.18); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  padding: 1.5rem 0;
  background: hsl(var(--background));
  user-select: none;
}
.marquee-track { display: flex; animation: marquee-scroll 30s linear infinite; width: max-content; }
.marquee-track.reverse { animation: marquee-scroll-reverse 30s linear infinite; }
.marquee-track span {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  color: hsl(var(--secondary));
  white-space: nowrap;
  font-size: 8vw;
}
@media (min-width: 768px) { .marquee-track span { font-size: 6vw; } }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marquee-scroll-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background-color .3s, backdrop-filter .3s, border-color .3s;
  background: transparent;
}
.navbar.scrolled {
  background: hsl(var(--background) / .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
}
.navbar-logo { display: flex; align-items: center; gap: .5rem; }
.navbar-logo img { height: 48px; width: auto; }
.navbar-logo span {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700; font-size: 1.125rem;
  letter-spacing: -.02em;
  color: hsl(var(--foreground));
}
.navbar-logo span em { font-style: normal; color: hsl(var(--accent)); }

.navbar-links { display: none; align-items: center; gap: 2rem; }
.navbar-links button {
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  transition: color .2s;
}
.navbar-links button:hover { color: hsl(var(--foreground)); }
@media (min-width: 768px) { .navbar-links { display: flex; } }

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700; font-size: .875rem;
  padding: .625rem 1.25rem;
  border-radius: var(--radius);
  transition: filter .2s, transform .2s;
  display: inline-block;
}
.btn-primary:hover { filter: brightness(1.1); }

/* Bouton Backstage (espace adhérent) */
.btn-backstage {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--accent));
  font-weight: 700;
  font-size: .8125rem;
  padding: .55rem 1rem;
  border-radius: var(--radius);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
  position: relative;
}
.btn-backstage::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: hsl(var(--accent));
  box-shadow: 0 0 8px hsl(var(--accent));
  animation: backstage-pulse 2s ease-in-out infinite;
  margin-right: .25rem;
}
.btn-backstage svg { opacity: .85; }
.btn-backstage:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
  box-shadow: 0 0 24px -4px hsl(var(--accent) / .55);
}
.btn-backstage:hover::before { background: hsl(var(--accent-foreground)); box-shadow: 0 0 8px hsl(var(--accent-foreground)); }
@keyframes backstage-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-backstage::before { animation: none; }
}

.navbar-mobile-toggle {
  display: flex; align-items: center; justify-content: center;
  color: hsl(var(--foreground));
}
@media (min-width: 768px) { .navbar-mobile-toggle { display: none; } }

.navbar-mobile {
  display: none;
  background: hsl(var(--background) / .95);
  backdrop-filter: blur(12px);
  border-top: 1px solid hsl(var(--border));
  padding: 1.5rem;
}
.navbar-mobile.open { display: block; }
.navbar-mobile button {
  display: block;
  color: hsl(var(--foreground));
  font-size: 1.125rem;
  padding: .5rem 0;
}
.navbar-mobile .btn-primary {
  display: block;
  text-align: center;
  margin-top: 1rem;
  padding: .75rem 1.25rem;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: hsl(var(--background) / .4);
}
.hero-content {
  position: relative; z-index: 10;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 40vh;
}
@media (min-width: 768px) { .hero-content { padding-top: 48vh; } }
.hero-tagline {
  font-size: clamp(1.875rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.hero-tagline .accent { color: hsl(var(--primary)); }
.hero-subtitle {
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
  max-width: 36rem;
  margin: 0 auto 2.5rem;
}
@media (min-width: 768px) { .hero-subtitle { font-size: 1.125rem; } }
.hero-ctas { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.btn-hero {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700; font-size: 1.125rem;
  padding: 1rem 2.5rem;
  border-radius: var(--radius);
  animation: pulse-soft 2s ease-in-out infinite;
  transition: filter .2s;
}
.btn-hero:hover { filter: brightness(1.1); }
.btn-link {
  color: hsl(var(--muted-foreground));
  font-size: .875rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s;
}
.btn-link:hover { color: hsl(var(--foreground)); }
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: .85; }
}

/* =========================================================
   SECTIONS génériques
   ========================================================= */
section[id], section.section {
  padding: 6rem 0;
}
@media (min-width: 768px) { section[id], section.section { padding: 8rem 0; } }
.section-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.section-subtitle {
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 4rem;
}

/* =========================================================
   PARCOURS
   ========================================================= */
.parcours { background: hsl(var(--background)); }
.parcours-title-emerald { color: hsl(var(--primary)); display: block; }
.parcours-title-violet  { color: hsl(var(--accent)); display: block; }
.parcours-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 64rem; margin: 0 auto;
}
@media (min-width: 768px) { .parcours-grid { grid-template-columns: 1fr 1fr; } }
.parcours-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 2rem;
  transition: border-color .3s, transform .3s;
}
@media (min-width: 768px) { .parcours-card { padding: 2.5rem; } }
.parcours-card:hover { border-color: hsl(var(--primary)); transform: translateY(-6px); }
.parcours-card .icon { color: hsl(var(--primary)); margin-bottom: 1.5rem; width: 40px; height: 40px; }
.parcours-card h3 {
  font-size: 1.5rem; font-weight: 700;
  margin-bottom: .75rem;
}
@media (min-width: 768px) { .parcours-card h3 { font-size: 1.875rem; } }
.parcours-card p { color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; }
.parcours-card ul li {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem 0;
}
.parcours-card ul li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: hsl(var(--primary));
  flex-shrink: 0;
}

/* =========================================================
   TARIFS
   ========================================================= */
.tarifs { background: hsl(var(--secondary)); }
.tarifs-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 64rem; margin: 0 auto;
}
@media (min-width: 768px) { .tarifs-grid { grid-template-columns: repeat(3, 1fr); } }
.tarif-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 2rem;
  display: flex; flex-direction: column;
  transition: border-color .3s, transform .3s;
}
.tarif-card:hover { border-color: hsl(var(--primary)); transform: translateY(-6px); }
.tarif-card.featured { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); }
.tarif-card .icon { color: hsl(var(--primary)); width: 32px; height: 32px; margin-bottom: 1rem; }
.tarif-card h3 { font-size: 1.25rem; font-weight: 700; }
.tarif-card .subtitle { font-size: .875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }
.tarif-card .price { margin-bottom: 1.5rem; }
.tarif-card .price strong {
  font-family: 'Clash Display', sans-serif;
  font-size: 3rem; font-weight: 700;
}
.tarif-card .price span { color: hsl(var(--muted-foreground)); font-size: 1.125rem; }
.tarif-card ul { flex: 1; margin-bottom: 2rem; }
.tarif-card ul li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  padding: .375rem 0;
}
.tarif-card ul li::before {
  content: ''; width: 4px; height: 4px;
  border-radius: 9999px;
  background: hsl(var(--primary));
  flex-shrink: 0;
}
.tarif-card .cta {
  text-align: center;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  transition: background .2s, filter .2s;
}
.tarif-card .cta:hover { background: hsl(var(--secondary)); }
.tarif-card.featured .cta {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
}
.tarif-card.featured .cta:hover { filter: brightness(1.1); background: hsl(var(--primary)); }

/* Secondary "ou payer en X fois" link sous le bouton principal */
.tarif-card .cta-alt {
  display: block;
  text-align: center;
  margin-top: .625rem;
  font-size: .8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.tarif-card .cta-alt:hover { color: hsl(var(--primary)); }
.tarif-card.featured .cta-alt:hover { color: hsl(var(--foreground)); }

/* Mention paiement échelonné sous le CTA WhatsApp */
.tarif-card .cta-note {
  display: block;
  text-align: center;
  margin-top: .75rem;
  font-size: .8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  font-style: italic;
  letter-spacing: .01em;
}

/* ====== Prix barré + prix promo (Pack 1 & Pack 2) ====== */
.tarif-card .price.price--promo {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .625rem;
  margin-bottom: 1rem;
}
.tarif-card .price-old {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: hsl(var(--destructive) / .75);
  line-height: 1;
}

/* ====== Bloc offre lancement sur la card (badge + countdown + date) ====== */
.tarif-promo {
  background:
    linear-gradient(135deg, hsl(var(--primary) / .12), hsl(var(--accent) / .1));
  border: 1px solid hsl(var(--primary) / .35);
  border-radius: .75rem;
  padding: .875rem .875rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.tarif-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  font-family: 'Satoshi', sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .15);
  padding: .25rem .625rem;
  border-radius: 9999px;
}

.tarif-promo-timer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: .75rem !important;
  width: 100%;
  justify-content: space-between;
}
/* Blindage responsive : forcer la ligne horizontale sur tous les breakpoints */
@media (max-width: 480px) {
  .tarif-promo-timer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: .5rem !important;
  }
  .tarif-promo-unit {
    padding: .4rem .15rem !important;
  }
  .tarif-promo-unit span {
    font-size: .95rem !important;
  }
}

.tarif-promo-unit {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  gap: .15rem;
  padding: .5rem .25rem;
  background: hsl(0 0% 0% / .35);
  border-radius: .375rem;
  text-align: center;
}
.tarif-promo-unit span {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: hsl(var(--primary));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarif-promo-unit small {
  display: block;
  font-size: .5625rem;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.tarif-promo-end {
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  line-height: 1.35;
  margin: 0;
}
.tarif-promo-end strong {
  color: hsl(var(--foreground));
  font-weight: 700;
}

/* Pack VIP "Headliner" : accent violet electrique */
.tarif-card.vip {
  border-color: hsl(var(--accent));
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(271 60% 8%) 100%);
  position: relative;
}
.tarif-card.vip::before {
  content: 'HEADLINE';
  position: absolute;
  top: -10px; right: 1.5rem;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .15em;
  padding: .25rem .625rem;
  border-radius: 9999px;
}
.tarif-card.vip:hover { border-color: hsl(var(--accent)); }
.tarif-card.vip .icon { color: hsl(var(--accent)); }
.tarif-card.vip ul li::before { background: hsl(var(--accent)); }
.tarif-card.vip .cta {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: transparent;
}
.tarif-card.vip .cta:hover { background: hsl(var(--accent)); filter: brightness(1.15); }

/* ====== Section "Engagement à l'année" ====== */
.tarifs-yearly-header {
  margin-top: 4rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  border-top: 1px solid hsl(var(--border));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.tarifs-yearly-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: hsl(var(--foreground));
}
.tarifs-yearly-subtitle {
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  line-height: 1.5;
  max-width: 36rem;
}
.tarifs-yearly-subtitle strong {
  color: hsl(var(--primary));
  font-weight: 700;
}

/* Grille spécifique 2 colonnes pour les packs à l'année */
.tarifs-grid-yearly {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .tarifs-grid-yearly { grid-template-columns: repeat(2, 1fr); }
}

/* Variante visuelle des cards "année" (accent violet subtil) */
.tarif-card-year {
  border-color: hsl(var(--accent) / .35);
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(271 35% 7%) 100%);
}
.tarif-card-year:hover {
  border-color: hsl(var(--accent));
}
.tarif-card-year .icon { color: hsl(var(--accent)); }
.tarif-card-year ul li::before { background: hsl(var(--accent)); }
.tarif-card-year .cta {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.tarif-card-year .cta:hover {
  background: hsl(var(--accent));
  filter: brightness(1.15);
}

/* CTA seance unique 80 EUR sous les packs */
.tarifs-discovery {
  margin-top: 3rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}
.tarifs-discovery-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
@media (min-width: 640px) {
  .tarifs-discovery-inner { flex-direction: row; text-align: left; }
}
.tarifs-discovery-inner h3 {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
}
.cta-secondary {
  display: inline-block;
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--primary));
  font-weight: 700;
  padding: .75rem 1.5rem;
  border-radius: var(--radius);
  transition: background .2s, color .2s;
  font-size: .95rem;
}
.cta-secondary:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* =========================================================
   COURS EN LIGNE
   ========================================================= */
.cours-en-ligne { background: hsl(var(--background)); }
.cours-en-ligne .eyebrow {
  display: inline-block;
  font-family: 'Satoshi', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--accent));
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
}
.cours-en-ligne .section-title { text-align: center; }
.cours-en-ligne .section-subtitle strong {
  color: hsl(var(--primary));
  font-weight: 700;
}

.cours-en-ligne-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .cours-en-ligne-grid { grid-template-columns: repeat(2, 1fr); }
}

.cours-card {
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(271 40% 8%) 100%);
  border: 1px solid hsl(var(--accent) / .35);
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: relative;
  transition: border-color .3s, transform .3s;
}
.cours-card:hover {
  border-color: hsl(var(--accent));
  transform: translateY(-6px);
}

.cours-card-icon-wrap {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--accent) / .15);
  border: 1px solid hsl(var(--accent) / .3);
  border-radius: 1rem;
  margin-bottom: .5rem;
}
.cours-card-icon { color: hsl(var(--accent)); }

.cours-card-eyebrow {
  font-family: 'Satoshi', sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: hsl(var(--accent));
  margin: 0;
}

.cours-card h3 {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0;
}

.cours-card-desc {
  font-size: .95rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.55;
  margin: 0 0 .5rem;
  flex: 1;
}

.cours-card-price {
  margin: .25rem 0 1.25rem;
}
.cours-card-price strong {
  font-family: 'Clash Display', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.cours-card-price span {
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem;
  margin-left: .125rem;
}

.cours-card .cta {
  text-align: center;
  padding: .875rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  transition: filter .2s, transform .2s;
}
.cours-card .cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.cours-card .cta-note {
  display: block;
  text-align: center;
  margin-top: .75rem;
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

/* =========================================================
   JEROME
   ========================================================= */
.jerome { background: hsl(var(--background)); }
.jerome-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 72rem; margin: 0 auto;
}
@media (min-width: 768px) { .jerome-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.jerome-photo .frame {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}
.jerome-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 30% center;
}
.jerome-text .eyebrow {
  display: inline-block;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--accent));
  margin-bottom: 1rem;
}
.jerome-text h2 {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.jerome-text p { font-size: 1.125rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; line-height: 1.7; }
.jerome-text .award {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 2rem;
  font-size: .875rem; font-weight: 500;
}
.jerome-text .award svg { color: hsl(var(--primary)); }
.jerome-text .socials { display: flex; align-items: center; gap: 1rem; }
.jerome-text .socials a {
  color: hsl(var(--muted-foreground));
  transition: color .2s;
}
.jerome-text .socials a:hover { color: hsl(var(--primary)); }

/* =========================================================
   STUDIO
   ========================================================= */
.studio { background: hsl(var(--secondary)); }
.studio-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 72rem; margin: 0 auto;
}
@media (min-width: 768px) { .studio-grid { grid-template-columns: 1fr 1fr; } }

/* Carousel */
.carousel {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform .5s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  position: relative;
}
.carousel-slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.carousel-label {
  position: absolute;
  bottom: 1rem; left: 1rem;
  background: hsl(var(--background) / .7);
  backdrop-filter: blur(8px);
  color: hsl(var(--foreground));
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .375rem .75rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
}
.carousel-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: hsl(var(--background) / .7);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  color: hsl(var(--foreground));
  transition: background .2s, color .2s;
  z-index: 2;
}
.carousel-btn:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.carousel-btn.prev { left: .75rem; }
.carousel-btn.next { right: .75rem; }

.studio-info p { font-size: 1.125rem; color: hsl(var(--muted-foreground)); margin-bottom: 2rem; line-height: 1.7; }
.studio-info p .lead {
  display: block;
  color: hsl(var(--foreground));
  font-weight: 500;
  margin-bottom: .5rem;
}
.studio-equipment {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.studio-equipment > div {
  display: flex; align-items: center; gap: .75rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  padding: 1rem;
  transition: border-color .2s;
}
.studio-equipment > div:hover { border-color: hsl(var(--primary)); }
.studio-equipment svg { color: hsl(var(--primary)); width: 24px; height: 24px; }
.studio-equipment span { font-size: .875rem; font-weight: 500; }
.studio-location { font-size: .875rem; color: hsl(var(--muted-foreground)); }

/* =========================================================
   TEMOIGNAGES
   ========================================================= */
.temoignages {
  background: hsl(var(--surface-light));
  color: hsl(var(--surface-light-foreground));
  padding: 6rem 0;
}
@media (min-width: 768px) { .temoignages { padding: 8rem 0; } }
.temoignages .section-title { color: hsl(var(--surface-light-foreground)); margin-bottom: 3rem; }
.temoignages-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: 'Satoshi', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: hsl(var(--surface-light-foreground));
  opacity: .75;
  margin-bottom: .75rem;
}
.temoignages-eyebrow .stars {
  color: #FBBC04; /* jaune Google */
  letter-spacing: .05em;
  font-size: 1.1em;
  line-height: 1;
}
.temoignages-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 72rem; margin: 0 auto;
}
@media (min-width: 768px) { .temoignages-grid { grid-template-columns: repeat(3, 1fr); } }

.temoignage-card {
  background: hsl(0 0% 100% / .92);
  border: 1px solid hsl(0 0% 0% / .08);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  transition: transform .25s, box-shadow .25s;
}
.temoignage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px hsl(0 0% 0% / .3);
}

.review-header {
  display: flex;
  align-items: center;
  gap: .875rem;
}
.review-avatar {
  width: 44px; height: 44px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #fff;
  flex-shrink: 0;
}
.review-meta { display: flex; flex-direction: column; gap: .125rem; }
.review-name {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: hsl(var(--surface-light-foreground));
  margin: 0;
}
.review-source {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: hsl(0 0% 0% / .55);
  margin: 0;
}
.google-g { display: inline-block; }

.review-rating {
  color: #FBBC04;
  font-size: 1.125rem;
  letter-spacing: .1em;
  line-height: 1;
}

.review-text {
  font-family: 'Satoshi', sans-serif;
  font-size: .95rem;
  line-height: 1.6;
  color: hsl(0 0% 0% / .8);
  margin: 0;
  flex: 1;
}
.review-text.rating-only {
  font-style: italic;
  color: hsl(0 0% 0% / .55);
}

.review-date {
  font-size: .75rem;
  color: hsl(0 0% 0% / .5);
  margin: 0;
}

/* =========================================================
   CHEQUE CADEAU
   ========================================================= */
.cheque {
  background: hsl(var(--background));
  text-align: center;
  padding: 6rem 0;
}
@media (min-width: 768px) { .cheque { padding: 8rem 0; } }
.cheque .icon { color: hsl(var(--primary)); width: 48px; height: 48px; margin: 0 auto 1.5rem; }
.cheque h2 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.cheque p {
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
  max-width: 36rem;
  margin: 0 auto 2.5rem;
}
.cheque .cta {
  display: inline-block;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700; font-size: 1.125rem;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  transition: filter .2s;
}
.cheque .cta:hover { filter: brightness(1.1); }

/* ---------- Carte cadeau interactive ---------- */
.giftcard {
  position: relative;
  display: inline-block;
  width: min(520px, 88vw);
  aspect-ratio: 3 / 2;
  margin: 1rem auto 1.5rem;
  perspective: 1200px;
  cursor: pointer;
  transform-style: preserve-3d;
  isolation: isolate;
}

/* Halo pulse derriere la carte */
.giftcard-halo {
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  border-radius: 32px;
  background:
    radial-gradient(closest-side at 25% 35%, hsl(var(--accent) / .55), transparent 65%),
    radial-gradient(closest-side at 75% 65%, hsl(var(--primary) / .55), transparent 65%),
    radial-gradient(closest-side at 50% 80%, hsl(155 61% 51% / .35), transparent 70%);
  filter: blur(40px);
  opacity: .55;
  animation: giftcard-halo-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes giftcard-halo-pulse {
  0%, 100% { transform: scale(1); opacity: .4; }
  50% { transform: scale(1.08); opacity: .7; }
}

/* Couche tilt 3D + float */
.giftcard-tilt {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) translateY(0);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  animation: giftcard-float 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes giftcard-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

.giftcard-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18px;
  box-shadow:
    0 30px 60px -20px hsl(0 0% 0% / .65),
    0 18px 30px -15px hsl(var(--accent) / .35);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Shine sweep diagonal au survol */
.giftcard-shine {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.giftcard-shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    hsl(0 0% 100% / .12) 40%,
    hsl(0 0% 100% / .35) 50%,
    hsl(0 0% 100% / .12) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left .9s cubic-bezier(.3, .8, .2, 1);
}

/* HOVER : fuite 3D (translate + tilt) + shine */
.giftcard:hover .giftcard-tilt {
  animation: none; /* coupe le float idle pour que le hover prenne le dessus */
  transform:
    translate3d(var(--tilt-tx, 0px), calc(var(--tilt-ty, 0px) - 6px), 0)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    scale(1.02);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.giftcard:hover .giftcard-img {
  box-shadow:
    0 45px 80px -20px hsl(0 0% 0% / .8),
    0 25px 50px -15px hsl(var(--accent) / .55),
    0 10px 30px -10px hsl(var(--primary) / .35);
}
.giftcard:hover .giftcard-shine::before { left: 150%; }
.giftcard:hover .giftcard-halo {
  animation: none;
  transform: scale(1.15);
  opacity: .85;
  transition: transform .4s ease, opacity .4s ease;
}

/* CLICK : petit bounce */
.giftcard:active .giftcard-tilt {
  animation: none;
  transform: scale(.97) translateY(0);
  transition-duration: .12s;
}

/* Label sous la carte */
.giftcard-cta-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: hsl(var(--primary));
  font-family: 'Satoshi', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 1.5rem;
  width: 100%;
  text-align: center;
}
.giftcard-arrow {
  display: inline-block;
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1;
  animation: giftcard-arrow-bounce 1.6s ease-in-out infinite;
}
@keyframes giftcard-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .giftcard-arrow { animation: none; }
}

/* Respect du reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .giftcard-tilt, .giftcard-halo { animation: none !important; }
}

/* =========================================================
   TEMOIGNAGES - CTA Google
   ========================================================= */
.temoignages-google {
  text-align: center;
  margin-top: 3rem;
}
.google-link {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: hsl(var(--surface-light-foreground));
  background: hsl(0 0% 100% / .8);
  border: 1px solid hsl(0 0% 0% / .15);
  padding: .875rem 1.5rem;
  border-radius: 9999px;
  transition: background .2s, transform .2s, border-color .2s;
}
.google-link:hover {
  background: hsl(0 0% 100%);
  border-color: hsl(var(--accent));
  transform: translateY(-2px);
}

/* =========================================================
   INSTAGRAM
   ========================================================= */
.instagram { background: hsl(var(--background)); padding: 6rem 0; }
@media (min-width: 768px) { .instagram { padding: 8rem 0; } }
.instagram-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .instagram-header { flex-direction: row; text-align: left; }
}
.instagram-header .eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: .5rem;
}
.instagram-header .section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
  text-align: inherit;
}
.instagram-follow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .95rem;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  padding: .75rem 1.25rem;
  border-radius: 9999px;
  transition: background .2s, border-color .2s, color .2s;
}
.instagram-follow:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 640px) { .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }
@media (min-width: 1024px) { .instagram-grid { grid-template-columns: repeat(6, 1fr); } }

.instagram-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s, border-color .3s;
}
.instagram-cell:hover {
  transform: scale(1.03);
  border-color: hsl(var(--primary));
  z-index: 2;
}
.instagram-cell img,
.instagram-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.instagram-cell.placeholder {
  background: linear-gradient(135deg, hsl(271 60% 8%), hsl(0 0% 5%));
}
.instagram-cell.placeholder span {
  font-family: 'Clash Display', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  color: hsl(var(--muted-foreground));
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Quand le widget Behold est présent : on neutralise la grille CSS
   et on laisse le widget gérer sa propre mise en page */
.instagram-grid:has(behold-widget) {
  display: block;
  max-width: 1200px;
  /* Padding mesuré pour que les halos respirent sans déborder */
  padding: 1.5rem 1rem 2rem;
}
behold-widget {
  display: block;
  width: 100%;
  --behold-row-gap: 1.5rem;
  --behold-column-gap: 1.5rem;
  --behold-border-radius: .75rem;

  /* Halo lumineux derrière chaque post — drop-shadow suit l'alpha visible
     donc chaque image rectangulaire reçoit son propre halo, et passe
     à travers les overflow:hidden internes du widget. */
  filter:
    drop-shadow(0 0 8px hsl(271 100% 54% / .55))    /* glow violet proche */
    drop-shadow(0 0 20px hsl(271 100% 54% / .28))   /* halo violet diffus */
    drop-shadow(0 0 40px hsl(54 100% 54% / .1));    /* irradiation canary lointaine */
  transition: filter .4s ease;
}

/* Au survol global du widget : le halo s'intensifie */
behold-widget:hover {
  filter:
    drop-shadow(0 0 12px hsl(271 100% 54% / .75))
    drop-shadow(0 0 28px hsl(271 100% 54% / .4))
    drop-shadow(0 0 55px hsl(54 100% 54% / .15));
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  background: hsl(var(--surface-light));
  color: hsl(var(--surface-light-foreground));
  padding: 6rem 0;
}
@media (min-width: 768px) { .faq { padding: 8rem 0; } }
.faq .section-title { color: hsl(var(--surface-light-foreground)); margin-bottom: 4rem; }
.faq-wrap { max-width: 48rem; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
  background: hsl(0 0% 0% / .05);
  border: 1px solid hsl(0 0% 0% / .1);
  border-radius: .75rem;
  padding: 0 1.5rem;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  text-align: left;
  font-weight: 700;
  padding: 1.25rem 0;
  color: hsl(var(--surface-light-foreground));
}
.faq-question svg {
  transition: transform .3s;
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-answer-inner {
  padding-bottom: 1.25rem;
  color: hsl(0 0% 0% / .7);
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background: hsl(var(--background)); }
.contact-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 64rem; margin: 0 auto;
}
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form label {
  display: block;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: .25rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: .75rem 1rem;
  color: hsl(var(--foreground));
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: hsl(var(--muted-foreground)); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px hsl(var(--ring));
}
.contact-form textarea { resize: none; }
.contact-form button[type="submit"] {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700;
  padding: 1rem;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: filter .2s;
}
.contact-form button[type="submit"]:hover { filter: brightness(1.1); }

.contact-wa {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 2.5rem;
}
.contact-wa .icon { color: hsl(var(--primary)); width: 64px; height: 64px; margin-bottom: 1.5rem; }
.contact-wa h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: .75rem; }
.contact-wa p {
  color: hsl(var(--muted-foreground));
  margin-bottom: 2rem;
}
.contact-wa a.cta {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700; font-size: 1.125rem;
  padding: 1rem 2.5rem;
  border-radius: var(--radius);
  transition: filter .2s;
}
.contact-wa a.cta:hover { filter: brightness(1.1); }
.contact-wa a.phone {
  margin-top: 1rem;
  color: hsl(var(--muted-foreground));
  transition: color .2s;
}
.contact-wa a.phone:hover { color: hsl(var(--foreground)); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  padding: 2.5rem 0;
  background: hsl(var(--secondary));
  border-top: 1px solid hsl(var(--border));
}
.footer-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; align-items: center; }
}
.footer img { height: 64px; width: auto; }
.footer-center {
  display: flex; flex-direction: column;
  align-items: center;
  gap: .875rem;
}
.footer-socials {
  display: flex; align-items: center;
  gap: 1rem;
}
.footer-socials a {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  color: hsl(var(--muted-foreground));
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.footer-socials a:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
  transform: translateY(-2px);
}
.footer p, .footer a {
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  transition: color .2s;
}
.footer a:hover { color: hsl(var(--primary)); }
.footer-socials a:hover { color: hsl(var(--primary-foreground)); }

/* =========================================================
   BLOG : navbar active + section preview home
   ========================================================= */
.navbar-links a.nav-active,
.navbar-mobile a.nav-active {
  color: hsl(var(--primary));
}
.navbar-links a {
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  transition: color .2s;
  text-decoration: none;
}
.navbar-links a:hover { color: hsl(var(--foreground)); }
.navbar-mobile a {
  display: block;
  color: hsl(var(--foreground));
  font-size: 1.125rem;
  padding: .5rem 0;
  text-decoration: none;
}

/* Section "Derniers articles" sur la home */
.blog-preview { background: hsl(var(--background)); padding: 6rem 0; }
@media (min-width: 768px) { .blog-preview { padding: 8rem 0; } }
.blog-preview-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .blog-preview-header { flex-direction: row; align-items: flex-end; }
}
.blog-preview-header .eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: .5rem;
}
.blog-preview-header .section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  text-align: left;
  margin: 0;
}
.blog-preview-all {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: hsl(var(--primary));
  white-space: nowrap;
  transition: color .2s, transform .2s;
}
.blog-preview-all:hover { color: hsl(var(--foreground)); transform: translateX(4px); }

/* =========================================================
   BLOG : grille + cards
   ========================================================= */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  display: flex;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  text-decoration: none;
  color: inherit;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: hsl(var(--primary));
  box-shadow: 0 30px 60px -30px hsl(0 0% 0% / .6);
}
.blog-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: hsl(var(--secondary));
}
.blog-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }

.blog-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
}
.blog-card-eyebrow {
  font-family: 'Satoshi', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: hsl(var(--accent));
  margin: 0;
}
.blog-card-body h2,
.blog-card-body h3 {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: hsl(var(--foreground));
  margin: 0;
}
.blog-card-body > p {
  color: hsl(var(--muted-foreground));
  font-size: .95rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.blog-card-link {
  display: inline-block;
  font-weight: 700;
  color: hsl(var(--primary));
  font-size: .9rem;
  margin-top: .5rem;
}

/* =========================================================
   BLOG : page index (blog.html)
   ========================================================= */
.blog-header {
  padding: 10rem 0 5rem;
  background: hsl(var(--background));
  text-align: center;
}
.blog-header .blog-eyebrow {
  display: inline-block;
  font-family: 'Satoshi', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 1rem;
}
.blog-header h1 {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.blog-header .blog-intro {
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
  max-width: 40rem;
  margin: 0 auto;
}

.blog-list { padding: 4rem 0 6rem; background: hsl(var(--background)); }
.blog-list-empty {
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: .95rem;
  margin-top: 3rem;
}
.blog-list-empty a { color: hsl(var(--primary)); font-weight: 700; }
.blog-list-empty a:hover { text-decoration: underline; }

.blog-cta {
  padding: 5rem 0;
  background: hsl(var(--secondary));
  text-align: center;
  border-top: 1px solid hsl(var(--border));
}
.blog-cta h2 {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.blog-cta p {
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem;
  max-width: 36rem;
  margin: 0 auto 2rem;
}
.blog-cta .btn-primary {
  font-size: 1rem;
  padding: 1rem 2rem;
}

/* =========================================================
   ARTICLE (single article page)
   ========================================================= */
.page-article .navbar { background: hsl(var(--background) / .92); backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); }

.article {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.article-header {
  padding: 9rem 0 2rem;
  text-align: center;
}
.article-back {
  display: inline-block;
  font-size: .875rem;
  font-weight: 700;
  color: hsl(var(--muted-foreground));
  margin-bottom: 2rem;
  transition: color .2s;
}
.article-back:hover { color: hsl(var(--primary)); }
.article-eyebrow {
  font-family: 'Satoshi', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 1rem;
}
.article-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  max-width: 56rem;
  margin: 0 auto 1.5rem;
}
.article-meta {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  font-family: 'Satoshi', sans-serif;
}
.article-meta .dot { opacity: .5; }

.article-hero {
  max-width: 64rem;
  margin: 2rem auto 3rem;
  padding: 0 1rem;
}
.article-hero img {
  width: 100%;
  border-radius: 1.25rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-body {
  max-width: 44rem;
  padding: 0 1rem;
}
.article-lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
  font-weight: 500;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid hsl(var(--border));
}
.article-body h2 {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: hsl(var(--foreground));
  margin: 3rem 0 1rem;
}
.article-body h3 {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
}
.article-body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.25rem;
}
.article-body ul,
.article-body ol {
  margin: 1rem 0 1.5rem 1.25rem;
  color: hsl(var(--muted-foreground));
  font-size: 1.0625rem;
  line-height: 1.75;
}
.article-body li { margin-bottom: .5rem; padding-left: .25rem; }
.article-body a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body a:hover { filter: brightness(1.2); }
.article-body strong { color: hsl(var(--foreground)); font-weight: 700; }
.article-body blockquote {
  border-left: 3px solid hsl(var(--primary));
  padding: .5rem 0 .5rem 1.5rem;
  margin: 2rem 0;
  font-size: 1.125rem;
  font-style: italic;
  color: hsl(var(--foreground));
}

.article-cta {
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(271 60% 8%) 100%);
  border: 1px solid hsl(var(--accent) / .5);
  border-radius: 1.25rem;
  padding: 2.5rem;
  margin: 4rem 0 2rem;
  text-align: center;
}
.article-cta h3 {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.article-cta p {
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
}
.article-cta .btn-primary,
.article-body a.btn-primary {
  font-size: 1rem;
  padding: .875rem 1.75rem;
  display: inline-block;
  /* Override .article-body a qui force la couleur primary jaune (rendrait le texte invisible sur fond jaune) */
  color: hsl(var(--primary-foreground));
  text-decoration: none;
}
.article-body a.btn-primary:hover {
  color: hsl(var(--primary-foreground));
}

.article-author {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 44rem;
  padding: 2rem 1rem 6rem;
  margin: 0 auto;
}
.article-author img {
  width: 64px; height: 64px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}
.author-name {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 .25rem;
}
.author-bio {
  font-size: .9rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
  line-height: 1.5;
}

/* Blog index page : navbar toujours visible */
.page-blog .navbar,
.page-article .navbar {
  background: hsl(var(--background) / .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
}

/* =========================================================
   BACKSTAGE PLACEHOLDER (espace-adherent.html)
   ========================================================= */
.page-backstage-placeholder { min-height: 100vh; display: flex; flex-direction: column; }
.page-backstage-placeholder .navbar { background: hsl(var(--background) / .92); backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); }

.backstage-hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 0 4rem;
  text-align: center;
  overflow: hidden;
}
.backstage-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, hsl(var(--accent) / .18), transparent 50%),
    radial-gradient(circle at 75% 70%, hsl(var(--primary) / .12), transparent 50%);
  z-index: 0;
}
.backstage-content { position: relative; z-index: 1; max-width: 720px; }

.backstage-eyebrow {
  display: inline-block;
  font-family: 'Satoshi', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: hsl(var(--accent));
  margin-bottom: 1.5rem;
  padding: .5rem 1rem;
  border: 1px solid hsl(var(--accent) / .35);
  border-radius: 9999px;
  background: hsl(var(--accent) / .08);
}
.backstage-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
}
.backstage-title .accent {
  color: hsl(var(--primary));
  text-shadow: 0 0 80px hsl(var(--primary) / .35);
}
.backstage-lead {
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 2.5rem;
}

.backstage-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 520px;
  margin: 0 auto 2.5rem;
}
@media (min-width: 640px) { .backstage-features { grid-template-columns: repeat(4, 1fr); max-width: 720px; } }
.backstage-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem .75rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  transition: border-color .2s, transform .2s;
}
.backstage-feature:hover { border-color: hsl(var(--primary)); transform: translateY(-3px); }
.backstage-feature svg { color: hsl(var(--primary)); }
.backstage-feature span {
  font-size: .8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-align: center;
}

.backstage-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Satoshi', sans-serif;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 2rem;
}
.backstage-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 12px hsl(var(--primary));
  animation: backstage-status-pulse 1.8s ease-in-out infinite;
}
@keyframes backstage-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.backstage-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
}
@media (min-width: 640px) { .backstage-ctas { flex-direction: row; justify-content: center; } }
.backstage-ctas .btn-primary {
  font-size: 1rem;
  padding: 1rem 2rem;
}
.backstage-cta-secondary {
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  font-size: .95rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s;
}
.backstage-cta-secondary:hover { color: hsl(var(--primary)); }

/* Login form sur la page Backstage placeholder */
.backstage-login {
  padding: 4rem 0 6rem;
  background: hsl(var(--background));
}
.backstage-login-card {
  max-width: 460px;
  margin: 0 auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  text-align: left;
}
.backstage-login-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: .75rem;
}
.backstage-login-card h2 {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: .5rem;
  line-height: 1.15;
}
.backstage-login-card .muted {
  font-size: .9rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.75rem;
}
.backstage-login-form { display: flex; flex-direction: column; gap: 1.25rem; }
.backstage-field { display: flex; flex-direction: column; gap: .375rem; }
.backstage-field label {
  font-size: .875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.backstage-field input {
  width: 100%;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: .875rem 1rem;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.backstage-field input::placeholder { color: hsl(var(--muted-foreground)); opacity: .55; }
.backstage-field input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px hsl(var(--ring));
}
.backstage-msg {
  font-size: .875rem;
  min-height: 1.25rem;
}
.backstage-msg.error {
  color: hsl(0 84% 65%);
  background: hsl(0 84% 60% / .1);
  border: 1px solid hsl(0 84% 60% / .3);
  padding: .75rem 1rem;
  border-radius: var(--radius);
}
.backstage-msg.success {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .1);
  border: 1px solid hsl(var(--primary) / .3);
  padding: .75rem 1rem;
  border-radius: var(--radius);
}
.backstage-login-form .btn-primary {
  padding: 1rem 1.5rem;
  font-size: 1rem;
  display: block;
  width: 100%;
  text-align: center;
}
.backstage-login-form .btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.backstage-forgot {
  display: block;
  text-align: center;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  transition: color .2s;
}
.backstage-forgot:hover { color: hsl(var(--primary)); }

/* =========================================================
   Réduction de mouvement
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   POPUP OFFRE DE LANCEMENT (Pack 1 & Pack 2 promo)
   ========================================================= */

/* Respect strict de l'attribut hidden : quand la modale est cachée
   elle disparaît complètement (pas juste transparente),
   pour ne pas bloquer les clics sur le reste de la page */
.promo-modal[hidden] { display: none !important; }

.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity .3s ease;
}
.promo-modal.is-open { opacity: 1; }

.promo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / .85);
  backdrop-filter: blur(8px);
}

.promo-modal-content {
  position: relative;
  background:
    radial-gradient(circle at 30% 10%, hsl(var(--accent) / .18), transparent 55%),
    radial-gradient(circle at 90% 90%, hsl(var(--primary) / .18), transparent 55%),
    hsl(0 0% 4%);
  border: 1px solid hsl(var(--border));
  border-radius: 1.5rem;
  padding: 2.25rem 1.75rem;
  max-width: 32rem;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  color: hsl(var(--foreground));
  box-shadow:
    0 30px 90px hsl(0 0% 0% / .6),
    0 0 60px hsl(var(--primary) / .15);
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.promo-modal.is-open .promo-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (min-width: 640px) {
  .promo-modal-content { padding: 2.75rem 2.5rem; }
}

.promo-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: hsl(0 0% 100% / .06);
  color: hsl(var(--muted-foreground));
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.promo-modal-close:hover {
  background: hsl(0 0% 100% / .12);
  color: hsl(var(--foreground));
}

.promo-modal-eyebrow {
  font-family: 'Satoshi', sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: hsl(var(--primary));
  margin-bottom: .75rem;
}

.promo-modal-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: .5rem;
}

.promo-modal-subtitle {
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  margin-bottom: 1.75rem;
  line-height: 1.4;
}

.promo-modal-packs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.promo-pack {
  background: hsl(0 0% 100% / .04);
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.promo-pack-name {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.promo-pack-hours {
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
  letter-spacing: .05em;
  text-transform: uppercase;
}

.promo-pack-prices {
  margin-top: .25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
}

.promo-pack-old {
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: hsl(var(--destructive) / .8);
}

.promo-pack-new {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: hsl(var(--primary));
  line-height: 1;
}

.promo-modal-countdown {
  background: hsl(0 0% 100% / .05);
  border: 1px solid hsl(var(--primary) / .3);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.promo-countdown-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: .5rem;
}

.promo-countdown-timer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}

.promo-countdown-unit {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .5rem .25rem;
  background: hsl(0 0% 0% / .3);
  border-radius: .5rem;
}
.promo-countdown-unit span {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: hsl(var(--primary));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.promo-countdown-unit small {
  font-size: .625rem;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.promo-modal-cta {
  display: block;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  border-radius: .75rem;
  text-decoration: none;
  transition: filter .2s, transform .2s;
  margin-bottom: 1rem;
}
.promo-modal-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.promo-modal-legal {
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
}

@media (max-width: 380px) {
  .promo-modal-content { padding: 2rem 1.25rem; }
  .promo-pack-new { font-size: 1.5rem; }
  .promo-countdown-unit span { font-size: 1.125rem; }
}