/*
 * Institut V Esthetique - Design System
 * Prefix: iv-
 * Philosophy: editorial clean, airy sections, bold titles, discreet animations
 * Stack: Inter Tight (headings + body) + JetBrains Mono (accents)
 * Palette: near-white #FAF9F7, surface #FFFFFF, text #2C2420, accent #C4A98B, dark #2C2420
 * Mobile-first. WCAG AA contrast. Animate ONLY transform + opacity.
 * NO em-dashes anywhere. NO auto-play animations.
 */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================= */

:root {
  /* Palette */
  --iv-canvas:          #FAF9F7;
  --iv-surface:         #FFFFFF;
  --iv-text:            #2C2420;
  --iv-text-muted:      #3C3C3C;
  --iv-text-light:      #7A6E68;
  --iv-accent:          #C4A98B;
  --iv-accent-dark:     #A88B6A;
  --iv-dark:            #2C2420;
  --iv-dark-surface:    #3C3530;

  /* Typography */
  --iv-font-sans:       'Inter Tight', system-ui, -apple-system, sans-serif;
  --iv-font-mono:       'JetBrains Mono', 'Courier New', monospace;

  /* Scale */
  --iv-text-xs:         clamp(0.6875rem, 1.5vw, 0.75rem);
  --iv-text-sm:         clamp(0.8125rem, 1.8vw, 0.875rem);
  --iv-text-base:       clamp(0.9375rem, 2vw, 1rem);
  --iv-text-lg:         clamp(1rem, 2.5vw, 1.125rem);
  --iv-text-xl:         clamp(1.125rem, 3vw, 1.25rem);
  --iv-text-2xl:        clamp(1.375rem, 4vw, 1.75rem);
  --iv-text-3xl:        clamp(1.75rem, 5vw, 2.25rem);
  --iv-text-4xl:        clamp(2rem, 6vw, 3rem);
  --iv-text-display:    clamp(2.5rem, 8vw, 4.5rem);

  /* Spacing */
  --iv-section-py:      clamp(3rem, 8vw, 7rem);
  --iv-section-px:      clamp(1.25rem, 5vw, 3rem);
  --iv-gap-sm:          0.75rem;
  --iv-gap-md:          1.5rem;
  --iv-gap-lg:          2.5rem;

  /* Shape */
  --iv-radius:          4px;
  --iv-radius-card:     8px;
  --iv-radius-pill:     999px;

  /* Timing */
  --iv-ease:            cubic-bezier(0.16, 1, 0.3, 1);
  --iv-duration-fast:   0.2s;
  --iv-duration-base:   0.4s;
  --iv-duration-slow:   0.6s;

  /* Before/After */
  --iv-ba-pos:          50%;

  /* Z-index scale */
  --iv-z-base:          0;
  --iv-z-raised:        10;
  --iv-z-sticky:        100;
  --iv-z-overlay:       200;
}

/* Reduced motion: disable all transitions and animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   2. UTILITIES
   ============================================================================= */

/* Section wrapper - vertical rhythm */
.iv-section {
  padding-top:    var(--iv-section-py);
  padding-bottom: var(--iv-section-py);
  padding-left:   var(--iv-section-px);
  padding-right:  var(--iv-section-px);
}

.iv-section--dark {
  background-color: var(--iv-dark);
  color:            var(--iv-canvas);
}

.iv-section--canvas {
  background-color: var(--iv-canvas);
  color:            var(--iv-text);
}

.iv-section--surface {
  background-color: var(--iv-surface);
  color:            var(--iv-text);
}

/* Content width constraint */
.iv-container {
  max-width:    1200px;
  margin-left:  auto;
  margin-right: auto;
  width:        100%;
}

.iv-container--narrow {
  max-width: 760px;
}

.iv-container--wide {
  max-width: 1440px;
}

/*
 * Eyebrow label
 * RULE: max 1 eyebrow per 3 sections on a page.
 * Hero counts as 1. Audit before shipping.
 */
.iv-eyebrow {
  display:        block;
  font-family:    var(--iv-font-mono);
  font-size:      var(--iv-text-xs);
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--iv-accent);
  margin-bottom:  1rem;
}

.iv-section--dark .iv-eyebrow {
  color: var(--iv-accent);
}

/* Section title */
.iv-section-title {
  font-family:  var(--iv-font-sans);
  font-size:    var(--iv-text-4xl);
  font-weight:  700;
  line-height:  1.1;
  letter-spacing: -0.02em;
  color:        var(--iv-text);
  margin-top:   0;
  margin-bottom: var(--iv-gap-md);
}

.iv-section--dark .iv-section-title {
  color: var(--iv-canvas);
}

/* Reveal animation - initial state */
.iv-reveal {
  opacity:   0;
  transform: translateY(1.5rem);
  transition:
    opacity   var(--iv-duration-slow) var(--iv-ease),
    transform var(--iv-duration-slow) var(--iv-ease);
}

/* Reveal visible state - added by JS via IntersectionObserver */
.iv-reveal--visible {
  opacity:   1;
  transform: translateY(0);
}

/* Under prefers-reduced-motion, show immediately */
@media (prefers-reduced-motion: reduce) {
  .iv-reveal {
    opacity:   1;
    transform: none;
    transition: none;
  }
}

/* Failsafe : si le JS d'apparition ne s'exécute pas (ex. combinaison/différé d'un
   plugin de cache), révéler le contenu via une animation CSS de secours après un
   court délai. Si le JS ajoute .iv-reveal--visible avant, le :not() cesse de
   s'appliquer et l'animation est annulée - l'apparition au défilement reste prioritaire.
   Garantit que le contenu .iv-reveal n'est JAMAIS invisible de façon permanente. */
@media (prefers-reduced-motion: no-preference) {
  .iv-reveal:not(.iv-reveal--visible) {
    animation: iv-reveal-failsafe var(--iv-duration-slow) var(--iv-ease) 1.5s forwards;
  }
}
@keyframes iv-reveal-failsafe {
  to { opacity: 1; transform: none; }
}

/* Stagger helpers */
.iv-reveal--delay-1 { transition-delay: 0.08s; }
.iv-reveal--delay-2 { transition-delay: 0.16s; }
.iv-reveal--delay-3 { transition-delay: 0.24s; }
.iv-reveal--delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .iv-reveal--delay-1,
  .iv-reveal--delay-2,
  .iv-reveal--delay-3,
  .iv-reveal--delay-4 {
    transition-delay: 0s;
  }
}

/* =============================================================================
   3. BUTTONS
   ============================================================================= */

/* Base */
.iv-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.5rem;
  font-family:      var(--iv-font-sans);
  font-size:        var(--iv-text-sm);
  font-weight:      600;
  letter-spacing:   0.04em;
  text-transform:   uppercase;
  line-height:      1;
  white-space:      nowrap;
  padding:          0.875rem 1.75rem;
  border-radius:    var(--iv-radius);
  border:           2px solid transparent;
  cursor:           pointer;
  text-decoration:  none;
  transition:
    background-color var(--iv-duration-fast) var(--iv-ease),
    border-color     var(--iv-duration-fast) var(--iv-ease),
    color            var(--iv-duration-fast) var(--iv-ease),
    transform        var(--iv-duration-fast) var(--iv-ease),
    opacity          var(--iv-duration-fast) var(--iv-ease);
}

.iv-btn:active {
  transform: translateY(1px) scale(0.985);
}

/* Primary: golden fill */
.iv-btn--primary {
  background-color: var(--iv-accent);
  border-color:     var(--iv-accent);
  color:            var(--iv-dark);
}

.iv-btn--primary:hover,
.iv-btn--primary:focus-visible {
  background-color: var(--iv-accent-dark);
  border-color:     var(--iv-accent-dark);
  color:            var(--iv-dark);
}

/* Secondary: outline */
.iv-btn--secondary {
  background-color: transparent;
  border-color:     var(--iv-accent);
  color:            var(--iv-accent);
}

.iv-btn--secondary:hover,
.iv-btn--secondary:focus-visible {
  background-color: var(--iv-accent);
  color:            var(--iv-dark);
}

/* On dark backgrounds */
.iv-btn--outline-light {
  background-color: transparent;
  border-color:     var(--iv-canvas);
  color:            var(--iv-canvas);
}

.iv-btn--outline-light:hover,
.iv-btn--outline-light:focus-visible {
  background-color: var(--iv-canvas);
  color:            var(--iv-dark);
}

/* Focus */
.iv-btn:focus-visible {
  outline:        3px solid var(--iv-accent);
  outline-offset: 3px;
}

/* =============================================================================
   4. HERO - .iv-hero
   ============================================================================= */

.iv-hero {
  position:         relative;
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  /* was min-height:100dvh — it made every content-light hero a full-screen
     void (realisations, consultation, etc.). Size to content + padding instead;
     pages with a local .iv-hero override their own padding. */
  min-height:       auto;
  padding:          clamp(2.75rem, 6vw, 4.5rem) 0;
  /* centré par défaut (héros service) : supprime le grand vide à droite quand
     le contenu est aligné à gauche. Les pages à héros 2 colonnes overrident. */
  align-items:      center;
  text-align:       center;
  background-color: var(--iv-canvas);
  color:            var(--iv-text);
  overflow:         hidden;
}
.iv-hero__content { display: flex; flex-direction: column; align-items: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.iv-hero__subtitle { margin-left: auto; margin-right: auto; }
.iv-hero__actions { justify-content: center; flex-wrap: wrap; }

/* Dark variant */
.iv-hero--dark {
  background-color: var(--iv-dark);
  color:            var(--iv-canvas);
}

/* Inner layout */
.iv-hero__inner {
  display:          flex;
  flex-direction:   column;
  gap:              var(--iv-gap-lg);
  padding:          clamp(5rem, 10vw, 8rem) var(--iv-section-px) clamp(3rem, 6vw, 5rem);
  max-width:        1200px;
  margin-left:      auto;
  margin-right:     auto;
  width:            100%;
  flex:             1;
  justify-content:  center;
}

@media (min-width: 900px) {
  /* 2 colonnes UNIQUEMENT si le héros a une vraie 2e colonne (image/aside).
     Sinon il reste en colonne unique centrée (le grid 1fr 1fr laissait la
     moitié droite vide sur tous les héros sans image : promotions, services,
     consultation, etc.). */
  /* Opt-in only via .iv-hero--split : `:has(.iv-hero__media)` matchait même un
     média en display:none (patron, hydra-beaubien) → fausse 2e colonne vide.
     Aucune page n'a de vraie 2e colonne visible, donc tout reste mono-colonne. */
  .iv-hero--split .iv-hero__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    auto;
    align-items:           center;
    gap:                   clamp(2rem, 4vw, 4rem);
    text-align:            left;
  }
}

/* Text column */
.iv-hero__content {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* Eyebrow inside hero */
.iv-hero__eyebrow {
  display:        block;
  font-family:    var(--iv-font-mono);
  font-size:      var(--iv-text-xs);
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--iv-accent);
  margin-bottom:  0.25rem;
}

/* H1 */
.iv-hero__title {
  font-family:    var(--iv-font-sans);
  font-size:      var(--iv-text-display);
  font-weight:    700;
  line-height:    1.05;
  letter-spacing: -0.025em;
  margin:         0 auto;
  max-width:      26ch; /* centré : assez large pour ne pas sur-emballer les titres longs */
}
/* Beaucoup de gabarits géo ont un local `.iv-hero__title{margin:0 0 1rem}` qui
   désactivait le centrage (titre 26ch ancré à gauche). Spécificité 0,2,0 pour
   regagner le centrage sans toucher chaque page. Exclut les héros 2 colonnes
   (badge/image à droite) qui restent alignés à gauche volontairement. */
.iv-hero:not(.iv-hero--split):not(:has(.iv-hero__badge)) .iv-hero__title {
  margin-left:  auto;
  margin-right: auto;
}

.iv-hero--dark .iv-hero__title {
  color: var(--iv-canvas);
}

/* Subtitle - max 20 words */
.iv-hero__subtitle {
  font-family: var(--iv-font-sans);
  font-size:   var(--iv-text-lg);
  font-weight: 400;
  line-height: 1.6;
  color:       var(--iv-text-muted);
  max-width:   42ch;
  margin:      0;
}

.iv-hero--dark .iv-hero__subtitle {
  color: rgba(250, 249, 247, 0.75);
}

/* CTA group */
.iv-hero__actions {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.75rem;
  margin-top:  0.5rem;
  align-items: center;
}

/* Reassurance line under CTAs */
.iv-hero__reassurance {
  font-family: var(--iv-font-mono);
  font-size:   var(--iv-text-xs);
  color:       var(--iv-text-light);
  letter-spacing: 0.06em;
  margin-top:  0.25rem;
}

.iv-hero--dark .iv-hero__reassurance {
  color: rgba(250, 249, 247, 0.5);
}

/* Image zone */
.iv-hero__media {
  position:      relative;
  border-radius: var(--iv-radius-card);
  overflow:      hidden;
  aspect-ratio:  4 / 5;
  background-color: var(--iv-dark-surface);
}

@media (min-width: 900px) {
  .iv-hero__media {
    aspect-ratio: 3 / 4;
  }
}

.iv-hero__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Price / duration badge */
.iv-hero__badge {
  position:         absolute;
  bottom:           1.25rem;
  left:             1.25rem;
  background-color: var(--iv-surface);
  border:           1px solid rgba(196, 169, 139, 0.35);
  border-radius:    var(--iv-radius);
  padding:          0.625rem 1rem;
  display:          flex;
  flex-direction:   column;
  gap:              0.125rem;
  box-shadow:       0 4px 16px rgba(44, 36, 32, 0.1);
}

.iv-hero__badge-duration {
  font-family:    var(--iv-font-mono);
  font-size:      var(--iv-text-xs);
  color:          var(--iv-text-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iv-hero__badge-price {
  font-family:    var(--iv-font-sans);
  font-size:      var(--iv-text-xl);
  font-weight:    700;
  color:          var(--iv-text);
  line-height:    1;
}

/* =============================================================================
   5. PAIN GRID - .iv-pain-grid + .iv-pain-card
   ============================================================================= */

.iv-pain-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1rem;
}

@media (min-width: 768px) {
  .iv-pain-grid {
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--iv-gap-md);
  }
}

.iv-pain-card {
  display:          flex;
  flex-direction:   column;
  gap:              0.75rem;
  padding:          1.5rem 1.25rem;
  background-color: var(--iv-surface);
  border:           1px solid rgba(196, 169, 139, 0.2);
  border-radius:    var(--iv-radius-card);
}

.iv-pain-card__icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            2.5rem;
  height:           2.5rem;
  background-color: rgba(196, 169, 139, 0.12);
  border-radius:    var(--iv-radius);
  color:            var(--iv-accent);
  flex-shrink:      0;
}

.iv-pain-card__icon svg,
.iv-pain-card__icon img {
  width:  1.375rem;
  height: 1.375rem;
}

.iv-pain-card__title {
  font-family:  var(--iv-font-sans);
  font-size:    var(--iv-text-base);
  font-weight:  600;
  color:        var(--iv-text);
  line-height:  1.3;
  margin:       0;
}

.iv-pain-card__text {
  font-family: var(--iv-font-sans);
  font-size:   var(--iv-text-sm);
  color:       var(--iv-text-muted);
  line-height: 1.6;
  margin:      0;
}

/* =============================================================================
   6. PROCESS - .iv-process + .iv-step
   ============================================================================= */

.iv-process {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.iv-step {
  display:         flex;
  flex-direction:  row;
  align-items:     flex-start;
  gap:             1.5rem;
  padding-top:     2rem;
  padding-bottom:  2rem;
  border-bottom:   1px solid rgba(196, 169, 139, 0.2);
}

.iv-step:first-child {
  padding-top: 0;
}

.iv-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Large step number */
.iv-step__number {
  font-family:    var(--iv-font-mono);
  font-size:      clamp(3.5rem, 7vw, 5rem);
  font-weight:    700;
  line-height:    1;
  color:          var(--iv-accent);
  opacity:        0.45;
  flex-shrink:    0;
  width:          4rem;
  text-align:     left;
  user-select:    none;
}

@media (min-width: 600px) {
  .iv-step__number {
    width: 5.5rem;
  }
}

.iv-step__body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  padding-top:    0.5rem;
}

.iv-step__title {
  font-family:  var(--iv-font-sans);
  font-size:    var(--iv-text-xl);
  font-weight:  700;
  color:        var(--iv-text);
  margin:       0;
  line-height:  1.2;
}

.iv-section--dark .iv-step__title {
  color: var(--iv-canvas);
}

.iv-step__text {
  font-family: var(--iv-font-sans);
  font-size:   var(--iv-text-base);
  color:       var(--iv-text-muted);
  line-height: 1.65;
  margin:      0;
  max-width:   55ch;
}

.iv-section--dark .iv-step__text {
  color: rgba(250, 249, 247, 0.7);
}

/* Two-column layout at wider viewports */
@media (min-width: 900px) {
  .iv-process--grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0;
  }

  .iv-process--grid .iv-step {
    border-bottom:  1px solid rgba(196, 169, 139, 0.2);
    border-right:   1px solid rgba(196, 169, 139, 0.1);
    padding-left:   1.5rem;
    padding-right:  1.5rem;
  }

  .iv-process--grid .iv-step:nth-child(even) {
    border-right: none;
  }
}

/* =============================================================================
   7. TIMELINE - .iv-timeline
   ============================================================================= */

.iv-timeline {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2rem;
}

@media (min-width: 640px) {
  .iv-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .iv-timeline {
    grid-template-columns: repeat(3, 1fr);
  }
}

.iv-timeline__column {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.iv-timeline__period {
  font-family:    var(--iv-font-mono);
  font-size:      var(--iv-text-xs);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--iv-accent);
  padding-bottom: 0.75rem;
  border-bottom:  2px solid var(--iv-accent);
  margin-bottom:  0.25rem;
}

.iv-timeline__items {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.iv-timeline__item {
  display:     flex;
  align-items: flex-start;
  gap:         0.625rem;
  font-family: var(--iv-font-sans);
  font-size:   var(--iv-text-sm);
  color:       var(--iv-text-muted);
  line-height: 1.5;
}

.iv-section--dark .iv-timeline__item {
  color: rgba(250, 249, 247, 0.7);
}

.iv-timeline__item::before {
  content:          '';
  display:          block;
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background-color: var(--iv-accent);
  margin-top:       0.45rem;
  flex-shrink:      0;
}

/* =============================================================================
   8. TREATMENT CARDS - .iv-treatment-cards + .iv-treatment-card
   ============================================================================= */

.iv-treatment-cards {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1.25rem;
}

@media (min-width: 560px) {
  .iv-treatment-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .iv-treatment-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.iv-treatment-card {
  display:          flex;
  flex-direction:   column;
  background-color: var(--iv-surface);
  border:           1px solid rgba(196, 169, 139, 0.18);
  border-radius:    var(--iv-radius-card);
  overflow:         hidden;
  transition:
    transform var(--iv-duration-fast) var(--iv-ease),
    box-shadow var(--iv-duration-fast) var(--iv-ease);
}

.iv-treatment-card:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 32px rgba(44, 36, 32, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .iv-treatment-card:hover {
    transform:  none;
    box-shadow: 0 4px 16px rgba(44, 36, 32, 0.08);
  }
}

.iv-treatment-card__image {
  aspect-ratio: 3 / 2;
  overflow:     hidden;
  background-color: var(--iv-dark-surface);
  flex-shrink:  0;
}

.iv-treatment-card__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--iv-duration-slow) var(--iv-ease);
}

.iv-treatment-card:hover .iv-treatment-card__image img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .iv-treatment-card:hover .iv-treatment-card__image img {
    transform: none;
  }
}

.iv-treatment-card__body {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  padding:        1.25rem;
  flex:           1;
}

.iv-treatment-card__label {
  font-family:    var(--iv-font-mono);
  font-size:      var(--iv-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--iv-accent);
}

.iv-treatment-card__title {
  font-family: var(--iv-font-sans);
  font-size:   var(--iv-text-lg);
  font-weight: 700;
  color:       var(--iv-text);
  margin:      0;
  line-height: 1.25;
}

.iv-treatment-card__desc {
  font-family: var(--iv-font-sans);
  font-size:   var(--iv-text-sm);
  color:       var(--iv-text-muted);
  line-height: 1.6;
  margin:      0;
}

/* =============================================================================
   9. INCLUDES + PRICE BOX
   ============================================================================= */

/* Checklist */
.iv-includes {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
}

.iv-includes__item {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  font-family: var(--iv-font-sans);
  font-size:   var(--iv-text-base);
  color:       var(--iv-text-muted);
  line-height: 1.5;
}

.iv-section--dark .iv-includes__item {
  color: rgba(250, 249, 247, 0.75);
}

/* Golden checkmark via pseudo-element */
.iv-includes__item::before {
  content:          '';
  display:          block;
  flex-shrink:      0;
  width:            1.125rem;
  height:           1.125rem;
  margin-top:       0.15rem;
  border-radius:    50%;
  background-color: var(--iv-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%232C2420' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     60%;
}

/* Price box */
.iv-price-box {
  display:          flex;
  flex-direction:   column;
  gap:              1.25rem;
  padding:          2rem;
  background-color: var(--iv-surface);
  border:           1px solid rgba(196, 169, 139, 0.3);
  border-radius:    var(--iv-radius-card);
}

.iv-price-box--dark {
  background-color: var(--iv-dark-surface);
  border-color:     rgba(196, 169, 139, 0.25);
}

.iv-price-box__meta {
  display:    flex;
  align-items: center;
  gap:        1rem;
  flex-wrap:  wrap;
}

.iv-price-box__duration {
  font-family:    var(--iv-font-mono);
  font-size:      var(--iv-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--iv-text-light);
}

.iv-price-box__price {
  font-family:    var(--iv-font-sans);
  font-size:      var(--iv-text-3xl);
  font-weight:    700;
  color:          var(--iv-text);
  line-height:    1;
}

.iv-price-box--dark .iv-price-box__price {
  color: var(--iv-canvas);
}

.iv-price-box__note {
  font-family: var(--iv-font-sans);
  font-size:   var(--iv-text-sm);
  color:       var(--iv-text-light);
  margin:      0;
}

/* =============================================================================
   10. BEFORE / AFTER - .iv-ba
   ============================================================================= */

/*
 * Structure:
 *   <div class="iv-ba">
 *     <div class="iv-ba__after">  <-- bottom layer, always visible
 *       <img>
 *       <span class="iv-ba__label iv-ba__label--after">Apres</span>
 *     </div>
 *     <div class="iv-ba__before"> <-- top layer, clipped by --pos
 *       <img>
 *       <span class="iv-ba__label iv-ba__label--before">Avant</span>
 *     </div>
 *     <input type="range" class="iv-ba__range" ...>
 *     <div class="iv-ba__handle" aria-hidden="true"></div>
 *   </div>
 *
 * JS reads the range value and sets --pos on .iv-ba.
 * No auto-animation. Keyboard accessible.
 */

.iv-ba {
  position:      relative;
  border-radius: var(--iv-radius-card);
  overflow:      hidden;
  user-select:   none;
  touch-action:  pan-y;
  aspect-ratio:  4 / 3;
}

/* After image - base layer */
.iv-ba__after {
  position: absolute;
  inset:    0;
}

/* Before image - clipped top layer */
.iv-ba__before {
  position:   absolute;
  inset:      0;
  clip-path:  inset(0 calc(100% - var(--iv-ba-pos)) 0 0);
  will-change: clip-path;
  transition: clip-path 0.04s linear;
}

@media (prefers-reduced-motion: reduce) {
  .iv-ba__before {
    transition: none;
  }
}

.iv-ba__after img,
.iv-ba__before img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Labels */
.iv-ba__label {
  position:         absolute;
  bottom:           1rem;
  font-family:      var(--iv-font-mono);
  font-size:        var(--iv-text-xs);
  font-weight:      700;
  letter-spacing:   0.14em;
  text-transform:   uppercase;
  color:            var(--iv-surface);
  background-color: rgba(44, 36, 32, 0.6);
  padding:          0.25rem 0.625rem;
  border-radius:    var(--iv-radius);
  pointer-events:   none;
}

.iv-ba__label--before {
  left: 1rem;
}

.iv-ba__label--after {
  right: 1rem;
}

/* Range input - transparent overlay */
.iv-ba__range {
  position:      absolute;
  inset:         0;
  width:         100%;
  height:        100%;
  opacity:       0;
  cursor:        ew-resize;
  z-index:       var(--iv-z-raised);
  margin:        0;
  padding:       0;
  appearance:    none;
  -webkit-appearance: none;
  background:    transparent;
}

.iv-ba__range:focus-visible {
  outline: none;
}

/* Visible focus ring when keyboard is used */
.iv-ba__range:focus-visible ~ .iv-ba__handle {
  box-shadow: 0 0 0 3px var(--iv-accent);
}

/* Handle */
.iv-ba__handle {
  position:         absolute;
  top:              0;
  bottom:           0;
  left:             var(--iv-ba-pos);
  transform:        translateX(-50%);
  width:            3px;
  background-color: var(--iv-accent);
  pointer-events:   none;
  z-index:          var(--iv-z-raised);
}

.iv-ba__handle::before,
.iv-ba__handle::after {
  content:          '';
  position:         absolute;
  left:             50%;
  transform:        translateX(-50%);
  width:            2.25rem;
  height:           2.25rem;
  background-color: var(--iv-accent);
  border-radius:    50%;
  box-shadow:       0 2px 8px rgba(44, 36, 32, 0.25);
}

.iv-ba__handle::before {
  top: 50%;
  transform: translate(-50%, -50%);
}

.iv-ba__handle::after {
  display: none;
}

/* Arrow indicators on the circle */
.iv-ba__handle-arrows {
  position:        absolute;
  top:             50%;
  left:            var(--iv-ba-pos);
  transform:       translate(-50%, -50%);
  pointer-events:  none;
  display:         flex;
  align-items:     center;
  gap:             0.375rem;
  z-index:         calc(var(--iv-z-raised) + 1);
  color:           var(--iv-dark);
  font-size:       0.875rem;
  font-weight:     700;
  user-select:     none;
}

/* =============================================================================
   11. COMPARISON TABLE - .iv-compare
   ============================================================================= */

.iv-compare {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--iv-radius-card);
  border: 1px solid rgba(196, 169, 139, 0.2);
}

.iv-compare table {
  width:           100%;
  min-width:       520px;
  border-collapse: collapse;
  font-family:     var(--iv-font-sans);
  font-size:       var(--iv-text-sm);
}

.iv-compare thead th {
  font-size:        var(--iv-text-sm);
  font-weight:      700;
  text-align:       left;
  padding:          1rem 1.25rem;
  background-color: var(--iv-canvas);
  color:            var(--iv-text);
  border-bottom:    2px solid rgba(196, 169, 139, 0.3);
  white-space:      nowrap;
}

.iv-compare thead th:first-child {
  border-radius: var(--iv-radius-card) 0 0 0;
}

.iv-compare thead th:last-child {
  border-radius: 0 var(--iv-radius-card) 0 0;
}

/* Accent column highlight */
.iv-compare thead th.iv-compare__highlight {
  background-color: var(--iv-accent);
  color:            var(--iv-dark);
}

.iv-compare tbody td {
  padding:          0.875rem 1.25rem;
  color:            var(--iv-text-muted);
  border-bottom:    1px solid rgba(196, 169, 139, 0.12);
  vertical-align:   top;
  line-height:      1.5;
}

.iv-compare tbody tr:last-child td {
  border-bottom: none;
}

.iv-compare tbody tr:hover td {
  background-color: rgba(196, 169, 139, 0.04);
}

.iv-compare tbody td.iv-compare__highlight {
  background-color: rgba(196, 169, 139, 0.08);
}

/* Icon helpers */
.iv-compare__check {
  color: var(--iv-accent);
  font-weight: 700;
}

.iv-compare__no {
  color: var(--iv-text-light);
  opacity: 0.5;
}

/* Stacked cards below 480px */
@media (max-width: 479px) {
  .iv-compare {
    overflow-x:    visible;
    border:        none;
    border-radius: 0;
  }

  .iv-compare table,
  .iv-compare thead,
  .iv-compare tbody,
  .iv-compare th,
  .iv-compare td,
  .iv-compare tr {
    display: block;
  }

  .iv-compare thead {
    display: none;
  }

  .iv-compare tbody tr {
    display:          flex;
    flex-direction:   column;
    gap:              0;
    background-color: var(--iv-surface);
    border:           1px solid rgba(196, 169, 139, 0.2);
    border-radius:    var(--iv-radius-card);
    overflow:         hidden;
    margin-bottom:    1rem;
  }

  .iv-compare tbody td {
    border-bottom:   1px solid rgba(196, 169, 139, 0.1);
    padding:         0.75rem 1rem;
  }

  .iv-compare tbody td::before {
    content:        attr(data-label);
    display:        block;
    font-family:    var(--iv-font-mono);
    font-size:      var(--iv-text-xs);
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--iv-accent);
    margin-bottom:  0.25rem;
  }

  .iv-compare tbody td.iv-compare__highlight {
    background-color: transparent;
  }

  .iv-compare tbody tr:last-child td:last-child {
    border-bottom: none;
  }
}

/* H04-FIX: defeat inline min-width on comparison tables so they never
   overflow the mobile viewport (inline style beats stylesheet rules,
   so !important is required here). Covers all phones up to 767px. */
@media (max-width: 767px) {
  .iv-compare,
  .iv-compare table,
  .iv-compare thead,
  .iv-compare tbody,
  .iv-compare tr,
  .iv-compare th,
  .iv-compare td {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .iv-compare table { width: 100% !important; }
}

/* MOBILE CTA SAFETY: long primary CTAs (e.g. "Réserver un HydraFacial -
   à partir de 189$") have white-space:nowrap for desktop, which overflows
   a 360px phone. On mobile, let buttons wrap to 2 lines and cap width so
   they never push past the viewport. */
@media (max-width: 767px) {
  .iv-hero__actions { width: 100%; }
  .iv-hero__actions .iv-btn,
  .iv-cta .iv-btn,
  .iv-section .iv-btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
  /* grid/flex items default to min-width:auto and won't shrink below their
     content's min-content size, overflowing the viewport. Reset to 0. */
  .iv-cii-tech-content,
  .iv-cii-tech-image,
  .iv-cii-tech-grid,
  .iv-cta-band__inner,
  .iv-cta-band__text {
    min-width: 0;
    max-width: 100%;
  }
  /* Hero title font-scale discipline on phones: the display clamp floors at
     2.5rem (40px) and max-width:15ch keeps it narrow, so a long H1 blows up to
     5 lines on 360px. Shrink the font and free the width so long H1s wrap to
     ~3 lines and the CTA stays comfortably above the fold. */
  .iv-hero__title {
    /* !important so the cap beats per-page inline <style> overrides (same
       specificity, later source order) — enforces hero font-scale discipline
       on phones sitewide so long H1s stay <=3 lines. */
    font-size: clamp(1.65rem, 6.2vw, 2.3rem) !important;
    max-width: 100% !important;
    line-height: 1.14 !important;
  }
}

/* =============================================================================
   12. FAQ ACCORDION - .iv-faq
   ============================================================================= */

.iv-faq {
  display:        flex;
  flex-direction: column;
  gap:            0;
  border-top:     1px solid rgba(196, 169, 139, 0.2);
}

.iv-faq__item {
  border-bottom: 1px solid rgba(196, 169, 139, 0.2);
}

/* Remove default details marker */
.iv-faq__item summary {
  list-style:  none;
  cursor:      pointer;
  user-select: none;
}

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

/* Summary inner layout */
.iv-faq__question {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             1.5rem;
  padding:         1.25rem 0;
  font-family:     var(--iv-font-sans);
  font-size:       var(--iv-text-lg);
  font-weight:     600;
  color:           var(--iv-text);
  transition:      color var(--iv-duration-fast) var(--iv-ease);
}

.iv-section--dark .iv-faq__question {
  color: var(--iv-canvas);
}

.iv-faq__item[open] .iv-faq__question {
  color: var(--iv-accent);
}

/* Chevron */
.iv-faq__chevron {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            1.75rem;
  height:           1.75rem;
  border:           1.5px solid currentColor;
  border-radius:    50%;
  transition:
    transform var(--iv-duration-base) var(--iv-ease),
    color     var(--iv-duration-fast) var(--iv-ease);
  position:         relative;
}

/* Plus sign */
.iv-faq__chevron::before,
.iv-faq__chevron::after {
  content:          '';
  position:         absolute;
  background-color: currentColor;
  border-radius:    1px;
  transition:
    transform var(--iv-duration-base) var(--iv-ease),
    opacity   var(--iv-duration-base) var(--iv-ease);
}

/* Horizontal bar */
.iv-faq__chevron::before {
  width:  0.75rem;
  height: 1.5px;
}

/* Vertical bar (becomes hidden when open) */
.iv-faq__chevron::after {
  width:   1.5px;
  height:  0.75rem;
}

.iv-faq__item[open] .iv-faq__chevron::after {
  transform: rotate(90deg);
  opacity:   0;
}

.iv-faq__item[open] .iv-faq__chevron {
  transform: rotate(45deg);
  color:     var(--iv-accent);
}

@media (prefers-reduced-motion: reduce) {
  .iv-faq__chevron,
  .iv-faq__chevron::before,
  .iv-faq__chevron::after {
    transition: none;
  }
}

/* Answer content */
.iv-faq__answer {
  font-family:  var(--iv-font-sans);
  font-size:    var(--iv-text-base);
  color:        var(--iv-text-muted);
  line-height:  1.7;
  padding-bottom: 1.25rem;
  max-width:    65ch;
}

.iv-section--dark .iv-faq__answer {
  color: rgba(250, 249, 247, 0.7);
}

.iv-faq__answer p {
  margin-top:    0;
  margin-bottom: 0.75rem;
}

.iv-faq__answer p:last-child {
  margin-bottom: 0;
}

/* =============================================================================
   13. TESTIMONIALS - .iv-testimonials + .iv-tcard
   ============================================================================= */

.iv-testimonials {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1.25rem;
}

@media (min-width: 560px) {
  .iv-testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .iv-testimonials {
    grid-template-columns: repeat(3, 1fr);
  }
}

.iv-tcard {
  display:          flex;
  flex-direction:   column;
  gap:              1rem;
  padding:          1.5rem;
  background-color: var(--iv-surface);
  border:           1px solid rgba(196, 169, 139, 0.18);
  border-radius:    var(--iv-radius-card);
}

.iv-section--dark .iv-tcard {
  background-color: var(--iv-dark-surface);
  border-color:     rgba(196, 169, 139, 0.15);
}

/* Stars */
.iv-tcard__stars {
  display:  flex;
  gap:      0.25rem;
  color:    var(--iv-accent);
  font-size: 1rem;
  line-height: 1;
}

.iv-tcard__star {
  display:       inline-block;
  width:         1rem;
  height:        1rem;
  background-color: var(--iv-accent);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

/* Quote */
.iv-tcard__quote {
  font-family:  var(--iv-font-sans);
  font-size:    var(--iv-text-base);
  color:        var(--iv-text-muted);
  line-height:  1.65;
  flex:         1;
  margin:       0;
  quotes:       '\00AB' '\00BB';
}

.iv-section--dark .iv-tcard__quote {
  color: rgba(250, 249, 247, 0.72);
}

.iv-tcard__quote::before {
  content: open-quote;
  color:   var(--iv-accent);
}

.iv-tcard__quote::after {
  content: close-quote;
  color:   var(--iv-accent);
}

/* Attribution */
.iv-tcard__author {
  display:        flex;
  flex-direction: column;
  gap:            0.125rem;
  border-top:     1px solid rgba(196, 169, 139, 0.15);
  padding-top:    1rem;
}

.iv-tcard__name {
  font-family: var(--iv-font-sans);
  font-size:   var(--iv-text-sm);
  font-weight: 600;
  color:       var(--iv-text);
}

.iv-section--dark .iv-tcard__name {
  color: var(--iv-canvas);
}

.iv-tcard__verified {
  font-family:    var(--iv-font-mono);
  font-size:      var(--iv-text-xs);
  letter-spacing: 0.08em;
  color:          var(--iv-text-light);
  text-transform: uppercase;
}

/* =============================================================================
   14. CTA BAND - .iv-cta-band
   ============================================================================= */

.iv-cta-band {
  background-color: var(--iv-dark);
  color:            var(--iv-canvas);
  padding:          clamp(3rem, 7vw, 5.5rem) var(--iv-section-px);
}

/* Centered, balanced band (no empty half). One column, content-centered. */
.iv-cta-band__inner {
  max-width:    760px;
  margin-left:  auto;
  margin-right: auto;
  display:      flex;
  flex-direction: column;
  align-items:  center;
  text-align:   center;
  gap:          1.5rem;
}

.iv-cta-band__text {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.75rem;
}

.iv-cta-band__text p {
  max-width: 60ch;
  margin:    0;
}

.iv-cta-band__title {
  font-family:    var(--iv-font-sans);
  font-size:      var(--iv-text-3xl);
  font-weight:    700;
  line-height:    1.15;
  letter-spacing: -0.02em;
  color:          var(--iv-canvas);
  margin:         0;
}

.iv-cta-band__rarity {
  font-family:    var(--iv-font-mono);
  font-size:      var(--iv-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--iv-accent);
  opacity:        0.9;
}

.iv-cta-band__actions {
  display:        flex;
  flex-direction: column;
  gap:            0.875rem;
  width:          100%;
  align-items:    center;
}

@media (min-width: 480px) {
  .iv-cta-band__actions {
    flex-direction:  row;
    flex-wrap:       wrap;
    justify-content: center;
    width:           auto;
  }
}

/* Phone link as discrete secondary */
.iv-cta-band__phone {
  font-family:    var(--iv-font-sans);
  font-size:      var(--iv-text-sm);
  font-weight:    600;
  color:          rgba(250, 249, 247, 0.7);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition:     color var(--iv-duration-fast) var(--iv-ease);
}

.iv-cta-band__phone:hover,
.iv-cta-band__phone:focus-visible {
  color: var(--iv-canvas);
}

/* =============================================================================
   15. RESPONSIVE + GLOBAL HELPERS
   ============================================================================= */

/* Screen-reader only */
.iv-sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* Divider with golden accent */
.iv-divider {
  border:           none;
  height:           1px;
  background-color: rgba(196, 169, 139, 0.2);
  margin:           0;
}

/* Accent underline on headings */
.iv-accent-line {
  display:    block;
  width:      2.5rem;
  height:     3px;
  background-color: var(--iv-accent);
  border-radius:    2px;
  margin-top: 1rem;
}

/* Two-column text + aside layout */
.iv-split {
  display:        flex;
  flex-direction: column;
  gap:            var(--iv-gap-lg);
}

@media (min-width: 768px) {
  .iv-split {
    flex-direction:  row;
    align-items:     flex-start;
  }

  .iv-split__main {
    flex: 2;
    min-width: 0; /* allow shrink below content min-content; prevents tablet overflow */
  }

  .iv-split__aside {
    flex: 1;
    min-width: 0;
  }
}

/* =============================================================================
   16. ROUND 3 - COMPOSANTS TACTILES RÉUTILISABLES (carrousels, promo, avis)
   Contrat HTML :
   <div class="iv-cardrail"><ul class="iv-cardrail__track">
       <li class="iv-cardrail__item">...</li> ...
   </ul></div>
   Carrousel libre au doigt, SANS flèches, inertie native, snap doux,
   barre masquée, contenu DANS le viewport. Clavier : Tab sur les liens.
   ============================================================================= */

.iv-cardrail {
  position: relative;
  margin-inline: calc(-1 * var(--iv-section-px));  /* déborde jusqu'au bord, mais reste dans le viewport */
  padding-inline: var(--iv-section-px);
}

.iv-cardrail__track {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 1rem;
  display: flex;
  gap: var(--iv-gap-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;       /* inertie iOS */
  overscroll-behavior-x: contain;
  scrollbar-width: none;                    /* Firefox */
  scroll-padding-left: var(--iv-section-px);
}
.iv-cardrail__track::-webkit-scrollbar { display: none; }  /* WebKit */

.iv-cardrail__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(78vw, 300px);                  /* mobile : ~1.3 carte visible -> invite au swipe */
}
@media (min-width: 768px) {
  .iv-cardrail__item { width: min(40vw, 320px); }
}
@media (min-width: 1100px) {
  /* desktop : 4 cartes tiennent en une rangée, swipe possible si déborde */
  .iv-cardrail__item { width: calc((100% - 3 * var(--iv-gap-md)) / 4); min-width: 240px; }
}
.iv-cardrail__item > * { height: 100%; }    /* cartes de même hauteur */

/* Indice de défilement discret (dégradé bord droit), sans flèche */
.iv-cardrail::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 1rem;
  width: 2.5rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--iv-canvas));
}
.iv-section--surface .iv-cardrail::after { background: linear-gradient(to right, transparent, var(--iv-surface)); }
.iv-section--dark .iv-cardrail::after { background: linear-gradient(to right, transparent, var(--iv-dark)); }

/* ---- Carrousel d'AVIS auto-défilant (JS) : se fige au toucher, swipe libre ---- */
.iv-revrail {
  display: flex;
  gap: var(--iv-gap-md);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* No scroll-snap here: it pulls the gentle auto-scroll increments back to the
     nearest card (net zero movement). Continuous auto-scroll + free swipe instead. */
  padding: 0.25rem 0 1rem;
}
.iv-revrail::-webkit-scrollbar { display: none; }
.iv-revcard {
  flex: 0 0 auto;
  width: min(85vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.4rem 1.5rem;
  background: var(--iv-surface);
  border: 1px solid rgba(196,169,139,0.18);
  border-radius: var(--iv-radius-card);
}
.iv-section--dark .iv-revcard { background: var(--iv-dark-surface); border-color: rgba(196,169,139,0.15); }
.iv-revcard__stars { color: var(--iv-accent); letter-spacing: 0.1em; font-size: 0.95rem; line-height: 1; }
.iv-revcard__quote { font-size: var(--iv-text-sm); line-height: 1.6; color: var(--iv-text-muted); margin: 0; }
.iv-section--dark .iv-revcard__quote { color: rgba(250,249,247,0.78); }
.iv-revcard__author { font-size: var(--iv-text-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--iv-text); margin-top: auto; }
.iv-section--dark .iv-revcard__author { color: var(--iv-canvas); }
.iv-revcard__src { font-family: var(--iv-font-mono); font-size: 0.7rem; color: var(--iv-text-light); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- Surlignage des mots-clés dans les avis (services + prénoms) ---- */
.iv-kw {
  background: rgba(196,169,139,0.22);
  border-radius: 3px;
  padding: 0 0.18em;
  font-weight: 600;
  color: inherit;
}
a.iv-kw { text-decoration: none; box-shadow: inset 0 -1px 0 rgba(196,169,139,0.7); }
a.iv-kw:hover, a.iv-kw:focus-visible { background: rgba(196,169,139,0.38); }
.iv-kw--staff { background: rgba(196,169,139,0.12); }

/* ---- Bouton PROMO lumineux (halo doux, calme sous reduced-motion) ---- */
.iv-promo-glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  min-height: 48px;
  font-family: var(--iv-font-sans);
  font-size: var(--iv-text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #2C2420;                          /* texte foncé sur or = contraste AA */
  background: linear-gradient(135deg, #E7CFA6, #C4A98B);
  border: 1px solid #B79A77;
  border-radius: var(--iv-radius-pill);
  box-shadow: 0 0 0 0 rgba(196,169,139,0.55);
  animation: iv-promo-pulse 2.4s var(--iv-ease) infinite;
}
.iv-promo-glow:hover, .iv-promo-glow:focus-visible {
  color: #2C2420;
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(196,169,139,0.5);
}
@keyframes iv-promo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(196,169,139,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(196,169,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,169,139,0); }
}
@media (prefers-reduced-motion: reduce) {
  .iv-promo-glow { animation: none; box-shadow: 0 4px 18px rgba(196,169,139,0.45); }
}

/* ---- Titre de section centré (utilitaire) ---- */
.iv-center { text-align: center; }
.iv-center .iv-accent-line { margin-left: auto; margin-right: auto; }
/* === /ROUND 3 composants === */