/* =====================================================
   forfait.css — Pages de détail des formations
   Original Permis
   ===================================================== */

/* ── Calligraphie commune : var(--font-display) partout sur cette page,
   même après les redéfinitions locales (var(--font-ui), 'Outfit', inherit) ── */
   .forfait-page,
   .forfait-page * {
     font-family: var(--font-display) !important;
   }
   
   /* ── Overrides Navigation sur fond sombre (forfait-page) ── */
   
   /* La nav a un fond crème sur index.html, mais ici le fond est sombre.
      On force un fond sombre + textes clairs pour que tout soit lisible. */
      .forfait-page #main-nav {
       background: rgba(10, 21, 16, 0.92);
       border-bottom-color: rgba(45, 106, 79, .25);
       backdrop-filter: blur(18px);
       -webkit-backdrop-filter: blur(18px);
     }
     
     .forfait-page #main-nav.nav-scrolled {
       background: rgba(10, 21, 16, 0.97);
       border-bottom-color: rgba(45, 106, 79, .35);
     }
     
     /* Logo texte */
     .forfait-page .brand-name {
       color: rgba(255, 255, 255, 0.9);
     }
     .forfait-page .brand-name strong {
       color: inherit;
     }
     
     /* Liens nav */
     .forfait-page .nav-link {
       color: rgba(255, 255, 255, 0.6);
     }
     .forfait-page .nav-link:hover,
     .forfait-page .nav-link.active {
       color: var(--green-lighter);
     }
     
     /* Téléphone nav */
     .forfait-page .nav-phone {
       color: rgba(255, 255, 255, 0.65);
       border-color: rgba(255, 255, 255, 0.2);
     }
     .forfait-page .nav-phone:hover {
       color: white;
       border-color: var(--green-lighter);
     }
     
     /* Hamburger (mobile) */
     .forfait-page .nav-hamburger span {
       background: rgba(255, 255, 255, 0.8);
     }
     
     /* Menu mobile ouvert
        [Fix] aligné sur 860px (au lieu de 768px) pour correspondre au
        breakpoint du hamburger dans style.css : entre 769px et 860px, le
        menu s'ouvrait déjà (hamburger visible) mais sans ces styles sombres,
        ce qui cassait l'affichage du menu déroulant "Permis" sur les pages
        forfait dans cette plage de largeurs. */
     @media (max-width: 860px) {
       .forfait-page .nav-links.is-open {
         background: rgba(10, 21, 16, 0.97);
         border-top: 1px solid rgba(45, 106, 79, .2);
       }
       .forfait-page .nav-links .nav-link {
         color: rgba(255, 255, 255, 0.75);
       }
     }
     
     /* ── Canvas dynamique arrière-plan ── */
     #forfait-canvas {
         position: fixed;
         top: 0; left: 0;
         width: 100%;
         height: 100%;
         pointer-events: none;
         z-index: 0;
         opacity: 1;
       }
       
       .forfait-page {
         background: var(--surface-darkest);
         min-height: 100vh;
       }
       
       /* ── Hero forfait ── */
       .forfait-hero {
         position: relative;
         z-index: 1;
         padding: clamp(6rem, 14vw, 9rem) clamp(1.2rem, 5vw, 5vw) clamp(2.5rem, 5vw, 4rem);
         background: linear-gradient(
           180deg,
           rgba(10, 21, 16, 0.92) 0%,
           rgba(14, 30, 22, 0.85) 60%,
           rgba(14, 30, 22, 0.70) 100%
         );
         border-bottom: 1px solid rgba(45, 106, 79, .2);
       }
     
       /* Section badge visible sur fond sombre */
       .forfait-hero .section-badge {
         background: rgba(45, 106, 79, .25);
         color: var(--green-lighter);
         border: 1px solid rgba(45, 106, 79, .4);
         display: inline-block;
         font-size: .72rem;
         font-weight: 800;
         letter-spacing: .16em;
         text-transform: uppercase;
         border-radius: 999px;
         padding: .28em 1em;
         margin-bottom: .6rem;
       }
       
       .forfait-hero-inner {
         max-width: var(--container-max);
         margin: 0 auto;
       }
       
       .back-link {
         display: inline-flex;
         align-items: center;
         gap: .4rem;
         font-size: .82rem;
         font-weight: 600;
         color: var(--green-lighter);
         margin-bottom: 2.5rem;
         transition: color var(--duration-normal) var(--ease), gap var(--duration-normal) var(--ease);
         text-decoration: none;
       }
       .back-link:hover {
         color: white;
         gap: .6rem;
       }
       
       .forfait-hero-content {
         display: flex;
         align-items: flex-start;
         gap: 1.8rem;
         margin-bottom: 2.5rem;
       }
       
       .forfait-hero-icon {
         font-size: 3.5rem;
         line-height: 1;
         filter: drop-shadow(0 0 20px rgba(45, 106, 79, .4));
         flex-shrink: 0;
         margin-top: .2rem;
       }
       
       .forfait-title {
         font-size: clamp(1.9rem, 4vw, 3.2rem);
         font-weight: 900;
         color: white;
         line-height: 1.08;
         letter-spacing: -.025em;
         margin: .4rem 0 .5rem;
       }
       
       .forfait-subtitle {
         font-size: 1rem;
         color: rgba(255,255,255,.55);
         line-height: 1.6;
       }
       
       /* Stats row dans le hero */
       .forfait-stats-row {
         display: flex;
         gap: .6rem;
         flex-wrap: wrap;
       }
       
       .forfait-stat-chip {
         display: flex;
         align-items: center;
         gap: .5rem;
         background: rgba(45, 106, 79, .14);
         border: 1px solid rgba(45, 106, 79, .3);
         border-radius: 999px;
         padding: .45em 1.1em;
         font-size: .82rem;
         font-weight: 600;
         color: var(--green-lighter);
       }
       
       /* ── Breadcrumb ── */
       .breadcrumb-bar {
         position: relative;
         z-index: 1;
         background: rgba(10, 21, 16, .7);
         border-bottom: 1px solid rgba(45, 106, 79, .12);
         padding: .8rem 5vw;
       }
       
       .breadcrumb-inner {
         max-width: var(--container-max);
         margin: 0 auto;
         display: flex;
         align-items: center;
         gap: .6rem;
         font-size: .8rem;
         color: rgba(255,255,255,.35);
         flex-wrap: wrap;
       }
       
       .breadcrumb-inner a {
         color: rgba(255,255,255,.35);
         transition: color var(--duration-normal) var(--ease);
       }
       .breadcrumb-inner a:hover { color: var(--green-lighter); }
       .breadcrumb-inner span:last-child { color: rgba(255,255,255,.7); }
       
       /* ── Layout principal ── */
       .forfait-main {
         position: relative;
         z-index: 1;
         background: var(--surface-light);
       }
       
       .forfait-layout {
         max-width: var(--container-max);
         margin: 0 auto;
         padding: clamp(2rem, 5vw, 3.5rem) clamp(1.2rem, 5vw, 5vw) clamp(3rem, 6vw, 5rem);
         display: grid;
         grid-template-columns: 1fr min(360px, 100%);
         gap: 2.5rem;
         /* align-items: start est OBLIGATOIRE pour position:sticky dans un grid */
         align-items: start;
       }
       
       /* ── Blocs de contenu ── */
       .forfait-block {
         background: var(--text-primary);
         border: 1px solid rgba(45, 106, 79, .15);
         border-radius: var(--radius-lg);
         padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 3vw, 2.2rem);
         margin-bottom: 1.5rem;
         transition: border-color var(--duration-normal) var(--ease);
       }
       
       .forfait-block:hover {
         border-color: rgba(45, 106, 79, .3);
       }
       
       .forfait-block-finance {
         display: flex;
         align-items: flex-start;
         gap: 1.4rem;
         background: var(--text-primary);
         border-color: rgba(45, 106, 79, .3);
       }
       
       .finance-icon {
         font-size: 2.5rem;
         flex-shrink: 0;
         margin-top: .1rem;
       }
       
       .forfait-block-title {
         font-size: 1.15rem;
         font-weight: 800;
         color: white;
         margin-bottom: 1rem;
         letter-spacing: -.015em;
       }
       
       .forfait-block-text {
         font-size: .92rem;
         color: rgba(255,255,255,.6);
         line-height: 1.75;
       }
       
       /* ── Programme ── */
       .forfait-programme {
         display: flex;
         flex-direction: column;
         gap: .9rem;
       }
       
       .programme-step {
         display: flex;
         gap: 1.2rem;
         align-items: flex-start;
       }
       
       .programme-step-num {
         flex-shrink: 0;
         width: 32px;
         height: 32px;
         border-radius: 50%;
         background: var(--green);
         color: white;
         font-size: .78rem;
         font-weight: 800;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-top: .1rem;
       }
       
       .programme-step-body {
         flex: 1;
       }
       
       .programme-step-title {
         font-size: .94rem;
         font-weight: 700;
         color: white;
         margin-bottom: .25rem;
       }
       
       .programme-step-desc {
         font-size: .84rem;
         color: rgba(255,255,255,.5);
         line-height: 1.6;
       }
       
       .programme-connector {
         width: 1px;
         height: 18px;
         background: rgba(45, 106, 79, .3);
         margin-left: 15px;
       }
       
   
       .footer-brand {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         gap: 10px;
       }
       
       /* ── Conditions d'accès ── */
       .forfait-conditions {
         list-style: none;
         display: flex;
         flex-direction: column;
         gap: .7rem;
       }
       
       .forfait-conditions li {
         display: flex;
         align-items: flex-start;
         gap: .8rem;
         font-size: .9rem;
         color: rgba(255,255,255,.65);
         line-height: 1.55;
       }
       
       .forfait-conditions li::before {
         content: '✓';
         flex-shrink: 0;
         width: 22px;
         height: 22px;
         background: rgba(45, 106, 79, .2);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: .75rem;
         font-weight: 800;
         color: var(--green-light);
         margin-top: .05rem;
       }
       
       /* ── Finance badges ── */
       .finance-badges {
         display: flex;
         flex-wrap: wrap;
         gap: .5rem;
         margin-top: 1rem;
       }
       
       .finance-badge {
         background: rgba(45, 106, 79, .18);
         border: 1px solid rgba(45, 106, 79, .35);
         border-radius: 999px;
         padding: .3em .9em;
         font-size: .74rem;
         font-weight: 700;
         color: var(--green-lighter);
         letter-spacing: .03em;
       }
       
       /* ── FAQ ── */
       .forfait-faq {
         display: flex;
         flex-direction: column;
         gap: .5rem;
       }
       
       .faq-item {
         border: 1px solid rgba(45, 106, 79, .15);
         border-radius: var(--radius-md);
         overflow: hidden;
         transition: border-color var(--duration-normal) var(--ease);
       }
       
       .faq-item.open {
         border-color: rgba(45, 106, 79, .4);
       }
       
       .faq-question {
         width: 100%;
         background: transparent;
         border: none;
         padding: 1rem 1.2rem;
         text-align: left;
         font-family: var(--font-ui);
         font-size: .9rem;
         font-weight: 700;
         color: white;
         cursor: pointer;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 1rem;
         transition: color var(--duration-normal) var(--ease), background var(--duration-normal) var(--ease);
       }
       
       .faq-question:hover {
         color: var(--green-lighter);
         background: rgba(45, 106, 79, .06);
       }
       
       .faq-chevron {
         flex-shrink: 0;
         width: 18px;
         height: 18px;
         border-radius: 50%;
         background: rgba(45, 106, 79, .15);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: .75rem;
         transition: transform var(--duration-normal) var(--ease), background var(--duration-normal) var(--ease);
       }
       
       .faq-item.open .faq-chevron {
         background: var(--green);
       }

       /* Un seul chevron visible à la fois (SVG inline, sans dépendance externe) */
       .faq-chevron svg { color: #fff; }
       .faq-chevron .fa-angle-up   { display: none; }
       .faq-chevron .fa-angle-down { display: block; }
       .faq-item.open .faq-chevron .fa-angle-up   { display: block; }
       .faq-item.open .faq-chevron .fa-angle-down { display: none; }
       
       .faq-answer {
         max-height: 0;
         overflow: hidden;
         transition: max-height .38s var(--ease);
       }
       
       .faq-item.open .faq-answer {
         max-height: 400px;
       }
       
       .faq-answer-inner {
         padding: 0 1.2rem 1rem;
         font-size: .86rem;
         color: rgba(255,255,255,.55);
         line-height: 1.7;
       }
       
       /* ── Sidebar ── */
       .forfait-sidebar {
         display: flex;
         flex-direction: column;
         gap: 1.4rem;
         min-width: 0;
         /* IMPORTANT: Ne pas mettre overflow:hidden ici — cela casserait le sticky */
       }
       
       .sticky-card {
         position: static;
       }
       
       
       .forfait-card {
         background: var(--text-primary);
         border: 1.5px solid rgba(45, 106, 79, .35);
         border-radius: var(--radius-lg);
         padding: 1.8rem 1.6rem;
         box-shadow: 0 24px 60px rgba(0,0,0,.35);
       }
     
       .forfait-card-header {
         margin-bottom: 1.4rem;
         padding-bottom: 1.2rem;
         border-bottom: 1px solid rgba(45, 106, 79, .2);
       }
       
       .forfait-card-badge {
         display: inline-block;
         font-size: .68rem;
         font-weight: 800;
         letter-spacing: .18em;
         text-transform: uppercase;
         color: var(--surface-light);
         background: var(--green-ghost);
         border: 1px solid rgba(45, 106, 79, .22);
         border-radius: 999px;
         padding: .28em 1em;
         margin-bottom: .8rem;
       }
       
       .forfait-card-price {
         display: flex;
         flex-direction: column;
         gap: .2rem;
       }
       
       .price-amount {
         font-size: clamp(1.2rem, 4vw, 1.6rem);
         font-weight: 900;
         color: white;
         letter-spacing: -.025em;
       }
       
       .price-note {
         font-size: .78rem;
         color: var(--green-lighter);
         font-weight: 600;
       }
       
       .forfait-card-includes {
         list-style: none;
         display: flex;
         flex-direction: column;
         gap: .65rem;
         margin-bottom: 1.4rem;
       }
       
       .forfait-card-includes li {
         display: flex;
         align-items: center;
         gap: .7rem;
         font-size: .86rem;
         color: rgba(255,255,255,.75);
       }
       
       .forfait-card-includes li::before {
         content: '✓';
         flex-shrink: 0;
         width: 20px;
         height: 20px;
         background: var(--green);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: .7rem;
         font-weight: 800;
         color: white;
       }
       
       .forfait-card-note {
         text-align: center;
         font-size: .75rem;
         color: rgba(255,255,255,.3);
         margin-top: .7rem;
       }
       
       /* Autres formations */
       .forfait-other-cards {
         background: var(--text-primary);
         border: 1px solid rgba(45, 106, 79, .15);
         border-radius: var(--radius-lg);
         padding: 1.5rem;
       }
       
       .other-title {
         font-size: .88rem;
         font-weight: 800;
         color: rgba(255,255,255,.5);
         letter-spacing: .1em;
         text-transform: uppercase;
         margin-bottom: 1rem;
       }
       
       .other-list {
         display: flex;
         flex-direction: column;
         gap: .5rem;
       }
       
       .other-item {
         display: flex;
         align-items: center;
         gap: .8rem;
         padding: .7rem .9rem;
         border-radius: var(--radius-md);
         transition: background var(--duration-normal) var(--ease);
         cursor: pointer;
         text-decoration: none;
         border: 1px solid transparent;
       }
       
       .other-item:hover {
         background: rgba(45, 106, 79, .12);
         border-color: rgba(45, 106, 79, .25);
       }
       
       .other-item-icon {
         font-size: 1.4rem;
         flex-shrink: 0;
       }
       
       .other-item-text {
         flex: 1;
       }
       
       .other-item-name {
         display: block;
         font-size: .83rem;
         font-weight: 700;
         color: white;
       }
       
       .other-item-sub {
         display: block;
         font-size: .72rem;
         color: rgba(255,255,255,.35);
         margin-top: .1rem;
       }
       
       .other-item-arrow {
         font-size: .82rem;
         color: var(--green);
         opacity: 0;
         transition: opacity var(--duration-normal) var(--ease), transform var(--duration-normal) var(--ease);
       }
       .other-item:hover .other-item-arrow {
         opacity: 1;
         transform: translateX(3px);
       }
       
       /* Contact card */
       .forfait-contact-card {
         background: var(--text-primary);
         border: 1px solid rgba(45, 106, 79, .3);
         border-radius: var(--radius-lg);
         padding: 1.5rem;
         text-align: center;
       }
       
       .contact-quick-icon {
         font-size: 2rem;
         margin-bottom: .6rem;
       }
       
       .forfait-contact-card h3 {
         font-size: 1rem;
         font-weight: 800;
         color: white;
         margin-bottom: .4rem;
       }
       
       .forfait-contact-card p {
         font-size: .82rem;
         color: rgba(255,255,255,.5);
         line-height: 1.55;
         margin-bottom: 1rem;
       }
       
       /* ── btn-full ── */
       .btn-full {
         width: 100%;
         text-align: center;
         justify-content: center;
       }
       
       /* ── Responsive ── */
       @media (max-width: 960px) {
         .forfait-layout {
           grid-template-columns: 1fr;
         }
       
         .forfait-sidebar {
           order: -1;
         }
       
         .sticky-card {
           position: static;
         }
       }
       
       @media (max-width: 640px) {
         .forfait-hero {
           padding: clamp(5.5rem, 14vw, 8rem) clamp(1.2rem, 5vw, 5vw) 3rem;
         }
       
         .forfait-hero-content {
           flex-direction: column;
           gap: 1rem;
         }
       
         .forfait-hero-icon {
           font-size: 2.4rem;
         }
       
         .forfait-block {
           padding: 1.5rem 1.3rem;
         }
       
         .forfait-block-finance {
           flex-direction: column;
           gap: .8rem;
         }
       }
     /* ── Modal Inscription ── */
     .modal-inscrire {
       position: fixed;
       inset: 0;
       z-index: 1100;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1.5rem;
     }
     .modal-inscrire[hidden] { display: none; }
     
     .modal-inscrire-backdrop {
       position: absolute;
       inset: 0;
       background: rgba(5, 10, 6, .88);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       animation: fadeIn .3s ease;
     }
     
     .modal-inscrire-panel {
       position: relative;
       z-index: 2;
       background: var(--surface-dark2, #122019);
       border: 1px solid rgba(45, 106, 79, .35);
       border-radius: 22px;
       padding: clamp(1.5rem, 5vw, 2.4rem) clamp(1.2rem, 5vw, 2.2rem) clamp(1.2rem, 4vw, 2rem);
       width: 100%;
       max-width: 460px;
       max-height: 90vh;
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: rgba(45,106,79,.4) transparent;
       animation: miEnter .4s cubic-bezier(.34, 1.4, .64, 1);
       box-shadow: 0 40px 100px rgba(0,0,0,.5);
     }
     @keyframes miEnter {
       from { opacity: 0; transform: translateY(28px) scale(.97); }
       to   { opacity: 1; transform: translateY(0) scale(1); }
     }
     
     .modal-inscrire-close {
       position: absolute;
       top: 1rem;
       right: 1rem;
       width: 34px;
       height: 34px;
       border-radius: 50%;
       background: rgba(255,255,255,.08);
       border: 1px solid rgba(255,255,255,.12);
       color: rgba(255,255,255,.6);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: background .25s, color .25s;
     }
     .modal-inscrire-close:hover {
       background: rgba(255,255,255,.18);
       color: white;
     }
     
     .modal-inscrire-icon {
       font-size: 2.6rem;
       margin-bottom: .6rem;
       text-align: center;
     }
     .modal-inscrire-title {
       font-size: 1.55rem;
       font-weight: 800;
       color: white;
       text-align: center;
       margin-bottom: .35rem;
       letter-spacing: -.02em;
     }
     .modal-inscrire-desc {
       font-size: .88rem;
       color: rgba(255,255,255,.5);
       text-align: center;
       line-height: 1.55;
       margin-bottom: 1.2rem;
     }
     .modal-inscrire-formation {
       display: inline-flex;
       align-items: center;
       gap: .4rem;
       background: rgba(45,106,79,.2);
       border: 1px solid rgba(45,106,79,.4);
       border-radius: 999px;
       padding: .3em 1em;
       font-size: .78rem;
       font-weight: 700;
       color: var(--green-lighter, #95D5B2);
       margin-bottom: 1.4rem;
       width: 100%;
       justify-content: center;
       box-sizing: border-box;
     }
     
     .mi-field {
       display: flex;
       flex-direction: column;
       gap: .35rem;
       margin-bottom: .9rem;
     }
     .mi-label {
       font-size: .8rem;
       font-weight: 700;
       color: rgba(255,255,255,.55);
       letter-spacing: .04em;
     }
     .mi-label span { color: var(--green-light, #52B788); }
     .mi-input {
       background: rgba(255,255,255,.07);
       border: 1.5px solid rgba(255,255,255,.12);
       border-radius: 10px;
       padding: .75em 1em;
       color: white;
       font-family: inherit;
       font-size: .95rem;
       outline: none;
       transition: border-color .2s, background .2s;
       width: 100%;
       box-sizing: border-box;
     }
     .mi-input:focus {
       border-color: rgba(45,106,79,.8);
       background: rgba(45,106,79,.1);
     }
     .mi-input::placeholder { color: rgba(255,255,255,.28); }
     .mi-textarea {
       resize: vertical;
       min-height: 80px;
     }

     /* ── Statut de paiement (formulaire inscription) ── */
     .payment-status-block {
       margin-bottom: 1.1rem;
     }
     .payment-status-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: .55rem;
       margin-top: .35rem;
     }
     .pay-status-btn {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: .35rem;
       background: rgba(255,255,255,.05);
       border: 1.5px solid rgba(255,255,255,.12);
       border-radius: 12px;
       padding: .75em .5em;
       cursor: pointer;
       font-family: inherit;
       transition: border-color .2s, background .2s, transform .15s;
       text-align: center;
       box-sizing: border-box;
     }
     .pay-status-btn:hover {
       border-color: rgba(82,183,136,.4);
       background: rgba(45,106,79,.12);
     }
     .pay-status-btn.active {
       border-color: var(--green-light, #52B788);
       background: rgba(45,106,79,.22);
     }
     .pay-status-icon {
       font-size: 1.25rem;
       line-height: 1;
     }
     .pay-status-text {
       font-size: .74rem;
       font-weight: 700;
       color: rgba(255,255,255,.75);
       line-height: 1.3;
     }
     .pay-status-btn.active .pay-status-text {
       color: #fff;
     }

     .acompte-panel,
     .total-panel {
       margin-top: .9rem;
       padding: .9rem 1rem;
       background: rgba(255,255,255,.04);
       border: 1px solid rgba(255,255,255,.1);
       border-radius: 12px;
       box-sizing: border-box;
     }
     .acompte-field-row {
       display: flex;
       flex-wrap: wrap;
       gap: .8rem;
     }
     .acompte-field-row .mi-field {
       min-width: 140px;
     }
     .acompte-reste {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: .6rem;
       margin-top: .8rem;
       padding-top: .8rem;
       border-top: 1px solid rgba(255,255,255,.08);
     }
     .acompte-reste-label {
       font-size: .8rem;
       color: rgba(255,255,255,.55);
       font-weight: 700;
     }
     .acompte-reste-amount {
       font-size: 1rem;
       font-weight: 800;
       color: var(--green-lighter, #95D5B2);
     }
     .total-paid-badge {
       display: flex;
       align-items: center;
       gap: .6rem;
       font-size: .85rem;
       font-weight: 700;
       color: #fff;
     }

     @media (max-width: 480px) {
       .payment-status-grid {
         grid-template-columns: 1fr;
         gap: .5rem;
       }
       .pay-status-btn {
         flex-direction: row;
         justify-content: flex-start;
         padding: .65em .9em;
       }
       .acompte-field-row {
         flex-direction: column;
         gap: .9rem;
       }
       .acompte-field-row .mi-field {
         min-width: 0;
       }
       .acompte-reste {
         flex-direction: column;
         align-items: flex-start;
         gap: .2rem;
       }
     }

     .mi-error {
       font-size: .84rem;
       font-weight: 600;
       color: #ff6b6b;
       background: rgba(255,107,107,.1);
       border: 1px solid rgba(255,107,107,.25);
       border-radius: 8px;
       padding: .6rem .9rem;
       margin-bottom: .8rem;
       text-align: center;
     }
     
     .mi-note {
       text-align: center;
       font-size: .74rem;
       color: rgba(255,255,255,.3);
       margin-top: .6rem;
     }
     
     /* État succès */
     .mi-success {
       text-align: center;
       padding: 1rem 0;
     }
     .mi-success-icon {
       font-size: 3rem;
       margin-bottom: .8rem;
     }
     .mi-success h3 {
       font-size: 1.3rem;
       font-weight: 800;
       color: white;
       margin-bottom: .4rem;
     }
     .mi-success p {
       font-size: .9rem;
       color: rgba(255,255,255,.55);
     }
     
     @media (max-width: 480px) {
       .modal-inscrire-panel {
         padding: 1.6rem 1.2rem 1.4rem;
       }
       .modal-inscrire-title { font-size: 1.3rem; }
       .forfait-stats-row { gap: .5rem; }
       .forfait-stat-chip { font-size: .75rem; padding: .35em .85em; }
     }
   
     @media (max-width: 400px) {
       .forfait-title { font-size: clamp(1.5rem, 7vw, 1.9rem); }
       .forfait-block { margin-bottom: 1rem; }
       .forfait-card  { padding: 1.4rem 1.1rem; }
       .faq-question  { font-size: .84rem; }
       .programme-step { gap: .8rem; }
       .forfait-hero-icon { font-size: 2rem; }
     }
     
   /* ══════════════════════════════════════════════════════════════
      MODAL PAIEMENT STRIPE — styles manquants ajoutés
      ══════════════════════════════════════════════════════════════ */
   
   .modal-pay {
     position: fixed;
     inset: 0;
     z-index: 1200;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1.5rem;
   }
   .modal-pay[hidden] { display: none; }
   
   .modal-pay-backdrop {
     position: absolute;
     inset: 0;
     background: rgba(5, 10, 6, .90);
     backdrop-filter: blur(22px);
     -webkit-backdrop-filter: blur(22px);
     animation: fadeIn .3s ease;
   }
   
   .modal-pay-panel {
     position: relative;
     z-index: 2;
     background: var(--surface-dark2, #122019);
     border: 1.5px solid rgba(45, 106, 79, .35);
     border-radius: 22px;
     /* padding-top = 1rem (top bouton) + 34px bouton + 1rem marge = ~3.2rem → on prend 3.5rem */
     padding: 3.5rem clamp(1.2rem, 5vw, 2.2rem) clamp(1.5rem, 5vw, 2.4rem);
     width: 100%;
     max-width: 480px;
     max-height: 92vh;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin;
     scrollbar-color: rgba(45,106,79,.4) transparent;
     box-shadow: 0 40px 100px rgba(0,0,0,.55);
     animation: miEnter .4s cubic-bezier(.34, 1.4, .64, 1);
   }
   
   .modal-pay-close {
     position: absolute;
     top: 1rem;
     right: 1rem;
     z-index: 3;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: rgba(255,255,255,.08);
     border: 1px solid rgba(255,255,255,.12);
     color: rgba(255,255,255,.6);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background .25s, color .25s;
     flex-shrink: 0;
   }
   .modal-pay-close:hover {
     background: rgba(255,255,255,.18);
     color: white;
   }
   
   /* ── Résumé commande ── */
   .pay-order-summary {
     background: rgba(45,106,79,.1);
     border: 1px solid rgba(45,106,79,.25);
     border-radius: var(--radius-md, 14px);
     padding: 1rem 1.2rem;
     margin-bottom: 1.4rem;
   }
   
   .pay-order-title {
     font-size: .72rem;
     font-weight: 800;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--green-lighter, #95D5B2);
     margin-bottom: .7rem;
   }
   
   .pay-order-item {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 1rem;
   }
   
   .pay-order-name {
     font-size: .95rem;
     font-weight: 700;
     color: white;
     line-height: 1.3;
   }
   
   .pay-order-sub {
     font-size: .78rem;
     color: rgba(255,255,255,.4);
     margin-top: .15rem;
   }
   
   .pay-order-price {
     font-size: 1.15rem;
     font-weight: 900;
     color: white;
     white-space: nowrap;
   }
   
   /* ── Badge sécurité ── */
   .stripe-secure-badge {
     display: flex;
     align-items: flex-start;
     gap: .6rem;
     background: rgba(99,91,255,.07);
     border: 1px solid rgba(99,91,255,.2);
     border-radius: var(--radius-sm, 8px);
     padding: .7rem 1rem;
     margin-bottom: 1.2rem;
   }
   
   .stripe-badge-text {
     font-size: .78rem;
     color: rgba(255,255,255,.55);
     line-height: 1.5;
   }
   
   /* ── Modes de paiement (tabs) ── */
   .pay-modes {
     display: flex;
     gap: .4rem;
     margin-bottom: 1.2rem;
     flex-wrap: wrap;
   }
   
   .pay-mode-btn {
     flex: 1;
     background: rgba(255,255,255,.05);
     border: 1.5px solid rgba(255,255,255,.1);
     border-radius: var(--radius-sm, 8px);
     padding: .55em .7em;
     font-family: var(--font-ui);
     font-size: .78rem;
     font-weight: 700;
     color: rgba(255,255,255,.5);
     cursor: pointer;
     transition: background .2s, border-color .2s, color .2s;
     white-space: nowrap;
   }
   
   .pay-mode-btn.active,
   .pay-mode-btn[aria-selected="true"] {
     background: rgba(45,106,79,.22);
     border-color: var(--green, #2D6A4F);
     color: var(--green-lighter, #95D5B2);
   }
   
   .pay-mode-btn:hover:not(.active) {
     background: rgba(255,255,255,.09);
     color: rgba(255,255,255,.75);
   }
   
   /* ── Champs de paiement ── */
   .pay-field {
     display: flex;
     flex-direction: column;
     gap: .35rem;
     margin-bottom: .9rem;
   }
   
   .pay-label {
     font-size: .8rem;
     font-weight: 700;
     color: rgba(255,255,255,.55);
     letter-spacing: .04em;
   }
   .pay-label span { color: var(--green-light, #52B788); }
   
   .pay-input {
     background: rgba(255,255,255,.07);
     border: 1.5px solid rgba(255,255,255,.12);
     border-radius: 10px;
     padding: .75em 1em;
     color: white;
     font-family: inherit;
     font-size: .95rem;
     outline: none;
     transition: border-color .2s, background .2s;
     width: 100%;
     box-sizing: border-box;
   }
   .pay-input:focus {
     border-color: rgba(45,106,79,.8);
     background: rgba(45,106,79,.1);
   }
   .pay-input::placeholder { color: rgba(255,255,255,.28); }
   
   .pay-card-label {
     font-size: .8rem;
     font-weight: 700;
     color: rgba(255,255,255,.55);
     letter-spacing: .04em;
     margin-bottom: .5rem;
   }
   
   /* ── Stripe Elements container ── */
   #stripe-card-element {
     background: rgba(255,255,255,.07);
     border: 1.5px solid rgba(255,255,255,.12);
     border-radius: 10px;
     padding: .9em 1em;
     transition: border-color .2s;
     min-height: 44px;
   }
   #stripe-card-element.StripeElement--focus {
     border-color: rgba(45,106,79,.8);
     background: rgba(45,106,79,.08);
   }
   #stripe-card-element.StripeElement--invalid {
     border-color: #ff6b6b;
   }
   
   /* ── Paiement en plusieurs fois ── */
   #installment-container {
     margin-bottom: .9rem;
   }
   
   /* ── Erreur paiement ── */
   .pay-error {
     font-size: .84rem;
     font-weight: 600;
     color: #ff6b6b;
     background: rgba(255,107,107,.1);
     border: 1px solid rgba(255,107,107,.25);
     border-radius: 8px;
     padding: .6rem .9rem;
     margin-bottom: .8rem;
     text-align: center;
     display: block;
   }
   .pay-error[hidden] { display: none; }
   
   /* ── Bouton payer ── */
   .pay-submit {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .7rem;
     background: var(--green, #2D6A4F);
     color: white;
     border: none;
     border-radius: 999px;
     padding: .9em 2em;
     font-family: var(--font-ui);
     font-size: 1rem;
     font-weight: 800;
     cursor: pointer;
     transition: background .25s, transform .25s, box-shadow .25s;
     margin-top: .5rem;
     box-shadow: 0 6px 24px rgba(45,106,79,.35);
   }
   .pay-submit:hover {
     background: var(--green-dark, #1B4332);
     transform: translateY(-2px);
     box-shadow: 0 10px 32px rgba(45,106,79,.45);
   }
   .pay-submit:disabled {
     opacity: .6;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
   }
   
   .pay-note {
     text-align: center;
     font-size: .72rem;
     color: rgba(255,255,255,.28);
     line-height: 1.6;
     margin-top: .7rem;
   }
   
   /* ── Trust row Stripe ── */
   .stripe-trust-row {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .4rem;
     font-size: .72rem;
     color: rgba(255,255,255,.3);
     margin-top: .6rem;
   }
   
   /* ── Panneau CPF ── */
   .cpf-info {
     display: flex;
     flex-direction: column;
     gap: .8rem;
     margin-bottom: 1.2rem;
   }
   .cpf-info p {
     font-size: .87rem;
     color: rgba(255,255,255,.55);
     line-height: 1.65;
   }
   .cpf-info a {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     color: var(--green-lighter, #95D5B2);
     font-size: .84rem;
     font-weight: 600;
     text-decoration: none;
     transition: color .2s;
   }
   .cpf-info a:hover { color: white; }
   
   /* ── État succès paiement ── */
   .pay-success {
     text-align: center;
     padding: 1.5rem 0 .5rem;
   }
   .pay-success[hidden] { display: none; }
   
   .pay-success-anim {
     font-size: 3.5rem;
     margin-bottom: .8rem;
     animation: successPop .5s cubic-bezier(.34,1.56,.64,1);
   }
   @keyframes successPop {
     from { transform: scale(.5); opacity: 0; }
     to   { transform: scale(1);  opacity: 1; }
   }
   
   .pay-success h3 {
     font-size: 1.5rem;
     font-weight: 800;
     color: white;
     margin-bottom: .4rem;
   }
   .pay-success p {
     font-size: .9rem;
     color: rgba(255,255,255,.55);
     line-height: 1.6;
     margin-bottom: 1.2rem;
   }
   
   .pay-receipt {
     background: rgba(45,106,79,.1);
     border: 1px solid rgba(45,106,79,.25);
     border-radius: var(--radius-md, 14px);
     padding: 1rem 1.2rem;
     font-size: .82rem;
     color: rgba(255,255,255,.5);
     line-height: 1.7;
     text-align: left;
   }
   .pay-receipt strong {
     color: var(--green-lighter, #95D5B2);
     font-weight: 700;
   }
   
   /* ── Bouton pay (formulaire) ── */
   .btn-pay {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .6rem;
     background: var(--green, #2D6A4F);
     color: white;
     border: none;
     border-radius: 999px;
     padding: .85em 2em;
     font-family: var(--font-ui);
     font-size: 1rem;
     font-weight: 800;
     cursor: pointer;
     transition: background .25s, transform .25s, box-shadow .25s;
     box-shadow: 0 6px 24px rgba(45,106,79,.3);
     margin-bottom: .5rem;
   }
   .btn-pay:hover {
     background: var(--green-dark, #1B4332);
     transform: translateY(-2px);
     box-shadow: 0 10px 32px rgba(45,106,79,.4);
   }
   
   .btn-pay-icon { font-size: 1.1rem; }
   
   .pay-divider {
     text-align: center;
     font-size: .78rem;
     color: rgba(255,255,255,.25);
     margin: .7rem 0;
     position: relative;
   }
   .pay-divider::before,
   .pay-divider::after {
     content: '';
     position: absolute;
     top: 50%;
     width: 38%;
     height: 1px;
     background: rgba(255,255,255,.1);
   }
   .pay-divider::before { left: 0; }
   .pay-divider::after  { right: 0; }
   
   @media (max-width: 480px) {
     .pay-modes { flex-direction: column; }
     .pay-mode-btn { text-align: center; }
     .modal-pay-panel { padding: 3rem 1.1rem 1.5rem; }
   }
   /* ══════════════════════════════════════════════════════════
      CTA — PRENDRE RENDEZ-VOUS (Google Calendar) — formation LSF
   ══════════════════════════════════════════════════════════ */
   .btn-rdv {
     margin-top: .6rem;
     background: linear-gradient(135deg, #2D6A4F 0%, #1B4332 100%);
     border: 1.5px solid rgba(82,183,136,.4);
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .5rem;
   }
   .btn-rdv:hover {
     filter: brightness(1.08);
   }
   .btn-rdv[hidden] { display: none; }
   
   /* ══════════════════════════════════════════════════════════
      CTA — VIDÉO EXPLICATIVE
   ══════════════════════════════════════════════════════════ */
   .btn-video-explainer {
     margin-top: 1rem;
     width: 100%;
     display: flex;
     align-items: center;
     gap: .8rem;
     background: rgba(255,255,255,.05);
     border: 1.5px solid rgba(255,255,255,.12);
     border-radius: var(--radius-md, 14px);
     padding: .85rem 1rem;
     cursor: pointer;
     text-align: left;
     transition: background .25s, border-color .25s, transform .2s;
     font-family: inherit;
   }
   .btn-video-explainer[hidden] {
     display: none;
   }
   .btn-video-explainer:hover {
     background: rgba(45,106,79,.16);
     border-color: rgba(82,183,136,.35);
     transform: translateY(-1px);
   }
   .bve-icon {
     flex-shrink: 0;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: rgba(82,183,136,.18);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
   }
   .bve-text {
     display: flex;
     flex-direction: column;
     gap: .1rem;
   }
   .bve-text strong {
     font-size: .87rem;
     color: #fff;
     font-weight: 700;
   }
   .bve-text span {
     font-size: .76rem;
     color: rgba(255,255,255,.5);
   }
   
   /* ══════════════════════════════════════════════════════════
      MODAL — VIDÉO EXPLICATIVE
   ══════════════════════════════════════════════════════════ */
   .modal-video {
     position: fixed;
     inset: 0;
     z-index: 1200;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1.5rem;
   }
   .modal-video[hidden] { display: none; }
   
   .modal-video-backdrop {
     position: absolute;
     inset: 0;
     background: rgba(5, 10, 6, .90);
     backdrop-filter: blur(22px);
     -webkit-backdrop-filter: blur(22px);
     animation: fadeIn .3s ease;
   }
   
   .modal-video-panel {
     position: relative;
     z-index: 2;
     background: var(--surface-dark2, #122019);
     border: 1.5px solid rgba(45, 106, 79, .35);
     border-radius: 22px;
     padding: 3.5rem clamp(1.2rem, 5vw, 2.2rem) clamp(1.5rem, 5vw, 2.4rem);
     width: 100%;
     max-width: 720px;
     max-height: 92vh;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin;
     scrollbar-color: rgba(45,106,79,.4) transparent;
     box-shadow: 0 40px 100px rgba(0,0,0,.55);
     animation: miEnter .4s cubic-bezier(.34, 1.4, .64, 1);
   }
   
   .modal-video-close {
     position: absolute;
     top: 1rem;
     right: 1rem;
     z-index: 3;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: rgba(255,255,255,.08);
     border: 1px solid rgba(255,255,255,.12);
     color: rgba(255,255,255,.6);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background .25s, color .25s;
     flex-shrink: 0;
   }
   .modal-video-close:hover {
     background: rgba(255,255,255,.18);
     color: white;
   }
   
   .modal-video-title {
     font-family: 'Outfit', sans-serif;
     font-size: 1.3rem;
     font-weight: 800;
     color: #fff;
     margin: 0 0 .4rem;
   }
   .modal-video-desc {
     font-size: .87rem;
     color: rgba(255,255,255,.55);
     margin: 0 0 1.2rem;
   }
   
   .modal-video-frame {
     position: relative;
     width: 100%;
     border-radius: 14px;
     overflow: hidden;
     background: #000;
     border: 1px solid rgba(45,106,79,.25);
   }
   .modal-video-frame video,
   .modal-video-frame iframe {
     display: block;
     width: 100%;
     aspect-ratio: 16 / 9;
     height: auto;
     border: none;
   }
   
   @media (max-width: 480px) {
     .modal-video-panel { padding: 3rem 1.1rem 1.5rem; }
   }

   /* ══════════════════════════════════════════════════════════
      MODAL — PRISE DE RENDEZ-VOUS (Google Calendar)
   ══════════════════════════════════════════════════════════ */
   .modal-rdv-panel {
     max-width: 820px;
   }
   .modal-rdv-frame {
     position: relative;
     width: 100%;
     border-radius: 14px;
     overflow: hidden;
     background: #fff;
     border: 1px solid rgba(45,106,79,.25);
   }
   .modal-rdv-frame iframe {
     display: block;
     width: 100%;
     height: 600px;
     border: none;
   }

   @media (max-width: 700px) {
     .modal-rdv-frame iframe { height: 520px; }
   }
   @media (max-width: 480px) {
     .modal-rdv-frame iframe { height: 460px; }
   }