.formules-hero{padding:var(--s-16) 0 var(--s-10);background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%)}
.formules-hero-inner{max-width:780px;margin:0 auto;text-align:center}
.formules-hero h1{margin:var(--s-3) 0 var(--s-4);font-size:clamp(36px,5.5vw,56px)}
.formules-hero .lead{margin:0 auto var(--s-6);color:var(--ink-2)}
.formules-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-5)}
.trust-pill{display:inline-flex;align-items:center;padding:8px var(--s-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-sm)}

.formules-section{padding:var(--s-10) 0 var(--s-16)}
.formules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);align-items:stretch}
@media (max-width:1180px){.formules-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-5);max-width:780px;margin:0 auto}}
@media (max-width:640px){.formules-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

.formule-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:var(--s-8) var(--s-6) var(--s-6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform var(--dur-normal) var(--ease),box-shadow var(--dur-normal) var(--ease),border-color var(--dur-normal) var(--ease)}
.formule-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}

.formule-card--featured{border:2px solid var(--ink);box-shadow:var(--shadow-xl);transform:scale(1.02)}
.formule-card--featured:hover{transform:translateY(-4px) scale(1.02)}
@media (max-width:980px){.formule-card--featured{transform:none}.formule-card--featured:hover{transform:translateY(-4px)}}

.formule-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--accent-inv);padding:6px var(--s-4);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;white-space:nowrap;box-shadow:var(--shadow-md)}

.formule-head{margin-bottom:var(--s-5)}
.formule-name{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:var(--s-3)}
.formule-price{display:flex;align-items:baseline;gap:var(--s-2);margin-bottom:var(--s-3)}
.formule-price-amount{font-size:clamp(36px,4.5vw,52px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.formule-price-tva{font-size:var(--fs-xs);color:var(--ink-3);font-weight:500}
.formule-tagline{font-size:var(--fs-md);color:var(--ink-2);line-height:1.5;margin:0}

.formule-features{list-style:none;padding:0;margin:0 0 var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.formule-features li{position:relative;padding-left:24px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.formule-meta-grid{display:flex;flex-direction:column;gap:var(--s-3);margin:0 0 var(--s-5);padding:var(--s-4);background:var(--surface-soft);border:1px solid var(--border-soft);border-radius:var(--r-lg)}
.formule-meta-grid>div{display:flex;flex-direction:column;gap:2px}
.formule-meta-grid dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.formule-meta-grid dd{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.formule-features li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px;border-left:2px solid var(--success);border-bottom:2px solid var(--success);transform:rotate(-45deg)}
.formule-features li strong{color:var(--ink);font-weight:600}

.formule-cta{width:100%;margin-bottom:var(--s-3)}
.formule-meta{text-align:center;font-size:var(--fs-xs);color:var(--ink-4);margin:0}

.formules-included{padding:var(--s-16) 0;background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.included-head{text-align:center;max-width:680px;margin:0 auto var(--s-10)}
.included-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5);max-width:920px;margin:0 auto}
@media (max-width:768px){.included-grid{grid-template-columns:1fr}}
.included-item{display:flex;gap:var(--s-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s-5);box-shadow:var(--shadow-sm)}
.included-icon{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent)}
.included-item h3{font-size:var(--fs-md);font-weight:600;margin:0 0 var(--s-1);color:var(--ink)}
.included-item p{font-size:var(--fs-sm);color:var(--ink-3);margin:0;line-height:1.5}

.formules-compare{padding:var(--s-16) 0}
.compare-table-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;margin-top:var(--s-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);position:relative}
.compare-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}
.compare-table th,.compare-table td{padding:var(--s-4);text-align:center;border-bottom:1px solid var(--border-soft);font-size:var(--fs-sm)}
.compare-table th{background:var(--surface-soft);font-weight:700;color:var(--ink);font-size:var(--fs-base)}
.compare-table .compare-feature-col{text-align:left;font-weight:600;color:var(--ink-2)}
.compare-table tbody td:first-child{text-align:left;color:var(--ink-2);font-weight:500}
.compare-table .compare-featured{background:linear-gradient(180deg,var(--accent-soft) 0%,rgba(234,241,248,.3) 100%);font-weight:600;color:var(--ink)}
.compare-table thead .compare-featured{background:var(--accent-soft);color:var(--accent);border-bottom:3px solid var(--accent)}
.compare-price{display:block;margin-top:var(--s-1);font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.compare-table thead .compare-featured .compare-price{color:var(--accent)}
.compare-note{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--ink-4);font-style:italic;text-align:center}

/* Colonne « Inclus » fixe à gauche pour comparer en mobile sans perdre les intitulés. */
.compare-table thead th:first-child,
.compare-table tbody td:first-child{position:sticky;left:0;z-index:3;background:var(--surface);box-shadow:8px 0 18px -8px rgba(15,23,42,0.22);min-width:170px;max-width:210px}
.compare-table thead th:first-child{z-index:4;background:var(--surface-soft)}

/* Cellules interactives (colonnes formule). */
.compare-table .compare-cell--clickable{cursor:pointer;transition:background-color var(--dur-fast) var(--ease)}
.compare-table .compare-cell--clickable:hover,
.compare-table .compare-cell--clickable:focus-visible{background:var(--accent-soft);outline:none}
.compare-table thead .compare-cell--clickable:hover,
.compare-table thead .compare-cell--clickable:focus-visible{background:rgba(93,140,255,0.24)}
.compare-table .compare-cell--clickable:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}

@media (max-width:640px){
  .compare-table{min-width:720px}
  .compare-table thead th:first-child,
  .compare-table tbody td:first-child{min-width:140px;max-width:160px}
  .compare-table th,.compare-table td{padding:var(--s-3);font-size:var(--fs-xs)}
}


.formules-faq{padding:var(--s-16) 0;background:var(--bg-soft)}
.faq-list{margin-top:var(--s-8);display:flex;flex-direction:column;gap:var(--s-3)}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.faq-q{width:100%;text-align:left;padding:var(--s-5) var(--s-6);background:none;border:none;font-size:var(--fs-md);font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:inherit}
.faq-q::after{content:"+";font-size:24px;font-weight:300;color:var(--ink-3);transition:transform var(--dur-fast) var(--ease)}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-normal) var(--ease)}
.faq-item.open .faq-a{max-height:400px}
.faq-a p{padding:0 var(--s-6) var(--s-5);margin:0;color:var(--ink-2);line-height:1.6;font-size:var(--fs-sm)}

.formules-cta-final{padding:var(--s-16) 0}
.cta-final-card{background:var(--ink);color:#fff;border-radius:var(--r-2xl);padding:var(--s-12) var(--s-8);text-align:center;max-width:840px;margin:0 auto;box-shadow:var(--shadow-2xl)}
.cta-final-card h2{color:#fff;margin-bottom:var(--s-4)}
.cta-final-card .lead{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto var(--s-6)}
.cta-final-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3)}
.cta-final-card .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.cta-final-card .btn-primary:hover{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--ink)}
.cta-final-card .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cta-final-card .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

.wrap--narrow{max-width:var(--maxw-narrow);margin:0 auto}

/* V14 — Mobile scroll fix + visual indicator for comparison table */
@media (max-width:768px){
  .formules-compare,.formules-compare>.wrap{overflow-x:visible !important}
  .compare-table-wrap{display:block;width:calc(100vw - (var(--pad-x) * 2));max-width:100%;padding-bottom:38px;scrollbar-width:thin;scrollbar-color:rgba(93,140,255,0.4) transparent;overscroll-behavior-x:contain;touch-action:pan-x pan-y;user-select:none}
  .compare-table-wrap::after{content:"\2190  Faites glisser pour voir toutes les formules  \2192";display:block;position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:12px;color:var(--ink-4);font-style:italic;pointer-events:none}
  .compare-table-wrap::before{content:"";position:absolute;right:0;top:0;bottom:38px;width:36px;background:linear-gradient(to left,var(--surface),transparent);pointer-events:none;z-index:5;border-radius:0 var(--r-xl,12px) 0 0}
}

@media (max-width:640px){
  .compare-table-wrap{border-radius:16px;overflow-x:auto !important;overflow-y:hidden !important}
  .compare-table{width:max-content !important;min-width:780px !important;table-layout:fixed}
  .compare-table th:not(:first-child),.compare-table td:not(:first-child){width:210px;min-width:210px}
  .compare-table thead th:first-child,.compare-table tbody td:first-child{left:0;min-width:132px;max-width:132px;width:132px;white-space:normal;overflow-wrap:break-word}
  .compare-table .compare-cell--clickable{-webkit-tap-highlight-color:rgba(115,215,255,.18)}
}