/* ==========================================================================
   DÉCROCHE — CHARTE « NUIT » DU SITE PUBLIC (refonte 29/08/2026)
   --------------------------------------------------------------------------
   Parité exacte avec l'app mobile (src/theme.ts) : fond bleu nuit #0A0F1F,
   doré #d6b46a→#f2d58a en accent, Fraunces pour les titres, rayons 12/16/22.
   La mascotte Décroche porte la marque sur chaque page.

   Tout est préfixé `nx-` (NuitX) : ce fichier cohabite avec public-bundle.css
   (encore chargé pour les gabarits non repris : connexion, inscription…) sans
   aucune collision. Une page refondue = body.nx-page + composants nx-*.
   ========================================================================== */

:root {
    --nx-nuit-0: #060b18;          /* le plus profond : bandeaux, footer */
    --nx-nuit-1: #0A0F1F;          /* fond de page (= app background) */
    --nx-nuit-2: #0B1020;          /* fond doux (= app backgroundSoft) */
    --nx-surface: #111A2F;         /* surfaces (= app surface) */
    --nx-surface-2: #16213D;       /* surfaces appuyées (= app surfaceStrong) */
    --nx-card: #101932;            /* cartes (= app card) */
    --nx-card-2: #172241;          /* cartes appuyées (= app cardStrong) */
    --nx-ink: #F8FBFF;             /* texte principal (= app ink) */
    --nx-muted: #AAB3D1;           /* texte secondaire (= app muted) */
    --nx-faint: rgba(170, 179, 209, 0.62);
    --nx-gold: #d6b46a;            /* accent de marque (= app gold) */
    --nx-gold-2: #f2d58a;          /* doré clair (= app gold2) */
    --nx-gold-soft: #f4dfae;       /* doré très clair (= app goldSoft) */
    --nx-gold-ink: #0b1020;        /* texte sur bouton doré (= app goldInk) */
    --nx-line: rgba(214, 180, 106, 0.2);        /* filet doré (= app line) */
    --nx-line-strong: rgba(214, 180, 106, 0.34);
    --nx-line-cool: rgba(150, 165, 205, 0.16);  /* filet froid (= app lineCool) */
    --nx-line-faint: rgba(150, 165, 205, 0.07);
    --nx-ok: #4ade80;
    --nx-warn: #fbbf24;
    --nx-danger: #f87171;
    --nx-grad-gold: linear-gradient(135deg, #d6b46a 0%, #f2d58a 100%);
    --nx-grad-gold-text: linear-gradient(100deg, #fff3c4 8%, #f2d58a 45%, #d6b46a 78%);
    --nx-shadow: 0 24px 70px rgba(2, 6, 16, 0.55);
    --nx-shadow-soft: 0 12px 34px rgba(2, 6, 16, 0.35);
    --nx-r-md: 12px;               /* petits contrôles (= app radius.md) */
    --nx-r-card: 16px;             /* la carte standard (= app radius.card) */
    --nx-r-lg: 22px;               /* grandes surfaces (= app radius.lg) */
    --nx-font-head: 'Fraunces', 'Georgia', serif;
    --nx-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --nx-container: 1180px;
    --nx-header-h: 72px;
}

/* --------------------------------------------------------------------------
   Coquille de page — appliquée à toute page publique refondue
   -------------------------------------------------------------------------- */

body.nx-page {
    background:
        radial-gradient(1100px 520px at 82% -140px, rgba(214, 180, 106, 0.07), transparent 60%),
        radial-gradient(900px 600px at -180px 30%, rgba(107, 125, 255, 0.05), transparent 55%),
        var(--nx-nuit-1);
    color: var(--nx-ink);
    font-family: var(--nx-font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

body.nx-page .site-main { padding: 0; margin: 0; max-width: none; }
body.nx-page ::selection { background: rgba(242, 213, 138, 0.3); color: var(--nx-ink); }
body.nx-page :focus-visible { outline: 2px solid var(--nx-gold); outline-offset: 3px; border-radius: 6px; }

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */

.nx-h1, .nx-h2, .nx-h3 {
    font-family: var(--nx-font-head);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--nx-ink);
    margin: 0;
    text-wrap: balance;
}

.nx-h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
.nx-h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
.nx-h3 { font-size: clamp(1.18rem, 2vw, 1.45rem); font-weight: 600; }

.nx-gold-text {
    background: var(--nx-grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-gold-2);
    margin: 0 0 14px;
}
.nx-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--nx-grad-gold);
}

.nx-lead {
    font-size: clamp(1.02rem, 1.6vw, 1.22rem);
    color: var(--nx-muted);
    max-width: 62ch;
    margin: 18px 0 0;
}
.nx-lead strong { color: var(--nx-ink); font-weight: 600; }

.nx-muted { color: var(--nx-muted); }
.nx-small { font-size: 0.86rem; color: var(--nx-faint); }

/* --------------------------------------------------------------------------
   Structure : conteneurs, sections, grilles
   -------------------------------------------------------------------------- */

.nx-container {
    width: min(100% - 40px, var(--nx-container));
    margin-inline: auto;
}

.nx-section { padding: clamp(56px, 9vw, 110px) 0; position: relative; }
.nx-section--tight { padding: clamp(36px, 6vw, 70px) 0; }
.nx-section--flush { padding-top: 0; }
.nx-section--band {
    background: linear-gradient(180deg, rgba(16, 25, 50, 0) 0%, rgba(16, 25, 50, 0.55) 18%, rgba(16, 25, 50, 0.55) 82%, rgba(16, 25, 50, 0) 100%);
}

.nx-section-head { max-width: 720px; margin-bottom: clamp(28px, 4.5vw, 52px); }
.nx-section-head--center { margin-inline: auto; text-align: center; }
.nx-section-head--center .nx-lead { margin-inline: auto; }
.nx-section-head--center .nx-eyebrow { justify-content: center; }

.nx-grid { display: grid; gap: clamp(14px, 2vw, 22px); }
.nx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nx-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(26px, 5vw, 64px);
    align-items: center;
}
.nx-split--reverse > :first-child { order: 2; }
.nx-split--reverse > :last-child { order: 1; }

@media (max-width: 1023px) {
    .nx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
    .nx-grid--2, .nx-grid--3, .nx-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .nx-split, .nx-split--reverse { grid-template-columns: minmax(0, 1fr); }
    .nx-split--reverse > :first-child { order: 1; }
    .nx-split--reverse > :last-child { order: 2; }
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--nx-grad-gold);
    color: var(--nx-gold-ink);
    font-family: var(--nx-font-body);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(214, 180, 106, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.nx-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 36px rgba(214, 180, 106, 0.3); }
.nx-btn:active { transform: translateY(0); }

.nx-btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--nx-line-cool);
    color: var(--nx-ink);
    box-shadow: none;
}
.nx-btn--ghost:hover { border-color: var(--nx-line-strong); background: rgba(255, 255, 255, 0.07); box-shadow: none; }

.nx-btn--gold-line {
    background: rgba(214, 180, 106, 0.1);
    border-color: var(--nx-line-strong);
    color: var(--nx-gold-2);
    box-shadow: none;
}
.nx-btn--gold-line:hover { background: rgba(214, 180, 106, 0.16); box-shadow: none; }

.nx-btn--big { padding: 16px 34px; font-size: 1.08rem; }
.nx-btn--small { padding: 9px 18px; font-size: 0.9rem; }

.nx-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

.nx-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--nx-gold-2);
    font-weight: 600;
    text-decoration: none;
}
.nx-link-arrow::after { content: "→"; transition: transform 0.16s ease; }
.nx-link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.nx-card {
    background: linear-gradient(160deg, var(--nx-card-2) 0%, var(--nx-card) 58%);
    border: 1px solid var(--nx-line-cool);
    border-radius: var(--nx-r-card);
    padding: clamp(20px, 3vw, 30px);
    box-shadow: var(--nx-shadow-soft);
}
.nx-card--gold { border-color: var(--nx-line); }
.nx-card--lg { border-radius: var(--nx-r-lg); }
.nx-card h3 + p, .nx-card .nx-h3 + p { margin-top: 10px; }
.nx-card p { color: var(--nx-muted); margin: 0; }
.nx-card p + p { margin-top: 10px; }

.nx-card-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nx-gold-2);
    margin: 0 0 10px;
}

/* Pilier : la carte des six métiers de Décroche */
.nx-pillar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.nx-pillar__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--nx-r-md);
    background: rgba(214, 180, 106, 0.12);
    border: 1px solid var(--nx-line);
    color: var(--nx-gold-2);
    flex-shrink: 0;
}
.nx-pillar__icon svg { width: 24px; height: 24px; }
.nx-pillar__title { font-family: var(--nx-font-head); font-weight: 600; font-size: 1.16rem; margin: 0; color: var(--nx-ink); }
.nx-pillar p { flex-grow: 1; }
.nx-pillar .nx-link-arrow { margin-top: 4px; font-size: 0.94rem; }

/* Stat : grand chiffre + légende */
.nx-stat { text-align: left; }
.nx-stat__value {
    font-family: var(--nx-font-head);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    background: var(--nx-grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.05;
}
.nx-stat__label { color: var(--nx-muted); font-size: 0.94rem; margin-top: 8px; }

/* Étapes numérotées */
.nx-steps { display: grid; gap: clamp(14px, 2vw, 22px); counter-reset: nx-step; }
.nx-step { counter-increment: nx-step; position: relative; padding-left: 64px; }
.nx-step::before {
    content: counter(nx-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 2px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--nx-line);
    background: rgba(214, 180, 106, 0.1);
    font-family: var(--nx-font-head);
    font-weight: 700;
    color: var(--nx-gold-2);
    font-size: 0.98rem;
}
.nx-step h3 { margin: 0 0 6px; }
.nx-step p { color: var(--nx-muted); margin: 0; }

/* Chips */
.nx-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--nx-line-cool);
    background: rgba(255, 255, 255, 0.04);
    color: var(--nx-muted);
    font-size: 0.86rem;
    font-weight: 600;
}
.nx-chip--gold { border-color: var(--nx-line); background: rgba(214, 180, 106, 0.1); color: var(--nx-gold-2); }
.nx-chip--ok { border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.1); color: var(--nx-ok); }
.nx-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   Mascotte
   -------------------------------------------------------------------------- */

/* Les poses sont rendues sur fond nuit uni proche du fond de page : le masque
   radial fond les bords et la mascotte semble VIVRE dans la page. */
.nx-mascotte {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 98%);
    mask-image: radial-gradient(closest-side, #000 62%, transparent 98%);
}
.nx-mascotte--wide {
    -webkit-mask-image: radial-gradient(ellipse closest-side, #000 58%, transparent 99%);
    mask-image: radial-gradient(ellipse closest-side, #000 58%, transparent 99%);
}
.nx-mascotte-figure { position: relative; margin: 0; }
.nx-mascotte-figure--halo::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214, 180, 106, 0.14), transparent 70%);
    filter: blur(12px);
    z-index: 0;
}
.nx-mascotte-figure img { position: relative; z-index: 1; }
.nx-mascotte--sm { max-width: 190px; margin-inline: auto; }
.nx-mascotte--md { max-width: 300px; margin-inline: auto; }
.nx-mascotte--lg { max-width: 430px; margin-inline: auto; }
.nx-mascotte--float { animation: nx-float 5.2s ease-in-out infinite; }

@keyframes nx-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
    .nx-mascotte--float { animation: none; }
}

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */

.nx-hero { padding: clamp(44px, 7vw, 96px) 0 clamp(40px, 6vw, 80px); position: relative; }
.nx-hero .nx-h1 { max-width: 16ch; }
.nx-hero--center { text-align: center; }
.nx-hero--center .nx-h1 { margin-inline: auto; max-width: 24ch; }
.nx-hero--center .nx-lead { margin-inline: auto; }
.nx-hero--center .nx-btn-row { justify-content: center; }
.nx-hero--center .nx-chip-row { justify-content: center; margin-top: 26px; }

/* --------------------------------------------------------------------------
   Bande CTA finale
   -------------------------------------------------------------------------- */

.nx-cta-band {
    position: relative;
    border-radius: var(--nx-r-lg);
    border: 1px solid var(--nx-line);
    background:
        radial-gradient(560px 260px at 85% 20%, rgba(214, 180, 106, 0.14), transparent 65%),
        linear-gradient(160deg, var(--nx-surface-2) 0%, var(--nx-card) 70%);
    padding: clamp(30px, 5vw, 58px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
    overflow: hidden;
    box-shadow: var(--nx-shadow);
}
.nx-cta-band .nx-h2 { max-width: 20ch; }
.nx-cta-band__mascotte { width: clamp(130px, 16vw, 210px); flex-shrink: 0; }
@media (max-width: 719px) {
    .nx-cta-band { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .nx-cta-band__mascotte { margin-inline: auto; }
    .nx-cta-band .nx-h2 { margin-inline: auto; }
    .nx-cta-band .nx-btn-row { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Prose — articles de blog, guides, pages légales
   -------------------------------------------------------------------------- */

.nx-prose { max-width: 720px; margin-inline: auto; }
.nx-prose > * + * { margin-top: 1.15em; }
.nx-prose h2 {
    font-family: var(--nx-font-head);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    line-height: 1.2;
    margin-top: 2em;
    letter-spacing: -0.01em;
    color: var(--nx-ink);
}
.nx-prose h3 {
    font-family: var(--nx-font-head);
    font-weight: 600;
    font-size: clamp(1.12rem, 2vw, 1.32rem);
    margin-top: 1.7em;
    color: var(--nx-ink);
}
.nx-prose p { color: var(--nx-muted); }
.nx-prose strong { color: var(--nx-ink); font-weight: 600; }
.nx-prose a { color: var(--nx-gold-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(214, 180, 106, 0.4); }
.nx-prose a:hover { text-decoration-color: var(--nx-gold-2); }
.nx-prose ul, .nx-prose ol { padding-left: 1.3em; color: var(--nx-muted); display: grid; gap: 0.5em; }
.nx-prose li::marker { color: var(--nx-gold); }
.nx-prose blockquote {
    border-left: 3px solid var(--nx-gold);
    padding: 10px 0 10px 22px;
    color: var(--nx-ink);
    font-family: var(--nx-font-head);
    font-weight: 600;
    font-size: 1.12rem;
    line-height: 1.45;
    margin-left: 0;
}
.nx-prose hr { border: 0; border-top: 1px solid var(--nx-line-cool); margin: 2.2em 0; }
.nx-prose figure { margin: 1.6em 0; }
.nx-prose figcaption { font-size: 0.85rem; color: var(--nx-faint); margin-top: 8px; text-align: center; }
.nx-prose .nx-card { margin: 1.6em 0; }

/* Encadré « donnée mesurée » / note dans les articles */
.nx-prose-note {
    border-radius: var(--nx-r-card);
    border: 1px solid var(--nx-line);
    background: rgba(214, 180, 106, 0.07);
    padding: 18px 22px;
}
.nx-prose-note p { margin: 0; color: var(--nx-muted); }
.nx-prose-note p + p { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Tableaux (comparatif, tarifs, rétention RGPD…)
   -------------------------------------------------------------------------- */

.nx-table-wrap { overflow-x: auto; border-radius: var(--nx-r-card); border: 1px solid var(--nx-line-cool); }
.nx-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--nx-card); }
.nx-table th, .nx-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--nx-line-faint); vertical-align: top; }
.nx-table thead th {
    background: var(--nx-surface-2);
    font-family: var(--nx-font-head);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--nx-gold-2);
    white-space: nowrap;
}
.nx-table tbody tr:last-child td { border-bottom: 0; }
.nx-table td { color: var(--nx-muted); font-size: 0.95rem; }
.nx-table td:first-child { color: var(--nx-ink); font-weight: 600; }
.nx-table .nx-yes { color: var(--nx-ok); font-weight: 700; }
.nx-table .nx-no { color: var(--nx-faint); }
.nx-table--highlight-last td:last-child, .nx-table--highlight-last thead th:last-child {
    background: rgba(214, 180, 106, 0.07);
}

/* --------------------------------------------------------------------------
   FAQ — accordéons natifs details/summary
   -------------------------------------------------------------------------- */

.nx-faq { display: grid; gap: 12px; max-width: 780px; margin-inline: auto; }
.nx-faq details {
    border: 1px solid var(--nx-line-cool);
    border-radius: var(--nx-r-card);
    background: var(--nx-card);
    overflow: hidden;
}
.nx-faq details[open] { border-color: var(--nx-line); }
.nx-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 52px 18px 22px;
    font-weight: 600;
    color: var(--nx-ink);
    position: relative;
    font-size: 1.02rem;
}
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--nx-gold-2);
    transition: transform 0.2s ease;
}
.nx-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.nx-faq .nx-faq__body { padding: 0 22px 20px; color: var(--nx-muted); }
.nx-faq .nx-faq__body > * + * { margin-top: 0.7em; }
.nx-faq .nx-faq__body a { color: var(--nx-gold-2); }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.nx-field { display: grid; gap: 7px; }
.nx-field > label { font-weight: 600; font-size: 0.92rem; color: var(--nx-ink); }
.nx-input, .nx-select, .nx-textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--nx-r-md);
    border: 1px solid var(--nx-line-cool);
    background: rgba(7, 15, 28, 0.55);
    color: var(--nx-ink);
    font: inherit;
    transition: border-color 0.15s ease;
}
.nx-input:focus, .nx-select:focus, .nx-textarea:focus { border-color: var(--nx-gold); outline: none; }
.nx-input::placeholder, .nx-textarea::placeholder { color: var(--nx-faint); }
.nx-form-grid { display: grid; gap: 16px; }

/* --------------------------------------------------------------------------
   Listes à coches
   -------------------------------------------------------------------------- */

.nx-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.nx-checklist li { position: relative; padding-left: 34px; color: var(--nx-muted); }
.nx-checklist li strong { color: var(--nx-ink); font-weight: 600; }
.nx-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: rgba(214, 180, 106, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2d58a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
    border: 1px solid var(--nx-line);
}

/* --------------------------------------------------------------------------
   Conversation d'appel (exemples d'appels, démos)
   -------------------------------------------------------------------------- */

.nx-convo { display: grid; gap: 10px; }
.nx-convo__bubble {
    max-width: 88%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.5;
}
.nx-convo__bubble--caller {
    justify-self: start;
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-line-cool);
    color: var(--nx-ink);
    border-bottom-left-radius: 5px;
}
.nx-convo__bubble--ai {
    justify-self: end;
    background: rgba(214, 180, 106, 0.13);
    border: 1px solid var(--nx-line);
    color: var(--nx-gold-soft);
    border-bottom-right-radius: 5px;
}
.nx-convo__who { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin-bottom: 3px; }

/* --------------------------------------------------------------------------
   En-tête public nx (remplace site-header--public sur toutes les pages)
   -------------------------------------------------------------------------- */

.nx-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(8, 13, 27, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nx-line-faint);
}
.nx-header__inner {
    width: min(100% - 40px, 1280px);
    margin-inline: auto;
    height: var(--nx-header-h);
    display: flex;
    align-items: center;
    gap: 26px;
}
.nx-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.nx-brand__icon { width: 40px; height: 40px; border-radius: 11px; display: block; }
.nx-brand__name {
    font-family: var(--nx-font-head);
    font-weight: 700;
    font-size: 1.28rem;
    color: var(--nx-ink);
    letter-spacing: -0.01em;
}
.nx-brand__name em { font-style: normal; color: var(--nx-gold-2); }

.nx-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nx-nav__item { position: relative; }
.nx-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--nx-muted);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.14s ease, background 0.14s ease;
}
.nx-nav__trigger:hover, .nx-nav__item.is-open .nx-nav__trigger { color: var(--nx-ink); background: rgba(255, 255, 255, 0.05); }
.nx-nav__trigger .nx-caret { width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.16s ease; }
.nx-nav__item.is-open .nx-caret { transform: rotate(225deg) translateY(-1px); }

.nx-nav__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 320px;
    background: linear-gradient(165deg, var(--nx-card-2), var(--nx-card));
    border: 1px solid var(--nx-line-cool);
    border-radius: var(--nx-r-card);
    box-shadow: var(--nx-shadow);
    padding: 10px;
    display: none;
    z-index: 1001;
}
.nx-nav__item.is-open .nx-nav__panel { display: block; }
.nx-nav__panel--wide { min-width: 560px; grid-template-columns: 1fr 1fr; gap: 2px; }
.nx-nav__item.is-open .nx-nav__panel--wide { display: grid; }
.nx-nav__panel a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--nx-r-md);
    text-decoration: none;
    transition: background 0.13s ease;
}
.nx-nav__panel a:hover { background: rgba(214, 180, 106, 0.09); }
.nx-nav__panel a strong { display: block; color: var(--nx-ink); font-weight: 600; font-size: 0.95rem; }
.nx-nav__panel a small { display: block; color: var(--nx-faint); font-size: 0.82rem; margin-top: 2px; }

.nx-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nx-header__login { color: var(--nx-muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 9px 12px; border-radius: 999px; }
.nx-header__login:hover { color: var(--nx-ink); }

.nx-burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--nx-line-cool);
    border-radius: var(--nx-r-md);
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
}
.nx-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--nx-ink); transition: transform 0.2s ease, opacity 0.2s ease; }
body.nx-menu-open .nx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nx-menu-open .nx-burger span:nth-child(2) { opacity: 0; }
body.nx-menu-open .nx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
    .nx-burger { display: flex; }
    .nx-header__actions { display: none; }
    .nx-nav {
        display: none;
        position: fixed;
        inset: var(--nx-header-h) 0 0 0;
        background: var(--nx-nuit-1);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 18px 20px 40px;
        overflow-y: auto;
        z-index: 999;
    }
    body.nx-menu-open .nx-nav { display: flex; }
    body.nx-menu-open { overflow: hidden; }
    .nx-nav__item { border-bottom: 1px solid var(--nx-line-faint); }
    .nx-nav__trigger { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 1.06rem; border-radius: 0; }
    .nx-nav__panel, .nx-nav__panel--wide {
        position: static;
        transform: none;
        min-width: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 12px;
    }
    .nx-nav__panel--wide { grid-template-columns: 1fr; }
    .nx-nav__mobile-actions { display: grid; gap: 10px; padding: 22px 4px; }
}
@media (min-width: 1024px) {
    .nx-nav__mobile-actions { display: none; }
}

/* --------------------------------------------------------------------------
   Pied de page nx
   -------------------------------------------------------------------------- */

.nx-footer {
    background: var(--nx-nuit-0);
    border-top: 1px solid var(--nx-line-faint);
    padding: clamp(44px, 7vw, 80px) 0 34px;
    margin-top: clamp(40px, 7vw, 90px);
}
.nx-footer__inner {
    width: min(100% - 40px, 1280px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(230px, 1.15fr) repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 44px);
}
.nx-footer__brand img { width: 52px; height: 52px; border-radius: 14px; }
.nx-footer__brand p { color: var(--nx-muted); font-size: 0.94rem; margin: 14px 0 0; max-width: 30ch; }
.nx-footer__title { display: block; font-family: var(--nx-font-head); font-weight: 600; color: var(--nx-gold-2); font-size: 0.98rem; margin-bottom: 14px; }
.nx-footer nav { display: grid; gap: 9px; }
.nx-footer nav a, .nx-footer nav button {
    color: var(--nx-muted);
    text-decoration: none;
    font-size: 0.92rem;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.nx-footer nav a:hover, .nx-footer nav button:hover { color: var(--nx-gold-2); }
.nx-footer__bottom {
    width: min(100% - 40px, 1280px);
    margin: 40px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--nx-line-faint);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    align-items: center;
    justify-content: space-between;
    /* Contraste AA (audit Lighthouse 27/09) : --nx-faint (rgba .62) tombe à 4,17:1
       sur --nx-nuit-0 (#060b18). Alpha remontée à .68 → #767d96, 4,82:1 mesuré. */
    color: rgba(170, 179, 209, 0.68);
    font-size: 0.85rem;
}
@media (max-width: 1023px) {
    .nx-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .nx-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Apparition douce au défilement
   -------------------------------------------------------------------------- */

.nx-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.nx-reveal.is-visible { opacity: 1; transform: none; }
.nx-reveal--d1 { transition-delay: 0.08s; }
.nx-reveal--d2 { transition-delay: 0.16s; }
.nx-reveal--d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
    .nx-reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Divers
   -------------------------------------------------------------------------- */

.nx-center { text-align: center; }
.nx-mt-0 { margin-top: 0 !important; }
.nx-mt-lg { margin-top: clamp(28px, 4vw, 48px); }
.nx-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Intégration avec l'existant
   -------------------------------------------------------------------------- */

/* Le décor étoilé commun (partials/_public_backdrop.html) est masqué par
   défaut : les pages refondues le rallument. */
body.nx-page .pm-bg, body.nx-page .pm-grain { display: block; }

/* Les surfaces héritées encore rendues sur les pages nx (modales démo/contact,
   bannière cookies, CTA mobile) troquent le violet du vieux thème pour le doré. */
body.nx-page .btn-primary,
body.nx-page .cookie-banner .btn-primary,
body.nx-page .cookie-modal .btn-primary {
    background: var(--nx-grad-gold);
    color: var(--nx-gold-ink);
    border: 0;
}

/* Pages héritées sous coquille nx (body.nx-page + classes historiques) :
   les titres parlent Fraunces et les boutons parlent doré, sans toucher
   aux tailles ni aux mises en page. La spécificité force les variantes
   .legal-hero/.home-hero__actions du vieux bundle. */
body.nx-page h1, body.nx-page h2 { font-family: var(--nx-font-head); }
body.nx-page .btn.btn-primary,
body.nx-page .home-hero__actions .btn-primary,
body.nx-page .home-cta__actions .btn-primary {
    background: var(--nx-grad-gold) !important;
    color: var(--nx-gold-ink) !important;
    border-color: transparent !important;
}
body.nx-page .btn.btn-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--nx-line-cool) !important;
    color: var(--nx-ink) !important;
}

/* --------------------------------------------------------------------------
   Partials partagés avec les pages héritées (onglets métier, pont fonctionnel)
   — habillage nx pour les pages passées en charte pure (sans landing-refresh),
   sans toucher aux règles historiques de public-bundle qui continuent de
   couvrir les pages restées sur la coquille héritée.
   -------------------------------------------------------------------------- */
body.nx-page:not(.landing-refresh) .public-vertical-tabs { padding: clamp(28px, 4vw, 48px) 0; }
body.nx-page:not(.landing-refresh) .public-vertical-tabs__shell {
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-lg);
    padding: clamp(18px, 3vw, 28px);
    background: rgba(255, 255, 255, 0.02);
}
body.nx-page:not(.landing-refresh) .public-vertical-tabs__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
body.nx-page:not(.landing-refresh) .public-vertical-tabs__head h2 {
    font-family: var(--nx-font-head);
    font-size: 1.35rem;
    margin: 6px 0;
}
body.nx-page:not(.landing-refresh) .public-vertical-tabs__head p { color: var(--nx-muted); margin: 0; }
body.nx-page:not(.landing-refresh) .public-vertical-tabs__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    color: var(--nx-gold-2);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
body.nx-page:not(.landing-refresh) .public-vertical-tabs__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
body.nx-page:not(.landing-refresh) .public-vertical-tabs__nav a {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--nx-line);
    border-radius: 14px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.16s ease, background 0.16s ease;
}
body.nx-page:not(.landing-refresh) .public-vertical-tabs__nav a strong { color: var(--nx-ink); font-size: 0.95rem; }
body.nx-page:not(.landing-refresh) .public-vertical-tabs__nav a small { color: var(--nx-faint); line-height: 1.35; }
body.nx-page:not(.landing-refresh) .public-vertical-tabs__nav a:hover { border-color: var(--nx-line-strong); background: rgba(255, 255, 255, 0.06); }
body.nx-page:not(.landing-refresh) .public-vertical-tabs__nav a.is-active {
    border-color: rgba(214, 180, 106, 0.55);
    background: rgba(214, 180, 106, 0.1);
}
body.nx-page:not(.landing-refresh) .public-vertical-tabs .home-eyebrow,
body.nx-page:not(.landing-refresh) .public-feature-bridge .home-eyebrow {
    display: inline-flex;
    color: var(--nx-gold-2);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
body.nx-page:not(.landing-refresh) .public-feature-bridge { padding: clamp(36px, 6vw, 64px) 0; }
body.nx-page:not(.landing-refresh) .public-feature-bridge .home-section__head {
    max-width: 720px;
    margin: 0 auto clamp(20px, 3.5vw, 36px);
    text-align: center;
}
body.nx-page:not(.landing-refresh) .public-feature-bridge .home-section__head h2 {
    font-family: var(--nx-font-head);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    margin: 8px 0;
}
body.nx-page:not(.landing-refresh) .public-feature-bridge .home-section__head p { color: var(--nx-muted); margin: 0; }
body.nx-page:not(.landing-refresh) .public-feature-bridge__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 20px);
}
body.nx-page:not(.landing-refresh) .public-feature-bridge__grid article {
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-card);
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.03);
}
body.nx-page:not(.landing-refresh) .public-feature-bridge__grid article span {
    color: var(--nx-gold-2);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.nx-page:not(.landing-refresh) .public-feature-bridge__grid article h3 {
    font-family: var(--nx-font-head);
    font-size: 1.05rem;
    margin: 6px 0;
}
body.nx-page:not(.landing-refresh) .public-feature-bridge__grid article p { color: var(--nx-muted); margin: 0; }
@media (max-width: 860px) {
    body.nx-page:not(.landing-refresh) .public-feature-bridge__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   SHELL PUBLIC SANS BUNDLE — composants globaux de base.html (bandeau et
   modale cookies, modale contact humain, modale demo vocale, fond etoile
   pm-bg/public-atmosphere, .container, famille .btn) extraits de
   public-bundle.css pour que les pages nx pures puissent NE PAS charger le
   bundle (1,3 Mo). Source de verite : public-bundle.css — si un de ces
   composants y evolue, re-extraire (scripts d'extraction dans l'historique
   du chantier, ou copier le bloc a la main). Les variables ci-dessous
   reproduisent le theme nuit du bundle, scopees pour ne pas toucher aux
   pages qui le chargent encore (live_demo, create_agent, home de secours,
   pages verticales).
   ========================================================================== */
body.nx-page:not(.landing-refresh) {
    --text: #f5f7ff;
    --border: rgba(255, 255, 255, 0.1);
    --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.24);
    --gradient-button: var(--nx-grad-gold, linear-gradient(135deg, #d6b46a, #f2d58a));
    --container: 1180px;
}

@media (max-width: 720px) {
    body.landing-page :is(input, textarea, select, button, .btn) {
        min-width: 0;
        max-width: 100%;
    }
}

:where(
    .container,
    .site-main,
    .nav,
    .menu,
    .legal-card,
    .home-use-grid > *,
    .home-faq-grid > *,
    .home-demo-grid > *,
    .home-steps > *,
    .home-split > *,
    .dashboard-page,
    .crm-page,
    .sms-page,
    .email-dashboard-page,
    .calendar-page,
    .capacity-page,
    .contacts-page,
    .billing-page,
    .test-agent-page,
    .import-page,
    .admin-number-page,
    .admin-platform,
    .admin-batch-page
) {
    min-width: 0;
}

.human-contact-modal[hidden],
.demo-booking-modal[hidden] {
    display: none !important;
}

.human-contact-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 20px;
}

.human-contact-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(10px);
}

.human-contact-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(8, 17, 31, 0.96), rgba(15, 23, 42, 0.94));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
}

.human-contact-modal.is-visible .human-contact-modal__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.human-contact-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    font-size: 1.5rem;
    cursor: pointer;
}

.human-contact-modal__content {
    display: grid;
    gap: 16px;
    padding: clamp(24px, 4vw, 36px);
}

.human-contact-modal__eyebrow,
.site-footer__title {
    color: #7dd3fc;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.human-contact-modal__content h2 {
    color: #f8fafc;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.1;
}

.human-contact-modal__content > p,
.human-contact-form__note,
.site-footer__pitch,
.site-footer__meta {
    color: rgba(226, 232, 240, 0.76);
}

.human-contact-form {
    display: grid;
    gap: 16px;
}

.human-contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.human-contact-form label {
    display: grid;
    gap: 8px;
}

.human-contact-form label span {
    color: #f8fafc;
    font-size: 0.84rem;
    font-weight: 800;
}

.human-contact-form :is(input, textarea) {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.7);
    color: #f8fafc;
    padding: 13px 14px;
    font: inherit;
}

.human-contact-form textarea {
    min-height: 128px;
    resize: vertical;
}

.human-contact-form :is(input, textarea):focus {
    outline: none;
    border-color: rgba(125, 211, 252, 0.48);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}

.human-contact-form__footer,
.human-contact-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.human-contact-form__note {
    margin: 0;
    font-size: 0.9rem;
}

.human-contact-form__note a,
.site-footer__contact-link,
.site-footer__meta a {
    color: #f8fafc;
    font-weight: 800;
    text-decoration: none;
    display: inline-block;
    padding: 8px 2px;
    margin: -6px 0;
}

.human-contact-form__status {
    min-height: 22px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.human-contact-form__status[data-state="pending"] {
    color: #bae6fd;
}

.human-contact-form__status[data-state="success"] {
    color: #86efac;
}

.human-contact-form__status[data-state="error"] {
    color: #fca5a5;
}

@media (max-width: 720px) {
    .human-contact-modal {
        padding: 12px;
    }
    .human-contact-form__grid,
    .human-contact-form__footer,
    .human-contact-form__actions,
    .site-footer__inner,
    .site-footer__links {
        grid-template-columns: 1fr;
    }
    .human-contact-form__footer,
    .human-contact-form__actions {
        align-items: stretch;
    }
}

.container {
    width: min(calc(100% - 2rem), var(--container));
    margin-inline: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    padding: 0 22px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-nav {
    color: white;
    background: var(--gradient-button);
    box-shadow: 0 12px 30px rgba(106, 47, 216, 0.18);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    padding: 0 22px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-nav {
    color: white;
    background: var(--gradient-button);
    box-shadow: 0 12px 30px rgba(106, 47, 216, 0.18);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    padding: 0 22px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-nav {
    color: white;
    background: var(--gradient-button);
    box-shadow: 0 12px 30px rgba(106, 47, 216, 0.18);
}

.btn-secondary {
    background: white;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    box-shadow: var(--shadow-soft);
}

.btn-tertiary {
    background: var(--gradient-button);
    color: white;
    border: none;
}

.btn-tertiary:hover {
    box-shadow: var(--shadow-soft);
    opacity: 0.95;
}

@media (max-width: 560px) {
    .btn {
        width: 100%;
    }
    .nav-actions .btn {
        width: auto;
        min-height: 42px;
        padding: 0 12px;
    }
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.05);
}

@media (max-width: 720px) {
    .not-found-actions .btn {
        width: 100%;
        white-space: normal;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    :where(.container, .landing-refresh .container) {
        width: min(calc(100% - 32px), var(--container));
    }
}

@media (max-width: 760px) {
    :where(.container, .landing-refresh .container) {
        width: min(calc(100% - 20px), var(--container));
    }
}

@media (max-width: 860px) {
    :is(.site-header, main, .container, .nav, .dashboard-page, .crm-page, .sms-page, .calendar-page, .capacity-page, .contacts-page, .billing-page, .test-agent-page, .import-page, .admin-number-page, .admin-platform, .admin-batch-page) {
        min-width: 0;
    }
    :is(input, select, textarea, button, .btn, .btn-nav, .btn-secondary, .crm-button, .sms-button, .calendar-button, .capacity-icon-button, .contacts-icon-button, .billing-button, .wizard-button, .admin-number-action-button) {
        max-width: 100%;
    }
}

.public-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.public-atmosphere__orb,
.public-atmosphere__grid,
.public-atmosphere__badge,
.public-atmosphere__signal {
    position: absolute;
}

.public-atmosphere__orb {
    border-radius: 999px;
    filter: blur(12px);
    opacity: 0.9;
    animation: publicDrift 22s ease-in-out infinite;
}

.public-atmosphere__orb--one {
    top: 10%;
    left: -5%;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.24), transparent 64%);
}

.public-atmosphere__orb--two {
    top: 12%;
    right: -4%;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 64%);
    animation-delay: -7s;
}

.public-atmosphere__orb--three {
    bottom: 8%;
    left: 22%;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12), transparent 66%);
    animation-delay: -12s;
}

.public-atmosphere__grid {
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
    background-size: 82px 82px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.88), transparent 82%);
    opacity: 0.42;
}

.public-atmosphere__badge {
    display: grid;
    gap: 4px;
    min-width: 190px;
    max-width: 220px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: rgba(7, 13, 24, 0.62);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 48px rgba(2, 6, 23, 0.22);
    animation: publicBadgeFloat 18s ease-in-out infinite;
}

.public-atmosphere__badge strong {
    color: #f8fafc;
    font-size: 0.9rem;
    line-height: 1.1;
}

.public-atmosphere__badge span {
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.public-atmosphere__badge--incoming {
    top: 16%;
    left: 4%;
}

.public-atmosphere__badge--sms {
    top: 54%;
    right: 6%;
    animation-delay: -6s;
}

.public-atmosphere__badge--transcript {
    bottom: 10%;
    left: 8%;
    animation-delay: -10s;
}

.public-atmosphere__signal {
    display: grid;
    grid-auto-flow: column;
    align-items: end;
    gap: 10px;
    height: 90px;
    opacity: 0.55;
}

.public-atmosphere__signal span {
    display: block;
    width: 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.1), rgba(59, 130, 246, 0.95));
    animation: publicSignal 1.8s ease-in-out infinite;
}

.public-atmosphere__signal span:nth-child(2) { animation-delay: -0.22s; }

.public-atmosphere__signal span:nth-child(3) { animation-delay: -0.44s; }

.public-atmosphere__signal span:nth-child(4) { animation-delay: -0.66s; }

.public-atmosphere__signal--left {
    top: 32%;
    left: 6%;
}

.public-atmosphere__signal--right {
    right: 7%;
    bottom: 20%;
}

@media (prefers-reduced-motion: reduce) {
    .public-atmosphere__orb,
    .public-atmosphere__badge,
    .public-atmosphere__signal span,
    .home-ringing-phone__device,
    .home-ringing-phone__waves,
    .home-waveform span,
    .home-call-rail__card,
    .home-transcript-stream__line,
    .home-transcript-stream__step,
    .home-mobile-livefeed__line,
    .home-phone__meter span,
    .home-phone__entry,
    .home-summary-card__progress span,
    .home-summary-card__timeline article,
    .home-summary-card__timeline article::before,
    .landing-refresh .btn,
    .landing-refresh :is(.legal-card, .home-use-grid article, .home-faq-grid article, .home-demo-grid article, .home-realtime-grid article, .home-control-list div, .home-summary-card, .home-phone__screen, .home-steps article, .home-strip__grid div) {
        animation: none !important;
        transition: none !important;
    }
}

body[data-theme="light"] :is(.human-contact-modal__content > p, .human-contact-form__note, .site-footer__pitch, .site-footer__meta) {
    color: #526174;
}

.demo-booking-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.demo-booking-modal[hidden] { display: none; }

.demo-booking-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 8, 18, 0.78);
    backdrop-filter: blur(10px);
}

.demo-booking-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1180px, calc(100vw - 24px));
    height: min(92dvh, 820px);
    border: 1px solid rgba(218, 185, 108, 0.24);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(218, 185, 108, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(5, 12, 24, 0.99), rgba(8, 18, 34, 0.99));
    box-shadow: 0 44px 140px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.demo-booking-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 74px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid rgba(218, 185, 108, 0.16);
    color: #fff8ea;
    background:
        linear-gradient(180deg, rgba(218, 185, 108, 0.06), transparent 70%),
        rgba(3, 10, 23, 0.52);
}

.demo-booking-modal__intro {
    display: grid;
    gap: 6px;
}

.demo-booking-modal__header h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(1.8rem, 2.4vw, 2.55rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.demo-booking-modal__header p {
    margin: 0;
    max-width: 760px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 1rem;
    line-height: 1.68;
}

.demo-booking-modal__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.demo-booking-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
        rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.demo-booking-modal__badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f3d58a;
    box-shadow: 0 0 0 0 rgba(243, 213, 138, 0.5);
    animation: demoBookingPulse 1.8s ease-out infinite;
}

.demo-booking-modal__close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(218, 185, 108, 0.22);
    border-radius: 999px;
    background: rgba(218, 185, 108, 0.08);
    color: #f7e6bc;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.demo-booking-modal__close:hover,
.demo-booking-modal__close:focus-visible {
    transform: scale(1.04);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.24);
}

.demo-booking-modal__body {
    min-height: 0;
    padding: 8px;
    background:
        linear-gradient(135deg, rgba(218, 185, 108, 0.06), transparent 28%),
        #050b17;
}

.demo-booking-modal__body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 22px;
    background: #050b17;
    box-shadow: inset 0 0 0 1px rgba(218, 185, 108, 0.12);
}

@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
    .demo-booking-modal__dialog {
        width: min(1120px, calc(100vw - 20px));
        height: calc(100svh - 20px);
        margin: 10px auto;
        border-radius: 26px;
    }
    .demo-booking-modal__header {
        min-height: 64px;
        padding: 12px 16px 10px;
    }
    .demo-booking-modal__intro .home-eyebrow {
        display: none;
    }
    .demo-booking-modal__header h2 {
        font-size: 2rem;
    }
    .demo-booking-modal__body {
        padding: 8px;
    }
    .demo-booking-modal__body iframe {
        border-radius: 20px;
    }
}

@media (max-width: 720px) {
    .demo-booking-modal__dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    .demo-booking-modal__header {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 16px 14px 14px;
    }
    .demo-booking-modal__badges {
        width: 100%;
        justify-content: flex-start;
    }
    .demo-booking-modal__body {
        padding: 0;
    }
    .demo-booking-modal__body iframe {
        border-radius: 0;
    }
}

@media (max-width: 820px) {
    .auth-card .btn,
    .auth-card .btn-nav,
    .auth-social-btn,
    .billing-button,
    .billing-back,
    .test-agent-page .btn-ui,
    .personalized-demo__actions .btn,
    .demo-step-footer .btn,
    .demo-booking-launch__actions .btn,
    .demo-booking-submit .btn,
    .optout-submit {
        width: 100%;
        max-width: none;
        justify-content: center;
    }
}

.cookie-banner {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1500;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    width: min(920px, calc(100vw - 36px));
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.96);
    color: #f8fafc;
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.34);
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition:
        opacity 0.42s ease,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cookie-banner[hidden],
.cookie-modal[hidden] {
    display: none !important;
}

.cookie-banner__body {
    display: grid;
    gap: 6px;
}

.cookie-banner__body strong,
.cookie-modal__dialog h2,
.cookie-choice strong {
    color: inherit;
}

.cookie-banner__body p,
.cookie-modal__dialog p,
.cookie-choice small {
    margin: 0;
    color: rgba(226, 232, 240, 0.78);
    line-height: 1.5;
}

.cookie-banner__actions,
.cookie-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 1510;
    display: grid;
    place-items: center;
    padding: 18px;
}

.cookie-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.68);
}

.cookie-modal__dialog {
    position: relative;
    display: grid;
    gap: 16px;
    width: min(680px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: #0f172a;
    color: #f8fafc;
    box-shadow: 0 30px 90px rgba(2, 6, 23, 0.42);
}

.cookie-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    color: #f8fafc;
    cursor: pointer;
}

.cookie-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.62);
}

.cookie-choice span {
    display: grid;
    gap: 4px;
}

.cookie-choice input {
    width: 22px;
    height: 22px;
    accent-color: #60a5fa;
}

@media (max-width: 760px) {
    .cookie-banner {
        left: 14px;
        right: 14px;
        bottom: 14px;
        grid-template-columns: 1fr;
        width: auto;
    }
    html.app-mobile-shell .cookie-banner {
        bottom: calc(112px + env(safe-area-inset-bottom));
    }
    .cookie-banner__actions,
    .cookie-modal__actions {
        justify-content: stretch;
    }
    .cookie-banner__actions .btn,
    .cookie-modal__actions .btn {
        flex: 1 1 140px;
    }
}

.container,
.dashboard-page,
.crm-page,
.sms-page,
.email-dashboard-page,
.calendar-page,
.capacity-page,
.contacts-page,
.billing-page,
.test-agent-page,
.import-page,
.admin-number-page,
.admin-platform,
.admin-batch-page,
.home-gateway-shell,
.live-demo-shell,
.demo-booking-shell {
    width: min(100%, var(--container, 1180px));
}

/* Ces classes de page vivent parfois sur le <body> lui-même (ex. email.html :
   body_class « dashboard-page email-dashboard-page ») : le body se figeait
   alors à 1180px ancré à gauche, nav et footer compris. La largeur contrainte
   ne concerne que les conteneurs internes, jamais le body. */
body:is(.container, .dashboard-page, .crm-page, .sms-page, .email-dashboard-page,
.calendar-page, .capacity-page, .contacts-page, .billing-page, .test-agent-page,
.import-page, .admin-number-page, .admin-platform, .admin-batch-page,
.home-gateway-shell, .live-demo-shell, .demo-booking-shell) {
    width: auto;
}

:is(.container, .home-gateway-shell, .live-demo-shell, .demo-booking-shell) {
    padding-inline: clamp(16px, 4vw, 28px);
}

:is(.btn, button, input, select, textarea, .public-menu-link, .menu-icon-link, .nav-auth-link) {
    max-width: 100%;
}

@media (max-width: 920px) {
    .home-hero__actions .btn,
    .home-cta__actions .btn,
    .vertical-hero__actions .btn,
    .demo-booking-launch__actions .btn,
    .demo-step-footer .btn,
    .demo-booking-submit .btn,
    .pricing-hero__actions .btn {
        flex: 1 1 220px;
        width: auto;
    }
}

@media (max-width: 760px) {
    :is(.container, .home-gateway-shell, .live-demo-shell, .demo-booking-shell) {
        padding-inline: 14px;
    }
    .cookie-banner {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: none !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }
    .cookie-banner__body {
        gap: 6px;
    }
    .cookie-banner__body p {
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
    }
    .cookie-banner__actions,
    .cookie-modal__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
    }
    .cookie-banner__actions .btn,
    .cookie-modal__actions .btn {
        width: 100%;
        min-height: 42px;
    }
    .demo-booking-modal__dialog,
    .cookie-modal__dialog,
    .human-contact-modal__dialog {
        width: min(100% - 20px, 620px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow: auto !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 380px) {
    :is(.container, .home-gateway-shell, .live-demo-shell, .demo-booking-shell) {
        padding-inline: 10px;
    }
    .btn,
    button {
        font-size: 0.92rem;
    }
}

@media (max-width: 720px) {
    .demo-booking-modal__dialog {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .demo-booking-modal__header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 72px !important;
        padding: 14px 16px 12px !important;
    }
    .demo-booking-modal__intro {
        gap: 0 !important;
        min-width: 0 !important;
    }
    .demo-booking-modal__intro .home-eyebrow,
    .demo-booking-modal__header p,
    .demo-booking-modal__badges {
        display: none !important;
    }
    .demo-booking-modal__header h2 {
        font-size: clamp(1.5rem, 6.2vw, 1.85rem) !important;
        line-height: 1 !important;
        letter-spacing: -0.04em !important;
        white-space: nowrap !important;
    }
    .demo-booking-modal__close {
        justify-self: end !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1.45rem !important;
    }
    .demo-booking-flow-nav .btn {
        justify-self: start !important;
        width: auto !important;
        min-height: 42px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        font-size: 0.92rem !important;
    }
    .demo-booking-section--embed .demo-booking-embed-card--simple .demo-selected-summary .btn {
        width: auto !important;
        min-height: 40px !important;
        padding-inline: 14px !important;
    }
    .demo-booking-section--embed .demo-booking-embed-card--simple .demo-step-footer .btn,
    .demo-booking-section--embed .demo-booking-embed-card--simple .demo-booking-submit .btn {
        width: 100% !important;
        min-height: 50px !important;
    }
}

@media (min-width: 900px) and (max-width: 1220px) and (orientation: landscape) {
    body.dashboard-showcase-page .public-feature-bridge .container {
        max-width: 1110px !important;
    }
}

/* =========================================================
   Phase 6 - bloc commun : le decor de nuit EXACT de l'index
   (constellation double couche, halos or/bleu, grain) rendu
   par base.html sur toutes les pages publiques sombres.
   La home motion garde sa version animee GSAP (masque ici).
   Valeurs copiees de home_motion.html sans approximation.
   ========================================================= */
.pm-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    display: none;
}

.pm-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(140% 90% at 78% -12%, rgba(107, 125, 255, 0.14), transparent 55%),
        radial-gradient(120% 100% at -8% 108%, rgba(102, 216, 255, 0.08), transparent 55%),
        linear-gradient(180deg, #030815 0%, #050b1e 40%, #03070f 100%);
}

.pm-bg__stars,
.pm-bg__stars--2 {
    position: absolute;
    inset: -20% 0;
    background-image:
        radial-gradient(1.2px 1.2px at 12% 24%, rgba(248, 251, 255, 0.5), transparent 100%),
        radial-gradient(1px 1px at 34% 68%, rgba(248, 251, 255, 0.35), transparent 100%),
        radial-gradient(1.4px 1.4px at 58% 12%, rgba(255, 239, 183, 0.4), transparent 100%),
        radial-gradient(1px 1px at 71% 47%, rgba(248, 251, 255, 0.32), transparent 100%),
        radial-gradient(1.2px 1.2px at 86% 78%, rgba(102, 216, 255, 0.36), transparent 100%),
        radial-gradient(1px 1px at 22% 88%, rgba(248, 251, 255, 0.3), transparent 100%),
        radial-gradient(1.1px 1.1px at 47% 39%, rgba(248, 251, 255, 0.28), transparent 100%),
        radial-gradient(1.3px 1.3px at 92% 18%, rgba(255, 239, 183, 0.3), transparent 100%);
    background-size: 920px 760px;
    opacity: 0.7;
}

.pm-bg__stars--2 {
    background-size: 620px 540px;
    opacity: 0.4;
}

.pm-bg__halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.pm-bg__halo--gold {
    width: 55vw;
    height: 55vw;
    top: -20vw;
    right: -16vw;
    background: radial-gradient(circle, rgba(243, 213, 138, 0.13), transparent 62%);
}

.pm-bg__halo--blue {
    width: 48vw;
    height: 48vw;
    top: 60vh;
    left: -18vw;
    background: radial-gradient(circle, rgba(102, 216, 255, 0.1), transparent 62%);
}

.pm-grain {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 240px 240px;
    display: none;
}

.demo-booking-modal {
    padding: 12px !important;
}

.demo-booking-modal__dialog {
    width: min(1180px, calc(100vw - 24px)) !important;
    height: min(92dvh, 820px) !important;
    max-height: calc(100dvh - 24px) !important;
}

.demo-booking-modal__header {
    padding: clamp(18px, 2.6vw, 32px) !important;
}

.demo-booking-modal__body {
    padding: 12px !important;
    overflow: hidden !important;
}

.demo-booking-modal__iframe {
    scrollbar-width: none !important;
}

.demo-booking-modal__iframe::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

@media (min-width: 900px) and (max-height: 860px) {
    .demo-booking-modal__dialog {
        width: min(1120px, calc(100vw - 20px)) !important;
        height: calc(100svh - 20px) !important;
        max-height: calc(100svh - 20px) !important;
    }
}

@media (max-width: 760px) {
    .demo-booking-modal {
        padding: 8px !important;
    }
    .demo-booking-modal__dialog {
        width: calc(100vw - 16px) !important;
        height: calc(100svh - 16px) !important;
        max-height: calc(100svh - 16px) !important;
    }
}

@media (max-width: 720px) {
    .demo-booking-modal {
        padding: 0 !important;
    }
    .demo-booking-modal__dialog {
        width: 100vw !important;
        height: 100svh !important;
        max-height: 100svh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    .demo-booking-modal__body {
        min-height: 0 !important;
        overflow: hidden !important;
    }
}

/* Public accessibility utility. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.demo-booking-modal input#demo-booking-phone,
body.demo-booking-page input#demo-booking-phone {
    min-height: 46px !important;
}

@media (max-width: 1220px) {
    body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(a.btn, button.btn, .pricing-plans-shell__actions .btn, .marketing-inline-actions .btn, .home-cta__actions .btn, .home-hero__actions .btn),
    body.vertical-page:not(.home-gateway-page) :is(a.btn, button.btn, .pricing-plans-shell__actions .btn, .marketing-inline-actions .btn, .home-cta__actions .btn, .home-hero__actions .btn),
    body.how-it-works-page :is(a.btn, button.btn, .home-premium-actions .btn, .home-final-cta__inner .btn, .home-studio-message button) {
        min-height: 46px !important;
        height: auto !important;
        padding-block: 12px !important;
        line-height: 1.2 !important;
    }
}

body.blog-index-page:not(.app-shell) :is(.article-card a.btn.btn-primary, .blog-card a.btn.btn-primary, a.btn.btn-primary) {
    min-height: 46px !important;
    height: auto !important;
    padding-block: 12px !important;
    line-height: 1.2 !important;
}

@media (min-width: 721px) and (max-width: 1220px) {
    .demo-booking-modal {
        padding: 8px !important;
    }
    .demo-booking-modal__dialog {
        width: min(1180px, calc(100vw - 16px)) !important;
        height: calc(100svh - 16px) !important;
        max-height: calc(100svh - 16px) !important;
        border-radius: 24px !important;
    }
    .demo-booking-modal__header {
        min-height: 60px !important;
        padding: 10px 14px !important;
    }
    .demo-booking-modal__header p,
    .demo-booking-modal__badges {
        display: none !important;
    }
    .demo-booking-modal__body {
        padding: 6px !important;
        overflow: hidden !important;
    }
    .demo-booking-modal__iframe {
        height: 100% !important;
        overflow: hidden !important;
    }
}

/* Plancher tactile du bandeau cookies (audit refonte 07/08) : quelles que
   soient les variantes par page, un bouton de consentement reste >=34px. */
/* Toutes les variantes par page (vertical-page, live-demo-body, gateway…)
   redéfinissent le bandeau cookies : le plancher doit gagner PARTOUT. */
body .cookie-banner__actions .btn,
body .cookie-modal__actions .btn,
body.vertical-page .cookie-banner__actions .btn,
body.live-demo-body .cookie-banner__actions .btn,
body.home-gateway-page .cookie-banner__actions .btn {
    min-height: 34px !important;
    font-size: 0.75rem !important;
}

.cookie-choice-list {
    display: grid;
    gap: 10px;
}

/* Petits orphelins partages, portes ici pour les pages sans bundle. */
body.nx-page:not(.landing-refresh) .home-section__head--center { text-align: center; margin-inline: auto; }
body.nx-page:not(.landing-refresh) .home-trust-note { margin: 0; text-align: center; font-weight: 700; color: var(--nx-muted); }
body.nx-page:not(.landing-refresh) .human-contact-modal__eyebrow { color: var(--nx-gold-2); }