/**
 * HDdev Theme - Complete Professional CSS
 * Mobile-First Design System
 * 
 * @package HDdev\Theme
 * @version 3.0.0
 * @author HDdev
 * 
 * TABLE OF CONTENTS:
 * 1. CSS Variables (Design Tokens)
 * 2. Reset & Base
 * 3. Typography
 * 4. Layout & Container
 * 5. Buttons
 * 6. Forms
 * 7. Header & Navigation
 * 8. Mobile Menu
 * 9. Footer
 * 10. Hero Sections
 * 11. Cards
 * 12. Pricing Cards
 * 13. Tables
 * 14. Module Pages
 * 15. Contact Page
 * 16. Documentation Page
 * 17. Legal Pages
 * 18. Auth Pages
 * 19. Portal
 * 20. Checkout
 * 21. Cart & Mini-Cart
 * 22. Utilities
 */

/* ==========================================================================
   1. CSS VARIABLES (Design Tokens)
   ========================================================================== */
:root {
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', var(--font-sans);
    
    /* ═══════════════════════════════════════════════════════════════════════
     * COULEURS HDdev — CANONIQUES (règle innée #28)
     * Source de vérité UNIQUE : memory/hddev_palette_admin.md.
     *
     * POURQUOI CE BLOC A CHANGÉ LE 2026-09-04 : toute la boutique était bâtie sur
     * `#667eea → #764ba2`, l'indigo-violet des gabarits génériques — précisément la
     * combinaison que la règle #28 met sur liste noire comme « bas de gamme ». Ce
     * n'était pas un détail de teinte : ces deux variables irriguent le CTA, le
     * héros, les liens, les focus et les badges, donc l'identité entière du site.
     * Corriger ICI corrige tout d'un coup — c'est la « cause racine » que la règle
     * demande de traiter EN PREMIER, plutôt que de repeindre page par page.
     *
     * ⚠️ LES COULEURS DE TIER SONT DISTINCTIVES, PAS UNE RAMPE BLEUE. Une session de
     * 2026-07-07 les avait aplaties en dégradé de bleus ; David a explicitement
     * rétabli le schéma OmniPractice le 2026-07-08. Le violet ULTIMATE et l'orange
     * ULTIMATE+ sont VOULUS. Ne jamais les « harmoniser ».
     * ⛔ AGENCY (#000000) n'a AUCUNE variable ici : c'est un tier secret (#11), il ne
     * doit exister nulle part dans une feuille de style servie au public.
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Brand Colors */
    --color-primary: #1e7eff;
    --color-primary-dark: #0a5fd6;
    --color-primary-light: #4d99ff;
    --color-secondary: #00d4ff;

    /* Fonds sombres de marque (héros, sections premium) */
    --color-navy-900: #0c1219;
    --color-navy-800: #111a24;
    --color-navy-700: #172230;

    /* Status Colors — états SANCTIONNÉS, jamais convertis en bleu */
    --color-success: #20c997;
    --color-success-dark: #1a7d2b;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #1e7eff;

    /* Tier Colors — distinctives (schéma OmniPractice, validé David 2026-07-08) */
    --color-tier-free: #6c757d;
    --color-tier-pro: #1a7d2b;
    --color-tier-ultimate: #7b1fa2;
    --color-tier-ultimate-plus: #ff6f00;
    --color-tier-enterprise: #1a1a2e;

    /* Dégradés de tier (badges, cartes) */
    --gradient-tier-free: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    --gradient-tier-pro: linear-gradient(135deg, #1a7d2b 0%, #20c997 100%);
    --gradient-tier-ultimate: linear-gradient(135deg, #7b1fa2 0%, #9c27b0 100%);
    --gradient-tier-ultimate-plus: linear-gradient(135deg, #ff6f00 0%, #ff9800 100%);
    --gradient-tier-enterprise: linear-gradient(135deg, #1a1a2e 0%, #d4af37 100%);
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-dark: #0c1219;
    
    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #0c1219 0%, #172230 100%);
    /* Dégradé SIGNATURE HDdev : bleu → cyan. C'est lui qui remplace l'indigo→violet. */
    --gradient-cta: linear-gradient(135deg, #1e7eff 0%, #00d4ff 100%);
    --gradient-success: linear-gradient(135deg, #1a7d2b 0%, #20c997 100%);
    /* Halo cyan discret pour les surfaces premium (cartes mises en avant, héros). */
    --glow-brand: 0 0 0 1px rgba(30, 126, 255, 0.18), 0 18px 48px -12px rgba(0, 212, 255, 0.28);
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.12);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* Layout */
    --container-max: 1200px;
    --header-height: 64px;
}

@media (min-width: 1024px) {
    :root {
        --header-height: 72px;
    }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-gray-800);
    background-color: var(--color-white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary-dark);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-gray-900);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

@media (min-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
}

p {
    margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   4. LAYOUT & CONTAINER
   ========================================================================== */
.hddev-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .hddev-container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .hddev-container {
        padding: 0 2rem;
    }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.hddev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.hddev-btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.hddev-btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.hddev-btn-outline {
    background: transparent;
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
}

.hddev-btn-outline:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
}

.hddev-btn-white {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
}

.hddev-btn-white:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-100);
    color: var(--color-primary);
}

.hddev-btn-outline-white {
    background: transparent;
    border-color: rgba(255,255,255,0.5);
    color: var(--color-white);
}

.hddev-btn-outline-white:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--color-white);
}

.hddev-btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.hddev-btn-success:hover {
    background: #218838;
    border-color: #218838;
}

.hddev-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

.hddev-btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.hddev-btn-xl {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

.hddev-btn-block {
    display: flex;
    width: 100%;
}

/* Tier-specific button colors */
.hddev-btn-tier-free { background: var(--color-tier-free); border-color: var(--color-tier-free); color: white; }
.hddev-btn-tier-pro { background: var(--color-tier-pro); border-color: var(--color-tier-pro); color: white; }
.hddev-btn-tier-ultimate { background: var(--color-tier-ultimate); border-color: var(--color-tier-ultimate); color: white; }
.hddev-btn-tier-ultimate-plus { background: var(--color-tier-ultimate-plus); border-color: var(--color-tier-ultimate-plus); color: white; }
.hddev-btn-tier-enterprise { background: var(--color-tier-enterprise); border-color: var(--color-tier-enterprise); color: white; }

/* ==========================================================================
   6. FORMS
   ========================================================================== */
.hddev-form-group {
    margin-bottom: 1.25rem;
}

.hddev-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
}

.hddev-form-input,
.hddev-form-select,
.hddev-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-gray-900);
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.hddev-form-input:focus,
.hddev-form-select:focus,
.hddev-form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.hddev-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.hddev-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.hddev-form-checkbox input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    accent-color: var(--color-primary);
}

/* ==========================================================================
   7. HEADER & NAVIGATION
   ========================================================================== */
.hddev-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-gray-200);
    height: var(--header-height);
}

.hddev-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 1rem;
}

/* Logo */
.hddev-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hddev-logo img {
    height: 32px;
    width: auto;
}

@media (min-width: 768px) {
    .hddev-logo img {
        height: 38px;
    }
}

/* Desktop Navigation */
.hddev-nav-desktop {
    display: none;
}

@media (min-width: 1024px) {
    .hddev-nav-desktop {
        display: flex;
        flex: 1;
        justify-content: center;
    }
    
    .hddev-nav-menu {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .hddev-nav-menu li a {
        display: block;
        padding: 0.5rem 1rem;
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--color-gray-600);
        border-radius: var(--radius);
        transition: all var(--transition);
    }
    
    .hddev-nav-menu li a:hover,
    .hddev-nav-menu li.current-menu-item a {
        color: var(--color-primary);
        background: rgba(102, 126, 234, 0.08);
    }
}

/* Header Actions */
.hddev-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .hddev-header-actions {
        gap: 0.75rem;
    }
}

/* Language Switcher */
.hddev-lang-switcher {
    position: relative;
    z-index: 101;
}

.hddev-lang-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}

.hddev-lang-btn:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

.hddev-lang-flag {
    font-size: 1.125rem;
    line-height: 1;
}

.hddev-lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    min-width: 180px;
    padding: 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.hddev-lang-switcher.is-open .hddev-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hddev-lang-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-gray-700);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.hddev-lang-option:hover {
    background: var(--color-gray-50);
}

.hddev-lang-option.is-active {
    background: rgba(102, 126, 234, 0.08);
    color: var(--color-primary);
    font-weight: 600;
}

/* Mobile Toggle */
.hddev-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    transition: background var(--transition);
}

.hddev-mobile-toggle:hover {
    background: var(--color-gray-100);
}

@media (min-width: 1024px) {
    .hddev-mobile-toggle {
        display: none;
    }
}

.hddev-hamburger {
    position: relative;
    width: 22px;
    height: 16px;
}

.hddev-hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-gray-700);
    border-radius: 2px;
    transition: all var(--transition-slow);
}

.hddev-hamburger span:nth-child(1) { top: 0; }
.hddev-hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hddev-hamburger span:nth-child(3) { bottom: 0; }

.hddev-mobile-toggle.is-active .hddev-hamburger span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.hddev-mobile-toggle.is-active .hddev-hamburger span:nth-child(2) {
    opacity: 0;
}

.hddev-mobile-toggle.is-active .hddev-hamburger span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* ==========================================================================
   8. MOBILE MENU
   ========================================================================== */
.hddev-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

.hddev-mobile-menu.is-open {
    pointer-events: auto;
}

.hddev-mobile-menu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--transition-slow);
}

.hddev-mobile-menu.is-open .hddev-mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.hddev-mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 320px;
    background: var(--color-white);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.hddev-mobile-menu.is-open .hddev-mobile-menu-panel {
    transform: translateX(0);
}

.hddev-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.hddev-mobile-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    border-radius: var(--radius);
    cursor: pointer;
}

.hddev-mobile-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.hddev-mobile-menu-list li a {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);
}

.hddev-mobile-menu-list li a:hover {
    background: var(--color-gray-50);
    color: var(--color-primary);
}

.hddev-mobile-menu-footer {
    padding: 1rem;
    border-top: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.hddev-footer {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 3rem 0 1.5rem;
}

.hddev-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .hddev-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hddev-footer-grid {
        grid-template-columns: 2fr repeat(3, 1fr);
    }
}

.hddev-footer-brand p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 1rem;
}

.hddev-footer-column h4 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.hddev-footer-column ul li {
    margin-bottom: 0.5rem;
}

.hddev-footer-column ul li a {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition);
}

.hddev-footer-column ul li a:hover {
    color: var(--color-white);
}

.hddev-footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .hddev-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.hddev-footer-bottom p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* ==========================================================================
   10. HERO SECTIONS
   ========================================================================== */

/* Dark Hero (Pages principales) */
.hddev-hero,
.hddev-page-hero,
.hddev-modules-hero,
.hddev-pricing-hero {
    position: relative;
    padding: 3rem 1rem;
    text-align: center;
    background: var(--gradient-hero);
    color: var(--color-white);
    overflow: hidden;
}

.hddev-hero::before,
.hddev-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

.hddev-hero .hddev-container,
.hddev-page-hero .hddev-container {
    position: relative;
    z-index: 1;
}

.hddev-hero h1,
.hddev-page-hero h1,
.hddev-modules-hero h1,
.hddev-pricing-hero h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
}

.hddev-hero p,
.hddev-page-hero p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

@media (min-width: 640px) {
    .hddev-hero,
    .hddev-page-hero,
    .hddev-modules-hero,
    .hddev-pricing-hero {
        padding: 4rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .hddev-hero,
    .hddev-page-hero,
    .hddev-modules-hero,
    .hddev-pricing-hero {
        padding: 5rem 2rem;
    }
}

/* Hero Stats */
.hddev-hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.hddev-stat {
    text-align: center;
}

.hddev-stat-value,
.hddev-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
}

.hddev-stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 640px) {
    .hddev-hero-stats {
        gap: 3rem;
    }
    
    .hddev-stat-value,
    .hddev-stat-number {
        font-size: 2.5rem;
    }
}

/* Hero Actions */
.hddev-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .hddev-hero-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* Light Hero (Documentation, etc.) */
.hddev-hero-light {
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
    color: var(--color-gray-900);
}

.hddev-hero-light h1 {
    color: var(--color-gray-900);
}

.hddev-hero-light p {
    color: var(--color-gray-600);
}

/* ==========================================================================
   11. CARDS (Generic)
   ========================================================================== */
.hddev-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: all var(--transition);
}

.hddev-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.hddev-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.hddev-card-link:hover {
    transform: translateY(-4px);
}

/* Module Cards */
.hddev-modules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .hddev-modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hddev-modules-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.hddev-module-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
}

.hddev-module-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.hddev-module-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hddev-module-card-emoji,
.hddev-module-emoji {
    font-size: 2.5rem;
    line-height: 1;
}

.hddev-module-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 0.25rem;
}

.hddev-module-card-tagline {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0;
}

.hddev-module-card-description {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    flex: 1;
}

.hddev-module-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-100);
}

.hddev-module-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.hddev-module-card-price-from {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.hddev-module-card-price-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-gray-900);
}

.hddev-module-card-price-period {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.hddev-module-card-cta {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* ==========================================================================
   12. PRICING CARDS
   ========================================================================== */
.hddev-pricing-section {
    padding: 3rem 1rem;
}

@media (min-width: 1024px) {
    .hddev-pricing-section {
        padding: 4rem 2rem;
    }
}

.hddev-pricing-section h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.hddev-pricing-subtitle {
    text-align: center;
    color: var(--color-gray-600);
    margin-bottom: 2rem;
}

/* Pricing Toggle */
.hddev-pricing-toggle {
    display: flex;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    padding: 4px;
    max-width: 300px;
    margin: 0 auto 2rem;
}

.hddev-pricing-toggle button {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gray-600);
    background: transparent;
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.hddev-pricing-toggle button.active {
    background: var(--color-white);
    color: var(--color-gray-900);
    box-shadow: var(--shadow);
}

.hddev-save-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-success);
    border-radius: var(--radius-sm);
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Pricing Cards Grid */
.hddev-pricing-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .hddev-pricing-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hddev-pricing-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

/* Pricing Card */
.hddev-pricing-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    position: relative;
    transition: all var(--transition);
}

.hddev-pricing-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.hddev-pricing-card.is-popular {
    border-color: var(--color-tier-ultimate);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
    .hddev-pricing-card.is-popular {
        transform: scale(1.05);
        z-index: 1;
    }
}

.hddev-pricing-card.is-best-value {
    border-color: var(--color-tier-ultimate-plus);
}

/* Pricing Card Badge */
.hddev-pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-tier-ultimate);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.hddev-pricing-card.is-best-value .hddev-pricing-badge {
    background: var(--color-tier-ultimate-plus);
}

/* Pricing Card Header */
.hddev-pricing-card-header {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-100);
}

.hddev-pricing-card.is-popular .hddev-pricing-card-header,
.hddev-pricing-card.is-best-value .hddev-pricing-card-header {
    padding-top: 0.5rem;
}

.hddev-pricing-card-tier {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.hddev-pricing-card-tier.tier-free { color: var(--color-tier-free); }
.hddev-pricing-card-tier.tier-pro { color: var(--color-tier-pro); }
.hddev-pricing-card-tier.tier-ultimate { color: var(--color-tier-ultimate); }
.hddev-pricing-card-tier.tier-ultimate-plus { color: var(--color-tier-ultimate-plus); }
.hddev-pricing-card-tier.tier-enterprise { color: var(--color-tier-enterprise); }

.hddev-pricing-card-price {
    margin-bottom: 0.5rem;
}

.hddev-pricing-card-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-gray-900);
}

.hddev-pricing-card-period {
    font-size: 1rem;
    color: var(--color-gray-500);
}

.hddev-pricing-card-monthly {
    display: block;
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.hddev-pricing-card-sites {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

/* Pricing Features List */
.hddev-pricing-features {
    margin-bottom: 1.5rem;
}

.hddev-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.hddev-pricing-features li::before {
    content: '✓';
    color: var(--color-success);
    font-weight: 700;
    flex-shrink: 0;
}

/* Pricing Card CTA */
.hddev-pricing-card-cta {
    margin-top: auto;
}

.hddev-pricing-card-cta .hddev-btn {
    width: 100%;
}

/* ==========================================================================
   13. TABLES
   ========================================================================== */
.hddev-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1rem;
    padding: 0 1rem;
}

.hddev-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.hddev-table th,
.hddev-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
}

.hddev-table th {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    background: var(--color-gray-50);
}

.hddev-table td {
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.hddev-table tbody tr:hover {
    background: var(--color-gray-50);
}

.hddev-table .check {
    color: var(--color-success);
    font-weight: 700;
}

.hddev-table .cross {
    color: var(--color-gray-300);
}

/* ==========================================================================
   14. MODULE SINGLE PAGE
   ========================================================================== */
.hddev-module-single .hddev-hero-benefit {
    padding: 3rem 1rem;
    background: var(--gradient-hero);
    color: var(--color-white);
    text-align: center;
}

@media (min-width: 640px) {
    .hddev-module-single .hddev-hero-benefit {
        padding: 4rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .hddev-module-single .hddev-hero-benefit {
        padding: 5rem 2rem;
    }
}

.hddev-module-emoji-large {
    font-size: 4rem;
    display: block;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .hddev-module-emoji-large {
        font-size: 5rem;
    }
}

.hddev-hero-headline {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    max-width: 800px;
    margin: 0 auto 1rem;
    color: var(--color-white);
}

@media (min-width: 640px) {
    .hddev-hero-headline {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .hddev-hero-headline {
        font-size: 3rem;
    }
}

.hddev-hero-subheadline {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.hddev-trust-badge-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}

.hddev-hero-ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .hddev-hero-ctas {
        flex-direction: row;
        justify-content: center;
    }
}

.hddev-hero-guarantee {
    color: var(--color-success);
    font-size: 0.9rem;
}

.hddev-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.hddev-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Benefits Section */
.hddev-benefits-section {
    padding: 3rem 1rem;
    background: var(--color-gray-50);
}

@media (min-width: 1024px) {
    .hddev-benefits-section {
        padding: 4rem 2rem;
    }
}

.hddev-benefits-section h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.hddev-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .hddev-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hddev-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.hddev-benefit-card {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-card);
}

.hddev-benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hddev-benefit-card p {
    font-size: 0.95rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Pricing Section in Module Page */
.hddev-pricing-hc {
    padding: 3rem 1rem;
    background: var(--color-white);
}

@media (min-width: 1024px) {
    .hddev-pricing-hc {
        padding: 4rem 2rem;
    }
}

.hddev-pricing-hc h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.hddev-info-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--gradient-cta);
    color: var(--color-white);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

/* FAQ Section */
.hddev-faq-section {
    padding: 3rem 1rem;
    background: var(--color-gray-50);
}

@media (min-width: 1024px) {
    .hddev-faq-section {
        padding: 4rem 2rem;
    }
}

.hddev-faq-section h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.hddev-faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .hddev-faq-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hddev-faq-item {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.hddev-faq-item h4 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--color-gray-900);
}

.hddev-faq-item p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Final CTA Section */
.hddev-final-cta {
    padding: 4rem 1rem;
    background: var(--gradient-cta);
    color: var(--color-white);
    text-align: center;
}

@media (min-width: 1024px) {
    .hddev-final-cta {
        padding: 5rem 2rem;
    }
}

.hddev-final-cta h2 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.hddev-final-cta p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 500px;
    margin: 0 auto 1.5rem;
}

/* ==========================================================================
   15. CONTACT PAGE
   ========================================================================== */
.hddev-contact-page {
    padding: 3rem 1rem;
}

@media (min-width: 1024px) {
    .hddev-contact-page {
        padding: 4rem 2rem;
    }
}

.hddev-contact-page h1 {
    margin-bottom: 0.5rem;
}

.hddev-contact-page > p {
    color: var(--color-gray-600);
    margin-bottom: 2rem;
}

.hddev-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .hddev-contact-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.hddev-contact-form-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.hddev-contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hddev-contact-info-card {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.hddev-contact-info-card h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hddev-contact-info-card p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Response Times */
.hddev-response-times h4 {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.hddev-response-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.hddev-tier-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-white);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.hddev-tier-badge.tier-free { background: var(--color-tier-free); }
.hddev-tier-badge.tier-pro { background: var(--color-tier-pro); }
.hddev-tier-badge.tier-ultimate { background: var(--color-tier-ultimate); }
.hddev-tier-badge.tier-ultimate-plus { background: var(--color-tier-ultimate-plus); }
.hddev-tier-badge.tier-enterprise { background: var(--color-tier-enterprise); }

/* ==========================================================================
   16. DOCUMENTATION PAGE
   ========================================================================== */
.hddev-docs-page {
    background: var(--color-gray-50);
}

.hddev-docs-hero {
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
    padding: 3rem 1rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .hddev-docs-hero {
        padding: 4rem 2rem;
    }
}

.hddev-docs-hero h1 {
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.hddev-docs-hero p {
    color: var(--color-gray-600);
    margin-bottom: 1.5rem;
}

.hddev-docs-search {
    max-width: 500px;
    margin: 0 auto;
}

.hddev-docs-section {
    padding: 3rem 1rem;
}

@media (min-width: 1024px) {
    .hddev-docs-section {
        padding: 4rem 2rem;
    }
}

.hddev-docs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .hddev-docs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hddev-docs-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.hddev-docs-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.hddev-docs-card-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.hddev-docs-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.hddev-docs-card p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    margin-bottom: 1rem;
}

.hddev-docs-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hddev-docs-links a {
    font-size: 0.875rem;
    color: var(--color-primary);
}

.hddev-docs-links a:hover {
    text-decoration: underline;
}

/* Docs CTA */
.hddev-docs-cta {
    padding: 4rem 1rem;
    background: var(--gradient-cta);
    color: var(--color-white);
    text-align: center;
}

.hddev-docs-cta h2 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.hddev-docs-cta p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   17. LEGAL PAGES
   ========================================================================== */
.hddev-legal-page {
    padding: 2rem 1rem 3rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .hddev-legal-page {
        padding: 3rem 2rem 4rem;
    }
}

.hddev-legal-page h1 {
    margin-bottom: 0.5rem;
}

.hddev-legal-meta {
    font-size: 0.9rem;
    color: var(--color-gray-500);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.hddev-legal-page h2 {
    font-size: 1.25rem;
    margin: 2rem 0 1rem;
}

.hddev-legal-page p {
    line-height: 1.7;
    color: var(--color-gray-700);
}

.hddev-legal-page ul,
.hddev-legal-page ol {
    margin: 1rem 0 1rem 1.5rem;
    color: var(--color-gray-700);
}

.hddev-legal-page li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    list-style: disc;
}

/* ==========================================================================
   18. AUTH PAGES
   ========================================================================== */
.hddev-auth-page {
    min-height: calc(100vh - var(--header-height) - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--color-gray-50);
}

.hddev-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-card);
}

.hddev-auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.hddev-auth-header img {
    height: 40px;
    margin: 0 auto 1.5rem;
}

.hddev-auth-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.hddev-auth-header p {
    color: var(--color-gray-600);
    margin: 0;
}

.hddev-auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-gray-600);
}

.hddev-auth-footer a {
    font-weight: 500;
}

/* ==========================================================================
   19. PORTAL
   ========================================================================== */
.hddev-portal {
    display: grid;
    grid-template-columns: 1fr;
    min-height: calc(100vh - var(--header-height));
}

@media (min-width: 768px) {
    .hddev-portal {
        grid-template-columns: 250px 1fr;
    }
}

.hddev-portal-sidebar {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 1.5rem;
}

.hddev-portal-sidebar-header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}

.hddev-portal-user-avatar {
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.hddev-portal-nav li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: rgba(255, 255, 255, 0.75);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.hddev-portal-nav li a:hover,
.hddev-portal-nav li.active a {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

.hddev-portal-content {
    padding: 2rem;
    background: var(--color-gray-50);
}

.hddev-portal-content h1 {
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   20. CHECKOUT
   ========================================================================== */
.hddev-checkout-page {
    padding: 2rem 1rem;
    background: var(--color-gray-50);
}

@media (min-width: 1024px) {
    .hddev-checkout-page {
        padding: 3rem 2rem;
    }
}

.hddev-checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .hddev-checkout-grid {
        grid-template-columns: 1fr 380px;
    }
}

.hddev-checkout-main {
    order: 2;
}

@media (min-width: 768px) {
    .hddev-checkout-main {
        order: 1;
    }
}

.hddev-checkout-sidebar {
    order: 1;
}

@media (min-width: 768px) {
    .hddev-checkout-sidebar {
        order: 2;
        position: sticky;
        top: calc(var(--header-height) + 1rem);
        align-self: start;
    }
}

.hddev-checkout-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    margin-bottom: 1.5rem;
}

.hddev-checkout-card h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-100);
}

/* Order Summary */
.hddev-order-summary {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.hddev-order-summary h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-gray-100);
}

.hddev-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-gray-50);
}

.hddev-order-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--color-gray-900);
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

/* ==========================================================================
   21. CART & MINI-CART
   ========================================================================== */
.hddev-mini-cart {
    position: relative;
    z-index: 99;
}

.hddev-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}

.hddev-cart-icon:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

.hddev-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hddev-mini-cart-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 2rem);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-gray-200);
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.hddev-mini-cart:hover .hddev-mini-cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hddev-mini-cart-empty {
    text-align: center;
    color: var(--color-gray-500);
    padding: 1.5rem;
}

.hddev-mini-cart-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.hddev-mini-cart-item:last-of-type {
    border-bottom: none;
}

.hddev-mini-cart-item-emoji {
    font-size: 1.5rem;
}

.hddev-mini-cart-item-info {
    flex: 1;
    min-width: 0;
}

.hddev-mini-cart-item-name {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hddev-mini-cart-item-price {
    font-weight: 600;
    font-size: 0.875rem;
}

.hddev-mini-cart-item-remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-gray-400);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.hddev-mini-cart-item-remove:hover {
    color: var(--color-danger);
    background: rgba(220, 53, 69, 0.1);
}

.hddev-mini-cart-total {
    padding: 0.75rem 0;
    margin-top: 0.5rem;
    border-top: 2px solid var(--color-gray-900);
    text-align: right;
    font-weight: 700;
}

/* ==========================================================================
   22. UTILITIES
   ========================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--color-gray-500); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.hidden { display: none !important; }
[x-cloak] { display: none !important; }

/* Page sections */
.hddev-section {
    padding: 3rem 1rem;
}

@media (min-width: 1024px) {
    .hddev-section {
        padding: 4rem 2rem;
    }
}

.hddev-section-alt {
    background: var(--color-gray-50);
}

.hddev-section h2 {
    text-align: center;
    margin-bottom: 2rem;
}

/* CTA Section */
.hddev-cta-section {
    padding: 4rem 1rem;
    background: var(--gradient-cta);
    color: var(--color-white);
    text-align: center;
}

@media (min-width: 1024px) {
    .hddev-cta-section {
        padding: 5rem 2rem;
    }
}

.hddev-cta-section h2 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.hddev-cta-section p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 500px;
    margin: 0 auto 1.5rem;
}

/* Modules Category Section */
.hddev-modules-category {
    padding: 3rem 1rem;
}

.hddev-modules-category:nth-child(even) {
    background: var(--color-gray-50);
}

.hddev-modules-category h2 {
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .hddev-modules-category {
        padding: 4rem 2rem;
    }
}

/* Modules CTA */
.hddev-modules-cta {
    padding: 4rem 1rem;
    background: var(--gradient-cta);
    color: var(--color-white);
    text-align: center;
}

.hddev-modules-cta h2 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.hddev-modules-cta p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
}

.hddev-modules-cta .hddev-btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
}

/* Price free badge */
.hddev-price-free {
    color: var(--color-success);
    font-weight: 600;
}

/* Comparatif Table Section */
.hddev-all-modules-table {
    padding: 3rem 1rem;
    background: var(--color-white);
}

.hddev-all-modules-table h2 {
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .hddev-all-modules-table {
        padding: 4rem 2rem;
    }
}

/* ==========================================================================
   MODULE SINGLE - PRICING CARDS HIGH CONVERSION
   ========================================================================== */

/* Pricing Section HC */
.hddev-pricing-hc {
    padding: 3rem 1rem;
    background: var(--color-white);
}

@media (min-width: 1024px) {
    .hddev-pricing-hc {
        padding: 4rem 2rem;
    }
}

.hddev-pricing-hc h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.hddev-pricing-subtitle {
    text-align: center;
    color: var(--color-gray-600);
    margin-bottom: 1.5rem;
}

/* Pricing Toggle HC */
.hddev-pricing-toggle-hc {
    display: flex;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    padding: 4px;
    max-width: 320px;
    margin: 0 auto 2rem;
}

.hddev-pricing-toggle-hc button {
    flex: 1;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gray-600);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition);
}

.hddev-pricing-toggle-hc button.active {
    background: var(--color-white);
    color: var(--color-gray-900);
    box-shadow: var(--shadow);
}

.hddev-save-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-success);
    border-radius: var(--radius-sm);
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Pricing Cards Grid HC - Adaptatif selon nombre de tiers */
.hddev-pricing-cards-hc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .hddev-pricing-cards-hc {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .hddev-pricing-cards-hc {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        align-items: start;
    }
    
    /* Si 5 cards (avec ENTERPRISE), ajuster la grille */
    .hddev-pricing-cards-hc:has(.enterprise) {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.75rem;
    }
}

/* Fallback pour navigateurs sans :has() - via classe JS */
@media (min-width: 1024px) {
    .hddev-pricing-cards-hc.has-enterprise {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.75rem;
    }
}

/* Pricing Card HC */
.hddev-pricing-card-hc {
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    position: relative;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}

.hddev-pricing-card-hc:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

/* Popular Card */
.hddev-pricing-card-hc.popular {
    border-color: var(--color-tier-ultimate);
    box-shadow: var(--shadow-lg);
    z-index: 2;
}

@media (min-width: 1024px) {
    .hddev-pricing-card-hc.popular {
        transform: scale(1.05);
        padding: 2rem 1.5rem;
    }
}

/* Anchor Card (Best Value) */
.hddev-pricing-card-hc.anchor {
    border-color: var(--color-tier-ultimate-plus);
}

/* Enterprise Card */
.hddev-pricing-card-hc.enterprise {
    border-color: #1e7eff;
    background: linear-gradient(180deg, rgba(21, 101, 192, 0.03) 0%, transparent 100%);
}

.hddev-pricing-card-hc.enterprise .hddev-card-header h3 {
    color: #1e7eff;
}

/* Enterprise Ribbon */
.hddev-enterprise-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background: #1e7eff;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Ribbons */
.hddev-popular-ribbon,
.hddev-anchor-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.hddev-popular-ribbon {
    background: var(--color-tier-ultimate);
}

.hddev-anchor-ribbon {
    background: var(--color-tier-ultimate-plus);
}

/* Card Header */
.hddev-pricing-card-hc .hddev-card-header {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-100);
}

.hddev-pricing-card-hc.popular .hddev-card-header,
.hddev-pricing-card-hc.anchor .hddev-card-header {
    padding-top: 0.5rem;
}

.hddev-pricing-card-hc .hddev-card-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
    color: var(--tier-color, var(--color-gray-600));
}

/* Price Display */
.hddev-price-display {
    margin-bottom: 0.5rem;
}

.hddev-price-amount {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-gray-900);
}

.hddev-price-amount.hddev-price-free {
    color: var(--color-tier-free);
}

.hddev-price-period {
    font-size: 1rem;
    color: var(--color-gray-500);
}

.hddev-price-monthly {
    display: block;
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin-top: 0.25rem;
}

.hddev-sites-count {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

/* Features List */
.hddev-features-list {
    flex: 1;
    margin-bottom: 1.5rem;
}

.hddev-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--color-gray-700);
    line-height: 1.4;
}

.hddev-check {
    color: var(--color-success);
    font-weight: 700;
    flex-shrink: 0;
}

/* Card CTA */
.hddev-pricing-card-hc .hddev-card-cta {
    margin-top: auto;
}

.hddev-pricing-card-hc .hddev-card-cta .hddev-btn {
    width: 100%;
}

.hddev-btn-glow {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* Guarantee Box */
.hddev-guarantee-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hddev-guarantee-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.hddev-guarantee-content strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-gray-900);
}

.hddev-guarantee-content p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* ==========================================================================
   MODULE SINGLE - FEATURES COMPARISON TABLE
   ========================================================================== */
.hddev-features-table-section {
    padding: 3rem 1rem;
    background: var(--color-gray-50);
}

@media (min-width: 1024px) {
    .hddev-features-table-section {
        padding: 4rem 2rem;
    }
}

.hddev-features-table-section h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.hddev-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.hddev-features-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

.hddev-features-table th,
.hddev-features-table td {
    padding: 1rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--color-gray-100);
}

.hddev-features-table th:first-child,
.hddev-features-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.hddev-features-table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    background: var(--color-gray-50);
    position: sticky;
    top: 0;
    z-index: 10;
}

.hddev-features-table thead th.highlight {
    color: var(--color-tier-ultimate);
    background: rgba(139, 92, 246, 0.08);
}

.hddev-features-table tbody tr:hover {
    background: var(--color-gray-50);
}

.hddev-features-table tbody td {
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.hddev-features-table tbody td.highlight {
    background: rgba(139, 92, 246, 0.04);
}

/* Check & Cross icons in table */
.hddev-features-table tbody td:not(:first-child) {
    font-weight: 600;
}

.hddev-features-table .check {
    color: var(--color-success);
    font-size: 1.1rem;
}

.hddev-features-table .cross {
    color: var(--color-gray-300);
    font-size: 1rem;
}

.hddev-features-table .has-feature {
    background: rgba(40, 167, 69, 0.05);
}

.hddev-features-table .no-feature {
    background: transparent;
}

.hddev-features-table tbody td.highlight.has-feature {
    background: rgba(139, 92, 246, 0.1);
}

.hddev-features-table tbody td.highlight.no-feature {
    background: rgba(139, 92, 246, 0.04);
}

/* Section headers in comparison table */
.hddev-features-table .hddev-table-section-header td {
    background: var(--color-gray-100);
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    color: var(--color-gray-700);
    border-bottom: 2px solid var(--color-gray-200);
}

/* Unlimited values styling */
.hddev-features-table .unlimited {
    color: var(--color-success);
    font-weight: 700;
}

/* Enterprise column styling */
.hddev-features-table th.enterprise,
.hddev-features-table td.enterprise {
    background: rgba(21, 101, 192, 0.06);
    color: var(--color-gray-800);
}

.hddev-features-table th.enterprise {
    color: #1e7eff;
}

.hddev-features-table td.enterprise.has-feature {
    background: rgba(21, 101, 192, 0.1);
}

/* Quota rows - make numbers stand out */
.hddev-features-table tbody tr:not(.hddev-table-section-header) td:not(:first-child) {
    font-variant-numeric: tabular-nums;
}

/* FAQ Section specific to module single */
.hddev-faq-section {
    padding: 3rem 1rem;
    background: var(--color-white);
}

@media (min-width: 1024px) {
    .hddev-faq-section {
        padding: 4rem 2rem;
    }
}

.hddev-faq-section h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.hddev-faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .hddev-faq-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

.hddev-faq-item {
    background: var(--color-gray-50);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
}

.hddev-faq-item h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--color-gray-900);
}

.hddev-faq-item p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Final CTA Section */
.hddev-final-cta {
    padding: 4rem 1rem;
    background: var(--gradient-cta);
    color: var(--color-white);
    text-align: center;
}

@media (min-width: 1024px) {
    .hddev-final-cta {
        padding: 5rem 2rem;
    }
}

.hddev-final-cta h2 {
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.hddev-final-cta > p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 500px;
    margin: 0 auto 1.5rem;
}

.hddev-final-guarantee {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.hddev-btn-arrow {
    margin-left: 0.5rem;
    transition: transform var(--transition);
}

.hddev-btn:hover .hddev-btn-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   MODULE SINGLE - BENEFITS SECTION
   ========================================================================== */
.hddev-benefits-section {
    padding: 3rem 1rem;
    background: var(--color-gray-50);
}

@media (min-width: 1024px) {
    .hddev-benefits-section {
        padding: 4rem 2rem;
    }
}

.hddev-benefits-section h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.hddev-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .hddev-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hddev-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

.hddev-benefit-card {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-100);
}

.hddev-benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.hddev-benefit-card p {
    font-size: 0.95rem;
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   MODULE SINGLE - INFO BANNER
   ========================================================================== */
.hddev-info-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--gradient-cta);
    color: var(--color-white);
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.hddev-info-banner span {
    font-size: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * PAGE D'ACCUEIL — HABILLAGE HDdev (2026-09-04)
 *
 * POURQUOI : l'accueil réutilisait les classes génériques du gabarit d'origine, avec
 * le dégradé indigo→violet mis sur liste noire par la règle #28. Ce bloc habille les
 * seules classes propres à l'accueil, en n'employant QUE les jetons de marque définis
 * dans `:root` — aucune couleur en dur, pour qu'un changement de palette reste UN
 * SEUL point de vérité. Halo cyan, fond navy, dégradé signature bleu→cyan.
 *
 * ALTERNATIVE ÉCARTÉE (#19) : une feuille de style séparée pour l'accueil — écartée,
 * elle ajouterait une requête HTTP et un second endroit où la palette peut diverger.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.hddev-hero-home {
    position: relative;
    overflow: hidden;
    background: var(--gradient-hero);
    color: var(--color-white);
    padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
}

/* Halo cyan : la seule « décoration » de la page. Il donne la profondeur que le
   fond plat n'avait pas, sans image à charger. */
.hddev-hero-glow {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 120%;
    background:
        radial-gradient(45% 55% at 20% 15%, rgba(30, 126, 255, 0.32) 0%, rgba(30, 126, 255, 0) 70%),
        radial-gradient(40% 50% at 82% 8%, rgba(0, 212, 255, 0.22) 0%, rgba(0, 212, 255, 0) 72%);
    pointer-events: none;
}

.hddev-hero-home .hddev-hero-content { position: relative; z-index: 1; max-width: 62rem; }

.hddev-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    margin-bottom: var(--space-5);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-secondary);
    background: rgba(0, 212, 255, 0.10);
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: var(--radius-full);
}

.hddev-hero-home .hddev-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5.2vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5);
}

.hddev-hero-home .hddev-hero-highlight {
    display: block;
    background: var(--gradient-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hddev-hero-home .hddev-hero-description {
    max-width: 46rem;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.65;
    color: rgba(245, 247, 250, 0.82);
    margin: 0 0 var(--space-8);
}

.hddev-hero-home .hddev-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.hddev-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    list-style: none;
    margin: var(--space-10) 0 0;
    padding: var(--space-6) 0 0;
    border-top: 1px solid rgba(245, 247, 250, 0.12);
    font-size: 0.92rem;
    color: rgba(245, 247, 250, 0.78);
}
.hddev-hero-trust li { display: flex; align-items: baseline; gap: 0.45rem; }
.hddev-hero-trust strong { font-family: var(--font-display); font-size: 1.35rem; color: var(--color-white); }
.hddev-trust-mark { color: var(--color-secondary); font-weight: 700; }

/* ── Grille des modules ─────────────────────────────────────────────────────── */
.hddev-section-title-center { text-align: center; }

.hddev-modules-section .hddev-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-6);
}

.hddev-module-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hddev-module-card:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 126, 255, 0.35);
    box-shadow: var(--shadow-card-hover);
}
/* Un module non tarifé ne doit pas se présenter comme une offre : pas de relief,
   pas d'appel à l'action. Il informe, il ne vend pas encore. */
.hddev-module-card-soon { opacity: 0.82; }
.hddev-module-card-soon:hover { transform: none; border-color: var(--color-gray-200); box-shadow: var(--shadow-card); }

.hddev-module-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-6);
    color: inherit;
    text-decoration: none;
}
.hddev-module-card-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-xl); }

.hddev-module-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.hddev-module-emoji { font-size: 2rem; line-height: 1; }

.hddev-module-badge-soon {
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
}

.hddev-module-card-title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 var(--space-2); }
.hddev-module-card-tagline { font-size: 0.9rem; line-height: 1.55; color: var(--color-gray-600); margin: 0 0 var(--space-6); }

.hddev-module-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}
.hddev-module-card-price { display: flex; flex-direction: column; font-size: 0.95rem; color: var(--color-gray-900); }
.hddev-price-from { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-gray-500); }
.hddev-module-card-price strong { font-family: var(--font-display); font-size: 1.3rem; }
.hddev-module-card-price-soon { font-size: 0.85rem; color: var(--color-gray-500); }
.hddev-module-card-more { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); white-space: nowrap; }

/* ── Les trois étapes ───────────────────────────────────────────────────────── */
.hddev-how-section { background: var(--color-gray-50); }
.hddev-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-6);
    list-style: none;
    margin: var(--space-10) 0 0;
    padding: 0;
    counter-reset: hddev-step;
}
.hddev-step-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
}
.hddev-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: var(--space-4);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-white);
    background: var(--gradient-cta);
    border-radius: var(--radius-full);
}
.hddev-step-card h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 var(--space-2); }
.hddev-step-card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--color-gray-600); }

/* ── Remise bundle ──────────────────────────────────────────────────────────── */
.hddev-bundle-card {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
    padding: clamp(2rem, 4vw, 3.25rem);
    color: var(--color-white);
    background: var(--gradient-hero);
    border-radius: var(--radius-2xl);
    box-shadow: var(--glow-brand);
}
.hddev-bundle-text h2 {
    /* `color` explicite : sans lui le titre héritait de la couleur de texte sombre
       du site et devenait NOIR SUR NAVY — illisible (constaté à l'écran le 04/09).
       Une carte à fond sombre doit toujours redéclarer sa couleur de texte. */
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin: 0 0 var(--space-4);
}
.hddev-bundle-text p { margin: 0 0 var(--space-6); line-height: 1.7; color: rgba(245, 247, 250, 0.82); }

.hddev-bundle-scale { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.hddev-bundle-scale li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: rgba(245, 247, 250, 0.06);
    border: 1px solid rgba(245, 247, 250, 0.10);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
}
.hddev-bundle-scale li b { font-family: var(--font-display); color: var(--color-secondary); }
.hddev-bundle-scale-max { background: rgba(0, 212, 255, 0.12) !important; border-color: rgba(0, 212, 255, 0.34) !important; }

@media (max-width: 860px) {
    .hddev-bundle-card { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
    .hddev-module-card, .hddev-module-card:hover { transition: none; transform: none; }
}

/* Le montant et sa périodicité tiennent sur UNE ligne : « 9,99 €/mois » se lit
   d'un coup d'œil, alors que le suffixe rejeté à la ligne cassait la lecture. */
.hddev-price-amount { display: inline-flex; align-items: baseline; gap: 0.1rem; }
.hddev-price-period { font-size: 0.85rem; color: var(--color-gray-500); }
.hddev-modules-section .hddev-section-header { text-align: center; margin-bottom: var(--space-10); }
.hddev-modules-section .hddev-section-description { max-width: 44rem; margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════════════════
 * PAGE TARIFS — HABILLAGE (2026-09-04)
 *
 * POURQUOI : 33 classes de `template-pricing.php` n'avaient AUCUNE règle CSS. La
 * page de conversion s'affichait donc en HTML brut : une liste verticale d'emojis
 * et de titres, sans carte, sans grille, sans panier lisible. C'est très
 * exactement le « site moche » signalé. Le gabarit était bon, l'habillage manquait.
 *
 * COMMENT : uniquement des jetons de `:root` — aucune couleur en dur, pour qu'un
 * changement de palette reste un seul point de vérité (#28).
 * ═══════════════════════════════════════════════════════════════════════════════ */

.hddev-pricing-page { background: var(--color-gray-50); }

.hddev-module-selector { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.hddev-selector-info { margin: 0 0 var(--space-8); color: var(--color-gray-600); }

.hddev-modules-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: var(--space-5);
}

.hddev-module-select-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.hddev-module-select-card:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* L'état sélectionné doit se voir SANS lire le texte : bordure de marque + halo. */
.hddev-module-select-card.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(30, 126, 255, 0.12), var(--shadow-md);
}
/* Un module non tarifé n'est pas cliquable : le curseur doit le dire. */
.hddev-msc-unavailable { cursor: default; opacity: 0.72; }
.hddev-msc-unavailable:hover { border-color: var(--color-gray-200); box-shadow: var(--shadow-sm); transform: none; }

.hddev-msc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.hddev-msc-emoji { font-size: 1.9rem; line-height: 1; }
.hddev-msc-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem;
    color: var(--color-white); background: var(--color-primary);
    border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 700;
}
.hddev-module-select-card h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 var(--space-2); }
.hddev-module-select-card > p { margin: 0 0 var(--space-4); font-size: 0.87rem; line-height: 1.5; color: var(--color-gray-600); }

.hddev-tier-selector { margin-bottom: var(--space-4); }
.hddev-tier-selector select {
    width: 100%; padding: 0.55rem 0.7rem;
    font: inherit; font-size: 0.88rem;
    color: var(--color-gray-900); background: var(--color-white);
    border: 1px solid var(--color-gray-300); border-radius: var(--radius);
}
.hddev-tier-selector select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.hddev-msc-price { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-gray-100); font-size: 0.9rem; color: var(--color-gray-900); }
.hddev-msc-soon { font-size: 0.85rem; color: var(--color-gray-500); }

/* ── Panier ─────────────────────────────────────────────────────────────────── */
.hddev-cart-summary { padding: 0 0 clamp(2.5rem, 6vw, 4rem); }
.hddev-cart-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .hddev-cart-grid { grid-template-columns: 1fr; } }

.hddev-cart-items { display: grid; gap: var(--space-3); }
.hddev-cart-item {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
}
.hddev-cart-item-info { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.hddev-cart-item-position {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; flex-shrink: 0;
    font-size: 0.8rem; font-weight: 700;
    color: var(--color-white); background: var(--gradient-cta); border-radius: var(--radius-full);
}
.hddev-cart-item-discount {
    padding: 0.15rem 0.45rem; font-size: 0.72rem; font-weight: 700;
    color: var(--color-white); background: var(--color-success-dark); border-radius: var(--radius-sm);
}
.hddev-cart-item-price { display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.hddev-cart-item-original { color: var(--color-gray-400); text-decoration: line-through; font-size: 0.85rem; }
.hddev-cart-item-final { font-family: var(--font-display); font-weight: 700; }
.hddev-cart-item-remove {
    background: none; border: none; cursor: pointer;
    font-size: 1.35rem; line-height: 1; color: var(--color-gray-400); padding: 0 0.25rem;
}
.hddev-cart-item-remove:hover { color: var(--color-danger); }

.hddev-cart-discount-info { margin-top: var(--space-4); font-size: 0.9rem; color: var(--color-success-dark); }

.hddev-cart-total {
    position: sticky; top: calc(var(--header-height) + 1rem);
    padding: var(--space-6);
    background: var(--color-white); border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
}
.hddev-cart-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; }
.hddev-cart-total-row.hddev-discount { color: var(--color-success-dark); font-weight: 600; }
.hddev-cart-total-row.hddev-final {
    margin-top: var(--space-3); padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-200); font-size: 1.05rem; font-weight: 700;
}
.hddev-cart-final-price { font-family: var(--font-display); font-size: 1.6rem; }
.hddev-cart-total-permonth { margin-bottom: var(--space-5); font-size: 0.85rem; color: var(--color-gray-500); text-align: right; }
.hddev-cart-guarantee { margin: var(--space-4) 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--color-gray-500); text-align: center; }

/* ── Bandeau remise ─────────────────────────────────────────────────────────── */
.hddev-discount-banner { padding: 0 0 clamp(2.5rem, 6vw, 4rem); }
.hddev-bundle-promo {
    display: flex; align-items: center; gap: var(--space-5);
    padding: var(--space-6) var(--space-8);
    color: var(--color-white); background: var(--gradient-hero);
    border-radius: var(--radius-xl); box-shadow: var(--glow-brand);
}
.hddev-bundle-icon { font-size: 2.25rem; line-height: 1; }
.hddev-bundle-promo .hddev-bundle-text h3 { color: var(--color-white); font-family: var(--font-display); margin: 0 0 var(--space-2); }
.hddev-bundle-promo .hddev-bundle-text p { margin: 0; color: rgba(245, 247, 250, 0.82); }

/* ── FAQ ────────────────────────────────────────────────────────────────────── */
.hddev-faq { padding: 0 0 clamp(3rem, 7vw, 5rem); }
.hddev-faq-list { display: grid; gap: var(--space-4); max-width: 52rem; margin: var(--space-8) auto 0; }
.hddev-faq-item { padding: var(--space-5) var(--space-6); background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); }
.hddev-faq-item h3 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 var(--space-2); }
.hddev-faq-item p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--color-gray-600); }

/* ── Page « à propos » (2026-09-04) ─────────────────────────────────────────── */
.hddev-about-prose { max-width: 48rem; margin-inline: auto; }
.hddev-about-prose h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 var(--space-4); }
.hddev-about-prose p { margin: 0 0 var(--space-4); line-height: 1.75; color: var(--color-gray-700); }
.hddev-values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.hddev-value-card { padding: var(--space-6); background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); }
.hddev-value-icon { font-size: 1.9rem; line-height: 1; }
.hddev-value-title { font-family: var(--font-display); font-size: 1.05rem; margin: var(--space-3) 0 var(--space-2); }
.hddev-value-description { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--color-gray-600); }
.hddev-stats-section { background: var(--color-gray-50); }
.hddev-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-6); margin-top: var(--space-10); text-align: center; }
.hddev-stat-item { display: flex; flex-direction: column; gap: var(--space-2); }
.hddev-stat-number { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; background: var(--gradient-cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hddev-stat-label { font-size: 0.9rem; color: var(--color-gray-600); }
.hddev-team-grid { display: flex; justify-content: center; margin-top: var(--space-8); }
.hddev-team-card { padding: var(--space-6) var(--space-8); text-align: center; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); }
.hddev-team-avatar { font-size: 2.5rem; }
.hddev-team-name { font-family: var(--font-display); margin: var(--space-3) 0 var(--space-1); }
.hddev-team-role { margin: 0; font-size: 0.9rem; color: var(--color-gray-600); }