@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary: #059669;
    --primary-hover: #047857;
    --primary-container: #d1fae5;
    --on-primary-container: #065f46;
    --secondary: #1d4ed8;
    --secondary-container: #dbeafe;
    --accent: #ea580c;
    --accent-container: #ffedd5;
    --surface: #ffffff;
    --surface-dim: #f3f4f6;
    --surface-container: #f9fafb;
    --surface-elevated: #ffffff;
    --on-surface: #0f172a;
    --on-surface-variant: #475569;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --background: #f8fafc;
    --success: #059669;
    --warning: #d97706;
    --error: #dc2626;
    --devis-container: #dbeafe;
    --on-devis-container: #1e40af;
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
    --shadow-md: 0 8px 24px -8px rgba(15,23,42,0.16);
    --shadow-lg: 0 24px 48px -16px rgba(15,23,42,0.22);

    /* Tokens des sections sombres/premium (hero, DOXAL AI, écosystème, résumé) —
       repris de l'identité visuelle bleu/vert du logo DOXAL Pro (voir doxalpro-icon.svg),
       en complément de la palette claire ci-dessus plutôt qu'en remplacement. */
    --ink: #0b1420;
    --ink-soft: #17233a;
    --brand-blue: #3457d5;
    --brand-blue-deep: #24409e;
    --brand-green: #1e9e52;
    --on-dark: #f4f6fa;
    --on-dark-muted: #94a3c4;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--background);
    color: var(--on-surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============ Header / Nav ============ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.7);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background-color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
    background: rgba(255,255,255,0.85);
    border-bottom-color: var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-sm);
}
.site-header .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
    max-width: 1080px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img, .brand svg { height: 32px; width: 32px; display: block; }
.brand span { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }

.nav-links-desktop { display: flex; gap: 28px; align-items: center; }
.nav-links-desktop a { color: var(--on-surface-variant); font-weight: 600; font-size: 14px; transition: color 0.15s ease; }
.nav-links-desktop a:hover { color: var(--primary); text-decoration: none; }

.nav-cta-group { display: flex; align-items: center; gap: 14px; }
.nav-cta-desktop { white-space: nowrap; }

.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    padding: 0;
}
.nav-burger span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: var(--on-surface);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 1px solid transparent;
    transition: max-height 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
}
.mobile-menu.is-open {
    max-height: 400px;
    padding: 8px 24px 20px;
    border-bottom-color: var(--border);
}
.mobile-menu a {
    padding: 12px 4px;
    font-weight: 600;
    font-size: 15px;
    color: var(--on-surface);
    border-bottom: 1px solid var(--border);
}
.mobile-menu a.btn { border-bottom: none; margin-top: 10px; text-align: center; }

/* ============ Hero ============ */
.hero-split {
    padding: 64px 0 56px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    max-width: 1080px;
}
.hero-copy h1 {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0 0 18px;
    text-wrap: balance;
}
.hero-copy p.lead {
    font-size: 18px;
    color: var(--on-surface-variant);
    max-width: 480px;
    margin: 0 0 32px;
}
.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-platforms {
    margin-top: 16px;
    font-size: 13px;
    color: var(--on-surface-variant);
}
.hero-platforms strong { color: var(--on-surface); font-weight: 700; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: #ffffff; box-shadow: 0 8px 20px -8px rgba(5,150,105,0.5); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: var(--surface); color: var(--on-surface); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-dim); border-color: var(--on-surface-variant); }
.btn-dark { background: var(--on-surface); color: #ffffff; padding: 10px 22px; font-size: 14px; }
.btn-dark:hover { background: #1e293b; }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-lg { padding: 16px 34px; font-size: 16px; }

.badge-soon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--on-primary-container);
    background: var(--primary-container);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.badge-soon .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Hero shot (mockup 3D réel : dashboard iPhone + iPad) + chips flottants */
.hero-shot {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 620px;
}
.hero-shot > picture,
.hero-shot > picture img {
    display: block;
    width: 100%;
    height: auto;
    animation: float-phone 6s ease-in-out infinite;
}
@keyframes float-phone {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: var(--shadow-md);
    font-size: 12px;
    z-index: 5;
    animation: float-chip 5s ease-in-out infinite;
}
.hero-chip strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--on-surface); }
.hero-chip span { display: block; font-size: 11px; color: var(--on-surface-variant); }
.hero-chip-icon {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    display: flex; align-items: center; justify-content: center;
}
.hero-chip-icon-green { background: var(--primary-container); color: var(--on-primary-container); }
.hero-chip-icon-blue { background: var(--secondary-container); color: var(--on-devis-container); }
.hero-chip-icon-orange { background: var(--accent-container); color: #9a3412; }

.hero-chip-1 { top: 6%; left: -6%; animation-delay: 0s; }
.hero-chip-2 { top: 46%; right: -8%; animation-delay: 1.2s; }
.hero-chip-3 { bottom: 4%; left: -4%; animation-delay: 2.4s; }
@keyframes float-chip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ============ Sections génériques ============ */
.section { padding: 40px 0 72px; }
.section-head { max-width: 560px; margin-bottom: 32px; }
.section-head .eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 8px;
}
.section-head h2 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    text-wrap: balance;
}
.section-head p {
    color: var(--on-surface-variant);
    font-size: 15px;
    margin: 0;
}

/* Icon containers réutilisables */
.icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.icon-green { background: var(--primary-container); color: var(--on-primary-container); }
.icon-blue { background: var(--secondary-container); color: var(--on-devis-container); }
.icon-orange { background: var(--accent-container); color: #9a3412; }

/* Feature grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}
.feature-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.feature-card p { font-size: 13px; color: var(--on-surface-variant); margin: 0; }

/* ============ Feature rows alternés (app inside website) ============ */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 72px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row-reverse { grid-template-columns: 0.85fr 1fr; }
.feature-row-reverse .feature-row-text { order: 2; }
.feature-row-reverse .feature-row-shot { order: 1; }
.feature-row-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--primary); margin: 0 0 10px;
}
.feature-row-text h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; text-wrap: balance; }
.feature-row-text p { font-size: 15px; color: var(--on-surface-variant); margin: 0 0 18px; }
.feature-row-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.feature-row-list li {
    font-size: 14px; font-weight: 600; color: var(--on-surface);
    padding-left: 26px; position: relative;
}
.feature-row-list li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
    background: var(--primary-container);
    border-radius: 50%;
}
.feature-row-list li::after {
    content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 4px;
    border-left: 2px solid var(--on-primary-container); border-bottom: 2px solid var(--on-primary-container);
    transform: rotate(-45deg);
}
.feature-row-shot { display: flex; justify-content: center; }
.feature-row-shot picture, .feature-row-shot img { display: block; width: 100%; max-width: 300px; height: auto; }

/* ============ Document types strip ============ */
.doc-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.doc-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.doc-chip:hover { border-color: var(--primary); background: var(--surface-container); transform: translateY(-2px); }
.doc-chip .doc-icon { font-size: 22px; margin-bottom: 8px; }
.doc-chip span { display: block; font-size: 12.5px; font-weight: 700; }

/* ============ Comment ça marche (steps) ============ */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.steps::before {
    content: "";
    position: absolute;
    top: 22px; left: 12%; right: 12%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.step { position: relative; z-index: 1; }
.step-num {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--on-surface); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; margin-bottom: 18px;
}
.step h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.step p { font-size: 13.5px; color: var(--on-surface-variant); margin: 0; }

/* ============ Avantages (composition asymétrique) ============ */
.advantages {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    align-items: center;
}
.advantages-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.advantages-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.advantages-card h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; }
.advantages-card p { font-size: 13px; color: var(--on-surface-variant); margin: 0; }
.advantages-card-top-left { grid-column: 1; grid-row: 1; }
.advantages-card-top-right { grid-column: 3; grid-row: 1; }
.advantages-card-bottom-left { grid-column: 1; grid-row: 2; }
.advantages-card-bottom-right { grid-column: 3; grid-row: 2; }
.advantages-center {
    grid-column: 2; grid-row: 1 / 3;
    text-align: center;
    background: var(--on-surface);
    border-radius: 24px;
    padding: 44px 28px;
    color: #fff;
}
.advantages-center img { border-radius: 16px; margin-bottom: 18px; }
.advantages-center h3 { font-size: 19px; font-weight: 800; margin: 0 0 10px; color: #fff; }
.advantages-center p { font-size: 14px; color: #94a3b8; margin: 0; }

/* ============ Template swatches ============ */
.swatch-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.swatch {
    width: 46px;
    height: 62px;
    border-radius: 8px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    flex: none;
}
.swatch::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 22px;
    background: var(--sw-color, var(--primary));
    opacity: 0.85;
}
.swatch::after {
    content: "";
    position: absolute;
    left: 8px; right: 8px; bottom: 10px;
    height: 3px;
    background: var(--border);
}

/* ============ FAQ ============ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px 20px;
}
.faq-item summary {
    padding: 16px 0;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "";
    flex: none;
    width: 10px; height: 10px;
    border-right: 2px solid var(--on-surface-variant);
    border-bottom: 2px solid var(--on-surface-variant);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p { margin: 0 0 18px; font-size: 14px; color: var(--on-surface-variant); }

/* ============ Reveal-on-scroll ============ */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ Content pages (privacy/terms/support) ============ */
.content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px;
    margin: 40px auto 64px;
}
.content h1 { font-size: 28px; font-weight: 800; margin: 0 0 8px; }
.content .updated { font-size: 13px; color: var(--on-surface-variant); margin-bottom: 32px; }
.content h2 { font-size: 18px; font-weight: 700; margin: 32px 0 12px; }
.content h2:first-of-type { margin-top: 0; }
.content p, .content li { font-size: 15px; color: var(--on-surface-variant); }
.content ul { padding-left: 20px; }
.content li { margin-bottom: 6px; }
.content strong { color: var(--on-surface); }

.contact-box {
    background: var(--surface-container);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 8px;
}
.contact-box .row { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 10px; }
.contact-box .row:last-child { margin-bottom: 0; }
.contact-box .row .label { color: var(--on-surface-variant); min-width: 90px; }

/* ============ CTA final ============ */
.section-cta {
    background: var(--on-surface);
    border-radius: 24px;
    padding: 56px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.section-cta::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(5,150,105,0.35), transparent 45%), radial-gradient(circle at 80% 80%, rgba(29,78,216,0.3), transparent 45%);
    pointer-events: none;
}
.section-cta-icon { position: relative; border-radius: 16px; margin-bottom: 20px; }
.section-cta h2 { position: relative; color: #ffffff; font-size: 28px; font-weight: 800; margin: 0 0 10px; text-wrap: balance; }
.section-cta p { position: relative; color: #94a3b8; font-size: 15px; margin: 0 0 28px; }
.section-cta .btn { position: relative; }

/* ============ Footer ============ */
.site-footer { border-top: 1px solid var(--border); padding: 56px 0 0; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
    max-width: 1080px;
    padding-bottom: 40px;
}
.footer-brand p { font-size: 13.5px; color: var(--on-surface-variant); margin: 14px 0 0; max-width: 260px; }
.footer-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-surface); margin: 0 0 14px; }
.footer-col a { display: block; font-size: 14px; color: var(--on-surface-variant); margin-bottom: 10px; }
.footer-col a:hover { color: var(--primary); text-decoration: none; }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 20px 24px;
    max-width: 1080px;
}
.footer-bottom .copy { font-size: 13px; color: var(--on-surface-variant); }

/* ============ Grand écran : les gabarits d'appareils restaient plafonnés à
   une taille pensée pour mobile (300px/320px), ce qui laissait de grandes
   zones vides de chaque côté sur un écran large. On les agrandit avec la
   largeur disponible plutôt que de les garder minuscules. La rangée
   "Sur ordinateur" passe en pleine largeur (texte au-dessus, capture en
   dessous) : une capture desktop très large gagne à être montrée en grand
   plutôt que compressée dans une colonne étroite à côté du texte. ============ */
@media (min-width: 981px) {
    .feature-row-shot picture, .feature-row-shot img { max-width: 400px; }
    .device-shot { max-width: 380px; }
    .feature-row-full { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .feature-row-full .feature-row-text { max-width: 640px; margin: 0 auto; }
    .feature-row-full .feature-row-list { align-items: center; }
    .feature-row-full .feature-row-list li { text-align: left; }
    .feature-row-shot-wide picture, .feature-row-shot-wide img { max-width: 920px; }
}

/* ============ Responsive ============ */
@media (max-width: 980px) {
    .feature-row, .feature-row-reverse { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .feature-row-reverse .feature-row-text, .feature-row-reverse .feature-row-shot { order: initial; }
    .feature-row-shot { order: -1; }
    .feature-row-list { align-items: center; }
    .feature-row-list li { text-align: left; }
    .advantages { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
    .advantages-center { grid-column: 1 / 3; grid-row: 1; }
    .advantages-card-top-left { grid-column: 1; grid-row: 2; }
    .advantages-card-top-right { grid-column: 2; grid-row: 2; }
    .advantages-card-bottom-left { grid-column: 1; grid-row: 3; }
    .advantages-card-bottom-right { grid-column: 2; grid-row: 3; }
}

@media (max-width: 860px) {
    .hero-split { grid-template-columns: 1fr; padding-top: 32px; text-align: center; }
    .hero-copy p.lead { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-shot { order: -1; margin-bottom: 24px; max-width: 420px; }
    .hero-chip { display: none; }
    .doc-strip { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / 3; }
}

@media (max-width: 720px) {
    .nav-links-desktop, .nav-cta-desktop { display: none; }
    .nav-burger { display: flex; }
    .mobile-menu { display: flex; }
    .feature-grid { grid-template-columns: 1fr; }
    .hero-copy h1 { font-size: 32px; }
    .section-head h2 { font-size: 24px; }
    .content { padding: 28px 20px; }
    .section-cta { padding: 40px 24px; }
    .steps { grid-template-columns: 1fr; gap: 28px; }
    .steps::before { display: none; }
    .advantages { grid-template-columns: 1fr; }
    .advantages-center, .advantages-card-top-left, .advantages-card-top-right, .advantages-card-bottom-left, .advantages-card-bottom-right {
        grid-column: 1; grid-row: auto;
    }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: 1; }
}

@media (max-width: 480px) {
    .doc-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================ */
/* NOUVEAUX COMPOSANTS — style repris du catalogue commercial    */
/* ============================================================ */

/* Cadre "téléphone" réutilisable autour d'une vraie capture d'écran */
.device {
    position: relative;
    display: inline-block;
    border-radius: 34px;
    padding: 12px;
    background: linear-gradient(160deg, #1b2740, var(--ink));
    box-shadow: 0 30px 60px -20px rgba(11,20,32,0.45), 0 2px 8px rgba(11,20,32,0.15);
    max-width: 300px;
}
.device img, .device picture { display: block; width: 100%; border-radius: 24px; }
/* Dynamic Island : pastille noire pleine superposée en haut de la capture
   d'écran (comme sur un vrai iPhone 14 Pro et plus récent), pas un simple
   filet translucide — proportions calquées sur l'appareil réel (~32% de la
   largeur d'écran, ratio ~3.2:1), plafonnées pour rester cohérentes que le
   cadre fasse 300px (hero) ou 240px (section IA). */
.device::before {
    content: "";
    position: absolute;
    top: 26px; left: 50%; transform: translateX(-50%);
    width: 32%;
    max-width: 108px;
    aspect-ratio: 3.2 / 1;
    border-radius: 999px;
    background: #000;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Capture déjà encadrée (bezel photoréaliste + ombre 3D déjà incrustés dans le
   PNG lui-même, via devices.css + une déformation de perspective) — pas de
   second cadre CSS par-dessus, juste un conteneur qui centre et limite la
   largeur. Remplace .device pour le hero et la section IA. */
.device-shot { display: inline-block; max-width: 320px; }
.device-shot img, .device-shot picture { display: block; width: 100%; height: auto; }

/* Section pleine largeur à fond sombre, pour les temps forts (hero, IA, résumé) */
.dark-section { background: var(--ink); color: var(--on-dark); }
.dark-section .section-head .eyebrow { color: var(--on-dark-muted); }
.dark-section .section-head h2 { color: #fff; }
.dark-section .section-head p { color: var(--on-dark-muted); }
.dark-section .card-dark {
    background: var(--ink-soft); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 22px;
}
.dark-section .card-dark h4 { color: #fff; font-size: 16px; font-weight: 700; }
.dark-section .card-dark p { color: var(--on-dark-muted); font-size: 13px; margin-top: 6px; }

/* Bandeau dégradé bleu (mise en avant "pourquoi DOXAL Pro") */
.brand-section {
    background: linear-gradient(180deg, var(--brand-blue-deep) 0%, var(--brand-blue) 100%);
    color: #fff;
}
.brand-section .eyebrow { color: rgba(255,255,255,0.75); }

/* Numéro d'étape en cercle, utilisé dans la section DOXAL AI */
.step-row { display: flex; gap: 16px; align-items: flex-start; margin-top: 14px; }
.step-circle {
    font-family: inherit; font-weight: 700; font-size: 13px;
    border: 1.5px solid rgba(255,255,255,0.5); color: #fff;
    border-radius: 999px; width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.step-row p { font-size: 14px; padding-top: 4px; color: var(--on-dark-muted); }

/* Pastilles de disponibilité (iOS / Android / bientôt Windows / Mac) */
.avail-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,0.25);
    font-size: 13px; font-weight: 600; color: #fff;
}

/* Cartes "Pour qui" */
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.profile-card { border: 1px solid var(--border); border-radius: 16px; padding: 22px; background: var(--surface); }
.profile-card h4 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.profile-flow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--on-surface-variant); flex-wrap: wrap; }
.profile-flow .arrow { color: var(--brand-green); font-weight: 700; }

/* Diagramme "écosystème" : un noeud central, des modules autour */
.eco-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; }
.eco-center {
    width: 150px; height: 150px; border-radius: 999px; background: var(--ink);
    display: flex; align-items: center; justify-content: center; z-index: 2;
    box-shadow: 0 20px 50px -12px rgba(11,20,32,0.35); text-align: center; padding: 12px;
}
.eco-center strong { color: #fff; font-size: 15px; font-weight: 800; }
.eco-node {
    position: absolute; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--on-surface);
    box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) {
    .eco-wrap { min-height: 640px; }
    .eco-node { font-size: 11px; padding: 7px 11px; }
}

/* Cartes tarifaires */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
@media (max-width: 700px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
.price-card {
    border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 22px 20px;
    background: var(--ink-soft); position: relative;
}
.price-card.is-best { border-color: var(--brand-green); background: rgba(30,158,82,0.08); }
.price-badge {
    position: absolute; top: -11px; right: 16px;
    background: var(--brand-green); color: #fff; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
}
.price-card .price-label { font-size: 12px; color: var(--on-dark-muted); letter-spacing: 0.04em; }
.price-card .price-amount { font-family: ui-monospace, monospace; font-size: 22px; font-weight: 700; margin-top: 6px; color: #fff; }

@media (max-width: 860px) {
    .profile-grid, .price-grid { grid-template-columns: 1fr; }
}