/* ============================================
   Growdn — palette d'origine restauree (indigo/violet + degrade Instagram
   pour les elements sociaux). La DA « instrument » ambre a ete retiree a la
   demande du client. Seules les VALEURS des variables ci-dessous changent ;
   les noms restent ceux d'origine, toute la feuille en depend.
   ============================================ */

:root {
    /* --- Fonds (Growdn : indigo sombre d'origine) ------------------- */
    --bg-primary: #0a0a1a;
    --bg-secondary: #050510;
    --bg-card: #14142a;
    --bg-card-hover: #1c1c3a;

    /* --- Texte ------------------------------------------------------- */
    --text-primary: #e8e8ef;
    --text-secondary: #a6a6c0;
    --text-muted: #8080a0;

    --section-gap: 56px;

    /* --- Accent (violet/rose Growdn d'origine, mesure sur la capture) --- */
    --accent: #8b5cf6;          /* violet, ~#705bb9 rendu bouton */
    --accent-light: #a78bfa;
    --accent-deep: #7c3aed;
    --success: #10b981;

    --warn: #f59e0b;
    --danger: #ef4444;

    /* Le degrade d'accent est fonce : le texte pose dessus s'ecrit en blanc. */
    --on-accent: #ffffff;

    /* Degrade de marque d'origine : violet -> rose (le CTA « Start now »
       mesure #705bb9 a gauche, #d3537a a droite). */
    --gradient-main: linear-gradient(135deg, #8b5cf6 0%, #e14b8c 100%);
    --gradient-1: var(--gradient-main);
    --gradient-2: var(--gradient-main);
    --gradient-3: var(--gradient-main);

    /* --- Bordures / lueurs (teintees accent) ------------------------ */
    --border-color: rgba(139, 92, 246, 0.18);
    --engrave: rgba(255, 255, 255, 0.06);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 32px rgba(139, 92, 246, 0.18);
    --glow: rgba(139, 92, 246, 0.28);
    --wash: rgba(139, 92, 246, 0.10);

    /* Rayons courts : une platine est fraisee, pas moulee. */
    --radius: 16px;         /* coins ARRONDIS (l'anguleux « instrument » a ete retire) */
    --radius-sm: 12px;      /* boutons arrondis */
    --transition: all 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);

    /* --- Typographie --------------------------------------------------- */
    /* Archivo pour le texte, IBM Plex Mono pour tout ce qui est chiffre,
       seuil ou libelle gravé — le lettrage d'un cadran est monospace, et ici
       les chiffres sont reellement des quotas, des delais et des prix. */
    --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Fira Code', monospace;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================
   Navigation
   ============================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 26, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}

.navbar.scrolled {
    background: rgba(10, 10, 26, 0.95);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    /* Espace mini garanti entre le logo et le menu : sans ca, en espagnol
       (libellés plus longs) le menu venait coller le logo à largeur reduite. */
    gap: 16px;
}

/* La navbar est FIXE (hauteur ~72px). Sans marge de scroll, arriver sur une
   section par un lien d'ancrage glissait son badge/titre du haut (ex.
   « 100% Safe ») SOUS la barre = coupe. On reserve la hauteur de la barre. */
section[id] {
    scroll-margin-top: 90px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.3rem;
    /* Le logo ne doit JAMAIS rétrécir ni passer sur 2 lignes. Sans ça, en
       espagnol/français (libellés de nav plus longs) le flexbox l'écrasait et
       « Growdn » se cassait en deux lignes. */
    flex-shrink: 0;
    white-space: nowrap;
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: var(--gradient-main);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--on-accent);
    flex-shrink: 0;
}

.logo-text {
    color: var(--text-primary);
}

.logo-highlight {
    color: var(--accent-light);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    z-index: 1001;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: var(--transition);
    position: relative;
    /* icone + libelle sur UNE ligne, centres verticalement. Sans ca, un
       libelle plus long (FR « Se connecter », ES « Iniciar sesion ») passait
       a la ligne dans la pastille et le bouton n'etait plus droit. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-main);
    transition: var(--transition);
    border-radius: 2px;
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-cta {
    background: var(--gradient-main);
    color: var(--text-primary) !important;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--transition);
}

.nav-cta::after {
    display: none;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

/* ============================================
   Section Headers
   ============================================ */

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-light);
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.section-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    /* Police d'affichage (Sora) sur les titres pour donner du caractere a la
       marque ; le corps reste en Inter, lisible. */
    font-family: var(--font-body);
}

/* Texte en degrade multicolore (rainbow facon Instagram), clippe au glyphe :
   c'est l'accent chaud de la page, comme a l'origine. */
.gradient-text {
    background: linear-gradient(100deg, #ff6a3d 0%, #f5578a 35%, #a855f7 70%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.section-desc {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 500;
}

/* ============================================
   Hero Section
   ============================================ */

.hero {
    position: relative;
    min-height: auto;   /* etait 100vh : sur un ecran d'ordi plus court, le
       contenu depassait et le bas (bloc de confiance) etait ROGNE par
       overflow:hidden. Se cale au contenu -> tout s'affiche a l'arrivee, sans
       vide ni coupure. (Le mobile garde ses regles !important dediees.) */
    display: flex;
    align-items: center;
    padding: 100px 0 56px;
    overflow: hidden;
}

#bg-3d-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

#bg-3d-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Le decor 3D est colore pour un fond SOMBRE (particules indigo/rose a faible
   opacite). Sur le theme clair elles se noient dans le blanc et paraissent
   absentes. On assombrit/sature le canvas en theme clair pour les rendre
   visibles sur blanc, sans toucher au WebGL.
   ponytail: filtre CSS heuristique ; une vraie adaptation des couleurs au
   theme se ferait dans animations.js si besoin de plus de finesse. */
:root[data-theme="light"] #bg-3d-container {
    filter: brightness(0.5) saturate(1.6);
    opacity: 0.9;
}

/* « Boule » (halo radial du hero) RETIREE : le client la trouvait inutile.
   Le decor du hero repose desormais sur le calque social pleine page (.ig-float). */
.hero-gradient { display: none; }

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-light);
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    margin-left: auto;
    margin-right: auto;
}

.hero-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 24px;
    text-align: center;
    width: 100%;
    font-family: var(--font-body);
}

.hero-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 36px;
    max-width: 760px;   /* etait 560 : le texte s'empilait sur desktop. Plus
                           large = mieux etale. Mobile inchange (ecran + etroit). */
    width: 100%;
    text-align: center;
    font-weight: 500;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;   /* etait 48 : trop d'espace, poussait le bloc de
                              confiance trop bas. Reduit -> il remonte. */
    justify-content: center;
    align-items: center;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background: var(--gradient-main);
    color: var(--on-accent);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 35px rgba(139, 92, 246, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    width: 100%;
    justify-content: center;
}

.btn-outline:hover {
    border-color: var(--accent);
    background: rgba(139, 92, 246, 0.1);
}

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 16px 32px;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: 24px;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Les chiffres sont graves : monospace, chasse fixe, comme le lettrage
   d'un cadran. Ce sont de vrais quotas, pas des ornements. */
.stat-number {
    font-family: var(--font-mono);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--accent);
}

.stat-plus,
.stat-percent {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-light);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.stat-icon {
    font-size: 1.4rem;
    color: var(--accent-light);
    margin-right: 8px;
}

.stat-divider {
    width: 1px;
    background: var(--border-color);
}

/* Hero Visual - Phone Mockup */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;


}

.hero-phone {
    position: relative;
    z-index: 2;
}

.phone-frame {
    width: 280px;
    height: 520px;
    background: var(--bg-card);
    border-radius: 40px;
    padding: 10px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    position: relative;
}

.phone-notch {
    width: 120px;
    height: 25px;
    background: #000;
    border-radius: 0 0 16px 16px;
    margin: -10px auto 0;
    position: relative;
    z-index: 3;
}

.phone-screen {
    background: var(--bg-secondary);
    border-radius: 30px;
    height: 100%;
    overflow: hidden;
    padding: 10px 16px;
}

.phone-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.phone-icons {
    display: flex;
    gap: 4px;
    font-size: 0.65rem;
}

.phone-app-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    font-weight: 600;
}

.insta-icon {
    font-size: 1.2rem;
    color: var(--accent);
}

.phone-content {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    transition: var(--transition);
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.notif-icon.like    { background: var(--wash); color: var(--accent); }
.notif-icon.follow  { background: var(--wash); color: var(--accent-light); }
.notif-icon.comment { background: var(--wash); color: var(--accent); }
.notif-icon.dm     { background: var(--wash); color: var(--accent-light); }

.notif-info {
    display: flex;
    flex-direction: column;
}

.notif-title {
    font-size: 0.75rem;
    font-weight: 600;
}

.notif-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.phone-graph {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100px;
    padding: 8px 0;
}

.graph-bar {
    flex: 1;
    background: var(--gradient-1);
    border-radius: 4px 4px 0 0;
    min-height: 10px;

    transform-origin: bottom;
    opacity: 0.7;
    transition: var(--transition);
}

.graph-bar:hover {
    opacity: 1;
}

.graph-bar:nth-child(2) { background: var(--gradient-2); }
.graph-bar:nth-child(3) { background: var(--gradient-3); }
.graph-bar:nth-child(4) { background: var(--gradient-1); }
.graph-bar:nth-child(5) { background: var(--gradient-2); }
.graph-bar:nth-child(6) { background: var(--gradient-3); }
.graph-bar:nth-child(7) { background: var(--gradient-1); }

/* Floating Cards */
.hero-float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(26, 26, 62, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 3;

}

.hero-float-card i {
    font-size: 1.1rem;
    color: var(--accent-light);
}

.card-1 {
    top: 10%;
    right: -30px;
}

.card-2 {
    bottom: 15%;
    left: -40px;
}

.hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    line-height: 0;
}

.hero-wave svg {
    width: 100%;
    height: 80px;
}

/* ============================================
   Formes 3D flottantes (toutes les sections)
   ============================================ */

.section-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;

}


.shape-sphere {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
}

.shape-cube {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 30px;
    transform: rotate(45deg);
    filter: blur(50px);
}

.shape-diamond {
    width: 150px;
    height: 150px;
    background: var(--gradient-main);
    border-radius: 20px;
    transform: rotate(45deg) skew(10deg, 10deg);
    filter: blur(30px);
}

.shape-ring {
    width: 250px;
    height: 250px;
    border: 3px solid var(--accent);
    border-radius: 50%;

    filter: blur(3px);
}

/* Positionnement des formes */
.features {
    position: relative;
}
.features .shape-1 { top: 10%; left: -100px; }
.features .shape-2 { bottom: 5%; right: -80px; }

.live-demo {
    position: relative;
}
.live-demo .shape-1 { top: 20%; right: -120px; }
.live-demo .shape-2 { bottom: 10%; left: -100px; }

.how-it-works {
    position: relative;
}
.how-it-works .shape-1 { top: 15%; left: -60px; }

.pricing {
    position: relative;
}
.pricing .shape-1 { top: 5%; right: -90px; }
.pricing .shape-2 { bottom: 20%; left: -70px; }

.testimonials {
    position: relative;
}
.testimonials .shape-1 { top: 10%; left: -80px; }

.contact {
    position: relative;
}
.contact .shape-1 { bottom: 10%; right: -60px; }

/* ─── 3D Scene Enhancements ─── */
#bg-3d-container {
    background: radial-gradient(ellipse at center, rgba(139,92,246,0.03) 0%, transparent 60%);
}

/* ============================================
   Features Section
   ============================================ */

.features {
    padding: 100px 0;
    position: relative;
    z-index: 2;
    background: transparent;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Section securite : 4 cartes alignees sur une ligne en desktop. */
.safety-grid { grid-template-columns: repeat(4, 1fr); }

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 32px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;


}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-main);
    opacity: 0;
    transition: var(--transition);
}

.feature-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--icon-color, var(--accent));
    margin-bottom: 20px;
    transition: var(--transition);
}

.feature-card:hover .feature-icon {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.feature-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    font-weight: 500;
}

.feature-tag {
    display: block;
    width: max-content;
    margin: 0 auto 14px;      /* au-dessus de l'icone, centre */
    padding: 4px 12px;
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Badges/pastilles en PILULE complete (« Smart Automation », badges de section,
   « Most chosen »...), comme a l'origine. */
.hero-badge, .section-badge, .feature-tag, .pricing-badge { border-radius: 999px; }

/* ============================================
   Live Demo Section
   ============================================ */

.live-demo {
    padding: 100px 0;
    position: relative;
    z-index: 2;
    background: transparent;
}

.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;

}


.demo-dashboard {
    max-width: 820px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.demo-dashboard:hover {
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.15);
}

/* Header */
.demo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-color);
}

.demo-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-indicator {
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;

}

.status-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--success);
}

.demo-session,
.demo-actions-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.demo-session i,
.demo-actions-live i {
    color: var(--accent-light);
    font-size: 0.75rem;
}

#demoActionsPerMin {
    color: var(--accent-light);
    font-weight: 700;
    font-size: 0.9rem;
}

.action-unit {
    font-size: 0.7rem;
}

/* Live Counters */
.demo-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--border-color);
}

.demo-counter {
    text-align: center;
    padding: 24px 16px;
    transition: var(--transition);
    position: relative;
}

.demo-counter::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--border-color);
}

.demo-counter:last-child::after {
    display: none;
}

.demo-counter:hover {
    background: rgba(255, 255, 255, 0.03);
}

.counter-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1rem;
    transition: var(--transition);
}

.like-counter .counter-icon {
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
}

.comment-counter .counter-icon {
    background: rgba(162, 155, 254, 0.15);
    color: var(--accent-light);
}

.follow-counter .counter-icon {
    background: rgba(72, 219, 251, 0.15);
    color: var(--accent-light);
}

.story-counter .counter-icon {
    background: rgba(255, 159, 67, 0.15);
    color: var(--warn);
}

.counter-value {
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: var(--transition);
}

.like-counter .counter-value    { color: var(--text-primary); }
.comment-counter .counter-value { color: var(--text-primary); }
.follow-counter .counter-value  { color: var(--text-primary); }
.story-counter .counter-value   { color: var(--text-primary); }

.counter-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

/* Progress Bar */
.demo-progress {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-main);
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;

}


/* Content: Logs + Graph */
.demo-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.demo-log,
.demo-graph {
    padding: 20px;
}

.demo-log {
    border-right: 1px solid var(--border-color);
    max-height: 280px;
    display: flex;
    flex-direction: column;
}

.log-header,
.graph-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.log-header i,
.graph-header i {
    color: var(--accent-light);
    font-size: 0.75rem;
}

.log-feed {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.log-feed::-webkit-scrollbar {
    width: 4px;
}

.log-feed::-webkit-scrollbar-track {
    background: transparent;
}

.log-feed::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.log-entry {
    display: flex;
    gap: 10px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.77rem;
    font-family: var(--font-mono);

}


.log-entry:hover {
    background: rgba(255, 255, 255, 0.03);
}

.log-time {
    color: var(--text-muted);
    font-size: 0.7rem;
    min-width: 36px;
    flex-shrink: 0;
    padding-top: 1px;
}

.log-msg {
    color: var(--text-secondary);
    line-height: 1.4;
}

.log-start .log-msg {
    color: var(--accent-light);
}

.log-success .log-msg {
    color: var(--success);
}

.log-warn .log-msg {
    color: var(--warn);
}

/* Mini Graph */
.demo-graph {
    display: flex;
    flex-direction: column;
}

.mini-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 8px 0;
    min-height: 180px;
}

.chart-bar {
    flex: 1;
    background: var(--gradient-1);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    opacity: 0.7;
    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-bar:nth-child(odd) {
    background: var(--gradient-2);
}

.chart-bar:nth-child(3n) {
    background: var(--gradient-3);
}

.chart-bar:hover {
    opacity: 1;
}

/* Responsive Demo */
@media (max-width: 768px) {
    .demo-counters {
        grid-template-columns: repeat(2, 1fr);
    }

    .demo-counter:nth-child(2)::after {
        display: none;
    }

    .demo-content {
        grid-template-columns: 1fr;
    }

    .demo-log {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 200px;
    }

    .demo-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .counter-value {
        font-size: 1.3rem;
    }
}

/* ============================================
   How It Works Section
   ============================================ */

.how-it-works {
    padding: 100px 0;
    background: rgba(18, 18, 42, 0.85);
    position: relative;
    z-index: 2;
}

.steps {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.step {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.step-number {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: var(--gradient-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.step-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 28px;
    flex: 1;
    transition: var(--transition);
}

.step-content:hover {
    transform: translateX(8px);
    border-color: var(--accent);
}

.step-icon {
    width: 44px;
    height: 44px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--accent-light);
    margin-bottom: 16px;
}

.step-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.step-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    font-weight: 500;
}

.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    color: var(--accent);
    opacity: 0.5;
    font-size: 1.2rem;
}

/* ============================================
   Pricing Section
   ============================================ */

.pricing {
    padding: 100px 0;
    position: relative;
    z-index: 2;
    background: transparent;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 36px;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;


}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow);
}

.pricing-card.featured {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(118, 75, 162, 0.1));
    transform: scale(1.05);
    z-index: 2;
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-8px);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-main);
    color: var(--on-accent);
    padding: 6px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.pricing-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-color);
}

.pricing-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.pricing-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.price {
    font-size: 3rem;
    font-weight: 900;
}

.currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.period {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

.pricing-features {
    margin-bottom: 28px;
    flex: 1;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-weight: 500;
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li i {
    width: 18px;
    text-align: center;
}

.pricing-features li i.fa-check {
    color: var(--success);
}

.pricing-features li i.fa-times {
    color: var(--danger);
    opacity: 0.5;
}

.pricing-features li.disabled {
    opacity: 0.4;
}

/* ============================================
   Stats Section
   ============================================ */

.stats-section {
    padding: 80px 0;
    background: rgba(18, 18, 42, 0.85);
    position: relative;
    z-index: 2;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.stats-card {
    text-align: center;
    padding: 32px 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.stats-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}

.stats-card i {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 16px;
}

.stats-card h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.stats-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================
   Testimonials
   ============================================ */

.testimonials {
    padding: 100px 0;
    position: relative;
    z-index: 2;
    background: transparent;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 32px;
    transition: var(--transition);


}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-glow);
}

.testimonial-stars {
    color: var(--warn);
    font-size: 0.85rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.testimonial-card > p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 24px;
    font-style: italic;
    font-weight: 500;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--on-accent);
    flex-shrink: 0;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-info strong {
    font-size: 0.9rem;
    font-weight: 600;
}

.author-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================
   FAQ Section
   ============================================ */

.faq {
    padding: 100px 0;
    background: rgba(18, 18, 42, 0.85);
    position: relative;
    z-index: 2;
}

.faq-list {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
}

.faq-item:hover {
    border-color: var(--accent);
}

.faq-item.active {
    border-color: var(--accent);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: center;   /* texte centre (demande client) */
    position: relative;
    padding: 20px 44px;        /* place pour le chevron a droite */
    gap: 16px;
    text-align: center;
}

.faq-question h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.faq-question i {
    color: var(--text-muted);
    transition: var(--transition);
    font-size: 0.85rem;
    flex-shrink: 0;
    position: absolute;        /* pin a droite -> ne decale pas le texte centre */
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.faq-item.active .faq-question i {
    transform: translateY(-50%) rotate(180deg);
    color: var(--accent);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 24px;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 24px 20px;
}

.faq-answer p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.8;
    font-weight: 500;
    text-align: center;
}

/* ============================================
   Contact Section
   ============================================ */

.contact {
    padding: 100px 0;
    position: relative;
    z-index: 2;
    background: transparent;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-info h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    margin: 16px 0;
    line-height: 1.2;
}

.contact-info > p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 32px;
    font-weight: 500;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.contact-item i {
    width: 40px;
    height: 40px;
    background: rgba(139, 92, 246, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-light);
    font-size: 1rem;
}

.contact-social {
    display: flex;
    gap: 12px;
}

.social-link {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
    transition: var(--transition);
}

.social-link:hover {
    background: var(--gradient-main);
    color: var(--on-accent);
    transform: translateY(-3px);
}

/* Contact Form */
.contact-form {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 36px;
}

.contact-form h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.form-group {
    position: relative;
    margin-bottom: 16px;
}

.form-group i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.form-group textarea ~ i {
    top: 20px;
    transform: none;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: var(--transition);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6b8d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.form-group textarea {
    padding-left: 44px;
    resize: vertical;
    min-height: 100px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ============================================
   Footer
   ============================================ */

.footer {
    background: rgba(18, 18, 42, 0.85);
    padding: 80px 0 0;
    border-top: 1px solid var(--border-color);
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 60px;
}

.footer-brand .nav-logo {
    margin-bottom: 16px;
}

.footer-brand > p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 300px;
}

.footer-links h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--accent-light);
    padding-left: 4px;
}

.footer-newsletter h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.footer-newsletter p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 16px;
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    gap: 8px;
}

.newsletter-form input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.newsletter-form button {
    padding: 12px 18px;
    background: var(--gradient-main);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--on-accent);
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-form button:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding: 24px 0;
    text-align: center;
}

.footer-bottom p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ============================================
   GLOBAL CENTERING - Desktop & Mobile
   ============================================ */

/* Ensure all section headers and titles are always centered */
.features .section-header,
.live-demo .section-header,
.how-it-works .section-header,
.pricing .section-header,
.testimonials .section-header,
.contact .section-header,
.reach .section-header,
.faq .section-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Center all paragraphs and descriptions globally */
.section-desc,
.hero-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Center contact/trial section globally */
.contact-info,
.trial-card,
.trial-card h3,
.trial-subtitle {
    text-align: center;
}

.contact-info h2,
.contact-info p {
    text-align: center;
}

.trial-actions {
    align-items: center;
}

.trial-highlights {
    align-items: center;
}

/* Center footer globally */
.footer-grid {
    justify-items: center;
    text-align: center;
}

.footer-brand {
    align-items: center;
    text-align: center;
}

.footer-brand .nav-logo {
    justify-content: center;
}

.footer-links {
    text-align: center;
}

.footer-links h4 {
    text-align: center;
}

.footer-links ul {
    align-items: center;
}

/* Center How it works steps globally */
.steps {
    align-items: center;
}

.step {
    justify-content: center;
}

/* ============================================
   Trial / Inscription Section
   ============================================ */

.trial-highlights {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.trial-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.trial-item i {
    color: var(--success);
    font-size: 1.1rem;
}

.trial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 36px;
    position: relative;
    overflow: hidden;
}

.trial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-main);
}

.trial-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-light);
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.trial-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.trial-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 24px;
    line-height: 1.6;
}

.trial-price-block {
    text-align: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    border: 1px dashed var(--border-color);
}

.trial-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.trial-amount {
    font-family: var(--font-mono);
    font-size: 3.4rem;
    font-weight: 600;
    color: var(--accent);
}

.trial-currency {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-light);
}

.trial-period {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.trial-features {
    margin-bottom: 28px;
}

.trial-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.trial-features li i {
    color: var(--success);
    font-size: 0.85rem;
}

.trial-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.trial-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    padding: 12px;
    background: rgba(0, 184, 148, 0.08);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 184, 148, 0.15);
}

.trial-note i {
    color: var(--success);
    margin-right: 6px;
}

/* Card shine pour hover 3D */
.card-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.feature-card,
.pricing-card,
.testimonial-card {
    position: relative;
    overflow: hidden;
}


/* ============================================
   Responsive Design
   ============================================ */

/* Nav : bascule en menu hamburger AVANT que les libelles longs (FR/ES) ne
   debordent. En dessous de 1080px la nav horizontale ne tenait plus sur une
   ligne en francais/espagnol et le selecteur de langue etait rogne a droite.
   Le tiroir vertical tient a n'importe quelle largeur. */
@media (max-width: 1080px) {
    .nav-toggle {
        display: flex;
    }
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: rgba(10, 10, 26, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 40px 40px;
        gap: 24px;
        transition: right 0.3s ease;
        border-left: 1px solid var(--border-color);
    }
    .nav-links.active {
        right: 0;
    }
    [data-theme="light"] .nav-links {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }
    [data-theme="light"] .nav-links a {
        color: var(--text-muted);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-subtitle {
        margin: 0 auto 36px;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        display: none;   /* mockup telephone masque aussi sur tablette (pas beau empile) */
    }

    .hero-float-card {
        display: none;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .pricing-card.featured {
        transform: none;
    }

    .pricing-card.featured:hover {
        transform: translateY(-8px);
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* ── Centering all titles & text ── */
    .hero-content,
    .hero-title,
    .hero-subtitle,
    .hero-badge,
    .section-header,
    .section-title,
    .section-desc,
    .feature-card h3,
    .step-content h3,
    .pricing-header,
    .contact-info,
    .contact-info h2,
    .contact-info p,
    .trial-card,
    .trial-card h3,
    .trial-subtitle,
    .footer-grid,
    .footer-brand,
    .footer-links,
    .footer-bottom {
        text-align: center !important;
    }
    .hero-subtitle {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .hero-actions {
        justify-content: center !important;
    }
    .hero-stats {
        justify-content: center !important;
    }
    .trial-actions {
        align-items: center !important;
    }
    .trial-highlights {
        align-items: center !important;
    }
    .footer-links ul {
        align-items: center !important;
    }
    .newsletter-form {
        justify-content: center !important;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: rgba(10, 10, 26, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 100px 40px 40px;
        gap: 24px;
        transition: right 0.3s ease;
        border-left: 1px solid var(--border-color);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-link {
        font-size: 1.05rem;
    }

    .hero {
        padding: 100px 0 40px;
    }

    .hero-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .hero-stats {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .stat-item {
        justify-content: center;
    }

    .stat-divider {
        display: none;
    }

    .phone-frame {
        width: 240px;
        height: 450px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .stats-card h3 {
        font-size: 1.5rem;
    }

    .contact-form {
        padding: 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .step-connector {
        padding: 8px 0;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .phone-frame {
        width: 200px;
        height: 380px;
    }

    .phone-graph {
        height: 60px;
    }
}


/* ─── Accordion Classes (extracted from inline styles) ─── */

/* Bottom 3D Container */
#bg-3d-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
#bg-3d-bottom canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.accordion-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  transition: all 0.2s;
  user-select: none;
}
.accordion-header:hover {
  background: rgba(255,255,255,0.06);
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(0,0,0,0.15);
}
.accordion-body-inner {
  padding: 16px;
}

/* ═══════════════════════════════════════════
   THEME TOGGLE — Dark / Light mode
   ═══════════════════════════════════════════ */

/* Theme toggle button in navbar */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color, rgba(139,92,246,0.2));
  background: var(--card-bg, rgba(26,26,62,0.6));
  color: var(--text-secondary, #b0b0d0);
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover {
  border-color: var(--accent-light, #8b9eed);
  color: var(--accent-light, #8b9eed);
  transform: rotate(15deg) scale(1.1);
  box-shadow: 0 0 20px rgba(139,92,246,0.2);
}
.theme-toggle:active {
  transform: rotate(30deg) scale(0.95);
}
.theme-toggle i {
  transition: all 0.4s ease;
}

/* Theme transition on html element for smooth switch */
html.theme-transitioning {
  transition: background-color 0.4s ease, color 0.4s ease;
}
html.theme-transitioning *, 
html.theme-transitioning *::before, 
html.theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ─── LIGHT THEME ─── */
/* Contrepartie claire : fond gris tres clair, accent indigo assombri pour
   tenir le contraste sur le clair (l'accent sombre reste #8b5cf6). */
[data-theme="light"] {
  --bg-primary: #f5f5fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0f7;
  --bg-code: #eef0f7;
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a6a;
  --text-muted: #6b6b85;

  --accent: #7c3aed;          /* violet assombri : lisible sur fond clair */
  --accent-light: #8b5cf6;
  --accent-deep: #6d28d9;
  --on-accent: #ffffff;

  --success: #10b981;
  --warn: #d97706;
  --danger: #dc2626;

  --border-color: rgba(139, 92, 246, 0.22);
  --engrave: rgba(26, 30, 46, 0.10);
  --glow: rgba(139, 92, 246, 0.18);
  --wash: rgba(139, 92, 246, 0.08);
  --shadow: 0 8px 24px rgba(26, 30, 46, 0.10);
  --shadow-glow: 0 0 28px rgba(139, 92, 246, 0.12);
  --card-shadow: 0 4px 20px rgba(26, 30, 46, 0.07);
  --card-shadow-hover: 0 8px 30px rgba(26, 30, 46, 0.11);
  --hero-bg: #eef0f7;
}

/* Hero & Background */
[data-theme="light"] .hero {
  background: linear-gradient(135deg, var(--bg-code) 0%, var(--bg-card-hover) 50%, var(--bg-code) 100%);
}
[data-theme="light"] .hero-badge {
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent);
  border-color: rgba(139, 92, 246, 0.2);
}
[data-theme="light"] .hero-gradient {
  opacity: 0.4;
}
[data-theme="light"] .hero-title {
  color: var(--text-primary);
}
[data-theme="light"] .hero-subtitle {
  color: var(--text-secondary);
}
[data-theme="light"] .hero-stats {
  background: rgba(255,255,255,0.7);
  border-color: rgba(139, 92, 246, 0.12);
}
[data-theme="light"] .stat-item {
  color: var(--text-secondary);
}
[data-theme="light"] .stat-icon {
  color: var(--accent);
}
[data-theme="light"] .stat-divider {
  background: rgba(0,0,0,0.08);
}

/* Navbar */
[data-theme="light"] .navbar {
  background: rgba(255,255,255,0.92);
  border-bottom-color: rgba(139, 92, 246, 0.12);
}
[data-theme="light"] .navbar .nav-link {
  color: var(--text-secondary);
}
[data-theme="light"] .navbar .nav-link:hover {
  color: var(--accent);
}
[data-theme="light"] .navbar .nav-link.nav-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--bg-card);
}
[data-theme="light"] .nav-logo .logo-text {
  color: var(--text-primary);
}
[data-theme="light"] .nav-toggle span {
  background: var(--text-secondary);
}

/* Sections */
[data-theme="light"] .features {
  background: var(--bg-primary);
}
[data-theme="light"] .live-demo {
  background: var(--bg-card);
}
[data-theme="light"] .how-it-works {
  background: var(--bg-primary);
}
[data-theme="light"] .pricing {
  background: var(--bg-card);
}
[data-theme="light"] .testimonials {
  background: var(--bg-primary);
}
[data-theme="light"] .contact {
  background: var(--bg-card);
}
[data-theme="light"] .faq {
  background: var(--bg-primary);
}
[data-theme="light"] .section-title {
  color: var(--text-primary);
}
[data-theme="light"] .section-desc {
  color: var(--text-secondary);
}
[data-theme="light"] .section-badge {
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent);
}
[data-theme="light"] .section-header .section-badge {
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent);
}

/* Feature Cards */
[data-theme="light"] .feature-card {
  background: var(--bg-card);
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .feature-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: var(--card-shadow-hover);
}
[data-theme="light"] .feature-card h3 {
  color: var(--text-primary);
}
[data-theme="light"] .feature-card p {
  color: var(--text-secondary);
}
[data-theme="light"] .feature-tag {
  background: rgba(139, 92, 246, 0.08);
  color: var(--accent);
}
[data-theme="light"] .feature-icon {
  background: rgba(139, 92, 246, 0.08);
}

/* Demo Dashboard */
[data-theme="light"] .demo-dashboard {
  background: var(--bg-card);
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .demo-header {
  background: var(--bg-code);
  border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .demo-counter {
  background: var(--bg-primary);
}
[data-theme="light"] .demo-counter .counter-label {
  color: var(--text-secondary);
}
[data-theme="light"] .demo-log {
  border-right-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .log-header {
  background: var(--bg-code);
  border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .log-feed {
  background: var(--bg-primary);
}
[data-theme="light"] .log-entry {
  border-bottom-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .log-start {
  color: var(--text-secondary);
}
[data-theme="light"] .demo-progress {
  background: var(--bg-code);
}
[data-theme="light"] .progress-track {
  background: rgba(0,0,0,0.08);
}
[data-theme="light"] .mini-chart .chart-bar {
  background: linear-gradient(to top, var(--accent), var(--accent-light));
}

/* Steps / How it works */
[data-theme="light"] .step-content {
  background: var(--bg-card);
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .step-content h3 {
  color: var(--text-primary);
}
[data-theme="light"] .step-content p {
  color: var(--text-secondary);
}
[data-theme="light"] .step-number {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--bg-card);
}
[data-theme="light"] .step-icon {
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent);
}
[data-theme="light"] .step-connector {
  color: var(--accent);
}

/* Reach / Security */
[data-theme="light"] .reach {
  background: var(--bg-card);
}
[data-theme="light"] .reach-card {
  background: var(--bg-card);
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .reach-icon {
  color: var(--accent);
}
[data-theme="light"] .reach-label {
  color: var(--text-secondary);
}
[data-theme="light"] .reach-note {
  color: var(--text-muted);
}

/* Stats */
[data-theme="light"] .stats-section {
  background: var(--bg-primary);
}
[data-theme="light"] .stats-card {
  background: var(--bg-card);
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .stats-card p {
  color: var(--text-secondary);
}
[data-theme="light"] .stats-card i {
  color: var(--accent);
}

/* Pricing */
[data-theme="light"] .pricing-card {
  background: var(--bg-card);
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .pricing-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: var(--card-shadow-hover);
}
[data-theme="light"] .pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 8px 40px rgba(139, 92, 246, 0.15);
}
[data-theme="light"] .pricing-header h3 {
  color: var(--text-primary);
}
[data-theme="light"] .pricing-subtitle {
  color: var(--text-secondary);
}
[data-theme="light"] .pricing-header .price {
  color: var(--text-primary);
}
[data-theme="light"] .pricing-header .period,
[data-theme="light"] .pricing-header .currency {
  color: var(--text-muted);
}
[data-theme="light"] .pricing-features li {
  color: var(--text-secondary);
}
[data-theme="light"] .pricing-features li i.fa-check {
  color: var(--success);
}
[data-theme="light"] .pricing-features li.disabled {
  color: var(--border-color);
}
[data-theme="light"] .pricing-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--bg-card);
}

/* Testimonials */
[data-theme="light"] .testimonial-card {
  background: var(--bg-card);
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .testimonial-card p {
  color: var(--text-secondary);
}
[data-theme="light"] .testimonial-card .testimonial-stars i {
  color: var(--warn);
}
[data-theme="light"] .testimonial-card .author-info strong {
  color: var(--text-primary);
}
[data-theme="light"] .testimonial-card .author-info span {
  color: var(--text-muted);
}

/* FAQ */
[data-theme="light"] .faq-item {
  background: var(--bg-card);
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .faq-question h3 {
  color: var(--text-primary);
}
[data-theme="light"] .faq-question i {
  color: var(--accent);
}
[data-theme="light"] .faq-answer {
  color: var(--text-secondary);
}
[data-theme="light"] .faq-item.active .faq-question {
  border-bottom-color: rgba(0,0,0,0.06);
}

/* Trial / Contact */
[data-theme="light"] .trial-card {
  background: var(--bg-card);
  border-color: rgba(139, 92, 246, 0.12);
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
[data-theme="light"] .trial-card h3 {
  color: var(--text-primary);
}
[data-theme="light"] .trial-subtitle {
  color: var(--text-secondary);
}
[data-theme="light"] .trial-price .trial-amount {
  color: var(--accent);
}
[data-theme="light"] .trial-price .trial-currency {
  color: var(--accent);
}
[data-theme="light"] .trial-period {
  color: var(--text-muted);
}
[data-theme="light"] .trial-features li {
  color: var(--text-secondary);
}
[data-theme="light"] .trial-features li i {
  color: var(--success);
}
[data-theme="light"] .trial-note {
  color: var(--text-muted);
}
[data-theme="light"] .trial-highlights .trial-item {
  color: var(--text-secondary);
}
[data-theme="light"] .trial-highlights .trial-item i {
  color: var(--success);
}
[data-theme="light"] .contact-info h2 {
  color: var(--text-primary);
}
[data-theme="light"] .contact-info p {
  color: var(--text-secondary);
}

/* Buttons */
[data-theme="light"] .btn-secondary {
  background: rgba(139, 92, 246, 0.08);
  color: var(--accent);
  border-color: rgba(139, 92, 246, 0.15);
}
[data-theme="light"] .btn-secondary:hover {
  background: rgba(139, 92, 246, 0.15);
}
[data-theme="light"] .btn-outline {
  border-color: rgba(139, 92, 246, 0.2);
  color: var(--accent);
}
[data-theme="light"] .btn-outline:hover {
  background: rgba(139, 92, 246, 0.08);
}

/* Footer */
[data-theme="light"] .footer {
  background: var(--bg-code);
  border-top-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .footer h4 {
  color: var(--text-primary);
}
[data-theme="light"] .footer p {
  color: var(--text-secondary);
}
[data-theme="light"] .footer-links a {
  color: var(--accent);
}
[data-theme="light"] .footer-links a:hover {
  color: var(--accent);
}
[data-theme="light"] .footer-bottom {
  border-top-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .footer-bottom p {
  color: var(--text-muted);
}
[data-theme="light"] .newsletter-form input {
  background: var(--bg-card);
  border-color: rgba(0,0,0,0.1);
  color: var(--text-primary);
}
[data-theme="light"] .newsletter-form input::placeholder {
  color: var(--text-muted);
}

/* Phone Frame */
[data-theme="light"] .phone-frame {
  background: var(--text-primary);
}
[data-theme="light"] .phone-screen {
  background: var(--text-primary);
}
[data-theme="light"] .phone-header {
  background: var(--text-primary);
}

/* Card shine in light mode — keep subtle */
[data-theme="light"] .card-shine {
  opacity: 0.3;
}

/* Mobile nav in light mode */
@media (max-width: 768px) {
  [data-theme="light"] .nav-links.active {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  }
  [data-theme="light"] .nav-links.active a {
    color: var(--text-secondary);
  }
  [data-theme="light"] .nav-links.active a:hover {
    color: var(--accent);
  }
}

/* ═══════════════════════════════════════════════════════════════
   RAFFINEMENT MOBILE PRO (retours client : tout centre, features
   plus petites, moins d'espace vide, proportions telephone). Place
   en fin de fichier -> ces regles priment. max-width 768 (tablette
   /telephone) + 480 (petit telephone).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  /* Burger : le toggle doit rester cliquable au-dessus de tout, et le
     tiroir passer au-dessus du contenu (sinon "le burger ne marche pas"). */
  .nav-toggle { z-index: 1201 !important; pointer-events: auto !important; }
  .nav-links  { z-index: 1200 !important; }
  /* Gouttieres confortables, jamais colle aux bords */
  .container { padding-left: 18px !important; padding-right: 18px !important; }

  /* Rythme vertical serre sur mobile : 52px laissait encore trop de vide
     entre les sections (ex: features -> live-demo). */
  .features, .pricing, .how-it-works, .reach, .live-demo,
  .stats-section, .faq, .contact { padding: 34px 0 !important; }
  /* Pas de marge residuelle qui creuse l'ecart entre sections */
  section[data-reveal] { margin: 0 !important; }
  .features-grid, .pricing-grid, .steps { margin-bottom: 0 !important; }

  /* En-tetes de section centres et lisibles */
  .section-header { text-align: center !important; margin-bottom: 28px !important; }
  .section-title { font-size: 1.6rem !important; line-height: 1.25 !important; }
  .section-desc  { font-size: .95rem !important; max-width: 520px; margin-left: auto; margin-right: auto; }

  /* Hero centre et equilibre */
  .hero .container, .hero-content { text-align: center !important; }
  .hero-title { font-size: 2.05rem !important; line-height: 1.15 !important; }
  .hero-subtitle { font-size: 1rem !important; margin-left: auto !important; margin-right: auto !important; }
  .hero-cta, .hero-buttons { justify-content: center !important; }

  /* FEATURES : 1 colonne, cartes centrees (icone + titre + texte tous
     centres via flex-column, robuste quel que soit le display de l'icone). */
  .features-grid { grid-template-columns: 1fr !important; gap: 14px !important;
                   max-width: 460px; margin: 0 auto !important; }
  .feature-card { padding: 22px 20px !important; text-align: center !important;
                  display: flex !important; flex-direction: column !important;
                  align-items: center !important; }
  .feature-card .feature-icon { margin: 0 auto 14px !important;
                   width: 50px !important; height: 50px !important; font-size: 1.25rem !important; }
  .feature-card h3 { font-size: 1.08rem !important; }
  .feature-card p  { font-size: .92rem !important; line-height: 1.55 !important; }

  /* PRIX : 1 colonne centree ; la carte "featured" ne doit pas deborder */
  .pricing-grid { grid-template-columns: 1fr !important; gap: 16px !important;
                  max-width: 400px; margin: 0 auto !important; }
  .pricing-card { padding: 26px 22px !important; }
  .pricing-card.featured { transform: none !important; }
  .pricing-card.featured:hover { transform: translateY(-6px) !important; }

  /* Etapes "Set up automation" : 1 colonne centree */
  .steps { grid-template-columns: 1fr !important; gap: 8px !important;
           max-width: 460px; margin: 0 auto !important; }
  .step, .step-content { text-align: center !important; }
  .step-content .step-icon { margin-left: auto !important; margin-right: auto !important; }

  /* Cibles tactiles : boutons pleine largeur et assez hauts */
  .btn, .btn-primary, .btn-outline { min-height: 48px; }
  .hero-cta .btn, .pricing-card .btn { width: 100%; }
}

@media (max-width: 480px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-title { font-size: 1.8rem !important; }
  .section-title { font-size: 1.4rem !important; }
  .feature-card { padding: 18px 16px !important; }
}

/* ── Etapes "Set up automation" : numero DANS l'encadre et centre
   (icones prise/fusee retirees a la demande client). Toutes tailles. ── */
.steps .step { display: block !important; }
.step-content { text-align: center !important; position: relative; }
.step-content .step-number {
  margin: 0 auto 14px !important;
  display: flex; align-items: center; justify-content: center;
}
.step-icon { display: none !important; }   /* plus d'icone dans les etapes */

@media (max-width: 768px) {
  /* Badge "Popular" bien centre sur la carte featured */
  .pricing-badge { left: 50% !important; transform: translateX(-50%) !important; }
}

/* ── P2.6 Contenu TOUJOURS au-dessus du fond 3D (textes qui passaient
   sous/sur le globe : "View FAQ & more details", etc.) ── */
main, section > .container { position: relative; z-index: 3; }

/* ── P2.7 Badge "Recommended"/"Popular" coupe : ni la section, ni la
   grille, ni la carte ne doivent rogner le badge (top:-12px). ── */
.pricing, .pricing-grid, .pricing-card { overflow: visible !important; }
.pricing-grid { padding-top: 18px; }

/* ── LE FOND 3D NE DOIT JAMAIS CAPTER LES CLICS ──
   Un canvas WebGL en position fixe intercepte les clics -> le burger et
   d'autres boutons ne repondent pas. On le rend transparent aux evenements. */
#bg-3d-container, #bg-3d-container canvas, canvas#bg-3d { pointer-events: none !important; }

/* ── Texte des 3 plans (pricing) centre ── */
.pricing-card, .pricing-header, .pricing-header *,
.pricing-features, .pricing-features li, .pricing-price { text-align: center !important; }
.pricing-features { list-style: none; padding-left: 0 !important; }
.pricing-features li { justify-content: center !important; }

@media (max-width: 768px) {
  /* Hero mobile = TOUT l'ecran (Features PAS visible a l'arrivee, il faut
     scroller) + contenu REPARTI/aere de haut en bas via space-evenly
     (badge -> titre -> paragraphe -> boutons -> 3 badges). Texte seul. */
  .hero {
    min-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 84px 24px 32px !important;
  }
  .hero .container {
    flex: 1 1 auto !important;
    display: flex !important; flex-direction: column !important; width: 100%; }
  .hero-content {
    flex: 1 1 auto !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    text-align: center !important; width: 100%; }
  .hero-badge, .hero-title, .hero-subtitle, .hero-actions, .hero-stats { margin: 0 !important; }
  /* Titre + sous-titre plus compacts sur mobile : sinon ils remplissent tout
     l'ecran et space-evenly n'a plus d'espace a repartir -> rendu tasse. En
     les reduisant, chaque bloc respire. */
  .hero-title { font-size: clamp(1.85rem, 7.5vw, 2.3rem) !important;
                line-height: 1.18 !important; }
  .hero-subtitle { font-size: .95rem !important; line-height: 1.55 !important;
                   max-width: 320px !important;
                   margin-left: auto !important; margin-right: auto !important; }
  .hero-badge { font-size: .78rem !important; padding: 7px 16px !important; }
  .hero-actions { gap: 12px !important; }
  .hero .btn { padding: 12px 24px !important; font-size: .9rem !important; }
  /* Mockup telephone masque sur mobile */
  .hero-visual { display: none !important; }
  /* Lisibilite du lien FAQ mobile par-dessus le decor */
  .faq-link-mobile { position: relative; z-index: 4;
    background: rgba(11, 15, 14, .72); padding: 10px 16px; border-radius: 10px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  /* Decor 3D moins present derriere le contenu sur mobile */
  #bg-3d-container { opacity: .5; }
  /* ── Decor "tech" mobile (WebGL coupe <900px). Tout est compositor-only
     (transform / opacity / mask statique) donc tres leger :
       1. grille en perspective qui derive lentement (look IT/data)
       2. deux orbs lumineux qui flottent par-dessus
       3. shimmer du titre + float du badge + glow du CTA
     Le mouvement est VISIBLE mais jamais agressif. ── */
  .hero { position: relative; z-index: 1; }

  /* 1. Grille tech RETIREE : le quadrillage plein cadre donnait un rendu
     "encadre" etrange sur mobile. Le decor mobile repose desormais sur le
     calque Instagram (.ig-float) + un seul halo, plus lisible. */
  .hero-gradient { display: none; }

  /* 2. Halo anime (« la boule ») RETIRE : le client le trouvait nul. Le decor
     est desormais le calque social pleine page (.ig-float), visible sur tout
     le defilement — plus rien a dessiner ici. */

  /* 3. Contenu anime (toujours au-dessus du decor) */
  .hero-content { position: relative; z-index: 2; }
  .gradient-text { background-size: 200% 200%; animation: gradShift 6s ease infinite; }
  .hero-badge { animation: floatY 4.5s ease-in-out infinite; }
  .hero .btn-primary { animation: ctaGlow 3s ease-in-out infinite; }
}

/* Keyframes globaux (utilises seulement sous 900px, cf. media ci-dessus) */
@keyframes gridDrift { to { transform: translate(34px, 34px); } }
@keyframes heroOrbA { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-26px,30px) scale(1.14)} }
@keyframes heroOrbB { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-26px) scale(1.17)} }
@keyframes gradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes ctaGlow {
  0%,100%{box-shadow:0 6px 22px rgba(139, 92, 246, .35)}
  50%{box-shadow:0 10px 34px rgba(139, 92, 246, .7)}
}
@media (prefers-reduced-motion: reduce) {
  /* Animations coupees cote OS : on MASQUE le decor (halo) au lieu de laisser
     une tache de couleur statique, et on stoppe les micro-animations. */
  .hero-gradient, .hero::before, .hero::after { display: none !important; }
  .gradient-text, .hero-badge, .hero .btn-primary { animation: none !important; }
}

/* Ligne "N Instagram account(s)" = LE differenciateur des plans (mise en avant) */
.plan-accounts { color: var(--accent-light) !important; font-weight: 600; }
.plan-accounts i { color: var(--warn) !important; }

/* Fleche scroll-top : icone PARFAITEMENT centree dans le rond (flex force,
   line-height:0 sur le bouton pour supprimer tout decalage vertical). */
#scrollTopBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
}
#scrollTopBtn i {
  line-height: 1 !important; margin: 0 !important; display: block !important;
  font-size: 1.15rem !important;
}
/* Le JS bascule l'affichage via la classe (pas via style.display) pour ne pas
   ecraser le flex ci-dessus. */
#scrollTopBtn { visibility: hidden; opacity: 0; transition: opacity .3s; }
#scrollTopBtn.show { visibility: visible; opacity: 1; }

/* Carte "Start your free trial" : contenu centre */
.trial-card, .trial-card h3, .trial-card .trial-subtitle,
.trial-card .trial-price-block, .trial-card .trial-note { text-align: center !important; }
.trial-card .trial-price-block { justify-content: center !important; }
.trial-card .trial-features { list-style: none; padding-left: 0 !important; }
.trial-card .trial-features li { justify-content: center !important; text-align: center !important; }

/* ═══════════════════════════════════════════════════════════════════
   AUDIT UX/UI landing — overrides (charges en dernier = gagnent la cascade)
   ═══════════════════════════════════════════════════════════════════ */

/* C1 — DENSITE : reduire la hauteur de page (~50%) */
/* + contenu des cards CENTRE (icone + texte), demande client desktop */
.feature-card { padding: 28px 24px !important; text-align: center !important; }
.feature-icon { width: 44px !important; height: 44px !important; font-size: 1.15rem !important;
                border-radius: 12px !important; margin-left: auto !important;
                margin-right: auto !important; }
.feature-card h3, .feature-card p { text-align: center !important; }
.features-grid { gap: 16px !important; }
.feature-card h3 { font-size: 1.05rem !important; margin: 10px 0 6px !important; }
.feature-card p { font-size: .88rem !important; line-height: 1.5 !important; }

/* Pricing plus compact + contenu centre (la liste reste alignee a gauche, C2) */
.pricing-card { padding: 28px 24px !important; text-align: center !important; }
.pricing-header, .pricing-card .btn { text-align: center !important; }
.pricing-card .price { font-size: 48px !important; }
.pricing-header { margin-bottom: 16px !important; }
.pricing-features { margin: 12px auto 20px !important; }

/* C2 — ALIGNEMENT des listes : checkmarks en colonne fixe, texte a gauche */
.pricing-features { max-width: 320px !important; text-align: left !important;
                    list-style: none !important; padding-left: 0 !important; }
.pricing-features li { display: flex !important; align-items: flex-start !important;
                       gap: 10px !important; text-align: left !important;
                       justify-content: flex-start !important; }
.pricing-features li i { flex-shrink: 0 !important; margin-top: 3px !important;
                         color: var(--success) !important; }
/* Ligne comptes : meme checkmark vert + texte bold (plus d'etoile jaune) */
.plan-accounts { color: var(--border-color) !important; font-weight: 700 !important; }
.plan-accounts i { color: var(--success) !important; }

/* C5 — HIERARCHIE CTA : outline plus visible sur Solo/Agency */
.pricing-card .btn-outline {
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  color: var(--bg-card) !important;
}
.pricing-card .btn-outline:hover {
  border-color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* C8 — Badge "Popular" en coin superieur droit de la card (plus un faux bouton) */
.feature-card { position: relative !important; }
.feature-card .feature-tag {
  position: absolute !important; top: 12px !important; right: 12px !important;
  margin: 0 !important; font-size: .68rem !important; padding: 4px 10px !important;
  border-radius: 20px !important;
}
/* h2 gradient : evite les coupures moches */
.section-title, .hero-title, h2 { text-wrap: balance; }

/* Ligne commune "All plans include ..." (une seule fois sous les cards) */
.pricing-common {
  max-width: 720px; margin: 24px auto 0; text-align: center;
  color: var(--text-muted); font-size: .9rem; line-height: 1.6;
}
/* Section trial (Free Trial / 7-day free trial / message / Start now) : CENTREE */
.contact-wrapper { justify-content: center !important; }
.contact-info { text-align: center !important; margin: 0 auto !important;
                max-width: 640px !important; align-items: center !important; }
.contact-info .section-badge { margin-left: auto !important; margin-right: auto !important; }
.contact-info h2 { text-align: center !important; }
.trial-actions { display: flex !important; justify-content: center !important; }
/* Message d'essai unifie */
.trial-unified {
  max-width: 520px; color: var(--text-secondary); font-size: .95rem;
  line-height: 1.7; margin: 8px auto 20px; text-align: center;
}

/* C7 — Espacement inter-sections coherent */
section.features, section.pricing, section.how-it-works,
section.faq, section.reach, .stats { padding-top: var(--section-gap) !important;
                                      padding-bottom: var(--section-gap) !important; }

/* C3 — plus aucun bouton flottant (scroll-top retire, chat masque) : padding
   de securite en bas pour qu'aucun texte ne colle au bord */
footer, .footer { padding-bottom: 48px; }

/* C8 — CTA "Free trial" compact dans le header (gradient, taille S) */
.nav-trial-btn {
  display: inline-flex; align-items: center; margin-left: auto; margin-right: 14px;
  padding: 8px 16px; border-radius: 24px; background: var(--gradient-main);
  color: var(--bg-card) !important; font-weight: 700; font-size: .85rem; text-decoration: none;
  white-space: nowrap; transition: transform .2s, filter .2s;
}
.nav-trial-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* C4 — Bugs de la demo live */
/* Graphique "Activity (30s)" : hauteur collee au contenu (fini le vide au-dessus) */
.demo-chart, .activity-chart, #activityChart, .chart-container {
  height: auto !important; max-height: 140px !important;
}
.chart-bars, .demo-bars { align-items: flex-end !important; height: 120px !important; }
/* Activity log : le 1er item n'est plus tronque/superpose (padding-top du scroll) */
.activity-log, .demo-log, .log-container, #activityLog {
  padding-top: 8px !important; overflow: hidden auto !important;
}
.activity-log > :first-child, .demo-log > :first-child { margin-top: 0 !important; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-gap: 40px; }
  /* C1 — 6 features en grille 2 colonnes, compactes */
  .features-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .feature-card { padding: 16px !important; }
  .feature-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
  .feature-card h3 { font-size: .92rem !important; }
  .feature-card p { font-size: .78rem !important;
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                    overflow: hidden; }
  .pricing-card { padding: 24px 20px !important; }
  .pricing-card .price { font-size: 40px !important; }
  /* Footer compact : la GRILLE passe en 2 colonnes (brand + newsletter pleine
     largeur, les 2 colonnes de liens cote a cote). On ne touche PAS aux .ul. */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; }
  .footer-brand, .footer-newsletter { grid-column: 1 / -1 !important; }
  .footer-links ul { gap: 8px !important; }
  /* CTA hero pleine largeur sur mobile (pouce accessible au scroll) */
  .hero-actions { flex-direction: column !important; align-items: stretch !important;
                  width: 100% !important; gap: 10px !important; }
  .hero-actions .btn { width: 100% !important; justify-content: center !important; }
}

/* ═══ Desktop : tout centre, de haut en bas ═══ */
@media (min-width: 1024px) {
  /* En-tetes de section centres (badge, titre, description). */
  .section-header, .section-title, .section-desc {
    text-align: center !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  .section-desc { max-width: 640px; }
  .section-badge { display: inline-flex; }
  .section-header { display: flex; flex-direction: column; align-items: center; }

  /* Hero : occupe l'ecran et centre son contenu verticalement. */
  .hero { min-height: 88vh; display: flex; align-items: center; }
  .hero .container { width: 100%; }
  .hero-content { align-items: center; text-align: center; }

  /* Grilles centrees meme quand la derniere ligne est incomplete. */
  .features-grid, .pricing-grid, .steps { justify-content: center; }

  /* Cartes : contenu centre verticalement dans la hauteur de la carte. */
  .feature-card, .stats-card { display: flex; flex-direction: column;
                               justify-content: center; }
  .pricing-card { display: flex; flex-direction: column;
                  justify-content: space-between; }

  /* Bloc essai gratuit parfaitement centre. */
  .contact-wrapper { display: flex; justify-content: center; }
}

/* Section securite : 2x2 sur mobile. Regle en FIN de fichier -> a specificite
   egale avec les regles mobiles de .features-grid, la derniere source gagne. */
@media (max-width: 760px) {
  .safety-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* ── Lisibilite sur telephone ─────────────────────────────────────────
   Sous 12 px, iOS et Android proposent de zoomer : le visiteur pince, la
   mise en page saute, et la page parait cassee alors qu'elle est seulement
   trop petite. On remonte le texte que l'on demande de LIRE.

   Les maquettes (telephone, tableau de bord, journal d'activite) gardent
   leurs petites tailles : elles imitent un ecran, et un libelle d'interface
   y est petit pour de bonnes raisons. */
@media (max-width: 640px) {
  /* Deux classes : ces selecteurs passent devant les regles d'origine, qui
     n'en portent qu'une. Un plancher global sur `small` et `p` aurait aussi
     grossi les faux ecrans, sans rien rendre plus lisible. */
  .hero-stats .stat-label,
  .billing-toggle .bt-save,
  .soon-card .soon-badge { font-size: 12px; }
  /* La regle d'origine impose `.68rem !important` : a specificite egale, il
     faut le meme poids pour la corriger, pas un cran de plus. */
  .feature-card .feature-tag { font-size: 12px !important; }

  /* Un champ sous 16 px declenche le zoom automatique d'iOS a la saisie :
     le visiteur se retrouve avec un formulaire agrandi et decadre. */
  input, select, textarea { font-size: 16px; }

  /* Cibles tactiles : 40 px est le plancher pour un pouce. En dessous, on
     vise a cote une fois sur trois, et sur un basculement mensuel/annuel
     rate c'est le prix affiche qui change sans que le visiteur l'ait voulu.
     La hauteur monte, l'apparence ne bouge pas. */
  .theme-toggle, .bt-opt, .soon-x {
    min-height: 40px; min-width: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Les liens du pied faisaient 14 px de haut, empiles les uns sur les
     autres : on vise « Pricing » et on ouvre « Features ». Ce sont aussi les
     pages legales, celles qu'on doit pouvoir atteindre. Le remplissage
     vertical porte la zone a 44 px, le texte ne bouge pas. */
  .footer-links a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer-links ul { gap: 0; }
}

/* Sous-titre de l'assistant (« Ask about features, pricing or setup ») :
   c'est la consigne que le visiteur lit avant d'ecrire, pas une decoration.
   A 11,5 px le systeme proposait de zoomer et la mise en page sautait. */
@media (max-width: 780px) {
  .ewe-chat-head div { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   CONTRAT MOBILE — SUITE GROWDN
   Le meme bloc, aux memes valeurs, sur growdn.com, /phare, /kaptor et
   /cadran. Les quatre pages doivent se lire comme une seule main.

   Pose en FIN de feuille a dessein : les media queries de ce fichier se sont
   empilees au fil du temps et s'ecrasent entre elles. A specificite egale,
   seule la derniere declaration gagne.

   Les valeurs viennent d'un releve des quatre pages a 390 px :

     corps        16 px    le plancher de lecture sur telephone
     titre        34 px    trois pages sur quatre l'avaient deja
     sous-titre   26 px    le pas suivant de l'echelle : 34 -> 26 -> 20
     bouton       100 %, hauteur 52, rayon 12, texte 16
     gouttiere    20 px

   CE QUI RESTE ALIGNE A GAUCHE, ET CE N'EST PAS UN OUBLI : les rangees a
   deux colonnes (libelle a gauche, valeur a droite) et les maquettes
   d'ecran. Leur position porte l'information.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* L'echelle typographique, la meme partout. */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }
  h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.02em; }
  h2 { font-size: 26px; line-height: 1.18; letter-spacing: -.015em; }
  h3 { font-size: 20px; line-height: 1.25; }

  /* Tout ce qui se lit est centre. Les listes sont en flex avec une icone :
     centrer le texte ne suffit pas, il faut centrer l'axe. */
  .hero-content, .hero-text, .feature-card, .step, .plan, .pricing-card, .faq-item, .section-header, .demo-header { text-align: center; }
  .plan li, .pricing-card li, .hero-badges, .hero-stats { justify-content: center; }

  /* Les blocs ne se deplacent pas avec `text-align` : on les recentre. */
  .feature-icon, .step-number, .hero-content, .hero-text, .section-header { margin-left: auto; margin-right: auto; }

  /* Le bouton principal prend toute la largeur. Deux boutons de tailles
     differentes cote a cote se lisent comme deux importances differentes,
     ce qu'ils ne sont pas. */
  .hero-buttons .btn, .hero-buttons a, .pricing-card .btn, .big-btn {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    font-size: 16px;
    justify-content: center;
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero-buttons, .hero-cta { display: grid; gap: 12px; justify-items: stretch; }

  /* Phare sert de reference aux trois autres pages : son premier ecran
     respire, et c'est ce rythme qu'on a reporte ailleurs. On aligne ici sa
     typographie sur l'echelle commune, sans toucher a sa composition. */
  .hero { padding-top: 96px; }
  .hero h1 { margin-bottom: 20px; }

  /* ── Les titres, au bon niveau de specificite ───────────────────
     Le titre de cette page n'est pas un `h1` mais `.hero-title`, et il porte
     deja un `!important` pose plus haut dans ce fichier. On le reprend au
     meme poids — c'est la seule facon de le rejoindre — et avec la meme
     formule que les trois autres pages. */
  h1, .hero-title { font-size: clamp(28px, 8.7vw, 34px) !important; }
  h2, .section-title { font-size: clamp(22px, 6.7vw, 26px); }

  /* ── Le conteneur des boutons prend toute la largeur ────────────*/
  .hero-buttons, .hero-actions, .hero-cta {
    justify-self: stretch; align-self: stretch; width: 100%;
  }

  /* ── Deux dernières divergences de cette page ───────────────────
     `.section-title` est redéfini plus loin dans la cascade que ce bloc, et
     gagne donc par l'ordre. On le rejoint en préfixant par `body` : une
     classe plus un élément bat une classe seule, quel que soit l'ordre.

     La gouttière passe de 40 à 24 px, la valeur des trois autres pages :
     c'est elle qui donnait des boutons de 310 px là où les autres en font
     342. */
  body .section-title { font-size: clamp(22px, 6.7vw, 26px); }
  body .container, body .hero .container {
    padding-left: 24px; padding-right: 24px;
  }

  /* ── La piste, pas le bouton ────────────────────────────────────
     Le groupe mesurait 342 px, mais sa grille n'avait qu'une colonne de
     207 px, dimensionnee au contenu. Un bouton a `width: 100 %` remplissait
     donc exactement ces 207 px — il etait deja au maximum de sa piste, et
     aucun `!important` n'y pouvait rien.

     C'est la piste qu'il faut declarer. */
  .hero-buttons, .hero-actions, .hero-cta {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}