/* ==========================================================================
   PredictNeed IA — Systeme visuel public
   --------------------------------------------------------------------------
   Feuille autonome. N'herite d'aucune regle de style.css.
   Portee : pages publiques uniquement (hors /dashboard/).

   Reference : design-system/predictneed-ia/MASTER.md
   Genere via UI/UX Pro Max — categorie "B2B Service"
     - Palette      : Professional navy + blue CTA (encre #0F172A / signal #0369A1)
     - Style socle  : minimalism-and-swiss-style
     - Styles       : data-dense-dashboard (mises en scene de donnee)
       secondaires    dimensional-layering (elevation par l'ombre, sans flou)
                      editorial-grid-magazine (colonne de lecture)
     - Motion       : 3/10 — Subtle (scroll reveal, y 8-16px)
     - Density      : 4/10 — Standard

   Ecarts assumes par rapport a MASTER.md, et pourquoi :
     - Rayons ramenes a 2/4/8px au lieu de 8/12/16px. Le systeme precedent
       etait sature de pilules (53 occurrences de 999px) : des angles francs
       marquent la rupture et servent la rigueur suisse.
     - Ajout d'IBM Plex Mono. MASTER ne prescrit qu'Inter ; le mono porte le
       langage de la donnee (scores, deltas, UTM) et evite d'avoir a colorer
       pour signifier "c'est une mesure".
     - Instrument Sans en titrage. MASTER prescrit Inter partout ; Inter seul
       manque de caractere en grand corps.
     - Pas de backdrop-filter sur la modale (MASTER en propose un). Le flou
       appartient au langage glassmorphism ecarte.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* --- Encre : la couleur dominante de la marque --- */
    --pn-ink-950: #020617;
    --pn-ink-900: #0F172A;
    --pn-ink-800: #1E293B;
    --pn-ink-700: #334155;
    --pn-ink-600: #475569;
    --pn-ink-400: #94A3B8;
    --pn-ink-300: #CBD5E1;

    /* --- Papier --- */
    --pn-paper: #F8FAFC;
    --pn-surface: #FFFFFF;
    --pn-muted: #E8ECF1;
    --pn-border: #E2E8F0;
    --pn-border-strong: #CBD5E1;

    /* --- Signal : reserve aux actions et aux mesures. Jamais decoratif. --- */
    --pn-signal: #0369A1;
    --pn-signal-deep: #075985;
    --pn-signal-soft: #E0F2FE;
    --pn-signal-line: #7DD3FC;

    /* --- Echelle d'intention : trois crans, pas un de plus --- */
    --pn-intent-low: #64748B;
    --pn-intent-low-bg: #F1F5F9;
    --pn-intent-mid: #0369A1;
    --pn-intent-mid-bg: #E0F2FE;
    --pn-intent-high: #0F766E;
    --pn-intent-high-bg: #CCFBF1;

    --pn-danger: #DC2626;
    --pn-danger-bg: #FEF2F2;

    /* --- Surfaces sur fond encre --- */
    --pn-on-ink: #F8FAFC;
    --pn-on-ink-muted: #94A3B8;
    --pn-on-ink-border: rgba(248, 250, 252, 0.14);
    --pn-on-ink-surface: rgba(248, 250, 252, 0.045);

    /* --- Typographie --- */
    --pn-font-display: 'Instrument Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --pn-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pn-font-data: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Echelle modulaire 1.25, fluide. Base 16px minimum (regle a11y). */
    --pn-text-xs: 0.75rem;
    --pn-text-sm: 0.875rem;
    --pn-text-base: 1rem;
    --pn-text-md: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
    --pn-text-lg: clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem);
    --pn-text-xl: clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
    --pn-text-2xl: clamp(1.625rem, 1.6vw + 1.2rem, 2.25rem);
    --pn-text-3xl: clamp(1.875rem, 2.4vw + 1.25rem, 2.875rem);
    --pn-text-4xl: clamp(2.25rem, 3.6vw + 1.3rem, 3.75rem);

    /* --- Espacement (density 4/10 pour les composants) --- */
    --pn-space-xs: 4px;
    --pn-space-sm: 8px;
    --pn-space-md: 16px;
    --pn-space-lg: 24px;
    --pn-space-xl: 32px;
    --pn-space-2xl: 48px;
    --pn-space-3xl: 64px;

    /* Rythme des sections : genereux, c'est ce qui fait respirer les pages. */
    --pn-section-y: clamp(4rem, 7vw, 7.5rem);
    --pn-section-y-tight: clamp(2.75rem, 4.5vw, 4.5rem);

    /* --- Grille --- */
    --pn-container: 1200px;
    --pn-container-narrow: 780px;
    --pn-container-reading: 68ch;
    --pn-gutter: clamp(1.25rem, 4vw, 3rem);

    /* --- Formes : angles francs --- */
    --pn-radius-xs: 2px;
    --pn-radius-sm: 4px;
    --pn-radius-md: 8px;

    /* --- Elevation (dimensional-layering, 4 niveaux, sans flou) --- */
    --pn-elev-1: 0 1px 2px rgba(2, 6, 23, 0.05);
    --pn-elev-2: 0 2px 4px rgba(2, 6, 23, 0.06), 0 1px 2px rgba(2, 6, 23, 0.04);
    --pn-elev-3: 0 8px 24px -6px rgba(2, 6, 23, 0.12), 0 2px 6px rgba(2, 6, 23, 0.05);
    --pn-elev-4: 0 24px 56px -16px rgba(2, 6, 23, 0.22), 0 4px 12px rgba(2, 6, 23, 0.06);

    /* --- Mouvement --- */
    --pn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --pn-dur-fast: 150ms;
    --pn-dur: 220ms;
}

/* ==========================================================================
   2. RESET ET SOCLE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body.pn-public {
    margin: 0;
    background: var(--pn-paper);
    color: var(--pn-ink-900);
    font-family: var(--pn-font-body);
    font-size: var(--pn-text-md);
    line-height: 1.65;
    font-feature-settings: 'cv05' 1, 'ss03' 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.pn-public h1,
.pn-public h2,
.pn-public h3,
.pn-public h4 {
    font-family: var(--pn-font-display);
    color: var(--pn-ink-950);
    letter-spacing: -0.022em;
    text-wrap: balance;
    margin: 0;
}

.pn-public h1 { font-size: var(--pn-text-4xl); line-height: 1.05; font-weight: 600; }
.pn-public h2 { font-size: var(--pn-text-3xl); line-height: 1.12; font-weight: 600; }
.pn-public h3 { font-size: var(--pn-text-lg); line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; }
.pn-public h4 { font-size: var(--pn-text-base); line-height: 1.4; font-weight: 600; letter-spacing: 0; }

.pn-public p { margin: 0; text-wrap: pretty; }
.pn-public ul,
.pn-public ol { margin: 0; padding: 0; }
.pn-public img,
.pn-public svg { max-width: 100%; }
.pn-public img { height: auto; display: block; }

.pn-public a {
    color: var(--pn-signal-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--pn-dur-fast) var(--pn-ease);
}
.pn-public a:hover { color: var(--pn-ink-950); }

/* Anneau de focus 3px — exigence a11y du MASTER */
.pn-public :focus-visible {
    outline: 3px solid var(--pn-signal);
    outline-offset: 2px;
    border-radius: var(--pn-radius-xs);
}

.pn-skip-link {
    position: absolute;
    left: var(--pn-space-md);
    top: -100px;
    z-index: 200;
    background: var(--pn-ink-950);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--pn-radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--pn-dur) var(--pn-ease);
}
.pn-skip-link:focus { top: var(--pn-space-md); color: #fff; }

/* ==========================================================================
   3. GRILLE ET SECTIONS
   ========================================================================== */

.pn-shell {
    width: 100%;
    max-width: var(--pn-container);
    margin-inline: auto;
    padding-inline: var(--pn-gutter);
}
.pn-shell--narrow { max-width: var(--pn-container-narrow); }

.pn-section {
    padding-block: var(--pn-section-y);
    position: relative;
}
.pn-section--tight { padding-block: var(--pn-section-y-tight); }

/* Trois surfaces, pas une de plus. La separation se fait au filet, pas
   par empilement de bandes colorees. */
.pn-section--paper { background: var(--pn-paper); }
.pn-section--surface { background: var(--pn-surface); }
.pn-section--ink {
    background: var(--pn-ink-950);
    color: var(--pn-on-ink);
}
.pn-section--ink h1,
.pn-section--ink h2,
.pn-section--ink h3,
.pn-section--ink h4 { color: #fff; }
.pn-section--ink p { color: var(--pn-ink-300); }
.pn-section--ink a { color: var(--pn-signal-line); }
.pn-section--ink a:hover { color: #fff; }

.pn-rule { border-top: 1px solid var(--pn-border); }
.pn-section--ink + .pn-section,
.pn-section + .pn-section--ink { border-top: 0; }

/* En-tete de section */
.pn-head { max-width: 62ch; }
.pn-head--center { margin-inline: auto; text-align: center; }
.pn-head > * + * { margin-top: var(--pn-space-md); }
.pn-head p { color: var(--pn-ink-600); font-size: var(--pn-text-md); }
.pn-section--ink .pn-head p { color: var(--pn-ink-300); }

/* Kicker : en mono, c'est lui qui signe le langage "instrument de mesure" */
.pn-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--pn-space-sm);
    font-family: var(--pn-font-data);
    font-size: var(--pn-text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pn-signal-deep);
}
.pn-kicker::before {
    content: '';
    width: 18px;
    height: 1px;
    background: currentColor;
    flex: none;
}
.pn-section--ink .pn-kicker { color: var(--pn-signal-line); }

.pn-lede {
    font-size: var(--pn-text-lg);
    line-height: 1.55;
    color: var(--pn-ink-700);
}
.pn-section--ink .pn-lede { color: var(--pn-ink-300); }

.pn-note {
    font-size: var(--pn-text-sm);
    color: var(--pn-ink-600);
    line-height: 1.6;
}
.pn-section--ink .pn-note { color: var(--pn-ink-400); }

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */

.pn-btn {
    --btn-bg: var(--pn-ink-950);
    --btn-fg: #fff;
    --btn-bd: var(--pn-ink-950);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pn-space-sm);
    min-height: 48px; /* > 44px : regle touch du MASTER */
    padding: 12px 22px;
    border: 1px solid var(--btn-bd);
    border-radius: var(--pn-radius-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--pn-font-body);
    font-size: var(--pn-text-base);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--pn-dur) var(--pn-ease),
                border-color var(--pn-dur) var(--pn-ease),
                color var(--pn-dur) var(--pn-ease),
                box-shadow var(--pn-dur) var(--pn-ease);
}
.pn-btn:hover {
    background: var(--pn-signal-deep);
    border-color: var(--pn-signal-deep);
    color: #fff;
    box-shadow: var(--pn-elev-2);
}

.pn-btn--signal {
    --btn-bg: var(--pn-signal);
    --btn-bd: var(--pn-signal);
}
.pn-btn--signal:hover { background: var(--pn-signal-deep); border-color: var(--pn-signal-deep); }

.pn-btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--pn-ink-900);
    --btn-bd: var(--pn-border-strong);
}
.pn-btn--ghost:hover {
    background: var(--pn-surface);
    border-color: var(--pn-ink-900);
    color: var(--pn-ink-950);
}
.pn-section--ink .pn-btn--ghost {
    --btn-fg: #fff;
    --btn-bd: var(--pn-on-ink-border);
}
.pn-section--ink .pn-btn--ghost:hover {
    background: rgba(248, 250, 252, 0.08);
    border-color: rgba(248, 250, 252, 0.4);
    color: #fff;
}

/* Le panneau CTA est toujours fonce, quel que soit le parent. */
.pn-cta .pn-btn--ghost,
.pn-cta .pn-btn--ghost:hover {
    --btn-fg: #fff;
    --btn-bd: var(--pn-on-ink-border);
    color: #fff;
    background: rgba(248, 250, 252, 0.08);
}
.pn-cta .pn-btn--ghost:hover {
    background: rgba(248, 250, 252, 0.14);
    border-color: rgba(248, 250, 252, 0.55);
}

.pn-btn--onink {
    --btn-bg: #fff;
    --btn-fg: var(--pn-ink-950);
    --btn-bd: #fff;
}
.pn-btn--onink:hover { background: var(--pn-signal-line); border-color: var(--pn-signal-line); color: var(--pn-ink-950); }

.pn-btn--lg { min-height: 54px; padding: 15px 28px; font-size: var(--pn-text-md); }
.pn-btn--block { width: 100%; }

/* Lien-action : pour les CTA tertiaires, garde le contrat de bouton */
.pn-link-action {
    display: inline-flex;
    align-items: center;
    gap: var(--pn-space-sm);
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pn-signal-deep);
    font-family: var(--pn-font-body);
    font-size: var(--pn-text-base);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--pn-signal-line);
    border-radius: 0;
    transition: color var(--pn-dur-fast) var(--pn-ease), border-color var(--pn-dur-fast) var(--pn-ease);
}
.pn-link-action:hover { color: var(--pn-ink-950); border-color: var(--pn-ink-950); }
.pn-section--ink .pn-link-action { color: var(--pn-signal-line); border-color: rgba(125, 211, 252, 0.45); }
.pn-section--ink .pn-link-action:hover { color: #fff; border-color: #fff; }

.pn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pn-space-md);
    align-items: center;
}

/* ==========================================================================
   5. PRIMITIVES DE DONNEE
   Le langage graphique qui rend l'intelligence comportementale visible.
   ========================================================================== */

/* Valeur numerique */
.pn-figure {
    font-family: var(--pn-font-data);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--pn-ink-950);
}
.pn-section--ink .pn-figure { color: #fff; }

/* Etiquette de champ, en mono */
.pn-label {
    font-family: var(--pn-font-data);
    font-size: var(--pn-text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pn-ink-600);
}
.pn-section--ink .pn-label { color: var(--pn-ink-400); }

/* Badge d'intention — 3 crans */
.pn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--pn-radius-xs);
    font-family: var(--pn-font-data);
    font-size: var(--pn-text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.pn-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.pn-badge--low { background: var(--pn-intent-low-bg); color: var(--pn-intent-low); }
.pn-badge--mid { background: var(--pn-intent-mid-bg); color: var(--pn-signal-deep); }
.pn-badge--high { background: var(--pn-intent-high-bg); color: var(--pn-intent-high); }
.pn-badge--neutral {
    background: transparent;
    color: var(--pn-ink-600);
    border: 1px solid var(--pn-border);
}
.pn-badge--neutral::before { display: none; }

/* Pastille de statut vivant */
.pn-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pn-intent-high);
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.5);
    animation: pn-pulse 2.4s var(--pn-ease) infinite;
    flex: none;
}
@keyframes pn-pulse {
    70% { box-shadow: 0 0 0 7px rgba(15, 118, 110, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
}

/* Chip mono (source, UTM, campagne) */
.pn-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--pn-space-sm);
    padding: 7px 12px;
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius-xs);
    background: var(--pn-surface);
    font-family: var(--pn-font-data);
    font-size: var(--pn-text-xs);
    color: var(--pn-ink-700);
}
.pn-section--ink .pn-chip {
    background: var(--pn-on-ink-surface);
    border-color: var(--pn-on-ink-border);
    color: var(--pn-ink-300);
}

/* Panneau : la carte du systeme. Bord franc, elevation legere, pas de flou. */
.pn-panel {
    background: var(--pn-surface);
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius-md);
    box-shadow: var(--pn-elev-1);
}
.pn-panel--flat { box-shadow: none; }
.pn-panel--raised { box-shadow: var(--pn-elev-3); }
.pn-section--ink .pn-panel {
    background: var(--pn-on-ink-surface);
    border-color: var(--pn-on-ink-border);
    box-shadow: none;
}

/* ==========================================================================
   6. NAVBAR  (markup inchange — style depuis cette feuille uniquement)
   ========================================================================== */

.pn-public .navbar {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pn-space-lg);
    height: 72px;
    padding-inline: var(--pn-gutter);
    background: rgba(248, 250, 252, 0.92);
    border-bottom: 1px solid var(--pn-border);
    /* Pas de backdrop-filter : le flou appartient au langage ecarte. */
}

.pn-public .navbar-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pn-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--pn-ink-950);
    text-decoration: none;
    flex: none;
}
.pn-public .navbar-logo:hover { color: var(--pn-signal-deep); }
.pn-public .pn-header-brand-logo { width: 30px; height: 30px; border-radius: var(--pn-radius-xs); }

.pn-public .navbar-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.pn-public .navbar-links > a,
.pn-public .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--pn-radius-sm);
    background: none;
    color: var(--pn-ink-700);
    font-family: var(--pn-font-body);
    font-size: var(--pn-text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--pn-dur-fast) var(--pn-ease), background var(--pn-dur-fast) var(--pn-ease);
}
.pn-public .navbar-links > a:hover,
.pn-public .nav-dropdown-toggle:hover {
    color: var(--pn-ink-950);
    background: var(--pn-muted);
}

.pn-public .nav-dropdown { position: relative; }
.pn-public .nav-dropdown-toggle::after {
    content: '';
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--pn-dur) var(--pn-ease);
}
.pn-public .nav-dropdown.open .nav-dropdown-toggle::after { transform: translateY(1px) rotate(225deg); }

.pn-public .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 290px;
    display: none;
    flex-direction: column;
    padding: 6px;
    background: var(--pn-surface);
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius-md);
    box-shadow: var(--pn-elev-3);
}
.pn-public .nav-dropdown.open .nav-dropdown-menu { display: flex; }
.pn-public .nav-dropdown-menu a {
    padding: 9px 12px;
    border-radius: var(--pn-radius-sm);
    color: var(--pn-ink-700);
    font-size: var(--pn-text-sm);
    text-decoration: none;
    transition: background var(--pn-dur-fast) var(--pn-ease), color var(--pn-dur-fast) var(--pn-ease);
}
.pn-public .nav-dropdown-menu a:hover { background: var(--pn-muted); color: var(--pn-ink-950); }
.pn-public .nav-dropdown-menu a:first-child {
    font-weight: 600;
    color: var(--pn-ink-950);
    border-bottom: 1px solid var(--pn-border);
    border-radius: var(--pn-radius-sm) var(--pn-radius-sm) 0 0;
    margin-bottom: 4px;
    padding-bottom: 11px;
}

.pn-public .nav-cta,
.pn-public .nav-dashboard-link {
    margin-left: var(--pn-space-sm);
    min-height: 40px;
    padding: 0 16px !important;
    background: var(--pn-ink-950) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: var(--pn-radius-sm);
}
.pn-public .nav-cta:hover,
.pn-public .nav-dashboard-link:hover { background: var(--pn-signal-deep) !important; color: #fff !important; }

.pn-public .navbar-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius-sm);
    background: var(--pn-surface);
    cursor: pointer;
}
.pn-public .navbar-menu-toggle span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--pn-ink-900);
    transition: transform var(--pn-dur) var(--pn-ease), opacity var(--pn-dur) var(--pn-ease);
}
.pn-public .navbar.menu-open .navbar-menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.pn-public .navbar.menu-open .navbar-menu-toggle span:nth-child(2) { opacity: 0; }
.pn-public .navbar.menu-open .navbar-menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
    .pn-public .navbar-menu-toggle { display: flex; }
    .pn-public .navbar-links {
        position: fixed;
        inset: 72px 0 auto 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100dvh - 72px);
        overflow-y: auto;
        padding: var(--pn-space-md) var(--pn-gutter) var(--pn-space-2xl);
        background: var(--pn-surface);
        border-bottom: 1px solid var(--pn-border);
        box-shadow: var(--pn-elev-3);
    }
    .pn-public .navbar.menu-open .navbar-links { display: flex; }
    .pn-public .navbar-links > a,
    .pn-public .nav-dropdown-toggle {
        min-height: 48px;
        width: 100%;
        justify-content: flex-start;
        padding: 0 var(--pn-space-sm);
        font-size: var(--pn-text-base);
        border-bottom: 1px solid var(--pn-border);
        border-radius: 0;
    }
    .pn-public .nav-dropdown-menu {
        position: static;
        min-width: 0;
        box-shadow: none;
        border: 0;
        border-bottom: 1px solid var(--pn-border);
        border-radius: 0;
        padding: 4px 0 10px var(--pn-space-md);
    }
    .pn-public .nav-cta,
    .pn-public .nav-dashboard-link {
        margin: var(--pn-space-md) 0 0;
        min-height: 48px;
        justify-content: center !important;
        border-bottom: 0 !important;
        border-radius: var(--pn-radius-sm);
    }
}

/* ==========================================================================
   7. FOOTER  (markup inchange)
   ========================================================================== */

.pn-public .site-footer {
    background: var(--pn-ink-950);
    color: var(--pn-ink-300);
    font-size: var(--pn-text-sm);
}
.pn-public .site-footer h2,
.pn-public .site-footer h3 { color: #fff; }
.pn-public .site-footer p { color: var(--pn-ink-400); }

.pn-public .footer-kicker {
    font-family: var(--pn-font-data);
    font-size: var(--pn-text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pn-signal-line) !important;
    margin: 0 0 var(--pn-space-md);
}

/* Bande d'essai : on neutralise l'image de fond heritee, on garde le markup */
.pn-public .footer-trial-band {
    background: none !important;
    border-bottom: 1px solid var(--pn-on-ink-border);
}
.pn-public .footer-trial-overlay {
    max-width: var(--pn-container);
    margin-inline: auto;
    padding: var(--pn-section-y-tight) var(--pn-gutter);
    display: grid;
    gap: var(--pn-space-md);
    max-width: min(var(--pn-container), 100%);
}
.pn-public .footer-trial-overlay h2 { font-size: var(--pn-text-2xl); max-width: 22ch; }
.pn-public .footer-trial-overlay p { max-width: 62ch; }
.pn-public .footer-trial-button {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: var(--pn-space-sm);
    padding: 12px 24px;
    background: #fff;
    color: var(--pn-ink-950);
    border: 1px solid #fff;
    border-radius: var(--pn-radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--pn-dur) var(--pn-ease), color var(--pn-dur) var(--pn-ease);
}
.pn-public .footer-trial-button:hover { background: var(--pn-signal-line); border-color: var(--pn-signal-line); color: var(--pn-ink-950); }

.pn-public .footer-guides {
    max-width: var(--pn-container);
    margin-inline: auto;
    padding: var(--pn-section-y-tight) var(--pn-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pn-space-2xl);
    align-items: start;
    border-bottom: 1px solid var(--pn-on-ink-border);
}
.pn-public .footer-guides h2 { font-size: var(--pn-text-xl); margin-bottom: var(--pn-space-md); }

.pn-public .footer-guides-form { display: grid; gap: var(--pn-space-md); }
.pn-public .footer-guides-form input[type="text"],
.pn-public .footer-guides-form input[type="email"] {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--pn-on-ink-surface);
    border: 1px solid var(--pn-on-ink-border);
    border-radius: var(--pn-radius-sm);
    color: #fff;
    font-family: var(--pn-font-body);
    font-size: var(--pn-text-base);
    transition: border-color var(--pn-dur) var(--pn-ease);
}
.pn-public .footer-guides-form input::placeholder { color: var(--pn-ink-600); }
.pn-public .footer-guides-form input:focus {
    border-color: var(--pn-signal-line);
    outline: 3px solid rgba(125, 211, 252, 0.35);
    outline-offset: 1px;
}
.pn-public .footer-guides-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: var(--pn-text-xs);
    line-height: 1.55;
    color: var(--pn-ink-400);
    cursor: pointer;
}
.pn-public .footer-guides-consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--pn-signal-line);
    cursor: pointer;
}
.pn-public .footer-guides-form button {
    justify-self: start;
    min-height: 48px;
    padding: 12px 24px;
    background: #fff;
    color: var(--pn-ink-950);
    border: 1px solid #fff;
    border-radius: var(--pn-radius-sm);
    font-family: var(--pn-font-body);
    font-size: var(--pn-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pn-dur) var(--pn-ease);
}
.pn-public .footer-guides-form button:hover { background: var(--pn-signal-line); }

.pn-public .footer-main {
    max-width: var(--pn-container);
    margin-inline: auto;
    padding: var(--pn-section-y-tight) var(--pn-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--pn-space-2xl);
}
.pn-public .footer-brand h2 { font-size: var(--pn-text-lg); margin-bottom: var(--pn-space-md); }
.pn-public .footer-brand p { max-width: 46ch; }
.pn-public .footer-column { display: flex; flex-direction: column; align-items: flex-start; }
.pn-public .footer-column h3 {
    font-family: var(--pn-font-data);
    font-size: var(--pn-text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pn-ink-400);
    margin-bottom: var(--pn-space-md);
}
.pn-public .footer-column a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: var(--pn-ink-300);
    text-decoration: none;
    transition: color var(--pn-dur-fast) var(--pn-ease);
}
.pn-public .footer-column a:hover { color: #fff; text-decoration: underline; }

.pn-public .footer-bottom {
    max-width: var(--pn-container);
    margin-inline: auto;
    padding: var(--pn-space-lg) var(--pn-gutter) var(--pn-space-2xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--pn-space-md);
    border-top: 1px solid var(--pn-on-ink-border);
    font-family: var(--pn-font-data);
    font-size: var(--pn-text-xs);
    color: var(--pn-ink-600);
}

@media (max-width: 900px) {
    .pn-public .footer-guides,
    .pn-public .footer-main { grid-template-columns: minmax(0, 1fr); gap: var(--pn-space-xl); }
}

/* ==========================================================================
   8. POPUP DEMO  (markup et JS inchanges)
   ========================================================================== */

.pn-public .demo-popup,
dialog.demo-popup {
    width: min(560px, calc(100vw - 2rem));
    max-width: none;
    padding: 0;
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius-md);
    background: var(--pn-surface);
    color: var(--pn-ink-900);
    box-shadow: var(--pn-elev-4);
    font-family: var(--pn-font-body);
}
dialog.demo-popup::backdrop { background: rgba(2, 6, 23, 0.6); }

.demo-popup-form { position: relative; padding: var(--pn-space-xl); }

.demo-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--pn-radius-sm);
    background: none;
    color: var(--pn-ink-600);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--pn-dur-fast) var(--pn-ease), color var(--pn-dur-fast) var(--pn-ease);
}
.demo-popup-close:hover { background: var(--pn-muted); color: var(--pn-ink-950); }

.demo-popup h2 {
    font-family: var(--pn-font-display);
    font-size: var(--pn-text-xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--pn-ink-950);
    margin: 0 44px var(--pn-space-sm) 0;
}
.demo-popup-intro {
    margin: 0 0 var(--pn-space-lg);
    font-size: var(--pn-text-sm);
    line-height: 1.6;
    color: var(--pn-ink-600);
}

.demo-popup-field { display: block; margin-bottom: var(--pn-space-md); }
.demo-popup-field > span {
    display: block;
    margin-bottom: 6px;
    font-family: var(--pn-font-data);
    font-size: var(--pn-text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pn-ink-700);
}
.demo-popup-field input,
.demo-popup-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--pn-border-strong);
    border-radius: var(--pn-radius-sm);
    background: var(--pn-surface);
    color: var(--pn-ink-950);
    font-family: var(--pn-font-body);
    font-size: var(--pn-text-base);
    line-height: 1.5;
    transition: border-color var(--pn-dur) var(--pn-ease), box-shadow var(--pn-dur) var(--pn-ease);
}
.demo-popup-field textarea { min-height: 88px; resize: vertical; }
.demo-popup-field input:focus,
.demo-popup-field textarea:focus {
    border-color: var(--pn-signal);
    outline: none;
    box-shadow: 0 0 0 3px var(--pn-signal-soft);
}

.demo-popup-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin: var(--pn-space-lg) 0;
    padding: var(--pn-space-md);
    background: var(--pn-paper);
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius-sm);
    font-size: var(--pn-text-sm);
    line-height: 1.55;
    color: var(--pn-ink-700);
    cursor: pointer;
}
.demo-popup-consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--pn-signal);
    cursor: pointer;
}

.demo-popup-error {
    margin: 0 0 var(--pn-space-md);
    padding: 12px 14px;
    background: var(--pn-danger-bg);
    border: 1px solid #FECACA;
    border-left: 3px solid var(--pn-danger);
    border-radius: var(--pn-radius-sm);
    color: #991B1B;
    font-size: var(--pn-text-sm);
}

.demo-popup-submit {
    width: 100%;
    min-height: 52px;
    padding: 14px 24px;
    border: 1px solid var(--pn-ink-950);
    border-radius: var(--pn-radius-sm);
    background: var(--pn-ink-950);
    color: #fff;
    font-family: var(--pn-font-body);
    font-size: var(--pn-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pn-dur) var(--pn-ease);
}
.demo-popup-submit:hover:not(:disabled) { background: var(--pn-signal-deep); border-color: var(--pn-signal-deep); }
.demo-popup-submit:disabled { opacity: 0.6; cursor: progress; }

.demo-popup-success { padding: var(--pn-space-sm) 0; text-align: center; }
.demo-popup-success h2 { margin: 0 0 var(--pn-space-sm); }
.demo-popup-success p { margin: 0 0 var(--pn-space-lg); color: var(--pn-ink-600); }
.demo-popup-close-success {
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid var(--pn-border-strong);
    border-radius: var(--pn-radius-sm);
    background: var(--pn-surface);
    color: var(--pn-ink-900);
    font-family: var(--pn-font-body);
    font-size: var(--pn-text-base);
    font-weight: 600;
    cursor: pointer;
}
.demo-popup-close-success:hover { border-color: var(--pn-ink-900); }

/* ==========================================================================
   8 bis. BANDEAU DE CONSENTEMENT
   Injecte a l'execution par tracker.js, avec sa propre <style> ajoutee au
   DOM apres cette feuille. On ne touche pas au JS (composant fonctionnel) :
   on realigne uniquement l'apparence, en montant la specificite via
   body.pn-public et !important la ou tracker.js impose des degrades.
   ========================================================================== */

body.pn-public #predictneed-consent-banner,
body.pn-public #predictneed-consent-panel,
body.pn-public #predictneed-cookie-settings {
    border: 1px solid var(--pn-border-strong) !important;
    border-radius: var(--pn-radius-md) !important;
    background: var(--pn-surface) !important;
    box-shadow: var(--pn-elev-4) !important;
    font-family: var(--pn-font-body) !important;
    color: var(--pn-ink-900) !important;
    padding: var(--pn-space-xl) !important;
}

body.pn-public #predictneed-consent-banner .predictneed-consent-main-title,
body.pn-public #predictneed-consent-panel .predictneed-consent-main-title {
    font-family: var(--pn-font-display) !important;
    font-size: var(--pn-text-lg) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--pn-ink-950) !important;
}

body.pn-public #predictneed-consent-banner .predictneed-consent-brand strong {
    font-family: var(--pn-font-display) !important;
    font-weight: 600 !important;
    color: var(--pn-ink-950) !important;
}

body.pn-public #predictneed-consent-banner .predictneed-consent-intro,
body.pn-public #predictneed-consent-banner .predictneed-consent-note,
body.pn-public #predictneed-consent-banner .predictneed-consent-purpose-list li {
    font-family: var(--pn-font-body) !important;
    color: var(--pn-ink-600) !important;
    font-size: var(--pn-text-sm) !important;
}

body.pn-public #predictneed-consent-banner .predictneed-consent-purpose-list li::before {
    background: var(--pn-signal) !important;
    color: #fff !important;
}

body.pn-public #predictneed-consent-banner .predictneed-consent-continue,
body.pn-public #predictneed-consent-banner .predictneed-consent-links a {
    color: var(--pn-signal-deep) !important;
    font-family: var(--pn-font-body) !important;
    font-weight: 600 !important;
}

body.pn-public #predictneed-consent-banner .predictneed-consent-main-actions button,
body.pn-public #predictneed-consent-panel button,
body.pn-public #predictneed-cookie-settings button {
    border-radius: var(--pn-radius-sm) !important;
    font-family: var(--pn-font-body) !important;
    font-size: var(--pn-text-base) !important;
    font-weight: 600 !important;
    min-height: 48px !important;
    box-shadow: none !important;
    transition: background var(--pn-dur) var(--pn-ease), border-color var(--pn-dur) var(--pn-ease) !important;
}

body.pn-public #predictneed-consent-banner .predictneed-consent-main-actions .customize {
    border: 1px solid var(--pn-border-strong) !important;
    background: var(--pn-surface) !important;
    color: var(--pn-ink-900) !important;
}
body.pn-public #predictneed-consent-banner .predictneed-consent-main-actions .customize:hover {
    border-color: var(--pn-ink-950) !important;
    background: var(--pn-paper) !important;
}

body.pn-public #predictneed-consent-banner .predictneed-consent-main-actions .primary,
body.pn-public #predictneed-consent-panel .primary {
    border: 1px solid var(--pn-ink-950) !important;
    background: var(--pn-ink-950) !important;
    color: #fff !important;
}
body.pn-public #predictneed-consent-banner .predictneed-consent-main-actions .primary:hover,
body.pn-public #predictneed-consent-panel .primary:hover {
    background: var(--pn-signal-deep) !important;
    border-color: var(--pn-signal-deep) !important;
}

/* ==========================================================================
   9. MOUVEMENT — scroll reveal (motion 3/10, subtle)
   ========================================================================== */

.pn-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms var(--pn-ease), transform 400ms var(--pn-ease);
}
.pn-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .pn-reveal { opacity: 1; transform: none; transition: none; }
    .pn-pulse { animation: none; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Filet de securite : si JS est indisponible, rien ne reste invisible. */
.no-js .pn-reveal { opacity: 1; transform: none; }

/* ==========================================================================
   10. UTILITAIRES
   ========================================================================== */

.pn-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pn-stack > * + * { margin-top: var(--pn-space-md); }
.pn-stack-lg > * + * { margin-top: var(--pn-space-lg); }
.pn-stack-xl > * + * { margin-top: var(--pn-space-xl); }
.pn-stack-2xl > * + * { margin-top: var(--pn-space-2xl); }