/* ================================================================
   animations.css — Original Permis
   Animations 3D premium, fluides et subtiles
   ─────────────────────────────────────────
   ARCHITECTURE :
   1.  Variables & tokens d'animation
   2.  Keyframes globaux
   3.  Entrée au scroll — variantes enrichies
   4.  Parallax léger (sections hero / lsf)
   5.  Hover 3D cards — index.html
   6.  Hover 3D cards — forfait.html
   7.  Boutons — micro-interactions
   8.  Logo & nav
   9.  Flottement (éléments visuels)
   10. Stat counter
   11. Ligne de progression hero
   12. Transition section-to-section
   13. Indicateurs / badges
   14. Forfait hero
   15. prefers-reduced-motion (désactivation totale propre)
   ================================================================ */


/* ─────────────────────────────────────────────────────
   1. TOKENS D'ANIMATION
───────────────────────────────────────────────────── */
:root {
  --anim-ease-out-expo:   cubic-bezier(.16, 1, .3, 1);
  --anim-ease-spring:     cubic-bezier(.34, 1.56, .64, 1);
  --anim-ease-smooth:     cubic-bezier(.4, 0, .2, 1);
  --anim-ease-decel:      cubic-bezier(0, 0, .2, 1);

  /* Durées */
  --anim-fast:    200ms;
  --anim-normal:  350ms;
  --anim-slow:    600ms;
  --anim-slower:  900ms;

  /* Perspective 3D globale */
  --perspective-card:   900px;
  --perspective-btn:    600px;

  /* Intensité hover 3D (réduite sur mobile via JS) */
  --tilt-max:    8deg;   /* max rotation card hover */
  --tilt-btn:    4deg;   /* max rotation bouton hover */
}


/* ─────────────────────────────────────────────────────
   2. KEYFRAMES
───────────────────────────────────────────────────── */

/* Entrée depuis le bas avec légère profondeur */
@keyframes op-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, -20px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Entrée depuis la gauche */
@keyframes op-slide-right {
  from {
    opacity: 0;
    transform: translate3d(-28px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Entrée depuis la droite */
@keyframes op-slide-left {
  from {
    opacity: 0;
    transform: translate3d(28px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Scale in — pour badges, chips, éléments ponctuels */
@keyframes op-pop {
  from {
    opacity: 0;
    transform: scale3d(.88, .88, 1) translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

/* Flottement vertical — logo, hero icon */
@keyframes op-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%       { transform: translate3d(0, -7px, 0); }
}

/* Flottement léger — éléments secondaires */
@keyframes op-float-sm {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33%       { transform: translate3d(1px, -4px, 0) rotate(.4deg); }
  66%       { transform: translate3d(-1px, -6px, 0) rotate(-.3deg); }
}

/* Pulse subtil — badges / stats */
@keyframes op-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0); }
  50%       { box-shadow: 0 0 0 6px rgba(45, 106, 79, .12); }
}

/* Shimmer horizontal — bouton CTA principal */
@keyframes op-shimmer {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(260%) skewX(-20deg); }
}

/* Ligne de séparation section — draw */
@keyframes op-line-draw {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Apparition stat number */
@keyframes op-stat-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(.9);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Rotation douce icône hero */
@keyframes op-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Progression verticale — étape programme */
@keyframes op-grow-down {
  from { transform: scaleY(0); transform-origin: top; }
  to   { transform: scaleY(1); transform-origin: top; }
}


/* ─────────────────────────────────────────────────────
   3. ENTRÉE AU SCROLL — variantes enrichies
   Classes posées par animations.js via IntersectionObserver
───────────────────────────────────────────────────── */

/* Variant : montée avec profondeur */
[data-anim="rise"] {
  opacity: 0;
  transform: translate3d(0, 36px, -16px);
  transition:
    opacity    var(--anim-slow) var(--anim-ease-out-expo),
    transform  var(--anim-slow) var(--anim-ease-out-expo);
  will-change: opacity, transform;
}
[data-anim="rise"].anim-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variant : depuis gauche */
[data-anim="from-left"] {
  opacity: 0;
  transform: translate3d(-32px, 0, 0);
  transition:
    opacity   var(--anim-slow) var(--anim-ease-out-expo),
    transform var(--anim-slow) var(--anim-ease-out-expo);
  will-change: opacity, transform;
}
[data-anim="from-left"].anim-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variant : depuis droite */
[data-anim="from-right"] {
  opacity: 0;
  transform: translate3d(32px, 0, 0);
  transition:
    opacity   var(--anim-slow) var(--anim-ease-out-expo),
    transform var(--anim-slow) var(--anim-ease-out-expo);
  will-change: opacity, transform;
}
[data-anim="from-right"].anim-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variant : pop */
[data-anim="pop"] {
  opacity: 0;
  transform: scale3d(.92, .92, 1) translate3d(0, 12px, 0);
  transition:
    opacity   var(--anim-slow) var(--anim-ease-spring),
    transform var(--anim-slow) var(--anim-ease-spring);
  will-change: opacity, transform;
}
[data-anim="pop"].anim-in {
  opacity: 1;
  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}

/* Délais de cascade pour groupes d'éléments */
[data-anim-delay="1"] { transition-delay: 80ms !important; }
[data-anim-delay="2"] { transition-delay: 160ms !important; }
[data-anim-delay="3"] { transition-delay: 240ms !important; }
[data-anim-delay="4"] { transition-delay: 320ms !important; }
[data-anim-delay="5"] { transition-delay: 400ms !important; }
[data-anim-delay="6"] { transition-delay: 480ms !important; }


/* ─────────────────────────────────────────────────────
   4. PARALLAX LÉGER
   Déplacement géré par animations.js sur scroll
───────────────────────────────────────────────────── */

/* Hero background — légère translation verticale */
#hero {
  will-change: background-position;
}

/* Overlay du hero — légère profondeur au scroll */
.hero-content {
  will-change: transform;
  transition: transform .1s linear;
}

/* LSF section image */
.lsf-car-wrap {
  will-change: transform;
}

/* Contact car bg */
.contact-car-bg {
  will-change: transform;
}


/* ─────────────────────────────────────────────────────
   5. HOVER 3D CARDS — index.html
   On active la perspective sur le parent pour que
   le rotateX/Y soit cohérent avec le point de vue
───────────────────────────────────────────────────── */

/* License cards */
.licenses-grid {
  perspective: var(--perspective-card);
}

.license-card {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  transition:
    transform  var(--anim-normal) var(--anim-ease-smooth),
    box-shadow var(--anim-normal) var(--anim-ease-smooth),
    border-color var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform, box-shadow;
  /* Cursor personnalisé — subtil */
  cursor: default;
}

/* Le JS injecte le transform dynamique via JS mousemove.
   Ici on définit juste l'élévation générique au hover
   comme fallback sans JS et sur touch. */
.license-card:hover {
  transform: translate3d(0, -6px, 0) scale(1.012);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(45, 106, 79, .3),
    0 0 40px rgba(45, 106, 79, .08);
}

/* Review cards */
.reviews-track {
  perspective: var(--perspective-card);
}

.review-card {
  transform-style: preserve-3d;
  transition:
    transform  var(--anim-normal) var(--anim-ease-smooth),
    box-shadow var(--anim-normal) var(--anim-ease-smooth),
    border-color var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.review-card:hover {
  transform: translate3d(0, -5px, 0) scale(1.008);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(45, 106, 79, .25);
}

/* Instructor cards */
.instructors-grid {
  perspective: var(--perspective-card);
}

.instructor-card {
  transform-style: preserve-3d;
  transition:
    transform    var(--anim-normal) var(--anim-ease-smooth),
    box-shadow   var(--anim-normal) var(--anim-ease-smooth),
    border-color var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.instructor-card:hover {
  transform: translate3d(0, -7px, 0) scale(1.014);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .30),
    0 0 0 1px rgba(82, 183, 136, .28);
}


/* ─────────────────────────────────────────────────────
   6. HOVER 3D CARDS — forfait.html
───────────────────────────────────────────────────── */

.forfait-block {
  transition:
    transform    var(--anim-normal) var(--anim-ease-smooth),
    box-shadow   var(--anim-normal) var(--anim-ease-smooth),
    border-color var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.forfait-block:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, .2),
    0 0 0 1px rgba(45, 106, 79, .28);
}

.faq-item {
  transition:
    border-color var(--anim-normal) var(--anim-ease-smooth),
    transform    var(--anim-normal) var(--anim-ease-smooth),
    box-shadow   var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.faq-item:hover {
  transform: translate3d(0, -2px, 0);
}

.faq-item.open {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
}

.forfait-card {
  transition:
    transform    var(--anim-normal) var(--anim-ease-smooth),
    box-shadow   var(--anim-normal) var(--anim-ease-smooth),
    border-color var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.other-item {
  transition:
    background   var(--anim-normal) var(--anim-ease-smooth),
    transform    var(--anim-normal) var(--anim-ease-smooth),
    border-color var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.other-item:hover {
  transform: translate3d(4px, 0, 0);
}


/* ─────────────────────────────────────────────────────
   7. BOUTONS — micro-interactions premium
───────────────────────────────────────────────────── */

/* CTA principal — shimmer + lift */
.btn-primary {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition:
    background   var(--anim-normal) var(--anim-ease-smooth),
    transform    var(--anim-normal) var(--anim-ease-spring),
    box-shadow   var(--anim-normal) var(--anim-ease-smooth) !important;
}

/* Reflet lumineux — shader shimmer */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .12) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}

.btn-primary:hover::before {
  animation: op-shimmer 550ms var(--anim-ease-smooth) forwards;
}

.btn-primary:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow:
    0 10px 28px rgba(15, 59, 44, .30),
    0 2px 8px rgba(15, 59, 44, .18) !important;
}

.btn-primary:active {
  transform: translate3d(0, -1px, 0) scale(.98);
  transition-duration: 80ms !important;
}

/* Ghost button */
.btn-ghost {
  transition:
    background   var(--anim-normal) var(--anim-ease-smooth),
    border-color var(--anim-normal) var(--anim-ease-smooth),
    transform    var(--anim-normal) var(--anim-ease-spring),
    box-shadow   var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.btn-ghost:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 8px 24px rgba(255, 255, 255, .06);
}

.btn-ghost:active {
  transform: translate3d(0, 0, 0) scale(.97);
  transition-duration: 80ms;
}

/* CTA nav */
.btn-cta {
  position: relative;
  overflow: hidden;
  transition:
    background var(--anim-normal) var(--anim-ease-smooth),
    transform  var(--anim-normal) var(--anim-ease-spring),
    box-shadow var(--anim-normal) var(--anim-ease-smooth);
}

.btn-cta:hover {
  transform: translate3d(0, -2px, 0) scale(1.03);
  box-shadow: 0 6px 20px rgba(15, 59, 44, .22);
}

.btn-cta:active {
  transform: scale(.97);
  transition-duration: 80ms;
}

/* Bouton payer */
.btn-pay {
  position: relative;
  overflow: hidden;
  transition:
    background var(--anim-normal) var(--anim-ease-smooth),
    transform  var(--anim-normal) var(--anim-ease-spring),
    box-shadow var(--anim-normal) var(--anim-ease-smooth);
}

.btn-pay::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.btn-pay:hover::before {
  animation: op-shimmer 550ms var(--anim-ease-smooth) forwards;
}

.btn-pay:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 32px rgba(45, 106, 79, .40);
}

/* Bouton submit paiement */
.pay-submit {
  position: relative;
  overflow: hidden;
  transition:
    background var(--anim-normal) var(--anim-ease-smooth),
    transform  var(--anim-normal) var(--anim-ease-spring),
    box-shadow var(--anim-normal) var(--anim-ease-smooth);
}

.pay-submit::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.pay-submit:hover::before {
  animation: op-shimmer 550ms var(--anim-ease-smooth) forwards;
}

/* Choice buttons dans le formulaire */
.choice-btn {
  transition:
    background   var(--anim-normal) var(--anim-ease-smooth),
    border-color var(--anim-normal) var(--anim-ease-smooth),
    color        var(--anim-normal) var(--anim-ease-smooth),
    transform    var(--anim-normal) var(--anim-ease-spring),
    box-shadow   var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.choice-btn:hover,
.choice-btn.selected {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 6px 20px rgba(45, 106, 79, .18);
}

.choice-btn:active {
  transform: translate3d(0, 0, 0) scale(.96);
  transition-duration: 80ms;
}


/* ─────────────────────────────────────────────────────
   8. LOGO & NAV
───────────────────────────────────────────────────── */

/* Logo — flottement subtil */
.brand-mark img {
  animation: op-float 5s var(--anim-ease-smooth) infinite;
  will-change: transform;
}

/* Liens nav — underline slide enrichi */
.nav-link {
  transition: color var(--anim-normal) var(--anim-ease-smooth);
}

.nav-link::after {
  transition:
    width     var(--anim-normal) var(--anim-ease-out-expo),
    opacity   var(--anim-normal) var(--anim-ease-smooth);
}

/* Header — transition plus douce */
#main-nav {
  transition:
    background    600ms var(--anim-ease-smooth),
    border-color  600ms var(--anim-ease-smooth),
    padding       var(--anim-normal) var(--anim-ease-smooth),
    box-shadow    600ms var(--anim-ease-smooth);
}


/* ─────────────────────────────────────────────────────
   9. FLOTTEMENT — éléments visuels
───────────────────────────────────────────────────── */

/* Eyebrow badge hero */
.eyebrow-badge {
  animation: op-float-sm 6s ease-in-out infinite !important;
  /* L'animation de reveal est déjà gérée par style.css —
     on ajoute le flottement après l'entrée via animation-delay */
  animation-delay: 1.2s !important;
}

/* Stats hero — légère animation de pulse */
.stat-number {
  display: inline-block;
  transition: transform var(--anim-normal) var(--anim-ease-spring);
}

.stat-item:hover .stat-number {
  transform: scale(1.08) translate3d(0, -2px, 0);
}

/* Hero scroll hint — déjà animé, on améliore */
.hero-scroll-hint {
  animation: fadeIn .6s ease 1.6s forwards !important;
}

/* Badge LSF flottant */
.lsf-badge-float {
  animation: op-float-sm 5.5s ease-in-out infinite;
  animation-delay: .5s;
  will-change: transform;
}

/* Section badge générique — pop discret à l'entrée */
.section-badge {
  display: inline-block;
  will-change: transform;
}

/* Chips stats forfait */
.forfait-stat-chip {
  transition:
    transform    var(--anim-normal) var(--anim-ease-spring),
    box-shadow   var(--anim-normal) var(--anim-ease-smooth),
    border-color var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.forfait-stat-chip:hover {
  transform: translate3d(0, -2px, 0) scale(1.04);
  box-shadow: 0 4px 14px rgba(45, 106, 79, .2);
  border-color: rgba(45, 106, 79, .5);
}

/* Finance badges */
.finance-badge {
  transition:
    transform    var(--anim-normal) var(--anim-ease-spring),
    background   var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.finance-badge:hover {
  transform: translate3d(0, -2px, 0) scale(1.06);
  background: rgba(45, 106, 79, .28);
}

/* Programme steps — connecteur dessiné */
.programme-connector {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--anim-ease-out-expo);
}

.forfait-block.animated .programme-connector {
  transform: scaleY(1);
}

/* Délais décalés steps */
.forfait-block.animated .programme-step:nth-child(1) { animation-delay: 0ms; }
.forfait-block.animated .programme-step:nth-child(2) { animation-delay: 80ms; }
.forfait-block.animated .programme-step:nth-child(3) { animation-delay: 160ms; }
.forfait-block.animated .programme-step:nth-child(4) { animation-delay: 240ms; }


/* ─────────────────────────────────────────────────────
   10. STAT COUNTER HERO
   La classe .stat-counted est ajoutée par animations.js
───────────────────────────────────────────────────── */
.stat-number.stat-counted {
  animation: op-stat-in .6s var(--anim-ease-spring) both;
}


/* ─────────────────────────────────────────────────────
   11. LIGNE DE PROGRESSION — barre de formulaire
───────────────────────────────────────────────────── */
.form-progress-fill {
  transition: width .5s var(--anim-ease-out-expo) !important;
}

/* Step dots */
.step-dot {
  transition:
    background  var(--anim-normal) var(--anim-ease-smooth),
    transform   var(--anim-normal) var(--anim-ease-spring),
    box-shadow  var(--anim-normal) var(--anim-ease-smooth);
}

.step-dot.active {
  box-shadow: 0 0 0 4px rgba(45, 106, 79, .2);
}


/* ─────────────────────────────────────────────────────
   12. TRANSITION ENTRE SECTIONS
   Ligne décorative au-dessus de chaque section
───────────────────────────────────────────────────── */

/* Effet de brillance sur le bord supérieur des sections sombres */
#lsf-section,
#licenses,
#reviews,
#simulator,
#instructors {
  position: relative;
}

#lsf-section::after,
#licenses::after,
#reviews::after,
#instructors::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(45, 106, 79, .35) 30%,
    rgba(82, 183, 136, .5) 50%,
    rgba(45, 106, 79, .35) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* Sections claires */
#contact {
  position: relative;
}

#contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(45, 106, 79, .2) 40%,
    rgba(45, 106, 79, .35) 50%,
    rgba(45, 106, 79, .2) 60%,
    transparent 100%
  );
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────
   13. INDICATEURS / BADGES — micro-animations
───────────────────────────────────────────────────── */

/* Instructor badge */
.instructor-badge {
  transition:
    transform    var(--anim-normal) var(--anim-ease-spring),
    box-shadow   var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.instructor-card:hover .instructor-badge {
  transform: translate3d(2px, -2px, 0) scale(1.06);
  box-shadow: 0 4px 12px rgba(45, 106, 79, .3);
}

/* Carousel buttons */
.carousel-btn {
  transition:
    background   var(--anim-normal) var(--anim-ease-smooth),
    transform    var(--anim-normal) var(--anim-ease-spring),
    border-color var(--anim-normal) var(--anim-ease-smooth),
    color        var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.carousel-btn:hover {
  transform: scale(1.12) translate3d(0, -1px, 0);
}

.carousel-btn:active {
  transform: scale(.94);
  transition-duration: 80ms;
}

/* Carousel dots */
.carousel-dot {
  transition:
    background var(--anim-normal) var(--anim-ease-smooth),
    transform  var(--anim-normal) var(--anim-ease-spring),
    width      var(--anim-normal) var(--anim-ease-out-expo);
  will-change: transform;
}

.carousel-dot.active {
  width: 20px;
  border-radius: 4px;
  transform: none;
}

/* Contact items */
.contact-item {
  transition: transform var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.contact-item:hover {
  transform: translate3d(4px, 0, 0);
}

/* Modal — entrée améliorée */
.modal-panel {
  animation: op-rise .45s var(--anim-ease-spring) both !important;
}

.modal-inscrire-panel {
  animation: op-rise .45s var(--anim-ease-spring) both !important;
}

.modal-pay-panel {
  animation: op-rise .45s var(--anim-ease-spring) both !important;
}


/* ─────────────────────────────────────────────────────
   14. FORFAIT HERO — éléments enrichis
───────────────────────────────────────────────────── */

.forfait-hero-icon {
  animation: op-float 5s ease-in-out infinite;
  will-change: transform;
  display: inline-block;
}

.back-link {
  transition:
    color  var(--anim-normal) var(--anim-ease-smooth),
    gap    var(--anim-normal) var(--anim-ease-smooth),
    transform var(--anim-normal) var(--anim-ease-smooth);
  will-change: transform;
}

.back-link:hover {
  transform: translate3d(-3px, 0, 0);
}

/* Breadcrumb links */
.breadcrumb-inner a {
  transition: color var(--anim-normal) var(--anim-ease-smooth);
}


/* ─────────────────────────────────────────────────────
   15. MOBILE — on réduit l'intensité 3D
   Les transformations lourdes sont réduites sur < 768px
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --tilt-max: 0deg;
    --tilt-btn: 0deg;
  }

  /* Pas de tilt JS sur mobile — hover vertical simple */
  .license-card:hover,
  .review-card:hover,
  .instructor-card:hover {
    transform: translate3d(0, -4px, 0);
  }

  /* Flottements réduits sur mobile pour économiser batterie */
  .brand-mark img {
    animation-duration: 7s;
  }

  .lsf-badge-float,
  .eyebrow-badge,
  .forfait-hero-icon {
    animation: none;
  }
}


/* ─────────────────────────────────────────────────────
   15. PREFERS-REDUCED-MOTION — désactivation totale
───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  /* Supprime toutes les animations de ce fichier */
  [data-anim],
  [data-anim-delay],
  .btn-primary,
  .btn-ghost,
  .btn-cta,
  .btn-pay,
  .pay-submit,
  .choice-btn,
  .license-card,
  .review-card,
  .instructor-card,
  .forfait-block,
  .faq-item,
  .forfait-card,
  .other-item,
  .contact-item,
  .carousel-btn,
  .carousel-dot,
  .stat-number,
  .step-dot,
  .finance-badge,
  .forfait-stat-chip,
  .instructor-badge {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Les éléments data-anim doivent quand même être visibles */
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Désactive shimmer */
  .btn-primary::before,
  .btn-pay::before,
  .pay-submit::before {
    display: none !important;
  }

  /* Logo — pas de flottement */
  .brand-mark img,
  .forfait-hero-icon,
  .lsf-badge-float,
  .eyebrow-badge {
    animation: none !important;
  }

  /* Dots carousel — pas d'extension */
  .carousel-dot.active {
    width: 7px;
    border-radius: 50%;
  }

  /* Connecteurs programme — visibles directement */
  .programme-connector {
    transform: scaleY(1) !important;
  }
}

/* ─────────────────────────────────────────────────────
 MODAL BACKDROP — état ouvert/fermé
 (Extrait de script.js → injectModalStyles)
───────────────────────────────────────────────────── */
.modal[data-open] .modal-backdrop {
opacity: 1;
pointer-events: all;
}
.modal:not([data-open]) .modal-backdrop {
opacity: 0;
transition: opacity .3s ease;
}


/* ─────────────────────────────────────────────────────
 ANIMATION PANEL SHAKE — validation formulaire
 (Extrait de script.js → injectPanelShake)
───────────────────────────────────────────────────── */
@keyframes panelShake {
0%,100% { transform: translateY(0) scale(1); }
20%     { transform: translateX(-8px); }
40%     { transform: translateX(8px); }
60%     { transform: translateX(-5px); }
80%     { transform: translateX(4px); }
}