/* =============================================================================
   ORTHOSYNTHÈSE PRO — VITRINE UI (assets/vitrine-ui.css)
   Charte graphique officielle & Composants mutualisés (Chantiers N05-C, N06-D, N07-E, N08-F)
   Palette officielle : Lilas 50 à 950 (incluant lilas-450 #ad9ee7) / Attention 50 à 600.
   ============================================================================= */

:root {
  --color-lilas-450: #ad9ee7;
}

/* -----------------------------------------------------------------------------
   1. SYSTÈME D'OMBRES DOUCES TEINTÉES LILAS-700 (JAMAIS NOIRES)
   ----------------------------------------------------------------------------- */
.shadow-lilas-soft {
  box-shadow: 0 4px 20px -2px rgba(134, 112, 201, 0.08), 0 2px 6px -1px rgba(134, 112, 201, 0.04);
}

.shadow-lilas-card {
  box-shadow: 0 10px 30px -4px rgba(134, 112, 201, 0.12), 0 4px 12px -2px rgba(134, 112, 201, 0.06);
}

.shadow-lilas-card-hover {
  box-shadow: 0 18px 40px -6px rgba(134, 112, 201, 0.18), 0 8px 16px -3px rgba(134, 112, 201, 0.08);
}

.shadow-lilas-halo {
  box-shadow: 0 0 32px -4px rgba(134, 112, 201, 0.35), 0 16px 36px -4px rgba(134, 112, 201, 0.20);
}

.shadow-lilas-btn {
  box-shadow: 0 4px 16px 0 rgba(116, 95, 186, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.shadow-lilas-btn-hover {
  box-shadow: 0 8px 24px 0 rgba(116, 95, 186, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* -----------------------------------------------------------------------------
   2. BOUTONS PRINCIPAUX ET SECONDAIRES
   ----------------------------------------------------------------------------- */
/* Bouton principal : dégradé horizontal 900 -> 800 -> 700 sans reflet lumineux */
.btn-gradient-b {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #5f4ca3 0%, #745fba 55%, #8670c9 100%);
  box-shadow: 0 4px 16px 0 rgba(116, 95, 186, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bouton dégradé 900 -> 800 (pour cartes tarifs < 18,66 px, ratio > 5,19:1 partout) sans reflet */
.btn-gradient-b-cards {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #5f4ca3 0%, #745fba 100%);
  box-shadow: 0 4px 14px 0 rgba(116, 95, 186, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bouton secondaire : blanc avec anneau 2 px lilas-200 */
.btn-secondary-b {
  background-color: #ffffff;
  color: #5f4ca3; /* lilas-900 */
  box-shadow: 0 0 0 2px #e2daf7, 0 2px 6px -1px rgba(134, 112, 201, 0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* -----------------------------------------------------------------------------
   3. CARTES ET MODULES (ANNEAU 2 PX & SURVOL FLUIDE)
   Ombres diffuses légères, aucune ombre noire (Chantier N06-VISUEL-D)
   ----------------------------------------------------------------------------- */
.card-variant-b {
  position: relative;
  box-shadow: 0 0 0 2px #e2daf7, 0 8px 24px -12px rgba(134, 112, 201, 0.11);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s !important;
}

/* Pseudo-élément d'ombre douce teintée renforcée au survol */
.card-variant-b::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 32px -14px rgba(134, 112, 201, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

/* Pastille d'icône dégradée (lilas-100 -> lilas-200) */
.icon-badge-gradient-b {
  background: linear-gradient(135deg, #ebe5f5 0%, #e2daf7 100%);
  color: #745fba; /* lilas-800 */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Carte Pro avec halo doux (tarifs.html — immobile, pas de lévitation) */
.card-pro-halo {
  position: relative;
  box-shadow: 0 0 0 2px #745fba, 0 0 24px -4px rgba(134, 112, 201, 0.25), 0 12px 28px -6px rgba(134, 112, 201, 0.14);
  transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.30s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s !important;
}

/* Carte Pro mise en valeur en dégradé de marque (N06 : couleur de l'ancien filet) */
.card-pro-recommended {
  position: relative;
  background: linear-gradient(135deg, #5f4ca3 0%, #745fba 100%);
  box-shadow: 0 0 0 2px #b09ded, 0 0 24px -4px rgba(134, 112, 201, 0.25), 0 12px 28px -6px rgba(134, 112, 201, 0.14);
  color: #ffffff;
  transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.30s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s !important;
}

/* Bouton inversé blanc pour carte Pro */
.btn-pro-inverted {
  background-color: #ffffff;
  color: #5f4ca3;
  box-shadow: 0 4px 14px 0 rgba(134, 112, 201, 0.20);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

/* Neutralisation définitive de l'ancienne barre 3px si présente */
.card-bar-top-3px {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   4. BLOCS MIS EN VALEUR EN DÉGRADÉ CLAIR, SOMBRE OU NEUTRE (N05 & N06)
   ----------------------------------------------------------------------------- */
.block-gradient-light {
  position: relative;
  background: linear-gradient(135deg, #f5f3fa 0%, #ebe5f5 50%, #e2daf7 100%);
  box-shadow: 0 0 0 2px #cbbdf2, 0 8px 24px -12px rgba(134, 112, 201, 0.12);
  color: #1e1a3a; /* lilas-950 pour le texte par défaut */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s !important;
}

.block-gradient-light::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 32px -14px rgba(134, 112, 201, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

/* Variante accentuée (1 seul bloc max par page : jusqu'à lilas-300/400) */
.block-gradient-light-accent {
  position: relative;
  background: linear-gradient(135deg, #ebe5f5 0%, #e2daf7 50%, #cbbdf2 100%);
  box-shadow: 0 0 0 2px #b09ded, 0 8px 24px -12px rgba(134, 112, 201, 0.14);
  color: #1e1a3a; /* lilas-950 */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s !important;
}

.block-gradient-light-accent::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 32px -14px rgba(134, 112, 201, 0.20);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

/* Bloc dégradé sombre de marque (N06 : pour « Trame personnalisable », lilas-900 -> lilas-800) */
.block-gradient-dark-brand {
  position: relative;
  background: linear-gradient(135deg, #5f4ca3 0%, #745fba 100%);
  box-shadow: 0 0 0 2px #b09ded, 0 8px 24px -12px rgba(95, 76, 163, 0.25);
  color: #ffffff;
}

/* Bloc neutre gris (N06 : pour « Suivi de rééducation orthoptique », un cran plus foncé que slate-50) */
.block-neutral-slate {
  position: relative;
  background-color: #f1f5f9; /* slate-100 */
  box-shadow: 0 0 0 2px #cbd5e1, 0 8px 24px -12px rgba(100, 116, 139, 0.12);
  color: #0f172a; /* slate-900 */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s !important;
}

.block-neutral-slate::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 32px -14px rgba(100, 116, 139, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

/* Bloc à fond uni lilas-450 (#ad9ee7) (Chantier N07-VISUEL-E) */
.block-solid-lilas-450 {
  position: relative;
  background-color: #ad9ee7;
  box-shadow: 0 0 0 2px #cbbdf2, 0 8px 24px -12px rgba(134, 112, 201, 0.18);
  color: #1e1a3a; /* lilas-950 */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s !important;
}

.block-solid-lilas-450::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 14px 32px -14px rgba(134, 112, 201, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

/* -----------------------------------------------------------------------------
   5. EFFETS DE SURVOL INTERACTIF (CHANTIER N08-VISUEL-F)
   Enveloppés dans @media (hover: hover) and (pointer: fine)
   Désactivés sur mobile et interfaces tactiles sans survol (translateY, scale, ombres)
   ----------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* Bouton principal */
  .btn-gradient-b:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px 0 rgba(116, 95, 186, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  .btn-gradient-b:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 2px 8px 0 rgba(116, 95, 186, 0.30);
  }

  /* Bouton dégradé 900 -> 800 */
  .btn-gradient-b-cards:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px 0 rgba(116, 95, 186, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }

  .btn-gradient-b-cards:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 2px 8px 0 rgba(116, 95, 186, 0.30);
  }

  /* Bouton secondaire */
  .btn-secondary-b:hover {
    background-color: #f5f3fa; /* lilas-50 */
    box-shadow: 0 0 0 2px #cbbdf2, 0 4px 12px -2px rgba(134, 112, 201, 0.12);
    color: #1e1a3a; /* lilas-950 */
  }

  /* Carte standard */
  .card-variant-b:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 0 0 2px #b09ded, 0 8px 24px -12px rgba(134, 112, 201, 0.11); /* anneau lilas-400 */
  }

  .card-variant-b:hover::before {
    opacity: 1 !important;
  }

  .card-variant-b:hover .icon-badge-gradient-b {
    transform: scale(1.06);
  }

  /* Carte Pro avec halo */
  .card-pro-halo:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px #5f4ca3, 0 0 32px -2px rgba(134, 112, 201, 0.35), 0 16px 32px -6px rgba(134, 112, 201, 0.18);
  }

  /* Carte Pro dégradé recommandé */
  .card-pro-recommended:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px #cbbdf2, 0 0 32px -2px rgba(134, 112, 201, 0.35), 0 16px 32px -6px rgba(134, 112, 201, 0.18);
  }

  /* Bouton inversé blanc pour carte Pro */
  .btn-pro-inverted:hover {
    transform: translateY(-2px);
    background-color: #f5f3fa;
    box-shadow: 0 6px 18px 0 rgba(134, 112, 201, 0.28);
    color: #1e1a3a;
  }

  .btn-pro-inverted:active {
    transform: translateY(0) scale(0.99);
  }

  /* Blocs mis en valeur */
  .block-gradient-light:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px #b09ded, 0 10px 26px -10px rgba(134, 112, 201, 0.14);
  }

  .block-gradient-light:hover::before {
    opacity: 1 !important;
  }

  .block-gradient-light-accent:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px #9b85e0, 0 10px 26px -10px rgba(134, 112, 201, 0.16);
  }

  .block-gradient-light-accent:hover::before {
    opacity: 1 !important;
  }

  .block-neutral-slate:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px #94a3b8, 0 10px 26px -10px rgba(100, 116, 139, 0.16);
  }

  .block-neutral-slate:hover::before {
    opacity: 1 !important;
  }

  .block-solid-lilas-450:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px #9b85e0, 0 10px 26px -10px rgba(134, 112, 201, 0.20);
  }

  .block-solid-lilas-450:hover::before {
    opacity: 1 !important;
  }
}

/* -----------------------------------------------------------------------------
   6. FILETS DÉCORATIFS SOUS LES TITRES DE SECTION (48x4 px)
   ----------------------------------------------------------------------------- */
.section-title-line {
  position: relative;
}

.section-title-line::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #5f4ca3 0%, #745fba 55%, #8670c9 100%);
  margin-top: 0.75rem;
}

.text-center .section-title-line::after {
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------------------------------------------
   7. ANIMATIONS PERCEPTIBLES DESKTOP (CHANTIER N05-VISUEL-C)
   a) Apparition au scroll via Keyframes (opacity 0->1, translateY 40px->0, scale 0.96->1)
      Durée 0.9s, cubic-bezier(0.22, 1, 0.36, 1), cascade 120ms, fill-mode: backwards UNIQUEMENT
   b) Lévitation post-apparition sur propriété CSS individuelle `translate` (0 -> -6px -> 0, 6s)
   ----------------------------------------------------------------------------- */

/* Entrée Hero au chargement : opacité 0.85 -> 1 (ne pénalise jamais le LCP) */
@keyframes heroCascadeFade {
  0% {
    opacity: 0.85;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-cascade-1 {
  animation: heroCascadeFade 0.60s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-cascade-2 {
  animation: heroCascadeFade 0.60s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards;
}

.hero-cascade-3 {
  animation: heroCascadeFade 0.60s cubic-bezier(0.16, 1, 0.3, 1) 0.16s forwards;
}

/* Keyframes d'apparition au scroll (N05 : perceptibles, 0.9s, 40px, scale 0.96) */
@keyframes scrollRevealKeyframe {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* État initial préparé par JS pour progressive enhancement (sans JS = visible par défaut) */
.js-scroll-ready {
  opacity: 0;
}

/* Déclenchement de l'apparition : fill-mode backwards UNIQUEMENT (jamais forwards pour ne pas bloquer le hover) */
.reveal-active {
  animation-name: scrollRevealKeyframe;
  animation-duration: 0.90s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: backwards;
  opacity: 1;
}

/* Cascade de 120 ms entre éléments d'un groupe */
.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 240ms; }
.stagger-4 { animation-delay: 360ms; }
.stagger-5 { animation-delay: 480ms; }

/* Keyframes de lévitation douce continue sur la propriété CSS individuelle `translate` */
@keyframes floatLevitation {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -6px;
  }
}

/* Ombre sous la carte qui respire (opacité d'un pseudo-élément, pas d'animation de box-shadow lourde) */
@keyframes shadowBreathe {
  0% {
    opacity: 0.10;
  }
  100% {
    opacity: 0.30;
  }
}

/* Classe de flottaison attachée à la fin de l'apparition (animationend) */
.is-floating {
  animation: floatLevitation 6s ease-in-out alternate infinite;
  will-change: translate;
}

.is-floating::before {
  animation: shadowBreathe 6s ease-in-out alternate infinite;
  animation-delay: inherit;
}

/* Pause hors-écran via IntersectionObserver pour préserver le GPU */
.is-floating.is-paused,
.is-floating.is-paused::before {
  animation-play-state: paused !important;
}

/* Délais négatifs désynchronisés pour la lévitation */
.float-delay-0 { animation-delay: 0.0s; }
.float-delay-1 { animation-delay: -1.5s; }
.float-delay-2 { animation-delay: -3.0s; }
.float-delay-3 { animation-delay: -4.5s; }
.float-delay-4 { animation-delay: -1.0s; }
.float-delay-5 { animation-delay: -2.5s; }

/* -----------------------------------------------------------------------------
   7.bis ALLÈGEMENT MOBILE (CHANTIER N08-VISUEL-F)
   Écrans < 768 px ou interfaces sans survol : (hover: none) / (pointer: coarse)
   - Apparition simplifiée : fondu + translateY(16px), 0.5s, sans scale
   - Délais de cascade réduits (<= 60ms max)
   - Entrée Hero simplifiée : fondu + translateY(16px), 0.5s, cascade <= 60ms
   - Lévitation neutralisée
   ----------------------------------------------------------------------------- */
@keyframes scrollRevealMobileKeyframe {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroCascadeFadeMobile {
  0% {
    opacity: 0.85;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .hero-cascade-1 {
    animation: heroCascadeFadeMobile 0.50s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hero-cascade-2 {
    animation: heroCascadeFadeMobile 0.50s cubic-bezier(0.16, 1, 0.3, 1) 30ms forwards;
  }
  .hero-cascade-3 {
    animation: heroCascadeFadeMobile 0.50s cubic-bezier(0.16, 1, 0.3, 1) 60ms forwards;
  }

  .reveal-active {
    animation-name: scrollRevealMobileKeyframe;
    animation-duration: 0.50s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  .stagger-1 { animation-delay: 0ms; }
  .stagger-2 { animation-delay: 20ms; }
  .stagger-3 { animation-delay: 40ms; }
  .stagger-4 { animation-delay: 60ms; }
  .stagger-5 { animation-delay: 60ms; }

  .is-floating {
    animation: none !important;
    translate: none !important;
    will-change: auto !important;
  }
  .is-floating::before {
    animation: none !important;
  }
}

/* -----------------------------------------------------------------------------
   8. GESTION PREFERS-REDUCED-MOTION & ACCESSIBILITÉ ABSOLUE
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
    translate: none !important;
  }
  .js-scroll-ready,
  .reveal-active {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
  }
  .is-floating {
    animation: none !important;
    translate: none !important;
    will-change: auto !important;
  }
  .is-floating::before {
    animation: none !important;
  }
  .btn-gradient-b::before,
  .btn-gradient-b-cards::before {
    display: none !important;
  }
}