/* Site public PlanningPro : page d'accueil et pages thématiques */
:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: rgba(37, 99, 235, 0.08);
    --primary-line: rgba(37, 99, 235, 0.22);
    --primary-glow: rgba(37, 99, 235, 0.28);
    --accent: #059669;
    --accent-soft: rgba(5, 150, 105, 0.10);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.10);

    --bg-main: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.14);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.04), 0 30px 70px -20px rgba(15, 23, 42, 0.22);
    --nav-bg: rgba(248, 250, 252, 0.82);

    --halo-1: rgba(37, 99, 235, 0.10);
    --halo-2: rgba(5, 150, 105, 0.07);

    /* Interface de l'app (reprise des écrans réels) */
    --app-bg: linear-gradient(135deg, #e6ecfb 0%, #f4f6fb 45%, #e7f5f0 100%);
    --app-card: rgba(255, 255, 255, 0.9);
    --app-side: rgba(255, 255, 255, 0.72);
    --app-line: rgba(15, 23, 42, 0.07);
    --app-icon: #475569;

    --shift-green: #84cc16;
    --shift-pink: #ec4899;
    --shift-cyan: #06b6d4;
    --shift-purple: #a855f7;
    --shift-orange: #f59e0b;
    --repos-stripe: rgba(15, 23, 42, 0.05);

    --r-xl: 26px;
    --r-lg: 18px;
    --r-md: 12px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --wrap: 1760px;
    --gutter: clamp(16px, 4vw, 72px);
    --section-y: clamp(72px, 9vw, 150px);
}

html.dark-mode {
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-soft: rgba(59, 130, 246, 0.12);
    --primary-line: rgba(59, 130, 246, 0.30);
    --primary-glow: rgba(59, 130, 246, 0.35);
    --accent: #10b981;
    --accent-soft: rgba(16, 185, 129, 0.12);
    --danger-soft: rgba(239, 68, 68, 0.16);

    --bg-main: #0b1120;
    --surface: #131c2e;
    --surface-2: #1a2438;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 30px 70px -20px rgba(0, 0, 0, 0.7);
    --nav-bg: rgba(11, 17, 32, 0.82);

    --halo-1: rgba(59, 130, 246, 0.16);
    --halo-2: rgba(16, 185, 129, 0.08);

    --app-bg: linear-gradient(135deg, #0e1730 0%, #0b1120 50%, #0c1b22 100%);
    --app-card: rgba(19, 28, 46, 0.92);
    --app-side: rgba(19, 28, 46, 0.8);
    --app-line: rgba(255, 255, 255, 0.07);
    --app-icon: #94a3b8;
    --repos-stripe: rgba(255, 255, 255, 0.045);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-main);
    background-image:
        radial-gradient(circle at 6% 4%, var(--halo-1) 0%, transparent 32%),
        radial-gradient(circle at 96% 22%, var(--halo-2) 0%, transparent 34%);
    background-repeat: no-repeat;
    color: var(--text-main);
    line-height: 1.6;
    font-size: clamp(15px, 0.5vw + 12.5px, 18px);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 3000; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 0.8em 1.4em; border-radius: var(--r-md);
    font-weight: 800; font-size: 0.95rem; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer;
    transition: transform 0.2s var(--ease), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px -6px var(--primary-glow); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 12px 26px -8px var(--primary-glow); }
html.dark-mode .btn-primary:hover { color: #0b1120; }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-main); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-lg { padding: 0.95em 1.7em; font-size: 1.02rem; border-radius: 14px; }
.btn-block { width: 100%; }
.btn .fa-arrow-right { transition: transform 0.2s var(--ease); }
.btn:hover .fa-arrow-right { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--primary); transform-origin: 0 50%; transform: scaleX(0); z-index: 1101; pointer-events: none; }
.site-nav {
    position: sticky; top: 0; z-index: 1100; background: var(--nav-bg);
    backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid transparent; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-nav.scrolled { border-bottom-color: var(--border-color); box-shadow: 0 6px 24px -18px rgba(15, 23, 42, 0.4); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; transition: height 0.3s var(--ease); }
.site-nav.scrolled .nav-inner { height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 1.35rem; letter-spacing: -0.4px; flex-shrink: 0; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand strong { color: var(--primary); font-weight: 900; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a { text-decoration: none; font-weight: 700; font-size: 0.92rem; color: var(--text-muted); padding: 8px 12px; border-radius: 9px; transition: color 0.2s ease, background-color 0.2s ease; }
.nav-links a:hover, .nav-links a.current { color: var(--text-main); background: var(--primary-soft); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border-color); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease;
}
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.icon-btn .fa-sun { display: none; }
html.dark-mode .icon-btn .fa-sun { display: inline-block; }
html.dark-mode .icon-btn .fa-moon { display: none; }
.nav-login { padding: 9px 16px; font-size: 0.88rem; }
.nav-trial { padding: 10px 16px; font-size: 0.88rem; }
.burger { display: none; }

/* ---------- Tiroir mobile ---------- */
.drawer-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(11, 17, 32, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2001; width: min(88vw, 360px); background: var(--surface);
    display: flex; flex-direction: column; padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateX(100%); transition: transform 0.4s var(--ease); box-shadow: -20px 0 50px rgba(0, 0, 0, 0.25); overflow-y: auto;
}
body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }
body.drawer-open .drawer { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.drawer-links { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 16px 0; }
.drawer-links a {
    display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 12px; text-decoration: none; font-weight: 800; font-size: 1.02rem;
    opacity: 0; transform: translateX(16px); transition: opacity 0.35s ease, transform 0.45s var(--ease), background-color 0.2s ease;
}
.drawer-links a i { width: 22px; text-align: center; color: var(--primary); }
.drawer-links a:active, .drawer-links a:hover { background: var(--primary-soft); }
body.drawer-open .drawer-links a { opacity: 1; transform: none; }
body.drawer-open .drawer-links li:nth-child(2) a { transition-delay: 0.04s; }
body.drawer-open .drawer-links li:nth-child(3) a { transition-delay: 0.08s; }
body.drawer-open .drawer-links li:nth-child(4) a { transition-delay: 0.12s; }
body.drawer-open .drawer-links li:nth-child(5) a { transition-delay: 0.16s; }
body.drawer-open .drawer-links li:nth-child(6) a { transition-delay: 0.20s; }
.drawer-offer { margin-top: auto; padding: 16px; border-radius: 16px; background: var(--primary-soft); border: 1px solid var(--primary-line); display: flex; flex-direction: column; gap: 10px; }
.drawer-offer p { font-size: 0.88rem; color: var(--text-muted); font-weight: 600; }
.drawer-offer p strong { color: var(--text-main); }

/* ---------- Hero ---------- */
.hero { padding: clamp(28px, 4vw, 64px) 0 clamp(36px, 4vw, 64px); min-height: calc(100svh - 72px); display: flex; align-items: center; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); gap: clamp(32px, 4vw, 80px); align-items: center; }
.hero-kicker {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface);
    border: 1px solid var(--border-color); font-size: 0.86rem; font-weight: 700; color: var(--text-muted); box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.hero-kicker b { background: var(--accent); color: #fff; font-weight: 800; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; }
@media (max-width: 1600px) { .hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
.hero h1 { font-size: clamp(2.2rem, 0.6rem + 2.7vw, 4.4rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 900; margin-bottom: 0.45em; text-wrap: balance; }
.hero-lead { font-size: clamp(1.02rem, 0.9rem + 0.35vw, 1.25rem); color: var(--text-muted); font-weight: 600; max-width: 36em; margin-bottom: 1.6em; }

.offer-ticket { display: flex; align-items: stretch; max-width: 500px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin-bottom: 26px; overflow: hidden; }
.offer-ticket .free { padding: 16px 20px; background: var(--primary); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.offer-ticket .free strong { font-size: 2.1rem; line-height: 1; font-weight: 900; letter-spacing: -0.03em; }
.offer-ticket .free span { font-size: 0.82rem; font-weight: 800; opacity: 0.9; }
.offer-ticket .then { padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-left: 2px dashed var(--border-strong); }
.offer-ticket .then .p { font-weight: 900; font-size: 1.25rem; letter-spacing: -0.02em; }
.offer-ticket .then .p small { font-size: 0.85rem; color: var(--text-muted); font-weight: 700; }
.offer-ticket .then .s { font-size: 0.86rem; font-weight: 700; color: var(--accent); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-assurances { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; font-size: 0.88rem; font-weight: 700; color: var(--text-muted); }
.hero-assurances i { color: var(--accent); margin-right: 6px; }

/* ---------- Réplique de l'interface (planning) ---------- */
.hero-visual { position: relative; }
.app {
    container-type: inline-size; border-radius: clamp(14px, 1.6vw, 24px); overflow: hidden; position: relative;
    border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); background: var(--app-bg);
}
.app-ui { font-size: clamp(5.5px, 1.05cqi, 13px); display: flex; position: relative; line-height: 1.25; color: var(--text-main); user-select: none; }
.app-side {
    width: 5.2em; flex-shrink: 0; background: var(--app-side); border-right: 1px solid var(--app-line);
    display: flex; flex-direction: column; align-items: center; padding: 1.6em 0 1.4em; gap: 1.55em; color: var(--app-icon); font-size: 1.05em;
}
.app-side .app-logo { width: 2.6em; height: 2.6em; object-fit: contain; }
.app-side .app-burger { width: 2.6em; height: 2.4em; border-radius: 0.6em; background: var(--app-card); border: 1px solid var(--app-line); display: flex; align-items: center; justify-content: center; margin-top: -0.4em; }
.app-side hr { width: 70%; border: none; border-top: 1px solid var(--app-line); margin: -0.4em 0; }
.app-side .on { color: var(--primary); }
.app-side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 1.5em; align-items: center; }
.app-main { flex: 1; min-width: 0; padding: 1.6em 1.8em 1.4em; display: flex; flex-direction: column; gap: 1.2em; }

.app-toolbar { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 1.2em; padding: 0.8em 1em; display: flex; align-items: center; gap: 0.9em; box-shadow: 0 0.4em 1.2em -0.6em rgba(15, 23, 42, 0.12); }
.tb-date { border: 1px solid var(--app-line); border-radius: 0.7em; padding: 0.55em 0.9em; font-weight: 700; display: inline-flex; gap: 1.2em; align-items: center; background: var(--surface); }
.tb-date i { color: var(--app-icon); }
.tb-seg { display: inline-flex; border: 1px solid var(--app-line); border-radius: 0.7em; padding: 0.22em; font-weight: 800; }
.tb-seg span { padding: 0.45em 1em; border-radius: 0.5em; color: var(--text-muted); }
.tb-seg span.on { background: var(--primary); color: #fff; box-shadow: 0 0.3em 0.8em -0.3em var(--primary-glow); }
.tb-week { margin: 0 auto; border: 1px solid var(--app-line); border-radius: 999px; padding: 0.55em 1.4em; font-weight: 800; display: inline-flex; gap: 3em; align-items: center; background: var(--surface); }
.tb-week i { color: var(--app-icon); }
.tb-actions { display: inline-flex; gap: 0.6em; }
.tb-actions span { width: 2.6em; height: 2.6em; border-radius: 0.7em; border: 1px solid var(--app-line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: var(--app-icon); transition: transform 0.2s ease, box-shadow 0.3s ease; }
.tb-actions .send { background: #fde7c3; border-color: #f59e0b; color: #f97316; }
html.dark-mode .tb-actions .send { background: rgba(245, 158, 11, 0.18); }
.tb-actions .send.pulse { animation: sendPulse 0.9s var(--ease); }
@keyframes sendPulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); transform: scale(0.9); } 40% { transform: scale(1.08); } 100% { box-shadow: 0 0 0 1.2em rgba(245, 158, 11, 0); transform: scale(1); } }

.app-grid-card { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 1.2em; overflow: hidden; box-shadow: 0 0.4em 1.2em -0.6em rgba(15, 23, 42, 0.12); }
.app-grid { display: grid; grid-template-columns: 13.5em repeat(7, minmax(0, 1fr)); }
.ag-h { padding: 0.75em 0.3em 0.6em; text-align: center; font-weight: 900; font-size: 0.8em; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--app-line); border-left: 1px solid var(--app-line); line-height: 1.3; }
.ag-h small { display: block; font-weight: 700; letter-spacing: 0; font-size: 0.95em; opacity: 0.85; }
.ag-h.first { text-align: left; padding-left: 1.1em; border-left: none; display: flex; align-items: center; }
.ag-h.today { color: var(--primary); }
.ag-h.today small { display: table; margin: 0.15em auto 0; padding: 0.05em 0.5em; border-radius: 999px; background: var(--primary); color: #fff; opacity: 1; }
.ag-emp { display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.7em; border-bottom: 1px solid var(--app-line); position: relative; min-width: 0; }
.ag-av { width: 2.3em; height: 2.3em; border-radius: 50%; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9em; }
.ag-info { min-width: 0; display: flex; flex-direction: column; gap: 0.1em; }
.ag-info b { font-weight: 900; font-size: 0.98em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-info small { font-size: 0.78em; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.ag-info small b { font-size: 1em; color: var(--text-main); }
.ag-diff { color: #ea580c; font-style: normal; font-weight: 900; margin-left: 0.2em; }
.ag-alert { position: absolute; right: 0.6em; top: 50%; margin-top: -0.65em; width: 1.3em; height: 1.3em; border-radius: 50%; background: #f59e0b; color: #fff; font-weight: 900; font-size: 0.75em; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease, transform 0.4s var(--ease); }
.ag-alert.off { opacity: 0; transform: scale(0.4); }
.ag-cell { border-bottom: 1px solid var(--app-line); border-left: 1px solid var(--app-line); padding: 0.28em; display: flex; flex-direction: column; justify-content: center; gap: 0.22em; min-height: 3.5em; position: relative; transition: background-color 0.3s ease; }
.ag-cell.today { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.ag-cell.repos { align-items: center; }
.ag-cell.repos span { font-size: 0.72em; font-weight: 800; color: var(--text-muted); opacity: 0.55; letter-spacing: 0.02em; }
.ag-cell.target { background: color-mix(in srgb, var(--primary) 10%, transparent); box-shadow: inset 0 0 0 0.14em var(--primary); }
.ag-shift { --sc: var(--shift-green); position: relative; border-radius: 0.4em; color: var(--text-main); padding: 0.32em 0.45em 0.32em 0.6em; display: flex; flex-direction: column; gap: 0.05em; overflow: hidden;
    background: color-mix(in srgb, var(--sc) 17%, var(--app-card)); border-left: 0.26em solid var(--sc); }
html.dark-mode .ag-shift { background: color-mix(in srgb, var(--sc) 24%, var(--app-card)); }
.ag-shift b { font-weight: 900; font-size: 0.82em; white-space: nowrap; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ag-shift span { font-weight: 700; font-size: 0.72em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-cell.duo .ag-shift { padding-top: 0.22em; padding-bottom: 0.22em; }
.ag-cell.duo .ag-shift span { display: none; }
.ag-shift.g { --sc: var(--shift-green); }
.ag-shift.p { --sc: var(--shift-pink); }
.ag-shift.c { --sc: var(--shift-cyan); }
.ag-shift.v { --sc: var(--shift-purple); }
.ag-tot { padding: 0.6em 0.3em; text-align: center; font-weight: 900; font-size: 0.8em; border-left: 1px solid var(--app-line); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.ag-tot.first { text-align: left; padding-left: 1.4em; border-left: none; color: var(--text-muted); }
.anim-in .ag-shift { opacity: 0; transform: translateY(-0.4em); animation: shiftIn 0.5s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes shiftIn { to { opacity: 1; transform: none; } }
.anim-in .ag-shift.pop, .ag-shift.pop { opacity: 0; animation: popIn 0.45s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes popIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.anim-in .ag-shift.fade-out, .ag-shift.fade-out { animation: fadeShift 0.45s ease forwards; }
@keyframes fadeShift { from { opacity: 1; } to { opacity: 0; transform: scale(0.94); } }
.app-perf { text-align: center; color: var(--primary); font-weight: 900; padding: 0.9em; font-size: 1.05em; }
.app-perf i:first-child { margin-right: 0.4em; }
.app-perf i:last-child { margin-left: 0.4em; font-size: 0.8em; }
.app-footer { display: flex; gap: 0.8em; align-items: center; }
.af-btn, .af-ic, .af-etab { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 0.9em; padding: 0.9em 1.2em; font-weight: 800; display: inline-flex; align-items: center; gap: 0.6em; box-shadow: 0 0.3em 0.9em -0.5em rgba(15, 23, 42, 0.15); }
.af-ic { padding: 0.9em 1em; }
.af-etab { margin-left: auto; }
.af-etab .fa-location-dot { color: var(--danger); }
.af-etab .fa-caret-down { color: var(--primary); }

/* Curseur de démonstration */
.cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 20; pointer-events: none; opacity: 0; transition: transform 0.85s var(--ease), opacity 0.3s ease; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)); }
.cursor.show { opacity: 1; }
.cursor.instant { transition: opacity 0.3s ease; }
.cursor svg { width: 100%; height: 100%; display: block; }
.cursor::after { content: ''; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; transform: scale(0.3); }
.cursor.press::after { animation: ripple 0.5s ease-out; }
.cursor.press svg { transform: scale(0.88); }
@keyframes ripple { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.6); } }

.float-card {
    position: absolute; background: var(--surface); border: 1px solid var(--border-color); border-radius: 14px;
    box-shadow: var(--shadow-lg); padding: 11px 14px; display: flex; align-items: center; gap: 11px; z-index: 4;
    font-size: 0.82rem; font-weight: 800; line-height: 1.3; max-width: 290px;
}
.float-card .ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; }
.float-card small { display: block; color: var(--text-muted); font-weight: 700; font-size: 0.74rem; }
.toast { left: clamp(-36px, -2vw, -12px); bottom: 12%; transition: opacity 0.35s ease, transform 0.45s var(--ease); }
.toast.out { opacity: 0; transform: translateY(12px) scale(0.97); }
.kiosk-chip { right: clamp(-28px, -1.5vw, -8px); top: -58px; }
.kiosk-chip .ic { background: var(--accent-soft); color: var(--accent); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 6px; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

.ic-blue { background: var(--primary-soft); color: var(--primary); }
.ic-green { background: var(--accent-soft); color: var(--accent); }
.ic-orange { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.ic-violet { background: rgba(168, 85, 247, 0.12); color: #9333ea; }
.ic-pink { background: rgba(236, 72, 153, 0.12); color: #db2777; }
.ic-cyan { background: rgba(6, 182, 212, 0.12); color: #0891b2; }
html.dark-mode .ic-violet { color: #c084fc; }
html.dark-mode .ic-pink { color: #f472b6; }
html.dark-mode .ic-cyan { color: #22d3ee; }
html.dark-mode .ic-orange { color: #fbbf24; }

/* ---------- Bandeau défilant ---------- */
.ticker { padding: 24px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); overflow: hidden; background: var(--surface); }
.ticker-track { display: flex; gap: 14px; width: max-content; animation: ticker 55s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: var(--bg-main); border: 1px solid var(--border-color); font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
.ticker-item i { color: var(--primary); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; }
.section-head { max-width: 920px; margin-bottom: clamp(32px, 4vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.95rem, 1.1rem + 2.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 900; margin-bottom: 0.4em; text-wrap: balance; }
.section-head p { font-size: clamp(1.02rem, 0.92rem + 0.3vw, 1.2rem); color: var(--text-muted); font-weight: 600; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Chiffres clés : quatre tuiles animées ---------- */
.chiffres { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.chiffre {
    position: relative; overflow: hidden; isolation: isolate; padding: clamp(20px, 2vw, 30px); border-radius: var(--r-xl);
    background: var(--surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
}
.chiffre::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.09; transition: opacity 0.5s ease;
    background: radial-gradient(120% 90% at 100% 0%, var(--c2), transparent 60%), radial-gradient(90% 80% at 0% 100%, var(--c1), transparent 65%);
}
.chiffre::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--c1), var(--c2)); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) 0.25s;
}
.chiffre.in::after { transform: scaleX(1); }
.chiffres .chiffre:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--c1) 55%, transparent); border-color: color-mix(in srgb, var(--c1) 30%, transparent); }
.chiffre:hover::before { opacity: 0.18; }
.chiffre-ic {
    width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem;
    background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 22px -8px var(--c1); transition: transform 0.6s var(--ease);
}
.chiffre:hover .chiffre-ic { transform: rotate(-8deg) scale(1.08); }
.chiffre-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin-top: 16px; line-height: 1; }
.chiffre-val b {
    font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4rem); font-weight: 900; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chiffre-val small { font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem); font-weight: 900; letter-spacing: -0.01em; color: var(--text-main); }
.chiffre-lib { margin-top: 8px; color: var(--text-muted); font-weight: 700; font-size: 0.93rem; line-height: 1.4; }
.chiffre-fond { position: absolute; right: -10px; bottom: -18px; z-index: -1; font-size: 6.5rem; color: var(--c1); opacity: 0.06; transform: rotate(-12deg); transition: transform 0.8s var(--ease), opacity 0.5s ease; }
.chiffre:hover .chiffre-fond { transform: rotate(0deg) scale(1.1); opacity: 0.1; }

/* ---------- Témoignage client : photo + citation ---------- */
.temoin-sec { --t1: #65a30d; --t2: #16a34a; --t-soft: rgba(101, 163, 13, 0.1); padding-bottom: 0; padding-top: clamp(48px, 6vw, 96px); }
html.dark-mode .temoin-sec { --t1: #a3e635; --t2: #4ade80; --t-soft: rgba(163, 230, 53, 0.12); }
.temoin {
    position: relative; overflow: hidden; isolation: isolate; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(14px, 1.6vw, 22px); padding-right: clamp(24px, 4.5vw, 72px);
    border-radius: 32px; background: var(--surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg);
}
.temoin::before { content: ''; position: absolute; inset: auto -12% -45% auto; width: 560px; height: 560px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--t-soft), transparent); pointer-events: none; }
.temoin-photo { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: #111; }
.temoin-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 20%; display: block; transform: scale(1.04); transition: transform 1.4s var(--ease); }
.temoin.in .temoin-photo img { transform: none; }
.temoin-photo::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); pointer-events: none; }
.temoin-lieu {
    position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.92); color: #0f172a; font-weight: 900; font-size: 0.84rem; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.temoin-lieu i { color: #65a30d; }
.temoin-corps { padding: clamp(8px, 1.5vw, 24px) 0; }
.eyebrow.temoin-eyebrow { color: var(--t1); background: var(--t-soft); }
.temoin-citation { margin: 0; }
.temoin-phrase { font-size: clamp(1.45rem, 0.95rem + 1.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.025em; font-weight: 900; text-wrap: balance; margin-bottom: 0.7em; }
.temoin-texte { font-size: clamp(1rem, 0.92rem + 0.3vw, 1.16rem); line-height: 1.6; color: var(--text-muted); font-weight: 600; max-width: 60ch; }
.temoin-auteur { display: flex; align-items: center; gap: 14px; margin-top: clamp(20px, 2.4vw, 30px); }
.temoin-avatar {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 0.95rem;
    background: linear-gradient(135deg, #65a30d, #16a34a); box-shadow: 0 10px 22px -10px #16a34a;
}
.temoin-auteur p { display: flex; flex-direction: column; line-height: 1.3; }
.temoin-auteur strong { font-size: 1.05rem; font-weight: 900; }
.temoin-auteur p span { color: var(--text-muted); font-weight: 700; font-size: 0.9rem; }
.temoin-usages { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border-strong); }
.temoin-usages li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--bg-main); border: 1px solid var(--border-color); font-weight: 800; font-size: 0.84rem; }
.temoin-usages i { color: var(--t1); }
.temoin-guillemet { position: absolute; right: clamp(18px, 3vw, 44px); top: clamp(10px, 2vw, 28px); z-index: -1; font-size: clamp(5rem, 3rem + 6vw, 10rem); color: var(--t1); opacity: 0.09; }
@media (max-width: 860px) {
    .temoin { grid-template-columns: 1fr; padding: 12px 12px 24px; gap: 18px; border-radius: 26px; }
    .temoin-photo { aspect-ratio: 4 / 3; }
    .temoin-photo img { object-position: 55% 18%; }
    .temoin-corps { padding: 0 10px; }
    .temoin-guillemet { top: auto; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .temoin-photo img { transform: none; transition: none; } }

/* ---------- Fonctionnalités : récit animé ---------- */
.story { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 96px); }
.chapters { position: relative; padding-left: 28px; }
.chapters-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--border-color); border-radius: 2px; }
.chapters-rail i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--primary); border-radius: 2px; transition: height 0.2s linear; }
.chapter { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; opacity: 0.35; transition: opacity 0.5s ease; }
.chapter.active { opacity: 1; }
.chapter-ic { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 20px; }
.chapter h3 { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 900; margin-bottom: 0.5em; text-wrap: balance; }
.chapter p { color: var(--text-muted); font-weight: 600; font-size: clamp(1rem, 0.92rem + 0.25vw, 1.15rem); max-width: 34em; }
.chapter ul { list-style: none; margin-top: 1.3em; display: flex; flex-direction: column; gap: 0.6em; }
.chapter li { display: flex; gap: 12px; align-items: baseline; font-weight: 800; }
.chapter li i { color: var(--accent); font-size: 0.9em; }
.scene-slot { display: none; }

.stage-col { position: relative; }
.stage {
    position: sticky; top: 96px; height: min(780px, calc(100vh - 128px)); container-type: inline-size;
    border-radius: var(--r-xl); background: var(--app-bg); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); overflow: hidden;
}
.stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 0%, var(--primary-soft), transparent 70%); pointer-events: none; }
.scene {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 5cqi, 64px);
    opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.55s ease, transform 0.7s var(--ease); pointer-events: none;
    font-size: clamp(10px, 1.6cqi, 19px);
}
.scene.active { opacity: 1; transform: none; }
.scene .cursor { width: 24px; height: 24px; }

/* Fenêtre type « carte » de l'app */
.win { width: 100%; max-width: 50em; background: var(--app-card); border: 1px solid var(--app-line); border-radius: 1.5em; box-shadow: 0 1.5em 3em -1.5em rgba(15, 23, 42, 0.3); padding: 1.6em; position: relative; }
.win-head { display: flex; align-items: center; gap: 0.7em; font-weight: 900; font-size: 1.25em; padding-bottom: 0.9em; margin-bottom: 1.1em; border-bottom: 1px solid var(--app-line); }
.win-head > i { color: var(--primary); }
.win-head .sub { font-size: 0.68em; font-weight: 700; color: var(--text-muted); }
.win-head .tag { margin-left: auto; font-size: 0.62em; font-weight: 800; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--primary-line); padding: 0.35em 0.8em; border-radius: 0.6em; }
.w-btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.2em; border-radius: 0.8em; font-weight: 800; background: var(--primary); color: #fff; border: none; transition: background-color 0.3s ease, transform 0.2s ease; }
.w-btn.ghost { background: var(--surface); color: var(--text-muted); border: 1px solid var(--app-line); }
.w-btn.done { background: var(--accent); }
.w-btn.pressed { transform: scale(0.94); }

/* Scène : contrôle légal */
.aud-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1em; align-items: center; margin-bottom: 1.3em; }
.aud-day small { display: block; font-weight: 800; color: var(--text-muted); font-size: 0.85em; margin-bottom: 0.4em; }
.aud-day .ag-shift { font-size: 1.05em; transition: box-shadow 0.3s ease, transform 0.4s var(--ease); }
.aud-day .ag-shift.warn { box-shadow: 0 0 0 0.2em var(--surface), 0 0 0 0.38em var(--danger); }
.aud-day .ag-shift.moved { transform: translateY(-0.2em); }
.aud-gap { text-align: center; font-weight: 800; font-size: 0.9em; color: var(--text-muted); padding: 0.6em 0.8em; border-radius: 0.8em; background: var(--surface-2); transition: background-color 0.3s ease, color 0.3s ease; min-width: 7.5em; }
.aud-gap b { display: block; font-size: 1.5em; font-weight: 900; color: var(--text-main); letter-spacing: -0.02em; transition: color 0.3s ease; }
.aud-gap.bad { background: var(--danger-soft); color: var(--danger); }
.aud-gap.bad b { color: var(--danger); }
.aud-gap.good { background: var(--accent-soft); color: var(--accent); }
.aud-gap.good b { color: var(--accent); }
.aud-rules { list-style: none; display: flex; flex-direction: column; gap: 0.55em; }
.aud-rules li { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.75em 1em; border-radius: 0.8em; background: var(--surface); border: 1px solid var(--app-line); font-weight: 800; transition: border-color 0.3s ease, background-color 0.3s ease; }
.aud-rules li.ko { border-color: rgba(239, 68, 68, 0.4); background: var(--danger-soft); }
.st { font-size: 0.8em; padding: 0.3em 0.8em; border-radius: 999px; font-weight: 800; white-space: nowrap; background: var(--surface-2); color: var(--text-muted); }
.st.ok { background: var(--accent-soft); color: var(--accent); }
.st.ko { background: var(--danger); color: #fff; }

/* Scène : borne kiosque */
.kiosk-win { max-width: 46em; padding: 1.4em 1.4em 2em; }
.k-top { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.2em; }
.k-title { font-weight: 900; font-size: 1.35em; display: flex; align-items: center; gap: 0.5em; }
.k-title i { color: var(--primary); }
.k-tabs { display: flex; gap: 0.3em; background: var(--surface); border: 1px solid var(--app-line); border-radius: 0.9em; padding: 0.25em; font-size: 0.85em; font-weight: 800; }
.k-tabs span { padding: 0.5em 0.9em; border-radius: 0.65em; color: var(--text-muted); white-space: nowrap; }
.k-tabs span.on { background: var(--primary); color: #fff; }
.k-tabs b { transition: color 0.3s ease; }
.k-tabs b.bump { color: var(--accent); }
.k-clock { text-align: center; font-weight: 900; font-size: 3.6em; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.k-date { text-align: center; color: var(--text-muted); font-weight: 800; margin: 0.4em 0 1.2em; }
.k-card { max-width: 21em; margin: 0 auto; background: var(--surface); border: 1px solid var(--app-line); border-radius: 1.4em; padding: 1.3em; text-align: center; position: relative; overflow: hidden; box-shadow: 0 1em 2em -1.2em rgba(15, 23, 42, 0.3); }
.k-card > b { font-weight: 900; font-size: 1.05em; }
.k-card > small { display: block; color: var(--text-muted); font-weight: 600; font-size: 0.82em; margin-bottom: 0.9em; }
.k-field { background: var(--surface-2); border: 1px solid var(--app-line); border-radius: 0.8em; padding: 0.9em; display: flex; justify-content: center; gap: 0.9em; margin-bottom: 0.9em; }
.k-field i { width: 0.9em; height: 0.9em; border-radius: 50%; border: 0.12em solid var(--text-muted); opacity: 0.5; transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.k-field i.on { background: var(--primary); border-color: var(--primary); opacity: 1; }
.k-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55em; }
.k-pad span { height: 2.8em; border-radius: 0.7em; border: 1px solid var(--app-line); background: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1em; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.k-pad span.red { background: var(--danger-soft); color: var(--danger); border-color: rgba(239, 68, 68, 0.25); }
.k-pad span.hit { background: var(--primary); color: #fff; transform: scale(0.92); }
.k-ok { position: absolute; inset: 0; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4em; opacity: 0; transform: scale(1.04); transition: opacity 0.35s ease, transform 0.45s var(--ease); pointer-events: none; }
.k-ok.show { opacity: 1; transform: none; }
.k-ok .check { width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5em; margin-bottom: 0.3em; transform: scale(0); transition: transform 0.5s var(--ease) 0.1s; }
.k-ok.show .check { transform: scale(1); }
.k-ok b { font-size: 1.25em; font-weight: 900; }
.k-ok small { color: var(--text-muted); font-weight: 700; }

/* Scène : masse salariale */
.ms-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; margin-bottom: 1.2em; }
.ms-kpi { background: var(--surface); border: 1px solid var(--app-line); border-radius: 1em; padding: 0.9em 1em; }
.ms-kpi small { display: block; color: var(--text-muted); font-weight: 800; font-size: 0.8em; }
.ms-kpi strong { font-size: 1.6em; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ms-kpi.good strong { color: var(--accent); }
.ms-kpi .bar { height: 0.35em; border-radius: 99px; background: var(--surface-2); margin-top: 0.5em; overflow: hidden; }
.ms-kpi .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width 1.2s var(--ease); }
.ms-chart { width: 100%; height: auto; display: block; overflow: visible; }
.ms-chart text { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; fill: var(--text-muted); }
.ms-chart .grid line { stroke: var(--app-line); }
.ms-chart .ca { fill: var(--primary); opacity: 0.22; }
.ms-chart .ms { fill: var(--accent); }
.ms-chart rect { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.8s var(--ease); }
.ms-chart.reset rect { transform: scaleY(0); transition: none; }
.ms-chart .goal { stroke: var(--danger); stroke-dasharray: 6 6; stroke-width: 1.5; opacity: 0.6; }
.ms-chart .ratio { fill: none; stroke: #f59e0b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease 0.6s; }
.ms-chart.reset .ratio { stroke-dashoffset: 1000; transition: none; }
.ms-chart .dot { fill: var(--surface); stroke: #f59e0b; stroke-width: 2.5; transition: opacity 0.3s ease 1.8s; }
.ms-chart.reset .dot { opacity: 0; transition: none; }
.ms-legend { display: flex; gap: 1.3em; flex-wrap: wrap; font-size: 0.82em; font-weight: 800; color: var(--text-muted); margin-top: 0.7em; }
.ms-legend i { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 0.2em; margin-right: 0.4em; vertical-align: -0.05em; }
.ms-tip { position: absolute; background: var(--text-main); color: var(--surface); font-weight: 800; font-size: 0.82em; padding: 0.6em 0.8em; border-radius: 0.6em; line-height: 1.35; opacity: 0; transform: translate(-50%, -110%) translateY(6px); transition: opacity 0.3s ease, transform 0.4s var(--ease); pointer-events: none; white-space: nowrap; }
.ms-tip.show { opacity: 1; transform: translate(-50%, -110%); }

/* Scène : paie */
.pay { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.pay th { text-align: left; font-size: 0.78em; font-weight: 900; letter-spacing: 0.06em; color: var(--primary); padding: 0.6em 0.7em; background: var(--surface-2); }
.pay th:first-child { border-radius: 0.6em 0 0 0.6em; }
.pay th:last-child { border-radius: 0 0.6em 0.6em 0; }
.pay td { padding: 0.75em 0.7em; border-bottom: 1px solid var(--app-line); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay td:first-child { font-weight: 900; }
.pay td .av { display: inline-flex; width: 1.9em; height: 1.9em; border-radius: 50%; color: #fff; font-size: 0.8em; align-items: center; justify-content: center; margin-right: 0.6em; vertical-align: middle; }
.pay .plus { color: #d97706; }
.pay tr { transition: opacity 0.4s ease, transform 0.5s var(--ease); }
.pay tbody tr.hide { opacity: 0; transform: translateX(-0.8em); }
.pay-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1.2em; flex-wrap: wrap; }
.xls { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 800; font-size: 0.9em; padding: 0.6em 0.9em; border-radius: 0.8em; background: var(--accent-soft); color: var(--accent); transition: opacity 0.4s ease, transform 0.5s var(--ease); }
.xls.hide { opacity: 0; transform: translateY(0.5em); }
.pay-sent { position: absolute; left: 50%; bottom: -1.4em; transform: translate(-50%, 0.6em); background: var(--text-main); color: var(--surface); font-weight: 800; padding: 0.8em 1.2em; border-radius: 0.9em; display: flex; align-items: center; gap: 0.6em; opacity: 0; transition: opacity 0.35s ease, transform 0.5s var(--ease); white-space: nowrap; box-shadow: var(--shadow-lg); }
.pay-sent i { color: #34d399; }
.pay-sent.show { opacity: 1; transform: translate(-50%, 0); }

/* Scène : demandes */
.req-list { display: flex; flex-direction: column; gap: 0.8em; }
.req { background: var(--surface); border: 1px solid var(--app-line); border-radius: 1.1em; padding: 1em 1.1em; display: grid; grid-template-columns: auto 1fr auto; gap: 1em; align-items: center; transition: border-color 0.35s ease, background-color 0.35s ease, opacity 0.4s ease, transform 0.5s var(--ease); }
.req.hide { opacity: 0; transform: translateY(0.8em); }
.req.ok { border-color: rgba(16, 185, 129, 0.45); background: var(--accent-soft); }
.req-av { display: flex; align-items: center; }
.req-av span { width: 2.6em; height: 2.6em; border-radius: 50%; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 0.15em solid var(--surface); }
.req-av span + span { margin-left: -0.7em; }
.req-txt b { display: block; font-weight: 900; }
.req-txt small { display: block; color: var(--text-muted); font-weight: 700; font-size: 0.86em; }
.req-txt .state { color: var(--accent); font-weight: 800; font-size: 0.86em; display: none; }
.req.ok .req-txt .state { display: block; }
.req.ok .req-act { display: none; }
.req-act { display: flex; gap: 0.5em; }
.req-badge { margin-left: auto; min-width: 1.8em; height: 1.8em; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.6em; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.5em; transition: transform 0.3s var(--ease), background-color 0.3s ease; }
.req-badge.zero { background: var(--accent); }
.req-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4em; margin-top: 1.2em; }
.req-week div { border-radius: 0.6em; padding: 0.5em 0.3em; text-align: center; background: var(--surface); border: 1px solid var(--app-line); font-size: 0.8em; font-weight: 800; color: var(--text-muted); transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; }
.req-week div b { display: block; color: var(--text-main); font-size: 1.15em; }
.req-week div.cp { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4); color: #d97706; }

/* ---------- Application salariés : téléphone 3D ---------- */
.mobile-sec { position: relative; overflow: hidden; padding: var(--section-y) 0; background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.04) 30%, rgba(5, 150, 105, 0.04) 70%, transparent); }
.mobile-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.app-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.app-feats li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; border: 1px solid transparent; transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.5s var(--ease); }
.app-feats li .ic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.app-feats li b { display: block; font-weight: 900; font-size: 1.05em; }
.app-feats li span { color: var(--text-muted); font-weight: 600; font-size: 0.95em; }
.app-feats li.on { background: var(--surface); border-color: var(--border-color); box-shadow: var(--shadow-sm); transform: translateX(6px); }

.p3d-stage { position: relative; height: clamp(560px, 52vw, 860px); display: flex; align-items: center; justify-content: center; perspective: 1600px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.p3d-stage.tient { cursor: grabbing; }
.p3d-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: drift 14s ease-in-out infinite alternate; pointer-events: none; }
.p3d-glow.a { width: 55%; height: 55%; background: rgba(37, 99, 235, 0.45); left: 12%; top: 8%; }
.p3d-glow.b { width: 45%; height: 45%; background: rgba(16, 185, 129, 0.35); right: 6%; bottom: 10%; animation-delay: -6s; }
.p3d-glow.c { width: 30%; height: 30%; background: rgba(168, 85, 247, 0.3); right: 20%; top: 6%; animation-delay: -3s; }
html.dark-mode .p3d-glow { opacity: 0.4; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, -5%) scale(1.12); } }
.p3d-floor { position: absolute; bottom: 6%; left: 50%; width: 44%; height: 6%; transform: translateX(-50%) scaleX(var(--fs, 1)); background: radial-gradient(closest-side, rgba(15, 23, 42, 0.38), transparent); filter: blur(10px); animation: p3dOmbre 6s ease-in-out infinite; }
html.dark-mode .p3d-floor { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent); }
@keyframes p3dOmbre { 50% { opacity: 0.6; } }
.p3d-float { transform-style: preserve-3d; animation: p3dFlotte 6s ease-in-out infinite; }
@keyframes p3dFlotte { 50% { transform: translateY(-14px); } }

/* Téléphone en volume : faces avant/arrière, quatre bords et quatre coins en lamelles (ombrés en direct selon l'angle) */
.p3d {
    --w: clamp(230px, 20vw, 350px); --h: calc(var(--w) * 2.06); --d: calc(var(--w) * 0.1); --r: calc(var(--w) * 0.17);
    --metal-1: hsl(222 10% 30%); --metal-2: hsl(222 12% 74%);
    position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: rotateX(-6deg) rotateY(-24deg); will-change: transform;
}
.p3d > div, .p3d-coin i { position: absolute; }
.p3d-front, .p3d-back, .p3d-edge { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.p3d-front {
    inset: 0; border-radius: var(--r); transform: translateZ(calc(var(--d) / 2)); background: #050608;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 calc(var(--w) * 0.012) #0b0d12;
}
.p3d-back {
    inset: 0; border-radius: var(--r); transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
    background: radial-gradient(120% 70% at 20% 0%, hsl(222 30% 38%), transparent 60%), linear-gradient(155deg, hsl(222 28% 26%), hsl(224 30% 15%) 60%, hsl(222 26% 22%));
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
}
.p3d-cam {
    position: absolute; left: 6%; top: 3%; width: 46%; aspect-ratio: 1; border-radius: 26%;
    background: linear-gradient(145deg, hsl(222 22% 34%), hsl(224 26% 18%));
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.p3d-lens {
    position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, rgba(120, 160, 255, 0.85) 0 7%, transparent 9%), radial-gradient(circle at 60% 64%, rgba(190, 120, 255, 0.45) 0 6%, transparent 8%),
                radial-gradient(circle, #05070c 0 46%, #1b2130 50%, #0a0d14 58%, #6b7385 62%, #2a3040 70%, #12161f 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.p3d-lens.a { left: 6%; top: 6%; }
.p3d-lens.b { left: 6%; bottom: 6%; }
.p3d-lens.c { right: 6%; top: 29%; }
.p3d-flash { position: absolute; right: 13%; top: 9%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff7e0, #e7d6a8 60%, #8a7c5a); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }
.p3d-lidar { position: absolute; right: 14%; bottom: 10%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #20242c, #05060a); }
.p3d-logo { position: absolute; left: 50%; top: 48%; width: 20%; transform: translate(-50%, -50%); opacity: 0.92; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15)); border-radius: 22%; }

.p3d-edge { background: linear-gradient(90deg, var(--metal-1), var(--metal-2) 45%, var(--metal-2) 55%, var(--metal-1)); }
.p3d-edge.l, .p3d-edge.r { top: var(--r); width: var(--d); height: calc(var(--h) - 2 * var(--r)); }
.p3d-edge.l { left: calc(var(--d) / -2); transform: rotateY(-90deg); }
.p3d-edge.r { left: calc(var(--w) - var(--d) / 2); transform: rotateY(90deg); }
.p3d-edge.t, .p3d-edge.b { left: var(--r); width: calc(var(--w) - 2 * var(--r)); height: var(--d); background: linear-gradient(180deg, var(--metal-1), var(--metal-2) 45%, var(--metal-2) 55%, var(--metal-1)); }
.p3d-edge.t { top: calc(var(--d) / -2); transform: rotateX(90deg); }
.p3d-edge.b { top: calc(var(--h) - var(--d) / 2); transform: rotateX(-90deg); display: flex; align-items: center; justify-content: center; gap: 7%; }
.p3d-btn { position: absolute; left: 26%; width: 48%; border-radius: 999px; background: linear-gradient(90deg, hsl(222 10% 40%), hsl(222 12% 82%), hsl(222 10% 40%)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 6px rgba(0, 0, 0, 0.35); }
.p3d-btn.action { top: 6%; height: 7%; }
.p3d-btn.vol1 { top: 18%; height: 13%; }
.p3d-btn.vol2 { top: 34%; height: 13%; }
.p3d-btn.power { top: 22%; height: 19%; }
.p3d-trou { position: absolute; left: 30%; top: 40%; width: 3%; height: 20%; border-radius: 999px; background: #0b0d12; }
.p3d-port { width: 14%; height: 40%; border-radius: 999px; background: #07080b; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.p3d-grille { width: 16%; height: 22%; background: radial-gradient(circle, #0b0d12 45%, transparent 50%) 0 50% / 18% 100% repeat-x; }
.p3d-coin { top: 0; left: 0; width: var(--r); height: var(--r); transform-style: preserve-3d; }
.p3d-coin.tr, .p3d-coin.br { left: calc(var(--w) - var(--r)); }
.p3d-coin.bl, .p3d-coin.br { top: calc(var(--h) - var(--r)); }
.p3d-coin i { inset: 0; background: hsl(222 11% var(--l)); transform: translateZ(calc((var(--i) / 11 - 0.5) * (var(--d) - 1.5px))); }
.p3d-coin.tl i { border-top-left-radius: 100%; }
.p3d-coin.tr i { border-top-right-radius: 100%; }
.p3d-coin.bl i { border-bottom-left-radius: 100%; }
.p3d-coin.br i { border-bottom-right-radius: 100%; }
.p3d-ombre { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 9; }
.p3d-front .p3d-ombre { border-radius: var(--r); }

.p3d-screen {
    position: absolute; inset: calc(var(--w) * 0.038); border-radius: calc(var(--r) - var(--w) * 0.038); overflow: hidden; container-type: inline-size;
    background: linear-gradient(170deg, #eaf0fd 0%, #f6f7fb 40%, #eef6f3 100%);
}
html.dark-mode .p3d-screen { background: linear-gradient(170deg, #0f1a33 0%, #0b1120 50%, #0c1a20 100%); }
.p3d-glare { position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; z-index: 8; background: linear-gradient(var(--ga, 115deg), rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 48%); mix-blend-mode: screen; }
.p3d-hint {
    position: absolute; bottom: 1%; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); color: var(--text-muted); font-weight: 800; font-size: 0.8rem; white-space: nowrap;
    transition: opacity 0.6s ease, transform 0.6s var(--ease);
}
.p3d-hint i { color: var(--primary); animation: p3dHint 2.2s ease-in-out infinite; }
@keyframes p3dHint { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
.p3d-hint.vu { opacity: 0; transform: translate(-50%, 8px); }

.ph { font-size: 4.1cqi; height: 100%; display: flex; flex-direction: column; color: var(--text-main); line-height: 1.25; position: relative; }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 1.1em 1.8em 0.6em; font-weight: 900; font-size: 1.05em; }
.ph-status span:last-child { display: flex; gap: 0.45em; font-size: 0.85em; }
.ph-island { position: absolute; top: 0.85em; left: 50%; transform: translateX(-50%); width: 30%; height: 2.2em; border-radius: 999px; background: #000; z-index: 6; }
.ph-body { flex: 1; overflow: hidden; padding: 0.6em 1em 0; position: relative; }
.ph-scroll { transition: transform 1.4s var(--ease); }
.ph-top { background: rgba(255, 255, 255, 0.75); border: 1px solid var(--app-line); border-radius: 1.3em; padding: 0.8em; display: flex; flex-direction: column; gap: 0.6em; margin-bottom: 1em; }
html.dark-mode .ph-top { background: rgba(19, 28, 46, 0.8); }
.ph-date { text-align: center; font-weight: 800; font-size: 0.82em; padding: 0.7em; border: 1px solid var(--app-line); border-radius: 0.9em; background: var(--surface); }
.ph-nav { display: flex; justify-content: space-between; align-items: center; padding: 0.65em 1.1em; border: 1px solid var(--app-line); border-radius: 999px; background: var(--surface); font-weight: 900; }
.ph-nav i { color: var(--text-muted); font-size: 0.85em; }
.ph-title { font-weight: 900; font-size: 1.1em; margin: 0 0.1em 0.7em; }
.ph-card { background: rgba(255, 255, 255, 0.8); border: 1px solid var(--app-line); border-radius: 1.2em; padding: 0.85em; margin-bottom: 0.75em; transition: border-color 0.4s ease, box-shadow 0.4s ease; }
html.dark-mode .ph-card { background: rgba(19, 28, 46, 0.85); }
.ph-card.me { border: 2px solid var(--primary); }
.ph-card.flash { box-shadow: 0 0 0 0.3em var(--primary-soft); }
.ph-name { font-weight: 900; display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.55em; }
.ph-name i { width: 0.6em; height: 0.6em; border-radius: 50%; display: inline-block; }
.ph-name em { font-style: normal; font-size: 0.72em; background: var(--primary); color: #fff; padding: 0.15em 0.6em; border-radius: 999px; }
.ph-shift { position: relative; border-radius: 0.6em; padding: 0.65em 2.6em 0.65em 0.9em; border-left: 0.3em solid var(--shift-green); background: rgba(132, 204, 22, 0.12); }
.ph-shift + .ph-shift { margin-top: 0.45em; }
.ph-shift b { display: block; font-weight: 900; }
.ph-shift small { color: var(--text-muted); font-weight: 700; font-size: 0.82em; }
.ph-shift em { position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 900; font-size: 0.9em; }
.ph-shift.p { border-color: var(--shift-pink); background: rgba(236, 72, 153, 0.1); }
.ph-shift.repos { border-color: var(--danger); background: var(--danger-soft); padding: 0.75em 0.9em; font-weight: 800; }
.ph-shift.repos i { color: var(--danger); margin-right: 0.5em; }
.ph-tabs { display: flex; justify-content: space-around; padding: 1em 0.6em 1.5em; background: rgba(255, 255, 255, 0.85); border-top: 1px solid var(--app-line); color: var(--app-icon); font-size: 1.15em; backdrop-filter: blur(8px); }
html.dark-mode .ph-tabs { background: rgba(19, 28, 46, 0.9); }
.ph-tabs .on { color: var(--primary); }
.ph-notif {
    position: absolute; top: 3.2em; left: 0.8em; right: 0.8em; z-index: 7; border-radius: 1.4em; padding: 0.85em 1em;
    background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0.8em 2em -0.6em rgba(15, 23, 42, 0.35); display: grid; grid-template-columns: 2.6em 1fr; gap: 0.7em; align-items: center;
    transform: translateY(-160%); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.4s ease;
}
html.dark-mode .ph-notif { background: rgba(30, 41, 59, 0.85); }
.ph-notif.show { transform: none; opacity: 1; }
.ph-notif img { width: 2.6em; height: 2.6em; border-radius: 0.65em; background: #fff; padding: 0.25em; }
.ph-notif .meta { display: flex; justify-content: space-between; font-size: 0.72em; font-weight: 800; color: var(--text-muted); }
.ph-notif b { display: block; font-weight: 900; font-size: 0.92em; }
.ph-notif span { display: block; font-size: 0.82em; font-weight: 600; color: var(--text-muted); line-height: 1.3; }

.p3d-chip {
    position: absolute; background: var(--surface); border: 1px solid var(--border-color); border-radius: 16px; padding: 12px 14px;
    display: flex; gap: 11px; align-items: center; font-weight: 800; font-size: 0.82rem; line-height: 1.3; white-space: nowrap;
    box-shadow: 0 24px 44px -18px rgba(15, 23, 42, 0.4); animation: bob 6s ease-in-out infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.p3d-chip .ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.p3d-chip small { display: block; color: var(--text-muted); font-weight: 700; font-size: 0.74rem; }
.p3d-chip.a { left: -46%; top: 18%; transform: translateZ(90px); }
.p3d-chip.b { right: -52%; top: 46%; transform: translateZ(140px); animation-delay: -2s; }
.p3d-chip.c { left: -38%; bottom: 14%; transform: translateZ(60px); animation-delay: -4s; }
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }

/* ---------- Aussi inclus ---------- */
.also { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-color); }
.also > div { padding: clamp(22px, 2.4vw, 40px) clamp(14px, 2vw, 32px) clamp(22px, 2.4vw, 40px) 0; border-bottom: 1px solid var(--border-color); display: flex; gap: 16px; align-items: flex-start; }
.also > div:not(:nth-child(4n+1)) { padding-left: clamp(14px, 2vw, 32px); border-left: 1px solid var(--border-color); }
.also i { color: var(--primary); font-size: 1.2rem; margin-top: 4px; width: 24px; text-align: center; }
.also b { display: block; font-weight: 900; font-size: 1.05em; margin-bottom: 2px; }
.also span { color: var(--text-muted); font-weight: 600; font-size: 0.93em; }

/* ---------- Démonstration ---------- */
.demo-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 14px; scroll-snap-type: x proximity; justify-content: center; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tab { flex: 0 0 auto; scroll-snap-align: start; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-color); font-weight: 800; font-size: 0.92rem; cursor: pointer; color: var(--text-muted); transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.demo-tab:hover { color: var(--text-main); border-color: var(--border-strong); }
.demo-tab.active { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.demo-tab .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; }
.demo-tab.active .bar { animation: tabProgress var(--dur, 7s) linear forwards; }
.demo.paused .demo-tab.active .bar { animation-play-state: paused; }
@keyframes tabProgress { to { transform: scaleX(1); } }
.demo-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.32fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.browser { width: 100%; max-width: calc((100vh - 190px) * 1.72); justify-self: end; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); overflow: hidden; }
.browser-top { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--border-color); background: var(--surface-2); }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.url { flex: 1; max-width: 360px; margin: 0 auto; text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px 10px; }
.url i { color: var(--accent); margin-right: 6px; }
.screen { position: relative; aspect-ratio: 1917 / 1078; background: var(--surface-2); touch-action: pan-y; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.45s ease, transform 0.6s var(--ease); }
.screen img.hidden { opacity: 0; transform: scale(1.015); }
.demo-text { transition: opacity 0.3s ease; }
.demo-text.fade { opacity: 0; }
.demo-text h3 { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.9rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.4em; }
.demo-text p { color: var(--text-muted); font-weight: 600; }
.demo-nav { display: flex; gap: 8px; margin-top: 22px; }

/* ---------- Tarifs ---------- */
.bill-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px; margin-top: 24px; box-shadow: var(--shadow-sm); }
.bill-toggle button { position: relative; z-index: 1; border: none; background: none; cursor: pointer; font-weight: 800; padding: 10px 26px; border-radius: 999px; color: var(--text-muted); transition: color 0.3s ease; }
.bill-toggle button.on { color: #fff; }
.bill-toggle .knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--primary); box-shadow: 0 6px 16px -6px var(--primary-glow); transition: transform 0.45s var(--ease); }
.bill-toggle.yearly .knob { transform: translateX(100%); }
.pricing { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(16px, 2vw, 32px); align-items: stretch; }
.price-card { background: var(--surface); border: 2px solid var(--primary); border-radius: 28px; padding: clamp(24px, 3vw, 48px); box-shadow: 0 30px 70px -30px var(--primary-glow); position: relative; display: flex; flex-direction: column; }
.trial-flag { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: var(--accent); color: #fff; border-radius: 999px; padding: 7px 14px 7px 8px; font-weight: 900; font-size: 0.92rem; margin-bottom: 22px; }
.trial-flag b { background: rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 2px 9px; }
.price-name { font-weight: 900; font-size: 1.15rem; margin-bottom: 4px; }
.price-sub { color: var(--text-muted); font-weight: 600; margin-bottom: 20px; }
.price-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.price-main .amount { font-size: clamp(3.2rem, 2rem + 3.6vw, 5.4rem); font-weight: 900; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-main .unit { color: var(--text-muted); font-weight: 800; font-size: 1.05rem; }
.price-eq { color: var(--accent); font-weight: 800; font-size: 0.95rem; min-height: 1.5em; }
.price-extra { display: flex; align-items: center; gap: 12px; margin: 14px 0 24px; padding: 14px 16px; border-radius: 14px; background: var(--primary-soft); border: 1px solid var(--primary-line); font-weight: 800; }
.price-extra i { color: var(--primary); font-size: 1.1rem; }
.price-extra span { color: var(--text-muted); font-weight: 700; font-size: 0.88rem; display: block; }
.incl { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; margin-bottom: 28px; }
.incl li { display: flex; gap: 10px; font-weight: 700; font-size: 0.95rem; align-items: baseline; }
.incl li i { color: var(--accent); }
.price-note { text-align: center; color: var(--text-muted); font-weight: 700; font-size: 0.85rem; margin-top: 12px; }
.swap { transition: opacity 0.25s ease, transform 0.35s var(--ease); display: inline-block; }
.swap.out { opacity: 0; transform: translateY(6px); }

.calc { background: var(--surface); border: 1px solid var(--border-color); border-radius: 28px; padding: clamp(24px, 3vw, 44px); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 22px; }
.calc h3 { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; }
.calc > p { color: var(--text-muted); font-weight: 600; margin-top: -14px; }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; margin-bottom: 10px; }
.field label output { font-size: 1.15rem; font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; cursor: pointer; background: linear-gradient(to right, var(--primary) 0 var(--fill, 0%), var(--surface-2) var(--fill, 0%) 100%); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2); transition: transform 0.15s ease; }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); }
.calc-perks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.calc-perks li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 0.92rem; color: var(--text-muted); }
.calc-perks i { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; }
.calc-out { margin-top: auto; border-radius: 18px; background: var(--bg-main); border: 1px solid var(--border-color); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-out div span { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.calc-out div strong { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc-out .total { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
.calc-out .total strong { font-size: 2.2rem; }
.calc-detail { font-size: 0.82rem; color: var(--text-muted); font-weight: 700; }

/* ---------- Secteurs & mise en route ---------- */
.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.5vw, 24px); }
.sector { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 36px); box-shadow: var(--shadow-sm); }
.sector h3 { display: flex; align-items: center; gap: 12px; font-size: 1.12rem; font-weight: 900; margin-bottom: 10px; }
.sector h3 .ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sector p { color: var(--text-muted); font-weight: 600; font-size: 0.95rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); position: relative; margin-top: clamp(40px, 5vw, 80px); counter-reset: step; }
.step { position: relative; padding-top: 20px; }
.step::before { counter-increment: step; content: counter(step); width: 44px; height: 44px; border-radius: 14px; background: var(--primary); color: #fff; font-weight: 900; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--bg-main); }
.steps-line { position: absolute; top: 42px; left: 22px; right: 22px; height: 2px; background: var(--border-color); overflow: hidden; }
.steps-line i { display: block; height: 100%; width: 100%; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease) 0.2s; }
.steps.in .steps-line i { transform: scaleX(1); }
.step h3 { font-size: 1.12rem; font-weight: 900; margin-bottom: 6px; }
.step p { color: var(--text-muted); font-weight: 600; font-size: 0.95rem; max-width: 36ch; }
.step .t { display: inline-block; margin-top: 10px; font-size: 0.82rem; font-weight: 800; color: var(--accent); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.faq-side { position: sticky; top: 100px; }
.faq-side .section-head { margin-bottom: 24px; }
.faq-help { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-color); }
.faq-help .ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.faq-help p { font-weight: 700; font-size: 0.92rem; color: var(--text-muted); }
.faq-help a { color: var(--primary); font-weight: 800; text-decoration: none; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.qa { background: var(--surface); border: 1px solid var(--border-color); border-radius: 16px; transition: border-color 0.25s ease; }
.qa.open { border-color: var(--primary-line); }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 20px 24px; background: none; border: none; cursor: pointer; font-weight: 800; font-size: 1.02rem; }
.qa button i { color: var(--primary); transition: transform 0.35s var(--ease); flex-shrink: 0; }
.qa.open button i { transform: rotate(45deg); }
.qa-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.qa.open .qa-body { grid-template-rows: 1fr; }
.qa-body > div { overflow: hidden; }
.qa-body p { padding: 0 24px 20px; color: var(--text-muted); font-weight: 600; font-size: 0.97rem; }

/* ---------- Appel final ---------- */
.final { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(48px, 7vw, 120px) clamp(22px, 4vw, 64px); background: #0f2a6b; color: #fff; text-align: center;
    background-image: radial-gradient(700px circle at 15% 0%, rgba(59, 130, 246, 0.55), transparent 60%), radial-gradient(600px circle at 90% 100%, rgba(16, 185, 129, 0.35), transparent 60%); }
.final-shifts { position: absolute; inset: 0; pointer-events: none; opacity: 0.2; }
.final-shifts span { position: absolute; height: 26px; border-radius: 7px; animation: slide linear infinite; }
@keyframes slide { from { transform: translateX(-120%); } to { transform: translateX(120vw); } }
.final > *:not(.final-shifts) { position: relative; }
.final h2 { font-size: clamp(1.9rem, 1rem + 3vw, 3.8rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 14px; text-wrap: balance; }
.final p { font-size: 1.1rem; font-weight: 600; opacity: 0.85; max-width: 600px; margin: 0 auto 28px; }
.final .btn-primary { background: #fff; color: #0f2a6b; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5); }
.final .btn-primary:hover { background: #e0e7ff; color: #0f2a6b; }
.final small { display: block; margin-top: 16px; font-weight: 700; opacity: 0.75; }

/* ---------- Footer ---------- */
footer { margin-top: clamp(64px, 7vw, 120px); border-top: 1px solid var(--border-color); padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); }
.foot { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.foot p { color: var(--text-muted); font-weight: 600; font-size: 0.92rem; margin-top: 12px; max-width: 34ch; }
.foot h4 { font-size: 0.95rem; font-weight: 900; margin-bottom: 12px; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.foot a { text-decoration: none; color: var(--text-muted); font-weight: 700; font-size: 0.92rem; transition: color 0.2s ease; }
.foot a:hover { color: var(--primary); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-weight: 700; font-size: 0.86rem; }
.foot-bottom i { color: var(--primary); margin-right: 6px; }

.mobile-cta { display: none; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1050; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; padding: 10px 10px 10px 16px; box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.45); align-items: center; justify-content: space-between; gap: 10px; transform: translateY(140%); transition: transform 0.45s var(--ease); }
.mobile-cta.show { transform: none; }
.mobile-cta div { line-height: 1.2; font-weight: 900; font-size: 0.95rem; }
.mobile-cta div small { display: block; color: var(--text-muted); font-weight: 700; font-size: 0.76rem; }
.mobile-cta .btn { padding: 12px 16px; font-size: 0.9rem; }

/* Réplique : adaptation aux petits conteneurs */
@container (max-width: 780px) {
    .app-side, .tb-date { display: none; }
    .app-ui { font-size: 1.22cqi; }
    .app-main { padding: 1.3em; }
}
@container (max-width: 540px) {
    .app-ui { font-size: 2.1cqi; }
    .app-side, .tb-date, .tb-actions span:not(.send), .app-footer .af-ic, .app-perf { display: none; }
    .app-main { padding: 1.2em; }
    .tb-week { gap: 1.2em; margin: 0 0 0 auto; }
    .app-grid { grid-template-columns: 11.5em repeat(4, minmax(0, 1fr)); }
    .app-grid .d1, .app-grid .d2, .app-grid .d7 { display: none; }
    .ag-shift span, .ag-alert { display: none; }
    .ag-shift b { font-size: 0.78em; }
}
@container (max-width: 560px) {
    .scene { font-size: 2.6cqi; }
    .ms-kpis { grid-template-columns: 1fr 1fr; }
    .ms-kpi:last-child { grid-column: 1 / -1; }
    .pay th:nth-child(4), .pay td:nth-child(4) { display: none; }
    .k-tabs span:not(.on):not(.live) { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .hero { min-height: 0; }
    .hero-grid, .story, .mobile-grid, .demo-layout, .pricing, .faq-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .hero-copy { max-width: 760px; }
    .toast { left: 12px; }
    .kiosk-chip { right: 12px; }
    .story { grid-template-columns: 1fr; }
    .stage-col { display: none; }
    .chapters { padding-left: 0; }
    .chapters-rail { display: none; }
    .chapter { min-height: 0; opacity: 1; padding: 0 0 clamp(48px, 8vw, 80px); }
    .scene-slot { display: block; margin-top: 28px; container-type: inline-size; border-radius: var(--r-xl); background: var(--app-bg); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; }
    .scene-slot .scene { position: relative; opacity: 1; transform: none; min-height: 0; padding: clamp(16px, 4cqi, 40px) clamp(14px, 4cqi, 40px) clamp(28px, 6cqi, 48px); font-size: clamp(9px, 2.1cqi, 15px); }
    .mobile-grid { grid-template-columns: 1fr; }
    .p3d-stage { order: -1; height: clamp(520px, 110vw, 760px); }
    .demo-layout { grid-template-columns: 1fr; }
    .demo-nav { display: none; }
    .pricing { grid-template-columns: 1fr; }
    .faq-grid { grid-template-columns: 1fr; }
    .faq-side { position: static; }
    .also { grid-template-columns: repeat(2, 1fr); }
    .also > div:not(:nth-child(4n+1)) { padding-left: 0; border-left: none; }
    .also > div:nth-child(2n) { padding-left: clamp(14px, 2vw, 32px); border-left: 1px solid var(--border-color); }
    .foot { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .nav-links, .nav-trial { display: none; }
    .burger { display: inline-flex; }
    .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sectors { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; gap: 28px; }
    .steps-line { top: 42px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
    .steps-line i { transform: scaleY(0); transform-origin: 50% 0; }
    .steps.in .steps-line i { transform: scaleY(1); }
    .step { padding-left: 64px; }
    .step::before { position: absolute; left: 0; top: 20px; }
    .demo-tabs { justify-content: flex-start; }
}

@media (max-width: 680px) {
    .nav-inner { height: 62px; gap: 8px; }
    .site-nav.scrolled .nav-inner { height: 58px; }
    .brand { font-size: 1.12rem; gap: 8px; min-width: 0; }
    .brand img { width: 28px; height: 28px; }
    .nav-actions { gap: 6px; }
    .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
    .nav-login { padding: 7px 10px; font-size: 0.8rem; border-radius: 10px; }
    .hero-kicker { font-size: 0.8rem; margin-bottom: 16px; }
    .offer-ticket { max-width: none; }
    .offer-ticket .free { padding: 14px 16px; }
    .offer-ticket .free strong { font-size: 1.75rem; }
    .offer-ticket .then { padding: 12px 14px; }
    .offer-ticket .then .p { font-size: 1.1rem; }
    .hero-cta .btn { flex: 1 1 100%; }
    .hero-assurances { font-size: 0.84rem; }
    .float-card { font-size: 0.74rem; padding: 9px 11px; max-width: 240px; }
    .float-card .ic { width: 30px; height: 30px; }
    .toast { left: 8px; bottom: -44px; }
    .kiosk-chip { display: none; }
    .hero-visual { margin-bottom: 44px; }
    .ticker { padding: 18px 0; }
    .chiffres { gap: 10px; }
    .chiffre { padding: 16px 14px; border-radius: 20px; }
    .chiffre-ic { width: 38px; height: 38px; border-radius: 11px; font-size: 0.95rem; }
    .chiffre-val { margin-top: 12px; gap: 0 6px; }
    .chiffre-val b { font-size: 2.3rem; }
    .chiffre-val small { font-size: 0.9rem; }
    .chiffre-lib { font-size: 0.8rem; }
    .chiffre-fond { font-size: 4.5rem; }
    .p3d-chip { font-size: 0.72rem; padding: 9px 11px; }
    .p3d-chip .ic { width: 30px; height: 30px; }
    .p3d-chip.a { left: -24%; top: 12%; transform: translateZ(40px); }
    .p3d-chip.b { right: -26%; top: 52%; transform: translateZ(60px); }
    .p3d-chip.c { left: -20%; bottom: 8%; transform: translateZ(30px); }
    .p3d { --w: clamp(190px, 52vw, 260px); }
    .app-feats li { padding: 12px; grid-template-columns: 42px 1fr; gap: 12px; }
    .app-feats li .ic { width: 42px; height: 42px; }
    .app-feats li.on { transform: none; }
    .also { grid-template-columns: 1fr; }
    .also > div:nth-child(2n) { padding-left: 0; border-left: none; }
    .browser { border-radius: 16px; }
    .browser-top { padding: 8px 12px; }
    .url { font-size: 0.7rem; }
    .bill-toggle button { padding: 9px 20px; }
    .incl { grid-template-columns: 1fr; }
    .calc-out { padding: 16px; }
    .calc-out .total strong { font-size: 1.8rem; }
    .calc-out div strong { font-size: 1.25rem; }
    .final { border-radius: 24px; }
    .final .btn { width: 100%; }
    .foot { gap: 28px 20px; }
    .foot > div:first-child { grid-column: 1 / -1; }
    footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    .mobile-cta { display: flex; }
}

@media (max-width: 360px) {
    .nav-login { display: none; }
    .offer-ticket { flex-direction: column; }
    .offer-ticket .then { border-left: none; border-top: 2px dashed var(--border-strong); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .reveal { opacity: 1; transform: none; }
    .ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
    .final-shifts { display: none; }
}

/* ---------- Offre « changement de logiciel » ---------- */
:root { --violet: #7c3aed; --violet-soft: rgba(124, 58, 237, 0.09); --violet-line: rgba(124, 58, 237, 0.28); }
html.dark-mode { --violet: #a78bfa; --violet-soft: rgba(167, 139, 250, 0.13); --violet-line: rgba(167, 139, 250, 0.34); }
.bandeau-offre { display: block; text-decoration: none; background: linear-gradient(90deg, #4c1d95, #1d4ed8); color: #fff; font-weight: 800; font-size: 0.9rem; }
.bandeau-offre .wrap { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding-top: 8px; padding-bottom: 8px; text-align: center; flex-wrap: wrap; }
.bandeau-offre b { background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 2px 10px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; }
.bandeau-offre u { text-underline-offset: 3px; white-space: nowrap; }
.bandeau-offre:hover u { text-decoration-thickness: 2px; }
.switch-chip { display: flex; align-items: center; gap: 12px; max-width: 500px; margin: -12px 0 26px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--violet-soft); border: 1px solid var(--violet-line); text-decoration: none; transition: transform 0.2s var(--ease), border-color 0.2s; }
.switch-chip:hover { transform: translateY(-2px); border-color: var(--violet); }
.switch-chip > i:first-child { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--violet); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.switch-chip span { font-size: 0.92rem; font-weight: 700; color: var(--text-muted); line-height: 1.35; }
.switch-chip strong { color: var(--text-main); display: block; font-weight: 900; }
.switch-chip .fa-arrow-right { margin-left: auto; color: var(--violet); }
.nav-links a.nav-offre { color: var(--violet); }
.nav-links a.nav-offre:hover { background: var(--violet-soft); color: var(--violet); }

.switch { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(26px, 4vw, 64px);
    border-radius: 32px; background: var(--surface); border: 1.5px solid var(--violet-line); box-shadow: 0 30px 80px -40px rgba(124, 58, 237, 0.45); position: relative; overflow: hidden; }
.switch::before { content: ''; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, var(--violet-soft), transparent); pointer-events: none; }
.switch-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); background: var(--violet-soft); border-radius: 999px; padding: 6px 14px; font-weight: 900; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 18px; }
.switch h2 { font-size: clamp(1.8rem, 1rem + 2.2vw, 3.2rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 900; margin-bottom: 0.5em; text-wrap: balance; }
.switch h2 span { color: var(--violet); }
.switch-copy p { color: var(--text-muted); font-weight: 600; font-size: clamp(1rem, 0.92rem + 0.25vw, 1.15rem); margin-bottom: 1.4em; max-width: 38em; }
.switch-copy p strong { color: var(--text-main); }
.btn-violet { background: var(--violet); color: #fff; box-shadow: 0 10px 24px -8px rgba(124, 58, 237, 0.55); }
.btn-violet:hover { filter: brightness(1.08); transform: translateY(-1px); }
.simu { position: relative; background: var(--surface-2); border: 1px solid var(--border-color); border-radius: 24px; padding: clamp(20px, 2.4vw, 32px); }
.simu h3 { font-size: 1.05rem; font-weight: 900; margin-bottom: 4px; }
.simu > p { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; margin-bottom: 18px; }
.simu label { display: flex; justify-content: space-between; font-weight: 800; font-size: 0.92rem; margin-bottom: 8px; }
.simu output { color: var(--violet); font-weight: 900; }
.simu input[type=range] { width: 100%; accent-color: var(--violet); margin-bottom: 20px; }
.simu-frise { display: flex; height: 46px; border-radius: 12px; overflow: hidden; font-size: 0.74rem; font-weight: 900; color: #fff; margin-bottom: 8px; }
.simu-frise span { display: flex; align-items: center; justify-content: center; padding: 0 6px; white-space: nowrap; overflow: hidden; transition: flex-grow 0.45s var(--ease); }
.simu-frise .e { flex: 0 0 64px; background: var(--accent); }
.simu-frise .o { background: var(--violet); }
.simu-frise .a { background: var(--primary); }
.simu-legende { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 18px; }
.simu-res { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.simu-res div { background: var(--surface); border: 1px solid var(--border-color); border-radius: 16px; padding: 14px 16px; }
.simu-res strong { display: block; font-size: 1.7rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--violet); }
.simu-res span { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.switch-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(22px, 3vw, 36px); counter-reset: sw; }
.switch-steps li { counter-increment: sw; background: var(--surface); border: 1px solid var(--border-color); border-radius: 20px; padding: 20px; box-shadow: var(--shadow-sm); }
.switch-steps li::before { content: counter(sw); display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: var(--violet-soft); color: var(--violet); font-weight: 900; margin-bottom: 10px; }
.switch-steps h3 { font-size: 1rem; font-weight: 900; margin-bottom: 4px; }
.switch-steps p { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }
.switch-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 14px 18px; border-radius: 16px; background: var(--primary-soft); border: 1px solid var(--primary-line); font-weight: 700; font-size: 0.92rem; color: var(--text-main); }
.switch-note i { color: var(--primary); margin-top: 4px; }
.price-switch { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--violet-soft); color: var(--text-main); font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.price-switch i { color: var(--violet); }
.price-switch u { color: var(--violet); text-underline-offset: 3px; margin-left: auto; white-space: nowrap; }
.drawer-offer .switch-mini { font-size: 0.85rem; color: var(--violet); font-weight: 800; text-decoration: none; display: flex; gap: 8px; align-items: center; }
@media (max-width: 1100px) {
    .switch { grid-template-columns: 1fr; }
    .switch-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .bandeau-offre { font-size: 0.82rem; }
    .bandeau-offre b { display: none; }
    .switch { border-radius: 24px; padding: 22px 18px; }
    .switch-steps { grid-template-columns: 1fr; }
    .switch-chip { margin-top: -8px; }
    .simu-res strong { font-size: 1.4rem; }
}
    

/* ---------- Pourquoi PlanningPro : comparaison ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 6px 14px; font-weight: 900; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
/* Cartes retournables : PlanningPro au recto, les logiciels habituels au verso */
.vs-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; }
.vs-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.vs-switch button {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: 0; background: none;
    border-radius: 999px; font: inherit; font-weight: 900; font-size: 0.95rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: color 0.4s ease;
}
.vs-switch button img { border-radius: 6px; }
.vs-switch button.on { color: #fff; }
.vs-pill {
    position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), #7c3aed); box-shadow: 0 10px 24px -10px var(--primary-glow); transition: transform 0.6s var(--ease), background 0.6s ease;
}
.vs.vue-eux .vs-pill { transform: translateX(100%); background: linear-gradient(135deg, #64748b, #334155); box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.5); }
.vs-astuce { color: var(--text-muted); font-weight: 700; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 8px; }
.vs-astuce i { animation: vsTap 2.4s ease-in-out infinite; color: var(--primary); }
@keyframes vsTap { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-3px) scale(1.1); } 80% { transform: translateY(1px) scale(0.92); } }

.vs-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vs-card { perspective: 1400px; transition: transform 0.5s var(--ease); }
.vs-card:hover { transform: translateY(-4px); }
.vs-inner {
    display: grid; width: 100%; height: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
    transform-style: preserve-3d; transition: transform 0.85s var(--ease); -webkit-tap-highlight-color: transparent;
}
.vs-card.flip .vs-inner { transform: rotateY(180deg); }
.vs.vague .vs-inner { transition-delay: calc(var(--k) * 55ms); }
.vs.in .vs-inner { animation: vsHint 1.2s var(--ease) calc(0.6s + var(--k) * 90ms); }
@keyframes vsHint { 0%, 100% { transform: rotateY(0); } 35% { transform: rotateY(-24deg); } }
.vs-inner:focus-visible { outline: none; }
.vs-inner:focus-visible .vs-face { box-shadow: 0 0 0 3px var(--primary-line); }
.vs-face {
    grid-area: 1 / 1; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 12px; min-height: 196px;
    padding: 22px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.vs-nous { background: var(--surface); border: 1px solid var(--primary-line); box-shadow: var(--shadow-sm); }
.vs-nous::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.4s ease;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--primary-soft), transparent 70%);
}
.vs-card:hover .vs-nous::before { opacity: 1; }
.vs-nous::after { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--primary), #7c3aed, var(--accent)); }
.vs-eux { transform: rotateY(180deg); background: var(--surface-2); border: 1px dashed var(--border-strong); }
.vs-top { display: flex; align-items: center; gap: 12px; }
.vs-ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--primary), #7c3aed); box-shadow: 0 8px 18px -8px var(--primary-glow); }
.vs-eux .vs-ic { background: var(--border-strong); color: var(--text-muted); box-shadow: none; }
.vs-sujet { font-weight: 900; font-size: 1.04rem; line-height: 1.2; }
.vs-tour { margin-left: auto; color: var(--text-muted); opacity: 0.55; font-size: 0.85rem; transition: transform 0.6s var(--ease), opacity 0.3s ease; }
.vs-card:hover .vs-tour { transform: rotate(180deg); opacity: 1; color: var(--primary); }
.vs-texte { flex: 1; font-weight: 800; font-size: 1.04rem; line-height: 1.45; }
.vs-eux .vs-texte { color: var(--text-muted); font-weight: 700; }
.vs-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-weight: 900; font-size: 0.78rem; }
.vs-badge.ok { color: var(--accent); background: var(--accent-soft); }
.vs-badge.ko { color: var(--danger); background: var(--danger-soft); }
.diff-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.diff-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: 22px; padding: 24px; box-shadow: var(--shadow-sm); }
.diff-card .ic, .cat-bloc h3 .ic, .th-atout .ic { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; }
.diff-card .ic { margin-bottom: 14px; }
.diff-card h3 { font-size: 1.08rem; font-weight: 900; margin-bottom: 8px; line-height: 1.25; }
.diff-card p { color: var(--text-muted); font-weight: 600; font-size: 0.93rem; }

/* ---------- Tout est inclus ---------- */
.catalogue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cat-bloc { background: var(--surface); border: 1px solid var(--border-color); border-radius: 22px; padding: 22px 24px; box-shadow: var(--shadow-sm); }
.cat-bloc h3 { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 900; margin-bottom: 14px; }
.cat-bloc ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cat-bloc li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-muted); font-weight: 700; font-size: 0.93rem; }
.cat-bloc li i { color: var(--accent); margin-top: 4px; font-size: 0.8rem; }
.sector-liens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.sector-liens a { color: var(--primary); font-weight: 800; text-decoration: none; font-size: 0.9rem; }
.sector-liens a:hover { text-decoration: underline; }
.sector-liens i { font-size: 0.75rem; }

/* ---------- Pages thématiques ---------- */
.fil { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-size: 0.88rem; font-weight: 700; color: var(--text-muted); margin-bottom: 18px; }
.fil a { color: var(--text-muted); text-decoration: none; }
.fil a:hover { color: var(--primary); }
.fil li + li::before { content: '/'; margin-right: 8px; opacity: 0.5; }
.th-hero { padding: clamp(36px, 5vw, 80px) 0 clamp(28px, 4vw, 56px); }
.th-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.th-hero h1 { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 900; margin-bottom: 0.45em; text-wrap: balance; }
.th-hero .lead { font-size: clamp(1.02rem, 0.92rem + 0.3vw, 1.2rem); color: var(--text-muted); font-weight: 600; margin-bottom: 1.4em; max-width: 42em; }
.th-badge { aspect-ratio: 1; max-width: 300px; justify-self: center; width: 100%; border-radius: 40px; background: linear-gradient(140deg, var(--primary), #7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-size: clamp(4rem, 9vw, 7rem); box-shadow: 0 40px 80px -40px var(--primary-glow); transform: rotate(-4deg); }
.th-atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.th-atout { background: var(--surface); border: 1px solid var(--border-color); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-sm); }
.th-atout .ic { margin-bottom: 12px; }
.th-atout h3 { font-size: 1.02rem; font-weight: 900; margin-bottom: 6px; }
.th-atout p { color: var(--text-muted); font-weight: 600; font-size: 0.92rem; }
.th-sections { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 52px); max-width: 980px; }
.th-section h2 { font-size: clamp(1.45rem, 1rem + 1.3vw, 2.2rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 900; margin-bottom: 0.5em; }
.th-section p { color: var(--text-muted); font-weight: 600; font-size: 1.04rem; margin-bottom: 14px; }
.th-section ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 20px; }
.th-section li { display: flex; gap: 10px; align-items: flex-start; font-weight: 800; }
.th-section li i { color: var(--accent); margin-top: 5px; font-size: 0.85rem; }
.th-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.th-liens a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); text-decoration: none; font-weight: 800; font-size: 0.92rem; }
.th-liens a:hover { border-color: var(--primary); color: var(--primary); }

@media (max-width: 1100px) {
    .diff-cards, .th-atouts, .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .vs-grid { grid-template-columns: 1fr; gap: 12px; }
    .vs-face { min-height: 0; padding: 18px; gap: 10px; }
    .vs-texte { font-size: 0.98rem; }
    .vs-switch button { padding: 10px 16px; font-size: 0.88rem; }
    .diff-cards, .catalogue, .th-atouts { grid-template-columns: 1fr; }
    .th-hero .wrap { grid-template-columns: 1fr; }
    .th-badge { display: none; }
}
/* =========================================================
   BLOG (/blog) : listes, vignettes, article
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.blog { --c2: color-mix(in srgb, var(--c1, #2563eb) 55%, #7c3aed); }

/* --- En-tête des listes --- */
.bl-hero { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 76px) 0 clamp(28px, 3vw, 44px); }
.bl-hero::before { content: ''; position: absolute; inset: -40% -10% auto; height: 120%; z-index: -1;
    background: radial-gradient(50% 60% at 15% 30%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 70%),
                radial-gradient(40% 50% at 85% 10%, color-mix(in srgb, #7c3aed 12%, transparent), transparent 70%); }
.bl-hero h1 { font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 900; max-width: 15ch; margin: 10px 0 0.35em; text-wrap: balance; }
.bl-hero .lead { font-size: clamp(1.02rem, 0.92rem + 0.35vw, 1.22rem); color: var(--text-muted); font-weight: 600; max-width: 60ch; margin-bottom: 26px; }
.bl-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--c1); background: color-mix(in srgb, var(--c1) 11%, transparent); }
.bl-hero-deco { position: absolute; right: clamp(-40px, 2vw, 60px); top: 50%; transform: translateY(-50%); width: min(38vw, 460px); aspect-ratio: 1; pointer-events: none; z-index: -1; }
.bl-hero-deco i { position: absolute; display: grid; place-items: center; border-radius: 28%; color: #fff; box-shadow: 0 24px 50px -22px var(--c1); animation: blFlotte 7s ease-in-out infinite; }
.bl-hero-deco i:nth-child(1) { width: 34%; height: 34%; left: 38%; top: 8%; font-size: clamp(2rem, 4vw, 3.6rem); background: linear-gradient(135deg, var(--c1), var(--c2)); }
.bl-hero-deco i:nth-child(2) { width: 22%; height: 22%; left: 10%; top: 42%; font-size: clamp(1.2rem, 2.4vw, 2.1rem); background: linear-gradient(135deg, #7c3aed, #a855f7); animation-delay: -2s; }
.bl-hero-deco i:nth-child(3) { width: 20%; height: 20%; left: 70%; top: 50%; font-size: clamp(1.1rem, 2.2vw, 1.9rem); background: linear-gradient(135deg, #059669, #10b981); animation-delay: -4s; }
.bl-hero-deco i:nth-child(4) { width: 18%; height: 18%; left: 42%; top: 72%; font-size: clamp(1rem, 2vw, 1.7rem); background: linear-gradient(135deg, #ea580c, #f59e0b); animation-delay: -1s; }
@keyframes blFlotte { 50% { transform: translateY(-12px) rotate(-4deg); } }
.bl-recherche { position: relative; display: flex; align-items: center; gap: 8px; max-width: 640px; padding: 6px 6px 6px 18px; border-radius: 18px;
    background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.bl-recherche:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-lg); }
.bl-recherche > i { color: var(--text-muted); }
.bl-recherche input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 1rem; color: var(--text-main); padding: 10px 4px; outline: none; }
.bl-recherche .btn { padding: 11px 18px; border-radius: 13px; }

/* --- Thèmes (puces) --- */
.bl-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2.4vw, 32px); }
.bl-cat { --c1: var(--primary); flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 0.9rem;
    color: var(--text-main); background: var(--surface); border: 1px solid var(--border-color); transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.3s var(--ease); }
.bl-cat i { color: var(--c1); }
.bl-cat span { font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.bl-cat:hover { border-color: var(--c1); transform: translateY(-2px); }
.bl-cat.on { background: var(--c1); border-color: var(--c1); color: #fff; }
.bl-cat.on i { color: #fff; }
.bl-cat.on span { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* --- Grilles et vignettes --- */
.bl-section { padding-bottom: clamp(40px, 5vw, 80px); }
.bl-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); }
.bl-carte { --c1: var(--primary); display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border-color);
    border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), box-shadow 0.4s ease, border-color 0.3s ease; }
.bl-carte:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c1) 55%, transparent); border-color: color-mix(in srgb, var(--c1) 35%, transparent); }
.bl-carte-corps { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.bl-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-weight: 900; font-size: 0.76rem;
    color: var(--c1, var(--primary)); background: color-mix(in srgb, var(--c1, var(--primary)) 11%, transparent); text-decoration: none; }
.bl-pill .fa-circle { font-size: 0.45rem; }
.bl-carte-titre { font-size: 1.18rem; line-height: 1.25; font-weight: 900; letter-spacing: -0.015em; text-wrap: balance; }
.bl-carte-extrait { color: var(--text-muted); font-weight: 600; font-size: 0.93rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-carte-meta { margin-top: auto; padding-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-muted); font-weight: 700; font-size: 0.82rem; }
.bl-lire { margin-left: auto; color: var(--c1); font-weight: 900; display: inline-flex; gap: 6px; align-items: center; }
.bl-lire i { transition: transform 0.4s var(--ease); }
.bl-carte:hover .bl-lire i { transform: translateX(4px); }

/* Couverture : image envoyée, sinon illustration générée aux couleurs du thème */
.couv { --c1: inherit; position: relative; aspect-ratio: 1200 / 630; overflow: hidden; isolation: isolate;
    background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 45%, #7c3aed)); }
.couv > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); }
.bl-carte:hover .couv > img { transform: scale(1.04); }
.couv-motif { position: absolute; inset: 0; z-index: -1; opacity: 0.5;
    background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1.2px, transparent 1.4px); background-size: 18px 18px;
    mask-image: linear-gradient(120deg, transparent 10%, #000 70%); -webkit-mask-image: linear-gradient(120deg, transparent 10%, #000 70%); }
.couv::before, .couv::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; }
.couv::before { width: 70%; aspect-ratio: 1; right: -18%; top: -40%; background: rgba(255, 255, 255, 0.12); }
.couv::after { width: 46%; aspect-ratio: 1; left: -12%; bottom: -46%; background: rgba(15, 23, 42, 0.16); }
.couv-v1::before { right: auto; left: -20%; top: -30%; }
.couv-v1::after { left: auto; right: -10%; bottom: -40%; }
.couv-v2 { background: linear-gradient(200deg, var(--c1), color-mix(in srgb, var(--c1) 40%, #0f172a)); }
.couv-v3 { background: linear-gradient(150deg, color-mix(in srgb, var(--c1) 70%, #fff), var(--c1) 60%); }
.couv-ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%) rotate(-6deg); width: 32%; aspect-ratio: 1; border-radius: 28%; display: grid; place-items: center;
    color: var(--c1); background: rgba(255, 255, 255, 0.94); font-size: clamp(1.8rem, 3.4vw, 3.2rem); box-shadow: 0 26px 50px -18px rgba(15, 23, 42, 0.5); transition: transform 0.7s var(--ease); }
.bl-carte:hover .couv-ic { transform: translate(-50%, -58%) rotate(0deg) scale(1.05); }
.couv-marque { position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 900; font-size: 0.78rem; opacity: 0.92; }
.couv-marque img { border-radius: 5px; background: #fff; padding: 1px; }
.couv-titre { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; color: #fff; font-weight: 900; font-size: clamp(1rem, 0.6rem + 1.4vw, 1.8rem); letter-spacing: -0.02em; text-transform: capitalize; padding: 0 20px; }

/* Article à la une */
.bl-une { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-bottom: clamp(18px, 2vw, 30px); }
.bl-une .couv { aspect-ratio: auto; min-height: 100%; }
.bl-une .bl-carte-corps { padding: clamp(22px, 3vw, 44px); justify-content: center; gap: 14px; }
.bl-une .bl-carte-titre { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem); }
.bl-une .bl-carte-extrait { -webkit-line-clamp: 4; font-size: 1rem; }
.bl-une .couv-ic { width: 26%; }

.bl-resultats { margin-bottom: 18px; font-weight: 700; color: var(--text-muted); }
.bl-vide { text-align: center; padding: 60px 20px; color: var(--text-muted); font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bl-vide i { font-size: 2.2rem; color: var(--primary); }
.bl-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.bl-pages a { min-width: 42px; height: 42px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
    font-weight: 800; background: var(--surface); border: 1px solid var(--border-color); }
.bl-pages a.on, .bl-pages a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Thèmes */
.bl-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.bl-theme { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease), border-color 0.3s ease; }
.bl-theme::after { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--c1) 10%, transparent); transition: transform 0.6s var(--ease); }
.bl-theme:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c1) 40%, transparent); }
.bl-theme:hover::after { transform: scale(1.6); }
.bl-theme-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 50%, #7c3aed)); margin-bottom: 4px; }
.bl-theme h3 { font-size: 1.1rem; font-weight: 900; }
.bl-theme p { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; flex: 1; }
.bl-theme-n { font-weight: 900; font-size: 0.85rem; color: var(--c1); display: inline-flex; gap: 6px; align-items: center; }

/* --- Article --- */
.ar-progression { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 2000; pointer-events: none; }
.ar-progression span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--primary), #7c3aed, #059669); }
.ar-brouillon { text-align: center; padding: 10px 16px; font-weight: 800; font-size: 0.9rem; background: #fef3c7; color: #92400e; }
.ar-brouillon.ok { background: var(--primary-soft); color: var(--primary); }
.ar-brouillon a { color: inherit; }
.ar-hero { position: relative; padding: clamp(28px, 4vw, 60px) 0 0; }
.ar-hero::before { content: ''; position: absolute; inset: 0 0 30%; z-index: -1;
    background: radial-gradient(60% 80% at 20% 0%, color-mix(in srgb, var(--c1) 14%, transparent), transparent 70%); }
.ar-hero-in { max-width: 980px; }
.ar-hero h1 { font-size: clamp(2rem, 1.1rem + 2.9vw, 3.5rem); line-height: 1.07; letter-spacing: -0.035em; font-weight: 900; margin: 14px 0 0.4em; text-wrap: balance; }
.ar-chapo { font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.55; color: var(--text-muted); font-weight: 600; max-width: 62ch; }
.ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 24px 0 clamp(24px, 3vw, 38px); font-size: 0.9rem; color: var(--text-muted); font-weight: 700; }
.ar-auteur-mini { display: inline-flex; align-items: center; gap: 10px; }
.ar-auteur-mini img { border-radius: 10px; background: #fff; padding: 3px; border: 1px solid var(--border-color); }
.ar-auteur-mini b { display: block; color: var(--text-main); font-weight: 900; }
.ar-lecture { display: inline-flex; gap: 7px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-color); }
.ar-couv { border-radius: 28px; aspect-ratio: 1200 / 400; box-shadow: var(--shadow-lg); }
.ar-couv .couv-ic { width: 17%; }

.ar-grille { display: grid; grid-template-columns: 290px minmax(0, 760px); justify-content: center; gap: clamp(32px, 4vw, 72px); padding-top: clamp(32px, 4vw, 60px); padding-bottom: clamp(40px, 5vw, 80px); }
.ar-cote { position: relative; }
/* Sommaire et encart d'essai collés ensemble : ils défilent d'un bloc, sans jamais se chevaucher */
.ar-cote-in { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 116px); }
.ar-sommaire { flex: 0 1 auto; min-height: 0; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-color); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; overscroll-behavior: contain; }
.ar-sommaire::-webkit-scrollbar { width: 6px; }
.ar-sommaire::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
.ar-sommaire::-webkit-scrollbar-track { background: transparent; }
.ar-sommaire-titre { font-weight: 900; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.ar-sommaire ol, .ar-sommaire-mobile ol { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 2px; }
.ar-sommaire li, .ar-sommaire-mobile li { counter-increment: s; }
.ar-sommaire a, .ar-sommaire-mobile a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 0.88rem; line-height: 1.35; color: var(--text-muted); transition: background-color 0.2s ease, color 0.2s ease; }
.ar-sommaire a::before, .ar-sommaire-mobile a::before { content: counter(s, decimal-leading-zero); font-weight: 900; color: var(--c1); font-variant-numeric: tabular-nums; }
.ar-sommaire a:hover, .ar-sommaire a.on { background: color-mix(in srgb, var(--c1) 10%, transparent); color: var(--text-main); }
.ar-cta-cote { flex: none; padding: 20px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, #1d4ed8, #6d28d9); box-shadow: 0 30px 60px -30px rgba(79, 70, 229, 0.6); }
.ar-cta-cote img { background: #fff; border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.ar-cta-cote p { font-size: 0.9rem; font-weight: 600; opacity: 0.92; margin-bottom: 12px; }
.ar-cta-cote p b { font-size: 1.02rem; opacity: 1; }
.ar-cta-cote .btn { background: #fff; color: #1d4ed8; }
.ar-sommaire-mobile { display: none; margin-bottom: 26px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-color); }
.ar-sommaire-mobile summary { cursor: pointer; padding: 14px 16px; font-weight: 900; list-style: none; display: flex; gap: 10px; align-items: center; }
.ar-sommaire-mobile summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: 0.8rem; transition: transform 0.3s ease; }
.ar-sommaire-mobile[open] summary::after { transform: rotate(180deg); }
.ar-sommaire-mobile ol { padding: 0 8px 12px; }

/* Typographie de l'article */
.prose { font-size: clamp(1.04rem, 1rem + 0.15vw, 1.13rem); line-height: 1.78; color: color-mix(in srgb, var(--text-main) 88%, var(--text-muted)); font-weight: 500; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.05rem); line-height: 1.2; letter-spacing: -0.025em; font-weight: 900; color: var(--text-main); margin-top: 2.1em; scroll-margin-top: 100px; position: relative; }
.prose h2::before { content: ''; position: absolute; left: -22px; top: 0.25em; bottom: 0.25em; width: 5px; border-radius: 4px; background: linear-gradient(var(--c1), var(--c2)); }
.prose h3 { font-size: clamp(1.18rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.3; font-weight: 900; color: var(--text-main); margin-top: 1.7em; scroll-margin-top: 100px; }
.prose h4 { font-size: 1.05rem; font-weight: 900; color: var(--text-main); margin-top: 1.4em; }
.prose strong { color: var(--text-main); font-weight: 800; }
.prose a { color: var(--primary); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.prose a:hover { text-decoration-color: var(--primary); }
.prose a[target="_blank"]::after { content: '\f35d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.65em; margin-left: 4px; vertical-align: 2px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.45em; }
.prose ul li::marker { color: var(--c1); }
.prose ol li::marker { color: var(--c1); font-weight: 900; }
.prose code { font-size: 0.9em; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border-color); }
.prose blockquote { padding: 18px 22px; border-left: 4px solid var(--c1); border-radius: 0 16px 16px 0; background: color-mix(in srgb, var(--c1) 7%, transparent); font-size: 1.08em; font-weight: 700; color: var(--text-main); }
.prose hr { border: 0; height: 1px; background: var(--border-strong); margin: 2.4em 0; }
.prose .fig img { width: 100%; border-radius: 18px; border: 1px solid var(--border-color); }
.prose figcaption { text-align: center; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; margin-top: 8px; }
.prose .tableau { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.93em; line-height: 1.5; min-width: 480px; }
.prose th { text-align: left; font-weight: 900; color: var(--text-main); background: color-mix(in srgb, var(--c1) 9%, var(--surface)); padding: 12px 16px; }
.prose td { padding: 11px 16px; border-top: 1px solid var(--border-color); background: var(--surface); }
.prose tbody tr:nth-child(even) td { background: var(--surface-2); }
.encart { --e: var(--primary); padding: 18px 22px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--e) 28%, transparent); background: color-mix(in srgb, var(--e) 7%, var(--surface)); }
.encart > * + * { margin-top: 0.7em; }
.encart-titre { font-weight: 900; color: var(--e); display: flex; align-items: center; gap: 9px; font-size: 0.98em; }
.encart-astuce { --e: #059669; }
.encart-attention { --e: #dc2626; }
.encart-info { --e: #2563eb; }
.encart-exemple { --e: #7c3aed; }
.encart-retenir { --e: #ea580c; }
.encart-loi { --e: #0f766e; }
.cta-blog { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #7c3aed); box-shadow: 0 30px 60px -30px rgba(79, 70, 229, 0.6); }
.cta-blog p { margin: 0; font-size: 0.95rem; opacity: 0.92; }
.cta-blog .cta-titre { font-weight: 900; font-size: 1.12rem; opacity: 1; margin-bottom: 4px; }
.prose .cta-btn { flex: none; display: inline-flex; gap: 8px; align-items: center; padding: 12px 18px; border-radius: 14px; background: #fff; color: #1d4ed8; text-decoration: none; font-weight: 900; white-space: nowrap; }
.prose .cta-btn::after { display: none; }
.faq-blog { display: flex; flex-direction: column; gap: 10px; }
.faq-q { border-radius: 16px; border: 1px solid var(--border-color); background: var(--surface); overflow: hidden; }
.faq-q summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 900; color: var(--text-main); display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--c1); background: color-mix(in srgb, var(--c1) 10%, transparent); transition: transform 0.3s ease; }
.faq-q[open] summary::after { transform: rotate(45deg); }
.faq-q > div { padding: 0 18px 16px; }
.ar-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.ar-tags li { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-weight: 800; font-size: 0.8rem; }
.ar-partage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-color); }
.ar-partage > span { font-weight: 900; margin-right: 6px; }
.ar-partage a, .ar-partage button { height: 42px; min-width: 42px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border-color); color: var(--text-main); text-decoration: none; font: inherit; font-weight: 800; font-size: 0.88rem; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, transform 0.3s var(--ease); }
.ar-partage a:hover, .ar-partage button:hover { border-color: var(--c1); color: var(--c1); transform: translateY(-2px); }
.ar-partage button.ok { border-color: var(--accent); color: var(--accent); }
.ar-auteur { display: flex; gap: 16px; align-items: flex-start; margin-top: 28px; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-color); }
.ar-auteur img { border-radius: 14px; background: #fff; padding: 4px; border: 1px solid var(--border-color); flex: none; }
.ar-auteur-nom { font-weight: 900; margin-bottom: 4px; }
.ar-auteur p:not(.ar-auteur-nom) { color: var(--text-muted); font-weight: 600; font-size: 0.92rem; }
.ar-avert { margin-top: 18px; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; display: flex; gap: 8px; }
.ar-avert i { margin-top: 3px; }
.bl-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .bl-grille, .bl-grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ar-grille { grid-template-columns: minmax(0, 760px); }
    .ar-cote { display: none; }
    .ar-sommaire-mobile { display: block; }
    .bl-hero-deco { opacity: 0.35; }
    .prose h2::before { left: -14px; }
}
@media (max-width: 760px) {
    .bl-grille, .bl-grille-3, .bl-une { grid-template-columns: 1fr; }
    .bl-une .couv { aspect-ratio: 1200 / 630; min-height: 0; }
    .bl-hero-deco { display: none; }
    .bl-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
    .bl-cats::-webkit-scrollbar { display: none; }
    .bl-recherche { padding-left: 14px; }
    .bl-recherche .btn { padding: 10px 12px; font-size: 0.85rem; }
    .ar-couv { border-radius: 20px; aspect-ratio: 16 / 9; }
    .ar-couv .couv-ic { width: 26%; }
    .prose h2::before { display: none; }
    .cta-blog { flex-direction: column; align-items: flex-start; }
    .ar-partage > span { width: 100%; }
    .ar-partage button span { display: none; }
}