/* ==========================================================================
   CANVA PRO — PREMIUM SAAS DESIGN SYSTEM (Stripe/Linear inspired)
   ========================================================================== */
:root {
  --purple: #7D2AE8;
  --purple-hover: #6a22c9;
  --cyan: #00C4CC;
  --cyan-dark: #00a8ae;
  --navy: #101438;
  --muted: #58627A;
  --bg: #FFFFFF;
  --soft: #F5F8FF;
  --border: #E3E9F5;
  --purple-tint: #F1E9FF;
  --cyan-tint: #E5FBFC;
  --font-main: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(16, 20, 56, .06);
  --shadow: 0 10px 30px rgba(16, 20, 56, .08);
  --shadow-lg: 0 24px 60px rgba(125, 42, 232, .16);
  --max: 1200px;
  --grad: linear-gradient(135deg, #7D2AE8 0%, #9B51E0 55%, #00C4CC 130%);
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; overflow-x: clip; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-main); background: var(--bg); color: var(--navy);
  line-height: 1.6; overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
/* Anti-débordement : les enfants de grille ne forcent jamais la largeur */
.hero-grid > *, .bento-grid > *, .pricing-grid > *, .dash-grid > *, .faq-grid > * { min-width: 0; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 800; }
p { margin: 0 0 1em; }
a { color: var(--purple); }
img { max-width: 100%; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section-soft { background: var(--soft); }
.section-tight { padding: 0 0 88px; }
section[id] { scroll-margin-top: 124px; }

.skip-link { position: fixed; left: 12px; top: -100px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px; z-index: 500; transition: top .2s; }
.skip-link:focus { top: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 26px; border-radius: 14px;
  font-family: var(--font-main); font-weight: 800; font-size: .98rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active { transform: scale(.98); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .65; cursor: wait; }
.btn-primary { background: var(--purple); color: #fff; box-shadow: 0 6px 18px rgba(125,42,232,.3); }
.btn-primary:hover { background: var(--purple-hover); transform: translateY(-1px); }
.btn-gradient { background: var(--grad); color: #fff; border: none; box-shadow: 0 10px 26px rgba(125,42,232,.35); }
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(125,42,232,.45); }
.btn-outline { background: #fff; border: 2px solid var(--navy); color: var(--navy); box-shadow: 0 3px 10px rgba(16,20,56,.12); }
.btn-outline:hover { border-color: var(--purple); color: var(--purple); box-shadow: 0 6px 16px rgba(125,42,232,.18); }
.btn-white { background: #fff; color: var(--purple); border: none; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.btn-white:hover { transform: translateY(-2px); }
.btn-ghost-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); }
.btn-hero { min-height: 56px; padding: 15px 30px; font-size: 1.03rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ---------- Announcement bar ---------- */
.top-sticky { position: sticky; top: 0; z-index: 120; }
.announce-bar { background: linear-gradient(90deg, #7D2AE8, #5b2ee5 50%, #00a8ae); color: #fff; font-size: .85rem; font-weight: 500; text-align: center; padding: 9px 16px; }
.announce-track { margin: 0 auto; max-width: 900px; min-height: 1.5em; }
.announce-msg { display: none; }
.announce-msg.is-active { display: inline; animation: announceIn .4s ease; }
.announce-msg strong { font-weight: 800; }
.announce-msg a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; margin-left: 6px; }
.announce-msg a:hover { text-decoration-thickness: 2px; }
.txt-short { display: none; }
@keyframes announceIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Header ---------- */
.site-header { position: relative; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); transition: box-shadow .2s ease; }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, #7D2AE8 20%, #00C4CC 80%, transparent); opacity: .5; pointer-events: none; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(16,20,56,.08); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 70px; }
.header-left { display: flex; align-items: center; gap: 18px; justify-content: flex-start; }
.header-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.brand-center { justify-self: center; }

/* Boutons navbar sans cadre : icônes seules */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px; border: none; border-radius: 50%; background: transparent; color: var(--navy); font-weight: 800; font-size: .82rem; cursor: pointer; transition: background .15s, transform .15s; }
.icon-btn:hover { background: var(--soft); transform: none; box-shadow: none; }
#langCurrent { letter-spacing: .04em; }
.chevron { opacity: .55; }
.flag { width: 20px; height: 14px; border-radius: 3px; display: block; box-shadow: 0 0 0 1px rgba(16,20,56,.12); flex-shrink: 0; }
.lang-opt-label { display: inline-flex; align-items: center; gap: 10px; }

/* Bouton langue rond : drapeau seul, sans texte */
.icon-btn.round { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; justify-content: center; }
.flag-circle { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 1px rgba(16,20,56,.14); }
.flag-circle .flag { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }

/* Menu langue */
.lang-switch { position: relative; }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; min-width: 190px; z-index: 200; }
.lang-menu[hidden] { display: none; }
.lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 14px; border: 0; background: none; border-radius: 9px; font-size: .9rem; font-weight: 600; color: var(--navy); cursor: pointer; font-family: inherit; }
.lang-opt:hover { background: var(--soft); }
.lang-check { color: var(--purple); font-weight: 800; }

/* Langue dans le menu mobile */
.drawer-lang { display: none; gap: 10px; margin-top: 14px; }
.drawer-lang-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 12px; border: 1px solid var(--border); background: #fff; font-family: inherit; font-weight: 700; font-size: .86rem; color: var(--navy); cursor: pointer; }
.drawer-lang-opt.active { border-color: var(--purple); background: var(--purple-tint); }
.login-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: #fff; color: var(--navy); font-weight: 800; font-size: .86rem; cursor: pointer; font-family: inherit; box-shadow: 0 1px 3px rgba(16,20,56,.06); transition: border-color .15s, box-shadow .15s, transform .15s; white-space: nowrap; }
.login-btn:hover { border-color: #c9a7ff; box-shadow: 0 6px 16px rgba(125,42,232,.14); transform: translateY(-1px); }

/* Onglets connexion / inscription */
.login-tabs { display: flex; background: var(--soft); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.login-tab { flex: 1; border: 0; background: none; border-radius: 9px; padding: 10px; font-family: inherit; font-weight: 700; font-size: .9rem; color: var(--muted); cursor: pointer; }
.login-tab.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

/* Bouton Google */
.oauth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; margin: 18px 0 14px; }
.oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
#googleBtnWrap { display: flex; justify-content: center; }
#paypal-button-container[hidden] { display: none; }
#paypal-button-container { margin: 4px 0 12px; }
.google-fallback { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 14px; background: #fff; font-family: inherit; font-weight: 700; font-size: .94rem; color: var(--navy); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.google-fallback:hover { border-color: #c9a7ff; box-shadow: var(--shadow-sm); }
#loginBtn.logged { position: relative; }
#loginBtn.logged::after { content: ''; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #12a34a; box-shadow: 0 0 0 2px #fff; }
.demo-note { font-size: .76rem; color: var(--muted); background: var(--soft); border-radius: 10px; padding: 9px 13px; }
.account-h { font-size: 1rem; margin: 18px 0 10px; }
.orders-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.orders-empty { color: var(--muted); font-size: .88rem; background: var(--soft); border-radius: 10px; padding: 12px 14px; }
.order-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.order-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .88rem; flex-wrap: wrap; }
.order-top strong { font-size: .9rem; }
.order-id { color: var(--muted); font-size: .76rem; }
.status-badge { font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.status-pending { background: #FFF4DE; color: #9a6b00; }
/* Timeline de suivi commande */
.tracker { display: flex; align-items: flex-start; margin: 4px 0 2px; }
.t-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 52px; }
.t-dot { width: 26px; height: 26px; border-radius: 50%; background: #eef1f8; color: var(--muted); font-size: .72rem; font-weight: 800; display: grid; place-items: center; border: 2px solid transparent; }
.t-step small { font-size: .66rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.t-step.current .t-dot { background: var(--purple-tint); color: var(--purple); border-color: var(--purple); box-shadow: 0 0 0 4px rgba(125,42,232,.12); animation: pillPulse 1.8s infinite; }
.t-step.current small { color: var(--purple); }
.t-step.done .t-dot { background: #12a34a; color: #fff; }
.t-step.done small { color: #12a34a; }
.t-bar { flex: 1; height: 2px; background: #e8ecf5; border-radius: 2px; margin-top: 13px; min-width: 8px; }
.t-bar.done { background: #12a34a; }
.status-paid { background: #e6f9ea; color: #12934a; }
.status-progress { background: var(--cyan-tint); color: #0a7d82; }
.status-active { background: linear-gradient(135deg, var(--purple), var(--cyan-dark)); color: #fff; }
.order-note { font-size: .82rem; color: var(--muted); margin: 0; }
.activation-row { display: flex; gap: 8px; }
.activation-row .form-input { flex: 1; min-width: 0; }
.activation-row .form-input { min-height: 44px; font-size: .86rem; }
.access-btn { margin-top: 4px; }
.modal-wide { max-width: 620px; }
.seller-mail { font-size: .8rem; color: var(--muted); }
.seller-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.seller-btn { border: 1px solid var(--border); background: #fff; border-radius: 9px; padding: 8px 14px; font-size: .8rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.seller-btn:hover { border-color: var(--purple); color: var(--purple); }
.seller-btn.go { background: var(--grad); color: #fff; border: none; }
.order-resend { align-self: flex-start; border: 1px solid var(--border); background: #fff; border-radius: 9px; padding: 8px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--purple); }
.order-resend:hover { border-color: var(--purple); }
.bonus-box { border: 1px dashed #c9a7ff; border-radius: 12px; padding: 14px; font-size: .88rem; color: var(--muted); }
.bonus-box p { margin: 0 0 12px; }
.account-logout { margin-top: 18px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100vw - 40px); text-align: center; background: var(--navy); color: #fff; padding: 12px 22px; border-radius: 12px; font-size: .9rem; font-weight: 600; z-index: 500; box-shadow: var(--shadow); }
.toast[hidden] { display: none; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; box-shadow: 0 4px 12px rgba(125,42,232,.35); }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; color: var(--navy); }
.brand-word.light { color: #fff; }

/* Logo image (badge couronne) — grand mais sans changer la hauteur navbar */
.brand-logo { display: block; height: 64px; width: auto; max-width: 240px; object-fit: contain; }
.foot-logo { height: 44px; width: auto; max-width: 210px; background: transparent; padding: 0; border-radius: 0; }
.nav-desktop { display: flex; align-items: center; gap: 34px; }
.nav-desktop a { position: relative; font-weight: 700; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--navy); text-decoration: none; padding: 6px 2px; transition: color .2s; }
.nav-desktop a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--purple), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-desktop a:hover { color: var(--purple); }
.nav-desktop a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.promo-pill { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #7D2AE8, #5b2ee5 60%, #00a8ae 130%); color: #fff; padding: 7px 15px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 4px 14px rgba(125,42,232,.35); }
.promo-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pillPulse 1.8s infinite; flex-shrink: 0; }
@keyframes pillPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.btn-header { min-height: 42px; padding: 9px 20px; font-size: .9rem; }
.menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; }
.mobile-menu { border-top: 1px solid var(--border); background: #fff; padding: 14px 24px 24px; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-link { font-weight: 600; font-size: 1.02rem; color: var(--navy); text-decoration: none; padding: 12px 0; border-bottom: 1px solid #F1F4F9; }
.mobile-cta { margin-top: 12px; }
.mobile-note { text-align: center; color: var(--muted); font-size: .85rem; margin: 10px 0 0; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 80px; overflow: hidden; background: linear-gradient(180deg, #FAF7FF 0%, #fff 75%); }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(600px 320px at 12% 18%, rgba(125,42,232,.1), transparent 65%), radial-gradient(560px 300px at 88% 30%, rgba(0,196,204,.12), transparent 65%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); color: var(--purple); font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.hero-title { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin-bottom: 18px; }
.hero-title .grad { background: linear-gradient(92deg, var(--purple) 10%, #b04dff 55%, var(--cyan-dark) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 1.1rem; color: var(--muted); max-width: 540px; }
.hero-sub strong { color: var(--navy); }
.hero-cta-group { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 4px; }
.hero-payments { margin-top: 14px; }
.pay-bar-img { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 640 / 214; }
.hero-trust { font-size: .85rem; color: var(--muted); font-weight: 600; margin: 12px 0 0; }
.hero-visual-col { position: relative; }
.ambient-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(90px); opacity: .45; pointer-events: none; z-index: 0; }
.cyan-glow { background: #8fe3e6; top: -50px; right: -30px; }
.purple-glow { background: #c9a7ff; bottom: -50px; left: -20px; }
.hero-mockup-wrapper { position: relative; z-index: 2; width: 100%; max-width: 560px; margin: 0 auto; }
.hero-photo { position: relative; z-index: 2; display: block; width: 100%; height: auto; aspect-ratio: 640 / 576; }
.float-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; box-shadow: var(--shadow); }
.float-card strong { display: block; font-size: .82rem; line-height: 1.25; }
.float-card small { color: var(--muted); font-size: .72rem; }
.fc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px var(--purple-tint); flex-shrink: 0; }
.fc-dot.cyan { background: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-tint); }
.fc-top { top: 8%; left: -24px; }
.fc-bottom { bottom: 6%; right: -16px; }

/* CTA de fin de section (conversion) */
.section-cta { text-align: center; margin-top: 40px; }
.section-cta-note { color: var(--muted); font-size: .86rem; font-weight: 600; margin: 12px 0 0; }

/* ---------- Use cases ---------- */
.usecases { padding: 8px 0 8px; text-align: center; }
.usecases-label { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.usecases-list { list-style: none; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0; margin: 0; }
.usecases-list li { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-pill); padding: 9px 18px; font-size: .88rem; font-weight: 600; box-shadow: var(--shadow-sm); }

/* ---------- Sections ---------- */
.section-heading { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-heading h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.eyebrow { display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--purple); background: var(--purple-tint); padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: 16px; }
.eyebrow.light { background: rgba(255,255,255,.16); color: #fff; }
.section-sub { color: var(--muted); font-size: 1.05rem; margin: 0; }
.section-sub.left { text-align: left; }

/* ---------- Bento ---------- */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bento-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bento-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.bento-card p { color: var(--muted); font-size: .92rem; margin: 0; }
.bento-wide { grid-column: span 2; flex-direction: row; align-items: center; }
.bento-wide .bento-copy { flex: 1; }
/* Carte vitrine : texte en haut, image large en dessous */
.bento-showcase { flex-direction: column; align-items: stretch; text-align: center; padding: 20px 18px 18px; background: linear-gradient(180deg, #1c2150 0%, #2b2370 60%, #3b2a8f 100%); border: none; gap: 12px; }
.bento-showcase h3 { color: #fff; font-size: 1.05rem; }
.bento-showcase p { color: rgba(255,255,255,.82); max-width: 520px; margin: 0 auto; font-size: .85rem; }
.showcase-visual { display: flex; justify-content: center; }
.bento-showcase .bento-wide-img { max-width: 310px; border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.bento-visual { margin-top: auto; }
.rounded-img { border-radius: 12px; width: 100%; height: 150px; object-fit: cover; display: block; }
.ia-img { height: 120px; }
.cutout-visual { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: center; flex-wrap: wrap; }
.bento-wide-img { display: block; width: 100%; max-width: 460px; height: auto; border-radius: 14px; box-shadow: var(--shadow-sm); }
.cutout-visual figure { margin: 0; text-align: center; }
.cutout-visual img { width: 110px; height: 110px; object-fit: cover; border-radius: 14px; display: block; box-shadow: var(--shadow-sm); }
.cutout-visual figcaption { font-size: .72rem; font-weight: 700; color: var(--muted); margin-top: 6px; }
.checker { background: repeating-conic-gradient(#e8ecf5 0 25%, #fff 0 50%) 0 0 / 16px 16px; border-radius: 14px; padding: 6px; }
.cut-arrow { font-size: 1.4rem; font-weight: 800; color: var(--cyan-dark); }
.stock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stock-grid img { width: 100%; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.cloud-visual { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--soft); border-radius: 14px; padding: 20px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.sizes-visual { display: flex; gap: 10px; align-items: flex-end; justify-content: center; background: var(--soft); border-radius: 14px; padding: 20px; flex-wrap: wrap; }
.sz { border-radius: 8px; color: #fff; font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sz.story { width: 46px; height: 88px; background: linear-gradient(180deg, var(--purple), #4a1a9e); }
.sz.post { width: 62px; height: 62px; background: linear-gradient(135deg, var(--cyan), #0a7d82); }
.sz.banner { width: 92px; height: 42px; background: linear-gradient(90deg, #ff6b9d, #ff9a3d); }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 820px; margin: 0 auto; align-items: stretch; }
.price-card { position: relative; border: 1px solid var(--border); border-radius: 20px; background: #fff; padding: 28px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.selected { border-color: #c9a7ff; }
.price-card.featured { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--purple), var(--cyan)) border-box; box-shadow: var(--shadow-lg); }
.featured-ribbon { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 7px 20px; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: 0 6px 16px rgba(125,42,232,.4); }
.plan-name { font-size: 1.12rem; margin-bottom: 1px; }
.plan-sub { color: var(--muted); font-size: .85rem; margin: 0; }
.plan-price { font-size: 2.2rem; font-weight: 800; font-family: var(--font-display); letter-spacing: -.03em; margin: .45em 0 .1em; }
.old-price { color: var(--muted); font-size: .95rem; font-weight: 600; margin-left: 8px; }
.bonus-line { background: var(--purple-tint); border-radius: 12px; padding: 10px 14px; font-size: .84rem; margin: 10px 0 2px; }
.plan-checklist { list-style: none; padding: 0; margin: 16px 0 22px; display: flex; flex-direction: column; gap: 10px; font-size: .88rem; }
.plan-head { display: flex; gap: 12px; align-items: flex-start; }
.plan-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--purple-tint); display: grid; place-items: center; flex-shrink: 0; }
.plan-ico.grad { background: var(--grad); box-shadow: 0 6px 14px rgba(125,42,232,.35); }
.plan-pill { margin-left: auto; align-self: flex-start; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--cyan-tint); color: #0a7d82; padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap; }
.pricing-trust { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--muted); margin: 24px 0 0; text-align: center; }
.plan-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.plan-checklist .check { width: 22px; height: 22px; border-radius: 50%; background: #e6f9ea; color: #12934a; font-weight: 800; font-size: .75rem; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
.plan-checklist.light .check { background: rgba(255,255,255,.22); color: #fff; }
.plan-cta-wrap, .price-card .btn { margin-top: auto; }

/* ---------- Bonus ---------- */
.bonus-panel { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; background: linear-gradient(120deg, #1c2150 0%, #5b2ee5 58%, #00a8ae 130%); border-radius: 26px; padding: 52px 48px; color: #fff; overflow: hidden; position: relative; }
.bonus-panel h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.bonus-panel p { color: rgba(255,255,255,.88); }
.bonus-panel .plan-checklist li { color: #fff; }
.bonus-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bonus-visual .tpl { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.bonus-visual .tpl.t2 { transform: translateY(14px); }

/* ---------- Trust ---------- */
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--border); background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.trust-item strong { display: block; font-size: .98rem; }
.trust-item span { color: var(--muted); font-size: .86rem; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.faq-grid h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.faq-promo-mini { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; background: linear-gradient(180deg, #FAF7FF, #fff); margin-top: 24px; box-shadow: var(--shadow-sm); }
.faq-promo-mini strong { font-family: var(--font-display); font-size: 1.15rem; display: block; margin-bottom: 6px; }
.faq-promo-mini p { color: var(--muted); font-size: .92rem; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.faq-item:hover {
  border-color: rgba(125, 42, 232, 0.3);
}
.faq-item.open {
  box-shadow: 0 10px 25px rgba(16, 20, 56, 0.06);
  border-color: #c9a7ff;
}
.faq-q { margin: 0; font-size: 1.02rem; font-family: var(--font-display); }
.faq-q button {
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  box-sizing: border-box;
  transition: color 0.2s ease;
}
.faq-q button:hover { color: var(--purple); }
.faq-q button:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; border-radius: 12px; }
.accordion-toggle-icon {
  background: var(--purple-tint);
  color: var(--purple);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease;
}
.faq-item.open .accordion-toggle-icon {
  transform: rotate(45deg);
  background: var(--purple);
  color: #fff;
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a > div {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-a > div {
  opacity: 1;
  filter: blur(0);
}
.faq-a p {
  padding: 0 22px 22px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}
.faq-carousel-wrap { width: 100%; min-width: 0; }
.faq-nav-bar { display: none; }

/* ---------- Final CTA ---------- */
.final-panel { background: linear-gradient(rgba(28,20,90,.55), rgba(10,125,130,.45)), url('assets/final-cta-bg.png') center / cover no-repeat, linear-gradient(120deg, var(--purple) 0%, #5b2ee5 55%, var(--cyan-dark) 130%); border-radius: 26px; padding: 60px 56px; color: #fff; text-align: center; position: relative; overflow: hidden; }
.final-panel::before { content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: rgba(255,255,255,.08); top: -240px; right: -120px; }
.final-panel h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.final-panel p { color: rgba(255,255,255,.88); max-width: 560px; margin: 0 auto; }
.final-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; position: relative; }

/* ---------- Footer premium ---------- */
.site-footer { position: relative; background: linear-gradient(180deg, #0d1130 0%, #141a45 100%); color: #c6cbe0; padding: 72px 0 130px; margin-top: 88px; overflow: hidden; }
.footer-glow { position: absolute; width: 600px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(125,42,232,.22), transparent); top: -150px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.site-footer .container { position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-slogan { font-size: .9rem; margin: 12px 0 18px; max-width: 300px; }
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-col h3 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; font-family: var(--font-main); font-weight: 800; }
.footer-col a { color: #aab0cc; text-decoration: none; font-size: .89rem; padding: 5px 0; transition: color .15s, padding-left .15s; }
.footer-col a:hover { color: #fff; padding-left: 5px; }
.footer-pay { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.foot-pay-img { display: block; height: 34px; width: auto; border-radius: 8px; }
.foot-pay-pp { background: #fff; color: #003087; border-radius: 8px; padding: 6px 13px; font-size: .76rem; font-weight: 800; font-style: italic; }
.footer-trustbar { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 24px 0; font-size: .85rem; }
.footer-trustbar i { font-style: normal; opacity: .35; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: #9aa0bd; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; }
.footer-bottom p { margin: 0; }

/* ---------- Sticky mobile bar (Design Shopify Ultra-Slim & Épuré) ---------- */
.sticky-mobile-bar {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #101438;
  border-radius: 14px;
  padding: 6px 8px 6px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(125, 42, 232, 0.16);
  box-shadow: 0 10px 30px -4px rgba(16, 20, 56, 0.16), 0 2px 8px rgba(125, 42, 232, 0.08);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  height: 52px;
  max-height: 52px;
  box-sizing: border-box;
}

body.modal-open .sticky-mobile-bar {
  transform: translateY(160%);
}

.sticky-left-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.sticky-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sticky-price {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: 1.05rem;
  color: #101438;
  letter-spacing: -0.02em;
}

.sticky-badge {
  background: #f0e7ff;
  color: #7D2AE8;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.sticky-label {
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 600;
}

.btn-sticky-buy {
  background: linear-gradient(135deg, #7D2AE8 0%, #9B51E0 100%);
  color: #FFFFFF !important;
  border: none;
  height: 38px;
  min-height: 38px;
  border-radius: 10px;
  padding: 0 16px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(125, 42, 232, 0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-sticky-buy:active {
  transform: scale(0.97);
}

/* ---------- Modal : animations + hero premium ---------- */
.modal-backdrop { animation: fadeIn .22s ease; }

/* ---------- Pages légales ---------- */
.legal-wrap { max-width: 820px; padding-top: 56px; padding-bottom: 80px; }
.legal-wrap h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 6px; }
.legal-update { color: var(--muted); font-size: .86rem; margin-bottom: 32px; }
.legal-wrap h2 { font-size: 1.2rem; margin: 32px 0 8px; color: var(--purple); }
.legal-wrap p, .legal-wrap li { color: #2b3352; font-size: .96rem; }
.site-footer.slim { padding: 0; margin-top: 0; }
.site-footer.slim .footer-bottom { border-top: none; }
.site-footer.slim a { color: #c6cbe0; text-decoration: none; }
.site-footer.slim a:hover { color: #fff; }
.dash-topbar { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 120; }
.dash-topbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 70px; }
.dash-topbar-inner .brand { justify-self: center; }
.dash-top-actions { justify-self: end; }
.dash-top-actions { display: flex; align-items: center; gap: 10px; }
.btn-sm-top { min-height: 42px; padding: 9px 18px; font-size: .86rem; }
.dash-wrap { max-width: 1020px; padding-top: 40px; padding-bottom: 90px; }
.dash-hero { background: linear-gradient(rgba(20,16,60,.45), rgba(20,16,60,.45)), url('assets/auth-banner.png') center / cover no-repeat, linear-gradient(120deg, #1c2150 0%, #5b2ee5 58%, #00a8ae 130%); border-radius: 24px; padding: 44px 32px 38px; color: #fff; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.dash-hero::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,196,204,.35), transparent 70%); top: -80px; left: -60px; animation: floatGlow 6s ease-in-out infinite alternate; }
@keyframes floatGlow { from { transform: translate(0,0) scale(1); } to { transform: translate(30px, 20px) scale(1.15); } }
.dash-hero-txt { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.avatar-circle.big { box-shadow: 0 0 0 4px rgba(255,255,255,.28), 0 0 34px rgba(0,196,204,.55), 0 12px 28px rgba(0,0,0,.3); position: relative; z-index: 1; }
.dash-kicker { display: flex; align-items: center; gap: 14px; justify-content: center; }
.dash-kicker::before, .dash-kicker::after { content: ''; height: 2px; width: 54px; border-radius: 2px; background: linear-gradient(90deg, transparent, #00C4CC); }
.dash-kicker::after { background: linear-gradient(90deg, #B04DFF, transparent); }
.dash-hero::after { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,255,255,.08); top: -170px; right: -80px; }
.avatar-circle.big { width: 76px; height: 76px; font-size: 2rem; flex-shrink: 0; }
.dash-hello { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin: 0 0 12px; }
.dash-kicker { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); margin: 0 0 6px; }
.dash-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-chip { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); padding: 7px 15px; border-radius: var(--radius-pill); font-size: .82rem; }
.dash-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
.dash-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px 24px; box-shadow: var(--shadow-sm); }
.dash-card h2 { font-size: 1.15rem; margin-bottom: 12px; }
.dash-side { display: flex; flex-direction: column; gap: 20px; }
.dash-help-txt { color: var(--muted); font-size: .9rem; }
.login-required-card { max-width: 520px; margin: 60px auto; text-align: center; padding: 48px 36px; }
.login-required-card h1 { font-size: 1.6rem; }
.auth-icon.dark { background: linear-gradient(135deg, var(--purple), var(--cyan-dark)); border: none; margin-bottom: 16px; }
@media (max-width: 860px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-hero { flex-direction: column; text-align: center; padding: 30px 22px; }
  .dash-stats { justify-content: center; }
  /* Bouton retour : flèche seule sur mobile */
  .back-btn .back-txt { display: none; }
  .back-btn { min-width: 44px; padding: 9px 12px; font-size: 1.1rem; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { animation: popIn .28s cubic-bezier(.16,1,.3,1); }
@keyframes popIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* Hero dégradé en tête de modale */
.auth-hero { margin: -34px -30px 20px; padding: 26px 30px 30px; background: url('assets/auth-banner.png') center / cover no-repeat, linear-gradient(120deg, #7D2AE8 0%, #5b2ee5 55%, #00a8ae 130%); border-radius: 22px 22px 0 0; display: flex; justify-content: center; align-items: center; min-height: 132px; position: relative; overflow: hidden; }
.auth-hero::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.1); top: -140px; right: -70px; }
.auth-icon { width: 60px; height: 60px; border-radius: 20px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0,0,0,.2); position: relative; z-index: 1; }
.account-hero { min-height: 140px; }
.avatar-circle { width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--purple); font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.6); box-shadow: 0 12px 28px rgba(0,0,0,.25); position: relative; z-index: 1; text-transform: uppercase; }

/* Champs premium */
.form-input { background: var(--soft); }
.form-input:focus { background: #fff; }

/* Onglets premium */
.login-tabs { background: #eef1f8; padding: 5px; }
.login-tab.active { background: linear-gradient(135deg, var(--purple), #9B51E0); color: #fff; box-shadow: 0 6px 16px rgba(125,42,232,.35); }

/* Commandes : bordure d'accent par statut */
.order-item { position: relative; overflow: hidden; }
.order-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #e0a100; }
.order-item:has(.status-paid)::before { background: #12934a; }
.order-item:has(.status-progress)::before { background: var(--cyan); }
.order-item:has(.status-active)::before { background: linear-gradient(180deg, var(--purple), var(--cyan)); }
.order-item { padding-left: 18px; }

/* Bonus débloqué */
.bonus-box.unlocked { background: linear-gradient(120deg, #1c2150, #5b2ee5 70%, #00a8ae 130%); border: none; color: #fff; }
.bonus-box.unlocked p { color: rgba(255,255,255,.9); }
/* ==========================================================================
   MODAL BASE & SHOPIFY CHECKOUT POPUP SYSTEM
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 400;
  padding: 16px;
  animation: spFadeIn .2s ease-out;
}
.modal-backdrop[hidden] { display: none; }
@keyframes spFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: #ffffff;
  border-radius: 18px;
  max-width: 490px;
  width: 100%;
  max-height: 94vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05);
  animation: spModalSlide .24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes spModalSlide {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  color: #64748B;
  display: grid;
  place-items: center;
  z-index: 5;
  transition: all .15s;
}
.modal-close:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #CBD5E1;
}

/* Base modal helpers for login/seller */
.modal h2 { font-size: 1.35rem; margin-bottom: 4px; color: #0F172A; }
.modal-sub { color: var(--muted); font-size: .88rem; }
.modal-wide { max-width: 600px; padding: 28px 24px; }
.modal-status { font-size: .85rem; font-weight: 600; min-height: 1.4em; margin: 8px 0; border-radius: 8px; padding: 0 4px; }
.modal-status.error { color: #dc2626; background: #fef2f2; padding: 8px 12px; }

/* ===== SHOPIFY CHECKOUT MODAL SYSTEM ===== */
.sp-modal {
  padding: 0;
  display: block;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sp-modal::-webkit-scrollbar {
  width: 6px;
}
.sp-modal::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 999px;
}

/* Header */
.sp-modal-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px 14px;
  background: #FFFFFF;
  border-bottom: 1px solid #EEF2F6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.sp-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-canva-mark {
  width: 36px;
  height: 36px;
  background: #F3E8FF;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sp-modal-title {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  color: #0F172A !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.sp-ssl-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #15803D;
  background: #DCFCE7;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 3px;
}
.sp-close {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #fff;
  color: #64748B;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all .15s ease;
}
.sp-close:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #CBD5E1;
}

/* Shopify Order Card */
.sp-order-card {
  margin: 16px 20px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px 16px;
}
.sp-order-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sp-item-thumb-box {
  position: relative;
  flex-shrink: 0;
}
.sp-item-thumb {
  width: 50px;
  height: 50px;
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.sp-thumb-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #475569;
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
}
.sp-item-details {
  flex: 1;
  min-width: 0;
}
.sp-item-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-plan-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: #0F172A;
}
.sp-discount-pill {
  font-size: 0.68rem;
  font-weight: 800;
  background: #DCFCE7;
  color: #15803D;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.sp-plan-desc {
  font-size: 0.78rem;
  color: #64748B;
  margin: 2px 0 5px;
  line-height: 1.35;
}
.sp-item-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sp-meta-tag {
  font-size: 0.7rem;
  color: #475569;
  background: #EEF2F6;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
}
.sp-item-price-col {
  text-align: right;
  flex-shrink: 0;
}
.sp-price-now {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
  font-family: var(--font-display);
  display: block;
  line-height: 1.1;
}
.sp-price-was {
  font-size: 0.82rem;
  color: #94A3B8;
  text-decoration: line-through;
  display: block;
  margin-top: 3px;
}

/* Bonus row */
.sp-bonus-alert {
  margin-top: 10px;
  background: #FAF5FF;
  border: 1px dashed #D8B4FE;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #581C87;
}
.sp-bonus-emoji { font-size: 1.05rem; }
.sp-bonus-text strong { font-weight: 700; color: #6B21A8; }

/* Summary Breakdown */
.sp-breakdown {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: #64748B;
}
.sp-b-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp-green-text { color: #16A34A; font-weight: 600; }
.sp-b-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #E2E8F0;
  color: #0F172A;
}
.sp-b-total-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: #0F172A;
}
.sp-b-total-val-box {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.sp-currency-sub {
  font-size: 0.74rem;
  color: #64748B;
  font-weight: 700;
}
.sp-total-number {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0F172A;
  font-family: var(--font-display);
}

/* Checkout Form */
.sp-form {
  padding: 0 20px 16px;
}
.sp-section-block {
  margin-bottom: 14px;
}
.sp-field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 6px;
}
.sp-label-tag {
  font-size: 0.7rem;
  color: #64748B;
  font-weight: 500;
}
.sp-label-hint {
  font-size: 0.72rem;
  color: #16A34A;
  font-weight: 700;
}
.sp-input-container {
  position: relative;
  display: flex;
  align-items: center;
}
.sp-input-icon {
  position: absolute;
  left: 14px;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.sp-text-input {
  width: 100%;
  height: 46px;
  border: 1.5px solid #CBD5E1;
  border-radius: 10px;
  padding: 0 14px 0 42px;
  font-size: 0.92rem;
  font-family: inherit;
  color: #0F172A;
  background: #ffffff;
  transition: border-color .15s, box-shadow .15s;
}
.sp-text-input:focus {
  outline: none;
  border-color: #7D2AE8;
  box-shadow: 0 0 0 3px rgba(125, 42, 232, 0.12);
}
.sp-field-note {
  display: block;
  font-size: 0.75rem;
  color: #64748B;
  margin-top: 5px;
  line-height: 1.35;
}

/* Payment Selector (Shopify Segmented Accordion) */
.sp-payment-accordion {
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}
.sp-pay-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid #F1F5F9;
  margin: 0;
}
.sp-pay-item:last-child {
  border-bottom: none;
}
.sp-pay-item:hover {
  background: #F8FAFC;
}
.sp-pay-item.selected {
  background: #FAF5FF;
}
.sp-pay-choice {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-pay-choice input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sp-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all .15s;
  background: #ffffff;
}
.sp-pay-item.selected .sp-radio-dot {
  border-color: #7D2AE8;
  background: #7D2AE8;
  box-shadow: inset 0 0 0 3.5px #ffffff;
}
.sp-pay-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E293B;
}
.sp-pay-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sp-card-badge {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.sp-pay-bar-img {
  height: 28px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}
@media (max-width: 480px) {
  .sp-pay-bar-img {
    height: 24px;
    max-width: 175px;
  }
}

/* PayPal Container Inside Modal */
.sp-paypal-container {
  margin-top: 10px;
  padding: 14px;
  background: #F8FAFC;
  border: 1.5px dashed #CBD5E1;
  border-radius: 12px;
}
.sp-paypal-container[hidden] {
  display: none;
}

/* Actions Box */
.sp-actions-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.sp-btn-submit {
  width: 100%;
  min-height: 50px;
  background: #0F172A;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);
}
.sp-btn-submit:hover {
  background: #7D2AE8;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(125, 42, 232, 0.35);
}
.sp-btn-icon {
  display: flex;
  align-items: center;
}
.sp-btn-arrow {
  transition: transform .2s ease;
}
.sp-btn-submit:hover .sp-btn-arrow {
  transform: translateX(3px);
}
.sp-btn-cancel {
  background: none;
  border: none;
  color: #64748B;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
  text-align: center;
}
.sp-btn-cancel:hover {
  color: #0F172A;
}

/* Shopify Trust Badges Strip */
.sp-trust-strip {
  padding: 14px 20px 16px;
  background: #F8FAFC;
  border-top: 1px solid #EEF2F6;
  border-radius: 0 0 18px 18px;
}
.sp-trust-features {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sp-trust-col {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
}
.sp-disclaimer {
  font-size: 0.68rem;
  color: #94A3B8;
  text-align: center;
  margin: 0;
  line-height: 1.35;
}

/* Responsive Modal (Bottom Drawer on small mobile) */
@media (max-width: 640px) {
  .modal-backdrop {
    padding: 0;
    display: flex;
    align-items: flex-end;
  }
  .sp-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    animation: spDrawerSlide .28s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes spDrawerSlide {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .sp-modal-header {
    padding: 14px 16px 12px;
  }
  .sp-order-card {
    margin: 10px 14px 10px;
    padding: 10px 12px;
  }
  .sp-item-thumb {
    width: 44px;
    height: 44px;
  }
  .sp-item-details .sp-plan-name {
    font-size: 0.88rem;
  }
  .sp-item-meta { display: none; }
  .sp-bonus-alert {
    padding: 6px 10px;
    font-size: 0.74rem;
    margin-top: 8px;
  }
  .sp-breakdown {
    margin-top: 8px;
    padding-top: 8px;
    gap: 4px;
    font-size: 0.78rem;
  }
  .sp-form {
    padding: 0 14px 14px;
  }
  .sp-section-block {
    margin-bottom: 10px;
  }
  .sp-text-input {
    height: 42px;
    font-size: 0.88rem;
  }
  .sp-pay-item {
    padding: 10px 12px;
  }
  .sp-btn-submit {
    min-height: 46px;
    font-size: 0.94rem;
  }
  .sp-trust-strip {
    padding: 10px 14px 14px;
  }
  .sp-trust-features {
    flex-direction: column;
    gap: 5px;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { text-align: center; max-width: 640px; margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta-group, .hero-payments { justify-content: center; }
  .pay-bar-img { margin: 0 auto; }
  .hero-visual-col { max-width: 600px; margin: 0 auto; width: 100%; }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-wide { grid-column: span 2; }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .bonus-panel { grid-template-columns: 1fr; padding: 40px 32px; }
}
@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .section-tight { padding-bottom: 60px; }
  .nav-desktop, .header-actions .btn-header, .header-actions .promo-pill { display: none; }
  .header-right .btn-header { display: none; }
  /* Navbar mobile = version PC, compacte sans chevauchement */
  .header-left { gap: 0; min-width: 40px; }
  .header-right { gap: 4px; }
  .header-inner { height: 58px; gap: 4px; }
  .brand-logo { height: 46px; max-width: 170px; }
  .menu-toggle { width: 40px; padding: 10px 8px; }
  .icon-btn { padding: 8px; }
  .icon-btn.round { width: 38px; height: 38px; min-width: 38px; padding: 0; }
  .flag-circle { width: 22px; height: 22px; }
  .brand-word { font-size: 1.02rem; }
  .brand-mark { width: 28px; height: 28px; font-size: .95rem; }
  .menu-toggle { display: flex; }
  .hero { padding: 40px 0 56px; }
  .hero-title { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .hero-cta-group .btn { flex: 1 1 100%; }
  .fc-top { left: 0; }
  .fc-bottom { right: 0; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-wide { grid-column: span 1; flex-direction: column; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
  .trust-strip { grid-template-columns: 1fr; }
  .bonus-visual { grid-template-columns: repeat(3, 1fr); }
  .bonus-visual .tpl { height: 110px; }
  .final-panel { padding: 44px 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; }
  .footer-top { flex-direction: column; text-align: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .sticky-mobile-bar { display: flex; }
  body { padding-bottom: 92px; }
  .modal-actions { flex-direction: column; }
}
@media (max-width: 430px) {
  .container { padding: 0 16px; }
  .announce-bar { font-size: .72rem; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .announce-track { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .announce-msg.is-active, .txt-short { white-space: nowrap; }
  .txt-full { display: none; }
  .txt-short { display: inline; }
  .price-card { padding: 30px 22px; }
  .plan-price { font-size: 2.2rem; }
  .bonus-panel { padding: 32px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Smart TV & très grands écrans (télécommande = navigation au focus) ===== */
@media (min-width: 1700px) {
  html { font-size: 18px; }
  :root { --max: 1320px; }
  .section { padding: 110px 0; }
  .hero { padding: 90px 0 100px; }
  .hero-title { font-size: 3.6rem; }
  /* Focus extra-visible pour navigation à la télécommande */
  .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline-width: 4px; }
}
@media (min-width: 2200px) {
  html { font-size: 20px; }
  :root { --max: 1400px; }
}

/* ===== PayPal Button Container ===== */
#paypal-button-container {
  margin-top: 12px;
  padding: 16px;
  background: #fafafa;
  border: 1.5px solid #e9e9e9;
  border-radius: var(--radius-sm);
  min-height: 60px;
  transition: opacity .25s;
}
#paypal-button-container[hidden] {
  display: none;
}
.pp-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 8px 0;
}
.pp-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid #ddd;
  border-top-color: #003087;
  border-radius: 50%;
  animation: ppSpin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes ppSpin {
  to { transform: rotate(360deg); }
}
/* Quand PayPal est sélectionné : cache le bouton principal pour éviter la confusion */
.pay-option-paypal-active #modalConfirm {
  display: none;
}

/* ===== Réparation modale connexion/compte ===== */
.modal{padding:34px 30px}
.modal.has-hero .modal-close{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff;width:40px;height:40px}
.modal.has-hero .modal-close:hover{background:rgba(255,255,255,.32)}
.modal h2{font-size:1.4rem;margin-bottom:2px}
.modal-sub{color:var(--muted);font-size:.9rem}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:700;font-size:.9rem;margin-bottom:8px}
.form-input{width:100%;min-height:50px;border:1.5px solid var(--border);border-radius:12px;padding:12px 16px;font-size:.95rem;font-family:inherit}
.form-input:focus{border-color:var(--purple);outline:none;box-shadow:0 0 0 3px var(--purple-tint);background:#fff}
.form-tip{color:var(--muted);font-size:.78rem;display:block;margin-top:6px}
.modal-security-footer{font-size:.76rem;color:var(--muted);text-align:center;margin:16px 0 0}
.modal-actions{display:flex;gap:10px;margin-top:6px}
.modal-actions .btn{flex:1}

/* ===== Auth split-screen premium (page Mon compte) ===== */
.auth-split{display:grid;grid-template-columns:1.02fr 1fr;max-width:1060px;margin:8px auto 0;background:#fff;border:1px solid var(--border);border-radius:26px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(16,20,56,.45),0 2px 6px rgba(16,20,56,.05)}
.auth-aside{position:relative;display:flex;flex-direction:column;gap:26px;padding:46px 44px;color:#fff;background:radial-gradient(120% 90% at 0% 0%,#5b2ee5 0%,#7D2AE8 42%,#101438 100%);isolation:isolate}
.auth-aside::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 55% at 100% 0%,rgba(0,196,204,.35),transparent 60%);z-index:-1}
.auth-aside-brand{display:inline-flex;align-self:flex-start;background:#fff;padding:9px 16px;border-radius:14px;box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
.auth-aside-logo{height:30px;width:auto;display:block}
.auth-aside-top h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;margin-bottom:10px}
.auth-aside-top p{color:rgba(255,255,255,.82);font-size:.95rem}
.auth-benefits{display:flex;flex-direction:column;gap:18px;margin-top:4px}
.auth-benefits li{display:flex;gap:14px;align-items:flex-start}
.auth-benefits .ab-ic{flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;color:#fff}
.auth-benefits strong{display:block;font-size:.95rem;font-weight:700}
.auth-benefits small{color:rgba(255,255,255,.75);font-size:.82rem}
.auth-aside-foot{margin-top:auto;padding-top:14px}
.auth-trust{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.85);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 15px}
.auth-panel{padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
.auth-panel h1{font-size:clamp(1.5rem,2.2vw,1.9rem);margin-bottom:2px}
.auth-panel .login-tabs{margin:0 0 22px}
.auth-panel .modal-security-footer{margin-top:18px}
@media(max-width:860px){.auth-split{grid-template-columns:1fr;border-radius:22px}.auth-aside{padding:34px 26px;gap:20px}.auth-aside-top h2{font-size:1.4rem}.auth-panel{padding:32px 24px}}

/* ===== Pack bonus (landing + espace client) ===== */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bonus-head{max-width:760px;margin:0 auto 34px;text-align:center}
.bonus-head h2{font-family:var(--font-display);font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.15;margin:8px 0 12px}
.bonus-head h2 em{font-style:normal}
.bonus-head .section-sub{max-width:640px;margin:0 auto}
.bonus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bonus-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
.bonus-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#e0ccff}
.bonus-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#7D2AE8,#9B51E0);box-shadow:0 10px 22px -8px rgba(125,42,232,.6);margin-bottom:16px}
.bonus-ic.cyan{background:linear-gradient(135deg,#00a8ae,#00C4CC);box-shadow:0 10px 22px -8px rgba(0,168,174,.6)}
.bonus-ic.pink{background:linear-gradient(135deg,#e8378f,#ff6bb5);box-shadow:0 10px 22px -8px rgba(232,55,143,.5)}
.bonus-tag{position:absolute;top:22px;right:22px;background:var(--cyan-tint);color:var(--cyan-dark);border-radius:var(--radius-pill);font-size:.72rem;font-weight:800;padding:5px 11px}
.bonus-card h3{font-family:var(--font-display);font-size:1.1rem;margin-bottom:8px;color:var(--navy)}
.bonus-card p{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.bonus-count{display:inline-block;font-size:.78rem;font-weight:800;color:var(--purple);background:var(--purple-tint);border-radius:var(--radius-pill);padding:5px 12px}
.bonus-card-btn{margin-top:14px;display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none}
.bonus-valuebar{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-top:26px;background:linear-gradient(120deg,#101438 0%,#2a1a6b 55%,#5b2ee5 120%);color:#fff;border-radius:var(--radius-lg);padding:24px 30px}
.bonus-valuebar-txt strong{display:block;font-family:var(--font-display);font-size:1.15rem}
.bonus-valuebar-txt span{color:rgba(255,255,255,.72);font-size:.86rem}
.bonus-now{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:#fff}
.bonus-now small{display:block;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.7)}
.check.gift{background:var(--purple-tint);color:var(--purple)}
.plan-checklist .bonus-li{color:var(--purple);font-weight:700}
.bonus-zone{margin-top:22px}
.bonus-zone-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bonus-state{font-size:.76rem;font-weight:800;border-radius:var(--radius-pill);padding:6px 13px;background:var(--soft);color:var(--muted);border:1px solid var(--border)}
.bonus-zone.unlocked .bonus-state{background:#E9FBF0;color:#12a34a;border-color:#bdf0d0}
.bonus-zone-sub{color:var(--muted);font-size:.9rem;margin:6px 0 20px}
.bonus-zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bonus-dl{background:var(--soft);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;display:flex;flex-direction:column}
.bonus-dl.locked{opacity:.72}
.bonus-dl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bonus-dl-emoji{font-size:1.7rem;line-height:1}
.bonus-dl-val{font-size:.72rem;font-weight:800;color:var(--cyan-dark);background:var(--cyan-tint);border-radius:var(--radius-pill);padding:4px 10px}
.bonus-dl h3{font-size:1rem;color:var(--navy);margin-bottom:6px}
.bonus-dl p{font-size:.84rem;color:var(--muted);margin-bottom:14px}
.bonus-dl-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.bonus-dl-meta span{font-size:.72rem;font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px 10px}
.bonus-dl-btn{margin-top:auto}
.bonus-dl-lock{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--muted);background:#fff;border:1px dashed var(--border);border-radius:var(--radius);padding:12px}
@media(max-width:900px){.bonus-grid,.bonus-zone-grid{grid-template-columns:1fr}}
/* Image dans la pastille bonus */
.bonus-ic.pic{overflow:hidden;background:#fff;padding:0}
.bonus-ic-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* Badge revente (carte bonus) */
.bonus-resale{display:inline-block;margin-left:8px;font-size:.74rem;font-weight:800;color:#0f9d58;background:#E9FBF0;border:1px solid #bdf0d0;border-radius:var(--radius-pill);padding:5px 11px}
/* Pastilles bonus plus grandes (même hauteur de carte) */
.bonus-card{padding:20px 24px 22px}
.bonus-ic{width:78px;height:78px;margin-bottom:10px;border-radius:18px}
.bonus-tag{top:18px;right:18px}
/* Zoom léger du visuel pour un rendu plus grand */
.bonus-ic-img{transform:scale(1.08);transform-origin:center}
/* ===== Accès compte réservé aux clients (VIP) ===== */
.auth-vip{display:flex;gap:12px;align-items:flex-start;margin-top:14px;background:#F6F3FF;border:1px solid #E6DDFB;border-radius:14px;padding:14px 16px}
.auth-vip-ic{font-size:1.1rem;line-height:1.4}
.auth-vip strong{display:block;color:var(--purple);font-size:.9rem;margin-bottom:3px}
.auth-vip p{color:var(--muted);font-size:.82rem;margin:0 0 8px}
.auth-vip-link{color:var(--purple);font-weight:700;font-size:.84rem;text-decoration:none}
.auth-vip-link:hover{text-decoration:underline}
.auth-vip-ready{display:flex;align-items:center;gap:8px;margin-top:14px;background:#E9FBF0;border:1px solid #bdf0d0;color:#0f9d58;font-weight:700;font-size:.85rem;border-radius:12px;padding:11px 15px}
/* ===== Page Contact ===== */
.contact-wrap{max-width:1080px;padding-top:56px;padding-bottom:80px}
.contact-hero{text-align:center;max-width:660px;margin:0 auto 40px}
.contact-hero h1{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:12px;line-height:1.1}
.contact-hero h1 .grad{background:linear-gradient(120deg,var(--purple),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-hero p{color:var(--muted);font-size:1.04rem;margin:0 auto;max-width:540px}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:32px 30px}
.contact-card h2{font-size:1.25rem;margin:0 0 6px}
.contact-card .contact-lead{color:var(--muted);font-size:.9rem;margin:0 0 22px}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:7px;color:var(--navy)}
.contact-field{margin-bottom:16px}
.contact-card textarea.form-input{min-height:130px;resize:vertical;line-height:1.5}
.contact-card select.form-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.contact-req{color:var(--purple)}
.contact-status{font-size:.86rem;font-weight:600;border-radius:12px;padding:0;margin:0;min-height:0;transition:all .2s}
.contact-status.show{padding:11px 14px;margin-bottom:16px}
.contact-status.ok{background:#E9FBF0;border:1px solid #bdf0d0;color:#0f9d58}
.contact-status.err{background:#FDECEC;border:1px solid #f6c9c9;color:#d33}
.contact-note{font-size:.76rem;color:var(--muted);margin:14px 0 0;text-align:center}
.contact-side{display:flex;flex-direction:column;gap:18px}
.contact-info{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
.contact-info:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#e0ccff}
.contact-ic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;background:linear-gradient(135deg,var(--purple-tint),var(--cyan-tint))}
.contact-info h3{font-size:.95rem;margin:0 0 3px}
.contact-info p{margin:0;color:var(--muted);font-size:.84rem}
.contact-info a{font-weight:700;font-size:.86rem;text-decoration:none;word-break:break-all}
.contact-copy{margin-top:8px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;color:var(--navy);border-radius:var(--radius-pill);padding:5px 12px;font-size:.74rem;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s}
.contact-copy:hover{border-color:var(--purple);color:var(--purple)}
.contact-quick{background:linear-gradient(160deg,#1b1c43,#3a2a86 70%,#00a8ae 140%);border-radius:var(--radius-lg);padding:26px 24px;color:#fff;box-shadow:var(--shadow-lg)}
.contact-quick h3{margin:0 0 14px;font-size:1.05rem}
.contact-quick a{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff;text-decoration:none;font-size:.88rem;font-weight:600;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.contact-quick a:last-of-type{border-bottom:0}
.contact-quick a:hover{color:var(--cyan)}
.contact-quick a span.arw{opacity:.7}
@media(max-width:860px){.contact-layout{grid-template-columns:1fr}.contact-row{grid-template-columns:1fr}.contact-card{padding:26px 22px}}
/* ===== Messagerie client ⇄ vendeur ===== */
.messages-zone-sub{color:var(--muted);font-size:.88rem;margin:0 0 16px}
.messages-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0;padding:0}
.messages-empty{color:var(--muted);font-size:.9rem;background:var(--soft);border:1px dashed var(--border);border-radius:12px;padding:16px 18px}
.msg-item{border:1px solid var(--border);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:9px;background:#fff;box-shadow:var(--shadow-sm)}
.msg-item.replied{border-color:#c9edd7;background:linear-gradient(180deg,#F7FEF9,#fff)}
.msg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.msg-top strong{font-size:.98rem;color:var(--navy)}
.msg-meta{color:var(--muted);font-size:.76rem}
.msg-body{color:#2b3352;font-size:.9rem;white-space:pre-wrap;line-height:1.5;background:var(--soft);border-radius:10px;padding:11px 14px}
.msg-reply{border-left:3px solid var(--purple);background:var(--purple-tint);border-radius:0 12px 12px 0;padding:12px 16px}
.msg-reply-ic{display:block;font-weight:800;font-size:.78rem;letter-spacing:.02em;color:var(--purple);margin-bottom:6px}
.msg-reply p{margin:0;color:#2b3352;font-size:.9rem;white-space:pre-wrap;line-height:1.5}
.seller-section-title{font-size:1.05rem;margin:24px 0 4px;color:var(--purple)}
.seller-reply-row{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.seller-reply-input{min-height:76px;resize:vertical;line-height:1.5}
.seller-reply-row .seller-btn{align-self:flex-start}
/* ===== Refonte page Contact (design + sans icônes décoratives) ===== */
.contact-hero{margin-bottom:48px}
.contact-hero h1{letter-spacing:-.02em;line-height:1.08}
.contact-hero p{font-size:1.06rem;line-height:1.6}
.contact-card{padding:0;overflow:hidden;border-radius:24px;box-shadow:var(--shadow-lg)}
.contact-card-head{padding:30px 34px 22px;background:linear-gradient(135deg,#F8F5FF,#EEF9FF);border-bottom:1px solid var(--border)}
.contact-card-head h2{margin:0 0 6px;font-size:1.35rem}
.contact-card-head .contact-lead{margin:0}
.contact-card form{padding:26px 34px 30px}
.contact-status{min-height:0}
.contact-status.show{padding:13px 18px;margin:20px 34px 0}
.contact-mail{position:relative;background:linear-gradient(135deg,#F6F1FF,#E9FBFF);border:1px solid #E6DDFB;border-radius:20px;padding:24px;box-shadow:var(--shadow);display:flex;gap:16px;align-items:flex-start}
.contact-ico{flex:0 0 auto;width:52px;height:52px;border-radius:15px;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center}
.contact-mail-body h3{margin:0 0 4px;font-size:1.02rem}
.contact-mail-body p{margin:0 0 8px;color:var(--muted);font-size:.85rem}
.contact-mail-body a{display:block;font-weight:800;font-size:1.04rem;color:var(--navy);text-decoration:none;word-break:break-all;margin-bottom:12px}
.contact-mail-body a:hover{color:var(--purple)}
.contact-copy{border:1px solid #d9c9ff;background:#fff;color:var(--purple);border-radius:var(--radius-pill);padding:8px 16px;font-size:.78rem;font-weight:800;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,box-shadow .15s}
.contact-copy:hover{background:var(--purple);color:#fff;box-shadow:var(--shadow-sm)}
.contact-points{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-sm);padding:4px 22px}
.contact-point{padding:18px 0;border-bottom:1px dashed var(--border)}
.contact-point:last-child{border-bottom:0}
.contact-point h3{margin:0 0 4px;font-size:.98rem}
.contact-point p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.55}
.contact-quick{border-radius:20px}
@media(max-width:860px){.contact-card-head{padding:24px 22px 18px}.contact-card form{padding:22px}.contact-status.show{margin:18px 22px 0}.contact-mail{padding:20px}}
.contact-ico svg{color:var(--purple)}
/* ===== Pièces jointes (formulaire contact) ===== */
.contact-opt{color:var(--muted);font-weight:600;font-size:.8rem}
.file-drop{display:flex;align-items:center;gap:12px;border:1.5px dashed #cdbdf0;background:var(--soft);border-radius:14px;padding:16px 18px;cursor:pointer;transition:border-color .15s,background .15s}
.file-drop:hover,.file-drop.dragging{border-color:var(--purple);background:var(--purple-tint)}
.file-drop-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;color:var(--purple)}
.file-drop-txt{font-size:.86rem;color:var(--muted);line-height:1.4}
.file-drop-txt strong{display:block;color:var(--navy);font-size:.9rem}
.file-drop-txt small{display:block;font-size:.76rem;color:var(--muted);margin-top:2px}
.file-input{display:none}
.file-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.file-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:9px 12px;box-shadow:var(--shadow-sm)}
.file-chip-name{flex:1;font-size:.85rem;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip-size{font-size:.76rem;color:var(--muted)}
.file-chip-rm{border:0;background:var(--soft);color:var(--muted);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.75rem;line-height:1;flex:0 0 auto;transition:background .15s,color .15s}
.file-chip-rm:hover{background:#FDECEC;color:#d33}
.msg-attach{font-size:.8rem;color:var(--purple);background:var(--purple-tint);border-radius:8px;padding:8px 12px;font-weight:600;word-break:break-word}
/* ===== Écran de félicitation (après paiement) ===== */
.pay-success[hidden]{display:none}
.pay-success{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(16,20,56,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto}
.ps-card{position:relative;width:100%;max-width:480px;background:#fff;border-radius:24px;padding:38px 32px 28px;text-align:center;box-shadow:var(--shadow-lg);animation:psPop .35s ease}
@keyframes psPop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.ps-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);color:var(--muted);font-size:1rem;cursor:pointer}
.ps-close:hover{background:var(--border)}
.ps-check{margin:0 auto 16px;width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E9FBF0,#DFF6FF)}
.ps-check-circle{stroke:#16a34a;stroke-width:2.6;stroke-dasharray:145;stroke-dashoffset:145;animation:psCircle .5s ease forwards}
.ps-check-mark{stroke:#16a34a;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:psMark .4s .45s ease forwards}
@keyframes psCircle{to{stroke-dashoffset:0}}
@keyframes psMark{to{stroke-dashoffset:0}}
.ps-card h2{margin:0 0 6px;font-size:1.55rem}
.ps-sub{margin:0 0 20px;color:var(--muted);font-size:.94rem}
.ps-info{background:var(--soft);border:1px solid var(--border);border-radius:14px;padding:6px 16px;text-align:left;margin-bottom:20px}
.ps-info-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:.86rem;border-bottom:1px dashed var(--border)}
.ps-info-row:last-child{border-bottom:0}
.ps-info-row span{color:var(--muted)}
.ps-info-row strong{color:var(--navy);text-align:right;word-break:break-all}
.ps-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:18px}
.ps-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.ps-step span{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;background:var(--soft);color:var(--muted);border:1.5px solid var(--border)}
.ps-step.done span{background:#E9FBF0;color:#16a34a;border-color:#bdf0d0}
.ps-step.current span{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 0 0 4px var(--purple-tint)}
.ps-step small{font-size:.72rem;color:var(--muted);font-weight:600;text-align:center}
.ps-note{font-size:.8rem;color:var(--muted);margin:0 0 18px;line-height:1.5}
.ps-home{display:block;width:100%;margin-top:12px;background:none;border:0;color:var(--muted);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;padding:8px}
.ps-home:hover{color:var(--navy);text-decoration:underline}
@media(max-width:480px){.ps-card{padding:30px 22px 22px}.ps-info-row{font-size:.8rem}}

/* ===== Bannière félicitation (compte) ===== */
.pay-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#E9FBF0,#E5FBFC);border:1px solid #bdf0d0;border-radius:18px;padding:16px 20px;margin-bottom:22px;box-shadow:var(--shadow-sm);animation:psPop .35s ease}
.pb-check{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800}
.pb-txt strong{display:block;font-size:1rem;color:#0f9d58}
.pb-txt p{margin:2px 0 0;color:var(--muted);font-size:.86rem}
/* ===== Carte « Votre offre » (dashboard) ===== */
.plan-card{background:linear-gradient(135deg,#F8F5FF,#EEF9FF);border:1px solid #e6ddfb}
.plan-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.plan-card-label{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.plan-card-main{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.plan-card-main strong{font-size:1.25rem;color:var(--navy)}
.plan-card-main span{font-weight:700;color:var(--purple);font-size:.95rem}
.plan-card-meta{margin:8px 0 0;color:var(--muted);font-size:.82rem;word-break:break-word}
/* ===== Images des bonus (espace compte) ===== */
.bonus-dl-img{width:56px;height:56px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid var(--border);padding:7px;box-shadow:var(--shadow-sm)}
/* ===== Accès Canva Pro : rappel du compte ===== */
.canva-hint strong{color:var(--navy)}
.canva-switch{display:inline-block;text-decoration:none;margin-top:4px}
/* ===== Accès Canva Pro : identifiants ===== */
.canva-hint{line-height:1.5}
.canva-switch{display:inline;text-decoration:underline;color:var(--purple);font-weight:700;margin:0}
.canva-switch:hover{color:var(--cyan)}
.canva-creds{border:1px solid var(--border);background:linear-gradient(180deg,#fff,#f7f5ff);border-radius:14px;padding:14px 14px 10px;margin:4px 0 10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px}
.canva-creds-title{font-size:.92rem;color:var(--navy)}
.cred-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cred-label{font-size:.78rem;color:var(--muted);min-width:88px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.cred-val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 10px;flex:1;min-width:120px;word-break:break-all}
.cred-copy{border:1px solid var(--border);background:#fff;border-radius:9px;padding:6px 12px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;color:var(--purple)}
.cred-copy:hover{border-color:var(--purple)}
.cred-copy-main{background:var(--purple);border-color:var(--purple);color:#fff}
.cred-copy-main:hover{filter:brightness(.95)}
.seller-creds{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.seller-input{flex:1;min-width:150px;border:1px solid var(--border);border-radius:9px;padding:8px 12px;font-size:.84rem;font-family:inherit;color:var(--navy);background:#fff}
.seller-input:focus{outline:none;border-color:var(--purple)}
/* ===== Accès Canva Pro : avertissement + étapes ===== */
.cred-warn{background:#fff7e6;border:1px solid #ffe0a3;color:#8a5a00;font-size:.8rem;line-height:1.5;border-radius:10px;padding:9px 11px}
.access-steps{margin:6px 0 12px;padding-left:20px;font-size:.85rem;color:var(--muted);line-height:1.7}
.access-steps li{margin:2px 0}
/* ===== Rappel Gmail d'activation ===== */
.order-target{margin:8px 0 4px;background:#f2edff;border:1px solid #dccdfb;color:var(--navy);font-size:.86rem;font-weight:600;border-radius:10px;padding:9px 12px;word-break:break-all;line-height:1.5}
.order-target strong{color:var(--purple)}
/* ===== Ajustement du rythme vertical : Hero -> Avantages ===== */
/* L'espace blanc entre le Hero et la section suivante etait trop grand
   (80px + 88px = 168px). On resserre le bas du Hero et on rapproche
   l'introduction de la section avantages. */
.hero { padding-bottom: 56px; }
#avantages { padding-top: 62px; }
#avantages .section-heading { margin-bottom: 36px; }

/* Sur mobile l'ecart est deja plus faible : on le resserre aussi */
@media (max-width: 860px) {
  .hero { padding-bottom: 44px; }
  #avantages { padding-top: 48px; }
}
@media (max-width: 480px) {
  .hero { padding-bottom: 36px; }
  #avantages { padding-top: 40px; }
}
/* ==========================================================================
   MOBILE ONLY — couche smartphone (360 / 390 / 430 px)
   Toutes les regles sont encapsulees dans des media queries.
   Aucune regle de ce bloc ne s'applique au-dela de 860px : le desktop
   (ce qui depasse 860px) n'est donc pas affecte.
   Ordre : du plus petit ecran au plus grand (approche mobile-last inversee).
   ========================================================================== */

/* ---------- Socle : securite anti-debordement + tap targets ---------- */
@media (max-width: 860px) {
  /* Neutralise tout debordement horizontal eventuel */
  .container { padding-left: 20px; padding-right: 20px; }

  /* Cible tactile confortable sur tous les controles cliquables */
  .btn,
  .faq-q button,
  .btn-header,
  .icon-btn,
  .lang-btn,
  .menu-toggle,
  .accordion-toggle-icon {
    min-height: 48px;
  }

  /* Pas de texte colle au bord de l'ecran */
  .hero-title,
  .section-heading h2,
  .plan-name,
  .bonus-card h3 {
    overflow-wrap: break-word;
  }
}

/* ---------- 430 px : le plus petit ecran vise ---------- */
@media (max-width: 430px) {
  .container { padding-left: 16px; padding-right: 16px; }

  /* --- Announcement bar : pas de debordement du texte long --- */
  .announce-bar { font-size: .78rem; padding: 9px 0; }
  .announce-track { width: 100%; }
  .announce-msg { flex-wrap: wrap; row-gap: 2px; }

  /* --- Header : marque a gauche, actions a droite --- */
  .header-inner { min-height: 60px; gap: 10px; }
  .brand-logo { height: 26px; max-width: 120px; }
  .header-right { gap: 6px; }
  .icon-btn { width: 40px; height: 40px; min-height: 40px; }

  /* --- Hero : ordre vertical titre > description > CTA > image --- */
  .hero { padding-top: 40px; padding-bottom: 40px; }
  .hero-grid { gap: 28px; }

  .hero-badge { font-size: .7rem; margin-bottom: 14px; }
  .hero-title { font-size: 1.95rem; line-height: 1.14; margin-bottom: 14px; }

  .hero-sub { font-size: 1rem; line-height: 1.62; margin-bottom: 24px; }

  /* CTA pleine largeur, empiles et facilement touchables */
  .hero-cta-group { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta-group .btn { width: 100%; }

  /* Barre de paiement : contenu, pas d'element flottant */
  .hero-payments { margin-bottom: 10px; }
  .pay-bar-img { max-width: 100%; height: auto; }

  /* Image : largeur fluide, jamais deformee, jamais debordante */
  .hero-photo { width: 100%; height: auto; aspect-ratio: auto; border-radius: 16px; }

/* Cartes flottantes : utiles en desktop, trop encombrantes en mobile.
     On les masque pour degager la lecture — le contenu reste dans hero-sub. */
  .float-card { display: none !important; }

  /* --- Section avantages --- */
  .section { padding: 48px 0; }
  #avantages { padding-top: 40px; }
  .section-heading { margin-bottom: 26px; }
  .section-heading h2 { font-size: 1.55rem; }
  .section-sub { font-size: .95rem; }

  .bento-grid { grid-template-columns: 1fr; gap: 14px; }
  .bento-card,
  .bento-card:nth-child(even) { padding: 20px; border-radius: var(--radius); }
  .bento-wide { grid-column: 1 / -1; }
  .bento-copy h3 { font-size: 1.08rem; }
  .stock-grid { gap: 6px; }

  /* --- Tarifs : cartes empilees, prix lisibles --- */
  .pricing-grid { grid-template-columns: 1fr; gap: 18px; }
  .price-card { padding: 24px 20px; }
  .plan-price { font-size: 1.9rem; }
  .current-price { font-size: 2.5rem; }
  .plan-checklist { gap: 9px; }
  .plan-checklist li { font-size: .9rem; }
  .price-card .btn { width: 100%; }

  /* --- Bonus --- */
  .bonus-grid { grid-template-columns: 1fr; gap: 14px; }
  .bonus-card { padding: 18px; }
  .bonus-valuebar { padding: 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .bonus-now { text-align: left; }

  /* --- Confiance --- */
  .trust-strip { grid-template-columns: 1fr; gap: 0; }
  .trust-item { padding: 14px 0; border-left: 0; border-top: 1px solid var(--border); }
  .trust-item:first-child { border-top: 0; }

  /* --- FAQ : pleine largeur,Toggle confortable --- */
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .faq-q button { font-size: .95rem; min-height: 52px; padding: 14px 0; }
  .faq-a p { font-size: .9rem; padding-right: 0; }
  .accordion-toggle-icon { width: 30px; height: 30px; min-height: 30px; }

  /* --- CTA final --- */
  .final-panel { padding: 36px 24px; border-radius: 18px; }
  .final-panel h2 { font-size: 1.45rem; }
  .final-cta { flex-direction: column; width: 100%; }
  .final-cta .btn { width: 100%; }

  /* --- Footer : colonnes empilees --- */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-col a { min-height: 32px; display: inline-flex; align-items: center; }

  /* --- Modales de paiement : largeur ecran, marges reduites --- */
  .modal-backdrop { padding: 16px; align-items: flex-end; }
  .modal { max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; }
  .ps-card { padding: 28px 20px 20px; max-width: 100%; }
}

/* ---------- 390 px : iPhone 12/13/14 --- */
@media (max-width: 390px) {
  .container { padding-left: 16px; padding-right: 16px; }

  .hero-title { font-size: 1.8rem; }
  .section-heading h2 { font-size: 1.45rem; }

  .price-card { padding: 22px 18px; }
  .current-price { font-size: 2.3rem; }
  .plan-price { font-size: 1.8rem; }

  .bonus-card { padding: 16px; }

  .announce-bar { font-size: .74rem; }
}

/* ---------- 360 px : Android compact / iPhone SE ---------- */
@media (max-width: 360px) {
  .container { padding-left: 14px; padding-right: 14px; }

  .hero { padding-top: 32px; padding-bottom: 32px; }
  .hero-title { font-size: 1.68rem; line-height: 1.16; }
  .hero-sub { font-size: .95rem; }

  .section-heading h2 { font-size: 1.35rem; }
  .section-sub { font-size: .9rem; }

  /* Les deux CTA restent lisibles et cliquables */
  .hero-cta-group .btn { min-height: 50px; font-size: .95rem; }

  .price-card { padding: 20px 16px; }
  .current-price { font-size: 2.1rem; }
  .plan-price { font-size: 1.7rem; }

  .faq-q button { font-size: .9rem; min-height: 50px; }

  .final-panel h2 { font-size: 1.32rem; }
  .footer-trustbar { font-size: .72rem; }
}

/* ---------- Coherence des breakpoints intermediaires ---------- */
/* Entre 431 et 860 : on applique les memes garde-fous */
@media (min-width: 431px) and (max-width: 860px) {
  .float-card { display: none !important; }
  .hero-photo { width: 100%; height: auto; border-radius: 16px; }
  .hero-cta-group { flex-direction: column; align-items: stretch; }
  .hero-cta-group .btn { width: 100%; }
}
/* ==========================================================================
   HERO MOBILE — disposition horizontale (textes | image)
   Remplace le passage en colonne herite des breakpoints 1024 / 860.
   Toutes les regles sont encapseees dans max-width: 860px : au-dela
   (tablette paysage, PC) le hero conserve sa grille 2 colonnes d'origine.
   ========================================================================== */
@media (max-width: 860px) {

  /* --- Grille horizontale : texte a gauche, image a droite --- */
  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 18px;
    align-items: center;
  }

  /* Le visuel passe au meme niveau que le texte (plus de marge de 28px) */
  .hero-visual-col { align-self: center; }

  /* --- Bloc texte : compact pour laisser de la place a l'image --- */
  .hero-badge {
    font-size: .62rem;
    letter-spacing: .08em;
    margin-bottom: 10px;
  }
  .hero-badge svg { width: 11px; height: 11px; }

  .hero-title {
    font-size: 1.42rem;
    line-height: 1.16;
    margin-bottom: 10px;
  }

  .hero-sub {
    font-size: .84rem;
    line-height: 1.55;
    margin-bottom: 16px;
  }
  .hero-sub del { display: none; } /* le prix barre fait place sur mobile */

  /* --- CTA : deux boutons empiles, largeur du bloc texte --- */
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
  }
  .hero-cta-group .btn {
    width: 100%;
    min-height: 46px;
    padding: .7rem 1rem;
    font-size: .84rem;
    border-radius: 10px;
  }
  .hero-cta-group .btn svg { width: 14px; height: 14px; }

  /* --- Zone de confiance : compacte, lisible --- */
  .hero-payments { margin-bottom: 7px; }
  .pay-bar-img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 640 / 214;
  }
  .hero-trust {
    font-size: .64rem;
    line-height: 1.45;
    margin: 0;
  }

  /* --- Image : largeur fluide, ratio d'origine preserve --- */
  .hero-mockup-wrapper { position: relative; }
  .hero-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 576;   /* ratio reel de hero-maquette.png */
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    display: block;
  }

  /* Les cartes flottantes restent masquees : elles.sortiraient du cadre */
  .float-card { display: none !important; }

  /* Masque aussi les halos, trop larges pour une colonne etroite */
  .ambient-glow { display: none; }
}

/* ---------- 430 px : elargit legerement la colonne image ---------- */
@media (max-width: 430px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 14px; }
  .hero-title { font-size: 1.36rem; }
  .hero-sub { font-size: .82rem; }
  .hero-cta-group .btn { font-size: .82rem; min-height: 44px; }
  .hero-trust { font-size: .62rem; }
  .hero-badge { font-size: .6rem; }
}

/* ---------- 390 px ---------- */
@media (max-width: 390px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; }
  .hero-title { font-size: 1.28rem; }
  .hero-sub { font-size: .78rem; line-height: 1.5; }
  .hero-cta-group { gap: 7px; }
  .hero-cta-group .btn { font-size: .78rem; min-height: 42px; padding: .6rem .8rem; }
  .hero-badge { font-size: .56rem; margin-bottom: 8px; }
  .hero-trust { font-size: .58rem; }
}

/* ---------- 360 px : ajustement minimal, on garde la lisibilite ---------- */
@media (max-width: 360px) {
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 10px; }
  .hero-title { font-size: 1.2rem; line-height: 1.18; }
  .hero-sub { font-size: .74rem; line-height: 1.48; }
  .hero-cta-group .btn { font-size: .74rem; min-height: 40px; padding: .55rem .6rem; }
  .hero-badge { font-size: .54rem; }
  .hero-trust { font-size: .55rem; }
}
/* ==========================================================================
   HERO BACKGROUND — image "Espace créatif pastel"
   Appliquee sur MOBILE ET PC.
   Source : assets/hero-bg-pastel.png (360 x 640, PNG)
   Le calque est place sous le contenu (z-index) et ne bloque aucun clic.
   ========================================================================== */

/* --- Socle commun : l'image couvre le hero, le texte reste au-dessus --- */
.hero {
  background-color: #FAF7FF;              /* repli si l'image met du temps a charger */
  background-image: url('assets/hero-bg-pastel.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* L'image est portee par un calque dedie : aucun risque de masquer
   les boutons, et le fond d'origine reste en dessous pour la lisibilite. */
.hero-bg {
  background-image: url('assets/hero-bg-pastel.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 1;
}

/* Le contenu passe devant le calque */
.hero-grid,
.hero-copy,
.hero-visual-col { position: relative; z-index: 2; }

/* --- Mobile : l'image occupe toute la surface, texte au-dessus --- */
@media (max-width: 860px) {
  .hero {
    background-position: center top;
    background-size: cover;
  }
  .hero-bg {
    background-position: center top;
    background-size: cover;
  }
}

/* --- PC : l'image est elargie et recentree, le degrade d'origine
       reste visible en bas pour la transition vers la section suivante --- */
@media (min-width: 861px) {
  .hero {
    background-color: #FAF7FF;
    background-image:
      linear-gradient(180deg, rgba(250,247,255,.55) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.92) 100%),
      url('assets/hero-bg-pastel.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
  /* Sur PC on neutralise le calque en doublon : l'image est deja
     appliquee sur .hero, le calque ajouterait un 2e niveau. */
  .hero-bg { opacity: 0; }
}

/* --- Tres petits ecrans : on evite que l'image domine trop --- */
@media (max-width: 360px) {
  .hero {
    background-position: 55% top;
  }
}
/* ==========================================================================
   HERO MOBILE — centrage complet du contenu
   Objectif : la colonne image est parfaitement centree dans sa grille,
   sans carte flottante ni halo. Le visuel est le seul point focal.
   Cette section ne concerne QUE le mobile.
   ========================================================================== */
@media (max-width: 860px) {

  /* Retrait definitif des elements decoratifs sur mobile */
  .float-card { display: none !important; }
  .ambient-glow { display: none !important; }

  /* --- Centrage vertical de la colonne image --- */
  .hero-visual-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: 100%;
    min-width: 0;
  }

  .hero-mockup-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  /* --- Image : occupe toute la largeur de sa colonne et reste centree --- */
  .hero-photo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;      /* aucune coupe, aucune distorsion */
    object-position: center;
    border-radius: 12px;
  }

  /* --- Aligne aussi le bloc texte pour une composition reguliere --- */
  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
}

/* ---------- 430 px ---------- */
@media (max-width: 430px) {
  .hero-visual-col { align-items: center; }
  .hero-mockup-wrapper { width: 100%; margin-inline: auto; }
  .hero-photo { width: 100%; margin-inline: auto; }
}

/* ---------- 390 px ---------- */
@media (max-width: 390px) {
  .hero-photo { border-radius: 10px; }
}

/* ---------- 360 px ---------- */
@media (max-width: 360px) {
  .hero-visual-col { gap: 0; }
  .hero-photo { border-radius: 9px; }
}
/* ==========================================================================
   HERO MOBILE — version centree, sans image laterale
   Perimetre : mobile uniquement (max-width 860px).
   Le PC conserve integralement sa grille 2 colonnes et son image.
   Ordre vertical : badge -> titre -> description -> CTA -> paiement -> confiance
   ========================================================================== */
@media (max-width: 860px) {

  /* --- Grille : une seule colonne, colonne image neutralisee --- */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    justify-items: center;
  }

  /* L'image laterale est masquee sur mobile.
     Elle reste dans le HTML (et dans le fichier) pour le desktop. */
  .hero-visual-col {
    display: none !important;
  }

  /* --- Bloc texte : centre horizontalement et verticalement --- */
  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;          /* centre les enfants horizontalement */
    justify-content: center;       /* centre le bloc verticalement */
    text-align: center;
    width: 100%;
    max-width: 34rem;             /* largeur de lecture confortable */
    margin: 0 auto;
    min-width: 0;
  }

  /* Chaque enfant occupe la largeur du bloc mais garde son propre rythme */
  .hero-copy > * { max-width: 100%; }

  /* --- 1. Badge d'offre --- */
  .hero-badge {
    font-size: .64rem;
    letter-spacing: .09em;
    padding: 6px 13px;
    margin: 0 0 16px;
  }
  .hero-badge svg { width: 11px; height: 11px; }

  /* --- 2. Titre --- */
  .hero-title {
    font-size: clamp(1.75rem, 7.4vw, 2.3rem);
    line-height: 1.14;
    letter-spacing: -.025em;
    margin: 0 0 14px;
    max-width: 20ch;
    text-wrap: balance;
  }

  /* --- 3. Description --- */
  .hero-sub {
    font-size: .92rem;
    line-height: 1.6;
    max-width: 34ch;
    margin: 0 auto 22px;
  }
  .hero-sub del { display: none; } /* le prix barre libere une ligne */

  /* --- 4. CTA : empiles, largeur bornee, primaire mis en avant --- */
  .hero-cta-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto 22px;
  }
  .hero-cta-group .btn {
    width: 100%;
    min-height: 50px;
    padding: .8rem 1.1rem;
    font-size: .93rem;
  }
  /* Le bouton primaire garde le plein : deja rempli en couleur */
  .hero-cta-group .btn-hero { min-height: 52px; font-weight: 700; }
  /* Le secondaire est visiblement secondaire : plus calme */
  .hero-cta-group .btn-outline {
    background: transparent;
    color: var(--navy);
    border-width: 1px;
    font-weight: 600;
  }
  .hero-cta-group .btn svg { width: 16px; height: 16px; }

  /* --- 5. Moyens de paiement --- */
  .hero-payments {
    margin: 0 auto 12px;
    display: flex;
    justify-content: center;
  }
  .pay-bar-img {
    max-width: 260px;
    height: auto;
    aspect-ratio: 640 / 214;
    margin: 0 auto;
  }

  /* --- 6. Reassurance --- */
  .hero-trust {
    font-size: .7rem;
    line-height: 1.5;
    max-width: 30ch;
    margin: 0 auto;
    color: var(--muted);
  }

  /* --- Rythme vertical du hero --- */
  .hero {
    padding-top: 44px;
    padding-bottom: 48px;
  }
}

/* ---------- 430 px ---------- */
@media (max-width: 430px) {
  .hero { padding-top: 40px; padding-bottom: 44px; }
  .hero-copy { max-width: 32rem; }
  .hero-title { font-size: clamp(1.65rem, 7.6vw, 2.1rem); max-width: 18ch; }
  .hero-sub { font-size: .89rem; max-width: 32ch; margin-bottom: 20px; }
  .hero-cta-group { max-width: 18.5rem; gap: 9px; margin-bottom: 20px; }
  .hero-badge { font-size: .62rem; margin-bottom: 14px; }
  .pay-bar-img { max-width: 230px; }
  .hero-trust { font-size: .68rem; }
}

/* ---------- 390 px ---------- */
@media (max-width: 390px) {
  .hero { padding-top: 36px; padding-bottom: 40px; }
  .hero-title { font-size: clamp(1.55rem, 7.8vw, 1.95rem); }
  .hero-sub { font-size: .86rem; line-height: 1.58; }
  .hero-cta-group .btn { min-height: 48px; font-size: .9rem; }
  .hero-cta-group .btn-hero { min-height: 50px; }
  .pay-bar-img { max-width: 210px; }
}

/* ---------- 360 px ---------- */
@media (max-width: 360px) {
  .hero { padding-top: 32px; padding-bottom: 36px; }
  .hero-copy { max-width: 30rem; }
  .hero-title { font-size: clamp(1.45rem, 8vw, 1.8rem); margin-bottom: 12px; }
  .hero-sub { font-size: .82rem; line-height: 1.55; margin-bottom: 18px; }
  .hero-cta-group { max-width: 17rem; gap: 8px; margin-bottom: 18px; }
  .hero-cta-group .btn { min-height: 46px; font-size: .86rem; padding: .7rem .9rem; }
  .hero-badge { font-size: .58rem; margin-bottom: 12px; }
  .pay-bar-img { max-width: 190px; margin-bottom: 10px; }
  .hero-trust { font-size: .65rem; }
}
/* ==========================================================================
   SECTION AVANTAGES — mobile uniquement
   Objectif : un rendu editorial en colonne unique, cartes lisibles,
   images au ratio reel (pas de coupe), et un CTA proportionne.
   Le desktop (> 860px) n'est pas concerne.
   ========================================================================== */
@media (max-width: 860px) {

  /* ---------- En-tete du section ---------- */
  #avantages { padding-top: 48px; padding-bottom: 52px; }

  #avantages .section-heading {
    margin: 0 auto 28px;
    max-width: 34rem;
  }

  #avantages .eyebrow {
    font-size: .66rem;
    letter-spacing: .13em;
    padding: 6px 13px;
    margin-bottom: 13px;
  }

  #avantages .section-heading h2 {
    font-size: 1.6rem;
    line-height: 1.16;
    margin: 0 0 10px;
    text-wrap: balance;
  }

  #avantages .section-sub {
    font-size: .92rem;
    line-height: 1.58;
    max-width: 32ch;
    margin: 0 auto;
  }

  /* ---------- Grille : une seule colonne ---------- */
  #avantages .bento-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* ---------- Carte ---------- */
  #avantages .bento-card {
    padding: 20px 18px;
    gap: 14px;
    border-radius: var(--radius);
    overflow: hidden;
  }
  #avantages .bento-card,
  #avantages .bento-card:nth-child(even) {
    border-left: 1px solid var(--border);
    padding-inline: 18px;
  }
  #avantages .bento-card.bento-wide,
  #avantages .bento-card:nth-child(even).bento-wide {
    padding-inline: 18px;
    border-left: 1px solid var(--border);
  }

  /* Supprime le margin-top auto qui creait un vide en bas de carte */
  #avantages .bento-visual { margin-top: 0; }

  /* ---------- Textes de carte ---------- */
  #avantages .bento-copy h3 {
    font-size: 1.04rem;
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: -.018em;
  }
  #avantages .bento-copy p {
    font-size: .875rem;
    line-height: 1.55;
    margin: 0;
    max-width: 46ch;
  }

  /* ---------- Images : ratio reel, aucune coupe ---------- */
  /* Les trois visuels standards font 640x320 (ratio 2:1) */
  #avantages .rounded-img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 10px;
  }
  #avantages .ia-img { height: auto; }

  /* Le visuel "avant / apres" fait 639x311 */
  #avantages .bento-wide-img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 639 / 311;
    object-fit: cover;
    border-radius: 10px;
  }
  #avantages .showcase-visual { justify-content: stretch; }

  /* ---------- Mosaïque 100M+ : six vignettes carrees ---------- */
  #avantages .stock-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  #avantages .stock-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
  }

  /* ---------- CTA du section ---------- */
  #avantages .section-cta {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  #avantages .section-cta .btn {
    width: 100%;
    max-width: 20rem;
    min-height: 52px;
    padding: .85rem 1.1rem;
    font-size: .95rem;
  }
  #avantages .section-cta-note {
    font-size: .76rem;
    line-height: 1.45;
    margin: 0;
    text-align: center;
  }
}

/* ---------- 430 px ---------- */
@media (max-width: 430px) {
  #avantages { padding-top: 44px; padding-bottom: 48px; }
  #avantages .section-heading { margin-bottom: 24px; }
  #avantages .section-heading h2 { font-size: 1.48rem; }
  #avantages .section-sub { font-size: .89rem; }
  #avantages .eyebrow { font-size: .63rem; margin-bottom: 11px; }
  #avantages .bento-grid { gap: 12px; }
  #avantages .bento-card { padding: 17px 15px; gap: 12px; }
  #avantages .bento-copy h3 { font-size: .99rem; }
  #avantages .bento-copy p { font-size: .85rem; }
  #avantages .section-cta .btn { max-width: 18.5rem; min-height: 50px; font-size: .92rem; }
  #avantages .section-cta-note { font-size: .73rem; }
}

/* ---------- 390 px ---------- */
@media (max-width: 390px) {
  #avantages .section-heading h2 { font-size: 1.4rem; }
  #avantages .section-sub { font-size: .86rem; }
  #avantages .bento-card { padding: 16px 14px; }
  #avantages .bento-copy h3 { font-size: .96rem; }
  #avantages .bento-copy p { font-size: .83rem; line-height: 1.52; }
  #avantages .section-cta .btn { max-width: 17.5rem; min-height: 48px; font-size: .89rem; }
}

/* ---------- 360 px ---------- */
@media (max-width: 360px) {
  #avantages { padding-top: 40px; padding-bottom: 44px; }
  #avantages .section-heading h2 { font-size: 1.32rem; }
  #avantages .section-sub { font-size: .83rem; }
  #avantages .eyebrow { font-size: .59rem; }
  #avantages .bento-grid { gap: 11px; }
  #avantages .bento-card { padding: 15px 13px; gap: 11px; }
  #avantages .bento-copy h3 { font-size: .93rem; }
  #avantages .bento-copy p { font-size: .81rem; }
  #avantages .section-cta .btn { max-width: 100%; min-height: 46px; font-size: .86rem; }
  #avantages .section-cta-note { font-size: .71rem; }
}
/* ==========================================================================
   SECTION AVANTAGES — carousel horizontal sur mobile
   Remplace la colonne unique par un rail horizontal avec scroll-snap.
   Une carte presque entiere visible par ecrant + un peu de la suivante :
   le visiteur voit qu'il y en a d'autres et fait defiler.
   PC (> 860px) : non concerne.
   ========================================================================== */
@media (max-width: 860px) {

  /* ---------- Rail horizontal ---------- */
  #avantages .bento-grid {
    display: flex;
    flex-direction: row;
    gap: 12px;

    /* Debordement du rail lui-meme, pas de la page */
    overflow-x: auto;
    overflow-y: hidden;

    /* Accrochage carte par carte */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    /* Marges pour respirer sur les cotes de l'ecran */
    padding: 4px 20px 18px;
    margin-inline: -20px;   /* compense le padding du container */

    /* Masque la barre de scroll tout en gardant le scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #avantages .bento-grid::-webkit-scrollbar { display: none; }

  /* ---------- Cartes : largeur d'un ecran presque entier ---------- */
  #avantages .bento-card,
  #avantages .bento-card:nth-child(even),
  #avantages .bento-card.bento-wide,
  #avantages .bento-card:nth-child(even).bento-wide {
    /* 82% de la largeur visible : la carte suivante s'entrevoit */
    flex: 0 0 82%;
    max-width: 82%;
    min-width: 0;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    padding: 18px 16px;
    gap: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  /* La carte principale garde le meme gabarit, pas de traitement special */
  #avantages .bento-card.bento-showcase { flex-basis: 82%; }

  /* Le defilement ne doit pas declencher l'effet de rebond du parent */
  #avantages .bento-card > * { min-width: 0; }

  /* ---------- Contenu des cartes ---------- */
  #avantages .bento-copy h3 {
    font-size: 1.02rem;
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: -.018em;
  }
  #avantages .bento-copy p {
    font-size: .86rem;
    line-height: 1.55;
    margin: 0;
    max-width: 40ch;
  }
  #avantages .bento-visual { margin-top: 0; }

  /* ---------- Images : ratio reel, aucune coupe ---------- */
  #avantages .rounded-img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 10px;
  }
  #avantages .ia-img { height: auto; }

  #avantages .bento-wide-img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 639 / 311;
    object-fit: cover;
    border-radius: 10px;
  }
  #avantages .showcase-visual { justify-content: stretch; }

  #avantages .stock-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  #avantages .stock-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
  }

  /* ---------- En-tete : indice de defilement discret ---------- */
  #avantages .section-heading { margin-bottom: 22px; }
  #avantages .section-heading h2 { font-size: 1.55rem; }
  #avantages .section-sub { max-width: 32ch; }

  /* ---------- CTA ---------- */
  #avantages .section-cta { margin-top: 24px; }
  #avantages .section-cta .btn { max-width: 19rem; }
}

/* ---------- 430 px ---------- */
@media (max-width: 430px) {
  #avantages .bento-grid {
    gap: 11px;
    padding: 4px 16px 16px;
    margin-inline: -16px;
  }
  #avantages .bento-card,
  #avantages .bento-card:nth-child(even),
  #avantages .bento-card.bento-wide,
  #avantages .bento-card:nth-child(even).bento-wide {
    flex-basis: 86%;
    max-width: 86%;
    padding: 17px 15px;
    gap: 12px;
  }
  #avantages .bento-card.bento-showcase { flex-basis: 86%; }
  #avantages .bento-copy h3 { font-size: .98rem; }
  #avavantages .bento-copy p { font-size: .84rem; }
  #avantages .section-cta .btn { max-width: 18rem; }
}

/* ---------- 390 px ---------- */
@media (max-width: 390px) {
  #avantages .bento-grid {
    gap: 10px;
    padding: 4px 16px 16px;
    margin-inline: -16px;
  }
  #avantages .bento-card,
  #avantages .bento-card:nth-child(even),
  #avantages .bento-card.bento-wide,
  #avantages .bento-card:nth-child(even).bento-wide {
    flex-basis: 88%;
    max-width: 88%;
    padding: 16px 14px;
  }
  #avantages .bento-card.bento-showcase { flex-basis: 88%; }
  #avantages .bento-copy h3 { font-size: .95rem; }
  #avantages .bento-copy p { font-size: .82rem; line-height: 1.52; }
}

/* ---------- 360 px ---------- */
@media (max-width: 360px) {
  #avantages .bento-grid {
    gap: 9px;
    padding: 4px 14px 14px;
    margin-inline: -14px;
  }
  #avantages .bento-card,
  #avantages .bento-card:nth-child(even),
  #avantages .bento-card.bento-wide,
  #avantages .bento-card:nth-child(even).bento-wide {
    flex-basis: 90%;
    max-width: 90%;
    padding: 15px 13px;
    gap: 11px;
  }
  #avantages .bento-card.bento-showcase { flex-basis: 90%; }
  #avantages .bento-copy h3 { font-size: .92rem; }
  #avantages .bento-copy p { font-size: .8rem; }
  #avantages .section-cta .btn { max-width: 100%; }
}
/* ==========================================================================
   AVANTAGES (carousel) — cartes plus etroites
   On reduit la largeur des cartes pour montrer davantage de la carte
   suivante, et on garde la meme marge de respiration sur les cotes.
   PC (> 860px) : non concerne.
   ========================================================================== */
@media (max-width: 860px) {
  #avantages .bento-grid { gap: 14px; }

  #avantages .bento-card,
  #avantages .bento-card:nth-child(even),
  #avantages .bento-card.bento-wide,
  #avantages .bento-card:nth-child(even).bento-showcase {
    flex: 0 0 70%;
    max-width: 70%;
    padding: 16px 14px;
    gap: 11px;
  }
  #avantages .bento-card.bento-showcase { flex-basis: 70%; max-width: 70%; }

  /* Textes un peu plus petits pour respirer dans une carte plus etroite */
  #avantages .bento-copy h3 { font-size: .96rem; margin-bottom: 5px; }
  #avantages .bento-copy p  { font-size: .82rem; line-height: 1.5; max-width: 32ch; }
  #avantages .rounded-img    { border-radius: 9px; }
  #avantages .bento-wide-img  { border-radius: 9px; }
}

@media (max-width: 430px) {
  #avantages .bento-grid { gap: 12px; }

  #avantages .bento-card,
  #avantages .bento-card:nth-child(even),
  #avantages .bento-card.bento-wide,
  #avantages .bento-card:nth-child(even).bento-showcase {
    flex: 0 0 74%;
    max-width: 74%;
    padding: 15px 13px;
    gap: 10px;
  }
  #avantages .bento-card.bento-showcase { flex-basis: 74%; max-width: 74%; }

  #avantages .bento-copy h3 { font-size: .93rem; }
  #avantages .bento-copy p  { font-size: .8rem; max-width: 30ch; }
}

@media (max-width: 390px) {
  #avantages .bento-grid { gap: 11px; }

  #avantages .bento-card,
  #avantages .bento-card:nth-child(even),
  #avantages .bento-card.bento-wide,
  #avantages .bento-card:nth-child(even).bento-showcase {
    flex: 0 0 76%;
    max-width: 76%;
    padding: 14px 12px;
  }
  #avantages .bento-card.bento-showcase { flex-basis: 76%; max-width: 76%; }

  #avantages .bento-copy h3 { font-size: .9rem; }
  #avantages .bento-copy p  { font-size: .78rem; max-width: 28ch; }
}

@media (max-width: 360px) {
  #avantages .bento-grid { gap: 10px; }

  #avantages .bento-card,
  #avantages .bento-card:nth-child(even),
  #avantages .bento-card.bento-wide,
  #avantages .bento-card:nth-child(even).bento-showcase {
    flex: 0 0 78%;
    max-width: 78%;
    padding: 13px 11px;
    gap: 9px;
  }
  #avantages .bento-card.bento-showcase { flex-basis: 78%; max-width: 78%; }

  #avantages .bento-copy h3 { font-size: .87rem; }
  #avantages .bento-copy p  { font-size: .76rem; max-width: 26ch; }
}
/* ==========================================================================
   TARIFS — egalite stricte des deux cartes de selection (mobile)
   Les deux boutons doivent avoir exactement la meme largeur, la meme
   hauteur et le meme alignement, que l'offre soit selectionnee ou non.
   La selection ne se signale QUE par la couleur : bordure violette,
   fond legerement teinte et l'icone de coche. Aucun decalage, aucune
   difference de taille, aucune ombre qui ferait paraitre la carte
   selectionnee plus grande.

   Regles non conditionnees : masquage sur desktop.
   Regles conditionnees : le selecteur redevient visible sur mobile.
   ========================================================================== */
#tarifs .offer-switch,
#tarifs .offer-detail {
  display: none;
}


/* Les deux cartes tarifaires permanentes restent dans le DOM pour le
   desktop ; sur mobile elles sont masquees au profit du selecteur. */
@media (max-width: 860px) {
  /* Masquer la grille desktop sur mobile */
  #tarifs .pricing-grid {
    display: none !important;
  }

  /* Conteneur sélecteur : 2 colonnes strictement égales */
  #tarifs .offer-switch {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 16px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
  }

  /* Cartes de sélection : dimensions rigoureusement identiques */
  #tarifs .offer-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    height: 74px;
    min-height: 74px;
    max-height: 74px;
    box-sizing: border-box;
    padding: 10px 32px 10px 12px;
    background: #FFFFFF;
    border: 1.5px solid var(--border, #E2E8F0);
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(16, 20, 56, 0.04);
  }

  /* État actif : couleur et fond subtil sans variation de taille */
  #tarifs .offer-opt.is-active {
    border-color: var(--purple, #7D2AE8);
    background: #FAF5FF;
    box-shadow: 0 2px 10px rgba(125, 42, 232, 0.12);
  }
  #tarifs .offer-opt:active {
    background: #F3E8FF;
  }

  /* Textes des deux cartes */
  #tarifs .offer-opt-name {
    display: block;
    font-family: var(--font-display, inherit);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--navy, #101438);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 2px;
  }
  #tarifs .offer-opt-price {
    display: block;
    font-family: var(--font-display, inherit);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--navy, #101438);
    white-space: nowrap;
  }
  #tarifs .offer-opt.is-active .offer-opt-price {
    color: var(--purple, #7D2AE8);
  }

  /* Badge Populaire : épinglé en haut à droite sans impacter la taille */
  #tarifs .offer-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 2px 6px;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3;
    color: #FFFFFF;
    background: linear-gradient(135deg, #7D2AE8 0%, #5B1CB5 100%);
    border-radius: 0 13px 0 8px;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(125, 42, 232, 0.25);
    z-index: 2;
  }

  /* Indicateur radio / checkmark à droite */
  #tarifs .offer-check {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #CBD5E1;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    pointer-events: none;
    box-sizing: border-box;
    flex: none;
  }
  #tarifs .offer-check svg {
    width: 12px;
    height: 12px;
    color: #FFFFFF;
    opacity: 0;
    transform: scale(0.6);
    transition: all .2s ease;
  }
  #tarifs .offer-opt.is-active .offer-check {
    border-color: var(--purple, #7D2AE8);
    background: var(--purple, #7D2AE8);
  }
  #tarifs .offer-opt.is-active .offer-check svg {
    opacity: 1;
    transform: scale(1);
  }

  /* Sécurité contre les anciens SVG volants */
  #tarifs .offer-icon {
    display: none !important;
  }

  /* ==========================================================================
     CARTE DÉTAILLÉE (MOBILE)
     Pleine largeur, même hauteur et format harmonisé entre les 2 offres
     ========================================================================== */
  #tarifs .offer-detail {
    display: block !important;
    width: 100%;
  }
  #tarifs .offer-detail[hidden] {
    display: none !important;
  }

  #tarifs .offer-detail-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 570px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1.5px solid var(--border, #E2E8F0);
    border-radius: 18px;
    padding: 22px 18px;
    box-shadow: 0 4px 24px rgba(16, 20, 56, 0.06);
    animation: offerCardFadeIn .22s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes offerCardFadeIn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Masquer le ruban extérieur pour préserver l'égalité de hauteur */
  #tarifs .offer-detail-card .featured-ribbon {
    display: none !important;
  }

  /* En-tête de la carte détaillée */
  #tarifs .offer-detail-card .plan-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
  }
  #tarifs .offer-detail-card .plan-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--purple-tint, #FAF5FF);
    color: var(--purple, #7D2AE8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  #tarifs .offer-detail-card .plan-ico.grad {
    background: linear-gradient(135deg, #7D2AE8 0%, #00C4CC 100%);
    color: #FFFFFF;
  }
  #tarifs .offer-detail-card .plan-ico svg {
    width: 20px;
    height: 20px;
  }
  #tarifs .offer-detail-card .plan-head > div {
    flex: 1;
    min-width: 0;
  }
  #tarifs .offer-detail-card .plan-name {
    font-family: var(--font-display, inherit);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy, #101438);
    line-height: 1.2;
    margin: 0 0 2px;
    white-space: nowrap;
  }
  #tarifs .offer-detail-card .plan-sub {
    font-size: .8rem;
    color: var(--muted, #64748B);
    line-height: 1.35;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #tarifs .offer-detail-card .plan-pill {
    margin-left: auto;
    font-size: .66rem;
    font-weight: 800;
    padding: 3.5px 8px;
    border-radius: 20px;
    background: #E6FFFA;
    color: #0E8F96;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Bloc prix */
  #tarifs .offer-detail-card .plan-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border, #E2E8F0);
  }
  #tarifs .offer-detail-card .current-price {
    font-family: var(--font-display, inherit);
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--navy, #101438);
  }
  #tarifs .offer-detail-card .old-price {
    font-size: .95rem;
    color: var(--muted, #94A3B8);
  }

  /* Bandeau mise en avant (Bonus / Offre Spéciale) */
  #tarifs .offer-detail-card .bonus-line {
    display: flex;
    align-items: center;
    font-size: .8rem;
    line-height: 1.45;
    padding: 9px 12px;
    border-radius: 10px;
    margin: 0 0 16px;
    min-height: 42px;
    box-sizing: border-box;
  }

  /* Liste d'avantages : 8 éléments dans chaque offre */
  #tarifs .offer-detail-card .plan-checklist {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  #tarifs .offer-detail-card .plan-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .86rem;
    line-height: 1.4;
    color: var(--ink, #334155);
  }
  #tarifs .offer-detail-card .plan-checklist .check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #E5FBFC;
    color: #0E8F96;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    flex: none;
    margin-top: 1px;
  }
  #tarifs .offer-detail-card .plan-checklist .check.gift {
    background: var(--purple-tint, #FAF5FF);
    color: var(--purple, #7D2AE8);
    font-size: .75rem;
  }

  /* Bouton d'action */
  #tarifs .offer-detail-card .choose-plan {
    width: 100%;
    min-height: 50px;
    font-size: .98rem;
    font-weight: 700;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: auto;
  }
}

/* ---------- Ajustements 430 px ---------- */
@media (max-width: 430px) {
  #tarifs .offer-opt {
    height: 72px; min-height: 72px; max-height: 72px;
    padding: 9px 38px 9px 12px;
  }
  #tarifs .offer-opt-name { font-size: .85rem; }
  #tarifs .offer-opt-price { font-size: 1.1rem; }
  #tarifs .offer-detail-card {
    min-height: 560px;
    padding: 18px 15px;
  }
  #tarifs .offer-detail-card .current-price { font-size: 2.1rem; }
  #tarifs .offer-detail-card .plan-checklist { gap: 9px; margin-bottom: 18px; }
  #tarifs .offer-detail-card .plan-checklist li { font-size: .83rem; }
}

/* ---------- Ajustements 390 px ---------- */
@media (max-width: 390px) {
  #tarifs .offer-opt {
    height: 68px; min-height: 68px; max-height: 68px;
    padding: 8px 36px 8px 11px;
  }
  #tarifs .offer-opt-name { font-size: .82rem; }
  #tarifs .offer-opt-price { font-size: 1.05rem; }
  #tarifs .offer-badge { font-size: .52rem; padding: 2px 6px; }
  #tarifs .offer-check { width: 20px; height: 20px; right: 10px; }
  #tarifs .offer-detail-card {
    min-height: 550px;
    padding: 16px 14px;
  }
  #tarifs .offer-detail-card .current-price { font-size: 1.95rem; }
  #tarifs .offer-detail-card .plan-name { font-size: 1.1rem; }
  #tarifs .offer-detail-card .plan-checklist { gap: 8px; margin-bottom: 16px; }
  #tarifs .offer-detail-card .plan-checklist li { font-size: .81rem; }
  #tarifs .offer-detail-card .choose-plan { min-height: 48px; font-size: .94rem; }
}

/* ---------- Ajustements 360 px ---------- */
@media (max-width: 360px) {
  #tarifs .offer-switch { gap: 8px; }
  #tarifs .offer-opt {
    height: 66px; min-height: 66px; max-height: 66px;
    padding: 8px 32px 8px 10px;
  }
  #tarifs .offer-opt-name { font-size: .78rem; }
  #tarifs .offer-opt-price { font-size: .98rem; }
  #tarifs .offer-badge { font-size: .48rem; padding: 2px 5px; }
  #tarifs .offer-check { width: 18px; height: 18px; right: 8px; }
  #tarifs .offer-check svg { width: 11px; height: 11px; }
  #tarifs .offer-detail-card {
    min-height: 540px;
    padding: 15px 12px;
  }
  #tarifs .offer-detail-card .current-price { font-size: 1.85rem; }
  #tarifs .offer-detail-card .plan-name { font-size: 1.05rem; }
  #tarifs .offer-detail-card .bonus-line { font-size: .76rem; padding: 8px 10px; }
  #tarifs .offer-detail-card .plan-checklist { gap: 7px; margin-bottom: 15px; }
  #tarifs .offer-detail-card .plan-checklist li { font-size: .78rem; }
  #tarifs .offer-detail-card .choose-plan { min-height: 46px; font-size: .9rem; }
}
/* ==========================================================================
   NAVBAR — taille du logo sur mobile
   Mesure reelle (Chrome) avant correction :
     360 / 390 / 430 px : logo 78 x 26 px dans une barre de 61 px
     1280 px            : logo 192 x 64 px dans une barre de 71 px
   Le logo etait deux fois trop petit sur mobile : 26 px de hauteur
   pour une barre de 61 px, soit 43 %, alors que sur desktop il occupe
   64 px pour 71 px, soit 90 %. Le ratio du fichier (640x240) est
   respecte, seule l'echelle changeait.

   Correction : hauteur proportionnelle a la barre, dans les memes
   proportions que le desktop, avec une largeur max pour ne jamais
   pousser les boutons hors de l'ecran.
   ========================================================================== */
@media (max-width: 860px) {
  #header .brand-logo {
    height: 42px;         /* ~69 % de la barre de 61 px, comme le desktop */
    width: auto;
    max-width: 150px;
  }
}

@media (max-width: 430px) {
  #header .brand-logo { height: 38px; max-width: 135px; }
}

@media (max-width: 390px) {
  #header .brand-logo { height: 35px; max-width: 124px; }
}

@media (max-width: 360px) {
  #header .brand-logo { height: 32px; max-width: 113px; }
}
/* ==========================================================================
   SECTION BONUS — carousel horizontal et cartes compactes (mobile)
   Les trois cartes du pack bonus passent en rail horizontal avec
   scroll-snap, sur le modele deja utilise pour la section avantages.
   Les cartes sont resserrees : icone plus petite, textes plus courts,
   espacements reduits.
   Le debordement reste interne au rail, la page ne bouge pas de
   cote (html et body conservent overflow-x clip).
   Desktop (> 860px) : aucun changement.
   ========================================================================== */
@media (max-width: 860px) {

  /* ---------- Rail horizontal ---------- */
  #bonus .bonus-grid {
    display: flex;
    flex-direction: row;
    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    padding: 4px 20px 16px;
    margin-inline: -20px;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #bonus .bonus-grid::-webkit-scrollbar { display: none; }

  /* ---------- Cartes plus etroites ---------- */
  #bonus .bonus-card {
    flex: 0 0 78%;
    max-width: 78%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;

    padding: 14px 14px 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  #bonus .bonus-card:hover { transform: none; }
  #bonus .bonus-card > * { min-width: 0; }

  /* ---------- En-tete du section ---------- */
  #bonus .bonus-head { margin-bottom: 20px; }
  #bonus .bonus-head h2 {
    font-size: 1.42rem;
    line-height: 1.2;
    margin-bottom: 10px;
    text-wrap: balance;
  }
  #bonus .bonus-head .section-sub,
  #bonus .bonus-head p {
    font-size: .86rem;
    line-height: 1.55;
  }

  /* ---------- Icone : plus petite ---------- */
  #bonus .bonus-ic {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    margin-bottom: 10px;
    box-shadow: none;
  }
  #bonus .bonus-ic.pic { width: 46px; height: 46px; }
  #bonus .bonus-ic img,
  #bonus .bonus-ic-img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- Valeur : en ligne, pas en badge flottant ---------- */
  #bonus .bonus-tag {
    position: static;
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 8px;
    font-size: .68rem;
    border-radius: 999px;
  }

  /* ---------- Textes ---------- */
  #bonus .bonus-card h3 {
    font-size: .95rem;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  #bonus .bonus-card p {
    font-size: .8rem;
    line-height: 1.5;
    margin-bottom: 9px;
  }
  #bonus .bonus-card p strong { display: inline; }

  #bonus .bonus-count {
    display: block;
    font-size: .7rem;
    padding: 7px 0 0;
    margin-top: 0;
    border-top: 1px solid var(--rule, #E3E9F5);
  }
  #bonus .bonus-resale {
    display: block;
    margin-left: 0;
    margin-top: 3px;
    font-size: .68rem;
  }

  /* ---------- Barre de valeur totale ---------- */
  #bonus .bonus-valuebar {
    margin-top: 14px;
    padding: 16px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  #bonus .bonus-valuebar .bonus-valuebar-txt strong { font-size: 1rem; }
  #bonus .bonus-valuebar .bonus-valuebar-txt span { font-size: .8rem; }
  #bonus .bonus-now { text-align: left; font-size: 1.4rem; }
}

/* ---------- 430 px ---------- */
@media (max-width: 430px) {
  #bonus .bonus-grid { gap: 11px; padding: 4px 16px 14px; margin-inline: -16px; }
  #bonus .bonus-card { flex: 0 0 82%; max-width: 82%; padding: 13px 12px 12px; }
  #bonus .bonus-head h2 { font-size: 1.34rem; }
  #bonus .bonus-card h3 { font-size: .9rem; }
  #bonus .bonus-card p { font-size: .78rem; }
  #bonus .bonus-ic, #bonus .bonus-ic.pic { width: 42px; height: 42px; }
}

/* ---------- 390 px ---------- */
@media (max-width: 390px) {
  #bonus .bonus-grid { gap: 10px; padding: 4px 16px 14px; margin-inline: -16px; }
  #bonus .bonus-card { flex: 0 0 85%; max-width: 85%; padding: 12px 11px 11px; }
  #bonus .bonus-head h2 { font-size: 1.28rem; }
  #bonus .bonus-card h3 { font-size: .87rem; }
  #bonus .bonus-card p { font-size: .76rem; }
  #bonus .bonus-ic, #bonus .bonus-ic.pic { width: 40px; height: 40px; }
}

/* ---------- 360 px ---------- */
@media (max-width: 360px) {
  #bonus .bonus-grid { gap: 9px; padding: 4px 14px 12px; margin-inline: -14px; }
  #bonus .bonus-card { flex: 0 0 88%; max-width: 88%; padding: 11px 10px 10px; }
  #bonus .bonus-head h2 { font-size: 1.2rem; }
  #bonus .bonus-card h3 { font-size: .84rem; }
  #bonus .bonus-card p { font-size: .74rem; }
  #bonus .bonus-ic, #bonus .bonus-ic.pic { width: 38px; height: 38px; }
}
/* ==========================================================================
   SECTION BONUS — lisibilite (correction 2)
   Deux problemes mesures au navigateur (Chrome, 390 px) :

   1. Les images des bonus ne se voyaient pas. L'icone etait reduite a
      40 x 40 px alors que le fichier source fait 640 x 640 : le detail
      visuel devenait illisible. La regle .bonus-ic.pic qui traitait le
      conteneur comme un carre generique ecrasait le traitement de
      l'image.

   2. Les couleurs des pastilles etaient trop pastel pour etre lues sur
      fond blanc : badge de valeur en cyan tres pale, compteur en
      violet tres pale. Le contraste texte/fond ne tenait pas.

   Correction : icone agrandie, images explicitement en flux, pastilles
   avec un fond marque et un texte fonce.
   ========================================================================== */
@media (max-width: 860px) {

  /* ---------- Icone plus grande, image reellement visible ---------- */
  #bonus .bonus-ic {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: none;
    background: var(--soft, #F5F8FF);
    padding: 0;
  }
  /* L'image occupe toute la surface du conteneur, sans etre rognée */
  #bonus .bonus-ic.pic,
  #bonus .bonus-ic.cyan.pic,
  #bonus .bonus-ic.pink.pic {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 11px;
    overflow: hidden;
  }
  #bonus .bonus-ic .bonus-ic-img,
  #bonus .bonus-ic-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
  }

  /* ---------- Pastille de valeur : fond marque, texte fonce ---------- */
  #bonus .bonus-tag {
    display: inline-block;
    margin-bottom: 9px;
    padding: 4px 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.35;
    color: #0B6E74;
    background: #CFF5F7;
    border: 1px solid #9EE4E8;
    border-radius: 999px;
  }

  /* ---------- Compteur : violet fonce sur fond tres clair ---------- */
  #bonus .bonus-count {
    display: block;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.35;
    color: #5B12B0;
    background: #EDE2FF;
    border: 1px solid #DCC6FF;
    padding: 6px 10px;
    border-radius: 8px;
    margin-top: 0;
  }

  /* ---------- Revente : vert fonce, lisible ---------- */
  #bonus .bonus-resale {
    display: block;
    margin-left: 0;
    margin-top: 6px;
    padding: 6px 10px;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.35;
    color: #0A6B3D;
    background: #D8F5E4;
    border: 1px solid #A8E6C4;
    border-radius: 8px;
  }

  /* ---------- Titre un peu plus large pour la lisibilite ---------- */
  #bonus .bonus-card h3 { font-size: 1rem; }
  #bonus .bonus-card p { font-size: .82rem; }
}

/* ---------- 430 / 390 / 360 : uniquement l'icone et les texts ---------- */
@media (max-width: 430px) {
  #bonus .bonus-ic, #bonus .bonus-ic.pic { aspect-ratio: 16 / 9; }
  #bonus .bonus-card h3 { font-size: .95rem; }
  #bonus .bonus-card p { font-size: .8rem; }
  #bonus .bonus-tag { font-size: .68rem; }
  #bonus .bonus-count { font-size: .71rem; }
}
@media (max-width: 390px) {
  #bonus .bonus-card h3 { font-size: .92rem; }
  #bonus .bonus-card p { font-size: .78rem; }
  #bonus .bonus-tag { font-size: .66rem; }
  #bonus .bonus-count { font-size: .69rem; }
  #bonus .bonus-resale { font-size: .67rem; }
}
@media (max-width: 360px) {
  #bonus .bonus-card h3 { font-size: .89rem; }
  #bonus .bonus-card p { font-size: .76rem; }
  #bonus .bonus-count { font-size: .67rem; }
  #bonus .bonus-resale { font-size: .65rem; }
}
/* Ajustement : l'image occupe maintenant toute la largeur, la carte
   devient trop haute. On limite l'image et on densifie le texte. */
@media (max-width: 860px) {
  #bonus .bonus-ic,
  #bonus .bonus-ic.pic { aspect-ratio: 16 / 7; }
  #bonus .bonus-card { padding: 13px 13px 12px; }
  #bonus .bonus-card p { margin-bottom: 8px; }
}
@media (max-width: 390px) {
  #bonus .bonus-ic, #bonus .bonus-ic.pic { aspect-ratio: 16 / 8; }
}
@media (max-width: 360px) {
  #bonus .bonus-ic, #bonus .bonus-ic.pic { aspect-ratio: 16 / 9; }
}
/* L'image debordait de son conteneur : une regle plus ancienne impose
   height 100 % sur .bonus-ic-img, ce qui la faisait depasser du cadre
   (298 px de hauteur dans un conteneur de 138 px). On neutralise la
   hauteur pour que l'image respecte exactement le ratio du cadre. */
@media (max-width: 860px) {
  #bonus .bonus-ic .bonus-ic-img,
  #bonus .bonus-ic-img {
    height: auto !important;
    min-height: 0;
    max-height: none;
    width: 100%;
    object-fit: cover;
    display: block;
  }
  /* Le conteneur devient un cadre simple, sans contraintes de grille */
  #bonus .bonus-ic,
  #bonus .bonus-ic.pic {
    display: block;
    line-height: 0;
    font-size: 0;
  }
}
/* La regle la plus recente sur l'image declarait un ratio herite de
   l'attribut width/height du fichier (640 x 640), qui l'emportait sur
   le ratio du cadre et la faisait deborder. On impose explicitement
   auto sur l'image : c'est le cadre qui dicte la forme. */
@media (max-width: 860px) {
  #bonus .bonus-ic .bonus-ic-img,
  #bonus .bonus-ic-img {
    aspect-ratio: auto !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover;
    display: block;
  }
}
/* La carte gardait une hauteur superieure a son contenu : la regle
   d'origine positionne .bonus-count avec margin-top auto dans une
   carte en flex column, ce qui.reserve la place restante en haut.
   Sur mobile on neutralise ce comportement et on retire le display
   flex herite, pour que la hauteur suive exactement le contenu. */
@media (max-width: 860px) {
  #bonus .bonus-card {
    display: block !important;
    min-height: 0 !important;
    height: auto;
    align-self: auto;
  }
  #bonus .bonus-card .bonus-count,
  #bonus .bonus-card .bonus-resale,
  #bonus .bonus-card .bonus-tag,
  #bonus .bonus-card h3,
  #bonus .bonus-card p {
    margin-top: 0 !important;
    position: static;
  }
  #bonus .bonus-card p { margin-bottom: 8px; }
  #bonus .bonus-card .bonus-ic { margin-bottom: 10px; }
  #bonus .bonus-card .bonus-tag { margin-bottom: 8px; }
  #bonus .bonus-card h3 { margin-bottom: 5px; }
}
/* ==========================================================================
   BONUS — format identique pour les trois cartes
   Mesure au navigateur (390 px) avant correction :
     carte 1 : image 138.1 | titre 19.1 (1 ligne) | texte 56.2 | 428.4 px
     carte 2 : image 172.7 | titre 38.3 (2 lignes) | texte 56.2 | 428.4 px
     carte 3 : image 172.7 | titre 38.3 (2 lignes) | texte 74.9 | 428.4 px
                                               + pastille revente 28.5
   Les trois cartes avaient la meme hauteur totale, mais par
   coincidence : les Bloc de l'une comblait le vide de l'autre. Le
   format interne etait different d'une carte a l'autre.

   Correction : chaque bloc est calibre a une hauteur fixe identique
   pour les trois, et la carte est alignee sur une grille interne qui
   force chaque rang a occuper la meme place. La carte 3 garde sa
   pastille de revente sans decaler les autres.
   ========================================================================== */
@media (max-width: 860px) {

  /* Grille interne : une ligne par bloc, meme hauteur pour tous */
  #bonus .bonus-card {
    display: grid !important;
    grid-template-rows: 104px auto 40px 76px auto auto;
    align-content: start;
    row-gap: 8px;
    height: auto;
  }

  /* 1. Image : hauteur identique, ratio impose */
  #bonus .bonus-ic,
  #bonus .bonus-ic.pic,
  #bonus .bonus-ic.cyan.pic,
  #bonus .bonus-ic.pink.pic {
    height: 104px !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    position: relative;
    margin: 0;
  }
  #bonus .bonus-ic .bonus-ic-img,
  #bonus .bonus-ic-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    display: block;
  }

  /* 2. Pastille de valeur : une seule ligne, hauteur figee */
  #bonus .bonus-tag {
    height: 22px;
    display: flex;
    align-items: center;
    margin: 0;
    font-size: .7rem;
    line-height: 1;
  }

  /* 3. Titre : deux lignes reservees, coupe auTroisieme ligne */
  #bonus .bonus-card h3 {
    height: 40px;
    margin: 0;
    font-size: .95rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    align-self: center;
  }

  /* 4. Texte : meme hauteur reservee partout, coupe propre */
  #bonus .bonus-card p {
    height: 76px;
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #bonus .bonus-card p strong { display: inline; }

  /* 5. Compteur : hauteur figee */
  #bonus .bonus-card .bonus-count {
    height: 28px;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: .72rem;
    line-height: 1;
  }

  /* 6. Pastille de revente : presente uniquement sur la carte 3.
        Pour que les trois cartes restent identiques, on reserve la
        meme ligne sur les deux autres, invisible mais occupee. */
  #bonus .bonus-card .bonus-resale {
    height: 28px;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: .7rem;
    line-height: 1;
  }
  /* Les cartes 1 et 2 n'ont pas cette pastille : on ajoute une ligne
     vide de meme hauteur pour que la grille reste alignee. */
  #bonus .bonus-card::after {
    content: '';
    display: block;
    height: 28px;
    grid-row: 6;
  }
  #bonus .bonus-card:has(.bonus-resale)::after { display: none; }
}

@media (max-width: 430px) {
  #bonus .bonus-card h3 { font-size: .92rem; }
  #bonus .bonus-card p { font-size: .78rem; }
}
@media (max-width: 390px) {
  #bonus .bonus-card h3 { font-size: .9rem; height: 38px; }
  #bonus .bonus-card p { font-size: .76rem; height: 74px; }
}
@media (max-width: 360px) {
  #bonus .bonus-card h3 { font-size: .87rem; height: 36px; }
  #bonus .bonus-card p { font-size: .74rem; height: 72px; }
}
/* ==========================================================================
   BONUS — image complete, sans rognage
   Mesure au navigateur (390 px) : les trois sources font 640 x 640,
   soit un carre, alors que le cadre de la carte fait 276 x 104, soit
   un ratio de 2.65. Avec object-fit cover, la carte n'affichait que
   16 % de la hauteur de l'image et rognait les cotes : le contenu
   n'etait pas identifiable.

   Deux problemes a resoudre simultanement :
   - l'image doit etre entierement visible
   - les trois cartes doivent garder exactement le meme format

   Solution : cadre carree (ratio 1 / 1, identique a la source), et
   contain pour que rien ne soit rogne. Le cadre devient plus grand,
   ce qui est le prix de la lisibilite, mais le contenu de l'image
   redevient reconnaissable.
   ========================================================================== */
@media (max-width: 860px) {

  #bonus .bonus-card {
    grid-template-rows: auto 22px 38px 74px 28px 28px;
  }

  /* Cadre carree : meme ratio que la source, aucune distorsion */
  #bonus .bonus-ic,
  #bonus .bonus-ic.pic,
  #bonus .bonus-ic.cyan.pic,
  #bonus .bonus-ic.pink.pic {
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    position: relative;
    margin: 0;
  }

  /* contain : l'image entiere est visible, jamais rognee */
  #bonus .bonus-ic .bonus-ic-img,
  #bonus .bonus-ic-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #fff;
  }
}

@media (max-width: 430px) {
  #bonus .bonus-card h3 { font-size: .92rem; }
  #bonus .bonus-card p { font-size: .78rem; }
}
@media (max-width: 390px) {
  #bonus .bonus-card h3 { font-size: .9rem; height: 38px; }
  #bonus .bonus-card p { font-size: .76rem; height: 74px; }
}
@media (max-width: 360px) {
  #bonus .bonus-card h3 { font-size: .87rem; height: 36px; }
  #bonus .bonus-card p { font-size: .74rem; height: 72px; }
}
/* ==========================================================================
   SECTION CONFIANCE — carousel horizontal (mobile)
   Les trois arguments de confiance (garantie, activation, paiement
   securise) passent en rail horizontal avec scroll-snap, sur le meme
   modele que les sections avantages et bonus.
   Les cartes gardent une hauteur identique, calculee sur la plus
   haute des trois, afin que le rail ne bouge pas en changeant de carte.
   Desktop (> 860px) : les trois cartes restent en grille, comme avant.
   ========================================================================== */
@media (max-width: 860px) {

  /* ---------- Rail horizontal ---------- */
  #confiance .trust-strip {
    display: flex;
    flex-direction: row;
    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    padding: 4px 20px 16px;
    margin-inline: -20px;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #confiance .trust-strip::-webkit-scrollbar { display: none; }

  /* ---------- Cartes : largeur bornee, hauteur identique ---------- */
  #confiance .trust-item {
    flex: 0 0 76%;
    max-width: 76%;
    min-width: 0;
    height: 108px;
    scroll-snap-align: start;
    scroll-snap-stop: always;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;

    padding: 16px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
  }
  #confiance .trust-item > * { min-width: 0; }

  /* ---------- Icone ---------- */
  #confiance .trust-item svg {
    flex: none;
    width: 24px;
    height: 24px;
  }

  /* ---------- Textes ---------- */
  #confiance .trust-item strong {
    display: block;
    font-size: .95rem;
    line-height: 1.25;
    margin: 0;
    color: var(--navy);
  }
  #confiance .trust-item span {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
    margin: 0;
    color: var(--muted);
  }
}

/* ---------- 430 px ---------- */
@media (max-width: 430px) {
  #confiance .trust-strip { gap: 11px; padding: 4px 16px 14px; margin-inline: -16px; }
  #confiance .trust-item { flex: 0 0 80%; max-width: 80%; height: 104px; padding: 15px 14px; }
  #confiance .trust-item strong { font-size: .92rem; }
  #confiance .trust-item span { font-size: .78rem; }
}

/* ---------- 390 px ---------- */
@media (max-width: 390px) {
  #confiance .trust-strip { gap: 10px; padding: 4px 16px 14px; margin-inline: -16px; }
  #confiance .trust-item { flex: 0 0 83%; max-width: 83%; height: 102px; padding: 14px 13px; }
  #confiance .trust-item strong { font-size: .9rem; }
  #confiance .trust-item span { font-size: .76rem; }
}

/* ---------- 360 px ---------- */
@media (max-width: 360px) {
  #confiance .trust-strip { gap: 9px; padding: 4px 14px 12px; margin-inline: -14px; }
  #confiance .trust-item { flex: 0 0 86%; max-width: 86%; height: 100px; padding: 13px 12px; }
  #confiance .trust-item strong { font-size: .88rem; }
  #confiance .trust-item span { font-size: .75rem; }
}
/* ==========================================================================
   SECTION FAQ — centrage complet (mobile)
   Mesure au navigateur (390 px) avant correction :
     .faq-grid    : une colonne de 358 px
     .faq-intro   : 358 x 345 px, align-items start
     .faq-list    : 358 x 575 px
     .faq-promo   : 358 x 203 px
     text-align calcule sur l'ensemble : start, donc tout le bloc est
     aligne a gauche
   Le titre et la description restaient a gauche et la carte du CTA
   prenait 203 px de hauteur, ce qui repoussait les six questions tres
   bas dans l'ecran.

   Correction : tout le contenu est centre horizontalement, la carte
   du CTA se resserre et devient un simple appel a l'action, et les
   questions gardent un rendu lisible avec des bordures fines.
   ========================================================================== */
@media (max-width: 860px) {

  #faq {
    padding-top: 48px;
    padding-bottom: 52px;
    overflow-x: clip;
  }

  /* ---------- Grille : une seule colonne ---------- */
  #faq .faq-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* ---------- En-tete centre ---------- */
  #faq .faq-intro {
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    text-align: center;
  }
  #faq .faq-intro .eyebrow {
    display: inline-block;
    margin-bottom: 12px;
  }
  #faq .faq-intro h2 {
    font-size: 1.55rem;
    line-height: 1.18;
    margin-bottom: 9px;
    text-wrap: balance;
  }
  #faq .faq-intro .section-sub,
  #faq .faq-intro .section-sub.left {
    font-size: .9rem;
    line-height: 1.55;
    max-width: 32ch;
    margin: 0 auto;
    text-align: center;
  }

  /* ---------- CTA : compact et centre ---------- */
  #faq .faq-promo-mini {
    width: 100%;
    max-width: 22rem;
    margin: 16px auto 0;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #faq .faq-promo-mini strong {
    font-size: .95rem;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  #faq .faq-promo-mini p {
    font-size: .82rem;
    line-height: 1.45;
    margin-bottom: 13px;
  }
  #faq .faq-promo-mini .btn {
    width: 100%;
    min-height: 48px;
    font-size: .9rem;
    padding: .75rem 1rem;
  }

  /* ---------- FAQ : Carousel horizontal swipeable sur mobile ---------- */
  .faq-carousel-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
  }

  #faq .faq-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 10px 16px 20px 16px;
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #faq .faq-list::-webkit-scrollbar {
    display: none;
  }

  #faq .faq-item {
    flex: 0 0 88%;
    width: 88%;
    max-width: 88%;
    min-width: 280px;
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(16, 20, 56, 0.05);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
  #faq .faq-item:first-child {
    scroll-snap-align: start;
  }
  #faq .faq-item:last-child {
    scroll-snap-align: end;
    margin-right: 12px;
  }

  #faq .faq-item.open {
    border-color: #c9a7ff;
    box-shadow: 0 10px 28px rgba(125, 42, 232, 0.12);
  }

  #faq .faq-q {
    margin: 0;
  }
  #faq .faq-q button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 16px 16px;
    background: transparent;
    border: 0;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--navy);
    text-align: left;
    cursor: pointer;
  }

  #faq .accordion-toggle-icon {
    flex: none;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--purple-tint);
    color: var(--purple);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease;
  }

  #faq .faq-item.open .accordion-toggle-icon {
    transform: rotate(45deg);
    background: var(--purple);
    color: #fff;
  }

  #faq .faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  #faq .faq-item.open .faq-a {
    grid-template-rows: 1fr;
  }
  #faq .faq-a > div {
    overflow: hidden;
    opacity: 0;
    filter: blur(2px);
    transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  #faq .faq-item.open .faq-a > div {
    opacity: 1;
    filter: blur(0);
  }
  #faq .faq-a p {
    padding: 0 16px 18px 16px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
  }

  /* Navigation Bar: Prev Button + Dots + Next Button */
  .faq-nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
  }

  .faq-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(125, 42, 232, 0.28);
    background: #FFFFFF;
    color: var(--purple);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 20, 56, 0.08);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .faq-nav-btn:active {
    transform: scale(0.92);
    background: var(--purple-tint);
  }
  .faq-nav-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: var(--border);
    color: var(--muted);
  }

  .faq-dots {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .faq-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #D8DEEB;
    cursor: pointer;
    transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
  }
  .faq-dots span.active {
    width: 22px;
    background: var(--purple);
  }
}

@media (max-width: 430px) {
  #faq .faq-intro h2 { font-size: 1.45rem; }
  #faq .faq-intro .section-sub { font-size: .87rem; }
  #faq .faq-promo-mini { max-width: 20rem; }
  #faq .faq-item {
    flex: 0 0 88%;
    max-width: 88%;
    min-width: 260px;
  }
  #faq .faq-q button {
    font-size: 0.88rem;
    min-height: 58px;
    padding: 13px 13px;
  }
  #faq .faq-a p {
    font-size: 0.83rem;
    padding: 0 13px 15px 13px;
  }
}
@media (max-width: 375px) {
  #faq .faq-item {
    flex: 0 0 90%;
    max-width: 90%;
    min-width: 240px;
  }
  #faq .faq-q button {
    font-size: 0.85rem;
    min-height: 54px;
    padding: 12px 12px;
  }
}

/* ==========================================================================
   ESPACE CLIENT — redesign editorial (compte.html)
   Type-led, contour hairline, dégradés strictement limités.
   Aucune modification du HTML ni du JavaScript : cette couche ne fait
   que re-styler les memes éléments et réordonner la colonne sur mobile.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
.cp-account {
  --cp-indigo-900: #0A0E28;
  --cp-indigo-800: #101438;
  --cp-indigo-700: #171C48;
  --cp-indigo-600: #232A63;
  --cp-violet-600: #6B23D6;
  --cp-violet-500: #7D2AE8;
  --cp-violet-100: #F4EEFF;
  --cp-violet-050: #FAF7FF;
  --cp-blush: #FF6FA5;
  --cp-hair: #E8EAF2;
  --cp-hair-soft: #F2F3F8;
  --cp-ink: #0C1030;
  --cp-ink-2: #3D4468;
  --cp-ink-3: #6E7595;
  --cp-r-sm: 8px;
  --cp-r-md: 12px;
  --cp-r-lg: 18px;
  --cp-shadow-sm: 0 1px 2px rgba(12,16,48,.04), 0 1px 3px rgba(12,16,48,.06);
  --cp-shadow-md: 0 4px 12px rgba(12,16,48,.05), 0 12px 32px -8px rgba(12,16,48,.10);
  --cp-shadow-lg: 0 2px 6px rgba(12,16,48,.04), 0 24px 56px -16px rgba(12,16,48,.16);
}

/* ---------- 2. En-tête compact ---------- */
.cp-account .dash-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--cp-hair);
}
.cp-account .dash-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding-inline: 20px;
}
.cp-account .dash-topbar .brand-logo { height: 26px; width: auto; display: block; }
.cp-account .dash-top-actions { display: flex; align-items: center; gap: .5rem; }

.cp-account .back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: 0 .8rem;
  border: 1px solid var(--cp-hair);
  border-radius: var(--cp-r-sm);
  background: #fff;
  color: var(--cp-ink-2);
  font-size: .84rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.cp-account .back-link:hover { border-color: var(--cp-ink-3); color: var(--cp-ink); background: var(--cp-hair-soft); }
.cp-account .back-link:focus-visible { outline: 2px solid var(--cp-violet-500); outline-offset: 2px; }
.cp-account .back-link svg { flex: none; }

.cp-account .icon-btn.round {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--cp-hair);
  border-radius: var(--cp-r-sm);
  background: #fff;
  color: var(--cp-ink-2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.cp-account .icon-btn.round:hover { border-color: var(--cp-ink-3); color: var(--cp-ink); background: var(--cp-hair-soft); }
.cp-account .icon-btn.round:focus-visible { outline: 2px solid var(--cp-violet-500); outline-offset: 2px; }

/* ---------- 3. Coquille ---------- */
.cp-account .dash-wrap { padding-block: 24px 64px; padding-inline: 20px; }

/* ---------- 4. Composition deux colonnes ---------- */
.cp-account .auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: stretch;
  gap: 0;
  max-width: 1060px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--cp-hair);
  border-radius: var(--cp-r-lg);
  overflow: hidden;
  box-shadow: var(--cp-shadow-lg);
}

/* Sur mobile : le formulaire passe en premier, la marque en dessous */
.cp-account .auth-panel { order: 1; }
.cp-account .auth-aside  { order: 2; }

/* ---------- 5. Panneau d'authentification ---------- */
.cp-account .auth-panel {
  padding: 44px 40px 40px;
  background: #fff;
  display: flex;
  align-items: center;
}
.cp-account .auth-panel-inner { width: 100%; max-width: 26rem; margin: 0 auto; }

.cp-account .login-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 22px;
  background: var(--cp-hair-soft);
  border: 1px solid var(--cp-hair);
  border-radius: 10px;
}
.cp-account .login-tab {
  min-height: 34px;
  padding: 0 .95rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cp-ink-3);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 550;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.cp-account .login-tab.active {
  background: #fff;
  color: var(--cp-ink);
  box-shadow: var(--cp-shadow-sm);
}
.cp-account .login-tab:focus-visible { outline: 2px solid var(--cp-violet-500); outline-offset: 1px; }

.cp-account .auth-panel-head { margin-bottom: 22px; }
.cp-account #loginTitle {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -.028em;
  color: var(--cp-ink);
  margin: 0 0 6px;
}
.cp-account .modal-sub {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--cp-ink-3);
  margin: 0;
}

/* ---------- 6. Champs ---------- */
.cp-account .form-group { margin-bottom: 15px; }
.cp-account .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--cp-ink-2);
}
.cp-account .form-input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--cp-hair);
  border-radius: var(--cp-r-sm);
  background: #fff;
  color: var(--cp-ink);
  font-family: inherit;
  font-size: .93rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cp-account textarea.form-input { min-height: 96px; padding: 11px 13px; line-height: 1.55; resize: vertical; }
.cp-account .form-input::placeholder { color: #A8AEC4; }
.cp-account .form-input:hover { border-color: var(--cp-ink-3); }
.cp-account .form-input:focus {
  outline: none;
  border-color: var(--cp-violet-500);
  box-shadow: 0 0 0 3px rgba(125,42,232,.13);
  background: #fff;
}
.cp-account .form-input:focus-visible { outline: none; }
.cp-account .form-input[aria-invalid="true"] { border-color: #E5484D; }

.cp-account .form-tip {
  display: block;
  margin-top: 6px;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--cp-ink-3);
}

/* ---------- 7. Bouton principal ---------- */
.cp-account .auth-submit {
  margin-top: 20px;
  min-height: 48px;
  border-radius: var(--cp-r-sm);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(107,35,214,.16), 0 8px 20px -8px rgba(107,35,214,.34);
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.cp-account .auth-submit:hover { background: var(--cp-violet-600); box-shadow: 0 2px 4px rgba(107,35,214,.18), 0 12px 26px -8px rgba(107,35,214,.42); }
.cp-account .auth-submit:active { transform: translateY(1px); }
.cp-account .auth-submit:focus-visible { outline: 2px solid var(--cp-violet-500); outline-offset: 2px; }
.cp-account .auth-submit[disabled] { opacity: .62; cursor: progress; transform: none; }

/* ---------- 8. États de message ---------- */
.cp-account .modal-status {
  min-height: 0;
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  border-radius: var(--cp-r-sm);
  overflow: hidden;
}
.cp-account .modal-status:empty { margin: 0; }
.cp-account .modal-status:not(:empty) {
  min-height: 42px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid #F5C2C7;
  background: #FEF2F3;
  color: #A1121A;
}
.cp-account .modal-status.error { font-weight: 500; }
.cp-account .modal-status.ok,
.cp-account .modal-status.success { border-color: #A9E5C4; background: #F0FBF5; color: #0A6B3D; }

/* ---------- 9. Bloc VIP : compact et discret ---------- */
.cp-account .auth-vip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 13px 14px;
  background: var(--cp-violet-050);
  border: 1px solid #E9DFFB;
  border-radius: var(--cp-r-md);
}
.cp-account .auth-vip-ic {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--cp-violet-100);
  color: var(--cp-violet-600);
}
.cp-account .auth-vip-body { min-width: 0; }
.cp-account .auth-vip strong {
  display: block;
  font-size: .82rem;
  font-weight: 650;
  color: var(--cp-violet-600);
  margin-bottom: 3px;
}
.cp-account .auth-vip p {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--cp-ink-3);
  margin: 0 0 7px;
}
.cp-account .auth-vip-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cp-violet-600);
  text-decoration: none;
}
.cp-account .auth-vip-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-account .auth-vip-link:focus-visible { outline: 2px solid var(--cp-violet-500); outline-offset: 2px; border-radius: 4px; }

.cp-account .auth-vip-ready {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 13px 14px;
  background: #F0FBF5;
  border: 1px solid #A9E5C4;
  border-radius: var(--cp-r-md);
  font-size: .84rem;
  font-weight: 550;
  color: #0A6B3D;
}
.cp-account .auth-vip-ready span {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #0A6B3D;
  color: #fff;
}

/* ---------- 10. Séparateur + Google ---------- */
.cp-account .oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--cp-ink-3);
  font-size: .76rem;
}
.cp-account .oauth-divider::before,
.cp-account .oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cp-hair);
}
.cp-account #googleBtnWrap { display: flex; justify-content: center; }
.cp-account #googleBtnWrap > div,
.cp-account #googleBtn { width: 100%; max-width: 100%; }

.cp-account .modal-security-footer {
  margin: 18px 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--cp-ink-3);
  text-align: center;
}

/* ---------- 11. Colonne marque ---------- */
.cp-account .auth-aside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 44px 40px 40px;
  color: #fff;
  background: linear-gradient(158deg, #171C48 0%, #101438 46%, #0A0E28 100%);
  overflow: hidden;
}
/* Image de fond : couche décorative, repli en dégradé si elle est absente */
.cp-account .auth-aside-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #101438;
  background-image: url('assets/compte-hero-bg.png');
  background-repeat: no-repeat;
  background-position: 72% 22%;
  background-size: cover;
}
/* Voile d'lisibilité : l'image ne concurrence pas le texte */
.cp-account .auth-aside::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,14,40,.86) 0%, rgba(16,20,56,.78) 42%, rgba(10,14,40,.94) 100%),
    radial-gradient(58% 42% at 100% 4%, rgba(255,111,165,.16) 0%, transparent 62%);
}
.cp-account .auth-aside-top,
.cp-account .auth-benefits,
.cp-account .auth-aside-foot { position: relative; }

.cp-account .auth-aside-top h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 10px;
}
.cp-account .auth-aside-top p {
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255,255,255,.74);
  margin: 0;
  max-width: 34ch;
}

.cp-account .auth-benefits {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cp-account .auth-benefits li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0;
}
.cp-account .ab-ic {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}
.cp-account .auth-benefits strong {
  display: block;
  font-size: .87rem;
  font-weight: 620;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 1px;
}
.cp-account .auth-benefits small {
  display: block;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255,255,255,.64);
}

.cp-account .auth-aside-foot { margin-top: auto; padding-top: 18px; }
.cp-account .auth-trust {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 500;
  color: rgba(255,255,255,.62);
}
.cp-account .auth-trust svg { color: #6EE7C4; }

/* ---------- 12. Mobile ---------- */
@media (max-width: 860px) {
  .cp-account .auth-split {
    grid-template-columns: 1fr;
    max-width: 30rem;
    border-radius: var(--cp-r-md);
  }
  .cp-account .auth-panel { padding: 28px 22px 26px; }
  .cp-account .auth-panel-inner { max-width: none; }
  .cp-account .auth-aside  { padding: 28px 22px 26px; gap: 20px; }

  .cp-account .auth-aside-media { background-position: 68% 18%; }

  .cp-account .auth-aside-top h2 { font-size: 1.32rem; }
  .cp-account .auth-aside-top p  { font-size: .84rem; max-width: 100%; }
  .cp-account .auth-benefits    { gap: 11px; }
  .cp-account .auth-benefits strong { font-size: .83rem; }
  .cp-account .auth-benefits small  { font-size: .75rem; }
  .cp-account .ab-ic { width: 28px; height: 28px; }

  .cp-account #loginTitle { font-size: 1.4rem; }
  .cp-account .login-tabs { margin-bottom: 18px; }
  .cp-account .form-group  { margin-bottom: 13px; }
  .cp-account .form-input  { min-height: 48px; font-size: 16px; }
  .cp-account .auth-submit { min-height: 50px; }
  .cp-account .auth-vip, .cp-account .auth-vip-ready { margin-top: 18px; }

  .cp-account .dash-wrap { padding-block: 16px 44px; }
}

@media (max-width: 380px) {
  .cp-account .dash-topbar-inner { padding-inline: 14px; min-height: 56px; }
  .cp-account .dash-wrap { padding-inline: 14px; }
  .cp-account .back-link span { display: none; }
  .cp-account .back-link { padding: 0 .6rem; }
  .cp-account .auth-panel, .cp-account .auth-aside { padding: 24px 18px 22px; }
  .cp-account #loginTitle { font-size: 1.28rem; }
}

/* ---------- 13. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .cp-account .btn,
  .cp-account .back-link,
  .cp-account .icon-btn,
  .cp-account .form-input,
  .cp-account .login-tab { transition: none !important; }
}

/* ---------- 14. Contraste élevé ---------- */
@media (prefers-contrast: more) {
  .cp-account .auth-aside::after { background: rgba(10,14,40,.94); }
  .cp-account .auth-vip p, .cp-account .modal-security-footer { color: var(--cp-ink-2); }
}
/* Cibles tactiles : le lien « Voir les offres » et le logo atteignent
   32 px minimum en hauteur. Le logo garde sa taille visuelle, seule la
   zone cliquable est agrandie. */
.cp-account .auth-vip-link {
  min-height: 32px;
  padding: 5px 10px 5px 0;
  margin: -5px 0 0;
  display: inline-flex;
  align-items: center;
}
.cp-account .dash-topbar .brand {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 2px;
}
.cp-account .dash-topbar .brand:focus-visible { outline: 2px solid var(--cp-violet-500); outline-offset: 2px; border-radius: 6px; }
/* ---------- Correctif : l'attribut hidden doit primer ---------- */
/* .auth-vip et .auth-vip-ready passent en display:flex, ce qui
   neutralise l'attribut hidden posé par le JavaScript. Sans ces deux
   règles, le bloc « Commande trouvée ! » s'afficherait en permanence
   et laisserait croire à une commande vérifiée qui n'existe pas.
   Rappel : le message de commande trouvée doit n'apparaître que si
   hasPaidOrder() a réellement renvoyé true. */
.cp-account .auth-vip[hidden]        { display: none !important; }
.cp-account .auth-vip-ready[hidden]  { display: none !important; }
.cp-account .login-tab[hidden]       { display: none !important; }
.cp-account #googleBtnWrap[hidden]   { display: none !important; }
/* ---------- 15. Bandeau du tableau de bord ---------- */
/* L'image Canva très colorée du bandeau entrait en concurrence avec le
   contenu. Elle est atténuée par un voile indigo et le texte passe en
   blanc : la même grammaire visuelle que la colonne de marque. */
.cp-account .dash-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 28px;
  border: 1px solid var(--cp-hair);
  border-radius: var(--cp-r-lg);
  background: linear-gradient(152deg, #171C48 0%, #101438 52%, #0A0E28 100%);
  box-shadow: var(--cp-shadow-md);
  overflow: hidden;
}
.cp-account .dash-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--cp-hero-img);
  background-repeat: no-repeat;
  background-position: 82% 26%;
  background-size: cover;
  opacity: .34;
}
.cp-account .dash-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(62% 58% at 100% 0%, rgba(255,111,165,.16) 0%, transparent 64%);
}
.cp-account .avatar-circle.big {
  flex: none;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.cp-account .dash-hero-txt { min-width: 0; flex: 1; }
.cp-account .dash-kicker {
  font-size: .76rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.56);
  margin: 0 0 6px;
}
.cp-account .dash-hello {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.028em;
  color: #fff;
  margin: 0 0 12px;
  overflow-wrap: break-word;
}
.cp-account .dash-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-account .dash-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: .76rem;
  color: rgba(255,255,255,.82);
}
.cp-account .dash-chip strong { color: #fff; font-size: .86rem; font-weight: 700; }

@media (max-width: 860px) {
  .cp-account .dash-hero { padding: 20px 18px; gap: 14px; }
  .cp-account .avatar-circle.big { width: 48px; height: 48px; font-size: 1.15rem; }
  .cp-account .dash-hello { font-size: 1.06rem; }
  .cp-account .dash-kicker { font-size: .7rem; }
  .cp-account .dash-chip { font-size: .72rem; padding: 4px 10px; }
}
@media (max-width: 380px) {
  .cp-account .dash-hero { flex-direction: column; align-items: flex-start; padding: 18px 16px; }
}
/* ==========================================================================
   ESPACE CLIENT — en-tête mobile
   Sur petit écran, l'action « Retour au site » se réduit à son icône :
   le libellé est masqué, l'icône reste, et la zone cliquable conserve
   une taille confortable. Le bouton de déconnexion, déjà une icône,
   garde le même traitement visuel pour un alignement net.
   Desktop : aucun changement.
   ========================================================================== */
@media (max-width: 860px) {
  .cp-account .dash-topbar .back-btn .back-txt { display: none; }
  .cp-account .dash-topbar .back-btn {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 0;            /* neutralise la flèche texte ← */
    line-height: 0;
    border-radius: 10px;
    flex: none;
  }
  /* La flèche est dessinée en CSS pour être centrée dans le carré */
  .cp-account .dash-topbar .back-btn::before {
    content: '';
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Aligne le logout sur la même grille visuelle */
  .cp-account .dash-topbar .dash-top-actions .icon-btn.round {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 10px;
  }
}

@media (max-width: 380px) {
  .cp-account .dash-topbar .back-btn,
  .cp-account .dash-topbar .dash-top-actions .icon-btn.round {
    width: 42px; height: 42px; min-width: 42px;
  }
}
/* L'icone de deconnexion gardait 38 x 40 px : une regle plus ancienne
   sur .dash-top-actions .btn-header / .icon-btn l'emportait sur ma
   regle. On cible l'element exact et on force la taille. */
@media (max-width: 860px) {
  .cp-account .dash-topbar #logoutTop.icon-btn.round,
  .cp-account .dash-topbar .dash-top-actions > .icon-btn.round {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    flex: none;
  }
}
@media (max-width: 380px) {
  .cp-account .dash-topbar #logoutTop.icon-btn.round,
  .cp-account .dash-topbar .dash-top-actions > .icon-btn.round {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px; min-height: 42px;
  }
}
/* Diagnostic au navigateur (390 px) : .icon-btn.round annonce 44 x 44
   mais l'element mesurait 38 x 40. Deux causes cumulees :
   - le bouton se reduisait dans le conteneur flex (flex-shrink)
   - le selecteur enfant direct ne correspondait pas, l'element etant
     precede d'un noeud texte
   On cible l'identifiant, dont la specificite depasse celle de la
   regle existante, et on neutralise la reduction. */
@media (max-width: 860px) {
  .cp-account .dash-topbar #logoutTop {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px;
    padding: 0;
    flex: 0 0 44px;
    border-radius: 10px;
  }
}
@media (max-width: 380px) {
  .cp-account .dash-topbar #logoutTop {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px;
    flex: 0 0 42px;
  }
}

/* Le bouton retour subit le meme retrecissement : on le fige aussi. */
@media (max-width: 860px) {
  .cp-account .dash-topbar .back-btn {
    flex: 0 0 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}
@media (max-width: 380px) {
  .cp-account .dash-topbar .back-btn { flex: 0 0 42px; max-width: 42px; height: 42px; min-height: 42px; }
}
/* Diagnostic complet : deux regles plus anciennes reignent sur
   #logoutTop et sont ecrites apres notre bloc.
     @media (max-width:768px) .icon-btn.round { width:38px; height:38px }
     @media (max-width:430px) .icon-btn      { width:40px; height:40px }
   Elles sont mesurees en 38 x 40 : 38 pour la largeur (regle 768px),
   40 pour la hauteur (regle 430px).
   Une regle a 900px les englobe toutes les deux, donc elle sort
   winner sur les deux points de rupture. */
@media (max-width: 900px) {
  .cp-account .dash-topbar #logoutTop.icon-btn.round {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    flex: 0 0 44px;
    padding: 0;
    border-radius: 10px;
  }
  .cp-account .dash-topbar .back-btn {
    flex: 0 0 44px;
    max-width: 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}
@media (max-width: 380px) {
  .cp-account .dash-topbar #logoutTop.icon-btn.round {
    width: 42px; height: 42px;
    min-width: 42px; min-height: 42px; max-width: 42px;
    flex: 0 0 42px;
  }
  .cp-account .dash-topbar .back-btn {
    flex: 0 0 42px; max-width: 42px; width: 42px; height: 42px; min-height: 42px;
  }
}
/* ==========================================================================
   EN-TÊTE ESPACE CLIENT — action retour en icône seule (mobile)
   Note : ces règles ciblent .dash-topbar, classe historique présente
   dans le HTML, et non .cp-account, classe absente de la page. Elles
   sont donc autonomes et fonctionnent quel que soit l'état du body.

   Sur petit écran, « Retour au site » se réduit à une flèche dans un
   carré de 44 px. Le libellé est masqué, l'icône reste, et la zone
   cliquable conserve une taille confortable au doigt.

   Deux règles plus anciennes règnent sur ces boutons et sont écrites
   après tout le reste du fichier :
     @media (max-width:768px) .icon-btn.round { width:38px; height:38px }
     @media (max-width:430px) .icon-btn      { width:40px; height:40px }
   Elles sont mesurées à 38 x 40. La règle ci-dessous englobe les
   deux points de rupture et neutralise aussi le flex-shrink, qui
   réduisait le bouton de 44 à 38 px dans le conteneur.
   ========================================================================== */
@media (max-width: 900px) {

  /* --- Action retour : carré 44 px, flèche seule --- */
  .dash-topbar .back-btn {
    flex: 0 0 44px;
    width: 44px;
    max-width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0;
    margin: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }
  /* Masque le libellé */
  .dash-topbar .back-btn .back-txt { display: none !important; }

  /* Flèche dessinée en CSS : centrée, indépendant de la police */
  .dash-topbar .back-btn::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Neutralise le texte ← généré par le HTML */
  .dash-topbar .back-btn { text-indent: -9999px; }
  .dash-topbar .back-btn::before { text-indent: 0; }

  /* --- Déconnexion : même carré, alignement net --- */
  .dash-topbar #logoutTop.icon-btn.round {
    flex: 0 0 44px;
    width: 44px;
    max-width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0;
    border-radius: 10px;
  }

  /* --- Habillage : mêmes formes pour les deux actions --- */
  .dash-topbar .back-btn,
  .dash-topbar #logoutTop.icon-btn.round {
    background: #fff;
    border: 1px solid var(--border, #E3E9F5);
    color: var(--navy, #101438);
    transition: border-color .18s ease, background-color .18s ease;
  }
  .dash-topbar .back-btn:hover,
  .dash-topbar #logoutTop.icon-btn.round:hover {
    background: var(--soft, #F5F8FF);
    border-color: var(--muted, #58627A);
  }
  .dash-topbar .back-btn:focus-visible,
  .dash-topbar #logoutTop.icon-btn.round:focus-visible {
    outline: 2px solid var(--purple, #7D2AE8);
    outline-offset: 2px;
  }
}

@media (max-width: 380px) {
  .dash-topbar .back-btn,
  .dash-topbar #logoutTop.icon-btn.round {
    flex: 0 0 42px;
    width: 42px; max-width: 42px; min-width: 42px;
    height: 42px; min-height: 42px; max-height: 42px;
  }
  .dash-topbar .back-btn::before { width: 17px; height: 17px; }
}
/* Le text-indent -9999px avait ete ajoute pour masquer la fleche
   texte, mais il decalait egalement le rendu du bouton et de son
   contenu. La fleche du HTML est deja neutralisee par font-size:0
   et line-height:0 : le retrait de texte est donc inutile et
   supprimé. */
@media (max-width: 900px) {
  .dash-topbar .back-btn { text-indent: 0; }
}/* ===== ADMIN DASHBOARD ===== */
.admin-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(10, 15, 30, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  padding: 20px !important;
}
.admin-backdrop[hidden] {
  display: none !important;
}
.admin-modal {
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  max-width: 960px;
  width: 95vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.admin-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-header h2 { margin: 0; font-size: 1.3rem; }
.admin-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-tab {
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  transition: all .15s;
}
.admin-tab:hover { background: rgba(255,255,255,.1); }
.admin-tab.active { background: #7D2AE8; border-color: #7D2AE8; }
.admin-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  align-items: center;
}
.admin-search, .admin-input, .admin-select, .admin-textarea {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: #fff;
  border-radius: 8px;
  font-size: .9rem;
}
.admin-search { flex: 1; min-width: 180px; }
.admin-input { flex: 1; min-width: 120px; }
.admin-select { min-width: 140px; }
.admin-textarea { width: 100%; resize: vertical; }
.admin-btn, .admin-btn-sm {
  padding: 8px 14px;
  border: none;
  background: #7D2AE8;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  transition: opacity .15s;
}
.admin-btn:hover, .admin-btn-sm:hover { opacity: .85; }
.admin-btn-sm { padding: 4px 10px; font-size: .78rem; }
.admin-btn-primary { background: #00C4CC; }
.admin-btn-danger { background: #e74c3c; }
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.admin-table th, .admin-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-table th { font-weight: 600; opacity: .7; }
.admin-actions-cell { display: flex; gap: 4px; }
.admin-list { list-style: none; padding: 0; margin: 0; }
.admin-list-item {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.03);
}
.admin-empty { opacity: .5; font-style: italic; padding: 20px; text-align: center; }
.admin-msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.admin-msg-meta { font-size: .78rem; opacity: .6; margin-bottom: 8px; }
.admin-msg-body { margin-bottom: 8px; white-space: pre-wrap; }
.admin-msg-attach { font-size: .78rem; opacity: .7; margin-bottom: 8px; }
.admin-reply-row { display: flex; gap: 8px; align-items: flex-end; }
.admin-reply-row textarea { flex: 1; }
.admin-bonus-row { display: flex; flex-direction: column; gap: 4px; }
.admin-bonus-meta { font-size: .78rem; opacity: .6; }
.admin-bonus-actions { display: flex; gap: 6px; margin-top: 6px; }
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.admin-stat-card {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  text-align: center;
  background: rgba(255,255,255,.03);
}
.admin-stat-icon { font-size: 1.5rem; }
.admin-stat-value { font-size: 1.4rem; font-weight: 700; margin: 4px 0; }
.admin-stat-label { font-size: .78rem; opacity: .6; }
.admin-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.admin-bar-label { min-width: 100px; font-size: .85rem; }
.admin-bar-track { flex: 1; height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.admin-bar-fill { height: 100%; background: #7D2AE8; border-radius: 4px; transition: width .3s; }
.admin-bar-val { min-width: 80px; text-align: right; font-size: .78rem; opacity: .7; }
.admin-chart-wrap { margin-bottom: 16px; }
.admin-chart-wrap h4 { margin: 0 0 8px; font-size: .95rem; opacity: .8; }
.admin-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.admin-form label { font-size: .85rem; opacity: .7; }
.admin-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-event-item { font-size: .82rem; }
.admin-event-type { font-weight: 600; color: #00C4CC; }
.admin-muted { opacity: .5; font-size: .78rem; }
.admin-form .admin-btn { align-self: flex-start; }
@media (max-width: 600px) {
  .admin-modal { width: 100vw; max-height: 100vh; border-radius: 0; }
  .admin-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .admin-tab { white-space: nowrap; }
}


/* ==========================================================================
   SECTION TÉMOIGNAGES & AVIS CLIENTS (SOCIAL COMMENTS CAROUSEL — 1 SEULE LIGNE)
   ========================================================================== */
.testi-section {
  position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(125, 42, 232, 0.05) 0%, rgba(245, 248, 255, 0.75) 50%, var(--bg) 100%);
  padding: 96px 0 90px;
  overflow: hidden;
}

.testi-section .section-heading {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

/* ---- Carousel Shell (1 seule ligne avec boutons flèches) ---- */
.testi-carousel {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 54px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.testi-viewport {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 16px 8px 28px;
}
.testi-viewport::-webkit-scrollbar { display: none; }

.testi-track {
  display: flex;
  gap: 22px;
  width: max-content;
}

/* Flèches de navigation manuelle */
.testi-nav {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(125, 42, 232, 0.22);
  background: #FFFFFF;
  color: var(--purple);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 20, 56, 0.08);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  display: grid;
  place-items: center;
  user-select: none;
  z-index: 5;
}
.testi-nav:hover {
  background: var(--grad);
  color: #FFFFFF;
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(125, 42, 232, 0.28);
}
.testi-nav:active {
  transform: scale(0.95);
}

/* Points indicateurs (dots) */
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px auto 0;
  max-width: 860px;
}
.testi-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(125, 42, 232, 0.22);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease, border-radius 0.25s ease;
}
.testi-dots span.active {
  width: 26px;
  border-radius: 999px;
  background: var(--grad);
}

/* ---- Cartes Commentaires Réseaux Sociaux Réalistes ---- */
.tc-card {
  width: 360px;
  max-width: 85vw;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1px solid rgba(227, 233, 245, 0.95);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(16, 20, 56, 0.05);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  user-select: none;
  font-family: inherit;
  position: relative;
}
.tc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(16, 20, 56, 0.1);
}

/* Thème Facebook */
.tc-card[data-platform="facebook"] {
  border-top: 4px solid #1877F2;
}
.tc-card[data-platform="facebook"]:hover {
  border-color: rgba(24, 119, 242, 0.35);
  box-shadow: 0 14px 34px rgba(24, 119, 242, 0.12);
}
.tc-card[data-platform="facebook"] .tc-avatar {
  background: linear-gradient(135deg, #1877F2, #0d5ec4);
}

/* Thème Instagram */
.tc-card[data-platform="instagram"] {
  border-top: 4px solid #E1306C;
}
.tc-card[data-platform="instagram"]:hover {
  border-color: rgba(225, 48, 108, 0.35);
  box-shadow: 0 14px 34px rgba(225, 48, 108, 0.12);
}
.tc-card[data-platform="instagram"] .tc-avatar {
  background: linear-gradient(135deg, #f09433, #dc2743 60%, #bc1888 100%);
}

/* Thème TikTok (Mode Sombre immersif) */
.tc-card[data-platform="tiktok"] {
  background: #14151f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 4px solid #00F2FE;
  color: #F1F1F2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.tc-card[data-platform="tiktok"]:hover {
  border-color: rgba(0, 242, 254, 0.4);
  box-shadow: 0 14px 36px rgba(0, 242, 254, 0.15);
}
.tc-card[data-platform="tiktok"] .tc-name { color: #FFFFFF; }
.tc-card[data-platform="tiktok"] .tc-handle { color: #8A8B91; }
.tc-card[data-platform="tiktok"] .tc-text { color: #E1E2E8; }
.tc-card[data-platform="tiktok"] .tc-foot { border-top-color: rgba(255, 255, 255, 0.08); color: #8A8B91; }
.tc-card[data-platform="tiktok"] .tc-avatar {
  background: linear-gradient(135deg, #00F2FE, #FE2C55);
}

/* En-tête de commentaire */
.tc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.05rem;
  font-family: var(--font-display);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  background: #E2E8F0;
}
.tc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-meta {
  flex: 1;
  min-width: 0;
}
.tc-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.25;
}
.tc-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #1D9BF0;
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 900;
  flex-shrink: 0;
}
.tc-card[data-platform="tiktok"] .tc-verified-badge {
  background: #20D5EC;
}
.tc-handle {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 1px 0 0;
  display: block;
}

.tc-platform-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(16, 20, 56, 0.04);
}
.tc-card[data-platform="tiktok"] .tc-platform-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

/* Texte du commentaire */
.tc-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #2D3748;
  margin: 0 0 16px;
  word-wrap: break-word;
  flex: 1;
}

/* Pied du commentaire */
.tc-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  padding-top: 10px;
  border-top: 1px solid rgba(227, 233, 245, 0.8);
  margin-top: auto;
}
.tc-time {
  opacity: 0.85;
}
.tc-action {
  cursor: pointer;
  transition: color 0.15s ease;
}
.tc-action:hover {
  text-decoration: underline;
}
.tc-likes {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.8rem;
}
.tc-card[data-platform="facebook"] .tc-likes { color: #1877F2; }
.tc-card[data-platform="instagram"] .tc-likes { color: #E1306C; }
.tc-card[data-platform="tiktok"] .tc-likes { color: #FE2C55; }

/* Responsive */
@media (max-width: 900px) {
  .testi-carousel {
    padding: 0 16px;
  }
  .testi-nav {
    display: none;
  }
  .tc-card {
    width: 310px;
  }
}

/* ---- Synthèse de notation ---- */
.testi-summary {
  max-width: 860px;
  margin: 48px auto 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.92));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(125, 42, 232, 0.18);
  border-radius: 24px;
  padding: 32px 42px;
  box-shadow: 0 16px 45px rgba(16, 20, 56, 0.08);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}

.testi-summary-score { text-align: center; min-width: 120px; }
.testi-big-score {
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}
.testi-summary-stars { color: #F59E0B; font-size: 1.2rem; margin: 8px 0 4px; letter-spacing: 3px; }
.testi-summary-score p { margin: 0; font-size: 0.82rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }

.testi-summary-bars { display: flex; flex-direction: column; gap: 7px; }
.testi-bar-row { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.testi-bar-row span:first-child { width: 32px; text-align: right; flex-shrink: 0; }
.testi-bar-row span:last-child { width: 34px; text-align: left; flex-shrink: 0; }
.testi-bar { flex: 1; height: 8px; background: #E5E7EB; border-radius: 999px; overflow: hidden; position: relative; }
.testi-bar-fill { height: 100%; width: var(--w); background: linear-gradient(90deg, #F59E0B, #10B981); border-radius: 999px; transition: width 0.8s ease; }

.testi-summary-meta { display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--border); padding-left: 32px; }
.testi-meta-item strong { display: block; font-size: 1.45rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.testi-meta-item span { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .testi-section { padding: 70px 0 60px; }
  .testi-summary { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .testi-summary-meta { flex-direction: row; justify-content: space-around; border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 20px; }
  .testi-meta-item { text-align: center; }
}

@media (max-width: 600px) {
  .testi-card { width: 295px; padding: 16px 18px; border-radius: 14px; }
  .testi-avatar { width: 36px; height: 36px; font-size: 0.95rem; }
  .testi-name { font-size: 0.88rem; }
  .testi-text { font-size: 0.86rem; }
  .testi-track { gap: 14px; }
  .testi-big-score { font-size: 2.8rem; }
  .testi-summary { padding: 20px 16px; margin-top: 36px; border-radius: 18px; }
}

/* ==========================================================================
   SECTION BANNER SHOWCASE (FULL BLEED - CORNER TO CORNER / MAN L9ONT L9ONT)
   ========================================================================== */
.section-banner {
  padding: 0 0 70px 0;
  background: radial-gradient(circle at 50% 60%, rgba(125, 42, 232, 0.08) 0%, rgba(248, 250, 252, 0) 70%), #FFFFFF;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.banner-fullwidth {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  background: #0B0E23;
  line-height: 0;
  border-radius: 0;
  box-shadow: 0 16px 45px -10px rgba(125, 42, 232, 0.28);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.banner-fullwidth:hover {
  filter: brightness(1.03);
}

.banner-fullwidth .banner-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 !important;
  margin: 0;
  padding: 0;
  image-rendering: auto;
}

.banner-cta-wrap {
  max-width: 820px;
  margin: 36px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.banner-cta-heading {
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
}

.banner-cta-wrap .btn-hero {
  min-height: 58px;
  padding: 16px 42px;
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(125, 42, 232, 0.38);
  letter-spacing: -0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner-cta-wrap .btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 45px rgba(125, 42, 232, 0.52);
}

.banner-cta-sub {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748B;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .section-banner {
    padding: 0 0 40px 0;
  }
  .banner-fullwidth .banner-img {
    border-radius: 0 !important;
  }
  .banner-cta-wrap {
    margin-top: 20px;
    gap: 12px;
  }
  .banner-cta-heading {
    font-size: 1.15rem;
    padding: 0 8px;
    line-height: 1.3;
  }
  .banner-cta-wrap .btn-hero {
    width: 100%;
    max-width: 360px;
    min-height: 52px;
    font-size: 0.98rem;
    padding: 14px 18px;
  }
  .banner-cta-sub {
    font-size: 0.74rem;
    padding: 0 8px;
  }
}