/* ==========================================================================
   Prestige Immobilier — Landing formation
   Palette : #FFFFFF / #F7F8FA / #1E2A3A / #C6A15B / #4A5568
   ========================================================================== */

::selection {
  background: rgba(198, 161, 91, 0.25);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.container-narrow {
  max-width: 820px;
}

.narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding: 64px 0;
  background: #fff;
  text-align: center;
}

.section-alt {
  background: var(--offwhite);
}

.section-navy {
  background: var(--navy);
}

/* Fond légèrement teinté or, UNIFORME sur toute la section : titre,
   cartes et CTA sont sur exactement la même couleur, et la teinte fait
   la séparation avec les sections blanches au-dessus et en dessous.
   Surtout pas de dégradé ici : c'est lui qui créait un fond différent
   entre les cartes et le bouton. */
.section-glow {
  background: #FBF9F5;
}

/* CTA rattaché au carrousel : il fait partie du bloc témoignages,
   il ne flotte pas dans une bande à part. */
.section-glow .marquee {
  margin-bottom: 4px;
}

.section-glow .section-cta {
  margin-top: 32px;
}

@media (min-width: 900px) {
  .section {
    padding: 96px 0;
  }
}

section {
  scroll-margin-top: 84px;
}

/* ---------- Typographie ---------- */

h2.section-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  color: var(--navy);
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  text-wrap: balance;
}

@media (min-width: 900px) {
  h2.section-title {
    font-size: 64px;
    line-height: 70px;
  }
}

/* Spécificité alignée sur `h2.section-title`, sinon la couleur bleue
   l'emporterait et le titre serait invisible sur fond bleu. */
h2.section-title.section-title-light {
  color: #fff;
}

h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.gold-italic {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--gold);
}

.gold-rule {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 26px;
}

.section-intro {
  font-size: 17px;
  margin: 0 auto 44px;
}

@media (min-width: 900px) {
  .section-intro {
    font-size: 19px;
  }
}

.section-intro-light {
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  border-radius: 10px;
  padding: 17px 28px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 24px rgba(30, 42, 58, 0.22);
}

.btn-primary:hover {
  background: #2a3b52;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(30, 42, 58, 0.3);
}

.btn-ghost:hover {
  border-color: var(--navy);
  background: rgba(30, 42, 58, 0.04);
}

.section-navy .btn-primary {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.section-navy .btn-primary:hover {
  background: #d4b273;
}

.btn-header {
  padding: 12px 20px;
  font-size: 15px;
}

/* ---------- Header ---------- */

.site-header {
  transition: box-shadow 0.25s ease;
}

.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(30, 42, 58, 0.08);
}

.logo-link {
  display: inline-flex;
  align-items: center;
}

/* ---------- Navigation ---------- */

.site-nav a {
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Le CTA du menu garde sa casse normale de bouton */
.site-nav .nav-cta {
  text-transform: none;
  letter-spacing: normal;
}

/* Flèche en fin de CTA, alignée sur le texte */
.btn-arrow {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 2px;
  stroke-width: 2;
}

/* Tous les CTA « Planifier un appel découverte » : texte blanc, bordure or
   bien visible qui pulse (2px + halo lumineux, sinon 1px d'or sur fond navy
   est invisible). Même traitement partout pour un repère unique sur la page. */
.btn-header,
.site-nav .nav-cta,
.hero-ctas .btn-primary,
.section-cta .btn-primary,
.sticky-cta-btn {
  border: 2px solid var(--gold);
  animation: cta-border-pulse 2s ease-in-out infinite;
}

@keyframes cta-border-pulse {
  0%, 100% {
    border-color: rgba(198, 161, 91, 0.35);
    box-shadow: 0 8px 24px rgba(30, 42, 58, 0.22);
  }
  50% {
    border-color: var(--gold);
    box-shadow: 0 8px 24px rgba(30, 42, 58, 0.22), 0 0 12px rgba(198, 161, 91, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-header,
  .site-nav .nav-cta,
  .hero-ctas .btn-primary,
  .section-cta .btn-primary,
  .sticky-cta-btn {
    animation: none;
    border-color: var(--gold);
  }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(30, 42, 58, 0.14);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Barres du burger : la barre centrale est l'élément lui-même */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
}

.nav-toggle-bars::before {
  transform: translateY(-6px);
}

.nav-toggle-bars::after {
  transform: translateY(6px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: rotate(-45deg);
}

/* Blocs latéraux de largeur égale : la nav se retrouve centrée sur la page
   et non entre le logo et le bouton (qui n'ont pas la même largeur). */
.logo-link,
.header-actions {
  flex: 1 1 0;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Bouton repoussé vers le bord droit. `translateX` plutôt qu'une marge :
   la boîte du bloc ne bouge pas, donc la nav reste centrée au pixel près. */
@media (min-width: 900px) {
  .header-actions {
    transform: translateX(22px);
  }
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
  }

  .site-nav a:hover {
    color: var(--gold);
  }

  .nav-cta {
    display: none;
  }
}

@media (max-width: 899px) {
  /* Mobile : le bouton d'appel cède la place au burger */
  .btn-header {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 20px 20px;
    /* Fond opaque, sans backdrop-filter : le header parent en a déjà un,
       ce qui vide le backdrop du panneau et laisse transparaître la page. */
    background: #fff;
    border-top: 1px solid rgba(30, 42, 58, 0.07);
    box-shadow: 0 16px 34px rgba(30, 42, 58, 0.12);
    display: none;
  }

  .site-nav.is-open {
    display: flex;
    animation: nav-drop 0.22s ease both;
  }

  .site-nav a {
    padding: 16px 2px;
    font-size: 16px;
    border-bottom: 1px solid rgba(30, 42, 58, 0.07);
  }

  /* Spécificité alignée sur `.site-nav a`, sinon le texte resterait bleu
     marine sur un bouton bleu marine. */
  .site-nav a.nav-cta {
    margin-top: 16px;
    text-align: center;
    border-bottom: 0;
    color: #fff;
  }
}

@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav.is-open {
    animation: none;
  }

  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    transition: none;
  }
}

/* Header : logo complet (lockup vertical d'origine), calé sur la hauteur */
.logo {
  width: auto;
  height: 46px;
}

@media (min-width: 900px) {
  .logo {
    height: 56px;
  }
}

/* Footer : lockup horizontal recomposé à partir de l'artwork d'origine */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 48px 0 64px;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(198, 161, 91, 0.07), transparent 70%),
    #fff;
}

@media (min-width: 900px) {
  .hero {
    padding: 72px 0 96px;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(198, 161, 91, 0.55);
  color: var(--navy);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin: 0 0 26px;
  background: rgba(198, 161, 91, 0.06);
}

/* Mobile : badge compact et hero resserré, pour que les étoiles et la ligne
   de réassurance restent visibles au premier écran. */
@media (max-width: 899px) {
  .badge {
    gap: 6px;
    padding: 6px 13px;
    font-size: 11.5px;
    letter-spacing: 0;
    margin-bottom: 14px;
  }

  .badge-icon {
    width: 14px;
    height: 14px;
  }

  .hero {
    padding-top: 26px;
  }

  .hero h1 {
    margin-bottom: 14px;
  }

  .hero-subtitle {
    margin-bottom: 22px;
  }

  .hero-ctas {
    margin-bottom: 18px;
  }

  .hero-reassurance {
    margin-bottom: 30px;
  }
}

.badge-icon {
  flex: none;
  color: var(--gold);
}

.hero h1 {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}

/* Le retour à la ligne manuel n'a de sens qu'une fois le titre en grand :
   sur mobile on laisse `text-wrap: balance` répartir les lignes.
   Le titre y occupant plusieurs lignes serrées, il lui faut aussi
   davantage d'air avant le sous-titre. */
@media (max-width: 899px) {
  .hero h1 br {
    display: none;
  }

  .hero h1 {
    margin-bottom: 30px;
  }
}

/* Soulignement doré tracé sous le mot clé, aux extrémités fondues. */
.gold-underline {
  position: relative;
  white-space: nowrap;
}

.gold-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 0.045em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(198, 161, 91, 0), var(--gold) 12%, var(--gold) 88%, rgba(198, 161, 91, 0));
  transform: scaleX(0);
  transform-origin: left center;
  animation: gold-underline-draw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s forwards;
}

@keyframes gold-underline-draw {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gold-underline::after {
    animation: none;
    transform: scaleX(1);
  }
}

.hero-subtitle {
  font-size: 17px;
  margin: 0 auto 32px;
}

@media (min-width: 900px) {
  .hero-subtitle {
    font-size: 19px;
  }
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

@media (min-width: 640px) {
  .hero-ctas {
    flex-direction: row;
  }
}

.hero-reassurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  margin: 0 0 44px;
}

.hero-reassurance p {
  margin: 0;
  font-size: 12.5px;
  color: #8A94A6;
  text-align: center;
  max-width: 280px;
  line-height: 1.45;
}

.avatar-stack {
  display: inline-flex;
  flex: none;
}

.avatar-stack img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(30, 42, 58, 0.15);
}

.avatar-stack img + img {
  margin-left: -9px;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.stars svg {
  width: 17px;
  height: 17px;
  fill: #E2A93B;
}

.vsl-incitation {
  color: var(--gold);
  font-weight: 600;
  font-size: 12px;
  margin: 0 0 14px;
}

/* ---------- Façades vidéo ---------- */

.vsl-wrapper {
  max-width: 860px;
  margin: 0 auto;
}

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--navy);
}

.vsl-facade {
  border: 1px solid rgba(198, 161, 91, 0.6);
  box-shadow: 0 24px 60px rgba(30, 42, 58, 0.18);
}

.video-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(30, 42, 58, 0.55);
  border: 2px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.video-facade:hover .play-button,
.video-facade:focus-visible .play-button {
  transform: translate(-50%, -50%) scale(1.07);
  background: rgba(30, 42, 58, 0.75);
}

.video-duration {
  position: absolute;
  right: 14px;
  bottom: 12px;
  background: rgba(30, 42, 58, 0.75);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
}

/* ---------- Roadmap / parcours en 3 étapes ---------- */

.section-cta-top {
  margin: 0 0 56px;
}

.roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: left;
}

@media (min-width: 820px) {
  .roadmap {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.roadmap-step {
  display: flex;
  flex-direction: column;
  background: var(--offwhite);
  border: 1px solid rgba(30, 42, 58, 0.06);
  border-radius: 18px;
  padding: 18px 22px 26px;
  box-shadow: 0 10px 30px rgba(30, 42, 58, 0.05);
}

.roadmap-visual {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.roadmap-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.roadmap-line {
  position: relative;
  height: 30px;
  margin-bottom: 20px;
}

.roadmap-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(198, 161, 91, 0.55) 0 6px, transparent 6px 13px);
}

.roadmap-badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: #fff;
  border: 1px solid rgba(198, 161, 91, 0.5);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 15px;
  border-radius: 999px;
}

.roadmap-step h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.roadmap-step p {
  margin: 0;
  font-size: 15.5px;
}

/* ---------- Cards ---------- */

.card {
  background: #fff;
  border: 1px solid rgba(30, 42, 58, 0.06);
  border-radius: 16px;
  padding: 34px 28px;
  box-shadow: 0 10px 30px rgba(30, 42, 58, 0.06);
}

.card p {
  margin: 0;
  font-size: 15.5px;
}

/* ---------- Qualification ---------- */

.qualification {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: left;
  max-width: 980px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .qualification {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* Les deux cartes ont le même nombre de points : `align-items: stretch`
   (défaut de la grille) suffit à les garder de hauteur identique. */
.qual-card {
  position: relative;
  padding: 34px 32px 36px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Liseré coloré en haut de carte : repère visuel immédiat oui / non */
.qual-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.qual-yes::before {
  background: linear-gradient(90deg, var(--gold), #E4C88A);
}

.qual-no::before {
  background: rgba(255, 255, 255, 0.18);
}

.qual-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(30, 42, 58, 0.1);
}

.qual-no {
  background: var(--navy);
  border-color: rgba(255, 255, 255, 0.08);
}

.qual-no:hover {
  box-shadow: 0 18px 40px rgba(30, 42, 58, 0.28);
}

.qual-no h3 {
  color: #fff;
}

/* Étiquette de tête : verdict en un coup d'œil.
   Forme ronde d'origine, mais typo en casse normale : les micro-capitales
   grasses et espacées étaient ce qui faisait « composant générique ». */
.qual-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 7px 15px 7px 12px;
  margin-bottom: 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.qual-yes .qual-badge {
  background: rgba(198, 161, 91, 0.12);
  border: 1px solid rgba(198, 161, 91, 0.35);
  color: #8F6F2E;
}

.qual-no .qual-badge {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.78);
}

.qualification h3 {
  font-size: 18px;
  margin-bottom: 0;
}

.qualification ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.qualification li {
  position: relative;
  padding: 0 0 14px 36px;
  margin-bottom: 14px;
  font-size: 15.5px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(30, 42, 58, 0.06);
}

.qual-no li {
  color: rgba(255, 255, 255, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Dernier point : ni trait ni marge, la carte se ferme proprement */
.qualification li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.check-list li::before,
.cross-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.check-list li::before {
  background: rgba(198, 161, 91, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6A15B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 1px rgba(198, 161, 91, 0.22);
}

.cross-list li::before {
  background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* ---------- Programme ---------- */

/* Une seule colonne, desktop comme mobile : les accordéons changent de
   hauteur à l'ouverture, une grille à deux colonnes ferait sauter la
   ligne voisine. La liste reste centrée et lisible. */
.program-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  text-align: left;
}

.program-list li {
  background: #fff;
  border: 1px solid rgba(30, 42, 58, 0.06);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(30, 42, 58, 0.05);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.program-list li:hover {
  box-shadow: 0 10px 26px rgba(30, 42, 58, 0.08);
}

/* Carte ouverte : bordure dorée discrète pour repérer l'élément actif */
.program-list li:has(.program-item[open]) {
  border-color: rgba(198, 161, 91, 0.4);
}

.program-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  font-size: 15.5px;
  list-style: none;
}

.program-item summary::-webkit-details-marker {
  display: none;
}

.program-label {
  flex: 1;
}

/* Chevron en CSS pur : deux traits en V, pivotés à l'ouverture */
.program-chevron {
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease;
}

.program-item[open] .program-chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.program-desc {
  padding: 0 22px 20px 80px;
  animation: program-open 0.25s ease both;
}

.program-desc p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
}

.program-desc p:last-child {
  margin-bottom: 0;
}

@keyframes program-open {
  from { opacity: 0; transform: translateY(-4px); }
}

@media (max-width: 560px) {
  .program-desc {
    padding-left: 22px;
  }
}

/* Titre du panneau et phrase courte : réservés à la vue desktop */
.program-desc-title,
.program-lead {
  display: none;
}

/* ----- Desktop : grille de cartes -----
   Les descriptions sont ramenées à une phrase courte via .program-lead pour
   que toutes les cartes tiennent sur le même nombre de lignes ; le détail
   complet reste affiché en accordéon sur mobile. */
@media (min-width: 900px) {
  .program-list {
    max-width: 1120px;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .program-list li {
    display: flex;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .program-list li:hover {
    transform: translateY(-3px);
    border-color: rgba(198, 161, 91, 0.4);
    box-shadow: 0 14px 32px rgba(30, 42, 58, 0.09);
  }

  .program-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 30px 26px 28px;
  }

  /* Icône au-dessus du titre : format carte, pas ligne de liste */
  .program-item summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    cursor: default;
    font-size: 17px;
    line-height: 1.35;
  }

  .program-item summary .program-icon {
    width: 46px;
    height: 46px;
  }

  .program-label {
    flex: none;
  }

  .program-chevron {
    display: none;
  }

  .program-desc {
    padding: 0;
    margin-top: 14px;
    animation: none;
  }

  /* Seule la phrase courte est affichée en carte */
  .program-desc p {
    display: none;
  }

  .program-desc .program-lead {
    display: block;
    margin: 0;
    font-size: 15px;
  }

  .program-desc-title {
    display: none;
  }

  .program-list li:has(.program-item[open]) {
    border-color: rgba(30, 42, 58, 0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .program-chevron,
  .program-desc {
    transition: none;
    animation: none;
  }
}

.program-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(198, 161, 91, 0.1);
  border: 1px solid rgba(198, 161, 91, 0.35);
  color: var(--gold);
}

.price-mention {
  font-size: 14px;
  color: var(--grey);
  margin: 32px auto 0;
}

/* ---------- Témoignages ---------- */

/* Carrousel en défilement continu, pleine largeur */
.marquee {
  --gap: 24px;
  position: relative;
  width: 100%;
  margin-bottom: 44px;
  overflow: hidden;
  /* Padding bas ≥ portée de l'ombre des cartes (3+10px), sinon
     overflow:hidden coupe l'ombre net et dessine une ligne de
     démarcation sous le carrousel. */
  padding: 6px 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.marquee-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  /* Position de repos : décalage initial paramétrable (0 par défaut).
     Le carrousel témoignages s'en sert pour centrer la carte Samia. */
  transform: translateX(var(--marquee-start, 0px));
}

.marquee-group {
  display: flex;
  gap: var(--gap);
}

/* Carte Samia (2e des 3) centrée à l'état de repos, desktop comme mobile :
   décalage = 50vw − (1 carte + le gap + une demi-carte). */
#temoignages-marquee {
  --marquee-start: calc(50vw - 1.5 * min(78vw, 520px) - var(--gap));
}

/* Animation activée par JS une fois le second groupe cloné */
.marquee.is-ready .marquee-track {
  animation: marquee-scroll 46s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(var(--marquee-start, 0px)); }
  to { transform: translateX(calc(var(--marquee-start, 0px) - 50% - var(--gap) / 2)); }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track {
  animation-play-state: paused;
}

.testimonial {
  flex: none;
  width: min(78vw, 520px);
  margin: 0;
  background: #fff;
  border: 1px solid rgba(30, 42, 58, 0.06);
  border-radius: 18px;
  padding: 10px 10px 4px;
  /* Ombre courte : une grande ombre diffuse (30px) assombrissait le fond
     beige tout autour des cartes (#F5F3F1 au lieu de #FBF9F5) et créait
     une bande de couleur différente sous le carrousel. */
  box-shadow: 0 3px 10px rgba(30, 42, 58, 0.05);
}

.testimonial .video-facade {
  border-radius: 12px;
  box-shadow: none;
}

/* Bouton play façon YouTube */
.play-button-yt {
  width: 68px;
  height: 48px;
  border-radius: 13px;
  background: rgba(255, 0, 0, 0.92);
  border: none;
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.video-facade:hover .play-button-yt,
.video-facade:focus-visible .play-button-yt {
  background: #ff0000;
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 8px 12px;
  font-weight: 600;
  color: var(--navy);
  font-size: 14.5px;
  text-align: left;
}

.testimonial-note {
  width: 100%;
  margin: -4px 0 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  color: #8A94A6;
}

.stars-sm svg {
  width: 13px;
  height: 13px;
}

/* ---------- Avis (deux carrousels contrarotatifs) ---------- */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.reviews-marquee {
  --gap: 20px;
  margin-bottom: 20px;
}

.reviews-marquee:last-child {
  margin-bottom: 0;
}

.reviews-marquee.is-ready .marquee-track {
  animation-duration: 64s;
}

/* Spécificité alignée sur `.marquee.is-ready .marquee-track` (raccourci
   `animation`), qui remettrait sinon la direction à `normal`. */
.marquee-reverse.is-ready .marquee-track {
  animation-direction: reverse;
}

.review {
  flex: none;
  width: min(84vw, 400px);
  margin: 0;
  padding: 24px 26px 26px;
  background: #fff;
  border: 1px solid rgba(30, 42, 58, 0.07);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(30, 42, 58, 0.05);
  text-align: left;
}

.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.review-head img {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.review-head > span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.review-name {
  font-weight: 600;
  color: var(--navy);
  font-size: 15.5px;
}

.review-role {
  font-size: 12.5px;
  color: #8A94A6;
}

.review p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--navy);
}

.section-cta {
  margin-top: 8px;
}

/* ---------- FAQ ---------- */

/* Bloc de conversion : calendrier + FAQ soudés sur le même fond bleu */
#rendez-vous {
  padding-bottom: 40px;
}

.section-faq {
  padding-top: 40px;
}

@media (min-width: 900px) {
  #rendez-vous {
    padding-bottom: 56px;
  }

  .section-faq {
    padding-top: 56px;
  }
}

.faq-layout {
  display: grid;
  gap: 8px;
}

/* Masqué par défaut : n'existe qu'à partir du layout deux colonnes.
   Déclaré avant la media query pour qu'elle puisse le rétablir. */
.faq-aside {
  display: none;
}

.faq-aside-text {
  margin: 0 0 16px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.68);
}

@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: start;
    text-align: left;
  }

  /* Colonne de gauche : reste visible pendant le parcours des questions */
  .faq-intro {
    position: sticky;
    top: 120px;
  }

  .faq-intro .gold-rule,
  .faq-intro .section-intro {
    margin-left: 0;
    margin-right: 0;
  }

  .faq-intro .section-intro {
    margin-bottom: 0;
    max-width: 380px;
  }

  .section-faq .section-title {
    font-size: 48px;
    line-height: 1.1;
  }

  /* Relance sous l'intro : équilibre la colonne gauche face à la pile de
     questions, qui est bien plus haute. Desktop uniquement — sur mobile le
     CTA collant et le CTA final couvrent déjà ce besoin. */
  .faq-aside {
    display: block;
    max-width: 380px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.faq {
  text-align: left;
}

.faq details {
  background: #fff;
  border: 1px solid rgba(30, 42, 58, 0.08);
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(30, 42, 58, 0.04);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 600;
  color: var(--navy);
  font-size: 16px;
  border-radius: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform 0.2s ease;
}

.faq-icon::before {
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
}

.faq-icon::after {
  left: 8px;
  top: 0;
  width: 2px;
  height: 18px;
}

.faq details[open] .faq-icon::after {
  transform: scaleY(0);
}

.faq details p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15.5px;
}

/* ---------- FAQ sur fond bleu : cartes translucides ---------- */

.section-faq .faq details {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  box-shadow: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.section-faq .faq details:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(198, 161, 91, 0.4);
}

.section-faq .faq details[open] {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(198, 161, 91, 0.55);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

.section-faq .faq summary {
  color: #fff;
  padding: 20px 20px 20px 24px;
}

.section-faq .faq details p {
  color: rgba(255, 255, 255, 0.74);
}

/* Réponse ouverte : filet or dégradé qui la détache de la question, puis
   un voile or très léger qui s'efface vers le bas. Purement décoratif —
   le contraste du texte ne dépend pas de ce fond. */
.section-faq .faq details[open] summary {
  padding-bottom: 14px;
}

.section-faq .faq details[open] > p {
  position: relative;
  padding-top: 16px;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(
    180deg,
    rgba(198, 161, 91, 0.08) 0%,
    rgba(198, 161, 91, 0.02) 55%,
    rgba(198, 161, 91, 0) 100%
  );
}

.section-faq .faq details[open] > p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(198, 161, 91, 0.5) 0%,
    rgba(198, 161, 91, 0.14) 45%,
    rgba(198, 161, 91, 0) 100%
  );
}

.section-faq .faq details[open] p {
  animation: faq-reveal 0.3s ease both;
}

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-6px); }
}

/* Bouton d'ouverture circulaire */
.section-faq .faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(198, 161, 91, 0.35);
  background: rgba(198, 161, 91, 0.08);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.section-faq .faq-icon::before {
  left: 7px;
  top: 15px;
  width: 18px;
}

.section-faq .faq-icon::after {
  left: 15px;
  top: 7px;
  height: 18px;
}

.section-faq details[open] .faq-icon {
  background: var(--gold);
  border-color: var(--gold);
}

.section-faq details[open] .faq-icon::before,
.section-faq details[open] .faq-icon::after {
  background: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .section-faq .faq details[open] p {
    animation: none;
  }
}

/* ---------- Section agence ---------- */

.agence-layout {
  display: grid;
  gap: 36px;
  text-align: left;
}

@media (min-width: 900px) {
  .agence-layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
    align-items: center;
  }
}

.agence-visual {
  position: relative;
  /* marge basse : place pour la carte logo qui déborde du portrait */
  padding-bottom: 52px;
}

.agence-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(30, 42, 58, 0.22);
}

.agence-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agence-photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  /* marge droite : réserve la place de la carte logo qui déborde */
  padding: 56px 136px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: linear-gradient(to top, rgba(15, 23, 34, 0.92), rgba(15, 23, 34, 0.55) 45%, transparent);
}

.agence-photo-name {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.agence-photo-role {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Carte logo flottante, en débord du portrait */
.agence-logo-card {
  position: absolute;
  right: -14px;
  bottom: 0;
  width: 132px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(30, 42, 58, 0.18);
}

.agence-logo-card img {
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .agence-logo-card {
    right: -26px;
    width: 154px;
    padding: 18px 20px;
  }

  .agence-photo figcaption {
    padding-right: 150px;
  }
}

.agence-content .section-title {
  font-size: 30px;
  line-height: 1.18;
}

@media (min-width: 900px) {
  .agence-content .section-title {
    font-size: 42px;
    line-height: 1.12;
  }
}

.agence-content .gold-rule {
  margin-left: 0;
  margin-right: 0;
}

.agence-content > p {
  margin: 0 0 16px;
  font-size: 15.5px;
}

.agence-content strong {
  color: var(--navy);
  font-weight: 600;
}

.agence-values {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.agence-values li {
  position: relative;
  padding-left: 18px;
  font-size: 15.5px;
  border-left: 2px solid rgba(198, 161, 91, 0.5);
}

.agence-values span {
  display: block;
  color: var(--gold);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.agence-cta {
  margin-top: 30px;
}

.agence-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* ---------- Calendly ---------- */

.calendly-slot {
  width: 100%;
  margin: 0 auto;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bordure animée : dégradé doré rotatif + halo pulsant */
@property --gold-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes gold-rotate {
  to { --gold-angle: 360deg; }
}

@keyframes gold-pulse {
  0%, 100% { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 22px rgba(198, 161, 91, 0.22); }
  50% { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 46px rgba(198, 161, 91, 0.5); }
}

/* ≤ 680px de large, la carte Calendly remplit 100 % de son iframe :
   le cadre doré épouse donc exactement la carte. */
.calendly-slot .calendly-inline-widget {
  width: 100%;
  max-width: 680px;
  min-height: 700px;
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--gold-angle, 0deg), #C6A15B, #F2DCA8, #8F6F35, #C6A15B) border-box;
  border-radius: 16px;
  overflow: hidden;
  animation: gold-rotate 6s linear infinite, gold-pulse 3.2s ease-in-out infinite;
}

/* Mobile : Calendly n'annonce jamais sa vraie hauteur (son embed mobile gère
   son propre défilement interne). On lui impose donc une hauteur généreuse,
   pour que tout le contenu tienne sans scroll dans l'iframe — sinon celle-ci
   capte le geste de défilement et bloque celui de la page sur iOS. */
@media (max-width: 767px) {
  .calendly-slot .calendly-inline-widget {
    min-height: 1180px;
  }
}

/* Desktop : cadre doré autour de l'iframe entière (1004px). La carte Calendly
   respire à l'intérieur, et ses changements de disposition (2 ou 3 colonnes
   selon l'étape) ne provoquent jamais de coupe. */
@media (min-width: 1100px) {
  .calendly-slot {
    display: block;
    position: relative;
    max-width: 912px;
    margin: 0 auto;
    min-height: 648px;
    border: 2px solid transparent;
    background:
      linear-gradient(#fff, #fff) padding-box,
      conic-gradient(from var(--gold-angle, 0deg), #C6A15B, #F2DCA8, #8F6F35, #C6A15B) border-box;
    border-radius: 16px;
    overflow: hidden;
    animation: gold-rotate 6s linear infinite, gold-pulse 3.2s ease-in-out infinite;
  }

  .calendly-loading {
    color: var(--grey);
    padding-top: 330px;
  }

  .calendly-slot .calendly-inline-widget {
    width: 1004px;
    max-width: none;
    min-height: 700px;
    /* Fenêtrage : réduit de moitié les marges internes de la carte Calendly
       (~99px de côté, 65px en haut, 35px en bas), avec assez de jeu pour le
       mode 3 colonnes qui élargit la carte (gouttières ~51px). */
    margin: -32px 0 -17px -48px;
    border: none;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    animation: none;
  }

  /* Cache le lien « Politique de confidentialité » de Calendly à l'état
     initial (2 colonnes), en commençant APRÈS la bordure gauche de la carte
     (x=51) pour ne pas la couper. Dès la première interaction, la carte peut
     changer de géométrie : on retire le cache plutôt que de le déplacer à
     l'aveugle (un cache mal aligné couperait la bordure). */
  .calendly-slot::after {
    content: '';
    position: absolute;
    left: 54px;
    bottom: 43px;
    width: 226px;
    height: 30px;
    background: #fff;
    z-index: 2;
  }

  .calendly-slot.calendly-touched::after {
    display: none;
  }
}

/* Phase de pré-démarrage : Chrome bride les iframes hors écran, masquées
   (opacity 0) OU recouvertes par d'autres contenus. Le widget est donc posé
   AU-DESSUS de la page, à 1 % d'opacité — invisible à l'œil, mais considéré
   comme affiché — et laisse passer tous les clics. */
.calendly-slot .calendly-inline-widget.preboot {
  /* !important : le script Calendly pose ses propres styles inline sur cet
     élément, qui écraseraient les nôtres sans cela. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: 680px !important;
  height: 700px !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

@media (min-width: 1100px) {
  .calendly-slot .calendly-inline-widget.preboot {
    width: 1004px !important;
    max-width: none !important;
  }
}

.calendly-loading {
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  margin: 0;
}

@media (min-width: 1100px) {
  /* Sur desktop le cadre est blanc : texte d'attente lisible */
  .calendly-loading {
    color: var(--grey);
  }
}

/* ---------- CTA final ---------- */

.section-eyebrow-light {
  color: var(--gold);
}

.final-reassurance {
  margin: 24px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

.booking-note {
  margin: -26px 0 34px;
  text-align: center;
  font-size: 13.5px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Footer ---------- */

.site-footer {
  background: #fff;
  border-top: 1px solid rgba(30, 42, 58, 0.08);
  padding: 52px 0 32px;
  font-size: 14.5px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  text-align: left;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(30, 42, 58, 0.08);
}

@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
  }
}

.footer-brand p {
  margin: 16px 0 0;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.6;
}

.footer-logo .logo-mark {
  width: auto;
  height: 36px;
}

.footer-logo .logo-word {
  width: auto;
  height: 16px;
}

.footer-nav,
.footer-cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.footer-nav-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 3px;
}

.footer-nav a {
  color: var(--grey);
  text-decoration: none;
  font-size: 14.5px;
}

.footer-nav a:hover {
  color: var(--gold);
}

.footer-cta-block .btn {
  padding: 14px 22px;
  font-size: 15px;
}

.footer-site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--grey);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid rgba(74, 85, 104, 0.3);
  padding-bottom: 2px;
}

.footer-site-link:hover {
  color: var(--navy);
  border-color: var(--navy);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 26px;
  text-align: center;
  font-size: 13.5px;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom nav a {
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid rgba(74, 85, 104, 0.3);
  padding-bottom: 1px;
}

.footer-bottom nav a:hover {
  color: var(--navy);
  border-color: var(--navy);
}

.footer-bottom nav span {
  margin: 0 8px;
  color: rgba(74, 85, 104, 0.4);
}

/* ---------- CTA mobile fixe ---------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(30, 42, 58, 0.1);
  transform: translateY(105%);
  transition: transform 0.3s ease;
}

.sticky-cta.visible {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .sticky-cta:not([hidden]) {
    display: flex;
  }
}

.sticky-cta-btn {
  flex: 1;
  text-align: center;
  padding: 15px 20px;
}

.sticky-cta-close {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(30, 42, 58, 0.15);
  background: #fff;
  color: var(--grey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- Animations d'apparition ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Pas de défilement automatique : le carrousel devient scrollable à la main.
     Le décalage de centrage (--marquee-start) est neutralisé, sinon les
     cartes translatées hors cadre seraient inaccessibles au scroll. */
  .marquee.is-ready .marquee-track {
    animation: none;
  }

  .marquee-track {
    transform: none;
  }

  /* Bordure du calendrier : statique, halo doux conservé */
  .calendly-slot,
  .calendly-slot .calendly-inline-widget {
    animation: none;
  }

  .marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .testimonial {
    scroll-snap-align: center;
  }

  .sticky-cta {
    transition: none;
  }

  .btn,
  .play-button {
    transition: none;
  }

  .btn-primary:hover {
    transform: none;
  }
}