/* ═══════════════════════════════════════════════════════════════════════════
   Pages internes du site vitrine (fonctionnalités, facturation électronique, caisse, à propos, contact).
   S'appuie sur les jetons et composants de site.css (même identité que l'accueil) ; ne définit que ce qui est propre aux pages internes.
   ═══════════════════════════════════════════════════════════════════════════ */

body.page-int { background: var(--bg); }
body.page-int #nav { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.nav-links a.is-page { color: var(--primary); background: var(--primary-soft); }

/* ── Bandeau de page ─────────────────────────────────────────────────────── */
.phero {
    position: relative; overflow: hidden; padding: calc(var(--nav-h) + 64px) 0 76px; color: var(--ink);
    background: linear-gradient(180deg, #EAF0FF 0%, #F3F6FD 62%, var(--bg) 100%);
}
[data-theme="dark"] .phero {
    background: linear-gradient(180deg, #0C1538 0%, #09102B 64%, var(--bg) 100%);
    --cl-point: rgba(160, 185, 255, .20); --cl-o1: rgba(110, 143, 255, .22); --cl-o2: rgba(25, 224, 181, .14); --cl-o3: rgba(150, 120, 255, .14);
}
.phero .container { position: relative; z-index: 1; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); margin-bottom: 20px; list-style: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs li + li::before { content: '/'; margin-inline-end: 8px; opacity: .5; }
.phero h1 {
    font-family: var(--f-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance;
    font-size: clamp(2.2rem, 4.8vw, 3.6rem); max-width: 18ch;
}
.phero h1 em { font-style: normal; background: linear-gradient(100deg, var(--primary), var(--accent-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phero .lead { font-size: 1.16rem; max-width: 60ch; margin-top: 20px; }
.phero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.phero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.phero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; list-style: none; }
.phero-meta li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.phero-meta i { color: var(--accent-ink); }

/* ── Sous-navigation d'ancres ────────────────────────────────────────────── */
.subnav { position: sticky; top: var(--nav-h); z-index: 50; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 6px; list-style: none; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); font-size: .86rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background .2s, color .2s; }
.subnav a:hover, .subnav a.on { background: var(--primary-soft); color: var(--primary); }

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec.alt { background: var(--surface); border-block: 1px solid var(--line); }
.sec-tight { padding: 72px 0; }
.sec-head.left { margin-inline: 0; }

/* ── Cartes de fonctionnalités ───────────────────────────────────────────── */
.fcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fcards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fcards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fcard {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; box-shadow: var(--shadow-1);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.fcard .prod-ic { margin-bottom: 18px; }
.fcard h3 { font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.fcard p { color: var(--ink-2); font-size: .95rem; }
.fcard ul { list-style: none; display: grid; gap: 8px; margin-top: 16px; font-size: .9rem; color: var(--ink-2); }
.fcard li { position: relative; padding-inline-start: 24px; }
.fcard li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset-inline-start: 0; top: 1px; font-size: .72rem; color: var(--accent-ink); }
.fcard .tag { display: inline-block; margin-top: 16px; padding: 4px 11px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; background: var(--accent-soft); color: var(--accent-ink); }

/* ── Bloc texte + visuel ─────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split + .split { margin-top: 96px; }
.split.rev > :first-child { order: 2; }
.split h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.split .lead { font-size: 1.02rem; }
.split .ticks { margin-top: 22px; }
.ptick { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.ptick li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: .98rem; }
.ptick li i { margin-top: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
.ptick strong { color: var(--ink); font-weight: 700; }
.plink { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 700; color: var(--primary); }
.plink i { transition: transform .2s; }
.plink:hover i { transform: translateX(4px); }
[dir="rtl"] .plink:hover i { transform: translateX(-4px); }

/* ── Fenêtre de démonstration (maquettes) ────────────────────────────────── */
.win { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-2); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--muted); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.win-bar i:nth-child(1) { background: #FF6B6B; } .win-bar i:nth-child(2) { background: #FFC24B; } .win-bar i:nth-child(3) { background: #3DD68C; }
.win-bar span { margin-inline-start: 8px; }
.win-body { padding: 20px; }
.mrow { display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px dashed var(--line-2); font-size: .85rem; font-variant-numeric: tabular-nums; }
.mrow:last-child { border-bottom: 0; }
.mrow.h { font-size: .7rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); padding-top: 0; }
.mrow .r { text-align: end; font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; }
.pill.ok { background: var(--accent-soft); color: var(--accent-ink); }
.pill.wait { background: rgba(245,166,35,.16); color: var(--gold-ink); }
.pill.ko { background: rgba(194,59,59,.12); color: var(--danger); }
.pill.info { background: var(--primary-soft); color: var(--primary); }
.mtiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mtile { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.mtile small { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; letter-spacing: .3px; }
.mtile b { display: block; font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mtile em { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--accent-ink); }
.mbars { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-top: 16px; }
.mbars span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--primary-2), var(--primary)); opacity: .85; }
.mbars span:nth-child(even) { background: linear-gradient(180deg, var(--accent), var(--accent-ink)); }
.mwin { position: relative; }
.mwin .win + .win { position: absolute; inset-inline-end: -18px; bottom: -34px; width: 62%; }
.mdock { display: flex; gap: 6px; padding: 8px 10px; background: var(--surface-2); border-top: 1px solid var(--line); }
.mdock span { padding: 5px 11px; border-radius: 8px; font-size: .72rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.mdock span.on { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ── Parcours numéroté (séquence réelle) ─────────────────────────────────── */
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s; list-style: none; position: relative; }
.stepper li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 22px; box-shadow: var(--shadow-1); counter-increment: s; }
.stepper li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: 16px; font-family: var(--f-display); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 6px 16px rgba(11,47,165,.3); }
.stepper h3 { font-family: var(--f-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.stepper p { color: var(--ink-2); font-size: .92rem; }
.stepper.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Chiffres ────────────────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fact { padding: 26px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-align: center; box-shadow: var(--shadow-1); }
.fact b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 2.3rem; letter-spacing: -.03em; color: var(--primary); }
.fact span { display: block; margin-top: 4px; font-size: .9rem; color: var(--ink-2); }

/* ── Bandeau d'appel à l'action ──────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: 56px 48px; color: #fff; background: linear-gradient(135deg, #040D2E 0%, #0B2FA5 58%, #0E7DE8 100%); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: #00C8A0; filter: blur(90px); opacity: .4; inset-inline-end: -80px; top: -140px; }
.cta-band > * { position: relative; }
.cta-band h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.02em; max-width: 24ch; line-height: 1.15; text-wrap: balance; }
.cta-band p { margin-top: 10px; color: rgba(255,255,255,.8); max-width: 52ch; }
.cta-band .btn-ghost { color: #fff; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── À propos / contact ──────────────────────────────────────────────────── */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.contact-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.map-card { margin-top: 20px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.map-card iframe { width: 100%; height: 260px; border: 0; display: block; }
.faq.inline { margin: 0 auto; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .phero-grid, .split, .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
    .split.rev > :first-child { order: 0; }
    .fcards, .fcards.four, .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stepper, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mwin .win + .win { position: static; width: auto; margin-top: 16px; }
    .phero h1 { max-width: none; }
}
@media (max-width: 640px) {
    .phero { padding: calc(var(--nav-h) + 36px) 0 52px; }
    .sec { padding: 72px 0; }
    .fcards, .fcards.two, .fcards.four, .values, .stepper, .stepper.three, .facts { grid-template-columns: 1fr; }
    .cta-band { padding: 36px 24px; border-radius: 22px; }
    .split + .split { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .fcard, .fcard:hover { transition: none; transform: none; } }