/* =============================================================
   IPTV PRO — MAIN STYLESHEET
   Design system Stripe-inspiré → CSS réel (variables + composants)
   Mobile-first · Core Web Vitals · zéro dépendance JS
   ============================================================= */

/* ---------- 1. DESIGN TOKENS (CSS Variables) ---------- */
:root {
    /* Couleurs — marque & accent */
    --primary: #533afd;
    --primary-deep: #4434d4;
    --primary-press: #2e2b8c;
    --primary-soft: #665efd;
    --primary-subdued: #b9b9f9;
    --brand-dark-900: #1c1e54;
    --ruby: #ea2261;
    --magenta: #f96bee;
    --lemon: #9b6829;
    --shadow-blue: #003770;

    /* Surfaces */
    --canvas: #ffffff;
    --canvas-soft: #f6f9fc;
    --canvas-cream: #f5e9d4;
    --hairline: #e3e8ee;
    --hairline-input: #a8c3de;

    /* Texte */
    --ink: #0d253d;
    --ink-secondary: #273951;
    --ink-mute: #64748d;
    --ink-mute-2: #61718a;
    --on-primary: #ffffff;

    /* Typographie */
    --font-sans: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;

    /* Rayons */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 9999px;

    /* Spacing (base 8px) */
    --s-xxs: 2px;
    --s-xs: 4px;
    --s-sm: 8px;
    --s-md: 12px;
    --s-lg: 16px;
    --s-xl: 24px;
    --s-xxl: 32px;
    --s-huge: 64px;

    /* Élévation */
    --shadow-1: 0 1px 3px rgba(0,55,112,0.08);
    --shadow-2: 0 8px 24px rgba(0,55,112,0.08), 0 2px 6px rgba(0,55,112,0.04);

    /* Layout */
    --container: 1200px;
    --container-narrow: 760px;
}

/* ---------- 2. RESET & BASE ---------- */
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0 0 var(--s-lg); padding-left: 1.25em; }
p { margin: 0 0 var(--s-lg); }
strong { font-weight: 600; }

/* ---------- 3. TYPOGRAPHIE (échelle Stripe) ---------- */
h1, .display-xxl {
    font-size: clamp(2.25rem, 6vw, 3.5rem); /* 36 → 56px */
    font-weight: 300;
    line-height: 1.03;
    letter-spacing: -1.4px;
    margin: 0 0 var(--s-xl);
    color: var(--ink);
}
h2, .display-xl {
    font-size: clamp(1.75rem, 4vw, 3rem); /* 28 → 48px */
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.96px;
    margin: 0 0 var(--s-lg);
    color: var(--ink);
}
h3, .display-lg {
    font-size: clamp(1.375rem, 3vw, 2rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.64px;
    margin: 0 0 var(--s-md);
    color: var(--ink);
}
h4, .display-md {
    font-size: 1.625rem;
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.26px;
    margin: 0 0 var(--s-md);
}
h5 { font-size: 1.375rem; font-weight: 300; letter-spacing: -0.22px; line-height: 1.1; }
h6 { font-size: 1.125rem; font-weight: 400; line-height: 1.4; }

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--primary-deep);
    margin-bottom: var(--s-md);
}

.lead {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.5;
    color: var(--ink-secondary);
}

.tnum { font-feature-settings: "tnum"; letter-spacing: -0.42px; }

/* ---------- 4. LAYOUT ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-xl);
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(48px, 8vw, 96px); }
.section-soft { background: var(--canvas-soft); }
.section-cream { background: var(--canvas-cream); }
.section-dark { background: var(--brand-dark-900); color: var(--on-primary); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--on-primary); }

.grid { display: grid; gap: var(--s-xl); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-xl { margin-top: var(--s-xl); }
.mb-0 { margin-bottom: 0; }

/* ---------- 5. GRADIENT MESH (signature) ---------- */
.mesh {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.mesh::before {
    content: "";
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 70%;
    z-index: -1;
    background:
        radial-gradient(40% 60% at 10% 20%, rgba(245,233,212,0.9) 0%, transparent 60%),
        radial-gradient(40% 50% at 35% 10%, rgba(155,104,41,0.35) 0%, transparent 55%),
        radial-gradient(45% 60% at 60% 15%, rgba(102,94,253,0.45) 0%, transparent 60%),
        radial-gradient(40% 55% at 80% 10%, rgba(83,58,253,0.5) 0%, transparent 55%),
        radial-gradient(45% 60% at 95% 25%, rgba(234,34,97,0.4) 0%, transparent 60%),
        radial-gradient(50% 60% at 50% 0%, rgba(249,107,238,0.3) 0%, transparent 60%);
    filter: blur(40px) saturate(1.1);
}

/* ---------- 6. BOUTONS (pills) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-sm);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    padding: 12px 20px;
    min-height: 44px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-deep); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-press); }

.btn-secondary { background: var(--canvas); color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover { background: var(--primary); color: var(--on-primary); }

.btn-on-dark { background: var(--brand-dark-900); color: var(--on-primary); }
.btn-ghost { background: transparent; color: var(--ink); }

.btn-lg { font-size: 1.0625rem; padding: 14px 28px; min-height: 52px; }
.btn-block { display: flex; width: 100%; }

/* Boutons de commande par messagerie */
.btn-order { background: #25d366; color: #fff; }
.btn-order:hover { background: #1da851; color: #fff; }
.btn-order svg { width: 20px; height: 20px; }
.btn-telegram { background: #229ed9; color: #fff; }
.btn-telegram:hover { background: #1b83b5; color: #fff; }
/* Variante discrète : contour, pour accompagner le bouton principal */
.btn-telegram-outline { background: var(--canvas); color: #1b83b5; border-color: var(--hairline); }
.btn-telegram-outline:hover { background: #229ed9; color: #fff; border-color: #229ed9; }

/* Boutons de contact flottants (empilés, à gauche) */
.floating-contacts {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 900;
    display: flex;
    flex-direction: column-reverse; /* WhatsApp en haut, Telegram en dessous */
    gap: var(--s-md);
}
.contact-float {
    width: 56px;
    height: 56px;
    border-radius: var(--r-pill);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
    transition: transform .15s ease;
}
.contact-float:hover { transform: scale(1.06); }
.contact-float svg { width: 30px; height: 30px; }
.contact-whatsapp { background: #25d366; }
.contact-telegram { background: #229ed9; }

/* ---------- 7. CARTES ---------- */
.card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--s-xxl);
    box-shadow: var(--shadow-1);
}
.card-cream { background: var(--canvas-cream); border-color: transparent; }
.card-feature { display: flex; flex-direction: column; gap: var(--s-md); }
.card-feature .icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--primary-subdued);
    color: var(--primary-deep);
}
.card-feature .icon svg { width: 24px; height: 24px; }

/* Pill tag */
.pill-tag {
    display: inline-block;
    background: var(--primary-subdued);
    color: var(--primary-deep);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--r-pill);
}

/* ---------- 8. PRICING ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-xl); align-items: stretch; }
/* Trois abonnements (3, 6, 12 mois) : grille centrée à 3 colonnes */
.pricing-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin-inline: auto; }
.pricing-card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: clamp(var(--s-lg), 2.2vw, var(--s-xxl));
    display: flex;
    flex-direction: column;
    min-width: 0; /* sans ca, un contenu large fait deborder la grille */
}
/* 4 colonnes uniquement quand il y a vraiment la place */
@media (max-width: 1120px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
.pricing-card.featured { background: var(--brand-dark-900); color: var(--on-primary); border-color: transparent; box-shadow: var(--shadow-2); }
.pricing-card.featured .price, .pricing-card.featured h3 { color: var(--on-primary); }
.pricing-card .tier-name { font-size: 1.375rem; font-weight: 300; letter-spacing: -0.22px; margin: 0 0 var(--s-sm); }
.pricing-card .price { font-size: 1.625rem; font-weight: 300; letter-spacing: -0.26px; font-feature-settings: "tnum"; }
.pricing-card .price small { font-size: 0.875rem; color: var(--ink-mute); }
.pricing-card.featured .price small { color: var(--primary-subdued); }
.pricing-card ul { list-style: none; padding: 0; margin: var(--s-lg) 0; flex: 1; }
.pricing-card li { display: flex; gap: var(--s-sm); padding: var(--s-xs) 0; font-size: 0.9375rem; }
.pricing-card li::before { content: "✓"; color: var(--primary-soft); font-weight: 700; flex: 0 0 auto; }
/* Fonctionnalité absente de l'offre Standard */
.pricing-card li.feat-off { color: var(--ink-mute); opacity: .6; }
.pricing-card li.feat-off::before { content: "✕"; color: var(--ink-mute); }
.pricing-card.featured li.feat-off { color: rgba(255,255,255,.45); }
.pricing-card.featured li.feat-off::before { color: rgba(255,255,255,.45); }

/* Sélecteur de serveur dans les cartes */
.pt-server { display: flex; gap: 4px; background: var(--canvas-soft); border-radius: var(--r-pill); padding: 4px; margin: var(--s-md) 0 var(--s-lg); }
.pricing-card.featured .pt-server { background: rgba(255,255,255,0.1); }
.pt-srv { flex: 1; border: 0; background: transparent; border-radius: var(--r-pill); padding: 8px 6px; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; color: var(--ink-mute); cursor: pointer; transition: .15s; }
.pricing-card.featured .pt-srv { color: var(--primary-subdued); }
.pt-srv.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-1); }
.pricing-card.featured .pt-srv.active { background: #fff; color: var(--brand-dark-900); }
.pricing-card .btn { margin-top: auto; }

/* Badge 4K dans le titre de la carte */
.pt-4k { font-size: 0.625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-deep); background: var(--primary-subdued); padding: 3px 7px; border-radius: var(--r-pill); vertical-align: middle; margin-left: 4px; }
.pricing-card.featured .pt-4k { color: #fff; background: rgba(255,255,255,0.18); }

.pt-sub { font-size: 0.8125rem; color: var(--ink-mute); margin-top: 2px; }
.pricing-card.featured .pt-sub { color: var(--primary-subdued); }

/* Stepper de connexions */
.pt-stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); margin-top: var(--s-lg); padding: var(--s-sm) var(--s-md); background: var(--canvas-soft); border-radius: var(--r-md); }
.pricing-card.featured .pt-stepper { background: rgba(255,255,255,0.08); }
.pt-stepper-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-secondary); }
.pricing-card.featured .pt-stepper-label { color: #fff; }
.pt-stepper-controls { display: flex; align-items: center; gap: var(--s-sm); }
.pt-minus, .pt-plus { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--canvas); color: var(--primary); font-size: 1.125rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: .12s; }
.pt-minus:hover:not(:disabled), .pt-plus:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.pt-minus:disabled, .pt-plus:disabled { opacity: .35; cursor: not-allowed; }
.pt-count { min-width: 20px; text-align: center; font-weight: 600; font-size: 1rem; }
.pricing-card.featured .pt-count { color: #fff; }

.pt-save { display: inline-block; align-self: flex-start; margin-top: var(--s-md); background: rgba(0,182,122,0.12); color: #00875a; font-size: 0.8125rem; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); }
.pt-save[hidden] { display: none; }
.pricing-card.featured .pt-save { background: rgba(255,255,255,0.15); color: #7bf5c4; }

/* ---------- 9. HEADER / NAV ---------- */
/* Bloc supérieur collant : bandeau d'annonce + header */
.site-top { position: sticky; top: 0; z-index: 800; }

/* Bandeau d'annonce (offre du moment) */
.announce-bar {
    background: linear-gradient(90deg, var(--primary), var(--primary-deep));
    color: #fff;
}
.announce-inner { display: flex; align-items: center; justify-content: center; gap: var(--s-md); padding-block: 8px; position: relative; }
.announce-text { font-size: 0.875rem; }
.announce-text strong { font-weight: 600; }
.announce-cta { color: #fff; font-size: 0.875rem; font-weight: 600; white-space: nowrap; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }
.announce-cta:hover { color: #fff; border-bottom-color: #fff; text-decoration: none; }
.announce-close { position: absolute; right: var(--s-lg); background: none; border: 0; color: rgba(255,255,255,.75); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 4px; }
.announce-close:hover { color: #fff; }
.announce-bar[hidden] { display: none; }

.site-header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--hairline);
}

@media (max-width: 600px) {
    .announce-cta { display: none; } /* place réduite : on garde le message + la croix */
    .announce-text { font-size: 0.8125rem; padding-right: 20px; }
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--s-md);
    gap: var(--s-lg);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 64px; height: 64px; display: block; flex: 0 0 auto;
    object-fit: contain;
    transition: transform .18s ease;
}
.brand:hover .brand-mark { transform: scale(1.06); }

/* Logo plus imposant dans le footer */
.site-footer .brand-mark { width: 78px; height: 78px; }

@media (max-width: 767px) {
    .brand-mark { width: 48px; height: 48px; }
    .site-footer .brand-mark { width: 64px; height: 64px; }
}
.nav-menu { display: flex; align-items: center; gap: var(--s-lg); list-style: none; margin: 0; padding: 0; }
.nav-menu a { color: var(--ink-secondary); font-size: 0.9375rem; white-space: nowrap; }
.nav-menu a:hover { color: var(--primary); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: var(--s-sm); }
.nav-actions .btn { padding: 10px 16px; min-height: 40px; font-size: 0.9375rem; white-space: nowrap; }


@media (max-width: 1180px) {
    .nav-menu { gap: var(--s-md); }
    .nav-menu a { font-size: 0.875rem; }
}

/* Menu déroulant « Plus » */
.nav-has-dropdown { position: relative; }
.nav-more {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; cursor: pointer; padding: 0;
    font-family: var(--font-sans); font-size: 0.9375rem; color: var(--ink-secondary);
}
.nav-more:hover { color: var(--primary); }
.nav-more svg { transition: transform .18s ease; }
.nav-has-dropdown.open .nav-more { color: var(--primary); }
.nav-has-dropdown.open .nav-more svg { transform: rotate(180deg); }

.nav-dropdown {
    display: none; position: absolute; top: calc(100% + 14px); right: 0; z-index: 50;
    min-width: 268px; list-style: none; margin: 0; padding: var(--s-sm);
    background: var(--canvas); border: 1px solid var(--hairline);
    border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.nav-has-dropdown.open .nav-dropdown { display: block; animation: ddIn .16s ease; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
    display: block; padding: 10px 14px; border-radius: var(--r-md);
    font-size: 0.9375rem; color: var(--ink-secondary); white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--canvas-soft); color: var(--primary); text-decoration: none; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--s-sm); }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; transition: .2s; }


/* Navigation repliee des la tablette : 9 entrees + 2 boutons ne tiennent pas */
@media (max-width: 1023px) {
    .nav-menu {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start;
        background: var(--canvas); border-bottom: 1px solid var(--hairline);
        padding: var(--s-lg) var(--s-xl); gap: var(--s-lg);
        max-height: calc(100vh - 80px); overflow-y: auto;
    }
    .nav-menu.open { display: flex; }
    .nav-menu a { font-size: 1rem; }
    .nav-toggle { display: block; order: 3; }
    .nav-actions { order: 2; margin-left: auto; }
    .nav-actions .btn-trial { display: none; }
    .nav-dropdown {
        position: static; display: block; min-width: 0;
        box-shadow: none; border: 0; padding: 0 0 0 var(--s-md); background: transparent;
    }
    .nav-has-dropdown { width: 100%; }
    .nav-dropdown a { padding: 8px 0; font-size: 0.9375rem; }
}

/* ---------- 10. HERO ---------- */
.hero { padding-block: clamp(56px, 10vw, 110px) clamp(48px, 8vw, 80px); }
.hero-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-huge); align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lead { max-width: 48ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-top: var(--s-xl); }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--s-lg) var(--s-xl); margin-top: var(--s-xxl); color: var(--ink-mute); font-size: 0.875rem; }
.trust-row .item { display: flex; align-items: center; gap: var(--s-sm); }

/* Mockup TV vectoriel */
.hero-mockup { position: relative; }
.mockup-screen {
	background: linear-gradient(160deg, #20224e 0%, var(--brand-dark-900) 100%);
	border-radius: var(--r-xl);
	padding: var(--s-lg);
	box-shadow: var(--shadow-2);
	border: 1px solid rgba(255,255,255,0.08);
}
.mockup-bar { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s-md); }
.mockup-bar > span { width: 9px; height: 9px; border-radius: var(--r-pill); background: rgba(255,255,255,0.25); }
.mockup-bar > span:nth-child(1) { background: #ff5f57; }
.mockup-bar > span:nth-child(2) { background: #febc2e; }
.mockup-bar > span:nth-child(3) { background: #28c840; }
.mockup-live { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #ff6b81; }
.mockup-live em { width: 6px; height: 6px; border-radius: var(--r-pill); background: #ff4d6d; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Programme en cours */
.mockup-feature {
	display: flex; align-items: center; gap: var(--s-md);
	padding: var(--s-md); border-radius: var(--r-md); margin-bottom: var(--s-md);
	background:
		radial-gradient(70% 140% at 0% 0%, rgba(102,94,253,.65), transparent 65%),
		radial-gradient(80% 140% at 100% 100%, rgba(234,34,97,.45), transparent 65%),
		linear-gradient(120deg, #3b3aa0, #533afd);
}
.mockup-play { width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: var(--primary); display: grid; place-items: center; }
.mockup-play svg { width: 20px; height: 20px; margin-left: 2px; }
.mockup-feature-meta { min-width: 0; flex: 1; }
.mockup-chip { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.22); padding: 2px 7px; border-radius: var(--r-pill); }
.mockup-feature-meta strong { display: block; color: #fff; font-size: 0.9375rem; font-weight: 500; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockup-progress { height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.25); margin-top: 8px; overflow: hidden; }
.mockup-progress i { display: block; height: 100%; width: 62%; border-radius: var(--r-pill); background: #fff; }

/* Catégories */
.mockup-cats { display: flex; gap: 6px; margin-bottom: var(--s-md); overflow: hidden; }
.mockup-cats span { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.6); background: rgba(255,255,255,.07); padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.mockup-cats span.active { background: var(--primary); color: #fff; }

/* Chaînes */
.mockup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-sm); }
.mockup-ch { display: flex; align-items: center; gap: var(--s-sm); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r-sm); padding: 8px 10px; min-width: 0; }
.mockup-ch-logo { width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--r-xs); background: linear-gradient(135deg, var(--primary-soft), var(--primary)); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.mockup-ch-info { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.mockup-ch-info strong { color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockup-ch-info em { color: rgba(255,255,255,.45); font-size: 9px; font-style: normal; }
.mockup-ch-q { font-size: 8px; font-weight: 700; color: var(--primary-subdued); background: rgba(102,94,253,.28); padding: 2px 5px; border-radius: 3px; flex: 0 0 auto; }
.mockup-badge {
	position: absolute; right: -12px; bottom: -14px;
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--canvas); color: var(--ink);
	font-size: 0.8125rem; font-weight: 600;
	padding: 10px 14px; border-radius: var(--r-pill);
	box-shadow: var(--shadow-2); border: 1px solid var(--hairline);
}
.mockup-badge svg { width: 16px; height: 16px; color: var(--primary); }

/* ---------- 11. FAQ (accordéon SEO) ---------- */
.faq { max-width: var(--container-narrow); margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: var(--s-lg) 0;
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    gap: var(--s-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--primary); font-size: 1.5rem; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-body { padding-bottom: var(--s-lg); color: var(--ink-secondary); line-height: 1.6; }

/* ---------- 12. CONTENU SEO (prose) ---------- */
.prose { max-width: var(--container-narrow); margin-inline: auto; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-secondary); }
.prose h2 { margin-top: var(--s-huge); }
.prose h3 { margin-top: var(--s-xxl); }
.prose a { text-decoration: underline; }
.prose img { border-radius: var(--r-lg); margin-block: var(--s-xl); }
.prose ul li, .prose ol li { margin-bottom: var(--s-sm); }

/* Internal links bloc */
.related-links { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-md); margin-top: var(--s-xl); }
.related-links a {
    display: block; padding: var(--s-lg);
    border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--canvas); color: var(--ink); font-size: 0.9375rem;
}
.related-links a:hover { border-color: var(--primary); text-decoration: none; }

/* ---------- 13. BREADCRUMB ---------- */
.breadcrumb { font-size: 0.8125rem; color: var(--ink-mute); padding-block: var(--s-md); }
.breadcrumb a { color: var(--ink-mute); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { margin-inline: var(--s-xs); }

/* ---------- 14. TRUST / AVIS (carrousel auto-défilant) ---------- */
.reviews-marquee { display: flex; flex-direction: column; gap: var(--s-lg); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews-track { display: flex; gap: var(--s-lg); width: max-content; animation: reviewScroll 55s linear infinite; }
.reviews-track-rev { animation-duration: 65s; animation-direction: reverse; }
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }

@keyframes reviewScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.review-card { flex: 0 0 340px; box-sizing: border-box; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--s-md); }
.review-top { display: flex; align-items: center; justify-content: space-between; }
.review-card .stars { color: #00b67a; letter-spacing: 2px; }
.review-date { font-size: 0.75rem; color: var(--ink-mute); }
.review-text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-secondary); }
.review-author { display: flex; align-items: center; gap: var(--s-md); margin-top: auto; }
.review-avatar { width: 40px; height: 40px; border-radius: var(--r-pill); color: #fff; font-size: 0.8125rem; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.review-author strong { font-size: 0.9375rem; }
.review-loc { font-size: 0.75rem; color: var(--ink-mute); }

@media (max-width: 767px) { .review-card { flex-basis: 280px; } }

/* ---------- 15. BLOG ---------- */

/* Hero du blog */
.blog-hero {
	position: relative; overflow: hidden;
	background: var(--brand-dark-900); color: #fff;
	padding-block: clamp(56px, 8vw, 96px);
}
.blog-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(80% 100% at 15% 0%, #000, transparent 70%);
	-webkit-mask-image: radial-gradient(80% 100% at 15% 0%, #000, transparent 70%);
}
.blog-hero::after {
	content: ""; position: absolute; right: -10%; top: -40%; width: 60%; height: 160%;
	pointer-events: none; filter: blur(70px); opacity: .35;
	background: radial-gradient(circle, rgba(102,94,253,.9), transparent 65%);
}
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero .eyebrow { color: var(--primary-soft); }
.blog-hero h1 { color: #fff; margin-bottom: var(--s-md); max-width: 18ch; }
.blog-hero-lead { color: rgba(255,255,255,.62); font-size: 1.0625rem; line-height: 1.6; max-width: 62ch; margin: 0; }

/* Bloc d'intro */
.blog-intro {
	max-width: 820px; margin: 0 auto var(--s-huge);
	background: var(--canvas-soft); border: 1px solid var(--hairline);
	border-radius: var(--r-xl); padding: clamp(var(--s-xl), 4vw, var(--s-xxl));
}
.blog-intro h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.2px; margin-bottom: var(--s-lg); }
.blog-intro p { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-mute); margin-bottom: var(--s-md); }
.blog-intro p:last-child { margin-bottom: 0; }

/* Grille de cartes */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); }
.blog-card {
	position: relative; display: flex; flex-direction: column; gap: var(--s-md);
	background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	padding: var(--s-xl);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--primary-subdued); box-shadow: var(--shadow-2); }
.blog-card-cat {
	align-self: flex-start;
	font-size: 0.6875rem; font-weight: 600; letter-spacing: .04em;
	color: var(--primary-deep); background: var(--primary-subdued);
	padding: 5px 12px; border-radius: var(--r-pill);
}
.blog-card h2.blog-card-title { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.2px; line-height: 1.35; margin: 0; }
.blog-card h2.blog-card-title a { color: var(--ink); text-decoration: none; }
.blog-card:hover h2.blog-card-title a { color: var(--primary-deep); }
.blog-card-excerpt { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-mute); margin: 0; flex: 1; }
.blog-card-meta {
	display: flex; justify-content: space-between; align-items: center; gap: var(--s-md);
	font-size: 0.8125rem; color: var(--ink-mute);
	padding-top: var(--s-md); border-top: 1px solid var(--hairline);
}
/* Toute la carte est cliquable */
.blog-card-link { position: absolute; inset: 0; border-radius: var(--r-lg); }

/* Pagination */
.pagination .nav-links, .navigation .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-sm); }
.pagination .page-numbers, .navigation .page-numbers {
	display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	color: var(--ink-secondary); font-size: 0.9375rem; text-decoration: none;
}
.pagination .page-numbers:hover, .navigation .page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.pagination .page-numbers.current, .navigation .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Ancienne grille (compat single.php « À lire aussi ») */
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-xl); }
.post-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.post-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.post-card .body { padding: var(--s-lg); display: flex; flex-direction: column; gap: var(--s-sm); flex: 1; }
.post-card h3 { font-size: 1.25rem; letter-spacing: -0.3px; margin: 0; }
.post-card .meta { font-size: 0.8125rem; color: var(--ink-mute); margin-top: auto; }

@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- 16. FOOTER ---------- */
.site-footer { background: var(--canvas); border-top: 1px solid var(--hairline); padding-block: var(--s-huge); color: var(--ink-mute); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--s-xl); }
.footer-grid h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-secondary); font-weight: 600; margin-bottom: var(--s-md); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--s-sm); }
.footer-grid a { color: var(--ink-mute); font-size: 0.875rem; }
.footer-grid a:hover { color: var(--primary); }
.footer-legal { border-top: 1px solid var(--hairline); margin-top: var(--s-xxl); padding-top: var(--s-lg); font-size: 0.8125rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-md); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--s-sm) var(--s-lg); }
.footer-legal-links a { color: var(--ink-mute); }
.footer-legal-links a:hover { color: var(--primary); }

/* ---------- 16b. NOUVELLES SECTIONS (style concurrents) ---------- */

/* Barre de stats */
.stats-bar { background: var(--brand-dark-900); color: var(--on-primary); padding-block: var(--s-xxl); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg); text-align: center; }
.stat-num { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 300; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.stat-label { font-size: 0.875rem; color: var(--primary-subdued); margin-top: var(--s-sm); }

/* Bibliothèque de contenu */
.lib-card { display: flex; flex-direction: column; gap: var(--s-md); }
.lib-card .icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--primary-subdued); color: var(--primary-deep); }
.lib-card .icon svg { width: 24px; height: 24px; }
.lib-count { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.03em; color: var(--primary); line-height: 1; }

/* Appareils — double marquee animé */
.devices-marquee {
	display: flex; flex-direction: column; gap: var(--s-md); overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.devices-track { display: flex; gap: var(--s-md); width: max-content; animation: deviceScroll 42s linear infinite; }
.devices-track-rev { animation-duration: 52s; animation-direction: reverse; }
.devices-marquee:hover .devices-track { animation-play-state: paused; }

@keyframes deviceScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.device-chip {
	display: inline-flex; align-items: center; gap: var(--s-sm);
	flex: 0 0 auto; white-space: nowrap;
	background: var(--canvas); border: 1px solid var(--hairline);
	border-radius: var(--r-pill); padding: 12px 20px 12px 12px;
	font-size: 0.9375rem; font-weight: 500; color: var(--ink-secondary);
	box-shadow: var(--shadow-1);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.device-chip:hover {
	transform: translateY(-4px);
	border-color: var(--primary);
	color: var(--primary-deep);
	box-shadow: 0 10px 24px rgba(83,58,253,0.18);
}
.device-chip-icon {
	width: 34px; height: 34px; flex: 0 0 auto;
	display: grid; place-items: center; border-radius: var(--r-pill);
	background: var(--canvas-soft); color: var(--primary);
	transition: background .2s ease, color .2s ease;
}
.device-chip:hover .device-chip-icon { background: var(--primary); color: #fff; }
.device-chip-icon svg { width: 19px; height: 19px; }

/* Cartes de contact (WhatsApp / Telegram / Mail) */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); }
.contact-card {
	background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	padding: var(--s-xxl) var(--s-xl); text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: var(--s-md);
	box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.contact-icon { width: 64px; height: 64px; border-radius: var(--r-pill); display: grid; place-items: center; color: #fff; }
.contact-icon svg { width: 34px; height: 34px; }
.contact-icon-whatsapp { background: #25d366; }
.contact-icon-telegram { background: #229ed9; }
.contact-icon-mail { background: linear-gradient(135deg, var(--primary-soft), var(--primary)); border-radius: var(--r-lg); }
.contact-icon-mail svg { width: 30px; height: 30px; }
.contact-card h2.contact-card-title { font-size: 1.375rem; margin: 0; }
.contact-card p { color: var(--ink-mute); font-size: 0.9375rem; margin: 0; flex: 1; }
.contact-card .btn { margin-top: var(--s-sm); }
.contact-delay { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.8125rem; color: var(--ink-mute); border-top: 1px solid var(--hairline); padding-top: var(--s-md); width: 100%; }
.contact-delay .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: #00b67a; }

/* Bandeau de réassurance page contact */
.contact-reassure { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-lg) var(--s-xxl); padding: var(--s-xl); background: var(--canvas-soft); border-radius: var(--r-lg); }
.contact-reassure span { display: flex; align-items: center; gap: var(--s-sm); font-size: 0.9375rem; color: var(--ink-secondary); }
.contact-reassure svg { width: 20px; height: 20px; color: var(--primary); }

@media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* Badge note (Trustpilot-like) */
.rating-badge { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: var(--s-md); font-size: 0.9375rem; }
.rating-badge .stars { color: #00b67a; letter-spacing: 2px; font-size: 1.125rem; }

/* Logos de paiement */
.footer-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); margin-top: var(--s-xxl); }
.pay-logos { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.pay-chip { font-size: 0.75rem; font-weight: 600; color: var(--ink-secondary); background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 5px 10px; }

/* Popup promo */
.promo-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(13,37,61,0.55); display: flex; align-items: center; justify-content: center; padding: var(--s-lg); backdrop-filter: blur(3px); }
.promo-overlay[hidden] { display: none; }
.promo-modal { background: var(--canvas); border-radius: var(--r-xl); padding: var(--s-xxl); max-width: 420px; width: 100%; position: relative; box-shadow: var(--shadow-2); text-align: center; animation: promoIn .25s ease; }
.promo-modal .pill-tag { background: var(--ruby); color: #fff; }
.promo-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s-md); border: 1.5px solid var(--hairline); border-radius: var(--r-lg); font-size: 1.75rem; }
.promo-modal .mt-sm { margin-top: var(--s-sm); }
.promo-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 1.75rem; line-height: 1; color: var(--ink-mute); cursor: pointer; }
@keyframes promoIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- 16c. CONFIGURATEUR DYNAMIQUE ---------- */
.configurator { padding: var(--s-xxl); max-width: 960px; margin-inline: auto; }

.cfg-durations { display: flex; gap: var(--s-sm); flex-wrap: wrap; background: var(--canvas-soft); padding: 6px; border-radius: var(--r-pill); width: fit-content; margin: 0 auto var(--s-lg); }

/* Sélecteur de serveur du configurateur */
.cfg-servers { display: flex; gap: var(--s-md); max-width: 520px; margin: 0 auto var(--s-xl); }
.cfg-srv { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; padding: 12px 10px; border: 1.5px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas); cursor: pointer; transition: .15s; }
.cfg-srv strong { font-size: 0.9375rem; color: var(--ink); }
.cfg-srv span { font-size: 0.75rem; color: var(--ink-mute); }
.cfg-srv:hover { border-color: var(--primary-subdued); }
.cfg-srv.active { border-color: var(--primary); background: rgba(83,58,253,0.04); box-shadow: 0 0 0 3px rgba(83,58,253,0.08); }
.cfg-srv.active strong { color: var(--primary-deep); }
@media (max-width: 480px) { .cfg-servers { flex-direction: column; } }
.cfg-dur { border: 0; background: transparent; padding: 10px 20px; border-radius: var(--r-pill); font-size: 0.9375rem; font-weight: 500; color: var(--ink-secondary); cursor: pointer; transition: .15s; }
.cfg-dur.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-1); }

.cfg-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xxl); align-items: start; }

.cfg-price { font-size: clamp(2.5rem, 6vw, 3.25rem); font-weight: 300; letter-spacing: -0.04em; color: var(--primary); line-height: 1; margin-top: var(--s-xs); }
.cfg-sub { color: var(--ink-mute); font-size: 0.9375rem; margin-top: var(--s-sm); }
.cfg-savings { display: inline-block; margin-top: var(--s-md); background: rgba(0,182,122,0.12); color: #00875a; font-size: 0.875rem; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); }
.cfg-savings[hidden] { display: none; }

.cfg-breakdown { margin-top: var(--s-xl); border-top: 1px solid var(--hairline); padding-top: var(--s-lg); }
.cfg-breakdown-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: var(--s-md); }
.cfg-bars { display: flex; flex-direction: column; gap: var(--s-sm); }
.cfg-bar-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--s-sm); font-size: 0.8125rem; color: var(--ink-mute); }
.cfg-bar-row.active { color: var(--ink); font-weight: 600; }
.cfg-bar-track { height: 8px; background: var(--canvas-soft); border-radius: var(--r-pill); overflow: hidden; }
.cfg-bar-fill { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--primary-soft), var(--primary)); }
.cfg-bar-row.active .cfg-bar-fill { background: linear-gradient(90deg, var(--primary), var(--ruby)); }

.cfg-conns { display: flex; gap: var(--s-sm); margin-top: var(--s-sm); }
.cfg-conn { flex: 1; aspect-ratio: 1; border: 1px solid var(--hairline); background: var(--canvas); border-radius: var(--r-md); font-size: 1.125rem; font-weight: 600; color: var(--ink-secondary); cursor: pointer; transition: .15s; }
.cfg-conn:hover { border-color: var(--primary); }
.cfg-conn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-1); }

.cfg-reassure { display: flex; flex-direction: column; gap: var(--s-sm); margin-top: var(--s-xl); }
.cfg-reassure span { display: flex; align-items: center; gap: var(--s-sm); font-size: 0.875rem; color: var(--ink-secondary); }
.cfg-reassure svg { width: 18px; height: 18px; color: var(--primary); }

.cfg-cta { margin-top: var(--s-xl); }

@media (max-width: 767px) {
	.configurator { padding: var(--s-lg); }
	.cfg-body { grid-template-columns: 1fr; gap: var(--s-xl); }
}

/* ---------- 16d. LISTE DE CHAÎNES DYNAMIQUE ---------- */
.channels-hero { padding-block: clamp(48px, 7vw, 80px) var(--s-xl); }
.channels-hero h1 { max-width: 18ch; }
.channels-hero .lead { max-width: 56ch; }

.channels-search { position: relative; display: flex; align-items: center; margin-bottom: var(--s-lg); }
.channels-search svg { position: absolute; left: 16px; color: var(--ink-mute); pointer-events: none; }
.channels-search input {
	width: 100%; padding: 14px 16px 14px 46px; font-size: 1rem; font-family: var(--font-sans);
	border: 1px solid var(--hairline-input); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink);
}
.channels-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83,58,253,0.12); }

.channels-regions { display: flex; gap: var(--s-sm); overflow-x: auto; padding-bottom: var(--s-sm); margin-bottom: var(--s-lg); border-bottom: 1px solid var(--hairline); scrollbar-width: thin; }
.ch-region { flex: 0 0 auto; border: 0; background: transparent; padding: 10px 16px; border-radius: var(--r-pill); font-size: 0.875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; transition: .15s; }
.ch-region:hover { color: var(--primary); }
.ch-region.active { background: var(--primary); color: #fff; }

.channels-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-xl); align-items: start; }
.channels-countries { display: flex; flex-direction: column; gap: 2px; max-height: 620px; overflow-y: auto; padding-right: var(--s-sm); }
.ch-country { text-align: left; border: 0; background: transparent; padding: 10px 14px; border-radius: var(--r-md); font-size: 0.9375rem; color: var(--ink-secondary); cursor: pointer; transition: .12s; }
.ch-country:hover { background: var(--canvas-soft); }
.ch-country.active { background: var(--brand-dark-900); color: #fff; font-weight: 500; }

.channels-count { font-size: 0.875rem; color: var(--ink-mute); margin-bottom: var(--s-lg); }
.channels-count-num { display: inline-block; background: var(--primary); color: #fff; font-weight: 700; padding: 2px 10px; border-radius: var(--r-pill); font-feature-settings: "tnum"; }

.ch-group { margin-bottom: var(--s-xl); }
.ch-group-title { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-deep); background: var(--primary-subdued); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: var(--s-md); }
.ch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-sm); }
.ch-chip { display: flex; align-items: center; gap: var(--s-sm); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 10px 12px; font-size: 0.8125rem; color: var(--ink-secondary); }
.ch-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--ruby); flex: 0 0 auto; }
.channels-empty { text-align: center; color: var(--ink-mute); padding: var(--s-xxl); }
.channels-btn { max-width: 480px; margin-inline: auto; }
.channels-btn svg { width: 20px; height: 20px; }

@media (max-width: 1023px) { .ch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
	.channels-layout { grid-template-columns: 1fr; }
	.channels-countries { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: var(--s-sm); }
	.ch-country { flex: 0 0 auto; }
	.ch-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 16e. GUIDE D'INSTALLATION ---------- */
.guide-promise { display: flex; align-items: center; gap: var(--s-xl); flex-wrap: wrap; }
.guide-promise > svg { width: 40px; height: 40px; flex: 0 0 auto; color: var(--ink); }
.guide-promise > div { flex: 1; min-width: 260px; }
.guide-promise .btn { flex: 0 0 auto; }

.guide-app { display: grid; grid-template-columns: 300px 1fr; gap: var(--s-xl); align-items: start; }

.guide-tabs { display: flex; flex-direction: column; gap: var(--s-sm); position: sticky; top: 90px; }
.guide-tab {
	display: flex; align-items: center; gap: var(--s-md); text-align: left;
	background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md);
	padding: var(--s-md) var(--s-lg); cursor: pointer;
	font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--ink-secondary);
	transition: .15s;
}
.guide-tab:hover { border-color: var(--primary); color: var(--primary-deep); }
.guide-tab svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--primary); }
.guide-tab.active { background: var(--brand-dark-900); border-color: transparent; color: #fff; box-shadow: var(--shadow-1); }
.guide-tab.active svg { color: var(--primary-subdued); }

.guide-panel { display: none; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xxl); box-shadow: var(--shadow-1); }
.guide-panel.active { display: block; animation: guideIn .25s ease; }
@keyframes guideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.guide-panel h3 { margin-top: 0; }
.guide-intro { color: var(--ink-secondary); }
.guide-apps { font-size: 0.875rem; color: var(--ink-mute); background: var(--canvas-soft); border-radius: var(--r-md); padding: var(--s-md); margin-bottom: var(--s-lg); }

.guide-steps { counter-reset: gstep; list-style: none; padding: 0; margin: 0 0 var(--s-lg); }
.guide-steps li {
	counter-increment: gstep; position: relative; padding-left: 46px; margin-bottom: var(--s-md);
	color: var(--ink-secondary); line-height: 1.6;
}
.guide-steps li::before {
	content: counter(gstep); position: absolute; left: 0; top: -2px;
	width: 30px; height: 30px; border-radius: var(--r-pill);
	background: var(--primary-subdued); color: var(--primary-deep);
	font-size: 0.875rem; font-weight: 700; display: grid; place-items: center;
}
.guide-tip {
	display: flex; align-items: flex-start; gap: var(--s-md);
	background: var(--canvas-cream); border-radius: var(--r-md);
	padding: var(--s-md) var(--s-lg); font-size: 0.9375rem; color: var(--ink-secondary);
	margin-bottom: var(--s-lg);
}
.guide-tip svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--lemon); margin-top: 2px; }

/* Timeline étapes universelles */
.guide-timeline { list-style: none; padding: 0; margin: 0; max-width: 760px; margin-inline: auto; position: relative; }
.guide-timeline::before { content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px; background: var(--hairline); }
.guide-timeline li { position: relative; display: flex; gap: var(--s-lg); padding-bottom: var(--s-xl); }
.guide-timeline li:last-child { padding-bottom: 0; }
.tl-num {
	width: 44px; height: 44px; flex: 0 0 auto; z-index: 1;
	border-radius: var(--r-pill); background: var(--primary); color: #fff;
	font-size: 1.0625rem; font-weight: 600; display: grid; place-items: center;
	box-shadow: 0 0 0 5px var(--canvas-soft);
}
.guide-timeline h3 { font-size: 1.1875rem; margin: 8px 0 6px; }
.guide-timeline p { color: var(--ink-secondary); font-size: 0.9375rem; }

@media (max-width: 900px) {
	.guide-app { grid-template-columns: 1fr; }
	.guide-tabs { position: static; flex-direction: row; overflow-x: auto; padding-bottom: var(--s-sm); }
	.guide-tab { flex: 0 0 auto; }
	.guide-tab span { white-space: nowrap; }
	.guide-panel { padding: var(--s-xl); }
}

/* ---------- 16f. BLOC ÉDITORIAL SEO ---------- */
.seo-block { background: var(--canvas-soft); }
.seo-inner {
	max-width: 880px; margin-inline: auto;
	border-left: 3px solid var(--primary);
	padding-left: clamp(var(--s-lg), 4vw, var(--s-xxl));
}
.seo-inner h2 { margin-bottom: var(--s-xl); }
.seo-accent {
	background: linear-gradient(90deg, var(--primary), var(--magenta));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--primary);
}
.seo-inner p {
	font-size: 1.0625rem; line-height: 1.75; color: var(--ink-secondary);
	margin-bottom: var(--s-xl);
}
.seo-inner p:last-child { margin-bottom: 0; }
.seo-inner strong { color: var(--ink); font-weight: 600; }
.seo-inner a { color: var(--primary); text-decoration: none; border-bottom: 1px solid rgba(83,58,253,.3); }
.seo-inner a:hover { border-bottom-color: var(--primary); text-decoration: none; }
.seo-inner a strong { color: var(--primary); }

/* Bloc SEO sous les tarifs */
.pricing-seo { max-width: 900px; margin-inline: auto; padding: clamp(var(--s-xl), 4vw, var(--s-huge)); }
.pricing-seo h2 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); font-weight: 500; letter-spacing: -0.3px; margin-bottom: var(--s-xl); }
.pricing-seo p { font-size: 1rem; line-height: 1.75; color: var(--ink-mute); margin-bottom: var(--s-lg); }
.pricing-seo p:last-child { margin-bottom: 0; }
.pricing-seo strong { color: var(--ink-secondary); font-weight: 600; }

/* ---------- 16g. PAGES LÉGALES ---------- */
.legal-hero {
	position: relative; overflow: hidden;
	background: var(--brand-dark-900); color: #fff;
	padding-block: clamp(56px, 8vw, 96px);
}
.legal-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 75%);
	-webkit-mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 75%);
}
.legal-hero .container { position: relative; }
.legal-hero .eyebrow { color: var(--primary-soft); }
.legal-hero h1 { color: #fff; margin-bottom: var(--s-md); }
.legal-sub { color: rgba(255,255,255,.6); font-size: 1.0625rem; margin: 0; }

.legal-body { max-width: 800px; margin-inline: auto; }
.legal-updated { font-size: 0.875rem; color: var(--ink-mute); padding-bottom: var(--s-lg); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s-xxl); }
.legal-body h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.3px; margin: var(--s-huge) 0 var(--s-lg); }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { font-size: 1rem; line-height: 1.75; color: var(--ink-mute); margin-bottom: var(--s-lg); }
.legal-body strong { color: var(--ink-secondary); font-weight: 600; }
.legal-body ul, .legal-body ol { color: var(--ink-mute); line-height: 1.75; margin-bottom: var(--s-lg); }
.legal-body a { color: var(--primary); }

/* Plan du site */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-huge) var(--s-xl); }
.sitemap-col h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; color: var(--ink); padding-bottom: var(--s-sm); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s-md); }
.sitemap-col ul { list-style: none; padding: 0; margin: 0; }
.sitemap-col li { margin-bottom: var(--s-sm); }
.sitemap-col a { font-size: 0.9375rem; color: var(--ink-mute); }
.sitemap-col a:hover { color: var(--primary); }
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sitemap-grid { grid-template-columns: 1fr; gap: var(--s-xxl); } }

/* Drapeau dans les avis */
.review-flag { font-size: 1rem; line-height: 1; margin-right: 2px; }

/* Lien Telegram sous les cartes de tarifs */
.pt-telegram {
	display: block; text-align: center; margin-top: var(--s-sm);
	font-size: 0.8125rem; color: var(--ink-mute); text-decoration: none;
}
.pt-telegram:hover { color: #229ed9; text-decoration: underline; }
.pricing-card.featured .pt-telegram { color: rgba(255,255,255,.6); }
.pricing-card.featured .pt-telegram:hover { color: #7bd4f5; }

/* Bouton du configurateur */
.cfg-cta { margin-top: var(--s-xl); min-height: 54px; }

/* Bloc de commande sur la fiche produit */
.product-order { display: flex; flex-direction: column; gap: var(--s-md); margin-top: var(--s-lg); }
.product-order-hint {
	display: flex; align-items: center; gap: var(--s-sm);
	background: var(--canvas-soft); border-radius: var(--r-md);
	padding: var(--s-md); font-size: 0.875rem; color: var(--ink-secondary); margin: 0;
}
.product-order-hint svg { width: 18px; height: 18px; color: var(--primary); flex: 0 0 auto; }
.product-order-trust { display: flex; flex-wrap: wrap; gap: var(--s-lg); margin-top: var(--s-xs); }
.product-order-trust span { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink-mute); }
.product-order-trust svg { width: 16px; height: 16px; color: var(--primary); }

/* ---------- 16i. COMPARATIF DE PRIX ---------- */
.compare-wrap { max-width: 820px; margin-inline: auto; overflow-x: auto; padding-top: 16px; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; vertical-align: middle; }
.compare-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); font-weight: 600; }
.compare-table .compare-crit { color: var(--ink-secondary); font-weight: 500; }
.compare-table .compare-old { color: var(--ink-mute); }
.compare-x { color: var(--ruby); font-weight: 700; margin-right: 4px; }
.compare-v { color: #00b67a; font-weight: 700; margin-right: 4px; }

/* Colonne « nous » mise en avant */
.compare-table .compare-us {
	position: relative; background: var(--canvas);
	border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
}
.compare-table thead .compare-us {
	background: var(--brand-dark-900); color: #fff; font-size: 1rem; text-transform: none; letter-spacing: -0.2px; font-weight: 600;
	border-radius: var(--r-lg) var(--r-lg) 0 0; border-color: transparent; text-align: center; padding-top: 30px;
}
/* Badge « Recommandé » : placé dans la cellule pour ne jamais être coupé */
.compare-badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.compare-table tbody tr:nth-child(even) td { background: var(--canvas-soft); }
.compare-table tbody tr:nth-child(even) .compare-us { background: #f0eefe; }
.compare-table tbody td { border-bottom: 1px solid var(--hairline); }
.compare-table .compare-us strong { color: var(--primary-deep); }
.compare-table tfoot td { padding-top: var(--s-lg); font-size: 1rem; }
.compare-table tfoot .compare-old del { color: var(--ink-mute); }
.compare-table tfoot .compare-us { border-radius: 0 0 var(--r-lg) var(--r-lg); border-bottom: 1px solid var(--hairline); }
.compare-total { font-size: 1.25rem; color: var(--primary); }
.compare-note { font-size: 0.8125rem; color: var(--ink-mute); margin-top: var(--s-md); }

/* ---------- 16h. BLOC GARANTIE ---------- */
.guarantee-section { padding-block: clamp(32px, 5vw, 56px); }
.guarantee-card {
	display: flex; align-items: center; gap: clamp(var(--s-xl), 4vw, var(--s-huge));
	max-width: 960px; margin-inline: auto;
	background: var(--canvas-cream); border-radius: var(--r-xl);
	padding: clamp(var(--s-xl), 4vw, var(--s-huge));
}
.guarantee-visual { position: relative; flex: 0 0 auto; display: grid; place-items: center; }
.guarantee-shield {
	width: 110px; height: 110px; display: grid; place-items: center;
	border-radius: var(--r-pill); background: #fff; color: var(--primary);
	box-shadow: var(--shadow-2);
}
.guarantee-shield svg { width: 54px; height: 54px; }
.guarantee-percent {
	position: absolute; bottom: -6px; right: -10px;
	background: var(--primary); color: #fff; font-size: 0.8125rem; font-weight: 700;
	padding: 4px 10px; border-radius: var(--r-pill); box-shadow: var(--shadow-1);
}
.guarantee-body { flex: 1; min-width: 0; }
.guarantee-body h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); margin-bottom: var(--s-md); }
.guarantee-body p { color: var(--ink-secondary); margin-bottom: var(--s-lg); }
.guarantee-points { list-style: none; padding: 0; margin: 0 0 var(--s-xl); display: flex; flex-wrap: wrap; gap: var(--s-md) var(--s-xl); }
.guarantee-points li { display: flex; align-items: center; gap: var(--s-sm); font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.guarantee-points svg { width: 20px; height: 20px; color: var(--primary); flex: 0 0 auto; }
.guarantee-cta { display: flex; flex-wrap: wrap; gap: var(--s-md); }

@media (max-width: 767px) {
	.guarantee-card { flex-direction: column; text-align: center; }
	.guarantee-points { justify-content: center; }
	.guarantee-cta { justify-content: center; }
}

/* ---------- 17. UTIL ---------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s-md); top: var(--s-md); background: #fff; padding: var(--s-sm) var(--s-md); z-index: 999; border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 1023px) {
    .grid-4, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .post-grid, .reviews, .related-links { grid-template-columns: repeat(2,1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-xl); }
}
@media (max-width: 900px) {
    .hero-layout { grid-template-columns: 1fr; gap: var(--s-xxl); }
    .hero-mockup { max-width: 460px; }
}
@media (max-width: 767px) {
    .grid-2, .grid-3, .grid-4, .pricing-grid, .post-grid, .reviews, .related-links { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- 19. WooCommerce — boutons génériques ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
    display: inline-block; background: var(--primary); color: var(--on-primary);
    border: 0; border-radius: var(--r-pill); padding: 12px 20px;
    font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; line-height: 1.2;
    cursor: pointer; text-decoration: none; transition: background .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--primary-deep); color: #fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--primary); }
.woocommerce .star-rating span::before { color: #f5a623; }

/* ---------- 19a. FICHE PRODUIT & BOUTIQUE ---------- */

/* Notifications WooCommerce */
.woocommerce-notices-wrapper { max-width: var(--container); margin: 0 auto var(--s-lg); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-md);
	background: var(--canvas-soft); border: 1px solid var(--hairline);
	border-left: 4px solid var(--primary); border-radius: var(--r-md);
	padding: var(--s-md) var(--s-lg); margin: 0 0 var(--s-lg);
	list-style: none; font-size: 0.9375rem; color: var(--ink-secondary);
}
.woocommerce-message { border-left-color: #00b67a; }
.woocommerce-error { border-left-color: var(--ruby); }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }

/* Fil d'ariane WooCommerce */
.woocommerce-breadcrumb { font-size: 0.8125rem; color: var(--ink-mute); margin-bottom: var(--s-xl); }
.woocommerce-breadcrumb a { color: var(--ink-mute); }

/* Fiche produit : 2 colonnes */
.single-product div.product {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-huge);
	align-items: start;
}
/* min-width:0 : sans ça, un enfant large force la grille à déborder */
.single-product div.product > * { min-width: 0; }
.single-product div.product .woocommerce-product-gallery { grid-column: 1; margin: 0; }
.single-product div.product .summary { grid-column: 2; margin: 0; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .up-sells { grid-column: 1 / -1; }

.woocommerce-product-gallery img { border-radius: var(--r-lg); border: 1px solid var(--hairline); }
.woocommerce-product-gallery__trigger { display: none; }

/* Panneau de marque (remplace l'image sur produit numérique) */
.product-visual {
	position: relative; overflow: hidden; min-width: 0;
	background: linear-gradient(160deg, #232561 0%, var(--brand-dark-900) 100%);
	border-radius: var(--r-xl);
	padding: clamp(var(--s-lg), 4vw, var(--s-xxl));
	color: #fff; box-shadow: var(--shadow-2);
}
.product-visual .pv-list li { min-width: 0; }
.product-visual .pv-list li span:not(.pv-ic) { overflow-wrap: anywhere; }
.product-visual::before {
	content: ""; position: absolute; inset: -30% -20% auto -20%; height: 80%; pointer-events: none;
	background:
		radial-gradient(50% 70% at 20% 0%, rgba(102,94,253,.55), transparent 60%),
		radial-gradient(50% 70% at 90% 10%, rgba(234,34,97,.35), transparent 60%);
	filter: blur(30px);
}
.pv-head { position: relative; padding-bottom: var(--s-lg); border-bottom: 1px solid rgba(255,255,255,.12); }
.pv-eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-subdued); }
.pv-duration { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1.05; margin: var(--s-sm) 0 var(--s-md); color: #fff; }
.pv-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-badges span { font-size: 0.6875rem; font-weight: 700; letter-spacing: .05em; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.14); color: #fff; }

.pv-list { position: relative; list-style: none; margin: var(--s-lg) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-md); }
.pv-list li { display: flex; align-items: center; gap: var(--s-md); font-size: 0.9375rem; color: rgba(255,255,255,.9); }
.pv-ic { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(255,255,255,.1); color: var(--primary-subdued); }
.pv-ic svg { width: 18px; height: 18px; }

.pv-foot { position: relative; display: flex; align-items: center; gap: var(--s-sm); padding-top: var(--s-lg); border-top: 1px solid rgba(255,255,255,.12); font-size: 0.8125rem; color: rgba(255,255,255,.65); }
.pv-foot svg { width: 18px; height: 18px; color: #7bf5c4; flex: 0 0 auto; }

.single-product .product_title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: var(--s-md); }
.single-product .summary .price { font-size: 1.75rem; font-weight: 300; color: var(--primary); font-feature-settings: "tnum"; margin-bottom: var(--s-lg); display: block; }
.single-product .summary .woocommerce-product-details__short-description { color: var(--ink-secondary); line-height: 1.6; margin-bottom: var(--s-lg); }
.single-product .product_meta { font-size: 0.8125rem; color: var(--ink-mute); margin-top: var(--s-lg); padding-top: var(--s-lg); border-top: 1px solid var(--hairline); }
.single-product .product_meta > span { display: block; margin-bottom: 4px; }

/* Formulaire de variations */
.woocommerce div.product form.cart { margin: 0; }
.woocommerce table.variations { width: 100%; margin-bottom: var(--s-lg); border: 0; }
.woocommerce table.variations th, .woocommerce table.variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
.woocommerce table.variations th.label label { font-size: 0.875rem; font-weight: 600; color: var(--ink-secondary); margin-bottom: 6px; display: block; }
.woocommerce table.variations select {
	width: 100%; padding: 12px 14px; font-size: 1rem; font-family: var(--font-sans);
	color: var(--ink); background: var(--canvas);
	border: 1px solid var(--hairline-input); border-radius: var(--r-sm); margin-bottom: var(--s-sm);
}
.woocommerce table.variations select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83,58,253,0.12); }
.woocommerce a.reset_variations { font-size: 0.8125rem; color: var(--ink-mute); display: inline-block; margin-bottom: var(--s-sm); }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: var(--s-md); }
.woocommerce div.product .woocommerce-variation-price .price { font-size: 1.75rem; }

/* Quantité + bouton */
.woocommerce div.product form.cart .quantity { display: inline-block; margin-right: var(--s-md); vertical-align: middle; }
.woocommerce .quantity input.qty {
	width: 78px; padding: 12px; text-align: center; font-size: 1rem; font-family: var(--font-sans);
	border: 1px solid var(--hairline-input); border-radius: var(--r-sm); color: var(--ink);
}
.woocommerce div.product form.cart .button {
	background: var(--primary); color: #fff; border: 0; border-radius: var(--r-pill);
	padding: 15px 28px; font-size: 1.0625rem; font-weight: 500; font-family: var(--font-sans); cursor: pointer;
	vertical-align: middle; transition: background .15s ease;
}
.woocommerce div.product form.cart .button:hover { background: var(--primary-deep); }
.woocommerce div.product form.cart .variations_button { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; }

/* Onglets produit */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--s-huge); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex; gap: var(--s-sm); list-style: none; margin: 0 0 var(--s-xl); padding: 0 0 var(--s-sm);
	border-bottom: 1px solid var(--hairline);
	overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-radius: var(--r-pill); margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block; padding: 10px 18px; border-radius: var(--r-pill);
	font-size: 0.9375rem; font-weight: 500; color: var(--ink-mute); text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { background: var(--primary); color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel { max-width: var(--container-narrow); color: var(--ink-secondary); line-height: 1.7; }
.woocommerce div.product .woocommerce-tabs h2 { font-size: 1.5rem; }

/* Produits liés / boutique */
.woocommerce .related > h2, .woocommerce .up-sells > h2 { font-size: 1.75rem; margin-bottom: var(--s-xl); }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important; float: none !important; margin: 0 !important;
	background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	padding: var(--s-lg); text-align: center; display: flex; flex-direction: column; gap: var(--s-sm);
	box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.woocommerce ul.products li.product img { border-radius: var(--r-md); margin-bottom: var(--s-sm); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.125rem !important; font-weight: 400; letter-spacing: -0.2px; padding: 0; margin: 0; color: var(--ink);
}
.woocommerce ul.products li.product .price { font-size: 1.0625rem; color: var(--ink-secondary); font-feature-settings: "tnum"; margin: 0; }
.woocommerce ul.products li.product .price del { color: var(--ink-mute); font-size: .9em; }
.woocommerce ul.products li.product .button {
	margin-top: auto; display: inline-block; background: var(--primary); color: #fff;
	border-radius: var(--r-pill); padding: 11px 18px; font-size: 0.9375rem; font-weight: 500; border: 0;
}
.woocommerce ul.products li.product .button:hover { background: var(--primary-deep); }
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--ruby); color: #fff; border-radius: var(--r-pill);
	padding: 4px 12px; font-size: 0.75rem; font-weight: 600; min-height: 0; line-height: 1.4;
}

@media (max-width: 900px) {
	.single-product div.product { grid-template-columns: 1fr; gap: var(--s-xl); }
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary { grid-column: 1; }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ---------- 19b. TUNNEL DE COMMANDE (checkout / panier / merci) ---------- */

/* En-tête : étapes + confiance */
.checkout-head { margin-bottom: var(--s-xxl); }
.checkout-steps { display: flex; align-items: center; justify-content: center; gap: var(--s-sm); flex-wrap: wrap; margin-bottom: var(--s-lg); }
.checkout-steps .step { display: flex; align-items: center; gap: var(--s-sm); font-size: 0.875rem; font-weight: 500; color: var(--ink-mute); }
.checkout-steps .step i { width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid var(--hairline); display: inline-block; position: relative; }
.checkout-steps .step.done i { background: #00b67a; border-color: #00b67a; }
.checkout-steps .step.done i::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.checkout-steps .step.done { color: var(--ink-secondary); }
.checkout-steps .step.active i { border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 4px rgba(83,58,253,.15); }
.checkout-steps .step.active { color: var(--ink); font-weight: 600; }
.step-line { width: 48px; height: 2px; background: var(--hairline); }

.checkout-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-lg) var(--s-xl); padding: var(--s-md) var(--s-lg); background: var(--canvas-soft); border-radius: var(--r-lg); }
.checkout-trust span { display: flex; align-items: center; gap: var(--s-sm); font-size: 0.875rem; color: var(--ink-secondary); }
.checkout-trust svg { width: 18px; height: 18px; color: var(--primary); }

/* Layout 2 colonnes */
.woocommerce-checkout .woocommerce { max-width: 1080px; margin-inline: auto; }
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s-huge); align-items: start; }
.woocommerce-checkout #customer_details { grid-column: 1; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { grid-column: 2; }
.woocommerce-checkout #order_review {
	background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	padding: var(--s-xl); box-shadow: var(--shadow-1); position: sticky; top: 90px;
}
.woocommerce-checkout #order_review_heading { font-size: 1.375rem; font-weight: 300; letter-spacing: -0.3px; margin-bottom: var(--s-md); }
.woocommerce-checkout h3 { font-size: 1.375rem; letter-spacing: -0.3px; }

/* Champs de formulaire */
.woocommerce form .form-row { padding: 0; margin-bottom: var(--s-lg); }
.woocommerce form .form-row label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-secondary); margin-bottom: 6px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%; padding: 12px 14px; font-size: 1rem; font-family: var(--font-sans);
	color: var(--ink); background: var(--canvas);
	border: 1px solid var(--hairline-input); border-radius: var(--r-sm); line-height: 1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83,58,253,0.12);
}
.woocommerce form .form-row .description { font-size: 0.8125rem; color: var(--ink-mute); margin-top: 5px; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 48.5%; }
.woocommerce .required { color: var(--ruby); }

/* Récap de commande */
.woocommerce table.shop_table { border: 0; border-radius: 0; font-size: 0.9375rem; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px 0; border-top: 1px solid var(--hairline); }
.woocommerce table.shop_table thead th { border-top: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }
.woocommerce table.shop_table .order-total td, .woocommerce table.shop_table .order-total th { font-size: 1.125rem; border-top: 2px solid var(--hairline); }
.woocommerce table.shop_table .amount { font-feature-settings: "tnum"; }
.woocommerce ul#shipping_method { margin: 0; padding: 0; list-style: none; }

/* Moyens de paiement */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 var(--s-lg); list-style: none; }
.woocommerce-checkout #payment ul.payment_methods li {
	background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md);
	padding: var(--s-md) var(--s-lg); margin-bottom: var(--s-sm);
}
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 500; display: inline; }
.woocommerce-checkout #payment div.payment_box {
	background: var(--canvas-soft); border-radius: var(--r-md); font-size: 0.875rem; color: var(--ink-secondary); margin-top: var(--s-md);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 0; }
.woocommerce #payment #place_order {
	width: 100%; background: var(--primary); color: #fff; font-size: 1.0625rem; font-weight: 500;
	padding: 16px 24px; border-radius: var(--r-pill); border: 0; margin-top: var(--s-md);
}
.woocommerce #payment #place_order:hover { background: var(--primary-deep); }
.woocommerce-privacy-policy-text { font-size: 0.8125rem; color: var(--ink-mute); }

/* Lien « retirer » dans le récap de commande */
.checkout-remove-item {
	display: inline-grid; place-items: center;
	width: 20px; height: 20px; margin-left: 6px;
	border-radius: var(--r-pill); background: var(--canvas-soft);
	color: var(--ink-mute); font-size: 15px; line-height: 1; text-decoration: none;
	vertical-align: middle; transition: .12s;
}
.checkout-remove-item:hover { background: var(--ruby); color: #fff; text-decoration: none; }

/* Bandeau garantie */
.guarantee-band {
	display: flex; align-items: center; gap: var(--s-xl);
	max-width: 1080px; margin: var(--s-huge) auto 0;
	background: var(--canvas-cream); border-radius: var(--r-lg); padding: var(--s-xl) var(--s-xxl);
}
.guarantee-badge { width: 64px; height: 64px; flex: 0 0 auto; border-radius: var(--r-pill); background: rgba(0,0,0,.06); display: grid; place-items: center; color: var(--ink); }
.guarantee-badge svg { width: 32px; height: 32px; }
.guarantee-band h3 { font-size: 1.25rem; margin: 0 0 4px; }
.guarantee-band p { font-size: 0.9375rem; color: var(--ink-secondary); }

/* Page de confirmation */
.woocommerce-order { max-width: 820px; margin-inline: auto; }
.woocommerce-thankyou-order-received {
	text-align: center; font-size: 1.125rem; color: var(--ink-secondary);
	background: var(--canvas-soft); border-radius: var(--r-lg); padding: var(--s-xl); margin-bottom: var(--s-xl);
}
.thankyou-check { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: #00b67a; color: #fff; font-size: 20px; margin-bottom: var(--s-sm); }
.woocommerce ul.woocommerce-order-overview {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-md);
	list-style: none; margin: 0 0 var(--s-xl); padding: var(--s-lg);
	background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
}
.woocommerce ul.woocommerce-order-overview li { border: 0; padding: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); }
.woocommerce ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink); font-feature-settings: "tnum"; }

.thankyou-next { margin-bottom: var(--s-xl); }
.thankyou-next h3 { margin-top: 0; }
.thankyou-steps { margin: 0 0 var(--s-lg); padding-left: 1.2em; }
.thankyou-steps li { margin-bottom: var(--s-sm); color: var(--ink-secondary); }
.thankyou-cta { display: flex; flex-wrap: wrap; gap: var(--s-md); }

/* Panier */
.woocommerce table.cart img { width: 60px; border-radius: var(--r-sm); }
.woocommerce .cart_totals { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); }
.woocommerce .cart-collaterals .cart_totals > h2 { font-size: 1.25rem; }

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: var(--s-xxl); }
	.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; position: static; }
	.woocommerce ul.woocommerce-order-overview { grid-template-columns: repeat(2, 1fr); }
	.guarantee-band { flex-direction: column; text-align: center; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; }
	.step-line { width: 20px; }
}

/* ---------- 20. PERF: réduire mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- 21. APPLICATIONS / TÉLÉCHARGEMENT ---------- */
.apps-section { background: var(--brand-dark-900); color: #fff; }
.apps-head { max-width: 720px; margin-bottom: var(--s-xxl); }
.apps-head h2 { color: #fff; margin: var(--s-md) 0 var(--s-sm); }
.apps-head .lead { color: var(--primary-subdued); }
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); }
.app-card {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: var(--r-xl);
	padding: var(--s-xl);
	display: flex; flex-direction: column; gap: var(--s-md);
	transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.app-card:hover { border-color: var(--primary-soft); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.app-card-top { display: flex; align-items: center; justify-content: space-between; }
.app-badge {
	width: 48px; height: 48px; border-radius: var(--r-lg);
	display: grid; place-items: center;
	font-weight: 700; font-size: .875rem; color: #fff; letter-spacing: .5px;
}
.app-new {
	background: rgba(22,160,133,.18); color: #4fe6c2;
	font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
	padding: 3px 9px; border-radius: var(--r-pill);
}
.app-name { color: #ff8a3c; font-size: 1.125rem; font-weight: 700; margin: 0; }
.app-note { color: rgba(255,255,255,.65); font-size: .875rem; line-height: 1.55; margin: 0; flex: 1; }
.app-meta { display: flex; flex-direction: column; gap: var(--s-xs); font-size: .8125rem; color: rgba(255,255,255,.55); flex: 1; }
.app-meta-row { display: flex; align-items: center; gap: 7px; }
.app-meta-row svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--primary-soft); }
.app-code { color: #fff; font-weight: 700; letter-spacing: .3px; }
.app-link { word-break: break-all; }
.app-btn { width: 100%; justify-content: center; margin-top: var(--s-xs); }
.app-card .btn-secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.20); }
.app-card .btn-secondary:hover { background: rgba(255,255,255,.14); }
.apps-help {
	margin-top: var(--s-huge); text-align: center;
	background: rgba(83,58,253,.14); border: 1px solid rgba(102,94,253,.35);
	border-radius: var(--r-xl); padding: var(--s-xxl);
}
.apps-help h3 { color: #fff; font-size: 1.25rem; margin: 0 0 var(--s-sm); }
.apps-help p { color: var(--primary-subdued); max-width: 560px; margin: 0 auto var(--s-lg); }
.apps-help-cta { display: flex; flex-wrap: wrap; gap: var(--s-md); justify-content: center; }
.apps-help-cta .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }

@media (max-width: 980px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .apps-grid { grid-template-columns: 1fr; } }

/* ---------- 22. FOOTER — disclaimer légal ---------- */
.footer-disclaimer {
	margin-top: var(--s-lg);
	padding-top: var(--s-lg);
	border-top: 1px solid var(--hairline);
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--ink-mute);
	max-width: none; /* pleine largeur : moins de lignes, plus compact */
}

/* Icônes réseaux du footer (WhatsApp / Telegram / E-mail) */
.footer-social { display: flex; gap: var(--s-sm); margin-top: var(--s-lg); }
.footer-social-btn {
	width: 44px; height: 44px;
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	display: grid; place-items: center;
	color: var(--ink-mute);
	transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social-btn:hover {
	color: #fff; background: var(--primary); border-color: var(--primary);
	transform: translateY(-2px);
}
.footer-social-btn svg { width: 20px; height: 20px; }

/* ---------- 23. PAGE APPLICATIONS — bloc « 3 étapes » ---------- */
/* Rapproche le bloc du hero (moins d'espace vide en haut) */
.apps-steps-section { padding-top: clamp(24px, 3vw, 40px); }
.apps-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); position: relative; }
/* ligne de liaison en pointillés derrière les icônes (desktop) */
.apps-steps::before {
	content: ""; position: absolute; top: 40px; left: 18%; right: 18%; height: 2px;
	background: repeating-linear-gradient(90deg, var(--hairline) 0 7px, transparent 7px 15px);
	z-index: 0;
}
.apps-step { text-align: center; position: relative; z-index: 1; }
.apps-step-ic {
	width: 80px; height: 80px; margin: 0 auto var(--s-md); border-radius: 50%;
	background: var(--canvas); border: 1px solid var(--hairline); box-shadow: var(--shadow-2);
	display: grid; place-items: center; color: var(--primary);
}
.apps-step-ic svg { width: 34px; height: 34px; }
.apps-step-num {
	position: absolute; top: 0; left: 50%; transform: translateX(26px);
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--primary); color: #fff; font-weight: 700; font-size: 0.85rem;
	display: grid; place-items: center; border: 3px solid var(--canvas);
}
.apps-step h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 var(--s-xs); color: var(--ink); }
.apps-step p { color: var(--ink-mute); font-size: 0.9375rem; line-height: 1.55; margin: 0 auto; max-width: 32ch; }
.apps-step p a { font-weight: 600; }
@media (max-width: 720px) {
	.apps-steps { grid-template-columns: 1fr; gap: var(--s-xxl); }
	.apps-steps::before { display: none; }
}

/* ============================================================
   24. CHECKOUT CARTFLOWS — design pro façon Stripe
   Ciblé sur #wcf-embed-checkout-form (n'affecte que cette page)
   ============================================================ */
#wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout {
	--wcf-primary-color: #635BFF;        /* blurple Stripe */
	--wcf-primary-hover-color: #4b41d1;
	--wcf-text-color: #0A2540;           /* navy Stripe */
	background: #fff;
	color: #0A2540;
}

/* ---- En-tête : étapes + barre de confiance, CENTRÉES ---- */
#wcf-embed-checkout-form .checkout-head {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 18px 16px;
	border-bottom: 1px solid #e6e9f0;
}
#wcf-embed-checkout-form .checkout-head .checkout-steps,
#wcf-embed-checkout-form .checkout-head .checkout-trust {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center !important;
	align-items: center;
	gap: 10px 24px;
	width: 100% !important;
	max-width: 720px;
	margin: 0 auto !important;
	text-align: center !important;
	float: none !important;
}
#wcf-embed-checkout-form .checkout-trust {
	background: #f6f9fc;
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 0.85rem;
	color: #425466;
}
#wcf-embed-checkout-form .checkout-trust span { display: inline-flex !important; align-items: center; gap: 6px; }
#wcf-embed-checkout-form .checkout-trust svg { width: 17px; height: 17px; color: var(--wcf-primary-color); }
#wcf-embed-checkout-form .checkout-steps .step { color: #8792a8; }
#wcf-embed-checkout-form .checkout-steps .step.active,
#wcf-embed-checkout-form .checkout-steps .step.done { color: var(--wcf-primary-color); font-weight: 600; }

/* ---- Colonnes : largeur & espacement propres ---- */
#wcf-embed-checkout-form .wcf-instant-checkout-wrapper {
	gap: 48px !important;
	max-width: 1160px;
	margin-inline: auto !important;
	padding: 36px 24px !important;
}

/* ---- Titres de section ---- */
#wcf-embed-checkout-form h2,
#wcf-embed-checkout-form h3 { color: #0A2540; font-weight: 600; }

/* ---- Champs de formulaire façon Stripe ---- */
#wcf-embed-checkout-form input[type="text"],
#wcf-embed-checkout-form input[type="tel"],
#wcf-embed-checkout-form input[type="email"],
#wcf-embed-checkout-form input[type="number"],
#wcf-embed-checkout-form textarea,
#wcf-embed-checkout-form select {
	border: 1px solid #d9dee6 !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	background: #fff !important;
	font-size: 0.95rem !important;
	transition: border-color .15s, box-shadow .15s;
}
#wcf-embed-checkout-form input:focus,
#wcf-embed-checkout-form textarea:focus,
#wcf-embed-checkout-form select:focus {
	border-color: var(--wcf-primary-color) !important;
	box-shadow: 0 0 0 3px rgba(99,91,255,.15) !important;
	outline: none !important;
}

/* ---- Méthodes de paiement : cartes cliquables ---- */
#wcf-embed-checkout-form .wc_payment_methods li.wc_payment_method {
	border: 1px solid #e6e9f0 !important;
	border-radius: 10px !important;
	padding: 14px 16px !important;
	margin-bottom: 10px !important;
	list-style: none !important;
	transition: border-color .15s, box-shadow .15s;
}
#wcf-embed-checkout-form .wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--wcf-primary-color) !important;
	box-shadow: 0 0 0 2px rgba(99,91,255,.15) !important;
}
#wcf-embed-checkout-form .wc_payment_methods li .payment_box {
	background: #f6f9fc !important;
	border-radius: 8px !important;
	margin-top: 10px !important;
}
#wcf-embed-checkout-form .wc_payment_methods li .payment_box::before { display: none !important; }

/* ---- Bouton "Passer commande" ---- */
#wcf-embed-checkout-form button[type="submit"],
#wcf-embed-checkout-form #place_order {
	background: var(--wcf-primary-color) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 16px 20px !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	box-shadow: 0 6px 16px rgba(99,91,255,.3) !important;
	transition: background .15s, transform .15s;
}
#wcf-embed-checkout-form button[type="submit"]:hover,
#wcf-embed-checkout-form #place_order:hover {
	background: var(--wcf-primary-hover-color) !important;
	transform: translateY(-1px);
}

/* ---- Récapitulatif (colonne droite) ---- */
#wcf-embed-checkout-form .wcf-ic-layout-right-column { color: #0A2540; }

/* ---- Bande de garantie : pleine largeur, centrée, propre ---- */
#wcf-embed-checkout-form .wcf-instant-checkout-wrapper > .guarantee-band {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: #f6f9fc !important;
	border: 1px solid #e6e9f0 !important;
	border-radius: 12px !important;
	padding: 20px 24px !important;
	margin-top: 28px !important;
	text-align: left;
}
#wcf-embed-checkout-form .guarantee-band .guarantee-badge {
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--wcf-primary-color); color: #fff;
	display: grid; place-items: center; flex: 0 0 auto;
}
#wcf-embed-checkout-form .guarantee-band .guarantee-badge svg { width: 22px; height: 22px; }
#wcf-embed-checkout-form .guarantee-band h3 { margin: 0 0 2px !important; font-size: 1.05rem; color: #0A2540; }
#wcf-embed-checkout-form .guarantee-band p { margin: 0 !important; font-size: 0.9rem; color: #425466; }

@media (max-width: 782px) {
	#wcf-embed-checkout-form .wcf-instant-checkout-wrapper { gap: 24px !important; padding: 20px 14px !important; }
	#wcf-embed-checkout-form .guarantee-band { flex-direction: column; text-align: center; }
}

/* =============================================================
   NOVA — VOLTAGENT RE-SKIN (appended overrides — win the cascade)
   Dark-canvas #101010 · single green accent #00d992 · hairline cards
   Inter + SF Mono. Remaps the token layer, then fixes structural bits.
   ============================================================= */

/* ---- 1. Token remap: flips the whole site to dark + green ---- */
:root {
    /* brand / accent */
    --primary: #00d992;
    --primary-deep: #10b981;
    --primary-press: #0e9d78;
    --primary-soft: #2fd6a1;
    --primary-subdued: rgba(0, 217, 146, 0.14);
    --brand-dark-900: #1a1a1a;
    --ruby: #ff4d6d;
    --magenta: #2fd6a1;
    --lemon: #8b949e;
    --shadow-blue: #000000;

    /* surfaces */
    --canvas: #101010;
    --canvas-soft: #1a1a1a;
    --canvas-cream: #1a1a1a;
    --hairline: #3d3a39;
    --hairline-input: #3d3a39;

    /* text */
    --ink: #f2f2f2;
    --ink-strong: #ffffff;
    --ink-secondary: #cfcfcf;
    --ink-mute: #8b949e;
    --ink-mute-2: #8b949e;
    --on-primary: #ffffff; /* text on DARK surfaces (cards/bands) stays light */

    /* type */
    --font-sans: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* elevation → hairlines, not material shadows */
    --shadow-1: none;
    --shadow-2: 0 8px 30px rgba(0, 0, 0, 0.55);
}

body { background: var(--canvas); color: var(--ink); font-feature-settings: "calt", "rlig"; }

/* ---- 2. Typography: calm Voltagent display (weight 400, tight tracking) ---- */
h1, .display-xxl { font-weight: 400; letter-spacing: -0.65px; line-height: 1.03; color: var(--ink-strong); }
h2, .display-xl  { font-weight: 400; letter-spacing: -0.9px;  color: var(--ink-strong); }
h3, .display-lg  { font-weight: 700; letter-spacing: -0.6px;  color: var(--ink-strong); }
h4, h5, h6 { color: var(--ink-strong); }
.lead { color: var(--ink-secondary); }
strong { color: var(--ink-strong); }
.eyebrow { color: var(--primary); letter-spacing: 0.16em; font-weight: 600; }

/* ---- 3. Buttons: 6px rects, green primary with near-black label ---- */
.btn { border-radius: var(--r-sm); font-weight: 600; }
.btn-primary { color: #101010; }
.btn-primary:hover { color: #101010; box-shadow: 0 0 22px rgba(0, 217, 146, 0.32); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-secondary:hover { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-block { display: flex; }

/* ---- 4. Header / announce bar ---- */
.site-header { background: rgba(16, 16, 16, 0.82); border-bottom-color: var(--hairline); }
.announce-bar { background: var(--primary); }
.announce-text, .announce-cta, .announce-close { color: #06231a; }
.announce-cta { border-bottom-color: rgba(6, 35, 26, 0.5); }
.announce-cta:hover { color: #06231a; border-bottom-color: #06231a; }
.nav-menu a:hover, .nav-more:hover, .nav-dropdown a:hover { color: var(--primary); }

/* ---- 5. Hero mesh → faint single green glow (no rainbow gradient) ---- */
.mesh::before {
    background: radial-gradient(50% 60% at 50% 0%, rgba(0, 217, 146, 0.16) 0%, transparent 60%);
    filter: blur(60px) saturate(1);
    height: 60%;
}

/* ---- 6. Cards: hairline, no material shadow ---- */
.card { box-shadow: none; }
.card-feature .icon { background: var(--canvas-soft); border: 1px solid var(--hairline); color: var(--primary); }
.pill-tag { background: transparent; border: 1px solid var(--hairline); color: var(--ink); }

/* ---- 7. Pricing: dark cards, green-bordered featured ---- */
.pricing-card { background: var(--canvas-soft); box-shadow: none; }
.pricing-card.featured {
    background: var(--canvas-soft);
    color: var(--ink);
    border: 2px solid var(--primary);
    box-shadow: 0 0 24px rgba(0, 217, 146, 0.15);
}
.pricing-card.featured .price, .pricing-card.featured h3, .pricing-card.featured .tier-name { color: var(--ink-strong); }
.pricing-card.featured .pt-server { background: rgba(255, 255, 255, 0.06); }
.pt-srv.active { background: var(--primary); color: #101010; }
.pricing-card.featured .pt-srv.active { background: var(--primary); color: #101010; }
.pt-4k { color: #101010; background: var(--primary); }
.pricing-card.featured .pt-4k { color: #101010; background: var(--primary); }
.pt-minus, .pt-plus { color: var(--primary); background: var(--canvas); }
.pt-minus:hover:not(:disabled), .pt-plus:hover:not(:disabled) { color: #101010; }
.pt-save { background: rgba(0, 217, 146, 0.14); color: var(--primary); }

/* ---- 8. Dark bands, FAQ, prose ---- */
.section-dark { background: #0b0b0b; }
.section-soft, .section-cream { background: var(--canvas-soft); }
.card-cream { background: var(--canvas-soft); border: 1px solid var(--hairline); }
.faq-item summary::after { color: var(--primary); }
.prose a, .breadcrumb a:hover { color: var(--primary); }
.related-links a:hover { border-color: var(--primary); }

/* ---- 9. Mono voice for code-like snippets (channel counts, app codes…) ---- */
.app-code, .cfg-price, .channels-count-num, .compare-total { font-family: var(--font-mono); }

/* ---- 10. Green divider rhythm (Voltagent signature) ---- */
.section + .section-dark, .mesh + .section { border-top: 1px solid var(--hairline); }

/* ---- 11. Brand logo: size a WIDE wordmark by height, not a 64px square ---- */
.brand-mark { width: auto; height: 44px; max-width: 240px; object-fit: contain; }
.site-footer .brand-mark { width: auto; height: 54px; }
@media (max-width: 767px) {
	.brand-mark { width: auto; height: 36px; }
	.site-footer .brand-mark { width: auto; height: 44px; }
}

/* ---- Hero SVG illustration (replaces the old CSS mockup) ---- */
.hero-illustration { display: block; width: 100%; height: auto; max-width: 560px; margin-inline: auto; }

/* ---- 12. Hero TV mockup: retint leftover purple/navy → brand green ---- */
.mockup-screen {
	background: linear-gradient(160deg, #10231c 0%, #0b0b0b 100%);
	border-color: var(--hairline);
}
.mockup-feature {
	background:
		radial-gradient(70% 140% at 0% 0%, rgba(0, 217, 146, 0.55), transparent 65%),
		radial-gradient(80% 140% at 100% 100%, rgba(16, 185, 129, 0.35), transparent 65%),
		linear-gradient(120deg, #0d3d2e, #10b981);
}
.mockup-play { color: var(--primary-deep); }
.mockup-ch-q {
	color: #06231a;
	background: var(--primary);
}
.mockup-cats span.active { color: #06231a; }
.mockup-ch-logo { color: #06231a; }

/* ===== Related pages (internal linking block, silo pages) ===== */
.related-links{margin:48px 0 8px;padding:24px;border:1px solid var(--border,#2a2a2a);border-radius:14px;background:var(--surface-2,#141414)}
.related-links h2{font-size:1.15rem;margin:0 0 14px}
.related-links-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.related-links-list li{margin:0}
.related-links-list a{display:inline-block;padding:8px 14px;border:1px solid var(--border,#2a2a2a);border-radius:999px;font-size:.92rem;color:var(--ink,#f2f2f2);text-decoration:none;transition:all .15s ease}
.related-links-list a:hover{border-color:var(--primary,#00d992);color:var(--primary,#00d992)}

/* ===== Hero photo (remplace l'illustration SVG) ===== */
.hero-mockup .hero-photo{display:block;width:100%;height:auto;max-width:100%;border-radius:16px}

/* ===== Option B : image hero en fond de section ===== */
.hero--bg{
	background-color:#0a0a0a;
	background-image:
		linear-gradient(90deg, rgba(10,10,10,.97) 0%, rgba(10,10,10,.85) 28%, rgba(10,10,10,.42) 52%, rgba(10,10,10,.10) 78%, rgba(10,10,10,.28) 100%),
		url(../img/hero-4k.webp);
	background-size:auto, 78% auto; /* dézoom : image un peu plus petite, ancrée à droite */
	background-position:center, right center;
	background-repeat:no-repeat;
}
.hero--bg.mesh::before{display:none} /* neutralise l'ancien mesh multicolore */
.hero--bg .hero-layout{grid-template-columns:1fr} /* texte seul, sur le fond */
.hero--bg .hero-copy{max-width:640px}
.hero--bg .hero-mockup{display:none} /* l'image est en fond, on masque la colonne */

@media (max-width:820px){
	.hero--bg{
		background-image:
			linear-gradient(180deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.80) 55%, rgba(10,10,10,.90) 100%),
			url(../img/hero-4k.webp);
		background-position:center;
	}
}

/* ===== GEO — Quick answer block (top of articles & money pages) ===== */
.quick-answer{margin:0 0 32px;padding:20px 24px;border-left:3px solid var(--primary,#00d992);border-radius:12px;background:var(--surface-2,#141414)}
.quick-answer__label{margin:0 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary,#00d992)}
.quick-answer__text{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ink,#f2f2f2)}