/* Premium landing — motion, gradients, animations */

/* === Overflow guard — empêche le scroll horizontal sur mobile (swipe latéral) ===
   ⚠ `overflow-x: hidden` sur html/body casse `position: sticky` partout (le body
   devient un scroll container). On utilise `overflow-x: clip` (équivalent visuel,
   pas de scroll container) avec fallback `hidden` pour les vieux Safari < 16. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* Grille de fond globale — leitmotiv du hero, appliqué sur tout le site (sections claires) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 27, 45, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 27, 45, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 60%, transparent 100%);
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--navy), var(--accent));
  z-index: 200;
  transition: width 0.05s linear;
  width: 0;
}

/* ===== Premium Hero (dark grid, matches mega-CTA) ===== */
.hero-v2 {
  position: relative;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
}
.hero-v2-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 85%);
}
.hero-v2-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 500px at 20% 20%, rgba(123, 179, 232, 0.22), transparent 55%),
    radial-gradient(600px 500px at 80% 80%, rgba(201, 169, 97, 0.12), transparent 55%);
}
[data-accent="gold"] .hero-v2-glow {
  background:
    radial-gradient(700px 500px at 20% 20%, rgba(201, 169, 97, 0.26), transparent 55%),
    radial-gradient(600px 500px at 80% 80%, rgba(123, 179, 232, 0.12), transparent 55%);
}

.hero-v2-inner {
  position: relative;
  z-index: 1;
  padding: 96px 0 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 420px);
  gap: 56px;
  align-items: center;
}
@media (max-width: 1100px) {
  .hero-v2-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; }
}
@media (max-width: 860px) {
  .hero-v2-inner { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 48px; }
}

.hv-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
  white-space: nowrap;
}
.hv-pill .dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
  50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

.hv-headline {
  margin: 28px 0 24px;
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(44px, 6.2vw, 84px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #fff;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
}
[data-type="serif"] .hv-headline {
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hv-headline .accent {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
  padding-right: 0.08em;
  white-space: nowrap;
}

.hv-lead {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 540px;
  margin: 0 0 32px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.4s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.hv-meta {
  margin-top: 28px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.6s forwards;
}
.hv-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.hv-meta-item svg { color: #22C55E; }

/* Hero form card — same DNA as mega-cta-form */
.hv-form {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  padding: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.35);
  opacity: 0;
  animation: fadeUp 0.8s ease 0.5s forwards;
}
.hv-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.hv-form-head h4 {
  margin: 0;
  font-size: 13px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.35;
  min-width: 0;
}
.hv-form-head .badge {
  font-size: 11px;
  font-family: var(--font-mono);
  color: #22C55E;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 4px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.hv-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.hv-form input, .hv-form select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.hv-form input::placeholder { color: rgba(255,255,255,0.38); }
.hv-form input:focus, .hv-form select:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
}
.hv-form select {
  margin-bottom: 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.hv-form .btn-accent, .mega-cta-form .btn-accent {
  width: 100%;
  padding: 15px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.hv-form .btn-accent::before, .mega-cta-form .btn-accent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}
.hv-form .btn-accent:hover::before, .mega-cta-form .btn-accent:hover::before { transform: translateX(100%); }
.hv-form .foot {
  margin: 12px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.hv-form .phone-line {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.hv-form .phone-line a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.hv-form .phone-line a:hover { color: var(--accent); }

/* Hero logos strip */
.hv-logos {
  position: relative;
  z-index: 1;
  padding: 28px 0 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hv-logos-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-bottom: 20px;
}
.hv-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
@media (max-width: 720px) { .hv-logos-row { gap: 28px; } }
.hv-logos-row .logo {
  font-family: var(--font-display, var(--font-sans));
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s;
}
[data-type="serif"] .hv-logos-row .logo { font-weight: 400; font-style: italic; }
.hv-logos-row .logo:hover { color: #fff; }

/* ===== Marquee ===== */
.marquee {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  position: relative;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--white), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--white), transparent); }
.marquee-track {
  display: flex;
  gap: 72px;
  width: max-content;
  align-items: center;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  white-space: nowrap;
}
.marquee-logo {
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) opacity(0.55);
  transition: filter 0.3s ease;
}
.marquee-item:hover .marquee-logo { filter: grayscale(1) brightness(0) opacity(0.9); }

/* Mobile : empêche tout débordement du marquee dans le viewport */
@media (max-width: 860px) {
  .marquee { overflow-x: hidden; max-width: 100%; }
  .marquee::before, .marquee::after { width: clamp(40px, 10vw, 80px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== Premium pillars ===== */
.pillars-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 860px) { .pillars-v2 { grid-template-columns: 1fr; gap: 16px; } }

.pillar-v2 {
  background: var(--white);
  padding: 36px 32px 36px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
}
.pillar-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -12px rgba(15, 27, 45, 0.12);
  border-color: rgba(15, 27, 45, 0.14);
}
.pillar-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 260px at var(--mx, 50%) var(--my, 0%), rgba(27, 58, 107, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.pillar-v2:hover::before { opacity: 1; }
.pillar-v2:hover .pv-icon {
  background: rgba(249, 115, 22, 0.12);
  color: #F97316;
}
.pv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}
.pv-num {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
  opacity: 0.15;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.pillar-v2:hover .pv-num { opacity: 0.35; }
[data-type="serif"] .pv-num { font-weight: 400; font-style: italic; }
.pv-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--navy-100);
  color: var(--navy);
  display: grid;
  place-items: center;
}
.pillar-v2 h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.pillar-v2 h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pv-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.22);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.pv-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.pillar-v2 p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ===== Split showcase — big headline + feature tiles ===== */
.showcase {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } }

.showcase-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
}
[data-type="serif"] .showcase-title { font-weight: 400; letter-spacing: -0.012em; }
.showcase-title em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
  background: linear-gradient(120deg, var(--navy), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Matching visualization */
.match-viz {
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: 100%;
  min-height: 640px;
  background: linear-gradient(180deg, #fff, #F3F6FB);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 48px;
  box-shadow: var(--shadow-md);
}
.match-viz::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 90%);
}
.match-left, .match-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.match-left  { left: 48px; gap: 120px; }
.match-right { right: 48px; gap: 120px; }
.match-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 220px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  position: relative;
}
.match-card .av {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--navy-100);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.match-card .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: inherit;
  display: block;
}
.match-card .info {
  display: flex; flex-direction: column; gap: 2px;
}
.match-card .info strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.match-card .info span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.match-card {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease, border-color 0.5s ease, opacity 0.5s ease;
  opacity: 0.55;
}
.match-card.is-active {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.1), 0 12px 24px -8px rgba(15, 27, 45, 0.2);
  transform: scale(1.04);
  opacity: 1;
  z-index: 2;
}
.match-left  .match-card:nth-child(2) { transform: translateX(-40px); }
.match-right .match-card:nth-child(2) { transform: translateX(40px); }
.match-left  .match-card.is-active  { transform: translateX(4px) scale(1.04); }
.match-right .match-card.is-active { transform: translateX(-4px) scale(1.04); }
.match-left  .match-card:nth-child(2).is-active  { transform: translateX(-40px) scale(1.04); }
.match-right .match-card:nth-child(2).is-active { transform: translateX(40px) scale(1.04); }

/* SVG connection lines overlay */
.match-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.match-lines .ml-pair path {
  fill: none;
  stroke: var(--navy);
  stroke-width: 0.35;
  stroke-linecap: round;
  opacity: 0.08;
  transition: opacity 0.5s ease, stroke-width 0.5s ease;
}
.match-lines .ml-pair.is-active path {
  opacity: 0.9;
  stroke-width: 0.45;
  stroke-dasharray: 2 3;
  animation: matchFlow 1.6s linear infinite;
}
@keyframes matchFlow {
  to { stroke-dashoffset: -10; }
}

/* CE center pulse on each cycle */
.match-center {
  transition: transform 0.4s ease;
  z-index: 3;
}
.match-center.is-pulsing::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--navy);
  opacity: 0;
  animation: cePulse 1.4s ease-out;
}
@keyframes cePulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .match-lines .ml-pair.is-active path { animation: none; }
  .match-center.is-pulsing::after { animation: none; display: none; }
}

.match-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: var(--navy);
  width: 118px; height: 118px;
  border-radius: 999px;
  border: 1px solid rgba(15, 27, 45, 0.12);
  display: grid;
  place-items: center;
  box-shadow: 0 24px 50px rgba(15, 27, 45, 0.18), 0 0 0 6px rgba(15, 27, 45, 0.04);
  text-align: center;
  padding: 6px;
  overflow: hidden;
}
.match-center .mc-n {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #F97316;
  line-height: 1;
}
.match-center .mc-l {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 6px;
}
.match-center .mc-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.05);
}
.match-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--navy), transparent);
  transform-origin: left center;
  animation: matchPulse 3s ease-in-out infinite;
  opacity: 0.3;
}
.match-line.active { opacity: 1; }
@keyframes matchPulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.7; }
}

/* ===========================================================
   Matching showcase — responsive mobile (pas de débordement)
   =========================================================== */
@media (max-width: 720px) {
  .showcase { gap: 24px; }
  .match-viz {
    min-height: 0;
    aspect-ratio: 1 / 1.15;
    padding: 16px;
    border-radius: 14px;
  }
  .match-viz::before { background-size: 16px 16px; }
  .match-left  { left: 12px; gap: 56px; }
  .match-right { right: 12px; gap: 56px; }
  .match-card {
    min-width: 0;
    max-width: 130px;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 10px;
    font-size: 12px;
  }
  .match-card .av { width: 32px; height: 32px; font-size: 10px; }
  .match-card .info strong { font-size: 12px; }
  .match-card .info span { font-size: 9.5px; }
  /* Pas de translateX sur mobile pour éviter tout débordement */
  .match-left  .match-card:nth-child(2),
  .match-right .match-card:nth-child(2),
  .match-left  .match-card:nth-child(2).is-active,
  .match-right .match-card:nth-child(2).is-active {
    transform: none;
  }
  .match-left  .match-card.is-active  { transform: scale(1.04); }
  .match-right .match-card.is-active  { transform: scale(1.04); }

  .match-center {
    width: 68px; height: 68px;
    padding: 4px;
  }
  .match-center .mc-n { font-size: 26px; }
  .match-center .mc-l { font-size: 7px; margin-top: 3px; }
  .match-center.is-pulsing::after { display: none; }
}

@media (max-width: 420px) {
  .match-left  { left: 8px; gap: 40px; }
  .match-right { right: 8px; gap: 40px; }
  .match-card { max-width: 112px; padding: 7px 9px; }
  .match-card .av { width: 28px; height: 28px; }
  .match-card .info strong { font-size: 11px; }
  .match-center { width: 56px; height: 56px; }
  .match-center .mc-n { font-size: 22px; }
  .match-center .mc-l { display: none; }
}

/* ===== Big-number stats, scroll counter ===== */
.stats-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .stats-v2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stats-v2 { grid-template-columns: 1fr; } }

.stat-v2 {
  position: relative;
  background: var(--white);
  padding: 36px 28px 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.stat-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 40%, rgba(249, 115, 22, 0.0) 50%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: background 0.6s ease;
}
.stat-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -14px rgba(15, 27, 45, 0.18);
  border-color: rgba(15, 27, 45, 0.18);
}
.stat-v2:hover::after {
  background: linear-gradient(135deg, transparent 20%, rgba(249, 115, 22, 0.55) 50%, transparent 80%);
}

/* Ghost big number in serif italic */
.stat-ghost {
  position: absolute;
  top: -18px;
  right: -8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 180px;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--navy);
  opacity: 0.04;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(8px);
}
.stat-v2.is-started .stat-ghost { opacity: 0.06; transform: translateY(0); }
.stat-v2:hover .stat-ghost { opacity: 0.08; }

/* Big number */
.stat-v2 .num {
  position: relative;
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 2px;
  z-index: 1;
}
.stat-v2 .num .prefix {
  font-size: 0.55em;
  color: #F97316;
  font-weight: 600;
  margin-right: 2px;
}
.stat-v2 .num .suffix {
  font-size: 0.5em;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.02em;
}
[data-type="serif"] .stat-v2 .num { font-weight: 400; }

.stat-v2 .label {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* Progress bar */
.stat-bar {
  position: relative;
  margin-top: 22px;
  height: 4px;
  width: 100%;
  background: rgba(15, 27, 45, 0.06);
  border-radius: 999px;
  overflow: hidden;
  z-index: 1;
}
.stat-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--navy), #F97316);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
  transition: width 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Shimmer sweep on reveal */
.stat-shimmer {
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.12), transparent);
  pointer-events: none;
  transform: skewX(-14deg);
  opacity: 0;
}
.stat-v2.is-started .stat-shimmer {
  animation: statShimmer 1.6s ease-out 0.2s 1 forwards;
}
@keyframes statShimmer {
  0%   { left: -40%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-bar-fill { transition: none; }
  .stat-v2.is-started .stat-shimmer { animation: none; }
}

/* ===== Testimonial carousel-like (gradient border) ===== */
.testimonials-v2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 960px) { .testimonials-v2 { grid-template-columns: 1fr; } }

.testimonial-v2 {
  position: relative;
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(135deg, var(--line), var(--line));
  transition: background 0.4s ease, transform 0.3s ease;
}
.testimonial-v2:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--navy), var(--accent));
}
.testimonial-v2-inner {
  background: var(--white);
  border-radius: calc(var(--r-lg) - 1px);
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testimonial-v2.hero {
  grid-row: span 1;
}
.testimonial-v2.hero .testimonial-v2-inner {
  padding: 40px;
  background: var(--ink);
  color: #fff;
}
.testimonial-v2.hero .quote { font-size: 22px; line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; color: #fff; }
.testimonial-v2.hero .author-meta .name { color: #fff; }
.testimonial-v2.hero .author-meta .sub  { color: rgba(255,255,255,0.6); }
.testimonial-v2.hero .author { border-top-color: rgba(255,255,255,0.12); }
.testimonial-v2.hero .quote-mark { color: var(--accent); opacity: 0.9; }

.testimonial-v2 .avatar {
  width: 64px;
  height: 64px;
  overflow: hidden;
}
.testimonial-v2 .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: inherit;
  display: block;
}
.testimonial-v2.hero .avatar {
  width: 84px;
  height: 84px;
}

.quote-mark {
  font-family: var(--font-serif);
  font-size: 60px;
  line-height: 0.6;
  color: var(--navy);
  opacity: 0.25;
  margin-bottom: -20px;
  font-style: italic;
}

/* ===== Trustpilot reviews block (élèves) ===== */
.tp-section {
  background: linear-gradient(180deg, #fff 0%, #FAF7F0 100%);
}
.tp-section.is-embedded {
  background: transparent;
  padding-top: 0;
  padding-bottom: 0;
}
.tp-rating-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.tp-rating-text {
  font-size: 14px;
  color: var(--ink-soft, #5F6A7D);
  font-weight: 500;
}
.tp-stars {
  display: inline-flex;
  gap: 3px;
}
.tp-star {
  width: 22px;
  height: 22px;
  border-radius: 3px;
}
.tp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 1100px) { .tp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .tp-grid { grid-template-columns: 1fr; } }
.tp-card {
  background: #fff;
  border: 1px solid var(--line, #EDE5CC);
  border-radius: 18px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(27, 58, 107, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(27, 58, 107, 0.10);
  border-color: #D9D2BD;
}
.tp-card.is-compact {
  padding: 16px 18px 18px;
  gap: 10px;
}
.tp-card-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
}
.tp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-sans, system-ui);
}
.tp-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tp-name {
  font-weight: 700;
  font-size: 15px;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-meta {
  font-size: 13px;
  color: #8B8676;
}
.tp-date {
  font-size: 13px;
  color: #8B8676;
  white-space: nowrap;
}
.tp-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.tp-quote {
  font-size: 14px;
  color: #2C2C2C;
  line-height: 1.55;
}
.tp-card.is-compact .tp-title { font-size: 14.5px; }
.tp-card.is-compact .tp-quote { font-size: 13px; line-height: 1.5; }
.tp-card.is-compact .tp-stars .tp-star { width: 18px; height: 18px; }

/* ===== Subjects — magnetic tilt + mega-typo reveal ===== */
.subjects-section {
  position: relative;
  overflow: hidden;
}
.subjects-megatype {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4vw;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.subjects-megatype span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--navy);
  opacity: 0;
  transform: translateX(-8%);
  white-space: nowrap;
  transition: opacity 0.55s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.subjects-section.has-hover .subjects-megatype span {
  opacity: 0.06;
  transform: translateX(0);
}

.subjects-v2 {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  perspective: 1000px;
}
@media (max-width: 860px) { .subjects-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .subjects-v2 { grid-template-columns: 1fr; } }

.subject-v2 {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  position: relative;
  padding: 2px;
  border-radius: 18px;
  background: conic-gradient(from var(--angle, 0deg), rgba(15,27,45,0.08) 0deg, rgba(249,115,22,0.45) 90deg, rgba(15,27,45,0.08) 180deg, rgba(123,179,232,0.35) 270deg, rgba(15,27,45,0.08) 360deg);
  animation: subjBorder 12s linear infinite;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: opacity 0.4s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
  animation-delay: var(--stagger, 0ms);
  cursor: default;
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes subjBorder {
  to { --angle: 360deg; }
}
/* Fallback for browsers without @property: subtle static gradient */
@supports not (background: conic-gradient(from 0deg, red, red)) {
  .subject-v2 { background: linear-gradient(135deg, rgba(15,27,45,0.08), rgba(249,115,22,0.35), rgba(15,27,45,0.08)); animation: none; }
}

.subject-v2-inner {
  position: relative;
  border-radius: 16px;
  background: var(--white);
  padding: 22px 20px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.subject-v2-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px 160px at var(--mx) var(--my), rgba(249,115,22,0.10), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.subject-v2-inner::after {
  content: attr(data-tag);
  position: absolute;
  top: -10px; right: -4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  letter-spacing: 0.01em;
  color: var(--navy);
  opacity: 0.05;
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.35s ease, color 0.35s ease;
}
.subject-v2[data-tag] .subject-v2-inner::after { content: attr(data-tag); }
.subject-v2 h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.subject-v2 p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3);
  position: relative;
  z-index: 1;
}
.subject-v2 .n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: auto;
  letter-spacing: 0.04em;
}
/* We need attr(data-tag) on the inner — pass it via CSS custom fallback */
.subject-v2 > .subject-v2-inner {
  /* The ::after uses attr from .subject-v2; we duplicate via ::before of inner */
}

/* States */
.subject-v2.is-dimmed {
  opacity: 0.55;
  filter: saturate(0.85);
}
.subject-v2.is-hovered {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(8px) scale(1.03);
  z-index: 3;
  filter: drop-shadow(0 20px 40px rgba(15, 27, 45, 0.18));
}
.subject-v2.is-hovered .subject-v2-inner::before { opacity: 1; }
.subject-v2.is-hovered .subject-v2-inner::after { opacity: 0.18; color: #F97316; }

/* Reveal stagger diagonal */
.reveal-v2.is-in .subject-v2 {
  animation: subjIn 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  animation-delay: var(--stagger, 0ms);
}
@keyframes subjIn {
  0%   { opacity: 0; transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(14px) scale(0.94); }
  60%  { opacity: 1; transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0)    scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
  .subject-v2 { animation: none; transform: none !important; }
  .reveal-v2.is-in .subject-v2 { animation: none; }
  .subjects-megatype span { transition: none; }
}

/* ===== Process steps — visual timeline ===== */
.process-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
.process-track {
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(15,27,45,0.18) 0 4px, transparent 4px 8px);
  z-index: 0;
  pointer-events: none;
}
.process-track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--navy), #F97316);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.45);
  transition: width 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.process-packet {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #F97316;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25), 0 0 18px rgba(249, 115, 22, 0.7);
  transform: translate(-50%, -50%);
  transition: left 1.6s cubic-bezier(0.65, 0, 0.35, 1);
  animation: packetGlow 1.6s ease-in-out infinite;
}
@keyframes packetGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.22), 0 0 18px rgba(249, 115, 22, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.38), 0 0 26px rgba(249, 115, 22, 0.95); }
}
@media (max-width: 860px) {
  .process-v2 { grid-template-columns: 1fr 1fr; }
  .process-track { display: none; }
}
@media (max-width: 560px) { .process-v2 { grid-template-columns: 1fr; } }

.process-item {
  background: transparent;
  position: relative;
  z-index: 1;
  padding: 0 12px;
}
.process-dot {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s, border-color 0.4s, box-shadow 0.4s, color 0.4s;
}
.process-dot .pd-num,
.process-dot .pd-icon,
.process-dot .pd-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.process-dot .pd-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.01em;
  color: var(--navy);
  opacity: 1;
}
.process-dot .pd-icon {
  opacity: 0;
  transform: scale(0.7);
}
.process-dot .pd-check {
  opacity: 0;
  color: #fff;
  transform: scale(0.6);
}
/* Active step: icon visible, navy fill, glow + scale */
.process-item.is-active .process-dot {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(15, 27, 45, 0.08), 0 14px 28px -8px rgba(15, 27, 45, 0.35);
}
.process-item.is-active .process-dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid #F97316;
  opacity: 0;
  animation: dotPulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes dotPulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.45); opacity: 0;    }
}
.process-item.is-active .pd-num   { opacity: 0; transform: scale(0.6); }
.process-item.is-active .pd-icon  { opacity: 1; transform: scale(1);   color: #fff; }
/* Done step: check mark replaces number, filled navy */
.process-item.is-done .process-dot {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.process-item.is-done .pd-num   { opacity: 0; transform: scale(0.6); }
.process-item.is-done .pd-icon  { opacity: 0; transform: scale(0.6); }
.process-item.is-done .pd-check { opacity: 1; transform: scale(1);   }
/* Hover bonus when not animating */
@media (hover: hover) {
  .process-item:hover .process-dot {
    transform: scale(1.06);
    border-color: var(--navy);
  }
}
.process-item h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.process-item.is-active h4 { color: var(--navy); }
.process-item p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .process-track-fill,
  .process-packet { transition: none; }
  .process-packet,
  .process-item.is-active .process-dot::before { animation: none; }
}

.tracking-wide { letter-spacing: 0.04em !important; }

/* ===== Massive CTA ===== */
.mega-cta {
  position: relative;
  border-radius: var(--r-2xl);
  padding: 80px 48px;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 720px) { .mega-cta { padding: 56px 24px; border-radius: var(--r-lg); } }
.mega-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 20% 30%, rgba(123, 179, 232, 0.35), transparent 55%),
    radial-gradient(500px 500px at 90% 70%, rgba(201, 169, 97, 0.18), transparent 55%),
    radial-gradient(400px 300px at 50% 0%, rgba(255,255,255,0.05), transparent 60%);
  z-index: -1;
  animation: heroMeshShift 18s ease-in-out infinite alternate;
}
.mega-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  z-index: -1;
}
.mega-cta-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) { .mega-cta-grid { grid-template-columns: 1fr; gap: 32px; } }

.mega-cta h2 {
  margin: 0 0 16px;
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.02;
}
[data-type="serif"] .mega-cta h2 { font-weight: 400; letter-spacing: -0.01em; }
.mega-cta h2 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  background: linear-gradient(120deg, #fff 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mega-cta p {
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 0 32px;
}
.mega-cta-form {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  padding: 24px;
  backdrop-filter: blur(12px);
}
.mega-cta-form h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.mega-cta-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.mega-cta-form input, .mega-cta-form select {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.mega-cta-form input::placeholder { color: rgba(255,255,255,0.4); }
.mega-cta-form input:focus, .mega-cta-form select:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
}
.mega-cta-form .btn-accent {
  width: 100%;
  padding: 14px;
  font-weight: 600;
}
.mega-cta-form .foot {
  margin: 10px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ===== Reveal (improved) ===== */
.reveal-v2 {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease;
}
.reveal-v2.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Shine on scroll section header */
.sec-head-v2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}
.sec-head-v2 .left { max-width: 640px; }
.sec-head-v2 h2 {
  margin: 12px 0 0;
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.02;
}
[data-type="serif"] .sec-head-v2 h2 { font-weight: 400; letter-spacing: -0.012em; }
.sec-head-v2 h2 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--navy);
}
.sec-head-v2 p.lead {
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
  max-width: 380px;
}
@media (max-width: 720px) { .sec-head-v2 { flex-direction: column; align-items: flex-start; margin-bottom: 36px; } }

/* Reduced motion */
/* ===== Mid-page dark CTA strip (reusable block) ===== */
.cta-strip {
  position: relative;
  border-radius: var(--r-xl, 20px);
  padding: 56px 48px;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 720px) { .cta-strip { padding: 40px 24px; border-radius: var(--r-lg); } }
.cta-strip::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
  z-index: -1;
}
.cta-strip::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(500px 300px at 15% 20%, rgba(123, 179, 232, 0.22), transparent 55%),
    radial-gradient(500px 300px at 90% 90%, rgba(201, 169, 97, 0.15), transparent 55%);
  z-index: -1;
}
[data-accent="gold"] .cta-strip::after {
  background:
    radial-gradient(500px 300px at 15% 20%, rgba(201, 169, 97, 0.26), transparent 55%),
    radial-gradient(500px 300px at 90% 90%, rgba(123, 179, 232, 0.12), transparent 55%);
}
.cta-strip-inner {
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 720px) { .cta-strip-inner { grid-template-columns: 1fr; gap: 20px; } }
.cta-strip h3 {
  margin: 0 0 10px;
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
}
[data-type="serif"] .cta-strip h3 { font-weight: 400; letter-spacing: -0.01em; }
.cta-strip h3 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--accent);
}
.cta-strip p {
  margin: 0;
  color: rgba(255,255,255,0.65);
  font-size: 15px;
  line-height: 1.55;
  max-width: 540px;
}
.cta-strip-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cta-strip-actions .btn-accent {
  padding: 14px 22px;
  font-weight: 600;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.cta-strip-actions .btn-accent::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}
.cta-strip-actions .btn-accent:hover::before { transform: translateX(100%); }
.cta-strip-actions .btn-ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
}
.cta-strip-actions .btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .match-line, .mega-cta::before, .hv-pill .dot {
    animation: none !important;
  }
  .hv-headline .word span { transform: none; }
  .hv-lead, .hv-meta, .hv-form { opacity: 1 !important; }
}

/* Hero — 3 pills row */
.hv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

/* Serif italic accent in hero sous-titre + logos label */
.hv-lead em,
.hv-logos-label em {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Hero form — matière multi-select chips */
.hv-matieres {
  margin: 4px 0 14px;
}
.hv-matieres-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  margin-bottom: 8px;
}
.hv-matieres-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.matiere-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.matiere-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.matiere-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}
.matiere-chip.is-active:hover {
  background: var(--accent);
}

/* Compact hero (réutilisé en CTA au milieu de la landing) */
.hero-v2-compact .hero-v2-inner {
  padding: 72px 0 72px;
}
.hero-v2-compact .hv-headline,
.hv-headline-compact {
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.03em;
  margin: 14px 0 20px;
  line-height: 1.08;
}

/* CTA Hero en CARTE (pas full-width) — inséré entre sections claires */
.cta-hero-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 30px 70px rgba(15, 27, 45, 0.18);
  border: 1px solid rgba(15, 27, 45, 0.06);
}
.cta-hero-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 30%, transparent 85%);
}
.cta-hero-card-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(500px 400px at 15% 20%, rgba(123, 179, 232, 0.22), transparent 55%),
    radial-gradient(500px 400px at 85% 80%, rgba(201, 169, 97, 0.1), transparent 55%);
}
.cta-hero-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 420px);
  gap: 48px;
  align-items: center;
  padding: 56px 56px;
}
@media (max-width: 1100px) {
  .cta-hero-card-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; padding: 48px 40px; }
}
@media (max-width: 860px) {
  .cta-hero-card-inner { grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; }
  .cta-hero-card { border-radius: 20px; }
}
.cta-hero-card .eyebrow {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}

/* Highlight orange sur un mot-clé dans un texte (méthodologie, etc.) */
.methodo {
  color: #F97316;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35em;
  letter-spacing: 0.01em;
  padding: 0 0.04em;
}
.hero-v2 .eyebrow {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.hv-headline em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
  padding-right: 0.06em;
  white-space: nowrap;
}
.lead em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-size: 1.3em;
  white-space: nowrap;
}
.lead .methodo {
  color: inherit;
}
@media (max-width: 860px) {
  .hero-v2-compact .hero-v2-inner { padding: 48px 0 48px; }
}

/* Sticky CTA mobile — bouton flottant bas d'écran */
.sticky-cta-mobile {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 150;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border-radius: 16px;
  background: rgba(15, 27, 45, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.sticky-cta-mobile .sticky-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  flex: 0 0 auto;
  text-decoration: none;
  transition: background 0.15s ease;
}
.sticky-cta-mobile .sticky-call:hover { background: rgba(255, 255, 255, 0.14); }
.sticky-cta-mobile .sticky-main {
  flex: 1;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  justify-content: center;
}
@media (max-width: 860px) {
  .sticky-cta-mobile { display: flex; }
  body { padding-bottom: 82px; }
}

/* Sticky CTA desktop — pill flottant bottom-right */
.sticky-cta-desktop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 140;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: rgba(15, 27, 45, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(15, 27, 45, 0.28);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.sticky-cta-desktop.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta-desktop .sticky-cta-main {
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  white-space: nowrap;
}
.sticky-cta-desktop .sticky-cta-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sticky-cta-desktop .sticky-cta-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
@media (min-width: 861px) {
  .sticky-cta-desktop { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta-desktop { transition: opacity 0.2s ease; transform: none; }
  .sticky-cta-desktop.is-visible { transform: none; }
}

/* WhatsApp float — bottom-left, chat avec fondateur */
.whatsapp-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 140;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 18px 50px rgba(37, 211, 102, 0.35), 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition: padding 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  max-width: 64px;
}
.whatsapp-float:hover {
  box-shadow: 0 22px 60px rgba(37, 211, 102, 0.45), 0 6px 18px rgba(0, 0, 0, 0.15);
}
.whatsapp-float .wa-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 0.3s ease;
}
.whatsapp-float .wa-body {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
}
.whatsapp-float .wa-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--navy);
  flex: 0 0 40px;
}
.whatsapp-float .wa-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.whatsapp-float .wa-avatar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: #F97316;
  line-height: 1;
}
.whatsapp-float .wa-online {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #25D366;
  border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  animation: waOnlinePulse 2s ease-out infinite;
}
@keyframes waOnlinePulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.whatsapp-float .wa-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--navy);
  text-align: left;
}
.whatsapp-float .wa-line-1 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.whatsapp-float .wa-line-2 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.whatsapp-float.is-expanded {
  max-width: 360px;
  background: #fff;
  padding: 8px;
  border-color: rgba(37, 211, 102, 0.25);
}
.whatsapp-float.is-expanded .wa-icon {
  background: #25D366;
  border-radius: 999px;
}
.whatsapp-float.is-expanded .wa-body {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 860px) {
  .whatsapp-float { bottom: 94px; left: 16px; }
  .whatsapp-float.is-expanded { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float,
  .whatsapp-float .wa-body,
  .whatsapp-float .wa-icon { transition: none; }
  .whatsapp-float .wa-online { animation: none; }
}

/* Exit intent popup desktop */
.exit-intent-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 27, 45, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: exitFadeIn 0.25s ease;
}
@keyframes exitFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.exit-intent-popup {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: var(--ink);
  color: #fff;
  border-radius: 20px;
  padding: 40px 36px 32px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: exitPopIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.exit-intent-popup::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
}
.exit-intent-popup > * { position: relative; z-index: 1; }
@keyframes exitPopIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.exit-intent-popup .exit-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease;
}
.exit-intent-popup .exit-close:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.exit-intent-popup h3 {
  font-family: var(--font-display, var(--font-sans));
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 14px 0 10px;
  color: #fff;
}
.exit-intent-popup p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 20px;
}
.exit-intent-popup form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.exit-intent-popup input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}
.exit-intent-popup input::placeholder { color: rgba(255, 255, 255, 0.4); }
.exit-intent-popup input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}
.exit-intent-popup .btn-accent {
  padding: 14px 20px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  white-space: nowrap;
}
.exit-intent-popup .exit-foot {
  margin: 18px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
.exit-intent-popup .exit-foot a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 520px) {
  .exit-intent-popup { padding: 36px 24px 26px; border-radius: 16px; }
  .exit-intent-popup h3 { font-size: 24px; }
  .exit-intent-popup form { grid-template-columns: 1fr; }
}

/* ===== Bulletin showcase (scroll-linked) ===== */
.bulletin-showcase {
  position: relative;
  padding: 96px 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(123, 179, 232, 0.08), transparent 60%),
    var(--paper, #fbfaf6);
}
.bulletin-showcase .wrap { max-width: 920px; }
.bulletin-h2 {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 16px 0 6px;
  color: var(--ink, #0f1b2d);
}
.bulletin-h2 em {
  font-style: italic;
  color: var(--navy, #1B3A6B);
}
.bulletin-sub {
  font-size: 15px;
  color: var(--ink-3, #5a6777);
  margin: 0 0 36px;
  letter-spacing: 0.01em;
}

.bulletin-card {
  position: relative;
  background: #FEFEF9;
  border: 1px solid var(--line, #e2e0d6);
  border-radius: 6px;
  padding: 36px 44px 44px;
  box-shadow:
    0 1px 0 rgba(15, 27, 45, 0.04),
    0 12px 32px -12px rgba(15, 27, 45, 0.12),
    0 40px 80px -40px rgba(15, 27, 45, 0.18);
  overflow: hidden;
}
.bulletin-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 27, 45, 0.018) 1px, transparent 1px);
  background-size: 100% 28px;
  background-position: 0 64px;
  opacity: 0.7;
}

.bulletin-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(15, 27, 45, 0.1);
  padding-bottom: 14px;
  margin-bottom: 20px;
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
}
.bulletin-label {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3, #5a6777);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-weight: 600;
}
.bulletin-trim {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-3, #5a6777);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
}
.bulletin-trim > span {
  transition: color 0.25s ease, font-weight 0.25s ease;
}
.bulletin-trim > span.on {
  color: var(--navy, #1B3A6B);
  font-weight: 600;
}
.bulletin-arrow {
  color: var(--ink-3, #5a6777);
  opacity: 0.6;
}

.bulletin-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.bulletin-row,
.bulletin-moy {
  display: grid;
  grid-template-columns: 180px 1fr 92px;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.bulletin-moy {
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 27, 45, 0.1);
}
.bulletin-matiere {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink, #0f1b2d);
  letter-spacing: 0.005em;
}
.bulletin-moy .bulletin-matiere {
  font-weight: 500;
  font-style: normal;
  color: var(--navy, #1B3A6B);
}
.bulletin-bar {
  position: relative;
  height: 6px;
  background: rgba(15, 27, 45, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.bulletin-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #7BB3E8), var(--navy, #1B3A6B));
  border-radius: 3px;
  transition: width 0.08s linear;
}
.bulletin-bar-fill.big { height: 100%; }
.bulletin-moy .bulletin-bar { height: 8px; }
.bulletin-grade {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: 22px;
  color: var(--navy, #1B3A6B);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.bulletin-grade.big {
  font-size: 28px;
  font-weight: 500;
}
.bulletin-twenty {
  font-size: 13px;
  color: var(--ink-3, #5a6777);
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

.bulletin-appr-stack {
  position: relative;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(15, 27, 45, 0.1);
  min-height: 72px;
}
.bulletin-appr {
  position: absolute;
  inset: 20px 0 auto 0;
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink, #0f1b2d);
  margin: 0;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(4px);
}
.bulletin-appr.on { opacity: 1; transform: translateY(0); }
.bulletin-appr.neg {
  color: var(--ink-3, #5a6777);
  text-decoration: line-through;
  text-decoration-color: rgba(15, 27, 45, 0.35);
  text-decoration-thickness: 1px;
}
.bulletin-appr.pos { color: var(--navy, #1B3A6B); }
.bulletin-appr-label {
  display: inline-block;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-3, #5a6777);
  background: rgba(15, 27, 45, 0.06);
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: 2px;
}
.bulletin-appr.pos .bulletin-appr-label {
  color: #fff;
  background: var(--navy, #1B3A6B);
}

.bulletin-sig {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 56px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.bulletin-sig.on { opacity: 1; transform: translateY(0); }
.bulletin-sig-name {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 32px;
  color: var(--navy, #1B3A6B);
  line-height: 1;
  letter-spacing: 0.01em;
}
.bulletin-sig-role {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 12px;
  color: var(--ink-3, #5a6777);
  margin-top: 4px;
  letter-spacing: 0.03em;
}
.bulletin-seal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy, #1B3A6B);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  transform: rotate(-8deg);
  opacity: 0.92;
  box-shadow: 0 6px 16px -6px rgba(27, 58, 107, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.bulletin-mention {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ink-3, #5a6777);
  letter-spacing: 0.01em;
  font-style: italic;
  text-align: center;
  opacity: 0.75;
}

.bulletin-cta {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}
.bulletin-cta .btn { font-size: 15px; padding: 14px 26px; }

@media (max-width: 720px) {
  .bulletin-showcase { padding: 64px 0; }
  .bulletin-card { padding: 24px 22px 30px; }
  .bulletin-row,
  .bulletin-moy { grid-template-columns: 110px 1fr 72px; gap: 12px; }
  .bulletin-matiere { font-size: 15px; }
  .bulletin-grade { font-size: 18px; }
  .bulletin-grade.big { font-size: 22px; }
  .bulletin-appr { font-size: 15px; position: static; inset: auto; }
  .bulletin-appr.neg { display: none; }
  .bulletin-appr-stack { min-height: 0; }
  .bulletin-sig { margin-top: 28px; }
  .bulletin-seal { width: 52px; height: 52px; font-size: 13px; }
  .bulletin-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bulletin-bar-fill,
  .bulletin-trim > span,
  .bulletin-appr,
  .bulletin-sig { transition: none; }
}

/* ===== Landing /rentree (TikTok waitlist — pas dans la nav publique) ===== */
.rentree-page {
  min-height: 100vh;
  background: var(--paper, #fbfaf6);
  color: var(--ink, #0f1b2d);
  /* Compense la hauteur du bandeau fixed top */
  padding-top: 38px;
}
@media (max-width: 720px) {
  .rentree-page { padding-top: 36px; }
}
.rentree-topbar {
  border-bottom: 1px solid rgba(15, 27, 45, 0.08);
  background: #fff;
  position: relative;
  z-index: 50;
}
.rentree-topbar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  width: 100%;
  max-width: none;
}
.rentree-logo {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: 22px;
  color: var(--navy, #1B3A6B);
  letter-spacing: 0.01em;
}
.rentree-logo em {
  font-style: italic;
  color: var(--ink, #0f1b2d);
}
.rentree-backlink {
  font-size: 13px;
  color: var(--ink-3, #5a6777);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.rentree-backlink:hover { color: var(--navy, #1B3A6B); }

.rentree-hero {
  padding: 96px 0 72px;
  position: relative;
  overflow: hidden;
}
.rentree-hero-wrap { position: relative; z-index: 2; max-width: 860px; }
.rentree-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy, #1B3A6B);
  background: rgba(123, 179, 232, 0.18);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.rentree-hero-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #7BB3E8);
  box-shadow: 0 0 0 4px rgba(123, 179, 232, 0.25);
  animation: rentree-pulse 1.8s ease-in-out infinite;
}
@keyframes rentree-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(123, 179, 232, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(123, 179, 232, 0.08); }
}
.rentree-hero-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 24px;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.rentree-hero-title-lead {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 600;
  color: var(--ink, #0f1b2d);
  letter-spacing: -0.02em;
}
.rentree-hero-title-accent {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 80px);
  letter-spacing: -0.03em;
  /* Padding-right évite le clipping de la dernière lettre italique par background-clip: text */
  padding-right: 0.12em;
  margin-right: -0.12em;
  background: linear-gradient(90deg, var(--navy, #1B3A6B) 0%, var(--accent, #7BB3E8) 60%, var(--navy, #1B3A6B) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: rentree-gradient-shift 8s ease-in-out infinite;
}
@keyframes rentree-gradient-shift {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}
.rentree-hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ink-2, #33425a);
  margin: 0 0 36px;
  max-width: 680px;
}
.rentree-hero-ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.rentree-hero-meta {
  font-size: 13px;
  color: var(--ink-3, #5a6777);
  letter-spacing: 0.01em;
}

.rentree-form-section {
  padding: 80px 0 96px;
  background:
    linear-gradient(180deg, transparent, rgba(27, 58, 107, 0.02));
}
.rentree-form-wrap { max-width: 720px; }
.rentree-form-head {
  text-align: center;
  margin-bottom: 36px;
}
.rentree-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3, #5a6777);
  background: rgba(15, 27, 45, 0.05);
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.rentree-form-h2 {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  font-style: italic;
  color: var(--navy, #1B3A6B);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.rentree-form-sub {
  font-size: 15px;
  color: var(--ink-3, #5a6777);
  margin: 0;
}

.rentree-form-card {
  background: #fff;
  border: 1px solid var(--line, #e2e0d6);
  border-radius: 14px;
  padding: 36px 40px 32px;
  box-shadow:
    0 1px 0 rgba(15, 27, 45, 0.03),
    0 16px 40px -16px rgba(15, 27, 45, 0.14);
}

/* ===== Wizard progress ===== */
.rentree-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.rentree-progress-bar {
  height: 3px;
  background: rgba(15, 27, 45, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.rentree-progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #7BB3E8), var(--navy, #1B3A6B));
  border-radius: 2px;
  transition: width 0.35s ease;
}
.rentree-progress-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.rentree-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(15, 27, 45, 0.12);
  transition: all 0.25s ease;
}
.rentree-dot.active {
  background: var(--navy, #1B3A6B);
  transform: scale(1.3);
}
.rentree-dot.done {
  background: var(--accent, #7BB3E8);
}

/* ===== Wizard step ===== */
.rentree-step-head { margin-bottom: 24px; }
.rentree-step-index {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, #5a6777);
}
.rentree-step-title {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--ink, #0f1b2d);
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}
.rentree-step-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rentree-step-body .field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #33425a);
  display: block;
  margin-bottom: 8px;
}
.rentree-step-body .field.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rentree-step-body .field.two-col label {
  margin-bottom: 8px;
}
.rentree-step-body .field input,
.rentree-step-body .field select,
.rentree-step-body .rentree-textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink, #0f1b2d);
  background: #fff;
  border: 1px solid rgba(15, 27, 45, 0.14);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rentree-step-body .field input:focus,
.rentree-step-body .field select:focus,
.rentree-step-body .rentree-textarea:focus {
  outline: none;
  border-color: var(--navy, #1B3A6B);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.12);
}
.rentree-step-body .field.error input,
.rentree-step-body .field.error select,
.rentree-step-body .field .sub.error input {
  border-color: #b42318;
}
.rentree-step-body .field-error-msg {
  font-size: 12px;
  color: #b42318;
  margin-top: 6px;
}
.rentree-textarea {
  margin-top: 10px;
  resize: vertical;
  min-height: 72px;
}
.rentree-hint {
  font-size: 12px;
  color: var(--ink-3, #5a6777);
  margin: -2px 0 10px;
}

/* ===== Big choice (step 1) ===== */
.rentree-radiogrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rentree-radiogrid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Chips groupés (matières, niveaux) */
.rentree-chips-grouped {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rentree-chips-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, #5a6777);
  margin-bottom: 6px;
}

.rentree-optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-3, #5a6777);
  letter-spacing: 0.01em;
}
.rentree-bigchoice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 20px;
  border: 1px solid rgba(15, 27, 45, 0.12);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  font-family: inherit;
}
.rentree-bigchoice:hover {
  border-color: var(--navy, #1B3A6B);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(15, 27, 45, 0.15);
}
.rentree-bigchoice.is-active {
  border-color: var(--navy, #1B3A6B);
  background: rgba(27, 58, 107, 0.04);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.12);
}
.rentree-bigchoice-emoji {
  font-size: 28px;
  line-height: 1;
}
.rentree-bigchoice-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #0f1b2d);
}
.rentree-bigchoice-sub {
  font-size: 12px;
  color: var(--ink-3, #5a6777);
  letter-spacing: 0.01em;
}

/* ===== Chips ===== */
.rentree-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rentree-chip {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2, #33425a);
  background: #fff;
  border: 1px solid rgba(15, 27, 45, 0.14);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.rentree-chip:hover {
  border-color: var(--navy, #1B3A6B);
  color: var(--navy, #1B3A6B);
}
.rentree-chip.is-active {
  background: var(--navy, #1B3A6B);
  border-color: var(--navy, #1B3A6B);
  color: #fff;
}

/* ===== Nav ===== */
.rentree-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(15, 27, 45, 0.08);
}
.rentree-nav-spacer { flex: 1; }
.rentree-err {
  font-size: 13px;
  color: #b42318;
  margin-top: 8px;
}
.rentree-err-submit {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(180, 35, 24, 0.06);
  border-radius: 6px;
}

/* ===== Success ===== */
.rentree-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 12px 8px;
  gap: 14px;
}
.rentree-success-check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--navy, #1B3A6B);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px -10px rgba(27, 58, 107, 0.5);
}
.rentree-success h3 {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--ink, #0f1b2d);
  margin: 0;
  letter-spacing: -0.01em;
}
.rentree-success p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2, #33425a);
  max-width: 440px;
  margin: 0;
}
.rentree-success-meta {
  font-size: 13px !important;
  color: var(--ink-3, #5a6777) !important;
}

/* ===== Footer minimal ===== */
.rentree-footer {
  padding: 40px 0;
  border-top: 1px solid rgba(15, 27, 45, 0.08);
  font-size: 13px;
  color: var(--ink-3, #5a6777);
}
.rentree-footer .wrap {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}
.rentree-footer a {
  color: var(--ink-3, #5a6777);
  text-decoration: none;
}
.rentree-footer a:hover { color: var(--navy, #1B3A6B); }
.rentree-footer-sep { opacity: 0.5; }

@media (max-width: 720px) {
  .rentree-hero { padding: 56px 0 48px; }
  .rentree-form-section { padding: 48px 0 64px; }
  .rentree-form-card { padding: 24px 20px 20px; border-radius: 12px; }
  .rentree-step-body .field.two-col { grid-template-columns: 1fr; gap: 18px; }
  .rentree-radiogrid,
  .rentree-radiogrid.cols-3 { grid-template-columns: 1fr; }
  .rentree-nav { flex-direction: row; }
  .rentree-nav .btn { padding: 12px 18px; font-size: 14px; }
  .rentree-hero-ctas { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===========================================================
   Motion hero "Rotating ambition" — /rentree uniquement
   =========================================================== */

/* ----- Aurora background (3 blobs flous + grid overlay) ----- */
.rentree-hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Pas de filter: blur — le dégradé radial s'estompe déjà. Un flou de 80 px
   sur trois calques animés en continu saturait la carte graphique des iPhone. */
.rentree-hero-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.rentree-hero-blob-1 {
  top: -10%; left: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle at 40% 40%, rgba(27, 58, 107, 0.38), rgba(27, 58, 107, 0) 70%);
  animation: rentree-blob-drift-1 22s ease-in-out infinite;
}
.rentree-hero-blob-2 {
  top: -6%; right: -10%;
  width: 560px; height: 560px;
  background: radial-gradient(circle at 50% 50%, rgba(123, 179, 232, 0.45), rgba(123, 179, 232, 0) 70%);
  animation: rentree-blob-drift-2 16s ease-in-out infinite;
}
.rentree-hero-blob-3 {
  bottom: -18%; left: 30%;
  width: 640px; height: 640px;
  background: radial-gradient(circle at 50% 50%, rgba(201, 169, 97, 0.22), rgba(201, 169, 97, 0) 70%);
  animation: rentree-blob-drift-3 28s ease-in-out infinite;
}
@keyframes rentree-blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes rentree-blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 30px) scale(1.12); }
}
@keyframes rentree-blob-drift-3 {
  0%, 100% { transform: translate(-20px, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-40px, 20px) scale(0.95); }
}
.rentree-hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 27, 45, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 27, 45, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 40%, transparent 85%);
  z-index: 1;
  pointer-events: none;
}

/* ----- Stagger reveal à l'arrivée ----- */
.rentree-hero .rentree-hero-eyebrow,
.rentree-hero .rentree-hero-title-lead,
.rentree-hero .rentree-hero-title-accent-wrap,
.rentree-hero .rentree-hero-sub,
.rentree-hero .rentree-hero-ctas {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rentree-hero.is-reveal .rentree-hero-eyebrow,
.rentree-hero.is-reveal .rentree-hero-title-lead,
.rentree-hero.is-reveal .rentree-hero-title-accent-wrap,
.rentree-hero.is-reveal .rentree-hero-sub,
.rentree-hero.is-reveal .rentree-hero-ctas {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.rentree-hero.is-reveal .rentree-hero-eyebrow            { transition-delay: 0ms; }
.rentree-hero.is-reveal .rentree-hero-title-lead         { transition-delay: 120ms; }
.rentree-hero.is-reveal .rentree-hero-title-accent-wrap  { transition-delay: 240ms; }
.rentree-hero.is-reveal .rentree-hero-sub                { transition-delay: 360ms; }
.rentree-hero.is-reveal .rentree-hero-ctas               { transition-delay: 480ms; }

/* ----- Wrapper du mot rotatif (évite reflow) ----- */
.rentree-hero-title-accent-wrap {
  display: block;
  position: relative;
  min-height: 1.05em;
  line-height: 1.05;
}
.rentree-hero-title-accent-wrap .rentree-hero-title-accent {
  display: inline-block;
  transition:
    opacity 350ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 350ms cubic-bezier(0.32, 0.72, 0, 1),
    filter 350ms cubic-bezier(0.32, 0.72, 0, 1);
}
.rentree-hero-title-accent.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  animation: rentree-accent-in 400ms cubic-bezier(0.32, 0.72, 0, 1) both,
             rentree-gradient-shift 8s ease-in-out infinite;
}
.rentree-hero-title-accent.is-out {
  opacity: 0;
  transform: translateY(-18px);
  filter: blur(4px);
}
@keyframes rentree-accent-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ----- CTA shine + glow (scoped au hero /rentree) ----- */
.rentree-hero .btn-accent {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: rentree-cta-glow 4s ease-in-out infinite;
}
.rentree-hero .btn-accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  animation: rentree-cta-shine 4s ease-in-out infinite;
  z-index: 1;
}
.rentree-hero .btn-accent:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 48px -8px rgba(123, 179, 232, 0.6);
}
@keyframes rentree-cta-shine {
  0%        { left: -60%; }
  55%, 100% { left: 160%; }
}
@keyframes rentree-cta-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(123, 179, 232, 0), 0 6px 20px -8px rgba(27, 58, 107, 0.3); }
  50%      { box-shadow: 0 12px 40px -8px rgba(123, 179, 232, 0.5), 0 0 0 rgba(123, 179, 232, 0); }
}

/* ----- Accessibility : prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
  .rentree-hero-blob-1,
  .rentree-hero-blob-2,
  .rentree-hero-blob-3 { animation: none !important; }
  .rentree-hero .rentree-hero-eyebrow,
  .rentree-hero .rentree-hero-title-lead,
  .rentree-hero .rentree-hero-title-accent-wrap,
  .rentree-hero .rentree-hero-sub,
  .rentree-hero .rentree-hero-ctas {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .rentree-hero-title-accent.is-in,
  .rentree-hero-title-accent.is-out {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .rentree-hero .btn-accent,
  .rentree-hero .btn-accent::before { animation: none !important; }
  .rentree-hero .btn-accent::before { display: none; }
}

/* ----- Mobile : blobs plus petits + moins opaques ----- */
@media (max-width: 720px) {
  .rentree-hero-blob-1 { width: 320px; height: 320px; opacity: 0.7; }
  .rentree-hero-blob-2 { width: 340px; height: 340px; opacity: 0.7; }
  .rentree-hero-blob-3 { width: 380px; height: 380px; opacity: 0.5; }
}

/* ===========================================================
   Discord community block — /rentree uniquement
   =========================================================== */
:root {
  --discord-purple: #5865F2;
  --discord-purple-dark: #4752c4;
  --discord-dark: #23272A;
}
.discord-section {
  padding: 72px 0;
  position: relative;
}
.discord-section .wrap { max-width: 1100px; }
.discord-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #2b2f8f 0%, #5865F2 55%, #7d8aff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px -30px rgba(88, 101, 242, 0.5),
    0 10px 30px -10px rgba(15, 27, 45, 0.25);
}
.discord-card-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(255, 255, 255, 0.15), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(125, 138, 255, 0.3), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.discord-card-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: center;
  padding: 56px 56px 52px;
  color: #fff;
}

.discord-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.discord-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #41d78b;
  box-shadow: 0 0 0 4px rgba(65, 215, 139, 0.25);
  animation: discord-pulse 1.8s ease-in-out infinite;
}
@keyframes discord-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(65, 215, 139, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(65, 215, 139, 0.08); }
}

.discord-h2 {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #fff;
}
.discord-h2 em {
  font-style: italic;
  color: #fff;
  background: linear-gradient(90deg, #ffffff 0%, #c8d0ff 50%, #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: discord-shine 6s ease-in-out infinite;
}
@keyframes discord-shine {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

.discord-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 22px;
  max-width: 560px;
}
.discord-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.discord-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 500;
}
.discord-check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(65, 215, 139, 0.2);
  color: #7aefb7;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.discord-cta-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.discord-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 14px 18px;
  background: #fff;
  color: var(--discord-purple);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 6px 20px -6px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
.discord-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(88, 101, 242, 0) 0%,
    rgba(88, 101, 242, 0.18) 50%,
    rgba(88, 101, 242, 0) 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  animation: discord-cta-shine 3.5s ease-in-out infinite;
  z-index: 0;
}
.discord-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
@keyframes discord-cta-shine {
  0%        { left: -60%; }
  55%, 100% { left: 160%; }
}
.discord-cta-logo {
  width: 24px; height: 18px;
  color: var(--discord-purple);
  position: relative;
  z-index: 1;
}
.discord-cta > span {
  position: relative;
  z-index: 1;
}
.discord-cta-arrow {
  transition: transform 0.2s ease;
}
.discord-cta:hover .discord-cta-arrow {
  transform: translateX(3px);
}
.discord-cta-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

.discord-card-right {
  display: grid;
  place-items: center;
  position: relative;
  height: 100%;
  min-height: 220px;
}
.discord-card-logo {
  width: 200px;
  height: auto;
  color: rgba(255, 255, 255, 0.18);
  transform: rotate(-8deg);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
  animation: discord-logo-float 6s ease-in-out infinite;
}
@keyframes discord-logo-float {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-8px); }
}

@media (max-width: 860px) {
  .discord-section { padding: 48px 0; }
  .discord-card-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 28px 32px;
  }
  .discord-card-right { min-height: 0; order: -1; margin-bottom: -8px; }
  .discord-card-logo { width: 110px; transform: rotate(-6deg); }
  .discord-bullets { grid-template-columns: 1fr; }
  .discord-cta-wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .discord-eyebrow-dot,
  .discord-h2 em,
  .discord-cta::before,
  .discord-card-logo { animation: none !important; }
  .discord-cta::before { display: none; }
}

/* ===========================================================
   Lives exclusifs membres — bloc mid-page
   Pattern : photo à gauche / texte à droite (desktop), empilé mobile
   =========================================================== */
.lives-section {
  padding: 72px 0;
  position: relative;
}
.lives-section .wrap { max-width: 1100px; }

.lives-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #0F1B2D 0%, #1B3A6B 55%, #2a4d88 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px -30px rgba(27, 58, 107, 0.5),
    0 10px 30px -10px rgba(15, 27, 45, 0.25);
}
.lives-card-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(123, 179, 232, 0.18), transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 90%, rgba(255, 100, 100, 0.18), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.lives-card-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.1fr;
  gap: 48px;
  align-items: center;
  padding: 48px 56px;
  color: #fff;
}

.lives-visual {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0a1422;
  box-shadow:
    0 20px 50px -20px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.lives-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lives-photo-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #1a2540 0%, #0f1b2d 100%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  letter-spacing: 0.05em;
}
.lives-photo-fallback-emoji { font-size: 32px; }
.lives-photo-fallback-text { font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; }

.lives-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(15, 27, 45, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lives-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff5151;
  box-shadow: 0 0 0 3px rgba(255, 81, 81, 0.25);
  animation: lives-pulse 1.6s ease-in-out infinite;
}
@keyframes lives-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 81, 81, 0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 81, 81, 0.08); }
}

.lives-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.lives-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #41d78b;
  box-shadow: 0 0 0 4px rgba(65, 215, 139, 0.25);
  animation: lives-eyebrow-pulse 1.8s ease-in-out infinite;
}
@keyframes lives-eyebrow-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(65, 215, 139, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(65, 215, 139, 0.08); }
}

.lives-h2 {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #fff;
}
.lives-h2 em {
  font-style: italic;
  color: #fff;
  background: linear-gradient(90deg, #ffffff 0%, #c8d8ee 50%, #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lives-shine 6s ease-in-out infinite;
}
@keyframes lives-shine {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

.lives-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 22px;
  max-width: 560px;
}
.lives-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 24px;
}
.lives-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 500;
}
.lives-check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(123, 179, 232, 0.22);
  color: #a9cff0;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.lives-cta-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lives-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 14px 22px;
  background: #fff;
  color: #0F1B2D;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 6px 20px -6px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
.lives-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
.lives-cta-arrow { transition: transform 0.2s ease; }
.lives-cta:hover .lives-cta-arrow { transform: translateX(3px); }
.lives-cta-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

@media (max-width: 860px) {
  .lives-section { padding: 48px 0; }
  .lives-card-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px 32px;
  }
  .lives-visual { order: -1; }
  .lives-cta-wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lives-cta { width: 100%; justify-content: center; }
  .lives-bullets { gap: 9px; }
  .lives-bullets li { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .lives-eyebrow-dot,
  .lives-h2 em,
  .lives-badge-dot { animation: none !important; }
}

/* ===========================================================
   Calendly 1-to-1 — bloc bas de page (sessions premium payantes)
   Pattern : texte centré, accent sur le CTA réserver
   =========================================================== */
.calendly-section {
  padding: 64px 0 88px;
  position: relative;
}
.calendly-section .wrap { max-width: 1000px; }

.calendly-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(15, 27, 45, 0.08);
  box-shadow:
    0 30px 80px -30px rgba(15, 27, 45, 0.18),
    0 10px 30px -10px rgba(15, 27, 45, 0.06);
}
.calendly-card-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(123, 179, 232, 0.14), transparent 60%),
    radial-gradient(ellipse 55% 45% at 5% 90%, rgba(27, 58, 107, 0.06), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.calendly-card-inner {
  position: relative;
  z-index: 2;
  display: block;
  padding: 48px 56px;
}

.calendly-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1B3A6B;
  background: rgba(123, 179, 232, 0.15);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.calendly-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1B3A6B;
}

.calendly-h2 {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #0F1B2D;
}
.calendly-h2 em {
  font-style: italic;
  color: #1B3A6B;
}

.calendly-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(15, 27, 45, 0.72);
  margin: 0 0 22px;
  max-width: 580px;
}
.calendly-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.calendly-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(15, 27, 45, 0.88);
  font-weight: 500;
}
.calendly-check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(27, 58, 107, 0.1);
  color: #1B3A6B;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.calendly-cta-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.calendly-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 14px 22px;
  background: linear-gradient(135deg, #1B3A6B 0%, #2a4d88 100%);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 6px 20px -6px rgba(27, 58, 107, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.calendly-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 14px 36px -8px rgba(27, 58, 107, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.calendly-cta-arrow { transition: transform 0.2s ease; }
.calendly-cta:hover .calendly-cta-arrow { transform: translateX(3px); }
.calendly-cta-meta {
  font-size: 12px;
  color: rgba(15, 27, 45, 0.5);
  letter-spacing: 0.02em;
}

.calendly-card-right {
  display: grid;
  place-items: center;
  position: relative;
  height: 100%;
  min-height: 200px;
}
.calendly-mark {
  position: relative;
  width: 180px;
  height: 180px;
}
.calendly-mark-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(27, 58, 107, 0.12) 0%, rgba(123, 179, 232, 0.18) 100%);
  border: 1px dashed rgba(27, 58, 107, 0.18);
  animation: calendly-mark-rotate 24s linear infinite;
}
.calendly-mark-dot {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #1B3A6B;
  box-shadow: 0 0 0 6px rgba(27, 58, 107, 0.12);
}
@keyframes calendly-mark-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 860px) {
  .calendly-section { padding: 48px 0 80px; }
  .calendly-card-inner {
    padding: 32px 24px 36px;
  }
  .calendly-bullets { grid-template-columns: 1fr; gap: 9px; }
  .calendly-cta-wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .calendly-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .calendly-mark-circle { animation: none !important; }
}

/* ===========================================================
   Logo Cours Edgar (topbar + footer)
   =========================================================== */
.rentree-logo-img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}
.rentree-logo-img-mark { width: auto; height: 44px; }

/* ===========================================================
   Lead counter — bandeau sticky top (suit toute la nav)
   =========================================================== */
.rentree-counter-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #0f1b2d 0%, #1B3A6B 55%, #2a4d88 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.35s ease;
  /* Force compositing layer — fix iOS Safari pendant le scroll inertiel */
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
}
.rentree-counter-banner.is-bumped {
  background: linear-gradient(90deg, #0f1b2d 0%, #1b5c3e 55%, #1B3A6B 100%);
}
.rentree-counter-banner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 16px;
  min-height: 36px;
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.rentree-counter-banner-text {
  color: rgba(255, 255, 255, 0.88);
}
.rentree-counter-banner-text strong {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.rentree-counter-banner-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #41d78b;
  box-shadow: 0 0 0 4px rgba(65, 215, 139, 0.25);
  animation: rentree-counter-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes rentree-counter-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(65, 215, 139, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(65, 215, 139, 0.08); }
}

/* ===========================================================
   Sticky CTA mobile
   =========================================================== */
.rentree-sticky-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 24px;
  z-index: 100;
  display: none;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.rentree-sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.rentree-sticky-cta-btn {
  width: 100%;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Box-shadow propre, contenue (pas de halo bleu externe qui déborde) */
  box-shadow:
    0 10px 28px -6px rgba(27, 58, 107, 0.45),
    0 4px 12px -2px rgba(15, 27, 45, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
/* Shimmer doré qui traverse le bouton de gauche à droite toutes les 4 sec */
.rentree-sticky-cta.is-visible .rentree-sticky-cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 0;
  animation: sticky-cta-shimmer 4s ease-in-out infinite;
}
.rentree-sticky-cta-btn > * {
  position: relative;
  z-index: 1;
}
@keyframes sticky-cta-shimmer {
  0%        { left: -50%; }
  60%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .rentree-sticky-cta.is-visible .rentree-sticky-cta-btn::before { animation: none; display: none; }
}
@media (max-width: 860px) {
  .rentree-sticky-cta { display: block; }
  /* Ajoute du padding bottom au footer pour éviter que le sticky recouvre le footer */
  .rentree-footer { padding-bottom: 96px; }
}

/* ===========================================================
   Founder bio
   =========================================================== */
.rentree-founder-section {
  padding: 56px 0;
  background: var(--paper, #fbfaf6);
}
.rentree-founder-wrap { max-width: 760px; }
.rentree-founder-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  background: #fff;
  border: 1px solid rgba(15, 27, 45, 0.08);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(15, 27, 45, 0.03),
    0 12px 32px -16px rgba(15, 27, 45, 0.12);
}
.rentree-founder-photo {
  width: 140px; height: 140px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy, #1B3A6B), var(--accent, #7BB3E8));
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.rentree-founder-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 45% 30%;
  transform: scale(1.15);
  transform-origin: 45% 30%;
  display: block;
}
.rentree-founder-initials {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: 52px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #fff;
}
.rentree-founder-name {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: 24px;
  font-weight: 400;
  margin: 6px 0 12px;
  color: var(--ink, #0f1b2d);
  letter-spacing: -0.01em;
}
.rentree-founder-name em {
  font-style: italic;
  color: var(--navy, #1B3A6B);
  font-size: 18px;
}
.rentree-founder-path {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy, #1B3A6B);
  margin: 2px 0 14px;
}
.rentree-founder-path em {
  font-style: normal;
  background: linear-gradient(90deg, var(--navy, #1B3A6B), #4a6899);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rentree-founder-path span {
  color: var(--ink-3, #5a6777);
  opacity: 0.5;
  font-weight: 400;
}
.rentree-founder-bio {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2, #33425a);
  font-style: italic;
  margin: 0 0 14px;
}
.rentree-founder-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #1B3A6B);
  text-decoration: none;
  transition: color 0.2s ease;
}
.rentree-founder-link:hover { color: var(--accent, #7BB3E8); }

/* ===========================================================
   FAQ accordion
   =========================================================== */
.rentree-faq-section {
  padding: 72px 0;
}
.rentree-faq-wrap { max-width: 720px; }
.rentree-faq-head {
  text-align: center;
  margin-bottom: 36px;
}
.rentree-faq-h2 {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 400;
  color: var(--ink, #0f1b2d);
  margin: 10px 0 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.rentree-faq-h2 em {
  font-style: italic;
  color: var(--navy, #1B3A6B);
}
.rentree-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rentree-faq-item {
  background: #fff;
  border: 1px solid rgba(15, 27, 45, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.rentree-faq-item.is-open {
  border-color: rgba(27, 58, 107, 0.3);
  box-shadow: 0 8px 24px -12px rgba(15, 27, 45, 0.14);
}
.rentree-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0f1b2d);
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.rentree-faq-q:hover { color: var(--navy, #1B3A6B); }
.rentree-faq-chevron {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  color: var(--navy, #1B3A6B);
  font-size: 20px;
  font-weight: 300;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.rentree-faq-item.is-open .rentree-faq-chevron {
  transform: rotate(45deg);
}
.rentree-faq-a-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.rentree-faq-item.is-open .rentree-faq-a-wrap {
  max-height: 320px;
}
.rentree-faq-a {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2, #33425a);
}

/* ===========================================================
   Passe mobile-first globale /rentree
   =========================================================== */
@media (max-width: 720px) {
  /* Topbar compacte */
  .rentree-topbar-wrap { padding: 8px 12px; }
  .rentree-logo-img { width: 100%; max-width: 100%; height: auto; }

  /* Hero : moins de padding top (le topbar sticky prend déjà de la place) */
  .rentree-hero { padding: 40px 0 56px; }
  .rentree-hero-wrap { padding: 0 20px; }
  .rentree-hero-eyebrow { font-size: 10px; padding: 6px 11px; margin-bottom: 18px; }
  .rentree-hero-title-lead { font-size: clamp(26px, 8vw, 36px); }
  .rentree-hero-title-accent { font-size: clamp(32px, 10vw, 48px); }
  .rentree-hero-sub { font-size: 14.5px; line-height: 1.55; }
  .rentree-hero-ctas .btn-lg { width: 100%; padding: 15px 20px; font-size: 15px; }
  .rentree-lead-counter { margin-top: 14px; font-size: 12.5px; padding: 7px 12px; }

  /* Founder */
  .rentree-founder-section { padding: 40px 0; }
  .rentree-founder-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px;
    text-align: center;
  }
  .rentree-founder-photo {
    width: 96px; height: 96px;
    margin: 0 auto;
  }
  .rentree-founder-initials { font-size: 36px; }
  .rentree-founder-name { font-size: 20px; margin-top: 4px; }
  .rentree-founder-name em { font-size: 15px; display: block; margin-top: 2px; }
  .rentree-founder-path {
    font-size: 10.5px;
    justify-content: center;
    gap: 4px 6px;
    margin-bottom: 12px;
  }
  .rentree-founder-bio { font-size: 13.5px; text-align: left; }

  /* FAQ */
  .rentree-faq-section { padding: 48px 0; }
  .rentree-faq-wrap { padding: 0 16px; }
  .rentree-faq-head { margin-bottom: 24px; }
  .rentree-faq-h2 { font-size: clamp(22px, 6vw, 28px); }
  .rentree-faq-q { padding: 16px 18px; font-size: 14px; }
  .rentree-faq-a { padding: 0 18px 18px; font-size: 13.5px; }

  /* Form section */
  .rentree-form-section { padding: 40px 0 56px; }
  .rentree-form-head { margin-bottom: 24px; padding: 0 16px; }
  .rentree-form-h2 { font-size: clamp(26px, 7vw, 36px); }
  .rentree-form-sub { font-size: 13.5px; }
  .rentree-form-wrap { padding: 0 12px; }

  /* Discord */
  .discord-section { padding: 40px 0; }
  .discord-card-inner { padding: 28px 22px 26px; }
  .discord-h2 { font-size: clamp(22px, 6vw, 32px); }
  .discord-sub { font-size: 14px; }
  .discord-bullets li { font-size: 13px; }
  .discord-cta { width: 100%; justify-content: center; padding: 14px 20px; }

  /* Footer — + padding bottom pour sticky CTA (défini plus haut à 860px mais on renforce) */
  .rentree-footer { padding: 32px 0 96px; font-size: 12px; text-align: center; }
  .rentree-footer .wrap { flex-wrap: wrap; gap: 6px; }

  /* Marquee band (logos écoles) : moins de padding */
  .marquee { padding: 20px 0 !important; }

  /* Wizard steps mobile */
  .rentree-step-head { margin-bottom: 18px; }
  .rentree-step-title { font-size: 20px; }
  .rentree-form-card { padding: 20px 16px 18px; }

  /* Sections section-standard */
  .bulletin-showcase { padding: 48px 0; }
  .bulletin-h2 { font-size: clamp(24px, 7vw, 36px); }
}

@media (prefers-reduced-motion: reduce) {
  .rentree-lead-counter-dot,
  .rentree-lead-counter.is-bumped { animation: none !important; transition: none !important; }
  .rentree-faq-a-wrap,
  .rentree-faq-chevron { transition: none !important; }
  .rentree-sticky-cta { transition: none !important; }
}

/* ===========================================================
   CTA inline (après Pilliers, avant Bulletin)
   =========================================================== */
.rentree-inline-cta {
  padding: 40px 0 48px;
  text-align: center;
}
.rentree-inline-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rentree-inline-cta .btn-lg {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
}
.rentree-inline-cta-meta {
  font-size: 12.5px;
  color: var(--ink-3, #5a6777);
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .rentree-inline-cta { padding: 24px 16px 36px; }
  .rentree-inline-cta .btn-lg { width: 100%; padding: 15px 20px; font-size: 15px; }
}

/* ===========================================================
   LEAD MAGNET BLOCK — téléchargement guide + capture lead
   =========================================================== */
.lead-magnet-block {
  position: relative;
  padding: 72px 0 32px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(123, 179, 232, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 85%, rgba(201, 169, 97, 0.08), transparent 60%),
    var(--paper, #fbfaf6);
}
.lmb-wrap { max-width: 1100px; }
.lmb-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}

/* ---------- Visuel livret 3D ---------- */
.lmb-visual {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1600px;
  min-height: 500px;
}
.lmb-book {
  position: relative;
  width: 300px;
  height: 424px;
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(6deg);
  animation: lmb-float 5s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  filter:
    drop-shadow(0 18px 28px rgba(15, 27, 45, 0.25))
    drop-shadow(0 40px 60px rgba(15, 27, 45, 0.15));
}
.lmb-book:hover {
  transform: rotateY(-12deg) rotateX(4deg) scale(1.04);
  animation-play-state: paused;
}
@keyframes lmb-float {
  0%, 100% { transform: rotateY(-18deg) rotateX(6deg) translateY(0); }
  50%      { transform: rotateY(-20deg) rotateX(5deg) translateY(-10px); }
}

/* Ombre portée sol */
.lmb-book-shadow {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 36px;
  background: radial-gradient(ellipse 50% 100% at center, rgba(15, 27, 45, 0.22), transparent 70%);
  filter: blur(10px);
  animation: lmb-shadow 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lmb-shadow {
  0%, 100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 0.7; transform: translateX(-50%) scaleX(0.9); }
}

.lmb-book-cover {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px 8px 8px 2px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(123, 179, 232, 0.25), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 85%, rgba(27, 58, 107, 0.14), transparent 60%),
    linear-gradient(180deg, #fefdf8, #faf7ef);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(15, 27, 45, 0.1);
  box-shadow:
    inset 2px 0 0 rgba(15, 27, 45, 0.06),
    inset -4px 0 12px rgba(15, 27, 45, 0.04);
  overflow: hidden;
}
.lmb-book-cover::before {
  /* Tranche de livre gauche (reliure) */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(90deg, rgba(15, 27, 45, 0.12), transparent);
  pointer-events: none;
}
.lmb-book-eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #7BB3E8);
  font-weight: 600;
  margin-bottom: 16px;
}
.lmb-book-title {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink, #0F1B2D);
  margin-bottom: 18px;
}
.lmb-book-title em {
  font-style: italic;
  background: linear-gradient(120deg, var(--navy, #1B3A6B), var(--accent, #7BB3E8));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lmb-book-rule {
  width: 40px;
  height: 2px;
  background: var(--navy, #1B3A6B);
  margin-bottom: 12px;
}
.lmb-book-author {
  font-size: 11px;
  color: var(--ink-2, #33425a);
  margin-bottom: 3px;
}
.lmb-book-author strong { color: var(--ink, #0F1B2D); font-weight: 600; }
.lmb-book-schools {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy, #1B3A6B);
  font-weight: 500;
  margin-bottom: auto;
}
.lmb-book-meta {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4, #8A99B3);
  margin-top: auto;
  padding-top: 16px;
}

/* Badge 70 pages */
.lmb-book-badge {
  position: absolute;
  top: -22px;
  right: -24px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A961 0%, #b89846 100%);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-sans, "Inter", sans-serif);
  box-shadow: 0 8px 20px -4px rgba(201, 169, 97, 0.5);
  animation: lmb-badge-pulse 1.8s ease-in-out infinite;
  transform: rotate(14deg) translateZ(30px);
  z-index: 2;
}
.lmb-book-badge strong {
  display: block;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-size: 34px;
  line-height: 1;
  font-weight: 400;
}
.lmb-book-badge span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.95;
}
@keyframes lmb-badge-pulse {
  0%, 100% {
    box-shadow: 0 8px 20px -4px rgba(201, 169, 97, 0.5), 0 0 0 0 rgba(201, 169, 97, 0.4);
    transform: rotate(14deg) translateZ(30px) scale(1);
  }
  50% {
    box-shadow: 0 12px 30px -4px rgba(201, 169, 97, 0.7), 0 0 0 10px rgba(201, 169, 97, 0);
    transform: rotate(14deg) translateZ(30px) scale(1.04);
  }
}

/* ---------- Colonne contenu ---------- */
.lmb-content {
  position: relative;
}
.lmb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy, #1B3A6B);
  background: rgba(123, 179, 232, 0.18);
  padding: 7px 13px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.lmb-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #41d78b;
  box-shadow: 0 0 0 4px rgba(65, 215, 139, 0.25);
  animation: lmb-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes lmb-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(65, 215, 139, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(65, 215, 139, 0.08); }
}

.lmb-title {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink, #0F1B2D);
}
.lmb-title em {
  font-style: italic;
  background: linear-gradient(120deg, var(--navy, #1B3A6B), var(--accent, #7BB3E8));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lmb-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2, #33425a);
  margin: 0 0 18px;
  max-width: 520px;
}

.lmb-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.lmb-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2, #33425a);
  margin-bottom: 6px;
}
.lmb-bullets li strong { color: var(--ink, #0F1B2D); font-weight: 600; }
.lmb-check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(65, 215, 139, 0.18);
  color: #2a9161;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Formulaire ---------- */
.lmb-form {
  background: #fff;
  border: 1px solid rgba(15, 27, 45, 0.08);
  border-radius: 14px;
  padding: 22px;
  box-shadow:
    0 1px 0 rgba(15, 27, 45, 0.03),
    0 12px 32px -16px rgba(15, 27, 45, 0.14);
}
/* Toggle Élève / Parent en haut du form */
.lmb-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.lmb-type-btn {
  padding: 11px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #33425a);
  background: #fff;
  border: 1.5px solid rgba(15, 27, 45, 0.14);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.lmb-type-btn:hover {
  border-color: var(--navy, #1B3A6B);
  color: var(--navy, #1B3A6B);
}
.lmb-type-btn.is-active {
  background: rgba(27, 58, 107, 0.05);
  border-color: var(--navy, #1B3A6B);
  color: var(--navy, #1B3A6B);
  box-shadow: 0 0 0 2px rgba(27, 58, 107, 0.1);
}

.lmb-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.lmb-field {
  margin-bottom: 12px;
  position: relative;
}
.lmb-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, #33425a);
  margin-bottom: 5px;
}
.lmb-optional {
  color: var(--ink-4, #8A99B3);
  font-weight: 400;
  font-size: 11px;
}
.lmb-field input,
.lmb-field select,
.lmb-field textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink, #0F1B2D);
  background: #fff;
  border: 1px solid rgba(15, 27, 45, 0.14);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lmb-field input:focus,
.lmb-field select:focus,
.lmb-field textarea:focus {
  outline: none;
  border-color: var(--navy, #1B3A6B);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.12);
}
.lmb-field.error input,
.lmb-field.error select,
.lmb-field.error textarea {
  border-color: #b42318;
}
.lmb-field textarea {
  resize: vertical;
  min-height: 56px;
  font-family: inherit;
}
.lmb-err {
  display: block;
  font-size: 11px;
  color: #b42318;
  margin-top: 4px;
}
.lmb-err-submit {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(180, 35, 24, 0.06);
  border-radius: 6px;
}

/* Apparition conditionnelle du champ téléphone */
.lmb-field-tel {
  animation: lmb-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lmb-slide-in {
  from { opacity: 0; transform: translateY(-4px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 120px; }
}

.lmb-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: rgba(27, 58, 107, 0.04);
  border: 1px solid rgba(27, 58, 107, 0.1);
  border-radius: 8px;
  margin: 4px 0 14px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2, #33425a);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lmb-checkbox:hover {
  background: rgba(27, 58, 107, 0.06);
  border-color: rgba(27, 58, 107, 0.18);
}
.lmb-checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: 1px;
  accent-color: var(--navy, #1B3A6B);
  cursor: pointer;
  flex-shrink: 0;
}
.lmb-checkbox strong { color: var(--ink, #0F1B2D); font-weight: 600; }

/* Bouton CTA avec shine */
.lmb-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  background: linear-gradient(135deg, var(--navy, #1B3A6B) 0%, var(--navy-2, #0F1B2D) 100%);
  color: #fff;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 4px 12px -2px rgba(15, 27, 45, 0.3),
    0 0 0 0.5pt rgba(255, 255, 255, 0.1) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  justify-content: center;
}
.lmb-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  animation: lmb-cta-shine 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.lmb-cta > span, .lmb-cta > .lmb-cta-arrow { position: relative; z-index: 1; }
.lmb-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px -4px rgba(15, 27, 45, 0.4),
    0 0 0 0.5pt rgba(255, 255, 255, 0.15) inset;
}
.lmb-cta:hover .lmb-cta-arrow { transform: translateX(3px); }
.lmb-cta[disabled] {
  opacity: 0.7;
  cursor: wait;
}
.lmb-cta-arrow {
  transition: transform 0.2s ease;
}
@keyframes lmb-cta-shine {
  0%        { left: -60%; }
  55%, 100% { left: 160%; }
}

.lmb-mention {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-4, #8A99B3);
  letter-spacing: 0.01em;
}

/* ---------- Success state ---------- */
.lmb-success {
  background: linear-gradient(135deg, rgba(65, 215, 139, 0.08), rgba(27, 58, 107, 0.04));
  border: 1px solid rgba(65, 215, 139, 0.25);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  animation: lmb-success-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lmb-success-pop {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.lmb-success-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #41d78b;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(65, 215, 139, 0.5);
}
.lmb-success-title {
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-size: 18px;
  color: var(--ink, #0F1B2D);
  line-height: 1.3;
  margin-bottom: 4px;
}
.lmb-success-sub {
  font-size: 13.5px;
  color: var(--ink-2, #33425a);
  line-height: 1.5;
  margin-bottom: 8px;
}
.lmb-success-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #1B3A6B);
  text-decoration: none;
}
.lmb-success-link:hover { color: var(--accent, #7BB3E8); }

/* ---------- Stagger reveal au scroll ---------- */
.lead-magnet-block .lmb-eyebrow,
.lead-magnet-block .lmb-title,
.lead-magnet-block .lmb-sub,
.lead-magnet-block .lmb-bullets,
.lead-magnet-block .lmb-form,
.lead-magnet-block .lmb-success,
.lead-magnet-block .lmb-visual {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lead-magnet-block.is-reveal .lmb-eyebrow,
.lead-magnet-block.is-reveal .lmb-title,
.lead-magnet-block.is-reveal .lmb-sub,
.lead-magnet-block.is-reveal .lmb-bullets,
.lead-magnet-block.is-reveal .lmb-form,
.lead-magnet-block.is-reveal .lmb-success,
.lead-magnet-block.is-reveal .lmb-visual {
  opacity: 1;
  transform: translateY(0);
}
.lead-magnet-block.is-reveal .lmb-visual  { transition-delay: 0ms; }
.lead-magnet-block.is-reveal .lmb-eyebrow { transition-delay: 80ms; }
.lead-magnet-block.is-reveal .lmb-title   { transition-delay: 160ms; }
.lead-magnet-block.is-reveal .lmb-sub     { transition-delay: 240ms; }
.lead-magnet-block.is-reveal .lmb-bullets { transition-delay: 320ms; }
.lead-magnet-block.is-reveal .lmb-form,
.lead-magnet-block.is-reveal .lmb-success { transition-delay: 400ms; }

/* Wizard mobile : sur desktop, tout est toujours visible */
.lmb-rest-fields { display: contents; }
.lmb-step-hint { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .lead-magnet-block { padding: 48px 0 24px; }

  /* Wizard 2 étapes : step 1 = juste le toggle élève/parent, step 2 = tout le reste */
  .lmb-rest-fields {
    display: block;
    transition: opacity 0.25s ease;
  }
  .lmb-rest-fields[data-mobile-step="1"] {
    display: none;
  }
  .lmb-step-hint {
    display: block;
    text-align: center;
    color: var(--muted, #8A99B3);
    font-size: 13px;
    margin: 2px 0 14px;
    letter-spacing: 0.01em;
    opacity: 0.85;
  }
  .lmb-step-hint::before {
    content: "↓ ";
    color: var(--accent, #7BB3E8);
    font-weight: 700;
  }

  .lmb-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lmb-visual {
    min-height: 280px;
    order: 1;
  }
  .lmb-content {
    order: 2;
  }
  .lmb-book {
    width: 180px;
    height: 255px;
    transform: rotateY(-10deg) rotateX(4deg);
  }
  @keyframes lmb-float {
    0%, 100% { transform: rotateY(-10deg) rotateX(4deg) translateY(0); }
    50%      { transform: rotateY(-11deg) rotateX(3deg) translateY(-6px); }
  }
  .lmb-book-badge {
    width: 56px; height: 56px;
    top: -12px;
    right: -12px;
  }
  .lmb-book-badge strong { font-size: 20px; }
  .lmb-book-badge span { font-size: 7px; }
  .lmb-title { font-size: clamp(26px, 7vw, 34px); }
  .lmb-sub { font-size: 14px; }
  .lmb-form { padding: 18px; }
  .lmb-form-row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 420px) {
  .lmb-book { width: 150px; height: 213px; }
  .lmb-book-title { font-size: 16px; }
  .lmb-book-badge { width: 48px; height: 48px; top: -10px; right: -10px; }
  .lmb-book-badge strong { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .lmb-book,
  .lmb-book-shadow,
  .lmb-book-badge,
  .lmb-eyebrow-dot,
  .lmb-cta::before { animation: none !important; }
  .lmb-cta::before { display: none; }
  .lead-magnet-block .lmb-eyebrow,
  .lead-magnet-block .lmb-title,
  .lead-magnet-block .lmb-sub,
  .lead-magnet-block .lmb-bullets,
  .lead-magnet-block .lmb-form,
  .lead-magnet-block .lmb-success,
  .lead-magnet-block .lmb-visual {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* === Hero CTA "Télécharger le guide" — orange + halo === */
.btn-guide {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #fff;
  border: none;
  box-shadow:
    0 0 24px rgba(249, 115, 22, 0.45),
    0 8px 24px rgba(249, 115, 22, 0.25);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.btn-guide:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 32px rgba(249, 115, 22, 0.6),
    0 12px 32px rgba(249, 115, 22, 0.35);
}
.btn-guide:active {
  transform: translateY(0);
}

/* === Titre du form lead magnet — serif italique orange === */
.lmb-form-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 34px;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
  margin: 0 0 10px;
  padding-bottom: 4px;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
@media (max-width: 860px) {
  .lmb-form-title { font-size: 28px; margin-bottom: 8px; }
}

/* ============================================================
   BAC MATHS LANDING (/bac-maths)
   ============================================================ */
.bm-page { background: var(--paper, #FAFAF8); color: #0F1B2D; }

/* Hero overrides */
.bm-hero { padding-bottom: 32px; }

/* Early bird urgency banner */
.bm-earlybird-banner {
  display: inline-block;
  margin: 0 auto 20px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #f97316;
  border-radius: 999px;
  color: #9a3412;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 2px 12px rgba(249, 115, 22, 0.15);
}
.bm-earlybird-banner strong { color: #c2410c; font-weight: 700; }
@media (max-width: 640px) {
  .bm-earlybird-banner { font-size: 13px; padding: 9px 14px; }
}

/* Stage en cours banner (pivot post-démarrage) */
.bm-ongoing-banner {
  display: inline-block;
  margin: 0 auto 20px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #f4f1ea 0%, #ebe4d2 100%);
  border: 1px solid #c9a961;
  border-radius: 999px;
  color: #1B3A6B;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 2px 12px rgba(201, 169, 97, 0.15);
}
.bm-ongoing-banner strong { color: #0F1B2D; font-weight: 700; }
@media (max-width: 640px) {
  .bm-ongoing-banner { font-size: 13px; padding: 9px 14px; }
}

/* Section commune */
.bm-section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F97316;
  font-weight: 600;
  margin-bottom: 12px;
}
.bm-section-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.1;
  color: #0F1B2D;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.bm-section-sub {
  font-size: 16px;
  line-height: 1.6;
  color: #5F6A7D;
  margin: 0 0 32px;
  max-width: 680px;
}
@media (max-width: 860px) {
  .bm-section-title { font-size: 30px; }
}

/* Countdown */
.bm-countdown {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 16px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(234, 88, 12, 0.04));
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 16px;
  flex-wrap: wrap;
  position: relative;
}
.bm-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
}
.bm-countdown-item strong {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bm-pulse 1.5s ease-in-out infinite;
}
.bm-countdown-item span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5F6A7D;
}
.bm-countdown-label {
  font-size: 13px;
  color: #5F6A7D;
  font-style: italic;
  width: 100%;
  text-align: center;
  margin-top: -4px;
}
@keyframes bm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@media (max-width: 600px) {
  .bm-countdown { gap: 10px; padding: 12px 16px; }
  .bm-countdown-item { min-width: 52px; }
  .bm-countdown-item strong { font-size: 28px; }
}

/* HOW IT WORKS */
.bm-how { padding: 72px 0; }
.bm-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 860px) {
  .bm-how-grid { grid-template-columns: 1fr; gap: 16px; }
  .bm-how { padding: 48px 0; }
}
.bm-how-card {
  background: #fff;
  border: 1px solid #E8EAEF;
  border-radius: 14px;
  padding: 28px 24px;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease;
  opacity: 0;
  transform: translateY(20px);
}
.bm-how.is-reveal .bm-how-card { opacity: 1; transform: translateY(0); }
.bm-how-card:hover {
  box-shadow: 0 12px 28px rgba(15, 27, 45, 0.08);
  transform: translateY(-3px);
}
.bm-how-emoji { font-size: 36px; margin-bottom: 12px; }
.bm-how-step {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F97316;
  font-weight: 600;
  margin-bottom: 8px;
}
.bm-how-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: #0F1B2D;
  margin-bottom: 10px;
}
.bm-how-body { font-size: 15px; line-height: 1.55; color: #33425A; }

/* PROGRAM (accordéon par semaine) */
.bm-program { padding: 72px 0; background: linear-gradient(180deg, #FAFAF8 0%, #F4F1EA 100%); }
.bm-program-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 860px) {
  .bm-program-grid { grid-template-columns: 1fr; }
  .bm-program { padding: 48px 0; }
}
.bm-week-card {
  background: #fff;
  border: 1px solid #E8EAEF;
  border-radius: 14px;
  padding: 22px 24px;
  cursor: pointer;
  transition: opacity 500ms ease, transform 500ms ease, box-shadow 220ms ease, border-color 220ms ease;
  opacity: 0;
  transform: translateY(16px);
}
.bm-program.is-reveal .bm-week-card { opacity: 1; transform: translateY(0); }
.bm-week-card:hover {
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 8px 24px rgba(15, 27, 45, 0.06);
}
.bm-week-card.is-open {
  border-color: #F97316;
  background: #fff;
  box-shadow: 0 12px 32px rgba(249, 115, 22, 0.12);
}
.bm-week-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.bm-week-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F97316;
  font-weight: 600;
}
.bm-week-range { font-size: 13px; color: #5F6A7D; margin-top: 2px; }
.bm-week-chevron {
  font-size: 24px;
  color: #F97316;
  font-weight: 300;
  line-height: 1;
  width: 28px;
  text-align: center;
}
.bm-week-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: #0F1B2D;
  margin: 6px 0 0;
  line-height: 1.25;
}
.bm-week-items {
  list-style: none;
  padding: 16px 0 4px;
  margin: 14px 0 0;
  border-top: 1px solid #E8EAEF;
}
.bm-week-items li {
  font-size: 14px;
  line-height: 1.55;
  color: #33425A;
  margin-bottom: 8px;
  padding-left: 24px;
  position: relative;
}
.bm-week-bullet {
  position: absolute;
  left: 0;
  color: #F97316;
  font-weight: 700;
}

/* FOUNDER */
.bm-founder { padding: 72px 0; }
@media (max-width: 860px) { .bm-founder { padding: 48px 0; } }
.bm-founder-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 32px;
}
@media (max-width: 860px) {
  .bm-founder-grid { grid-template-columns: 1fr; gap: 24px; }
}
.bm-founder-text p {
  font-size: 16px;
  line-height: 1.65;
  color: #33425A;
  margin: 0 0 14px;
}
.bm-founder-text p:last-child { margin-bottom: 0; }
.bm-founder-card {
  background: linear-gradient(135deg, #0F1B2D 0%, #1B3A6B 100%);
  border-radius: 18px;
  padding: 32px;
  color: #fff;
}
.bm-founder-stats { display: flex; flex-direction: column; gap: 18px; }
.bm-founder-stats div { display: flex; flex-direction: column; }
.bm-founder-stats strong {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 30px;
  font-weight: 400;
  background: linear-gradient(135deg, #F97316, #EA580C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bm-founder-stats span {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
}

/* FAQ */
.bm-faq { padding: 72px 0; background: linear-gradient(180deg, #FAFAF8 0%, #FAFAF8 100%); }
@media (max-width: 860px) { .bm-faq { padding: 48px 0; } }
.bm-faq-list { max-width: 760px; margin-top: 24px; }
.bm-faq-item {
  border-bottom: 1px solid #E8EAEF;
  transition: background 220ms ease;
}
.bm-faq-item.is-open { background: rgba(249, 115, 22, 0.03); }
.bm-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #0F1B2D;
  text-align: left;
}
.bm-faq-q:hover { color: #F97316; }
.bm-faq-chevron {
  font-size: 22px;
  color: #F97316;
  font-weight: 300;
  margin-left: 12px;
}
.bm-faq-a {
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #33425A;
}

/* INSCRIPTION FORM */
.bm-inscription {
  padding: 72px 0;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.04) 0%, rgba(234, 88, 12, 0.02) 100%);
}
@media (max-width: 860px) { .bm-inscription { padding: 48px 0; } }
.bm-form {
  max-width: 720px;
  margin: 24px 0 0;
  background: #fff;
  border: 1px solid #E8EAEF;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(15, 27, 45, 0.06);
}
@media (max-width: 600px) { .bm-form { padding: 22px; } }
.bm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 600px) { .bm-form-row { grid-template-columns: 1fr; } }
.bm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bm-field:last-child { margin-bottom: 0; }
.bm-field label {
  font-size: 13px;
  font-weight: 600;
  color: #0F1B2D;
}
.bm-field input,
.bm-field select,
.bm-field textarea {
  padding: 11px 14px;
  border: 1px solid #D8DCE5;
  border-radius: 10px;
  font-size: 15px;
  background: #fff;
  font-family: inherit;
  color: #0F1B2D;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.bm-field input:focus,
.bm-field select:focus,
.bm-field textarea:focus {
  outline: none;
  border-color: #F97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.bm-field.error input,
.bm-field.error select,
.bm-field.error textarea {
  border-color: #DC2626;
}
.bm-field .bm-err {
  font-size: 12px;
  color: #DC2626;
}
.bm-field .bm-hint {
  font-size: 12px;
  color: #5F6A7D;
  font-style: italic;
}
.bm-optional { font-weight: 400; color: #8A99B3; font-size: 12px; }
.bm-cta { width: 100%; margin-top: 16px; }
.bm-mention {
  text-align: center;
  font-size: 12px;
  color: #5F6A7D;
  margin: 12px 0 0;
}
.bm-err-submit {
  text-align: center;
  font-size: 14px;
  color: #DC2626;
  margin: 12px 0 0;
}

/* FOOTER */
.bm-footer {
  padding: 28px 0;
  background: #0F1B2D;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}
.bm-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.bm-footer-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 1px;
}
.bm-footer-links a:hover { color: #fff; border-color: #fff; }

/* ============================================================
   OFFER STACK — bloc "ce que tu obtiens" pour 29€
   ============================================================ */
.bm-offer-stack {
  padding: 80px 0;
  background: linear-gradient(180deg, #FAFAF8 0%, #F4F1EB 100%);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.bm-offer-stack.is-reveal { opacity: 1; transform: translateY(0); }
.bm-offer-stack .bm-section-title em {
  font-style: italic;
  color: #c2410c;
}

.bm-offer-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(15, 27, 45, 0.08);
  box-shadow: 0 4px 24px rgba(15, 27, 45, 0.06);
  padding: 8px 28px;
  max-width: 720px;
  margin: 32px 0 24px;
}

.bm-offer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(15, 27, 45, 0.06);
}
.bm-offer-row:last-of-type { border-bottom: none; }

.bm-offer-row-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}
.bm-offer-check {
  width: 24px; height: 24px;
  flex-shrink: 0;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}
.bm-offer-row-title {
  font-size: 15px;
  font-weight: 600;
  color: #0F1B2D;
  line-height: 1.4;
}
.bm-offer-row-sub {
  font-size: 13px;
  color: #5F6A7D;
  margin-top: 2px;
  line-height: 1.4;
}
.bm-offer-row-value {
  font-size: 16px;
  font-weight: 600;
  color: #5F6A7D;
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-color: rgba(95, 106, 125, 0.5);
}

.bm-offer-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 18px;
  border-top: 2px solid rgba(15, 27, 45, 0.12);
  margin-top: 4px;
}
.bm-offer-total-label {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5F6A7D;
  font-weight: 600;
}
.bm-offer-total-value {
  font-size: 22px;
  font-weight: 700;
  color: #5F6A7D;
  text-decoration: line-through;
  text-decoration-color: rgba(95, 106, 125, 0.6);
}

.bm-offer-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  margin: 0 -28px -8px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-radius: 0 0 16px 16px;
  border-top: 1px solid rgba(249, 115, 22, 0.25);
}
.bm-offer-price-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  font-weight: 600;
  color: #0F1B2D;
}
.bm-offer-price-sub {
  font-size: 12px;
  color: #c2410c;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bm-offer-price-value {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 48px;
  color: #c2410c;
  line-height: 1;
}

.bm-offer-economy {
  max-width: 720px;
  font-size: 16px;
  color: #0F1B2D;
  line-height: 1.6;
  margin: 0 0 28px;
}
.bm-offer-economy strong { color: #c2410c; font-weight: 700; }
.bm-offer-economy-sub {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #5F6A7D;
  line-height: 1.55;
}

.bm-offer-cta-wrap {
  max-width: 720px;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.bm-offer-cta-wrap .btn { text-align: center; }

@media (max-width: 720px) {
  .bm-offer-stack { padding: 56px 0; }
  .bm-offer-card { padding: 4px 18px; }
  .bm-offer-row { padding: 16px 0; }
  .bm-offer-row-title { font-size: 14px; }
  .bm-offer-row-sub { font-size: 12px; }
  .bm-offer-row-value { font-size: 14px; }
  .bm-offer-total-value { font-size: 18px; }
  .bm-offer-price-row { margin: 0 -18px -4px; padding: 18px 18px; }
  .bm-offer-price-value { font-size: 38px; }
  .bm-offer-cta-wrap { justify-content: center; }
  .bm-offer-cta-wrap .btn { width: 100%; }
}

/* ============================================================
   POLYCOPIÉ — aperçu grille + lightbox
   ============================================================ */
.bm-polycopie {
  padding: 80px 0;
  background: #FAFAF8;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.bm-polycopie.is-reveal { opacity: 1; transform: translateY(0); }
.bm-polycopie .bm-section-title em {
  font-style: italic;
  color: #1B3A6B;
}

.bm-poly-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 16px 0 36px;
}
.bm-poly-preview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.2s ease;
}
.bm-poly-preview-card:hover {
  transform: translateY(-4px);
}
.bm-poly-preview-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(15, 27, 45, 0.12), 0 1px 3px rgba(15, 27, 45, 0.08);
  border: 1px solid rgba(15, 27, 45, 0.06);
  background: #fff;
  transition: box-shadow 0.2s ease;
}
.bm-poly-preview-card:hover img {
  box-shadow: 0 8px 28px rgba(15, 27, 45, 0.18), 0 2px 6px rgba(15, 27, 45, 0.1);
}
.bm-poly-preview-caption {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #5F6A7D;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

.bm-poly-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
  max-width: 760px;
}
.bm-poly-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #2B374B;
}
.bm-poly-check {
  width: 22px; height: 22px;
  flex-shrink: 0;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  margin-top: 1px;
}

/* Lightbox */
.bm-poly-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 45, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bm-lb-fadein 0.2s ease;
  cursor: zoom-out;
}
@keyframes bm-lb-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bm-poly-lb-img {
  max-width: min(900px, 90vw);
  max-height: 88vh;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
  background: #fff;
  cursor: default;
}
.bm-poly-lb-close,
.bm-poly-lb-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  font-family: -apple-system, sans-serif;
}
.bm-poly-lb-close:hover,
.bm-poly-lb-nav:hover { background: rgba(255, 255, 255, 0.2); }
.bm-poly-lb-close { top: 20px; right: 20px; }
.bm-poly-lb-nav.prev { left: 24px; }
.bm-poly-lb-nav.next { right: 24px; }
.bm-poly-lb-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 16px;
  border-radius: 20px;
}

@media (max-width: 860px) {
  .bm-poly-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .bm-poly-bullets {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (max-width: 540px) {
  .bm-poly-lb-close { width: 40px; height: 40px; top: 12px; right: 12px; font-size: 24px; }
  .bm-poly-lb-nav { width: 40px; height: 40px; font-size: 24px; }
  .bm-poly-lb-nav.prev { left: 12px; }
  .bm-poly-lb-nav.next { right: 12px; }
  .bm-poly-lb-caption { font-size: 11px; padding: 6px 12px; }
}

/* ============================================================
   STRIPE EMBEDDED CHECKOUT — modale plein écran
   ============================================================ */
.bm-checkout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 45, 0.78);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: bm-checkout-fadein 0.18s ease-out;
}
@keyframes bm-checkout-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bm-checkout-container {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}
.bm-checkout-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(15, 27, 45, 0.08);
  color: #0F1B2D;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.18s ease;
}
.bm-checkout-close:hover { background: rgba(15, 27, 45, 0.16); }
#bm-checkout-mount { min-height: 540px; }
.bm-checkout-error {
  padding: 24px 16px 16px;
  color: #0F1B2D;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bm-checkout-error strong { display: block; font-size: 16px; margin-bottom: 8px; }
.bm-checkout-error p { margin: 0 0 8px; color: #5F6A7D; font-size: 14px; line-height: 1.5; }
.bm-checkout-error a { color: #1B3A6B; text-decoration: underline; }

@media (max-width: 540px) {
  .bm-checkout-overlay { padding: 12px 8px; }
  .bm-checkout-container { padding: 10px; border-radius: 10px; }
  #bm-checkout-mount { min-height: 480px; }
}

/* Overlay de confirmation post-paiement (lock la modale jusqu'à redirection) */
.bm-checkout-success {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 28px;
  animation: bm-checkout-fadein 0.25s ease-out;
  z-index: 3;
}
.bm-checkout-success-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
}
.bm-checkout-success-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 26px;
  color: #16a34a;
  font-weight: 600;
  margin-bottom: 12px;
}
.bm-checkout-success-body {
  font-size: 15px;
  line-height: 1.55;
  color: #33425A;
  max-width: 480px;
  margin: 0 0 16px;
}
.bm-checkout-success-redirect {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5F6A7D;
  font-weight: 600;
  margin: 0;
}
/* Le container doit être en position relative pour que .bm-checkout-success en absolute soit cadré correctement */
.bm-checkout-container { position: relative; }

/* ============================================================
   PLATEFORME REPLAY — pages /replays + /replays/login
   ============================================================ */
.rp-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #FAFAF8 0%, #F0EBE0 100%);
  color: #0F1B2D;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rp-header {
  border-bottom: 1px solid rgba(15, 27, 45, 0.08);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}
.rp-header-wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.rp-brand { display: flex; flex-direction: column; gap: 2px; }
.rp-brand-eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #8e7a3b; font-weight: 600;
}
.rp-brand-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; font-size: 18px; color: #0F1B2D;
}
.rp-header-right { display: flex; align-items: center; gap: 16px; }
.rp-user { font-size: 13px; color: #5F6A7D; }
.rp-logout-btn {
  background: rgba(15, 27, 45, 0.06);
  border: none; padding: 8px 14px; border-radius: 8px;
  font-size: 13px; cursor: pointer; color: #0F1B2D; font-weight: 500;
  transition: background 0.15s ease;
}
.rp-logout-btn:hover { background: rgba(15, 27, 45, 0.12); }

.rp-main { padding: 40px 0 80px; }
.rp-loading { font-size: 14px; color: #5F6A7D; }

/* ---------- LOGIN ---------- */
.rp-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.rp-login-card {
  background: #fff; border-radius: 18px; padding: 40px 36px;
  max-width: 520px; width: 100%;
  box-shadow: 0 8px 40px rgba(15, 27, 45, 0.08);
  border: 1px solid rgba(15, 27, 45, 0.04);
}
.rp-login-eyebrow {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #c2410c; font-weight: 700; margin-bottom: 12px;
}
.rp-login-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400; font-size: 26px; line-height: 1.2;
  color: #0F1B2D; margin: 0 0 14px;
}
.rp-login-sub {
  font-size: 14px; line-height: 1.55; color: #5F6A7D; margin: 0 0 24px;
}
.rp-login-form { display: flex; flex-direction: column; gap: 12px; }
.rp-login-form input[type=email] {
  border: 1.5px solid rgba(15, 27, 45, 0.12);
  border-radius: 10px; padding: 14px 16px; font-size: 15px;
  font-family: inherit; color: #0F1B2D;
  transition: border-color 0.15s ease;
}
.rp-login-form input[type=email]:focus {
  outline: none; border-color: #1B3A6B;
}
.rp-login-form .btn { width: 100%; text-align: center; }
.rp-err {
  background: #fdf6f6; border-left: 3px solid #b54848;
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; color: #b54848; margin: 8px 0 0;
}
.rp-login-help {
  margin: 24px 0 0; font-size: 13px; color: #5F6A7D; text-align: center;
}
.rp-login-help a { color: #1B3A6B; font-weight: 600; text-decoration: underline; }

.rp-login-success { text-align: center; padding: 12px 0; }
.rp-login-success-emoji { font-size: 56px; margin-bottom: 12px; }
.rp-login-success h2 {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: 24px; color: #16a34a; margin: 0 0 12px;
}
.rp-login-success p { font-size: 14px; line-height: 1.55; color: #33425A; margin: 0 0 16px; }
.rp-login-back {
  background: transparent; border: 1.5px solid rgba(15, 27, 45, 0.12);
  padding: 10px 18px; border-radius: 8px;
  font-size: 13px; cursor: pointer; color: #0F1B2D; font-weight: 600;
}
.rp-login-back:hover { background: rgba(15, 27, 45, 0.04); }

/* ---------- REPLAYS LIST + PLAYER ---------- */
.rp-replays-wrap { max-width: 920px; margin: 0 auto; }
.rp-section-eyebrow {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #c2410c; font-weight: 700; margin-bottom: 12px;
}
.rp-section-title {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: 38px; line-height: 1.1; color: #0F1B2D; margin: 0 0 12px;
}
.rp-section-sub { font-size: 15px; line-height: 1.6; color: #5F6A7D; margin: 0 0 32px; max-width: 680px; }

.rp-player-section {
  background: #fff; border-radius: 14px; overflow: hidden;
  margin: 0 0 32px;
  box-shadow: 0 8px 32px rgba(15, 27, 45, 0.1);
}
.rp-player-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid rgba(15, 27, 45, 0.06);
}
.rp-player-title { margin: 0; font-size: 18px; font-weight: 600; color: #0F1B2D; }
.rp-player-desc { margin: 4px 0 0; font-size: 13px; color: #5F6A7D; }
.rp-player-close {
  background: rgba(15, 27, 45, 0.06); border: none; width: 32px; height: 32px;
  border-radius: 50%; font-size: 22px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: #0F1B2D;
  flex-shrink: 0;
}
.rp-player-video { width: 100%; max-height: 70vh; display: block; background: #000; }
.rp-player-error {
  padding: 32px; text-align: center; color: #b54848; font-size: 14px;
  background: #fdf6f6;
}

.rp-videos-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.rp-video-card {
  display: grid; grid-template-columns: 56px 1fr 32px; gap: 16px; align-items: center;
  background: #fff; border: 1px solid rgba(15, 27, 45, 0.08);
  border-radius: 12px; padding: 16px 20px;
  text-align: left; cursor: pointer; font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.rp-video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 27, 45, 0.08);
  border-color: rgba(15, 27, 45, 0.16);
}
.rp-video-card.is-active {
  border-color: #1B3A6B; background: linear-gradient(135deg, rgba(27, 58, 107, 0.04), #fff);
}
.rp-video-num {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; font-size: 32px; color: #8e7a3b;
  text-align: center;
}
.rp-video-body { display: flex; flex-direction: column; gap: 4px; }
.rp-video-title { font-size: 15px; font-weight: 600; color: #0F1B2D; }
.rp-video-desc { font-size: 13px; color: #5F6A7D; line-height: 1.45; }
.rp-video-meta { font-size: 12px; color: #8A99B3; letter-spacing: 0.04em; }
.rp-video-play {
  font-size: 18px; color: #1B3A6B; text-align: center;
}

.rp-empty {
  background: #fff; border-radius: 14px; padding: 48px 32px; text-align: center;
  border: 1px dashed rgba(15, 27, 45, 0.12);
}
.rp-empty p { margin: 0 0 8px; color: #0F1B2D; font-size: 15px; font-weight: 500; }
.rp-empty-sub { font-size: 13px; color: #5F6A7D; font-weight: 400 !important; }

.rp-disclaimer {
  margin: 32px 0 0; font-size: 12px; color: #8A99B3; text-align: center; line-height: 1.5;
}

@media (max-width: 720px) {
  .rp-section-title { font-size: 28px; }
  .rp-login-card { padding: 30px 24px; }
  .rp-login-title { font-size: 22px; }
  .rp-video-card { padding: 14px 16px; gap: 12px; }
  .rp-video-num { font-size: 26px; }
  .rp-header-wrap { padding: 14px 0; }
  .rp-brand-title { font-size: 15px; }
  .rp-user { font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===========================================================
   STAGE PRÉPA LANDING (/stage) — .sp-*
   Stage intensif maths CPGE · 20 → 28 août 2026 · 240 €
   Hero sombre navy + or, sections claires, motion design.
   =========================================================== */

.sp-page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.sp-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.sp-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.sp-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(27px, 3.6vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 10px 0 0;
  max-width: 24ch;
  text-wrap: balance;
}
.sp-body {
  max-width: 66ch;
  color: var(--ink-2);
  margin: 14px 0 0;
}
.sp-section {
  padding: 72px 0;
  border-bottom: 1px solid var(--line);
}

/* ---------- Boutons ---------- */
.sp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 26px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #C9A961 0%, #DDC084 55%, #C9A961 100%);
  color: #14213D;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(201, 169, 97, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.sp-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(201, 169, 97, 0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.sp-btn:active { transform: scale(0.97); }
.sp-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: sp-shine 4.5s ease-in-out infinite;
}
/* translateX plutôt que left : animer left recalculait la mise en page à
   chaque image. 500 % de la largeur du reflet = de -60 % à 140 % du bouton. */
@keyframes sp-shine {
  0%        { transform: translateX(0) skewX(-18deg); }
  55%, 100% { transform: translateX(500%) skewX(-18deg); }
}
.sp-btn-hero { font-size: 17px; padding: 16px 34px; border-radius: 14px; }
.sp-btn-small { min-height: 40px; padding: 9px 18px; font-size: 14px; border-radius: 10px; }
.sp-reassure {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---------- Topbar sticky ---------- */
.sp-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  background: rgba(250, 250, 248, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-topbar.is-shown { transform: translateY(0); }
.sp-topbar-logo { height: 26px; width: auto; display: block; }

/* ---------- HERO ---------- */
.sp-hero {
  position: relative;
  background:
    radial-gradient(ellipse 120% 90% at 70% -20%, #1B3A6B 0%, transparent 55%),
    linear-gradient(168deg, #0C1830 0%, #0B1526 55%, #101F38 100%);
  color: #fff;
  padding: 64px 0 0;
  overflow: hidden;
}
.sp-hero .rentree-hero-grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
.sp-hero .rentree-hero-blob-1 { opacity: 0.9; }
.sp-hero .rentree-hero-blob-2 { opacity: 0.5; }
.sp-hero .rentree-hero-blob-3 { opacity: 0.85; }
/* Pages de stage : héro orange « coucher de soleil », pour marquer le passage
   depuis l'accueil (bleu nuit). Les dorés passent en crème pour rester lisibles. */
.sp-hero.is-stage {
  background:
    radial-gradient(ellipse 120% 90% at 70% -20%, #FDBA74 0%, transparent 55%),
    linear-gradient(168deg, #EA580C 0%, #C2410C 55%, #9A3412 100%);
}
.sp-hero.is-stage .rentree-hero-blob-1 { background: radial-gradient(circle at 40% 40%, rgba(255, 237, 213, 0.30), transparent 70%); }
.sp-hero.is-stage .rentree-hero-blob-2 { background: radial-gradient(circle at 50% 50%, rgba(254, 215, 170, 0.45), transparent 70%); }
.sp-hero.is-stage .rentree-hero-blob-3 { background: radial-gradient(circle at 50% 50%, rgba(124, 45, 18, 0.35), transparent 70%); }
.sp-hero.is-stage .sp-hero-accent { background: linear-gradient(120deg, #FFE7C2, #FFF8EC, #FFDDB0); -webkit-background-clip: text; background-clip: text; }
.sp-hero.is-stage .sp-hero-dot,
.sp-hero.is-stage .sp-hero-dot::after { background: #FFE7C2; }
.sp-hero.is-stage .sp-hero-stat { background: rgba(60, 18, 4, 0.28); }
.sp-hero.is-stage .sp-hero-stat strong { color: #FFE7C2; }
.sp-hero.is-stage .sp-hero-stat span { color: rgba(255, 255, 255, 0.75); }
.sp-hero.is-stage .sp-hero-ctas .sp-reassure { color: rgba(255, 255, 255, 0.8); }
.sp-hero.is-stage .sp-marquee-label { color: rgba(255, 255, 255, 0.7); }
.sp-hero-wrap {
  position: relative;
  z-index: 2;
  padding-top: 20px;
  padding-bottom: 56px;
}
.sp-hero-logo-link {
  display: inline-block;
  transition: opacity 0.15s ease;
}
.sp-hero-logo-link:hover { opacity: 0.8; }
.sp-hero-logo {
  height: 30px;
  width: auto;
  display: block;
  margin-bottom: 40px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.sp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 8px 16px;
}
.sp-hero-eyebrow .sp-hero-dot { flex: none; }
.sp-hero-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C9A961;
}
/* Halo en transform/opacity (géré par la carte graphique) plutôt qu'en
   box-shadow animé, repeint à chaque image. */
.sp-hero-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.55);
  animation: sp-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes sp-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(2.7); opacity: 0; }
}
.sp-hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 6vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 26px 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.sp-hero-accent {
  font-style: italic;
  color: #DFC186;
  background: linear-gradient(120deg, #C9A961, #EAD9A8, #C9A961);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-hero-sub {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: clamp(15.5px, 1.9vw, 17.5px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.sp-hero-count { margin-top: 30px; }
.sp-hero-count-label {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}
.sp-ticks { display: inline-flex; align-items: flex-start; gap: 10px; }
.sp-tick { text-align: center; min-width: 52px; }
.sp-tick-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 8px 6px;
  transition: transform 0.22s ease, color 0.22s ease;
}
.sp-tick-num.is-flip { transform: translateY(-4px); color: #DFC186; }
.sp-tick-label {
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.sp-tick-sep {
  font-family: var(--font-mono);
  font-size: 26px;
  color: rgba(255, 255, 255, 0.35);
  padding-top: 12px;
}
.sp-hero-ctas { margin-top: 32px; }
.sp-hero-ctas .sp-reassure { color: rgba(255, 255, 255, 0.55); }

/* Séquence d'entrée du hero. Départ à 0.01 et non 0 : Chrome ignore, pour
   l'« affichage principal » (LCP), tout élément d'opacité nulle à sa première
   peinture — le titre n'était alors jamais retenu. */
.sp-seq {
  opacity: 0.01;
  transform: translateY(18px);
  animation: sp-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sp-seq-1 { animation-delay: 0.05s; }
.sp-seq-2 { animation-delay: 0.18s; }
.sp-seq-3 { animation-delay: 0.34s; }
.sp-seq-4 { animation-delay: 0.5s; }
.sp-seq-5 { animation-delay: 0.66s; }
@keyframes sp-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Stats hero ---------- */
.sp-hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sp-hero-stat {
  background: rgba(11, 21, 38, 0.55);
  padding: 18px 14px;
  text-align: center;
}
.sp-hero-stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: #DFC186;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sp-hero-stat span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Bandeau "Les prépas de nos élèves" (logos défilants) ---------- */
.sp-marquee {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  padding: 18px 0 20px;
}
.sp-marquee-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px;
}
.sp-marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sp-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 64px;
  white-space: nowrap;
  padding-right: 64px;
  animation: sp-marquee-scroll 15s linear infinite;
  will-change: transform;
}
.sp-marquee-logo { display: inline-flex; align-items: center; flex: none; }
.sp-marquee-logo img {
  height: 34px;
  width: auto;
  display: block;
  /* logos couleur → blanc uniforme sur fond sombre */
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.sp-marquee-logo em {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 21px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}
@keyframes sp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* ---------- Bloc CTA inter-sections ---------- */
.sp-cta-block { text-align: center; margin-top: 38px; }

/* ---------- Reveal générique des sections ---------- */
.sp-structure-card, .sp-testimonial, .sp-outcome, .sp-offer-row {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-reveal .sp-structure-card, .is-reveal .sp-testimonial, .is-reveal .sp-outcome,
.is-reveal .sp-offer-row {
  opacity: 1;
  transform: translateY(0);
}

/* Séances : révélation individuelle pilotée par le scroll (classe .is-in posée en JS) */
.sp-day {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-day.is-in { opacity: 1; transform: translateY(0); }

/* ---------- Structure 12/4/4 ---------- */
.sp-structure-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 40px;
  max-width: 900px;
}
.sp-structure-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 2px 14px rgba(15, 27, 45, 0.04);
  transition-property: opacity, transform, box-shadow;
}
.sp-structure-card:hover { box-shadow: 0 10px 30px rgba(15, 27, 45, 0.09); }
.sp-structure-num {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.sp-structure-num.is-red { color: #B3383F; }
.sp-structure-card h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  margin: 12px 0 8px;
}
.sp-structure-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Programme / timeline ---------- */
.sp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 8px;
  font-size: 13px;
  color: var(--ink-3);
}
.sp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sp-key { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.sp-key-new { background: var(--navy); }
.sp-key-rev { border: 1.5px solid var(--ink-4); }

.sp-days { position: relative; margin-top: 22px; }
.sp-days-line {
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--navy), rgba(27, 58, 107, 0.15));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.18s linear;
  will-change: transform;
}
.sp-day {
  position: relative;
  padding: 0 0 14px 34px;
}
.sp-day-marker {
  position: absolute;
  left: 2px;
  top: 26px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--line);
  z-index: 1;
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
.sp-day-marker::after {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: 50%;
  opacity: 0;
}
.sp-day.is-in .sp-day-marker {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(27, 58, 107, 0.14);
}
.sp-day.is-in .sp-day-marker::after { animation: sp-dot-ping 0.75s ease-out 0.2s; }
@keyframes sp-dot-ping {
  0%   { opacity: 0.7; box-shadow: 0 0 0 0 rgba(27, 58, 107, 0.5); }
  100% { opacity: 0; box-shadow: 0 0 0 16px rgba(27, 58, 107, 0); }
}
.sp-day-max.is-in .sp-day-marker {
  border-color: #B3383F;
  box-shadow: 0 0 0 4px rgba(179, 56, 63, 0.16);
}
.sp-day-off .sp-day-marker { border-style: dashed; }
.sp-day-off.is-in .sp-day-marker { border-color: var(--ink-4); box-shadow: none; }

.sp-day-head {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 52px 18px 20px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sp-day-head:hover { border-color: rgba(27, 58, 107, 0.4); box-shadow: 0 4px 18px rgba(15, 27, 45, 0.06); }
.sp-day.is-open .sp-day-head {
  border-color: rgba(27, 58, 107, 0.5);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 4px 18px rgba(15, 27, 45, 0.06);
}
.sp-day-max .sp-day-head:hover, .sp-day-max.is-open .sp-day-head { border-color: rgba(179, 56, 63, 0.55); }

.sp-day-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 8px;
}
.sp-day-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.sp-day-max .sp-day-n { color: #B3383F; }
.sp-day-date { font-size: 13px; color: var(--ink-3); }
.sp-day-slots { display: inline-flex; align-items: center; gap: 6px; }
.sp-day-slots em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.sp-day-max .sp-day-slots em { color: #B3383F; border-color: rgba(179, 56, 63, 0.4); background: rgba(179, 56, 63, 0.06); }
.sp-tag-max {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #B3383F;
  border: 1px solid #B3383F;
  border-radius: 4px;
  padding: 2px 7px;
}
.sp-day-titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.sp-day-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.22;
  margin: 0;
}
.sp-day-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--navy);
  margin-top: 3px;
}
.sp-day-max .sp-day-sub { color: #B3383F; }
.sp-day-glyph {
  flex: none;
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1;
  color: var(--navy-100);
  -webkit-text-stroke: 0.5px rgba(27, 58, 107, 0.35);
  user-select: none;
}
.sp-day-chevron {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease;
}
.sp-day-chevron.is-open { transform: rotate(45deg); background: var(--navy); border-color: var(--navy); color: #fff; }

/* Accordéon (grid-rows 0fr → 1fr) */
.sp-day-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-day-body.is-open { grid-template-rows: 1fr; }
.sp-day-body-inner {
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-top: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.sp-day.is-open .sp-day-body-inner { border-color: rgba(27, 58, 107, 0.5); border-top: none; }
.sp-day-max.is-open .sp-day-body-inner { border-color: rgba(179, 56, 63, 0.55); }
.sp-day-intro {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 18px 20px 0;
  max-width: 64ch;
}
.sp-day-list {
  list-style: none;
  margin: 0;
  padding: 16px 20px 20px;
  display: grid;
  gap: 7px;
}
.sp-day-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.sp-day-body.is-open li { opacity: 1; transform: translateY(0); }
.sp-day-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--navy);
}
.sp-day-max .sp-day-list li::before { background: #B3383F; }
.sp-day-list li.rev::before { background: transparent; border: 1.5px solid var(--ink-4); }

/* Journée off */
.sp-day-off .sp-day-head-off {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 14px 20px;
}
.sp-day-title-off {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-3);
  margin-top: 4px;
}
.sp-program-cta { text-align: center; margin-top: 36px; }
/* CTA intégré à la timeline : la ligne le rejoint, le point s'allume, le bouton pulse or */
.sp-days .sp-program-cta { position: relative; margin-top: 8px; padding: 22px 0 6px 34px; }
.sp-cta-marker { top: calc(50% - 2px); }
.sp-program-cta.is-lit .sp-cta-marker {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.28);
}
.sp-program-cta.is-lit .sp-btn { animation: sp-cta-pulse 1.7s ease-out infinite; }
@keyframes sp-cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(201, 169, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-program-cta.is-lit .sp-btn { animation: none; box-shadow: 0 0 0 5px rgba(201, 169, 97, 0.35); }
}

/* ---------- Témoignages ---------- */
.sp-testimonials { background: var(--surface); }
.sp-rating-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.sp-rating-head strong { color: var(--ink); }
.sp-stars { display: inline-flex; gap: 2px; }
.sp-stars i {
  font-style: normal;
  color: #C9A961;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(201, 169, 97, 0.35);
}
.sp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.sp-testimonial {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(15, 27, 45, 0.03), 0 10px 28px -18px rgba(15, 27, 45, 0.14);
  transition-property: opacity, transform, box-shadow;
}
.sp-testimonial:hover { box-shadow: 0 14px 36px -14px rgba(15, 27, 45, 0.2); }
.sp-testimonial .sp-stars i { font-size: 13px; }
.sp-testimonial blockquote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-2);
  flex: 1;
}
.sp-testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.sp-testimonial figcaption strong { font-size: 14px; }
.sp-testimonial figcaption span { font-size: 12.5px; color: var(--ink-3); }
.sp-testimonial-source {
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 4px;
}

/* ---------- Founder (réutilise .rentree-founder-* de /rentree) ---------- */
.sp-founder .rentree-founder-wrap { max-width: 760px; margin: 0 auto; }
.sp-founder .rentree-founder-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-founder.is-reveal .rentree-founder-card { opacity: 1; transform: translateY(0); }

/* ---------- Divers ---------- */
.sp-nowrap { white-space: nowrap; }
.sp-mathcal {
  font-size: 1.3em;
  line-height: 1;
  font-family: var(--font-serif);
  vertical-align: -0.05em;
}
/* Logo Cours Edgar inline dans un titre (rendu blanc, calé sur la ligne de base) */
.sp-title-logo {
  display: inline-block;
  height: 0.62em;
  width: auto;
  vertical-align: baseline;
  transform: translateY(0.04em);
  margin-left: 0.08em;
  filter: brightness(0) invert(1);
}

/* ---------- Acquis ---------- */
.sp-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
  margin-top: 28px;
  max-width: 920px;
}
.sp-outcome {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition-property: opacity, transform;
}
.sp-outcome-mark { color: var(--navy); font-family: var(--font-serif); font-size: 17px; }
.sp-outcome p { margin: 0; font-size: 15px; line-height: 1.55; }

/* ---------- Filières ---------- */
.sp-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.sp-pill {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  background: #fff;
}
.sp-pill-lead { border-color: var(--navy); color: var(--navy); background: var(--navy-100); }

/* ---------- Offre / prix ---------- */
.sp-offer {
  /* compense la topbar fixe quand on scrolle vers #inscription */
  scroll-margin-top: 72px;
}
.sp-offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0;
  margin-top: 36px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 40px rgba(15, 27, 45, 0.07);
}
.sp-offer-list { padding: 30px 28px; display: grid; gap: 18px; align-content: start; }
.sp-offer-cta { margin-top: 8px; }
.sp-offer-cta .sp-btn { width: 100%; }
.sp-offer-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  transition-property: opacity, transform;
}
.sp-offer-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--navy-100);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.sp-offer-label { font-weight: 650; font-size: 15.5px; }
.sp-offer-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; margin-top: 1px; }
.sp-offer-price {
  background: linear-gradient(165deg, #0C1830 0%, #14294D 100%);
  color: #fff;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 14px;
}
.sp-offer-price-num {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #C9A961, #EAD9A8, #C9A961);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sp-offer-price-anchor { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); max-width: 34ch; }
.sp-offer-price-anchor strong { color: #fff; }
.sp-offer-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #DFC186;
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 999px;
  padding: 5px 13px;
  position: relative;
}
.sp-offer-badge::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 5px rgba(201, 169, 97, 0.22);
  opacity: 0;
  pointer-events: none;
  animation: sp-badge-pulse 2.6s ease-in-out infinite;
}
@keyframes sp-badge-pulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
.sp-offer-price .sp-reassure { color: rgba(255, 255, 255, 0.55); margin-top: 0; }

/* ---------- FAQ ---------- */
.sp-faq-list { margin-top: 30px; max-width: 780px; display: grid; gap: 12px; }
.sp-faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.sp-faq-item.is-open { border-color: rgba(27, 58, 107, 0.45); }
.sp-faq-q {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  font-weight: 650;
  font-size: 15.5px;
  line-height: 1.45;
  padding: 17px 56px 17px 20px;
  cursor: pointer;
}
.sp-faq-q .sp-day-chevron { top: 14px; }
.sp-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-faq-a.is-open { grid-template-rows: 1fr; }
.sp-faq-a-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.sp-faq-a.is-open .sp-faq-a-inner { padding-bottom: 18px; }

/* ---------- Thank you ---------- */
.sp-thankyou .sp-hero { min-height: 100vh; display: flex; align-items: center; padding: 0; }
.sp-thankyou-list {
  list-style: none;
  margin: 22px auto 0;
  padding: 0;
  max-width: 560px;
  text-align: left;
  display: grid;
  gap: 12px;
}
.sp-thankyou-list li {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.sp-thankyou-list strong { color: #DFC186; }

/* ---------- Footer ---------- */
.sp-footer {
  padding: 30px 0 56px;
  font-size: 13px;
  color: var(--ink-3);
}
.sp-footer .sp-wrap {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Focus ---------- */
.sp-page :focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sp-section { padding: 56px 0; }
  .sp-structure-grid, .sp-structure-grid.is-triple { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .sp-testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sp-outcomes-grid { grid-template-columns: 1fr; gap: 0; }
  .sp-offer-card { grid-template-columns: 1fr; }
  /* Mobile : le panneau prix + bouton passe AVANT la liste des inclus,
     pour que le CTA soit visible dès l'arrivée sur le bloc */
  .sp-offer-price { order: -1; }
  .sp-offer-price .sp-btn { width: 100%; }
}
@media (max-width: 640px) {
  .sp-page { font-size: 16px; }
  .sp-wrap { padding: 0 18px; }
  .sp-hero { padding-top: 40px; }
  .sp-hero-logo { height: 24px; margin-bottom: 30px; }
  .sp-hero-eyebrow { font-size: 10.5px; padding: 7px 12px; letter-spacing: 0.1em; }
  .sp-hero-wrap { padding-bottom: 42px; }
  .sp-tick { min-width: 44px; }
  .sp-tick-num { font-size: 24px; padding: 7px 4px; }
  .sp-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .sp-hero-stat { padding: 14px 10px; }
  .sp-hero-stat strong { font-size: 22px; }
  .sp-tick-sep { font-size: 20px; padding-top: 10px; }
  .sp-hero-ctas .sp-btn-hero { width: 100%; }
  .sp-day { padding-left: 26px; }
  .sp-days-line { left: 5px; }
  .sp-day-marker { left: 0; }
  .sp-day-head { padding: 15px 46px 15px 16px; }
  .sp-day-title { font-size: 18px; }
  .sp-day-glyph { display: none; }
  .sp-day-chevron { top: 14px; right: 14px; }
  .sp-day-list { padding: 14px 16px 18px; }
  .sp-day-intro { margin: 16px 16px 0; }
  /* Resserré pour que titre, carte et bouton de paiement tiennent ensemble
     sur un écran d'iPhone à l'arrivée de « Réserver ma place ». */
  .sp-offer-card { margin-top: 20px; }
  .sp-offer-list { padding: 20px 20px; gap: 12px; }
  .sp-offer-price { padding: 20px 20px; gap: 10px; }
  .sp-offer-price-num { font-size: 46px; }
  .sp-testimonials-grid { grid-template-columns: 1fr; }
  .sp-founder .rentree-founder-card { grid-template-columns: 1fr; text-align: center; }
  .sp-founder .rentree-founder-photo { margin: 0 auto; }
  .sp-founder .rentree-founder-path { justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sp-seq { animation: none; opacity: 1; transform: none; }
  .sp-btn::after { animation: none; display: none; }
  .sp-marquee-track { animation: none; }
  .sp-hero-dot::after, .sp-offer-badge::after { animation: none; }
  .sp-days-line { transition: none; transform: scaleY(1); }
  .sp-day.is-in .sp-day-marker::after { animation: none; }
  .sp-day-marker { transition: none; }
  .sp-structure-card, .sp-testimonial, .sp-outcome, .sp-offer-row, .sp-day,
  .sp-day-list li, .sp-day-body, .sp-faq-a, .sp-topbar {
    transition: none;
  }
  .sp-structure-card, .sp-testimonial, .sp-outcome, .sp-offer-row, .sp-day, .sp-day-list li {
    opacity: 1; transform: none;
  }
}

/* ===========================================================
   STAGES TOUSSAINT (/stages et /stages/<slug>) — .sth-*
   Complète les classes .sp-* ci-dessus : sélecteur de filière,
   cartes professeurs, badges consolidation/anticipation.
   =========================================================== */

.sth-page { scroll-behavior: smooth; }

/* Emplacement à remplir — visible sans être laid, pour qu'on sache
   d'un coup d'œil ce qui reste à renseigner avant publication. */
.sth-todo {
  border: 1px dashed #C9A961 !important;
  background: rgba(201, 169, 97, 0.07) !important;
  color: #8A6D2F !important;
  font-style: italic;
}

/* ---------- Sélecteur filière / matière ---------- */
.sth-grid {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}
.sth-grid-fil { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sth-grid-mat { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.sth-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 22px 46px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.sth-card:hover {
  transform: translateY(-2px);
  border-color: var(--navy);
  box-shadow: 0 14px 34px rgba(15, 27, 45, 0.12);
}
.sth-card.is-active { border-color: var(--navy); background: var(--navy-100); }
.sth-card-label {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
}
.sth-card-accent { font-size: 14px; font-weight: 600; color: var(--navy); }
.sth-card-sub { font-size: 13px; color: var(--ink-3); }
.sth-card-go {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  color: var(--navy);
  opacity: 0.45;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.sth-card:hover .sth-card-go { opacity: 1; transform: translateY(-50%) translateX(3px); }

.sth-card-offer { padding: 26px 46px 26px 24px; gap: 7px; }
.sth-card-offer.is-best { border-color: #C9A961; background: linear-gradient(180deg, #FFFDF7 0%, #fff 60%); }
.sth-card-flag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #C9A961;
  color: #14213D;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sth-card-price {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--ink);
}
.sth-card-price s { font-family: var(--font-sans); font-size: 15px; color: var(--ink-3); margin-left: 8px; }
.sth-card-save { font-size: 12.5px; font-weight: 700; color: #1E7A4D; }

.sth-step2 { animation: sth-slide-in 0.4s ease both; }
@keyframes sth-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Cartes professeurs ----------
   Carte centrée, portrait en grand : c'est la photo et l'école qui doivent
   accrocher l'œil, pas le texte. L'école est le seul élément doré de la carte. */
.sth-profs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.sth-profs-grid.is-stage {
  grid-template-columns: repeat(auto-fit, minmax(330px, 372px));
  justify-content: center;
  gap: 24px;
}
.sth-prof {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sth-prof:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 27, 45, 0.13);
}
.sth-prof-photo {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-100);
  display: grid;
  place-items: center;
  /* Double anneau : un liseré blanc puis un halo doré, pour détacher le
     portrait du fond blanc de la carte. */
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 6px rgba(201, 169, 97, 0.55),
    0 10px 24px rgba(15, 27, 45, 0.16);
}
.sth-prof-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sth-prof-initials { font-family: var(--font-serif); font-size: 40px; color: var(--navy); }
.sth-prof-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.1;
  margin: 20px 0 0;
  color: var(--ink);
}
.sth-prof-school {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.16), rgba(234, 217, 168, 0.22));
  border: 1px solid rgba(201, 169, 97, 0.55);
}
.sth-prof-logo {
  /* Le logo est sur sa propre ligne, assez grand pour être lu : la signature de
     l'X juxtapose le X, les armes et trois lignes de texte : en dessous de 44 px
     le texte devient illisible.
     Seule la hauteur s'aligne d'une carte à l'autre, les rapports diffèrent. */
  height: 46px;
  width: auto;
  max-width: 92%;
  display: block;
  margin: 14px auto 0;
}
.sth-prof-school strong {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #8A6D2F;
}
.sth-prof-school em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: #A8874A;
}
.sth-prof-role {
  margin-top: 11px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
.sth-prof-colle {
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--navy);
  background: var(--navy-100);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--navy);
}

/* ---------- Polycopié (emplacements) ---------- */
.sth-poly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.sth-poly-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.sth-poly-card strong { display: block; font-size: 15px; color: var(--ink); }
.sth-poly-card span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.sth-poly-ph {
  flex: none;
  width: 54px;
  height: 70px;
  border-radius: 8px;
  background: var(--navy-100);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--navy);
}

.sth-price-strike {
  margin-top: 4px;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink-3);
  text-decoration: line-through;
}

.sth-marquee { margin-top: 0; }

@media (max-width: 720px) {
  .sth-prof { flex-direction: column; }
  .sth-prof-photo { width: 64px; height: 64px; }
  .sth-card { padding: 18px 40px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sth-step2 { animation: none; }
  .sth-card, .sth-card-go { transition: none; }
}

/* ---------- Titre à mot rotatif (accueil des stages) ----------
   Même mécanique que le hero de /rentree, mais sur le doré du hero stages.
   La ligne a une hauteur fixe : le mot change sans faire sauter la page. */
.sth-rot-line {
  display: block;
  min-height: 1.06em;
}
/* Mot qui tourne : dégradé doré et reflet qui court sur les lettres. Plus de
   halo ni d'ombres lumineuses animées : sur iPhone, ces flous (jusqu'à 170 px,
   redessinés en continu) faisaient dépasser la mémoire graphique autorisée et
   Safari fermait la page (« Un problème récurrent est survenu »). */
.sth-rot {
  display: inline-block;
  position: relative;
  background-image: linear-gradient(
    110deg,
    #C9A961 0%, #E8CF95 30%, #FFFBF0 46%, #FFFFFF 50%,
    #FFFBF0 54%, #E8CF95 70%, #C9A961 100%
  );
  background-size: 300% 100%;
  animation: sth-rot-sheen 2000ms linear infinite;
}
/* Emplacement à largeur fixe : le mot courant et le mot le plus long
   (invisible) sont superposés dans la même case de grille. */
.sth-rot-slot { display: inline-grid; vertical-align: baseline; }
.sth-rot-slot > * { grid-area: 1 / 1; justify-self: start; }
.sth-rot-sizer { visibility: hidden; }
.sth-rot-wrap {
  position: relative;
  display: inline-block;
  animation: sth-rot-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sth-rot-sheen {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}
@keyframes sth-rot-in {
  from { opacity: 0; transform: translateY(20px) scale(0.94); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sth-rot.is-out {
  opacity: 0;
  transform: translateY(-18px);
  transition:
    opacity 200ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* Le titre gagne une ligne : on lui laisse un peu plus de largeur. */
.sth-hero .sp-hero-title { max-width: 21ch; }

@media (prefers-reduced-motion: reduce) {
  .sth-rot { animation: none; background-position: 0 0; }
  .sth-rot-wrap { animation: none; }
  .sth-rot.is-out { opacity: 1; transform: none; transition: none; }
}

/* ---------- Carrousel à défilement continu (accueil des stages) ----------
   La piste traverse tout l'écran et un masque fait naître et disparaître les
   cartes dans le fond. L'inclinaison et l'échelle de chaque carte sont posées
   image par image en JS (voir StCarousel) : ne JAMAIS redéclarer `transform`
   ici, cela écraserait l'effet de profondeur. */
.sth-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 36px;
  padding: 26px 0 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sth-carousel-track {
  display: flex;
  align-items: stretch;
  gap: 26px;
  width: max-content;
  will-change: transform;
}
.sth-carousel-track > * {
  flex: none;
  will-change: transform, opacity;
  /* Les cartes sont posées par le JS ; on adoucit seulement l'ombre. */
  transition: box-shadow 0.3s ease;
}

/* ----- Grandes cartes professeurs -----
   Même format dans le carrousel de l'accueil et dans la grille des pages de
   stage : un professeur doit avoir la même présence partout. */
.sth-carousel-profs .sth-prof,
.sth-profs-grid.is-stage .sth-prof {
  padding: 40px 28px 34px;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(15, 27, 45, 0.12);
}
.sth-carousel-profs .sth-prof { width: 372px; }
.sth-carousel-profs .sth-prof:hover { transform: none; }
.sth-carousel-profs .sth-prof-photo,
.sth-profs-grid.is-stage .sth-prof-photo { width: 186px; height: 186px; }
.sth-carousel-profs .sth-prof-initials,
.sth-profs-grid.is-stage .sth-prof-initials { font-size: 60px; }
.sth-carousel-profs .sth-prof-name,
.sth-profs-grid.is-stage .sth-prof-name { font-size: 34px; margin-top: 24px; }
.sth-carousel-profs .sth-prof-logo,
.sth-profs-grid.is-stage .sth-prof-logo { height: 64px; margin-top: 18px; }
.sth-carousel-profs .sth-prof-role,
.sth-profs-grid.is-stage .sth-prof-role { font-size: 15.5px; }
.sth-profs-grid.is-stage .sth-prof-colle { font-size: 13.5px; padding: 6px 14px; }

/* ----- Cartes témoignages dans le carrousel ----- */
.sth-carousel-testi .sp-testimonial {
  position: relative;
  width: 468px;
  padding: 38px 36px 30px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(15, 27, 45, 0.13);
  overflow: hidden;
}
/* Guillemet décoratif : il donne du relief sans ajouter de texte à lire. */
.sth-carousel-testi .sp-testimonial::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  right: 24px;
  font-family: var(--font-serif);
  font-size: 108px;
  /* Le glyphe « porte son encre en haut de sa boîte : sans cette line-height
     réduite, il sort de la carte et on n'en voit que les deux pointes. */
  line-height: 0.74;
  color: rgba(201, 169, 97, 0.18);
  pointer-events: none;
}
/* Filet doré en haut de carte, comme une tranche de livre. */
.sth-carousel-testi .sp-testimonial::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C9A961, #EAD9A8, #C9A961);
}
.sth-carousel-testi .sp-testimonial blockquote {
  position: relative;
  font-size: 16.5px;
  line-height: 1.68;
}
/* Le parcours de l'élève (« PCSI · Louis-le-Grand ») est l'argument de la
   carte, pas une mention de bas de page : il passe devant le prénom. */
.sth-carousel-testi .sp-testimonial figcaption { gap: 3px; padding-top: 16px; }
.sth-carousel-testi .sp-testimonial figcaption strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
  order: 2;
}
.sth-carousel-testi .sp-testimonial figcaption span {
  order: 1;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

@media (max-width: 900px) {
  .sth-carousel-testi .sp-testimonial { width: 330px; padding: 30px 26px 24px; }
  .sth-carousel-testi .sp-testimonial blockquote { font-size: 15px; }
  .sth-carousel-testi .sp-testimonial figcaption span { font-size: 18px; }
  .sth-carousel-profs .sth-prof { width: 285px; }
  .sth-carousel-profs .sth-prof-photo { width: 150px; height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .sth-carousel-track { transform: none !important; }
  .sth-carousel-track > * { opacity: 1 !important; }
  .sth-carousel {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Le titre des professeurs énumère trois écoles : la largeur de 24ch de .sp-h2
   le casserait en trois lignes, alors qu'il tient sur une seule. */
.sth-profs .sp-h2 { max-width: none; }

/* Chaque puce n'a que deux éléments flex : la coche, puis tout le texte.
   Sans ce regroupement, le texte suivant <strong> forme un 3e élément et se
   retrouve dans une colonne étroite. */
.sth-poly-bullets li > span:last-child { flex: 1; min-width: 0; }

.sth-poly-note {
  max-width: 760px;
  margin: 16px 0 0;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  background: rgba(15, 27, 45, 0.035);
  color: var(--ink-3, #5F6A7D);
  font-style: italic;
}

/* Second polycopié (physique) affiché sous celui de maths, dans la même
   section : une règle fine le sépare visuellement du bloc du dessus. */
.sth-poly-physique {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(15, 27, 45, 0.08);
}

/* Un jeu d'aperçus par matière sur la page d'un stage (maths, puis physique
   pour les packs) : un petit intitulé au-dessus de chaque grille. */
.sth-poly-matiere { margin-top: 28px; }
.sth-poly-matiere:first-of-type { margin-top: 24px; }
.sth-poly-matiere-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 12px;
}
.sth-poly-matiere-head strong {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  text-transform: capitalize;
}
.sth-poly-matiere-head span {
  font-size: 13px;
  color: var(--ink-3, #5F6A7D);
}

/* Variante à trois colonnes de la grille "structure" (utilisée pour les
   replays) — la règle à 2 colonnes garde la priorité en dessous de 860px. */
.sp-structure-grid.is-triple {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1040px;
}

/* Le bloc CTA du hero n'a pas de ligne de réassurance ici : sans marge basse,
   le bouton colle à la barre de chiffres. */
.sth-hero .sp-hero-ctas { margin-top: 34px; margin-bottom: 40px; }


/* Accroche des cartes « structure » quand c'est un verbe et non une durée.
   « Consolider » à 44 px déborderait de la carte : on descend la taille et on
   remonte la graisse pour garder la même présence visuelle. */
.sp-structure-num.is-word {
  font-size: 32px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* ---------- Fenêtre de choix de filière (accueil des stages) ----------
   Le choix se fait sans quitter la page : tous les CTA ouvrent cette fenêtre. */
.sth-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  /* flex-start plutôt que center : avec l'ajout de L1 Maths (7e carte) et de
     l'option Physique (3e carte), le panneau dépasse désormais la hauteur de
     l'écran sur beaucoup d'écrans. Centrer un contenu qui déborde coupe le
     haut ET le bas à parts égales (et, sur Safari en particulier, la partie
     coupée en haut redevient inatteignable au scroll) — sans aucun indice
     visuel qu'il manque quelque chose. Ancré en haut, le panneau démarre
     toujours visible et tout excédent se prolonge naturellement sous le pli,
     ce qui reste scrollable dans tous les navigateurs. */
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 16, 30, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: sth-modal-in 220ms ease both;
  overflow-y: auto;
}
@keyframes sth-modal-in { from { opacity: 0; } to { opacity: 1; } }
.sth-modal-panel {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: auto;
  padding: 38px 38px 34px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 40px 90px rgba(8, 16, 30, 0.45);
  animation: sth-panel-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sth-panel-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.sth-modal-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(25px, 3.4vw, 34px);
  line-height: 1.12;
  margin: 10px 0 0;
  color: var(--ink);
}
.sth-modal-sub {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}
.sth-modal .sth-grid { margin-top: 26px; }
.sth-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 27, 45, 0.06);
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sth-modal-close:hover { background: rgba(15, 27, 45, 0.12); }
.sth-modal-back {
  display: inline-block;
  margin-bottom: 14px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.sth-modal-back:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .sth-modal { padding: 14px; }
  .sth-modal-panel { padding: 30px 20px 24px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sth-modal, .sth-modal-panel { animation: none; }
}

/* Trois professeurs sur le pack maths + physique : à 372 px de large ils ne
   tiennent pas dans les 1032 px utiles de .sp-wrap et passaient à la ligne.
   On élargit le conteneur de cette seule section plutôt que de rapetisser les
   cartes. Le texte au-dessus garde sa largeur de lecture. */
.sth-profs.is-stage-profs .sp-wrap { max-width: 1240px; }
.sth-profs.is-stage-profs .sp-eyebrow,
.sth-profs.is-stage-profs .sp-h2,
.sth-profs.is-stage-profs .sp-body { max-width: 68ch; }

/* Enveloppe <picture> des aperçus WebP : transparente pour la mise en page. */
picture.st-pic { display: contents; }

/* ---------- Stage de Toussaint : compte à rebours, places, avis ---------- */
/* Compte à rebours jusqu'au premier cours (décoratif, disparaît ensuite). */
.st-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 14px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
}
.st-countdown-label { letter-spacing: 0.02em; }
.st-countdown-units { display: inline-flex; gap: 6px; }
.st-countdown-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  min-width: 52px;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}
.st-countdown-unit b {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.st-countdown-unit i { font-style: normal; font-size: 11.5px; opacity: 0.75; }
/* Variante claire, dans le bloc d'offre. */
.st-countdown-compact { margin: 0 0 14px; justify-content: flex-start; color: var(--ink-2); }
.st-countdown-compact .st-countdown-unit {
  border-color: var(--line);
  background: #fff;
  min-width: 46px;
  padding: 5px 7px;
}
.st-countdown-compact .st-countdown-unit b { color: var(--ink); font-size: 16px; }

/* Places restantes : n'apparaît que lorsqu'il en reste peu, chiffres réels. */
.st-rarete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: #FBEAE7;
  color: #9A2F25;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.st-rarete-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C2412F;
  animation: st-rarete-pulse 1.6s ease-in-out infinite;
}
@keyframes st-rarete-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) { .st-rarete-dot { animation: none; } }
.sp-hero .st-rarete {
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.94);
  color: #9A2F25;
  box-shadow: 0 6px 18px -8px rgba(15, 27, 45, 0.35);
}
.sp-offer-cta .st-rarete { margin-top: 12px; }
.st-rarete-card { margin-top: 4px; font-size: 11.5px; padding: 4px 9px; }

/* Avis : note, total et logos des plateformes. */
.sp-rating-head { flex-wrap: wrap; }
.sp-rating-sources { display: inline-flex; align-items: center; gap: 12px; }
.sp-rating-logo { display: inline-flex; align-items: center; opacity: 0.9; transition: opacity 0.2s; }
.sp-rating-logo:hover { opacity: 1; }
.sp-rating-logo img { display: block; height: 20px; width: auto; }
.sp-rating-logo.is-google img { height: 18px; }

/* Logo de la prépa dans la carte de témoignage. */
.sp-testimonial figcaption:has(.sp-testimonial-who) {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sp-testimonial-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-testimonial-logo {
  flex: none;
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
.sp-rating-logo em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--ink-2); margin-left: 5px; }

/* Bandeau de réassurance au-dessus du paiement Stripe. */
.st-checkout-reassure {
  margin: 4px 44px 14px 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #F4F6FA;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13.5px;
}
.st-checkout-reassure-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-checkout-reassure-head strong { color: var(--ink); }
.st-checkout-reassure-stars { color: #C9A961; letter-spacing: 1px; }
.st-checkout-reassure ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-weight: 600;
  color: var(--ink);
}

/* Page de remerciement : établissement et objectifs, facultatifs. */
.st-merci-infos {
  max-width: 520px;
  margin: 28px auto 8px;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  text-align: left;
  display: grid;
  gap: 12px;
}
.st-merci-infos-title { font-weight: 700; font-size: 15.5px; }
.st-merci-infos label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.st-merci-infos input,
.st-merci-infos select,
.st-merci-infos textarea {
  font: inherit;
  font-weight: 400;
  font-size: 14.5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}
.st-merci-infos .sp-btn { justify-self: start; }
.st-merci-infos.is-sent { text-align: center; font-weight: 600; }
.st-merci-infos-err { margin: 0; color: #9A2F25; font-size: 13px; }

/* ---------- Barre fixe « Réserver ma place » ---------- */
/* Ordinateur : en haut. Mobile (≤ 720 px) : en bas, dans la zone du pouce. */
.st-sticky {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px -16px rgba(15, 27, 45, 0.35);
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.st-sticky.is-shown { transform: none; opacity: 1; pointer-events: auto; }
.st-sticky-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.st-sticky-logo { height: 26px; width: auto; }
.st-sticky-info { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; }
.st-sticky .st-rarete { align-self: center; }
.st-countdown-sticky { margin: 0; color: var(--ink-2); flex-wrap: nowrap; font-size: 12.5px; }
.st-countdown-sticky .st-countdown-units { gap: 4px; }
.st-countdown-sticky .st-countdown-unit { min-width: 0; padding: 3px 6px; border-color: var(--line); background: #fff; }
.st-countdown-sticky .st-countdown-unit b { color: var(--ink); font-size: 14px; }
.st-sticky-btn { flex: none; padding: 10px 20px; font-size: 14.5px; }
@media (max-width: 720px) {
  .st-sticky {
    top: auto;
    bottom: 0;
    border-bottom: 0;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -16px rgba(15, 27, 45, 0.35);
    transform: translateY(110%);
  }
  .st-sticky-inner {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }
  .st-sticky-logo { display: none; }
  .st-sticky-info { justify-content: space-between; gap: 8px; }
  .st-countdown-sticky .st-countdown-label { display: none; }
  .st-sticky-btn { width: 100%; padding: 12px 16px; font-size: 15.5px; }
  body.has-st-sticky .sp-page { padding-bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) { .st-sticky { transition: none; } }

/* Bloc d'offre : places restantes et compte à rebours sur une même ligne, en tête. */
.st-offer-urgence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--line);
}
.st-offer-urgence .st-countdown-compact { margin: 0; }
.st-offer-urgence .st-rarete { align-self: center; }
.st-offer-urgence .st-countdown-units { gap: 4px; }
.st-offer-urgence .st-countdown-unit { min-width: 0; padding: 4px 7px; }
.st-offer-urgence .st-countdown-unit b { font-size: 15px; }

/* Haut de page : pilule, places restantes et compte à rebours, centrés en colonne
   sous la pilule (le groupe garde la place qu'occupait la pilule seule). */
.st-hero-pills {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
.st-hero-pills .st-rarete { align-self: center; margin: 0; }
.st-countdown-hero { margin: 0; justify-content: center; }

/* Cartes du choix de stage : badge court sur la ligne du prix (pas de ligne en plus). */
.sth-card-price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.sth-card-save { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.st-rarete-card { margin-top: 0; font-family: var(--font-sans); }

/* Logos des prépas plus grands dans les témoignages. */
.sp-testimonial-logo { height: 46px; max-width: 190px; }

/* Barre fixe mobile : badge et compte à rebours centrés. */
@media (max-width: 720px) {
  .st-sticky-info { justify-content: center; gap: 10px; }
  .st-countdown-sticky { justify-content: center; }
}

/* Choix de la matière sur mobile : les trois cartes doivent tenir sans défiler,
   même sur un petit iPhone avec les barres de Safari (≈ 660 px visibles). */
@media (max-width: 720px) {
  .sth-modal-panel { padding: 22px 16px 18px; }
  .sth-modal-title { font-size: 23px; }
  .sth-grid-mat { gap: 10px; margin-top: 16px; }
  .sth-grid-mat .sth-card { padding: 12px 36px 12px 16px; gap: 2px; }
  .sth-grid-mat .sth-card-label { font-size: 21px; }
  .sth-grid-mat .sth-card-sub { font-size: 12px; }
  .sth-grid-mat .sth-card-price { font-size: 23px; margin-top: 2px; }
  .sth-grid-mat .sth-card-price s { font-size: 13px; }
  .sth-grid-mat .sth-card-flag { font-size: 10px; padding: 2px 8px; }
  .sth-grid-mat .sth-card-save { font-size: 12px; }
}

/* Classe 2 ouverte : pilule verte, à côté de « Classe 1 complète ». */
.st-ouverte {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #E3F4EA;
  color: #1E6B42;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.st-ouverte-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2E9E5E; }
.st-ouverte.st-rarete-card { font-size: 11.5px; padding: 4px 9px; }
/* Les deux pilules restent côte à côte ; elles ne passent l'une sous l'autre
   que si la carte est trop étroite (cartes de 220 px sur ordinateur). */
.st-pills-pair { display: inline-flex; flex-wrap: wrap; gap: 5px 6px; font-family: var(--font-sans); }
.st-pills-pair .st-rarete-card { padding: 3px 8px; gap: 6px; }
.sth-card-save .st-pills-pair { flex-basis: 100%; }
@media (max-width: 720px) {
  .sth-card-price .st-pills-pair { flex-basis: 100%; }
}
/* Bloc d'inscription : places restantes et compte à rebours centrés. */
.st-offer-urgence { justify-content: center; text-align: center; }
.st-offer-urgence .st-countdown-compact { justify-content: center; }
/* Bandeau du paiement : étoiles, 5/5 et les deux logos sur une seule ligne. */
.st-checkout-reassure-head { flex-wrap: nowrap; gap: 10px; }
.st-checkout-reassure-head .sp-rating-sources { gap: 10px; flex-wrap: nowrap; }
.st-checkout-reassure-head .sp-rating-logo img { height: 18px; }
.st-checkout-reassure-head .sp-rating-logo.is-google img { height: 16px; }
.st-checkout-reassure-head .sp-rating-logo em { font-size: 13px; }

/* Haut des pages de stage : places restantes et compte à rebours sur la même
   ligne, centrés sous la pilule. Sur mobile, le libellé du compte à rebours
   s'efface et les cases se resserrent pour tenir sur une ligne. */
.st-hero-urgence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}
.st-hero-urgence .st-rarete { margin: 0; }
@media (max-width: 720px) {
  .st-hero-urgence { gap: 8px; }
  .st-hero-urgence .st-countdown-label { display: none; }
  .st-hero-urgence .st-countdown-units { gap: 4px; }
  .st-hero-urgence .st-countdown-unit { min-width: 0; padding: 5px 7px; }
  .st-hero-urgence .st-countdown-unit b { font-size: 16px; }
}
@media (max-width: 720px) {
  .st-hero-urgence { gap: 6px; }
  .st-hero-urgence .st-rarete { font-size: 12px; padding: 4px 9px; gap: 6px; }
  .st-hero-urgence .st-countdown-unit { padding: 4px 6px; }
  .st-hero-urgence .st-countdown-unit b { font-size: 15px; }
  .st-hero-urgence .st-countdown-unit i { font-size: 10.5px; }
}
/* Physique : pilules « Classe 1 complète » / « Classe 2 ouverte » dans la barre
   fixe et le bloc d'inscription. */
.st-sticky-info { flex-wrap: wrap; row-gap: 6px; }
.st-sticky .st-pills-pair .st-rarete,
.st-sticky .st-pills-pair .st-ouverte { padding: 3px 8px; font-size: 11.5px; gap: 6px; }
@media (max-width: 720px) {
  .st-sticky-info { flex-wrap: wrap; justify-content: center; }
}

/* Paiement en 3 fois sans frais (Klarna). */
.st-3x {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
}
.st-3x strong { color: #fff; font-size: 18px; font-weight: 750; }
.st-3x-klarna {
  padding: 2px 8px;
  border-radius: 6px;
  background: #FFB3C7;
  color: #0B051D;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.st-3x-note {
  margin-top: 14px;
  max-width: 230px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10.5px;
  line-height: 1.4;
  text-align: center;
}
.st-3x-card { font-size: 12.5px; font-weight: 700; color: var(--navy); }
@media (max-width: 720px) {
  .st-3x-card { font-size: 12px; }
}

/* Bloc d'inscription sur mobile : prix, urgence, contenu et bouton doivent
   tenir ensemble sur un écran d'iPhone (≈ 660 px visibles avec Safari). */
@media (max-width: 720px) {
  .sp-offer-price { padding: 14px 16px 12px; gap: 2px; }
  .sp-offer-price-num { font-size: 40px; line-height: 1.05; }
  .sp-offer-price .sth-price-strike { font-size: 15px; margin: 0; }
  .sp-offer-price .sp-offer-badge { display: none; }
  .sp-offer-price .st-3x { margin-top: 4px; font-size: 14px; }
  .sp-offer-price .st-3x strong { font-size: 16.5px; }
  .sp-offer-list { padding: 14px 16px 16px; gap: 9px; }
  .sp-offer-row { gap: 10px; grid-template-columns: 22px 1fr; }
  .sp-offer-label { font-size: 14.5px; }
  .sp-offer-sub { font-size: 12.5px; line-height: 1.4; }
  .st-offer-urgence { padding-bottom: 10px; gap: 6px 8px; }
  .st-offer-urgence .st-countdown-label { display: none; }
  .st-offer-urgence .st-countdown-unit { padding: 3px 6px; }
  .st-offer-urgence .st-countdown-unit b { font-size: 14px; }
  .st-offer-urgence .st-countdown-unit i { font-size: 10.5px; }
  .sp-offer-cta { margin-top: 4px; }
}
.st-lbl-court { display: none; }
@media (max-width: 720px) {
  .st-offer-urgence .st-countdown-label { display: inline; font-size: 12.5px; }
  .st-offer-urgence .st-lbl-long { display: none; }
  .st-offer-urgence .st-lbl-court { display: inline; }
  .st-offer-urgence .st-countdown-compact { flex-wrap: nowrap; gap: 8px; }
}

/* Bandeau de réassurance du paiement : bloc et contenu centrés (marges égales
   de part et d'autre, la croix de fermeture restant dans la marge droite). */
.st-checkout-reassure { margin: 4px 44px 14px; text-align: center; }
.st-checkout-reassure-head { justify-content: center; }
.st-checkout-reassure ul { justify-content: center; }
@media (max-width: 720px) {
  .st-checkout-reassure { margin: 4px 40px 12px; padding: 10px 12px; }
  .st-checkout-reassure ul { flex-direction: column; align-items: center; gap: 3px; }
}
.st-merci-infos-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .st-merci-infos-row { grid-template-columns: 1fr; } }